/* =====================================================================
   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; }
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(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--text-muted); }
.lead { font-size: 1.15rem; color: var(--text); }

.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. */
  width: min(1400px, 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;
  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;
  animation: sprach-dropdown-in .18s ease both;
}
.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;
}
.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);
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta::before, .nav-cta::after { animation: none; }
}

/* TikTok-Button: exakt derselbe Polarlicht-Mechanismus wie .nav-cta
   (schwarze Pille + wandernde Farbwolken + Lichtschimmer), aber mit den
   echten TikTok-Markenfarben (Cyan #25F4EE + Pink/Rot #FE2C55) statt der
   allgemeinen Regenbogen-Aurora. Bewusst NUR für echte TikTok-Links
   verwendet — keine anderen Social-/CTA-Buttons bekommen diese Farben. */
.btn-tiktok {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2.1rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 1.08rem;
  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 6px 18px rgba(0, 0, 0, .35);
}
.btn-tiktok span {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
}
.btn-tiktok::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(37, 244, 238, .95), transparent 55%),
    radial-gradient(circle at 78% 68%, rgba(254, 44, 85, .95), transparent 58%);
  filter: blur(9px) saturate(1.35);
  animation: nav-cta-aurora 9s ease-in-out infinite alternate;
}
.btn-tiktok::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-tiktok: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(37, 244, 238, .35),
              0 0 22px rgba(254, 44, 85, .35);
}
@media (prefers-reduced-motion: reduce) {
  .btn-tiktok::before, .btn-tiktok::after { 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;
  }
}

/* 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); }

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

/* Schwelle von ursprünglich 880px auf 1480px angehoben: nach mehreren
   Vergrößerungsrunden (Logo/Nav-Schrift/Sprachschalter/Bewerben-Button,
   mehr Abstand zwischen den Nav-Punkten, größerer eigener Nav-Container,
   Polarlicht-Padding je Kategorie) braucht die Desktop-Nav deutlich mehr
   Platz als früher. Live bei mehreren Breiten nachgeprüft (siehe Commits
   vom 02.08.2026) — Schwelle hier bewusst großzügig, damit nie wieder
   Elemente sichtbar aus der Leiste verschwinden. */
@media (max-width: 1480px) {
  .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%; }
  .nav-group.open .nav-dropdown { display: flex; }
  .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
}

/* ---------- 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; }
.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; } }

/* ---------- 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) ---------- */
.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; }

/* ---------- 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;
}
.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;
  /* dezenter Marken-Look: Sättigung/Kontrast leicht angehoben, Farbton via Overlay */
  filter: saturate(1.15) contrast(1.08) brightness(1.02);
}
.collage-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(143, 217, 234, .22), rgba(139, 92, 246, .14));
  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 + leicht abdunkeln: ruhiger Untergrund, der die Augen
     beim Lesen nicht anstrengt. */
  filter: blur(4px) brightness(.62) saturate(.95);
}
/* Abdunkelung für den Seitenkörper — bewusst kräftig, damit langes Lesen
   angenehm bleibt. Das Motiv bleibt als ruhige Stimmung im Hintergrund. */
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) 80%, transparent) 0%,
    color-mix(in srgb, var(--bg) 92%, transparent) 45%,
    color-mix(in srgb, var(--bg) 95%, 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);
}
.bewerben-wall span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #8fd9ea 0%, #8fd9ea 48%, #d94a5c 52%, #d94a5c 100%);
  border: 2px solid rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 6px rgba(10, 12, 16, .55),
              0 0 20px rgba(143, 217, 234, .4),
              0 0 20px rgba(217, 74, 92, .35);
}
@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%);
  }
}

/* ==========================================================================
   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; }
}

/* ---------- 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); }