/* Shutdown — Farbsystem, Shell und Bausteine der App.
 *
 * Dark-first: die App wird abends benutzt, und ein weiß leuchtender Bildschirm
 * macht genau das kaputt, wofür sie da ist. Die Werte sind die dunklen
 * Entsprechungen der Website-Tokens (css/tokens.css) — dieselbe Familie,
 * umgedreht. Diese Datei steht bewusst allein und verweist auf nichts außerhalb
 * dieses Ordners: shutdown/ muss als eigener Document-Root laufen können.
 *
 * Vorlage der Gestaltung: design/shutdown-mockup.html
 */

/* ============================================================
   Tokens
   ============================================================ */

:root {
  /* Flächen — warmes Braun-Schwarz, kein kaltes Grau */
  --sd-bg:        #14100D;
  --sd-surface:   #1E1A16;
  --sd-surface-2: #2A241E;
  --sd-line:      #3A322A;

  /* Text */
  --sd-fg:        #FBF8F3;
  --sd-fg-2:      rgba(251, 248, 243, .62);
  --sd-fg-3:      rgba(251, 248, 243, .42);

  /* Rollen, strikt getrennt:
     Terracotta = Handlung. Sand = Fortschritt und Auszeichnung. Sage = Ruhe. */
  --sd-cta:       #C8684A;
  --sd-cta-dark:  #9E4C30;
  --sd-gold:      #D9B77A;
  --sd-sage:      #9DB598;   /* gegenüber der Website aufgehellt, sonst hält es
                                auf dunklem Grund die Kontrastschwelle nicht */

  --sd-r-card:  14px;
  --sd-r-input:  8px;
  --sd-r-sheet: 24px;

  --sd-dur-fast: 140ms;
  --sd-dur-base: 220ms;
  --sd-ease: cubic-bezier(.22, .61, .36, 1);

  --sd-font-serif:  "Lora", Georgia, serif;
  --sd-font-sans:   "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sd-font-script: "Caveat", "Segoe Script", cursive;

  --sd-tabs-h: 72px;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  background: var(--sd-bg);
  /* Kein Overscroll-Gummizug: Android/iOS lassen sonst auch Seiten, die
     komplett auf den Schirm passen, beim Wischen mitfedern — sieht aus wie
     Phantom-Scroll. Nimmt im Browser-Tab bewusst auch Pull-to-Refresh weg. */
  overscroll-behavior-y: none;
  /* Feste Bezugsgröße für den Body: 100 % statt 100dvh. In installierten
     Android-Apps (Edge-to-Edge) kann 100dvh größer sein als die Layout-Höhe —
     der Body ragte dann um Systemleisten-Höhe über den Schirm hinaus und
     JEDE Seite wurde scrollbar, egal wie kurz ihr Inhalt ist. */
  height: 100%;
}

.sd-body {
  margin: 0;
  min-height: 100%;
  background: var(--sd-bg);
  color: var(--sd-fg);
  font-family: var(--sd-font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Das hidden-Attribut verträgt sich nicht mit expliziten display-Regeln —
   im Projekt schon mehrfach zur Falle geworden. Deshalb generell zuerst. */
[hidden] { display: none !important; }

/* ============================================================
   Grundlayout
   ============================================================ */

.sd-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

.sd-main--tabs {
  padding-bottom: calc(var(--sd-tabs-h) + env(safe-area-inset-bottom) + 24px);
}

.sd-body--scene .sd-main { position: relative; z-index: 1; }

.sd-plain {
  max-width: 560px;
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) 20px 48px;
}

/* ============================================================
   Typografie
   ============================================================ */

.sd-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sd-sage);
}

.sd-h1, .sd-h2, .sd-h3 {
  font-family: var(--sd-font-serif);
  font-weight: 400;
  line-height: 1.2;
}

.sd-h1 { margin: 0 0 4px; font-size: 28px; }
.sd-h2 { margin: 0 0 12px; font-size: 24px; }
.sd-h3 { margin: 30px 0 12px; font-size: 19px; }

/* In einer Karte braucht die Überschrift keinen Abstand nach oben. */
.sd-h3--flach { margin-top: 0; }

.sd-player__offline { margin-top: 18px; }

.sd-text   { margin: 0 0 16px; color: var(--sd-fg-2); }
.sd-muted  { color: var(--sd-fg-3); font-size: 14px; }
.sd-sig {
  font-family: var(--sd-font-script);
  font-size: 32px;
  color: rgba(251, 248, 243, .85);
  text-align: center;
  transform: rotate(-3deg);
}

a { color: inherit; }

/* ============================================================
   Szene im Kopfbereich
   ============================================================ */

.sd-scene {
  position: absolute;
  inset: 0 0 auto;
  height: 300px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sd-scene svg { width: 100%; height: 100%; display: block; }

/* Die Szene ist ein Fenster in einem ruhigen Raum, kein Scheinwerfer:
   Sie wird abgedunkelt und läuft nach unten in den Grund aus. Wie stark,
   hängt von der Tageszeit ab — nachts ist die Szene schon dunkel, und ein
   kräftiger Verlauf würde die Hügel vollends schlucken. */
.sd-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Die Staffelung ist nicht beliebig: Die Hügelkämme liegen im unteren Drittel
     der Szene. Würde der Verlauf dort schon voll decken, bliebe von der
     Landschaft nichts übrig — genau das war der erste Versuch. */
  background: linear-gradient(to bottom,
              rgba(20, 16, 13, .18) 0%,
              rgba(20, 16, 13, .36) 42%,
              rgba(20, 16, 13, .62) 74%,
              var(--sd-bg) 100%);
}

