@charset "UTF-8";
/* ================================================================
   SAINT WAVE v777 — Landingpage Stylesheet

   Design-Tokens folgen der Brand-DNA (SAINT_WAVE_DNA_Blueprint.md § 3):
   mattes Japandi-/Wellness-Design, organische Farben, kein AI-Purple,
   kein Neon, kein Glassmorphism.

   Kontrastwerte sind gegen WCAG AA geprüft (Body-Text >= 4.5:1).
   Das Wortzeichen in #26342d erreicht 12.2:1 gegen --paper.
   ================================================================ */

/* ---------------------------------------------------------------
   0. SCHRIFTEN — lokal
   Cormorant Garamond und Inter liegen als woff2 im Paket. Beide sind
   Variable Fonts: 400/500/600 bzw. 300/400/500/600 liegen in je EINER
   Datei, deshalb die Gewichtsspanne statt vier einzelner @font-face.

   Ohne diese Einbindung waere die Seite von fonts.googleapis.com
   abhaengig — offline fiele sie auf Systemschriften zurueck.

   unicode-range bleibt erhalten: der Browser laedt nur den Subset, den
   der Text wirklich braucht. Deutsch braucht latin und latin-ext.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  /* Brand palette — DNA § 3 */
  --sage:            #7c887a;
  /* Salbei-Variante fuer kleine Schrift auf dem dunklen Forest-Grund:
     #7c887a erreicht dort nur ~3.3:1, dieser Ton ~6:1. */
  --sage-on-dark:    #a9b8a5;
  --paper:           #faf7f0;
  --cream:           #f3eee4;
  --forest:          #26342d;
  --ink:             #17201c;

  /* Abgeleitete Töne */
  --ink-soft:        #4a564f;
  --sage-deep:       #5f6d5e;

  /* Kategorie-Farben — jede Wellen-Ebene bekommt einen dezenten Akzent */
  --cat-emotional:   var(--sage);
  --cat-functional:  var(--forest);
  --cat-lifestyle:   var(--ink);
  --cat-resonance:   var(--sage-deep);

  /* Tiefenstaffelung für Karten und Panels */
  --layer-1: rgba(253, 251, 246, 0.96);
  --layer-2: rgba(243, 238, 228, 0.94);
  --layer-3: rgba(233, 226, 211, 0.92);
  /* Fuer Text ueber Fotohintergrund. --sage-deep erreicht dort nur 3.4:1
     gegen den dunkelsten Punkt im Textbereich (Vorhangschatten #d3cbc2);
     diese dunklere Salbei haelt 5.5:1 und bleibt im Farbklang. */
  --sage-photo:       #414d45;
  --surface:         #fdfbf6;
  --surface-sunk:    #f0eade;
  /* Schleier ueber Fotograefien. Wirkt nur zusammen mit einem Bild,
     nie ueber einer Flaeche — daher kein Globalwert. */
  --surface-tint:    rgba(253, 251, 246, 0.62);

  /* Semantische Rollen */
  --bg:              var(--paper);
  --bg-alt:          var(--cream);
  --fg:              var(--ink);
  --fg-muted:        var(--ink-soft);
  --fg-on-dark:      var(--paper);
  --fg-on-dark-mute: #b9c4bb;
  --border:          rgba(23, 32, 28, 0.14);
  --border-strong:   rgba(23, 32, 28, 0.28);
  --accent:          var(--sage);
  --accent-deep:     var(--sage-deep);

  /* Typografie */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  1rem;
  --step-1:  clamp(1.12rem, 1.05rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5.2rem);

  /* 4/8px Rhythmus */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;

  /* Layout */
  --shell: 90rem;
  /* Ecken-Radius — abstufte Skala, kein Einzelwert.
     Grundregel: der Radius waechst mit der Elementgroesse, damit die
     optische Rundung ueberall gleich wirkt. Ein flacher Wert auf allem
     laesst grosse Panels eckig und kleine Buttons verspielt wirken.
        Buttons  44px hoch  -> 8px  (~18 %)
        Karten   ~400px     -> 20px (~5 %)
        Panels   ~1100px    -> 28px (~2,5 %) */
  --radius-xs:    8px;    /* Buttons, Icon-Buttons, Fokus-Fallback */
  --radius-md:   20px;    /* Karten, Player, Bewegungs-Kacheln, Formel */
  --radius-lg:   28px;    /* grosse Panels und freistehende Bilder */
  --radius-pill: 999px;   /* Kreise: Badge, Punkte, Range-Thumb */
  /* Alias fuer Elemente ohne eigene Zuordnung */
  --radius: var(--radius-md);
  --gutter:     clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur:       0.28s;

  /* Elevation — matt, weich, organisch */
  --shadow-sm: 0 1px 2px rgba(23, 32, 28, 0.04);
  --shadow-md: 0 8px 24px -12px rgba(23, 32, 28, 0.18);
  --shadow-lg: 0 24px 60px -28px rgba(23, 32, 28, 0.28);
}

/* ---------------------------------------------------------------
   2. RESET & BASIS
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;          /* leading-relaxed: Lesbarkeit über Kompaktheit */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;          /* verhindert verwaiste letzte Zeilen */
}

p { margin: 0; text-wrap: pretty; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

/* Sichtbarer Fokus auf JEDEM interaktiven Element (Skill-UX-Regel,
   Severity: High — niemals outline:none ohne Ersatz) */
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.radio a:focus-visible,
.hero a:focus-visible { outline-color: var(--sage); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--forest);
  color: var(--fg-on-dark);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------
   3. TYPOGRAPHIE
   --------------------------------------------------------------- */
.display {
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.display em {
  font-style: italic;
  color: var(--accent-deep);
}

.section-title { font-size: var(--step-3); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--space-md);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 38ch;
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-3xl);
}

.section-lead {
  margin-top: var(--space-md);
  font-size: var(--step-1);
  color: var(--fg-muted);
  max-width: 52ch;
}

/* ---------------------------------------------------------------
   4. BUTTONS & LINKS
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.9rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* State-Übergänge verändern nur Farbe/elevation, nie Layout-Bounds
     -> kein Jitter beim Hover (Anti-Pattern: layout-shifting transforms) */
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn-primary {
  background: var(--accent-deep);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--forest);
  box-shadow: var(--shadow-md);
}

.btn-dark {
  background: var(--forest);
  color: var(--fg-on-dark);
  box-shadow: var(--shadow-md);
}
.btn-dark:hover {
  background: var(--ink);
  box-shadow: var(--shadow-lg);
}

.text-link {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 0.2rem;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.text-link:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---------------------------------------------------------------
   5. HEADER
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 240, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 5rem;
}

/* Header-Lockup: Wortzeichen links, rundes Badge direkt daneben.
   Beide Bilder sind flache PNGs mit transparentem Hintergrund —
   kein Filter, keine Mischblende, damit die Kanten sauber bleiben. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand img {
  display: block;
}

/* Wortzeichen: 1.25rem entspricht der bisherigen optischen Hoehe
   (28px Kastenhoehe minus dieWhitespace-Raender der Quelldatei). */
.brand > img:first-child {
  height: 1.25rem;
  width: auto;
}

/* Badge als Medaillon neben dem Wortzeichen. Unterhalb von 2.5rem
   verschwinden Kreis, Wellensymbol und Schrift im Pixelbrei. */
.brand-badge {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
}

.nav {
  display: flex;
  gap: var(--space-xl);
}
.nav a {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--fg-muted);
  padding-block: var(--space-xs);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav a:hover { color: var(--fg); border-bottom-color: var(--accent); }

.header-cta { padding: 0.65rem 1.35rem; }

.nav-toggle {
  display: none;
  width: 44px;            /* >= 44px Touch-Target */
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateX(-50%) translateY(-3px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--gutter) var(--space-xl);
  border-top: 1px solid var(--border);
  background: var(--paper);
}
.mobile-nav a {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  padding-block: var(--space-sm);
}
.mobile-nav .btn { justify-content: center; margin-top: var(--space-xs); }

