/* KIDS-SPARPLAN . Token- und Basis-Layer nach Brand Guidelines v3.0
   Gilt ausschliesslich fuer den /v3/-Zweig. Die 39 Live-Seiten sind unberuehrt.

   Kontrastnachweis: jobs/tmp/kontrast.py, alle verwendeten Paare >= 4.5 (Text)
   bzw. >= 3.0 (UI-Grenzen). Drei Guide-Vorgaben sind rechnerisch nicht haltbar
   und deshalb bewusst abgewandelt:
     1. Sonnengold traegt nur auf dunklem Grund (auf Blattgruen 1.15, auf
        Pergament 1.87). Fuer Akzenttext auf hell gibt es --gold-ink.
     2. "Schiefer auf dunklem Grund" ergibt 1.04 und ist unsichtbar. Text auf
        Dunkel ist Pergament, Schiefer ist Fliesstext auf Hell.
     3. Blattgruen ist Bandfarbe, nicht Vollflaechen-Body. Karten darauf
        erreichen nur 1.44 bis 1.83 Flaechenkontrast und brauchen eine Kontur. */

:root{
  /* Guide v3.0, unveraendert */
  --tiefgruen:#183A2E;
  --blatt:#A8C99A;
  --gold:#D4AF37;
  --pergament:#F6F1E6;
  --sand:#ECE4D2;
  --wiese:#7A8A52;
  --schiefer:#2E322F;
  --weiss:#FFFFFF;

  /* abgeleitet, weil die Guide-Werte in diesen Rollen durchfallen */
  --gold-ink:#6B5410;
  --grau:#5A605B;
  --muted-blatt:#2E4F3E;
  --tiefgruen-hover:#24503F;
  --auf-dunkel:#F6F1E6;
  --auf-dunkel-muted:#CDD8D1;
  --wiese-ink:#5C6A3B;

  /* Linien: dekorativ vs. funktionale UI-Grenze (1.4.11 verlangt 3:1) */
  --linie:rgba(24,58,46,.18);
  --linie-karte:rgba(24,58,46,.30);
  --linie-ui:rgba(24,58,46,.55);

  --sans:"Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --radius:14px;
  --radius-l:20px;
  --schatten:0 10px 30px rgba(24,58,46,.10);
  --schatten-l:0 18px 44px rgba(24,58,46,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.62;
  color:var(--schiefer);
  background:var(--pergament);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Typografie. Die Guide-Skala (66/52/44/38/34/30) ist eine Print-Skala.
   Uebernommen sind die Verhaeltnisse, nicht die Zahlen. Inter braucht bei
   grossen Graden negatives Tracking, sonst wirkt der Satz lose. */
h1,h2,h3{font-family:var(--sans);color:var(--tiefgruen);line-height:1.08}
h1{font-size:clamp(34px,6vw,60px);font-weight:800;letter-spacing:-.022em}
h2{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.015em;margin-bottom:.5em}
h3{font-size:21px;font-weight:600;letter-spacing:-.005em;margin-bottom:.35em;line-height:1.25}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}
strong{font-weight:700}
a{color:var(--gold-ink);text-underline-offset:3px}
a:hover{color:var(--tiefgruen)}

.lead{font-size:clamp(18px,2.2vw,20px);line-height:1.55;max-width:34em}
.lede{font-size:19px;max-width:42em}
.muted{color:var(--grau);font-size:15px}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);
}
.legal{font-size:13px;line-height:1.6}

/* Layout */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:680px}
.center{text-align:center}

section.band{padding:76px 0}
section.band.sand{background:var(--sand)}
section.band.blatt{background:var(--blatt)}
section.band.blatt .eyebrow{color:var(--muted-blatt)}
section.band.blatt .muted{color:var(--muted-blatt)}
section.band.dunkel{background:var(--tiefgruen)}
section.band.dunkel h2,
section.band.dunkel h3,
section.band.dunkel p{color:var(--auf-dunkel)}
section.band.dunkel .eyebrow{color:var(--blatt)}
section.band.dunkel .muted{color:var(--auf-dunkel-muted)}
/* :not(.btn) ist Pflicht. Ohne den Ausschluss schlaegt diese Regel (0-2-1)
   die Button-Klassen (0-1-0), und ein Gold-Button auf dunklem Band bekaeme
   goldene Schrift auf goldenem Grund. */
section.band.dunkel a:not(.btn){color:var(--gold)}

/* Wortmarke. Guide v3.0: gemischt geschrieben mit Punkt, "Kids-" dunkel,
   "Sparplan." in Gold. Auf der dunklen Navi steht "Kids-" in Pergament,
   weil Gold auf hellem Grund nur 1.87 erreicht. Die wmtext-Huelle ist
   Pflicht: ohne sie erzeugt das gap des Flex-Ankers eine Luecke mitten
   im Wort. */
