/* ============================================================
   Radio Aethertaeter – Verlauschung Deluxe!
   Reine HTML/CSS-Stufe (Phase 1)
   ============================================================ */

/* --- LIZENZ-SCHRIFT: "Magic Retro" (Logo-Font) -------------
   Lizenziert, Dateien in assets/fonts/ (woff2).
   "Swash" = Variante mit Zierschwüngen wie im Logo-Schriftzug.
------------------------------------------------------------ */
@font-face {
  font-family: "Magic Retro";
  src: url("../fonts/MagicRetro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Magic Retro";
  src: url("../fonts/MagicRetroSlant.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Magic Retro Swash";
  src: url("../fonts/MagicRetroSwash.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Magic Retro Swash";
  src: url("../fonts/MagicRetroSlantSwash.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;   /* siehe color-scheme Meta-Tag in index.html - verhindert Android-Auto-Dark */
  --orange: #ff7505;
  --orange-soft: #ff9a3d;
  --brown: #5d2900;
  --brown-deep: #2a1300;
  --ink: #1a0d02;
  --cream: #f6ead7;
  --white: #fff;

  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-display: "Magic Retro", "Inter Tight", serif;        /* Logo-Schrift (für Text) */
  --font-alt: "Josefin Sans", "Inter Tight", sans-serif;      /* Zweitschrift: schlicht/schwungvoll */
  /* "Magic Retro Swash" ist eine ORNAMENT-Schrift (nur Zier-Glyphen, keine Buchstaben)
     – NICHT für ganze Wörter verwenden, nur für einzelne Deko-Zeichen. */

  --maxw: 1140px;
  --radius: 18px;
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--white);
  background: var(--brown-deep);
  overflow-x: hidden;                    /* negative Margins (Logo/Player) -> kein H-Scroll */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;        /* iOS skaliert sonst Text im Querformat hoch */
  -webkit-tap-highlight-color: transparent;  /* kein grauer Tap-Blitz auf iOS */
}

img { max-width: 100%; display: block; }

em { font-style: normal; color: var(--white); }

/* Sichtbarer Fokusring fuer Tastaturnutzung auf allen interaktiven Elementen, die keinen
   eigenen definieren (WCAG 2.4.7 Focus Visible). Nur bei :focus-visible (Tastatur), nicht
   bei Maus-/Touch-Klick -> kein optisches Rauschen bei normaler Bedienung. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--orange-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus-visible { outline: none; }   /* Sprungziel des Skip-Links, kein Ring auf dem Container selbst */

/* Skip-Link: WCAG 2.4.1 Bypass Blocks. Ausserhalb des Bildschirms bis er Fokus erhaelt. */
.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 10000;
  background: var(--brown-deep);
  color: var(--white);
  padding: .75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

/* ===== Neon-Begruessung (ersetzt die alte Laufschrift) =====
   EIN rotierendes Element mit Neon-Puls (Farbe/Glow, bewusst langsam) - der Willkommensgruss
   ist Eintrag 0 derselben Rotation wie die Genre-Woerter, keine eigene stehende
   Ueberschrift mehr davor. Sitzt NICHT mehr in der Logo/Uhr-Zeile, sondern als eigene Zeile
   direkt VOR dem Player - MITTIG im Zwischenraum zwischen dem Ende der Logo/Uhr-Zeile
   (oberer Rand dieses Bereichs) und der Player-Oberkante (unterer Rand), s.u. */
.hello {
  position: relative;                         /* Anker fuer das absolut liegende Element + Stacking-Context */
  z-index: 7;                                 /* ueber dem Player-Hintergrund, wie das Logo (z-index:6) */
  width: 100%;
  text-align: center;
  min-height: 3.2rem;                         /* der Zwischenraum, in dem die Animation MITTIG sitzt */
}
/* Rotierendes Element: sitzt mittig im .hello-Zwischenraum (top:50% + zentrierender
   Transform), NICHT an einer Kante. Wechsel schiebt statt zu blenden ("Rauf-Wechsel"): der
   alte Eintrag schiebt nach oben raus, der neue taucht von UNTEN her auf, als wuerde er
   hinter der Player-Kante hervorkommen - dafuer sorgt clip-path (schneidet den unteren Teil
   weg, waechst beim Reinschieben wieder zur vollen Hoehe) zusaetzlich zu Position/Opacity.
   Klasse enter-below setzt die Startposition OHNE Transition, wird dann sofort wieder
   entfernt (siehe JS), sodass genau dieser eine Schritt animiert. Die Buchstaben-Welle
   sitzt auf den Zeichen-<span>s darin. */
.hello__genre {
  position: absolute;                         /* aus dem Fluss -> aendert die Zeilen-Breite NIE,
                                                  egal wie lang/kurz/mehrzeilig der Eintrag ist */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;                        /* Wort/URL bleibt immer auf einer Zeile */
  margin: 0;
  font-family: var(--font-display);
  font-size: 3.3rem;
  line-height: 1.05;
  color: var(--white);
  text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
  clip-path: inset(0 0 0% 0);                 /* Ruhezustand: nichts weggeschnitten */
  transition: opacity .42s ease, transform .42s ease, clip-path .42s ease;
  animation: heroNeon 13s ease-in-out infinite;   /* bewusst langsam (Original war 2.2s) */
}
.hello__genre.is-out { opacity: 0; transform: translate(-50%, calc(-50% - 16px)); }       /* schiebt hoch raus */
.hello__genre.enter-below {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 30px));   /* Startpunkt spuerbar tiefer -> wirkt wie "von hinter der Kante" */
  clip-path: inset(0 0 100% 0);               /* komplett weggeschnitten (unsichtbar), bis es hochsteigt */
  transition: none;                           /* Startzustand ohne Animation setzen */
}
.hello__genre--url { font-size: 2.3rem; }     /* URL etwas kleiner (sonst zu breit) */
@keyframes heroNeon {
  0%, 100% { color: #fff;
    text-shadow: 0 0 4px var(--orange), 0 0 10px rgba(255, 117, 5, .5); }
  50% { color: #ffe9d0;
    text-shadow: 0 0 12px var(--orange), 0 0 26px var(--orange-soft), 0 0 42px rgba(255, 154, 61, .6); }
}

/* ===== LED-Laufschrift-Schild (nur Desktop, s. min-width:1024px weiter unten) =====
   Wirkt wie ein an zwei Draehten von der Hero-Oberkante haengendes LED-Matrix-Panel
   (Vorbild: haengende LED-Laufschrift-Displays in Schaufenstern). Ersetzt dort NUR
   optisch die alte rotierende Neon-Begruessung (.hello) durch eine echte, endlos
   scrollende Laufschrift - Mobile bleibt bei .hello unveraendert. Text kommt aus
   denselben ENTRIES wie die Mobil-Rotation (siehe Script in index.html). */
.led-sign { display: none; }   /* Default: aus (Mobile) - erst ab 1024px eingeblendet */
@media (min-width: 1024px) {
  .led-sign {
    display: block;
    position: relative;
    width: min(360px, 34vw);   /* kleiner (Feedback 2026-07-27: "lauftextkasten kleiner") - war 460px/42vw */
    margin: 0 auto 1.25rem;
    left: 15%;   /* Versatz nach rechts aus der Mitte, ohne die reservierte Flow-Breite zu aendern */
  }
}
/* Zwei kraeftige "Kettchen" von der Hero-Oberkante bis zur Panel-Oberkante - Laenge = das
   Stueck Luft, das .hero per padding-top ueber .hero__inner freihaelt (s. .hero weiter
   unten), damit sie optisch exakt am Hero-Rand ansetzen. Leicht schraege Aufhaengung
   (Ketten konvergieren nach unten zum schmaleren Panel), wie ein echtes Schild an zwei
   Kettchen. Wirkte als reine Dash-Textur auf duennem Balken "billig" (Feedback 2026-07-27) -
   jetzt: heller Rundungs-Glanzstreifen + diagonale Dreh-Textur (liest sich als gedrehtes
   Stahlseil statt als gestrichelter Balken), dazu eine plastischere Deckenhalterung mit
   zwei Nietenpunkten und ein echter Metall-Oesenring (Radial-Gradient statt Kreis-Outline)
   am Panel-Ende. */
.led-sign__wire {
  position: absolute;
  top: -2.75rem;
  width: 8px;
  height: 2.75rem;
  transform-origin: top;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 0%, transparent 28%, rgba(255, 255, 255, .6) 40%, rgba(255, 255, 255, .15) 48%, transparent 58%),
    repeating-linear-gradient(50deg, rgba(0, 0, 0, .32) 0 2px, rgba(255, 255, 255, .16) 2px 4px, transparent 4px 7px),
    linear-gradient(90deg, #6a6a6a, #bcbcbc 40%, #8a8a8a 58%, #464646 100%);
  box-shadow: 1px 0 2px rgba(0, 0, 0, .6), inset -1px 0 1px rgba(0, 0, 0, .4);
}
.led-sign__wire::before {
  /* Deckenhalterung: Wandplatte mit zwei Nietenpunkten statt schlichtem Rechteck */
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 22px; height: 10px;
  transform: translateX(-50%);
  border-radius: 3px;
  background:
    radial-gradient(circle 1.6px at 5px 5px, rgba(0, 0, 0, .6), transparent 65%),
    radial-gradient(circle 1.6px at 17px 5px, rgba(0, 0, 0, .6), transparent 65%),
    linear-gradient(180deg, #cfcfcf 0%, #9a9a9a 40%, #5a5a5a 65%, #3a3a3a 100%);
  box-shadow:
    0 3px 4px rgba(0, 0, 0, .65),
    inset 0 1px 1px rgba(255, 255, 255, .55),
    inset 0 -2px 2px rgba(0, 0, 0, .5);
}
.led-sign__wire::after {
  /* Verbindungsoese zum Panel: echter Metallring per Radial-Gradient (transparentes Loch
     in der Mitte), statt einer duennen Kreis-Outline */
  content: "";
  position: absolute;
  bottom: -6px; left: 50%;
  width: 14px; height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0%, transparent 32%,
    #e2e2e2 38%, #9a9a9a 58%, #3a3a3a 72%,
    transparent 78%, transparent 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}
.led-sign__wire--l { left: 14%; transform: rotate(-4deg); }
.led-sign__wire--r { right: 14%; transform: rotate(4deg); }
/* Panel: dunkler Rahmen, feines Punktraster als Andeutung der LED-Matrix, leichter
   Schraeghang wie ein an Kettchen pendelndes Schild (kein Bug, Absicht). Hoeher als
   zuvor (mehr vertikales Padding), damit es als eigenstaendiges Schild wirkt statt als
   duenner Streifen. */
.led-sign__screen {
  position: relative;
  background: #0c0f0b;
  border: 2px solid #34392f;
  border-radius: 6px;
  height: 3.6rem;                /* kleiner (Feedback 2026-07-27: "lauftextkasten kleiner") - war 4.8rem */
  padding: 0 .4rem;
  display: flex;
  align-items: center;          /* Text vertikal im festen Kasten zentriert */
  overflow: hidden;
  /* Bezel-Effekt komplett per box-shadow (kein Pseudo-Element noetig, das wuerde mit
     .led-sign__track um die Stapelreihenfolge konkurrieren): dunkle Aussenrille simuliert
     ein eingelassenes Metallgehaeuse, duenne Hell/Dunkel-Kanten oben/unten fuers Relief. */
  box-shadow:
    0 0 0 3px #14140f,
    0 1px 0 rgba(255, 255, 255, .16),
    0 -1px 0 rgba(0, 0, 0, .65),
    inset 0 0 14px rgba(0, 0, 0, .9),
    inset 0 3px 6px rgba(0, 0, 0, .65),
    0 12px 26px rgba(0, 0, 0, .55);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px);
  background-size: 100% 100%, 7px 7px;
  transform: rotate(-1deg);
}
.led-sign__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ledScroll 62s linear infinite;   /* kein prefers-reduced-motion-Guard, s. CLAUDE.md:
                                                  Laufschrift ist Teil des Player-Umfelds, soll
                                                  wie Equalizer/Now-Playing immer laufen */
}
.led-sign__seg {
  white-space: nowrap;
  padding-right: 2.5rem;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 1.3rem;             /* kleiner (Feedback 2026-07-27: "lauftextkasten kleiner") - war 1.85rem */
  color: #ffffff;
  text-shadow: 0 0 3px #fff, 0 0 9px rgba(255, 255, 255, .75), 0 0 18px rgba(255, 255, 255, .5);
}
@keyframes ledScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* Track ist 2x ein identisches Segment breit -> nahtloser Loop */
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: auto;    /* Hoehe = Inhalt; Player liegt jetzt darueber, Logo soll in den sichtbaren Bereich passen */
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.5rem 1.25rem 0.75rem;   /* noch mehr Luft oben -> Logo + Player deutlich vom Rand abgesetzt */
  /* Hinweis Desktop (>=1024px): .led-sign braucht hier eigentlich mehr Luft oben fuer ihre
     haengenden Ketten (top:-2.75rem, s. .led-sign__wire) - wird NICHT hier geloest (das wuerde
     Logo/Player/Uhr wieder mit nach unten schieben), sondern gezielt unten bei der
     min-width:1024px-Regel: .hero bekommt dort mehr padding-top NUR fuer die Ketten-Luft,
     .hero__head bekommt einen gleich grossen negativen margin-top, der genau das wieder
     ausgleicht - Logo/Player/Uhr bleiben so hoch wie hier eingestellt, .led-sign ruckt mit
     ihren Ketten trotzdem sichtbar tiefer/richtig. */
  /* 70er-Sunburst: Strahlenkranz aus Marken-Orange, komplett per CSS.
     Die weiche Vignette (heller Kern -> dunkle Raender) liegt im .hero__overlay. */
  background: repeating-conic-gradient(from 0deg at 50% 38%,
    #ff7505 0deg 7deg, #7a2f00 7deg 14deg);
}
.hero__overlay {
  position: absolute; inset: 0;
  /* Sunburst-Vignette: heller Kern in der Mitte, weich abdunkelnd zu den Raendern
     (haelt die Strahlen dezent, Text/Logo bleiben lesbar). */
  background:
    /* Aeusserer Stop von .92 auf .55 abgesenkt: bei der inzwischen deutlich gewachsenen
       Hero-Hoehe (LED-Schild, Player-Luecke, Text) liegen weiter unten liegende Bereiche
       (u.a. die Sunburst-Luecke unter dem Player) sonst schon nahe 100% Radius und wurden
       fast schwarz - der Sunburst darunter verschwand komplett (Feedback 2026-07-25). */
    radial-gradient(circle at 50% 38%,
      rgba(255, 201, 120, .70) 0%,
      rgba(255, 154, 61, .18) 20%,
      rgba(42, 19, 0, .30) 78%,
      rgba(20, 10, 4, .45) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
/* Visuell versteckt, fuer Screenreader/SEO weiterhin vorhanden */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Kopfzeile: Logo links, Begruessung rechts. flex-wrap -> stapelt auf schmalen Screens. */
.hero__head {
  display: flex;
  flex-direction: column;       /* Kopfzeile (Logo+Begruessung+Uhr) oben, Text darunter */
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
/* Entkoppelt die Vertikal-Position von Logo/Player/Uhr (.hero__head) von der Luft, die
   .led-sign fuer ihre haengenden Ketten oben braucht (Feedback 2026-07-25: "nur player logo
   und uhr hoeher! das laufband bleibt!"). padding-top auf .hero gibt der Kette Platz, der
   gleich grosse negative margin-top hier gleicht das fuer .hero__head wieder aus - Logo/
   Player/Uhr bleiben dadurch so hoch wie zuvor, unabhaengig davon wie viel Luft .led-sign
   oben bekommt. Nur >=1024px, weil .led-sign nur dort sichtbar ist (s. .led-sign
   display:none sonst).
   padding-top 4.75rem->3.25rem (Feedback 2026-07-27: "kasten kann man auch noch weiter nach
   oben setzen") - margin-top hier um denselben Betrag entschaerft (-6.75rem->-5.25rem),
   damit NUR .led-sign steigt und Logo/Player/Uhr exakt an ihrer bisherigen Position bleiben
   (nicht mehr per margin-top direkt auf .led-sign geloest - das zog faelschlich die ganze
   Kopfzeile mit hoch, s. Auto-Memory/Chat 2026-07-27). */
@media (min-width: 1024px) {
  .hero { padding-top: 3.25rem; }
  .hero__head { margin-top: -5.25rem; }
}
/* Zeile: Logo links, Uhr rechts – vertikal zueinander zentriert. Frueher stand hier noch
   ein drittes Element (die Neon-Begruessung) dazwischen, das per Transform-Formeln (fixe
   px-Werte kombiniert mit vw) austariert wurde; seit die Begruessung eine eigene Zeile auf
   der Player-Oberkante hat (s. .hello weiter unten), reicht simples space-between fuer
   Logo/Uhr - robuster als die alten Magic-Number-Transforms, die exakt auf die 3-Element-
   Zeile kalibriert waren und beim Entfernen des mittleren Elements das Logo weit nach
   rechts verschoben haben. */
.hero__topline {
  position: relative;   /* Anker fuer .hello, wenn sie auf Desktop per position:absolute aus
                            dem Flex-Fluss genommen wird (s. Media Query unten) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 5rem;
  width: 100%;
}
.hero__logo {
  position: relative;            /* fuer z-index + leichte Ueberlappung auf den Player */
  z-index: 6;                    /* Logo liegt ueber der Player-Oberkante */
  width: auto;
  max-width: min(440px, 48vw);   /* noch etwas groesser */
  max-height: 40vh;             /* passt in den sichtbaren Bereich */
  height: auto;
  align-self: flex-start;    /* oben ausrichten statt mittig (Uhr ist hoeher) */
  margin: 0 0 0 -6.5rem;       /* Position rechts/links laufend nachjustiert. Die Ueberlappung
                                auf die Player-Oberkante kommt NICHT von einem Margin hier,
                                sondern per JS (translateY, echt gemessen - siehe index.html
                                layoutFix()), robust egal wie hoch das Fenster ist oder was
                                sich sonst noch am Layout aendert. */
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
}
@media (min-width: 1024px) {
  .hero__topline { flex-wrap: nowrap; }   /* bleibt einzeilig: Logo | Uhr */
  /* .hello liegt jetzt im Markup ZWISCHEN Logo und Uhr (fuer die gestapelte Mobil-Reihenfolge,
     s. Media Query unten min-width:1023px). Auf Desktop NUR hier per position:absolute aus dem
     Flex-Fluss von .hero__topline nehmen, sonst wuerde ihre Box als dritter Flex-Item den
     Abstand zwischen Logo und Uhr verkleinern (space-between teilt sich sonst auf 2 statt 1
     Luecke auf). Die eigentliche Text-Positionierung (`.hello__genre`, per JS exakt zwischen
     Logo/Uhr auf Uhr-Hoehe) bleibt unveraendert - sie ist bereits selbst absolut positioniert
     relativ zu `.hello` und damit unabhaengig davon, wo `.hello` genau sitzt. */
  .hello { position: absolute; top: 0; left: 0; display: none; }   /* ersetzt durch .led-sign auf Desktop */
}
.hero__welcome {
  flex: 1 1 320px;
  text-align: center;
}
/* Text rechts neben dem Logo, mittbuendig */
.hero__text {
  flex: 0 0 auto;
  max-width: 560px;
  text-align: justify;          /* Blocksatz */
  hyphens: auto;
  align-self: flex-start;       /* hoeher: oben am Logo ausgerichtet (~Logo-Mitte) */
  font-family: var(--font-alt);       /* Josefin Sans fuer den ganzen Block */
  font-size: 1.7rem;            /* groesser; einheitlich fuer Text, Zitat und Quelle */
  line-height: 1.3;             /* Josefin Sans braucht etwas mehr Luft als Magic Retro */
  color: var(--white);          /* ganzer Block einheitlich weiss */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 14px rgba(0, 0, 0, .35);  /* lesbar auf hellem Himmel */
}
.hero__text p {
  font-size: 1em;
  font-weight: 600;             /* wie das Zitat -> gleiches, volles Weiss (duenne Schrift wirkt grauer) */
  margin: 0 0 0.7rem;           /* kleinerer Abstand zum Zitat darunter */
}
.hero__quote {
  font-family: var(--font-alt);
  font-size: 1em;               /* gleich gross wie der Fliesstext oben */
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
  margin: 0.7rem 0 0;           /* kleinerer Abstand zum Absatz darueber */
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 154, 61, .3);   /* Trennlinie zum Absatz */
  color: var(--white);          /* weiss wie der restliche Textblock */
  text-align: center;
  text-wrap: balance;           /* ausgewogene Zeilenumbrueche */
}
.hero__quote cite {
  display: block;
  margin-top: .8rem;
  font-family: inherit;
  font-style: normal;
  font-weight: 600;             /* wie der restliche Block -> gleiches, volles Weiss */
  font-size: 1em;               /* gleich gross wie Zitat & Fliesstext */
  letter-spacing: .03em;
  color: var(--white);          /* einheitlich weiss (ganzer Textblock) */
  text-align: center;
}
.hero__quote cite span { color: var(--white); }
/* Bild (Album-Cover) neben dem Hero-Text; bricht auf schmalen Screens darunter um */
.hero__textwrap {
  display: flex;
  align-items: center;          /* Bild vertikal mittig zum Text */
  gap: 6.5rem;                  /* Bild weiter rechts vom Text */
}
.hero__album {
  flex: 0 0 auto;
  width: clamp(300px, 38vw, 500px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .75);
  display: block;
}
.hero__album-btn {
  flex: 0 0 auto;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14px;
  cursor: zoom-in;
}
/* Kein transform/transition hier (auch nicht nur auf :hover) - das erzeugt eine eigene
   Compositing-Ebene und fuehrte zu Scroll-Repaint-Glitches (doppelt gezeichneter Text
   beim Scrollen). Fokusring: die globale Regel (button:focus-visible weiter oben) deckt das schon ab -
   eine eigene zusaetzliche :focus-visible-Regel hier loeste einen Compositing-Bug aus
   (Sunburst-Hintergrund blaeht sich ueber die ganze Seite auf). */
@media (max-width: 720px) {
  .hero__textwrap { flex-direction: column; align-items: center; }
  .hero__album { width: min(70vw, 260px); }
  .hero__text { font-size: 1.15rem; max-width: min(90vw, 480px); }
}
.hero__greeting {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1.18;
  color: var(--white);
  margin: 0;
}
.hero__greeting em { font-style: normal; color: var(--white); }
/* Player + Radiocult-Link nebeneinander; margin-top:auto schiebt die Zeile an den
   unteren Rand des (vollhohen) Hero, ohne dass man scrollen muss. */
.player-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2rem;
  width: 100%;
  margin-top: auto;
}
.player {
  flex: 1 1 400px;
  max-width: 560px;
}
/* Link-Button: Aethertaeter- + Radio-Cult-Logo leicht ueberlappend ("verschmolzen") */
.cult, .tunein {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;              /* sitzt jetzt rechts neben dem Logo */
}
.cult__label, .tunein__label {
  font-family: var(--font-alt);          /* Radiocult-Hinweis in Josefin Sans */
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 .7rem;
  max-width: 14ch;
  text-align: center;
}
.cult-link, .tunein-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.cult-link img, .tunein-link img {
  display: block;
  width: 140px;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .55));
}
.cult-link__ra { position: relative; z-index: 1; }
.cult-link__rc { margin-left: -2.75rem; }             /* leichte Ueberlappung ("verschmolzen") */
@media (hover: hover) {
  .cult-link:hover, .tunein-link:hover { transform: translateY(-3px) scale(1.03); }
}

