/* Kinderzahnheilkunde – Ergänzungen zu zahnimplantate.css. Stand 12.09.2026 */

:root{
  --kid-sun:#F2B134;
  --kid-mint:#2FBF9B;
  --kid-berry:#E8637F;
  --kid-sky:#42C6DE;
  --kid-soft:rgba(66,198,222,.12);
}
:root[data-theme="dark"]{ --kid-soft:rgba(66,198,222,.1); }

/* ---------- Hero ---------- */
.kid-hero h1 em{ font-style:italic; }
.kid-dots{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.kid-dots i{ position:absolute; border-radius:50%; opacity:.5; animation:kidfloat 9s ease-in-out infinite; }
.kid-dots i:nth-child(1){ left:52%; top:18%; width:12px; height:12px; background:var(--kid-sun); animation-delay:0s; }
.kid-dots i:nth-child(2){ left:61%; top:62%; width:8px;  height:8px;  background:var(--kid-berry); animation-delay:1.2s; }
.kid-dots i:nth-child(3){ left:46%; top:74%; width:14px; height:14px; background:var(--kid-sky); animation-delay:2.4s; }
.kid-dots i:nth-child(4){ left:72%; top:24%; width:9px;  height:9px;  background:var(--kid-mint); animation-delay:3s; }
.kid-dots i:nth-child(5){ left:38%; top:30%; width:7px;  height:7px;  background:var(--kid-sky); animation-delay:4.1s; }
.kid-dots i:nth-child(6){ left:83%; top:70%; width:11px; height:11px; background:var(--kid-sun); animation-delay:5.3s; }
@keyframes kidfloat{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-18px) scale(1.12);} }
@media (max-width:900px){ .kid-dots{display:none;} }

