/* ============================================================================
   Team Tropsch, Landingpages Geschenkbox
   Ein Stylesheet für alle fünf Seiten. Kein Build-Schritt, kein JavaScript.

   Gestaltungsordnung (Stand 15.09.2026):
   1. Farbe    Petrol #009BB1 ist die Marke. Für Text und Bedienelemente auf
               Weiß gilt #00788C (5,2:1), für die Bühne oben #00596B (weiß
               darauf 7,95:1). Sand/Beige ist die zweite Fläche, nie Textfarbe.
   2. Abstand  Alles steht auf einem 4-px-Raster (--r-1 … --r-20). Zwischen
               zwei Bausteinen steht nie ein frei erfundener Wert.
   3. Form     Genau drei Rundungen: --radius-s für kleine Flächen, --radius
               für Karten, --radius-l für große Flächen. Rund ist nur, was
               man antippt (Knöpfe, Nummern).
   4. Schatten immer petrolfarben getönt, nie schwarz.
   5. Bewegung nur als Rückmeldung auf Tippen und Zeigen. Nichts bewegt sich
               von allein, nichts wird beim Scrollen eingeblendet.
   ========================================================================= */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Farbe */
  --petrol-50:  #F3FAFC;
  --petrol-100: #E4F4F8;
  --petrol-200: #C9E9F0;
  --petrol-300: #7FD3E2;
  --petrol-500: #009BB1;   /* Markenton, Flächen und große Ziffern */
  --petrol-600: #00879B;
  --petrol-700: #00788C;   /* Text, Links, Knöpfe auf Weiß */
  --petrol-800: #00596B;   /* Bühne oben */
  --petrol-900: #003F4D;
  --sand-50:  #FAF7F4;
  --sand-100: #F2E9DF;     /* Hinweisfläche, hebt sich vom Papier ab */
  --sand-200: #EBE0D5;
  --beige:    #BFAB9C;
  --tinte:    #20262A;     /* Fußzeile */
  --text:     #2B2E31;
  --text-2:   #5B6166;
  --linie:    #E4DFD9;     /* Kontur auf Papier, leicht warm wie der Grund */
  --weiss:    #FFFFFF;
  /* Der Seitengrund ist kein Weiß. Weiße Karten auf weißem Grund existieren
     nur durch ihren Schatten; auf Papier tragen sie von selbst und der
     Schatten darf zurückgenommen werden. */
  --papier:   #F5F3F0;

  /* Abstand, 4-px-Raster */
  --r-1: 0.25rem;  --r-2: 0.5rem;   --r-3: 0.75rem;  --r-4: 1rem;
  --r-5: 1.25rem;  --r-6: 1.5rem;   --r-8: 2rem;     --r-10: 2.5rem;
  --r-12: 3rem;    --r-16: 4rem;    --r-20: 5rem;
  --sektion: clamp(3rem, 7vw, 5rem);       /* Luft zwischen zwei Abschnitten */
  --kopfhoehe: 4.5rem;                      /* für scroll-padding, siehe html */

  /* Form */
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;

  /* Schatten, petrolfarben getönt */
  --schatten-1: 0 1px 2px rgba(0, 63, 77, 0.04), 0 2px 8px rgba(0, 63, 77, 0.035);
  --schatten-2: 0 2px 6px rgba(0, 63, 77, 0.06), 0 10px 26px rgba(0, 63, 77, 0.07);
  --schatten-3: 0 4px 10px rgba(0, 63, 77, 0.07), 0 22px 50px rgba(0, 63, 77, 0.12);

  --inhalt: 800px;      /* Lesebreite */
  --breit: 1180px;      /* Bühne und Gitter */
  --uebergang: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der Kopf klebt oben: ohne diesen Wert verschwindet jede angesprungene
     Überschrift dahinter. */
  scroll-padding-top: calc(var(--kopfhoehe) + var(--r-4));
}

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;          /* 17 px, gut lesbar für jedes Alter */
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* Trennung nur bei wirklich langen Wörtern: sonst stehen auf dem Handy
     fünf Trennstriche in einem Absatz. */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 9 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  overflow-wrap: break-word;
}

