/* 1:1 aus dem KiTa-Unternehmer-Portal übernommen (Startbild, Nebel, Kugel), Stand 05.11.2026 */
#nebel,.intro,.orikugelbox,#wfab,#wgespraech{--bg:#E9F0EB;--bg-2:#FFFFFF;--ink:#13241B;--muted:#5E786A;--line:rgba(19,44,31,.11);--accent:#2E8455;--accent-2:#1C6A42;--fg:var(--ink);--primary:var(--accent);--info:#0369a1}
/* ===== SWARM-Intro (Boot-Animation) ===== */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 32%, var(--bg-2) 0%, var(--bg) 66%);
  transition:opacity .6s ease, visibility .6s;}
.intro.weg{opacity:0;visibility:hidden;pointer-events:none;}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;}
.intro .mitte{position:relative;z-index:2;text-align:center;padding:24px;animation:auf .8s ease both;}
/* Neues S.W.A.R.M-Logo (Sechseck + Aurora-Umlauf, Gueven 11.07.) — Wortmarke steckt IM SVG */
.intro .siegel{width:min(62vw,230px);margin:0 auto 4px;color:var(--ink);}
.intro .siegel svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 10px 18px rgba(16,42,67,.12));}
.intro .tag{margin-top:12px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em;max-width:310px;line-height:1.5;margin-left:auto;margin-right:auto;}
.intro .gbm{margin-top:16px;font-size:10.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.intro .weiter{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;
  font-size:12px;color:var(--muted);z-index:2;animation:blink 1.9s ease-in-out infinite;}
@keyframes auf{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes blink{0%,100%{opacity:.35;}50%{opacity:.9;}}
/* Startbild: Nebel + Kugel + Wortmarke */
#nebel{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:var(--bg);color:var(--accent)} /* html/body-Hintergrund setzt chat.css */
html[data-w-nebel="aus"] #nebel,html[data-w-start="punkte"] #nebel.imstart,html[data-w-start="keiner"] #nebel.imstart,html[data-w-start="kugel"] #nebel.imstart{display:none}
html:not([data-w-start="punkte"]) .intro #schwarmC{display:none} html:not([data-w-start="punkte"]) .intro{background:transparent}
body:has(.intro:not(.weg)) :is(header,#fuss,.balken,#wfab){visibility:hidden} body:has(.intro.weg) #wknopf{opacity:.85}
.intro .orikugelbox{position:absolute;inset:0;z-index:1;transform:translateY(-10%)} .intro .orikugelbox canvas{display:block;width:100%;height:100%;touch-action:pan-y} html:not([data-w-start="nebelkugel"]):not([data-w-start="kugel"]) .intro .orikugelbox{display:none}
.intro .wort{display:none;font-weight:800;font-size:34px;letter-spacing:.22em;color:var(--ink);margin:0 0 6px;text-shadow:0 2px 24px rgba(255,255,255,.7)} .intro .wort span{display:inline-block}
html:not([data-w-logo="siegel"]) .intro .siegel{display:none!important} html[data-w-logo="wortmarke"] .intro .wort{display:block} html[data-w-logo="ring"] .intro .mitte,html[data-w-logo="front"] .intro .mitte{align-self:end;padding-bottom:70px}
html[data-w-textanim="puls"][data-w-logo="wortmarke"] .intro .wort{animation:wpuls 2.4s ease-in-out infinite} html[data-w-textanim="atmen"][data-w-logo="wortmarke"] .intro .wort{animation:watmen 3s ease-in-out infinite}
@keyframes wpuls{0%,100%{opacity:.65}50%{opacity:1}} @keyframes watmen{0%,100%{transform:scale(.97)}50%{transform:scale(1.03)}}
html[data-w-wortein="fade"] .intro .wort{animation:wfade 1s ease both} html[data-w-wortein="zoom"] .intro .wort{animation:wzoom 1.1s cubic-bezier(.2,.8,.3,1) both} html[data-w-wortein="hoch"] .intro .wort{animation:whoch .9s cubic-bezier(.2,.8,.3,1) both} html[data-w-wortein="buchstaben"] .intro .wort span{animation:wbuch .7s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes wfade{from{opacity:0}to{opacity:1}} @keyframes wzoom{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}} @keyframes whoch{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}} @keyframes wbuch{from{opacity:0;transform:translateY(18px) scale(.7)}to{opacity:1;transform:none}}