/* ============================================================
   OmniKids – Stylesheet (Session 4, Design-Pass „Klarheit·Schönheit·UX")
   Design-System: Tafel & Kreide (design.md)
   Typo: Nunito Sans (warm, runde Terminals, harmoniert mit Gochi Hand)
   – live als lokale woff2-Subsets.
   Design-Pass 02.09.: Rhythmus/Weißraum fluid, weichere Schatten,
   FAQ-Interaktion, Formular als Karte, Sticky-Mobile-CTA,
   dezente Scroll-Reveals (nur ohne prefers-reduced-motion),
   Einrichtungs-Band vom Alt-Lila auf Palette-Blau vereinheitlicht.
   ============================================================ */

:root{
  --creme:#fffaef;
  --tinte:#1a1a1a;
  --tafel:#232323;
  --kreide:#fffefb;
  --tintenblau:#1f3864;  /* Feedback 02.09.: eleganter statt Ultramarin #1800ad */
  --cta:#f89840;         /* = Logo-Orange, gesampelt aus der Wortmarke */
  --cta-dunkel:#d97b26;
  --gelb:#ffd500;
  --muted:#6b6659;
  --line:#e8e0cc;
  --blau-hell:#eef2fa;   /* ruhige blaue Flächen (Entscheider, Bänder, Einrichtungen) */
  --blau-line:#d9e2f2;
  --card:#fffdf6;
  --radius:20px;
  --shadow:0 1px 2px rgba(26,26,26,.05), 0 10px 30px rgba(31,56,100,.07);
  --w:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

body{
  background:var(--creme);
  color:var(--tinte);
  font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--tintenblau)}
a:focus-visible{outline:3px solid var(--tintenblau);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}

.chalk{font-family:"Gochi Hand","Chalkboard SE",Chalkboard,"Segoe Print","Comic Sans MS",cursive;font-weight:400}

h2{color:var(--tintenblau);font-size:clamp(26px,4.6vw,36px);font-weight:800;line-height:1.15;letter-spacing:-.01em;margin-bottom:16px}
h3{font-size:19px;font-weight:800;line-height:1.3}
section{padding:clamp(56px,8vw,80px) 0}
.lead{font-size:clamp(17px,2.6vw,20px);max-width:62ch}

/* Skip-Link (Tastatur/Screenreader) */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--tintenblau);color:#fff;
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:800;text-decoration:none}
.skip:focus{left:0}

/* Scroll-Reveal – Basiszustand wird NUR per JS gesetzt (Klasse .animiert),
   und nur wenn prefers-reduced-motion nicht aktiv ist. Ohne JS: alles sichtbar. */
.animiert{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.animiert.drin{opacity:1;transform:none}

/* Buttons – Orange exklusiv für CTAs */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--cta);color:#2a0a04;text-decoration:none;
  font-weight:800;font-size:17px;
  min-height:52px;padding:14px 26px;border-radius:999px;
  border:2px solid var(--cta-dunkel);
  box-shadow:0 3px 0 var(--cta-dunkel), 0 10px 24px rgba(248,152,64,.28);
  transition:transform .13s ease, box-shadow .13s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--cta-dunkel), 0 14px 28px rgba(248,152,64,.34)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 0 var(--cta-dunkel), 0 6px 16px rgba(248,152,64,.24)}
.btn:focus-visible{outline:3px solid var(--tintenblau);outline-offset:3px}
.btn.klein{min-height:46px;padding:10px 20px;font-size:15px}
.ghost{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 6px;
  color:inherit;text-decoration:none;font-weight:700;
}
.ghost:hover{color:var(--tintenblau)}
.ghost:focus-visible{outline:3px solid var(--tintenblau);outline-offset:3px}