/* ---------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------- */
/* Hintergrundbild: hero-ocean-clean.jpg ist hero-ocean.png mit
   herausgerechnetem Marken-Text (Content-Aware-Fill im Himmel, Zuschnitt
   unten). Original ist ein fertiges Banner mit eingebackener Wortmarke —
   unveraendert im Hintergrund wuerde es mit dem Hero-Text kollidieren.

   Der Schleier laeuft WAAGERECHT: dicht hinter dem Text links, offen zum
   Sonnenuntergang rechts. So bleibt das Bild scharf und farbig, ohne die
   Lesbarkeit zu opfern. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-4xl) var(--space-3xl);
  background-color: var(--paper);
  background-image:
    linear-gradient(100deg,
      rgba(250, 247, 240, 0.93) 0%,
      rgba(250, 247, 240, 0.89) 30%,
      rgba(249, 243, 233, 0.68) 55%,
      rgba(246, 238, 224, 0.30) 78%,
      rgba(244, 236, 222, 0.18) 100%),
    radial-gradient(120% 90% at 88% 12%, rgba(124, 136, 122, 0.14) 0%, transparent 58%),
    url("assets/brand/hero-ocean-clean.jpg"),
    linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  background-repeat: no-repeat;
  background-position: center, center, center center, center;
  background-size: cover, cover, cover, cover;
}

/* Das Video liegt als leise Bewegung UEBER dem Foto, nicht an dessen
   Stelle. Die Maske blendet es links (Textseite) vollstaendig aus und
   laesst es nur rechts aufleuchten - so bleibt die Lesbarkeit des
   Hero-Textes erhalten und das Sonnenuntergangs-Foto sichtbar. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.34;
  /* Weichgezeichnet, damit der Clip nur als warmes, bewegtes Licht wirkt
     und nicht mit dem Hero-Text konkurriert. Die eingebrannte Wortmarke
     wurde am 09.11.2026 aus Video und Poster entfernt (delogo). */
  filter: blur(22px) saturate(0.9) contrast(0.95);
  transform: scale(1.06);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.6) 72%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.6) 72%, #000 100%);
}
/* Hinweis: Das Hero-Video nutzt <source>-Kinder und hat deshalb kein
   src-Attribut. Ein Ausblenden per :not([src]) wuerde es dauerhaft
   verstecken - das Player-Video regelt seine Sichtbarkeit selbst ueber
   html[data-media-kind]. */

.hero-grid,
.hero-art,
.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-3xl);
  align-items: center;
}

.hero-copy .display { margin-bottom: var(--space-lg); }

/* Die kursive Zeile liegt direkt ueber dem Sonnenuntergang-Foto und
   braucht darum die dunklere Salbei-Variante aus dem Token-Raster. */
.hero-copy .display em { color: var(--sage-photo); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.hero-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero-stamp li { display: flex; align-items: center; gap: var(--space-md); }
.hero-stamp li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
}

.hero-art {
  position: relative;
  /* Badge und Wortliste als eine Einheit: das Badge gibt per Flex seine
     Breite an die Liste ab, statt die Spalte ueberlaufen zu lassen. */
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
/* Das Hero-Bild ist jetzt das runde Marken-Badge (hero-badge.png), kein
   Portraet mehr. 1:1 statt 4:5, damit der Kreis nicht beschnitten wird.
   drop-shadow statt box-shadow: der Schatten folgt der Alpha-Form des
   Kreises, waehrend box-shadow immer das rechteckige Element umrahmen
   wuerde und an den vier Ecken als Kante sichtbar waere. */
.hero-art img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(23, 32, 28, 0.26));
  flex: 1 1 auto;
  /* Ohne min-width:0 verhindert der min-content-Wert des Bildes das
     Schrumpfen und die Liste sprengt stattdessen die Spalte. */
  min-width: 0;
  /* Sanftes Atmen des Badges: vermittelt Leben ohne zu aufdringlich zu sein */
  animation: hero-badge-breathe 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hero-badge-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 26px 44px rgba(23, 32, 28, 0.26)); }
  50% { transform: scale(1.02); filter: drop-shadow(0 30px 52px rgba(124, 136, 122, 0.3)); }
}

/* Bewusst ohne dekorativen Rahmen: ein Rechteck ueber dem Motiv las sich
   als ueberlagertes Bild und stoerte die ruhige Hero-Komposition. */

/* ---------------------------------------------------------------
   6b. HERO — WIRKEEBENEN
   Vertikale Wortliste rechts neben dem Badge, nach der Marken-Vorlage:
   feine Trennlinie links, warme Abstaende, weite Laufweite. Sie steht
   im waagerechten Schleier des Fotos, darum --sage-photo statt
   --fg-muted — dieselbe Begruendung wie bei der kursiven Zeile.
   --------------------------------------------------------------- */
.hero-axes {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 0 var(--space-md);
  list-style: none;
  border-left: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-photo);
  /* "NATURE" darf nicht umbrechen — sonst zerfaellt die Liste in zwei
     Bloecke und die Trennlinie bekommt einen Absatzumbruch. */
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   7. MANIFEST
   --------------------------------------------------------------- */
.manifest {
  padding-block: var(--space-4xl);
  background: var(--surface);
}

.manifest-text {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.32;
  max-width: 30ch;
  color: var(--fg);
}
.manifest-text em { font-style: italic; color: var(--accent-deep); }

.manifest-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-2xl);
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border);
}
.manifest-pillars h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--space-sm);
}
.manifest-pillars p { color: var(--fg-muted); font-size: var(--step--1); }

/* ---------------------------------------------------------------
   8. WAVES
   --------------------------------------------------------------- */
/* Ruhiger, texturierter Grund fuer die Galerie: zwei sehr schwache
   Radialverlaeufe brechen die Flaeche auf, ohne die Karten zu
   konkurrenzieren. Reine CSS-Loesung, kein weiteres Asset. */
.waves {
  padding-block: var(--space-4xl);
  background-color: var(--bg-alt);
  background-image:
    radial-gradient(70% 48% at 12% 8%, rgba(124, 136, 122, 0.10) 0%, transparent 62%),
    radial-gradient(58% 44% at 88% 96%, rgba(23, 32, 28, 0.05) 0%, transparent 60%);
}

/* Kopfbereich der Wave-Sektion als eigenes Panel. Gibt der Galerie einen
   ruhigen Anker und hebt sie vom Fliesstext der uebrigen Sektionen ab.
   Die erste Ebenen-Beschriftung sitzt darin - daher max-width: none. */