::selection { background: var(--petrol-200); color: var(--petrol-900); }

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

/* ---- Typografie ---------------------------------------------------------- */

h1, h2, h3 {
  line-height: 1.16;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.25rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); }
h3 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--petrol-700); font-weight: 700; }
strong, b { font-weight: 700; }

a {
  color: var(--petrol-700);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--uebergang);
}
a:hover { color: var(--petrol-900); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--petrol-700);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Angesprungenes Ziel kurz kenntlich machen: nach dem Tippen in der
   Sprungliste soll sichtbar sein, wo man gelandet ist. */
:target { scroll-margin-top: calc(var(--kopfhoehe) + var(--r-4)); }

.container { width: min(100% - 2.5rem, var(--inhalt)); margin-inline: auto; }
.container-breit { width: min(100% - 2.5rem, var(--breit)); margin-inline: auto; }

/* Sprung zum Inhalt, sichtbar sobald er den Fokus hat */
.sprung-inhalt {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--weiss);
  color: var(--petrol-700);
  font-weight: 600;
  padding: var(--r-3) var(--r-5);
  border-radius: 0 0 var(--radius-s) 0;
  box-shadow: var(--schatten-2);
}
.sprung-inhalt:focus { left: 0; }

/* ---- Kopf ----------------------------------------------------------------
   Das vorliegende Logo trägt weißes „tropsch" auf Transparenz, braucht also
   farbigen Grund. Kopf und Bühne bilden deshalb einen zusammenhängenden
   Petrolblock; der Kopf bleibt beim Scrollen oben stehen.               */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Kopf und Bühne sind ein durchgehender Block: eine hellere Leiste darüber
     erzeugt eine sichtbare Farbkante. Das Logo wird dafür einfarbig weiß
     gefiltert, sonst fiele sein schwarzes „team“ hier auf 2,8:1. */
  background: var(--petrol-800);
  padding: var(--r-3) 0;
}
.kopf .container,
.kopf .container-breit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r-4);
  min-height: 3rem;
}
.kopf a.marke { display: inline-block; line-height: 0; }
.kopf img {
  height: 50px;
  width: auto;
  /* Negativversion aus der vorliegenden Datei erzeugt: alles Weiß. Kommt die
     finale Logo-Datei, ersetzt sie Bild und Filter. */
  filter: brightness(0) invert(1);
}
@media (min-width: 720px) { .kopf img { height: 62px; } }

.kopf .kopf-link {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  min-height: 44px;
  /* Weiß auf dem dunklen Petrol des Kopfes sind 7,9:1, der Umriss bleibt
     ruhiger als eine weiße Fläche. Tippfläche 44 px. */
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: var(--weiss);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  line-height: 1.3;
  white-space: nowrap;
  padding: var(--r-2) var(--r-4);
  border-radius: 999px;
  transition: background var(--uebergang), color var(--uebergang);
}
.kopf .kopf-link:hover { background: var(--weiss); border-color: var(--weiss); color: var(--petrol-800); }
.kopf .kopf-link:focus-visible { outline-color: var(--weiss); }

/* ---- Bühne (Einstieg) ----------------------------------------------------- */

.einstieg {
  position: relative;
  overflow: hidden;           /* beschneidet die Bögen, nicht die Sprungkarte:
                                 die liegt hinter </section> */
  background:
    radial-gradient(90% 110% at 92% -20%, rgba(0, 155, 177, 0.30) 0%, rgba(0, 155, 177, 0) 62%),
    linear-gradient(168deg, var(--petrol-800) 0%, var(--petrol-900) 100%);
  color: var(--weiss);
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(3.5rem, 9vw, 5.5rem);
}
/* Zwei konzentrische Bögen nehmen den Schwung der Logo-Figur auf und geben
   der Fläche Tiefe. Bewusst so schwach, dass sie den Kontrast des Textes
   nicht antasten (nachgemessen unter Glyphenmaske). */