/* ── Header ─────────────────────────────── */
/* Feedback Benjamin 01.09.: Farben umgedreht – Header dunkel (Wortmarke kommt zur Geltung), Hero hell */
header.top{
  position:sticky;top:0;z-index:50;
  background:rgba(30,30,30,.97);backdrop-filter:blur(6px);
  border-bottom:4px solid var(--gelb);
  box-shadow:0 2px 16px rgba(0,0,0,.22);
}
.top-inner{display:flex;align-items:center;gap:18px;min-height:64px}
.top-inner .wortmarke{height:40px;width:auto}
nav.haupt{display:none;gap:8px;margin-left:auto}
nav.haupt a{
  display:inline-flex;align-items:center;min-height:44px;padding:4px 10px;
  text-decoration:none;font-weight:700;font-size:15.5px;color:var(--kreide);
  border-bottom:2px solid transparent;
}
nav.haupt a:hover{color:var(--gelb);border-bottom-color:var(--gelb)}
nav.haupt a[aria-current="page"],
nav.haupt a.aktiv{color:var(--gelb);border-bottom-color:var(--gelb)}
nav.haupt a:focus-visible{outline:3px solid var(--gelb);outline-offset:2px;border-radius:6px}
/* Mobil: Header nur Marke (der Sticky-CTA unten übernimmt in der Daumenzone,
   der Hero-CTA ist sofort sichtbar) – Desktop: Nav + CTA */
.top-cta{display:none;margin-left:auto}
@media(min-width:760px){
  nav.haupt{display:flex}
  .top-cta{display:inline-flex;margin-left:8px}
}

