/* Bewegung und Beispiel-Inhalte der Startseite. Jede Schleife (S1 bis S20) hat ihren Abschnitt.
   Grundsatz: ohne JavaScript und bei "Bewegung aus" ist alles sichtbar und ruhig. */

/* Grundlage: Ruhe-Modus (Systemeinstellung oder Schalter) schaltet jede Bewegung ab */
html.ruhe *,html.ruhe *::before,html.ruhe *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.ruhe .rv{opacity:1!important;transform:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* S1: Kacheln im Einstieg fahren nacheinander ein und schweben danach leicht */
html.js .mosaik>div{animation:kachel-ein .8s cubic-bezier(.16,1,.3,1) both,schweben 9s ease-in-out infinite;animation-delay:calc(var(--i,0)*110ms + 200ms),calc(var(--i,0)*900ms + 1.2s)}
@keyframes kachel-ein{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
@keyframes schweben{50%{translate:0 -7px}}
html.js .kicker{animation:einblenden .8s ease both}
@keyframes einblenden{from{opacity:0}to{opacity:1}}

/* S2: Der Slogan erscheint Zeile für Zeile */
.zl{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.zi{display:block}
html.js .zi{animation:zeile-ein .95s cubic-bezier(.16,1,.3,1) both;animation-delay:.1s}
html.js .zl+.zl .zi{animation-delay:.28s}
@keyframes zeile-ein{from{transform:translateY(110%)}to{transform:none}}
html.js .lead{animation:hoch-ein .9s cubic-bezier(.16,1,.3,1) .5s both}
html.js .fakten{animation:hoch-ein .9s cubic-bezier(.16,1,.3,1) .65s both}
@keyframes hoch-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* S3: Zahlen zählen hoch (JS), "Alle" blendet ein */
.fakt b[data-zahl]{font-variant-numeric:tabular-nums}

/* S4: Abschnitte und Karten blenden beim Scrollen nacheinander ein */
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}
html.js .rv.da{opacity:1;transform:none}

/* S5: Beispielgespräch mit dem Assistenten */
.demo{background:var(--bg)}
.demo-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:stretch}
@media(max-width:900px){.demo-raster{grid-template-columns:minmax(0,1fr)}}
.chat{background:var(--card);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;min-height:430px}
.chat-kopf{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--alt)}
.chat-kopf b{font-size:16px;font-weight:700;color:var(--title)}
.pkt{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}
.tag{margin-left:auto;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:var(--chip);color:var(--chiptx);padding:3px 10px;border-radius:999px}
.chat-fluss{flex:1;padding:20px;display:flex;flex-direction:column;gap:14px;min-height:300px}
.blase{max-width:88%;padding:12px 16px;border-radius:12px;font-size:16px;line-height:1.55}
.blase.du{align-self:flex-end;background:var(--petrol-600);color:#fff;border-bottom-right-radius:4px;min-height:24px}
.blase.ki{align-self:flex-start;background:var(--alt);border:1px solid var(--line);color:var(--tx);border-bottom-left-radius:4px;width:88%}
.blase.ki[hidden]{display:none}
.kern{margin:0 0 6px;font-weight:700;color:var(--title)}
.pkte{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.pkte li{display:flex;gap:10px;font-size:15px}
.pkte li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal-300);margin-top:9px}
.quelle{display:inline-block;margin-top:10px;font-size:13px;color:var(--mu)}
.quelle b{font-weight:500;color:var(--ac)}
.denkt{display:inline-flex;gap:5px;align-items:center;height:24px}
.denkt i{width:7px;height:7px;border-radius:50%;background:var(--mu);animation:punkt 1.2s infinite}
.denkt i:nth-child(2){animation-delay:.2s}.denkt i:nth-child(3){animation-delay:.4s}
@keyframes punkt{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.tippt::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.anz{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.anz.da{opacity:1;transform:none}

.chat-wahl{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--line)}
.chat-wahl button{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--card);color:var(--tx);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .2s,background .2s}
.chat-wahl button:hover{border-color:var(--teal-300)}
.chat-wahl button[aria-pressed="true"]{background:var(--petrol-600);border-color:var(--petrol-600);color:#fff}

/* S6: Faden unter dem Kopf des Gesprächs läuft, bis das nächste Beispiel kommt */
.faden{height:3px;background:transparent;overflow:hidden}
.faden i{display:block;height:100%;width:100%;background:var(--teal-300);transform-origin:left;transform:scaleX(0)}
.chat.warten .faden i{animation:faden 5.2s linear forwards}
@keyframes faden{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pkt{animation:lebt 2.4s ease-in-out infinite}
@keyframes lebt{50%{box-shadow:0 0 0 6px rgba(26,127,55,.15);opacity:.85}}

/* S7: Beispielmeldungen laufen von oben ein */
.feed{background:var(--card);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.feed-kopf{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--alt)}
.feed-kopf b{font-size:16px;font-weight:700;color:var(--title)}
.feed-liste{margin:0;padding:8px 20px;list-style:none;flex:1;min-height:360px;overflow:hidden}
.feed-liste li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);max-height:90px;overflow:hidden;opacity:1;transition:max-height .55s cubic-bezier(.16,1,.3,1),opacity .55s ease,padding .55s ease}
.feed-liste li.neu{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.feed-liste li.weg{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-color:transparent}
.fp{flex:none;width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--c)}
.feed-liste li.frisch .fp{animation:puls 1.6s ease-out 2}
@keyframes puls{from{box-shadow:0 0 0 0 var(--c)}to{box-shadow:0 0 0 10px transparent}}
.ft{flex:1;min-width:0}
.ft b{display:block;font-weight:500;color:var(--title);font-size:16px;line-height:1.35}
.ft span{font-size:13px;color:var(--mu)}
.fz{flex:none;font-size:13px;color:var(--mu);font-variant-numeric:tabular-nums;margin-top:2px}
.feed-fuss{margin:0;padding:12px 20px 16px;font-size:13px;color:var(--mu);border-top:1px solid var(--line)}