.wordmark{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  font-size:clamp(19px,4.6vw,23px);color:var(--tiefgruen);
}
.wordmark .wmtext{white-space:nowrap}
.wordmark .sp{color:var(--gold-ink)}
.logo-mark{height:44px;width:44px;display:block;flex:0 0 auto}
/* Auf dunklem Grund verschwindet das gruene K der Marke. Das Logo wird NICHT
   umgefaerbt (Eigenbau-Varianten sind ausgeschlossen), es bekommt eine helle
   Flaeche als Freiraum. */
nav .logo-mark{background:none;border-radius:0;padding:0;box-shadow:none}
.auf-dunkel .wordmark,
nav .wordmark,
footer .wordmark{color:var(--auf-dunkel)}
nav .wordmark .sp,
footer .wordmark .sp{color:var(--gold)}

/* Navi: dunkel. Loest den Gold-Kontrast und den Mobil-Umbruch in einem Zug. */
nav{position:sticky;top:0;z-index:50;background:var(--tiefgruen);border-bottom:1px solid rgba(246,241,230,.14)}
nav .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 24px;max-width:1080px;margin:0 auto}
.nav-r{display:flex;align-items:center;gap:22px}
.nav-r a.link{font-size:15px;font-weight:500;color:var(--auf-dunkel);text-decoration:none}
.nav-r a.link:hover{color:var(--gold)}

/* Buttons. Regel: pro Bildschirm eine Primaeraktion, hoechstens ein Fluchtweg.
   Gold-Button ausschliesslich auf dunklem Grund (Label tiefgruen = 5.93). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.2;
  border-radius:12px;padding:15px 26px;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--tiefgruen);color:var(--auf-dunkel);border-color:var(--tiefgruen)}
.btn-primary:hover{background:var(--tiefgruen-hover);border-color:var(--tiefgruen-hover);color:var(--auf-dunkel)}
.btn-ghost{background:transparent;color:var(--tiefgruen);border-color:var(--linie-ui)}
.btn-ghost:hover{background:rgba(24,58,46,.07);color:var(--tiefgruen)}
.btn-gold{background:var(--gold);color:var(--tiefgruen);border-color:var(--gold)}
.btn-gold:hover{background:#E0BF4A;color:var(--tiefgruen)}
.btn-hell{background:var(--pergament);color:var(--tiefgruen);border-color:var(--pergament)}
.btn-hell:hover{background:var(--sand);color:var(--tiefgruen)}
.btn-ghost-dunkel{background:transparent;color:var(--pergament);border-color:rgba(246,241,230,.55)}
.btn-ghost-dunkel:hover{background:rgba(246,241,230,.12);color:var(--pergament)}
.btn-klein{padding:11px 18px;font-size:15px}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(4px)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Karten. Auf Blattgruen ist die Kontur Pflicht: Pergament auf Blattgruen
   trennt nur mit 1.62, reine Farbtrennung reicht nicht. */
/* Tonstufe ist Pflicht: liegt eine Karte auf einem Band derselben Farbe,
   traegt nur die Kontur. Regel: auf Pergament-Band Karten in Sand, auf
   Sand-Band Karten in Pergament. */
.card{background:var(--pergament);border:1px solid var(--linie-karte);border-radius:var(--radius);padding:26px;box-shadow:var(--schatten)}
.card.sand{background:var(--sand)}
.card h3{margin-bottom:.4em}
.card p{font-size:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* Vertrauenszeile */
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px;color:var(--muted-blatt);font-weight:500}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--tiefgruen);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Anbieter-Zeile: Pflichtangabe, muss auf der Seite selbst stehen,
   nicht nur hinter einem Link (Google-Finanzwerbung). */
.anbieter{font-size:13px;line-height:1.6;color:var(--grau)}
section.band.dunkel .anbieter,footer .anbieter{color:var(--auf-dunkel-muted)}
.anbieter a{color:inherit}