.waves .section-head {
  max-width: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

/* Ebenen-Beschriftung im Panel: zusaetzlich eine Linie ueber der
   Beschriftung, weil sie hier Einleitungstext und Beschriftung trennt.
   Der Abstand nach oben ist groesser, das Panel hat eigene Luft.
   Layout und Linie darunter kommen aus .layer-label — hier nur das,
   was das Panel wirklich hinzufuegt. */
.waves .section-head .layer-label {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

/* Ebenen-Beschriftung fuer alle vier Ebenen: Nummerierung links,
   Name rechts, warme Linie darunter als Trenner zu den Karten.

   Das Layout gehoert an .layer-label selbst und nicht an eine Variante.
   Frueher hing die Flex-Regel an .waves .section-head .layer-label —
   dadurch bekamen nur die erste Ebene (im Panel) den Abstand, waehrend
   FUNCTIONAL und LIFESTYLE als Inline-Spam aneinanderklebten
   ("07 — 09FUNCTIONAL WAVES"). */
.layer-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
}
.layer-label .layer-range {
  font-variant-numeric: tabular-nums;
}

.wave-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

/* Die drei Ebenen tragen 6 / 3 / 3 Karten. Diese Zahl ist der Rhythmus
   der ganzen Sektion — vier Spalten wuerden daraus 4+2 und 3+1, also
   eine zahnlose Luecke am Reihenende. Deshalb wird die Spaltenzahl
   hier ausdruecklich festgeschrieben und nicht dem Auto-Fit
   ueberlassen, das an der Breite des Containers haengt.

   Erst ab 76rem (1220px) greift die Festlegung: darunter entscheidet
   weiterhin Auto-Fit, damit schmale Viewports ihre 2 Spalten behalten. */
@media (min-width: 76rem) {
  .wave-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wave-card {
  display: flex;
  flex-direction: column;
  /* Anker fuer den Hinweis-Badge und das Start-Overlay auf dem Bild. */
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* State-Transition ohne Layout-Shift */
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.wave-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.wave-card:focus-within {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

/* 5/4 statt 4/3: die acht Querbilder (1.45) verlieren damit kaum Flaeche,
   waehrend 4/5 rund 45 % der Breite gekostet haette. */
.wave-card img {
  aspect-ratio: 5 / 4;
  object-fit: cover;
  width: 100%;
  /* Subtile Bewegung: 1.03-fache Vergroesserung, weich in duration/ease.
     .wave-card hat overflow:hidden, das Bild wachst also nach innen. */
  transition: transform var(--dur) var(--ease);
}
.wave-card:hover img,
.wave-card:focus-within img {
  transform: scale(1.03);
}

/* Der Hover-Hinweis sitzt als kleines Badge oben links auf dem Bild.
   Er wird weiter unten definiert - hier bewusst KEIN zweiter ::after-
   Block, sonst ueberschreiben sich die Regeln und das Badge zieht sich
   als weisse Flaeche ueber die ganze Kachel. */

/* Salbeigruene Linie als zweites Hover-Signal */
.wave-card:hover,
.wave-card:focus-within {
  border-color: var(--accent);
}

/* Aktive Karten: dezent hervorgehoben, wenn der Track gerade laeuft.
   Wird per JS über aria-current auf der Playlist oder beim direkten
   Klick auf die Galerie-Kachel gesetzt. */
.wave-card.is-active {
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(124, 136, 122, 0.25);
  border-color: var(--accent-deep);
  background: var(--surface-sunk);
}
.wave-card.is-active img {
  filter: saturate(1.2) brightness(1.05);
}

/* Textbereich der Kachel: Innenabstand und Flex-Spalte wie in der
   alten Fassung. Ohne diese Regel klebte der Text direkt am Bildrand. */
.wave-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

/* Stimmungszeile: die emotionale Kurzform direkt unter der BPM-Angabe */
.wave-mood {
  font-size: var(--step--1);
  color: var(--accent-deep);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2xs);
}

/* Wellen, fuer die es noch keine Musik gibt. */
.wave-pending {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  margin: 0;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs);
  background: rgba(250, 247, 240, 0.92);
  color: var(--ink);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
}

.wave-card:has(.wave-pending) img { filter: saturate(0.72); }

.wave-meta {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.wave-body h4 {
  font-size: var(--step-2);
  letter-spacing: 0.01em;
}

/* ---------- Wellen-Kachel als Sprungmarke in den Player ----------

   Gleiches Prinzip wie bei den 777-Bewegungskarten: der Button im
   Heading traegt den sichtbaren Namen, sein Pseudo-Element legt sich
   ueber die ganze Kachel. Der Button bleibt bewusst position: static,
   damit sich das Overlay an der Kachel verankert. */
.wave-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
}

.wave-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur) var(--ease);
}

.wave-card:hover .wave-btn::after {
  box-shadow: inset 0 0 0 1px rgba(23, 32, 28, 0.16);
}

.wave-btn:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}

/* Kacheln ohne Musik: nicht klickbar, aber klar als "kommt noch"
   erkennbar. Der Hinweis sitzt auf dem Bild, wie beim Wellen-Badge. */
.wave-btn[disabled] {
  cursor: default;
}

.wave-btn[disabled]::after { content: none; }

.wave-card:has(.wave-btn:not([disabled]))::after {
  content: "Im Player starten \2192";
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs);
  background: rgba(250, 247, 240, 0.92);
  color: var(--ink);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.wave-card:has(.wave-btn:not([disabled])):hover::after,
.wave-card:has(.wave-btn:not([disabled])):focus-within::after { opacity: 1; }

.wave-body p {
  font-size: var(--step--1);
  color: var(--fg-muted);
  margin-top: auto;
}

/* ---------------------------------------------------------------
   9. 777 SESSION
   --------------------------------------------------------------- */
.session {
  padding-block: var(--space-4xl);
  background: var(--forest);
  color: var(--fg-on-dark);
}
.session .eyebrow { color: var(--sage-on-dark); }
.session .section-lead { color: var(--fg-on-dark-mute); }

/* Key Visual des 777-Abschnitts: ein breites, ruhiges Bildband unter der
   Ueberschrift. Es traegt die Stimmung (goldene Stunde, drei Wellenebenen
   = drei Phasen), ohne mit der Typografie zu konkurrieren. Der Rahmen ist
   bewusst hell und duenn — auf dem dunklen Waldgruen liest er sich als
   Lichtkante, nicht als Kasten. */
.session-visual {
  margin: 0 0 var(--space-2xl);
  border: 1px solid rgba(250, 247, 240, 0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--forest);
  box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.55);
}
.session-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

/* Phasen-Fortschritt unter dem Lead-Text */
.phase-progress {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.phase-marker {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(250, 247, 240, 0.25);
  border: 1px solid rgba(250, 247, 240, 0.35);
  position: relative;
  z-index: 2;
}
.phase-marker.phase-active {
  background: var(--sage);
  border-color: var(--paper);
  box-shadow: 0 0 0 3px rgba(124, 136, 122, 0.35);
}
.phase-marker.phase-done {
  background: var(--paper);
  border-color: var(--paper);
}
.phase-line {
  flex: 1;
  height: 1px;
  background: rgba(250, 247, 240, 0.16);
  position: relative;
  z-index: 1;
}

.movements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-xl);
  counter-reset: movement;
}

.movements li {
  padding: var(--space-xl);
  border: 1px solid rgba(250, 247, 240, 0.16);
  border-radius: var(--radius-md);
  background: rgba(250, 247, 240, 0.03);
  /* Anker fuer die klickbare Flaeche des Buttons. */
  position: relative;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Ausgangszustand und Zielzustand der Einblendung. Die Verzoegerung
   haengt bewusst nur am Zielzustand (.animate-in): so wirkt sie beim
   Einblenden, aber nicht spaeter bei Hover oder Fokus. */
.movements li.will-animate {
  opacity: 0;
  transform: translateY(18px);
}
.movements li.animate-in {
  opacity: 1;
  transform: translateY(0);
}
.movements li.animate-in:nth-child(1) { transition-delay: 0s; }
.movements li.animate-in:nth-child(2) { transition-delay: 0.3s; }
.movements li.animate-in:nth-child(3) { transition-delay: 0.6s; }
.movements li:hover {
  border-color: rgba(250, 247, 240, 0.35);
  background: rgba(250, 247, 240, 0.08);
  transform: translateY(-2px);
}
.movements li:focus-within {
  border-color: var(--sage);
  background: rgba(250, 247, 240, 0.08);
  transform: translateY(-2px);
}

/* Aktive Bewegung: hebt sich hervor, wenn gerade gespielt wird */
.movements li.is-active {
  border-color: var(--sage);
  background: rgba(124, 136, 122, 0.12);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(124, 136, 122, 0.25);
}
.movements li.is-active .movement-time {
  color: var(--sage-on-dark);
}
.movements li.is-active .movement-track {
  color: var(--paper);
}

/* ---------- 777-Bewegungskarte als Sprungmarke in den Player ----------

   Der Button im Heading traegt den sichtbaren Namen und bleibt fuer
   Screenreader und Tastatur ein echtes Bedienelement. Sein
   Pseudo-Element legt sich ueber die gesamte Karte, damit nicht nur die
   Ueberschrift, sondern die ganze Flaeche klickbar ist. */
.movement-heading { margin-bottom: var(--space-xs); }

.movement-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  /* Bewusst KEIN position: relative. Sonst wuerde sich das Pseudo-Element
     am Button ausrichten und nur den Text umrahmen. Static laesst es sich
     an der Karte (.movement-item) verankern -> die ganze Karte ist
     klickbar. */
}

.movement-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  transition: box-shadow var(--dur) var(--ease);
}

.movement-item:hover {
  border-color: rgba(250, 247, 240, 0.3);
  background: rgba(250, 247, 240, 0.06);
}

.movement-item:hover .movement-btn::after {
  box-shadow: inset 0 0 0 1px rgba(250, 247, 240, 0.22);
}