/* S8: Karten reagieren: Glanz über dem Band, Symbol hüpft, Pfeil rückt vor */
.band{overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.karte:hover .band::after{transform:translateX(120%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.karte:not(.f6):hover .band svg{animation:huepf .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes huepf{40%{transform:translateY(-6px) rotate(-4deg)}}
.knopf svg{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.knopf:hover svg{transform:translateX(4px)}
.knopf{transition:background .2s,transform .2s}
.knopf:active{transform:scale(.97)}
.karte{transition:border-color .2s,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.karte:not(.f6):hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(3,111,152,.45)}
.chip{transition:background .2s}

/* S9: Linien-Symbole zeichnen sich beim Einblenden */
html.js .rv .band svg :is(path,rect,circle),html.js .rv .wert svg :is(path,rect,circle){stroke-dasharray:1;stroke-dashoffset:1}
html.js .rv.da .band svg :is(path,rect,circle),html.js .rv.da.wert svg :is(path,rect,circle){animation:zeichnen 1.2s cubic-bezier(.45,0,.2,1) .35s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}

/* S10: Mosaik neigt sich leicht zum Zeiger (nur mit Maus, nicht im Ruhe-Modus) */
@media (hover:hover) and (pointer:fine){
  .mosaik{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.16,1,.3,1);will-change:transform}
}

/* S11: Lesefortschritt unter dem Kopf; Kopf wird beim Scrollen kompakter */
.lese{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.lese i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-100),var(--petrol-600));transform-origin:left;transform:scaleX(var(--p,0))}
header{transition:box-shadow .3s ease}
.kopf{transition:height .3s cubic-bezier(.16,1,.3,1)}
.marke b{transition:font-size .3s cubic-bezier(.16,1,.3,1)}
html.gescrollt header{box-shadow:0 8px 22px -14px rgba(11,58,71,.45)}
html.gescrollt .kopf{height:60px}
html.gescrollt .marke b{font-size:22px}
#apps,#demo{scroll-margin-top:72px}

/* S12: Weicher Farbschein hinter dem Einstieg, treibt langsam; nur rechts, weg vom Text */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;will-change:transform}
.hero::before{width:520px;height:520px;right:-140px;top:-120px;background:var(--teal-100);opacity:.28;animation:treiben 22s ease-in-out infinite alternate}
.hero::after{width:420px;height:420px;right:12%;bottom:-200px;background:var(--petrol-500);opacity:.14;animation:treiben 28s ease-in-out -9s infinite alternate-reverse}
:root[data-theme="dark"] .hero::before{opacity:.16}
:root[data-theme="dark"] .hero::after{opacity:.2}
@keyframes treiben{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,50px) scale(1.12)}}
@media(max-width:900px){.hero::before,.hero::after{display:none}}

/* S13: Pausieren, wenn nichts davon sichtbar ist (spart Strom und Akku) */
html.pause *,html.pause *::before,html.pause *::after{animation-play-state:paused!important}
.hero.aus::before,.hero.aus::after,.hero.aus .mosaik>div{animation-play-state:paused!important}

