/* Kinder Fantasie Experience – Stylesheet */
:root{
  --coral:#EF6A55;
  --coral-ink:#C1402B;
  --coral-deep:#E4543E;
  --mint:#5FBFA4;
  --mint-deep:#2A7A63;
  --yellow:#F6B93F;
  --purple:#4E2470;
  --lilac:#5B2D82;
  --ink:#43364E;
  --blush:#FBEDE5;
  --blush-2:#F6E1D3;
  --cream:#FFF9F4;
  --white:#FFFFFF;
  --radius:26px;
  --prose:760px;        /* einheitliche Lesebreite Fließtext */
  --prose-narrow:620px; /* kurze Intros / CTA */
  --display:'Gluten','Baloo 2','Trebuchet MS',system-ui,-apple-system,sans-serif;
  --body:'Nunito','Gluten',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--body);color:var(--ink);background:var(--blush);font-size:17px;line-height:1.65;overflow-x:clip;width:100%;max-width:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.15;color:var(--coral)}
h1{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800}
h3{font-size:1.35rem;font-weight:700}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
section{position:relative}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--purple);color:#fff;padding:.8em 1.4em;border-radius:0 0 14px 0;z-index:200}
.skip-link:focus{left:0}

/* ---------- Deko: liegt IMMER hinter dem Inhalt ---------- */
.blob{position:absolute;border-radius:50%;pointer-events:none;will-change:transform;z-index:0}
.swirl-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.swirl-bg::before{content:"";position:absolute;inset:0;background:url('../img/hintergrund-wellen.webp') center/cover no-repeat;opacity:.9}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--display);font-weight:700;font-size:1.05rem;padding:.85em 1.9em;border-radius:999px;text-decoration:none;border:3px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn-primary{background:var(--yellow);color:var(--purple);box-shadow:0 8px 20px rgba(246,185,63,.4)}
.btn-primary:hover{box-shadow:0 12px 26px rgba(246,185,63,.55)}
.btn-ghost{background:var(--white);color:var(--purple);border-color:var(--purple)}
.btn-ghost:hover{background:var(--purple);color:#fff}
.btn svg{width:1.15em;height:1.15em;flex:none}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--white);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 6px 24px rgba(78,36,112,.08)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:86px;gap:14px}
.logo{flex-shrink:0}
.logo img{height:50px;width:auto;max-width:none}
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav a{font-family:var(--display);font-weight:700;font-size:.98rem;text-decoration:none;color:var(--ink);padding:.5em .85em;border-radius:999px;transition:background .2s,color .2s;white-space:nowrap}
.main-nav a:hover,.main-nav a[aria-current="page"]{background:var(--blush);color:var(--coral-ink)}
.nav-cta{margin-left:6px}
.lang{position:relative}
.lang-btn{font-family:var(--display);font-weight:700;background:var(--blush);border:0;border-radius:999px;padding:.5em 1em;cursor:pointer;color:var(--lilac)}
.lang-menu{position:absolute;top:110%;right:0;background:#fff;border-radius:16px;box-shadow:0 14px 34px rgba(78,36,112,.16);padding:10px;min-width:160px;display:none;z-index:70}
.lang:hover .lang-menu,.lang:focus-within .lang-menu{display:block}
.lang-menu span{display:block;padding:.45em .8em;border-radius:10px;font-weight:700;font-size:.95rem}
.lang-menu .active{background:var(--blush);color:var(--coral)}
.lang-menu .soon{opacity:.45}
.nav-toggle{display:none;background:var(--coral);border:0;width:52px;height:52px;border-radius:50%;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:none}
.nav-toggle span{display:block;width:22px;height:3px;background:#fff;border-radius:3px;transition:transform .3s,opacity .3s}
@media(max-width:1100px){
  .nav-toggle{display:flex;position:relative;z-index:95}
  .main-nav{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;background:var(--white);border-radius:0;box-shadow:none;flex-direction:column;align-items:center;justify-content:center;padding:96px 24px 30px;gap:2px;opacity:0;pointer-events:none;transform:none;transition:opacity .3s;z-index:90;overflow-y:auto}
  .main-nav.open{opacity:1;pointer-events:auto;transform:none}
  .main-nav a{text-align:center;white-space:normal;font-size:1.5rem;padding:.35em .6em;width:auto}
  .nav-cta{margin:16px 0 0;justify-content:center;align-self:center;width:auto;font-size:1.05rem}
  .site-header.nav-open{z-index:95}
  header.nav-open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  header.nav-open .nav-toggle span:nth-child(2){opacity:0}
  header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
}

/* ---------- Sections / Basics ---------- */
.section{padding:84px 0}
.section-white{background:var(--white)}
.section-coral{background:var(--coral);color:#fff}
.section-coral h2{color:#fff}
.center{text-align:center}
.sub{max-width:var(--prose);margin:14px auto 0;font-size:1.08rem}
.crumbs{font-size:.9rem;font-weight:700;margin-bottom:16px;opacity:.85}
.crumbs a{color:var(--mint-deep);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- Hero (groß, Startseite/Money) ---------- */
.hero{padding:64px 0 84px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero-eyebrow{display:inline-block;font-family:var(--display);font-weight:700;color:var(--mint-deep);background:#fff;padding:.35em 1.1em;border-radius:999px;margin-bottom:18px;box-shadow:0 4px 14px rgba(95,191,164,.25)}
.hero h1 .hl-mint{color:var(--mint)}
.hero h1 .hl-yellow{color:var(--yellow)}
.hero p.lead{font-size:1.15rem;margin:20px 0 28px;max-width:34em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-visual{position:relative}
.hero-visual .photo{width:100%;height:auto;filter:drop-shadow(0 22px 34px rgba(78,36,112,.18))}
.check-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.check-strip span{background:#fff;border-radius:999px;padding:.4em 1em;font-weight:800;font-size:.9rem;color:var(--mint-deep);box-shadow:0 4px 14px rgba(95,191,164,.18)}
.badge-spin{position:absolute;right:-14px;bottom:8%;width:128px;height:128px;z-index:3}
.badge-spin svg{width:100%;height:100%;animation:spin 14s linear infinite}
.badge-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;color:#fff;font-size:1rem;text-align:center;line-height:1.1;transform:rotate(-8deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:34px}.hero-visual{max-width:420px;margin:0 auto}}

/* ---------- Page-Hero (kompakt, Unterseiten) ---------- */
.page-hero{padding:56px 0 64px;text-align:center}
.page-hero .lead{max-width:var(--prose);margin:18px auto 26px;font-size:1.12rem}

/* ---------- USP Marquee ---------- */
.usp-marquee{background:var(--purple);color:#fff;overflow:hidden;padding:14px 0}
.usp-track{display:flex;width:max-content;animation:marquee 26s linear infinite;will-change:transform}
.usp-track span{font-family:var(--display);font-weight:700;font-size:1.05rem;white-space:nowrap;padding:0 1.4em;display:flex;align-items:center;gap:1.4em}
.usp-track span::after{content:"✶";color:var(--yellow)}
@keyframes marquee{to{transform:translateX(calc(-1 * var(--marq-shift,50%)))}}

/* ---------- Kategorien ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:52px}
.cat{background:var(--blush);border-radius:34px;padding:34px 28px;text-align:center;transition:transform .3s;display:block;text-decoration:none}
.cat:hover{transform:translateY(-8px) rotate(-1deg)}
.cat img{width:92px;height:92px;object-fit:contain;margin:0 auto 18px}
.cat h3{margin-bottom:8px}
.cat:nth-child(1) h3{color:var(--mint)}
.cat:nth-child(2) h3{color:var(--coral)}
.cat:nth-child(3) h3{color:var(--yellow)}
@media(max-width:820px){.cats{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* ---------- Angebot / Facts (Bild+Text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .ph{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(78,36,112,.15))}
.offer-tag{display:inline-block;font-family:var(--display);font-weight:800;background:var(--yellow);color:var(--purple);padding:.3em 1em;border-radius:999px;margin-bottom:14px}
.price-line{display:flex;align-items:baseline;gap:16px;margin:22px 0 8px}
.price-old{font-size:1.4rem;text-decoration:line-through;opacity:.5;font-weight:700}
.price-new{font-family:var(--display);font-size:3rem;font-weight:800;color:var(--purple)}
.price-note{font-size:.95rem;opacity:.8;margin-bottom:26px}
.ticks{list-style:none;margin-top:18px}
.ticks li{padding-left:2em;position:relative;margin-bottom:12px}
.ticks li::before{content:"🎈";position:absolute;left:0}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- Programm-Kacheln + Detailreihen ---------- */
.progs{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:52px}
.prog{text-align:center;text-decoration:none}
.prog img{width:100%;height:auto;filter:drop-shadow(0 12px 22px rgba(78,36,112,.14));transition:transform .3s}
.prog:hover img{transform:scale(1.05) rotate(2deg)}
.prog h3{margin-top:16px;font-size:1.12rem;color:var(--coral)}
@media(max-width:960px){.progs{grid-template-columns:repeat(2,1fr)}.progs .prog:last-child{grid-column:span 2;max-width:50%;margin:0 auto}}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:44px 0}
.prow:nth-of-type(even) .prow-img{order:2}
.prow img{width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(78,36,112,.14))}
.prow .good{display:inline-block;background:var(--blush);border-radius:999px;padding:.35em 1.1em;font-weight:800;color:var(--mint-deep);margin:14px 0 18px;font-size:.92rem}
@media(max-width:860px){.prow{grid-template-columns:1fr}.prow:nth-of-type(even) .prow-img{order:0}}

/* ---------- Counter ---------- */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
.counter{text-align:center}
.counter .num{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);color:var(--purple);line-height:1}
.counter .num small{font-size:.5em}
.counter .lbl{font-weight:700;margin-top:6px}
@media(max-width:720px){.counters{grid-template-columns:repeat(2,1fr)}}

/* ---------- Pakete ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px;align-items:stretch}
.plan{background:var(--purple);color:#fff;border-radius:34px;padding:38px 30px;display:flex;flex-direction:column;position:relative;transition:transform .3s}
.plan:hover{transform:translateY(-8px)}
.plan h3{color:#fff;text-align:center}
.plan .p-price{font-family:var(--display);font-weight:800;font-size:2.6rem;color:var(--yellow);text-align:center;margin:8px 0 4px}
.plan .p-old{text-align:center;text-decoration:line-through;opacity:.55;font-weight:700;margin-bottom:2px}
.plan .p-time{text-align:center;font-weight:700;opacity:.85;margin-bottom:18px;font-size:.95rem}
.plan ul{list-style:none;margin:0 0 26px;flex:1}
.plan li{padding-left:1.8em;position:relative;margin-bottom:10px}
.plan li::before{content:"✔";position:absolute;left:0;color:var(--yellow);font-weight:800}
.plan .btn{justify-content:center}
.plan-flag{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);background:var(--coral);color:#fff;font-family:var(--display);font-weight:800;padding:.3em 1.2em;border-radius:999px;box-shadow:0 8px 20px rgba(239,106,85,.4);white-space:nowrap;z-index:3}
.plan.hot{outline:4px solid var(--yellow)}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* ---------- Ablauf ---------- */
.steps{max-width:760px;margin:52px auto 0}
.step{display:grid;grid-template-columns:64px 1fr;gap:22px;margin-bottom:34px;align-items:start}
.step .n{width:64px;height:64px;border-radius:50%;background:var(--white);font-family:var(--display);font-weight:800;font-size:1.5rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(78,36,112,.12)}
.step:nth-child(1) .n{color:var(--mint)}
.step:nth-child(2) .n{color:var(--coral)}
.step:nth-child(3) .n{color:var(--yellow)}
.step:nth-child(4) .n{color:var(--lilac)}
.step:nth-child(5) .n{color:var(--mint-deep)}
.step h3{margin-bottom:4px;color:var(--purple)}

/* ---------- Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.review{background:#fff;color:var(--ink);border-radius:28px;padding:30px 26px;box-shadow:0 14px 34px rgba(0,0,0,.10)}
.review .stars{color:var(--yellow);font-size:1.2rem;letter-spacing:.15em;margin-bottom:12px}
.review .name{font-family:var(--display);font-weight:700;margin-top:14px;color:var(--purple)}
.review.slot{border:3px dashed rgba(255,255,255,.7);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700}
@media(max-width:860px){.reviews{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;filter:drop-shadow(0 12px 24px rgba(78,36,112,.12));transition:transform .3s}
.gallery img:hover{transform:scale(1.03) rotate(1deg)}
.gallery figcaption{font-family:var(--display);font-weight:700;font-size:1.1rem;margin-top:16px;text-align:center;color:var(--lilac)}
@media(max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- FAQ ---------- */
.faq-list{max-width:var(--prose);margin:44px auto 0}
details.faq{background:var(--white);border-radius:22px;margin-bottom:14px;box-shadow:0 8px 24px rgba(78,36,112,.07);overflow:hidden}
.section-white details.faq{background:var(--blush);box-shadow:none}
details.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--display);font-weight:700;font-size:1.12rem;padding:20px 26px;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.7rem;color:var(--mint);font-weight:600;transition:transform .3s;flex:none}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 26px 22px;max-width:60em}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.nap{font-size:1.12rem}
.nap strong{font-family:var(--display);font-size:1.25rem;color:var(--purple)}
.nap a{color:var(--coral);font-weight:700;text-decoration:none}
.nap .hours{display:inline-block;background:var(--blush);border-radius:999px;padding:.35em 1.1em;font-weight:800;color:var(--lilac);margin-top:10px}
.contact-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.form-teaser{background:var(--white);border-radius:34px;padding:36px 32px;box-shadow:0 18px 44px rgba(78,36,112,.10)}
.form-teaser label{display:block;font-weight:800;margin:14px 0 6px;font-size:.95rem}
.form-teaser input,.form-teaser select{width:100%;padding:.8em 1.1em;border:2px solid var(--blush-2);border-radius:999px;font-family:var(--body);font-size:1rem;background:var(--cream)}
.form-teaser .btn{width:100%;justify-content:center;margin-top:22px}
.form-note{font-size:.85rem;opacity:.7;margin-top:12px;text-align:center}
.map-blob{position:relative;padding-bottom:66%;height:0;overflow:hidden;border-radius:34px;box-shadow:0 18px 44px rgba(78,36,112,.14)}
.map-blob iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Final CTA ---------- */
.final-cta{text-align:center}
.final-cta p{max-width:var(--prose-narrow);margin:16px auto 30px;font-size:1.12rem}

/* ---------- Footer ---------- */
footer{background:var(--purple);color:#fff;padding:56px 0 110px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:34px}
footer h2{color:var(--yellow);font-size:1.1rem;margin-bottom:12px;font-family:var(--display)}
footer a{color:#fff;text-decoration:none;opacity:.9}
footer a:hover{opacity:1;text-decoration:underline}
footer ul{list-style:none}
footer li{margin-bottom:8px}
.foot-legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9rem;opacity:.85}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* ---------- WhatsApp Float ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:62px;height:62px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(37,211,102,.45);transition:transform .25s}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:32px;height:32px;fill:#fff}

/* ---------- Motion (nur mit JS aktiv → kein unsichtbarer Content ohne JS) ---------- */
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.confetti-bit{position:fixed;width:10px;height:14px;border-radius:3px;pointer-events:none;z-index:99}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .usp-track,.badge-spin svg{animation:none}
  .btn:hover,.cat:hover,.plan:hover,.prog:hover img,.gallery img:hover,.wa-float:hover{transform:none}
}

/* Wellen-Übergang (Original FooterBG) */
.wave-div{position:absolute;bottom:-2px;left:0;width:100%;height:auto;z-index:1;pointer-events:none}

/* Schwebende Deko (Prinzessin & Co.) */
.deco-float{position:absolute;pointer-events:none;z-index:1;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}

/* Scroll-Fortschrittsbalken */
#scrollbar{position:fixed;top:0;left:0;height:5px;width:0;z-index:120;background:linear-gradient(90deg,var(--coral),var(--yellow),var(--mint));border-radius:0 4px 4px 0}

/* Verspielte Hover-Momente */
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes squish{0%{transform:scale(1)}40%{transform:scale(1.08,.92) translateY(-3px)}70%{transform:scale(.96,1.05) translateY(-3px)}100%{transform:scale(1.03) translateY(-3px)}}
.cat:hover img{animation:wiggle .5s ease}
.btn-primary:hover{animation:squish .45s ease}
.wa-float:hover svg{animation:wiggle .5s ease}
.prog:hover img{transform:scale(1.07) rotate(3deg)}
.gallery img:hover{transform:scale(1.05) rotate(-2deg)}
details.faq summary:hover{color:var(--coral)}
details.faq summary:hover::after{transform:rotate(90deg) scale(1.2)}
details.faq[open] summary:hover::after{transform:rotate(45deg) scale(1.2)}
.plan,.cat,.review{will-change:transform}

/* Großes Anfrage-Formular */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form-grid .full{grid-column:1/-1}
.form-grid>*{min-width:0}
.form-teaser input,.form-teaser select,.form-teaser textarea{min-width:0;max-width:100%}
.form-teaser input[type="date"],.form-teaser input[type="time"]{-webkit-appearance:none;appearance:none}
.form-teaser textarea{width:100%;padding:.9em 1.1em;border:2px solid var(--blush-2);border-radius:22px;font-family:var(--body);font-size:1rem;background:var(--cream);min-height:96px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:.45em 1.1em;border-radius:999px;border:2px solid var(--blush-2);background:var(--cream);font-weight:800;font-size:.9rem;cursor:pointer;transition:all .2s;user-select:none}
.chip:hover span{transform:translateY(-2px) rotate(-1deg)}
.chip input:checked+span{background:var(--mint);border-color:var(--mint);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--purple)}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}

/* Große Displays (27" 5K & Co.): Layout wächst mit */
/* Große Displays (27" 5K & Co.): Inhalt wächst mit und bleibt bündig links.
   Werte bei Bedarf hier zentral anpassen. */
@media(min-width:1500px){
  .wrap{max-width:1360px}
  .logo img{height:56px}
}
@media(min-width:1800px){
  body{font-size:19px}
  .wrap{max-width:1540px}
  .logo img{height:60px}
  .section{padding:104px 0}
}
@media(min-width:2200px){
  body{font-size:20px}
  .wrap{max-width:1780px}
  .section{padding:116px 0}
}
@media(min-width:2560px){
  body{font-size:21px}
  .wrap{max-width:2060px}
  .section{padding:128px 0}
}

@media(prefers-reduced-motion:reduce){
  .deco-float,.cat:hover img,.btn-primary:hover,.wa-float:hover svg{animation:none}
  .chip:hover span{transform:none}
}

/* Vollflächiger Hero wie das Original-Slider-Design */
.hero-home{background:var(--kfx-hero,url('../img/kinderspielraum-partyraum-wien-hero.webp')) 70% center/cover no-repeat;min-height:min(82vh,860px);display:flex;align-items:center;padding:80px 0 140px}
.hero-home h1{color:var(--mint)}
.hero-home .lead{color:var(--ink)}
/* Startseite-Hero erbt sonst das 2-Spalten-Grid von .hero .wrap → Text wandert auf breiten Screens nach rechts.
   Block + volle Breite macht den .wrap wieder logo-bündig (wie der Header-Wrap). */
.hero-home .wrap{display:block;width:100%}
@media(max-width:860px){.hero-home{background-position:74% center;min-height:auto;padding:70px 0 300px}}

/* CSS-Wellen: jede Sektion + Footer starten mit geschwungener Kante statt gerader Linie */
.section{--secbg:var(--blush);background:var(--secbg)}
.section-white{--secbg:var(--white)}
.section-coral{--secbg:var(--coral)}
footer{--secbg:var(--purple);position:relative}
.section::before,footer::before{content:"";position:absolute;top:-46px;left:0;width:100%;height:48px;background:var(--secbg);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'><path d='M0 34 C 240 64 480 4 720 26 C 960 46 1200 12 1440 30 L 1440 64 L 0 64 Z'/></svg>") center/100% 100% no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'><path d='M0 34 C 240 64 480 4 720 26 C 960 46 1200 12 1440 30 L 1440 64 L 0 64 Z'/></svg>") center/100% 100% no-repeat;pointer-events:none}
.hero::before,.page-hero::before{display:none}

/* Handgezeichnete Wellenlinie unter Überschriften */
.section h2{margin-bottom:10px}
main .section h2::after{content:"";display:block;width:120px;height:12px;margin:12px 0 0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><path d='M2 8 Q 12 2 22 8 T 42 8 T 62 8 T 82 8 T 102 8 T 118 8' fill='none' stroke='%23F6B93F' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat center/contain}
/* Welle folgt der Titel-Ausrichtung: nur in zentrierten Containern zentriert */
main .section .center h2::after,
main .section.final-cta h2::after,
main .section .prose h2::after{margin-left:auto;margin-right:auto}
.section-coral h2::after{filter:brightness(1.15)}
.plan h3,.step h3,.counter *{letter-spacing:.01em}

/* Abstände & Ausrichtung harmonisieren */
.sub{margin-top:14px}
.split h2{margin-bottom:6px}
.split p,.prow p{margin-top:12px}
.prow h2::after{margin-top:10px}
.nap p{margin-bottom:0}
.faq-list{margin-top:36px}
.plans,.cats,.progs,.reviews,.gallery{margin-top:44px}

/* Select-Felder = gleicher Look wie die anderen Eingabefelder */
.form-teaser select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--cream);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%234E2470' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 1.1em center;background-size:1em;padding-right:2.8em;cursor:pointer}
.form-teaser input:focus,.form-teaser select:focus,.form-teaser textarea:focus{outline:none;border-color:var(--mint)}

/* Gluten braucht etwas Luft */
body{letter-spacing:.005em}
.btn{letter-spacing:.02em}

/* Marquee: Platz für die Welle der Folgesektion, Text bleibt frei */
.usp-marquee{padding:16px 0 70px}

/* Unterseiten-Hero: Luft zur Welle */
.page-hero{padding:56px 0 100px}

/* Textumbruch: nie abgeschnittene Wörter */
h1,h2,h3,p,a,li,summary{overflow-wrap:break-word}
h1,h2{hyphens:manual}

/* Hero Startseite mobil: Text auf Glas-Karte, damit nichts im Bild verschwindet */
@media(max-width:860px){
  .hero-home{background-position:70% bottom;padding:56px 0 320px}
  .hero-home .wrap > div{background:rgba(255,249,244,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:30px;padding:26px 22px;max-width:none}
}

/* Schwebende Deko nur, wo Platz ist */
@media(max-width:900px){.deco-float{display:none}}

/* Mobile: Abstände, Größen, nichts abgeschnitten */
@media(max-width:640px){
  .wrap{padding:0 18px}
  .section{padding:60px 0}
  .btn{font-size:.98rem;padding:.8em 1.5em;width:auto}
  .hero-ctas .btn{width:100%;justify-content:center}
  .contact-ctas .btn{width:100%;justify-content:center}
  .logo img{height:42px}
  .plan{padding:30px 22px}
  .review{padding:24px 20px}
  .form-teaser{padding:28px 20px}
  .cat{padding:28px 20px}
  .step{grid-template-columns:52px 1fr;gap:14px}
  .step .n{width:52px;height:52px;font-size:1.2rem}
  .counter .num{font-size:2.3rem}
  .usp-track span{font-size:.95rem}
  .map-blob{padding-bottom:88%}
  footer{padding-bottom:120px}
  .foot-legal{flex-direction:column;text-align:center}
  main .section h2::after{width:96px;height:10px}
}
@media(max-width:400px){
  h1{font-size:1.95rem}
  .check-strip span{font-size:.82rem}
}

/* Rechtsseiten */
.legal{max-width:var(--prose);margin-inline:auto}
.legal h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:2.2rem 0 .7rem}
.legal p{margin:0 0 1rem;line-height:1.75}
.legal a{color:var(--coral,#EF6A55);font-weight:700}

/* Standalone-Render: echtes Vollbild, keine Theme-Reste, kein Seiten-Scroll durch Full-Bleed-Sektionen */
html body.kfx-standalone{margin:0;padding:0;width:100%;max-width:100%;overflow-x:clip;background:var(--purple)}
body.kfx-standalone .usp-marquee,body.kfx-standalone .site-header,body.kfx-standalone footer,body.kfx-standalone .hero{width:100%;max-width:100%}

/* ===== AVADA-OVERRIDE: kritische Regeln gegen Theme-Durchgriff absichern ===== */
body.kfx-standalone h1,body.kfx-standalone h2,body.kfx-standalone h3{font-family:var(--display)!important}
body.kfx-standalone p,body.kfx-standalone li,body.kfx-standalone .lead{font-family:var(--body)}
body.kfx-standalone footer,body.kfx-standalone footer p,body.kfx-standalone footer li,body.kfx-standalone footer span,body.kfx-standalone footer a{color:#fff!important}
body.kfx-standalone footer h2{color:var(--yellow)!important}
body.kfx-standalone footer a{opacity:.92}
body.kfx-standalone footer a:hover{opacity:1}

/* Kein Abstand/keine weiße Fläche unter dem Footer durch eigene Elemente */
body.kfx-standalone{min-height:100%}
body.kfx-standalone footer{margin-bottom:0}

/* ==================== DESIGN-SYSTEM: einheitliche Struktur ==================== */
/* Fließtext-Container: überall gleiche Breite, mittig, konsistente Absätze */
.prose{max-width:var(--prose);margin-inline:auto;text-align:center}
.prose>h2{text-align:center;margin-bottom:10px}
.prose p{margin-top:1.1em;line-height:1.75}
.prose p:first-of-type{margin-top:0}
.prose a{color:var(--coral);font-weight:700}

/* Deko-Welle: linksbündig NUR unter linksbündigen Titeln (Bild+Text, Programmzeilen) */
/* (Standard-Welle ist jetzt linksbündig – .split/.prow/.legal/.contact-grid brauchen keine Extra-Regel) */

/* Footer: Beschreibungstext begrenzen, damit er nicht an Spalte 2 klebt */
footer .wrap{gap:40px}
footer .wrap>div:first-child p{max-width:34ch}

/* Weißer Balken ganz unten sicher verhindern (dreifach abgesichert) */
html:has(body.kfx-standalone){background:var(--purple)}
body.kfx-standalone footer{box-shadow:0 50vh 0 var(--purple)}

/* Hero-Startseite: Textblock startet LOGO-BÜNDIG (im normalen .wrap, wie Kindergeburtstag),
   Block linksbündig (max 34em) → Text links, Kinder rechts frei. */
@media(min-width:1100px){
  .hero-home .wrap>div{max-width:34em;margin-left:0}
}

/* Hero: Bild leicht nach rechts (Kinder frei), sanfter Verlaufs-Schleier links für Lesbarkeit */
.hero-home{position:relative;background-position:73% center}
@media(min-width:861px){
  .hero-home::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;display:block;
    background:linear-gradient(100deg,rgba(255,249,244,.95) 0%,rgba(255,249,244,.82) 26%,rgba(255,249,244,.35) 46%,rgba(255,249,244,0) 60%)}
  .hero-home .wrap{position:relative;z-index:1}
}

/* ==================== Mobile-Menü: Extras (Öffnungszeiten + Social) ==================== */
.nav-extras{display:none}
@media(max-width:1100px){
  .nav-extras{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:auto;padding-top:30px;width:100%}
  .nav-hours{font-family:var(--display);font-weight:700;color:var(--lilac);font-size:1.05rem;display:flex;align-items:center;gap:.5em}
  .nav-social{display:flex;gap:14px}
  .nav-social a{width:48px;height:48px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;color:var(--purple);transition:transform .2s;text-decoration:none}
  .nav-social a:hover{transform:translateY(-3px)}
  .nav-social svg{width:22px;height:22px}
}

/* ==================== Hero-Headline: saubere Größe & Umbrüche auf dem Handy ==================== */
@media(max-width:640px){
  .hero-home h1{font-size:clamp(1.4rem,5.4vw,1.85rem);line-height:1.16;text-wrap:balance;letter-spacing:-.01em}
  .hero-home .wrap>div{padding:24px 20px}
  .hero-home .lead{font-size:1.02rem}
  .hero-eyebrow{font-size:.86rem;padding:.28em .85em}
}
@media(max-width:380px){
  .hero-home h1{font-size:1.32rem}
}