/* =====================================================================
   DOGFATHER UNIVERSE — main.css
   Gemeinsames Design-System für alle drei Welten (Dogfather / HasiDog /
   Manager Dogfather). Farben kommen aus den theme-*.css Dateien über
   CSS-Variablen — dieses File ist bewusst themen-neutral.
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden gehört auf BEIDE Elemente: <html> ist im Standards-Modus
   das tatsächliche Scroll-Element des Dokuments, nicht <body> — nur auf body
   gesetzt, ließ sich die Seite auf schmalen Bildschirmen (Handy-Breiten wie
   320-414px) trotzdem ca. 50px horizontal wegwischen und zeigte Leerraum
   hinter den absichtlich überbreiten Deko-Elementen (Nebel/Aurora-Hintergrund).
   Tagescheck-Fund vom 02.08.2026, siehe DogFather Website.md. */
html { overflow-x: hidden; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Fallback-Theme (Dogfather) — wird von theme-*.css überschrieben ---------- */
:root {
  --bg: #0b0d10;
  --bg-alt: #12151a;
  --card-bg: #171b21;
  --text: #f3f5f7;
  --text-muted: #9aa4b2;
  --border: #262c35;
  --accent: #8fd9ea;      /* Babyblau */
  --accent-2: #8b5cf6;    /* Lila */
  --accent-contrast: #0b0d10;
  --radius: 14px;
  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 3.5rem); }
h2 { font-size: clamp(1.95rem, 4.3vw, 2.95rem); }
h3 { font-size: 1.62rem; }
p { margin: 0 0 1em; color: var(--text-muted); font-size: 1.32rem; line-height: 1.85; }
.lead { font-size: 1.5rem; color: var(--text); }
.quote { font-size: 1.4rem; }

.container {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-tight { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: .8em;
}

/* ---------- Nebel/Partikel Hintergrund ---------- */
.fog-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.fog-layer span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: .08;
  filter: blur(4px);
  animation: drift 26s linear infinite;
}
@keyframes drift {
  0%   { transform: translateY(0) translateX(0); }
  50%  { transform: translateY(-40px) translateX(20px); }
  100% { transform: translateY(0) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fog-layer span { animation: none; }
}

/* ---------- Header / Navigation ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Kräftig deckend statt Weichzeichnen durch das Bild dahinter — die
     Kombination aus backdrop-filter + fest positionierter Kopfzeile führte
     bei Chromium-Rendern zu Darstellungsfehlern (Logo/Menü teils unsichtbar).
     Deckende Farbe braucht keinen Weichzeichner und ist zusätzlich schneller. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-bar {
  /* Eigene, etwas breitere Kappung als .container (1180px) — die Nav
     braucht durch größere Schrift + mehr Abstand + Polarlicht-Padding
     spürbar mehr Platz, ohne dass der restliche Seiteninhalt breiter
     werden soll.
     Bugfix 04.08.2026: 1400px -> 1440px angehoben (siehe damalige Analyse).
     Bugfix 20.08.2026: reichte seither wieder nicht mehr — die Nav braucht
     inzwischen (Nav-Punkt "DogiCrew" + "BALD"-Badge dazugekommen) real ca.
     1491px, der Deckel blieb bei 1440px. 1440px -> 1560px, zusammen mit der
     auf 1650px angehobenen Hamburger-Schwelle weiter unten (siehe Kommentar
     dort) — diesmal mit echtem Sicherheitsabstand statt wieder nur knapp
     genug für den aktuellen Stand. */
  width: min(1560px, 94vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  /* Bewusst NICHT space-between: sonst landet der ganze freie Platz auf
     großen Bildschirmen als große Lücke zwischen Logo und "Start", und
     das Menü wirkt an die rechte Kante gepresst. Stattdessen rückt das
     Menü mit festem Abstand direkt ans Logo heran, der übrige Platz
     bleibt rechts nach dem Bewerben-Knopf. */
  justify-content: flex-start;
  gap: 2rem;
  padding: .9rem 0;
  flex-wrap: nowrap;
}
/* Logo und Menü-Knopf dürfen NIE zusammengequetscht werden — auch nicht,
   wenn .nav-links (das ausgeklappte Menü) aus irgendeinem Grund kurzzeitig
   noch normal mitgerechnet wird, bevor die Klappt-Logik greift. */
.brand, .nav-toggle { flex-shrink: 0; }
.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: .02em;
}
.brand .heart { color: var(--accent); }
.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}
.brand small {
  display: block;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  /* Seit die Kategorien eigene farbige Pillen (Polarlicht-Hintergrund)
     haben, trennt schon die Farbfläche selbst optisch — ein kleinerer
     Lücken-Abstand wirkt dadurch aufgeräumter/professioneller als der
     vorherige große Abstand. */
  gap: .7rem;
}
.nav-group { position: relative; }
.nav-group > button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  font-size: 1.14rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .55rem;
  transition: color .2s ease;
}
.nav-group > button:hover, .nav-group.open > button { color: var(--accent); }
.nav-flat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.14rem;
  padding: .5rem .55rem;
  transition: color .2s ease;
}
.nav-flat:hover, .nav-flat.active { color: var(--accent); }

/* Kein Button-/Pillen-Look im Ruhezustand mehr (0% Deckkraft) — die
   Kategorien sehen bei Dogi so aus wie normale Textlinks. Der Farbschein
   in den echten Farben der jeweiligen Welt (siehe theme-dogfather/
   -hasidog/-spicymedia.css) taucht NUR bei Hover/offenem Dropdown ganz
   dezent auf, als kleiner Hinweis statt als ständige Box. */
.nav-group > button::before, .nav-flat::before {
  content: "";
  position: absolute;
  inset: -70% -35%;
  z-index: -1;
  background:
    radial-gradient(circle at 28% 30%, var(--brand-1, transparent), transparent 62%),
    radial-gradient(circle at 74% 72%, var(--brand-2, transparent), transparent 62%);
  filter: blur(9px) saturate(1.25);
  opacity: 0;
  animation: nav-cta-aurora 11s ease-in-out infinite alternate;
  pointer-events: none;
  transition: opacity .3s ease;
}
.nav-group:hover > button::before,
.nav-group.open > button::before,
.nav-flat:hover::before,
.nav-flat.active::before {
  opacity: .32;
}
@media (prefers-reduced-motion: reduce) {
  .nav-group > button::before, .nav-flat::before { animation: none; }
}

.nav-item-dogfather { --brand-1: rgba(143, 217, 234, .9); --brand-2: rgba(139, 92, 246, .85); }
.nav-item-hasidog   { --brand-1: rgba(143, 217, 234, .9); --brand-2: rgba(199, 204, 209, .8); }
.nav-item-manager   { --brand-1: rgba(217, 74, 92, .85);  --brand-2: rgba(232, 147, 58, .8); }
.nav-item-medien    { --brand-1: rgba(143, 217, 234, .7); --brand-2: rgba(217, 74, 92, .6); }
.nav-item-start     { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(139, 92, 246, .5); }
.nav-item-links     { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(212, 175, 55, .7); }
/* Aufgeklapptes Kategorie-Menü: gleiche "gläserne, dunkle Karte mit
   farbigem Schein"-Machart wie beim Sprachschalter-Dropdown, aber im
   Farbton DIESER Kategorie (--brand-1/--brand-2, vom umschließenden
   .nav-group geerbt) statt neutral silbern — sorgt für einen klaren,
   ruhigen Look statt der vorherigen schlichten grauen Box. */
.nav-dropdown {
  position: absolute;
  /* WICHTIG: KEIN margin-top/Lücke zum Knopf — sonst verliert die Maus
     beim Runterfahren zur Box kurz den Hover auf .nav-group, und das
     Menü klappt zu, bevor man einen Punkt anklicken kann (Bug gefunden
     03.08.2026, durch den Caret-Abstand selbst verursacht). Box sitzt
     deshalb bewusst bündig an top:100%, der Verbindungs-Pfeil unten
     pokt einfach in die Knopf-Kante hinein statt in eine echte Lücke. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  background: rgba(4, 5, 8, .96);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: .45rem;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .6),
    0 0 16px var(--brand-1, rgba(220, 226, 235, .3)),
    0 0 32px var(--brand-2, rgba(190, 200, 215, .15));
  display: none;
  flex-direction: column;
  /* EIGENE Animation statt der geteilten sprach-dropdown-in: eine
     @keyframes-Regel setzt "transform" als GANZES pro Frame, würde also
     das zentrierende translateX(-50%) oben komplett überschreiben und
     die Box nach dem Aufklappen sichtbar nach rechts verschieben (Bug
     gefunden 03.08.2026 — Box wirkte "nicht mittig", war es auch nicht:
     transform sprang nach der Animation auf reines translateY/scale).
     Der Sprachschalter unten ist rechtsbündig (kein translateX nötig)
     und behält deshalb bewusst die alte, geteilte Animation. */
  animation: nav-dropdown-in .18s ease both;
}
/* Kleiner Verbindungs-Pfeil (Caret), mittig unter dem Kategorie-Knopf —
   macht auch dann unmissverständlich klar, zu welcher Kategorie das
   Menü gehört, wenn die Box (wegen mehr Einträgen) breiter ist als der
   Knopf selbst und dadurch optisch in Nachbar-Kategorien hineinragt. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: rgba(4, 5, 8, .96);
  border-left: 1px solid rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-radius: 3px 0 0 0;
  pointer-events: none;
}
.nav-group.open .nav-dropdown { display: flex; }
/* Auf echten Maus-Geräten (nicht Touch) öffnet sich das Menü schon beim
   Drüberfahren, ohne extra Klick — auf Touch/Tablet bleibt es bewusst
   beim Klick (dort gibt es kein echtes "Hover"). */
@media (hover: hover) and (pointer: fine) {
  .nav-group:hover .nav-dropdown { display: flex; }
}
/* Bewusst KEIN Button-Look (kein gefüllter Hintergrund, keine Pille) —
   nur schlichte Menü-Zeilen, die beim Hover die Farbe wechseln. Die
   Kategorie-Knöpfe selbst (DogFather/HasiDog/Manager/...) behalten
   weiterhin ihren Pillen-Stil, nur das aufgeklappte Untermenü nicht. */
.nav-dropdown a {
  padding: .55rem .75rem;
  font-size: 1.06rem;
  color: var(--text-muted);
  transition: color .2s ease;
}
/* translateX(-50%) MUSS in jedem Frame mit drinstehen, sonst hebt die
   Animation die Zentrierung von .nav-dropdown auf (siehe Kommentar oben). */
@keyframes nav-dropdown-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.nav-dropdown a:hover, .nav-dropdown a.active {
  color: var(--brand-1, var(--accent));
}

/* ===================================================================
   Sprachumschalter — eigenes kleines "Schmuckstück" in der Nav-Bar statt
   eines schlichten Menüpunkts: eine gläserne Pille mit Polarlicht-Schein
   in der jeweiligen Sprachfarbe (--sprach-glut, von main.js gesetzt),
   eine glänzende, sich sacht drehende "Mini-Planet"-Kugel und ein
   Dropdown im selben Look, das beim Öffnen sanft einschwebt. */
.sprach-schalter { --sprach-glut: var(--accent); }
.sprach-schalter > button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-size: 1.08rem;
  font-weight: 700;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1.1rem .45rem .6rem;
  border-radius: 999px;
  /* Rand bewusst neutral silbern (wie beim Dropdown-Kasten) statt in der
     Sprachfarbe — nur die Kugel + das Glühen dahinter sind bunt, der
     Rahmen selbst bleibt für alle Sprachen gleich. */
  border: 1px solid rgba(210, 216, 224, .55);
  background: rgba(4, 5, 8, .94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 3px 10px rgba(0, 0, 0, .5),
    0 0 10px color-mix(in srgb, var(--sprach-glut) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--sprach-glut) 35%, transparent);
  transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease;
}
.sprach-schalter > button:hover,
.sprach-schalter.open > button {
  transform: translateY(-1px);
  border-color: rgba(235, 239, 244, .9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 6px 16px rgba(0, 0, 0, .4),
    0 0 24px color-mix(in srgb, var(--sprach-glut) 60%, transparent);
}
/* Ebene: die "Landesflagge" als weiche, wandernde Aurora-Wolke im
   Hintergrund des Knopfs — mehrere Farbflecken statt nur eines Farbtons,
   dieselbe Machart wie beim Bewerben-Knopf, nur mit den 2-3 echten
   Farben DIESER Sprache (siehe SPRACHEN.farbstopps in main.js). */
.sprach-schalter > button::before {
  content: "";
  position: absolute;
  inset: -65%;
  z-index: -2;
  background: var(--sprach-aurora);
  filter: blur(8px) saturate(1.3);
  /* Bewusst nur ein dezenter Farbschein statt einer vollflächig bunten
     Fläche — der Knopf selbst soll "leuchtend schwarz" wirken (Glow am
     Rand + hinter der Kugel), nicht komplett eingefärbt. */
  opacity: .32;
  animation: sprach-aurora-drift 7s ease-in-out infinite alternate;
  pointer-events: none;
}
.sprach-schalter > button:hover::before,
.sprach-schalter.open > button::before {
  opacity: .48;
}
@keyframes sprach-aurora-drift {
  from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
  to   { transform: translate(3%, 3%) rotate(8deg) scale(1.12); }
}
/* Ebene: ein schmales Lichtband, das einmal quer durch den Knopf läuft —
   dieselbe Machart wie beim Bewerben-Knopf, nur in der Sprachfarbe. */
.sprach-schalter > button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--sprach-glut) 55%, white 25%) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  opacity: .8;
  animation: sprach-schimmer 5s linear infinite;
  pointer-events: none;
}
@keyframes sprach-schimmer {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
.sprach-schalter .nav-dropdown {
  min-width: 190px;
  left: auto;
  right: 0;
  transform: none;
  padding: .4rem;
  border-radius: 14px;
  border: 1px solid rgba(210, 216, 224, .55);
  background: rgba(4, 5, 8, .96);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .6),
    0 0 16px rgba(220, 226, 235, .35),
    0 0 34px rgba(190, 200, 215, .18);
  transform-origin: top right;
  animation: sprach-dropdown-in .18s ease both, sprach-silber-puls 3.6s ease-in-out infinite;
}
@keyframes sprach-dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Silberner Polarlicht-Schein um den Dropdown-Rand — bewusst neutral
   silber statt farbig, damit sich der schwarze Kasten von der bunten
   Kugel/Schrift jeder Sprache klar abhebt statt zu verschwimmen. */
