/* Radio Mirow – Website. Stimmungen, Komponenten und Bühne.
   Die Stimmungsblöcke sind unverändert aus referenz/prototyp übernommen. */

/* ---------- Stimmungen: Tageszeit × Jahreszeit ---------- */
:root,[data-theme="tag-sommer"]{--sky:linear-gradient(180deg,#3fa9ea 0%,#7cc7f4 60%,#a9dcfa 100%);--surface:#7cc7f4;--surface-raised:#ffffff;--mist:#a6d9f8;--line:#5aaee0;--ink:#10202a;--ink-muted:#1f3d48;--lake:#0a5c63;--lake-ink:#f6f4ee;--lake-ink-muted:#cfe9e4;--line-on-lake:#2e7a80;--sun:#ffd23f;--sun-edge:#0a5c63;--on-sun:#0a5c63;--sun-ripple:rgba(255,255,255,.55);--wave:#5fd3c4;--forest:#226648;--brick:#835748;--focus:#10202a;--sun-glow:0 18px 44px -12px rgba(10,92,99,.55);--window:#a9dcfa;--skyline-far:#3f86c4;--ship:#f6f4ee}
[data-theme="morgen-sommer"]{--sky:linear-gradient(180deg,#8fcff0 0%,#cfe8f0 55%,#ffe0b3 100%);--surface:#cfe8f0;--surface-raised:#ffffff;--mist:#e2f1f4;--line:#9cc9dc;--ink:#10202a;--ink-muted:#2c4a55;--lake:#0a5c63;--lake-ink:#f6f4ee;--lake-ink-muted:#cfe9e4;--line-on-lake:#2e7a80;--sun:#ffd23f;--sun-edge:#0a5c63;--on-sun:#0a5c63;--sun-ripple:rgba(255,255,255,.55);--wave:#5fd3c4;--forest:#226648;--brick:#835748;--focus:#10202a;--sun-glow:0 18px 44px -12px rgba(10,92,99,.55);--window:#ffe0b3;--skyline-far:#5d93b5;--ship:#f6f4ee}
[data-theme="abend-sommer"]{--sky:linear-gradient(180deg,#f47c5c 0%,#ffb27a 72%,#ffc98f 100%);--surface:#ffb27a;--surface-raised:#ffffff;--mist:#ffc98f;--line:#e8916a;--ink:#10202a;--ink-muted:#2c3640;--lake:#0b4650;--lake-ink:#f6f4ee;--lake-ink-muted:#b4d6d2;--line-on-lake:#22646b;--sun:#ffd23f;--sun-edge:#0b4650;--on-sun:#0b4650;--sun-ripple:rgba(255,255,255,.55);--wave:#5fd3c4;--forest:#1b4c3b;--brick:#72473b;--focus:#10202a;--sun-glow:0 18px 44px -12px rgba(11,70,80,.55);--window:#ffc98f;--skyline-far:#c9654f;--ship:var(--lake-ink-muted)}
[data-theme="morgen-winter"]{--sky:linear-gradient(180deg,#b9cbe0 0%,#dfe3ec 55%,#f4d6cf 100%);--surface:#dfe3ec;--surface-raised:#ffffff;--mist:#eceff4;--line:#b3bfd0;--ink:#10202a;--ink-muted:#2c4a55;--lake:#19535b;--lake-ink:#f6f4ee;--lake-ink-muted:#c0d8d6;--line-on-lake:#2f6c73;--sun:#ffd23f;--sun-edge:#19535b;--on-sun:#19535b;--sun-ripple:rgba(255,255,255,.55);--wave:#5fd3c4;--forest:#325a51;--brick:#765b53;--focus:#10202a;--sun-glow:0 18px 44px -12px rgba(25,83,91,.55);--window:#f4d6cf;--skyline-far:#8796b0;--ship:#f6f4ee}
[data-theme="tag-winter"]{--sky:linear-gradient(180deg,#8fb8dc 0%,#c7dced 60%,#e8f0f6 100%);--surface:#c7dced;--surface-raised:#ffffff;--mist:#dde9f3;--line:#9fbcd6;--ink:#10202a;--ink-muted:#2c4a55;--lake:#19535b;--lake-ink:#f6f4ee;--lake-ink-muted:#c0d8d6;--line-on-lake:#2f6c73;--sun:#ffd23f;--sun-edge:#19535b;--on-sun:#19535b;--sun-ripple:rgba(255,255,255,.55);--wave:#5fd3c4;--forest:#325a51;--brick:#765b53;--focus:#10202a;--sun-glow:0 18px 44px -12px rgba(25,83,91,.55);--window:#e8f0f6;--skyline-far:#7f9fbe;--ship:#f6f4ee}
[data-theme="abend-winter"]{--sky:linear-gradient(180deg,#1e2b57 0%,#4a4f86 55%,#b9788c 100%);--surface:#4a4f86;--surface-raised:#ffffff;--mist:#5a5f96;--line:#6a6fa6;--ink:#f6f4ee;--ink-muted:#d4d2e6;--lake:#083038;--lake-ink:#f6f4ee;--lake-ink-muted:#a8cbc6;--line-on-lake:#1d4a50;--sun:#ffd23f;--sun-edge:#083038;--on-sun:#083038;--sun-ripple:rgba(255,210,63,.45);--wave:#5fd3c4;--forest:#1e3c38;--brick:#5c4149;--focus:#f6f4ee;--sun-glow:0 0 64px 8px rgba(255,210,63,.35);--window:#6a6aa0;--skyline-far:#2c3566;--ship:var(--lake-ink-muted)}
[data-theme="nacht-sommer"],[data-theme="nacht-winter"]{--sky:linear-gradient(180deg,#050b1f 0%,#0b1838 60%,#15295a 100%);--surface:#0b1838;--surface-raised:#ffffff;--mist:#15295a;--line:#1f3570;--ink:#f6f4ee;--ink-muted:#b8c3e0;--lake:#031c22;--lake-ink:#f6f4ee;--lake-ink-muted:#8fb5b1;--line-on-lake:#123940;--sun:#ffd23f;--sun-edge:#031c22;--on-sun:#031c22;--sun-ripple:rgba(255,210,63,.45);--wave:#5fd3c4;--forest:#0a2523;--brick:#31252a;--focus:#f6f4ee;--sun-glow:0 0 72px 10px rgba(255,210,63,.32);--window:#15295a;--skyline-far:#0d1c44;--ship:var(--lake-ink-muted)}
[data-theme^="nacht"] .lit{fill:#ffd98a}
[data-theme^="nacht"]{--sun:#f3efd9;--sun-ripple:rgba(243,239,217,.4);--sun-glow:0 0 90px 16px rgba(243,239,217,.26)}

:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-sm:8px;--radius-md:16px;--radius-lg:32px;--radius-pill:999px;--player-xxl:240px;--player-xl:184px;--player-md:136px;--player-sm:56px;--font-display:"Funnel Display","Avenir Next","Segoe UI",sans-serif;--font-sans:"Funnel Sans","Avenir Next","Segoe UI",sans-serif;--focus-on-lake:var(--lake-ink)}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--lake);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--lake)}
img,svg{display:block}
a{color:var(--lake-ink-muted);text-underline-offset:2px}
a:hover{color:#ffffff}
a:focus-visible{outline:3px solid var(--focus-on-lake);outline-offset:3px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Logo-Fassung nach Untergrund: hell auf hellem Himmel, dunkel auf dunklem */
.logo-dunkel{display:none}
[data-theme="abend-winter"] .logo-dunkel,[data-theme^="nacht"] .logo-dunkel{display:block}
[data-theme="abend-winter"] .logo-hell,[data-theme^="nacht"] .logo-hell{display:none}

/* Stimmungswechsel: Himmel und Farben blenden weich über (site.js setzt .is-fading) */
.is-fading *,.is-fading *::before{transition:background-color 2s ease,color 2s ease,fill 2s ease,stroke 2s ease,box-shadow 2s ease!important}
.sky-fade{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity 2s ease}

/* ---------- PlayButton: die Sonne (aus designsystem/components/bundle.css) ---------- */
.rm-play{--rm-size:var(--player-xl);position:relative;display:inline-grid;place-items:center;width:var(--rm-size);height:var(--rm-size);padding:0;border:0;border-radius:50%;background:none;color:var(--on-sun);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rm-play__disc{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--sun);box-shadow:var(--sun-glow);transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
.rm-play:hover .rm-play__disc{transform:scale(1.03)}
.rm-play:active .rm-play__disc{transform:scale(.97);transition-duration:90ms}
.rm-play__icon{width:34%;height:34%;fill:currentColor;display:none}
.rm-play__icon--play{transform:translateX(5%)}
.rm-play.is-idle .rm-play__icon--play,.rm-play.is-error .rm-play__icon--play,.rm-play.is-loading .rm-play__icon--spin,.rm-play.is-playing .rm-play__icon--pause{display:block}
.rm-play.is-loading .rm-play__icon--spin{animation:rm-spin 900ms linear infinite}
.rm-play:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.rm-play:focus-visible::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:3px solid var(--focus-on-lake);pointer-events:none}
.rm-play:focus:not(:focus-visible){outline:none}
.rm-play__ripples{position:absolute;inset:0;pointer-events:none}
.rm-play__ripples i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--sun-ripple);opacity:0}
.rm-play.is-playing .rm-play__ripples i{animation:rm-ripple 3.2s cubic-bezier(.25,.6,.3,1) 3}
.rm-play.is-playing .rm-play__ripples i:nth-child(2){animation-delay:1.07s}
.rm-play.is-playing .rm-play__ripples i:nth-child(3){animation-delay:2.13s}
@keyframes rm-ripple{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes rm-spin{to{transform:rotate(360deg)}}

/* ---------- Reflection ---------- */
.rm-reflection{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.rm-reflection svg{overflow:visible}
.rm-reflection__wave{stroke:var(--sun)}
.rm-reflection.is-moving svg{animation:rm-broadcast 2.7s ease-in-out 4}
.rm-reflection.is-moving svg:nth-child(2){animation-delay:.45s}
.rm-reflection.is-moving svg:nth-child(3){animation-delay:.9s}
@keyframes rm-broadcast{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- StreamStatus ---------- */
.rm-status{min-height:20px;margin:0;font-family:var(--font-sans);font-size:15px;line-height:20px;text-align:center;color:var(--ink-muted)}
.rm-status.is-error{color:var(--ink);font-weight:700}
/* Steht Text in der Zeile, liegt er auf einer ruhigen mist-Tönung – so bleibt er auch
   knapp über dem Horizont lesbar, wo der Himmel abends rosa wird (≥ 4,5:1 in allen Stimmungen) */
[data-theme="abend-winter"] .rm-status{color:var(--ink)}
.rm-status:not(:empty){width:max-content;max-width:min(380px,calc(100vw - 16px));margin-inline:auto;padding:2px 12px;border-radius:var(--radius-pill);background:var(--mist)}

/* ---------- NowPlaying (auf dem See) ---------- */
.rm-now{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center;font-family:var(--font-sans);color:var(--lake-ink)}
.rm-now[hidden]{display:none}
.rm-now__label{font-size:13px;line-height:1.2;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lake-ink-muted)}
.rm-now__track{font-size:17px;line-height:1.35;font-weight:700}
.rm-now__artist{font-weight:400}

/* ---------- Bühne ---------- */
.stage{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;background:var(--lake);overflow-x:hidden}
.sky{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--sky);isolation:isolate}
.wx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* Sternenhimmel: eine unregelmäßig verteilte Kachel (assets/sterne.svg), keine Rasterpunkte */
[data-theme^="nacht"] .wx{background-image:url(../assets/sterne.svg);background-size:1800px 700px;background-repeat:repeat-x;background-position:50% 0;-webkit-mask:linear-gradient(#000 0 45%,transparent 80%);mask:linear-gradient(#000 0 45%,transparent 80%)}
.site-header{display:flex;justify-content:center;width:100%}
.site-header img{width:auto}
.claim{margin:0;font-family:var(--font-display);font-weight:600;text-align:center;color:var(--ink)}
.sky-main{display:contents}
.player{position:relative;display:flex;flex-direction:column;align-items:center}
.ill{position:absolute;height:auto;fill:var(--lake)}
.lake{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:center;background:var(--lake);color:var(--lake-ink);text-align:center}
.lake .ill{fill:var(--lake-ink-muted)}
.lake .ill.ship{fill:var(--ship)}
.now-slot{position:relative;display:flex;align-items:center;justify-content:center}
.lead{position:relative;margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;color:var(--lake-ink)}
.body-lg{position:relative;margin:20px 0 0;max-width:640px;font-size:19px;line-height:1.55;text-wrap:balance;color:var(--lake-ink-muted)}
.site-footer{position:relative;width:100%;display:flex;align-items:center;gap:16px;font-size:13px;line-height:1.4;color:var(--lake-ink-muted)}
.site-footer nav{display:flex;gap:16px}
.footer-brand{display:flex;align-items:center;gap:12px}

/* Smartphone und Desktop haben eigene Fassungen einiger Illustrationen */
.m-only{display:none}
.rm-reflection.xxl{display:none}

/* ---------- Smartphone (< 640px) ---------- */
@media (max-width:639.98px){
  .d-only{display:none!important}
  .m-only{display:block}
  .sky{min-height:max(66.4svh,500px);min-height:max(66.4vh,500px)}
  @supports (height:1svh){.sky{min-height:max(66.4svh,500px)}}
  .site-header{padding:20px 16px 0}
  .site-header img{height:92px}
  /* Claim als eigene Zeile unter der Wortmarke, Abstand = Schutzraum (Höhe von RADIO) */
  .claim{margin:22px 16px 0;font-size:24px;line-height:1.15;letter-spacing:-.01em}
  /* Sonne genau mittig zwischen Claim und Horizont: gleiches Polster oben und unten */
  .player{--pp:16px;margin:auto 0;padding:var(--pp) 0}
  .player .rm-status{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--pp) + var(--player-xl) + 16px)}
  .player .rm-status:not(:empty){padding:2px 8px}
  .player .rm-status.is-error{font-size:14px;letter-spacing:-.01em}
  /* Höhen: Kirchturm > Schloss > Schleuse > Bootshäuser */
  .sky .ill.schloss{left:0;bottom:0;width:176px}
  .sky .ill.schleuse{right:86px;bottom:0;width:34px}
  .sky .ill.bootshaus{right:0;bottom:0;width:78px}
  .lake{padding:18px 16px 0;min-height:230px}
  .lake .ill.ship{left:6px;top:14px;width:112px}
  .lake .ill.segel{right:86px;top:6px;width:38px}
  .lake .ill.angler{right:4px;top:22px;width:76px}
  .now-slot{margin-top:16px;min-height:40px}
  .body-lg{margin:8px 0 0;max-width:420px;font-size:15px;line-height:1.5}
  .site-footer{justify-content:center;margin-top:auto;padding:24px 0 14px}
  .footer-brand{display:none}
}
/* Niedrige Smartphones: Statuszeile bleibt über der Silhouette lesbar */
@media (max-width:639.98px) and (max-height:700px){
  .player{--pp:64px}
}

@media (max-width:359.98px){
  .site-header img{height:84px}
  .claim{font-size:22px}
  .player{--pp:84px}
}

/* ---------- Tablet und Desktop (ab 640px) ---------- */
@media (min-width:640px){
  .sky{min-height:660px}
  .site-header{max-width:1440px;padding:32px 40px 0}
  .site-header img{height:120px}
  .claim{margin:28px 0 0;padding:0 24px;font-size:clamp(26px,2.6vw,38px);line-height:1.15;letter-spacing:-.01em}
  .player{margin:56px 0 40px}
  .player .rm-status{margin-top:14px}
  .sky .ill.schloss{left:3%;bottom:0;width:clamp(323px,36.6vw,560px)}
  /* Höhen: Kirchturm > Schloss > Schleuse > Bootshäuser */
  .sky .ill.schleuse{right:calc(clamp(156px,16.25vw,234px) + 3vw);bottom:0;width:clamp(64px,6.7vw,97px)}
  .sky .ill.bootshaus{right:0;bottom:0;width:clamp(156px,16.25vw,234px)}
  .sky .ill.kraniche{right:9%;top:180px;width:clamp(180px,18vw,260px)}
  /* Boote auf dem See wachsen mit der Breite, bis 1440px Originalgröße */
  .lake{padding:24px 32px 32px}
  .lake .ill.ship{left:10%;top:8px;width:min(270px,18.75vw)}
  .lake .ill.yacht{right:21%;top:min(14px,.97vw);width:min(150px,10.42vw)}
  .lake .ill.kanu{left:6%;top:min(120px,8.33vw);width:min(150px,10.42vw)}
  .lake .ill.angler{right:7%;top:min(96px,6.67vw);width:min(140px,9.72vw)}
  .lake .ill.segel{left:3%;top:min(214px,14.86vw);width:min(110px,7.64vw)}
  .now-slot{margin-top:32px;min-height:48px}
  .lead,.body-lg{max-width:min(720px,calc(100vw - 2 * min(270px,18.75vw) - 32px))}
  .lead{margin:32px 0 0;font-size:30px;line-height:1.25}
  .site-footer{max-width:1360px;justify-content:space-between;flex-wrap:wrap;margin-top:88px;padding-top:20px;border-top:1px solid var(--line-on-lake)}
  .footer-brand img{height:40px;width:auto}
}
@media (min-width:640px) and (max-width:1023.98px){
  .site-header{padding:32px 32px 0}
}
@media (min-width:1024px){
  .rm-play{--rm-size:var(--player-xxl)}
  .rm-reflection.xxl{display:flex}
  .rm-reflection.xl{display:none}
  .lead{max-width:720px}
  .body-lg{max-width:640px}
}
@media (min-width:640px) and (max-width:1023.98px){
  .body-lg{font-size:17px}
}

/* ---------- Textseiten: Impressum, Datenschutz ---------- */
.page{min-height:100vh;background:var(--lake);color:var(--lake-ink)}
.page .site-header{margin:0 auto}
.page main{max-width:660px;margin:0 auto;padding:16px 16px 48px;font-size:16px;line-height:1.55}
.page h1{margin:32px 0 24px;font-family:var(--font-display);font-size:44px;line-height:1.02;font-weight:700;letter-spacing:-.025em}
.page h2{margin:32px 0 8px;font-family:var(--font-display);font-size:22px;line-height:1.25;font-weight:600}
.page p,.page li{color:var(--lake-ink-muted)}
.page .todo{color:var(--lake-ink);font-weight:700}
.page .back{display:inline-block;margin-top:32px}
.page .site-footer{max-width:660px;margin:0 auto;padding:20px 16px 32px;border-top:1px solid var(--line-on-lake);justify-content:center}
@media (min-width:640px){.page .site-header img{height:58px}.page h1{font-size:56px}}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .rm-play.is-playing .rm-play__ripples i{animation:none;opacity:.7}
  .rm-play.is-playing .rm-play__ripples i:nth-child(1){transform:scale(1.22)}
  .rm-play.is-playing .rm-play__ripples i:nth-child(2){transform:scale(1.46);opacity:.45}
  .rm-play.is-playing .rm-play__ripples i:nth-child(3){transform:scale(1.7);opacity:.2}
  .rm-play.is-loading .rm-play__icon--spin{animation-duration:2.4s}
  .rm-reflection.is-moving svg{animation:none}
  .rm-play__disc{transition:none}
  .is-fading *,.is-fading *::before{transition:none!important}
  .sky-fade{transition:none}
}