/* ===== Analoge Uhr (Chronopak-Stil: dicker Holz/Lack-Ring um schwarzes Ziffernblatt,
   Messing-Bodenring) - Vorbild: Vitra/George-Nelson-Tischuhr (Referenzbilder Feedback
   2026-07-25). z-index:6 wie .hero__logo, damit die Uhr beim Ueberlappen (JS-translateY
   in index.html, CLOCK_OVERLAP) sichtbar VOR dem Player liegt statt dahinter zu verschwinden
   (.rplayer steht im DOM NACH .hero__topline). ===== */
.clock {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  align-self: center;
  margin-top: 2.5rem;
  margin-right: -6.25rem;
}   /* weiter unten (Animation folgt automatisch, haengt an der Uhr-Hoehe); etwas weiter raus fuer mehr Luft zur Begruessung.
   Nicht weiter raus schieben: bei schmaleren Desktop-Breiten (<1300px) faellt die Uhr sonst
   fast aus dem sichtbaren Bereich - feste rem-Werte skalieren nicht ueber alle Breiten. */
/* Unter 1024px stapelt .hero__topline (flex-wrap) Logo/Uhr auf eigene Zeilen. Der negative
   Margin oben (fuer die einzeilige Desktop-Ausrichtung auf Logo-Hoehe gedacht) zieht die Uhr
   hier zu dicht unters Logo -> etwas Abstand noetig. Muss NACH der Basis-Regel stehen
   (gleiche Spezifitaet, Media Query allein gewinnt die Kaskade nicht). Ausserdem zieht der
   Desktop-Logo-Rand das Logo hier unnoetig aus der Mitte. */
