/* Förderverein der Integrativen Kita Lerchenberg e. V. - gemeinsames Designsystem */

:root {
    color-scheme: light;
    --cream: #fdf9ef;
    --cream-deep: #faf2df;
    --navy: #0e2c73;
    --navy-deep: #0a2050;
    --body: #33405e;
    --muted: #4a5878;
    --line: rgba(14, 44, 115, .14);
    --field: #b9c3d8;
    --hill-light: #e8eec8;
    --hill-mid: #ccd996;
    --teal: #369d9b;
    --orange: #f78527;
    --blue: #235fb3;
    --purple: #7e43ab;
    --red: #e9454c;
    /* Abgedunkelte Markenfarben mit ausreichendem Kontrast auf Creme. */
    --teal-ink: #2c8a85;
    --orange-ink: #d96a12;
    --pink-ink: #d3479e;
    --yellow-ink: #b07c05;
    --red-ink: #d8323c;
    --error: #b3252d;
    --shell: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--body);
    font: 16px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-wrap: break-word;
}

h1, h2, h3, legend { color: var(--navy); line-height: 1.15; letter-spacing: -.015em; hyphens: auto; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); margin: 0 0 18px; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 12px; }
h3 { font-size: 1.05rem; margin: 0 0 8px; }
p { margin: 0 0 16px; }
img { max-width: 100%; height: auto; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; border-radius: 6px; }

.shell { width: min(var(--shell), calc(100% - 32px)); margin-inline: auto; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; }

.skip-link {
    position: absolute; left: -9999px; top: 8px; z-index: 20;
    padding: 10px 16px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 700;
}
.skip-link:focus { left: 16px; color: #fff; }

/* Kopfbereich und Navigation */
.site-header { padding: 14px 0; background: var(--cream); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.brand { display: inline-flex; }
.brand img { width: clamp(72px, 12vw, 116px); height: auto; }
.site-nav { display: flex; justify-content: flex-end; align-items: center; flex: 1 1 auto; min-width: 0; }
#site-nav-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
#site-nav-list a {
    display: block; padding: 9px 12px; border-radius: 999px;
    color: var(--navy); font-weight: 650; text-decoration: none;
}
#site-nav-list a:hover { background: var(--cream-deep); }
#site-nav-list a[aria-current] { background: var(--cream-deep); box-shadow: inset 0 0 0 1px var(--line); }
#site-nav-list a.nav-cta { background: var(--navy); color: #fff; box-shadow: none; }
#site-nav-list a.nav-cta[aria-current] { box-shadow: 0 0 0 3px rgba(14, 44, 115, .22); }
#site-nav-list a.nav-cta:hover { background: var(--blue); color: #fff; }
.nav-toggle {
    padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
    background: #fff; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer;
}

/* Hero */
.hero { padding: clamp(16px, 2.4vw, 28px) 0 0; }
/* Wie in der Designvorlage: gerundete Bühne, die die Szene begrenzt. */
.hero-inner { position: relative; overflow: hidden; border-radius: clamp(18px, 2.4vw, 32px); background: var(--cream-deep); }
.hero-copy { padding: clamp(22px, 3.4vw, 40px) clamp(20px, 3vw, 34px) clamp(24px, 4vw, 40px) clamp(22px, 4vw, 56px); }
/* Vorlage: Logo steht eingerückt über der Headline, etwa so breit wie „Gemeinsam“. */
.hero-logo { display: block; width: clamp(132px, 26vw, 210px); height: auto; margin-bottom: 14px; }
/* Größenverhältnis Headline zu Bühne wie in der Vorlage. */
.hero-copy h1 { font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.08; margin-bottom: 18px; }
.hero-copy .lead { max-width: 32ch; }
/* Vorlage: beide Aktionen untereinander, linksbündig. */
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 26px; }
.rainbow span:nth-child(1) { color: var(--teal-ink); }
.rainbow span:nth-child(2) { color: var(--orange-ink); }
.rainbow span:nth-child(3) { color: var(--pink-ink); }
.rainbow span:nth-child(4) { color: var(--blue); }
.rainbow span:nth-child(5) { color: var(--yellow-ink); }
.rainbow span:nth-child(6) { color: var(--purple); }
.rainbow span:nth-child(7) { color: var(--red-ink); }