@keyframes sprach-silber-puls {
  0%, 100% {
    border-color: rgba(210, 216, 224, .5);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 14px rgba(220, 226, 235, .3), 0 0 30px rgba(190, 200, 215, .15);
  }
  50% {
    border-color: rgba(235, 239, 244, .9);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 22px rgba(230, 235, 242, .55), 0 0 46px rgba(200, 210, 224, .3);
  }
}
.sprach-schalter .nav-dropdown a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.sprach-schalter .nav-dropdown a:hover,
.sprach-schalter .nav-dropdown a.active {
  background: rgba(255, 255, 255, .09);
  border-left-color: var(--sprach-glut);
  transform: translateX(2px);
}
/* Kleine "Mini-Planet"-Kugel statt eines Flaggen-Emojis — Windows stellt
   Flaggen-Emojis grundsätzlich nicht als Bild dar (siehe SPRACHEN oben in
   main.js). Ein außermittiges Glanzlicht + langsame Drehung lassen sie
   wie eine echte, beleuchtete Kugel wirken statt einer flachen Fläche. */
/* Kugel-Grundfarbe: conic-gradient aus den 2-3 echten Landesfarben
   dieser Sprache (--sprach-stopps, siehe SPRACHEN.farbstopps in
   main.js) — wirkt wie eine kleine, marmoriert eingefärbte Kugel statt
   nur einem Farbton, plus Eigendrehung, damit die Farbmischung sichtbar
   "lebt". Glanzlicht kommt separat über ::before oben drauf. */
.sprach-kugel {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: -4px;
  overflow: hidden;
  background: conic-gradient(from 0deg, var(--sprach-stopps));
  box-shadow:
    inset -3px -3px 5px rgba(0, 0, 0, .5),
    0 0 8px 2px color-mix(in srgb, var(--sprach-glut) 75%, transparent),
    0 0 20px 4px color-mix(in srgb, var(--sprach-glut) 45%, transparent);
  flex-shrink: 0;
  animation: sprach-glut-puls 3.2s ease-in-out infinite, sprach-kugel-dreh 7s linear infinite;
}
.sprach-kugel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 16%, transparent 55%);
  mix-blend-mode: overlay;
}
.sprach-schalter .nav-dropdown a .sprach-kugel { width: 16px; height: 16px; }
/* Die Sprachfarbe zieht sich auch über die Schrift — kräftiger,
   leuchtender Text statt neutralem Weiß, plus ein sanft pulsierender
   Schein (dieselbe "Polarlicht"-Idee wie beim Bewerben-Knopf/den
   Foto-Rahmen, nur in der jeweiligen Sprachfarbe). */
.sprach-schalter > button,
.sprach-schalter .nav-dropdown a {
  color: var(--sprach-glut, var(--text));
  text-shadow:
    0 0 6px color-mix(in srgb, var(--sprach-glut, transparent) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--sprach-glut, transparent) 45%, transparent);
}
.sprach-kurz { animation: sprach-glut-puls 3.2s ease-in-out infinite; display: inline-block; }
@keyframes sprach-glut-puls {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.3) saturate(1.35); }
}
@keyframes sprach-kugel-dreh {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sprach-kugel, .sprach-kurz, .sprach-schalter > button::before, .sprach-schalter > button::after, .sprach-schalter .nav-dropdown { animation: none; }
}

/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
   deshalb bewusst FEST babyblau + rot, unabhängig vom Theme der gerade
   offenen Seite. Statt einer einfachen 50/50-Teilung ein echtes
   Polarlicht: mehrere weiche, wandernde Farbwolken (blau/lila/rot) plus
   ein durchlaufender Lichtschimmer — soll wirken wie Licht und Nebel,
   nicht wie zwei flache Farbflächen. */
.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: .6rem 1.35rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  background: #0b0e14;
  border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.nav-cta span {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
}
/* Ebene 1: die wandernden Polarlicht-Wolken selbst */
.nav-cta::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(143, 217, 234, .95), transparent 55%),
    radial-gradient(circle at 45% 75%, rgba(139, 92, 246, .85), transparent 58%),
    radial-gradient(circle at 82% 32%, rgba(217, 74, 92, .95), transparent 55%),
    radial-gradient(circle at 62% 82%, rgba(232, 147, 58, .55), transparent 55%);
  filter: blur(9px) saturate(1.35);
  animation: nav-cta-aurora 9s ease-in-out infinite alternate;
}
/* Ebene 2: ein feiner Lichtschimmer, der einmal quer durchläuft */
.nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: nav-cta-shimmer 4.5s linear infinite;
  pointer-events: none;
}
@keyframes nav-cta-aurora {
  from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
  to   { transform: translate(3%, 3%) rotate(6deg) scale(1.08); }
}
@keyframes nav-cta-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
.nav-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .32);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
              0 0 22px rgba(143, 217, 234, .3),
              0 0 22px rgba(217, 74, 92, .28);
}
/* Abo-Button (Supporter-Abo) — gleicher Polarlicht-Mechanismus wie
   .nav-cta, aber in Babyblau/Lila (VIP-Anmutung) statt der allgemeinen
   Regenbogen-Aurora.
   Bugfix 04.08.2026: war Gold/Lila (rgba(212,175,55,...)) — dieser Knopf
   erscheint in der Navigationsleiste auf JEDER Seite (auch auf
   verwaltung.html, siehe Screenshot-Beschwerde), wurde von der 4. Runde
   "überall wo gelb ist, Babyblau benutzen" aber NICHT erfasst, weil er in
   main.css/main.js liegt statt in verwaltung.html selbst. Jetzt
   nachgezogen: Gold -> Babyblau (rgba(143,217,234,...), derselbe Farbwert
   wie beim allgemeinen .nav-cta-Polarlicht oben), Lila unverändert. Der
   separate, deutlich größere Gold-VIP-Look von abonnieren.html/
   supporter.html/gate.html/links.html/rabattcodes.html ist davon NICHT
   betroffen — das ist eine eigenständige, bislang nie angesprochene
   Design-Entscheidung für den öffentlichen Supporter-Bereich. */
.nav-cta-abo::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(143, 217, 234, .95), transparent 55%),
    radial-gradient(circle at 78% 70%, rgba(139, 92, 246, .85), transparent 58%);
}
.nav-cta-abo:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
              0 0 22px rgba(143, 217, 234, .35),
              0 0 22px rgba(139, 92, 246, .3);
}
/* "Bald"-Badge auf dem Abo-Knopf, solange die Registrierung auf
   abonnieren.html gesperrt ist (20.08.2026, siehe .btn-gold-locked weiter
   unten + main.js renderAboButton/soonBadge). Sitzt als zweites Kind IN
   der Pille (nicht als eigenes Nav-Element), bleibt dadurch Teil desselben
   Klicks — der Knopf führt bewusst weiterhin ganz normal zu abonnieren.html,
   nur die Registrierung selbst dort ist gesperrt. Bewusst neutral-silbern
   (Wiederverwendung von .btn-silver-text/-spark, nur kleiner skaliert)
   statt Gold, damit es nicht mit der babyblau/lila-Aurora dieser Pille
   konkurriert — reine Status-Markierung, kein zweiter Marken-Akzent. */
.nav-cta-soon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  margin-left: .5rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 0 10px rgba(230, 235, 242, .3);
  flex-shrink: 0;
}
.nav-cta-soon .btn-silver-spark { font-size: .85em; }
@media (prefers-reduced-motion: reduce) {
  .nav-cta::before, .nav-cta::after { animation: none; }
}

/* TikTok-Button "Glitch/Duotone" — eigener, klar erkennbarer Stil (nicht
   mehr nur eine eingefärbte Kopie von .nav-cta): schwarze Pille mit einem
   fließenden Cyan/Pink-Rahmen (klassischer Zwei-Layer-Background-Trick,
   NICHT ein rotierender Masken-Ring — der verzerrt sich auf einer
   länglichen Pillenform zu einer krummen Schlaufe statt einer sauberen
   Kontur), einem dezenten Innenschimmer (KEIN nach außen strahlender
   Blur-Wolken-Glow mehr — der hat vorher Text/Bilder drumherum überstrahlt,
   Feedback vom 03.08.2026: "geht über den Text und das Bild"), einer
   rotierenden Notenkopf-Spielmarke und einem Text mit TikToks
   charakteristischem Chromatic-Aberration-/Glitch-Versatz (die Cyan/Rot-
   Schattenkopien, die auch im echten TikTok-Logo stecken), der alle paar
   Sekunden kurz "springt". Alle Effekte bleiben INNERHALB der Pille bzw.
   direkt an ihrer Kante — die Auffälligkeit kommt vom Button selbst, nicht
   von seiner Ausstrahlung. Bewusst NUR für echte TikTok-Links — die
   Markenfarben (Cyan #25F4EE + Pink/Rot #FE2C55) bleiben exakt gleich. */