/* ---------- Alterswegweiser ---------- */
.kid-ages-box{ position:relative; background:var(--bg2); border:1px solid var(--rule); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:38px 36px 34px; }
.kid-ages-intro{ max-width:640px; }
.kid-ages-intro h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); margin:12px 0 10px; }
.kid-ages-intro p{ color:var(--dim); font-size:15px; }
.kid-ages{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; }
.kid-age{ border:1px solid var(--rule); border-radius:22px; padding:24px 22px 26px; background:var(--card); position:relative; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.kid-age::before{ content:""; position:absolute; right:-30px; top:-30px; width:96px; height:96px; border-radius:50%; opacity:.16; transition:transform .4s ease; }
.kid-age.a1::before{ background:var(--kid-sky); } .kid-age.a2::before{ background:var(--kid-mint); }
.kid-age.a3::before{ background:var(--kid-sun); } .kid-age.a4::before{ background:var(--kid-berry); }
.kid-age:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent); }
.kid-age:hover::before{ transform:scale(1.5); }
.kid-age .age{ position:relative; display:inline-flex; align-items:baseline; gap:6px; font:500 30px/1 'Fraunces',serif; letter-spacing:-.02em; color:var(--accent); }
.kid-age .age small{ font:600 11px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.kid-age h3{ position:relative; font-size:19px; margin:14px 0 8px; }
.kid-age p{ position:relative; font-size:13.5px; color:var(--dim); line-height:1.6; }
@media (max-width:1000px){ .kid-ages{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .kid-ages{grid-template-columns:1fr;} .kid-ages-box{padding:26px 22px;} }

/* Aufkleber */
.kid-sticker{ position:absolute; right:30px; top:-26px; z-index:4; display:grid; place-items:center; text-align:center; width:118px; height:118px; border-radius:50%;
  background:var(--kid-sun); color:#2A2622; font:600 11px/1.35 'Inter',sans-serif; letter-spacing:.02em;
  box-shadow:0 16px 30px -16px rgba(42,38,34,.6); transform:rotate(-11deg);
  border:2px dashed rgba(42,38,34,.35); animation:kidwobble 5s ease-in-out infinite; }
.kid-sticker b{ display:block; font:500 21px/1 'Fraunces',serif; margin-bottom:3px; }
@keyframes kidwobble{ 0%,100%{transform:rotate(-11deg);} 50%{transform:rotate(-4deg) scale(1.04);} }
@media (max-width:760px){ .kid-sticker{ right:14px; top:-20px; width:92px; height:92px; font-size:10px; } .kid-sticker b{font-size:17px;} }

/* ---------- 01 Fünf Schritte ---------- */
.kid-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; }
.kid-steps::before{ content:""; position:absolute; left:6%; right:6%; top:28px; border-top:2px dashed var(--rule); z-index:0; }
.kid-step{ position:relative; z-index:1; display:flex; flex-direction:column; }
.kid-step .n{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; font:500 26px/1 'Fraunces',serif; box-shadow:0 12px 24px -12px rgba(30,86,214,.8); }
:root[data-theme="dark"] .kid-step .n{ color:var(--ink-deep); }
.kid-step h3{ font-size:20px; margin:18px 0 8px; }
.kid-step p{ font-size:14px; color:var(--dim); line-height:1.6; margin-bottom:18px; }
.kid-step figure{ margin-top:auto; border-radius:20px; overflow:hidden; background:var(--bg3); aspect-ratio:4/3; }
.kid-step figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.kid-step:hover figure img{ transform:scale(1.05); }
@media (max-width:1000px){ .kid-steps{grid-template-columns:1fr 1fr;} .kid-steps::before{display:none;} }
@media (max-width:600px){ .kid-steps{grid-template-columns:1fr;} }

/* Versprechen mit Maskottchen */
.kid-promise{ display:grid; grid-template-columns:130px 1fr; gap:34px; align-items:center; margin-top:60px;
  background:var(--kid-soft); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:34px 38px; }
.kid-mascot{ color:var(--bg2); filter:drop-shadow(0 14px 22px rgba(42,38,34,.22)); }
:root[data-theme="dark"] .kid-mascot{ color:#F3EFE8; }
.kid-mascot svg{ width:100%; height:auto; animation:kidhop 3.4s ease-in-out infinite; }
.kid-mascot .eye{ fill:#2A2622; } .kid-mascot .mouth{ stroke:#1E56D6; fill:none; }
@keyframes kidhop{ 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-9px) rotate(2deg);} }
.kid-promise .q{ font:500 clamp(1.3rem,2.2vw,1.75rem)/1.35 'Fraunces',serif; color:var(--fg-strong); margin-bottom:12px; }
.kid-promise p{ color:var(--dim); font-size:15.5px; }
@media (max-width:760px){ .kid-promise{grid-template-columns:1fr; gap:18px; padding:26px 22px;} .kid-mascot{width:96px;} }

/* ---------- 02 Tell–Show–Do ---------- */
.tsd{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; background:var(--card); }
.tsd > div{ padding:30px 28px 32px; border-left:1px solid var(--rule); }
.tsd > div:first-child{ border-left:0; }
.tsd .t{ display:inline-block; font:600 11.5px 'Inter',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:var(--accent); border-radius:999px; padding:5px 13px; }
:root[data-theme="dark"] .tsd .t{ color:var(--ink-deep); }
.tsd h3{ font-size:23px; margin:16px 0 10px; }
.tsd p{ font-size:14.5px; color:var(--dim); line-height:1.6; }
@media (max-width:760px){ .tsd{grid-template-columns:1fr;} .tsd > div{border-left:0; border-top:1px solid var(--rule);} .tsd > div:first-child{border-top:0;} }

/* Wörterbuch-Klappkarten */
.kid-dict-head{ margin:70px 0 24px; max-width:640px; }
.kid-dict-head h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.kid-dict-head p{ color:var(--dim); font-size:15px; margin-top:10px; }
.flipgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.flip{ appearance:none; border:0; background:none; padding:0; cursor:pointer; perspective:1000px; font:inherit; text-align:left; }
.flip .fi{ display:block; position:relative; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.4,.1,.2,1); min-height:150px; }
.flip:hover .fi, .flip.on .fi{ transform:rotateY(180deg); }
.flip .f{ display:flex; flex-direction:column; justify-content:center; gap:5px; border-radius:20px; padding:24px 24px 26px; border:1px solid var(--rule); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.flip .front{ background:var(--card); min-height:150px; }
.flip .back{ position:absolute; inset:0; transform:rotateY(180deg); background:var(--accent); border-color:transparent; color:#fff; }
:root[data-theme="dark"] .flip .back{ color:var(--ink-deep); }
.flip small{ font:600 10.5px 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.flip .back small{ color:inherit; opacity:.72; }
.flip b{ font:500 26px/1.1 'Fraunces',serif; letter-spacing:-.01em; color:var(--fg-strong); }
.flip .back b{ color:inherit; }
.flip em{ font-style:normal; font-size:13.5px; opacity:.85; margin-top:4px; }
.flip .front::after{ content:"umdrehen"; position:absolute; right:20px; bottom:18px; font:600 10px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.flip:focus-visible .fi{ transform:rotateY(180deg); }
@media (max-width:900px){ .flipgrid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .flipgrid{grid-template-columns:1fr;} .flip .fi,.flip .front{min-height:132px;} }
@media (prefers-reduced-motion:reduce){ .flip .fi{transition:none;} .kid-dots i,.kid-sticker,.kid-mascot svg{animation:none;} }

/* Sätze */
.saysay{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:60px; }
.say{ border:1px solid var(--rule); border-radius:var(--radius-lg); padding:30px 30px 32px; background:var(--card); }
.say .lbl{ display:inline-flex; align-items:center; gap:9px; font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.say.good .lbl{ color:var(--good); } .say.bad .lbl{ color:var(--bad); }
.say .lbl::before{ content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.say ul{ list-style:none; margin-top:18px; }
.say li{ border-top:1px solid var(--rule); padding:14px 0 14px 30px; position:relative; font:500 16px/1.45 'Fraunces',serif; color:var(--fg-strong); }
.say li::before{ position:absolute; left:0; top:14px; font:700 15px 'Inter',sans-serif; }
.say.good li::before{ content:"✓"; color:var(--good); }
.say.bad li::before{ content:"×"; color:var(--bad); font-size:19px; line-height:1; top:15px; }
.say li small{ display:block; margin-top:5px; font:400 13px/1.55 'Inter',sans-serif; color:var(--dim); }
@media (max-width:820px){ .saysay{grid-template-columns:1fr;} }

/* ---------- 03 Zahnwechsel-Fahrplan ---------- */
.charts{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.chart{ border:1px solid var(--rule); border-radius:var(--radius-lg); padding:30px 30px 26px; background:var(--card); }
.chart-head{ margin-bottom:24px; }
.chart-head h3{ font-size:23px; }
.chart-sub{ display:block; margin-top:6px; font:600 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.crow{ display:grid; grid-template-columns:158px 1fr 104px; align-items:center; gap:14px; padding:9px 0; border-radius:10px; }
.crow.hl{ background:var(--hl); margin:0 -10px; padding:9px 10px; }
.cl{ font:600 13px 'Inter',sans-serif; color:var(--fg-strong); line-height:1.3; }
.cl b{ color:var(--kid-sun); }
.ct{ position:relative; height:14px; border-radius:999px; background:var(--bg3); }
:root[data-theme="dark"] .ct{ background:rgba(246,241,232,.08); }
.cbar{ position:absolute; top:0; height:14px; border-radius:999px; display:block; }
.cbar.milk{ background:linear-gradient(90deg,var(--kid-sky),#7BD8E8); }
.cbar.perm{ background:linear-gradient(90deg,var(--blue),#4C82E8); }
.cbar.star{ background:linear-gradient(90deg,var(--kid-sun),#F7CE72); }
.cv{ font:600 12px 'Inter',sans-serif; color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cscale{ position:relative; height:26px; margin:14px 0 0 172px; border-top:1px solid var(--rule); }
.cscale span{ position:absolute; top:8px; transform:translateX(-50%); font:600 10.5px 'Inter',sans-serif; letter-spacing:.1em; color:var(--dim); white-space:nowrap; }
.cscale span:first-child{ transform:none; } .cscale span:last-child{ transform:translateX(-100%); }
.chart-note{ margin-top:22px; font-size:13px; color:var(--dim); line-height:1.55; }
@media (max-width:1000px){ .charts{grid-template-columns:1fr;} }
@media (max-width:600px){
  .crow{ grid-template-columns:1fr auto; row-gap:8px; }
  .cl{ grid-row:1; grid-column:1; } .cv{ grid-row:1; grid-column:2; } .ct{ grid-row:2; grid-column:1 / -1; }
  .cscale{ margin-left:0; }
  .chart{ padding:24px 20px; }
}

.kid-know{ margin-top:34px; background:var(--dark-panel); color:var(--dark-panel-fg); border-radius:var(--radius-lg); padding:40px 42px 44px; position:relative; overflow:hidden; }
.kid-know::after{ content:""; position:absolute; right:-60px; bottom:-90px; width:280px; height:280px; border-radius:50%; background:radial-gradient(closest-side, rgba(242,177,52,.45), transparent 70%); pointer-events:none; }
.kid-know .badge{ display:inline-block; font:600 11px 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#2A2622; background:var(--kid-sun); border-radius:999px; padding:6px 14px; }
.kid-know h3{ position:relative; color:var(--dark-panel-fg); font-size:clamp(1.5rem,2.8vw,2.2rem); margin:18px 0 14px; max-width:20ch; }
.kid-know h3 em{ color:var(--kid-sun); font-style:italic; }
.kid-know p{ position:relative; opacity:.8; font-size:15.5px; max-width:74ch; line-height:1.7; }
@media (max-width:600px){ .kid-know{padding:28px 24px 32px;} }

/* ---------- 04 Vorsorge-Fahrplan ---------- */
.fahrplan-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; }
.fahrplan-table th,.fahrplan-table td{ padding:15px 18px; text-align:left; border-top:1px solid var(--rule); font-size:14.5px; vertical-align:top; }
.fahrplan-table thead th{ border-top:0; font:600 12px 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); background:var(--bg3); }
.fahrplan-table td{ color:var(--dim); line-height:1.6; }
.fahrplan-table td:first-child{ font-weight:600; color:var(--fg-strong); white-space:nowrap; width:15%; }
.fahrplan-table td strong{ color:var(--fg-strong); }
.fahrplan-table td:nth-child(3){ white-space:nowrap; }
.fahrplan-table tr.hl td{ background:var(--hl); }
.fahrplan-note{ font-size:13px; color:var(--dim); margin-top:16px; max-width:860px; line-height:1.6; }
@media (max-width:760px){ .fahrplan-table{ min-width:520px; } .fahrplan-table td:first-child{width:auto;} .fahrplan-table th,.fahrplan-table td{padding:13px 14px; font-size:13.5px;} }

/* ---------- 05 Milchzahn & Notfall ---------- */
.milk{ display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:center; }
.milk figure{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--bg3); }
.milk figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.milk h3{ font-size:clamp(1.6rem,2.8vw,2.2rem); margin-bottom:16px; }
.milk h3 em{ font-style:italic; color:var(--accent); }
.milk p{ color:var(--dim); font-size:15.5px; margin-bottom:12px; line-height:1.7; }
.milk-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px; }
.milk-opts > div{ border:1px solid var(--rule); border-radius:16px; padding:18px 18px 20px; background:var(--card); }
.milk-opts b{ display:block; font:600 14.5px 'Inter',sans-serif; color:var(--fg-strong); margin-bottom:6px; }
.milk-opts span{ font-size:13px; color:var(--dim); line-height:1.55; }
@media (max-width:900px){ .milk{grid-template-columns:1fr; gap:26px;} .milk figure{aspect-ratio:4/3;} }
@media (max-width:640px){ .milk-opts{grid-template-columns:1fr;} }

.emergency{ margin-top:70px; border:2px solid var(--bad); border-radius:var(--radius-lg); padding:38px 38px 36px; background:var(--card); }
.em-label{ display:inline-flex; align-items:center; gap:9px; font:600 11.5px 'Inter',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:var(--bad); border-radius:999px; padding:6px 15px; }
.em-head h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin:18px 0 12px; }
.em-head h3 em{ font-style:italic; color:var(--bad); }
.em-head p{ color:var(--dim); font-size:15.5px; max-width:70ch; }
.em-steps{ list-style:none; counter-reset:em; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:30px 0 24px; }
.em-steps li{ border-top:2px solid var(--bad); padding-top:16px; }
.em-steps b{ font:500 30px/1 'Fraunces',serif; color:var(--bad); }
.em-steps strong{ display:block; font:600 14.5px 'Inter',sans-serif; color:var(--fg-strong); margin:10px 0 6px; }
.em-steps span{ font-size:13.5px; color:var(--dim); line-height:1.6; }
.em-steps em{ font-style:normal; font-weight:600; color:var(--fg-strong); }
.em-note{ font-size:14px; color:var(--dim); line-height:1.6; background:var(--bg3); border-radius:14px; padding:16px 18px; margin-bottom:22px; }
.em-note strong{ color:var(--fg-strong); }
@media (max-width:900px){ .em-steps{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .em-steps{grid-template-columns:1fr;} .emergency{padding:26px 22px;} }

/* Kapitelüberschriften dürfen hier etwas breiter laufen */
#k3 .chapter-head h2, #k4 .chapter-head h2, #k5 .chapter-head h2{ max-width:18ch; }

/* Die Hero-Zeile ist länger als auf den anderen Landingpages */
.kid-hero h1{ font-size:clamp(2.6rem,5.4vw,4.8rem); line-height:1.02; }
.kid-hero .imp-hero-inner{ max-width:620px; }
/* Bildausschnitt: gross das lachende Kind rechts, auf dem Handy weiter nach rechts */
.kid-hero .imp-hero-bg{ object-position:28% 38%; }
@media (max-width:900px){ .kid-hero .imp-hero-bg{ object-position:74% 26%; } }

/* Dunkles Thema: Gold auf Creme und Weiß auf Hellorange lesen sich schlecht */
:root[data-theme="dark"] .kid-know h3 em{ color:#8A5A10; }
:root[data-theme="dark"] .kid-know .badge{ background:#8A5A10; color:#FFF8EC; }
:root[data-theme="dark"] .em-label{ color:#2A2622; }