.einstieg::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -18vw;
  top: -42vw;
  width: 82vw;
  height: 82vw;
  min-width: 460px;
  min-height: 460px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 0 14vw rgba(255, 255, 255, 0.018);
  pointer-events: none;
}
.einstieg::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -26vw;
  bottom: -54vw;
  width: 74vw;
  height: 74vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.einstieg > .container,
.einstieg > .container-breit { position: relative; z-index: 1; }
.einstieg h1 { color: var(--weiss); margin-bottom: var(--r-4); }
.einstieg .vorspann {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  color: #D6EDF3;
  max-width: 58ch;
  margin-bottom: 0;
}
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: var(--r-2);
  width: fit-content;          /* im Gitter der Bühne sonst über die Spalte gezogen */
  margin: 0 0 var(--r-5);
  padding: var(--r-1) var(--r-3) var(--r-1) var(--r-2);
  border-radius: 999px;
  background: rgba(0, 45, 56, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--weiss);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}
.hero-label svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 1000px) {
  .einstieg .container:has(.fakten) {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr);
    column-gap: var(--r-16);
    align-items: start;
  }
  .einstieg .container:has(.fakten) > .hero-label,
  .einstieg .container:has(.fakten) > h1,
  .einstieg .container:has(.fakten) > .vorspann { grid-column: 1; }
  .einstieg .container:has(.fakten) > .fakten {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    grid-template-columns: 1fr;
    margin-top: 0;
  }
}

/* Eckdaten als EINE Tafel, nicht als drei lose Kacheln. Drei Kästen mit je
   eigenem Rahmen werden verschieden hoch und lesen sich wie ein Rasterfehler;
   eine Tafel mit Trennlinien hat eine Kante und eine Ordnung. */
.fakten {
  list-style: none;
  padding: 0;
  margin: var(--r-8) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(2px);
}
.fakten li {
  margin: 0;
  padding: var(--r-4) var(--r-5);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--weiss);
}
.fakten li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.fakten span {
  display: block;
  margin-bottom: var(--r-1);
  color: #CFEBF2;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fakten strong { font-weight: 600; }
/* Zwischen 560 und 1000 px steht die Tafel unter dem Text und darf sich in
   die Breite legen; die Trennlinien wandern dann auf die Senkrechte. */
@media (min-width: 620px) and (max-width: 999px) {
  .fakten { grid-template-columns: repeat(3, 1fr); }
  .fakten li + li { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); }
}

/* ---- Sprungliste: Karte, die in die Bühne hineinragt ---------------------- */

.sprungliste {
  position: relative;
  z-index: 2;
  margin-top: clamp(-3.5rem, -6vw, -2rem);
  /* Sprungliste und Sicherheitshinweis gehören zum Einstieg und stehen enger
     beieinander als vor dem ersten Inhaltsblock. Überall derselbe Abstand
     ergibt eine Kette gleich weit entfernter Kästen ohne Gruppen. */
  margin-bottom: var(--r-10);
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten-3);
  padding: var(--r-6) var(--r-5) var(--r-5);
}
@media (min-width: 720px) { .sprungliste { padding: var(--r-8) var(--r-8) var(--r-6); } }
.sprungliste h2 {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-2);
  margin-bottom: var(--r-4);
}
/* Marken statt Zeilenraster. Zehn Zeilen mit je einer Trennlinie darunter
   sind der bequemste und der schwächste Weg: sie erzeugen ein Formular-
   gefühl und kosten auf dem Handy 480 px, bevor die erste Übung kommt.
   Als Marken im Fluss bleibt die Tippfläche bei 44 px und der Block wird
   rund ein Drittel kürzer. */
.sprungliste ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-2) var(--r-3);
}
.sprungliste li { margin: 0; display: flex; }
.sprungliste a {
  display: inline-flex;
  gap: var(--r-2);
  align-items: center;
  min-height: 44px;
  padding: var(--r-2) var(--r-4) var(--r-2) var(--r-2);
  border-radius: 999px;
  background: var(--petrol-50);
  border: 1px solid var(--petrol-200);
  color: var(--text);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}
