/* ==========================================================================
   TRAUMANKER — styles.css
   Schlafbegleitung für Babys & Kleinkinder · Familien. Schlaf. Vertrauen.

   Aufbau:
   1. Tokens          — alle Farben, Abstände, Schriften (einzige Quelle)
   2. Reset & Basis   — Box-Modell, Grundschrift, Selection, Fokus
   3. Typografie      — Überschriften, Fließtext, Akzente
   4. Layout          — Container, Sektionen, Rhythmus
   5. Komponenten     — Buttons, Textlinks, Header/Footer-Basis, Platzhalter
   6. Signature       — Nacht-Sektionen, Verlaufslinie, Goldsterne
   7. Bewegung        — Scroll-Reveals, Hover, reduced-motion

   Regeln:
   - Keine Hex-Werte außerhalb von Abschnitt 1.
   - Abstände nur über --space-*, Schriftgrößen nur über --text-*.
   - Gold nur für Klickbares oder das eine Wichtigste pro Sektion.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Farben (Markenkit-Fallback aus Briefing) ---- */
  --navy:       #00357A;  /* Basis: Text auf Creme, dunkle Flächen */
  --navy-night: #001F4A;  /* abgedunkeltes Navy für Nacht-Sektionen */
  --gold:       #F2BF5B;  /* Akzent: NUR Buttons, Links, Wichtigstes */
  --rose:       #DB8FA3;  /* sparsam: Akzentwort, Verlaufs-Endpunkt */
  --cream:      #EDEAE2;  /* heller Hintergrund, Text auf Navy */

  /* Ableitungen (Tints/Shades/Alpha — erlaubt, freie Hex-Werte nicht) */
  --cream-soft:    color-mix(in srgb, var(--cream) 92%, var(--navy));   /* leicht getönte Flächen auf Creme */
  --gold-deep:     color-mix(in srgb, var(--gold) 78%, var(--navy));    /* Hover auf Gold-Flächen */
  --rose-soft:     color-mix(in srgb, var(--rose) 55%, var(--cream));   /* zarte Rosé-Fläche auf Creme */
  --rose-ink:      color-mix(in srgb, var(--rose) 58%, black);          /* Rosé als SCHRIFT auf Creme (5,3:1) */
  --line-on-cream: color-mix(in srgb, var(--navy) 18%, transparent);    /* feine Linien auf hell */
  --line-on-navy:  color-mix(in srgb, var(--cream) 22%, transparent);   /* feine Linien auf dunkel */
  --muted-on-cream: color-mix(in srgb, var(--navy) 72%, var(--cream));  /* gedämpfter Text auf hell (AA-fest) */
  --muted-on-navy:  color-mix(in srgb, var(--cream) 78%, var(--navy-night)); /* gedämpfter Text auf dunkel */
  --field:         color-mix(in srgb, var(--cream) 35%, white);         /* Eingabefelder, heller als die Seite */

  /* ---- Schriften ---- */
  --font-head: "Fraunces", Georgia, serif;          /* Überschriften */
  --font-body: "Montserrat", "Helvetica Neue", sans-serif; /* Fließtext, UI */
  --font-hand: "Caveat", cursive;                   /* seltene Handschrift-Akzente, max. 1× pro Seite */

  /* ---- Schriftgrößen (fluid, mobile first) ---- */
  --text-sm:      clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);  /* Meta, Fußnoten */
  --text-base:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);       /* Fließtext */
  --text-lg:      clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);    /* Lead-Absätze */
  --text-xl:      clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);     /* H3 / kleine Titel */
  --text-2xl:     clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);       /* H2 */
  --text-display: clamp(2.375rem, 1.7rem + 3.4vw, 4.5rem);       /* H1, ein echter Sprung */
  --text-hand:    clamp(1.5rem, 1.3rem + 1vw, 2.125rem);         /* Caveat-Akzente */

  /* ---- Abstands-Skala (einzige erlaubte Abstände) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.25rem;
  --space-2xl: clamp(4rem, 3rem + 4vw, 6.5rem);    /* Sektions-Innenabstand */
  --space-3xl: clamp(5.5rem, 4rem + 6vw, 9rem);    /* große Sektionswechsel */
  --space-4xl: clamp(7rem, 5rem + 8vw, 12rem);     /* Hero, Seitenauftakt */

  /* ---- Layout ---- */
  --container: 72rem;       /* max. Inhaltsbreite */
  --container-narrow: 46rem;/* Lesetext-Spalte */
  --gutter: clamp(1.25rem, 4vw, 2.5rem); /* Seitenränder */
  --measure: 65ch;          /* Zeilenlänge Fließtext (60–75 Zeichen) */
  --radius: 6px;            /* Ecken: dezent, keine Pillen außer Buttons */

  /* ---- Bewegung ---- */
  --ease: cubic-bezier(0.25, 0.7, 0.3, 1);
  --dur: 0.6s;
  --dur-fast: 0.25s;

  /* ---- Formen ---- */
  --clip-star: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);

  /* ---- Ein Schatten, sparsam (nur schwebende Elemente wie Mobile-Menü) ---- */
  --shadow-soft: 0 12px 40px -12px color-mix(in srgb, var(--navy-night) 45%, transparent);
}


