/* KIZZ plus - Toy-Pop. Gelb, Blau und Schwarz aus ihrem Logo, runde Formen, Aufkleber, ein echter 3D-Zahn als Hauptdarsteller. */
:root{
  --gelb:#FFD21F;--blau:#1F5FC4;--blau-hell:#CFE0FF;--schwarz:#151515;--rosa:#FF9DB8;--creme:#FFF8E6;--weiss:#FFFFFF;--leise:#55524A;--nacht:#1B2347;
  --titel:'Bricolage Grotesque',system-ui,sans-serif;--sans:'Nunito Sans',system-ui,sans-serif;
  --rand:clamp(16px,3.4vw,60px);--rund:clamp(22px,2.4vw,38px);--kurve:cubic-bezier(.34,1.56,.64,1)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--creme);color:var(--schwarz);font:400 clamp(16px,.35vw + 12px,19px)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3{font-family:var(--titel);font-weight:800;letter-spacing:-.03em;line-height:.98}
h2{font-size:clamp(42px,6vw,110px);margin-bottom:clamp(24px,4vh,46px)}
h3{font-size:clamp(22px,1.9vw,32px);font-weight:700;margin-bottom:8px}
em{font-style:normal;color:var(--blau)}
.sprung{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;background:#fff;border-radius:10px}
.sprung:focus{left:8px}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
html.js.wow [data-auf]{opacity:0;transform:translateY(40px) scale(.96)}

/* Aufkleber */
.aufkleber{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--gelb);font:700 14px var(--sans);transform:rotate(-2deg);margin-bottom:18px;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.aufkleber--blau{background:var(--blau);color:#fff}

/* Knoepfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:999px;background:var(--schwarz);color:#fff;font:700 16px var(--sans);text-decoration:none;white-space:nowrap;box-shadow:0 5px 0 rgba(0,0,0,.25);transition:transform .25s var(--kurve),box-shadow .2s}
.knopf:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 8px 0 rgba(0,0,0,.22)}
.knopf:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.knopf--weiss{background:#fff;color:var(--schwarz);box-shadow:0 5px 0 rgba(0,0,0,.12)}
.knopf--klein{min-height:42px;padding:0 18px;font-size:14px}

/* Kopf */
.kopf{position:fixed;z-index:50;top:12px;left:var(--rand);right:var(--rand);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:6px 6px 6px 10px;border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 30px -14px rgba(0,0,0,.3)}
.kopf__marke{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 20px var(--titel);letter-spacing:-.02em}
.kopf__marke img{width:30px;height:auto;border-radius:6px}
.kopf__marke b{font-weight:800;color:var(--blau);margin-left:2px}
.kopf__links{display:flex;gap:clamp(14px,2.2vw,34px);font-weight:700;font-size:15px}
.kopf__links a{text-decoration:none;padding:4px 2px;background:linear-gradient(var(--gelb),var(--gelb)) 0 100%/0 40% no-repeat;transition:background-size .3s}
.kopf__links a:hover{background-size:100% 40%}

/* Status */
.status{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.status i{width:11px;height:11px;border-radius:50%;background:#bbb;border:2px solid var(--schwarz)}
.status[data-offen="ja"] i{background:#3ED07B}

/* 3D-Figur */
.figur{position:fixed;inset:0;width:100vw;height:100vh;z-index:40;pointer-events:none;opacity:0;display:none}
html.drei-d .figur{display:block}

/* I Held */
.held{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(100px,14vh,140px) var(--rand) clamp(40px,7vh,80px);background:var(--gelb);border-radius:0 0 clamp(40px,6vw,100px) clamp(40px,6vw,100px);overflow:hidden}
.held::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.5) 0 2px,transparent 3px) 0 0/44px 44px;opacity:.6;pointer-events:none}
.held .aufkleber{position:relative}
.held__wort{position:relative;display:flex;align-items:center;justify-content:center;font-size:clamp(130px,24vw,460px);line-height:.85;letter-spacing:-.06em;margin:0 0 clamp(16px,3vh,30px)}
.held__wort span{display:inline-block}
.luecke{width:clamp(120px,17vw,320px)}
html:not(.drei-d) .luecke{width:.1em}
.held__satz{position:relative;font:800 clamp(28px,3.6vw,64px)/1.02 var(--titel);letter-spacing:-.03em;max-width:15em;margin-bottom:14px}
.held__satz em{background:#fff;color:var(--schwarz);padding:0 .15em;border-radius:.2em;display:inline-block;transform:rotate(-2deg)}
.held__klein{position:relative;max-width:34em;font-size:clamp(16px,1.3vw,21px);margin-bottom:26px}
.held .knoepfe{position:relative;justify-content:center}
.held .status{position:relative;margin-top:20px}
.held__tipp{position:absolute;right:calc(50% - clamp(140px,16vw,300px));top:28%;font:700 15px var(--sans);transform:rotate(8deg);opacity:0}
html.drei-d .held__tipp{opacity:1}
.held__tipp::before{content:"↙";display:block;font-size:26px}

/* Anders */
.anders{padding:clamp(80px,14vh,160px) var(--rand);max-width:1300px;margin:0 auto}
.anders__satz{font:800 clamp(40px,5.6vw,104px)/1 var(--titel);letter-spacing:-.035em;max-width:11em;margin-bottom:24px}
.smiley{display:inline-block;color:var(--blau);transform:rotate(90deg);margin-left:.1em}
.anders__text{max-width:30em;font-size:clamp(18px,1.5vw,24px);color:var(--leise)}

/* II Zimmer */
.zimmer{position:relative}
html.wow .zimmer{height:620svh}
.zimmer__buehne{position:relative;overflow:hidden;background:var(--schwarz)}
html.wow .zimmer__buehne{position:sticky;top:0;height:100svh}
.zimmer__titel{position:absolute;z-index:3;left:var(--rand);top:clamp(80px,12vh,120px);color:#fff;font-size:clamp(40px,5vw,96px);text-shadow:0 4px 30px rgba(0,0,0,.35);max-width:10em}
.zimmer__titel span{color:var(--gelb)}
.zimmer__bilder{position:relative}
html.wow .zimmer__bilder{position:absolute;inset:0}
.raum{position:relative}
html.wow .raum{position:absolute;inset:0;clip-path:circle(0% at 50% 60%)}
html.wow .raum:first-child{clip-path:circle(150% at 50% 60%)}
.raum img{width:100%;height:100%;object-fit:cover}
html:not(.wow) .raum img{height:auto;aspect-ratio:5/3}
.raum figcaption{position:absolute;left:var(--rand);bottom:var(--rand);max-width:min(440px,calc(100% - 2 * var(--rand)));padding:18px 22px;border-radius:24px;background:#fff;font-size:16px;box-shadow:0 6px 0 rgba(0,0,0,.18);transform:rotate(-1.5deg)}
.raum figcaption b{display:block;font:800 clamp(26px,2.6vw,42px)/1 var(--titel);margin-bottom:4px}
.zimmer__punkte{position:absolute;z-index:3;right:var(--rand);bottom:var(--rand);display:flex;gap:8px;list-style:none}
.zimmer__punkte li{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s var(--kurve)}
.zimmer__punkte li.an{background:var(--gelb);transform:scale(1.4)}
html:not(.wow) .zimmer__punkte,html:not(.wow) .zimmer__titel{position:static;color:var(--schwarz);padding:60px var(--rand) 20px}

/* III Fuer wen */
.wen{padding:clamp(80px,14vh,160px) var(--rand)}
.wen h2{max-width:1300px;margin-inline:auto;text-align:right}
.unterstrich{background:linear-gradient(var(--gelb),var(--gelb)) 0 88%/100% 32% no-repeat}
.karten{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.karte{border-radius:var(--rund);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--kurve)}
.karte:nth-child(odd){transform:rotate(-1.2deg)}
.karte:nth-child(even){transform:rotate(1.2deg) translateY(30px)}
.karte:hover{transform:rotate(0) translateY(-8px)}
.karte img{width:100%;aspect-ratio:1;object-fit:cover}
.karte > div{padding:clamp(18px,1.8vw,28px)}
.karte p{font-size:15px}
.karte--gelb{background:var(--gelb)}
.karte--blau{background:var(--blau);color:#fff}
.karte--rosa{background:var(--rosa)}
.karte--nacht{background:var(--nacht);color:#E6EAFF}
.zzz{display:inline-block;font-size:.7em;color:var(--gelb);animation:zzz 2.4s ease-in-out infinite}
@keyframes zzz{50%{transform:translate(4px,-6px);opacity:.5}}

/* IV Sprachen */
.sprachen{position:relative;margin:0 var(--rand);padding:clamp(60px,10vh,120px) clamp(24px,5vw,90px);border-radius:var(--rund);background:var(--blau);color:#fff;min-height:70svh;display:flex;align-items:center}
.sprachen__text{max-width:640px}
.sprachen h2 span{display:inline-block;color:var(--gelb);min-width:3ch}
.sprachen p:not(.aufkleber){font-size:clamp(17px,1.4vw,22px);color:var(--blau-hell)}
.sprechblase{position:absolute;right:clamp(30px,12vw,240px);top:clamp(30px,8vh,80px);padding:14px 22px;border-radius:24px 24px 24px 6px;background:#fff;color:var(--schwarz);font:800 clamp(22px,2.4vw,40px) var(--titel);box-shadow:0 6px 0 rgba(0,0,0,.18);transform:rotate(3deg);display:none}
html.drei-d .sprechblase{display:block}

/* V Aerzte */
.aerzte{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(80px,14vh,160px) var(--rand);max-width:1400px;margin:0 auto}
.aerzte__bild img{border-radius:var(--rund);transform:rotate(-2deg);box-shadow:14px 14px 0 var(--gelb)}
.aerzte h2{font-size:clamp(32px,3.4vw,58px)}
.aerzte h2 span{color:var(--blau)}
.aerzte__text > p:not(.aufkleber){color:var(--leise);margin-bottom:22px}
.technik{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.technik li{padding:8px 14px;border-radius:999px;background:#fff;font-weight:700;font-size:14px;box-shadow:0 3px 0 rgba(0,0,0,.08)}

/* VI Neu */
.neu{padding:clamp(70px,12vh,140px) var(--rand);background:var(--weiss);border-radius:clamp(40px,6vw,100px)}
.neu h2{max-width:1300px;margin-inline:auto}
.neu h2 span{color:var(--blau)}
.schritte{list-style:none;max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.schritte li{padding:clamp(22px,2.2vw,34px);border-radius:var(--rund);background:var(--creme)}
.schritte b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gelb);font:800 26px var(--titel);margin-bottom:18px}
.schritte p{font-size:15px;color:var(--leise)}

/* VII Kontakt */
.kontakt{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(16px,2vw,28px);padding:clamp(70px,12vh,140px) var(--rand);max-width:1400px;margin:0 auto}
.kontakt__karte,.kontakt__seite{border-radius:var(--rund);padding:clamp(26px,3.4vw,56px)}
.kontakt__karte{background:var(--gelb)}
.kontakt__karte h2{font-size:clamp(34px,4vw,72px);margin-bottom:12px}
.kontakt__karte > p:not(.aufkleber):not(.status){font-size:clamp(17px,1.4vw,22px);margin-bottom:12px}
.kontakt__karte .status{margin-bottom:24px}
.kontakt__seite{background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.chips button{min-height:44px;padding:0 18px;border-radius:999px;background:var(--creme);font-weight:700;font-size:15px;box-shadow:0 3px 0 rgba(0,0,0,.1);transition:transform .25s var(--kurve),background .2s}
.chips button:hover{background:var(--gelb);transform:translateY(-2px) rotate(-2deg)}
.notfall{display:block;padding:18px 20px;border-radius:20px;background:var(--rosa);text-decoration:none}
.notfall b{display:block;font:800 22px var(--titel)}
.notfall span{font-size:14px}

/* Fuss */
.fuss{background:var(--schwarz);color:rgba(255,255,255,.75);padding:34px var(--rand) 40px;margin-top:40px}
.fuss__zeile{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:13px}
.fuss b{color:#fff}

/* Chat */
[data-bot]{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
.bot__auf{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 22px 0 16px;border-radius:999px;background:var(--blau);color:#fff;font:700 15px var(--sans);box-shadow:0 5px 0 rgba(0,0,0,.25);transition:opacity .4s,transform .4s var(--kurve)}
.bot__auf i{width:12px;height:12px;border-radius:50%;background:var(--gelb)}
html.im-held .bot__auf{opacity:0;transform:translateY(130%);pointer-events:none}
[data-bot][data-offen="ja"] .bot__auf{display:none}
.bot__fenster{position:absolute;right:0;bottom:0;width:min(400px,calc(100vw - 36px));height:min(620px,calc(100svh - 36px));display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:var(--creme);box-shadow:0 30px 80px rgba(0,0,0,.3)}
.bot__fenster[hidden]{display:none!important}
.bot__kopf{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--gelb)}
.bot__wer{display:flex;flex-direction:column;gap:2px}
.bot__wer b{font:800 20px/1 var(--titel)}
.bot__wer small{font-size:12px}
.bot__zu{width:36px;height:36px;border-radius:50%;background:#fff;font-size:20px;line-height:1}
.bot__lauf{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:8px}
.bot__blase{max-width:84%;padding:10px 14px;border-radius:20px;font-size:15px;line-height:1.45}
.bot__blase--bot{align-self:flex-start;background:#fff;border-bottom-left-radius:6px}
.bot__blase--ich{align-self:flex-end;background:var(--blau);color:#fff;border-bottom-right-radius:6px}
.bot__blase a{color:inherit}
.bot__blase small{display:block;margin-top:8px;color:var(--leise)}
.bot__zettel{display:block;margin:8px 0 4px;padding:12px 14px;border-radius:14px;background:var(--gelb);line-height:1.6}
.bot__punkte{display:inline-flex;gap:5px}
.bot__punkte i{width:7px;height:7px;border-radius:50%;background:var(--blau);animation:tippen 1s infinite ease-in-out}
.bot__punkte i:nth-child(2){animation-delay:.15s}.bot__punkte i:nth-child(3){animation-delay:.3s}
@keyframes tippen{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.bot__chips{display:flex;flex-wrap:wrap;gap:8px}
.bot__chips button{padding:8px 14px;border-radius:999px;background:#fff;font-weight:700;font-size:14px;box-shadow:0 3px 0 rgba(0,0,0,.1)}
.bot__chips button:hover{background:var(--gelb)}
.bot__fuss{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(0,0,0,.08)}
.bot__eingabe{flex:1;min-width:0;height:44px;padding:0 16px;border-radius:999px;border:2px solid rgba(0,0,0,.1);background:#fff;font:400 16px var(--sans)}
.bot__senden{width:44px;height:44px;border-radius:50%;background:var(--blau);color:#fff;font-size:18px}
.bot__hinweis{margin:0;padding:0 16px 12px;font-size:12px;color:var(--leise)}

/* Unterseiten */
body > main:not(#inhalt){max-width:800px;margin:0 auto;padding:140px var(--rand) 80px}
body > main:not(#inhalt) h1{font-size:clamp(48px,7vw,96px);margin-bottom:30px}
body > main:not(#inhalt) h2{font-size:28px;margin:30px 0 8px}
body > main:not(#inhalt) p{margin-bottom:14px}

@media (max-width:1000px){
  .karten,.schritte{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .kopf{left:8px;right:8px;top:8px}
  .kopf__links{display:none}
  .held__wort{font-size:clamp(96px,30vw,180px)}
  .luecke{width:clamp(70px,22vw,130px)}
  .held__tipp{display:none}
  .karten,.schritte,.aerzte,.kontakt{grid-template-columns:1fr}
  .karte:nth-child(even){transform:rotate(1.2deg)}
  .wen h2{text-align:left}
  .sprachen{margin:0 10px;align-items:flex-start;padding-bottom:280px}
  .sprechblase{right:auto;left:24px;top:auto;bottom:200px}
  .bot__fenster{position:fixed;inset:0;width:100%;height:100dvh;border-radius:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}