@media (max-width: 1023px) {
  /* justify-content:center NUR hier (Basis-Regel bleibt space-between fuer die einzeilige
     Desktop-Ausrichtung Logo-links/Uhr-rechts) - im gestapelten Mobil-Layout hat jede Zeile nur
     EIN Flex-Item, space-between wuerde das an den linken Rand kleben lassen statt zu
     zentrieren (Feedback 2026-07-24: "logo text und uhr noch in die mitte setzen"). */
  .hero__topline { justify-content: center; }
  /* Logo/Begruessung/Uhr sassen auf Mobile zu dicht am oberen Rand (Feedback 2026-07-26) -
     Gruppe insgesamt etwas tiefer setzen, ohne die einzelnen margin-top-Abstaende
     untereinander (s.u.) anzufassen. */
  .hero__head { margin-top: 1.75rem; }
  .hero__logo { margin-left: 0; max-width: min(420px, 82vw); }   /* steht hier allein auf eigener Zeile -> darf deutlich groesser sein */
  /* Gestapelte Reihenfolge (Logo -> Begruessung -> Uhr, per Markup-Reihenfolge in
     .hero__topline): eigener Abstand oben, das Basis-Gap des Flex-Containers allein wirkte
     zu knapp zwischen den drei gestapelten Zeilen ("nicht zu eng" - Feedback 2026-07-24). */
  .hello { margin-top: 1.75rem; }   /* etwas mehr Luft zum Logo (Feedback 2026-07-26) */
  .clock { margin-top: 2rem; margin-right: 0; }   /* Desktop-Feinjustage (-2rem) hier zuruecksetzen, sonst sitzt die Uhr nicht exakt mittig */
  /* Fuss ist fuers "Sitzen auf der Player-Kante" gedacht (CLOCK_OVERLAP in index.html greift
     nur im sideBySide-Desktop-Layout) - im gestapelten Mobil-Layout ueberlappt die Uhr den
     Player nicht, der Fuss wuerde frei in der Luft haengen. Deshalb hier ausgeblendet
     (Feedback 2026-07-25: "neue Uhr auch mobile, aber ohne Fuss"). */
  .clock__stand { display: none; }
}
/* Aussenring: dicker lackierter Holzton. War frueher per transform: rotate(-5deg) bewusst
   schraeg ("angelehnt" am Messing-Standfuss) - wirkte in der Praxis aber wie ein Rendering-
   Fehler (Zifferblatt/Zeiger sehen dadurch schief/nicht gerade aus, Feedback 2026-07-26).
   Ring, Ziffernblatt und Zeiger sitzen daher jetzt gerade. */