/* ==========================================================================
   2. RESET & BASIS
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; } /* width/height-Attribute dienen nur dem Platzhalten */

::selection { background: var(--gold); color: var(--navy-night); }

/* Sichtbarer Fokus — überall, deutlich, markenfarben */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sprung-Link für Tastatur-Nutzerinnen */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100%;
  z-index: 100;
  background: var(--navy);
  color: var(--cream);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-md); }


/* ==========================================================================
   3. TYPOGRAFIE
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  /* Deutsche Komposita sind lang. Ohne Silbentrennung schiebt ein Wort wie
     „Datenschutzerklärung“ die Seite bei 360px seitlich auf. Greift nur,
     wenn das Wort sonst nicht passt; braucht lang="de" im <html>. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Im Fließtext ebenfalls trennen — verbessert den Flattersatz spürbar */
p, li, dd { hyphens: auto; }

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { max-width: var(--measure); }

/* Lead-Absatz: etwas größer, gedämpfte Farbe */
.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--muted-on-cream);
}

/* Kursives Akzentwort in Überschriften (Fraunces Italic).
   Das helle Marken-Rosé schafft auf Creme nur 2,1:1 — als Schrift auf hellem
   Grund deshalb immer --rose-ink, das helle Rosé nur auf dunklen Flächen. */
.accent {
  font-style: italic;
  color: var(--rose-ink);
}

/* Handschrift-Akzent (Caveat) — max. 1× pro Seite */
.hand {
  font-family: var(--font-hand);
  font-size: var(--text-hand);
  font-weight: 600;
  line-height: 1.2;
  color: var(--rose-ink);
}

/* Kleine Auszeichnungszeile über Überschriften */
.eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-on-cream);
  margin-bottom: var(--space-md);
  /* Keine Silbentrennung in Auszeichnungszeilen: gesperrte Versalien mit
     Trennstrich sehen aus wie ein Fehler („ON-LINE“). Lieber umbrechen. */
  hyphens: none;
}

.text-sm { font-size: var(--text-sm); }
.muted { color: var(--muted-on-cream); }

/* ---- Dunkle Flächen ----
   Diese VIER Selektoren sind DIE Gruppe „dunkler Untergrund“:
   .hero, .page-head, .section--night, .section--navy.
   Wer eine neue dunkle Fläche baut, nimmt eine dieser Klassen und trägt sie
   hier ein — sonst kippen die Kontraste (Eyebrow 2,8:1, Textlink 1,4:1).
   Immer nach den hellen Grundregeln stehen lassen. */
.hero .eyebrow,
.page-head .eyebrow,
.section--night .eyebrow,
.section--navy .eyebrow,
.hero .muted,
.page-head .muted,
.section--night .muted,
.section--navy .muted { color: var(--muted-on-navy); }