.hero-scene {
    position: relative; width: 100%; aspect-ratio: 5 / 4;
    /* Die Wiese ist in einem viewBox 1200x500 gezeichnet, das über die Höhe --hills-h
       gestreckt wird. Beide Kanten sind eigenständige Kurven; jedes Motiv
       trägt daher sein eigenes --t = (500 - y der Kurve an seiner x-Position) / 500. */
    --hills-h: 56%;
}
.hero-scene > * { position: absolute; }
/* Die PNGs tragen unter der sichtbaren Standfläche einen transparenten Rand.
   translateY schiebt jedes Motiv um genau diesen eigenen Anteil nach unten,
   damit es auf der Standlinie aufsetzt statt über ihr zu schweben. */
.scene-dandelion { transform: translateY(4.6%); }
.scene-squirrel { transform: translateY(8.2%); }

.scene-hills { left: 0; bottom: 0; width: 100%; height: var(--hills-h); }
.scene-sun { right: 5%; top: 1%; width: 20%; }
.scene-cloud-a { left: 6%; top: 13%; width: 20%; }
.scene-cloud-b { left: 30%; top: 27%; width: 16%; }
.scene-seeds { left: 42%; top: 6%; width: 34%; }
.scene-dandelion {
    /* Rechts am Buehnenrand und etwas kleiner, damit ihre Blaetter auf schmalen
       Displays nicht in das rechte Kind ragen; sichtbar bleiben rund 8px Rand. */
    right: 1%; bottom: calc(var(--hills-h) * .77); height: 31%; width: auto;
}
.scene-squirrel { right: 3%; bottom: calc(var(--hills-h) * .21); width: 14%; }
/* Unter 900px ist die Szene ein schmaler Streifen: Herz und Vogel teilen sich dort
   dieselbe Standlinie wie die Kinder und wuerden sie zu einem Knaeuel stauchen.
   Sie erscheinen erst ab dem breiten Layout wieder. Igel, Blumen und fuenf Buschel
   stehen dagegen unterhalb der Kinderreihe im freien Vordergrund der Wiese; ihre
   Luecken (12-30%, 45-56%, 70-79%) liegen zwischen Igel, Blumen und Eichhoernchen. */
.scene-heart, .scene-bird, .tuft { display: none; }
.tuft-2, .tuft-3, .tuft-5, .tuft-6, .tuft-9 { display: block; }
.scene-hedgehog { left: 30%; width: 13%; bottom: calc(var(--hills-h) * .085); transform: translateY(9.7%); }
.scene-flowers { left: 56%; width: 14%; bottom: calc(var(--hills-h) * .04); transform: translateY(6.9%); }
.tuft-2 { --t: .075; --p: 20.5%; left: 9%; height: 4%; }
.tuft-3 { --t: .125; --p: 12.7%; left: 47.5%; height: 2.8%; }
.tuft-5 { --t: .045; --p: 13.3%; left: 20.5%; height: 4.6%; }
.tuft-6 { --t: .08; --p: 4.5%; left: 79%; height: 6.5%; }
.tuft-9 { --t: .035; --p: 14.2%; left: 71.5%; height: 3.6%; }

/* Wiesenbewuchs, gleiche Mechanik wie bei den Kindern: --t ist der Kurvenwert,
   --p der transparente Rand unter der Standfläche des PNGs. */
.tuft { width: auto; bottom: calc(var(--hills-h) * var(--t)); transform: translateY(var(--p)); }

/* Die fünf Kinder stehen einzeln auf der jeweils sichtbaren Kante (links die
   vordere, ab der Mitte die hintere) und steigen dadurch nach rechts an.
   --t ist der Standpunkt dieser Kante zwischen beiden sichtbaren Füßen
   (nicht an der Bildmitte) und um die halbe Hangdifferenz beider Füße abgesenkt,
   damit am Hang kein Fuß in der Luft steht. translateY gleicht den transparenten
   Rand des jeweiligen PNGs aus. Die Abstände sind so gewählt, dass sich die
   deckenden Bildbereiche auch bei 390px nicht berühren. */