.sprungliste a:hover {
  background: var(--petrol-100);
  border-color: var(--petrol-300);
  color: var(--petrol-900);
}
.sprungliste b {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--weiss);
  border: 1px solid var(--petrol-200);
  color: var(--petrol-700);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* Titelbild der Schlaftipp-Seite, ebenfalls in die Bühne gezogen */
.titelbild {
  position: relative;
  z-index: 2;
  margin-top: clamp(-3.5rem, -6vw, -2rem);
  margin-bottom: var(--sektion);
}
/* 16:8 ergab auf dem Desktop eine 400 px hohe leere Fläche direkt unter der
   Bühne: die erste Bildschirmhöhe nach dem Einstieg war ein Loch. Ein
   flacheres Format zeigt dieselbe Bildstelle an. */
/* Kein max-height: bei gesetztem Seitenverhältnis begrenzt eine Höhengrenze
   die BREITE mit, das Bild wird schmaler als sein Kasten und es steht rechts
   eine Leerfläche, die wie ein Rasterfehler aussieht. Die Höhe kommt allein
   aus dem Seitenverhältnis. */
.titelbild .platzhalter {
  aspect-ratio: 32 / 9;
  box-shadow: var(--schatten-3);
  border-radius: var(--radius);
}

/* ---- Hinweiskasten -------------------------------------------------------- */

.hinweis {
  display: flex;
  gap: var(--r-4);
  background: var(--sand-100);
  border-radius: var(--radius);
  padding: var(--r-5);
  margin: 0 0 var(--sektion);
  font-size: 1rem;
  line-height: 1.6;
}
.hinweis::before {
  content: "";
  flex: 0 0 4px;
  border-radius: 999px;
  background: var(--beige);
}
.hinweis p:last-child { margin-bottom: 0; }

/* ---- Übungen und Rezepte als Karten --------------------------------------- */

.uebung,
.rezept {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-1);
  padding: var(--r-5);
  margin-bottom: var(--r-6);
  scroll-margin-top: calc(var(--kopfhoehe) + var(--r-4));
  transition: box-shadow var(--uebergang), border-color var(--uebergang);
}
@media (min-width: 720px) {
  .uebung, .rezept { padding: var(--r-8); margin-bottom: var(--r-8); }
}
.uebung:target,
.rezept:target,
.tipp:target { border-color: var(--petrol-300); box-shadow: var(--schatten-2); }
.uebung:last-of-type,
.rezept:last-of-type { margin-bottom: var(--sektion); }

.uebung-kopf {
  display: flex;
  align-items: center;
  gap: var(--r-4);
  margin-bottom: var(--r-5);
}
.uebung-kopf h2 { margin: 0; font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem); }

/* Die Nummer ist überall dieselbe Form: Kreis in dunklem Petrol mit hellem
   Ring. Weiß auf hellem Petrol erreicht nur 3,3:1 und trägt eine 18-px-Ziffer
   nicht. */
.nummer {
  flex: 0 0 auto;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 999px;
  background: linear-gradient(150deg, var(--petrol-600), var(--petrol-800));
  box-shadow: 0 0 0 5px var(--petrol-50), 0 6px 14px rgba(0, 63, 77, 0.18);
  color: var(--weiss);
  font-weight: 700;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}

.medien { display: grid; gap: var(--r-3); margin-bottom: var(--r-5); }
/* Nur im mittleren Bereich stehen Foto und Video nebeneinander. Darunter ist
   kein Platz, darüber steht die Anleitung daneben und die Medienspalte ist
   schmal. */
@media (min-width: 720px) and (max-width: 999px) {
  .medien.mit-video { grid-template-columns: 3fr 2fr; align-items: stretch; gap: var(--r-4); }
  .medien.mit-video .platzhalter { aspect-ratio: 3 / 2; }
  .medien.mit-video .platzhalter.video { aspect-ratio: auto; height: 100%; display: grid; place-content: center; text-align: center; padding: var(--r-4); }
  .medien.mit-video .platzhalter.video svg { margin: 0 auto var(--r-2); width: 34px; height: 34px; }
  .medien.mit-video .platzhalter.video b { margin-bottom: var(--r-1); }
}