.clock__face {
  position: relative;
  width: 172px;
  height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Glanz-Blob oben links (rundes Hochglanz-Plastik/Lack-Vorbild, s. Referenzfoto) liegt VOR
     dem eigentlichen Farbverlauf, damit der Ring wie eine gewoelbte, glaenzende Roehre wirkt
     statt flach eingefaerbt. */
  background:
    radial-gradient(ellipse 62px 46px at 30% 20%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, #ffc372 0%, #e6790f 42%, #8a4006 78%, #a34e08 100%);
  box-shadow:
    0 20px 34px -9px rgba(0, 0, 0, .65),
    inset 0 7px 11px rgba(255, 255, 255, .55),
    inset 0 -15px 22px rgba(0, 0, 0, .5),
    inset 7px 0 14px rgba(255, 255, 255, .12),
    inset -7px 0 16px rgba(0, 0, 0, .3);
}
/* Schwarzes Ziffernblatt, zentriert im Ring (Ringdicke = (210-168)/2 = 21px je Seite) */
.clock__dial {
  position: relative;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, #2c2c2c 0%, #050505 72%);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, .9),
    inset 0 4px 7px rgba(0, 0, 0, .65),
    0 2px 3px rgba(0, 0, 0, .55),
    0 0 0 2px rgba(255, 255, 255, .06);
  overflow: hidden;
}
.clock__dial::before {
  /* Glas-Glanz oben links, rein dekorativ */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}
/* "Phi"-Marker (Kreis + durchgehender Strich) an 12/3/6/9, Position+Rotation per JS */
.clock__phi {
  position: absolute;
  width: 16px;
  height: 16px;
}
.clock__phi::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.4px solid #f5f5f5;
  border-radius: 50%;
}
.clock__phi::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1.4px;
  background: #f5f5f5;
  transform: translateX(-50%);
}
/* Strich-Markierungen an den uebrigen Stunden (radial gedreht per JS) */
.clock__tick {
  position: absolute;
  width: 2.5px;
  height: 11px;
  border-radius: 2px;
  background: #f5f5f5 !important;
  box-shadow: 0 0 4px rgba(255, 255, 255, .3);
}
.clock__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg);
  /* Leichter Verlauf statt Vollton -> Zeiger wirken geformt/gewoelbt statt papierflach
     (Referenzfoto: Zeiger haben sichtbare Kante/Glanzseite). */
  background: linear-gradient(90deg, #d4d4d4 0%, #ffffff 45%, #cfcfcf 100%);
}
/* Dolch-/Speerform (Nelson-Zeiger-Vorbild): breiter Kopf, schmaler Schaft zum Drehpunkt */
.clock__hand--h {
  width: 16px;
  height: 30%;
  clip-path: polygon(50% 0%, 100% 55%, 63% 55%, 63% 100%, 37% 100%, 37% 55%, 0% 55%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
/* Schlanker Minutenzeiger, spitz zulaufend */
.clock__hand--m {
  width: 9px;
  height: 42%;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
/* Roter Sekundenzeiger mit kleiner Kugel nahe der Spitze */
.clock__hand--s {
  width: 2px;
  height: 46%;
  background: #d8321c !important;
}
.clock__hand--s::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8321c;
  transform: translateX(-50%);
}
.clock__center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d8321c;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #f5f5f5, 0 0 4px rgba(0, 0, 0, .5);
}
/* Messing-Standfuss: kurzer Verbindungsstab + flacher, breiter Fuss-Steg (echte
   Frontalansicht, s. SVG-Pfade in index.html) - hinter dem Ziffernblatt-Ring (z-index -1
   relativ zu .clock). */
.clock__stand {
  position: absolute;
  left: 50%;
  top: 98%;
  width: 148px;
  height: auto;
  transform: translateX(-50%);
  z-index: -1;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4));
}

/* ===== Eigener HTML5-Player ===== */
/* rechte Spalte: Text oben, Player darunter (rueckt in den freien Platz hoch) */
.hero__right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-self: center;          /* Text-Bild-Block mittig auf dem Screen */
  margin-top: 2.5rem;          /* mehr Abstand zur Kopfzeile darueber */
  gap: 0.75rem;
}
/* Voll-Breite-Bar direkt unter dem Laufband */
.rplayer {
  position: relative;
  overflow: hidden;
  width: 100vw;                    /* Full-Bleed: volle Fensterbreite, obwohl im 1040px-Hero-Kasten */
  margin: 0 0 0 calc(50% - 50vw);  /* aus dem zentrierten Kasten nach links bis zum Fensterrand ziehen */
  margin-top: -1.6rem;             /* Player leicht nach oben -> Logo-Unterkante ueberlappt die Oberkante */
  margin-bottom: 3.5rem;           /* Luecke zum Text darunter -> Sunburst-Hintergrund der .hero wird
                                       sichtbar (Feedback 2026-07-25: "sodass man unter dem Player
                                       den Sunburst sieht"; nochmal vergroessert 2026-07-27, dann wieder
                                       etwas reduziert 2026-07-28 zugunsten von mehr Player-Hoehe -
                                       "oben sind die platzverhaeltnisse gut", nur unten sollte der
                                       Player selbst wachsen statt der Luecke). */
  padding: 1.3rem 1.5rem 3.4rem;  /* Oben unveraendert (Platzverhaeltnis zum Logo passt bereits) - nur
                                       unten mehr Innenabstand, damit der Player insgesamt nach UNTEN
                                       hin hoeher wird (Feedback 2026-07-28: "player hoeher, aber gegen
                                       unten, oben sind die platzverhaeltnisse gut"; zweimal nochmal
                                       vergroessert 2026-07-29 auf Wunsch "playerhoehe gegen unten noch
                                       vergroessern" / "noch bisschen mehr"). War 1.3rem 1.5rem ->
                                       1.3rem 1.5rem 2rem -> 2.8rem. */
  border: 0;
  border-bottom: 3px solid rgba(255, 154, 61, .35);   /* Trennlinie zum Rest der Seite */
  background: linear-gradient(180deg, rgba(20, 10, 4, .94), rgba(8, 4, 2, .97));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Unter 1024px stapelt .hero__topline (Logo/Begruessung/Uhr auf eigene Zeilen), die Uhr
   steht dadurch direkt ueber dem Player statt daneben. Der negative Margin oben ist fuers
   einzeilige Desktop-Layout gedacht (Logo-Ueberlappung) und zieht den Player hier stattdessen
   in die Uhr hinein. Muss NACH der Basis-Regel stehen (gleiche Spezifitaet, Media Query
   allein gewinnt die Kaskade nicht - siehe gleiches Muster bei .clock oben). */
@media (max-width: 1023px) {
  .rplayer { margin-top: 1.5rem; }
}
/* Sunburst-Spektrum: Strahlen um die Player-Mitte. Reine DOM/rAF-Technik (Spans, per JS mit
   translate+rotate+scaleX bewegt) auf allen Plattformen - eine fruehere Canvas+AnalyserNode-
   Variante mit echten Frequenzdaten wurde entfernt, weil Canvas+AudioContext von privacy-
   fokussierten Browsern (Brave, Opera, s. CLAUDE.md) stillschweigend blockiert wird. */
.rplayer__osc {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;                          /* erst sichtbar sobald Play gedrueckt wurde */
  transition: opacity .25s ease;
  pointer-events: none;
}
.rplayer.is-playing .rplayer__osc { opacity: .8; }   /* Desktop + Mobile gleich (kein Breakpoint noetig) */
/* Ein Strahl = 1x1px-Span, per JS/rAF mit translate+rotate+scaleX positioniert/gelaengt
   (reines transform, kein Layout-Reflow noetig - transform-origin liegt am Innenende,
   scaleX() streckt den Strahl von dort nach aussen). */
.rplayer__osc span {
  position: absolute;
  left: 0;
  top: -7px;                     /* halbe Hoehe hoch, damit die Box vor dem Transform vertikal
                                     auf dem Ursprungspunkt zentriert ist (sonst rotiert/skaliert
                                     der Strahl um einen Punkt unterhalb des Zentrums) */
  width: 1px;
  height: 14px;                  /* Basis wieder schmaler (Feedback 31.07.26: "Strahlen zu dick") -
                                     vorherige 26px waren zu wuchtig, 14px behaelt die konische
                                     Form, wirkt aber deutlich filigraner */
  background: var(--orange);
  /* Konisch statt gleichmaessig breit (Feedback 31.07.26): Spitze am Ursprung (0%), breite
     Basis am aeusseren Ende (100%) - wie die Speichen im Hero-Sunburst (repeating-conic-
     gradient), nur als einzelner Strahl statt Vollkreis-Sektoren. */
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
  /* Kein Glow (Feedback 2026-07-29: "vorher war besser, einfach nur staerker in der Farbe,
     kein Glow") - nur ein minimaler Schatten fuer Kantenschaerfe, keine Aufweichung. drop-shadow
     statt box-shadow, weil es der geclippten Dreiecksform folgt statt dem Rechteck-Umriss. */
  filter: drop-shadow(0 0 1px rgba(255, 117, 5, .6));
  transform-origin: 0 50%;
  opacity: .35;                  /* Ruhezustand: kaum sichtbar, vor dem ersten Play */
}
/* Hintergrund 2 – formatfuellendes Cover (scharf) + Dunkel-Schleier fuer Lesbarkeit */
.rplayer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  display: none;
  pointer-events: none;
}
.rplayer--bg-cover .rplayer__bg { display: block; }
.rplayer--bg-cover .rplayer__osc { display: none; }
/* Blasen-Modus: Wellenform in der Box ausblenden -> nur der dunkle Player-Hintergrund
   bleibt, die Seifenblasen (eigene Vollbild-Ebene) sind der Effekt. */
