/* ─────────────────────────────────────────────
   banner.css – gemeinsames Banner-Aussehen
   Größe & Hintergrund über CSS-Variablen steuerbar:
   --banner-w, --banner-h, --banner-bg
   Farbpalette:
   #080e1a Hintergrund  #0d1828 Karten  #1a3a5a Rahmen
   #29d4a0 Akzent       #e8edf5 Titel   #6a8aaa Subtext
   ───────────────────────────────────────────── */

.banner {
  --banner-w: 700px;
  --banner-h: 300px;
  --banner-bg: linear-gradient(135deg, #080e1a 0%, #0d1828 40%, #080e1a 100%);
  width: var(--banner-w);
  height: var(--banner-h);
  position: relative;
  overflow: hidden;
  border: 1px solid #29d4a044;
  box-shadow: 0 0 40px #29d4a022, inset 0 0 60px #00000088;
  font-family: 'Rajdhani', sans-serif;
}

.banner-bg {
  position: absolute;
  inset: 0;
  background: var(--banner-bg);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Hintergrund-Struktur (Waben / Grid / Punkte …) – per JS über CSS-Variablen gesteuert.
   --bg-pattern: data-URI des SVG (oder 'none'), --bg-pattern-size: Kachelgröße,
   --bg-pattern-opacity: Sichtbarkeit. Siehe applySettings() in banner.js. */
.banner-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-pattern, none);
  background-repeat: repeat;
  background-size: var(--bg-pattern-size, 56px);
  opacity: var(--bg-pattern-opacity, 0.8);
}

/* Dunkler Overlay über dem Hintergrund(bild) – hält die Schrift lesbar.
   Links dunkler (dort steht der Text), rechts heller (Bild sichtbar). */
.banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}

/* Eigenes Logo – freie Platzierung via inline left/top (gesetzt durch banner.js) */
.logo-wrap {
  position: absolute;
  top: 22px; left: auto; right: 16px; bottom: auto;
  z-index: 6;
  pointer-events: none;
  display: none;
}
.logo-wrap.show { display: inline-block; }
.banner-logo {
  position: relative;
  z-index: 2;
  display: block;
  height: 44px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.8));
}

/* ── Logo-Effekt-Ebene (Rauch / Glow / Partikel / Maske) ── */
.logo-fx {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 240%; height: 240%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  --fx-color: #29d4a0;
}
.logo-fx.on { opacity: 1; }
.logo-fx > * { position: absolute; }

/* Glow-Puls */
.logo-fx[data-style="glow"] .fx-core {
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fx-color) 0%, transparent 68%);
  animation: fxGlow 3s ease-in-out infinite;
}
@keyframes fxGlow { 0%,100% { transform: scale(.82); opacity:.55; } 50% { transform: scale(1.12); opacity:1; } }

/* Rauch / Nebel */
.logo-fx[data-style="smoke"] .fx-blob {
  width: 80%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--fx-color) 0%, transparent 62%);
  opacity: .5;
}
.logo-fx[data-style="smoke"] .fx-blob.b1 { left:6%;  top:8%;  animation: fxSmoke1 6s ease-in-out infinite; }
.logo-fx[data-style="smoke"] .fx-blob.b2 { left:24%; top:18%; animation: fxSmoke2 7.5s ease-in-out infinite; }
.logo-fx[data-style="smoke"] .fx-blob.b3 { left:14%; top:2%;  animation: fxSmoke3 9s ease-in-out infinite; }
@keyframes fxSmoke1 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(10%,-14%) scale(1.18);} }
@keyframes fxSmoke2 { 0%,100%{ transform:translate(0,0) scale(1.1);} 50%{ transform:translate(-12%,-8%) scale(.9);} }
@keyframes fxSmoke3 { 0%,100%{ transform:translate(0,0) scale(.95);} 50%{ transform:translate(6%,-18%) scale(1.25);} }

/* Partikel / Funken */
.logo-fx[data-style="particles"] .fx-dot {
  width: 9%; height: 9%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fx-color) 0%, transparent 70%);
}
@keyframes fxFloat { 0%{ transform:translateY(20%); opacity:0; } 30%{opacity:1;} 100%{ transform:translateY(-60%); opacity:0; } }