/* Ab 1000 px trägt die Karte zwei Spalten: links die Bildstelle, rechts die
   Anleitung. Vorher stapelten sich Foto und Video über dem ersten Satz und
   eine Übung war rund 700 px hoch, davon die Hälfte Leerfläche. */
@media (min-width: 1000px) {
  .uebung {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--r-10);
    align-items: start;
  }
  .uebung > .uebung-kopf { grid-column: 1 / -1; }
  .uebung > .medien { grid-column: 1; margin-bottom: 0; }
  .uebung > .anleitung { grid-column: 2; }
}

/* Platzhalter: klar als Leerstelle erkennbar, aber gestaltet statt grau.
   Wird später gegen <img> oder <video> getauscht. */
.platzhalter {
  margin: 0;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, rgba(0, 155, 177, 0.05) 0 12px, rgba(0, 155, 177, 0) 12px 24px),
    var(--petrol-50);
  border: 1px dashed var(--petrol-300);
  border-radius: var(--radius-s);
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--r-4);
  /* Nicht --text-2: auf dem getönten Grund der Platzhalter erreicht es nur
     3,9 bis 4,4:1 (nachgemessen unter Glyphenmaske). Auf Weiß wären es
     6,3:1 gewesen, deshalb fällt es ohne Messung nicht auf. */
  color: #464C50;
}
/* Der Videokasten ist überall eine Zeile. Als zweite große Fläche neben dem
   Foto verdoppelt er nur die Leerstelle; als Zeile sagt er dasselbe. */
.platzhalter.video {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  gap: var(--r-3);
  text-align: left;
  padding: var(--r-3) var(--r-4);
  background:
    repeating-linear-gradient(135deg, rgba(191, 171, 156, 0.13) 0 12px, rgba(191, 171, 156, 0) 12px 24px),
    var(--sand-50);
  border-color: var(--beige);
}
.platzhalter.video svg { margin: 0; flex: 0 0 auto; width: 26px; height: 26px; }
.platzhalter.video b { margin-bottom: 0; }
.platzhalter b { display: block; color: var(--text); font-weight: 700; margin-bottom: var(--r-1); }
.platzhalter small { font-size: 0.875rem; }
.platzhalter svg { width: 34px; height: 34px; margin: 0 auto var(--r-2); fill: none; stroke: var(--petrol-600); stroke-width: 1.6; }
.platzhalter.video svg { stroke: #9A8574; }

/* Anleitung: drei Blöcke je Übung, immer untereinander. Dreispaltig zerfiel
   die Anleitung in drei verschieden lange Säulen, deren kürzeste ein Wort
   war; gelesen wird sie ohnehin von oben nach unten. */
.anleitung { display: grid; gap: var(--r-5); }
.anleitung > div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--r-3);
  row-gap: var(--r-1);
  align-items: start;
}
.anleitung h3 {
  grid-column: 2;
  margin: 0;
  color: var(--petrol-700);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
}
/* Das Zeichen vor jedem Block macht die drei Fragen auf einen Blick
   unterscheidbar: Ablauf, Dauer, Vorsicht. */
.anleitung .schritt-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--petrol-50);
  border: 1px solid var(--petrol-200);
  display: grid;
  place-items: center;
  margin-top: 0.1rem;
}
.anleitung .schritt-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--petrol-700);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anleitung p, .anleitung ul, .anleitung ol { margin-bottom: 0; }
.anleitung p { grid-column: 2; font-size: 1rem; line-height: 1.6; max-width: 66ch; }

/* ---- Tipp-Karten (Schlaftipps) -------------------------------------------- */