.sd-body--scene .sd-topbar { position: relative; z-index: 1; }

/* ---------- Szene: Farben nach Tageszeit ----------
   Übernommen aus css/app.css der Website (Abschnitt „Szene: Tageszeit &
   Jahreszeit"). ACHTUNG: Dort und in js/social-image.js liegen dieselben
   Paletten — Farbänderungen bitte überall nachziehen. */

.sd-scene #sd-sky stop:nth-of-type(1) { stop-color: var(--sky1, #F6EEDC); }
.sd-scene #sd-sky stop:nth-of-type(2) { stop-color: var(--sky2, #F3EAD6); }
.sd-scene #sd-sky stop:nth-of-type(3) { stop-color: var(--sky3, #EDE3CB); }

.sd-scene .sd-sun circle:nth-of-type(2) { fill: var(--sun1, #F2E5C8); }
.sd-scene .sd-sun circle:nth-of-type(3) { fill: var(--sun2, #EFD9A8); }
.sd-scene .sd-cloud g { fill: var(--cloud, #FBF8F3); }
.sd-scene .sd-moon__bite { fill: var(--sky1, #232B3F); }
.sd-scene .sd-land { filter: var(--land-filter, none); }

.sd-scene .sd-land path:nth-of-type(1) { fill: var(--hill1, #CBD7C6); }
.sd-scene .sd-land path:nth-of-type(2) { fill: var(--hill2, #9DB598); }
.sd-scene .sd-land path:nth-of-type(3) { fill: var(--hill3, #6B8E6A); }
.sd-scene .sd-land path:nth-of-type(4) { fill: var(--hill4, #4E6D4E); }

/* Nacht ist der Normalfall der App, Mond und Sterne aber nicht: sie erscheinen
   nur, wenn draußen wirklich Nacht ist. */
.sd-scene .sd-moon,
.sd-scene .sd-stars { display: none; }

.sd-scene--morgen {
  --sky1: #F8E5CA; --sky2: #F7D9B4; --sky3: #F3CFA2;
  --sun1: #F7DFAC; --sun2: #F0C070;
  --land-filter: brightness(.97) saturate(1.03);
}
.sd-scene--morgen .sd-sun { transform: translate(-330px, 118px); }

.sd-scene--abend {
  --sky1: #E2A47E; --sky2: #EFC498; --sky3: #F4DBAE;
  --sun1: #F4BC6C; --sun2: #EA9440;
  --cloud: #FBEBD8;
  --land-filter: brightness(.8) saturate(1.05) hue-rotate(-8deg);
}
.sd-scene--abend .sd-sun { transform: translate(-70px, 150px); }

.sd-scene--nacht {
  --sky1: #232B3F; --sky2: #1B2233; --sky3: #141A29;
  --cloud: #3A425A;
  /* Etwas heller als auf der Website (dort .42): Hier liegt zusätzlich der
     Abdunklungs-Verlauf darüber, und darunter verschwände die Landschaft ganz. */
  --land-filter: brightness(.58) saturate(.6);
}
.sd-scene--nacht .sd-sun { display: none; }
.sd-scene--nacht .sd-moon,
.sd-scene--nacht .sd-stars { display: block; }
.sd-scene--nacht .sd-cloud--a { opacity: .3; }
.sd-scene--nacht .sd-cloud--b { opacity: .22; }

/* Tagsüber und morgens ist der Himmel hell — dort muss der Verlauf kräftiger
   sein, damit die weiße Überschrift ihren Kontrast behält. */
.sd-scene--tag .sd-scene::after,
.sd-scene--morgen .sd-scene::after,
.sd-scene--abend .sd-scene::after {
  background: linear-gradient(to bottom,
              rgba(20, 16, 13, .46) 0%,
              rgba(20, 16, 13, .58) 42%,
              rgba(20, 16, 13, .74) 74%,
              var(--sd-bg) 100%);
}

/* ---------- Szene: Jahreszeiten ---------- */

.sd-season--fruehling { --hill1: #D9E4CD; --hill2: #A9C89B; --hill3: #7BA36C; --hill4: #587D50; }
.sd-season--sommer    { --hill1: #CBD7C6; --hill2: #9DB598; --hill3: #6B8E6A; --hill4: #4E6D4E; }
.sd-season--herbst    { --hill1: #E0D3B4; --hill2: #C2AE7E; --hill3: #9C8452; --hill4: #75643E; }
.sd-season--winter    { --hill1: #E4E7E2; --hill2: #C3CDC2; --hill3: #93A493; --hill4: #6E7F6E; }

/* ============================================================
   Kopfzeile mit Zurück-Pfeil
   ============================================================ */

.sd-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 12px 4px;
}

.sd-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--sd-fg);
  text-decoration: none;
  background: rgba(30, 26, 22, .6);
  transition: background var(--sd-dur-fast) var(--sd-ease);
}

.sd-back:hover, .sd-back:focus-visible { background: var(--sd-surface-2); }

/* ============================================================
   Karten, Kacheln, Chips
   ============================================================ */

.sd-card {
  background: var(--sd-surface);
  border-radius: var(--sd-r-card);
  padding: 16px;
  margin: 0 0 14px;
}

.sd-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(157, 181, 152, .14);
  color: var(--sd-sage);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}

/* Eyebrow als Abschnittsüberschrift — mit Luft nach oben */
.sd-eyebrow--abschnitt { margin: 26px 0 10px; }

/* Streak-Punkte auf dem Heute-Tab: sieben Tage, die vollen in Sand */
.sd-streakzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}

.sd-streakzeile__punkte { display: flex; gap: 7px; }

.sd-streakzeile__punkt {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1.5px solid rgba(251, 248, 243, .22);
}

.sd-streakzeile__punkt.is-an {
  background: var(--sd-gold);
  border-color: var(--sd-gold);
}

.sd-streakzeile__text { font-size: 13px; color: var(--sd-fg-2); }

/* Kategorie-Chips auf dem Heute-Tab: ruhige Einstiege in die Bibliothek */
.sd-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 16px -20px 0;
  padding: 0 20px 4px;
  scrollbar-width: none;
}

.sd-chips::-webkit-scrollbar { display: none; }

.sd-chiplink {
  flex: 0 0 auto;
  padding: 9px 15px;
  border: 1px solid rgba(157, 181, 152, .38);
  border-radius: 999px;
  color: var(--sd-sage);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.sd-chiplink:hover, .sd-chiplink:focus-visible {
  background: rgba(157, 181, 152, .14);
  border-color: rgba(157, 181, 152, .5);
}

/* Kachel mit Bild — das Grundelement der Bibliothek */
.sd-tile {
  position: relative;
  display: block;
  border-radius: var(--sd-r-card);
  overflow: hidden;
  background: var(--sd-surface);
  text-decoration: none;
  color: var(--sd-fg);
  aspect-ratio: 16 / 10;
  transition: transform var(--sd-dur-fast) var(--sd-ease);
}

.sd-tile:active { transform: scale(.985); }

.sd-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-tile__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(20, 16, 13, .92) 0%,
              rgba(20, 16, 13, .55) 42%,
              rgba(20, 16, 13, .12) 100%);
}

.sd-tile__body {
  position: absolute;
  inset: auto 0 0;
  padding: 14px;
}

/* display:block, weil beides <span> ist — sonst laufen Titel und Zusatz in
   einer Zeile ineinander. */
.sd-tile__title {
  display: block;
  margin: 0;
  font-family: var(--sd-font-serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
}

.sd-tile__meta {
  display: block;
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--sd-fg-2);
}

.sd-tile--wide { aspect-ratio: 3 / 2; }

/* Kachelraster und waagerechte Reihen */
.sd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 8px;
}

.sd-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Der Rand des Bildschirms soll die Reihe anschneiden, nicht abschneiden —
     das zeigt, dass es weitergeht. Unten der Karten-Rhythmus (14px) — folgt
     eine Abschnitts-Überschrift, gewinnt deren größerer Abstand (Kollaps). */
  margin: 0 -20px 14px;
  padding: 0 20px 4px;
  /* Ohne scroll-padding rastet die erste Kachel am Rand des Scrollbereichs ein
     und schiebt den Innenabstand oben weg — die Reihe startet dann 20px weiter
     links als der übrige Seiteninhalt. Fällt nur auf, sobald eine Reihe
     überläuft (kurze Reihen können nicht scrollen). */
  scroll-padding: 0 20px;
  scrollbar-width: none;
}

.sd-row::-webkit-scrollbar { display: none; }

.sd-row > * {
  flex: 0 0 68%;
  scroll-snap-align: start;
}

/* Serien-Reihe: feste Kartenbreite wie im Mockup, nicht anteilig */
.sd-row--serien > * { flex: 0 0 210px; }
.sd-row--serien .sd-tile--serie { width: 210px; }

/* Storys-Reihe (Traumreisen): breiter als die Meditations-Karten und flacher —
   Hörbuch-Anmutung, damit die andere Gattung schon beim Blättern auffällt. */
.sd-row--storys > * { flex: 0 0 250px; }
.sd-row--storys .sd-tile { width: 250px; aspect-ratio: 5 / 3; }

/* Serien-Karten bringen aus dem Serien-Bereich eine feste Höhe (126px) mit —
   in der Storys-Reihe stünden sie damit niedriger als die Einzelstücke.
   height:auto gibt das Seitenverhältnis oben wieder frei. */
.sd-row--storys .sd-tile--serie { height: auto; }

/* Ersatzbild ohne eigenes Foto — gezeichnete Kaiserberg-Silhouette (render.php) */
.sd-tile__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Serien-Karte (Mockup Screen 2): eine Karte je Serie, quer scrollbar */
.sd-tile--serie {
  flex: 0 0 210px;
  aspect-ratio: auto;
  height: 126px;
}

/* Kleinere Schrift nur in der schmalen Serien-Reihe (210px). In der breiteren
   Storys-Reihe behält die Serien-Karte die normale Kachel-Typografie, sonst
   steht sie neben den gleich großen Einzelstücken kleingedruckt da. */
.sd-row--serien .sd-tile--serie .sd-tile__title { font-size: 16px; }
.sd-row--serien .sd-tile--serie .sd-tile__meta  { font-size: 11.5px; margin-top: 2px; }
.sd-row--serien .sd-tile--serie .sd-tile__body  { padding: 11px 14px; }

/* Bibliotheks-Raster: Bild oben, Text darunter — nicht überlagert */
.sd-lib {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
  margin: 14px 0 8px;
}

.sd-libitem {
  display: block;
  color: var(--sd-fg);
  text-decoration: none;
}

.sd-libitem__thumb {
  position: relative;
  display: block;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sd-surface);
}

.sd-libitem__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-libitem__title {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.sd-libitem__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.sd-dur {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--sd-fg-2);
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}

.sd-cat { font-size: 11px; color: var(--sd-fg-3); }

/* Badge in der Bild-Ecke: Schloss (nur mit Konto) oder Haken (durchgehört) */
.sd-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(20, 16, 13, .66);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-fg);
}

.sd-badge--fertig {
  background: rgba(157, 181, 152, .28);
  color: var(--sd-sage);
}

/* ============================================================
   Listen (Ich-Tab, Artikel)
   ============================================================ */

.sd-rows { margin: 0; padding: 0; list-style: none; }

/* Auf Seitenebene reiht sich eine Zeilenliste in den Karten-Rhythmus ein;
   in Karten (Offline-Liste) bleibt sie randlos. */
.sd-main > .sd-rows { margin-bottom: 14px; }

/* Dasselbe für nackte Formulare auf Seitenebene (Konto: „Auf diesem Gerät
   abmelden") — nur klassenlose, damit z. B. die Suche (.sd-suche, bewusst
   12px unter der Überschrift) ihren eigenen Abstand behält. */
.sd-main > form:not([class]) { margin-bottom: 14px; }

.sd-rows > li + li { border-top: 1px solid var(--sd-line); }

.sd-rowlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  color: var(--sd-fg);
  text-decoration: none;
  font-size: 15px;
}

.sd-rowlink__icon { flex: 0 0 auto; color: var(--sd-fg-2); }
.sd-rowlink__label { flex: 1 1 auto; }
.sd-rowlink__value { color: var(--sd-fg-3); font-size: 14px; }

.sd-rowlink__chev { flex: 0 0 auto; color: var(--sd-fg-3); }

/* Kennzahlen — drei Spalten mit Trennlinien, Zahlen ruhig in Weiß:
   Sand bleibt der Serie vorbehalten (Mockup Screen 5). */
.sd-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.sd-stats > div { border-left: 1px solid var(--sd-line); }
.sd-stats > div:first-child { border-left: 0; }

.sd-stats__num {
  display: block;
  font-family: var(--sd-font-serif);
  font-size: 22px;
  color: var(--sd-fg);
}

.sd-stats__label { font-size: 12px; color: var(--sd-fg-3); }

/* ============================================================
   Bedienelemente
   ============================================================ */

.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: 0;
  border-radius: var(--sd-r-input);
  background: var(--sd-cta);
  color: #fff;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--sd-dur-fast) var(--sd-ease);
}

.sd-btn:hover, .sd-btn:focus-visible { background: var(--sd-cta-dark); }
.sd-btn--wide { width: 100%; }

.sd-btn--quiet {
  background: transparent;
  color: var(--sd-fg-2);
  border: 1px solid var(--sd-line);
}

.sd-btn--quiet:hover, .sd-btn--quiet:focus-visible {
  background: var(--sd-surface-2);
  color: var(--sd-fg);
}

.sd-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-r-input);
  background: var(--sd-surface-2);
  color: var(--sd-fg);
  font: inherit;
}

.sd-input::placeholder { color: var(--sd-fg-3); }
.sd-input:focus-visible { border-color: var(--sd-sage); }

/* Filterleiste */
.sd-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -20px 16px;
  padding: 0 20px;
  scrollbar-width: none;
}

.sd-filters::-webkit-scrollbar { display: none; }

.sd-filter {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: transparent;
  color: var(--sd-fg-2);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.sd-filter.is-active {
  background: rgba(251, 248, 243, .12);
  border-color: transparent;
  color: var(--sd-fg);
  font-weight: 600;
}

/* Play-Knopf */
.sd-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--sd-cta);
  color: #fff;
  cursor: pointer;
  transition: background var(--sd-dur-fast) var(--sd-ease);
}

.sd-play:hover, .sd-play:focus-visible { background: var(--sd-cta-dark); }

/* Fortschritt */
.sd-progress {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(251, 248, 243, .14);
  overflow: hidden;
}

.sd-progress__bar { display: block; height: 100%; background: var(--sd-gold); }

/* Auf einer Kachel (Serien-Karte mit angefangener Folge): Streifen an der
   Unterkante, dasselbe Muster wie die Weiterhören-Karte. */
.sd-tile .sd-progress {
  position: absolute;
  inset: auto 0 0;
  border-radius: 0;
  background: rgba(251, 248, 243, .18);
}

/* Weiterhören-Karte (Mockup Screen 1): Play-Kreis links, Fortschritt als
   schmaler Streifen an der Unterkante der Karte. */
.sd-resume {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 17px;
  margin: 18px 0 0;
  background: var(--sd-surface);
  border-radius: var(--sd-r-card);
  color: var(--sd-fg);
  text-decoration: none;
  overflow: hidden;
}

.sd-resume__body { min-width: 0; }

.sd-resume__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sd-fg-3);
}