.rplayer--bg-bubbles .rplayer__osc { display: none; }
/* Woofer-Ebene: eigene Canvas HINTER dem Player-Inhalt (Cover & Titel liegen davor).
   Nur im Blasen-Modus sichtbar. */
.rplayer__woofers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                 /* hinter .rplayer__inner (z-index:1) */
  pointer-events: none;
  display: none;
}
.rplayer--bg-bubbles .rplayer__woofers { display: block; }
/* Titel/Artist ueber dem Woofer gut lesbar halten */
.rplayer--bg-bubbles .rplayer__name,
.rplayer--bg-bubbles .rplayer__title {
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.85);
}
/* Cover-Modus: HARTER Schatten am Text (Schlagschatten ohne Weichzeichnung + duenne
   harte Kontur rundum). Weisser Text bleibt so auch auf HELLEN Covers lesbar, ohne das
   Cover selbst abzudunkeln. Passt zum Retro-Look. */
.rplayer--bg-cover .rplayer__name,
.rplayer--bg-cover .rplayer__title {
  text-shadow:
    2px 2px 0 rgba(0,0,0,.95),
    -1px -1px 0 rgba(0,0,0,.85), 1px -1px 0 rgba(0,0,0,.85),
    -1px 1px 0 rgba(0,0,0,.85), 1px 1px 0 rgba(0,0,0,.85);
}
.rplayer--bg-cover .rplayer__live {
  text-shadow: 1px 1px 0 rgba(0,0,0,.95), -1px -1px 0 rgba(0,0,0,.8), 1px 1px 0 rgba(0,0,0,.8);
}
/* Hintergrund 3 – Seifenblasen: eigene Vollbild-Ebene ueber der ganzen Seite.
   fixed, damit sie beim Scrollen stehen bleibt; pointer-events:none, damit Klicks
   (Player, Modal, Links) ungehindert durchgehen. display togglet das JS ueber .is-active. */
.bubbles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 40;                 /* ueber der Seite, unter dem Track-Info-Modal (z-index:100) */
  pointer-events: none;
  display: none;
}
.bubbles.is-active { display: block; }
/* Umschalt-Button der Animation – sitzt in der Bedienleiste zwischen Play/Pause und Lautstaerke */
.rplayer__bgtoggle {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .18s ease, transform .18s ease;
}
.rplayer__bgtoggle svg { width: 26px; height: 26px; }
@media (hover: hover) {
  .rplayer__bgtoggle:hover { background: rgba(255, 117, 5, .65); transform: scale(1.08); }
}
.rplayer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;                /* kompakter, dann minimal wieder hoeher (Feedback 2026-07-27) - war 1.4rem -> 1.05rem -> 1.2rem */
  max-width: 1100px;
  margin: 0 auto;             /* Inhalt zentriert, Bar selbst volle Breite */
}
/* Obere Zeile: Cover + Artist/Titel, zentriert in der Bar */
.rplayer__top {
  display: flex;
  align-items: center;
  justify-content: center;    /* eingemittet */
  gap: 1.4rem;
}
.rplayer__meta {
  /* Feste max-width (nicht 100%!) statt Content-Schrumpfung: die Laufschrift unten misst
     wrapEl.clientWidth, das braucht eine deterministische Breite um Ueberlaufen zu erkennen.
     100% hier wuerde .rplayer__top exakt bis zum Kartenrand fuellen (kein Rest zum Zentrieren
     mehr uebrig) -> das Cover klebte dadurch am linken Rand statt zentriert mit dem Text zu
     stehen (Bug im Oszillator-/Cover-Modus). max-width laesst genug freien Raum, damit
     justify-content:center auf .rplayer__top Cover+Text wieder als Gruppe eingemittet. */
  max-width: 34rem;
  text-align: center;
  min-width: 0;               /* erlaubt der Zeile im Flex zu schrumpfen (Voraussetzung fuer overflow:hidden unten) */
}
/* Name/Titel bleiben einzeilig; bei Ueberlaenge schiebt eine Laufschrift (JS) den Text
   durch statt ihn umzubrechen -> ein langer Titel blaeht sonst die Player-Karte auf und
   drueckt die Bedienleiste (Play/Live/Lautstaerke) aus dem sichtbaren Bereich. */
.rplayer__name-wrap, .rplayer__title-wrap { overflow: hidden; }
.rplayer__cover {
  --cover-size: 170px;         /* kompakter, dann minimal wieder hoeher (Feedback 2026-07-27) - war 185px -> 155px -> 170px */
  position: relative;
  flex: 0 0 auto;
  width: var(--cover-size);
  height: var(--cover-size);
}
/* Seifenblasen-Modus: die zwei Woofer-Kegel sitzen links/rechts aussen an der Trennlinie
   (eigene Canvas-Ebene, kein Flex-Item), Cover+Text bleiben in der Mitte. Text schmal
   halten, damit lange Artist-/Songnamen nicht bis zu den Woofern reichen. */
.rplayer--bg-bubbles .rplayer__meta {
  max-width: 22rem;
}
.rplayer__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7);
}
.rplayer__coverhit {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition: box-shadow .18s ease;
}
.rplayer__name, .rplayer__title { display: inline-block; white-space: nowrap; }
.rplayer__name {
  font-family: var(--font-display);      /* Bandname bleibt Magic Retro */
  font-size: 2.5rem;                     /* groesser (Feedback 31.07.26), war 2.1rem */
  color: var(--white);
  margin: 0;
}
.rplayer__title {
  font-family: var(--font-alt);          /* Songtitel in Josefin Sans */
  font-size: 2.5rem;                     /* gleiche Groesse wie der Artistname (.rplayer__name) */
  color: var(--white);
}
.rplayer__bar {
  width: 100%;
  height: 4px;
  margin: .5rem 0 .2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.rplayer__bar-fill {
  display: block;
  height: 100%;
  width: 100%;                     /* Live -> volle Linie */
  background: var(--orange);
}
.rplayer__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  margin-top: .3rem;
}
.rplayer__live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--white);
}
.rplayer__play {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border: 0;
  border-radius: 50%;
  background: var(--orange-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px -8px var(--orange-soft);
  transition: transform .18s ease, background .18s ease;
}
.rplayer__ic { width: 32px; height: 32px; fill: var(--ink); }
.rplayer__ic--pause { display: none; }
/* Lade-Ring waehrend des Verbindungsaufbaus (siehe HTML-Kommentar) */
.rplayer__spin {
  display: none;
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);   /* SVG ohne width/height-Attribut
    sizet sonst auf die intrinsische Default-Groesse (300x150) statt den inset-Rahmen
    auszufuellen -> Ring sass nicht mittig */
  color: var(--ink);
  pointer-events: none;
}
.rplayer__play.is-loading .rplayer__ic { opacity: .3; }
.rplayer__play.is-loading .rplayer__spin { display: block; }
.rplayer.is-playing .rplayer__ic--play { display: none; }
.rplayer.is-playing .rplayer__ic--pause { display: block; }
.rplayer__vol {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--white);
}
/* Lautstaerke als DJ-Crossfader von oben: Metallplatte + Schlitz + Tick-Marken,
   schwarze rechteckige Fader-Kappe, die seitlich gleitet. */