.tipps {
  display: grid;
  gap: var(--r-5);
  padding-bottom: var(--sektion);
}
@media (min-width: 720px) { .tipps { grid-template-columns: 1fr 1fr; gap: var(--r-6); } }
.tipp {
  position: relative;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--r-6);
  box-shadow: var(--schatten-1);
  scroll-margin-top: calc(var(--kopfhoehe) + var(--r-4));
  transition: box-shadow var(--uebergang), border-color var(--uebergang), transform var(--uebergang);
}
.tipp:hover { box-shadow: var(--schatten-2); transform: translateY(-2px); }
/* Nummer und Überschrift stehen in einer Zeile. Untereinander kostete die
   Nummer eine eigene Zeile und riss den Kopf der Karte auseinander. */
.tipp {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--r-3);
  align-content: start;
}
.tipp .nummer {
  grid-column: 1;
  grid-row: 1;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.0625rem;
  box-shadow: none;
}
.tipp h2 { grid-column: 2; grid-row: 1; align-self: center; font-size: 1.1875rem; margin: 0; }
.tipp p { grid-column: 1 / -1; font-size: 1rem; line-height: 1.6; margin-top: var(--r-4); }
/* Der Hinweisblock trägt keine Nummer: sonst steht eine leere Spalte davor. */
.tipp.breit { grid-template-columns: 1fr; }
.tipp.breit h2 { grid-column: 1; }
/* Betont wird der Hinweis, wann ärztliche Hilfe nötig ist. Eine beliebige
   Karte einzufärben liest sich als Rasterfehler, nicht als Hinweis. */
.tipp.betont {
  background: var(--sand-100);
  border-color: var(--sand-200);
}
.tipp.betont .nummer { box-shadow: none; }
@media (min-width: 720px) { .tipp.breit { grid-column: 1 / -1; } }

/* ---- Rezepte -------------------------------------------------------------- */

/* Das Gericht steht quer über die Kartenbreite, aber gedeckelt: ohne Grenze
   wird die Bildstelle auf dem Desktop 400 px hoch und die Karte besteht zur
   Hälfte aus Leerfläche. */
.rezept .platzhalter { aspect-ratio: 21 / 9; margin-bottom: var(--r-6); }
.empfehlung {
  display: flex;
  align-items: center;
  gap: var(--r-3);
  margin: 0 0 var(--r-4);
  color: var(--text-2);
  font-size: 1rem;
}
.empfehlung .portraet {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--petrol-50);
  border: 1px dashed var(--petrol-300);
  display: grid;
  place-items: center;
  color: var(--petrol-700);
}
.empfehlung .portraet svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.empfehlung strong { color: var(--text); font-weight: 700; }
.rezept-eckdaten {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--r-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-2);
}
.rezept-eckdaten li {
  margin: 0;
  background: var(--sand-100);
  border-radius: 999px;
  padding: var(--r-1) var(--r-4);
  font-size: 0.9375rem;
  color: var(--text);
}
.rezept-inhalt { display: grid; gap: var(--r-6); }
@media (min-width: 760px) { .rezept-inhalt { grid-template-columns: 5fr 7fr; gap: var(--r-8); } }
.rezept-inhalt h3 {
  color: var(--petrol-700);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: var(--r-3);
}
.rezept-inhalt > div:first-child {
  background: var(--sand-50);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-s);
  padding: var(--r-5);
  align-self: start;
}
.rezept-inhalt ul { list-style: none; padding: 0; margin: 0; }
.rezept-inhalt ul li {
  padding: var(--r-1) 0 var(--r-1) var(--r-5);
  position: relative;
  margin: 0;
  font-size: 1rem;
}
.rezept-inhalt ul li:last-child { padding-bottom: 0; }
.rezept-inhalt ul li::before {
  content: "";
  position: absolute;
  left: var(--r-1);
  top: 0.75em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--beige);
}
/* Zubereitung: eigene Zählung, damit die Ziffer die Petrolfarbe trägt */
.rezept-inhalt ol { list-style: none; counter-reset: schritt; padding: 0; margin: 0; }
.rezept-inhalt ol li {
  counter-increment: schritt;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--r-4);
  font-size: 1rem;
}
.rezept-inhalt ol li:last-child { margin-bottom: 0; }
.rezept-inhalt ol li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--petrol-100);
  color: var(--petrol-700);
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}
.zitat {
  margin: var(--r-6) 0 0;
  padding: var(--r-5);
  background: var(--sand-100);
  border-left: 4px solid var(--beige);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-style: italic;
  color: var(--text);
  font-size: 1rem;
}