.scene-kids { inset: 0; }
.scene-kids .kid { position: absolute; width: auto; bottom: calc(var(--hills-h) * var(--t)); }
.kid-1 { --t: .2525; left: 2.44%; height: 12%; transform: translateY(8.96%); }
.kid-2 { --t: .363; left: 18.67%; height: 17.5%; transform: translateY(6.28%); }
.kid-3 { --t: .4636; left: 34.76%; height: 19.8%; transform: translateY(5.58%); }
.kid-4 { --t: .5721; left: 50.24%; height: 22%; transform: translateY(5%); }
.kid-5 { --t: .6723; left: 67.38%; height: 24%; transform: translateY(4.53%); }

@media (prefers-reduced-motion: no-preference) {
    .scene-seeds { animation: drift 9s ease-in-out infinite alternate; }
    @keyframes drift { from { transform: translate(0, 0); } to { transform: translate(2%, -4%); } }
}

/* Abschnitte */
.section { padding: clamp(40px, 6vw, 76px) 0; }
.band { position: relative; background: var(--cream-deep); }
/* Die Wimpelkette liegt als freigestelltes PNG mit transparentem Rand vor und
   braucht daher keinen Beschnitt; die Hoehe ergibt sich aus dem Bild. */
.bunting { display: block; width: min(560px, 78%); margin: 0 auto 12px; }
/* Nur der Fließtext wird auf Lesebreite begrenzt; die Überschrift darf die volle Spalte nutzen. */
.section-head { margin-bottom: 28px; }
.section-head p { max-width: 62ch; color: var(--muted); font-size: 1.05rem; margin: 0; }
/* „Wer wir sind" ist ein reiner Textabsatz und „Was wir ermöglichen" führt ihn
   fort. Mit der vollen Abschnittspolsterung standen dazwischen 180px Leere.
   Die beiden bilden hier einen Block mit einer einzigen Trennung. */
#verein { padding-bottom: 0; }
#verein .section-head { margin-bottom: 0; }
#ermoeglichen { padding-top: clamp(28px, 3.4vw, 44px); }

/* Kleine Markenakzente in den Randzonen, die der Fließtext ohnehin frei lässt.
   Sie sind rein dekorativ und erscheinen erst, wenn neben dem Text Platz ist. */
.deco { display: none; position: absolute; pointer-events: none; }
@media (min-width: 1024px) {
    .section, .cta, .contact-card { position: relative; }
    .deco { display: block; }
    .deco-konfetti { top: 34px; right: 0; width: 200px; }
    .deco-herz { top: 46px; right: 4px; width: 58px; }
    .deco-kreise { top: 18px; right: 26px; width: 226px; }
    .deco-siegel { top: 50%; right: 40px; width: 96px; transform: translateY(-50%); }
}

