/* SchreibMama — website styles
   Palette mirrors the app's ui/theme/Color.kt so site and app read as one brand.
   No webfonts by design: a Google Fonts request would send visitor IPs to a third
   party, which the app's privacy declaration deliberately avoids. */

:root {
  --primary:#3B6EF3; --primary-dark:#2450C8; --primary-soft:#E7EEFF;
  --success:#2FBF71; --success-soft:#E2F7EC;
  --sun:#FFC940; --orange:#FF8A34; --orange-soft:#FFEEDF;
  --coral:#F0526D; --violet:#8B5CF6;
  --ink:#2B2440; --ink-muted:#6E6786;
  --bg:#FFFBF2; --bg-soft:#FAF3E3; --card:#ffffff; --hairline:#EADACB; /* Creme wie Latein */
  --shadow:0 18px 50px rgba(43,36,64,.10);
  --radius:28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary:#9DB6FF; --primary-dark:#9DB6FF; --primary-soft:#232042;
    --success:#6BDCA0; --success-soft:#1B3A2B;
    --orange-soft:#3A2A1B;
    --ink:#ECE8FA; --ink-muted:#A9A2C4;
    --bg:#141220; --bg-soft:#1A1729; --card:#1E1B2E; --hairline:#322C48;
    --shadow:0 18px 50px rgba(0,0,0,.45);
  }
}

* { box-sizing:border-box }

html { scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }

body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

a { color:inherit; text-decoration:none }

.skip {
  position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff;
  padding:12px 18px; border-radius:0 0 12px 0; z-index:100;
}
.skip:focus { left:0 }

:focus-visible { outline:3px solid var(--primary); outline-offset:3px; border-radius:6px }

/* ── nav ── */
.nav {
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:16px 7%;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hairline);
}
.brand { display:flex; align-items:center; font-weight:800; font-size:22px; letter-spacing:-.02em }
.brand img { width:42px; height:42px; border-radius:12px; margin-right:10px }
.nav nav { display:flex; gap:22px; align-items:center; color:var(--ink-muted); font-weight:600 }
.nav nav a:hover { color:var(--ink) }
/* ── Nav-Button ──
   Auf dem erkannten Gerät steht dort das offizielle Badge des passenden Stores
   (iOS → Apple, Android → Google Play), sonst eine schwarze Pille mit neutralem
   Download-Pfeil, die auf /download/ führt. Immer nur EIN Badge, unverändert
   und nie mit dem anderen kombiniert — beides verbieten die Markenrichtlinien
   von Apple und Google. Ohne JavaScript bleibt es bei der Pille. */