.btn-tiktok {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 2.2rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .01em;
  border: 2px solid transparent;
  background:
    linear-gradient(160deg, #12151b, #05070a 55%, #14171d) padding-box,
    linear-gradient(90deg, #25F4EE, #FE2C55, #25F4EE) border-box;
  background-size: 100% 100%, 260% 100%;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4),
              inset 0 0 10px rgba(37, 244, 238, .12),
              inset 0 0 10px rgba(254, 44, 85, .1);
  animation: btn-tiktok-border-flow 5s linear infinite;
}
.btn-tiktok-note {
  position: relative;
  z-index: 3;
  display: inline-block;
  font-size: 1.05em;
  filter: drop-shadow(0 0 3px rgba(37, 244, 238, .8));
  animation: btn-tiktok-spin 3.6s linear infinite;
}
.btn-tiktok-text {
  /* Ruhezustand ist bewusst KLAR LESBAR (nur normaler Schlagschatten) —
     der Cyan/Rot-Chromatic-Versatz von TikToks Logo erscheint nur ganz
     kurz als Flicker (siehe @keyframes btn-tiktok-glitch), nicht dauerhaft,
     sonst verschwimmt der Text (Feedback vom 03.08.2026: "kriegt man
     TikTok nichtmal richtig gelesen"). */
  position: relative;
  z-index: 3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  animation: btn-tiktok-glitch 6s ease-in-out infinite;
}
.btn-tiktok::before {
  /* Sehr dezentes Farbschimmern INNEN in der Pille — sorgt für Tiefe,
     bleibt aber innerhalb der Ränder (kein overflow, kein Blur-Bleed). */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 20%, rgba(37, 244, 238, .3), transparent 60%),
    radial-gradient(circle at 85% 80%, rgba(254, 44, 85, .28), transparent 62%);
  animation: nav-cta-aurora 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.btn-tiktok::after {
  /* Diagonaler Lichtschimmer, wandert einmal quer über die Pille */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: nav-cta-shimmer 4.5s linear infinite;
  pointer-events: none;
}
.btn-tiktok:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45),
              inset 0 0 14px rgba(37, 244, 238, .2),
              inset 0 0 14px rgba(254, 44, 85, .16);
}
@keyframes btn-tiktok-border-flow {
  to { background-position: 0 0, -260% 0; }
}
@keyframes btn-tiktok-spin {
  to { transform: rotate(360deg); }
}
@keyframes btn-tiktok-glitch {
  /* 97% der Zeit klar lesbarer Text — der Chromatic-Versatz blitzt nur für
     einen Wimpernschlag (~150ms von 6s) auf, statt dauerhaft zu "verwaschen". */
  0%, 96%, 100% {
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
    transform: translateX(0);
  }
  97% {
    text-shadow: -3px 0 rgba(37, 244, 238, .95), 3px 0 rgba(254, 44, 85, .95), 0 2px 6px rgba(0, 0, 0, .6);
    transform: translateX(-1px);
  }
  97.5% {
    text-shadow: 3px 0 rgba(37, 244, 238, .95), -3px 0 rgba(254, 44, 85, .95), 0 2px 6px rgba(0, 0, 0, .6);
    transform: translateX(1px);
  }
  98% {
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-tiktok, .btn-tiktok::before, .btn-tiktok::after, .btn-tiktok-note, .btn-tiktok-text { animation: none; }
}

/* Silberner "Coming soon"-Button: eigener, deutlich edlerer Look als
   .btn-tiktok — echtes Chrome-Metallic-Textglitzern, rotierender
   Metallrand-Schimmer, zwei funkelnde Sparkle-Akzente und ein sanft
   pulsierender Halo-Glow. Für Dinge, die noch nicht live sind
   (z.B. VanVans zweiter Kanal), aber trotzdem besonders auffallen sollen. */
.btn-silver {
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 2.4rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .02em;
  background: linear-gradient(160deg, #14161c, #0b0e14 55%, #1a1d24);
  border: 1px solid rgba(255, 255, 255, .22);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4),
              0 0 0 1px rgba(255, 255, 255, .03) inset;
  animation: btn-silver-halo 3.2s ease-in-out infinite;
}
.btn-silver-text {
  position: relative;
  z-index: 2;
  background: linear-gradient(100deg, #9aa4b2 0%, #ffffff 28%, #e6ebf2 42%, #c7ccd1 58%, #ffffff 76%, #9aa4b2 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  animation: btn-silver-text-shine 3.6s linear infinite;
}
.btn-silver-spark {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: .9em;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8));
  animation: btn-silver-twinkle 1.8s ease-in-out infinite;
}
.btn-silver-spark:last-child { animation-delay: .9s; }
.btn-silver::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, #eef1f5, #9aa4b2, #ffffff, #c7ccd1, #7d8794, #eef1f5);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btn-silver-shine-rotate 5s linear infinite;
}
.btn-silver::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: nav-cta-shimmer 4.5s linear infinite;
  pointer-events: none;
}
.btn-silver:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(255, 255, 255, .4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5),
              0 0 26px rgba(230, 235, 242, .45),
              0 0 26px rgba(190, 200, 215, .35);
}
@keyframes btn-silver-shine-rotate {
  to { transform: rotate(360deg); }
}
@keyframes btn-silver-text-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}
@keyframes btn-silver-twinkle {
  0%, 100% { opacity: .45; transform: scale(.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}
@keyframes btn-silver-halo {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 14px rgba(200, 208, 220, .18); }
  50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 26px rgba(230, 235, 242, .4); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-silver, .btn-silver::before, .btn-silver::after, .btn-silver-text, .btn-silver-spark {
    animation: none;
  }
}

/* "Legendärer" Button (z.B. Casperlino-Link auf streamer.html): babyblau
   + Silber, gleiche edle Machart wie .btn-silver (Chrome-Textglanz,
   rotierender Rand, Sparkles, pulsierender Halo), aber größer, kräftiger
   und in der Marken-Akzentfarbe --accent (Babyblau) statt neutralem Grau —
   soll bewusst wie ein besonderes, "episches" Highlight wirken. */
.btn-legendary {
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.05rem 2.7rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: .02em;
  background: linear-gradient(160deg, #101b20, #0b0e14 55%, #16232a);
  border: 1px solid rgba(143, 217, 234, .35);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45),
              0 0 0 1px rgba(143, 217, 234, .06) inset;
  animation: btn-legendary-halo 3s ease-in-out infinite;
}
.btn-legendary-text {
  position: relative;
  z-index: 2;
  background: linear-gradient(100deg, #8fd9ea 0%, #ffffff 26%, #c7ccd1 42%, #8fd9ea 58%, #ffffff 76%, #c7ccd1 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  animation: btn-legendary-text-shine 3.4s linear infinite;
}
.btn-legendary-spark {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: .95em;
  filter: drop-shadow(0 0 5px rgba(143, 217, 234, .9));
  animation: btn-legendary-twinkle 1.7s ease-in-out infinite;
}
.btn-legendary-spark:last-child { animation-delay: .85s; }
.btn-legendary::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, #8fd9ea, #eef1f5, #c7ccd1, #ffffff, #8fd9ea, #7d8794, #8fd9ea);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btn-legendary-shine-rotate 4.5s linear infinite;
}
.btn-legendary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(143, 217, 234, .55) 49%, transparent 66%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: nav-cta-shimmer 4s linear infinite;
  pointer-events: none;
}
.btn-legendary:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(143, 217, 234, .55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5),
              0 0 30px rgba(143, 217, 234, .5),
              0 0 30px rgba(199, 204, 209, .35);
}
@keyframes btn-legendary-shine-rotate {
  to { transform: rotate(360deg); }
}
@keyframes btn-legendary-text-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}
@keyframes btn-legendary-twinkle {
  0%, 100% { opacity: .5; transform: scale(.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
}
@keyframes btn-legendary-halo {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 16px rgba(143, 217, 234, .22); }
  50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 32px rgba(143, 217, 234, .5); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-legendary, .btn-legendary::before, .btn-legendary::after, .btn-legendary-text, .btn-legendary-spark {
    animation: none;
  }
}

/* =====================================================================
   "Gesperrter Tresor"-Knopf für den DogiCrew-Registrieren-Knopf
   (abonnieren.html, 20.08.2026, Nutzer-Wunsch: "richtig krank übertrieben
   geiles... weil es wird ja das geilste Bonus und überhaupt so von mir").
   Bewusst KEINE Wiederverwendung von .btn-silver — der ist neutral-grau und
   auf DIESER Seite bereits für die Teddy-Kollektion (Nebensache) vergeben.
   Chrome-Text-Clip-Schimmer + Schimmer-Sweep + Halo-Puls wie .btn-silver/
   .btn-legendary, aber in den ECHTEN Gold-Tönen dieser Seite
   (#ffe9a8/#d4af37, siehe .abo-panel .btn) und mit einem pulsierenden
   Schloss statt Sternen, damit die Haupt-CTA sichtbar "das Besondere,
   noch verschlossene" bleibt statt nur "irgendwann verfügbar".
   WICHTIG: Für den Rand bewusst NICHT die rotierende Conic-Gradient-Maske
   von .btn-silver/.btn-legendary kopiert — dieser Knopf läuft über
   `width:100%` auf voller Kartenbreite (~440px) bei nur ~62px Höhe, also
   ein sehr langgestrecktes Rechteck. Genau für diesen Fall ist die
   dokumentierte Lektion in Projektregeln.md Punkt 14 gedacht (03.08.2026,
   "TikTok-Button-Bug"): ein rotierendes maskiertes Pseudo-Element verzieht
   sich auf länglichen Formen zu einer krummen Schlaufe, weil ein Rechteck
   beim Rotieren nicht rotationssymmetrisch ist — live mit Playwright-
   Screenshots über mehrere Frames nachgewiesen (die Schlaufe ist der
   rotierende Rand bei verschiedenen Winkeln). Stattdessen derselbe sichere
   Zwei-Layer-Background-Trick wie bei .abo-google-frame weiter oben in
   dieser Datei (Füllung padding-box + Verlauf border-box, Bewegung nur
   über background-position) — bleibt geometrisch exakt an der Kontur,
   unabhängig vom Seitenverhältnis. Reine Deko/Statusanzeige — echte
   Deaktivierung läuft über das native disabled-Attribut am <button>
   (siehe abonnieren.html), nicht über pointer-events, damit auch
   Tastatur-/Screenreader-Nutzung korrekt "nicht bedienbar" meldet. Bewusst
   KEIN :hover-Zustand (keine Lift-Animation wie bei .btn-silver/
   .btn-legendary) — soll nicht so wirken, als wäre er doch klickbar. */
.btn-gold-locked {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1rem 1.4rem;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1.04rem;
  letter-spacing: .02em;
  border: 1.5px solid transparent;
  background:
    linear-gradient(160deg, #1c1710, #0b0e14 55%, #211a0d) padding-box,
    linear-gradient(120deg, #d4af37, #ffe9a8, #b8912b, #fff2c9, #d4af37) border-box;
  background-size: 100% 100%, 260% 100%;
  cursor: not-allowed;
  animation: btn-gold-locked-border-shine 6s ease-in-out infinite, btn-gold-locked-halo 3s ease-in-out infinite;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 1px rgba(212, 175, 55, .08) inset;
}
.btn-gold-locked-lock {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: 1.05em;
  filter: drop-shadow(0 0 6px rgba(255, 214, 102, .85));
  animation: btn-gold-locked-pulse 2.2s ease-in-out infinite;
}
.btn-gold-locked-text {
  position: relative;
  z-index: 2;
  background: linear-gradient(100deg, #ffe9a8 0%, #ffffff 24%, #d4af37 42%, #ffe9a8 60%, #ffffff 78%, #d4af37 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
  animation: btn-silver-text-shine 3.6s linear infinite; /* bestehendes Keyframe wiederverwendet */
}
.btn-gold-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 233, 168, .5) 49%, transparent 66%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: nav-cta-shimmer 4s linear infinite; /* bestehendes Keyframe wiederverwendet */
  pointer-events: none;
}
@keyframes btn-gold-locked-border-shine {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
}
@keyframes btn-gold-locked-pulse {
  0%, 100% { opacity: .7; transform: scale(.92) rotate(-4deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(4deg); }
}
@keyframes btn-gold-locked-halo {
  0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 16px rgba(212, 175, 55, .22); }
  50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 32px rgba(255, 214, 102, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-gold-locked, .btn-gold-locked::after,
  .btn-gold-locked-text, .btn-gold-locked-lock {
    animation: none;
  }
}

/* =====================================================================
   .btn-holo — zweiter "Mega"-Button-Stil, bewusst MECHANISCH anders als
   .btn-legendary/.btn-silver/.btn-tiktok (die alle nach demselben Muster
   funktionieren: dunkler Hintergrund + heller Rand/Text-Glanz). Hier ist
   stattdessen die GESAMTE Pille eine wandernde Holo-Foil-Fläche, wie bei
   einer schillernden Trading-Card — Marken-Farbverlauf (Babyblau → Lila
   → Pink → Gold → zurück), ein diagonaler Glare-Sweep wie echtes reflek-
   tierendes Folienlicht, feines Foliekorn und dunkle geprägte Schrift
   OBEN DRAUF statt heller Chrome-Schrift auf Dunkel. Auf Vorrat gebaut
   (03.08.2026, auf Wunsch von Dogi) — noch nirgends im Einsatz, einfach
   die Klassen wie unten im Beispiel verwenden:

   <a class="btn-holo" href="...">
     <span class="btn-holo-spark" aria-hidden="true">💎</span>
     <span class="btn-holo-text">Label</span>
     <span class="btn-holo-spark" aria-hidden="true">💎</span>
   </a>
   ===================================================================== */
.btn-holo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 2.4rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.12rem;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, .7);
  background: linear-gradient(120deg,
    #8fd9ea 0%, #8b5cf6 18%, #ff5fa8 38%, #ffcf4d 54%, #8fd9ea 74%, #8b5cf6 100%);
  background-size: 340% 340%;
  animation: btn-holo-shift 6s ease-in-out infinite, btn-holo-halo 2.6s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1.4), box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45),
              0 0 0 3px rgba(11, 13, 16, .9),
              0 0 0 4.5px rgba(255, 255, 255, .3);
}
.btn-holo-text {
  position: relative;
  z-index: 2;
  color: #0b0d10;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .22);
}
.btn-holo-spark {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: .9em;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
  animation: btn-holo-twinkle 1.8s ease-in-out infinite;
}
.btn-holo-spark:last-child { animation-delay: .9s; }
/* Diagonaler Glare-Sweep, wie Licht, das über echte Folie wandert */
.btn-holo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    transparent 28%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .2) 54%, transparent 74%);
  background-size: 250% 100%;
  mix-blend-mode: overlay;
  animation: btn-holo-glare 2.8s ease-in-out infinite;
  pointer-events: none;
}
/* Feines Foliekorn (SVG-Turbulence), sorgt für den "echten Folien"-Look
   statt einer platten Farbverlaufsfläche. */
.btn-holo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  mix-blend-mode: overlay;
  opacity: .3;
  pointer-events: none;
}
.btn-holo:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: #fff;
  animation-play-state: paused;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5),
              0 0 0 3px rgba(11, 13, 16, .9),
              0 0 0 4.5px rgba(255, 255, 255, .5),
              0 0 40px rgba(139, 92, 246, .6),
              0 0 40px rgba(143, 217, 234, .5);
}
@keyframes btn-holo-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes btn-holo-halo {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
                0 0 0 3px rgba(11, 13, 16, .9),
                0 0 0 4.5px rgba(255, 255, 255, .3),
                0 0 18px rgba(139, 92, 246, .35),
                0 0 18px rgba(143, 217, 234, .3);
  }
  50% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
                0 0 0 3px rgba(11, 13, 16, .9),
                0 0 0 4.5px rgba(255, 255, 255, .45),
                0 0 34px rgba(139, 92, 246, .6),
                0 0 34px rgba(255, 95, 168, .45);
  }
}
@keyframes btn-holo-glare {
  0% { background-position: -70% 0; }
  100% { background-position: 170% 0; }
}
@keyframes btn-holo-twinkle {
  0%, 100% { opacity: .6; transform: scale(.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.35) rotate(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-holo, .btn-holo::before, .btn-holo-spark { animation: none; }
}

/* Kompakter Polarlicht-Button für Karten (z.B. Marinas Team-Modi-Karte →
   direkter Link zur Manager-Seite): exakt derselbe Mechanismus wie
   .btn-tiktok, nur kleiner und in den Spicy-Media-Markenfarben
   (Rot #d94a5c + Orange #e8935a) statt Cyan/Pink. */
.btn-spicy-mini {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: .6rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  background: #0b0e14;
  border: 1px solid rgba(255, 255, 255, .16);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .35);
}
.btn-spicy-mini span {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .35);
}
.btn-spicy-mini::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(217, 74, 92, .95), transparent 55%),
    radial-gradient(circle at 78% 68%, rgba(232, 147, 90, .95), transparent 58%);
  filter: blur(8px) saturate(1.35);
  animation: nav-cta-aurora 9s ease-in-out infinite alternate;
}
.btn-spicy-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: nav-cta-shimmer 4.5s linear infinite;
  pointer-events: none;
}
.btn-spicy-mini:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .32);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4),
              0 0 16px rgba(217, 74, 92, .35),
              0 0 16px rgba(232, 147, 90, .35);
}
@media (prefers-reduced-motion: reduce) {
  .btn-spicy-mini::before, .btn-spicy-mini::after { animation: none; }
}

/* Plattform-Karten mit echten Markenfarben (z.B. links.html-Übersicht):
   gleicher Polarlicht-Mechanismus wie .btn-tiktok, aber generisch über
   --brand-1/--brand-2 (+ optional --brand-3) einstellbar, damit jede
   Plattform ihre EIGENEN echten Farben bekommt, ohne den ganzen Block
   pro Plattform zu duplizieren. Die konkreten Farben stehen weiter unten
   in den .card-<plattform>-Klassen. */