.sd-resume__title {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.sd-resume__meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--sd-fg-2);
}

.sd-resume .sd-progress {
  position: absolute;
  inset: auto 0 0;
  border-radius: 0;
  background: rgba(251, 248, 243, .08);
}

/* ============================================================
   Tab-Leiste
   ============================================================ */

.sd-tabs {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--sd-tabs-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(20, 16, 13, .94);
  border-top: 1px solid var(--sd-line);
  backdrop-filter: blur(12px);
}

.sd-tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--sd-fg-3);
  text-decoration: none;
  font-size: 11px;
  transition: color var(--sd-dur-fast) var(--sd-ease);
}

.sd-tab.is-active { color: var(--sd-fg); }

.sd-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sd-cta);
}

/* ============================================================
   Detailseiten und Fließtext
   ============================================================ */

.sd-detail__img {
  display: block;
  width: calc(100% + 40px);
  margin: -20px -20px 18px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================================
   Player
   ============================================================ */

/* Vollflächige Szene hinter dem oberen Drittel (Mockup Screen 3): Bild oder
   gezeichnete Silhouette, die nach unten in den Grund ausläuft. */
.sd-playerart {
  position: absolute;
  inset: 0 0 auto;
  height: 400px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sd-playerart img,
.sd-playerart svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sd-playerart::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(20, 16, 13, .28) 0%,
              rgba(20, 16, 13, .45) 42%,
              var(--sd-bg) 94%);
}