.movement-btn:focus-visible {
  outline: 2px solid var(--fg-on-dark);
  outline-offset: 3px;
}

.movement-btn:focus-visible::after {
  box-shadow: inset 0 0 0 1px rgba(250, 247, 240, 0.3);
}

/* Hinweis auf die Sprungmarke. Nur bei Hover/Fokus sichtbar, damit die
   ruhige Aesthetik der Sektion nicht dauerhaft gebrochen wird.
   Platz oben rechts neben der Nummer — unten waere der Text. */
.movement-item::after {
  content: "Im Player starten \2192";
  position: absolute;
  right: var(--space-xl);
  top: var(--space-xl);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-on-dark);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.movement-item:hover::after,
.movement-item:focus-within::after { opacity: 1; }

.movement-no {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  color: var(--sage-on-dark);
  margin-bottom: var(--space-lg);
}

.movements h3 { font-size: var(--step-2); margin-bottom: var(--space-xs); }

.movement-time {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--fg-on-dark-mute);
  margin-bottom: var(--space-md);
}

/* Name des konkreten Tracks in der Bewegungskarte.
   Steht ueber der Blueprint-Zeile, damit die Karte den Player-Eintrag
   und die Beschreibung der Bewegung nebeneinander zeigt. */
.movement-track {
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--fg-on-dark);
  margin-bottom: var(--space-2xs);
}

.movements li p:last-child {
  font-size: var(--step--1);
  color: var(--fg-on-dark-mute);
}

/* ---------------------------------------------------------------
   10. RADIO
   --------------------------------------------------------------- */
/* Radio traegt ein helles japandisches Landschaftsbild als Grund. Der
   Schleier ist KEIN Kontrast-Retter: alle im Abschnitt verwendeten
   Textfarben erreichen auch ohne ihn AA (--fg 11,7:1, --fg-muted
   5,4:1, --accent-deep 6,2:1 gegen die dunkelsten 5 % des Bildes).
   Er dient nur der Kohaesion zum Papierton — die Seite soll nicht
   wirken, als haette jemand ein Foto hinter ein Fenster geklebt.
   background-attachment bleibt bewusst default (scroll); fixed ruckelt
   auf Mobilgeraeten. */
.radio {
  padding-block: var(--space-4xl);
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--surface-tint), var(--surface-tint)),
    url("assets/radio/radio-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.radio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: center;
  padding-bottom: var(--space-3xl);
}

.radio-copy .btn { margin-top: var(--space-2xl); }

/* Kompakte Zahlenzeile im Radio-Abschnitt.
   Loest die Differenz zwischen "12 WAVES" (Hero/Galerie) und den 16 Wellen
   mit Musik in der Playlist auf. */
.radio-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.radio-facts li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.radio-fact-no {
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.radio-fact-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.radio-art img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Videoclip ersetzt das Cover, solange ein Videotrack laeuft. Beide
   teilen sich dieselbe Flaeche und denselben Radius, damit der Wechsel
   nicht als Sprung wirkt.

   Der Zustand steht auf <html>, weil die Cover-Flaeche ein Geschwister des
   Players ist — ein Selektor ueber [data-player] wuerde sie nie treffen. */
.radio-art {
  position: relative;
}
.radio-art .player-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  /* contain statt cover: Das Cover ist quadratisch, die Clips sind 16:9.
     Ein zentrierter Quadrat-Crop wuerde bei 864x480 rund 44 % der Breite
     abschneiden — genau den Bereich, in dem die eingebrannte Wortmarke
     liegt. contain zeigt das ganze Bild; die Letterbox-Balken fallen auf
     den dunklen Grund und lesen sich als Absicht. */
  object-fit: contain;
  background: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
html[data-media-kind="video"] .radio-art img { visibility: hidden; }
html[data-media-kind="video"] .radio-art .player-video { display: block; }

/* ---------------------------------------------------------------
   10b. RADIO PLAYER
   --------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.player-panel {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-sunk) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.player-panel:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-deep);
}

/* Player ist Kind des Panels -> eigenes Padding entfernen, da Panel es uebernimmt */
.player-panel .player {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.player-panel .player:focus-visible {
  box-shadow: none;
}

/* Container ist per Tab erreichbar -> Fokus muss sichtbar sein */
.player-panel:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--accent);
}

/* Kopf des Players: Text links, Fokus-Schalter rechts. Flex statt Block,
   damit der Schalter nicht in den Tracktitel fliesst. min-width: 0 am
   Textteil laesst lange Titel umbrechen, statt die Zeile zu sprengen. */
.player-now {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.player-now-text { min-width: 0; }


.player-label {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  margin-bottom: var(--space-xs);
}

.player-track {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
}

.player-sub {
  font-size: var(--step--1);
  color: var(--fg-muted);
  margin-top: var(--space-2xs);
}

.player-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pbtn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.pbtn:hover {
  background: var(--surface-sunk);
  border-color: var(--border-strong);
}
/* Disabled: reduzierte Betonung, kein Pointer, keine Aktion */
.pbtn:disabled {
  opacity: 0.4;
  cursor: default;
  background: transparent;
}
.pbtn:disabled:hover { background: transparent; border-color: var(--border); }

.pbtn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pbtn-main {
  width: 52px;
  height: 52px;
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
}
.pbtn-main:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pbtn-main svg { width: 22px; height: 22px; }

/* Play/Pause-Zustand wird ueber aria-pressed gesteuert, nicht ueber eine
   Klasse: damit bleibt der Zustand eine single source of truth und ist
   gleichzeitig fuer assistive Technik ausgezeichnet. */
.pbtn-main .icon-pause { display: none; }
.pbtn-main[aria-pressed="true"] .icon-play { display: none; }
.pbtn-main[aria-pressed="true"] .icon-pause { display: block; }

.player-scrub {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  margin-inline: var(--space-sm);
}

.player-scrub input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--sage-deep);
  -webkit-appearance: none;
  appearance: none;
}
.player-scrub input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
.player-scrub input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
.player-scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: var(--radius-pill);
  background: var(--forest);
}
.player-scrub input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--forest);
}
.player-scrub input[type="range"]:disabled { cursor: default; opacity: 0.4; }

.player-time {
  flex: 0 0 auto;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* Lautstärke: Stummschalten + Regler */
.player-volume {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
}

.player-vol-scrub {
  display: flex;
  align-items: center;
  width: 5rem;
  min-width: 0;
}

.player-vol-scrub input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--sage-deep);
  -webkit-appearance: none;
  appearance: none;
}
.player-vol-scrub input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
.player-vol-scrub input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
.player-vol-scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: var(--radius-pill);
  background: var(--forest);
}
.player-vol-scrub input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--forest);
}
.player-vol-scrub input[type="range"]:disabled { cursor: default; opacity: 0.4; }

/* Play/Pause-Zustand des Lautsprecher-Icons */
.pbtn[data-action="mute"] .icon-mute { display: none; }
.pbtn[data-action="mute"][aria-pressed="true"] .icon-vol { display: none; }
.pbtn[data-action="mute"][aria-pressed="true"] .icon-mute { display: block; }

@media (max-width: 48rem) {
  .player-vol-scrub { width: 3.5rem; }
}

/* Native Fallback-Steuerung nur zeigen, wenn JS den Player nicht übernimmt */
.player-native {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
}
[data-player].is-enhanced .player-native { display: none; }

/* ---------------------------------------------------------------
   10c. PLAYLISTE
   --------------------------------------------------------------- */
.playlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0 var(--space-xl);
  margin-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.track {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  width: 100%;
  /* Fuellt die Grid-Zeilenhoehe aus, damit die Unterlinien einer Zeile
     auch bei zweizeiligem Titel buendig abschliessen. */
  height: 100%;
  padding: var(--space-md) var(--space-sm);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.track:hover { background: var(--surface); }

/* Aktiver Track: Farbe + Rand, nicht nur Farbe allein */
.track[aria-current="true"] {
  color: var(--accent-deep);
  box-shadow: inset 3px 0 0 var(--accent-deep);
  background: var(--surface);
}

.track-no {
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  flex: 0 0 1.5rem;
}
.track[aria-current="true"] .track-no { color: var(--accent-deep); }

.track-name { flex: 1 1 auto; }

.track-wave {
  flex: 0 0 auto;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Bereichs-Ueberschrift innerhalb der Playlist.
   Das Grid laeuft sonst in die naechste Spalte, deshalb vollbreite Spanne. */
.playlist-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-strong);
}