.rplayer__vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(90px, 28vw, 180px);   /* schrumpft auf schmalen Screens -> Bedienleiste bleibt in einer Zeile */
  height: 40px;
  background: transparent;
  cursor: pointer;
}
.rplayer__vol-range::-webkit-slider-runnable-track {
  height: 40px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, transparent calc(50% - 3px), rgba(0,0,0,.6) calc(50% - 3px), rgba(0,0,0,.6) calc(50% + 3px), transparent calc(50% + 3px)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 20px),
    linear-gradient(180deg, #fafafc 0%, #dcdce2 48%, #c4c4cc 52%, #d2d2d8 100%);  /* helles Silbergrau, metallisch */
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
}
.rplayer__vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 34px;
  margin-top: 3px;                     /* (40-34)/2 -> mittig auf der Platte */
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(0,0,0,.22) 46% 54%, transparent 54%),
    linear-gradient(180deg, #f2f2f5, #a6a6ae);   /* silbergrauer Fader-Knopf statt schwarz */
  border: 1px solid #6e6e76;
  box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
.rplayer__vol-range::-moz-range-track {
  height: 40px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, transparent calc(50% - 3px), rgba(0,0,0,.6) calc(50% - 3px), rgba(0,0,0,.6) calc(50% + 3px), transparent calc(50% + 3px)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 20px),
    linear-gradient(180deg, #fafafc 0%, #dcdce2 48%, #c4c4cc 52%, #d2d2d8 100%);  /* helles Silbergrau, metallisch */
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.35);
}
.rplayer__vol-range::-moz-range-thumb {
  width: 26px;
  height: 34px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(0,0,0,.22) 46% 54%, transparent 54%),
    linear-gradient(180deg, #f2f2f5, #a6a6ae);   /* silbergrauer Fader-Knopf statt schwarz */
  border: 1px solid #6e6e76;
  box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
}
/* .rplayer--novol: JS erkennt per UA/Plattform + Funktionstest, dass audio.volume nicht
   wirkt (v.a. iOS, dort ist audio.volume grundsaetzlich schreibgeschuetzt; Android
   funktioniert) -> Regler ausblenden, kurzer Hinweis stattdessen. */
.rplayer__vol-hint { display: none; font-size: .76rem; color: rgba(255,255,255,.6); }
.rplayer--novol .rplayer__vol-range,
.rplayer--novol .rplayer__pct { display: none; }
.rplayer--novol .rplayer__vol-hint { display: inline; }
@media (hover: hover) {
  .rplayer__play:hover { transform: scale(1.06); background: var(--orange); }
  .rplayer__coverhit:hover { box-shadow: inset 0 0 0 3px var(--orange-soft); }
}