/* S14: Hell/Dunkel wechselt weich */
html.wechsel *,html.wechsel *::before,html.wechsel *::after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease,box-shadow .45s ease!important}

/* S15: Symbole in "Gut zu wissen" bewegen sich leise */
.i-lock .buegel{transform-box:view-box;transform-origin:12px 11px;animation:buegel 7s ease-in-out infinite}
@keyframes buegel{0%,78%,100%{transform:none}84%{transform:translateY(-2.2px)}92%{transform:translateY(-2.2px)}97%{transform:none}}
.i-spark{transform-box:view-box;transform-origin:12px 10px;animation:funkeln 4.5s ease-in-out infinite}
@keyframes funkeln{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(14deg)}}
.i-doc .zeile1,.i-doc .zeile2{stroke-dasharray:1;animation:schreiben 5s ease-in-out infinite}
.i-doc .zeile2{animation-delay:.6s}
@keyframes schreiben{0%{stroke-dashoffset:1}35%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.i-clock .zg{transform-box:view-box;transform-origin:12px 12px;animation:uhr 12s linear infinite}
@keyframes uhr{to{transform:rotate(360deg)}}

/* S16: Schalter für Bewegung */
.kopf-r{display:flex;align-items:center;gap:10px}
.bew{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;color:var(--mu);background:transparent;border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;min-height:36px}
.bew svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bew[aria-pressed="true"]{color:var(--ac)}
.bew[aria-pressed="false"] svg path{d:path("M8 5l11 7-11 7z")}
@media(max-width:560px){.bew .bt{display:none}.bew{padding:7px 10px}.kopf-r{gap:8px}}
[hidden]{display:none!important}

/* S17: Handy: Mosaik bleibt als schmaler Streifen, Gespräch und Meldungen kompakter */
@media(max-width:640px){
  .mosaik{grid-template-columns:repeat(3,1fr);gap:10px}
  .mosaik .m4,.mosaik .m5{display:none}
  .mosaik div{aspect-ratio:1.15;padding:10px 12px;font-size:13px}
  .mosaik .m3{font-size:14px}
  .mosaik small{font-size:12px}
}
@media(max-width:480px){
  .chat{min-height:400px}
  .chat-fluss{padding:14px;min-height:280px}
  .blase{max-width:96%;font-size:15px;padding:10px 14px}
  .blase.ki{width:96%}
  .chat-wahl{padding:12px 14px 14px}
  .feed-liste{min-height:310px;padding:6px 14px}
  .feed-kopf,.chat-kopf{padding:12px 14px}
  .feed-fuss{padding:12px 14px 14px}
}

/* S18: Leistung: weit unten liegende Abschnitte erst beim Heranscrollen darstellen (Platz bleibt reserviert) */
.alt,footer{content-visibility:auto;contain-intrinsic-size:auto 560px}

/* S20: Endschliff: sehr schmale Bildschirme (320 px) laufen nicht über, Kennzahlen und Kacheln schrumpfen mit */
@media(max-width:480px){
  .hero .fakten{grid-template-columns:repeat(3,minmax(0,auto));gap:16px}
  .hero .fakt span{display:block;overflow-wrap:anywhere;font-size:12.5px;line-height:1.35}
  .hero .fakt b{font-size:30px}
  .mosaik{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mosaik div{min-width:0;overflow-wrap:anywhere}
  .marke span{font-size:12px}
}
@media(max-width:360px){
  .kopf{gap:8px}
  .hero .fakten{gap:12px}
  h1{font-size:29px}
}
@media(max-width:480px){.zl{white-space:nowrap}}

/* Platz für bis zu fünf Stichpunkte reservieren, damit beim Aufbauen der Antwort nichts springt */
.chat{min-height:500px}
.chat-fluss{min-height:360px}
@media(max-width:480px){.chat{min-height:560px}.chat-fluss{min-height:440px}}

/* Stichpunkte mit Zusatzzeile (Grund, Termine) */
.pkte li .z2{display:block;font-size:13px;line-height:1.4;color:var(--mu)}
.pkte li>div{min-width:0}
.pkte{gap:9px}
/* Mehr Platz für fünf Einträge mit Zusatzzeile, damit nichts springt */
.chat{min-height:600px}
.chat-fluss{min-height:460px}
@media(max-width:480px){.chat{min-height:760px}.chat-fluss{min-height:620px}}

/* Hintergrund des Einstiegs: Anwendungen -> System -> Mensch (hintergrund.js) */
.hero .hg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
@media(max-width:900px){html body .hero .wrap{padding-bottom:230px}}