.playlist-head:first-child { margin-top: 0; }

.playlist-area {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

.playlist-count {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   11. SYSTEM
   --------------------------------------------------------------- */
.system {
  padding-block: var(--space-4xl);
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.system-grid {
  display: grid;
  /* min(20rem, 100%) statt 20rem: auf 320-px-Displays ist 20rem breiter
     als der Viewport — die Spalte wuerde dann aus der Seite laufen. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-xl);
}

.system-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow var(--dur) var(--ease);
}
.system-card:hover { box-shadow: var(--shadow-md); }

.system-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

.system-body { padding: var(--space-lg); }
.system-body h3 {
  font-size: var(--step-2);
  margin-bottom: var(--space-xs);
}
.system-body p { font-size: var(--step--1); color: var(--fg-muted); }

.formula {
  margin: var(--space-3xl) 0 0;
  padding: var(--space-xl) var(--space-lg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--accent-deep);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
   12. CTA
   --------------------------------------------------------------- */
.cta {
  padding-block: var(--space-4xl);
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(124, 136, 122, 0.2) 0%, transparent 60%),
    var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: -10% -10%;
  background: radial-gradient(circle at 30% 30%, rgba(124, 136, 122, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(38, 52, 45, 0.1) 0%, transparent 40%);
  animation: cta-drift 10s ease-in-out infinite alternate;
  z-index: 0;
}
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); position: relative; z-index: 1; }
.cta .lead { margin-bottom: var(--space-lg); }

@keyframes cta-drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(1rem, 1rem); }
}

/* ---------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-3xl);
  background: var(--forest);
  color: var(--fg-on-dark-mute);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

/* Footer fuehrt das Wortzeichen; Breite statt Hoehe, damit das
   Seitenverhaeltnis (889x100) nicht durch erzwungene quadratische
   Kanten verzerrt wird. */
.footer-mark { height: 1.25rem; width: auto; display: block; opacity: 0.9; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
.site-footer nav a {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-on-dark-mute);
  transition: color var(--dur) var(--ease);
}
.site-footer nav a:hover { color: var(--paper); }
.site-footer nav a:focus-visible { outline-color: var(--sage); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------
   13c. YOUTUBE-VERLINKUNG

   Der Kanal wird verlinkt, nicht eingebettet. Ein <iframe> wuerde
   Cookies setzen, frame-src in der CSP aushebeln und den roten Player
   in die matte Flaeche setzen. Alle Ziele oeffnen in einem neuen Tab
   (target/rel stehen im Markup), hier liegt nur die Form.
   --------------------------------------------------------------- */

/* Kopfzeile: LISTEN und das Kanalzeichen stehen als eine Gruppe rechts. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-social {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.header-social:hover {
  color: var(--fg);
  border-color: var(--border-strong);
  background: var(--surface-sunk);
}
.header-social:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}
.header-social svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.header-social svg path { fill: currentColor; stroke: none; }

/* Mobil-Navigation: gleiches Ziel, ausgeschrieben. */
.mobile-nav-yt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Radio-Abschnitt: eine ruhige Zeile unter den Katalogzahlen. */
.radio-youtube {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
  font-size: var(--step--1);
}
.radio-youtube-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.radio-youtube a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease);
}
.radio-youtube a:hover { color: var(--fg); }

/* Player-Kopf: Playlist der gerade laufenden Wave. */
.player-yt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.player-yt:hover { color: var(--fg); }
.player-yt svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.player-yt svg path { fill: currentColor; stroke: none; }

/* 777-Abschnitt: dunkler Grund, deshalb die helle Salbeivariante. */
.session-youtube {
  margin-top: var(--space-lg);
  font-size: var(--step--1);
}
.session-youtube a {
  color: var(--sage-on-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease);
}
.session-youtube a:hover { color: var(--paper); }

/* Wave-Karten: der Link liegt ueber dem Start-Overlay (.wave-btn::after),
   sonst wuerde der Klick den Player starten statt YouTube zu oeffnen. */
.wave-yt {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: var(--space-sm);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease);
}
.wave-yt:hover { color: var(--fg); }

/* Footer: eigener Block, klar getrennt von der internen Navigation. */
.footer-watch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.footer-watch-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-on-dark);
}
.footer-watch a {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-on-dark-mute);
  transition: color var(--dur) var(--ease);
}
.footer-watch a:hover { color: var(--paper); }
.footer-watch a:focus-visible { outline-color: var(--sage); }

/* Sichtbarer Fokusrahmen fuer alle neuen Textlinks. */
.wave-yt:focus-visible,
.player-yt:focus-visible,
.radio-youtube a:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 1px;
}
.session-youtube a:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ---------------------------------------------------------------
   13b. TRANSPORT-LEISTE (Tuner)

   Feste Leiste am unteren Rand. Drei Schichten, von oben nach unten:
     1. Frequenzlinie — Canvas ueber die volle Breite. Zeichnet die echte
        Wellenform des laufenden Tracks (AnalyserNode, Zeitbereich) und
        atmet im Ruhezustand langsam. Sie ist Zustandsanzeige, nicht
        Dekoration: man sieht, ob Ton laeuft, bevor man hoert.
     2. Bedienung — Cover, Wave/Titel, Transport, Fortschritt, Lautstaerke.
     3. Frequenzskala — feine Tusche-Striche an der Unterkante, wie die
        Skala eines analogen Tuners. Rein dekorativ.

   Die Leiste ist immer da. Der grosse Player bleibt die Hauptflaeche;
   hier liegt nur die Fernbedienung, die auch beim Scrollen erreichbar ist.
   --------------------------------------------------------------- */
.now-playing {
  position: fixed;
  inset: auto 0 0 0;
  /* Ueber dem Sticky-Header (50), damit die Leiste beim Scrollen immer
     bedienbar bleibt; Overlays und Skip-Link liegen weiter darueber. */
  z-index: 60;
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -22px 44px -34px rgba(23, 32, 28, 0.55);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Frequenzskala an der Unterkante: 1px-Striche alle 12px, zu den Raendern
   hin ausgeblendet. Bewusst leise — sie soll die Flaeche rahmen, nicht mit
   den Bedienelementen um Aufmerksamkeit konkurrieren. */
.now-playing::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    var(--border-strong) 0 1px,
    transparent 1px 12px
  );
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Die Linie sitzt in der Flussordnung ganz oben — kein Overlap mit den
   Bedienelementen, damit Trefferflaechen unangetastet bleiben. */
.np-wave {
  display: block;
  width: 100%;
  height: 30px;
}

.now-playing-inner {
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) auto minmax(11rem, 1.6fr) auto;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--space-2xs) var(--gutter) 0.6rem;
}

.now-playing-cover {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--paper);
}

.now-playing-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Vor dem ersten Track ist src leer — dann zeigt die Flaeche die Initialen
   statt eines kaputten Bild-Symbols. */
.now-playing-cover-img[src=""],
.now-playing-cover-img:not([src]) { display: none; }

.now-playing-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
}

.now-playing-info {
  min-width: 0;
}

.now-playing-wave {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sendeleuchte: grau im Ruhezustand, salbei + Glanz bei Wiedergabe.
   Zustand kommt vom Container (data-playing), nicht von der Lampe selbst. */
.now-playing-wave::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--border-strong);
  vertical-align: 0.1em;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.now-playing[data-playing="true"] .now-playing-wave::before {
  background: var(--sage);
  box-shadow: 0 0 0 3px rgba(124, 136, 122, 0.2),
              0 0 10px rgba(124, 136, 122, 0.55);
}

.now-playing-title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Transport ---------- */
.np-transport {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.np-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.np-btn:hover {
  background: var(--surface-sunk);
  border-color: var(--border);
  color: var(--accent-deep);
}
.np-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.now-playing-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--forest);
  border-radius: var(--radius-pill);
  background: var(--forest);
  color: var(--paper);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.now-playing-toggle:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.now-playing-toggle:active { transform: scale(0.94); }