.card-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b0e14;
  border-color: rgba(255, 255, 255, .16);
  padding: 2rem 1.8rem;
}
.card-brand .icon-badge, .card-brand h3, .card-brand p {
  position: relative;
  z-index: 2;
}
.card-brand h3, .card-brand p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
}
.card-brand .icon-badge {
  display: block;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: .6rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.card-brand h3 { font-size: 1.5rem; }
.card-brand p { font-size: 1.05rem; margin-top: .3rem; }
.card-brand::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 28%, var(--brand-1, rgba(143, 217, 234, .85)), transparent 55%),
    radial-gradient(circle at 78% 70%, var(--brand-2, rgba(139, 92, 246, .85)), transparent 58%),
    radial-gradient(circle at 50% 92%, var(--brand-3, transparent), transparent 55%);
  filter: blur(11px) saturate(1.35);
  animation: nav-cta-aurora 9s ease-in-out infinite alternate;
}
.card-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: nav-cta-shimmer 4.5s linear infinite;
  pointer-events: none;
}
.card-brand:hover {
  border-color: rgba(255, 255, 255, .32);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
              0 0 22px var(--brand-1, rgba(143, 217, 234, .3)),
              0 0 22px var(--brand-2, rgba(139, 92, 246, .28));
}
@media (prefers-reduced-motion: reduce) {
  .card-brand::before, .card-brand::after { animation: none; }
}

/* Bewusst NUR echte Plattform-/CTA-Farben, keine erfundenen: */
.card-tiktok     { --brand-1: rgba(37, 244, 238, .95);  --brand-2: rgba(254, 44, 85, .95); }
.card-instagram  { --brand-1: rgba(131, 58, 180, .9);   --brand-2: rgba(253, 29, 29, .82);  --brand-3: rgba(252, 176, 69, .55); }
.card-snapchat   { --brand-1: rgba(255, 252, 0, .85);   --brand-2: rgba(255, 220, 0, .45); }
.card-snapchat h3, .card-snapchat p { text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 16px rgba(0, 0, 0, .55); }
.card-discord    { --brand-1: rgba(88, 101, 242, .95);  --brand-2: rgba(88, 101, 242, .4); }
.card-shop       { --brand-1: rgba(212, 175, 55, .85);  --brand-2: rgba(255, 183, 77, .6); }
.card-bewerben   { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(139, 92, 246, .8); --brand-3: rgba(217, 74, 92, .5); }

/* "Feature"-Karten (links.html): zwei besondere, GRÖSSERE Kacheln über der
   normalen Plattform-Icon-Reihe — Abo-System (VIP: Gold/Lila) und
   Rabattcodes (Community-Ersparnis: Grün/Orange). Bauen auf .card-brand
   auf (gleicher Aurora-/Schimmer-Mechanismus), bekommen zusätzlich einen
   rotierenden Farbring (wie .card-duel) und ein Eckband mit Status-Text,
   damit sie sich klar von den kompakten Plattform-Kacheln absetzen. */
.card-feature {
  padding: 2.6rem 2rem;
  min-height: 230px;
}
.card-feature::before { inset: -70%; }
.card-feature .icon-badge { font-size: 3.1rem; margin-bottom: .8rem; }
.card-feature h3 { font-size: 1.75rem; }
.card-feature-desc {
  position: relative;
  z-index: 2;
  font-size: .96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  margin: .5rem auto 0;
  max-width: 32ch;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .3);
}
/* Echtes <span> statt eines dritten Pseudo-Elements (::before/::after sind
   an .card-brand schon für Aurora/Schimmer vergeben) — bewusst NICHT
   rotiert (siehe .btn-tiktok-Notiz weiter oben: ein rotierender Masken-Ring
   verzerrt sich auf länglichen/runden Formen), sondern ein ruhiger,
   statischer Farbverlaufs-Rand. */
.card-feature-ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--brand-1), var(--brand-2), var(--brand-1) 66%, var(--brand-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .8;
  pointer-events: none;
}
.card-feature-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .38rem .75rem;
  border-radius: 999px;
  background: rgba(8, 10, 14, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px);
  color: #fff;
}
.card-feature:hover {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .card-feature { transition: none; }
}
.card-abo { --brand-1: rgba(212, 175, 55, .9); --brand-2: rgba(139, 92, 246, .75); }
.card-abo .card-feature-badge { color: #ffe9a8; border-color: rgba(255, 214, 102, .5); }
.card-rabatt { --brand-1: rgba(52, 211, 153, .9); --brand-2: rgba(251, 146, 60, .8); }
.card-rabatt .card-feature-badge { color: #baf7d6; border-color: rgba(94, 234, 167, .5); }

/* Breite Variante von .card-feature — nimmt die volle Container-Breite ein
   (statt im 2er-Grid neben einer zweiten Karte zu stehen) und wechselt
   dafür auf ein horizontales Layout: Icon links, Titel/Text rechts daneben
   statt zentriert übereinander, damit die Breite bewusst genutzt wird statt
   nur Leerraum links/rechts vom zentrierten Text zu erzeugen. */
.card-feature-wide {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  text-align: left;
  padding: 2.2rem 2.8rem;
  min-height: auto;
}
.card-feature-wide .icon-badge {
  flex-shrink: 0;
  margin-bottom: 0;
}
.card-feature-wide .card-feature-text {
  position: relative;
  z-index: 2;
}
.card-feature-wide .card-feature-desc {
  margin: .4rem 0 0;
  max-width: 60ch;
}
@media (max-width: 640px) {
  .card-feature-wide {
    flex-direction: column;
    text-align: center;
    padding: 2.4rem 1.6rem;
  }
  .card-feature-wide .card-feature-desc { margin: .4rem auto 0; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: .5rem .7rem;
  cursor: pointer;
}

/* Bugfix 20.08.2026 (Nutzer-Report per Screenshot: "DogiCrew"-Knopf/Badge
   rechts abgeschnitten): die Schwelle war schon zweimal angehoben (880 ->
   1480px, dazu der .nav-bar-Deckel 1400 -> 1440px), reichte aber seither
   NICHT mehr aus — seit den neu dazugekommenen Nav-Punkten "DogiCrew" +
   "BALD"-Badge braucht die aufgeklappte Desktop-Nav real ca. 1491px
   Breite (per Playwright über mehrere Breiten nachgemessen), der Deckel
   blieb aber bei 1440px hart begrenzt. Ergebnis: bei JEDER Fensterbreite
   ab ca. 1500px (nicht nur in einer schmalen Übergangszone) lief die Nav
   permanent ca. 50px über den Rand hinaus. Diesmal mit echtem Sicherheits-
   abstand behoben statt wieder nur knapp: Schwelle auf 1650px, Deckel auf
   1560px — bei exakt 1650px ergibt min(1560px, 94vw) ≈ 1551px, spürbar
   mehr als die gemessenen ~1491px nötigen Breite. Bei jeder Fensterbreite
   NACH der Schwelle reicht 94vw automatisch weiter aus (nur ganz nah an
   der Schwelle war die Lücke kritisch). */
@media (max-width: 1650px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 62px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: 1.2rem 6vw;
    gap: .3rem;
    transform: translateY(-110%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-group > button { width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--border); }
  .nav-flat { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border); }
  .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; animation: none; }
  .nav-dropdown::before { display: none; }
  .nav-group.open .nav-dropdown { display: flex; }
  .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }

  /* Bugfix 20.08.2026 (Nutzer-Report: "auf dem Handy passt nicht immer alles").
     Per echter Mobil-Emulation (iPhone 15 Pro + Pixel 8, Screenshots) nachgestellt:
     Die schwebenden Eck-Knöpfe (Musik unten rechts, Vorschau-Umschalter unten links
     für Dogi/VanVan — siehe .music-widget/.vorschau-widget weiter unten) sind
     absichtlich IMMER sichtbar (position:fixed, direkte <body>-Kinder, eigener
     Stacking-Kontext, unabhängig vom Menü). Bei aufgeklapptem Mobil-Menü liegen sie
     dadurch ÜBER den untersten Menüpunkten (Sprachschalter + "Bewerben"-Knopf) und
     verdecken/blockieren sie sichtbar. :has() statt einer weiteren main.js-Änderung,
     weil beide Widgets keinen gemeinsamen Elternknoten mit .nav-links haben (beide
     hängen direkt unter <body>, .nav-links steckt im Header) — reiner CSS-Fix bleibt
     an der Stelle, an der auch die restliche Menü-Overlay-Logik dieses Blocks steht. */
  body:has(.nav-links.open) .music-widget,
  body:has(.nav-links.open) .vorschau-widget {
    display: none;
  }
}

/* ---------- Buttons ----------
   Gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste (wandernde,
   weichgezeichnete Farbwolken + durchlaufender Lichtschimmer) — aber NICHT
   dieselbe feste Regenbogen-Palette, sondern die Farben der jeweiligen
   Seite/Karte (--accent/--accent-2, die überall schon pro Theme bzw. pro
   Karte gesetzt sind). Läuft komplett über negative z-index-Ebenen, dadurch
   bleibt der Button-Text automatisch scharf obenauf, ganz ohne <span>-
   Wrapper in jeder einzelnen HTML-Datei (siehe Stacking-Reihenfolge: eigene
   Box-Hintergrund → negative z-index-Kinder → normaler Inline-Text). */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, box-shadow .2s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -70%;
  z-index: -2;
  background:
    radial-gradient(circle at 24% 28%, color-mix(in srgb, var(--accent) 92%, transparent), transparent 58%),
    radial-gradient(circle at 76% 74%, color-mix(in srgb, var(--accent-2) 92%, transparent), transparent 58%);
  filter: blur(9px) saturate(1.3);
  opacity: .55;
  animation: btn-aurora 11s ease-in-out infinite alternate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: btn-shimmer 5.5s linear infinite;
  pointer-events: none;
}
@keyframes btn-aurora {
  from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
  to   { transform: translate(3%, 3%) rotate(6deg) scale(1.08); }
}
@keyframes btn-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn::after { animation: none; }
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28),
              0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-secondary { background: var(--accent-2); color: #fff; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) 0;
  text-align: center;
  overflow: hidden;
}
.hero > .container { position: relative; z-index: 1; }
/* Zusätzlicher, garantiert deckender Schleier NUR hinter dem Hero-Text auf
   Seiten mit Hintergrundfoto (.page-bg) — Ergänzung zum globalen
   body.mit-hintergrund-Verlauf oben. Grund (BFSG/WCAG-Audit 04.08.2026):
   der globale Verlauf allein reichte bei hellen Fotomotiven nicht überall
   für AA-Kontrast (Eyebrow/H1/Lead direkt im Hero betroffen). Sitzt NUR
   um den Text-Container, deckt also NICHT das scharfe .hero-banner-Foto
   darüber ab (das bleibt unverändert sichtbar). */
.hero.page-bg > .container::before {
  content: "";
  position: absolute;
  inset: -1.4rem -1.6rem;
  z-index: -1;
  border-radius: 28px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  pointer-events: none;
}
.hero .worlds {
  margin: .6rem 0 1.2rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
}
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } }

/* "Event des Jahres" (20.08.2026) — volle Breite wie .hero-grid darüber (eigener Block,
   kein Grid-Kind), zeigt bewusst IMMER genau zwei Events nebeneinander. Gleiche
   Karten-/Tag-Optik wie die 3 Welt-Kacheln, damit es wie ein natürlicher Abschluss des
   Grids wirkt statt wie ein fremdes Element. */
.jahres-events {
  margin-top: 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.jahres-events-head { margin-bottom: 1.2rem; }
.jahres-events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
@media (max-width: 760px) { .jahres-events-grid { grid-template-columns: 1fr; } }
.jahres-event-card {
  display: block;
  padding: 1.2rem 1.4rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .02);
  transition: border-color .15s ease, transform .15s ease;
}
.jahres-event-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.jahres-event-datum {
  display: block;
  color: var(--accent);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  margin-bottom: .3rem;
}
.jahres-event-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.jahres-event-card p { margin: 0 0 .6rem; color: var(--text-muted); font-size: .93rem; line-height: 1.55; }
.jahres-event-mehr { color: var(--accent); font-weight: 600; font-size: .88rem; }
/* Optionales Admin-Bild pro Event (20.08.2026, "Event des Jahres" jetzt in
   der Verwaltung pflegbar) — bleibt per [hidden] unsichtbar, solange kein
   Bild gesetzt ist, damit die textbasierten Standard-Karten unverändert
   aussehen. Bugfix (per Playwright-Test gefunden): "display:block" allein
   hätte dieselbe Spezifität wie die eingebaute [hidden]-Regel des Browsers
   und würde sie im Zweifel überschreiben (leerer Bild-Rahmen wäre auch OHNE
   gesetztes Bild sichtbar gewesen) — deshalb hier zusätzlich explizit
   :not([hidden]) statt nur der Klasse allein. */
.jahres-event-bild[hidden] { display: none; }
.jahres-event-bild:not([hidden]) {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: .9rem;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
  height: 100%;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-3px); }
.card h3 { margin-bottom: .4rem; }
.card .tag {
  display: inline-block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: .15rem .6rem;
  margin-bottom: .8rem;
}

.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Profil-Karten (Team/Creator) ---------- */
.profile-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  padding: 2rem 1.2rem 1.7rem;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* dezenter Lichtschein hinter dem Avatar */
.profile-card::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  pointer-events: none;
}
.profile-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.profile-card h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
/* Avatar-Kreis mit Akzent-Ring.
   WICHTIG: hier kommen fertig zugeschnittene Gesichts-Ausschnitte rein
   (assets/img/avatar-*.jpg), NICHT die großen Team-Karten — die sind bei
   dieser Größe nur Matsch. Siehe `avatar`-Feld in assets/js/data-modis.js. */
.avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow:
    0 0 0 2px var(--card-bg),
    0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent),
    0 10px 26px rgba(0, 0, 0, .45);
  transition: box-shadow .3s ease, transform .3s ease;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Leichter Glanz oben, damit der Kreis nicht flach wirkt */
.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(165deg, rgba(255, 255, 255, .18), transparent 55%);
  pointer-events: none;
}
.avatar-initial {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent-contrast);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.profile-card:hover .avatar {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px var(--card-bg),
    0 0 0 4px var(--frame, var(--accent)),
    0 14px 32px rgba(0, 0, 0, .5);
}
/* Fest lila bei JEDER Profilkarte (Modis, Scouts, Creator) — Wunsch von
   Dogi, nachdem ihm Michis zufällig lila geloster Ring gefallen hat.
   Fester Hex-Wert statt var(--accent-2), damit es auch auf den roten
   Agentur-Seiten (Scout/Creator) lila bleibt statt orange zu werden. */
.profile-card { --frame: #8b5cf6; }
.profile-card .avatar {
  /* Fester lila-Verlauf statt var(--accent-2), damit der Avatar-Hintergrund
     auch auf roten Agentur-Seiten sauber lila bleibt statt lila+orange zu mischen. */
  background: linear-gradient(140deg, var(--frame, var(--accent)), #6d28d9);
  box-shadow:
    0 0 0 2px var(--card-bg),
    0 0 0 4px color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent),
    0 10px 26px rgba(0, 0, 0, .45);
}
.profile-card::before {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--frame, var(--accent)) 20%, transparent), transparent 70%);
}
.profile-card:hover { border-color: color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent); }
.profile-card .role { color: var(--accent); font-weight: 600; font-size: .85rem; margin-bottom: .6rem; }
.profile-card .quote { font-style: italic; font-size: .9rem; }
.profile-card .socials { display: flex; justify-content: center; gap: .6rem; margin-top: .8rem; }
.profile-card .socials a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .78rem;
  color: var(--text-muted);
}
.profile-card .socials a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Placeholder-Bild-Boxen (bis echte Fotos da sind) ---------- */
.img-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--bg-alt), var(--bg-alt) 10px, var(--card-bg) 10px, var(--card-bg) 20px);
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  color: var(--text-muted);
  font-size: .8rem;
  text-align: center;
  padding: 1rem;
}

/* ---------- Timeline (Zeitreise) — alte, einfache Punkt+Linie-Variante ---------- */
.timeline { position: relative; margin: 2rem 0; padding-left: 2rem; border-left: 2px solid var(--border); }
.timeline-item { position: relative; padding-bottom: 2.4rem; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.45rem;
  top: .2rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline-item .date { color: var(--accent); font-weight: 700; font-size: .85rem; }

/* ---------- Zeitbaum (Zeitreise) — die Reise als wachsender Baum ----------
   Ein Stamm (::before, per clip-path unten dicker als oben = "Wachstum")
   läuft mittig durch alle Stationen. Jede Station ("Ast") hängt sich
   abwechselnd links/rechts an den Stamm, verbunden über eine glühende
   Astlinie. Meilenstein-Stationen bekommen eine goldene statt babyblaue
   Aura. Oben ein Keim (🌱, Anfang), unten eine Krone (🌳, Fortsetzung). */
.zeit-baum {
  position: relative;
  margin: 3rem 0 1rem;
  padding: 2.4rem 0;
}
.zeit-baum::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 44px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(143,217,234,.55) 0%,
    rgba(139,92,246,.55) 45%,
    rgba(217,196,90,.6) 100%);
  clip-path: polygon(47% 0%, 53% 0%, 66% 100%, 34% 100%);
  filter: blur(.2px);
  box-shadow: 0 0 60px 6px rgba(143,217,234,.18);
  opacity: .85;
}
/* "Diese Seite wächst noch"-Hinweis (20.08.2026, Nutzer-Wunsch) — bewusst
   einladend statt wie eine Fehler-/Baustellen-Meldung, im selben Babyblau
   wie der Rest des Wachstums-Baum-Themas dieser Seite (.zeit-baum-kappe/
   -wurzel). Sitzt VOR dem Baum, damit Besucher sofort verstehen: hier
   entsteht noch etwas, ohne dass es wie ein Fehler wirkt. */
.zeit-baustelle {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto 2.6rem;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  background: rgba(143, 217, 234, .06);
  border: 1.5px solid rgba(143, 217, 234, .35);
  box-shadow: 0 0 24px rgba(143, 217, 234, .12);
}
.zeit-baustelle-icon {
  flex-shrink: 0;
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(143, 217, 234, .55));
  animation: zeit-baustelle-wiegen 3.5s ease-in-out infinite;
}
.zeit-baustelle strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: .3rem;
  color: var(--text);
}
.zeit-baustelle p {
  margin: 0;
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.55;
}
@keyframes zeit-baustelle-wiegen {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .zeit-baustelle-icon { animation: none; }
}

.zeit-baum-kappe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin-bottom: .5rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(143,217,234,.55);
}
.zeit-baum-kappe span:first-child { font-size: 1.6rem; filter: drop-shadow(0 0 10px rgba(143,217,234,.6)); }
.zeit-baum-wurzel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin-top: 1rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: #e8d78f;
  text-shadow: 0 0 14px rgba(217,196,90,.5);
}
.zeit-baum-wurzel span:first-child { font-size: 1.9rem; filter: drop-shadow(0 0 14px rgba(217,196,90,.6)); }

.zeit-ast {
  position: relative;
  display: flex;
  width: 100%;
  padding: 1.1rem 0;
}
.zeit-ast:nth-child(odd) { justify-content: flex-start; }
.zeit-ast:nth-child(even) { justify-content: flex-end; }

.zeit-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 60%, var(--accent-2) 100%);
  box-shadow: 0 0 0 4px var(--bg), 0 0 18px 3px rgba(143,217,234,.6);
  z-index: 2;
  animation: zeit-node-pulse 3.2s ease-in-out infinite;
}
.zeit-ast.meilenstein .zeit-node {
  background: radial-gradient(circle at 35% 30%, #fff, #e8d78f 55%, #b8892f 100%);
  box-shadow: 0 0 0 4px var(--bg), 0 0 22px 5px rgba(232,215,143,.7);
}
@keyframes zeit-node-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--bg), 0 0 14px 2px rgba(143,217,234,.5); }
  50% { box-shadow: 0 0 0 4px var(--bg), 0 0 24px 6px rgba(143,217,234,.85); }
}

.zeit-karte {
  position: relative;
  width: calc(50% - 2.6rem);
  background: linear-gradient(160deg, rgba(23,27,33,.82), rgba(23,27,33,.55));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(143,217,234,.25);
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.zeit-ast.meilenstein .zeit-karte { border-color: rgba(232,215,143,.4); }
.zeit-karte::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.6rem;
  height: 2px;
  background: linear-gradient(90deg, rgba(143,217,234,.05), rgba(143,217,234,.65));
  transform: translateY(-50%);
}
.zeit-ast:nth-child(odd) .zeit-karte::before { right: -2.6rem; }
.zeit-ast:nth-child(even) .zeit-karte::before { left: -2.6rem; background: linear-gradient(270deg, rgba(143,217,234,.05), rgba(143,217,234,.65)); }
.zeit-ast.meilenstein:nth-child(odd) .zeit-karte::before { background: linear-gradient(90deg, rgba(232,215,143,.05), rgba(232,215,143,.75)); }
.zeit-ast.meilenstein:nth-child(even) .zeit-karte::before { background: linear-gradient(270deg, rgba(232,215,143,.05), rgba(232,215,143,.75)); }

.zeit-karte:hover {
  transform: translateY(-4px);
  border-color: rgba(143,217,234,.55);
  box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 24px rgba(143,217,234,.2);
}
.zeit-ast.meilenstein .zeit-karte:hover {
  border-color: rgba(232,215,143,.7);
  box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 26px rgba(232,215,143,.3);
}