/* Verlaufs-Maske / Sheen über dem Logo */
.logo-fx[data-style="mask"] { width:100%; height:100%; z-index:3; overflow:hidden; }
.logo-fx[data-style="mask"] .fx-mask {
  inset:0;
  background: linear-gradient(115deg, transparent 38%, var(--fx-color) 50%, transparent 62%);
  animation: fxSheen 3.5s linear infinite;
}
@keyframes fxSheen { 0%{ transform:translateX(-130%);} 100%{ transform:translateX(130%);} }

.scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #29d4a066, transparent);
  animation: scan 3s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes scan {
  0%   { top: -2px; }
  100% { top: calc(100% + 2px); }
}

.corner { position: absolute; width: 24px; height: 24px; z-index: 5; pointer-events: none; }
.corner::before, .corner::after { content: ''; position: absolute; background: #29d4a0; }
.corner::before { width: 100%; height: 2px; top: 0; left: 0; }
.corner::after  { width: 2px; height: 100%; top: 0; left: 0; }
.corner.tl { top: 8px; left: 8px; }
.corner.tr { top: 8px; right: 8px; transform: scaleX(-1); }
.corner.bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.corner.br { bottom: 8px; right: 8px; transform: scale(-1); }

.slides { position: absolute; inset: 0; z-index: 2; }
.slide {
  position: absolute;
  inset: 0 0 38px 0;            /* unten Platz für die Status-Leiste */
  display: flex;
  align-items: flex-start;      /* oben ausrichten → Titel liegt auf jeder Karte an gleicher Stelle */
  padding: 10px 28px;
  opacity: 0;
  transition: opacity var(--slide-trans-ms, 800ms) ease,
              transform var(--slide-trans-ms, 800ms) cubic-bezier(.22,.61,.36,1),
              filter var(--slide-trans-ms, 800ms) ease;
  pointer-events: none;
}
.slide.active { opacity: 1; pointer-events: auto; transform: none; filter: none; }

/* ── Übergangs-Effekte (data-fx auf .slides) ──
   Der inaktive Zustand bekommt Versatz/Transform; .active animiert zur Ruhelage. */
.slides[data-fx="none"] .slide   { transition: none; }
.slides[data-fx="slideL"] .slide { transform: translateX(60px); }
.slides[data-fx="slideR"] .slide { transform: translateX(-60px); }
.slides[data-fx="slideU"] .slide { transform: translateY(44px); }
.slides[data-fx="slideD"] .slide { transform: translateY(-44px); }
.slides[data-fx="zoom"] .slide   { transform: scale(.82); }
.slides[data-fx="zoomout"] .slide{ transform: scale(1.16); }
.slides[data-fx="flip"] .slide   { transform: perspective(900px) rotateY(38deg); }
.slides[data-fx="rotate"] .slide { transform: rotate(-7deg) scale(.88); }
.slides[data-fx="blur"] .slide   { filter: blur(9px); }
.slides[data-fx="glitch"] .slide { transform: translateX(14px) skewX(7deg); filter: saturate(2.4) hue-rotate(25deg); }
.slides[data-fx="swirl"] .slide  { transform: rotate(18deg) scale(.6); }

.slide-icon-col {
  flex-shrink: 0;
  width: 106px;              /* feste Breite → Icon & Text immer an gleicher Stelle, kein "Wackeln" */
  min-width: 106px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-right: 28px;
  margin-top: 18px;
}
.icon-frame {
  width: 88px; height: 88px;
  border: 2px solid #1a3a5a;
  border-radius: 12px;
  background: linear-gradient(135deg, #0d1828, #080e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 20px #29d4a022;
  overflow: hidden;
}
.icon-frame::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  border: 1px solid #29d4a033;
}
.icon-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

.slide-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #29d4a0;
  background: #29d4a018;
  border: 1px solid #29d4a044;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.slide-text-col {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
}
.slide-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: #29d4a0aa;
  text-transform: uppercase;
}
.slide-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #e8edf5;
  line-height: 1.15;
  text-shadow: 0 0 20px #29d4a055;
}
.slide-title span { color: #29d4a0; }
.slide-body {
  font-size: 16px;
  color: #6a8aaa;
  line-height: 1.45;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}
.slide-body strong { color: #29d4a0; font-weight: 600; }
.slide-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.slide-steps li {
  font-size: 14px;
  color: #6a8aaa;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}
.slide-steps li::before { content: '▸'; color: #29d4a0; font-size: 10px; flex-shrink: 0; }

/* ── Outro-Slide (altes Banner als Bild, am Ende) ──
   Vollbild über die ganze Bannerfläche, eigene Hintergrundfarbe für „Contain"-Balken. */
.slide.outro-slide {
  inset: 0 !important;          /* auch über die Status-Leiste – Outro ist Vollbild */
  padding: 0 !important;
  display: block;
  background: var(--outro-bg, #080e1a);
}
.slide.outro-slide .outro-img {
  width: 100%;
  height: 100%;
  object-fit: var(--outro-fit, contain);
  display: block;
}
/* Während das Outro aktiv ist, die normale Banner-„Deko" ausblenden → nur das alte Banner */
.banner.outro-active .bottom-bar,
.banner.outro-active .progress-wrap,
.banner.outro-active .scan-line,
.banner.outro-active .corner,
.banner.outro-active .logo-wrap,
.banner.outro-active .game-icons,
.banner.outro-active .server-groups { display: none !important; }

/* ── Game-Icons (rechter freier Bereich, hochladbar) ── */
.game-icons {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: none;
  grid-auto-rows: max-content;
  gap: 8px;
  pointer-events: none;
}
.game-icons .game-icon {
  width: 46px; height: 46px;
  object-fit: cover;
  padding: 2px;
  border: 1px solid #1a3a5a;
  background:
    linear-gradient(135deg, #0d1828, #080e1a) padding-box,
    linear-gradient(135deg, #29d4a0cc, #29d4a022 55%, #29d4a066) border-box;
  box-shadow:
    0 0 0 1px #00000055,
    0 2px 6px #00000066,
    0 0 14px #29d4a033,
    inset 0 0 8px #29d4a014;
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-icons .game-icon:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px #00000055,
    0 4px 10px #00000088,
    0 0 22px #29d4a066,
    inset 0 0 10px #29d4a022;
}
.game-icons.round  .game-icon { border-radius: 50%; }
.game-icons.square .game-icon { border-radius: 12px; }

/* ── Servergruppen – rotierende Badge ── */
.server-groups {
  position: absolute;
  left: 22px; top: 20px;
  z-index: 5;
  pointer-events: none;
}
.server-groups .sg-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: #29d4a0;
  background: #29d4a014;
  border: 1px solid #29d4a044;
  padding: 5px 11px;
  border-radius: 6px;
  box-shadow: 0 0 10px #29d4a018;
  align-items: center;
  justify-content: center;       /* Text zentriert in fester Box */
  gap: 6px;
  white-space: nowrap;
  width: 116px;                  /* feste Breite → Kasten wackelt beim Rotieren nicht mehr */
  box-sizing: border-box;
  display: none;
}
.server-groups .sg-badge.active { display: inline-flex; }

.bottom-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: #00000066;
  border-top: 1px solid #29d4a022;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 10;
  gap: 10px;
}
.server-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  color: #29d4a088;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: 3px;
  margin-left: 3px;
}
.server-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #29d4a0cc;
  margin-bottom: 3px;
}
.lang-flag {
  width: 26px;
  height: 17px;
  border-radius: 2px;
  margin-bottom: 3px;
  margin-left: 3px;
  flex-shrink: 0;
  object-fit: cover;
}
.lang-code {
  font-family: 'Orbitron', sans-serif;
  font-size: 7px; font-weight: 900; letter-spacing: .5px;
  color: #29d4a088; text-transform: uppercase; margin-bottom: 3px;
}
.bar-sep { flex: 1; }
.dots { display: flex; gap: 5px; align-items: center; margin-bottom: 5px; margin-right: 6px; }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #29d4a033;
  border: 1px solid #29d4a055;
  cursor: pointer;
  transition: all .3s;
}
.dot.active { background: #29d4a0; box-shadow: 0 0 6px #29d4a0; width: 18px; border-radius: 3px; }
.progress-wrap {
  position: absolute;
  bottom: 36px; left: 0; right: 0;
  height: 2px;
  background: #29d4a011;
  z-index: 10;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #29d4a0, #1aaa80);
  width: 0%;
  box-shadow: 0 0 6px #29d4a0;
}