.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:#000; color:#fff !important; padding:13px 18px; border-radius:18px;
}
.nav-cta:hover { background:#23202e }
.nav-cta-text { display:inline-flex; align-items:center; gap:8px; white-space:nowrap }
.nav-cta-text svg { width:17px; height:17px; flex:0 0 auto }
.nav-badge { display:none }

/* Badge-Modus: keine Pille drumherum, das Badge bringt seinen eigenen Rahmen mit.
   Die Polsterung hält die Trefferfläche trotz 36 px Bildhöhe bei 44 px. */
.plat-ios .nav-cta, .plat-android .nav-cta {
  background:none; padding:4px 0; border-radius:12px;
}
.plat-ios .nav-cta:hover, .plat-android .nav-cta:hover { background:none; opacity:.85 }
.plat-ios .nav-cta-text, .plat-android .nav-cta-text { display:none }
/* Originalverhältnisse: Apple 119,66:40, Google 646:250. Google liefert oben und
   unten je 29 von 250 px Schutzraum mit, deshalb die höhere Zahl — optisch sind
   beide Logos gleich groß (46,9 × 0,768 ≈ 36). */
.plat-ios .nav-badge-ios { display:block; width:107.7px; height:36px }
.plat-android .nav-badge-play { display:block; width:121.2px; height:46.9px }

/* ── hero ── */
.hero {
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding:72px 7% 64px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.eyebrow { color:var(--primary); font-weight:800; margin:0 }
.hero h1 { font-size:clamp(40px,6vw,72px); line-height:1.02; margin:10px 0 22px; letter-spacing:-.045em }
.lead { font-size:20px; line-height:1.5; color:var(--ink-muted); max-width:640px; margin:0 }
.note { color:var(--ink-muted); font-size:15px; max-width:520px; line-height:1.5 }

/* ── Store-Links ──
   Stehen im Hero direkt unter der Überschrift, damit sie auf dem Handy ohne
   Scrollen sichtbar sind. Es sind die unveränderten offiziellen Badges von
   Apple und Google (deutsche Fassung, schwarz) aus assets/badges/ — dieselben
   Dateien wie auf /download/. Die Seitenverhältnisse sind exakt die der
   Originale und dürfen nie gerundet werden, Verzerren verbieten beide
   Richtlinien. Googles PNG hat oben und unten je 29 px transparenten
   Schutzraum (192 von 250 px sind Badge), deshalb steht Play auf 68 px:
   68 × 0,768 ≈ 52, damit beide Logos gleich hoch *wirken*. */
.stores { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:28px 0 18px }
.stores.center { justify-content:center; margin:28px auto 0 }
.store-badge { display:inline-flex; align-items:center; justify-content:center }
.store-badge img { display:block }
.store-badge-ios img { width:155.56px; height:52px }
.store-badge-play img { width:175.71px; height:68px }
.store-badge:hover { opacity:.85 }
.store-badge:focus-visible { outline:3px solid var(--primary); outline-offset:3px; border-radius:12px }

.hero-visual { display:flex; justify-content:center }
.phone {
  width:min(300px,80vw); padding:12px; border-radius:44px;
  background:var(--card); box-shadow:var(--shadow);
  border:1px solid var(--hairline);
}
.phone img { display:block; width:100%; height:auto; border-radius:33px }

/* ── wordcloud band ── */
.band { line-height:0; background:var(--bg-soft) }
.band img { display:block; width:100%; max-width:1600px; height:auto; margin:0 auto }

/* ── sections ── */
.section { padding:72px 7% }
.section h2 { font-size:clamp(30px,3.6vw,48px); letter-spacing:-.035em; text-align:center; margin:0 0 12px }
.section-lead { text-align:center; color:var(--ink-muted); font-size:19px; max-width:640px; margin:0 auto 36px }
.soft { background:var(--bg-soft) }

.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.grid.three { grid-template-columns:repeat(3,1fr) }
.cards article {
  background:var(--card); border-radius:var(--radius); padding:28px;
  box-shadow:var(--shadow); border:1px solid var(--hairline);
}
.cards h3 { font-size:21px; margin:18px 0 8px; letter-spacing:-.02em }
.cards p, .split p, .pro p { color:var(--ink-muted); font-size:17px; line-height:1.55; margin:0 }
.icon { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:22px }
.blue { background:var(--primary) } .green { background:var(--success) }
.orange { background:var(--orange) } .violet { background:var(--violet) }

/* ── steps ── */
/* The number comes from a counter rather than a <span>, so the browser's own
   list marker can never double up with a hand-written one if the stylesheet
   fails to load. With no CSS at all this degrades to a plain ordered list. */
.steps { list-style:none; padding:0; margin:36px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step }
.steps li { counter-increment:step; background:var(--card); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); border:1px solid var(--hairline) }
.steps li::before {
  content:counter(step);
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--primary-soft); color:var(--primary); font-weight:900; font-size:20px;
}
.steps h3 { font-size:21px; margin:18px 0 8px; letter-spacing:-.02em }
.steps p { color:var(--ink-muted); font-size:17px; line-height:1.55; margin:0 }