.zeit-datum {
  color: var(--accent);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  margin-bottom: .25rem;
}
.zeit-ast.meilenstein .zeit-datum { color: #e8d78f; }
.zeit-karte h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.zeit-karte p { margin: 0; color: var(--text-muted); font-size: .93rem; line-height: 1.55; }

.zeit-ast.zeit-final .zeit-karte { width: calc(100% - 4rem); max-width: 640px; text-align: center; }
.zeit-ast.zeit-final { justify-content: center !important; }
.zeit-ast.zeit-final .zeit-karte::before { display: none; }
/* Bugfix 20.08.2026 (Nutzer-Report: "wieso dieser Punkt da in der Mitte"):
   .zeit-node ist bei allen normalen Karten position:absolute; left:50%;
   top:50% relativ zu .zeit-ast — das sitzt korrekt in der Baum-Mitte,
   WEIL die Karte dort nur die halbe Breite einnimmt. Die Finale-Karte
   (.zeit-final) wird aber auf fast volle Breite gestreckt und zentriert
   (siehe .zeit-karte-Regel oben) — der Knoten landete dadurch mitten im
   Text statt am Rand. Die Verbindungslinie (::before, direkt drüber)
   wurde dafür schon 2025 ausgeblendet, der Knoten selbst wurde dabei
   übersehen. */
.zeit-ast.zeit-final .zeit-node { display: none; }
.zeit-zitat {
  font-weight: 700;
  color: var(--text);
  font-style: italic;
  margin: .8rem 0 .5rem !important;
}
.zeit-familie {
  font-weight: 800;
  font-size: 1.05rem !important;
  color: var(--accent) !important;
  text-shadow: 0 0 14px rgba(143,217,234,.5);
}
.zeit-signoff {
  margin-top: .8rem !important;
  color: var(--text-muted);
  font-style: italic;
}

/* Reveal-Animation (per IntersectionObserver in zeitreise.html getriggert) */
.zeit-ast { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.zeit-ast.zeit-sichtbar { opacity: 1; transform: translateY(0); }

@media (max-width: 780px) {
  .zeit-baum::before { left: 22px; width: 30px; clip-path: polygon(44% 0%, 56% 0%, 70% 100%, 30% 100%); }
  .zeit-ast, .zeit-ast:nth-child(odd), .zeit-ast:nth-child(even) { justify-content: flex-start; padding-left: 3rem; }
  .zeit-node { left: 22px; }
  .zeit-karte { width: 100%; }
  .zeit-karte::before,
  .zeit-ast:nth-child(even) .zeit-karte::before { left: -2.2rem; right: auto; width: 2.2rem; background: linear-gradient(270deg, rgba(143,217,234,.05), rgba(143,217,234,.65)); }
  .zeit-ast.meilenstein .zeit-karte::before,
  .zeit-ast.meilenstein:nth-child(even) .zeit-karte::before { background: linear-gradient(270deg, rgba(232,215,143,.05), rgba(232,215,143,.75)); }
  .zeit-ast.zeit-final .zeit-karte { width: 100%; text-align: left; }
  .zeit-ast.zeit-final { padding-left: 3rem; }
}

/* ---------- Gallery / Lightbox ---------- */
.filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.filter-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: .5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .85rem;
}
.filter-btn.active, .filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.gallery-item { cursor: pointer; }
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; z-index: 200; padding: 5vh 5vw;
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox .img-placeholder { max-height: 85vh; max-width: 90vw; }
.lightbox-close {
  position: absolute; top: 20px; right: 30px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none;
}

/* ---------- Formulare ---------- */
form.app-form { display: grid; gap: 1rem; max-width: 640px; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field input, .field select, .field textarea {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem .9rem;
  color: var(--text);
  font-family: var(--font-body);
}
.field textarea { min-height: 120px; resize: vertical; }
.field .error-msg { color: #ff6b6b; font-size: .8rem; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #ff6b6b; }
.field.has-error .error-msg { display: block; }
.form-status { padding: .9rem 1.1rem; border-radius: 10px; font-size: .9rem; display: none; }
.form-status.show { display: block; }
.form-status.success { background: rgba(143,217,234,.12); border: 1px solid var(--accent); }
.form-status.error { background: rgba(255,107,107,.1); border: 1px solid #ff6b6b; }
.tabs { display: flex; gap: .6rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.tab-btn {
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted);
  padding: .7rem 1.3rem; border-radius: 999px; cursor: pointer; font-weight: 600;
}
.tab-btn.active { border-color: var(--accent); color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Footer ---------- */
footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
  position: relative;
  z-index: 1;
  /* Voll deckender Hintergrund (nicht color-mix/transparent) — auf Seiten
     mit body.mit-hintergrund lag der Footer sonst direkt über dem fixen,
     nur teilweise abgedunkelten Hintergrundfoto, was bei axe-core einen
     color-contrast-Verstoß für .footer-grid .brand auslöste (04.08.2026). */
  background: var(--bg);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.footer-grid ul { display: grid; gap: .5rem; }
.footer-grid a { color: var(--text-muted); font-size: .9rem; }
.footer-grid a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  font-size: .8rem; color: var(--text-muted);
}

/* ---------- Foto-Collage (Polaroid-Scrapbook, z.B. Dogfather & Casper) ---------- */
.collage-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1.6rem 1rem;
  padding: 2.5rem 0 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.collage-item {
  background: #fff;
  padding: 10px 10px 30px;
  border-radius: 6px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .4);
  width: 190px;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: default;
}
.collage-item:nth-child(1) { transform: rotate(-7deg) translateY(12px); }
.collage-item:nth-child(2) { transform: rotate(4deg) translateY(-10px); z-index: 2; width: 210px; }
.collage-item:nth-child(3) { transform: rotate(-3deg) translateY(4px); }
.collage-item:nth-child(4) { transform: rotate(8deg) translateY(-6px); }
.collage-item:nth-child(5) { transform: rotate(-9deg) translateY(10px); }
.collage-item:hover {
  transform: scale(1.08) rotate(0deg) !important;
  z-index: 5;
  box-shadow: 0 22px 40px rgba(0, 0, 0, .55);
}
/* Alle Fotoflächen bekommen denselben Rahmen-Look wie die Avatare:
   feine Linie in der Rahmenfarbe, dunkle Trennkante, weicher Schlagschatten.
   Die Farbe steuert die Variable --frame — Standard ist die Markenfarbe.
   Andere Farben über die Klassen .frame-silver / .frame-lila / .frame-gold /
   .frame-rot setzen (siehe unten). */
.collage-photo {
  --frame: var(--accent);
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #e8ebee, #e8ebee 10px, #f6f7f9 10px, #f6f7f9 20px);
  /* Statt eines starren, matten Rahmens: ein "atmender" Polarlicht-Glanz,
     der langsam heller/dunkler und weiter/enger pulsiert (siehe
     @keyframes collage-aurora-glow unten). Box-shadow wird von
     overflow:hidden NICHT beschnitten, deshalb bleibt der Glanz auch am
     Rand sichtbar, obwohl das Foto selbst innen sauber zugeschnitten ist. */
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
    0 0 0 4px rgba(0, 0, 0, .55),
    0 0 26px color-mix(in srgb, var(--frame) 22%, transparent),
    0 14px 34px rgba(0, 0, 0, .45);
  animation: collage-aurora-glow 5s ease-in-out infinite;
  transition: transform .3s ease;
}
@keyframes collage-aurora-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
      0 0 0 4px rgba(0, 0, 0, .55),
      0 0 26px color-mix(in srgb, var(--frame) 30%, transparent),
      0 0 46px color-mix(in srgb, var(--frame) 12%, transparent),
      0 14px 34px rgba(0, 0, 0, .45);
  }
  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--frame) 95%, transparent),
      0 0 0 4px rgba(0, 0, 0, .55),
      0 0 46px color-mix(in srgb, var(--frame) 62%, transparent),
      0 0 80px color-mix(in srgb, var(--frame) 32%, transparent),
      0 14px 34px rgba(0, 0, 0, .45);
  }
}
.collage-photo:hover {
  transform: translateY(-3px);
  animation-play-state: paused;
  box-shadow:
    0 0 0 2px var(--frame),
    0 0 0 4px rgba(0, 0, 0, .55),
    0 0 46px color-mix(in srgb, var(--frame) 55%, transparent),
    0 0 80px color-mix(in srgb, var(--frame) 30%, transparent),
    0 18px 42px rgba(0, 0, 0, .5);
}
@media (prefers-reduced-motion: reduce) {
  .collage-photo { animation: none; }
}
/* Farbvarianten für Abwechslung */
.frame-silver { --frame: #c7ccd1; }
.frame-lila   { --frame: var(--accent-2); }
.frame-gold   { --frame: #d8b25a; }
.frame-rot    { --frame: #d94a5c; }
.frame-tuerkis{ --frame: #6ee7d8; }
.collage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kräftigerer "produced look": mehr Sättigung/Kontrast als vorher, damit
     auch schlichte Portraitfotos neben aufwendig gestalteten Postern
     (z.B. dem DogFather-Manager-Artwork) nicht flach wirken. */
  filter: saturate(1.26) contrast(1.15) brightness(1.03);
}
/* Cineastischer "Poster-Grade" für JEDES Präsentationsfoto auf der Seite:
   zwei Farbschein-Blooms in der jeweiligen Rahmenfarbe (oben-links /
   unten-rechts, wie ein Studio-Rimlight — nutzt dieselbe --frame-Variable
   wie der Rahmen, damit Bild und Rand optisch zusammengehören), eine
   sanfte Vignette unten für Tiefe/Fokus aufs Gesicht, plus feines
   Filmkorn (SVG-Turbulence). Macht auch ein simples Handy-Foto "produziert",
   ohne den eigentlichen Bildinhalt zu verdecken. */
.collage-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(125% 140% at 8% -14%, color-mix(in srgb, var(--frame) 75%, transparent) 0%, transparent 46%),
    radial-gradient(125% 140% at 112% 116%, color-mix(in srgb, var(--frame) 65%, transparent) 0%, transparent 48%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: cover, cover, cover, 170px 170px;
  background-blend-mode: screen, screen, multiply, overlay;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Zusätzlicher, langsam wandernder Lichtschimmer in der Rahmenfarbe —
   dieselbe Machart wie beim Bewerben-Knopf/den Buttons, nur sehr dezent,
   damit das Foto selbst gut lesbar bleibt. */
.collage-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--frame) 65%, white 35%) 50%, transparent 60%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  opacity: .55;
  animation: btn-shimmer 7s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .collage-photo::before { animation: none; }
}
.collage-photo .img-placeholder {
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: none;
  color: #6b7280;
}
.collage-caption {
  text-align: center;
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  color: #2a2a2a;
  font-size: .85rem;
  margin-top: .5rem;
}
@media (max-width: 620px) {
  .collage-item, .collage-item:nth-child(2) { width: 140px; }
}

/* ---------- Hero-Atmosphäre (Startseite): Polarlicht oben → Rauch Mitte → Nebel unten ----------
   Drei Zonen, die weich ineinander übergehen, plus 4 Husky-/Hasen-Silhouetten mit leuchtend
   blauen Augen, die deutlich erkennbar (aber nicht grell) darin stehen. ---------- */
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Verbindender Farbverlauf über die ganze Höhe: babyblau (oben) → neutral (Mitte) → silbrig (unten) */
.atmosphere-blend {
  position: absolute;
  inset: 0;
  /* Fallback für Browser ohne color-mix() */
  background: linear-gradient(
    to bottom,
    rgba(143, 217, 234, .18) 0%,
    rgba(139, 92, 246, .12) 38%,
    rgba(154, 166, 178, .10) 68%,
    rgba(210, 216, 222, .14) 100%
  );
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 14%, transparent) 38%,
    rgba(154, 166, 178, .10) 68%,
    rgba(210, 216, 222, .14) 100%
  );
  mix-blend-mode: screen;
  opacity: .8;
}

/* ---- Zone 1: Polarlicht (oben) ---- */
.aurora-band {
  position: absolute;
  width: 150%;
  height: 60%;
  left: -25%;
  border-radius: 50%;
  filter: blur(65px);
  opacity: .22;
  mix-blend-mode: screen;
  animation: aurora-drift 30s ease-in-out infinite;
}
.aurora-band.a1 { top: -16%; background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); animation-duration: 26s; }
.aurora-band.a2 { top: 4%; background: radial-gradient(ellipse at center, var(--accent-2) 0%, transparent 70%); animation-duration: 36s; animation-delay: -9s; opacity: .18; }
.aurora-band.a3 { top: 16%; background: radial-gradient(ellipse at center, #6ee7d8 0%, transparent 70%); animation-duration: 44s; animation-delay: -18s; opacity: .14; }

@keyframes aurora-drift {
  0%, 100% { transform: translateX(-4%) translateY(0) scaleY(1); }
  50%      { transform: translateX(4%) translateY(-3%) scaleY(1.18); }
}

/* ---- Zone 2: Rauch (Mitte) ---- */
.smoke-blob {
  position: absolute;
  top: 32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 214, 220, .16), transparent 72%);
  filter: blur(40px);
  animation: smoke-float 30s ease-in-out infinite;
}
@keyframes smoke-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(3%, -4%) scale(1.12); }
}

/* ---- Zone 3: Nebel (unten) ---- */
.fog-ground {
  position: absolute;
  bottom: -8%;
  left: -15%;
  width: 130%;
  height: 42%;
  background: linear-gradient(to top, rgba(220, 224, 228, .28), transparent 85%);
  filter: blur(30px);
  animation: fog-drift 40s ease-in-out infinite;
}
@keyframes fog-drift {
  0%, 100% { transform: translateX(-3%); }
  50%      { transform: translateX(3%); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-band, .smoke-blob, .fog-ground { animation: none; }
}

/* ==========================================================================
   KINO-HINTERGRUND — das große Trio-Artwork (Dogfather · Dogi · HasiDog)
   Aufbau in drei Schichten, damit der Text immer perfekt lesbar bleibt:
     1. ::before  = das Artwork selbst, mit langsamer Ken-Burns-Fahrt
     2. ::after   = Abdunkelung (Vignette + Verlauf), blendet unten in die Seite
     3. darüber   = die bestehende Polarlicht/Rauch/Nebel-Atmosphäre, gedimmt
   ========================================================================== */
.hero-cinematic {
  /* Etwas mehr vertikaler Raum als vorher, damit das Trio-Artwork (läuft
     mit background-size:contain mit) auf großen Desktop-Bildschirmen
     spürbar größer wirkt statt klein in der Mitte zu schweben. */
  padding: clamp(5.5rem, 15vw, 10.5rem) 0;
  isolation: isolate;
}
.hero-artwork {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-artwork::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Zwei Ebenen: das scharfe Artwork komplett sichtbar (contain — auf
     dieser Seite läuft der Text ÜBER dem Bild mit Polarlicht-Effekten,
     ein Banner-oberhalb-des-Texts-Layout wie auf den anderen Seiten
     würde das Design zerstören). Darunter dieselbe Szene verwaschen als
     Cover, die jeden Rand auffüllt, den "contain" freilässt — dadurch
     wirkt es trotzdem randlos, obwohl die scharfen Pixel garantiert
     nie beschnitten werden. */
  background-image: url("../img/universe-trio.jpg"), url("../img/universe-trio-blur.jpg");
  background-size: contain, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.hero-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Vignette: Mitte frei, Ränder dunkel — lenkt den Blick auf die Figuren */
    radial-gradient(ellipse 118% 86% at 50% 44%,
      rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .52) 68%, rgba(0, 0, 0, .84) 100%),
    /* Verlauf: oben dunkel für die Navigation, unten sauberer Übergang in die Seite */
    linear-gradient(to bottom,
      rgba(0, 0, 0, .62) 0%,
      rgba(0, 0, 0, .30) 26%,
      rgba(0, 0, 0, .34) 58%,
      rgba(0, 0, 0, .78) 88%,
      var(--bg) 100%);
}
/* Atmosphäre über dem Artwork nur noch als feiner Schleier */
.hero-cinematic .hero-atmosphere { opacity: .5; }
/* Text bekommt eine weiche Abschattung, damit er auf jedem Bildausschnitt sitzt */
.hero-cinematic h1,
.hero-cinematic .lead,
.hero-cinematic .eyebrow { text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .9); }
/* Auf Wunsch: auf der Startseite wirkte alles (Überschrift, Text, Live-
   Status-Kästchen, Buttons) auf großen PC-Bildschirmen zu klein — hier
   moderat vergrößert, ohne die mobile Größe (untere Klammer der clamp()s)
   anzufassen. */
.hero-cinematic h1 { font-size: clamp(2.3rem, 6.2vw, 4.2rem); }
.hero-cinematic .lead { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
.hero-cinematic .eyebrow { font-size: .95rem; }
.hero-cinematic .card { padding: 1.3rem 1.8rem; }
.hero-cinematic .card .badge { font-size: .9rem; }
.hero-cinematic .card .small { font-size: 1.05rem; }
.hero-cinematic .btn-row .btn { font-size: 1.15rem; padding: 1rem 1.9rem; }
/* Die drei Welten-Karten (DogFather/HasiDog/Manager) unter dem Hero
   sollen ebenfalls etwas größer wirken, wie auf Wunsch — Text war auf
   großen Bildschirmen zu klein. */
.hero-cinematic .hero-grid .tag { font-size: .8rem; }
.hero-cinematic .hero-grid h3 { font-size: 1.45rem; }
.hero-cinematic .hero-grid p { font-size: 1.05rem; }

/* ==========================================================================
   CHARAKTER-SHOWCASE — die zwei Artworks groß, scharf und komplett sichtbar
   ========================================================================== */
.char-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 4vw, 2.4rem);
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 620px) {
  .char-showcase { grid-template-columns: 1fr; max-width: 320px; }
}
.char-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: #080c11;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .58);
  animation: char-float 11s ease-in-out infinite;
  transition: transform .38s cubic-bezier(.2, .7, .3, 1),
              box-shadow .38s ease,
              border-color .38s ease;
}
.char-card:nth-child(2) { animation-delay: -5.5s; }
.char-card img {
  display: block;
  width: 100%;
  aspect-ratio: 599 / 1212; /* exaktes Seitenverhältnis der Artworks — kein Zuschnitt */
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
/* eigener Glow pro Welt */
.char-card.dogfather { border-color: rgba(96, 175, 255, .30); }
.char-card.dogfather:hover,
.char-card.dogfather:focus-visible {
  border-color: rgba(96, 175, 255, .75);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 70px rgba(96, 175, 255, .30);
}
.char-card.hasidog { border-color: rgba(199, 204, 209, .28); }
.char-card.hasidog:hover,
.char-card.hasidog:focus-visible {
  border-color: rgba(199, 204, 209, .70);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 70px rgba(143, 217, 234, .26);
}
.char-card:hover, .char-card:focus-visible { transform: translateY(-10px); }
.char-card:hover img, .char-card:focus-visible img { transform: scale(1.045); }

.char-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3.6rem .9rem 1.1rem;
  text-align: center;
  background: linear-gradient(to top,
    rgba(4, 8, 12, .94) 14%, rgba(4, 8, 12, .58) 52%, transparent 100%);
}
.char-meta > span { display: block; }
.char-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
}
.char-sub {
  font-size: .76rem;
  color: rgba(255, 255, 255, .70);
  margin-top: .18rem;
}
.char-go {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent);
  margin-top: .5rem;
  opacity: .85;
  transition: opacity .3s ease, transform .3s ease;
}
.char-card:hover .char-go,
.char-card:focus-visible .char-go { opacity: 1; transform: translateX(3px); }

