/* kidsready.de Landingpage (job-1000, Gestaltung job-1004, Reise job-1007): eigene Abschnitte,
   nutzt die Variablen aus styles.css. Farbcollage + Handkritzel-Sprite (kritzel.svg), an die
   App-Optik angelehnt (Typografie, Rundungen, Knopfformen aus styles.css).
   Seit 1007 ist die Seite eine Reise: die Abschnitte laufen über die volle Breite und
   tragen je ein Farbband (Morgen -> Dschungel -> Abend), der Inhalt bleibt über --lp-rand
   auf 720 px zentriert. Fünf Tiere (tiere.svg) queren ihr Bild an den Scrollfortschritt
   gekoppelt, ein handgezeichneter Pfad (lp.js baut ihn) zieht sich hinter allem durch. */
:root {
  --lp-flieder: #C79BF2;
  --lp-limette: #EDF5D5;
  --lp-sand: #F6D7A6;
  --lp-gruen: #207A4B;
  --lp-abend: #232C47;      /* wie body.abend --sky2 in der App */
  --lp-nacht: #1B2238;      /* wie body.abend --sky */
  --lp-hell: #F2E9D8;       /* wie body.abend --ink: Text auf dem Abendband */
  --lp-hell-gedeckt: #B5B9CC; /* wie body.abend --muted: Fußlinks auf dem Nachtband */
}
/* Seitengrund der Landingpage: eigenes Hellblau statt --sky, damit die Hero-Fläche sich absetzt. */
body { background: #EAF6FF; }
body { -webkit-user-select: text; user-select: text; overscroll-behavior: auto; height: auto; position: relative; }
/* Kein overflow-x: hidden mehr auf .lp: das machte .lp zum Scrollcontainer und view() liefe ins
   Leere. Die Querungen der Tiere clippt ihre Bahn, den Rest fängt html. */
html { overflow-x: clip; }
.lp { --lp-rand: max(20px, calc(50% - 360px)); position: relative; max-width: none; margin: 0; padding: 0; overflow: visible; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Kritzeleien: Linien in --ink. Box folgt dem viewBox-Verhältnis, Strichstärke
   wird aus Boxbreite (--kb) und viewBox-Breite (--kv) auf rund 2,8 CSS-px gerechnet
   (Sprite liest sie über --kw). Grundzustand = fertige Linie; das Einzeichnen ist nur
   Zugabe, wenn lp.js die Klasse "bereit" setzt. ---------- */
.lp-kritzel { --kb: 42; --kv: 100; --kw: calc(2.8 * var(--kv) / var(--kb)); display: block; width: calc(var(--kb) * 1px); height: calc(var(--kb) * 1px); color: var(--ink); flex: none; overflow: visible; pointer-events: none; }
.lp-kritzel use { stroke-dasharray: 480; stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease-out; }
.lp-kritzel.bereit use { stroke-dashoffset: 480; }
.lp-kritzel.bereit.sichtbar use { stroke-dashoffset: 0; }
.lp-kritzel--stern.wackelt { animation: wackel .6s ease-in-out 1; }
.lp-kritzel--welle { --kb: 96; --kv: 120; height: auto; aspect-ratio: 120 / 24; }
.lp-kritzel--kringel { --kb: 80; --kv: 120; height: auto; aspect-ratio: 120 / 60; }
.lp-kritzel--pfeil { --kb: 64; width: 80px; height: 64px; }

/* ---------- Hero: eigene Sandfläche, Blau und Flieder als Collage-Blöcke dahinter ---------- */
.lp-hero { position: relative; isolation: isolate; text-align: center; padding: 44px 24px 44px; margin: 24px var(--lp-rand) 0; background: var(--lp-sand); border-radius: 36px; overflow: visible; }
.lp-hero::before {
  content: ""; position: absolute; z-index: -1; left: -18px; bottom: -14px; width: 42%; height: 72px;
  background: var(--sky); border-radius: 28px; transform: rotate(-4deg);
}
.lp-hero::after {
  content: ""; position: absolute; z-index: -1; right: -14px; top: -20px; width: 144px; height: 112px;
  background: var(--lp-flieder); border-radius: 26px; transform: rotate(6deg);
}
.lp-logo { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.lp-hero-kritzel-welle { position: absolute; top: 24px; right: 24px; }
.lp-hero h1 { font-size: 36px; line-height: 1.12; margin: 0 0 10px; }
.lp-lead { font-size: 19px; color: var(--ink); margin: 0 auto 14px; max-width: 520px; }
.lp-cta-zeile { justify-content: center; position: relative; flex-direction: column; align-items: center; gap: 0; }
.lp-cta-zeile .btn { flex: 0 1 auto; }
.lp-cta-zeile .btn.gross { width: auto; min-width: 220px; margin-top: 12px; }
.lp-hero .btn.grau { background: transparent; border: 0; box-shadow: none; min-height: 44px; min-width: 44px; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; margin-top: 4px; }
.lp-pfeil-zum-knopf { position: absolute; left: calc(50% - 176px); top: -6px; }

/* Primärknopf der Landingpage: dunkleres Grün für Kontrast; --grass bleibt der App. */
.lp .btn.gruen { background: var(--lp-gruen); color: #fff; }

.lp-abschnitt { position: relative; padding: 36px var(--lp-rand); }
/* Die Kinder der Abschnitte liegen über Pfad und Blättern (z 0, nach main im DOM),
   die Bandhintergründe der Abschnitte darunter. So läuft die Linie über die Farbbänder,
   aber nie über Text oder Karten. */
.lp-abschnitt > * { z-index: 1; }
.lp-abschnitt > :not(.lp-tierbahn, .lp-sterne) { position: relative; }
.lp-abschnitt h2 { font-size: 28px; text-align: center; margin: 0 0 18px; }

.lp-liste { font-size: 19px; line-height: 1.5; padding-left: 24px; }
.lp-liste li { margin: 6px 0; }

/* Fliesstext ohne eigene Klasse haengt sonst an der Schriftgroesse, die der Browser
   vorgibt. Auf dem iPad fiel er damit unter die 19 px der Liste darueber und wirkte wie
   Kleingedrucktes, obwohl er die Kernaussage traegt (Befund iPad-Abnahme 23.09.2026). */
.lp-abschnitt--kennst p { font-size: 17px; line-height: 1.6; max-width: 640px; }
.lp-faq .karte b { display: block; font-size: 18px; line-height: 1.3; }
.lp-faq .karte p { font-size: 17px; line-height: 1.6; margin: 6px 0 0; }

/* ---------- Farbbänder der Reise: jedes Band beginnt, wo das vorige endet. Text liegt nur
   auf den hellen Bändern (Tinte --ink) oder auf dem Abendband (helle Tinte --lp-hell); auf
   Warum und Zitat liegt aller Text in Karten. Kontrastwerte stehen im Job-Report 1007. ---------- */
.lp-demo-abschnitt { background: linear-gradient(#EAF6FF, #E6F4EC); }
.lp-abschnitt--kennst { background: linear-gradient(#E6F4EC, #DCEEDD); padding-top: 60px; }
.lp-abschnitt--schritte { background: linear-gradient(#DCEEDD, #CFE5CF); }
.lp-abschnitt--drin { background: linear-gradient(#CFE5CF, #B5D2B8); }
.lp-warum { background: linear-gradient(#B5D2B8, #6F8797); }
.lp-zitat { background: linear-gradient(#6F8797, var(--lp-abend)); }
.lp-abschnitt--faq { background: var(--lp-abend); }
.lp-abschluss { background: linear-gradient(var(--lp-abend), var(--lp-nacht)); }
.lp-footer { background: var(--lp-nacht); }
.lp-abschnitt--faq h2, .lp-abschluss h2 { color: var(--lp-hell); }
.lp-footer .fuss-link { color: var(--lp-hell-gedeckt); }

/* ---------- Demo-Tafel: spielende Nachbildung des echten Boards ---------- */
.lp-demo-abschnitt { padding: 28px var(--lp-rand) 12px; }
.lp-demo-text { text-align: center; font-size: 17px; color: var(--muted); max-width: 480px; margin: 0 auto 16px; }
.lp-demo { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 14px; background: var(--card); border: 3px solid var(--line); border-radius: 28px; box-shadow: var(--schatten); }
.lp-demo .spalte { flex: 1 1 220px; max-width: 260px; }
.lp-demo .spalte-kopf { padding: 6px 10px; }
.lp-demo .figur-knopf { width: 44px; height: 44px; font-size: 28px; }
.lp-demo .kind-name { font-size: 19px; }
.lp-demo .sterne { font-size: 17px; padding: 2px 10px; }
.lp-demo .spalte-inhalt { padding: 8px; gap: 6px; }
.lp-demo .aufgabe { min-height: 52px; padding: 5px 10px; gap: 8px; }
.lp-demo .aufgabe .emo { font-size: 26px; width: 32px; }
.lp-demo .aufgabe .txt { font-size: 16px; }
.lp-demo .aufgabe .box { width: 32px; height: 32px; border-radius: 10px; font-size: 20px; }
.lp-demo .aufgabe.erledigt .box { transition: background-color .2s; }
.lp-demo .sterne.wackelt-stern { animation: wackel .5s ease-in-out 1; }
.lp-demo .fertig-overlay { border-radius: 22px; }
.lp-demo .fertig-overlay .pokal { font-size: 44px; }
.lp-demo .fertig-overlay .fertig-titel { font-size: 20px; }
.lp-demo .fertig-overlay .fertig-text { font-size: 15px; }

@media (max-width: 520px) {
  .lp-demo { flex-direction: column; align-items: stretch; }
  .lp-demo .spalte { max-width: none; }
}

/* ---------- Die drei Schritte und die sechs Kacheln: gleich hohe, ruhige Karten ---------- */
.lp-schritte, .lp-kacheln, .lp-faq { display: grid; gap: 16px; }
.lp-schritte { grid-template-columns: repeat(3, 1fr); }
.lp-kacheln { grid-template-columns: repeat(3, 1fr); }
.lp-schritt, .lp-kachel, .lp-faq .karte { margin: 0; padding: 18px; text-align: left; border: none; border-radius: 24px; }
.lp-faq .karte { border: 3px solid var(--line); border-left: 8px solid var(--line); }
.lp-schritt b, .lp-kachel b { display: block; font-size: 17px; line-height: 1.3; }
.lp-schritt p, .lp-kachel p { font-size: 15px; line-height: 1.5; margin: 6px 0 0; }
.lp-schritt .lp-kritzel { margin-bottom: 8px; }
.lp-schritt--kinder { background: var(--sky); transform: rotate(-1deg); }
.lp-schritt--aufgaben { background: var(--lp-sand); transform: rotate(1deg); }
.lp-schritt--ipad { background: var(--lp-limette); transform: rotate(-1deg); }
.lp-emoji { font-size: 34px; display: block; margin-bottom: 6px; }

.lp-kachel--spalte { background: var(--sky); }
.lp-kachel--sterne { background: var(--lp-sand); }
.lp-kachel--belohnung { background: color-mix(in srgb, var(--lp-flieder) 35%, var(--card)); }
.lp-kachel--timer { background: var(--lp-limette); }
.lp-kachel--vorlesen { background: color-mix(in srgb, var(--sun) 35%, var(--card)); }
.lp-kachel--offline { background: color-mix(in srgb, var(--berry) 18%, var(--card)); }

/* ---------- Neuer Abschnitt: warum das Kind es selbst macht. Die weiße Karte ist seit 1007
   ein ::before auf dem Band, der Abschnitt selbst läuft voll breit. ---------- */
.lp-warum { border-radius: 0; padding: 44px calc(var(--lp-rand) + 28px); margin: 0; }
.lp-warum::before { content: ""; position: absolute; z-index: 1; inset: 8px var(--lp-rand); background: var(--card); border-radius: 36px; }
.lp-warum-innen { max-width: 560px; margin: 0 auto; }
.lp-warum-kopf { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 6px; }
.lp-warum h2 { margin-bottom: 4px; }
.lp-warum p { font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.lp-warum .lp-warum-traeger { font-size: 21px; font-weight: 800; margin: 22px 0 6px; display: flex; align-items: center; gap: 10px; }
.lp-warum .lp-warum-traeger .lp-kritzel { --kb: 40; }

/* ---------- Emily-Abschnitt: wärmster Block, Karte ebenfalls als ::before auf dem Band ---------- */
.lp-zitat { border-radius: 0; padding: 36px calc(var(--lp-rand) + 28px); }
.lp-zitat .klein { color: #4A5878; } /* 5,2:1 auf dem Zitatband, --muted käme nur auf 3,9:1 */
.lp-zitat::before { content: ""; position: absolute; z-index: 1; inset: 0 var(--lp-rand); background: color-mix(in srgb, var(--berry) 20%, var(--sky2)); border-radius: 36px; }
.lp-zitat .lp-kritzel { position: absolute; top: 14px; right: calc(var(--lp-rand) + 22px); color: var(--berry); }
.lp-zitat blockquote { text-align: left; font-size: 20px; font-style: normal; margin: 0 0 10px; background: var(--card); border: none; border-radius: 20px; }
/* Der ganze Text steht im weissen Feld (Christian, 25.09.2026), alle Absaetze in
   derselben Groesse. */
.lp-zitat blockquote p { margin: 0 0 14px; }
.lp-zitat blockquote p:last-child { margin-bottom: 0; }

.lp-abschluss { text-align: center; }
.lp-anmeldekarte { margin: 0 auto; max-width: 440px; border: 4px solid var(--grass); background: color-mix(in srgb, var(--grass) 10%, var(--card)); }
.lp-anmeldekarte form .feld { margin-bottom: 10px; }
.lp-label { display: block; text-align: left; font-size: 16px; font-weight: 700; margin: 0 0 6px; }

/* Ideen-Formular (1029) unter der Emily-Box: gleiche Bauart wie die Anmeldekarte, aber ruhiger
   (Rahmen in Linienfarbe statt Gras), damit der Knopf am Seitenende der Hauptknopf bleibt. */
.lp-ideenkarte { margin: 18px auto 0; max-width: 440px; border: 4px solid var(--line); text-align: left; }
.lp-ideenkarte form .feld { margin-bottom: 12px; }
.lp-ideenkarte .lp-freiwillig { font-weight: 400; color: #4A5878; }
.lp-ideentext { display: block; min-height: 120px; resize: vertical; font-family: inherit; line-height: 1.4; padding-top: 10px; }
.lp-ideenkarte .klein { margin-top: 12px; }
.lp-ideenkarte .klein a { color: inherit; text-decoration: underline; }
.lp-ideenkarte #ideenErgebnis p { margin: 0 0 10px; }
.lp-ideenkarte .lp-fehler { color: var(--ink); font-weight: 700; margin: 0 0 8px; }
/* Honigtopf: aus dem Bild geschoben statt display:none, damit ein Bot es fuer ein echtes Feld haelt */
.lp-honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.lp-footer { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; padding: 24px var(--lp-rand) 88px; }
.lp-footer .fuss-link { margin-top: 0; padding: 10px 4px; }

/* ---------- Sterne am Abend: Kritzel-Sterne in gedecktem Sand, nur in freien Ecken ---------- */
.lp-sterne { position: absolute; inset: 0; pointer-events: none; }
.lp-sterne .lp-kritzel { position: absolute; --kb: 22; color: var(--lp-sand); opacity: .75; }
.lp-sterne .lp-kritzel--gross { --kb: 30; }

/* ---------- Tiere (1007): jedes Tier sitzt in einer Bahn, die volle Breite hat und die
   Querung clippt. Grundzustand ohne Animation = geparkt am rechten Rand (Elefant links).
   Die Querung selbst läuft nur in @supports unten bzw. über lp.js. ---------- */
.lp-tierbahn { position: absolute; left: 0; right: 0; overflow: clip; pointer-events: none; z-index: 1; }
.lp-tierbahn-halter { position: relative; height: 0; z-index: 1; }
.lp-tier { --kw: calc(2.8 * var(--kv) / var(--kb)); position: absolute; display: block; width: calc(var(--kb) * 1px); height: auto; aspect-ratio: var(--kv) / var(--kh); color: var(--ink); overflow: visible; --von: -100vw; right: 12px; }
.lp-tierbahn--papagei { top: -46px; height: 62px; }
.lp-tier--papagei { --kb: 72; --kv: 120; --kh: 100; bottom: 0; }
.lp-tierbahn--affe { top: 0; height: 58px; }
.lp-tier--affe { --kb: 56; --kv: 100; --kh: 100; top: 0; }
.lp-tierbahn--faultier { top: -40px; height: 50px; }
.lp-tier--faultier { --kb: 84; --kv: 120; --kh: 70; top: 0; }
.lp-tierbahn--gecko { bottom: -18px; height: 32px; z-index: 2; }
.lp-tier--gecko { --kb: 84; --kv: 140; --kh: 50; bottom: 0; }
.lp-tierbahn--elefant { top: -28px; height: 58px; }
.lp-tier--elefant { --kb: 66; --kv: 120; --kh: 100; top: 0; left: 12px; right: auto; --von: 100vw; color: var(--lp-hell); }

/* ---------- Blattebenen (1007): zwei Ebenen am Seitenrand, nah zieht schneller als fern.
   Grundzustand ohne Animation = ruhig an ihrem Platz. Unter 900 px gibt es keinen Rand. ---------- */
.lp-blattebene { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.lp-blatt { --kb: 44; --kv: 60; --kw: calc(2.4 * var(--kv) / var(--kb)); position: absolute; display: block; width: calc(var(--kb) * 1px); height: auto; aspect-ratio: 60 / 100; color: #5E8F6B; opacity: .55; overflow: visible; }
.lp-blattebene--fern .lp-blatt { --kb: 32; opacity: .4; }

/* ---------- Pfad (1007): lp.js baut die Linie aus den gemessenen Abschnittsgrenzen und legt
   sie in Dokument-Pixeln hinter alles. Grundzustand = vollständig gezeichnet. ---------- */
.lp-pfad { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
.lp-pfad-linie { fill: none; stroke: url(#lp-pfad-farbe); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 0; --pfad-von: 0; --pfad-bis: 0; }
.lp-pfad-ziel { --kw: 12; color: var(--lp-sand); }

/* ---------- Hereinkommen (1007): Überschriften und Karten kommen 16 px von unten in 0,5 s.
   Grundzustand ist sichtbar; nur lp.js setzt "herein-bereit" und dann "herein-sichtbar". ---------- */
.herein-bereit { translate: 0 16px; opacity: 0; }
.herein-bereit.herein-sichtbar { translate: 0 0; opacity: 1; transition: translate .5s ease-out, opacity .5s ease-out; }

/* ---------- Scrollgekoppelte Bewegung nur, wo der Browser sie kann; sonst greift lp.js
   oder es bleibt beim Grundzustand. ---------- */
@keyframes tier-quert { from { transform: translateX(var(--von)); } to { transform: translateX(0); } }
@keyframes pfad-zeichnen { from { stroke-dashoffset: var(--pfad-von); } to { stroke-dashoffset: var(--pfad-bis); } }
@keyframes blaetter-heben { from { transform: translateY(0); } to { transform: translateY(var(--hub)); } }
@supports (animation-timeline: scroll()) {
  .lp-abschnitt--kennst, .lp-abschnitt--schritte, .lp-abschnitt--drin, .lp-abschluss { view-timeline-name: --abschnitt; }
  .lp-tier { animation: tier-quert linear both; animation-timeline: --abschnitt; }
  .lp-tier--papagei { animation-timeline: scroll(root); animation-range: 0px 320px; }
  .lp-tier--affe { animation-range: entry 0% exit 0%; }
  .lp-tier--faultier { animation-range: entry 0% exit 50%; }
  .lp-tier--gecko { animation-range: entry 100% exit 100%; }
  .lp-tier--elefant { animation-range: entry 0% entry 100%; }
  .lp-pfad-linie { animation: pfad-zeichnen linear both; animation-timeline: scroll(root); }
  .lp-blattebene { animation: blaetter-heben linear both; animation-timeline: scroll(root); }
  .lp-blattebene--nah { --hub: -320px; }
  .lp-blattebene--fern { --hub: -140px; }
}

@media (max-width: 900px) {
  .lp-blattebene { display: none; }
}

@media (max-width: 720px) {
  .lp-schritte, .lp-kacheln { grid-template-columns: 1fr; }
  .lp-schritt, .lp-kachel { transform: none !important; }
  .lp-hero h1 { font-size: 30px; }
  .lp-hero { padding: 44px 18px 44px; }
  .lp-pfeil-zum-knopf { display: none; }
  .lp-hero-kritzel-welle { --kb: 64; top: 18px; right: 18px; }
  .lp-warum { padding: 36px calc(var(--lp-rand) + 18px); }
  .lp-zitat { padding: 36px calc(var(--lp-rand) + 18px); }
  .lp-zitat .lp-kritzel { right: calc(var(--lp-rand) + 14px); }
  .lp-tier--papagei { --kb: 58; }
  .lp-tier--affe { --kb: 46; }
  .lp-tier--faultier { --kb: 68; }
  .lp-tier--gecko { --kb: 68; }
  .lp-tier--elefant { --kb: 54; }
  .lp-sterne .lp-kritzel--weit { display: none; }
  .lp-pfad-linie { stroke-width: 2.5; }
}

/* ---------- Bewegung: sparsam, per prefers-reduced-motion abschaltbar (Pflicht) ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-kritzel use { transition: none; stroke-dashoffset: 0; }
  .lp-kritzel--stern.wackelt { animation: none; }
  .lp-demo .aufgabe, .lp-demo .box { transition: none; }
  .lp-demo .sterne.wackelt-stern { animation: none; }
  /* 1007: keine Querung, kein Einzeichnen, kein Parallax, kein Hereinkommen */
  .lp-tier, .lp-blattebene { animation: none !important; transform: none !important; }
  .lp-pfad-linie { animation: none !important; stroke-dashoffset: 0 !important; }
  .herein-bereit, .herein-bereit.herein-sichtbar { translate: none; opacity: 1; transition: none; }
}