/* Auf Dunkel darf das helle Marken-Rosé wieder ran (6,5:1) */
.hero .accent,
.page-head .accent,
.section--night .accent,
.section--navy .accent,
.hero .hand,
.page-head .hand,
.section--night .hand,
.section--navy .hand { color: var(--rose); }


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

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

.container--narrow { max-width: var(--container-narrow); }

/* Sektions-Rhythmus: Innenabstand nur über die Skala */
.section { padding-block: var(--space-2xl); }
.section--spacious { padding-block: var(--space-3xl); }

/* Dunkle Nacht-Sektion — Kernstück der Nachtlicht-Stimmung */
.section--night {
  background: var(--navy-night);
  color: var(--cream);
}
.section--night p { color: var(--muted-on-navy); }
.section--night h1,
.section--night h2,
.section--night h3 { color: var(--cream); }

/* Navy-Sektion (etwas heller als Nacht, für Zwischentöne) */
.section--navy {
  background: var(--navy);
  color: var(--cream);
}
.section--navy p { color: var(--muted-on-navy); }


/* ==========================================================================
   5. KOMPONENTEN
   ========================================================================== */

/* ---- Haupt-CTA: der einzige Gold-Button der Seite ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  color: var(--navy-night);
  background: var(--gold);
  padding: 1em 1.75em;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--gold-deep); }
.btn:active { transform: translateY(1px); }

/* ---- Sekundäre Verweise: nur Textlinks, nie Buttons ---- */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.link {
  font-weight: 600;
  color: var(--navy);
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  transition: color var(--dur-fast) var(--ease);
}
.link:hover { color: var(--gold-deep); }

/* Textlinks auf dunklem Untergrund (siehe Gruppe „dunkle Flächen“ oben) */
.hero .link,
.page-head .link,
.section--night .link,
.section--navy .link { color: var(--cream); }
.hero .link:hover,
.page-head .link:hover,
.section--night .link:hover,
.section--navy .link:hover { color: var(--gold); }

/* ---- Bild-Platzhalter: sichtbar beschriftet, später 1:1 ersetzbar ----
   Nutzung: <figure class="placeholder" style="--ratio: 4/5">
              <figcaption>Platzhalter: Porträt …</figcaption>
            </figure> */
.placeholder {
  --ratio: 4 / 5;
  aspect-ratio: var(--ratio);
  display: grid;
  place-items: center;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--navy) 12%, var(--cream)),
      color-mix(in srgb, var(--rose) 22%, var(--cream)));
  border: 1px dashed var(--line-on-cream);
  border-radius: var(--radius);
}
.placeholder figcaption {
  font-size: var(--text-sm);
  color: var(--muted-on-cream);
  text-align: center;
  padding: var(--space-md);
}


/* ==========================================================================
   6. SIGNATURE-ELEMENTE
   ========================================================================== */

/* Schmale Verlaufslinie Navy → Rosé (nie großflächig einsetzen) */
.gradient-line {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, var(--navy), var(--rose));
}
.section--night .gradient-line,
.section--navy .gradient-line {
  background: linear-gradient(90deg, var(--rose), var(--gold));
  opacity: 0.7;
}

/* Feiner Goldstern (Vierstrahl) als Interpunktion in dunklen Sektionen.
   Nutzung: <span class="star" aria-hidden="true"></span> — sparsam.
   Die Form liegt als Token in :root, damit .star und .nightsky__star
   nicht auseinanderlaufen. */
.star {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  background: var(--gold);
  clip-path: var(--clip-star);
}


/* ==========================================================================
   7. BEWEGUNG
   ========================================================================== */

/* Scroll-Reveal: JS setzt .is-visible via IntersectionObserver (main.js).
   Ohne JS bleibt alles sichtbar — Klasse wird erst per JS vorbereitet. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Sanfte Verzögerung für gestaffelte Gruppen */
.js [data-reveal="2"] { transition-delay: 0.1s; }
.js [data-reveal="3"] { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * { scroll-behavior: auto; }
}


/* ==========================================================================
   8. HEADER & NAVIGATION
   Sitzt auf der dunklen Hero-Fläche (Startseite) bzw. auf Navy (Unterseiten).
   ========================================================================== */