@keyframes char-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .char-card, .char-card img { animation: none; transition: none; }
}

/* ==========================================================================
   SEITEN-HINTERGRÜNDE

   Jede Seite kann ihr eigenes Artwork hinter den Kopfbereich legen. Das Bild
   wird nicht fest im CSS hinterlegt, sondern pro Seite über zwei Variablen
   gesetzt — so bleibt eine einzige Regel für alle Seiten:

     <section class="hero page-bg"
              style="--page-bg:url('assets/img/bg-x.jpg');
                     --page-bg-mobile:url('assets/img/bg-x-mobile.jpg');">

   Aufbau: Bild (::before) → Abdunkelung (::after) → Inhalt.
   Die Abdunkelung sorgt dafür, dass Überschriften immer lesbar bleiben und
   der Rand sauber in die Seitenfarbe ausläuft.
   ========================================================================== */
/* ---- 1) Das Motiv trägt die GANZE Seite ----
   Liegt fest hinter allem (position:fixed), leicht weichgezeichnet und
   abgedunkelt. Dadurch ist das Bild beim Scrollen überall präsent, ohne
   dass Texte und Karten darunter leiden. */
body.mit-hintergrund { background-color: transparent; }
body.mit-hintergrund::before {
  content: "";
  position: fixed;
  inset: -2%;
  z-index: -3;
  background-image: var(--page-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Weichzeichnen + abdunkeln: ruhiger Untergrund, der die Augen beim Lesen
     nicht anstrengt. brightness(.45) statt vorher .62 — angepasst nach dem
     BFSG/WCAG-Kontrast-Audit vom 04.08.2026 (axe-core fand color-contrast-
     Verstöße auf allen Seiten mit Hintergrundfoto: helle Bildstellen
     schimmerten durch die Abdunkelung, besonders im Hero-Bereich oben, wo
     der ::after-Verlauf am schwächsten war). */
  filter: blur(4px) brightness(.45) saturate(.95);
}
/* Abdunkelung für den Seitenkörper — bewusst kräftig, damit langes Lesen
   angenehm bleibt UND Text zuverlässig AA-Kontrast erreicht (siehe oben).
   Werte am 04.08.2026 zweimal nachgeschärft (80/92/95% → 90/97/99% →
   94/98/99.5%, volle Deckung schon ab 30% statt erst bei 100%) — nach dem
   zusätzlichen Hero-Schleier (oben) waren vereinzelt noch Elemente knapp
   unterhalb des Heros betroffen (z.B. `.bewerben-side-label`,
   `h2.text-center` auf team-modis.html), wo der Verlauf noch nicht voll
   angekommen war. Mit axe-core auf allen betroffenen Seiten gegengeprüft. */
body.mit-hintergrund::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 98%, transparent) 30%,
    color-mix(in srgb, var(--bg) 99.5%, transparent) 100%);
}

/* ---- 2) Kopfbereich: ECHTES <img> statt CSS-Hintergrund ----
   Nach mehreren Anläufen mit background-size (cover schnitt Ränder ab,
   contain ließ Lücken, "100% auto" schnitt oben/unten ab sobald die Box
   nicht exakt im Bildseitenverhältnis war) die einzige Lösung, die IMMER
   beides garantiert — volle Breite UND das komplette Bild sichtbar：
   ein normales <img width:100% height:auto>, das seine Höhe selbst
   bestimmt statt in eine vorgegebene Box gepresst zu werden. Es kann
   dadurch gar nicht mehr beschnitten werden, ganz gleich welches
   Seitenverhältnis das Foto hat.

     <section class="hero page-bg">
       <div class="hero-banner"><img src="assets/img/bg-x.jpg" alt="" /></div>
       <div class="container">...</div>
     </section>

   Das Bild sitzt dadurch als eigener Banner OBERHALB der Überschrift
   (statt als Hintergrund dahinter) — dafür garantiert zuverlässig, auf
   jeder Seite, mit jedem Bild, ohne weitere Handarbeit. */
.hero-banner {
  position: relative;
  line-height: 0; /* verhindert einen Mini-Spalt unter dem Bild */
}
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* Weicher Übergang unten, damit das Foto nicht hart in die Seite schneidet */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .05) 0%,
    transparent 45%,
    color-mix(in srgb, var(--bg) 55%, transparent) 82%,
    var(--bg) 100%);
  pointer-events: none;
}
.page-bg.hero {
  padding: clamp(2.4rem, 5vw, 3.4rem) 0 clamp(3rem, 7vw, 4.5rem);
}
.page-bg.hero > .container { margin-inline: auto; }

@media (max-width: 760px) {
  /* Der weichgezeichnete Grund-Layer darf ruhig den Handy-Zuschnitt nehmen —
     der ist nur Stimmung im Hintergrund, wird nicht "als Bild" wahrgenommen.
     Der scharfe .page-bg-Layer bleibt beim VOLLEN Original, damit auf dem
     Handy garantiert nichts vom eigentlichen Motiv fehlt. */
  body.mit-hintergrund::before { background-image: var(--page-bg-mobile, var(--page-bg)); }
}

/* ==========================================================================
   HIERARCHIE-PYRAMIDE — Team-Mitglieder stufenweise unter VanVan

   Eine zentrale Linie läuft von oben (unter VanVans großer Karte) nach
   unten durch alle Ebenen. Jede Ebene ist eine eigene, zentrierte Reihe;
   die Kartengröße nimmt von Stufe zu Stufe leicht ab, wodurch die
   Hierarchie auch optisch spürbar wird — oben groß und wichtig, nach
   unten hin kompakter. An jeder Ebene sitzt ein leuchtender Knoten auf
   der Linie, wie bei einem Organigramm.
   ========================================================================== */
.pyramid {
  position: relative;
  padding-top: 2.6rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 5vw, 3.6rem);
}
/* Die zentrale, senkrechte Verbindungslinie */
.pyramid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--accent) 70%, transparent),
    color-mix(in srgb, var(--accent-2) 55%, transparent) 55%,
    transparent 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
.pyramid-tier {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* stretch statt flex-start: alle Karten einer Ebene werden gleich hoch,
     egal ob der Name/die Rolle bei der einen Person länger ist als bei
     der anderen (z.B. Diene/Funny) — Wunsch von Dogi. */
  align-items: stretch;
  gap: clamp(1rem, 3vw, 2rem);
}
/* Leuchtender Knoten pro Ebene, sitzt genau auf der Linie */
.pyramid-tier::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 18px color-mix(in srgb, var(--accent) 65%, transparent);
  z-index: 2;
}
.pyramid-tier .profile-card {
  width: 100%;
  /* Flex-Spalte, damit der "Profil ansehen"-Button per margin-top:auto immer
     ganz unten sitzt — dadurch wirken alle Karten einer Ebene gleich hoch
     und gleich aufgebaut, auch wenn Name/Rolle unterschiedlich lang sind. */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.pyramid-tier .profile-card .btn { margin-top: auto; }
.pyramid-tier .profile-card:hover { transform: translateY(-6px) scale(1.02); }

/* Fünf Größenstufen — je tiefer, desto kompakter */
.pyramid-tier[data-tier="1"] .profile-card { max-width: 260px; }
.pyramid-tier[data-tier="2"] .profile-card { max-width: 240px; }
.pyramid-tier[data-tier="3"] .profile-card { max-width: 222px; }
.pyramid-tier[data-tier="4"] .profile-card { max-width: 206px; }
.pyramid-tier[data-tier="5"] .profile-card { max-width: 192px; }
.pyramid-tier[data-tier="1"] .avatar { width: 108px; height: 108px; }
.pyramid-tier[data-tier="2"] .avatar { width: 98px; height: 98px; }
.pyramid-tier[data-tier="3"] .avatar { width: 90px; height: 90px; }
.pyramid-tier[data-tier="4"] .avatar { width: 82px; height: 82px; }
.pyramid-tier[data-tier="5"] .avatar { width: 76px; height: 76px; }
.pyramid-tier[data-tier="3"] .profile-card h3,
.pyramid-tier[data-tier="4"] .profile-card h3,
.pyramid-tier[data-tier="5"] .profile-card h3 { font-size: 1.02rem; }
.pyramid-tier[data-tier="4"] .role,
.pyramid-tier[data-tier="5"] .role { font-size: .78rem; }

@media (max-width: 700px) {
  .pyramid-tier { gap: 1rem; }
  .pyramid-tier .profile-card { max-width: min(78vw, 240px) !important; }
}

/* ==========================================================================
   BEWERBEN-SHOWCASE — die beiden Kampagnen-Poster (Dogfather/Team-Dogi
   links, Spicy Media rechts) flankieren die Bewerbungs-Spalten wie
   Kinoplakate. Bewusst NICHT als verwaschener Hintergrund HINTER den
   Karten (das hätte Lesbarkeit gekostet), sondern als eigene, scharfe
   Bildspalten DANEBEN — dadurch bleiben die Poster in voller Qualität
   sichtbar UND die Bewerbungs-Karten bleiben ungestört lesbar. Jedes
   Poster fasst farblich zur jeweiligen Seite (blau/rot) und blendet nach
   unten sanft aus, damit es nicht wie ein hart abgeschnittenes Rechteck
   wirkt, sondern organisch in die Seite übergeht. */
.bewerben-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.2rem);
}
.bewerben-poster {
  flex: 0 0 auto;
  width: clamp(120px, 15vw, 220px);
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  align-self: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  transition: transform .25s ease, filter .25s ease;
}
.bewerben-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.bewerben-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
}
.bewerben-poster-blau {
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 0 30px rgba(143, 217, 234, .22);
  transform: rotate(-2.5deg);
}
.bewerben-poster-blau::after { box-shadow: inset 0 0 0 1px rgba(143, 217, 234, .35); }
.bewerben-poster-rot {
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 0 30px rgba(217, 74, 92, .22);
  transform: rotate(2.5deg);
}
.bewerben-poster-rot::after { box-shadow: inset 0 0 0 1px rgba(217, 74, 92, .35); }
.bewerben-poster:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); filter: brightness(1.08); }
@media (max-width: 1080px) {
  .bewerben-poster { display: none; }
}

/* ==========================================================================
   BEWERBEN-SPLIT — zwei Welten, zwei Spalten, kleine Trennwand in der Mitte
   Passend zum Hintergrundbild: Community/Team Dogi (blau) links,
   Agentur/Spicy Media (rot) rechts.
   ========================================================================== */
