/* Lucky Swiss Sign – «KI und Menschenhirn, geschützt» (Rico 02.11.2026, abends)
   Geschäftlich: Navy, Cyan = KI, Bernstein = Mensch, Rot nur für Gefahren (Sicherheit).
   Keine externen Anfragen: Systemschrift, Grafiken lokal. Leuchten nur auf Grafik und Hauptknopf.
   Recherche-Regeln: Kontrast ≥ 4.5:1 für Text, Bewegung abschaltbar (WCAG 2.2.2), Bewegung nur im Hero. */

:root {
  color-scheme: dark;
  --grund: #050a16;
  --flaeche: #0b1426;
  --flaeche-2: #0f1b31;
  --text: #e8eef8;
  --leise: #a9b5ca;
  --linie: #1d2b45;
  --ki: #3fd4ff;
  --ki-dunkel: #0b3a52;
  --mensch: #ffb54d;
  --mensch-dunkel: #3a2207;
  --gefahr: #ff6b6b;
  --gut: #5ee0a0;
  --fokus: #ffe14d;
  --knopf-text: #04121a;
  --fliess: #cdd6e4;
  --hell: #ffffff;
  --linie-2: #36486b;
  --kopf-grund: rgb(5 10 22 / 0.94);
  --glas: rgb(11 20 38 / 0.84);
  --ki-hover: #7fe3ff;
  --verlauf-mitte: #bfeeff;
  --schatten: 0 20px 60px rgb(0 0 0 / 0.35);
  --band-mitte: rgb(15 27 49 / 0.9);
  /* Bühnen für Grafiken bleiben in beiden Modi dunkel (wie ein Bildschirm) */
  --buehne: #0b1426;
  --buehne-linie: #1d2b45;

  --schrift: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --riesig: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
  --gross: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  --mittel: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem);
  --normal: 1.0625rem;
  --klein: 0.9375rem;
  --winzig: 0.8125rem;

  --rand: clamp(1rem, 4vw, 2.5rem);
  --breite: 76rem;
  --abschnitt: clamp(4rem, 8vw, 7rem);
  --spalte: 44rem;
  --radius: 12px;
}

/* Heller Modus: folgt dem Betriebssystem, ausser der Besucher hat im Kopf umgeschaltet (data-theme).
   Kontraste nachgerechnet 02.11.2026: Text 15,8–18,1:1, Akzente 4,5–5,9:1. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --grund: #f4f7fb; --flaeche: #ffffff; --flaeche-2: #eaf0f7;
    --text: #0b1628; --fliess: #2b3a52; --leise: #4b5a73; --hell: #050a16;
    --linie: #dbe3ee; --linie-2: #97a6bd;
    --ki: #0b74a0; --ki-hover: #095f84; --mensch: #a35400; --gut: #0b7d52; --gefahr: #c0262d; --fokus: #c2410c;
    --knopf-text: #ffffff; --kopf-grund: rgb(244 247 251 / 0.92); --glas: rgb(255 255 255 / 0.75);
    --verlauf-mitte: #0b74a0; --schatten: 0 18px 50px rgb(15 35 70 / 0.12); --band-mitte: rgb(255 255 255 / 0.92);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --grund: #f4f7fb; --flaeche: #ffffff; --flaeche-2: #eaf0f7;
  --text: #0b1628; --fliess: #2b3a52; --leise: #4b5a73; --hell: #050a16;
  --linie: #dbe3ee; --linie-2: #97a6bd;
  --ki: #0b74a0; --ki-hover: #095f84; --mensch: #a35400; --gut: #0b7d52; --gefahr: #c0262d; --fokus: #c2410c;
  --knopf-text: #ffffff; --kopf-grund: rgb(244 247 251 / 0.92); --glas: rgb(255 255 255 / 0.75);
  --verlauf-mitte: #0b74a0; --schatten: 0 18px 50px rgb(15 35 70 / 0.12); --band-mitte: rgb(255 255 255 / 0.92);
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0; color: var(--text); font-family: var(--schrift); font-size: var(--normal); line-height: 1.6;
  background:
    radial-gradient(55rem 38rem at 78% -8%, rgb(255 181 77 / 0.08), transparent 60%),
    radial-gradient(50rem 36rem at 12% 0%, rgb(63 212 255 / 0.09), transparent 55%),
    var(--grund);
  background-repeat: no-repeat;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--riesig); font-weight: 750; }
h2 { font-size: var(--gross); font-weight: 720; }
h3 { font-size: 1.2rem; font-weight: 650; }
p { margin: 0; }
.huelle { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

.springen { position: absolute; left: var(--rand); top: -4rem; background: var(--text); color: var(--grund); padding: 0.6rem 1rem; z-index: 50; }
.springen:focus { top: 0.75rem; }

/* --- Kopf und Register ----------------------------------------------------------------------- */
.hinweis { margin: 0; font-size: var(--winzig); background: var(--flaeche); border-bottom: 1px solid var(--linie); color: var(--leise); }
.hinweis .huelle { padding-block: 0.45rem; }
.hinweis strong { color: var(--text); }