.sd-body--player .sd-topbar { position: relative; z-index: 1; }
.sd-body--player .sd-main   { position: relative; z-index: 1; }

/* Kontext-Label mittig in der Kopfzeile („Feierabend") */
.sd-topbar { position: relative; }

.sd-topbar__ctx {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sd-fg-2);
}

/* Der Player schließt nach unten — der Pfeil zeigt es. */
.sd-back--runter svg { transform: rotate(-90deg); }

/* Titel und Meta mittig über dem Ring */
.sd-player__kopf {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 44px 0 0;
}

.sd-player__kopf .sd-chip { margin-bottom: 10px; }

.sd-player__titel {
  margin: 0;
  padding: 0 12px;
  font-family: var(--sd-font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.sd-player__untertitel {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--sd-fg-2);
}

.sd-player {
  margin: 22px 0 18px;
  text-align: center;
}

/* Das Medienelement trägt die Wiedergabe, zeigt sich aber nur, solange
   JavaScript die eigene Oberfläche noch nicht übernommen hat. So bleibt die
   Seite ohne Skripte bedienbar, ohne dass am Ende zwei Player dastehen. */
#sd-audio {
  width: 100%;
  margin-bottom: 14px;
  border-radius: var(--sd-r-input);
}

.sd-js #sd-audio { display: none; }