/* ── split / results ── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center }
.split h2 { text-align:left }
.result-box { background:var(--card); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); border:1px solid var(--hairline) }
.result-box h3 { margin:0 0 14px; font-size:20px }
.green-text { color:var(--success) !important; font-weight:800; margin:18px 0 8px }
.orange-text { color:var(--orange) !important; font-weight:800; margin:18px 0 8px }
.row { border-radius:14px; padding:14px 18px; margin:10px 0; font-weight:700; display:flex; justify-content:space-between }
.good { background:var(--success-soft) } .warn { background:var(--orange-soft) }

/* ── screens ── */
.screens { display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.screens figure { margin:0; text-align:center }
.screens img {
  width:100%; height:auto; border-radius:26px; border:1px solid var(--hairline);
  box-shadow:var(--shadow); background:var(--card);
}
.screens figcaption { margin-top:12px; color:var(--ink-muted); font-weight:600; font-size:15px }
.swipe-hint { display:none; text-align:center; color:var(--ink-muted); font-size:14px; margin:16px 0 0 }

/* Der Ergebnis-Screenshot neben dem Text — gleicher Rahmen wie im Hero. */
.split-visual { display:flex; justify-content:center }
.split-visual .phone { width:min(260px,72vw) }
/* Zweiter Split in Folge: Bild links, damit die Seite nicht zweimal gleich aussieht. */
.split.flip .split-visual { order:-1 }

/* ── pro ── */
.pro { text-align:center; background:var(--card); border:1px solid var(--hairline); border-radius:36px; box-shadow:var(--shadow); max-width:820px; margin:0 auto; padding:44px 32px }
.pro h2 { margin-bottom:10px }
.star { margin:0 auto 16px; width:82px; height:82px; border-radius:50%; display:grid; place-items:center; background:var(--sun); color:#fff; font-size:40px }
.checks { list-style:none; display:grid; gap:12px; margin:26px auto 0; max-width:520px; text-align:left; padding:0 }
.checks li { position:relative; padding-left:34px; font-size:18px; font-weight:600 }
.checks li::before { content:"✓"; position:absolute; left:0; color:var(--success); font-weight:900 }
.fineprint { margin-top:26px !important; font-size:14px !important; color:var(--ink-muted) }

/* ── cta ── */
.cta { text-align:center; background:linear-gradient(135deg,#3B6EF3,#8B5CF6); color:#fff }
.cta h2, .cta p { color:#fff }
.cta p { opacity:.92; font-size:19px }
/* Die Store-Badges bringen ihre eigene schwarze Fläche mit und stehen daher
   auf dem Farbverlauf genauso wie auf Weiß — kein Sonderfall nötig. */

/* ── footer ── */
.footer { background:var(--bg-soft); border-top:1px solid var(--hairline); padding:30px 0 }
.footer-container { max-width:1200px; margin:0 auto; padding:0 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px }
.footer-left { color:var(--ink-muted); font-size:15px }
.footer-right { display:flex; gap:28px; flex-wrap:wrap }
.footer-right a { color:var(--ink-muted); font-size:15px; font-weight:500 }
.footer-right a:hover { color:var(--primary) }

/* ── responsive ── */
@media (max-width:980px) {
  .hero, .split { grid-template-columns:1fr }
  .split h2 { text-align:center }
  .split p { text-align:center }
  .grid, .grid.three, .screens { grid-template-columns:1fr 1fr }
  .split.flip .split-visual { order:0 }
  .steps { grid-template-columns:1fr }
  .nav nav { display:none }
  .hero-copy { text-align:center }
  .stores { justify-content:center }
  .note, .lead { margin-left:auto; margin-right:auto }
}

/* ── Handy ──
   Ziel: eine Spalte, kurze Wege, nichts Doppeltes. Die Store-Links stehen
   im Hero über der Falz; alles darunter ist gestapelt und kleiner gesetzt. */
@media (max-width:600px) {
  .section, .hero { padding-left:20px; padding-right:20px }
  .section { padding-top:52px; padding-bottom:52px }
  .hero { padding-top:36px; padding-bottom:44px; gap:34px }

  .nav { padding:12px 20px }
  .brand { font-size:19px }
  .brand img { width:34px; height:34px; margin-right:8px }
  .nav-cta { padding:13px 14px; font-size:15px; border-radius:15px; gap:6px }
  .nav-cta-text { gap:6px }
  .nav-cta-text svg { width:15px; height:15px }
  .plat-ios .nav-cta, .plat-android .nav-cta { padding:6px 0 }
  .plat-ios .nav-badge-ios { width:95.7px; height:32px }
  .plat-android .nav-badge-play { width:107.8px; height:41.7px }

  .hero h1 { font-size:clamp(31px,8.6vw,40px); margin:8px 0 14px }
  .lead { font-size:17px }
  .eyebrow { font-size:15px }
  .note { font-size:14px }

  /* Badges nur verkleinern, nie strecken. Wird es noch enger, bricht
     flex-wrap sie von selbst untereinander. */
  .stores { justify-content:center; gap:8px; margin:22px 0 14px }
  .store-badge-ios img { width:131.63px; height:44px }
  .store-badge-play img { width:148.06px; height:57.3px }

  .section h2 { font-size:clamp(25px,6.6vw,32px) }
  .section-lead { font-size:16px; margin-bottom:26px }
  .grid, .grid.three { grid-template-columns:1fr; gap:14px }
  .cards article, .steps li { padding:22px; border-radius:22px }
  .cards h3, .steps h3 { font-size:19px; margin-top:14px }
  .cards p, .steps p, .split p, .pro p { font-size:16px }
  .icon { width:40px; height:40px; border-radius:13px; font-size:19px }
  .steps { gap:14px; margin-top:26px }

  .pro { padding:32px 22px; border-radius:28px }
  .star { width:64px; height:64px; font-size:31px }
  .checks li { font-size:16px }

  .split { gap:28px }
  .split-visual .phone { width:min(230px,64vw) }

  .footer-container { flex-direction:column; text-align:center; gap:16px }
  .footer-right { justify-content:center; gap:18px }

  /* Vier gestapelte Screenshots machen die Seite auf dem Handy ~8000px hoch.
     Stattdessen wischen, mit Snap-Punkten. */
  .screens {
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 20px 8px; margin:0 -20px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .screens::-webkit-scrollbar { display:none }
  .screens figure { flex:0 0 66%; scroll-snap-align:center }
  .screens figcaption { font-size:14px; margin-top:10px }
  .swipe-hint { display:block }
}

/* ── Rechtsseiten (Datenschutz, EULA, Impressum, Support) ──
   Gleiche Marke wie die Startseite, jetzt auch farblich: warm-cremefarbener
   Grund wie im Hero, darauf die Textspalte als weiße Karte mit derselben
   Rundung, demselben Schatten und derselben Haarlinie wie die Karten auf der
   Startseite. <body> braucht dafür class="legal-page".
   Keine Inline-Styles in den Unterseiten. */
.legal-page { background:linear-gradient(180deg, var(--bg) 0, var(--bg-soft) 260px) }
.legal {
  max-width:860px; margin:40px auto 72px; padding:48px 52px 56px;
  background:var(--card); border:1px solid var(--hairline);
  border-radius:36px; box-shadow:var(--shadow);
}
/* „Datenschutzerklärung" passt bei 320 px in keine Zeile. <html lang="de">
   ist gesetzt, also trennt der Browser korrekt deutsch statt umzubrechen. */
.legal h1 { font-size:clamp(30px,5vw,52px); letter-spacing:-.04em; margin:0 0 10px }
.legal h1, .legal h2, .legal h3 { overflow-wrap:break-word; hyphens:auto }
.legal p, .legal li, .legal address, .legal a { overflow-wrap:break-word }
.legal .updated { color:var(--ink-muted); font-size:15px; margin:0 0 34px }
.legal h2 { font-size:clamp(21px,2.4vw,26px); letter-spacing:-.02em; margin:38px 0 10px }
.legal h3 { font-size:18px; margin:24px 0 6px; letter-spacing:-.01em }
.legal p, .legal li { font-size:17px; line-height:1.62; color:var(--ink-muted) }
.legal strong { color:var(--ink) }
.legal a { color:var(--primary); font-weight:700 }
.legal a:hover { text-decoration:underline }
.legal ul, .legal ol { padding-left:22px }
.legal li { margin-bottom:8px }
.legal address { font-style:normal; color:var(--ink-muted); font-size:17px; line-height:1.62 }

.callout {
  background:var(--primary-soft); border-left:5px solid var(--primary);
  padding:18px 22px; border-radius:18px; margin:24px 0;
}
.callout p { margin:0; color:var(--ink) }
.callout p + p { margin-top:10px }

.legal-card {
  background:var(--bg-soft); border:1px solid var(--hairline); border-radius:22px;
  padding:24px 26px; margin:22px 0;
}
.legal-card h2, .legal-card h3 { margin-top:0 }

.faq-item { padding:18px 0; border-bottom:1px solid var(--hairline) }
.faq-item:last-child { border-bottom:0 }
.faq-item strong { display:block; margin-bottom:6px; font-size:17px }
.faq-item p { margin:0 }

.email-button { display:inline-block; margin-top:14px; padding:15px 24px; background:var(--primary); color:#fff !important; border-radius:20px; font-weight:800 }
.email-button:hover { background:var(--primary-dark); text-decoration:none !important }

.back { display:inline-block; margin-top:38px; padding:14px 22px; background:var(--primary-soft); color:var(--primary) !important; border-radius:20px; font-weight:800 }
.back:hover { text-decoration:none !important }

@media (max-width:760px) {
  .legal { margin:22px 16px 48px; padding:30px 22px 34px; border-radius:26px }
  .legal h1 { font-size:clamp(27px,7.4vw,40px) }
  .legal p, .legal li { hyphens:auto }
  .legal-card { padding:20px 18px; border-radius:18px; margin:18px 0 }
  .callout { padding:16px 18px; border-radius:16px }
}

/* Im Dunkelmodus ist --primary ein helles Blau (#9DB6FF); weiße Schrift darauf
   erreicht den WCAG-Kontrast nicht. Gefüllte Buttons bekommen dort dunkle Schrift. */
@media (prefers-color-scheme: dark) {
  .email-button { color:#141220 !important }
  .nav-cta { box-shadow:0 0 0 1px #3f3a52 }
  .plat-ios .nav-cta, .plat-android .nav-cta { box-shadow:none }
  .skip { color:#141220 }
}

/* ── Download-Seite (/download/) ──
   Bewusst minimal: Logo, Überschrift, Status, beide offiziellen Store-Badges.
   Alle Regeln sind mit .dl- präfixiert bzw. an die <html>-Klassen der Seite
   gebunden; keine andere Seite ändert dadurch ihr Aussehen.
   Die Badges sind die Originaldateien von Apple und Google. Höhe und Breite
   stehen fest im Verhältnis der Originale (Apple 119,66:40, Google 646:250) —
   nichts wird verzerrt, und der Platz ist vor dem Laden reserviert.
   Google liefert oben und unten je 29 von 250 Pixeln Schutzraum mit; deshalb
   ist das Play-Badge nominell höher gesetzt, damit beide Logos gleich groß
   wirken (68 × 0,768 ≈ 52). */
.dl-page {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:34px 22px 42px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
@supports (min-height:100svh) { .dl-page { min-height:100svh } }

.dl { width:100%; max-width:420px; text-align:center }

.dl-logo {
  display:block; margin:0 auto 18px;
  width:80px; height:80px; border-radius:22px;
  box-shadow:var(--shadow);
}

.dl-title { font-size:clamp(27px,7.2vw,36px); line-height:1.14; letter-spacing:-.035em; margin:0 0 12px }

.dl-status { margin:0 0 8px; font-size:17px; font-weight:700; color:var(--primary) }
.dl-hint { margin:0 0 24px; font-size:15px; line-height:1.5; color:var(--ink-muted) }

/* Ohne JavaScript und auf dem Desktop: keine Statuszeile, dafür der neutrale
   Hinweis – es wird ja nichts geöffnet. */
.dl-status, .dl-hint-auto { display:none }
.is-redirecting.plat-ios .dl-status-ios,
.is-redirecting.plat-android .dl-status-android,
.is-redirecting .dl-hint-auto { display:block }
.is-redirecting .dl-hint-manual { display:none }

.dl-stores { display:flex; flex-direction:column; align-items:center; gap:14px }

/* Das Badge des erkannten Geräts steht oben. */
.plat-android .dl-badge-android { order:1 }
.plat-android .dl-badge-ios { order:2 }

.dl-badge {
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px; border-radius:16px;
}
.dl-badge img { display:block }
.dl-badge-ios img { width:155.56px; height:52px }
.dl-badge-android img { width:175.71px; height:68px }
.dl-badge:focus-visible { outline:3px solid var(--primary); outline-offset:3px; border-radius:16px }

@media (max-width:360px) {
  .dl-badge-ios img { width:143.6px; height:48px }
  .dl-badge-android img { width:162.2px; height:62.8px }
}

/* Unter 400 px konkurriert der Download-Pfeil mit dem Markennamen um die
   Kopfzeile — dann gewinnt der Name, der Pfeil entfällt. Die Beschriftung
   „App laden" trägt die Bedeutung ohnehin allein. */
@media (max-width:400px) {
  .nav-cta-text svg { display:none }
  .nav-cta-text { gap:0 }
}

/* ── Französische Seiten (/fr/) ──
   Das offizielle französische App-Store-Badge ist breiter als das deutsche.
   Höhe wie gehabt, Breite aus dem Seitenverhältnis der SVG — nie verzerren. */
html[lang="fr"] .store-badge-ios img,
html[lang="fr"] .dl-badge-ios img,
html[lang="fr"].plat-ios .nav-badge-ios { width:auto }

/* ── Sprachumschalter (App-Logos DE / FR) ──
   Steht in jeder Kopfzeile neben dem Nav-Button und bleibt auf allen Breiten
   sichtbar (die Hauptnavigation verschwindet unter 980 px, dieser nicht).
   Er verlinkt immer auf die entsprechende Seite der anderen Sprache — keine
   automatische Weiterleitung nach Browsersprache (Google rät davon ab). */
.nav-end { display:flex; align-items:center; gap:18px }
.nav nav.lang-switch { display:flex; gap:2px; align-items:center }
/* Die drei App-Logos sind der Umschalter (SchreibMama, SchreibMama Français,
   SchreibMama Latein). Die aktuelle App trägt einen Ring in der Primärfarbe,
   die anderen sind leicht zurückgenommen. 30 px Logo + 7 px Polsterung
   = 44 px Trefferfläche. */
.lang-switch a {
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px; border-radius:14px;
}
.lang-switch img { display:block; width:30px; height:30px; border-radius:9px; opacity:.55; transition:opacity .15s }
.lang-switch a:hover img, .lang-switch a:focus-visible img { opacity:1 }
.lang-switch a[aria-current="page"] img { opacity:1; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--primary) }
/* Unter 600 px ist neben Markenname und Store-Button nur noch für zwei der
   drei App-Logos Platz: das Logo der gerade geöffneten App entfällt, die beiden
   anderen bleiben — sonst läuft die Kopfzeile seitlich über. */
@media (max-width:600px) {
  .nav { gap:10px }
  .nav-end { gap:6px }
  .nav .lang-switch a[aria-current="page"] { display:none }
}
/* Schmale Handys: Luft sparen, damit die beiden verbleibenden Logos auch bei
   320 px neben dem Markennamen Platz haben. */
@media (max-width:430px) {
  .nav { padding-left:14px; padding-right:14px; gap:8px }
  .nav-end { gap:2px }
  .nav nav.lang-switch { gap:0 }
  .lang-switch a { padding:8px 5px }
  .lang-switch img { width:28px; height:28px; border-radius:8px }
  .brand { font-size:17px }
  .brand img { width:30px; height:30px; margin-right:7px }
  .nav-cta { padding-left:10px; padding-right:10px; font-size:14px }
}
/* Handys bis 480 px: seit vier Apps (DE, FR, Latein, English, 15.10.2026)
   passen die Logos nicht mehr neben Markenname und Store-Button (auf dem iPhone
   ist das Badge 108 px breit). Der Umschalter bekommt deshalb eine eigene,
   zentrierte Zeile unter Markenname und Button — alle vier Logos, auch das der
   geöffneten App mit Ring, je 44 px Trefferfläche. .nav-end wird dafür
   aufgelöst (display:contents), damit der Umschalter in der .nav umbrechen kann. */
@media (max-width:480px) {
  .nav { flex-wrap:wrap; row-gap:2px }
  .nav-end { display:contents }
  .nav nav.lang-switch { order:3; flex-basis:100%; justify-content:center; gap:10px }
  .nav .lang-switch a[aria-current="page"] { display:inline-flex }
  .lang-switch a { padding:7px }
  .lang-switch img { width:30px; height:30px; border-radius:9px }
}


/* Das französische Google-Play-Badge (478 × 142) hat KEINEN eingebauten
   Schutzraum, anders als das deutsche (646 × 250, oben/unten je 29/250).
   Deshalb eigene Maße: Höhe = sichtbare Höhe des deutschen Badges, Breite aus
   dem Seitenverhältnis. Nie die deutschen Zahlen übernehmen — sonst verzerrt. */
html[lang="fr"] .store-badge-play img { width:auto; height:52px }
html[lang="fr"].plat-android .nav-badge-play { width:auto; height:36px }
html[lang="fr"] .dl-badge-android img { width:auto; height:52px }
@media (max-width:600px) {
  html[lang="fr"] .store-badge-play img { width:auto; height:44px }
  html[lang="fr"].plat-android .nav-badge-play { width:auto; height:32px }
}
@media (max-width:360px) {
  html[lang="fr"] .dl-badge-android img { width:auto; height:48px }
}

/* ── Farbwelt der Latein-App (/latein/) ──
   Eigene App, eigene Palette: Terrakotta, Oliv und Gold auf Marmor-Creme,
   gespiegelt aus apps/lib/theme.dart der App SchreibMama Latein. Nur die
   Variablen werden neu gesetzt — Aufbau, Abstände und Bausteine bleiben exakt
   die der deutschen und französischen Seiten. <body class="theme-la">. */
.theme-la {
  --primary:#C96F4A; --primary-dark:#A85434; --primary-soft:#F7E4D9;
  --success:#5E9A62; --success-soft:#E6F1E4;
  --sun:#D9A441; --orange:#D9A441; --orange-soft:#F7ECD6;
  --coral:#C75B4E; --violet:#7A8B4C;
  --ink:#3B2F2A; --ink-muted:#7C6A5E;
  --bg:#FFFBF2; --bg-soft:#FAF3E3; --card:#ffffff; --hairline:#EADACB;
  --shadow:0 18px 50px rgba(59,47,42,.10);
  background:var(--bg); color:var(--ink);
}
/* Der Verlauf im Abschluss-Abschnitt steht fest im Stylesheet (nicht als
   Variable), deshalb hier eigens für Latein: Terrakotta → Plum des App-Icons. */
.theme-la .cta { background:linear-gradient(135deg,#C96F4A,#5A1F41) }

@media (prefers-color-scheme: dark) {
  .theme-la {
    --primary:#E39174; --primary-dark:#E39174; --primary-soft:#3A2A22;
    --success:#8CC08F; --success-soft:#243322;
    --sun:#E0B45F; --orange:#E0B45F; --orange-soft:#3A2E1B;
    --ink:#F3E9DC; --ink-muted:#BDAB9B;
    --bg:#1B1512; --bg-soft:#241B16; --card:#2A2019; --hairline:#493829;
    --shadow:0 18px 50px rgba(0,0,0,.45);
  }
}

/* ── Farbwelt der Englisch-App (/english/) ──
   Navy und Rot aus dem Union Jack des App-Logos, Creme wie dessen Hintergrund
   (#F7EBD7). Wie bei Latein werden nur die Variablen neu gesetzt.
   <body class="theme-en">. App noch nicht veröffentlicht (Stand 15.10.2026):
   statt Store-Badges stehen Platzhalter (.store-soon), der Nav-Button ist eine
   Pille ohne Store-Links (.nav-cta.soon). */
.theme-en {
  --primary:#1F4E9A; --primary-dark:#163A75; --primary-soft:#E2EAF6;
  --success:#3F8F55; --success-soft:#E3F1E6;
  --sun:#E3A72F; --orange:#E3A72F; --orange-soft:#F8ECD3;
  --coral:#C8102E; --violet:#6B4FA0;
  --ink:#1E2433; --ink-muted:#5E6577;
  --bg:#FFF9F0; --bg-soft:#F7EBD7; --card:#ffffff; --hairline:#E8DCC6;
  --shadow:0 18px 50px rgba(30,36,51,.10);
  background:var(--bg); color:var(--ink);
}
.theme-en .cta { background:linear-gradient(135deg,#1F4E9A,#C8102E) }
@media (prefers-color-scheme: dark) {
  .theme-en {
    --primary:#7FA6E8; --primary-dark:#7FA6E8; --primary-soft:#1F2A40;
    --success:#86C495; --success-soft:#1E3324;
    --sun:#E8B75A; --orange:#E8B75A; --orange-soft:#3A2F1A;
    --coral:#F0707F;
    --ink:#EEF0F6; --ink-muted:#A9B0C2;
    --bg:#12151D; --bg-soft:#1A1E29; --card:#212634; --hairline:#323A4E;
    --shadow:0 18px 50px rgba(0,0,0,.45);
  }
}
/* SchrijfMama (Niederländisch, /nl/): Blau/Rot der Flagge, Oranje als Akzent.
   App noch nicht veröffentlicht, Aufbau wie /english/. */
.theme-nl {
  --primary:#21468B; --primary-dark:#18346A; --primary-soft:#E1E8F5;
  --success:#3F8F55; --success-soft:#E3F1E6;
  --sun:#F28C1B; --orange:#F28C1B; --orange-soft:#FCE9D3;
  --coral:#AE1C28; --violet:#6B4FA0;
  --ink:#1E2433; --ink-muted:#5E6577;
  --bg:#FFF9F0; --bg-soft:#F7EBD7; --card:#ffffff; --hairline:#E8DCC6;
  --shadow:0 18px 50px rgba(30,36,51,.10);
  background:var(--bg); color:var(--ink);
}
.theme-nl .cta { background:linear-gradient(135deg,#AE1C28,#21468B) }
@media (prefers-color-scheme: dark) {
  .theme-nl {
    --primary:#86A6E3; --primary-dark:#86A6E3; --primary-soft:#1F2A40;
    --success:#86C495; --success-soft:#1E3324;
    --sun:#F5A54E; --orange:#F5A54E; --orange-soft:#3A2B18;
    --coral:#EE7480;
    --ink:#EEF0F6; --ink-muted:#A9B0C2;
    --bg:#12151D; --bg-soft:#1A1E29; --card:#212634; --hairline:#323A4E;
    --shadow:0 18px 50px rgba(0,0,0,.45);
  }
}
/* Begrüßungsbild der App statt Handy-Screenshot (noch keine Store-Screenshots). */
.welcome-card { max-width:560px; width:100% }
.welcome-card img { display:block; width:100%; height:auto; border-radius:24px; box-shadow:var(--shadow) }
/* Platzhalter für die Store-Badges, bis die App live ist. */
.store-soon {
  display:inline-flex; flex-direction:column; justify-content:center; min-width:156px; height:52px;
  padding:0 16px; border:2px dashed var(--hairline); border-radius:12px; color:var(--ink-muted);
  font-size:13px; line-height:1.25; text-align:left
}
.store-soon strong { color:var(--ink); font-size:16px }
.cta .store-soon { border-color:rgba(255,255,255,.6); color:rgba(255,255,255,.85) }
.cta .store-soon strong { color:#fff }
.plat-ios .nav-cta.soon, .plat-android .nav-cta.soon { background:#000; padding:13px 18px; border-radius:18px }
.plat-ios .nav-cta.soon .nav-cta-text, .plat-android .nav-cta.soon .nav-cta-text { display:inline-flex }