.now-playing-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}
.np-icon-pause { display: none; }
.now-playing-toggle[data-playing="true"] .np-icon-play { display: none; }
.now-playing-toggle[data-playing="true"] .np-icon-pause { display: block; }

/* ---------- Fortschritt ---------- */
.np-progress {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.np-time {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.4rem;
}
.np-time-end { text-align: right; }

.np-scrub {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Der Fuellstand kommt aus --fill (per JS gesetzt). So zeigt die Leiste
   auch ohne Hover, wie weit der Track ist. */
.np-scrub input[type="range"],
.np-vol-scrub input[type="range"] {
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.np-scrub input[type="range"]::-webkit-slider-runnable-track,
.np-vol-scrub input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--sage-deep) 0 var(--fill, 0%),
    var(--border-strong) var(--fill, 0%) 100%);
}
.np-scrub input[type="range"]::-moz-range-track,
.np-vol-scrub input[type="range"]::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--sage-deep) 0 var(--fill, 0%),
    var(--border-strong) var(--fill, 0%) 100%);
}
.np-scrub input[type="range"]::-webkit-slider-thumb,
.np-vol-scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -3.5px;
  border-radius: 50%;
  border: none;
  background: var(--forest);
}
.np-scrub input[type="range"]::-moz-range-thumb,
.np-vol-scrub input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 50%;
  background: var(--forest);
}
.np-scrub input[type="range"]:disabled,
.np-vol-scrub input[type="range"]:disabled {
  cursor: default;
  opacity: 0.4;
}

/* ---------- Lautstaerke ---------- */
.np-volume {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.np-vol-scrub {
  display: flex;
  align-items: center;
  width: 5.5rem;
}
.np-btn[data-action="np-mute"] .np-icon-mute { display: none; }
.np-btn[data-action="np-mute"][aria-pressed="true"] .np-icon-vol { display: none; }
.np-btn[data-action="np-mute"][aria-pressed="true"] .np-icon-mute { display: block; }

/* Platz unter dem Footer: die feste Leiste darf Impressum und
   Nutzungshinweise nicht verdecken. Der Footer behaelt seine
   Forest-Flaeche bis ganz unten. */
.site-footer { padding-bottom: calc(var(--space-3xl) + 6.5rem); }

@media (max-width: 64rem) {
  .now-playing-inner {
    grid-template-columns: auto minmax(7rem, 1fr) auto minmax(9rem, 1.4fr);
  }
  .np-volume { display: none; }
}

@media (max-width: 48rem) {
  .now-playing-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "info transport"
      "progress progress";
    row-gap: var(--space-2xs);
    padding-bottom: var(--space-sm);
  }
  .now-playing-cover { display: none; }
  .now-playing-info { grid-area: info; }
  .np-transport { grid-area: transport; }
  .np-progress { grid-area: progress; }
  .np-time { min-width: 2.1rem; font-size: 0.62rem; }
  .np-wave { height: 26px; }
  .site-footer { padding-bottom: calc(var(--space-3xl) + 9rem); }
}

/* ---------------------------------------------------------------
   14. RESPONSIVE — Mobile First Korrekturen
   --------------------------------------------------------------- */
@media (max-width: 64rem) {
  /* minmax(0, 1fr) statt 1fr: 1fr hat als Mindestgroesse min-content und
     wird deshalb von langen, nicht umbrechenden Zeilen (Player-Regler)
     aufgeblaeht — die Spalte waechst dann ueber den Viewport hinaus. */
  .hero-grid,
  .radio-grid { grid-template-columns: minmax(0, 1fr); }

  /* Grid-Kinder duerfen unter ihre min-content-Breite schrumpfen. */
  .radio-grid > * { min-width: 0; }

  .hero { padding-block: var(--space-3xl) var(--space-2xl); }

  /* Gestapelt (Badge ueber dem Text) darf das Badge nicht den kompletten
     ersten Viewport fuellen - sonst ist die Headline auf Tablet und Handy
     erst nach dem Scrollen sichtbar. min() deckelt zusaetzlich gegen
     niedrige Viewports im Querformat.
     justify-content:center haelt Badge und Wortliste zusammen mittig —
     sonst stuende das auf 20rem gedeckelte Badge allein mittig und die
     Liste klebte allein am rechten Rand. */
  .hero-art {
    order: -1;
    justify-content: center;
    gap: var(--space-lg);
  }
  .hero-art img {
    aspect-ratio: 1 / 1;
    /* 0 1 auto statt 1 1 auto: die Zeile soll nicht allein vom Badge
       aufgefuellt werden, sonst schiebt es die Wortliste ans Ende. */
    flex: 0 1 auto;
    max-width: min(20rem, 42vh);
    /* Zweite, modernere Deklaration direkt darueber. dvh rechnet gegen
       die tatsaechliche Viewport-Hoehe, vh gegen die groesste — dadurch
       waechst und schrumpft das Badge auf iOS nicht mehr, wenn die
       Adressleiste beim Scrollen ein- und ausklappt.
       Aeltere Browser (iOS < 15.4, Android < 108) kennen dvh nicht,
       verwerfen nur diese Zeile und behalten die vh-Variante. */
    max-width: min(20rem, 42dvh);
    margin-inline: auto;
  }

  /* Mobil steht der Text ueber die volle Breite, der waagerechte Schleier
     aus dem Desktop-Fall schuetzt dann nur die linke Haelfte. Deshalb hier
     gleichmaessig ueber die ganze Flaeche abdunkeln - aber so weit
     zurueckgenommen, dass das Foto weiterhin klar erkennbar bleibt. */
  .hero {
    background-image:
      linear-gradient(180deg,
        rgba(250, 247, 240, 0.82) 0%,
        rgba(249, 244, 234, 0.76) 100%),
      url("assets/brand/hero-ocean-clean.jpg"),
      linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  }

  .manifest-text { max-width: 34ch; }
}

@media (max-width: 48rem) {
  :root { --space-4xl: 4rem; --space-3xl: 3rem; }

  .nav,
  .header-cta,
  .header-social { display: none; }

  .nav-toggle { display: block; }

  .mobile-nav[data-open="true"] { display: flex; }

  .hero-actions { gap: var(--space-md); }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-actions .text-link { align-self: center; }

  .hero-stamp { gap: var(--space-sm); }
  .hero-stamp li + li::before { display: none; }

  .wave-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Schmale Displays: Unterhalb von rund 640 px passen die Player-Regler
   nicht mehr in eine Zeile — die Seekbar wuerde auf 0 px zusammenfallen.
   Drei ruhige Zeilen statt Quetschen: Transport, dann die volle Seekbar,
   darunter Zeit links und Lautstaerke rechts. Die Reihenfolge im DOM
   bleibt unveraendert, nur die visuelle Ordnung wechselt; Tastaturfokus
   laeuft weiter logisch von links nach rechts. */
@media (max-width: 40rem) {
  .player-controls {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-md);
  }
  .player-scrub {
    order: 1;
    flex: 1 1 100%;
    margin-inline: 0;
  }
  .player-time {
    order: 2;
    margin-right: auto;
  }
  .player-volume {
    order: 3;
    margin-left: auto;
  }
  .player-vol-scrub { width: 4rem; }

  /* Das Bildband ist auf schmalen Displays zu flach (5:2). Ein 4:3-
     Ausschnitt haelt Sonne und Wellen sichtbar, statt sie zu einem
     Streifen zu quetschen. object-position bleibt auf der Sonne. */
  .session-visual img {
    aspect-ratio: 4 / 3;
    object-position: 66% 50%;
  }
}

/* Sehr schmale Displays (320 px): Panel-Padding zuruecknehmen und lange
   Wave-Namen ("CELESTIAL DAWN WAVE") in eine eigene Zeile setzen — sonst
   sprengt die Playlist-Zeile den Viewport. */
@media (max-width: 30rem) {
  .player-panel { padding: var(--space-md); }

  .track {
    flex-wrap: wrap;
    row-gap: 0.1rem;
  }
  .track-wave {
    flex: 1 1 auto;
    margin-left: calc(1.5rem + var(--space-md));
  }
}