.site-header {
  background: var(--navy-night);
  color: var(--cream);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm); /* knapp, das Logo bringt eigene Höhe mit */
}

/* Logo im Header — volles Logo, Variante „hell" für dunklen Grund.
   Auf hellem Grund stattdessen logo-navy.png einsetzen.
   Die Breite ist die Stellschraube: unter etwa 200px wird die Claimzeile
   unlesbar, deshalb nach unten begrenzt. */
.logo {
  display: inline-block;
  line-height: 0; /* kein Zeilen-Leerraum unter dem Bild */
}
.logo img {
  width: clamp(11.5rem, 30vw, 17.5rem);
  height: auto;
}

/* Volles Logo im Footer — gleiche Fassung */
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img { width: min(17.5rem, 100%); height: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap; /* Navigationspunkte nie umbrechen */
  padding-block: var(--space-2xs);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__list .btn { white-space: nowrap; }
.nav__link:hover,
.nav__link[aria-current="page"] { border-bottom-color: var(--gold); }

/* Kleinere CTA-Variante für Header/Nav */
.btn--sm { font-size: var(--text-sm); padding: 0.75em 1.4em; }

/* Burger — erst unter 860px sichtbar */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--cream);
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  margin-block: 5px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

/* Burger bis 1023px: Das volle Logo belegt bis zu 280px, darunter wird es
   für Navigation plus CTA in einer Zeile zu eng. */
@media (max-width: 1023px) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 50;
    background: var(--navy-night);
    border-top: 1px solid var(--line-on-navy);
    box-shadow: var(--shadow-soft);
    display: none;
  }
  .nav.is-open { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-md) var(--gutter) var(--space-lg);
  }
  .nav__list li { width: 100%; }
  .nav__link {
    display: block;
    padding-block: var(--space-sm);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--line-on-navy);
  }
  .nav__list .btn { margin-top: var(--space-md); }

  /* Burger → X */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-header { position: relative; } /* Bezugsrahmen fürs Klapp-Menü */
}


/* ==========================================================================
   9. HERO (Startseite, Nacht-Stimmung)
   Asymmetrisch: Text links breit, Foto rechts versetzt nach unten.
   ========================================================================== */

.hero {
  background: var(--navy-night);
  color: var(--cream);
  padding-block: var(--space-2xl) 0; /* unten schließt das Vertrauensband an */
  position: relative;
  overflow: hidden; /* Mond-Deko darf nicht überstehen */
}

.hero__grid {
  display: grid;
  gap: var(--space-xl);
}

.hero__claim {
  margin-top: var(--space-md);
}

.hero h1 {
  color: var(--cream);
  max-width: 14ch;
}

.hero__lead {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  color: var(--muted-on-navy);
  max-width: 46ch;
}

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

/* Foto mit versetztem Goldrahmen — Signature-Bildbehandlung */
.photo-frame {
  position: relative;
  display: inline-block;
}
.photo-frame img {
  border-radius: var(--radius);
  filter: saturate(0.88); /* gedämpfte Anmutung */
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(var(--space-sm), var(--space-sm));
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  pointer-events: none;
  opacity: 0.7;
  z-index: -1;
}

/* ---- Nachthimmel ----
   Ersetzt den früheren einzelnen Goldmond, der als Symbol in der Ecke klebte.
   Jetzt drei Schichten, die zusammen eine Ecke bilden statt eines Objekts:

     1. weiches Nachtlicht (radial, sehr flach)
     2. großer Mond, vom Rand ANGESCHNITTEN — dadurch liegt er hinter der
        Seite statt darauf. Cremefarben und fast durchsichtig, nicht gold:
        Gold bleibt für Klickbares reserviert.
     3. drei feine Goldsterne in abnehmender Größe — das einzige Gold hier,
        und der einzige Bezug zum Sternendetail im Logo.

   Der Beschnitt übernimmt .hero bzw. .section--deco (overflow: hidden).
   Die Box selbst hängt oben bzw. unten rechts, damit die Sterne bei keiner
   Breite über den Text wandern. */