.sd-player__ring {
  position: relative;
  width: 172px;
  height: 172px;
  margin: 0 auto;
}

/* Nur das direkte Kind: Der Abspiel-Knopf liegt ebenfalls in diesem Element,
   und seine Symbole sollen ihre eigene Größe behalten. */
.sd-player__ring > svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* Start des Rings oben, nicht rechts */
}

.sd-ring__bg,
.sd-ring__bar {
  fill: none;
  stroke-width: 3;
}

.sd-ring__bg { stroke: rgba(251, 248, 243, .13); }

.sd-ring__bar {
  stroke: var(--sd-gold);
  stroke-linecap: round;
  stroke-dasharray: 339.292;    /* 2 · π · 54 */
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 200ms linear;
}

.sd-player__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  border: 0;
  border-radius: 50%;
  background: var(--sd-cta);
  color: #fff;
  cursor: pointer;
  transition: background var(--sd-dur-fast) var(--sd-ease),
              transform var(--sd-dur-fast) var(--sd-ease);
}

.sd-player__play:hover,
.sd-player__play:focus-visible { background: var(--sd-cta-dark); }
.sd-player__play:active { transform: translate(-50%, -50%) scale(.96); }

/* Das Abspiel-Dreieck sitzt optisch links, wenn es geometrisch zentriert ist. */
.sd-player__play .sd-ic-play { margin-left: 4px; }
.sd-player__play .sd-ic-pause { display: none; }
.sd-player__play.is-playing .sd-ic-play { display: none; }
.sd-player__play.is-playing .sd-ic-pause { display: block; }

/* Ring, flankiert von −15 s / +15 s (Mockup Screen 3) */
.sd-ringzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.sd-skip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--sd-fg-2);
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--sd-dur-fast) var(--sd-ease);
}

.sd-skip:hover, .sd-skip:focus-visible { color: var(--sd-fg); }

/* Zeitleiste unter dem Ring: Balken in Sand, Zeiten beidseitig */
.sd-timeline {
  max-width: 320px;
  margin: 14px auto 0;
  padding: 0 6px;
}

.sd-timeline__hit { padding: 10px 0; cursor: pointer; }

.sd-timeline__track {
  height: 3px;
  border-radius: 2px;
  background: rgba(251, 248, 243, .12);
}

.sd-timeline__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--sd-gold);
}

.sd-timeline__zeiten {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--sd-fg-2);
  font-variant-numeric: tabular-nums;
}

/* Aktionszeile: Favorit, Mixer, Einschlaf-Zeit, Laden */
.sd-pactions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.sd-paction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 66px;
  padding: 9px 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--sd-fg-2);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color var(--sd-dur-fast) var(--sd-ease), background var(--sd-dur-fast) var(--sd-ease);
}

.sd-paction:hover, .sd-paction:focus-visible { color: var(--sd-fg); }

.sd-paction.is-an {
  background: rgba(157, 181, 152, .13);
  color: var(--sd-sage);
}

/* Favorit gesetzt: Sand, nicht Terracotta — es ist eine Auszeichnung,
   keine Handlung (siehe Farbrollen oben). */
.sd-paction--fav.is-an {
  background: rgba(217, 183, 122, .12);
  color: var(--sd-gold);
}

.sd-paction--fav.is-an svg { fill: currentColor; }