/* ---------------------------------------------------------------
   14b. RECHTSTEXTE (Impressum, AGB)
   Eigene Seiten, die dasselbe Stylesheet nutzen. Zwei Ziele: gut
   lesbare Zeilenbreite und ein ruhiger, sachlicher Rhythmus — die
   Marken-Optik der Landingpage darf hier nicht die Rechtslage
   schoener machen als sie ist.
   --------------------------------------------------------------- */
.legal-page {
  padding-block: var(--space-2xl) var(--space-3xl);
}
.legal-back {
  display: inline-block;
  margin-bottom: var(--space-xl);
  color: var(--sage-photo);
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
}
.legal-back:hover { text-decoration: underline; }
.legal-doc {
  max-width: 68ch;                 /* Lesebreite, kein Flattersatz */
}
.legal-doc h1 {
  font-size: var(--step-3);
  line-height: 1.08;
  margin-bottom: var(--space-md);
}
.legal-doc h2 {
  font-size: var(--step-1);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}
.legal-doc h3 {
  font-size: var(--step-0);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}
.legal-doc p,
.legal-doc li {
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--ink-soft);
}
.legal-doc p { margin-bottom: var(--space-md); }
.legal-doc ul,
.legal-doc ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}
.legal-doc li { margin-bottom: var(--space-xs); }
.legal-doc a { color: var(--sage-photo); }
.legal-doc address {
  font-style: normal;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: var(--space-lg);
}
.legal-updated {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--sage-deep);
  margin-bottom: var(--space-xl);
}

/* Offene Felder sind keine Schoenheitskante, sondern ein Warnsignal:
   sie duerfen nicht wie fertiger Text aussehen. */
.legal-todo {
  display: block;
  margin: var(--space-sm) 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink);
}
/* Variante fuer einen Platzhalter mitten im Satz. Bewusst als Klasse
   statt als style-Attribut: die CSP erlaubt nur 'self' und kein
   'unsafe-inline', ein Inline-Style wuerde stillschweigend verworfen. */
.legal-todo-inline {
  display: inline;
  margin: 0;
  padding: 0 0.3em;
  border-left: 0;
  border-bottom: 2px solid var(--accent);
  background: none;
}

/* ---------------------------------------------------------------
   15. MOTION — Respektiert Systemeinstellung (Skill-UX, Severity: High)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Interaktion darf nicht verschwinden — nur die Bewegung entfällt */
  .btn:hover,
  .wave-card:hover { box-shadow: var(--shadow-md); }
}

/* ---------------------------------------------------------------
   17. SQUIRCLE — Progressive Enhancement
   Apple's kontinuierliche Ecken (Superellipse) wirken hochwertiger
   als ein reiner Kreisbogen. Nur wo die Engine es kann; uebrigens
   bleibt das normale border-radius. Setzt bewusst NACH den Radius-
   Tokens, damit es sie ueberschreibt.
   --------------------------------------------------------------- */
@supports (corner-shape: squircle) {
  .btn,
  .nav-toggle,
  .pbtn,
  .wave-card,
  .system-card,
  .movements li,
  .session-visual,
  .player,
  .formula,
  .waves .section-head,
  .radio-art img,
  .track {
    corner-shape: squircle;
  }
}

/* ---------------------------------------------------------------
   18. FOKUS-MODUS

   Ein ruhiger Arbeitszustand: alles ausser Player und Trackliste tritt
   zurueck. Der Zustand steht als data-focus auf <html>, gesetzt von
   theme.js, damit er schon beim Laden gilt und nicht erst nach dem
   ersten Klick.

   Wichtig fuer die Tastatur: Die Ausstiegsleiste liegt im DOM VOR
   <main>. Sonst muesste man erst durch 83 Track-Buttons tabben, um den
   Modus wieder zu verlassen.
   --------------------------------------------------------------- */