.bewerben-split {
  display: flex;
  align-items: stretch;
  gap: clamp(1.4rem, 4vw, 3.2rem);
  max-width: 980px;
  margin: 0 auto;
}
.bewerben-side {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.bewerben-side-label {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.bewerben-side-blau .bewerben-side-label { color: #8fd9ea; text-shadow: 0 0 14px rgba(143, 217, 234, .5); }
.bewerben-side-rot .bewerben-side-label { color: #d94a5c; text-shadow: 0 0 14px rgba(217, 74, 92, .5); }
.bewerben-side .card { height: auto; }

/* Die kleine Trennungswand: ein leuchtender Steg von blau nach rot,
   mit einem Blitz-Knoten in der Mitte — passend zur Lichtgrenze im Bild. */
.bewerben-wall {
  flex: none;
  width: 3px;
  align-self: stretch;
  position: relative;
  border-radius: 3px;
  background: linear-gradient(to bottom,
    transparent 0%,
    #8fd9ea 18%,
    #b285c9 50%,
    #d94a5c 82%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(143, 217, 234, .35), 0 0 16px rgba(217, 74, 92, .3);
}
/* "Reaktorkern"-Emblem: dunkle Mitte mit statischem Blitz, dahinter ein
   EIGENER, separat rotierender Farbring (::before) — dadurch dreht sich
   der Farbschein, ohne dass der Blitz selbst mitdreht/schief steht. */
.bewerben-wall span {
  position: relative;
  isolation: isolate;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  background: radial-gradient(circle at 34% 28%, #232830, #0a0c10 72%);
  border: 1px solid rgba(255, 255, 255, .2);
  text-shadow: 0 0 10px rgba(255, 214, 140, .9), 0 0 4px rgba(0, 0, 0, .6);
  box-shadow: 0 0 0 4px rgba(10, 12, 16, .85),
              0 0 0 6px rgba(255, 255, 255, .14),
              0 0 26px rgba(143, 217, 234, .45),
              0 0 26px rgba(217, 74, 92, .4);
}
.bewerben-wall span::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #8fd9ea 0%, #b285c9 25%, #d94a5c 50%, #b285c9 75%, #8fd9ea 100%);
  filter: blur(2px) saturate(1.3);
  animation: bewerben-emblem-spin 5s linear infinite;
}
@keyframes bewerben-emblem-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bewerben-wall span::before { animation: none; }
}
@media (max-width: 760px) {
  .bewerben-split { flex-direction: column; gap: 2.2rem; width: 100%; }
  .bewerben-side { width: 100%; }
  .bewerben-side .card { width: 100%; box-sizing: border-box; }
  .bewerben-wall {
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, transparent 0%, #8fd9ea 18%, #b285c9 50%, #d94a5c 82%, transparent 100%);
  }
}

/* ==========================================================================
   .card-duel — "Ultra"-Überarbeitung der vier Bewerbungs-Karten auf
   bewerben.html (03.08.2026, auf Wunsch: "extrem geil, ultra von ultra,
   trotzdem professionell", Farben MÜSSEN gleich bleiben). Nutzt bewusst
   dieselben --accent/--accent-2-Variablen, die pro Karte schon gesetzt
   sind (Community-Karten inline babyblau/lila, Agentur-Karten automatisch
   rot/orange vom Spicy-Media-Theme) — dadurch bleibt die Farbwelt exakt
   erhalten, nur die Machart wird komplett neu: rotierender Farbring um
   die Karte, driftender Aurora-Glow im Hintergrund, leuchtendes Icon-
   Badge statt schlichtem Rahmen-Tag, dramatischer Hover-Lift mit
   Farbexplosion. ========================================================================== */
.card-duel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(140% 120% at 12% -15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    var(--card-bg);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: calc(var(--radius) + 6px);
  padding: 2.1rem 1.9rem 2.3rem;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1.25), box-shadow .35s ease, border-color .3s ease;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
/* Rotierender, dünner Farbring exakt am Kartenrand entlang */
.card-duel::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg,
    var(--accent) 0deg, var(--accent-2) 90deg, transparent 150deg, transparent 210deg, var(--accent) 270deg, var(--accent) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .6;
  animation: card-duel-rotate 7s linear infinite;
}
/* Driftender Farbschein-Nebel im Hintergrund, hinter dem Text */
.card-duel::after {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 58%);
  filter: blur(26px) saturate(1.35);
  opacity: .45;
  animation: nav-cta-aurora 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.card-duel > * { position: relative; z-index: 2; }
.card-duel .tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, black 20%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.card-duel h3 {
  font-size: 1.55rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.card-duel p { font-size: 1.04rem; }
.card-duel:hover {
  transform: translateY(-9px) scale(1.025);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 26px 54px rgba(0, 0, 0, .6),
              0 0 44px color-mix(in srgb, var(--accent) 50%, transparent),
              0 0 44px color-mix(in srgb, var(--accent-2) 40%, transparent);
}
@keyframes card-duel-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .card-duel::before, .card-duel::after { animation: none; }
}

/* Trennwand + Emblem: von schlichtem Steg zu einem pulsierenden
   "Energiekern" mit Doppelring und fließendem Lichtstrom aufgewertet. */
.bewerben-wall {
  background-size: 100% 220%;
  animation: bewerben-wall-flow 3.4s linear infinite;
}
@keyframes bewerben-wall-flow {
  0% { background-position: 0 20%; }
  100% { background-position: 0 -180%; }
}
.bewerben-wall span {
  animation: bewerben-emblem-pulse 2.4s ease-in-out infinite;
}
@keyframes bewerben-emblem-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 4px rgba(10, 12, 16, .85), 0 0 0 6px rgba(255, 255, 255, .14),
                0 0 26px rgba(143, 217, 234, .45), 0 0 26px rgba(217, 74, 92, .4);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 4px rgba(10, 12, 16, .85), 0 0 0 7px rgba(255, 255, 255, .26),
                0 0 42px rgba(143, 217, 234, .7), 0 0 42px rgba(217, 74, 92, .6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bewerben-wall, .bewerben-wall span { animation: none; }
}
/* Seitenlabels: leuchtender Unterstrich statt schlichtem Text */
.bewerben-side-label {
  position: relative;
  padding-bottom: .55rem;
  font-size: .8rem;
}
.bewerben-side-label::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  border-radius: 2px;
}
.bewerben-side-blau .bewerben-side-label::after {
  background: linear-gradient(90deg, transparent, #8fd9ea, transparent);
  box-shadow: 0 0 10px rgba(143, 217, 234, .6);
}
.bewerben-side-rot .bewerben-side-label::after {
  background: linear-gradient(90deg, transparent, #d94a5c, transparent);
  box-shadow: 0 0 10px rgba(217, 74, 92, .6);
}

/* ==========================================================================
   TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt
   ========================================================================== */
.team-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.team-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/team-dogi-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Abdunkelung, damit Text und Avatare klar davor stehen und die Ränder
   sauber in die Seite auslaufen */
.team-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 110% 80% at 50% 50%,
      rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .80) 65%, rgba(0, 0, 0, .93) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
}
@media (max-width: 760px) {
  .team-bg::before {
    background-image: url("../img/team-dogi-bg-mobile.jpg");
  }
}

/* Kurzes, dezentes Abblenden während ein Seitenwechsel geholt wird */
body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }

/* ==========================================================================
   MUSIK-KNOPF — kleiner schwebender Knopf unten rechts, auf jeder Seite

   Klick öffnet ein Feld mit den Spotify-Playern von Hasidog und Van-Van.
   Bewusst schwebend (position:fixed) statt als eigener Seitenabschnitt:
   so ist die Musik überall mit einem Klick erreichbar, nimmt aber nirgends
   Platz weg. Die Player werden erst beim ersten Öffnen geladen.
   ========================================================================== */
.music-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
/* Musik-Knopf: gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste
   (dunkler Grund + wandernde, weichgezeichnete Farbwolken + durchlaufender
   Lichtschimmer) — aber mit den Chamäleon-Farben der jeweiligen Seite statt
   der festen Regenbogen-Palette. "Chamäleon" heißt: main.js
   (musikKnopfFarbenAnpassen) liest per Canvas das tatsächliche Bild der
   Seite aus (Durchschnitts- + kräftigste Farbe daraus) und setzt
   --music-c1/--music-c2 live. Ohne Bild (oder solange JS noch lädt) fällt
   der Knopf sauber auf die normale Weltfarbe --accent/--accent-2 zurück.
   Auf der Startseite und den Bewerben-Seiten überschreibt ein eigener Block
   weiter unten die Farben fest auf die Bewerben-Palette (siehe dort). */
.music-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 999px;
  font-size: 1.45rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  background: #0b0e14;
  border: 1px solid color-mix(in srgb, var(--music-c1, var(--accent)) 55%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45),
              0 0 24px color-mix(in srgb, var(--music-c1, var(--accent)) 35%, transparent);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, border-color 1.1s ease;
}
.music-toggle::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--music-c1, var(--accent)) 92%, transparent), transparent 58%),
    radial-gradient(circle at 75% 72%, color-mix(in srgb, var(--music-c2, var(--accent-2)) 92%, transparent), transparent 58%);
  filter: blur(7px) saturate(1.3);
  animation: btn-aurora 10s ease-in-out infinite alternate;
  transition: background 1.1s ease;
}
.music-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 999px;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: btn-shimmer 5s linear infinite;
  pointer-events: none;
}
.music-toggle:hover,
.music-toggle:focus-visible {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.12);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .5),
              0 0 34px color-mix(in srgb, var(--music-c1, var(--accent)) 55%, transparent);
}
.music-widget.open .music-toggle { transform: rotate(12deg); }
.music-toggle span { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .music-toggle::before, .music-toggle::after { animation: none; }
}

/* Auf der Startseite UND den Bewerben-Seiten bekommt der Musik-Knopf
   dieselbe Polarlicht-Farbe wie der "Bewerben"-Knopf oben in der Leiste
   (statt der Chamäleon-Farben vom Seitenbild) — das sind die beiden
   Stellen, an denen bewusst "alle Welten auf einmal" gezeigt werden. */
body.bewerben-seite .music-toggle,
body.start-seite .music-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b0e14;
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
body.bewerben-seite .music-toggle::before,
body.start-seite .music-toggle::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(143, 217, 234, .95), transparent 55%),
    radial-gradient(circle at 45% 75%, rgba(139, 92, 246, .9), transparent 58%),
    radial-gradient(circle at 80% 30%, rgba(217, 74, 92, .95), transparent 55%),
    radial-gradient(circle at 60% 85%, rgba(232, 147, 58, .55), transparent 55%);
  filter: blur(6px) saturate(1.35);
  animation: nav-cta-aurora 9s ease-in-out infinite alternate;
}
body.bewerben-seite .music-toggle::after,
body.start-seite .music-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 999px;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: nav-cta-shimmer 4.5s linear infinite;
  pointer-events: none;
}
body.bewerben-seite .music-toggle:hover,
body.bewerben-seite .music-toggle:focus-visible,
body.start-seite .music-toggle:hover,
body.start-seite .music-toggle:focus-visible {
  box-shadow: 0 16px 38px rgba(0, 0, 0, .5),
              0 0 22px rgba(143, 217, 234, .3),
              0 0 22px rgba(217, 74, 92, .28);
}
@media (prefers-reduced-motion: reduce) {
  body.bewerben-seite .music-toggle::before,
  body.bewerben-seite .music-toggle::after,
  body.start-seite .music-toggle::before,
  body.start-seite .music-toggle::after { animation: none; }
}

.music-panel {
  width: min(330px, calc(100vw - 44px));
  max-height: min(74vh, 640px);
  overflow-y: auto;
  padding: 1rem 1.1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: music-panel-in .22s ease-out;
}
.music-panel[hidden] { display: none; }
@keyframes music-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.music-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.music-panel-head strong { font-size: .95rem; }
.music-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: .2rem .3rem;
  cursor: pointer;
  border-radius: 6px;
}
.music-close:hover { color: var(--accent); }
.music-artist-label {
  margin: .9rem 0 .4rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Spotify bringt seinen eigenen abgerundeten Rahmen mit — hier nur Größe setzen. */
.music-panel iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}
@media (max-width: 620px) {
  .music-widget { right: 14px; bottom: 14px; }
  .music-toggle { width: 48px; height: 48px; font-size: 1.25rem; }
}
@media print { .music-widget { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .music-panel { animation: none; }
  .music-toggle { transition: none; }
}

/* =========================================================================
   Vorschau-Umschalter (nur für Dogi/VanVan, siehe main.js
   renderVorschauSchalter/gate-worker.js) — unten LINKS, spiegelbildlich zum
   Musik-Knopf unten rechts, exakt dieselbe Bauart (Kreisknopf mit
   wandernden Farbwolken + Lichtschimmer, aufklappbares Panel). Eigenes,
   festes Farbpaar (Gold/Lila, das Supporter-Abo-Motiv) statt der
   Chamäleon-Farben des Musik-Knopfs — dieser Knopf soll bewusst IMMER
   gleich aussehen, unabhängig vom Seitenbild. Symbol: 🎭 (Theatermasken —
   "als jemand anderes ansehen", passt zum Rollen-Vorschau-Zweck). Nutzer-
   Feedback 03.08.2026: statt einer dauerhaft sichtbaren Text-Knopfleiste
   sollte es "so ein Button wie bei VanVan" sein, der sich erst bei Klick
   öffnet. ========================================================== */
.vorschau-widget {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.vorschau-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 999px;
  font-size: 1.45rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  background: #0b0e14;
  border: 1px solid rgba(212, 175, 55, .55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 24px rgba(212, 175, 55, .3);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.vorschau-toggle::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 214, 102, .95), transparent 58%),
    radial-gradient(circle at 75% 72%, rgba(139, 92, 246, .9), transparent 58%);
  filter: blur(7px) saturate(1.3);
  animation: btn-aurora 10s ease-in-out infinite alternate;
}
.vorschau-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 999px;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
  background-size: 240% 100%;
  mix-blend-mode: overlay;
  animation: btn-shimmer 5s linear infinite;
  pointer-events: none;
}
.vorschau-toggle:hover, .vorschau-toggle:focus-visible {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.12);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .5), 0 0 34px rgba(212, 175, 55, .5);
}
.vorschau-widget.open .vorschau-toggle { transform: rotate(-12deg); }
.vorschau-toggle span { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .vorschau-toggle::before, .vorschau-toggle::after { animation: none; } }

.vorschau-panel {
  width: min(260px, calc(100vw - 44px));
  padding: 1rem 1.1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: music-panel-in .22s ease-out;
}
.vorschau-panel[hidden] { display: none; }
.vorschau-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .8rem;
}
.vorschau-panel-head strong { font-size: .92rem; color: #ffe9a8; }
.vorschau-close {
  background: none; border: 0; color: var(--text-muted); font-size: 1rem;
  line-height: 1; padding: .2rem .3rem; cursor: pointer; border-radius: 6px;
}
.vorschau-close:hover { color: var(--accent); }
.vorschau-optionen { display: flex; flex-direction: column; gap: .4rem; }
.vorschau-optionen button {
  display: block; width: 100%; text-align: left; font-size: .88rem; font-weight: 600;
  padding: .6rem .8rem; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vorschau-optionen button:hover { border-color: var(--border); color: var(--text); }
.vorschau-optionen button.aktiv {
  border-color: rgba(212, 175, 55, .6); color: #ffe9a8; background: rgba(212, 175, 55, .1);
}
@media (max-width: 620px) {
  .vorschau-widget { left: 14px; bottom: 14px; }
  .vorschau-toggle { width: 48px; height: 48px; font-size: 1.25rem; }
}
@media print { .vorschau-widget { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .vorschau-panel { animation: none; } }

/* ---------- Live-Status-Punkt ---------- */
.live-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e05260; /* rot = offline (Standard) */
  box-shadow: 0 0 8px rgba(224, 82, 96, .55);
  margin-right: .45rem;
  vertical-align: middle;
  transition: background .3s ease, box-shadow .3s ease;
}
.live-dot.is-live {
  background: #22c55e; /* grün = live */
  animation: live-pulse 1.6s infinite;
}
/* Solange der Status noch geladen wird: neutral grau, damit nie kurz
   fälschlich "offline" aufblitzt. */
.live-dot.is-unknown {
  background: #6b7280;
  box-shadow: none;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot.is-live { animation: none; }
}

/* ---------- Badges / Hierarchy ---------- */
.badge { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .6rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-muted); }
.badge.rank-1 { border-color: var(--accent); color: var(--accent); }

/* ---------- QR ---------- */
.qr-card { text-align: center; }
.qr-card .img-placeholder { width: 160px; height: 160px; margin: 0 auto 1rem; aspect-ratio: auto; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.todo-note {
  border: 1px dashed var(--accent-2);
  background: rgba(139,92,246,.08);
  padding: 1rem 1.2rem;
  border-radius: 10px;
  font-size: .85rem;
  color: var(--text-muted);
  margin: 1.5rem 0;
}
.todo-note strong { color: var(--accent-2); }