.sd-player__msg {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--sd-sage);
}

/* Klang-Mixer und Einschlaf-Zeit — aufklappbar, weil beides selten gebraucht
   wird und der Player sonst zur Schaltzentrale würde. Gestaltet wie das
   Mixer-Sheet im Mockup; mit JavaScript öffnen es die Aktionsknöpfe, ohne
   bleibt die Zusammenfassungszeile bedienbar. */
.sd-sheet {
  margin-top: 20px;
  padding: 10px 20px 8px;
  background: var(--sd-surface);
  border-radius: 22px;
  text-align: left;
}

.sd-sheet__griff {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(251, 248, 243, .18);
  margin: 0 auto 12px;
}

.sd-sheet__titel {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

.sd-js .sd-sheet > summary { display: none; }

/* Mit JavaScript öffnen die Aktionsknöpfe das Sheet — zusammengeklappt wäre
   der leere Kasten nur ein Fleck im Player. */
.sd-js .sd-sheet:not([open]) { display: none; }

.sd-sheet > summary {
  padding: 14px 0;
  color: var(--sd-fg-2);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.sd-sheet > summary::-webkit-details-marker { display: none; }

.sd-sheet > summary::after {
  content: "";
  float: right;
  width: 8px;
  height: 8px;
  margin: 6px 4px 0 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--sd-dur-fast) var(--sd-ease);
}

.sd-sheet[open] > summary::after { transform: rotate(-135deg); }

/* Sound-Chips im Mixer: welcher Klang läuft unter der Stimme */
.sd-soundchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 16px;
}

.sd-schip {
  padding: 8px 13px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: none;
  color: var(--sd-fg-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.sd-schip.is-an {
  background: rgba(157, 181, 152, .16);
  border-color: rgba(157, 181, 152, .5);
  color: var(--sd-sage);
  font-weight: 600;
}

.sd-field { padding-bottom: 16px; }

.sd-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--sd-fg-2);
}

/* Regler-Beschriftung wie im Mockup: Name links, Prozent rechts */
.sd-field__zeile {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 11.5px;
  color: var(--sd-fg-2);
}

.sd-field input[type="range"] {
  width: 100%;
  accent-color: var(--sd-gold);
}

.sd-prose { color: var(--sd-fg-2); }

.sd-prose h2,
.sd-prose h3 {
  margin: 28px 0 10px;
  font-family: var(--sd-font-serif);
  font-weight: 400;
  color: var(--sd-fg);
}

.sd-prose h2 { font-size: 21px; }
.sd-prose h3 { font-size: 18px; }

.sd-prose p { margin: 0 0 15px; }

.sd-prose a { color: var(--sd-sage); text-decoration: underline; }

.sd-prose ul,
.sd-prose ol { margin: 0 0 15px; padding-left: 22px; }

.sd-prose li { margin-bottom: 6px; }

.sd-prose strong { color: var(--sd-fg); font-weight: 600; }

.sd-prose blockquote {
  margin: 20px 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--sd-gold);
  color: var(--sd-fg);
  font-family: var(--sd-font-serif);
  font-size: 18px;
}

.sd-prose img { max-width: 100%; height: auto; border-radius: var(--sd-r-card); }

.sd-prose hr { border: 0; border-top: 1px solid var(--sd-line); margin: 26px 0; }

/* Suchfeld mit Lupe (Mockup Screen 2) */
.sd-suche {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 14px;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-r-input);
  background: rgba(251, 248, 243, .05);
  color: var(--sd-fg-3);
}

.sd-suche:focus-within { border-color: var(--sd-sage); }

.sd-suche svg { flex: 0 0 auto; }

.sd-suche .sd-input {
  border: 0;
  background: transparent;
  padding: 12px 0;
}

.sd-suche .sd-input:focus-visible { outline: none; }

.sd-form { margin-bottom: 18px; }

/* Honigtopf: für Menschen unsichtbar, aber nicht per display:none — manche
   Roboter erkennen das und lassen das Feld dann gerade leer. */
.sd-falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sd-input--kurz { max-width: 140px; }

/* Wochentage der Erinnerung — kleine Schalter statt einer Liste */
.sd-tage {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.sd-tag { cursor: pointer; }

.sd-tag input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sd-tag span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 7px 8px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--sd-fg-3);
}

.sd-tag input:checked + span {
  background: rgba(157, 181, 152, .16);
  border-color: transparent;
  color: var(--sd-sage);
}

.sd-tag input:focus-visible + span {
  outline: 2px solid var(--sd-gold);
  outline-offset: 2px;
}

.sd-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--sd-fg-2);
  cursor: pointer;
}

.sd-check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--sd-sage);
}

/* Artikel-Zeilen im Lesen-Tab: kleines Bild links, zwei Zeilen Text */
.sd-artrows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0 8px;
}

.sd-artrow {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--sd-fg);
  text-decoration: none;
}

.sd-artrow__thumb {
  position: relative;
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sd-surface);
}

.sd-artrow__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-artrow__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.sd-artrow__meta {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--sd-fg-3);
}

/* Kompakte Coaching-Karte (Mockup Screen 4): der leise Weg ins Erstgespräch */
.sd-ctacard {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 14px;
  padding: 15px 16px;
  background: rgba(200, 104, 74, .13);
  border: 1px solid rgba(200, 104, 74, .4);
  border-radius: var(--sd-r-card);
  color: var(--sd-fg);
  text-decoration: none;
}

.sd-ctacard__eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E09A80;
}