/* Umschalter im Player-Kopf */
.focus-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.focus-toggle:hover {
  color: var(--fg);
  border-color: var(--border-strong);
  background: var(--surface-sunk);
}
.focus-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Feste Leiste mit dem Ausstieg */
.focus-bar {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;                 /* ueber der Transport-Leiste (60) */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 3.25rem;
  padding: 0.45rem var(--gutter);
  background: rgba(var(--paper-rgb), 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
          backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
html[data-focus="on"] .focus-bar { display: flex; }

.focus-bar-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.focus-exit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.focus-exit:hover {
  background: var(--surface-sunk);
  border-color: var(--accent);
}
.focus-exit svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Im Fokus-Modus uebernimmt die Leiste den Ausstieg; der Schalter im
   Player-Kopf waere eine zweite, redundante Bedienung. */
html[data-focus="on"] .focus-toggle { display: none; }

/* Alles, was nicht Player oder Trackliste ist, verlaesst die Seite. */
html[data-focus="on"] .site-header,
html[data-focus="on"] .hero,
html[data-focus="on"] .manifest,
html[data-focus="on"] .waves,
html[data-focus="on"] .session,
html[data-focus="on"] .system,
html[data-focus="on"] .cta,
html[data-focus="on"] .site-footer,
html[data-focus="on"] .radio-youtube,
html[data-focus="on"] .skip-link { display: none; }

/* Der Radio-Abschnitt wird zur ganzen Seite: ruhige Flaeche statt Foto,
   kein zweiter Kopf, kein Cover. */
html[data-focus="on"] .radio {
  min-height: 100vh;
  padding-block: calc(3.25rem + var(--space-xl))
                 calc(var(--space-3xl) + 6.5rem);
  background-image: none;
  background-color: var(--bg);
}
html[data-focus="on"] .radio-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-bottom: var(--space-xl);
}
html[data-focus="on"] .radio-art { display: none; }
html[data-focus="on"] .radio-copy > .eyebrow,
html[data-focus="on"] .radio-copy > .section-title,
html[data-focus="on"] .radio-copy > .section-lead,
html[data-focus="on"] .radio-copy > .radio-facts { display: none; }
html[data-focus="on"] .player-panel { margin-top: 0; }

/* Beide Radio-Bloecke (Player und Liste) auf dieselbe ruhige Lesebreite. */
html[data-focus="on"] .radio > .shell { max-width: 62rem; }

/* Zwei Spalten statt drei: bei 83 Titeln ist eine ruhige, breite Liste
   angenehmer zu lesen als ein dichtes Raster. */
html[data-focus="on"] .playlist {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

@media (max-width: 40rem) {
  /* Die Transport-Leiste waechst auf schmalen Displays (drei Zeilen). */
  html[data-focus="on"] .radio {
    padding-bottom: calc(var(--space-3xl) + 9rem);
  }
}

@media (max-width: 30rem) {
  /* Nur die Symbole: die Beschriftungen wuerden die Leiste sprengen. */
  .focus-toggle-label { display: none; }
  .focus-toggle { padding: 0.45rem; }
  .focus-exit span { display: none; }
  .focus-exit { padding: 0.45rem 0.55rem; }
}

/* ---------------------------------------------------------------
   19. TAGESZEIT — die Seite folgt der Uhrzeit

   Vier Fenster, gesetzt von theme.js auf <html data-daypart>:

     05–10  morning   warmes, flaches Morgenlicht
     10–17  day       unveraenderte Markenpalette
     17–21  evening   Abendwaerme, Terrakotta
     21–05  night     dunkles Waldgruen, Licht zurueckgenommen

   Geaendert werden Tokens sowie die drei Flaechen, die ihre Papierfarbe
   fest im Gradienten tragen (Header, Hero, Radio-Schleier). Jede
   Textfarbe bleibt gegen ihren Grund auf WCAG AA geprueft; im
   Nachtmodus kommen gezielt die Bauteile dazu, deren dunkles Waldgruen
   auf dunklem Grund unsichtbar wuerde (Buttons, Regler, Fokusrahmen).
   --------------------------------------------------------------- */

:root { --paper-rgb: 250, 247, 240; }

html[data-daypart="morning"] {
  --paper:           #fbf4e6;
  --cream:           #f6ead6;
  --surface:         #fdf7ec;
  --surface-sunk:    #f4e7d2;
  --paper-rgb:       251, 244, 230;
  --surface-tint:    rgba(253, 247, 236, 0.62);
  --accent:          #a8874f;
  --accent-deep:     #6b552c;
  --sage:            #b09563;
  --border:          rgba(48, 40, 24, 0.14);
  --border-strong:   rgba(48, 40, 24, 0.28);
}

html[data-daypart="evening"] {
  --paper:           #f8efe6;
  --cream:           #f2e2d5;
  --surface:         #fbf4ed;
  --surface-sunk:    #f0dfd2;
  --paper-rgb:       248, 239, 230;
  --surface-tint:    rgba(251, 244, 237, 0.62);
  --accent:          #a5725a;
  --accent-deep:     #6f4535;
  --sage:            #b0836a;
  --border:          rgba(52, 34, 26, 0.14);
  --border-strong:   rgba(52, 34, 26, 0.28);
}

html[data-daypart="night"] {
  color-scheme: dark;
  --paper:           #101613;
  --cream:           #161f1a;
  --surface:         #141c18;
  --surface-sunk:    #1d2721;
  --paper-rgb:       16, 22, 19;
  --surface-tint:    rgba(20, 28, 24, 0.88);
  --fg:              #e9eee7;
  --fg-muted:        #a3b3a0;
  --fg-on-dark:      #f2f5ef;
  --fg-on-dark-mute: #b9c4bb;
  --border:          rgba(233, 238, 231, 0.16);
  --border-strong:   rgba(233, 238, 231, 0.30);
  --accent:          #8fa58a;
  --accent-deep:     #b6c7b1;
  --sage:            #93a98e;
  --sage-photo:      #d7e0d3;
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:       0 8px 24px -12px rgba(0, 0, 0, 0.60);
  --shadow-lg:       0 24px 60px -28px rgba(0, 0, 0, 0.75);
}

/* Header: der Papierschleier folgt der Tagesfarbe. */
html[data-daypart] .site-header {
  background: rgba(var(--paper-rgb), 0.86);
}

/* Hero: derselbe waagerechte Schleier, nur in der jeweiligen Papierfarbe. */
html[data-daypart] .hero {
  background-color: var(--paper);
  background-image:
    linear-gradient(100deg,
      rgba(var(--paper-rgb), 0.93) 0%,
      rgba(var(--paper-rgb), 0.89) 30%,
      rgba(var(--paper-rgb), 0.68) 55%,
      rgba(var(--paper-rgb), 0.30) 78%,
      rgba(var(--paper-rgb), 0.18) 100%),
    radial-gradient(120% 90% at 88% 12%, rgba(124, 136, 122, 0.14) 0%, transparent 58%),
    url("assets/brand/hero-ocean-clean.jpg"),
    linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}

/* Nachts soll das Sonnenuntergangsfoto nicht wie ein Fenster in den Tag
   wirken: eine zusaetzliche dunkle Schicht nimmt es zurueck. */
html[data-daypart="night"] .hero {
  background-image:
    linear-gradient(rgba(16, 22, 19, 0.50), rgba(16, 22, 19, 0.58)),
    linear-gradient(100deg,
      rgba(16, 22, 19, 0.93) 0%,
      rgba(16, 22, 19, 0.89) 30%,
      rgba(16, 22, 19, 0.68) 55%,
      rgba(16, 22, 19, 0.30) 78%,
      rgba(16, 22, 19, 0.18) 100%),
    radial-gradient(120% 90% at 88% 12%, rgba(143, 165, 138, 0.16) 0%, transparent 58%),
    url("assets/brand/hero-ocean-clean.jpg"),
    linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}

/* Mobil wird der Hero senkrecht abgedunkelt (siehe Abschnitt 14). Diese
   Fassung muss nach den Regeln oben stehen, sonst gewinnt der
   waagerechte Verlauf und der Text rechts verliert seinen Grund. */
@media (max-width: 64rem) {
  html[data-daypart] .hero {
    background-image:
      linear-gradient(180deg,
        rgba(var(--paper-rgb), 0.82) 0%,
        rgba(var(--paper-rgb), 0.76) 100%),
      url("assets/brand/hero-ocean-clean.jpg"),
      linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  }
  html[data-daypart="night"] .hero {
    background-image:
      linear-gradient(180deg,
        rgba(16, 22, 19, 0.92) 0%,
        rgba(16, 22, 19, 0.86) 100%),
      url("assets/brand/hero-ocean-clean.jpg"),
      linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  }
}

/* ---------- Nacht: Bauteile, deren Waldgruen sonst verschwindet ---------- */

/* Das Wortzeichen ist ein dunkles PNG. brightness(0) macht es zur
   Silhouette, invert(1) dreht sie ins Helle — unabhaengig vom Asset. */
html[data-daypart="night"] .brand > img:first-child {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* Primaere Buttons: heller Grund, dunkle Schrift. */
html[data-daypart="night"] .btn-primary { color: #101613; }
html[data-daypart="night"] .btn-primary:hover {
  background: var(--sage-on-dark);
  color: #101613;
}

/* Beide Play-Buttons (grosser Player und Transport-Leiste). */
html[data-daypart="night"] .pbtn-main,
html[data-daypart="night"] .now-playing-toggle {
  background: var(--sage-on-dark);
  border-color: var(--sage-on-dark);
  color: #101613;
}
html[data-daypart="night"] .pbtn-main:hover,
html[data-daypart="night"] .now-playing-toggle:hover {
  background: #c4d1bf;
  border-color: #c4d1bf;
  color: #101613;
}

/* Regler-Knopf und native Akzentfarbe. */
html[data-daypart="night"] .player-scrub input[type="range"],
html[data-daypart="night"] .player-vol-scrub input[type="range"],
html[data-daypart="night"] .np-scrub input[type="range"],
html[data-daypart="night"] .np-vol-scrub input[type="range"] {
  accent-color: var(--sage-on-dark);
}
html[data-daypart="night"] .player-scrub input[type="range"]::-webkit-slider-thumb,
html[data-daypart="night"] .player-vol-scrub input[type="range"]::-webkit-slider-thumb,
html[data-daypart="night"] .np-scrub input[type="range"]::-webkit-slider-thumb,
html[data-daypart="night"] .np-vol-scrub input[type="range"]::-webkit-slider-thumb {
  background: var(--sage-on-dark);
}
html[data-daypart="night"] .player-scrub input[type="range"]::-moz-range-thumb,
html[data-daypart="night"] .player-vol-scrub input[type="range"]::-moz-range-thumb,
html[data-daypart="night"] .np-scrub input[type="range"]::-moz-range-thumb,
html[data-daypart="night"] .np-vol-scrub input[type="range"]::-moz-range-thumb {
  background: var(--sage-on-dark);
}

/* Fokusrahmen waren Waldgruen — auf dunklem Grund unsichtbar. */
html[data-daypart="night"] :focus-visible { outline-color: var(--sage-on-dark); }

/* Der Hover-Grund der Trackliste waere identisch mit der Radio-Flaeche. */
html[data-daypart="night"] .track:hover,
html[data-daypart="night"] .track[aria-current="true"] {
  background: var(--surface-sunk);
}

/* Bauteile im dunklen 777-Abschnitt, die auf Papierfarbe setzen. */
html[data-daypart="night"] .phase-marker.phase-active,
html[data-daypart="night"] .phase-marker.phase-done {
  border-color: var(--fg-on-dark);
}
html[data-daypart="night"] .phase-marker.phase-done {
  background: var(--fg-on-dark);
}
html[data-daypart="night"] .movements li.is-active .movement-track,
html[data-daypart="night"] .site-footer nav a:hover {
  color: var(--fg-on-dark);
}

/* ---------------------------------------------------------------
   20. HOHER KONTRAST / FORCED COLORS
   --------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .wave-card,
  .system-card,
  .movements li { border: 1px solid CanvasText; }
  .wave-card:hover { border-color: Highlight; }
}

/* ---------------------------------------------------------------
   21. DRUCK
   --------------------------------------------------------------- */
@media print {
  .site-header, .cta, .skip-link, .focus-bar { display: none; }
  body { background: #fff; color: #000; }
  .session, .site-footer { background: #fff; color: #000; }
}