.nightsky {
  --moon: 4.5rem;             /* Hauptstellschraube, alles andere hängt daran */
  --glow: 3;                  /* Lichtschein als Vielfaches von --moon */
  --glow-alpha: 11%;
  position: absolute;
  width: calc(var(--moon) * 3.4);
  height: calc(var(--moon) * 1.9);
  pointer-events: none;
  z-index: 0;
}

/* Nachtlicht hinter dem Mond. Klein und flach — kein Verlauf über die
   halbe Seite, nur so viel, dass der Mond nicht im Nichts hängt.
   Auf schmalen Schirmen fällt der Schein am meisten auf, deshalb ist er
   dort über --glow und --glow-alpha separat zurückgenommen. */
.nightsky::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 38% -50%;
  width: calc(var(--moon) * var(--glow));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--cream) var(--glow-alpha), transparent), transparent 70%);
}

/* Der Mond bleibt klein genug, dass die Sichel als Sichel lesbar ist.
   Leicht gekippt — aufrecht wirkt er wie ein gesetztes Icon. */
.nightsky__moon {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--moon);
  color: var(--gold);
  opacity: 0.9;
  rotate: -12deg;
}

/* Sterne ziehen sich nach links unten weg, jeder kleiner und leiser als der
   vorige. Das gibt der Gruppe Richtung, statt sie zu streuen. */
.nightsky__star {
  position: absolute;
  display: block;
  background: var(--gold);
  clip-path: var(--clip-star);
}
.nightsky__star--a {
  top: calc(var(--moon) * 0.88);
  right: calc(var(--moon) * 1.2);
  width: calc(var(--moon) * 0.32);
  aspect-ratio: 1;
  opacity: 0.95;
}
.nightsky__star--b {
  top: calc(var(--moon) * 0.26);
  right: calc(var(--moon) * 1.85);
  width: calc(var(--moon) * 0.2);
  aspect-ratio: 1;
  opacity: 0.7;
}
.nightsky__star--c {
  top: calc(var(--moon) * 1.32);
  right: calc(var(--moon) * 2.45);
  width: calc(var(--moon) * 0.13);
  aspect-ratio: 1;
  opacity: 0.5;
}

/* Die Gruppe hängt im Container, nicht am Fensterrand. `right: var(--gutter)`
   setzt sie auf die Inhaltskante — dieselbe Linie, an der auch das Foto endet.
   Ohne den Gutter läge sie auf der Fensterkante, und die Drehung des Mondes
   würde ihn dort anschneiden. */
.nightsky--hero { --moon: clamp(2rem, 5vw, 4.5rem); top: 0; right: var(--gutter); }
.nightsky--cta  { --moon: clamp(1.6rem, 3.5vw, 3.25rem); bottom: 0; right: var(--gutter); }

/* Mobil steht die Eyebrow oben links, die Gruppe rechts daneben. Der Freiraum
   ist fest gesetzt: --moon wird hier nicht vererbt (die Gruppe ist kein
   Vorfahre der Eyebrow), eine calc() darauf liefe ins Leere. */
@media (max-width: 859px) {
  .hero .eyebrow { padding-right: 4.5rem; }

  /* Nur Mond und ein Stern. Zu dritt drängen sich die Sterne an die
     Eyebrow-Zeile, und die Gruppe wird auf 360px zu laut. */
  .nightsky__star--b,
  .nightsky__star--c { display: none; }

  /* Der Lichtschein fällt auf kleinen Schirmen am meisten auf. Enger und
     blasser, sonst nimmt er ein Drittel der Bildbreite ein. */
  .nightsky { --glow: 2; --glow-alpha: 6%; }
}

/* Inhalt liegt über dem Himmel */
.hero .container,
.section--deco .container { position: relative; z-index: 1; }

/* Sektion mit Deko: Bezugsrahmen + Beschnitt für überstehende Grafiken */
.section--deco { position: relative; overflow: hidden; }