/* ---- Abschluss ------------------------------------------------------------ */

.abschluss {
  margin: 0 0 var(--sektion);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(0, 155, 177, 0.5) 0%, rgba(0, 155, 177, 0) 60%),
    linear-gradient(160deg, var(--petrol-800), var(--petrol-900));
  border-radius: var(--radius-l);
  text-align: center;
  color: var(--weiss);
}
.abschluss h2 { color: var(--weiss); margin-bottom: var(--r-3); }
.abschluss p { color: #D6EDF3; max-width: 52ch; margin-inline: auto; margin-bottom: var(--r-6); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--weiss);
  color: var(--petrol-800);
  font-weight: 700;
  text-decoration: none;
  padding: var(--r-3) var(--r-8);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 30, 38, 0.22);
  transition: transform var(--uebergang), background var(--uebergang), box-shadow var(--uebergang);
}
.button:hover { background: var(--petrol-50); color: var(--petrol-900); box-shadow: 0 10px 24px rgba(0, 30, 38, 0.28); }
.button:active { transform: translateY(1px) scale(0.99); }
.abschluss .button:focus-visible { outline-color: var(--weiss); }

/* ---- Fuß ------------------------------------------------------------------ */

.fuss {
  background: var(--tinte);
  color: #C6CDD2;
  padding: var(--r-12) 0 var(--r-10);
  font-size: 0.9375rem;
}
.fuss-oben {
  display: grid;
  gap: var(--r-6);
  padding-bottom: var(--r-6);
  margin-bottom: var(--r-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 720px) {
  .fuss-oben { grid-template-columns: auto 1fr; align-items: center; gap: var(--r-10); }
}
.fuss-marke p {
  margin: 0;
  color: var(--weiss);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.fuss-marke span { display: block; margin-top: var(--r-1); color: #C6CDD2; font-weight: 400; font-size: 0.9375rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 var(--r-8); }
@media (min-width: 720px) { .fuss nav { justify-content: flex-end; } }
.fuss nav a {
  color: var(--weiss);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}
.fuss nav a:hover { color: var(--petrol-300); }
.fuss p { margin-bottom: var(--r-3); }
.ki-hinweis { display: flex; align-items: flex-start; gap: var(--r-3); }
.ki-hinweis img { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 0.15rem; filter: invert(1); opacity: 0.85; }
.ki-hinweis p { margin: 0; color: #C6CDD2; font-size: 0.875rem; line-height: 1.55; }

/* ---- Interne Übersicht (nur Vorschau) ------------------------------------- */

.uebersicht {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--r-5);
  margin-top: clamp(-3.5rem, -6vw, -2rem);
  margin-bottom: var(--sektion);
}
@media (min-width: 720px) { .uebersicht { grid-template-columns: 1fr 1fr; gap: var(--r-6); } }
.karte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--r-6);
  box-shadow: var(--schatten-2);
  transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
.karte:hover {
  transform: translateY(-3px);
  border-color: var(--petrol-200);
  box-shadow: var(--schatten-3);
  color: inherit;
}
.karte .pfad {
  display: inline-block;
  align-self: flex-start;
  background: var(--petrol-50);
  border-radius: 999px;
  padding: var(--r-1) var(--r-3);
  font-size: 0.875rem;
  color: var(--petrol-700);
  font-weight: 700;
  margin-bottom: var(--r-4);
}
.karte h2 { font-size: 1.25rem; margin-bottom: var(--r-2); }
.karte p { margin: 0 0 var(--r-5); color: var(--text-2); font-size: 1rem; }
/* Die Karte ist als Ganzes ein Link. Ohne sichtbare Handlung am Fuß liest
   sie sich als Kasten, den man ansieht, nicht als Seite, die man öffnet. */
.karte::after {
  content: "Seite ansehen";
  margin-top: auto;
  padding-top: var(--r-4);
  border-top: 1px solid var(--linie);
  color: var(--petrol-700);
  font-weight: 700;
  font-size: 0.9375rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300788C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 0 bottom 0.28rem / 18px 18px;
}
.karte:hover::after { color: var(--petrol-900); }
.intern {
  background: var(--sand-100);
  border-radius: var(--radius-s);
  padding: var(--r-4) var(--r-5);
  font-size: 0.9375rem;
  color: var(--text);
  margin-top: var(--r-6);
}
.einstieg .intern {
  background: rgba(0, 45, 56, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--weiss);
}

/* ---- Druck ----------------------------------------------------------------
   Übungen und Rezepte werden ausgedruckt und an den Kühlschrank gehängt.
   Ohne @page-Format druckt Chrome US Letter statt A4.                    */

@page { size: A4; margin: 16mm 14mm; }

@media print {
  html { scroll-padding-top: 0; }
  body { font-size: 11pt; line-height: 1.45; color: #000; }
  .kopf { position: static; background: none; padding: 0 0 8mm; }
  .kopf .kopf-link, .sprung-inhalt, .abschluss, .titelbild, .platzhalter { display: none !important; }
  /* Auf Papier alles Schwarz. invert() würde das schwarze „team“ der
     Logodatei weiß machen, also unsichtbar. */
  .kopf img { height: 18mm; filter: brightness(0); }
  .einstieg { background: none; color: #000; padding: 0 0 6mm; }
  .einstieg h1, .abschluss h2 { color: #000; }
  .einstieg .vorspann, .fakten li, .fakten span { color: #000; }
  /* Die Eckdaten sind am Bildschirm eine Tafel. Auf Papier bekäme jedes
     Feld sonst einen zweiten Rahmen innerhalb des Tafelrahmens. */
  .fakten { background: none; border: 1px solid #999; backdrop-filter: none; }
  .fakten li { background: none; border: 0; }
  .fakten li + li { border-top: 1px solid #CCC; border-left: 0; }
  .sprungliste a { background: none; border: 1px solid #999; }
  .sprungliste b { background: none; border: 1px solid #999; color: #000; }
  .anleitung .schritt-icon { background: none; border: 1px solid #999; }
  .anleitung .schritt-icon svg { stroke: #000; }
  .anleitung h3, .rezept-inhalt h3 { color: #000; }
  body { background: #FFF; }
  .hero-label { border-color: #999; color: #000; background: none; }
  .sprungliste { margin: 0 0 8mm; box-shadow: none; border: 1px solid #999; }
  .uebung, .rezept, .tipp {
    box-shadow: none;
    border: 1px solid #BBB;
    break-inside: avoid;
    margin-bottom: 6mm;
  }
  .nummer { background: #000 !important; box-shadow: none; }
  .fuss { background: none; color: #000; border-top: 1px solid #999; padding: 6mm 0 0; }
  .fuss nav a, .ki-hinweis p, .fuss-marke p, .fuss-marke span { color: #000; }
  .ki-hinweis img { filter: none; }
  a { color: #000; }
}

/* ---- Auch in der Box: Querverweis auf die anderen drei Seiten ------------- */

.weiter { margin: 0 0 var(--sektion); }
.weiter h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: var(--r-4);
}
.weiter-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--r-3);
}
@media (min-width: 720px) { .weiter-liste { grid-template-columns: repeat(3, 1fr); gap: var(--r-4); } }
.weiter-liste li { margin: 0; display: flex; }
.weiter-liste a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--r-3);
  min-height: 56px;
  padding: var(--r-4);
  background: var(--petrol-50);
  border: 1px solid var(--petrol-100);
  border-radius: var(--radius-s);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--uebergang), border-color var(--uebergang), transform var(--uebergang);
}
.weiter-liste a:hover {
  background: var(--petrol-100);
  border-color: var(--petrol-200);
  transform: translateY(-2px);
  color: var(--petrol-900);
}
.weiter-liste svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--petrol-700);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media print { .weiter { display: none; } }