.card {
    background: #fff; border: 1px solid var(--line); border-radius: 22px;
    box-shadow: 0 2px 3px rgba(14, 44, 115, .04), 0 20px 44px -26px rgba(14, 44, 115, .32);
    padding: 24px;
}
.cards { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cards .card p { color: var(--muted); }
.cards .card p:last-child { margin-bottom: 0; }
.art { display: block; width: auto; height: 58px; max-width: 80px; margin-bottom: 14px; }
.link-arrow { font-weight: 700; text-decoration: none; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; }

.cta {
    display: flex; align-items: center; gap: clamp(16px, 4vw, 40px); flex-wrap: wrap;
    padding: clamp(24px, 4vw, 40px); border-radius: 26px;
    background: linear-gradient(180deg, var(--hill-light), var(--hill-mid));
}
.cta > div { flex: 1 1 320px; }
.cta p { color: #27351f; }
.cta p:last-child { margin-bottom: 0; }
.cta-art { width: min(280px, 100%); }
.contact-card address { font-style: normal; margin-bottom: 14px; }
.contact-card p:last-child { margin-bottom: 0; }

/* Buttons */
.button, button {
    display: inline-block; border: 0; border-radius: 999px; padding: 14px 26px;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}
.button-primary, .primary { background: var(--navy); color: #fff; }
.button-primary:hover, .primary:hover { background: var(--blue); color: #fff; }
.button-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.button-ghost:hover { background: var(--navy); color: #fff; }
.secondary { background: #eef1f8; color: var(--navy); }
.secondary:hover { background: #e2e7f3; }
button:active { transform: translateY(1px); }

/* Unterseiten: Formular und Rechtstexte */
.page { padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 88px); }
/* Der Einstieg steht ueber einer Formularkarte, die die volle Spalte einnimmt.
   Linksbuendig und auf 46ch begrenzt fiel er dagegen deutlich nach links ab;
   zentriert und auf Lesebreite gehalten sitzt er mittig ueber der Karte. */
.page-hero { margin-bottom: 32px; text-align: center; }
.page-hero .lead { max-width: 54ch; margin-inline: auto; }
.back-link { display: inline-block; margin-bottom: 22px; font-weight: 650; }

form.card, .legal, .message, .contact-card { padding: clamp(22px, 4vw, 44px); }
fieldset { margin: 0 0 32px; padding: 0 0 30px; border: 0; border-bottom: 1px solid var(--line); }
fieldset:last-of-type { margin-bottom: 26px; padding-bottom: 0; border-bottom: 0; }
legend { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 18px; font-size: 1.28rem; font-weight: 750; }
legend::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(247, 133, 39, .22); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wide { grid-column: 1 / -1; }
label, .signature-field > span { display: block; font-weight: 650; color: var(--navy); }
input:not([type=checkbox]) {
    width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--field);
    border-radius: 12px; background: #fdfdff; color: var(--body); font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):hover { border-color: var(--blue); }
input::placeholder { color: #93a0b8; }
input:focus, canvas:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(35, 95, 179, .18); }
input[readonly] { background: #f4f6fb; color: var(--muted); }
.check {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--cream);
    font-weight: 500; color: var(--body); cursor: pointer;
}
.check:hover { border-color: var(--blue); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); flex: 0 0 auto; }
small, .hint, .privacy-note { display: block; color: var(--muted); font-weight: 400; }
small { margin-top: 6px; font-size: .88rem; }
.hint { margin: -6px 0 18px; }
.privacy-note { margin: 0 0 20px; padding: 16px 18px; border-radius: 14px; background: var(--cream); font-size: .93rem; }
.error { display: block; margin-top: 6px; color: var(--error); font-size: .92rem; font-weight: 700; }
.summary { margin-bottom: 20px; padding: 15px 20px; border-radius: 14px; border-left: 5px solid var(--error); background: #fdeceb; color: var(--error); font-weight: 700; }
.signature-field { margin-top: 20px; }
canvas {
    display: block; width: 100%; height: auto; margin: 10px 0 12px;
    border: 2px dashed var(--field); border-radius: 16px; background: #fdfdff;
    touch-action: none; cursor: crosshair;
}
form .primary { width: 100%; padding: 17px 22px; font-size: 1.08rem; }
.message { text-align: center; }
.message p { max-width: 46ch; margin: 0 auto; color: var(--muted); }
.success { border-top: 7px solid var(--teal); }
.failure { border-top: 7px solid var(--red); }

.legal { line-height: 1.7; }
.legal h2 { margin-top: 34px; font-size: 1.3rem; }
.legal address { font-style: normal; }

/* Fußbereich */
.site-footer { margin-top: 40px; padding: clamp(36px, 5vw, 56px) 0 20px; background: var(--navy-deep); color: #dfe6f5; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-org { font-weight: 750; color: #fff; margin-bottom: 8px; }
.site-footer address { font-style: normal; }
.site-footer h2 { font-size: 1rem; color: #fff; margin-bottom: 10px; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: #dfe6f5; }
.site-footer a:hover { color: #fff; }
.footer-note {
    width: min(var(--shell), calc(100% - 32px)); margin: 32px auto 0; padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .18); font-size: .88rem; color: #b9c6e2;
}

@media (min-width: 900px) {
    .nav-toggle { display: none; }
    .hero-inner { display: grid; }
    .hero-inner > * { grid-area: 1 / 1; }
    /* Vorlage: großes Logo, das links in die Szene hineinragt. */
    .hero-logo { width: clamp(200px, 18vw, 250px); margin-left: -26px; margin-bottom: 8px; }
    /* Textspalte belegt wie in der Vorlage die halbe Bühne; das hält den Zeilenfall der Headline bei 1440, 1266 und 1024 gleich. */
    .hero-copy { align-self: center; max-width: min(35rem, 50%); position: relative; z-index: 1; }
    /* Die Bühnenhöhe folgt der Textspalte; ohne aspect-ratio bleibt die Szene genau so breit wie die Bühne. */
    .hero-scene { aspect-ratio: auto; --hills-h: 60%; }
    /* Himmelsgruppe (Sonne, beide Wolken, Samen) steht als Ganzes 4,5 Prozentpunkte
       weiter links als die Pusteblume, damit die Luecke zwischen Textspalte und
       Szene kleiner wird. Der Abstand der vier Motive zueinander bleibt gleich. */
    .scene-sun { right: 24.5%; top: 1%; width: 12%; }
    .scene-cloud-a { left: 43.5%; top: 8%; width: 10%; }
    .scene-cloud-b { left: 46.5%; top: 22%; width: 9%; }
    .scene-heart, .scene-bird, .scene-hedgehog, .scene-flowers, .tuft { display: block; }
    .scene-heart { right: 4%; top: 6%; width: 4%; }
    .scene-seeds { left: 53.5%; top: 16%; width: 22%; }
    /* Die Pusteblume rueckt an den rechten Buehnenrand, damit zwischen ihren
       Blaettern und dem roten Kind sichtbar Luft bleibt. Bluete und Stiel
       liegen dabei weiterhin vollstaendig in der Szene. */
    .scene-dandelion { right: .5%; height: 46%; }
    .scene-bird { left: 27%; width: 7%; bottom: calc(var(--hills-h) * .056); transform: translateY(9.1%); }
    .scene-hedgehog { left: 34%; width: 11%; bottom: calc(var(--hills-h) * .118); transform: translateY(9.7%); }
    .scene-flowers { left: 54%; width: 14%; bottom: calc(var(--hills-h) * .25); transform: translateY(6.9%); }
    .scene-squirrel { right: 7%; width: 10%; bottom: calc(var(--hills-h) * .195); }
    /* Fünf getrennte Standpunkte auf dem Kamm. Zwischen den deckenden Bildbereichen
       bleiben rund 40px frei, damit sich Hände, Füße und Rucksack nicht überlagern;
       rechts endet die Reihe vor den Blättern der großen Pusteblume. */
    .kid-1 { --t: .487; left: 39.05%; height: 8.6%; }
    .kid-2 { --t: .559; left: 47.4%; height: 12.2%; }
    .kid-3 { --t: .61; left: 55.63%; height: 14%; }
    .kid-4 { --t: .657; left: 63.54%; height: 15.8%; }
    .kid-5 { --t: .701; left: 72.61%; height: 17%; }
    /* Wiesenbewuchs. Wie bei den Kindern ist --t der Kurvenwert an der Mitte des
       Motivs (tuft-1/2 hintere, die übrigen vordere Kante), --p der transparente
       Rand unter der Standfläche des jeweiligen PNGs. Die Textspalte reicht bis
       etwa 36%, Vogel, Igel, Blumen und Eichhörnchen belegen 27-34%, 34-45%,
       54-68% und 83-93% der vorderen Kante; diese Bereiche bleiben frei. */
    .tuft-1 { --t: .592; --p: 13.3%; left: 53.9%; height: 1.9%; }
    .tuft-2 { --t: .739; --p: 20.5%; left: 83.6%; height: 2%; }
    .tuft-3 { --t: .359; --p: 12.7%; left: 30.5%; height: 2.6%; }
    .tuft-4 { --t: .368; --p: 14.2%; left: 26.5%; height: 3.4%; }
    .tuft-5 { --t: .272; --p: 13.3%; left: 47.5%; height: 3.6%; }
    .tuft-6 { --t: .265; --p: 4.5%; left: 51.8%; height: 3.6%; }
    .tuft-7 { --t: .287; --p: 12.3%; left: 69.3%; height: 5.2%; }
    .tuft-8 { --t: .307; --p: 4.5%; left: 74.8%; height: 4.2%; }
    .tuft-9 { --t: .325; --p: 14.2%; left: 78.6%; height: 3%; }
    .tuft-10 { --t: .323; --p: 13.3%; left: 95.2%; height: 3.2%; }
}

/* Ab 1152px steht die Bühne auf ihrer vollen Breite von 1120px; erst dann liegt
   zwischen dem Fließtext und dem krabbelnden Kind genug Luft, um die Reihe um
   drei Prozentpunkte nach links zu rücken. Darunter (992px Bühne) grenzt das
   Kind bereits an die letzte Textzeile, dort bleibt die Reihe wie gehabt.
   --t ist nicht mitverschoben, sondern an der neuen x-Position neu von der
   hinteren Kante abgelesen, damit jedes Kind wieder auf dem Boden steht. */
/* Unterhalb von 1152px steht die Kinderreihe drei Prozentpunkte weiter rechts,
   dadurch reicht das rote Kind bis an die Blaetter der Pusteblume. Die Pusteblume
   rueckt hier um knapp einen Prozentpunkt nach rechts aus der Buehne; sichtbar
   bleiben rund 11px Rand und rund 9px Luft zum Kind. */
@media (min-width: 900px) and (max-width: 1151.98px) {
    .scene-dandelion { right: -.4%; height: 44%; }
}
/* Bis 1024px waechst die Buehne in der Hoehe schneller als in der Breite, eine
   Hoehenangabe laesst die Pusteblume dort also relativ breiter werden und frisst
   die Luecke zum roten Kind auf. In diesem Band bemisst sie sich deshalb an der
   Buehnenbreite: 22.1% entspricht bei 1024px fast genau den 44% von oben (1.7%
   kleiner, an der Grenze nicht sichtbar) und schrumpft zu 900px hin auf rund 90%.
   Damit bleiben ueber das ganze Band mindestens 9px Luft zum Kind und 8.5px
   Buehnenrand. */
@media (min-width: 900px) and (max-width: 1023.98px) {
    .scene-dandelion { right: -.5%; width: 22.1%; height: auto; }
}

@media (min-width: 1152px) {
    .kid-1 { --t: .4603; left: 36.05%; }
    .kid-2 { --t: .5365; left: 44.4%; }
    .kid-3 { --t: .5914; left: 52.63%; }
    .kid-4 { --t: .641; left: 60.54%; }
    .kid-5 { --t: .6875; left: 69.61%; }
}

@media (max-width: 899px) {
    .site-nav { flex: 1 0 100%; justify-content: stretch; }
    #site-nav-list { flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; }
    #site-nav-list a { padding: 12px 14px; border-radius: 12px; }
    #site-nav-list .nav-cta { text-align: center; }
    /* Ohne JavaScript bleibt der Button versteckt und die Liste sichtbar. */
    .nav-toggle:not([hidden])[aria-expanded="false"] ~ .site-nav { display: none; }
}

@media (max-width: 620px) {
    .kid-1 { --t: .2475; }
    .shell, .footer-note { width: min(100% - 20px, var(--shell)); }
    .grid { grid-template-columns: 1fr; gap: 14px; }
    .wide { grid-column: auto; }
    .card { border-radius: 18px; }
    .hero-actions { align-items: stretch; }
    .hero-actions .button { text-align: center; }
}

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