.kopf { position: sticky; top: 0; z-index: 40; background: var(--kopf-grund); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 0.85rem; flex-wrap: wrap; }
@media (max-width: 40rem) { .kopf { position: relative; } html { scroll-padding-top: 1rem; } }
.marke { display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 750; letter-spacing: -0.01em; text-decoration: none; font-size: 1.05rem; }
.marke-zeichen { width: 1.6rem; height: 1.6rem; flex: none; }
.register { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; font-size: var(--klein); }
.register a { text-decoration: none; color: var(--leise); padding: 0.4rem 0.7rem; border-radius: 6px; }
.register a:hover { color: var(--text); background: var(--flaeche); }
.register a[aria-current="page"] { color: var(--text); background: var(--flaeche-2); box-shadow: inset 0 -2px 0 var(--ki); }
.register .kontakt-link { color: var(--knopf-text); background: var(--ki); font-weight: 650; }
.register .kontakt-link:hover { background: var(--ki-hover); color: var(--knopf-text); }
.register .kontakt-link[aria-current="page"] { box-shadow: none; }

/* --- Knöpfe, Abzeichen ------------------------------------------------------------------------ */
.knopf { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1.4rem; border-radius: 8px; font-weight: 680; text-decoration: none; font: inherit; font-weight: 680; cursor: pointer; border: 1px solid transparent; line-height: 1.2; }
.knopf-haupt { background: var(--ki); color: var(--knopf-text); box-shadow: 0 0 0 1px rgb(63 212 255 / 0.4), 0 8px 30px rgb(63 212 255 / 0.25); }
.knopf-haupt:hover { background: var(--ki-hover); }
.knopf-zweit { background: transparent; color: var(--text); border-color: var(--linie-2); }
.knopf-zweit:hover { border-color: var(--ki); background: rgb(63 212 255 / 0.06); }
.knopf-klein { padding: 0.5rem 0.9rem; font-size: var(--klein); }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 2rem; }

