/* kidsroute.de — One-Pager. Farbig, kindlich, aber für Erwachsene. Keine externen Schriften. */
:root{
  --blau:#2563ff;--blau-d:#1638b5;--nacht:#0d1a3f;--nacht2:#16275a;
  --gelb:#ffc83d;--orange:#ff8a3d;--koralle:#ff5f57;--rosa:#ff5fa2;--lila:#8b5cf6;--mint:#14c39a;--himmel:#e9f1ff;--creme:#fff7e8;
  --text:#1a2344;--text2:#586284;--rand:#e4e9f5;--weiss:#fff;
  --r:26px;--schatten:0 18px 50px rgba(13,26,63,.12);--schatten2:0 30px 80px rgba(13,26,63,.22);
  --rund:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;color:var(--text);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--blau)}
h1,h2,h3,h4{font-family:var(--rund);color:var(--nacht);letter-spacing:-.02em;line-height:1.12;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;background:#fff;color:var(--blau);box-shadow:0 6px 18px rgba(37,99,255,.12)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(20,195,154,.2);font-style:normal}
.kopfzeile{text-align:center;max-width:760px;margin:0 auto 50px}
.kopfzeile h2{font-size:clamp(30px,4.2vw,48px);margin:14px 0 14px}
.kopfzeile p{color:var(--text2);font-size:18px;margin:0}
.bunt{background:linear-gradient(100deg,var(--blau) 0%,var(--lila) 45%,var(--rosa) 75%,var(--orange) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
section{padding-block:96px;position:relative}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid rgba(228,233,245,.8)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.marke{display:flex;align-items:center;gap:11px;font-family:var(--rund);font-weight:900;font-size:22px;color:var(--nacht);text-decoration:none;letter-spacing:-.02em}
.marke img{width:40px;height:40px;border-radius:12px;box-shadow:0 6px 16px rgba(37,99,255,.3)}
.marke b{font-weight:900}
.marke span{color:var(--orange)}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:var(--text2);text-decoration:none;font-weight:700;font-size:15px;transition:color .2s}
.nav a:hover{color:var(--blau)}
.kopf-stores{display:flex;gap:8px}
.mini-store{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border-radius:12px;background:var(--nacht);color:#fff!important;font-weight:800;font-size:13.5px;text-decoration:none;transition:transform .15s,box-shadow .2s}
.mini-store svg{width:18px;height:18px}
.mini-store:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(13,26,63,.28)}
@media (max-width:1060px){.nav{display:none}}
@media (max-width:520px){.mini-store b{display:none}.mini-store{width:42px;justify-content:center;padding:0}.marke{font-size:19px}.marke img{width:34px;height:34px}}

/* ---------- Store-Knöpfe ---------- */
.stores{display:flex;flex-wrap:wrap;gap:14px}
.store{position:relative;display:inline-flex;align-items:center;gap:13px;padding:11px 12px 11px 18px;border-radius:18px;background:var(--nacht);color:#fff;text-decoration:none;box-shadow:0 14px 30px rgba(13,26,63,.25);transition:transform .18s,box-shadow .25s;min-width:0}
.store:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(13,26,63,.33)}
.store>svg{width:32px;height:32px;flex:none}
.store .st-text{display:flex;flex-direction:column;line-height:1.1;font-weight:800;font-size:19px;letter-spacing:-.01em;font-family:var(--rund)}
.store .st-text small{font-size:11.5px;font-weight:600;opacity:.75;letter-spacing:.02em;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.store .st-dl{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:9px 13px;border-radius:12px;font-weight:800;font-size:13.5px;color:var(--nacht);background:linear-gradient(135deg,var(--gelb),#ffdf7e)}
.store.play .st-dl{background:linear-gradient(135deg,#6ef3c2,#34d399)}
.store .st-dl svg{width:15px;height:15px}
@media (max-width:420px){.store{width:100%;justify-content:flex-start}.store .st-dl{margin-left:auto}}

/* ---------- Held ---------- */
.held{padding-block:70px 120px;background:
  radial-gradient(700px 420px at 8% 8%,#dce8ff 0%,rgba(220,232,255,0) 70%),
  radial-gradient(640px 460px at 96% 12%,#ffe9d6 0%,rgba(255,233,214,0) 70%),
  radial-gradient(560px 420px at 60% 100%,#e8e0ff 0%,rgba(232,224,255,0) 70%),#fbfcff;overflow:hidden}
.held .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;position:relative;z-index:2}
.held h1{font-size:clamp(40px,6vw,74px);margin:22px 0 22px;letter-spacing:-.035em}
.held h1 .welle{position:relative;white-space:nowrap}
.held h1 .welle svg{position:absolute;left:0;right:0;bottom:-.18em;width:100%;height:.36em}
.held .lead{font-size:clamp(17px,1.6vw,20px);color:var(--text2);max-width:560px;margin:0 0 32px}
.ziele{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 30px;padding:0;list-style:none}
.ziele li{padding:7px 13px;border-radius:99px;font-weight:800;font-size:14px;color:var(--z);background:color-mix(in srgb,var(--z) 12%,#fff);border:1.5px solid color-mix(in srgb,var(--z) 28%,#fff)}
.vertrauen{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;padding:0;list-style:none;font-weight:700;font-size:14.5px;color:var(--text2)}
.vertrauen li{display:flex;align-items:center;gap:8px}
.vertrauen li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mint);color:#fff;font-size:12px}
.deko{position:absolute;pointer-events:none;z-index:1}
.deko.sonne{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe28a,var(--gelb));top:60px;right:4%;box-shadow:0 0 0 18px rgba(255,200,61,.18),0 0 0 40px rgba(255,200,61,.08)}
.deko.wolke{width:150px;height:46px;border-radius:99px;background:#fff;box-shadow:0 10px 30px rgba(13,26,63,.06)}
.deko.wolke::before,.deko.wolke::after{content:"";position:absolute;background:#fff;border-radius:50%}
.deko.wolke::before{width:62px;height:62px;left:22px;top:-30px}
.deko.wolke::after{width:44px;height:44px;left:74px;top:-20px}
.deko.w1{top:190px;left:-30px;animation:treiben 26s linear infinite}
.deko.w2{bottom:90px;right:38%;transform:scale(.7);animation:treiben 34s linear infinite reverse}
.deko.pfad{left:0;right:0;bottom:0;width:100%;height:220px}
@keyframes treiben{0%{translate:0 0}50%{translate:40px -6px}100%{translate:0 0}}

.buehne{position:relative;display:flex;justify-content:center;padding:20px 0}
.handy{position:relative;width:min(310px,74vw);border-radius:46px;padding:11px;background:linear-gradient(160deg,#27345e,#0b1433);box-shadow:var(--schatten2),inset 0 0 0 2px rgba(255,255,255,.08)}
.handy::before{content:"";position:absolute;top:19px;left:50%;translate:-50% 0;width:88px;height:24px;border-radius:99px;background:#0b1433;z-index:3}
.handy .bild{border-radius:36px;overflow:hidden;background:#eef3ff;aspect-ratio:520/1072;position:relative}
.handy .bild img{width:100%;height:100%;object-fit:cover}
.buehne .handy{rotate:-3deg}
.schwebe{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:18px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 18px 40px rgba(13,26,63,.18);font-size:13.5px;line-height:1.3;max-width:250px;animation:schweben 6s ease-in-out infinite}
.schwebe b{display:block;font-size:14px;color:var(--nacht)}
.schwebe span{color:var(--text2)}
.schwebe .sw-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;font-size:20px}
.schwebe.s1{top:40px;left:-10px}
.schwebe.s1 .sw-ico{background:#dcfce7}
.schwebe.s2{top:46%;right:-20px;animation-delay:-2s}
.schwebe.s2 .sw-ico{background:#fff1e0}
.schwebe.s3{bottom:40px;left:0;animation-delay:-4s}
.schwebe.s3 .sw-ico{background:#fee2e2}
@keyframes schweben{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (max-width:940px){
  .held{padding-block:40px 100px}
  .held .wrap{grid-template-columns:1fr;gap:30px}
  .buehne{margin-top:10px}
  .schwebe{max-width:210px;font-size:12.5px;padding:10px 12px}
  .schwebe.s1{left:0}.schwebe.s2{right:0}.schwebe.s3{left:2%}
  .deko.sonne{width:80px;height:80px;top:20px;right:-10px}
  .deko.w1{display:none}
}
@media (max-width:480px){.schwebe .sw-ico{width:32px;height:32px;font-size:16px}.schwebe{max-width:180px}.schwebe span{display:none}}

/* ---------- Zahlen ---------- */
.zahlen{margin-top:-70px;position:relative;z-index:5;padding:0}
.zahlen .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.zahl{border-radius:24px;padding:24px 22px;color:#fff;box-shadow:var(--schatten);position:relative;overflow:hidden}
.zahl::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.16)}
.zahl b{display:block;font-family:var(--rund);font-size:34px;line-height:1.05;letter-spacing:-.02em}
.zahl span{font-weight:600;opacity:.92;font-size:14.5px}
.zahl.z1{background:linear-gradient(135deg,#3b82f6,var(--blau-d))}
.zahl.z2{background:linear-gradient(135deg,#ffb238,var(--orange))}
.zahl.z3{background:linear-gradient(135deg,#34d399,#0e9f7e)}
.zahl.z4{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
@media (max-width:860px){.zahlen .wrap{grid-template-columns:1fr 1fr}.zahl b{font-size:28px}}
@media (max-width:380px){.zahlen .wrap{grid-template-columns:1fr}}
@media (max-width:480px){.handy .screen{font-size:11.5px}.kid-top{padding:40px 13px 12px}.kid-hallo{font-size:19px}.kid-wetter{top:36px}.kid-k{padding:9px 11px;font-size:12.5px}.kid-k em{font-size:17px}.chat-kopf{padding-top:38px}}

/* ---------- Funktionen: Übersicht-Chips ---------- */
.uebersicht{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-18px auto 70px;max-width:980px}
.uebersicht a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:#fff;border:1.5px solid var(--rand);font-weight:800;font-size:14.5px;color:var(--nacht);text-decoration:none;transition:transform .15s,border-color .2s,box-shadow .2s}
.uebersicht a:hover{transform:translateY(-2px);border-color:var(--f,var(--blau));box-shadow:0 10px 22px rgba(13,26,63,.1)}
.uebersicht a i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--f,var(--blau));color:#fff;font-size:14px}

/* ---------- Funktions-Reihen ---------- */
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0;scroll-margin-top:90px}
.reihe+.reihe{border-top:1px dashed #d8e0f0}
.reihe.dreh .reihe-bild{order:2}
.reihe-kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.marker{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:19px;color:#fff;font-size:28px;background:var(--f);box-shadow:0 12px 26px color-mix(in srgb,var(--f) 40%,transparent)}
.reihe-kopf small{display:block;font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--f)}
.reihe h3{font-size:clamp(26px,3vw,36px)}
.reihe .intro{color:var(--text2);font-size:17.5px;margin:0 0 24px}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste li{display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border-radius:18px;background:#fff;border:1.5px solid #eef1f8;transition:border-color .2s,box-shadow .2s,transform .2s}
.liste li:hover{border-color:color-mix(in srgb,var(--f) 45%,#fff);box-shadow:0 10px 26px rgba(13,26,63,.07);transform:translateX(3px)}
.liste li>i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;font-style:normal;font-size:19px;background:color-mix(in srgb,var(--f) 13%,#fff)}
.liste b{display:block;color:var(--nacht);font-size:16px;line-height:1.3;margin-bottom:2px}
.liste span{color:var(--text2);font-size:14.5px;line-height:1.5}
.reihe-bild{position:relative;display:flex;justify-content:center;padding:30px 0}
.reihe-bild::before{content:"";position:absolute;inset:4% 6%;border-radius:48% 52% 44% 56%/52% 44% 56% 48%;background:color-mix(in srgb,var(--f) 16%,#fff);z-index:0}
.reihe-bild>*{position:relative;z-index:1}
.reihe-bild .handy{width:min(290px,70vw)}
.reihe:not(.dreh) .reihe-bild .handy{rotate:2.5deg}
.reihe.dreh .reihe-bild .handy{rotate:-2.5deg}
.etikett{position:absolute!important;z-index:3!important;padding:10px 14px;border-radius:14px;background:#fff;box-shadow:0 14px 30px rgba(13,26,63,.16);font-weight:800;font-size:13.5px;color:var(--nacht);white-space:nowrap}
.etikett.e-o{top:34px;right:4%}
.etikett.e-u{bottom:40px;left:4%}
@media (max-width:940px){
  .reihe{grid-template-columns:1fr;gap:26px;padding:44px 0}
  .reihe.dreh .reihe-bild{order:0}
}

/* Alarm-Stapel */
.alarme{width:min(400px,100%);display:grid;gap:14px;padding:10px}
.alarm{border-radius:22px;padding:16px 18px;background:#fff;box-shadow:0 16px 36px rgba(13,26,63,.12);display:flex;gap:14px;align-items:flex-start;border-left:6px solid var(--a)}
.alarm:nth-child(2){margin-left:26px}
.alarm:nth-child(3){margin-right:20px}
.alarm:nth-child(4){margin-left:14px}
.alarm .a-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-size:22px;background:color-mix(in srgb,var(--a) 14%,#fff)}
.alarm b{display:block;color:var(--nacht);font-size:15.5px}
.alarm span{font-size:13.5px;color:var(--text2);line-height:1.45;display:block}
.alarm .a-knopf{display:inline-block;margin-top:9px;padding:7px 12px;border-radius:10px;font-weight:800;font-size:12.5px;color:#fff;background:var(--a)}
.alarm.sos{animation:puls 2.4s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 16px 36px rgba(13,26,63,.12)}50%{box-shadow:0 16px 40px rgba(239,68,68,.35)}}

/* Chat-Handy */
.handy .screen{border-radius:36px;overflow:hidden;aspect-ratio:520/1072;background:#eef2fb;display:flex;flex-direction:column;font-size:12.5px}
.chat-kopf{padding:44px 16px 14px;background:linear-gradient(135deg,var(--blau),var(--blau-d));color:#fff;display:flex;align-items:center;gap:10px}
.chat-kopf .av{width:34px;height:34px;border-radius:50%;background:#ffd9a8;display:grid;place-items:center;font-size:18px}
.chat-kopf b{font-size:15px;display:block;line-height:1.1}
.chat-kopf small{opacity:.8;font-size:11px}
.chat-liste{flex:1;min-height:0;padding:14px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden}
.chat-liste>*{flex-shrink:0}
.bl{max-width:78%;padding:9px 12px;border-radius:17px;background:#fff;color:var(--nacht);box-shadow:0 2px 6px rgba(13,26,63,.06);line-height:1.35}
.bl.ich{align-self:flex-end;background:#dbe7ff;border-bottom-right-radius:6px}
.bl.du{border-bottom-left-radius:6px}
.bl small{display:block;text-align:right;color:#7a84a0;font-size:9.5px;margin-top:2px}
.bl.sprache{display:flex;align-items:center;gap:8px}
.bl.sprache .play{width:26px;height:26px;border-radius:50%;background:var(--blau);color:#fff;display:grid;place-items:center;font-size:10px;flex:none}
.bl.sprache .balken{display:flex;align-items:center;gap:2px;height:22px}
.bl.sprache .balken i{width:3px;border-radius:2px;background:#8aa6e6}
.bl.foto{padding:5px}
.bl.foto .ph{width:150px;height:96px;border-radius:13px;background:linear-gradient(160deg,#ffd36b 0%,#ff8a3d 55%,#ff5fa2 100%);position:relative;overflow:hidden}
.bl.foto .ph::before{content:"";position:absolute;left:18px;bottom:-26px;width:120px;height:70px;border-radius:50%;background:#2e9e6a}
.bl.foto .ph::after{content:"";position:absolute;right:20px;top:14px;width:22px;height:22px;border-radius:50%;background:#fff6c7}
.bl.ort{padding:5px;width:170px}
.bl.ort .mk{height:80px;border-radius:13px;background:
  linear-gradient(90deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%),
  linear-gradient(0deg,transparent 40%,#fff 40%,#fff 48%,transparent 48%),#d9ecd9;position:relative}
.bl.ort .mk::after{content:"📍";position:absolute;left:50%;top:50%;translate:-50% -70%;font-size:22px}
.bl.ort em{display:block;font-style:normal;font-weight:700;padding:5px 5px 2px;font-size:11.5px}
.bl.dok{display:flex;align-items:center;gap:9px}
.bl.dok .pdf{width:30px;height:36px;border-radius:6px;background:#ef4444;color:#fff;font-weight:900;font-size:9px;display:grid;place-items:center;flex:none}
.chat-fuss{display:flex;align-items:center;gap:7px;padding:10px 10px 22px;background:#fff}
.chat-fuss .feld{flex:1;height:34px;border-radius:99px;border:1.5px solid var(--rand);color:#9aa3bb;display:flex;align-items:center;padding:0 12px}
.chat-fuss .rund{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e7eeff;font-size:15px}
.chat-fuss .rund.senden{background:var(--blau);color:#fff}

/* Einstellungen-Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:10px}
.kachel{padding:22px;border-radius:22px;background:#fff;border:1.5px solid #eef1f8;transition:transform .2s,box-shadow .2s}
.kachel:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,26,63,.1)}
.kachel i{font-style:normal;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font-size:22px;margin-bottom:14px;background:var(--k)}
.kachel b{display:block;font-family:var(--rund);font-size:17.5px;color:var(--nacht);margin-bottom:5px}
.kachel span{color:var(--text2);font-size:14.5px;line-height:1.5}
.einst-kopf{display:flex;align-items:center;gap:14px;margin-bottom:10px}

/* ---------- Kind-App ---------- */
.kindbereich{background:linear-gradient(160deg,#1d4ed8 0%,#4338ca 48%,#7c3aed 100%);color:#fff;overflow:hidden}
.kindbereich::before,.kindbereich::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.kindbereich::before{width:520px;height:520px;left:-160px;top:-160px;background:radial-gradient(circle,rgba(255,200,61,.35),rgba(255,200,61,0) 70%)}
.kindbereich::after{width:600px;height:600px;right:-200px;bottom:-240px;background:radial-gradient(circle,rgba(255,95,162,.4),rgba(255,95,162,0) 70%)}
.kindbereich .wrap{position:relative;z-index:2}
.kindbereich .kopfzeile h2{color:#fff}
.kindbereich .kopfzeile p{color:rgba(255,255,255,.85)}
.kindbereich .eyebrow{color:#7c3aed}
.kind-raster{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center}
.kind-spalte{display:grid;gap:14px}
.kf{padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;gap:13px;align-items:flex-start;transition:background .2s,transform .2s}
.kf:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.kf i{flex:none;font-style:normal;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#fff;font-size:20px}
.kf b{display:block;font-size:15.5px;line-height:1.3;margin-bottom:2px}
.kf span{font-size:14px;opacity:.85;line-height:1.45}
.kind-handy .handy{width:min(300px,76vw);background:linear-gradient(160deg,#fff,#dfe6ff);box-shadow:0 40px 90px rgba(0,0,0,.35)}
.kind-handy .handy::before{background:#1a2344}
.kid{background:#edf2ff;padding:0 0 12px;gap:8px}
.kid>*{flex-shrink:0}
.kid-top{margin:0;padding:48px 16px 16px;border-radius:0 0 26px 26px;background:linear-gradient(145deg,#2f6bff,#1d4ed8);color:#fff;position:relative;overflow:hidden}
.kid-top::after{content:"";position:absolute;right:-50px;top:-60px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.14)}
.kid-hallo{font-family:var(--rund);font-weight:900;font-size:22px;letter-spacing:-.02em}
.kid-wetter{position:absolute;right:12px;top:44px;z-index:2;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.2);font-weight:800;font-size:12px}
.kid-pill{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.2);font-weight:700;font-size:11.5px}
.kid-pill i{width:8px;height:8px;border-radius:50%;background:#4ade80}
.kid-notiz{margin-top:9px;padding:8px 11px;border-radius:13px;background:linear-gradient(135deg,#fff3a8,#ffd84d);color:#5b4200;font-weight:800;font-size:12px;box-shadow:0 0 18px rgba(255,216,77,.55)}
.kid-notiz small{display:block;font-weight:700;font-size:9.5px;opacity:.75}
.kid-vm{margin:0 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:14px;background:#fff;font-weight:800;font-size:10.5px;color:#56607e}
.kid-vm span{padding:8px 2px;text-align:center;border-radius:11px;white-space:nowrap}
.kid-vm span.an{background:var(--blau);color:#fff}
.kid-k{margin:0 12px;border-radius:18px;padding:12px;color:#fff;font-weight:900;font-size:13.5px;display:flex;align-items:center;gap:9px;font-family:var(--rund)}
.kid-k em{font-style:normal;font-size:20px}
.kid-k.blau{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.kid-k.gruen{background:linear-gradient(135deg,#22c55e,#0ea371)}
.kid-k.lila{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.kid-k.rosa{background:linear-gradient(135deg,#fb7bb8,#e1307a)}
.kid-heute{margin:0 12px;border-radius:16px;background:#fff;padding:10px 12px;color:var(--nacht);font-size:11.5px}
.kid-heute b{display:block;font-family:var(--rund);font-size:13px;margin-bottom:4px}
.kid-heute p{margin:2px 0;color:#56607e}
@media (max-width:1000px){.kind-raster{grid-template-columns:1fr}.kind-handy{order:-1;display:flex;justify-content:center}}

/* ---------- Ablauf ---------- */
.ablauf{background:var(--creme)}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative}
.schritte::before{content:"";position:absolute;left:12%;right:12%;top:46px;border-top:4px dotted #ffc27a;z-index:0}
.schritt{position:relative;z-index:1;text-align:center;padding:0 12px}
.schritt .nr{width:92px;height:92px;margin:0 auto 22px;border-radius:30px;display:grid;place-items:center;font-family:var(--rund);font-size:38px;font-weight:900;color:#fff;background:var(--s);box-shadow:0 18px 34px color-mix(in srgb,var(--s) 40%,transparent);rotate:-6deg}
.schritt:nth-child(2) .nr{rotate:5deg}
.schritt h3{font-size:22px;margin-bottom:8px}
.schritt p{margin:0;color:var(--text2)}
@media (max-width:800px){.schritte{grid-template-columns:1fr;gap:36px}.schritte::before{display:none}}

/* ---------- Galerie ---------- */
.galerie{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 22px 34px;margin:0 -22px;scrollbar-width:thin}
.galerie figure{flex:none;margin:0;scroll-snap-align:center;text-align:center}
.galerie .handy{width:240px;border-radius:38px;padding:9px}
.galerie .handy::before{top:16px;width:70px;height:20px}
.galerie .handy .bild{border-radius:30px}
.galerie figcaption{margin-top:14px;font-weight:800;color:var(--nacht);font-family:var(--rund)}

/* ---------- Vertrauen ---------- */
.werte{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wert{padding:26px 22px;border-radius:24px;background:var(--w);position:relative;overflow:hidden}
.wert i{font-style:normal;font-size:30px;display:block;margin-bottom:12px}
.wert b{display:block;font-family:var(--rund);font-size:18.5px;color:var(--nacht);margin-bottom:6px}
.wert span{color:#4a5373;font-size:14.5px}
@media (max-width:940px){.werte{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.werte{grid-template-columns:1fr}}

/* ---------- Preis ---------- */
.preis-bereich{background:linear-gradient(180deg,#f5f8ff,#fff)}
.preise{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;max-width:900px;margin:0 auto;align-items:stretch}
.preis{border-radius:30px;padding:34px 30px;background:#fff;border:2px solid var(--rand);position:relative}
.preis.top{border:0;background:linear-gradient(150deg,var(--nacht),#2a3d8f);color:#fff;box-shadow:var(--schatten2)}
.preis.top h3{color:#fff}
.preis .band{position:absolute;top:-14px;right:24px;padding:7px 13px;border-radius:99px;background:linear-gradient(135deg,var(--gelb),var(--orange));color:var(--nacht);font-weight:900;font-size:12.5px;letter-spacing:.03em}
.preis h3{font-size:22px}
.preis .betrag{font-family:var(--rund);font-weight:900;font-size:52px;letter-spacing:-.03em;margin:12px 0 0;line-height:1}
.preis .betrag small{font-size:17px;font-weight:700;opacity:.7;letter-spacing:0}
.preis p.unter{margin:6px 0 20px;opacity:.75}
.preis ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.preis li{display:flex;gap:10px;align-items:flex-start}
.preis li::before{content:"✓";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mint);color:#fff;font-weight:900;font-size:12px;margin-top:2px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 24px;border-radius:16px;font-weight:900;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:var(--rund);transition:transform .15s,box-shadow .2s}
.knopf:hover{transform:translateY(-2px)}
.knopf.gelb{background:linear-gradient(135deg,var(--gelb),var(--orange));color:var(--nacht);box-shadow:0 14px 30px rgba(255,138,61,.35)}
@media (max-width:760px){.preise{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.fragen{max-width:860px;margin:0 auto;display:grid;gap:12px}
.fragen details{border-radius:20px;background:#fff;border:1.5px solid var(--rand);transition:box-shadow .2s,border-color .2s}
.fragen details[open]{border-color:#c9d8ff;box-shadow:0 14px 34px rgba(37,99,255,.1)}
.fragen summary{list-style:none;cursor:pointer;padding:20px 60px 20px 22px;font-weight:800;font-size:17px;color:var(--nacht);position:relative;font-family:var(--rund)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:18px;top:50%;translate:0 -50%;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--himmel);color:var(--blau);font-size:20px;font-weight:900;transition:rotate .25s}
.fragen details[open] summary::after{rotate:45deg}
.fragen details p{margin:0;padding:0 22px 22px;color:var(--text2)}

/* ---------- Kontakt ---------- */
.kontakt{padding-block:40px 110px}
.kontakt-box{position:relative;border-radius:40px;padding:clamp(28px,5vw,64px);background:linear-gradient(135deg,#2563ff 0%,#7c3aed 55%,#ff5fa2 100%);overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:start;box-shadow:0 40px 90px rgba(76,48,200,.3)}
.kontakt-box::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;left:-140px;bottom:-180px;background:radial-gradient(circle,rgba(255,200,61,.55),rgba(255,200,61,0) 70%)}
.kontakt-box::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.5px);background-size:26px 26px;mask-image:linear-gradient(120deg,#000 0%,transparent 55%);-webkit-mask-image:linear-gradient(120deg,#000 0%,transparent 55%);pointer-events:none}
.kontakt-info{position:relative;z-index:2;color:#fff}
.kontakt-info .eyebrow{color:#7c3aed}
.kontakt-info h2{color:#fff;font-size:clamp(32px,4vw,48px);margin:16px 0 16px}
.kontakt-info>p{color:rgba(255,255,255,.88);font-size:17.5px;margin:0 0 28px}
.kontakt-punkte{display:grid;gap:12px}
.kp{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;text-decoration:none}
.kp i{font-style:normal;flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#fff;font-size:20px}
.kp b{display:block;font-size:15.5px}
.kp span{font-size:13.5px;opacity:.85}
.formular{position:relative;z-index:2;background:#fff;border-radius:30px;padding:clamp(22px,3.5vw,38px);box-shadow:0 30px 70px rgba(20,10,80,.3)}
.formular h3{font-size:24px;margin-bottom:4px}
.formular .f-unter{margin:0 0 22px;color:var(--text2);font-size:15px}
.f-raster{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-feld{display:block;position:relative}
.f-feld.voll{grid-column:1/-1}
.f-feld label,.f-legende{display:block;font-weight:800;font-size:13.5px;color:var(--nacht);margin:0 0 7px}
.f-feld input,.f-feld textarea{width:100%;font:inherit;font-size:16px;color:var(--text);padding:14px 16px;border-radius:15px;border:2px solid #e3e8f4;background:#f8faff;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.f-feld textarea{min-height:140px;resize:vertical;line-height:1.5}
.f-feld input:focus,.f-feld textarea:focus{border-color:var(--blau);background:#fff;box-shadow:0 0 0 5px rgba(37,99,255,.13)}
.f-feld input:user-invalid,.f-feld textarea:user-invalid{border-color:var(--koralle)}
.f-zaehler{position:absolute;right:12px;bottom:10px;font-size:12px;color:#9aa3bb;font-weight:700}
.themen{display:flex;flex-wrap:wrap;gap:8px}
.themen label{cursor:pointer}
.themen input{position:absolute;opacity:0;pointer-events:none}
.themen span{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;border:2px solid #e3e8f4;background:#f8faff;font-weight:800;font-size:14px;color:#4a5373;transition:all .18s}
.themen input:checked+span{background:var(--t);border-color:var(--t);color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--t) 35%,transparent)}
.themen input:focus-visible+span{outline:3px solid rgba(37,99,255,.4);outline-offset:2px}
.f-feld label.f-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:500;color:var(--text2);line-height:1.5;cursor:pointer;margin:0}
.f-check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--blau)}
.f-senden{width:100%;margin-top:6px;padding:17px 24px;border-radius:17px;border:0;cursor:pointer;font-family:var(--rund);font-weight:900;font-size:17.5px;color:#fff;background:linear-gradient(100deg,var(--blau),var(--lila) 60%,var(--rosa));background-size:160% 100%;box-shadow:0 16px 34px rgba(124,58,237,.35);transition:background-position .4s,transform .15s,opacity .2s;display:flex;align-items:center;justify-content:center;gap:10px}
.f-senden:hover{background-position:100% 0;transform:translateY(-2px)}
.f-senden:disabled{opacity:.65;cursor:wait;transform:none}
.f-senden svg{width:20px;height:20px}
.f-meldung{margin-top:14px;padding:13px 16px;border-radius:14px;font-weight:700;font-size:14.5px}
.f-meldung.fehler{background:#fff1f0;color:#b42318;border:1.5px solid #ffd2cc}
.f-danke{text-align:center;padding:30px 10px}
.f-danke .haken{width:92px;height:92px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;font-size:44px;color:#fff;background:linear-gradient(135deg,#34d399,#0e9f7e);box-shadow:0 0 0 14px rgba(20,195,154,.15);animation:plopp .5s cubic-bezier(.2,1.6,.4,1)}
.f-danke h3{font-size:26px;margin-bottom:8px}
.f-danke p{color:var(--text2);margin:0 0 18px}
@keyframes plopp{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
@media (max-width:940px){.kontakt-box{grid-template-columns:1fr;border-radius:30px}}
@media (max-width:560px){.f-raster{grid-template-columns:1fr}.kontakt .wrap{padding-inline:14px}.kontakt-box{padding:24px 16px;border-radius:26px}}

/* ---------- Fuß ---------- */
.fuss{background:var(--nacht);color:rgba(255,255,255,.75);padding-block:64px 30px}
.fuss-oben{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.fuss .marke{color:#fff}
.fuss p{margin:14px 0 20px;max-width:360px;font-size:15px}
.fuss h4{color:#fff;font-size:15px;margin-bottom:14px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss a{color:rgba(255,255,255,.75);text-decoration:none}
.fuss a:hover{color:#fff}
.fuss .stores .store{box-shadow:none;background:rgba(255,255,255,.08);padding:9px 10px 9px 14px;border:1px solid rgba(255,255,255,.12)}
.fuss .stores .store .st-text{font-size:16px}
.fuss .stores .store>svg{width:26px;height:26px}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:26px;font-size:14px}
.umgesetzt{display:block;text-align:center;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:14.5px;color:rgba(255,255,255,.65)}
.umgesetzt a{color:#fff;font-weight:800;background:linear-gradient(100deg,var(--gelb),var(--rosa));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:820px){.fuss-oben{grid-template-columns:1fr}}

/* ---------- Hinweis (Store-Platzhalter) ---------- */
.toast{position:fixed;left:50%;bottom:26px;translate:-50% 30px;z-index:200;width:calc(100% - 32px);max-width:440px;padding:16px 18px;border-radius:18px;background:var(--nacht);color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.35);display:flex;gap:13px;align-items:center;opacity:0;pointer-events:none;transition:opacity .25s,translate .3s}
.toast.an{opacity:1;translate:-50% 0;pointer-events:auto}
.toast i{font-style:normal;font-size:26px}
.toast b{display:block}
.toast span{font-size:14px;opacity:.8}

/* ---------- Einblenden ---------- */
.js .auf{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.js .auf.da{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .auf{opacity:1;translate:none}
}