/* Ab 860px: 12-Spalten-Raster, Foto versetzt */
@media (min-width: 860px) {
  .hero__grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  .hero__copy { grid-column: 1 / 8; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__media {
    grid-column: 8 / 13;
    margin-top: var(--space-2xl); /* bewusster Versatz nach unten */
  }
}


/* ==========================================================================
   10. VERTRAUENSBAND (Qualifikationen unter dem Hero)
   Fine-line-Streifen statt Karten.
   ========================================================================== */

.band {
  border-top: 1px solid var(--line-on-navy);
  margin-top: var(--space-2xl);
}

.band__list {
  list-style: none;
  display: grid;
  gap: 0;
}

/* Stern in Spalte 1, Qualifikation und Erläuterung untereinander in Spalte 2 */
.band__item {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line-on-navy);
  font-size: var(--text-sm);
  color: var(--muted-on-navy);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
}
.band__item:last-child { border-bottom: 0; }
.band__item strong {
  grid-column: 2;
  color: var(--cream);
  font-weight: 600;
}
.band__item > span:not(.star) { grid-column: 2; }
.band__item .star { width: 0.6em; height: 0.6em; margin-top: 0.5em; }

@media (min-width: 860px) {
  .band__list { grid-template-columns: repeat(3, 1fr); }
  .band__item {
    border-bottom: 0;
    border-right: 1px solid var(--line-on-navy);
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
  }
  .band__item:first-child { padding-left: 0; }
  .band__item:last-child { border-right: 0; }
}


/* ==========================================================================
   11. EDITORIALE LAYOUT-BAUSTEINE
   Asymmetrische Raster für Text-Bild-Sektionen und Listen statt Karten.
   ========================================================================== */

/* Zweispalter mit bewusstem Ungleichgewicht: 5/7 bzw. 7/5 */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: repeat(12, 1fr); }
  .split__media { grid-column: 1 / 6; }
  .split__copy { grid-column: 7 / 13; }
  .split--flip .split__media { grid-column: 8 / 13; grid-row: 1; }
  .split--flip .split__copy { grid-column: 1 / 7; grid-row: 1; }
}

/* Eingerückte Lesespalte für reine Textsektionen (Blickführung nach rechts) */
.prose-offset { max-width: var(--container-narrow); }
@media (min-width: 860px) {
  .prose-offset { margin-left: clamp(var(--space-xl), 16%, 16rem); }
}

/* Vertikaler Textrhythmus in allen Copy-Spalten — ein Wert, eine Ausnahme.
   Jede neue Textspalte gehört in diese Liste, sonst kleben die Absätze. */
.prose-offset > * + *,
.split__copy > * + *,
.split__copy [data-reveal] > * + *,
.area-soft > * + *,
.offer-row > div > * + *,
.contact-grid__form > * + *,
.contact-grid__side > * + * { margin-top: var(--space-md); }

/* Das Formular bekommt mehr Luft zum einleitenden Text */
.contact-grid__form > .form { margin-top: var(--space-xl); }

/* Einzige Ausnahme: der getönte Block bekommt mehr Luft nach oben */
.split__copy > .area-soft,
.split__copy > [data-reveal] > .area-soft { margin-top: var(--space-lg); }

/* Abstand vor dem Haupt-CTA am Sektionsende */
.cta-spaced { margin-top: var(--space-lg); }

/* Nummerierte Editorial-Liste (Methode): Zahl in Fraunces, feine Linien */
.steps {
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--line-on-cream);
  max-width: var(--container-narrow);
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line-on-cream);
}
.steps li::before {
  content: "0" counter(step);
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--rose-ink); /* Ziffern stehen auf Creme */
  line-height: 1;
}
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.steps li div > * + * { margin-top: var(--space-sm); }

/* ---- Herausgestellter Satz ----
   Für die Sätze, die den Kern tragen. Fraunces, größer, mit viel Luft und
   auf breiten Schirmen leicht aus der Textspalte herausgerückt. Bewusst ohne
   Anführungszeichen und ohne Farbe: Größe und Weißraum reichen. */
.pullquote {
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy);
  max-width: 24ch;
  text-wrap: balance;
  margin-block: var(--space-xl);
}
.section--night .pullquote,
.page-head .pullquote { color: var(--cream); }

@media (min-width: 860px) {
  /* Hängt links aus der Spalte heraus und bricht den Lesefluss bewusst */
  .pullquote { margin-left: calc(var(--space-xl) * -1); max-width: 28ch; }
}

/* Ergebnis am Ende jeder Phase. Jede Phase endet mit demselben Satzanfang —
   die eigene Form macht daraus ein wiederkehrendes Element statt einer
   Wiederholung. Rosé hier als feine Linie, nicht als Schrift. */
.steps__result {
  border-left: 2px solid var(--rose);
  padding-left: var(--space-md);
  color: var(--navy);
  font-weight: 500;
}

/* Angebots-Zeilen: editoriale Tabellenzeilen statt Preiskarten */
.offer-row {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--line-on-cream);
}
.offer-row:last-of-type { border-bottom: 1px solid var(--line-on-cream); }
.offer-row__price {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  white-space: nowrap;
}
@media (min-width: 720px) {
  .offer-row { grid-template-columns: 1fr auto; align-items: baseline; }
  .offer-row > div { grid-column: 1; grid-row: 1; }
  .offer-row > .offer-row__price { grid-column: 2; grid-row: 1; }
}

/* Zart getönter Rosé-Hinweisblock. Aktuell auf keiner Seite im Einsatz —
   vorgesehen für abgesetzte Hinweise (z. B. rechtliche Hinweise auf
   angebote.html). Sparsam bleiben, Rosé ist eine Nebenfarbe. */
.area-soft {
  background: var(--rose-soft);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-lg);
}
/* Auf Rosé reicht gedämpftes Blau nicht für AA — hier immer volles Navy */
.area-soft .muted,
.area-soft .lead { color: var(--navy); }
@media (min-width: 860px) {
  .area-soft { padding: var(--space-xl); }
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--navy-night);
  color: var(--muted-on-navy);
  padding-block: var(--space-2xl) var(--space-lg);
  font-size: var(--text-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--line-on-navy);
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

.site-footer__blurb { margin-top: var(--space-md); max-width: 34ch; }

/* Name, Adresse, Telefon im Footer — auf jeder Seite auffindbar.
   Bewusst nur Ort und Region, nicht die Straße: die volle Anschrift steht
   im Impressum, das genügt rechtlich und hält die Privatadresse aus dem
   Seitenfuß heraus. */
.site-footer__nap { margin-top: var(--space-sm); }

.site-footer nav ul { list-style: none; }
.site-footer nav li + li { margin-top: var(--space-xs); }
.site-footer a { color: var(--cream); text-decoration-color: var(--line-on-navy); }
.site-footer a:hover { text-decoration-color: var(--gold); }

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  padding-top: var(--space-lg);
}


/* ==========================================================================
   13. SEITENKOPF DER UNTERSEITEN
   Kompakte dunkle Fläche direkt unter dem Header — beide zusammen bilden
   optisch einen Block. Die Startseite nutzt stattdessen .hero.
   ========================================================================== */

.page-head {
  background: var(--navy-night);
  color: var(--cream);
  padding-block: var(--space-xl) var(--space-2xl);
}
.page-head h1 { color: var(--cream); max-width: 18ch; }
.page-head .lead {
  margin-top: var(--space-lg);
  color: var(--muted-on-navy);
  max-width: 52ch;
}
/* Zweispaltig ab 860px: Titel links, Lead rechts versetzt */
@media (min-width: 860px) {
  .page-head__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-xl); align-items: end; }
  .page-head__title { grid-column: 1 / 8; }
  .page-head__lead  { grid-column: 8 / 13; }
  .page-head .lead { margin-top: 0; }
}


/* ==========================================================================
   14. FAKTEN-LISTE (helle Variante des Vertrauensbands)
   Für Qualifikationen, Ablauf, Leistungsumfang. Feine Linien statt Kästen.
   ========================================================================== */

.facts {
  list-style: none;
  border-top: 1px solid var(--line-on-cream);
  max-width: var(--container-narrow);
}
.facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line-on-cream);
}
.facts strong { grid-column: 2; font-weight: 600; }
.facts span:not(.star) { grid-column: 2; color: var(--muted-on-cream); font-size: var(--text-sm); }
.facts .star { width: 0.6em; height: 0.6em; margin-top: 0.5em; }

/* Beschriftete Wertepaare (Dauer, Format, Preis) — statt Preiskarten */
.specs {
  display: grid;
  gap: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--line-on-cream);
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
}
@media (min-width: 560px) { .specs { grid-template-columns: repeat(3, auto); justify-content: start; } }
.specs dt {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-cream);
  margin-bottom: var(--space-2xs);
}
.specs dd { font-family: var(--font-head); font-size: var(--text-xl); }


/* ==========================================================================
   15. ANGEBOTS-BLOCK (Detailseite)
   Ein Block pro Angebot, kein Karten-Raster gleicher Höhe.
   ========================================================================== */

.offer {
  border-top: 2px solid var(--navy);
  padding-top: var(--space-lg);
  max-width: var(--container-narrow);
}
.offer + .offer { margin-top: var(--space-3xl); }
.offer > * + * { margin-top: var(--space-md); }
.offer h2 { margin-bottom: var(--space-xs); }

/* Was enthalten ist — Häkchen als feiner Goldstrich, kein Emoji */
.includes { list-style: none; }
.includes li {
  position: relative;
  padding-left: var(--space-lg);
  margin-top: var(--space-sm);
  max-width: var(--measure);
}
.includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.9rem;
  height: 1px;
  background: var(--gold);
}


/* ==========================================================================
   16. FORMULAR (Kontaktseite)
   Postet an kontakt-senden.php auf dem eigenen Webspace. Kein Drittanbieter.
   ========================================================================== */

.form { max-width: 34rem; }
.form__row + .form__row { margin-top: var(--space-lg); }

.form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}
.form .hint { font-weight: 400; color: var(--muted-on-cream); }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--navy);
  background: var(--field);
  border: 1px solid var(--line-on-cream);
  border-radius: var(--radius);
  padding: 0.7em 0.85em;
}
.form textarea { min-height: 9rem; resize: vertical; }

/* Fokus muss auch ohne Tastatur sichtbar sein — Felder sind Interaktion */
.form input:focus,
.form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: transparent;
}

/* Einwilligung */
.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.form__check input { margin-top: 0.3em; width: 1.1em; height: 1.1em; accent-color: var(--navy); }
.form__check label { font-size: var(--text-sm); font-weight: 400; margin: 0; }

/* Honigtopf: für Menschen unsichtbar, Bots füllen ihn aus.
   Nicht display:none — manche Bots erkennen das. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rückmeldungen (kommen von kontakt-senden.php) */
.msg {
  border-left: 3px solid var(--gold);
  background: var(--cream-soft);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  max-width: var(--measure);
}
.msg--error { border-left-color: var(--rose-ink); background: var(--rose-soft); }
.msg h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }

/* Direkte Wege neben dem Formular */
.channels { list-style: none; }
.channels li + li { margin-top: var(--space-lg); }
.channels dt,
.channels .channels__label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-cream);
  margin-bottom: var(--space-2xs);
}

@media (min-width: 860px) {
  .contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-2xl); }
  .contact-grid__form { grid-column: 1 / 8; }
  .contact-grid__side { grid-column: 9 / 13; }
}


/* ==========================================================================
   17. PLATZHALTER-HINWEIS
   Sichtbare Markierung für Inhalte, die noch fehlen. Muss auffallen —
   diese Blöcke dürfen nicht aus Versehen live gehen.
   ========================================================================== */

.todo {
  border: 1px dashed var(--rose-ink);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  max-width: var(--measure);
  font-size: var(--text-sm);
  color: var(--muted-on-cream);
}
.todo strong { color: var(--rose-ink); }
.todo > * + * { margin-top: var(--space-xs); }