/* ===== Player (alt, Luna) ===== */
.player {
  position: relative;
  overflow: hidden;
  /* Flache, einheitliche Feldfarbe (Luna rendert transparent darüber). */
  background: #3a1c0a;
  border: 1px solid rgba(255, 154, 61, .35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem 1rem;
  -webkit-backdrop-filter: blur(6px);   /* iOS Safari braucht den -webkit-Prefix */
  backdrop-filter: blur(6px);
}

/* Eigener Equalizer-Effekt – vollflächig über das ganze Feld, hinter dem Player */
.eq {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 8px;
  z-index: 0;
  opacity: 1;             /* Android/Desktop: voll (Display zeigt es dort dunkler) */
  pointer-events: none;
}
.eq span {
  flex: 1 1 0;
  align-self: flex-end;
  height: 60%;                 /* Spitzenhöhe je Balken setzt JS per inline-style */
  transform-origin: bottom;
  border-radius: 3px 3px 0 0;
  /* Feuerorange: gluehende Basis -> Marken-Orange -> heisser heller Feuer-Kern oben */
  background: linear-gradient(to top, #ff5000 0%, var(--orange) 40%, #ffa42e 74%, #ffd27a 100%);
  /* Leuchten: heisser heller Kern + mehrschichtiger, grosser Feuerorange-Halo */
  box-shadow:
    0 0 4px rgba(255,210,140,.98),
    0 0 12px rgba(255,120,20,1),
    0 0 26px rgba(255,74,0,.95),
    0 0 50px rgba(255,80,0,.65);
  animation: eqbar 1s ease-in-out infinite alternate;
}
/* Keyframe OHNE var() – iOS Safari interpoliert custom properties in @keyframes
   nicht und friert die ganze Animation ein. Amplitude variiert daher über die
   Balkenhöhe (JS), die Animation skaliert mit festen Werten. */
@keyframes eqbar {
  from { transform: scaleY(.15); }
  to   { transform: scaleY(1); }
}
/* Player-Inhalt über dem Effekt */
.player__live, #lunaradio { position: relative; z-index: 1; }
#lunaradio { display: block; }
/* Lunas halbtransparenter Titel-Hintergrund (rgba(58,28,10,.5)) ist breiter als
   unsere opake .np-Maske und dunkelt links/rechts davon die Equalizer-Balken ab
   ("zwei Felder"). Wird nicht gebraucht (Titel maskiert .np) -> transparent. */
#lunaradio div[style*="58, 28, 10, 0.5"] { background: transparent !important; }

/* Eigener Lautstärkeregler – schmale Leiste am unteren Rand der Player-Karte */
.vol {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .9rem;        /* unter die Titelmaske (.np endet bei ~150px) */
  padding: 0 2px;
  pointer-events: auto;
}
.vol__icon { flex: 0 0 auto; font-size: .9rem; opacity: .8; line-height: 1; }
.vol__range {
  flex: 1 1 auto;
  width: auto;
  height: 16px;
  accent-color: var(--orange);
  cursor: pointer;
}
/* iOS: kein Regler (Plattformsperre), stattdessen dezenter Hinweis */
.vol__hint {
  font-size: .74rem;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);   /* Kontrast über den hellen Balken */
}
.vol__icon { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* Eigene Titelanzeige – überdeckt Lunas orangen Titelblock mit der Feldfarbe
   und zeigt Interpret/Titel in der Marken-Schrift. */
.np {
  position: absolute;
  z-index: 2;
  top: 46px;
  left: 106px;
  right: 125px;            /* verdeckt Titelblock UND Lunas fummeligen Mini-Volume;
                             eigener Regler oben rechts (siehe .vol) nutzt Luna-API */
  height: 104px;           /* etwas höher: deckt auch Lunas Zeit-/Fortschrittsleiste ab */
  background: #3a1c0a;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;   /* REINE Anzeige: keine Klicks abfangen, sonst blockiert sie
                             Lunas Lautstärke/Seek bzw. löst beim Durchschlagen Glitches aus */
}
.np__track {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}
.np.is-scrolling .np__track {
  animation: npscroll var(--np-dur, 14s) linear infinite;
}
@keyframes npscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--np-shift, -100%)); }
}
.np__seg {
  font-family: var(--font-alt);          /* Songtitel in Josefin Sans (schlicht lesbar) */
  color: var(--white);
  font-size: 1.55rem;
  line-height: 1;
  padding-left: 4px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.np__seg2 { margin-left: 3rem; display: none; }   /* Duplikat nur beim Scrollen sichtbar */
.np.is-scrolling .np__seg2 { display: inline; }
/* Hinweis: Die Titel-Laufschrift ist Teil des Players (lange Titel lesbar machen)
   und animiert daher BEWUSST auch bei aktivem "Bewegung reduzieren". */

/* iOS: Lunas Play/Pause-Icon bleibt unsichtbar (opacity hängt auf 0). Wir blenden
   Lunas Icons aus und zeigen eine eigene Anzeige, die den Status spiegelt. Lunas
   Button-Div bleibt klickbar -> Wiedergabe funktioniert unverändert. */
body.is-ios #lunaradio .lunaradioplayicon,
body.is-ios #lunaradio .lunaradiopauseicon { display: none !important; }
/* Lunas Buffering-Spinner (einziger klassenloser SVG) ausblenden – sitzt nicht
   konzentrisch zu unserer eigenen Play-Anzeige. */
body.is-ios #lunaradio svg:not([class]) { display: none !important; }
/* iOS friert Lunas opacity-Transitions ein -> der Cover-Crossfade (Logo <-> Album-Art)
   bleibt hängen, oft zeigt sich nur das Luna-Logo. Transitions im Player instant
   machen, dann greift Lunas korrekte Opacity-Logik sofort (kein hartes Erzwingen der
   Art -> Logo-Fallback bleibt erhalten, wenn ein Titel keine iTunes-Art hat). */
body.is-ios #lunaradio * { transition: none !important; }
/* Wahrgenommene Helligkeit ist geräteabhängig invertiert: iPhone-OLED zeigt den
   Equalizer viel kräftiger als das Android-Display. Daher iOS bewusst stark
   gedämpft, Android voll – damit beide ähnlich AUSSEHEN. */
body.is-ios .eq { opacity: .3; }
.pp {
  position: absolute;
  z-index: 4;
  top: 46px;
  left: 16px;            /* über Lunas linkem 92px-Button (= Karten-Padding-Kante) */
  width: 92px;
  height: 92px;
  display: none;         /* nur auf iOS sichtbar */
  align-items: center;
  justify-content: center;
  pointer-events: none;  /* Taps gehen an Lunas Button durch */
}
body.is-ios .pp { display: flex; }
/* Grösse wie Lunas nativer Button (~57px-Kreis im 92px-Feld), flaches Cream wie Luna */
.pp svg { width: 72px; height: 72px; fill: var(--cream); }
.pp__pause { display: none; }
.pp.is-on .pp__play { display: none; }
.pp.is-on .pp__pause { display: block; }
/* Lade-Spinner: Ring knapp ausserhalb des Play-Kreises, exakt zentriert (margin
   = -halbe Grösse). Rotation kommt per rAF (CSS-Rotation friert auf iOS ein). */
.pp__spin {
  position: absolute;
  top: 50%; left: 50%;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  border: 3px solid rgba(246, 234, 215, .25);
  border-top-color: var(--cream);
  border-radius: 50%;
  display: none;
}
.pp.is-loading .pp__spin { display: block; }

/* Eigenes Album-Cover (nur iOS, per JS gefüllt) – exakt über Lunas Cover, unter
   dem Klick-Ring. object-fit:cover + Kreis. Standardmässig versteckt. */
.cv {
  position: absolute;
  z-index: 2;
  top: 64px;
  right: 26px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  display: none;
  pointer-events: none;
}

/* Orange Klick-Ring punktgenau über Lunas Cover (oben rechts) */
.cover-hit {
  position: absolute;
  z-index: 3;
  top: 64px;
  right: 26px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 117, 5, .25);
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cover-hit:focus-visible {
  box-shadow: 0 0 0 5px rgba(255, 117, 5, .35);
  transform: scale(1.04);
  outline: none;
}
/* Hover nur mit echtem Zeiger – auf Touch (iOS) bleibt :hover sonst nach dem Tap
   „kleben" (Element bleibt vergrössert/aufgehellt). */
@media (hover: hover) {
  .cover-hit:hover {
    box-shadow: 0 0 0 5px rgba(255, 117, 5, .35);
    transform: scale(1.04);
    outline: none;
  }
}

/* ===== Interpreten-Info-Panel ===== */
.amodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.amodal[hidden] { display: none; }
.amodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 1, .82);
  -webkit-backdrop-filter: blur(4px);   /* iOS Safari braucht den -webkit-Prefix */
  backdrop-filter: blur(4px);
  animation: fade .2s ease;
}
.amodal__card {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  display: flex;
  gap: 1.5rem;
  padding: 1.6rem;
  background: linear-gradient(160deg, #4a2407, #25120a);
  border: 1px solid rgba(255, 154, 61, .35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: pop .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.amodal__x {
  position: absolute;
  top: .6rem;
  right: .8rem;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 154, 61, .14);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
@media (hover: hover) {
  .amodal__x:hover { background: rgba(255, 117, 5, .35); }
}
.amodal__cover {
  flex: 0 0 168px;
  width: 168px;
  height: 168px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 154, 61, .3);
  background: var(--brown-deep);
}
.amodal__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amodal__body { flex: 1 1 auto; min-width: 0; }
.amodal__kicker {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}
.amodal__card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;                    /* gleiche Groesse wie der Artistname (.amodal__artist) */
  color: #fff;
  line-height: 1.15;
  margin: .25rem 0 .15rem;
}
.amodal__artist {
  font-size: 1.05rem;
  color: var(--white);
  font-weight: 600;
  margin-bottom: .4rem;
}
.amodal__meta {
  font-size: .9rem;
  color: rgba(255, 255, 255, .7);
  margin-bottom: .9rem;
}
.amodal__preview { width: 100%; height: 38px; margin-bottom: 1rem; }
.amodal__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.abtn {
  display: inline-block;
  padding: .6rem 1.05rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--orange);
  transition: transform .15s ease, filter .15s ease;
}
@media (hover: hover) {
  .abtn:hover { transform: translateY(-2px); filter: brightness(1.07); }
}
.abtn--bandcamp { background: #1da0c3; color: #042029; }
.abtn--yt { background: #ff3b3b; color: #2a0606; }
.amodal__hint {
  margin-top: 1rem;
  font-size: .76rem;
  color: rgba(255, 255, 255, .68);   /* WCAG-Kontrast: .45 lag knapp unter 4.5:1 */
}
@media (max-width: 540px) {
  .amodal__card { flex-direction: column; align-items: center; text-align: center; }
  .amodal__actions { justify-content: center; }
}
/* Auf schmalen Screens Cover (und im Seifenblasen-Modus den gleich grossen Lautsprecher) kleiner halten */
@media (max-width: 640px) {
  .rplayer__cover { --cover-size: 150px; width: var(--cover-size); height: var(--cover-size); }
  /* Mobil nebeneinander wird der Titeltext zu schmal und haengt neben statt unter dem Cover
     -> gestapelt: Cover (mit Woofern im Blasen-Modus) oben, Artist/Titel darunter, beides
     zentriert. Gilt fuer alle drei Hintergrund-Modi (Wellenform/Cover/Blasen). */
  .rplayer__top { flex-direction: column; gap: .9rem; }
  .rplayer__meta,
  .rplayer--bg-bubbles .rplayer__meta { max-width: 100%; }
}

/* Lightbox: Chacho-Cover per Klick vergroessern */
.imodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.imodal[hidden] { display: none; }
.imodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 1, .88);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade .2s ease;
}
.imodal__img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: min(640px, 90vw);
  max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 154, 61, .35);
  animation: pop .22s cubic-bezier(.2, .8, .3, 1);
}
.imodal__x {
  position: absolute;
  z-index: 2;
  top: 1.4rem;
  right: 1.4rem;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 154, 61, .18);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
@media (hover: hover) {
  .imodal__x:hover { background: rgba(255, 117, 5, .4); }
}

/* Equalizer animiert BEWUSST auch bei "Bewegung reduzieren" – er gehört als
   Live-Visualisierung zum Player (kein reines Deko-Geflacker). Seiten-weite
   Effekte (Marquee, Puls) respektieren das Setting weiterhin (s. unten). */
.player__live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--white);
  margin-bottom: 1rem;
}
/* Puls per JS/rAF (nicht CSS-@keyframes): reine CSS-Keyframe-Animationen frieren auf
   manchen iPhones ein (Stromsparmodus/WebKit-Eigenheit, siehe CLAUDE.md) -> "blinkt nicht". */
.dot {
  width: 9px; height: 9px;
  background: #ff3b3b;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, .7);
}
.player__now {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  margin-bottom: 1.1rem;
}
.player__art {
  flex: 0 0 84px;
  width: 84px; height: 84px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 154, 61, .45);
  background: var(--brown-deep);
}
.player__art img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.player__art img.is-fading { opacity: .25; }
.player__label {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: .15rem;
}
.player__title {
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--white);
  line-height: 1.25;
}
.player__artist {
  font-size: .92rem;
  color: rgba(255, 255, 255, .75);
}
.player__audio { width: 100%; height: 40px; }

/* ===== Intro ===== */
.intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 1rem;
  text-align: center;
}
.intro__greeting {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.intro__text {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 2rem;
}
.intro__quote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.5vw, 1.7rem);
  color: var(--white);
  line-height: 1.4;
  margin: 0 auto 2.5rem;
  max-width: 620px;
}
.intro__quote cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .95rem;
  color: var(--white);
}
.intro__quote cite span { color: rgba(246, 234, 215, .6); }

/* ===== Buttons ===== */
/* ===== Footer: App-Links (Radiocult / TuneIn) in Badge-Optik ===== */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(246, 234, 215, .15);
  margin-top: 2rem;
  padding: 3.25rem 1.5rem 3.75rem;
  text-align: center;
  /* Sunburst wie im Hero, aber Strahlen-Zentrum weit OBERHALB (50% horizontal, wie oben)
     -> die Strahlen von oben laufen hier unten scheinbar weiter und faechern nach unten auf. */
  background: repeating-conic-gradient(from 0deg at 50% -400%,
    #ff7505 0deg 7deg, #7a2f00 7deg 14deg);
}
/* Dunkel-Schleier fuer Kontrast (weisse Schrift + Badges auf Orange) */
.site-footer::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 82% 100% at 50% 50%,
    rgba(16, 7, 0, .52) 0%, rgba(16, 7, 0, .36) 55%, rgba(16, 7, 0, .16) 100%);
}
.site-footer > * { position: relative; z-index: 1; }   /* Inhalt ueber dem Schleier */
.site-footer__label {
  font-family: var(--font-alt);
  color: var(--white);
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  line-height: 1.35;
  margin: 0 0 1.8rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
/* Badge-Reihe (Radiocult links, TuneIn rechts) */
.applinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 6.5rem;
}
.actions {
  display: flex;
  flex-wrap: nowrap;                    /* alle Buttons in EINER Reihe */
  gap: clamp(1.25rem, 5vw, 6rem);       /* weit auseinander, schrumpft mobil -> bleibt eine Zeile */
  justify-content: center;
}
/* Auf schmalen Screens passen die drei grossen Buttons nicht nebeneinander (feste
   Padding/Schriftgroesse) -> die Reihe lief bisher weit ueber den Bildschirmrand hinaus
   und blaehte die ganze Seite horizontal auf. Statt Slider: untereinander stapeln,
   Buttons bleiben lesbar gross. */