/* ── Hero (helle Bühne fürs Badge) ──────── */
.hero{
  background:radial-gradient(ellipse 640px 460px at 50% -60px, #fffefb 0%, var(--creme) 72%);
  color:var(--tinte);
  padding:52px 0 60px;
}
@media(min-width:860px){ .hero{padding:68px 0 76px} }
/* Feedback 02.09.: Badge als Zentralelement oben, alles zentriert, kein Kreide-Pfeil mehr (ruhiger) */
.hero-mitte{display:flex;flex-direction:column;align-items:center;text-align:center}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.hero h1{font-size:clamp(29px,6vw,48px);line-height:1.08;font-weight:800;letter-spacing:-.015em;color:var(--tintenblau);max-width:19ch}
.hero .sub{font-size:clamp(16px,2.6vw,19px);color:var(--tinte);max-width:48ch;margin:14px 0 28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center}
.kontaktzeile{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px}
.kontaktzeile a{color:var(--tinte);text-decoration:none;font-weight:700;font-size:16.5px;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.kontaktzeile a:hover{color:var(--tintenblau)}
.kontaktzeile svg{flex:0 0 auto}
.cta-hinweis{font-size:14px;color:var(--muted);margin-top:10px}
.hero .kontaktzeile{margin-top:14px;justify-content:center}
.hero-badge{max-width:200px;margin-bottom:24px}
@media(min-width:860px){ .hero-badge{max-width:250px} }
.hero-badge img{filter:drop-shadow(0 8px 22px rgba(26,26,26,.22))}

/* ── Pitch ──────────────────────────────── */
.pitch{padding:clamp(56px,8vw,80px) 0 34px}
.pitch p{font-size:clamp(18px,2.8vw,22px);line-height:1.55;max-width:58ch}
.pitch mark{background:linear-gradient(transparent 55%, var(--gelb) 55%);padding:0 3px}

/* ── Formate ────────────────────────────── */
.karten{display:grid;gap:22px;margin-top:8px}
@media(min-width:760px){ .karten{grid-template-columns:1fr 1fr} }
.karte{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px 26px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;
}
.karte .format-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.karte h3{color:var(--tintenblau);font-size:22px}
.karte .fakten{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.fakt{font-size:13.5px;font-weight:700;background:#f4efe0;border:1px solid var(--line);border-radius:999px;padding:4px 12px;color:var(--muted)}
.karte .cta-zeile{margin-top:auto;padding-top:14px}
.karte .tandem-claim{color:var(--tintenblau);font-size:19px}
.entscheider{
  margin-top:26px;background:var(--blau-hell);border:1px solid var(--blau-line);
  border-radius:var(--radius);padding:26px 28px;
}
.entscheider .frage{font-size:24px;color:var(--tintenblau);margin-bottom:8px}
.entscheider strong{color:var(--tintenblau)}
.entscheider p{max-width:70ch}

/* ── Säulen ─────────────────────────────── */
.saeulen{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.unterstrich{width:210px;margin:-6px 0 28px}
.saeulen-grid{display:grid;gap:16px}
@media(min-width:680px){ .saeulen-grid{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .saeulen-grid{grid-template-columns:repeat(5,1fr)} }
.saeule{
  background:var(--creme);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;
}
.saeule img{width:84px;height:84px;object-fit:contain;transition:transform .25s ease}
.saeule:hover img{transform:translateY(-4px)}
.saeule .nr{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.saeule h3{font-size:16.5px;color:var(--tintenblau)}
.saeule .ich{font-size:15px;color:var(--tinte);line-height:1.45}
.saeule .tiername{font-size:12.5px;font-weight:700;color:var(--muted)}
.zuordnung-hinweis{margin-top:16px;font-size:13.5px;color:var(--muted)}

/* ── Testimonials ───────────────────────── */
.testi-grid{display:grid;gap:18px;margin-top:6px}
@media(min-width:760px){ .testi-grid{grid-template-columns:repeat(3,1fr)} }
.testi{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;position:relative;
}
.testi .strich{color:var(--tintenblau);font-size:34px;line-height:.6}
.stimmen-notiz{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;max-width:620px;box-shadow:var(--shadow);
}
.stimmen-notiz .gross{font-size:26px;color:var(--tintenblau);margin-bottom:6px}

/* ── Team ───────────────────────────────── */
.team-grid{display:grid;gap:30px;align-items:center}
@media(min-width:820px){ .team-grid{grid-template-columns:auto 1fr} }
.portraits{display:flex;gap:18px}
.portraits figure{text-align:center}
.portraits img{
  width:132px;height:132px;object-fit:cover;border-radius:50%;
  border:4px solid var(--card);box-shadow:var(--shadow);filter:grayscale(1);
}
.portraits figcaption{font-size:14px;font-weight:700;margin-top:8px;color:var(--muted)}
.team-text p{max-width:56ch;font-size:clamp(17px,2.6vw,20px)}

/* ── Einrichtungen (Palette-Blau statt Alt-Lila) ── */
.einrichtungen{background:var(--blau-hell);border-top:1px solid var(--blau-line);border-bottom:1px solid var(--blau-line)}
.einr-grid{display:grid;gap:20px;margin:18px 0 22px}
@media(min-width:760px){ .einr-grid{grid-template-columns:1fr 1fr} }
.einr-card{background:#fff;border:1px solid var(--blau-line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.einr-card h3{color:var(--tintenblau);margin-bottom:8px}
.einr-card ul{margin:8px 0 0 18px}
.einr-card li{margin:4px 0}

/* ── FAQ ────────────────────────────────── */
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin-bottom:12px;overflow:hidden;transition:border-color .2s ease;
}
.faq details[open]{border-color:var(--blau-line);box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:18px 20px;font-weight:800;font-size:16.5px;min-height:52px;
}
.faq summary:hover{background:#faf5e6}
.faq summary:focus-visible{outline:3px solid var(--tintenblau);outline-offset:-3px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--blau-line);color:var(--tintenblau);
  font-size:19px;font-weight:600;line-height:1;
  transition:transform .25s ease, background .2s ease;
}
.faq details[open] summary::after{content:"–";background:var(--blau-hell);transform:rotate(180deg)}
.faq details[open] summary{color:var(--tintenblau)}
.faq .antwort{padding:0 20px 20px;color:var(--tinte)}
.faq .antwort p{max-width:70ch}
.offen-badge{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fdeeea;border:1px solid var(--cta);color:#8a4a10;border-radius:999px;padding:3px 10px}

/* ── Wissen ─────────────────────────────── */
.wissen-grid{display:grid;gap:18px;margin-top:6px}
@media(min-width:760px){ .wissen-grid{grid-template-columns:repeat(3,1fr)} }
.artikel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:10px;
}
.artikel .kicker{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.artikel h3{color:var(--tintenblau)}
.artikel .bald{margin-top:auto;font-size:13.5px;color:var(--muted);font-weight:700}

/* ── Abschluss-CTA (Tafel-Band) ─────────── */
.abschluss{
  background:
    linear-gradient(rgba(30,30,30,.6), rgba(30,30,30,.78)),
    var(--tafel) url("../img/tafel-textur.webp") center/cover;
  color:var(--kreide);text-align:center;padding:clamp(64px,9vw,88px) 0;
}
.abschluss .chalk{font-size:clamp(26px,5vw,40px);color:var(--kreide);margin-bottom:8px}
.abschluss p{color:rgba(255,254,251,.9);margin-bottom:26px}
.abschluss .kontaktzeile{justify-content:center}
.abschluss .kontaktzeile a{color:var(--kreide)}
.abschluss .kontaktzeile a:hover{color:var(--gelb)}

/* ── Footer ─────────────────────────────── */
footer.fuss{background:var(--creme);padding:44px 0 64px;border-top:1px solid var(--line)}
.fuss-grid{display:grid;gap:26px}
@media(min-width:760px){ .fuss-grid{grid-template-columns:1.2fr 1fr 1fr} }
.fuss h4{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.fuss ul{list-style:none}
.fuss li{margin:6px 0}
.fuss a{text-decoration:none;font-weight:600;color:var(--tinte)}
.fuss a:hover{color:var(--tintenblau)}
.fuss .marke{font-weight:800}
.fuss .platzhalter{color:var(--muted);font-style:italic}
.fuss small{display:block;margin-top:26px;color:var(--muted)}

/* ── Anfrage-Formular (Prototyp; Versand ab Session 5 via PHP) ── */
.anfrage{background:var(--card);border-top:1px solid var(--line)}
.anfrage .hinweis-termine{color:var(--muted);font-size:15px}
.formular{
  max-width:660px;display:flex;flex-direction:column;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,4vw,32px);box-shadow:var(--shadow);
}
.feld{display:flex;flex-direction:column;gap:6px;flex:1}
.feld-reihe{display:flex;flex-direction:column;gap:18px}
@media(min-width:640px){ .feld-reihe{flex-direction:row} }
.feld label{font-weight:800;font-size:15px}
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:16px;color:var(--tinte);background:#fffdf6;
  border:1.5px solid var(--line);border-radius:12px;
  padding:13px 14px;min-height:50px;width:100%;
  transition:border-color .15s ease, background .15s ease;
}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:#cfc4a6}
.feld textarea{min-height:90px;resize:vertical}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  outline:3px solid var(--tintenblau);outline-offset:1px;border-color:var(--tintenblau);background:#fff;
}
.einwilligung{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--tinte);max-width:640px}
.einwilligung input{width:22px;height:22px;margin-top:2px;flex:0 0 auto;accent-color:var(--tintenblau)}
.anfrage .btn{align-self:stretch}
@media(min-width:640px){ .anfrage .btn{align-self:flex-start} }

/* ── Trust-Leiste ───────────────────────── */
.trust{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-inner{
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;
  padding:15px 20px;font-size:14.5px;font-weight:700;color:var(--tinte);
}
.trust-inner span{display:inline-flex;align-items:baseline;gap:7px;text-align:left;max-width:100%}
.trust-inner span::before{content:"✓";color:var(--cta-dunkel);font-weight:800;flex:0 0 auto}
@media(min-width:760px){ .trust-inner span{white-space:nowrap} }

/* ── Sticky-Mobile-CTA (nur klein; erscheint per JS nach dem Hero) ── */
.mobil-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:center;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, rgba(255,250,239,.94) 42%);
  pointer-events:none;
  transform:translateY(110%);transition:transform .3s ease;
}
.mobil-cta.sichtbar{transform:none}
.mobil-cta .btn{pointer-events:auto;flex:1;max-width:420px}
@media(min-width:760px){ .mobil-cta{display:none} }

/* ── Unterseiten ────────────────────────── */
.seite-kopf{padding:clamp(46px,7vw,64px) 0 8px;text-align:center;
  background:radial-gradient(ellipse 640px 380px at 50% -80px, #fffefb 0%, var(--creme) 72%)}
.seite-kopf h1{font-size:clamp(28px,5.5vw,44px);line-height:1.1;font-weight:800;letter-spacing:-.015em;color:var(--tintenblau);max-width:24ch;margin:0 auto}
.seite-kopf .lead{margin:14px auto 0}
.person{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;margin-bottom:20px;box-shadow:var(--shadow)}
.person h2{margin-bottom:10px;font-size:24px}
.quali{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.slot-notiz{background:#f4efe0;border-radius:12px;padding:12px 16px;font-size:14.5px;color:var(--muted)}
.collage{max-width:560px;margin:28px auto 6px}
.collage img{border-radius:var(--radius);box-shadow:var(--shadow)}
.pyramide-fig{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:20px 0;box-shadow:var(--shadow)}
.pyramide-fig img{max-width:760px;width:100%;margin:0 auto}
.band-blau{background:var(--blau-hell);border:1px solid var(--blau-line);border-radius:var(--radius);padding:26px 28px;margin:22px 0}