.abzeichen { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.abzeichen li, .marker { font-size: var(--winzig); padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--linie-2); color: var(--leise); background: var(--glas); display: inline-flex; align-items: center; gap: 0.4rem; }
.marker-ki { color: var(--ki); border-color: rgb(63 212 255 / 0.45); }
.marker-mensch { color: var(--mensch); border-color: rgb(255 181 77 / 0.45); }
.marker-sicher { color: var(--gut); border-color: rgb(94 224 160 / 0.45); }
.punkt { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

/* --- Hero ------------------------------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.hero .huelle { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; }
@media (max-width: 60rem) { .hero .huelle { grid-template-columns: 1fr; } }
.hero h1 { margin-top: 1.25rem; font-size: clamp(2.05rem, 1.2rem + 3.5vw, 4.1rem); hyphens: auto; }
.hero h1 .verlauf { display: inline-block; }
.verlauf { background: linear-gradient(90deg, var(--ki) 0%, var(--verlauf-mitte) 45%, var(--mensch) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin-top: 1.4rem; font-size: 1.2rem; max-width: 38rem; color: var(--fliess); }
.hero-bild { position: relative; justify-self: center; width: 100%; max-width: 40rem; margin: 0; }
.hero-bild img { display: block; width: 100%; height: auto; }
.bewegung-knopf { display: block; margin: 0.5rem 0 0 auto; font: inherit; font-size: var(--winzig); color: var(--leise); background: var(--glas); border: 1px solid var(--linie); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; }
.bewegung-knopf[hidden] { display: none; }
/* Im hellen Modus bekommt die leuchtende Hero-Grafik eine dunkle Bühne, sonst verliert sie ihr Licht */
:root[data-theme="light"] .hero-bild img { background: radial-gradient(circle at 50% 45%, #0f2340, var(--buehne) 70%); border-radius: 24px; padding: 1rem; box-shadow: 0 30px 80px rgb(15 35 70 / 0.25); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero-bild img { background: radial-gradient(circle at 50% 45%, #0f2340, var(--buehne) 70%); border-radius: 24px; padding: 1rem; box-shadow: 0 30px 80px rgb(15 35 70 / 0.25); }
}

/* Umschalter hell/dunkel im Kopf */
.kopf-rechts { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.thema-knopf { display: none; }
.mit-js .thema-knopf { display: inline-grid; }
.thema-knopf { place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--glas); color: var(--text); cursor: pointer; }
.thema-knopf:hover { border-color: var(--ki); color: var(--ki); }
.thema-knopf svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.thema-knopf .ikon-sonne { display: none; }
.thema-knopf[data-zeige="sonne"] .ikon-sonne { display: block; }
.thema-knopf[data-zeige="sonne"] .ikon-mond { display: none; }
@media (max-width: 40rem) {
  .kopf .huelle { position: relative; }
  .thema-knopf { position: absolute; top: 0.7rem; right: var(--rand); }
}
.bewegung-knopf:hover { color: var(--text); border-color: var(--linie-2); }

.vertrauen { border-block: 1px solid var(--linie); background: var(--glas); }
.vertrauen ul { list-style: none; margin: 0 auto; padding-block: 1.1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem 2rem; }
.vertrauen li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--klein); }
.vertrauen li strong { display: block; color: var(--text); }
.vertrauen li span { color: var(--leise); }
.ikon { width: 1.6rem; height: 1.6rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ikon-ki { color: var(--ki); } .ikon-mensch { color: var(--mensch); } .ikon-sicher { color: var(--gut); }

/* --- Abschnitte, Seitenkopf -------------------------------------------------------------------- */
.abschnitt { padding-block: var(--abschnitt) 0; }
.abschnitt-dicht { padding-top: 0; }
.abschnitt-dicht > .huelle > :first-child { margin-top: 2.5rem; }
.karte-titel { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; }
.abschnitt-kopf { max-width: var(--spalte); }
.abschnitt-kopf .marker { margin-bottom: 1rem; }
.abschnitt-kopf p { margin-top: 1rem; color: var(--fliess); }
.seitenkopf { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.seitenkopf .huelle > p { margin-top: 1.1rem; max-width: var(--spalte); font-size: 1.15rem; color: var(--fliess); }
.seitenkopf h1 { font-size: var(--gross); margin-top: 1rem; }
.seitenkopf-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; }
@media (max-width: 60rem) { .seitenkopf-raster { grid-template-columns: 1fr; } }
.seitenkopf-raster p { margin-top: 1.1rem; font-size: 1.15rem; color: var(--fliess); }
/* Lagebild Sicherheit: dunkle Bühne in beiden Modi */
.lagebild { margin: 0; justify-self: center; width: 100%; max-width: 38rem; border-radius: 20px; border: 1px solid var(--buehne-linie); background: radial-gradient(30rem 22rem at 50% 45%, #0f2340, var(--buehne) 70%); box-shadow: 0 30px 80px rgb(0 0 0 / 0.3); overflow: hidden; }
.lagebild svg { display: block; width: 100%; height: auto; }
.lage-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-top: 1px solid var(--buehne-linie); font-size: var(--winzig); color: #a9b5ca; }
.lage-status { display: inline-flex; align-items: center; gap: 0.5rem; color: #5ee0a0; font-weight: 650; }
.lage-lampe { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #5ee0a0; box-shadow: 0 0 10px #5ee0a0; }
.lage-hinweis { color: #a9b5ca; }
.lagebild .lage-knopf { margin: 0 0 0 auto; color: #cdd6e4; background: rgb(11 20 38 / 0.85); border-color: #1d2b45; }
.lagebild .lage-knopf:hover { color: #fff; border-color: #36486b; }
@media (prefers-reduced-motion: no-preference) {
  .lage-strahl { transform-origin: 300px 225px; animation: lage-drehen 7s linear infinite; }
  .lage-ring-a { transform-origin: 300px 225px; animation: lage-drehen 90s linear infinite; }
  .lage-ring-b { transform-origin: 300px 225px; animation: lage-drehen 55s linear infinite reverse; }
  .lage-ring-c { transform-origin: 300px 225px; animation: lage-drehen 38s linear infinite; }
  .lage-puls { transform-origin: 300px 228px; animation: lage-puls 3.2s ease-out infinite; }
  .lage-anflug { animation: lage-anflug 4.8s cubic-bezier(0.5, 0, 0.9, 0.6) infinite; }
  .lage-abprall { transform-box: fill-box; transform-origin: center; animation: lage-abprall 4.8s ease-out infinite; }
  .lage-blitz { animation: lage-blitz 4.8s ease-out infinite; }
  .lage-lampe { animation: lage-blinken 2.4s ease-in-out infinite; }
}
.lagebild.angehalten *, .lagebild.ausser-sicht * { animation-play-state: paused !important; }
@keyframes lage-drehen { to { transform: rotate(360deg); } }
@keyframes lage-puls { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes lage-anflug { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 62% { transform: translateX(-62px); opacity: 1; } 64%, 100% { transform: translateX(-62px); opacity: 0; } }
@keyframes lage-abprall { 0%, 60% { transform: scale(0.4); opacity: 0; } 64% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes lage-blitz { 0%, 60% { opacity: 0; } 64% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes lage-blinken { 50% { opacity: 0.35; } }
#check-liste .ohne-js, #sim-buehne .ohne-js { padding: 1rem 1.1rem; }

/* --- Säulen KI / Mensch / zusammen -------------------------------------------------------------- */
.saeulen { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.saeule { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; border-top: 3px solid var(--linie); }
.saeule-ki { border-top-color: var(--ki); } .saeule-mensch { border-top-color: var(--mensch); } .saeule-zusammen { border-top-color: var(--gut); }
.saeule h3 { margin-top: 0.9rem; }
.saeule p { margin-top: 0.5rem; color: var(--fliess); }
.saeule ul { margin: 0.8rem 0 0; padding-left: 1.1rem; color: var(--fliess); }

/* --- Karten (Leistungen, Wegweiser) -------------------------------------------------------------- */
.karten { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; scroll-margin-top: 6rem; transition: border-color 0.2s, transform 0.2s; }
.karten-vier { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
a.karte { text-decoration: none; }
.karte:hover { border-color: var(--linie-2); }
a.karte:hover { transform: translateY(-2px); border-color: var(--ki); }
.karte .kopfzeile { display: flex; align-items: center; gap: 0.75rem; }
.karte p { color: var(--fliess); }
.karte ul { margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--fliess); font-size: 1rem; }
.karte li + li { margin-top: 0.3rem; }
.karte .weiter { margin-top: auto; padding-top: 0.6rem; color: var(--ki); font-weight: 650; font-size: var(--klein); }
.terminal { margin: auto 0 0; padding-top: 0.9rem; border-top: 1px dashed var(--linie); font-family: var(--mono); font-size: 0.8rem; line-height: 1.65; white-space: pre-wrap; color: var(--fliess); }
.terminal .o { color: var(--ki); } .terminal .m { color: var(--mensch); } .terminal .l { color: var(--leise); }
.karte-partner { border-color: rgb(255 181 77 / 0.45); background: linear-gradient(160deg, rgb(255 181 77 / 0.09), var(--flaeche) 60%); }

/* --- Leistungsseite: grosse Blöcke mit mitlaufender Übersicht (Vorbild: Agentur-Leistungsseiten) --- */
.leistungen-raster { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.5rem 3.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.leistungs-index { position: sticky; top: 6.5rem; }
.index-titel { font-size: var(--winzig); text-transform: uppercase; letter-spacing: 0.08em; color: var(--leise); margin-bottom: 0.75rem; }
.leistungs-index ol { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--linie); }
.leistungs-index ol a { display: flex; gap: 0.7rem; padding: 0.55rem 0.9rem; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--leise); font-size: var(--klein); line-height: 1.35; transition: color 0.2s, border-color 0.2s; }
.leistungs-index ol a span { font-family: var(--mono); font-size: var(--winzig); padding-top: 0.1em; }
.leistungs-index ol a:hover { color: var(--text); }
.leistungs-index ol a[aria-current="true"] { color: var(--hell); border-left-color: var(--ki); background: linear-gradient(90deg, rgb(63 212 255 / 0.09), transparent); }
.leistungs-index ol a[aria-current="true"] span { color: var(--ki); }
.index-fragen { display: inline-block; margin-top: 1.25rem; font-size: var(--klein); color: var(--ki); text-decoration: none; }
@media (max-width: 60rem) {
  .leistungen-raster { grid-template-columns: minmax(0, 1fr); }
  .leistungs-index { position: static; min-width: 0; }
  .leistungs-index ol { grid-auto-flow: column; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--linie); }
  .leistungs-index ol a { margin: 0 0 -1px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .leistungs-index ol a[aria-current="true"] { border-bottom-color: var(--ki); background: none; }
}

.leistung { --akzent: var(--ki); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem 3rem; align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--linie); scroll-margin-top: 6rem; }
.leistung:first-child { border-top: 0; padding-top: 0; }
.leistung-mensch { --akzent: var(--mensch); }
.leistung-gut { --akzent: var(--gut); }
.leistungen-liste .leistung:nth-child(even) .leistung-bild { order: -1; }
@media (max-width: 75rem) { .leistung { grid-template-columns: 1fr; } .leistungen-liste .leistung:nth-child(even) .leistung-bild { order: 0; } }
.leistung-nr { font-family: var(--mono); font-size: var(--klein); color: var(--akzent); letter-spacing: 0.02em; }
.leistung h2 { margin-top: 0.6rem; font-size: clamp(1.65rem, 1.2rem + 1.3vw, 2.3rem); }
.leistung-versprechen { margin-top: 0.6rem; font-size: 1.15rem; font-weight: 620; color: var(--akzent); }
.leistung-text > p:not([class]) { margin-top: 0.85rem; color: var(--fliess); }
.leistung-h { font-size: var(--winzig); text-transform: uppercase; letter-spacing: 0.08em; color: var(--leise); margin-top: 1.6rem; font-weight: 600; }
.lieferung { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lieferung li { font-size: var(--klein); padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent); background: color-mix(in srgb, var(--akzent) 8%, transparent); color: var(--text); }
.leistung .weiter { display: inline-block; margin-top: 1.6rem; color: var(--akzent); font-weight: 650; text-decoration: none; }
.leistung .weiter:hover { text-decoration: underline; }
.leistung-bild { margin: 0; border-radius: 16px; border: 1px solid var(--buehne-linie); padding: clamp(0.75rem, 2vw, 1.25rem); background: radial-gradient(28rem 20rem at 75% 10%, color-mix(in srgb, var(--akzent) 15%, transparent), transparent 65%), var(--buehne); box-shadow: 0 24px 70px rgb(0 0 0 / 0.3); transition: transform 0.3s, border-color 0.3s; }
.leistung:hover .leistung-bild { border-color: color-mix(in srgb, var(--akzent) 45%, transparent); transform: translateY(-3px); }
.leistung-bild svg { display: block; width: 100%; height: auto; }

.band-partner .innen { background: linear-gradient(120deg, rgb(255 181 77 / 0.14), var(--band-mitte) 55%); border-color: rgb(255 181 77 / 0.45); }
.band-partner h2 { margin-top: 0.9rem; }

.fragen { margin-top: 2rem; max-width: 54rem; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; list-style: none; padding: 1.15rem 3rem 1.15rem 0; font-weight: 650; font-size: 1.08rem; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--ki); transition: transform 0.2s; }
.fragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragen summary:hover { color: var(--hell); }
.fragen details p { padding: 0 3rem 1.25rem 0; color: var(--fliess); max-width: 46rem; }
.fragen a { color: var(--ki); }

/* --- Ablauf ------------------------------------------------------------------------------------ */
.ablauf { list-style: none; counter-reset: schritt; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ablauf li { counter-increment: schritt; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem; }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); display: block; font-family: var(--mono); font-size: var(--klein); color: var(--ki); margin-bottom: 0.6rem; }
.ablauf p { margin-top: 0.4rem; color: var(--fliess); }
.anmeldung .ablauf { margin: 0; padding: 1.25rem; }
.anmeldung .ablauf li { background: var(--grund); }

/* --- Abschlussband ------------------------------------------------------------------------------ */
.band { margin-top: var(--abschnitt); }
.band .innen { border-radius: 16px; padding: clamp(1.75rem, 4vw, 3rem); background: linear-gradient(120deg, rgb(63 212 255 / 0.12), var(--band-mitte) 45%, rgb(255 181 77 / 0.12)); border: 1px solid var(--linie-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; }
@media (max-width: 48rem) { .band .innen { grid-template-columns: 1fr; } }
.band p { margin-top: 0.6rem; color: var(--fliess); max-width: 40rem; }
.band .knopfreihe { margin-top: 0; }

/* --- Fenster, Demo-Bausteine --------------------------------------------------------------------- */
.fenster { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.fenster-titel { margin: 0; padding: 0.7rem 1.1rem; font-size: var(--klein); border-bottom: 1px solid var(--linie); display: flex; gap: 0.6rem; align-items: center; background: var(--flaeche-2); flex-wrap: wrap; }
.fenster-titel .lampe { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ki); box-shadow: 0 0 8px var(--ki); }
.fenster-titel .rechts { margin-left: auto; color: var(--leise); font-family: var(--mono); font-size: var(--winzig); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.abschnitt-kopf + .fenster, .abschnitt-kopf + .stapel { margin-top: 2rem; }
h2.fenster-titel { font-weight: 600; letter-spacing: 0; }
.rechner .kompass-h { margin-top: 0; margin-bottom: 0.5rem; }
.simuliert { font-size: var(--winzig); color: var(--mensch); border: 1px solid rgb(255 181 77 / 0.45); border-radius: 999px; padding: 0.1rem 0.6rem; }

.auswahl { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1rem 1.1rem 0; }
.wahl { font: inherit; font-size: var(--klein); cursor: pointer; color: var(--text); background: transparent; border: 1px solid var(--linie-2); border-radius: 999px; padding: 0.5rem 1rem; }
.wahl:hover { border-color: var(--ki); }
.wahl[aria-pressed="true"] { border-color: var(--ki); background: rgb(63 212 255 / 0.14); color: var(--hell); }

/* Arbeitsplatz-Simulation */
.sim-schritte { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; margin: 1.1rem 1.1rem 0; padding: 0; }
.sim-schritte li { font-size: var(--winzig); color: var(--leise); padding-top: 0.55rem; border-top: 3px solid var(--linie); }
.sim-schritte li.erledigt { color: var(--fliess); border-top-color: var(--ki); }
.sim-schritte li.jetzt { color: var(--hell); border-top-color: var(--mensch); font-weight: 650; }
@media (max-width: 40rem) { .sim-schritte li span { display: none; } }
.sim-buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; padding: 1.1rem; min-height: 21rem; }
@media (max-width: 52rem) { .sim-buehne { grid-template-columns: 1fr; } }
.sim-feld { border: 1px solid var(--linie); border-radius: 10px; background: var(--grund); padding: 1rem 1.1rem; }
.sim-feld h3 { font-size: var(--klein); color: var(--leise); font-weight: 600; letter-spacing: 0; margin-bottom: 0.6rem; }
.sim-mail { font-size: 0.95rem; }
.sim-mail .kopfdaten { font-family: var(--mono); font-size: var(--winzig); color: var(--leise); margin-bottom: 0.6rem; }
.sim-quellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-family: var(--mono); font-size: var(--winzig); }
.sim-quellen li { padding: 0.35rem 0.6rem; border-radius: 6px; border: 1px solid var(--linie); color: var(--leise); }
.sim-quellen li.gelesen { color: var(--ki); border-color: rgb(63 212 255 / 0.5); background: rgb(63 212 255 / 0.07); }
.sim-entwurf { white-space: pre-wrap; font-size: 0.95rem; min-height: 6rem; }
.sim-pruefung { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; font-size: var(--klein); }
.sim-pruefung li::before { content: "○ "; color: var(--leise); }
.sim-pruefung li.ok::before { content: "✓ "; color: var(--gut); }
.sim-ergebnis { margin-top: 0.9rem; padding: 0.8rem 1rem; border-radius: 8px; font-size: var(--klein); }
.sim-ergebnis.frei { background: rgb(94 224 160 / 0.1); border: 1px solid rgb(94 224 160 / 0.45); }
.sim-ergebnis.zurueck { background: rgb(255 181 77 / 0.1); border: 1px solid rgb(255 181 77 / 0.45); }
.sim-steuerung { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding: 0 1.1rem 1.2rem; }
.sim-steuerung .info { color: var(--leise); font-size: var(--klein); margin-left: auto; }

/* Rechner */
.rechner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem; }
@media (max-width: 48rem) { .rechner { grid-template-columns: 1fr; } }
.feld { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.feld label { font-size: var(--klein); font-weight: 600; }
.feld .hilfe { font-size: var(--winzig); color: var(--leise); }
.feld input[type="number"] { font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie-2); border-radius: 8px; padding: 0.55rem 0.7rem; width: 9rem; }
.feld input[type="range"] { width: 100%; accent-color: var(--ki); }
.ergebnis-zahl { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 750; color: var(--ki); line-height: 1; letter-spacing: -0.03em; }
.ergebnis-text { margin-top: 0.6rem; color: var(--fliess); }
.kleindruck { font-size: var(--winzig); color: var(--leise); margin-top: 1rem; max-width: var(--spalte); }

/* Kompass */
.kompass-ergebnis { padding: 0.6rem 1.1rem 1.4rem; min-height: 8rem; }
.kompass-ergebnis ol, .kompass-ergebnis ul { margin: 0.4rem 0 0; padding-left: 1.3rem; max-width: 46rem; color: var(--fliess); }
.kompass-leistung { font-size: 1.15rem; font-weight: 650; margin-top: 0.6rem; }
.kompass-leistung a { color: var(--ki); }
.kompass-h { font-size: 0.95rem; color: var(--mensch); margin-top: 1.1rem; }
.leer { color: var(--leise); padding-top: 0.6rem; }

/* Vault-Explorer und «Frag das Brain» */
/* Vault: Baum | Graph | Text; mittel: Baum links, Graph über dem Text; Handy: alles untereinander */
.explorer-raster { position: relative; display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(17rem, 23rem) minmax(0, 1fr); grid-template-areas: "baum graph datei"; min-height: 30rem; }
.baum { grid-area: baum; border-right: 1px solid var(--linie); padding: 0.75rem 0.5rem; font-family: var(--mono); font-size: 0.85rem; max-height: 40rem; overflow-y: auto; }
.datei { grid-area: datei; }
.baum ul { list-style: none; margin: 0; padding: 0; }
.baum ul ul { padding-left: 0.9rem; border-left: 1px dashed var(--linie); margin-left: 0.7rem; }
.ordner-knopf { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.5rem; width: 100%; cursor: pointer; padding: 0.4rem 0.5rem; border-radius: 4px; color: var(--text); }
.ordner-knopf:hover { background: rgb(63 212 255 / 0.08); }
.ordner-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.ordner-pfeil { width: 0.45rem; height: 0.45rem; flex: none; border-right: 2px solid var(--ordner-farbe, var(--ki)); border-bottom: 2px solid var(--ordner-farbe, var(--ki)); transform: rotate(-45deg); transition: transform 0.2s; margin: 0 0.1rem 0 0.15rem; }
.ordner-knopf[aria-expanded="true"] .ordner-pfeil { transform: rotate(45deg); }
.ordner-name { font-weight: 600; }
.ordner-zahl { margin-left: auto; font-size: 0.72rem; color: var(--leise); border: 1px solid var(--linie); border-radius: 999px; padding: 0 0.45rem; }
.vault-graph { grid-area: graph; position: relative; display: grid; place-items: center; padding: 0.75rem; border-right: 1px solid var(--linie); background: radial-gradient(circle at 50% 50%, #0f2340, var(--buehne) 72%); }
.graph-svg { display: block; width: 100%; max-width: 24rem; height: auto; }
.graph-drehen { transform-box: view-box; transform-origin: 200px 200px; }
.graph-linie { fill: none; stroke: #cfe8ff; stroke-opacity: 0.1; stroke-width: 0.8; transition: stroke-opacity 0.4s; }
.graph-linie.aktiv { stroke: #ffffff; stroke-opacity: 0.6; stroke-width: 1.2; }
.graph-knoten { cursor: pointer; }
.graph-hof { fill-opacity: 0.14; }
.graph-punkt { stroke: #050a16; stroke-width: 1.5; }
.graph-knoten:hover .graph-punkt { stroke: #ffffff; }
.graph-knoten.gewaehlt .graph-punkt { r: 7.5; stroke: #ffffff; stroke-width: 2; }
.graph-knoten.gewaehlt .graph-hof { r: 16; fill-opacity: 0.32; }
@keyframes graph-puls { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.bewegung-aus) .graph-knoten.gewaehlt .graph-hof { transform-box: fill-box; transform-origin: center; animation: graph-puls 2.2s ease-out infinite; }
}
.vault-strich { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.25s; }
.vault-strich.sichtbar { opacity: 1; }
.strich-linie { fill: none; stroke: var(--strich-farbe, #3fd4ff); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--strich-farbe, #3fd4ff)); }
.strich-punkt { fill: var(--strich-farbe, #3fd4ff); filter: drop-shadow(0 0 6px var(--strich-farbe, #3fd4ff)); }
@media (max-width: 75rem) {
  .explorer-raster { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); grid-template-areas: "baum graph" "baum datei"; }
  .vault-graph { border-right: 0; border-bottom: 1px solid var(--linie); }
  .graph-svg { max-width: 19rem; }
}
@media (max-width: 48rem) {
  .explorer-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "baum" "graph" "datei"; }
  .baum { border-right: 0; border-bottom: 1px solid var(--linie); max-height: 22rem; padding-bottom: 2rem;
          -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }   /* zeigt: Liste geht weiter */
}
.baum-datei { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: 4px; color: var(--text); overflow-wrap: anywhere; }
.baum-datei:hover { background: rgb(63 212 255 / 0.08); }
.baum-datei:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.baum-datei::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ordner-farbe, var(--ki)); margin-right: 0.5rem; vertical-align: 0.08em; box-shadow: 0 0 6px var(--ordner-farbe, var(--ki)); }
.baum-datei[aria-current="true"] { background: rgb(255 181 77 / 0.13); color: var(--hell); box-shadow: inset 2px 0 0 var(--mensch); }
.mit-js .ohne-js { display: none; }
.datei { padding: 1.25rem 1.5rem 1.5rem; font-size: 1rem; outline: none; }
.datei .datei-h1 { font-size: 1.35rem; margin-bottom: 0.75rem; }
.datei h4 { font-size: 0.95rem; margin: 1.25rem 0 0.35rem; color: var(--ki); letter-spacing: 0; }
.datei p, .datei ul, .datei ol { margin: 0.4rem 0 0; }
.datei ul, .datei ol { padding-left: 1.25rem; }
.verweis { all: unset; cursor: pointer; color: var(--mensch); border-bottom: 1px dashed var(--mensch); }
.verweis:hover { color: var(--hell); }
.verweis:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.chat-verlauf { padding: 1rem 1.1rem 1.25rem; min-height: 9rem; }
.chat-verlauf p { margin-top: 0.6rem; max-width: 46rem; }
.chat-frage { font-weight: 650; }
.chat-frage::before { content: "Sie: "; color: var(--leise); font-weight: 400; }
.chat-antwort::before { content: "Brain: "; color: var(--ki); font-weight: 700; }
.chat-quellen { font-size: var(--klein); color: var(--leise); }
.stapel > * + * { margin-top: 1.25rem; }

/* Sicherheit */
.schutz { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.schutz article { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; }
.schutz h3 { margin-top: 0.9rem; }
.schutz p { margin-top: 0.5rem; color: var(--fliess); }
.check-frage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 1rem; align-items: center; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--linie); }
.check-frage:last-of-type { border-bottom: 0; }
.check-frage .wahlen { display: flex; gap: 0.4rem; }
@media (max-width: 40rem) { .check-frage { grid-template-columns: 1fr; } }
.check-ergebnis { padding: 1.1rem; border-top: 1px solid var(--linie); background: var(--flaeche-2); }
.check-balken { height: 0.6rem; border-radius: 999px; background: var(--linie); overflow: hidden; margin-top: 0.6rem; }
.check-balken span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gefahr), var(--mensch), var(--gut)); transition: width 0.4s; }
.check-tipps { margin: 0.8rem 0 0; padding-left: 1.2rem; color: var(--fliess); }

/* Rechtsseiten, Kontakt */
.recht { max-width: var(--spalte); padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--abschnitt); }
.recht h1 { font-size: var(--gross); }
.recht h2 { font-size: 1.25rem; margin-top: 2.25rem; }
.recht p, .recht ul { margin-top: 0.8rem; }
.recht .stand { font-size: var(--klein); color: var(--leise); margin-top: 2.5rem; }
.mail-link { color: var(--ki); font-weight: 650; overflow-wrap: anywhere; }
.mail-gross { font-size: 1.15rem; font-weight: 650; }
.kontaktfelder { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* Fuss */
.fuss { margin-top: var(--abschnitt); border-top: 1px solid var(--linie); background: var(--glas); font-size: var(--klein); }
.fuss .huelle { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 1.5rem 2rem; padding-block: 2.5rem; }
@media (max-width: 48rem) { .fuss .huelle { grid-template-columns: 1fr; } }
.fuss h2 { font-size: var(--klein); color: var(--leise); font-weight: 600; letter-spacing: 0; margin-bottom: 0.6rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.fuss a { color: var(--fliess); text-decoration: none; }
.fuss a:hover { color: var(--hell); text-decoration: underline; }
.fuss p { color: var(--leise); }
.fuss .fuss-text { margin-top: 0.8rem; max-width: 24rem; }
.fuss .unten { border-top: 1px solid var(--linie); }
.fuss .unten .huelle { display: block; padding-block: 1rem; color: var(--leise); font-size: var(--winzig); }
.fuss-knapp { margin-top: 0; }
.fuss-knapp .unten { border-top: 0; }
.fuss-knapp a[aria-current="page"] { color: var(--text); }
.recht .marker + h1 { margin-top: 1rem; }

/* --- Bewegung (Rico 02.11.2026, Variante A: nativ, ohne Bibliothek) -------------------------------
   Nur ohne «weniger Bewegung» und solange der Besucher sie nicht angehalten hat (.bewegung-aus).
   Animiert werden nur opacity, translate, scale und transform (laufen ohne Hauptthread). */
.hintergrund { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Text direkt auf dem Netz: weicher Schatten in Hintergrundfarbe hält ihn lesbar (nicht bei Verlaufsschrift) */
:is(.hero .lead, .seitenkopf .huelle > p, .seitenkopf-raster p, .abschnitt-kopf p, .kleindruck, .leistung-text > p, .leistung-h, .fuss p, .hero h1, .seitenkopf h1, .abschnitt-kopf h2, .leistung h2) { text-shadow: 0 0 12px var(--grund), 0 0 3px var(--grund); }
.verlauf { text-shadow: none; }
/* Weicher Lichthof hinter Textblöcken auf dem Netz: Netz rundherum sichtbar, hinter dem Text ruhig */
/* Nur am Behälter des Textblocks, nie an einzelnen Absätzen: Animierte Geschwister bilden eigene Zeichenebenen,
   dann malte der Lichthof des Absatzes über den Titel darüber (Rico 02.11.: Titel abgedunkelt bzw. hell überbelichtet). */
:is(.hero .huelle > :first-child, .seitenkopf .huelle:not(.seitenkopf-raster), .seitenkopf-raster > :first-child, .abschnitt-kopf, .leistung-text) { position: relative; }
:is(.hero .huelle > :first-child, .seitenkopf .huelle:not(.seitenkopf-raster), .seitenkopf-raster > :first-child, .abschnitt-kopf, .leistung-text)::before {
  /* Kasten grösser als der Text, Verlauf läuft innerhalb ganz aus (sonst sichtbare Kanten, Vorschau 02.11.) */
  content: ""; position: absolute; inset: -3rem -9rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--grund) 88%, transparent) 62%, transparent 100%);
}
main { overflow-x: clip; }   /* der grosse Lichthof darf nicht seitlich überstehen; clip bricht position: sticky nicht */
.bewegung-schalter { font: inherit; font-size: var(--winzig); color: var(--leise); background: none; border: 0; padding: 0; margin-left: 0.4rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.bewegung-schalter:hover { color: var(--text); }
.karte, .saeule, .schutz article, .ablauf li { position: relative; }
.karte::before, .saeule::before, .schutz article::before, .ablauf li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(15rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--ki) 11%, transparent), transparent 70%); opacity: 0; transition: opacity 0.3s; }
.karte:hover::before, .saeule:hover::before, .schutz article:hover::before, .ablauf li:hover::after { opacity: 1; }
@keyframes auftauchen { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes einblenden { from { opacity: 0; translate: 0 32px; scale: 0.97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes tiefe { to { translate: 0 -48px; scale: 0.93; opacity: 0.55; } }
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.bewegung-aus) .hero .marker,
  :root:not(.bewegung-aus) .hero h1,
  :root:not(.bewegung-aus) .hero .lead,
  :root:not(.bewegung-aus) .hero .knopfreihe,
  :root:not(.bewegung-aus) .seitenkopf .huelle > * { animation: auftauchen 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  :root:not(.bewegung-aus) .hero h1, :root:not(.bewegung-aus) .seitenkopf .huelle > :nth-child(2) { animation-delay: 0.12s; }
  :root:not(.bewegung-aus) .hero .lead, :root:not(.bewegung-aus) .seitenkopf .huelle > :nth-child(3) { animation-delay: 0.26s; }
  :root:not(.bewegung-aus) .hero .knopfreihe, :root:not(.bewegung-aus) .seitenkopf .huelle > :nth-child(4) { animation-delay: 0.4s; }
  :root:not(.bewegung-aus) .hero-bild { animation: auftauchen 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@supports (animation-timeline: view()) and (animation-range: entry 0% cover 25%) {
  @media (prefers-reduced-motion: no-preference) {
    :root:not(.bewegung-aus) :is(.abschnitt-kopf, .saeule, .karte, .ablauf li, .leistung, .schutz article, .fenster, .band .innen, .fragen details, .vertrauen li, .kontaktfelder > *) {
      animation: einblenden linear both; animation-timeline: view(); animation-range: entry 0% cover 24%;
    }
    :root:not(.bewegung-aus) :is(.saeulen, .karten, .ablauf, .schutz, .kontaktfelder, .vertrauen ul) > :nth-child(2) { animation-range: entry 6% cover 28%; }
    :root:not(.bewegung-aus) :is(.saeulen, .karten, .ablauf, .schutz, .kontaktfelder, .vertrauen ul) > :nth-child(3) { animation-range: entry 12% cover 32%; }
    :root:not(.bewegung-aus) :is(.saeulen, .karten, .ablauf, .schutz, .kontaktfelder, .vertrauen ul) > :nth-child(4) { animation-range: entry 18% cover 36%; }
    :root:not(.bewegung-aus) .hero-bild { animation: auftauchen 1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both, tiefe linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:not(.bewegung-aus) .kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--ki), var(--mensch)); transform-origin: 0 50%; animation: fortschritt linear both; animation-timeline: scroll(root block); }
  }
}
.bewegung-aus .lagebild * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }