/* ============================================
   Sebastian Reisinger – Eltern Survival Guide
   Branding: Lavendel #6F729C · Korall #FF9999
             Salbei #C1CFCA · Beige als Basis
   ============================================ */

@font-face {
  font-family: "Biro Script";
  src: url("fonts/Biro_Script_reduced.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lokal gehostete Webfonts (DSGVO: kein Abruf von Google-Servern) */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Signature-Farben, exakt aus dem Branding ---- */
  --beige:       #f0eee4;   /* Beige */
  --beige-light: #f4f1ec;   /* Beige hell */
  --sage:        #c1cfca;   /* Salbei */
  --sage-light:  #eef1f0;   /* Salbei hell */
  --lilac:       #6b6690;   /* Lila */
  --lilac-light: #e8cdf2;   /* Helllila */
  /* ---- DER EINE Rotton der Website ----
     Die Marke kennt drei Korallentöne (#FF9999 hell, #F07C93 mittel,
     #F26B85 dunkel). Auf der Website wird bewusst nur EINER benutzt.
     Der helle Ton, damit dunkle Schrift darauf gut lesbar bleibt (6,7:1).
     Wer den Ton ändern will, ändert nur diese eine Zeile. */
  --accent:      #ff9999;

  /* ---- Abgeleitet, nur für Kontrast und Tiefe ---- */
  --petrol:      #545079;   /* Lila abgedunkelt */
  --petrol-deep: #3c3a5e;   /* dunkle Flächen: Bänder, Footer */
  --ink:         #45425f;   /* Fließtext: gleiche Blau-Familie wie Überschriften */
  --ink-soft:    #5b5878;
  --ink-btn:     #3c3a5e;   /* Text auf Korall-Flächen, gleiche Familie (5,2:1) */
  --line:        #e2ded2;

  /* ---- Aliase, damit bestehende Regeln unverändert weiterlaufen ---- */
  --cream:       var(--beige);
  --cream-light: var(--beige-light);
  --sage-soft:   var(--sage-light);
  --lavender:    var(--lilac);
  --orange:      var(--accent);
  --orange-dark: var(--accent);

  --max: 1080px;
  --radius: 12px;
}

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

html {
  scroll-behavior: smooth;
  /* Verhindert, dass iOS beim Drehen die Schrift eigenmächtig vergrößert */
  -webkit-text-size-adjust: 100%;
}

/* Sprungziele nicht unter die klebende Kopfzeile rutschen lassen */
[id] { scroll-margin-top: 90px; }

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream-light);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  line-height: 1.2;
  color: var(--petrol-deep);
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }

h1 em, h2 em {
  font-style: italic;
  color: var(--lavender);
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--lavender); }

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Ankündigungsleiste (nur bis zum Erscheinen des Buchs) ----------
   Trägt das Rosa der Marke und macht Erscheinungstermin und Vorbestellung
   auf JEDER Seite präsent. Nach dem 23.09.2026 anpassen oder entfernen,
   siehe Livegang-Checkliste in ANLEITUNG.md. */

.launch-bar {
  display: block;
  background: var(--accent);
  color: var(--ink-btn);
  text-decoration: none;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.72rem 20px;
  line-height: 1.35;
}

.launch-bar .launch-pfeil {
  display: inline-block;
  transition: transform 0.2s ease;
}

.launch-bar:hover .launch-pfeil { transform: translateX(3px); }

.launch-kurz { display: none; }

/* ---------- Header / Nav ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--petrol-deep);
  text-decoration: none;
  line-height: 1.15;
}

.brand-dot {
  color: var(--accent);
  margin-left: 1px;
}

.brand small {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--lavender);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

nav ul {
  display: flex;
  gap: 1.7rem;
  list-style: none;
}

nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
  padding-bottom: 4px;
}

nav a:hover, nav a[aria-current="page"] {
  color: var(--petrol-deep);
  border-bottom: 2.5px solid var(--accent);
}

/* Burger-Knopf: auf dem Desktop unsichtbar, ab 640px sichtbar */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 14px;
  margin-right: -14px;
  cursor: pointer;
  border-radius: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--petrol-deep);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle span + span { margin-top: 6px; }

/* Im geöffneten Zustand werden aus den drei Strichen ein Kreuz */
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.97rem;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

/* Buttons auf hellem Grund: ruhig und dunkel. Sie nehmen die Farbe der
   dunklen Bänder auf, damit die Seite ein System hat statt zweier Rottöne. */
.btn-primary,
.btn-accent {
  background: var(--petrol-deep);
  color: #fff;
  box-shadow: 0 5px 14px rgba(60, 58, 94, 0.26);
}
.btn-primary:hover,
.btn-accent:hover {
  background: var(--petrol);
  box-shadow: 0 8px 20px rgba(60, 58, 94, 0.32);
}

/* Buttons auf dunklem Grund: hier trägt der Markenakzent. */
.btn-light {
  background: var(--accent);
  color: var(--ink-btn);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}
.btn-light:hover {
  background: var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.btn-ghost {
  border: 2px solid var(--lilac);
  color: var(--lilac);
  background: transparent;
}
.btn-ghost:hover { background: var(--lilac); color: #fff; }

/* ---------- Sections ---------- */

section { padding: 5rem 0; }
section.alt { background: var(--beige); }
section.sage { background: var(--sage-light); }

/* Ruhige, kühle Fläche mit einem Hauch Lila. Bewusst entsättigt,
   damit der Bereich frisch wirkt, ohne ins Rosa zu kippen. */
section.lilac {
  background: linear-gradient(165deg, #e7eaee 0%, #eae7ef 55%, var(--beige-light) 100%);
}

/* Auf Helllila braucht der Kicker mehr Tiefe, sonst reicht der Kontrast nicht */
section.lilac .kicker { color: var(--petrol); }

section.press-strip {
  padding: 2.9rem 0;
  text-align: center;
  background: var(--beige-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

section.quote-hook { padding: 3.2rem 0 3.8rem; text-align: center; }

.quote-hook-text {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.42;
  max-width: 700px;
  margin: 0 auto;
  color: var(--petrol);
  text-wrap: balance;
}

.press-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
}

/* Alle Namen einheitlich gesetzt. Fünf verschiedene Schriftbilder
   nebeneinander wirken unruhig; eine ruhige Reihe wirkt souverän
   und lässt die Namen für sich sprechen. */
.press-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.8rem 2.1rem;
}

/* Jede Marke bekommt eine Anmutung ihres eigenen Schriftcharakters,
   damit man sie wiedererkennt. Kein echtes Logo, nur Schrift.
   Damit die Reihe trotzdem ruhig wirkt, sind alle Namen optisch auf
   dieselbe Höhe gebracht, in einer Farbe und auf gemeinsamer Grundlinie. */
.press-name {
  color: var(--petrol);
  line-height: 1;
  white-space: nowrap;
}

/* Versalien wirken bei gleicher Punktgröße größer als Gemischtsatz,
   deshalb sind die Versal-Namen bewusst etwas kleiner gesetzt. */
.press-eltern {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.press-az {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.16rem;
}

.press-bayern2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.press-sz {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: 0.005em;
}

.press-himbeer {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 0.87rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}


/* ---------- Schwebendes Selbsttest-Kaestchen ---------- */

.quiz-pin {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  color: var(--petrol-deep);
  text-decoration: none;
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(43, 42, 38, 0.18);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform 0.15s ease, opacity 0.25s ease, visibility 0.25s;
}

.quiz-pin:hover { transform: translateY(-2px); }

.quiz-pin.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}

.quiz-pin-emoji { font-size: 1.15rem; }

@media (max-width: 640px) {
  .quiz-pin { right: 14px; bottom: 14px; padding: 0.7rem 1rem; font-size: 0.85rem; }
  .quiz-pin-text { max-width: 130px; }
}

.kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavender);
  margin-bottom: 0.8rem;
}

.lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 48ch;
}

/* ---------- Hero mit freigestelltem Porträt ---------- */

.hero {
  padding: 4.5rem 0 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 50% at 88% 14%, rgba(193, 207, 202, 0.55), transparent 70%),
    radial-gradient(ellipse 45% 40% at 14% 86%, rgba(232, 205, 242, 0.38), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(238, 241, 240, 0.9), transparent),
    #fbfaf7;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: end;
}

.hero-text { padding-bottom: 5rem; }

.hero .lead { margin-top: 1.4rem; }

.hero-cta { margin-top: 2.3rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.trust-line {
  margin-top: 2.4rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}

/* Zwei Fassungen der Vertrauenszeile: lang für den Desktop,
   kurz fürs Handy. Die jeweils andere ist per display:none aus,
   wird also auch von Vorlese-Programmen nicht doppelt gelesen. */
.trust-mobil { display: none; }

/* Der Blob hinter dem Porträt */
.portrait-stage {
  position: relative;
  align-self: end;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.portrait-stage::before {
  content: "";
  position: absolute;
  inset: 8% 4% 0 4%;
  background: var(--sage);
  border-radius: 46% 54% 50% 50% / 60% 62% 38% 40%;
}

.portrait-stage::after {
  content: "";
  position: absolute;
  width: 74px;
  height: 74px;
  right: 4%;
  top: 4%;
  background: var(--accent);
  opacity: 0.9;
  border-radius: 50%;
}

.portrait-stage img {
  position: relative;
  z-index: 1;
  max-height: 520px;
  filter: drop-shadow(0 24px 32px rgba(63, 66, 102, 0.28));
}

/* Fallback, solange das Foto fehlt */
.portrait-fallback {
  position: relative;
  z-index: 1;
  color: var(--petrol-deep);
  font-size: 0.9rem;
  text-align: center;
  padding: 8rem 2rem;
}

/* ---------- Transformations-Band ---------- */

.transform-band {
  background: var(--petrol-deep);
  padding: 4.5rem 0;
  text-align: center;
}

.transform-band .kicker { color: var(--sage); }

.transform-line {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.35;
  color: #fff;
}

.transform-line .from {
  color: var(--sage);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 153, 153, 0.9);
  text-decoration-thickness: 3px;
}

.transform-line .to { color: var(--orange); font-style: italic; }

.transform-band p.sub {
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin: 1.4rem auto 0;
}

/* ---------- Cards ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem; }

.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 6px 24px rgba(63, 66, 102, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(63, 66, 102, 0.14);
}

.card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sage);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  color: var(--petrol-deep);
  margin-bottom: 0.9rem;
}

.card p { font-size: 0.95rem; color: var(--ink-soft); }

.card .card-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--lavender);
  text-decoration: none;
}

.card .card-link:hover { text-decoration: underline; }

/* ---------- Buch ---------- */

.book-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3.5rem;
  align-items: center;
}

.book-cover {
  border-radius: 8px;
  box-shadow: 24px 24px 0 var(--sage), 0 18px 40px rgba(63, 66, 102, 0.25);
}

.book-shop-hint {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.book-facts {
  list-style: none;
  margin: 1.5rem 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.book-facts li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}

.badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  /* auf die Mitte der ERSTEN Zeile setzen, nicht mittig über alle Zeilen */
  margin-top: 0.55em;
}

/* ---------- Foto (Über mich) ---------- */

.photo-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(63, 66, 102, 0.2);
  background: var(--sage-soft);
}

.photo-frame img { width: 100%; object-fit: cover; }

.photo-placeholder {
  background: var(--sage-soft);
  border: 2px dashed var(--sage);
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--petrol-deep);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

/* ---------- Stimmen ---------- */

.quote-text {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

.quote-name {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Hinweis-Box ---------- */

.note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: var(--cream);
  border-left: 4px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.4rem;
  margin-top: 1.6rem;
}

/* ---------- CTA-Band ---------- */

.cta-band {
  background: linear-gradient(135deg, var(--lavender) 0%, var(--petrol-deep) 100%);
  color: #fff;
  text-align: center;
  padding: 4.5rem 0;
}

.cta-band h2 { color: #fff; }
.cta-band h2 em { color: var(--orange); }
.cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 54ch; margin: 0.9rem auto 1.9rem; }

/* ---------- Newsletter-Formular ---------- */

.newsletter-form {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 520px;
  margin: 0 auto;
}

.newsletter-form input {
  flex: 1;
  min-width: 230px;
  padding: 0.9rem 1.2rem;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  /* Mindestens 16px, sonst zoomt iOS beim Antippen automatisch hinein. */
  font-size: 16px;
  color: var(--ink);
}

.newsletter-note {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 1rem auto 0;
}

.newsletter-alt { margin: 2.4rem auto 0; font-size: 0.92rem; }

.newsletter-note a, .newsletter-alt a { color: inherit; }

/* ---------- Instagram-Karte ---------- */

.ig-section { padding: 3.2rem 0; }
.ig-wrap { max-width: 680px; }

.ig-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  text-decoration: none;
  color: inherit;
}

.ig-card img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 8%;
  background: var(--sage-light);
  flex-shrink: 0;
}

.ig-text { flex: 1; min-width: 200px; }
.ig-text strong { font-size: 1.05rem; }
.ig-text p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.ig-arrow { color: var(--ink-soft); font-size: 1.3rem; }

/* ---------- Footer ---------- */

footer {
  background: var(--petrol-deep);
  color: var(--sage);
  padding: 3rem 0;
  font-size: 0.88rem;
}

.footer-signature {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cream);
  margin-bottom: 0.3rem;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

footer a { color: var(--cream); text-decoration: none; }
footer a:hover { color: #fff; }

footer ul { display: flex; gap: 1.5rem; list-style: none; }

/* ---------- Prose (Impressum etc.) ---------- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2rem; }
.prose .placeholder { background: #fdf3d7; padding: 0 4px; border-radius: 3px; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero-grid, .book-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .hero-text { padding-bottom: 0; }
  .portrait-stage { min-height: 380px; margin-top: 1.5rem; }
  .portrait-stage img { max-height: 400px; }
  .book-grid { gap: 2.5rem; }
  .book-cover { max-width: 240px; }
  nav ul { gap: 1rem; }
  nav a { font-size: 0.85rem; }
  .brand small { display: none; }
}

@media (max-width: 540px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Mobil-Feinschliff ----------
   Ziel: kürzere Wege beim Scrollen, größere Flächen zum Antippen,
   kein Text, der am Rand klebt. */

@media (max-width: 640px) {

  /* Abstände deutlich kompakter. Auf dem Handy fühlen sich 5rem
     Sektions-Abstand wie eine leere Seite an. */
  section { padding: 3.2rem 0; }
  .hero { padding-top: 2.2rem; }
  .transform-band, .cta-band { padding: 3.2rem 0; }
  section.press-strip { padding: 2rem 0; }
  .ig-section { padding: 2.4rem 0; }
  .wrap { padding: 0 20px; }

  /* Typografie fürs Handy. Die Grundgröße wird angehoben, dadurch
     wachsen alle rem-Angaben gleichmäßig mit. Kleinteiliges wie Kicker
     und Labels wird zusätzlich angehoben, damit nichts unter ~14px fällt. */
  html { font-size: 17.5px; }
  body { font-size: 1.03rem; line-height: 1.62; }
  .lead { font-size: 1.15rem; line-height: 1.55; }
  h2 { margin-bottom: 0.6rem; }

  .kicker { font-size: 0.82rem; letter-spacing: 0.11em; }
  .press-label { font-size: 0.8rem; }
  .trust-line { font-size: 0.95rem; }
  .card p { font-size: 1rem; }
  .card-link { font-size: 1rem; }
  .book-shop-hint {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.book-facts { font-size: 1rem; }
  .quote-name { font-size: 0.92rem; }
  .badge { font-size: 0.85rem; }
  .newsletter-note { font-size: 0.9rem; opacity: 0.85; }
  .newsletter-form input { font-size: 1rem; }
  footer { font-size: 0.95rem; }

  /* Navigation als Burger-Menü, wie man es vom Handy kennt.
     Kopfzeile bleibt schmal, das Menü klappt darunter auf. */
  .nav { height: 58px; }
  .brand { font-size: 1.24rem; }
  .nav-toggle { display: block; }

  nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--beige-light);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 26px rgba(60, 58, 94, 0.12);
    display: none;
  }
  .nav-open nav { display: block; }

  nav ul { flex-direction: column; gap: 0; padding: 0.2rem 20px 0.6rem; }
  nav li + li { border-top: 1px solid var(--line); }

  nav a {
    display: block;
    font-size: 1.05rem;
    padding: 0.95rem 0;          /* Trefferfläche deutlich über 44px */
  }
  nav a:hover, nav a[aria-current="page"] {
    border-bottom: 0;
    color: var(--petrol-deep);
    font-weight: 700;
  }

  /* Buttons über die volle Breite. Auf dem Handy ist das die
     zuverlässigste Trefferfläche. */
  .btn { display: block; width: 100%; text-align: center; padding: 0.95rem 1.4rem; }
  .hero-cta { gap: 0.7rem; }

  /* Karten kompakter */
  .card { padding: 1.4rem; }
  .card .num { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 0.7rem; }
  .grid-2, .grid-3, .grid-4 { gap: 1rem; }
  .card-link { display: inline-block; padding: 0.6rem 0; }

  /* Das Porträt soll früher kommen. Dafür wird der Textblock aufgelöst
     (display: contents), sodass Foto und Vertrauenszeile frei sortierbar
     sind. Reihenfolge: Einstieg, Button, FOTO, dann die Qualifikationen. */
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;   /* sonst wirkt align-items:end als Rechtsbündigkeit */
  }
  .hero-text { display: contents; }
  .portrait-stage { order: 5; align-self: stretch; }
  .trust-line { order: 6; }

  .trust-desktop { display: none; }
  .trust-mobil { display: block; }

  .launch-lang { display: none; }
  .launch-kurz { display: inline; }
  .launch-bar { font-size: 0.86rem; padding: 0.65rem 16px; }

  /* Der Hero hat unten bewusst keinen Abstand, weil dort auf dem Desktop
     das Foto bis zur Kante läuft. Auf dem Handy steht hier jetzt aber Text,
     der sonst an der Kante klebt. */
  .hero { padding-bottom: 2.2rem; }

  /* Überzeile knapper setzen, damit sie in eine Zeile passt.
     0.05em ist der größte Wert, bei dem sie auf 375px nicht umbricht. */
  .kicker { letter-spacing: 0.05em; }
  .hero-cta { margin-top: 1.7rem; }

  /* Porträt etwas kleiner, damit man schneller zum Inhalt kommt */
  .portrait-stage { min-height: 300px; margin-top: 1.4rem; }
  .portrait-stage img { max-height: 330px; }
  .portrait-stage::after { width: 52px; height: 52px; }

  /* Presse-Namen enger setzen, damit die Reihe gleichmäßiger umbricht */
  .press-row { gap: 0.75rem 1.35rem; }
  .press-eltern  { font-size: 0.9rem; }
  .press-az      { font-size: 1.06rem; }
  .press-bayern2 { font-size: 0.82rem; }
  .press-sz      { font-size: 1.04rem; }
  .press-himbeer { font-size: 0.8rem; letter-spacing: 0.12em; }

  /* Das Buch spricht auf dem Handy für sich: Cover, Titel, Untertitel,
     ein Button. Der ausführliche Text steht auf der Buchseite, wo man
     ihn sucht, wenn man mehr wissen will. */
  .book-teaser-text, .book-shop-hint { display: none; }

  /* Buchcover mittig, Versatz-Schatten kleiner */
  .book-grid { gap: 1.8rem; }
  .book-cover { max-width: 200px; margin: 0 auto; box-shadow: 14px 14px 0 var(--sage), 0 12px 28px rgba(63, 66, 102, 0.22); }

  /* Elternstimmen sind lang und kursiv gesetzt. Auf dem Handy brauchen
     sie spürbar mehr Größe und Zeilenabstand, sonst liest sie niemand. */
  .quote-text { font-size: 1.06rem; line-height: 1.66; }

  /* Newsletter: Feld und Button gestapelt, beide volle Breite */
  .newsletter-form { flex-direction: column; gap: 0.6rem; }
  .newsletter-form input { min-width: 0; width: 100%; }
  .newsletter-alt { margin-top: 1.8rem; }

  /* Instagram-Karte kompakter */
  .ig-card { gap: 1rem; }
  .ig-card img { width: 62px; height: 62px; }
  .ig-arrow { display: none; }

  /* Fußzeile untereinander statt nebeneinander */
  .footer-grid { flex-direction: column; align-items: flex-start; gap: 1rem; }
  footer ul { flex-wrap: wrap; gap: 1.3rem; }
  footer a { display: inline-block; padding: 0.55rem 0; }

  .note { padding: 1rem 1.1rem; }
  .transform-band p.sub { margin-top: 1.1rem; }
  .trust-line { margin-top: 1.8rem; }
}

/* ============================================
   Consent-Banner (siehe consent.js)
   Beide Knöpfe sind bewusst optisch gleich:
   Ablehnen darf nicht schwerer sein als Zustimmen.
   ============================================ */

.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--beige-light);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 28px rgba(60, 58, 94, 0.12);
  display: none;
}

.consent-banner.ist-offen { display: block; }

.consent-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display: flex;
  gap: 1.8rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.consent-text { flex: 1 1 30rem; }

.consent-text h2 {
  font-size: 1.12rem;
  color: var(--petrol-deep);
  margin-bottom: 0.35rem;
}

.consent-text p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
}

.consent-links { margin-top: 0.5rem; display: flex; gap: 1.1rem; }
.consent-links a { color: var(--petrol); text-underline-offset: 3px; }

.consent-knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* beide Knöpfe exakt gleich breit */
  gap: 0.7rem;
}

/* Gleiche Größe, gleiche Schriftstärke, gleicher Rahmen für BEIDE. */
.consent-btn {
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--petrol-deep);
  background: #fff;
  border: 1.5px solid var(--petrol-deep);
  border-radius: 10px;
  padding: 0.85rem 1.4rem;
  min-width: 13.5rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.consent-btn:hover { background: var(--sage-light); }

.consent-btn:focus-visible,
.consent-oeffnen:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Widerruf in der Fußzeile, sieht aus wie die anderen Fußzeilen-Links */
.consent-oeffnen {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Platzhalter für später eingebundene externe Inhalte */
.consent-platzhalter {
  background: var(--sage-light);
  border: 1px dashed var(--sage);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
}

.consent-platzhalter p {
  margin-bottom: 1rem;
  color: var(--ink);
  font-size: 0.95rem;
}

[data-consent] iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
}

@media (max-width: 640px) {
  .consent-inner { padding: 1.1rem 1.1rem 1.3rem; gap: 1.1rem; }
  .consent-text h2 { font-size: 1.05rem; }
  .consent-knoepfe { width: 100%; grid-template-columns: 1fr; }
  .consent-btn { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-btn { transition: none; }
}

/* ============================================
   Farbrhythmus der Startseite (09.09.2026)
   Die drei Beigetöne unterscheiden sich nur um Faktor 1,03,
   sie können den Wechsel nicht tragen. Der Rhythmus im unteren
   Seitenteil läuft deshalb über Salbei und Lila:
   hell → Salbei → hell → Lila → Fußzeile (dunkler).
   ============================================ */

section.sage-strong { background: var(--sage); }
/* Wie bei section.lilac: der kleine Versalien-Kicker braucht auf Salbei mehr
   Tiefe. Im Lavendel wären es nur 3,3:1, mit petrol-deep sind es 6,7:1. */
section.sage-strong .kicker { color: var(--petrol-deep); }

/* Abschluss-Band. Lila statt des dunklen Verlaufs, damit es sich
   von der noch dunkleren Fußzeile darunter absetzt (Kontrast 2,01). */
.cta-final { background: var(--lilac); }
.cta-final h2 { color: #fff; }
.cta-final p {
  /* 0.85 weiß wäre auf diesem Lila nur 3,8:1 und damit unter AA */
  color: rgba(255, 255, 255, 0.95);
  max-width: 54ch;
  margin: 0.9rem auto 1.9rem;
}