:root {
  --blue: #2c5f7c;
  --blue-deep: #183f56;
  --blue-mid: #4a8ba8;
  --blue-light: #b8d4e3;
  --blue-pale: #eaf4f8;
  --turquoise: #3e8b8b;
  --green: #4a8b5c;
  --green-light: #a8c957;
  --yellow: #ffda3f;
  --gold: #c9a04a;
  --gold-deep: #9c782a;
  --orange: #e26d35;
  --ink: #2a3b47;
  --muted: #5f707a;
  --line: rgba(44, 95, 124, 0.16);
  --paper: #ffffff;
  --soft: #f7f8f9;
  --shadow: 0 24px 70px rgba(24, 63, 86, 0.12);
  --radius: 28px;
  --max: 1180px;
  --header: 82px;
  color-scheme: light;
  font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); }
section[id] { scroll-margin-top: calc(var(--header) + 14px); }
body.dialog-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; color: #fff; background: var(--blue-deep); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header);
  padding: 12px max(24px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid rgba(44, 95, 124, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(24, 63, 86, 0);
  transition: box-shadow 180ms ease, min-height 180ms ease;
  backdrop-filter: blur(16px);
}
.site-header.is-scrolled { min-height: 70px; box-shadow: 0 12px 30px rgba(24, 63, 86, 0.08); }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; }
.brand-logo { width: 54px; height: 55px; object-fit: contain; border-radius: 50%; box-shadow: 0 8px 22px rgba(201, 160, 74, 0.24); }
.brand-copy { display: grid; gap: 1px; }
.brand-copy small { color: var(--blue-deep); font-size: 13px; font-weight: 800; }
.desktop-nav { display: flex; gap: 26px; }
.desktop-nav a { position: relative; color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform 160ms ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.header-cta { justify-self: end; min-height: 44px; padding: 0 18px; color: #fff; border: 0; border-radius: 999px; background: var(--blue); font-size: 14px; font-weight: 800; cursor: pointer; }

/* Die Spaltenaufteilung bleibt, wie sie war (0.94 zu 1.06). Sie bestimmt, wie
   viel von der Bildcollage zu sehen ist, und das Bild fuellt seine Spalte mit
   object-fit: cover: eine schmalere Spalte schneidet mehr weg. In Phase 278
   wurde die Textspalte hier verbreitert, damit der Text hineinpasst — das
   Bild wurde dadurch sichtbar schmaler und stand weiter rechts. Nicht die
   Spalte ist zu schmal, der Textblock war zu breit; gedeckelt wird deshalb
   unten in .hero-copy. */
.hero { position: relative; display: grid;
  /* Der Rand folgt dem zentrierten Inhaltsraster, wird aber bei 360px gedeckelt. Ungedeckelt
     waechst er auf breiten Schirmen ueber 600px; dieser Platz liegt in der Textspalte brach und
     fehlt der Collage. Der Deckel greift erst ab etwa 1900px Fensterbreite, darunter aendert
     sich nichts. */
  --hero-rand: clamp(24px, calc((100vw - var(--max)) / 2), 360px);
  --hero-text: 610px;
  --hero-luft: 48px;
  /* Die Textspalte behaelt ihren bisherigen Anteil von 47 Prozent, bekommt aber einen Deckel:
     mehr als Rand, Text und Luft braucht sie nie. Wichtig ist die Richtung. Die Textspalte kann
     dadurch nur schmaler werden, die Bildspalte also nur breiter. Nach Phase 278 ist das die
     Bedingung: eine schrumpfende Bildspalte zeigt weniger vom Bild. */
  grid-template-columns:
    minmax(0, min(47%, calc(var(--hero-rand) + var(--hero-text) + var(--hero-luft))))
    minmax(460px, 1fr);
  /* Beide Spalten nur so hoch wie ihr Inhalt, mittig in der Hero-Flaeche. Vorher streckte das
     Raster die Bildspalte auf die volle Hoehe: Sie war dann hoeher als die Collage, und der
     Zitatkasten, der sich an ihrem unteren Rand ausrichtet, schwebte unter dem Bild in der
     leeren Flaeche. So ist die Bildspalte genau die Collage, und der Kasten sitzt wieder auf ihr. */
  align-items: center;
  /* Die Hoehe folgt dem Fenster, aber nur bis 860px. Auf einem 1420 Pixel hohen Schirm waere der
     Hero sonst 1338 hoch, Text und Collage brauchen davon 768: der Rest stand als leere Flaeche
     darum. Mit dem Deckel bleibt der bildschirmfuellende Eindruck auf ueblichen Schirmen und der
     Hero wird auf sehr hohen nicht zur Leerfahrt. */
  min-height: min(calc(100vh - var(--header)), 860px); overflow: hidden; background: linear-gradient(135deg, #fff 0 52%, var(--blue-pale) 52% 100%); }
.hero::before { content: ""; position: absolute; width: 420px; height: 420px; left: -240px; bottom: -200px; border: 1px solid rgba(74, 139, 168, 0.2); border-radius: 50%; box-shadow: 0 0 0 58px rgba(184, 212, 227, 0.11), 0 0 0 116px rgba(184, 212, 227, 0.07); }
/* Hier sitzt die eigentliche Reparatur: Der Textblock bekommt nur so viel
   Breite, wie in seiner Spalte uebrig ist, nachdem der eigene Rand abgezogen
   wurde. Ohne den Abzug zaehlt der Rand doppelt (einmal als margin, einmal in
   den 610px), und genau diese Summe schob die letzten Woerter jeder Zeile in
   die Bildcollage. Auf breiten Schirmen bricht der Text dadurch frueher um,
   das Bild bleibt unangetastet. */
.hero-copy { position: relative; z-index: 2; align-self: center; container-type: inline-size; width: min(var(--hero-text), calc(100% - var(--hero-rand) - 40px)); margin-left: var(--hero-rand); padding: 70px var(--hero-luft) 96px 0; }
.eyebrow { margin: 0 0 16px; color: var(--gold-deep); font-size: 12px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
/* Die Ueberschrift richtet sich nach ihrem Block, nicht nach dem Fenster
   (cqw statt vw). Auf sehr breiten Schirmen bleibt dem Text weniger Platz,
   weil der Rand bis zur Inhaltsmitte mitwaechst; mit vw waere die Schrift
   dort am groessten, wo am wenigsten Platz ist, und „Was wünschen" bräche
   mitten auseinander. */
.hero h1 { max-width: 590px; margin: 0; color: var(--blue-deep); font-size: clamp(48px, 13.5cqw, 76px); line-height: 0.98; letter-spacing: -0.055em; }
.hero-lede { max-width: 570px; margin: 28px 0 0; color: var(--muted); font-size: clamp(18px, 1.65vw, 22px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 23px; border: 1px solid transparent; border-radius: 999px; font-weight: 800; line-height: 1.1; text-decoration: none; cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(245, 213, 71, 0.85); outline-offset: 3px; }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 13px 26px rgba(44, 95, 124, 0.22); }
.button-primary:hover { background: var(--blue-deep); }
.button-secondary { color: var(--blue); border-color: rgba(44, 95, 124, 0.3); background: #fff; }
.button-gold { color: var(--blue-deep); background: var(--yellow); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.15); }
.button-glass { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); }
.trust-list { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 28px 0 0; padding: 0; color: var(--muted); font-size: 13px; font-weight: 700; list-style: none; }
.trust-list span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; color: #fff; background: var(--green); border-radius: 50%; font-size: 11px; }
/* Die Mindesthoehe von 620px galt fuer die formatfuellende Fassung. Jetzt bestimmt die Collage
   selbst die Hoehe der Spalte, sonst entstuende unter ihr wieder leerer Raum. Einspaltig auf
   kleinen Schirmen gilt weiter eine Mindesthoehe, siehe unten. */
.hero-media { position: relative; overflow: hidden; display: grid; align-content: center; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(234, 244, 248, 0.5), transparent 20%), linear-gradient(0deg, rgba(24, 63, 86, 0.25), transparent 42%); pointer-events: none; }
/* Die Collage ist 1890 zu 1063, also deutlich breiter als ihre Spalte hoch ist. Mit cover auf
   voller Hoehe fehlten bei grossen Fenstern bis zu 40 Prozent der Breite, und zwar mitten in den
   Bildkacheln. Sie liegt jetzt vollstaendig in der Spalte und wird senkrecht mittig gesetzt; den
   Raum darueber und darunter fuellt der Verlauf des Hero. */
.hero-media > img { width: 100%; height: auto; max-height: 100%; aspect-ratio: 1890 / 1063; object-fit: contain; filter: saturate(0.94) contrast(1.02); }
.hero-question { position: absolute; z-index: 2; right: 8%; bottom: 15%; display: grid; gap: 2px; width: min(360px, 70%); padding: 20px 24px; color: #fff; border-left: 4px solid var(--yellow); background: rgba(24, 63, 86, 0.86); box-shadow: var(--shadow); }
.hero-question span { font-size: 14px; }
.hero-question strong { font-size: 24px; }
.source-chip { position: absolute; z-index: 3; top: 24px; right: 24px; min-height: 42px; padding: 0 16px; color: var(--blue-deep); border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.93); box-shadow: 0 10px 30px rgba(24, 63, 86, 0.15); font-size: 13px; font-weight: 800; cursor: pointer; }
.source-chip span { color: var(--gold-deep); font-size: 18px; }
.scroll-cue { position: absolute; z-index: 4; bottom: 24px; left: 50%; display: grid; justify-items: center; gap: 7px; color: var(--blue-deep); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue i { width: 1px; height: 34px; background: var(--blue); animation: scrollCue 1.7s ease-in-out infinite; transform-origin: top; }
@keyframes scrollCue { 0%, 100% { transform: scaleY(0.45); opacity: 0.45; } 50% { transform: scaleY(1); opacity: 1; } }

.confidence-strip { padding: 22px 24px; color: #fff; background: var(--blue); text-align: center; }
.confidence-strip p { max-width: 980px; margin: 0 auto; font-size: clamp(16px, 2vw, 21px); line-height: 1.45; }
.confidence-strip strong { color: var(--yellow); }

.section { max-width: var(--max); margin: 0 auto; padding: 110px 24px; }
.section-heading { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-heading-left { max-width: 760px; margin-left: 0; text-align: left; }
.section h2, .closing h2 { margin: 0; color: var(--blue-deep); font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.04em; }
.section-heading > p:last-child { max-width: 660px; margin: 20px auto 0; color: var(--muted); font-size: 18px; line-height: 1.55; }

.intro-grid { display: grid; grid-template-columns: 1.03fr 0.97fr; gap: 72px; align-items: center; }
.intro-image { position: relative; min-height: 570px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.intro-image img { width: 100%; height: 100%; min-height: 570px; object-fit: cover; }
.intro-image blockquote { position: absolute; right: 24px; bottom: 24px; left: 24px; margin: 0; padding: 25px 28px; color: #fff; border-left: 4px solid var(--yellow); background: rgba(24, 63, 86, 0.89); font-size: clamp(20px, 2vw, 28px); font-weight: 800; line-height: 1.25; }
.intro-copy > p { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.65; }
.principle-list { display: grid; gap: 0; margin: 34px 0 0; padding: 0; list-style: none; }
.principle-list li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.principle-list li:last-child { border-bottom: 1px solid var(--line); }
.principle-list span { display: grid; place-items: center; align-self: start; width: 48px; height: 48px; color: var(--blue-deep); background: var(--blue-pale); border-radius: 50%; font-weight: 900; }
.principle-list strong { color: var(--blue-deep); font-size: 21px; }
.principle-list p { margin: 4px 0 0; color: var(--muted); line-height: 1.45; }
.kidz-journey-mark { display: grid; grid-template-columns: 118px 1fr; gap: 18px; align-items: center; margin-top: 28px; padding: 18px 20px; border: 1px solid rgba(201, 160, 74, 0.28); border-radius: 20px; background: #fffaf0; }
.kidz-journey-mark img { width: 118px; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.kidz-journey-mark p { display: grid; gap: 4px; margin: 0; }
.kidz-journey-mark strong { color: var(--blue-deep); font-size: 16px; line-height: 1.3; }
.kidz-journey-mark span { color: var(--muted); font-size: 14px; line-height: 1.45; }

.pillars-section { max-width: none; padding-right: max(24px, calc((100vw - var(--max)) / 2)); padding-left: max(24px, calc((100vw - var(--max)) / 2)); background: var(--soft); }
.pillar-stack { max-width: var(--max); margin: 0 auto; }
.pillar-mobile-instruction { display: none; }
.pillar-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: var(--max); margin: 0 auto 20px; }
.pillar-tab { display: grid; grid-template-columns: 58px 1fr; gap: 13px; align-items: center; min-height: 92px; padding: 14px 16px; color: var(--muted); border: 1px solid transparent; border-radius: 20px; background: #fff; box-shadow: 0 8px 26px rgba(24, 63, 86, 0.06); text-align: left; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease; }
.pillar-tab.is-active { color: var(--blue-deep); border-color: rgba(44, 95, 124, 0.25); box-shadow: 0 14px 34px rgba(24, 63, 86, 0.12); transform: translateY(-3px); }
.pillar-tab-state { display: none; }
.pillar-tab strong, .pillar-tab small { display: block; }
.pillar-tab strong { font-size: 16px; }
.pillar-tab small { margin-top: 3px; font-size: 12px; }
.pillar-icon { display: grid; place-items: center; width: 56px; height: 56px; color: #fff; border-radius: 50%; font-size: 25px; font-weight: 900; }
.pillar-icon-green { background: var(--green); }
.pillar-icon-orange { background: var(--orange); }
.pillar-icon-blue { background: var(--blue); }
.pillar-panel { display: grid; grid-template-columns: 0.92fr 1.08fr; min-height: 470px; max-width: var(--max); margin: 0 auto; overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.pillar-panel-media { position: relative; min-height: 470px; overflow: hidden; background: var(--blue-light); }
.pillar-panel-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 170ms ease, transform 220ms ease; }
.pillar-panel-media.is-changing img { opacity: 0.35; transform: scale(1.03); }
.pillar-panel-media > span { position: absolute; top: 22px; left: 22px; display: grid; place-items: center; width: 50px; height: 50px; color: var(--blue-deep); background: var(--yellow); border-radius: 50%; font-weight: 900; box-shadow: 0 10px 20px rgba(24, 63, 86, 0.16); }
.pillar-panel-copy { align-self: center; padding: 52px 58px; }
.pillar-panel-copy > p:first-child { margin: 0 0 11px; color: var(--gold-deep); font-size: 12px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.pillar-panel-copy h3 { margin: 0; color: var(--blue-deep); font-size: clamp(30px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.035em; }
.pillar-panel-copy > p:nth-of-type(2) { margin: 21px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.pillar-panel-copy ul { display: grid; gap: 11px; margin: 24px 0 0; padding: 0; list-style: none; }
.pillar-panel-copy li { position: relative; padding-left: 28px; color: var(--ink); line-height: 1.45; }
.pillar-panel-copy li::before { content: "?"; position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 19px; height: 19px; color: #fff; background: var(--blue-mid); border-radius: 50%; font-size: 11px; font-weight: 900; }
.pillar-original { display: grid; grid-template-columns: 196px 1fr; gap: 30px; align-items: center; max-width: 820px; margin: 38px auto 0; padding: 26px 32px; border: 1px solid rgba(201, 160, 74, 0.25); border-radius: 26px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 16px 40px rgba(24, 63, 86, 0.07); }
.pillar-original img { width: 190px; height: 190px; object-fit: contain; }
.pillar-original span, .pillar-original strong, .pillar-original p { display: block; }
.pillar-original span { color: var(--gold-deep); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.pillar-original strong { margin-top: 4px; color: var(--blue-deep); font-size: 18px; }
.pillar-original p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.possibilities-section { max-width: none; padding-right: max(24px, calc((100vw - var(--max)) / 2)); padding-left: max(24px, calc((100vw - var(--max)) / 2)); }
.possibilities-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; max-width: var(--max); margin: 0 auto; }
.possibility-card { position: relative; min-height: 320px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(24, 63, 86, 0.08); }
.possibility-card-copy { position: relative; z-index: 2; }
.possibility-card-copy > span, .possibility-invest-copy > span { color: var(--gold-deep); font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.possibility-card h3 { margin: 10px 0 0; color: var(--blue-deep); font-size: 27px; line-height: 1.12; letter-spacing: -0.025em; }
.possibility-card p { margin: 13px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.possibility-health { grid-column: span 7; display: grid; grid-template-columns: 1fr 250px; align-items: center; padding: 38px; color: #fff; border: 0; background: var(--blue-deep); }
.possibility-health h3 { color: #fff; font-size: clamp(30px, 3vw, 42px); }
.possibility-health p { color: rgba(255, 255, 255, 0.76); font-weight: 700; }
.possibility-health img { width: 250px; height: auto; justify-self: end; transform: rotate(2deg); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.25)); }
.possibility-dental { grid-column: span 5; }
.possibility-dental > img { width: 42%; height: 100%; object-fit: cover; }
.possibility-dental .possibility-card-copy { position: absolute; top: 0; right: 0; bottom: 0; left: 38%; display: flex; flex-direction: column; justify-content: center; padding: 30px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.84), #fff 22%); }
.possibility-dental h3 { font-size: 23px; }
.possibility-workforce { grid-column: span 4; display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; padding: 30px; background: var(--soft); }
.possibility-workforce > img { width: 104px; height: 108px; object-fit: contain; }
.possibility-workforce h3, .possibility-support h3 { font-size: 25px; }
.possibility-support { grid-column: span 4; display: grid; grid-template-columns: 78px 1fr; gap: 18px; align-items: center; padding: 30px; background: #fffaf0; }
.possibility-symbol { display: grid; place-items: center; width: 72px; height: 72px; color: #fff; border-radius: 50%; background: var(--gold); font-size: 30px; font-weight: 900; box-shadow: 0 12px 26px rgba(201, 160, 74, 0.28); }
.possibility-invest { grid-column: span 4; display: flex; flex-direction: column; padding: 30px; background: var(--blue-pale); }
.possibility-invest h3 { font-size: 28px; }
.possibility-invest figure { margin: auto -10px -10px; padding-top: 22px; }
.possibility-invest figure img { width: 100%; height: auto; object-fit: contain; border-radius: 16px; background: #fff; }
.possibility-invest figcaption { margin-top: 8px; color: var(--muted); font-size: 11px; text-align: center; }
.possibilities-note { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: var(--max); margin: 24px auto 0; padding: 22px 26px; border-left: 4px solid var(--gold); background: var(--soft); }
.possibilities-note p { max-width: 780px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.possibilities-note strong { color: var(--blue-deep); }
.possibilities-note .button { flex: 0 0 auto; }

.parent-evening { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 90px; align-items: center; }
.evening-visual { position: relative; min-height: 630px; overflow: hidden; border-radius: 180px 180px 26px 26px; background: linear-gradient(160deg, var(--blue-pale), var(--blue-light)); }
.evening-visual img { width: 100%; height: 100%; min-height: 630px; object-fit: cover; object-position: center bottom; }
.evening-badge { position: absolute; right: 20px; bottom: 24px; left: 20px; display: grid; gap: 3px; padding: 20px 22px; color: #fff; border-radius: 18px; background: rgba(24, 63, 86, 0.9); box-shadow: var(--shadow); }
.evening-badge strong { font-size: 22px; }
.evening-badge span { opacity: 0.84; }
.evening-copy > p:nth-of-type(2) { max-width: 630px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.evening-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 32px 0; padding: 0; list-style: none; }
.evening-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.evening-steps li > span { display: grid; place-items: center; width: 36px; height: 36px; color: var(--blue-deep); background: var(--blue-pale); border-radius: 50%; font-weight: 900; }
.evening-steps strong { color: var(--blue-deep); font-size: 17px; }
.evening-steps p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }

.source-section { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 80px; align-items: center; max-width: none; padding-right: max(24px, calc((100vw - var(--max)) / 2)); padding-left: max(24px, calc((100vw - var(--max)) / 2)); background: var(--blue-deep); }
.source-stage { position: relative; min-height: 560px; }
.source-stage-main { width: calc(100% - 72px); height: 520px; object-fit: cover; border-radius: 24px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24); }
.source-stage-small { position: absolute; right: 0; bottom: 0; width: 240px; height: 180px; object-fit: cover; border: 8px solid var(--blue-deep); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.source-copy { color: #fff; }
.source-kidz-logo { width: 86px; height: 88px; margin-bottom: 22px; object-fit: contain; border: 7px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2); }
.source-copy .eyebrow { color: var(--yellow); }
.source-copy h2 { color: #fff; }
.source-copy > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.76); font-size: 18px; line-height: 1.6; }
.source-note { padding: 16px 18px; border-left: 3px solid var(--yellow); background: rgba(255, 255, 255, 0.07); font-size: 14px !important; }
.text-link { padding: 10px 0; color: #fff; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5); background: none; font-weight: 800; cursor: pointer; }

.choices-section { max-width: none; padding-right: max(24px, calc((100vw - var(--max)) / 2)); padding-left: max(24px, calc((100vw - var(--max)) / 2)); background: linear-gradient(180deg, #fff, var(--blue-pale)); }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: var(--max); margin: 0 auto; }
.choice-card { position: relative; display: flex; flex-direction: column; min-height: 370px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(24, 63, 86, 0.08); }
.choice-card::after { content: ""; position: absolute; top: -84px; right: -84px; width: 180px; height: 180px; border: 28px solid var(--blue-pale); border-radius: 50%; }
.choice-card-featured { color: #fff; border-color: var(--blue); background: var(--blue); transform: translateY(-10px); }
.choice-card-featured::after { border-color: rgba(255, 255, 255, 0.08); }
.choice-label { position: absolute; z-index: 2; top: 24px; right: 24px; padding: 7px 10px; color: var(--blue-deep); border-radius: 999px; background: var(--yellow); font-size: 10px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.choice-card > strong { position: relative; z-index: 2; color: var(--gold-deep); font-size: 14px; }
.choice-card-featured > strong { color: var(--yellow); }
.choice-card h3 { position: relative; z-index: 2; margin: 50px 0 12px; color: var(--blue-deep); font-size: 28px; line-height: 1.08; }
.choice-card-featured h3 { color: #fff; }
.choice-card p { position: relative; z-index: 2; margin: 0; color: var(--muted); line-height: 1.55; }
.choice-card-featured p { color: rgba(255, 255, 255, 0.76); }
.choice-card button { position: relative; z-index: 2; width: 100%; min-height: 48px; margin-top: auto; color: var(--blue); border: 1px solid rgba(44, 95, 124, 0.25); border-radius: 999px; background: #fff; font-weight: 900; cursor: pointer; }
.choice-card-featured button { color: var(--blue-deep); border: 0; background: var(--yellow); }
.privacy-line { max-width: 680px; margin: 34px auto 0; color: var(--muted); text-align: center; }
.privacy-line span { color: var(--green); font-size: 24px; vertical-align: middle; }

.faq-section { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 80px; }
.faq-intro > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.55; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0; color: var(--blue-deep); font-size: 19px; font-weight: 800; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; transition: transform 180ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 680px; margin: 0 0 24px; color: var(--muted); line-height: 1.6; }

.story-gallery { overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); }
.story-gallery-heading { max-width: 780px; margin-bottom: 34px; text-align: center; }
.story-slider { width: min(1180px, 100%); margin: 0 auto; }
.story-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.story-status { margin-right: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.story-controls button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; color: var(--blue-deep); border: 1px solid rgba(24, 63, 86, 0.16); border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(24, 63, 86, 0.08); cursor: pointer; font-size: 22px; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.story-controls button:hover { border-color: var(--gold); background: rgba(255, 218, 90, 0.18); transform: translateY(-2px); }
.story-track { display: flex; gap: 20px; padding: 8px max(0px, calc((100% - 920px) / 2)) 28px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.story-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.story-track:focus-visible { outline: 3px solid rgba(201, 160, 74, 0.42); outline-offset: 5px; }
.story-slide { position: relative; flex: 0 0 min(920px, calc(100vw - 96px)); aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: 30px; background: var(--blue-deep); box-shadow: 0 22px 54px rgba(24, 63, 86, 0.16); scroll-snap-align: center; }
.story-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.story-slide:hover img { transform: scale(1.015); }
.story-slide-collage img { object-fit: contain; background: #fff; }
.story-slide::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(17, 42, 57, 0.82)); pointer-events: none; }
.story-slide figcaption { position: absolute; z-index: 2; right: 30px; bottom: 28px; left: 30px; display: flex; align-items: center; gap: 14px; color: #fff; }
.story-slide figcaption span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; font-size: 12px; font-weight: 900; }
.story-slide figcaption strong { font-size: clamp(22px, 3vw, 34px); line-height: 1.08; }
.story-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.story-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(24, 63, 86, 0.2); cursor: pointer; transition: width 180ms ease, background 180ms ease; }
.story-dots button.is-active { width: 28px; background: var(--gold); }

.closing { position: relative; min-height: 640px; overflow: hidden; }
.closing > img { width: 100%; height: 640px; object-fit: cover; object-position: center 45%; }
.closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 63, 86, 0.94), rgba(24, 63, 86, 0.72) 45%, rgba(24, 63, 86, 0.12)); }
.closing-overlay { position: absolute; z-index: 2; top: 50%; left: max(24px, calc((100vw - var(--max)) / 2)); width: min(650px, calc(100% - 48px)); color: #fff; transform: translateY(-50%); }
.closing-overlay .eyebrow { color: var(--yellow); }
.closing-overlay h2 { color: #fff; }
.closing-overlay > p:not(.eyebrow) { max-width: 560px; color: rgba(255, 255, 255, 0.8); font-size: 20px; line-height: 1.55; }
.closing-overlay > div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.site-footer { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 20px 32px; padding: 26px max(24px, calc((100vw - var(--max)) / 2)); color: var(--muted); background: var(--soft); font-size: 13px; border-top: 1px solid var(--line); }
.footer-brand { display: grid; }
.footer-brand strong { color: var(--blue-deep); }
.footer-haus { display: flex; align-items: center; gap: 12px; }
.footer-logo { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 14px rgba(24, 63, 86, .18); }
.footer-haus strong { display: block; color: var(--blue-deep); font-size: 14px; font-weight: 800; }
.footer-haus span { display: block; margin-top: 2px; font-size: 12.5px; }
.footer-kontakt { display: flex; gap: 28px; font-style: normal; line-height: 1.5; }
.footer-kontakt a { color: var(--blue-deep); font-weight: 700; text-decoration: none; }
.footer-kontakt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer p { margin: 0; }
.footer-kidz { display: flex; align-items: center; justify-self: center; gap: 10px; color: var(--blue-deep); font-weight: 800; }
.footer-kidz img { width: 38px; height: 39px; object-fit: contain; border-radius: 50%; }
.site-footer nav { display: flex; justify-self: end; gap: 18px; }
.mobile-cta { display: none; }

dialog { max-width: none; max-height: none; padding: 0; border: 0; background: transparent; }
dialog::backdrop { background: rgba(17, 42, 57, 0.72); backdrop-filter: blur(8px); }
.path-dialog { width: min(590px, calc(100% - 28px)); }
.dialog-shell { position: relative; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3); }
.dialog-close { position: absolute; z-index: 5; top: 17px; right: 17px; display: grid; place-items: center; width: 40px; height: 40px; color: var(--blue-deep); border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.dialog-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 72px 0 0; }
.dialog-progress span { height: 5px; background: var(--blue-light); }
.dialog-progress span.is-active { background: var(--gold); }
.dialog-step { padding: 48px 48px 42px; }
.dialog-step h2 { margin: 0; color: var(--blue-deep); font-size: 38px; line-height: 1.08; letter-spacing: -0.035em; }
.dialog-step > p:not(.eyebrow):not(.preview-banner) { color: var(--muted); line-height: 1.55; }
.dialog-choice-summary { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: center; margin: 28px 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--blue-pale); }
.dialog-choice-summary > span { display: grid; place-items: center; width: 46px; height: 46px; color: var(--blue-deep); background: var(--yellow); border-radius: 50%; font-weight: 900; }
.dialog-choice-summary strong, .dialog-choice-summary small { display: block; }
.dialog-choice-summary small { margin-top: 3px; color: var(--muted); }
.dialog-next { width: 100%; }
.dialog-change { display: block; margin: 14px auto 0; padding: 8px; color: var(--muted); border: 0; background: none; text-decoration: underline; cursor: pointer; }
.preview-banner { margin: -48px -48px 28px; padding: 15px 48px; color: #604f0f; background: #fff6c8; font-size: 13px; line-height: 1.45; }
.dialog-step label:not(.consent) { display: grid; gap: 7px; margin-top: 18px; color: var(--blue-deep); font-size: 14px; font-weight: 800; }
.dialog-step input[type="text"],
.dialog-step input[type="tel"],
.dialog-step input[type="email"] { min-height: 48px; padding: 0 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dialog-step fieldset { display: flex; gap: 20px; margin: 18px 0 0; padding: 0; border: 0; }
.dialog-step legend { margin-bottom: 8px; color: var(--blue-deep); font-size: 14px; font-weight: 800; }
.dialog-step fieldset label { display: flex !important; align-items: center; gap: 7px !important; margin: 0 !important; color: var(--muted) !important; font-weight: 600 !important; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.dialog-actions { display: flex; gap: 10px; margin-top: 26px; }
.dialog-actions .button { flex: 1; }
.dialog-success { text-align: center; }
.dialog-success > span { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 26px; color: #fff; background: var(--green); border-radius: 50%; font-size: 33px; box-shadow: 0 14px 34px rgba(74, 139, 92, 0.25); }
.dialog-success .button { margin-top: 20px; }

.gallery-dialog { width: min(1050px, calc(100% - 32px)); }
.gallery-shell { position: relative; display: grid; grid-template-columns: 0.38fr 0.62fr; grid-template-rows: 1fr auto; min-height: 650px; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3); }
.gallery-copy { grid-row: 1 / -1; align-self: stretch; padding: 52px 42px; color: #fff; background: var(--blue-deep); }
.gallery-copy .eyebrow { color: var(--yellow); }
.gallery-copy h2 { margin: 0; font-size: 36px; line-height: 1.08; letter-spacing: -0.035em; }
.gallery-copy > p:last-child { color: rgba(255, 255, 255, 0.72); line-height: 1.55; }
.gallery-main { min-height: 540px; background: var(--blue-pale); }
.gallery-main img { width: 100%; height: 100%; max-height: 540px; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px; }
.gallery-thumbs button { padding: 0; overflow: hidden; border: 3px solid transparent; border-radius: 10px; background: none; cursor: pointer; }
.gallery-thumbs button.is-active { border-color: var(--gold); }
.gallery-thumbs img { width: 100%; height: 75px; object-fit: cover; }
.gallery-close { color: #fff; border-color: rgba(255, 255, 255, 0.3); background: rgba(24, 63, 86, 0.8); }
.mock-toast { position: fixed; z-index: 500; right: 18px; bottom: 18px; max-width: 330px; padding: 13px 16px; color: #fff; border-radius: 12px; background: var(--blue-deep); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(15px); transition: opacity 160ms ease, transform 160ms ease; }
.mock-toast.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; background: #fff; }
  /* Einspaltig liegt die Collage ueber dem Text und hat die ganze Breite. Hier fuellt sie ihre
     Flaeche wieder ganz aus: vollstaendig gezeigt wuerde sie in den 480 bis 580px hohen Streifen
     nur etwa 220px hoch stehen, der Rest bliebe leer. Auf dem Handy sieht man die einzelnen
     Kacheln ohnehin kaum, ein gefuellter Ausschnitt wirkt dort besser. */
  /* align-content: stretch ist hier wichtig. Der Hero setzt seine Spalten mittig, wodurch das
     Bild nur seine natuerliche Hoehe bekaeme (bei 375px Breite gerade 211px) und der Streifen
     halb leer blieb. Gestreckt reicht die Zeile ueber die volle Mindesthoehe, und erst dadurch
     hat height: 100% am Bild einen Bezug. */
  .hero-media { align-content: stretch; }
  .hero-media > img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
  .hero-copy { width: auto; margin: 0; padding: 72px 24px 54px; }
  .hero-media { min-height: 580px; }
  .scroll-cue { display: none; }
  .intro-grid, .parent-evening, .source-section, .faq-section { grid-template-columns: 1fr; gap: 50px; }
  .intro-image, .intro-image img { min-height: 490px; }
  .pillar-panel { grid-template-columns: 1fr; }
  .possibility-health, .possibility-dental { grid-column: span 6; }
  .possibility-health { grid-template-columns: 1fr; }
  .possibility-health img { position: absolute; right: 14px; bottom: 8px; width: 178px; opacity: 0.42; }
  .possibility-workforce, .possibility-support, .possibility-invest { grid-column: span 4; grid-template-columns: 1fr; }
  .possibility-workforce > img { width: 88px; height: 90px; }
  .possibilities-note { align-items: flex-start; flex-direction: column; }
  .pillar-panel-media { min-height: 360px; }
  .parent-evening { grid-template-columns: 0.8fr 1.2fr; gap: 44px; }
  .choice-grid { grid-template-columns: 1fr; max-width: 660px; }
  .choice-card { min-height: 300px; }
  .choice-card-featured { transform: none; }
  .source-section { padding-top: 90px; padding-bottom: 90px; }
  .source-stage { max-width: 720px; }
}

@media (max-width: 720px) {
  :root { --header: 68px; --radius: 22px; }
  .site-header { min-height: var(--header); padding: 9px 16px; }
  .brand-logo { width: 46px; height: 47px; }
  .brand-copy small { max-width: 90px; font-size: 10px; line-height: 1.15; }
  .header-cta { display: none; }
  .hero-copy { padding: 58px 20px 42px; }
  .hero h1 { font-size: clamp(43px, 13vw, 58px); }
  .hero-lede { font-size: 18px; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .trust-list { display: grid; gap: 10px; }
  .hero-media { min-height: 480px; }
  .source-chip { top: 14px; right: 14px; padding: 0 13px; font-size: 11px; }
  .hero-question { right: 18px; bottom: 20px; left: 18px; width: auto; }
  .confidence-strip { text-align: left; }
  .section { padding: 78px 20px; }
  .section-heading { margin-bottom: 36px; text-align: left; }
  .section-heading > p:last-child { margin-left: 0; }
  .section h2, .closing h2 { font-size: clamp(36px, 11vw, 48px); }
  .intro-image, .intro-image img { min-height: 450px; }
  .intro-image blockquote { right: 14px; bottom: 14px; left: 14px; padding: 20px; font-size: 21px; }
  .intro-copy > p { font-size: 18px; }
  .kidz-journey-mark { grid-template-columns: 96px 1fr; padding: 16px; }
  .kidz-journey-mark img { width: 96px; }
  .pillar-original { grid-template-columns: 1fr; gap: 18px; padding: 26px 24px; text-align: center; }
  .pillar-original img { width: 210px; height: 210px; margin: 0 auto; }
  .possibilities-grid { grid-template-columns: 1fr; }
  .possibility-health, .possibility-dental, .possibility-workforce, .possibility-support, .possibility-invest { grid-column: auto; min-height: 0; }
  .possibility-health { padding: 30px; }
  .possibility-health img { right: 4px; bottom: 4px; width: 150px; opacity: 0.46; }
  .possibility-dental { min-height: 360px; }
  .possibility-dental > img { width: 100%; height: 190px; }
  .possibility-dental .possibility-card-copy { position: static; padding: 24px; background: #fff; }
  .possibility-workforce, .possibility-support { grid-template-columns: 82px 1fr; padding: 24px; }
  .possibility-workforce > img { width: 80px; height: 82px; }
  .possibility-symbol { width: 64px; height: 64px; }
  .possibility-invest { padding: 24px; }
  .possibility-invest figure img { height: auto; object-fit: contain; }
  .possibilities-note { padding: 20px; }
  .possibilities-note .button { width: 100%; }
  .pillar-stack { margin-bottom: 22px; }
  .pillar-mobile-instruction { display: block; margin: 0 0 12px; color: var(--blue-deep); font-size: 13px; font-weight: 800; line-height: 1.45; }
  .pillar-tabs { display: grid; grid-template-columns: 1fr; gap: 11px; height: auto; margin: 0; padding: 0; }
  .pillar-tab { position: relative; grid-template-columns: 52px minmax(0, 1fr); width: 100%; min-height: 84px; height: auto; padding: 12px 96px 12px 14px; transform: none; }
  .pillar-tab[data-pillar="kompetenz"] { --pillar-accent: var(--green); --pillar-tint: #f1f8f3; }
  .pillar-tab[data-pillar="gesundheit"] { --pillar-accent: var(--orange); --pillar-tint: #fff5ee; }
  .pillar-tab[data-pillar="absicherung"] { --pillar-accent: var(--blue); --pillar-tint: #eef6fa; }
  .pillar-tab.is-active { color: var(--blue-deep); border-color: var(--pillar-accent); background: var(--pillar-tint); box-shadow: 0 12px 30px rgba(24, 63, 86, 0.13); transform: none; }
  .pillar-tab:active { transform: scale(0.985); }
  .pillar-tab-state { position: absolute; top: 50%; right: 14px; display: grid; place-items: center; transform: translateY(-50%); }
  .pillar-tab-arrow { display: grid; place-items: center; width: 36px; height: 36px; color: var(--blue-deep); border: 1px solid rgba(24, 63, 86, 0.14); border-radius: 50%; background: var(--soft); font-size: 20px; font-weight: 900; }
  .pillar-tab-check { display: none; color: var(--pillar-accent); font-size: 10px; font-weight: 900; letter-spacing: 0.02em; white-space: nowrap; }
  .pillar-tab.is-active .pillar-tab-arrow { display: none; }
  .pillar-tab.is-active .pillar-tab-check { display: block; }
  .pillar-icon { width: 50px; height: 50px; font-size: 23px; }
  .pillar-tab strong { font-size: 15px; }
  .pillar-tab small { font-size: 11px; }
  .pillar-panel-media { min-height: 310px; }
  .pillar-panel-copy { padding: 34px 24px 38px; }
  .pillar-panel-copy h3 { font-size: 32px; }
  .parent-evening { grid-template-columns: 1fr; }
  .evening-visual, .evening-visual img { min-height: 520px; }
  .evening-steps { grid-template-columns: 1fr; }
  .source-stage { min-height: 440px; }
  .source-stage-main { width: calc(100% - 28px); height: 410px; }
  .source-stage-small { width: 170px; height: 125px; }
  .choice-card { padding: 26px; }
  .faq-section { gap: 28px; }
  .closing, .closing > img { min-height: 680px; height: 680px; }
  .closing::after { background: linear-gradient(0deg, rgba(24, 63, 86, 0.96), rgba(24, 63, 86, 0.64) 75%, rgba(24, 63, 86, 0.12)); }
  .closing-overlay { top: auto; right: 20px; bottom: 64px; left: 20px; width: auto; transform: none; }
  .closing-overlay > div { display: grid; }
  .site-footer { grid-template-columns: 1fr; padding-bottom: 88px; text-align: center; }
  .footer-kidz { justify-self: center; }
  .site-footer nav { justify-self: center; }
  .mobile-cta { position: fixed; z-index: 90; right: 12px; bottom: 12px; left: 12px; display: block; min-height: 52px; color: var(--blue-deep); border: 0; border-radius: 999px; background: var(--yellow); box-shadow: 0 15px 40px rgba(24, 63, 86, 0.3); font-weight: 900; cursor: pointer; }
  .dialog-step { padding: 44px 24px 28px; }
  .dialog-step h2 { font-size: 32px; }
  .preview-banner { margin: -44px -24px 24px; padding: 14px 64px 14px 24px; }
  .dialog-actions { display: grid; }
  .gallery-shell { display: block; min-height: 0; max-height: 90vh; overflow-y: auto; }
  .gallery-copy { padding: 38px 24px 24px; }
  .gallery-copy h2 { max-width: calc(100% - 42px); font-size: 31px; }
  .gallery-main { min-height: 330px; }
  .gallery-main img { height: 330px; }
  .gallery-thumbs { grid-template-columns: repeat(4, 120px); overflow-x: auto; }
  .story-gallery-heading { margin-bottom: 22px; text-align: left; }
  .story-controls { justify-content: space-between; }
  .story-status { margin-right: auto; }
  .story-controls button { width: 44px; height: 44px; }
  .story-track { gap: 14px; margin: 0 -20px; padding: 6px 20px 24px; }
  .story-slide { flex-basis: calc(100vw - 40px); aspect-ratio: 4 / 3; border-radius: 22px; }
  .story-slide figcaption { right: 20px; bottom: 18px; left: 20px; gap: 10px; }
  .story-slide figcaption span { width: 34px; height: 34px; }
  .story-slide figcaption strong { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Sommerfest-Hinweis: Wer direkt auf der KIDZ-Seite landet, sieht den nächsten
   Familientermin sofort, ohne dass er über die Kundenseite kommen muss. */
.desktop-nav a.nav-event { color: var(--gold-deep); }
.desktop-nav a.nav-event::before { content: "●"; margin-right: 5px; color: var(--yellow); font-size: 10px; vertical-align: 2px; }

.summer-section { max-width: none; padding: 76px max(24px, calc((100vw - var(--max)) / 2)); background: linear-gradient(160deg, #fffaf0, var(--blue-pale)); }
.summer-card { display: grid; grid-template-columns: 296px 1fr; gap: 44px; align-items: center; max-width: var(--max); margin: 0 auto; padding: 32px; border: 1px solid rgba(201, 160, 74, 0.3); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.summer-flyer { position: relative; display: block; overflow: hidden; border-radius: 20px; box-shadow: 0 16px 38px rgba(24, 63, 86, 0.16); }
.summer-flyer img { display: block; width: 100%; height: auto; }
.summer-flyer span { position: absolute; right: 10px; bottom: 10px; left: 10px; padding: 9px 12px; color: #fff; background: rgba(24, 63, 86, 0.86); border-radius: 999px; font-size: 12px; font-weight: 800; text-align: center; }
.summer-copy h2 { margin: 0; color: var(--blue-deep); font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.04em; }
.summer-lede { max-width: 640px; margin: 18px 0 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.summer-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
.summer-facts div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.summer-facts dt { color: var(--gold-deep); font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.summer-facts dd { margin: 5px 0 0; color: var(--blue-deep); font-size: 15px; font-weight: 800; line-height: 1.3; }
.summer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.summer-note { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

@media (max-width: 980px) {
  .summer-card { grid-template-columns: 216px 1fr; gap: 28px; padding: 24px; }
  .summer-facts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .summer-section { padding: 54px 20px; }
  .summer-card { grid-template-columns: 1fr; gap: 22px; padding: 18px; }
  .summer-flyer { width: 100%; max-width: 320px; margin: 0 auto; }
  .summer-copy h2 { font-size: clamp(30px, 9vw, 40px); }
  .summer-lede { font-size: 17px; }
  .summer-actions { display: grid; }
  .summer-actions .button { width: 100%; }
}

/* Persönliches Band, wenn jemand über eine Empfehlung hierher kommt.
   Bewusst schmal und ruhig: Die Seite selbst bleibt die Hauptsache. */
.empfehlungsband {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--blue-pale);
  color: var(--blue-deep);
}
.empfehlungsband p { margin: 0; font-size: 14px; line-height: 1.45; }
.empfehlungsband strong { font-weight: 750; }
.empfehlungsband-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
@media (max-width: 640px) {
  .empfehlungsband { padding: 10px 16px; gap: 10px; }
  .empfehlungsband p { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Einleitung vor der Elternseite (kidz-empfehlung.html)
   Der Empfohlene sieht zuerst, von wem die Empfehlung kommt und wer dahinter
   steht. Erst danach geht es auf das Konzept.
   --------------------------------------------------------------------------- */

.kidz-intro-body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(165deg, var(--blue-deep) 0%, var(--blue) 62%, #2f6a88 100%);
  color: #fff;
  font-family: var(--font, inherit);
}
.kidz-intro-body .intro-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.kidz-intro-body .intro-logo { width: 46px; height: 46px; object-fit: contain; }
.kidz-intro-body .intro-brand strong { display: block; font-size: 15px; font-weight: 750; }
.kidz-intro-body .intro-brand small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .72); font-size: 12px; }

.kidz-intro-body .intro-main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 48px; }
.kidz-intro-body .intro-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

.kidz-intro-body .intro-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
.kidz-intro-body .intro-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 800;
}
.kidz-intro-body .intro-eyebrow { margin: 0 0 12px; color: var(--yellow); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.kidz-intro-body .intro-hero h1 { margin: 0; font-size: clamp(32px, 4.6vw, 52px); font-weight: 780; line-height: 1.08; letter-spacing: -.02em; }
.kidz-intro-body .intro-hero h1 span { color: var(--yellow); }
.kidz-intro-body .intro-hero h1 em { font-style: normal; color: rgba(255, 255, 255, .78); }
.kidz-intro-body .intro-lede { max-width: 620px; margin: 22px 0 0; color: rgba(255, 255, 255, .86); font-size: 17px; line-height: 1.6; }
.kidz-intro-body .intro-message {
  max-width: 620px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--yellow);
  background: rgba(255, 255, 255, .1);
  font-size: 16px;
  line-height: 1.55;
}

.kidz-intro-body .intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.kidz-intro-body .intro-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 28px;
  border-radius: 999px;
  background: var(--yellow);
  color: #2a3b47;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
  transition: transform 140ms ease, filter 140ms ease;
}
.kidz-intro-body .intro-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.kidz-intro-body .intro-link { color: #fff; font-size: 14.5px; font-weight: 650; text-underline-offset: 4px; }

.kidz-intro-body .intro-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .78); font-size: 13px; }
.kidz-intro-body .intro-trust li::before { content: "✓"; margin-right: 7px; color: var(--yellow); font-weight: 900; }

.kidz-intro-body .intro-person-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.kidz-intro-body .intro-person-facts b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}
.kidz-intro-body .intro-person-facts b::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}

/* Drehkarte: Vorderseite Portraet, Rueckseite ein paar Saetze zur Person und
   ein Familienbild. Feste Flaeche, damit die Drehung sauber sitzt.
   Ohne Bewegung (Systemeinstellung) wird ohne Animation umgeschaltet. */
.kidz-intro-body .intro-person-flip {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  perspective: 1600px;
}
.kidz-intro-body .intro-person-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(.2, .8, .2, 1);
}
.kidz-intro-body .intro-person-flip.gedreht .intro-person-inner { transform: rotateY(180deg); }

.kidz-intro-body .intro-person {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.kidz-intro-body .intro-person img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.kidz-intro-body .intro-person figcaption { position: absolute; right: 16px; bottom: 16px; left: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(24, 63, 86, .9); }
.kidz-intro-body .intro-person figcaption > span { display: block; margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: 12.5px; }
.kidz-intro-body .intro-person-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.kidz-intro-body .intro-person-facts b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}
.kidz-intro-body .intro-person-facts b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }

/* Rueckseite: das Familienbild traegt die Karte, die Saetze liegen darauf. */
.kidz-intro-body .intro-person-back { transform: rotateY(180deg); background: #0d2f42; }
.kidz-intro-body .intro-person-family { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.kidz-intro-body .intro-person-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 47, 66, .12) 0%, rgba(13, 47, 66, .55) 42%, rgba(9, 34, 48, .95) 78%);
}
.kidz-intro-body .intro-person-back-copy {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 13px 16px 15px;
  border-radius: 16px;
  background: rgba(9, 34, 48, .82);
  backdrop-filter: blur(4px);
}
.kidz-intro-body .intro-person-back-copy strong { font-size: 15px; font-weight: 780; }
.kidz-intro-body .intro-person-back-copy ul { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.kidz-intro-body .intro-person-back-copy li { position: relative; padding-left: 18px; color: rgba(255, 255, 255, .92); font-size: 12.5px; line-height: 1.4; }
.kidz-intro-body .intro-person-back-copy li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }

.kidz-intro-body .intro-person-toggle {
  position: absolute;
  z-index: 3;
  right: 16px;
  top: 16px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(9, 38, 53, .72);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.kidz-intro-body .intro-person-toggle:hover { border-color: #fff; background: rgba(9, 38, 53, .92); }

@media (prefers-reduced-motion: reduce) {
  .kidz-intro-body .intro-person-inner { transition: none; }
}

/* Drei Grundlagen als Appetitmacher: eigenes Bild, eigene Farbe, ein
   Halbsatz. Erklaert wird nichts, das macht die KIDZ-Seite selbst. Die Karten
   fuehren deshalb ebenfalls dorthin. */
.kidz-intro-body .intro-pillars { margin-top: 54px; }
.kidz-intro-body .intro-pillars-head { max-width: 640px; margin-bottom: 22px; }
.kidz-intro-body .intro-pillars-head h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 780; line-height: 1.14; }

.kidz-intro-body .intro-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.kidz-intro-body .intro-pillar {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .07);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.kidz-intro-body .intro-pillar:hover,
.kidz-intro-body .intro-pillar:focus-visible {
  transform: translateY(-6px);
  border-color: var(--akzent, var(--yellow));
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 26px 54px rgba(0, 0, 0, .26);
}
.kidz-intro-body .intro-pillar::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  z-index: 3;
  height: 5px;
  background: var(--akzent, var(--yellow));
}
.kidz-intro-body .intro-pillar-kompetenz { --akzent: var(--yellow); }
.kidz-intro-body .intro-pillar-gesundheit { --akzent: var(--turquoise); }
.kidz-intro-body .intro-pillar-absicherung { --akzent: var(--green-light); }

.kidz-intro-body .intro-pillar-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.kidz-intro-body .intro-pillar-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms ease; }
.kidz-intro-body .intro-pillar:hover .intro-pillar-media img { transform: scale(1.05); }
.kidz-intro-body .intro-pillar-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 63, 86, 0) 40%, rgba(24, 63, 86, .85) 100%);
}
.kidz-intro-body .intro-pillar-num {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--akzent, var(--yellow));
  color: #17323f;
  font-size: 14px;
  font-weight: 900;
}

.kidz-intro-body .intro-pillar-copy { display: block; padding: 18px 20px 20px; }
.kidz-intro-body .intro-pillar-copy strong { display: block; font-size: 19px; font-weight: 780; line-height: 1.2; }
.kidz-intro-body .intro-pillar-copy > span { display: block; margin-top: 7px; color: rgba(255, 255, 255, .82); font-size: 14.5px; line-height: 1.5; }
/* Muss den allgemeineren Regelsatz fuer die Textzeilen der Karte schlagen,
   sonst rutscht der Pfeil in eine eigene Zeile. */
.kidz-intro-body .intro-pillar-copy > .intro-pillar-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.kidz-intro-body .intro-pillar-more::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--akzent, var(--yellow));
  border-bottom: 2px solid var(--akzent, var(--yellow));
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}
.kidz-intro-body .intro-pillar:hover .intro-pillar-more::after { transform: rotate(-45deg) translate(2px, 2px); }

/* Elternabend erst nach den Karten: wer noch nichts weiss, soll sich nicht
   vorher schon fuer einen Abend entscheiden muessen. */
.kidz-intro-body .intro-abend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 22px;
  background: rgba(255, 255, 255, .07);
}
.kidz-intro-body .intro-abend strong { display: block; font-size: 17px; font-weight: 750; }
.kidz-intro-body .intro-abend span { display: block; margin-top: 5px; max-width: 560px; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.5; }
.kidz-intro-body .intro-abend-link {
  flex: 0 0 auto;
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 750;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}
.kidz-intro-body .intro-abend-link:hover { border-color: #fff; background: rgba(255, 255, 255, .16); }

.kidz-intro-body .intro-note { max-width: 720px; margin: 30px auto 0; color: rgba(255, 255, 255, .72); font-size: 13.5px; line-height: 1.6; text-align: center; }

.kidz-intro-body .intro-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .7);
  font-size: 12.5px;
}
.kidz-intro-body .intro-footer a { margin-left: 16px; color: inherit; text-underline-offset: 3px; }

@media (max-width: 900px) {
.kidz-intro-body .intro-hero { grid-template-columns: 1fr; gap: 30px; }
  /* Am Handy zuerst die Botschaft, danach das Bild. */
  .kidz-intro-body .intro-person { order: 1; }
.kidz-intro-body .intro-person-flip { aspect-ratio: 5 / 6; max-height: 420px; }
.kidz-intro-body .intro-pillar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.kidz-intro-body .intro-main { padding-top: 26px; }
.kidz-intro-body .intro-hero h1 { font-size: clamp(28px, 8vw, 36px); }
.kidz-intro-body .intro-lede { font-size: 15.5px; }
.kidz-intro-body .intro-button { width: 100%; justify-content: center; }
.kidz-intro-body .intro-actions { gap: 12px; }
.kidz-intro-body .intro-link { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Vermögensaufbau: eine echte Beispielrechnung statt einer Broschürengrafik.
   Zahlen aus der Berechnung von Kai (55 Euro, 7,3 Prozent, 18 bzw. 49 Jahre).
   --------------------------------------------------------------------------- */

.wealth-section { background: var(--blue-pale); }
.wealth-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: center; max-width: var(--max); margin: 0 auto; }
.wealth-visual { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.wealth-visual img { display: block; width: 100%; height: 100%; max-height: 620px; object-fit: cover; }
.wealth-visual figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(24, 63, 86, .88);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.wealth-copy h2 { margin: 10px 0 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.wealth-lede { margin: 16px 0 0; max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.6; }

.wealth-steps { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: none; }
.wealth-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.wealth-steps li > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}
.wealth-steps strong { display: block; font-size: 16px; font-weight: 800; }
.wealth-steps p { margin: 5px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.wealth-steps b { color: var(--blue-deep); font-weight: 800; }

.wealth-result {
  margin-top: 22px;
  padding: 24px 26px;
  border-radius: 22px;
  background: linear-gradient(150deg, var(--blue-deep), var(--blue));
  color: #fff;
  box-shadow: 0 20px 46px rgba(24, 63, 86, .28);
}
.wealth-result span { display: block; color: var(--yellow); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.wealth-result strong { display: block; margin-top: 8px; font-size: clamp(38px, 5vw, 58px); font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.wealth-result p { margin: 12px 0 0; max-width: 560px; color: rgba(255, 255, 255, .86); font-size: 15px; line-height: 1.55; }

.wealth-note { margin: 18px 0 0; max-width: 640px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.wealth-copy .button { margin-top: 20px; }

@media (max-width: 900px) {
  .wealth-grid { grid-template-columns: 1fr; gap: 28px; }
  .wealth-visual img { max-height: 420px; }
  .wealth-steps li { padding: 14px 15px; grid-template-columns: 32px 1fr; gap: 12px; }
  .wealth-steps li > span { width: 32px; height: 32px; font-size: 14px; }
  .wealth-steps strong { font-size: 15px; }
  .wealth-steps p { font-size: 14px; }
  .wealth-result { padding: 20px; }
}

/* ---------------------------------------------------------------------------
   Kleines KIDZ-Menü fürs Handy. Am Rechner bleibt die normale Navigation.
   --------------------------------------------------------------------------- */

.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; }
.mobile-menu-button { display: none; }
.mobile-menu { display: none; }

@media (max-width: 980px) {
  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 15px 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    cursor: pointer;
  }
  .mobile-menu-icon { display: grid; gap: 4px; }
  .mobile-menu-icon i { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--blue-deep); transition: transform 180ms ease, opacity 180ms ease; }
  .mobile-menu-word { color: var(--blue-deep); font-size: 14px; font-weight: 800; }
  .mobile-menu-button[aria-expanded="true"] .mobile-menu-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-button[aria-expanded="true"] .mobile-menu-icon i:nth-child(2) { opacity: 0; }
  .mobile-menu-button[aria-expanded="true"] .mobile-menu-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-menu-title { margin: 0 0 10px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }

  .mobile-menu {
    position: sticky;
    top: 68px;
    z-index: 80;
    display: grid;
    gap: 2px;
    padding: 12px 14px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(24, 63, 86, .16);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu-label { margin: 8px 0 4px; color: var(--gold-deep); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-menu-label:first-child { margin-top: 0; }
  .mobile-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-menu a:active { background: var(--blue-pale); }
  .mobile-menu a > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue-pale);
    color: var(--blue-deep);
    font-size: 11px;
    font-weight: 900;
  }
}


/* Sommerfest als schmaler Streifen: sichtbar, aber ohne den Faden zu reissen.
   Alle Einzelheiten stehen auf der Sommerfestseite. */
.fest-streifen {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  /* Der Streifen sass mit margin: 0 auto direkt unter dem blauen Band und wirkte angeklebt.
     Er braucht Luft nach oben, damit er als eigener Hinweis lesbar ist, und etwas nach unten,
     bis der naechste Abschnitt mit seinen 110px Innenabstand beginnt. */
  width: min(var(--max), calc(100% - 48px)); margin: 52px auto 12px; padding: 18px 24px;
  border: 1px solid var(--line); border-left: 5px solid var(--yellow); border-radius: 16px;
  background: var(--paper); box-shadow: 0 12px 30px rgba(24, 63, 86, .08);
}
.fest-flyer { flex: 0 0 auto; width: 92px; border-radius: 10px; overflow: hidden; line-height: 0; box-shadow: 0 6px 16px rgba(24, 63, 86, .18); }
.fest-flyer img { width: 100%; height: auto; }
.fest-copy { flex: 1 1 320px; min-width: 0; }
.fest-kicker { margin: 0 0 4px; color: var(--gold-deep); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.fest-streifen strong { display: block; font-size: 17px; font-weight: 800; }
.fest-streifen .summer-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 10px 0 0; }
/* Ohne das Zurücksetzen behalten die vier Angaben die Kachel-Optik der grossen Fassung
   (Rahmen, Fuellung, 16px Radius). Im schmalen Streifen ist dafuer kein Platz: Sie brachen in
   drei ungleiche Reihen und liessen den ganzen Block unruhig wirken. Hier sind sie eine ruhige
   Aufzaehlung, so wie display: flex mit Grundlinien-Ausrichtung es ohnehin vorsah. */
.fest-streifen .summer-facts div { display: flex; gap: 6px; align-items: baseline;
  padding: 0; border: 0; border-radius: 0; background: none; }
.fest-streifen .summer-facts dt { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.fest-streifen .summer-facts dd { margin: 0; font-size: 13.5px; font-weight: 650; }
/* Die Obergrenze ist noetig, weil die Gruppe ihre Breite sonst als Summe aller Kinder in einer
   Zeile rechnet, den umbrechenden Hinweis eingeschlossen: 597px statt der 290, die die beiden
   Knoepfe brauchen. */
.fest-wege { display: flex; flex: 0 0 auto; gap: 8px; flex-wrap: wrap; max-width: 310px; }
.fest-weg-haupt, .fest-weg { padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 750; text-decoration: none; }
.fest-weg-haupt { background: var(--blue-deep); color: #fff; }
.fest-weg-haupt:hover { background: var(--blue); }
.fest-weg { border: 1px solid var(--line); color: var(--blue-deep); }
.fest-weg:hover { border-color: var(--blue); }
/* Der Hinweis stand in einer Zeile und machte damit die ganze Knopfgruppe 609px breit, obwohl die
   beiden Knoepfe nur 290 brauchen. Die Angaben links blieben dadurch auf 385px gedraengt und
   brachen in drei ungleiche Zeilen. Mit der Begrenzung bestimmen die Knoepfe die Gruppenbreite,
   der Hinweis darf darunter umbrechen. */
.fest-hinweis { width: 100%; max-width: 300px; margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 760px) {
  .fest-streifen { width: calc(100% - 28px); margin: 34px auto 12px; padding: 14px 16px; gap: 14px; }
  .fest-flyer { width: 72px; }
  /* Die Obergrenze aus der breiten Fassung muss hier wieder weg, sonst bleiben die Knoepfe auf
     310px stehen, statt die Zeile auszufuellen. */
  .fest-wege { width: 100%; max-width: none; }
  .fest-hinweis { max-width: none; }
  .fest-weg-haupt, .fest-weg { flex: 1; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Der Paragraf, der Eltern trifft: § 12 SGB V mit dem Namen des eigenen Kindes.
   Bewusst als Warnkasten gesetzt, nicht als hübsche Kachelreihe.
   --------------------------------------------------------------------------- */

.gap-section { background: var(--paper); }
.gap-inner { max-width: 940px; margin: 0 auto; }
.gap-head { max-width: 760px; }
.gap-head h2 { margin: 10px 0 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.gap-lede { margin: 14px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }

.gap-name { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.gap-name label { color: var(--ink); font-size: 14px; font-weight: 800; }
.gap-name input {
  flex: 1 1 240px;
  max-width: 320px;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
}
.gap-name input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(44, 95, 124, .16); }

.gap-law {
  position: relative;
  margin: 20px 0 0;
  padding: 26px 28px 22px;
  border: 2px solid #b3261e;
  border-left-width: 8px;
  border-radius: 4px;
  background: #fdf4f3;
}
.gap-law-kicker { margin: 0; color: #b3261e; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.gap-law-text { margin: 14px 0 0; color: #2a1b1a; font-size: clamp(18px, 2.1vw, 22px); line-height: 1.62; }
.gap-law-text b { background: rgba(179, 38, 30, .14); box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); font-weight: 800; }
.gap-law-name { font-weight: 900; color: #8f1d17; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gap-law-source { margin: 16px 0 0; color: #6b5450; font-size: 12.5px; line-height: 1.5; }
.gap-law-source a { color: #8f1d17; text-underline-offset: 3px; }

.gap-meaning { margin: 26px 0 0; }
.gap-meaning-title { margin: 0 0 16px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; line-height: 1.25; }
.gap-meaning p { margin: 16px 0 0; color: var(--ink); font-size: 16px; line-height: 1.65; }
.gap-fall {
  margin: 0;
  padding: 20px 22px;
  border-left: 4px solid #b3261e;
  border-radius: 0 14px 14px 0;
  background: #fdf4f3;
}
.gap-fall-kicker { margin: 0 !important; color: #b3261e; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.gap-fall p + p, .gap-fall p:last-child { margin-top: 10px; }
.gap-meaning strong { font-weight: 800; }
.gap-meaning-source { margin-top: 10px !important; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

.gap-bridge {
  margin: 24px 0 0;
  padding: 18px 22px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 16px 16px 0;
  background: var(--blue-pale);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .gap-law { padding: 20px 18px 18px; border-left-width: 6px; }
  .gap-law-text { font-size: 17px; line-height: 1.6; }
  .gap-name input { max-width: none; }
  .gap-bridge { font-size: 16px; padding: 16px 18px; }
}

}

/* Die goldene KIDZ-Lok als Wegmotiv beim Vermögensaufbau. */
.wealth-lok { display: block; width: 168px; height: auto; margin: 0 0 12px; mix-blend-mode: multiply; }
@media (max-width: 900px) { .wealth-lok { width: 132px; } }


/* Zwischen 980 und 1180 Pixeln wird die Kopfzeile eng: kleinere Abstände,
   damit die Navigation nicht in den Knopf läuft. */
@media (min-width: 981px) and (max-width: 1180px) {
  .desktop-nav { gap: 16px; }
  .desktop-nav a { font-size: 13px; }
  .header-cta { padding-inline: 14px; font-size: 13px; }
  .brand-copy small { font-size: 12px; }
}


/* Fußzeile: auf kleineren Bildschirmen untereinander statt nebeneinander. */
@media (max-width: 1100px) {
  .site-footer { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .site-footer nav { justify-self: start; }
  .footer-kidz { justify-self: end; }
}
@media (max-width: 700px) {
  .site-footer { grid-template-columns: 1fr; text-align: left; }
  .footer-kidz, .site-footer nav { justify-self: start; }
  .footer-kontakt { flex-direction: column; gap: 10px; }
}

/* KIDZ-Zug und gesundheitsorientierter Umbau */
.train-section { max-width: none; padding-right: 0; padding-left: 0; background: var(--blue-pale); overflow: hidden; }
.train-section > .section-heading { padding-right: 24px; padding-left: 24px; }
.train-swipe-hint { display: none; }
.train-viewport { max-width: var(--max); margin: 0 auto; padding: 10px 30px 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--blue-light) transparent; }
.train-track { position: relative; display: flex; align-items: end; width: max-content; min-width: 100%; padding: 12px 8px 30px; }
.train-track::after { content: ""; position: absolute; right: 0; bottom: 15px; left: 0; height: 5px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--blue-deep) 0 28px, transparent 28px 38px); opacity: .25; }
.train-car { position: relative; flex: 0 0 128px; min-height: 224px; display: grid; grid-template-rows: auto 104px auto auto; align-items: center; justify-items: center; gap: 3px; margin: 0 3px; padding: 12px 8px 14px; border: 1px solid rgba(44,95,124,.15); border-radius: 20px; background: rgba(255,255,255,.78); scroll-snap-align: center; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.train-car::after { content: ""; position: absolute; z-index: 2; right: -9px; top: 111px; width: 12px; height: 5px; border-radius: 5px; background: var(--gold-deep); }
.train-car:last-child::after { display: none; }
.train-number { justify-self: start; color: var(--gold-deep); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.train-car > strong { color: var(--blue-deep); font-size: 14px; line-height: 1.08; text-align: center; }
.train-car > small { color: var(--muted); font-size: 11px; line-height: 1.3; text-align: center; }
.train-car.is-active { z-index: 3; transform: translateY(-5px); border-color: var(--gold); background: white; box-shadow: 0 13px 30px rgba(24,63,86,.14); }
.train-car:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.wagon-shape { position: relative; width: 104px; height: 74px; align-self: center; border-radius: 5px 5px 14px 14px; background: var(--gold); box-shadow: inset 0 -4px 0 rgba(116,82,18,.12); }
.wagon-shape::before { content: ""; position: absolute; right: -4px; bottom: 0; left: -4px; height: 13px; border-radius: 3px 3px 12px 12px; background: var(--gold); }
.wagon-shape i, .loco-shape i { position: absolute; z-index: 2; bottom: -12px; width: 25px; height: 25px; border: 3px solid white; border-radius: 50%; background: var(--gold-deep); }
.wagon-shape i:first-child { left: 13px; }
.wagon-shape i:nth-child(2) { right: 13px; }
.wagon-shape-health b { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: white; font-size: 35px; line-height: 1; }
.loco-shape { position: relative; width: 112px; height: 76px; align-self: center; }
.loco-shape::before { content: ""; position: absolute; left: 2px; bottom: 13px; width: 76px; height: 45px; border-radius: 28px 5px 6px 15px; background: var(--gold); }
.loco-shape::after { content: ""; position: absolute; right: 3px; bottom: 13px; width: 48px; height: 66px; border-radius: 5px 5px 4px 4px; background: linear-gradient(white, white) 15px 12px / 21px 20px no-repeat, var(--gold); }
.loco-shape i { bottom: 0; width: 28px; height: 28px; }
.loco-shape i:first-child { left: 16px; }
.loco-shape i:nth-child(2) { right: 12px; }
.loco-shape b { position: absolute; z-index: 1; left: 18px; top: 4px; width: 19px; height: 29px; border-radius: 3px 3px 0 0; background: var(--gold); }
.train-detail { position: relative; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(240px,.65fr); gap: 28px; align-items: end; max-width: 1030px; margin: 12px auto 0; padding: 38px; border-radius: var(--radius); background: var(--blue-deep); color: white; box-shadow: var(--shadow); overflow: hidden; }
.train-detail-index { position: absolute; right: -3px; top: -30px; color: rgba(255,255,255,.07); font-size: 126px; font-weight: 900; line-height: 1; }
.train-detail-copy, .train-detail-question { position: relative; }
.train-detail-label { margin: 0 0 5px; color: var(--yellow); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.train-detail-copy h3 { max-width: 650px; margin: 0; color: white; font-size: 30px; line-height: 1.08; }
.train-detail-copy > p:not(.train-detail-label) { color: #d7e5eb; }
.train-detail-copy ul { display: grid; gap: 7px; margin: 18px 0; padding: 0; list-style: none; }
.train-detail-copy li::before { content: "✓"; margin-right: 8px; color: var(--yellow); }
.train-detail-link { color: white; font-weight: 800; text-underline-offset: 5px; }
.train-detail-question { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.1); }
.train-detail-question span { display: block; margin-bottom: 5px; color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.train-detail-question strong { display: block; font-size: 19px; line-height: 1.25; }

.health-future-section { width: 100%; max-width: var(--max); min-width: 0; display: grid; gap: 26px; }
.health-future-section > *, .health-future-grid > * { min-width: 0; }
.health-future-intro > p:not(.eyebrow) { max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.health-future-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.health-future-grid article { padding: 26px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); }
.health-future-grid article.is-highlighted { border-color: var(--gold); background: #fffaf0; box-shadow: 0 12px 28px rgba(156,120,42,.1); }
.health-future-grid article > span { color: var(--gold-deep); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.health-future-grid h3 { margin: 9px 0 8px; color: var(--blue-deep); font-size: 22px; line-height: 1.15; }
.health-future-grid p { margin: 0; color: var(--muted); line-height: 1.55; }
.health-future-bridge { margin: 0; padding: 20px; border-left: 4px solid var(--blue); border-radius: 0 15px 15px 0; background: var(--blue-pale); color: #435764; }
.health-future-bridge strong { color: var(--blue-deep); }

.vip-section { max-width: none; padding-right: max(24px,calc((100vw - var(--max))/2)); padding-left: max(24px,calc((100vw - var(--max))/2)); background: var(--soft); }
.vip-head { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 190px; gap: 22px; align-items: center; max-width: var(--max); margin: 0 auto; padding: 36px; border-radius: var(--radius); background: var(--blue-deep); color: white; overflow: hidden; scroll-margin-top: calc(var(--header) + 14px); }
.vip-head::after { content: ""; position: absolute; right: -54px; top: -84px; width: 190px; height: 190px; border: 24px solid rgba(255,255,255,.08); border-radius: 50%; }
.vip-head > div, .vip-head img { position: relative; z-index: 1; }
.vip-head .eyebrow { color: var(--yellow); }
.vip-head h2 { max-width: 760px; color: white; font-size: clamp(34px,4vw,52px); }
.vip-head p:not(.eyebrow) { margin: 15px 0 0; color: #d7e5eb; font-size: 18px; font-weight: 700; }
.vip-head img { width: 180px; height: auto; justify-self: end; filter: drop-shadow(0 9px 15px rgba(0,0,0,.18)); }
.vip-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; max-width: var(--max); margin: 18px auto 0; }
.vip-card { border: 1px solid var(--line); border-radius: 20px; background: white; overflow: hidden; }
.vip-card > img { width: 100%; height: 300px; object-fit: cover; }
.vip-card:last-child > img { object-position: center 36%; }
.vip-card > div { padding: 25px 22px 28px; }
.vip-card h3 { margin: 0; color: var(--blue-deep); font-size: 26px; line-height: 1.15; }
.vip-card p:not(.eyebrow) { margin: 12px 0 0; color: var(--muted); line-height: 1.55; }
.vip-note { max-width: var(--max); margin: 16px auto 0; padding: 17px 18px; border-left: 4px solid var(--yellow); border-radius: 0 14px 14px 0; background: var(--blue-pale); color: #435764; }
.vip-note strong { color: var(--blue-deep); }

@media (max-width: 980px) {
  .train-car { flex-basis: 148px; min-height: 224px; margin: 0 5px; }
  .train-detail { margin-right: 24px; margin-left: 24px; }
  .health-future-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .train-section { padding-top: 76px; padding-bottom: 68px; }
  .train-swipe-hint { display: flex; justify-content: space-between; margin: 0 20px 6px; color: var(--blue); font-size: 13px; font-weight: 800; }
  .train-viewport { padding-right: 20px; padding-left: 20px; }
  .train-detail { grid-template-columns: 1fr; gap: 20px; margin-right: 20px; margin-left: 20px; padding: 28px 22px 24px; }
  .train-detail-copy h3 { font-size: 27px; }
  .health-future-section { padding-top: 76px; padding-bottom: 76px; }
  .vip-section { padding: 76px 20px; }
  .vip-head { grid-template-columns: minmax(0,1fr) 105px; gap: 12px; padding: 27px 20px; }
  .vip-head h2 { font-size: 30px; }
  .vip-head p:not(.eyebrow) { font-size: 16px; }
  .vip-head img { width: 112px; }
  .vip-grid { grid-template-columns: 1fr; }
  .vip-card > img { height: 220px; }
}

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