/* Formular */
label{display:block;font-weight:600;font-size:15px;color:var(--tiefgruen);margin-bottom:6px}
input[type=text],input[type=tel],input[type=email]{
  width:100%;font-family:var(--sans);font-size:16.5px;color:var(--schiefer);
  background:var(--weiss);border:1.5px solid var(--linie-ui);border-radius:11px;
  padding:13px 14px;transition:border-color .15s,box-shadow .15s;
}
input::placeholder{color:#8A8F8A}
input:hover{border-color:var(--tiefgruen)}
select{
  width:100%;font-family:var(--sans);font-size:16.5px;color:var(--schiefer);
  background-color:var(--weiss);border:1.5px solid var(--linie-ui);border-radius:11px;
  padding:13px 42px 13px 14px;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E322F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px 18px;
  transition:border-color .15s,box-shadow .15s;
}
select:hover{border-color:var(--tiefgruen)}
.feld{margin-bottom:20px}
.hint{font-size:13.5px;color:var(--grau);margin-top:6px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--schiefer)}
/* 24px ist das WCAG-2.5.8-Minimum fuer Zielgroessen. 18px waren zu klein. */
.check input{margin-top:2px;width:24px;height:24px;flex:0 0 auto;accent-color:var(--tiefgruen);cursor:pointer}
.check label{font-weight:400;font-size:15px;color:var(--schiefer);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Fokus. Sichtbar auf jedem Grund: tiefgruen auf blatt 6.82, auf pergament
   11.07, gold auf tiefgruen 5.93. */
:focus-visible{outline:3px solid var(--tiefgruen);outline-offset:3px;border-radius:4px}
section.band.dunkel :focus-visible,nav :focus-visible{outline-color:var(--gold)}

/* Footer */
footer{background:var(--tiefgruen);color:var(--auf-dunkel-muted);padding:52px 0 44px;font-size:14px;line-height:1.65}
footer p{margin-bottom:.8rem;max-width:60em}
footer a{color:var(--auf-dunkel)}
footer a:hover{color:var(--gold)}

/* Cookie-Banner: eigenes Styling. consent.js prueft in injectStyles()
   auf #ksp-cc-style und ueberspringt seine eigene CSS-Injektion, sobald
   das Element existiert. Die v3-Seiten bringen ein leeres <style
   id="ksp-cc-style"> mit, dadurch gilt ausschliesslich das hier, ohne
   dass consent.js angefasst werden muss.
   Ziel Mobil: unter 96px hoch, damit die Vertrauenszeile sichtbar bleibt. */
#ksp-cc{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;
  justify-content:flex-start;padding:16px;pointer-events:none;
  font-family:var(--sans);
}
#ksp-cc .ksp-cc-card{
  pointer-events:auto;max-width:380px;width:100%;
  background:var(--pergament);border:1px solid var(--linie-karte);
  border-top:4px solid var(--gold);border-radius:var(--radius);
  box-shadow:var(--schatten-l);padding:16px 18px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  transform:translateY(140%);opacity:0;transition:transform .35s ease,opacity .35s ease;
}
#ksp-cc.show .ksp-cc-card{transform:translateY(0);opacity:1}
#ksp-cc .ksp-cc-txt{flex:1 1 100%;font-size:14px;line-height:1.5;color:var(--schiefer)}
#ksp-cc .ksp-cc-txt strong{display:block;font-family:var(--sans);font-weight:700;font-size:16px;color:var(--tiefgruen);margin-bottom:3px;letter-spacing:-.01em}
#ksp-cc .ksp-cc-txt a{color:var(--gold-ink)}
#ksp-cc .ksp-cc-btns{display:flex;gap:9px;flex:1 1 100%}
#ksp-cc button{
  font-family:inherit;font-weight:600;font-size:14.5px;border-radius:10px;
  padding:9px 16px;cursor:pointer;border:1.5px solid var(--tiefgruen);
  transition:background .15s,color .15s;flex:1;
}
#ksp-cc .ksp-cc-deny{background:transparent;color:var(--tiefgruen)}
#ksp-cc .ksp-cc-deny:hover{background:rgba(24,58,46,.08)}
#ksp-cc .ksp-cc-ok{background:var(--tiefgruen);color:var(--pergament)}
#ksp-cc .ksp-cc-ok:hover{background:var(--tiefgruen-hover)}
.ksp-cc-link{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}

@media(max-width:560px){
  #ksp-cc{padding:10px;justify-content:center}
  #ksp-cc .ksp-cc-card{max-width:none;padding:12px 14px;gap:9px}
  #ksp-cc .ksp-cc-txt{font-size:13.5px;line-height:1.45}
  #ksp-cc .ksp-cc-txt strong{font-size:15px;display:inline;margin-right:4px}
  /* 44px Mindesthoehe, sonst sind die Zustimmungs-Buttons auf dem Handy
     schwer zu treffen. Das ist genau der Klick, der nicht danebengehen darf. */
  #ksp-cc button{padding:12px 14px;font-size:14.5px;min-height:44px}
}

@media(max-width:820px){
  section.band{padding:54px 0}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .nav-r a.link{display:none}
  .wordmark{gap:8px}
  .logo-mark{height:40px;width:40px}
}