@media (max-width: 640px) {
  .actions {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .actions .btn { width: min(65vw, 240px); text-align: center; padding: 1rem 1.5rem; font-size: 1.5rem; }
}
.btn {
  display: inline-block;
  padding: 1.5rem 3.2rem;
  border-radius: 999px;
  font-family: var(--font-display);   /* Magic Retro */
  font-size: 2.1rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 0 10px rgba(0, 0, 0, .25);
  text-decoration: none;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn--primary,
.btn--ghost {
  /* 70er-Sunburst als Button-Fuellung (Strahlenkranz aus Marken-Orange) */
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    #ff7505 0deg 7deg, #7a2f00 7deg 14deg);
  color: var(--white);
  border: none;
  box-shadow: 0 10px 26px -10px var(--orange);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); }
  .btn--primary:hover,
  .btn--ghost:hover { filter: brightness(1.08); }   /* Sunburst bleibt, nur leicht heller */
}

/* ===== Discover / Cards ===== */
.discover {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.discover__head { text-align: center; margin-bottom: 2.5rem; }
.kicker {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.15rem;
  letter-spacing: .03em;
}
.discover__head h2 {
  font-family: var(--font-alt);          /* Zweitschrift (Josefin Sans) */
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  color: var(--white);
  margin: .4rem 0 .7rem;
}
.discover__head p {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .8);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--white);
  background: linear-gradient(160deg, rgba(93, 41, 0, .55), rgba(26, 13, 2, .8));
  border: 1px solid rgba(255, 154, 61, .22);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: var(--orange);
  }
}
.card__logo {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  background: radial-gradient(circle at 50% 40%, rgba(255, 117, 5, .12), transparent 70%), var(--brown-deep);
}
.card__logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
.card__body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-top: 1px solid rgba(255, 154, 61, .15);
}
.card__tag {
  align-self: flex-start;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255, 117, 5, .12);
  border: 1px solid rgba(255, 154, 61, .3);
  padding: .2rem .6rem;
  border-radius: 999px;
}
.card__body h3 {
  font-size: 1.1rem;
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
}
.card__src {
  font-size: .85rem;
  color: var(--white);
  font-weight: 500;
}

/* ===== Freie Plätze ===== */
.discover--free .card--free {
  border: 1.5px dashed rgba(255, 154, 61, .45);
  background: rgba(255, 117, 5, .04);
  align-items: center;
  text-align: center;
}
@media (hover: hover) {
  .discover--free .card--free:hover {
    border-color: var(--orange);
    background: rgba(255, 117, 5, .08);
  }
}
.card__plus {
  height: 150px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--white);
  opacity: .85;
}
.card--free .card__body {
  align-items: center;
  border-top: 1px dashed rgba(255, 154, 61, .2);
  width: 100%;
}
.card__tag--free {
  color: var(--white);
  background: rgba(255, 117, 5, .15);
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 3.5rem 1.5rem 3rem;
  background: var(--ink);
  border-top: 3px solid var(--orange);
}
.footer__logo { width: 120px; margin: 0 auto 1rem; opacity: .95; }
.footer__tag {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 1.2rem;
  letter-spacing: .03em;
}
.footer__links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.footer__links a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
@media (hover: hover) {
  .footer__links a:hover { color: var(--orange); border-color: var(--orange); }
}
.footer__copy {
  font-size: .82rem;
  color: rgba(255, 255, 255, .68);   /* WCAG-Kontrast: .45 lag knapp unter 4.5:1 */
  max-width: 520px;
  margin: 0 auto;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .hero {
    background-attachment: scroll;   /* iOS unterstützt kein background-attachment:fixed */
    padding: 0.25rem 1rem 3.5rem;
  }
  /* gestapelt: Begruessung mittig unter dem Logo */
  .hero__welcome { text-align: center; flex-basis: 100%; }
  .player__now { flex-direction: row; }
  .footer__links { gap: 1rem; }
  /* Neon-Begruessung auf schmalen Phones etwas kleiner */
  .hello__genre { font-size: 2.7rem; }
  /* .hello__genre--url (Basis-Regel, oben im File) hat dieselbe Spezifitaet wie die Regel
     direkt darueber -> die spaeter im Stylesheet stehende Regel gewinnt bei Gleichstand
     unabhaengig davon, welche "gemeint" war (derselbe Kaskaden-Stolperstein wie bei der
     Uhr, siehe CLAUDE.md). Dadurch lief "radio-aethertaeter.com" auf schmalen Screens mit
     2.7rem statt der kleineren URL-Groesse -> Text ragte seitlich ueber den Bildschirmrand
     hinaus und wurde von body{overflow-x:hidden} abgeschnitten. clamp() statt fixem Wert,
     damit es nicht nur bei DIESER Breakpoint-Zahl passt, sondern auf jeder schmalen Breite. */
  .hello__genre--url { font-size: clamp(1.1rem, 7vw, 2.3rem); }
  /* Lange Titel auf schmalen Phones etwas kleiner, damit sie in die Maske passen */
  .np__seg { font-size: 1.3rem; }
  /* Lautstärke-Regler mit grösserer Touch-Fläche */
  .vol { margin-top: 1.1rem; }
  .vol__range { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Neon-Begruessung, Equalizer, Laufschrift UND der LIVE-Puls (.dot) sind bewusste
     Player-/Live-Anzeigen und laufen daher weiter (siehe iOS-Abschnitt in CLAUDE.md) -> hier
     nichts zu deaktivieren; alle drei sind rAF-/JS-getrieben, keine CSS-Animation-Property. */
}

/* ===== Start-Intro (Sequenz-Splash, einmal pro Sitzung) =====
   Ahoi! -> Logo (weiss) -> Verlauschung Deluxe!, jede Szene ein-/ausgeblendet.
   Reihenfolge treibt JS (setTimeout, iOS-sicher); hier nur die Optik + Fade-Transitions.
   Sunburst-Farben exakt wie im Hero (#ff7505 / #7a2f00). */
.ra-intro-seen .ra-intro { display: none !important; }   /* in dieser Sitzung schon gelaufen */
.ra-intro {
  position: fixed; inset: 0; z-index: 9999;
  /* Android Chrome: die ein-/ausfahrende Adressleiste aendert die Viewport-Hoehe waehrend
     genau der 6,7s, in denen das Intro laeuft -> inset:0 allein reicht nicht, dvh explizit
     setzen (vh als Fallback fuer sehr alte Browser), sonst zentriert/skaliert die Szene auf
     eine kurzzeitig falsche Hoehe (Text wirkt verschoben/abgeschnitten). */
  height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #ff7505 0deg 7deg, #7a2f00 7deg 14deg);
  opacity: 1; transition: opacity .6s ease;
}
/* dunkler Schleier fuer Kontrast (Weiss auf Orange) + Vignette */
.ra-intro::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 66% 66% at 50% 50%, rgba(16,7,0,.62) 0%, rgba(16,7,0,.40) 46%, rgba(16,7,0,0) 80%); }
.ra-intro::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 240px 66px rgba(0,0,0,.5); }
.ra-intro--out { opacity: 0; pointer-events: none; }   /* am Ende ausblenden */
/* Szenen liegen zentriert uebereinander, standardmaessig unsichtbar */
.ra-intro__scene {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%) scale(.92); opacity: 0;
  transition: opacity .55s ease, transform .55s ease;
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 24px;
}
.ra-intro__scene.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ra-intro__text {
  font-family: var(--font-display); color: #fff; letter-spacing: .02em;
  text-shadow: 0 0 2px #000, 0 3px 0 #2a1300, 0 6px 20px rgba(0,0,0,.65);
}
.ra-intro__scene--ahoi   .ra-intro__text { font-size: clamp(60px, 13vw, 140px); }
.ra-intro__scene--slogan .ra-intro__text { font-size: clamp(40px, 7vw, 82px); }
.ra-intro__scene--logo img { width: min(68vw, 640px); height: auto;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(0,0,0,.35)); }
@media (prefers-reduced-motion: reduce) { .ra-intro__scene { transition-duration: .12s; } }