.sd-ctacard__titel {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
}

.sd-ctacard__meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--sd-fg-2);
}

.sd-ctacard__pfeil {
  margin-left: auto;
  flex: 0 0 auto;
  color: #E09A80;
}

/* Ich-Tab: die Serie ist die einzige große Zahl (Mockup Screen 5) */
.sd-mehead {
  text-align: center;
  padding: 6px 0 2px;
  margin-bottom: 16px;
}

.sd-mehead__zahl {
  display: block;
  font-family: var(--sd-font-serif);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--sd-gold);
}

.sd-mehead__sub {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--sd-fg-2);
}

/* Anmelde-Karte auf Papier-Grund (Mockup Screen 6): das einzige helle
   Element der App — das Konto gehört zur Website-Welt, nicht zur Nacht. */
.sd-paper {
  background: #FBF8F3;
  color: #1E1A16;
  border-radius: var(--sd-r-sheet);
  padding: 12px 24px 26px;
  margin-bottom: 14px;
}

.sd-paper__griff {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #D8CFBE;
  margin: 0 auto 18px;
}

.sd-paper h2 {
  margin: 0 0 8px;
  font-family: var(--sd-font-serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #1E1A16;
}

.sd-paper p { color: #4A4238; }

.sd-paper .sd-input {
  background: #fff;
  border: 1.5px solid #D8CFBE;
  color: #1E1A16;
}

.sd-paper .sd-input::placeholder { color: #8A7F72; }

.sd-paper .sd-field label { color: #4A4238; }

.sd-paper__fein {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8A7F72;
  text-align: center;
}

.sd-paper__alt {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: #4E6D4E;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sd-note { border-left: 2px solid var(--sd-sage); }
.sd-note--warnung { border-left-color: var(--sd-cta); }

.sd-card--rand { border: 1px solid var(--sd-line); }

.sd-coach { border: 1px solid rgba(200, 104, 74, .35); }

/* ============================================================
   Sonstiges
   ============================================================ */

.sd-empty {
  padding: 28px 4px;
  color: var(--sd-fg-3);
  text-align: center;
}

.sd-zentriert { text-align: center; }

/* ============================================================
   Sheet von unten (Installations-Angebot)
   ============================================================ */

.sd-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sd-modal__grund {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 13, .55);
}

.sd-modal__griff {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(251, 248, 243, .18);
  margin: 0 auto 16px;
}

.sd-modal__sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  background: var(--sd-surface);
  border-radius: var(--sd-r-sheet) var(--sd-r-sheet) 0 0;
  /* „forwards", nicht „both": Der Startwert der Animation verschiebt das Sheet
     nach unten. Würde er auch vor dem Start gehalten (das täte „backwards"),
     stünde das Sheet schief, sobald die Animation nicht wirklich durchläuft —
     pausierter Compositor, Hintergrund-Tab, angehaltene Bewegung. So ist die
     Ruhelage immer die richtige, und die Bewegung ist reine Zugabe. */
  animation: sd-hoch var(--sd-dur-base) var(--sd-ease) forwards;
}

@keyframes sd-hoch {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sd-modal-offen { overflow: hidden; }

.sd-install__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.sd-install__icon { border-radius: 13px; }

.sd-install__name {
  margin: 0;
  font-family: var(--sd-font-serif);
  font-size: 17px;
}

.sd-install__host {
  margin: 0;
  font-size: 13px;
  color: var(--sd-fg-3);
}

.sd-install__schritte {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--sd-fg-2);
  font-size: 15px;
}

.sd-install__schritte li { margin-bottom: 8px; }
.sd-install__schritte svg { vertical-align: -3px; }

.sd-install__spaeter { margin: 16px 0 0; text-align: center; }

.sd-linkbtn {
  border: 0;
  background: none;
  padding: 6px;
  color: var(--sd-fg-2);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.sd-linkbtn:hover, .sd-linkbtn:focus-visible { color: var(--sd-fg); }

/* Hinweis auf eine neue Fassung — sitzt über der Tab-Leiste und drängt sich
   nicht auf. Ungefragt neu laden käme nicht in Frage: mitten in einer
   Meditation wäre das ein Übergriff. */
.sd-update {
  position: fixed;
  z-index: 30;
  left: 12px;
  right: 12px;
  bottom: calc(var(--sd-tabs-h) + env(safe-area-inset-bottom) + 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-r-card);
  font-size: 14px;
  color: var(--sd-fg-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.sd-update__btn {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--sd-r-input);
  background: var(--sd-cta);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.sd-divider { height: 1px; background: var(--sd-line); margin: 24px 0; }

:focus-visible {
  outline: 2px solid var(--sd-gold);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .sd-grid { grid-template-columns: repeat(3, 1fr); }
  .sd-row > * { flex-basis: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Bewegung: Sheet, Favorit, Druck-Feedback
   (prefers-reduced-motion wird oben global auf ~0 gedreht)
   ============================================================ */

/* Sheet: faltet sich sanft auf und zu. Ein <details> bekommt beim Zuklappen
   schlagartig Höhe null — der Inhalt darunter würde hochspringen. Deshalb
   animiert js/player.js die Höhe von Hand (inline height + .is-anim/.is-zu)
   und klappt erst nach dem Ende der Bewegung wirklich zu. */
.sd-js .sd-sheet[open] { animation: sd-sheet-auf var(--sd-dur-base) var(--sd-ease); }

@keyframes sd-sheet-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Beim Auffalten wird nur die Höhe bewegt … */
.sd-js .sd-sheet.is-anim {
  overflow: hidden;
  transition: height 300ms var(--sd-ease);
}

/* … beim Zufalten zusätzlich Abstand, Innenraum und Deckkraft. */
.sd-js .sd-sheet.is-zu {
  animation: none;
  overflow: hidden;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: height 300ms var(--sd-ease), margin-top 300ms var(--sd-ease),
              padding 300ms var(--sd-ease), opacity 240ms var(--sd-ease);
}

/* Griff + Titel sind die Schließfläche: Tipp oder Wisch nach unten.
   touch-action:none, damit der Wisch dem Sheet gehört, nicht dem Scrollen. */
.sd-sheet__kopf { cursor: pointer; touch-action: none; }

.sd-sheet__zu {
  display: block;
  width: 100%;
  margin: 2px 0 10px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(251, 248, 243, .07);
  color: var(--sd-fg-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--sd-dur-fast) var(--sd-ease), color var(--sd-dur-fast) var(--sd-ease);
}
.sd-sheet__zu:hover, .sd-sheet__zu:focus-visible { background: rgba(251, 248, 243, .12); color: var(--sd-fg); }
.sd-sheet__zu[hidden] { display: none; }

/* Das Herz freut sich kurz, wenn es gedrückt wird. */
@keyframes sd-fav-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.sd-paction--fav.is-an svg { animation: sd-fav-pop 340ms var(--sd-ease); }

/* Druck-Feedback auf den kleinen Bedienelementen — die Kacheln haben es schon.
   Der Play-Knopf bekommt KEINEN Scale hier: Er ist per translate zentriert,
   ein nacktes transform:scale würde ihn aus der Mitte springen lassen
   (sein sanfter Druck steht beim Player, seine Antwort ist die Welle unten). */
.sd-paction:active, .sd-skip:active { transform: scale(.94); }
.sd-schip:active, .sd-chiplink:active { transform: scale(.96); }

/* Wasserwellen vom Play-Knopf: Beim Drücken laufen zwei terracottafarbene
   Ringe vom Knopfrand nach außen und verblassen — js/player.js erzeugt sie. */
.sd-welle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sd-cta);
  opacity: 0;
  pointer-events: none;
  animation: sd-welle 750ms ease-out forwards;
}

@keyframes sd-welle {
  0%   { transform: scale(.68); opacity: .55; border-width: 3px; }
  100% { transform: scale(1.45); opacity: 0; border-width: 1px; }
}

/* Der Punkt unterm aktiven Tab wächst beim Seitenwechsel kurz heran. */
.sd-tab.is-active::after { animation: sd-punkt 260ms var(--sd-ease); }
@keyframes sd-punkt { from { transform: scale(0); } }

/* Kurze Seiten scrollen nicht: Passt der Inhalt auch ohne das Tab-Leisten-
   Polster auf den Schirm, setzt js/app.js .sd-kurz auf den Body und das
   Polster entfällt — sonst ließe sich jede Seite um Polsterhöhe ins Leere
   schieben. Der Safe-Area-Anteil bleibt, der gehört dem Gerät. */
.sd-kurz .sd-main--tabs {
  padding-bottom: calc(var(--sd-tabs-h) + env(safe-area-inset-bottom));
}

/* ============================================================
   Seitenwechsel: weiche Blende, Player als Drawer
   (Cross-Document View Transitions — Browser ohne Unterstützung
   behalten den harten Schnitt, es geht nichts kaputt)
   ============================================================ */

/* Jeder interne Seitenwechsel blendet weich über. Die Tab-Leiste sieht auf
   beiden Seiten gleich aus und blendet damit unsichtbar über sich selbst —
   nur der Punkt unterm aktiven Tab wechselt sanft. */
@view-transition { navigation: auto; }

/* Der Player ist die Bühne der App: Er schiebt sich wie ein Drawer von unten
   über die aufrufende Seite und fährt beim Verlassen wieder hinunter. Der
   Name existiert nur auf der Player-Seite — deshalb gibt es beim Öffnen nur
   das „neue" Abbild (Einfahren) und beim Verlassen nur das „alte" (Ausfahren).
   Die Seite darunter dunkelt währenddessen über die Standard-Blende ab. */
.sd-body--player { view-transition-name: sd-player; }

/* „both" hält die Endlage fest, bis der Browser die Transition abräumt —
   ohne fill-mode springt das Abbild nach der letzten Animations-Millisekunde
   auf seinen Grundzustand zurück und der Player blitzt vollflächig auf. */
::view-transition-new(sd-player) {
  animation: sd-player-rein 380ms cubic-bezier(.32, .72, .28, 1) both;
}
::view-transition-old(sd-player) {
  animation: sd-player-raus 280ms cubic-bezier(.55, .06, .68, .19) both;
}
@keyframes sd-player-rein { from { transform: translateY(100%); } }
@keyframes sd-player-raus { to   { transform: translateY(100%); } }

/* Die globale Reduced-Motion-Regel erreicht die ::view-transition-Ebene
   nicht — hier ausdrücklich: sofortiger Wechsel statt Bewegung. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Ferndiagnose: Seite mit #polster öffnen, js/app.js füllt das Overlay. */
.sd-debug {
  position: fixed;
  top: 4px;
  left: 4px;
  z-index: 9999;
  margin: 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, .75);
  color: var(--sd-sage, #9DB598);
  font: 11px/1.5 monospace;
  white-space: pre;
  pointer-events: none;
}