:root { --mint: #53c1aa; --mint-hell: #e3f6f1; --tuerkis: #2fb5c9; --blau: #3d6bff; --flieder: #a78bff; --tinte: #0b1d2b; --tinte-2: #13293a;
  --grau: #56677a; --linie: #e6ebf0; --papier: #fff; --flaeche: #f6f9fb;
  /* Funktionsfarben (18.10., Pascal: rot – gelb – grün für Zustände und Prioritäten, auch für weitere Grafiken):
     je ein kräftiger Ton für Punkt/Schrift und eine helle Fläche; Grün ist das MINT-Grün, Rot und Gelb sind darauf abgestimmt */
  --rot: #d93a3f; --rot-hell: #fdeaea; --gelb: #c98a04; --gelb-hell: #fdf3d6; --gruen: #1c8f78; --gruen-hell: #e3f6f1;
  --font: "Poppins", system-ui, sans-serif;   /* Poppins seit 18.10. (Pascal), Plex Mono bleibt für Zahlen */
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --verlauf: linear-gradient(100deg, var(--mint) 0%, #45c9b0 38%, var(--tuerkis) 72%, #5aa2f5 100%); }   /* überwiegend Mint, Blau nur ganz am Ende (17.10., Pascal) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1rem/1.6 var(--font); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.s-huelle { width: min(100% - 3rem, 72rem); margin-inline: auto; }

/* Rasterlinien und Haarlinien zwischen den Abschnitten entfernt (17.10., Pascal) */
body { position: relative; }
main, .s-kopf, .s-fuss { position: relative; z-index: 1; }

/* Typografie */
.s-zweiton { font: 300 clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem)/1.18 var(--font); letter-spacing: -.02em; max-width: 52rem; text-wrap: pretty; }
.s-zweiton .s-weiter { color: var(--grau); }
/* Einstieg (18.10., Pascal: «Refresh … gross, Rest kleiner»): nur der Leitsatz als grosser Titel, die Erklärung als ruhiger Einleitungstext */
.s-riesig { font: 300 clamp(3rem, 1.5rem + 5.4vw, 6.6rem)/1 var(--font); letter-spacing: -.025em; max-width: 12ch; text-wrap: balance; }
.s-einstieg-lead { max-width: 34rem; margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); font: 400 clamp(1.1rem, 1rem + .45vw, 1.375rem)/1.5 var(--font); color: var(--grau); text-wrap: pretty; }

/* Knöpfe: klein, leicht gerundet, Pfeil gleitet beim Überfahren */
.s-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.s-knopf { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.1rem; border-radius: 0.5rem; font: 500 .9375rem/1 var(--font); transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease; }
.s-knopf-voll { background: var(--tinte); color: #fff; }
.s-knopf-voll:hover { background: var(--tinte-2); }
.s-knopf-mint { margin-top: 2.5rem; background: var(--mint); color: var(--tinte); }
.s-knopf-mint:hover { background: #6fd0bb; }
.s-knopf-hell { background: #fff; box-shadow: 0 0 0 1px var(--linie), 0 2px 6px rgb(11 29 43 / .06); }
.s-knopf-hell:hover { box-shadow: 0 0 0 1px #cfd8e0, 0 4px 12px rgb(11 29 43 / .1); }
.s-knopf-kontur { box-shadow: inset 0 0 0 1px var(--linie); padding: .55rem .95rem; }
/* Hover: Füllung mit dem Mint-Verlauf, weich eingeblendet (18.10., Pascal) */
/* danach (18.10., Pascal): Farbwolken fahren von links ein wie im Menü, Schrift weiss; die Wolken sind hier kräftig, damit Weiss lesbar bleibt */
.s-knopf-kontur { position: relative; isolation: isolate; overflow: hidden; transition: color 300ms ease, box-shadow 300ms ease; }
.s-knopf-kontur::before { content: ""; position: absolute; inset: -30% -60%; z-index: -1; opacity: 0; translate: -35% 0;
  /* gleich wie die Menüeinträge (18.10., Pascal): helle, weiche Wolken in Mint, Flieder und Blau auf Weiss, Schrift Mint-Dunkel */
  background: radial-gradient(35% 88% at 28% 35%, rgb(83 193 170 / .32), transparent 72%),
    radial-gradient(31% 81% at 56% 19%, rgb(167 139 255 / .22), transparent 72%),
    radial-gradient(35% 92% at 75% 85%, rgb(61 107 255 / .18), transparent 72%), #fff;
  background-size: 115% 115%; background-position: 0% 0%;
  transition: translate 650ms cubic-bezier(.2, .8, .2, 1), opacity 350ms ease; }
.s-knopf-kontur:hover { color: #1c8f78; box-shadow: inset 0 0 0 1px transparent; }
.s-knopf-kontur:hover::before { opacity: 1; translate: 0 0; animation: s-wolken-treiben 5s ease-in-out 700ms infinite alternate; }
.s-chev { width: .7rem; height: .7rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.15;   /* feiner (18.10., Pascal: «Pfeile zu dick im Vergleich zum Rest») */
  stroke-linecap: round; stroke-linejoin: round; }
.s-chev path { transform-box: view-box; transition: transform 260ms cubic-bezier(.2, .7, .2, 1), opacity 200ms ease; }
.s-chev .s-schaft { transform-origin: 8px 5px; transform: scaleX(0); opacity: 0; }
.s-chev .s-spitze { transform: translateX(0); }
:is(.s-knopf, .s-mehr, .s-karte, .s-ref, .s-ab-kontakt, .s-ab-insights li a):is(:hover, :focus-visible) .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
:is(.s-knopf, .s-mehr, .s-karte, .s-ref, .s-ab-kontakt, .s-ab-insights li a):is(:hover, :focus-visible) .s-chev .s-spitze { transform: translateX(1.2px); }
.s-knopf:focus-visible, .s-karte:focus-visible, .s-ref:focus-visible, .s-ab-insights li a:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

/* Kopf */
/* Kopf über dem Einstieg durchsichtig (die Wolke läuft ohne Kante darunter durch); erst beim Scrollen eine helle, unscharfe Fläche */
.s-kopf { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / 0); transition: background-color 300ms ease, box-shadow 300ms ease; }
.s-kopf.z-gerollt { background: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgb(11 29 43 / .06); }
/* Fortschritt der Seite: feiner Verlaufsbalken an der Unterkante der Navigation, erscheint mit der Kopf-Fläche */
.s-kopf-fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--verlauf); transform-origin: 0 50%;
  transform: scaleX(var(--fortschritt, 0)); opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.s-kopf.z-gerollt .s-kopf-fortschritt { opacity: 1; }
/* Kopf höher (17.10., Pascal: «Nav oben zu schmal»): 4.25 → 5.5rem, grösseres Logo, mehr Luft zwischen den Menüs */
.s-kopf-zeile { display: flex; align-items: center; gap: 2.5rem; min-height: var(--kopf-h); }
:root { --kopf-h: 5.5rem; }
.s-logo { color: #4ab79e; }   /* Markenfarbe aus dem offiziellen Logo-SVG, wie im Entwurf «neu» (18.10., Pascal) */
/* Logo-Animation wie im Entwurf «neu»: beim Überfahren schiebt sich der Schnitt im «I» einmal durch und läuft immer zu Ende */
.s-logo .logo-schnitt { transform-box: view-box; }
.s-logo.z-schnitt .logo-schnitt { animation: s-logo-schnitt 480ms cubic-bezier(.65, 0, .35, 1); }
@keyframes s-logo-schnitt { to { transform: translateY(-160px); } }
@media (prefers-reduced-motion: reduce) { .s-logo.z-schnitt .logo-schnitt { animation: none; } }
.s-logo svg { width: 7.5rem; height: auto; }
.s-fuss .s-logo svg { width: 6.25rem; }
.s-nav { display: flex; gap: .5rem; margin-left: 1rem; font-size: 1rem; font-weight: 500; }
.s-n-gruppe { position: relative; }
.s-n-knopf { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; padding: .7rem 1rem; border-radius: 0.5rem; font: 500 1rem/1 var(--font); color: var(--tinte); opacity: .85; transition: opacity 200ms ease, background-color 200ms ease; }
.s-n-gruppe:hover .s-n-knopf, .s-n-gruppe.z-offen .s-n-knopf { opacity: 1; background: var(--flaeche); }
.s-n-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.s-n-winkel { width: .6rem; height: .6rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: rotate 260ms cubic-bezier(.2, .7, .2, 1); }
.s-n-gruppe.z-offen .s-n-winkel { rotate: 180deg; }
/* Panel: schwebende Karte mit kleinem Zeiger zum Knopf */
.s-n-panel { position: absolute; top: calc(100% + .7rem); left: -.6rem; translate: 0 6px; z-index: 5; padding: .6rem; border-radius: 1rem; background: #fff;
  box-shadow: 0 0 0 1px rgb(11 29 43 / .06), 0 24px 56px -16px rgb(11 29 43 / .28), 0 4px 12px rgb(11 29 43 / .06);
  opacity: 0; visibility: hidden; transition: opacity 180ms ease, translate 260ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 260ms; }
.s-n-gruppe.z-offen .s-n-panel { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 180ms ease, translate 260ms cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.s-n-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; }                       /* Brücke: Maus fällt zwischen Knopf und Panel nicht heraus */
.s-n-panel::after { content: ""; position: absolute; left: 1.6rem; top: -.35rem; width: .7rem; height: .7rem; rotate: 45deg; background: #fff; box-shadow: -1px -1px 0 rgb(11 29 43 / .06); }
.s-n-zwei { width: min(42rem, 92vw); }
.s-n-zwei ul { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; }
.s-n-eins { width: 15rem; }
.s-n-panel ul { position: relative; z-index: 1; }
.s-n-panel li a { display: flex; align-items: flex-start; gap: .8rem; padding: .75rem .8rem; border-radius: 0.65rem; transition: background-color 180ms ease; }
/* Hover ruhig (17.10., Pascal: «unschön»): keine graue Fläche, kein schwarzes Kästchen – Titel wird mint, das Symbol-Kästchen etwas
   satter, das Symbol bewegt sich leicht (wie im Menü von «neu») */
.s-n-panel li a:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.s-n-ico { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: 0.55rem; background: var(--mint-hell); color: #1c8f78; transition: background-color 180ms ease, color 180ms ease; }
.s-n-ico svg { width: 100%; height: 100%; }
.s-n-text b { transition: color 200ms ease; }
.s-n-panel li a:is(:hover, :focus-visible) .s-n-text b { color: #1c8f78; }
/* Hover (17.10., Pascal): keine Icon-Bewegung; stattdessen wächst die helle Mint-Fläche des Symbols auf die ganze Themenbox.
   Eine Fläche hinter dem Eintrag, per clip-path zuerst genau auf das Symbol-Kästchen zugeschnitten, beim Überfahren ganz geöffnet. */
.s-n-panel li a { position: relative; isolation: isolate; }
/* statt Hellgrün einzelne weiche Farbwolken, die die Box nicht ganz füllen und langsam treiben (18.10., Pascal).
   In Ruhe trägt das Symbol-Kästchen sein Hellmint; beim Überfahren öffnet sich die Wolkenebene vom Symbol aus, das Kästchen wird durchsichtig */
/* Einfahren (18.10., Pascal): die Wolkenebene ist breiter als der Eintrag, liegt in Ruhe nach links verschoben und unsichtbar
   und gleitet beim Überfahren herein; der Eintrag schneidet sie ab */
.s-n-panel li a { overflow: hidden; }
.s-n-panel li a::before { content: ""; position: absolute; inset: -15% -35%; z-index: -1; opacity: 0; translate: -30% 0;
  /* Lagen und Grössen auf die breitere Ebene umgerechnet (Ebene = 170 % × 130 % des Eintrags) */
  background: radial-gradient(35% 88% at 28% 35%, rgb(83 193 170 / .32), transparent 72%),
    radial-gradient(31% 81% at 56% 19%, rgb(167 139 255 / .22), transparent 72%),
    radial-gradient(35% 92% at 75% 85%, rgb(61 107 255 / .18), transparent 72%);
  background-size: 115% 115%; background-position: 0% 0%;
  transition: translate 700ms cubic-bezier(.2, .8, .2, 1), opacity 450ms ease; }
.s-n-panel li a:is(:hover, :focus-visible)::before { opacity: 1; translate: 0 0; animation: s-wolken-treiben 5s ease-in-out 700ms infinite alternate; }
@keyframes s-wolken-treiben { to { background-position: 100% 70%; } }
.s-n-panel .s-n-ico { background: var(--mint-hell); transition: background-color 250ms ease; }
.s-n-panel li a:is(:hover, :focus-visible) .s-n-ico { background: transparent; }
@media (prefers-reduced-motion: reduce) { .s-n-panel li a::before, .s-knopf-kontur::before { animation: none !important; } }
.s-n-panel .me-ico *, .s-n-panel .me-ico { animation: none !important; translate: none !important; rotate: none !important; scale: none !important; }
/* bewegte Branchen-Symbole (gleiche Bewegungen wie im Menü von «neu») */
.me-ico * { transition: translate 480ms cubic-bezier(.34, 1.56, .64, 1), rotate 620ms cubic-bezier(.34, 1.56, .64, 1); }
.mi-banken .mi-rad { transform-origin: 140px 124px; }
a:is(:hover, :focus-visible) .mi-banken .mi-rad { rotate: 90deg; }
a:is(:hover, :focus-visible) .mi-verwaltung .mi-teil { translate: 0 -22px; }
a:is(:hover, :focus-visible) .mi-weitere .mi-f1 { translate: -14px -14px; } a:is(:hover, :focus-visible) .mi-weitere .mi-f2 { translate: 14px -14px; }
a:is(:hover, :focus-visible) .mi-weitere .mi-f3 { translate: -14px 14px; } a:is(:hover, :focus-visible) .mi-weitere .mi-f4 { translate: 14px 14px; }
.mi-versicherungen .mi-teil { transform-origin: 128px 30px; }
a:is(:hover, :focus-visible) .mi-versicherungen .mi-teil { animation: s-wippen 900ms ease-in-out; }
@keyframes s-wippen { 25% { rotate: -14deg; } 55% { rotate: 9deg; } 80% { rotate: -4deg; } }
.mi-energie .mi-teil { transform-origin: 128px 128px; }
a:is(:hover, :focus-visible) .mi-energie .mi-teil { animation: s-blitz 650ms ease-out; }
@keyframes s-blitz { 15% { opacity: .25; scale: 1.18; } 30% { opacity: 1; } 45% { opacity: .4; } 60% { opacity: 1; scale: 1.06; } }
.s-n-text { display: grid; gap: .15rem; }
.s-n-text b { font-weight: 500; font-size: .9375rem; line-height: 1.3; }
.s-n-text span { font-size: .8125rem; line-height: 1.4; color: var(--grau); }
.s-n-eins li a { align-items: center; }
.s-n-fuss { position: relative; z-index: 1; display: flex; align-items: center; gap: .4rem; margin: .4rem .2rem .1rem; padding: .85rem .8rem .5rem; border-top: 1px solid var(--linie); font-size: .875rem; font-weight: 500; color: #1c8f78; }
.s-n-fuss:hover .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
.s-n-fuss:hover .s-chev .s-spitze { transform: translateX(1.2px); }
@media (max-width: 900px) { .s-nav { display: none; } }
/* Burger-Menü (18.10., Pascal): unter 900 px ersetzt es Navigation und Kontakt-Knopf; zwei Striche werden zum Kreuz,
   das Menü füllt den Bildschirm unter dem Kopf und blendet weich ein; Gruppen als ruhige Liste, unten der Kontakt-Knopf */
.s-burger { all: unset; display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-left: auto; margin-right: -.6rem; border-radius: .6rem; cursor: pointer; }
.s-burger span { position: absolute; left: .75rem; right: .75rem; height: 1.5px; border-radius: 2px; background: currentColor; transition: translate 300ms cubic-bezier(.2, .8, .2, 1), rotate 300ms cubic-bezier(.2, .8, .2, 1); }
.s-burger span:nth-child(1) { top: calc(50% - 4px); }
.s-burger span:nth-child(2) { top: calc(50% + 3px); }
.s-kopf.z-menue .s-burger span:nth-child(1) { translate: 0 3.5px; rotate: 45deg; }
.s-kopf.z-menue .s-burger span:nth-child(2) { translate: 0 -3.5px; rotate: -45deg; }
.s-burger:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.s-mobil { display: none; }
@media (max-width: 900px) {
  .s-burger { display: block; }
  .s-kopf-zeile > .s-knopf-kontur { display: none; }
  .s-mobil { display: block; position: fixed; left: 0; right: 0; top: var(--kopf-h); bottom: 0; z-index: 9; overflow-y: auto; overscroll-behavior: contain;
    overflow: hidden; background: var(--papier); visibility: hidden; opacity: 0; translate: 0 -10px; transition: opacity 260ms ease, translate 360ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 360ms; }
  .s-kopf.z-menue .s-mobil { visibility: visible; opacity: 1; translate: none; transition: opacity 260ms ease, translate 360ms cubic-bezier(.2, .8, .2, 1); }
  .s-kopf.z-menue { background: var(--papier); box-shadow: 0 1px 0 var(--linie); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* ohne Unschärfe: sonst hält der Kopf das feste Menü auf seine eigene Höhe fest */
}
.s-mobil-innen { display: flex; flex-direction: column; min-height: 100%; padding-block: .75rem 1.5rem; }
.s-m-gruppe { border-bottom: 1px solid var(--linie); }
.s-m-kopf { all: unset; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.05rem 0; font: 500 1.375rem/1.2 var(--font); letter-spacing: -.01em; color: var(--tinte); cursor: pointer; }
.s-m-kopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: .3rem; }
.s-m-winkel { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: rotate 300ms cubic-bezier(.2, .8, .2, 1); }
.s-m-kopf[aria-expanded="true"] .s-m-winkel { rotate: 180deg; }
.s-m-inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms cubic-bezier(.2, .8, .2, 1); }
.s-m-inhalt > div { overflow: hidden; }
.s-m-kopf[aria-expanded="true"] + .s-m-inhalt { grid-template-rows: 1fr; }
.s-m-inhalt ul { padding-bottom: .9rem; }
.s-m-gruppe ul { margin: 0; padding: 0; list-style: none; }
.s-m-gruppe li a { display: flex; align-items: center; gap: .7rem; padding: .42rem 0; font: 500 1rem/1.3 var(--font); color: var(--tinte); }
.s-m-ico { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; padding: .38rem; border-radius: .55rem; background: var(--mint-hell); color: #1c8f78; corner-shape: superellipse(1.1); }
.s-m-ico svg { width: 100%; height: 100%; }
.s-m-gruppe li a.s-m-alle { gap: .4rem; font-size: .9375rem; color: #1c8f78; }
.s-m-kontakt { justify-content: center; margin-top: auto; padding-block: .95rem; font-size: 1rem; }
.s-kopf.z-menue .s-m-gruppe, .s-kopf.z-menue .s-m-kontakt { animation: s-m-rein 420ms cubic-bezier(.2, .8, .2, 1) both; }
.s-kopf.z-menue .s-m-gruppe:nth-child(2) { animation-delay: 50ms; }
.s-kopf.z-menue .s-m-gruppe:nth-child(3) { animation-delay: 100ms; }
.s-kopf.z-menue .s-m-kontakt { animation-delay: 150ms; }
@keyframes s-m-rein { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .s-mobil, .s-burger span, .s-m-inhalt, .s-m-winkel, .s-kopf.z-menue :is(.s-m-gruppe, .s-m-kontakt) { transition: none; animation: none; } }

/* Einstieg mit schrägem Farbband */
/* Einstieg mit weicher, fliessender Farbwolke (17.10., Pascal: «unschön abgeschnitten»): die Wolke besteht aus drei grossen, stark
   weichgezeichneten Farbflecken, die langsam wandern. Eine Maske lässt sie nach links, oben und unten ganz auslaufen – nirgends
   eine Kante. Der Abschnitt reicht bis unter den durchscheinenden Kopf, damit oben nichts abgeschnitten wirkt. */
.s-einstieg { position: relative; overflow: clip; margin-top: calc(-1 * var(--kopf-h)); padding: calc(var(--kopf-h) + clamp(4rem, 2rem + 7vw, 9rem)) 0 clamp(5rem, 3rem + 6vw, 9rem); }
.s-einstieg-innen { position: relative; z-index: 1; }
.s-band { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 62%), linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 22%, #000 62%), linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-composite: intersect; }
.s-band span { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .85; will-change: translate; animation: s-wandern 16s ease-in-out infinite alternate; }
.s-band span:nth-child(1) { width: 64vw; aspect-ratio: 1; right: -22vw; top: -24%; filter: blur(34px); opacity: 1; background: radial-gradient(closest-side, var(--mint) 35%, transparent); }
.s-band span:nth-child(2) { width: 42vw; aspect-ratio: 1; right: 4vw; top: 20%; background: radial-gradient(closest-side, #35c7c0 20%, transparent); animation-duration: 21s; animation-delay: -6s; }
.s-band span:nth-child(3) { width: 34vw; aspect-ratio: 1; right: -4vw; bottom: -8%; opacity: .45; background: radial-gradient(closest-side, #7fb0ff, transparent); animation-duration: 25s; animation-delay: -11s; }
@keyframes s-wandern { to { translate: -5vw 4%; scale: 1.12; } }
@media (max-width: 900px) { .s-band span { width: 90vw !important; } .s-band { opacity: .6; } }

/* Logo-Reihe zwischen Haarlinien */
/* Laufband: Fenster mit weichen Rändern, das Band ist doppelt so lang wie die Logos und läuft um −50 %; Maus oder Fokus halten es an */
.s-logos-fenster { overflow: hidden; padding-block: 2rem; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.s-logos-band { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: s-laufband 90s linear infinite; }
.s-logos-band li { flex: none; padding-inline: 2.6rem; }
.s-logos-fenster:focus-within .s-logos-band { animation-play-state: paused; }   /* läuft beim Überfahren weiter (18.10., Pascal); hält nur bei Tastaturfokus */
@keyframes s-laufband { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .s-logos-band { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .s-logos-band li[aria-hidden] { display: none; } }
.s-logos img { display: block; max-height: 2.2rem; width: auto; filter: grayscale(1) contrast(1.1); opacity: .7; mix-blend-mode: multiply; transition: filter 300ms ease, opacity 300ms ease; }
.s-logos img:hover { filter: none; opacity: 1; }

/* Abschnitte */
.s-abschnitt { padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }

/* Bento-Raster */
.s-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
@media (max-width: 960px) { .s-bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .s-bento { grid-template-columns: 1fr; } }
.s-karte { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 0.9rem; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie);
  transition: box-shadow 250ms ease, translate 250ms ease; }
.s-karte:hover { box-shadow: 0 0 0 1px #cfd8e0, 0 18px 40px -20px rgb(11 29 43 / .3); }
.s-karte-breit { grid-column: span 2; }
@media (max-width: 640px) { .s-karte-breit { grid-column: auto; } }
.s-karte-text { padding: 1.5rem 1.5rem 0; }
.s-karte h3 { font: 500 1.25rem/1.3 var(--font); letter-spacing: -.01em; }
.s-karte p { margin-top: .4rem; color: var(--grau); font-size: .9375rem; max-width: 34rem; }
.s-karte-bild { position: relative; display: grid; place-items: center; flex: 1; min-height: 15rem; margin: 1.5rem 1rem 1rem; padding: 1.25rem; border-radius: 0.7rem; }
.s-ecke { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.4rem; background: #fff; box-shadow: 0 0 0 1px var(--linie); }
.s-verlauf-1 { background: radial-gradient(120% 120% at 0% 100%, #c9f0e6 0%, transparent 55%), radial-gradient(120% 120% at 100% 0%, #d9e2ff 0%, transparent 60%), #f3f8fb; }
.s-verlauf-2 { background: radial-gradient(130% 130% at 100% 100%, #e3dbff 0%, transparent 60%), radial-gradient(100% 100% at 0% 0%, #d4f3ec 0%, transparent 60%), #f6f7fd; }
.s-verlauf-3 { background: radial-gradient(130% 130% at 0% 0%, #d6e6ff 0%, transparent 60%), radial-gradient(100% 100% at 100% 100%, #cdf1e8 0%, transparent 60%), #f4f8fc; }
.s-verlauf-4 { background: conic-gradient(from 200deg at 50% 50%, #d2f2ea, #d8e3ff, #e6dcff, #d2f2ea); }
.s-verlauf-5 { background: radial-gradient(120% 120% at 100% 0%, #ffe0ec 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, #d2f2ea 0%, transparent 60%), #f8f7fa; }

/* Produkt-Ansichten */
/* Prozessmodell (überarbeitet 17.10.): feine durchgehende Flusslinien, weiche Aufgaben-Karten, ein Lichtpunkt als Probelauf */
.s-bpmn { width: 100%; max-width: 36rem; overflow: visible; }
.s-bpmn text { font: 500 10.5px var(--font); fill: var(--tinte); text-anchor: middle; }
.s-bpmn .s-bahn { fill: rgb(255 255 255 / .55); stroke: rgb(11 29 43 / .06); }
.s-bpmn .s-start { fill: #fff; stroke: var(--mint); stroke-width: 2.5; }
.s-bpmn .s-ende { fill: #fff; stroke: var(--tinte); stroke-width: 3.5; }
.s-bpmn .s-task rect { fill: #fff; stroke: rgb(11 29 43 / .1); stroke-width: 1; filter: drop-shadow(0 4px 8px rgb(11 29 43 / .08)); transition: fill 300ms ease, stroke 300ms ease; }
.s-bpmn .s-task text { transition: fill 300ms ease; }
.s-bpmn .s-task.z-an rect { fill: var(--mint-hell); stroke: var(--mint); stroke-width: 1.6; }
.s-bpmn .s-gw { fill: #fff; stroke: var(--tinte); stroke-width: 1.3; stroke-opacity: .5; }
.s-bpmn .s-gw-x { stroke: var(--tinte); stroke-width: 1.4; stroke-linecap: round; opacity: .6; }
.s-bpmn .s-fluss { fill: none; stroke: rgb(11 29 43 / .4); stroke-width: 1.2; }
.s-bpmn .s-fluss-zurueck { stroke-dasharray: 3 3; }
.s-bpmn .s-token { fill: var(--mint); filter: drop-shadow(0 0 5px rgb(83 193 170 / .9)); }
/* grösser und klarer (18.10., Pascal: «klare Pfeile, nicht zu klein»): gefüllte Pfeilspitzen, kräftigere Linien, grössere Schrift;
   beim Überfahren wählt der Zeiger eine Aufgabe: der Punkt gleitet hin, der Weg bis dorthin färbt sich Mint, vorherige Aufgaben sind abgehakt */
.s-bpmn text { font-size: 12px; }
.s-bpmn .s-fluss { stroke: rgb(11 29 43 / .55); stroke-width: 1.6; transition: stroke 250ms ease; }
.s-bpmn .s-pf { fill: rgb(11 29 43 / .6); stroke: none; }
.s-bpmn .s-pf-an { fill: var(--mint); stroke: none; }
.s-bpmn .s-fluss.z-weg { stroke: var(--mint); }
.s-bpmn .s-task { cursor: pointer; }
/* Prozessmodell als UI-Karte (18.10.): flache Aufgaben mit feiner Kontur wie die Zeilen der anderen Karten, aktive Aufgabe hellmint,
   erledigte mit Haken (ploppt wie im Projektplan), die Rückfrage-Schleife läuft als Ameisenlinie, wenn der Punkt sie nimmt;
   der Zeiger hebt die Aufgabe darunter hervor und hält den Probelauf an */
.s-ui.s-ui-bpmn { max-width: 36rem; }
.s-ui-neben { font-weight: 400; color: var(--grau); }
.s-ui-bpmn-rumpf { padding: .6rem .9rem .5rem; }
.s-bpmn .s-task rect { fill: #fff; stroke: rgb(11 29 43 / .12); stroke-width: 1; filter: none; transition: fill 300ms ease, stroke 300ms ease; }
.s-bpmn .s-task.z-an rect, .s-bpmn .s-task.z-zeige rect { fill: var(--mint-hell); stroke: var(--mint); stroke-width: 1.2; }
.s-bpmn .s-task-haken { opacity: 0; scale: .4; }
.s-bpmn .s-task-haken circle { fill: var(--mint-hell); stroke: #fff; stroke-width: 2; }
.s-bpmn .s-task-haken path { fill: none; stroke: var(--gruen); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-bpmn .s-task.z-fertig .s-task-haken { opacity: 1; scale: 1; transition: opacity 200ms ease, scale 420ms cubic-bezier(.3, 1.6, .5, 1); }
/* Rollen erst beim Überfahren (18.10., Pascal: «weitere Infos erst bei Hover, z. B. Fachbereich, Service»): dunkles Etikett unter der Aufgabe */
.s-bpmn .s-rolle { opacity: 0; translate: 0 -5px; transition: opacity 200ms ease, translate 260ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.s-bpmn .s-rolle.z-zeige { opacity: 1; translate: none; }
.s-bpmn .s-rolle rect { fill: var(--tinte); }
.s-bpmn .s-rolle text { font: 500 10px var(--font); fill: #fff; }
.s-bpmn .s-rueck { font: 400 10px var(--font); fill: var(--grau); opacity: 0; transition: opacity 250ms ease; }
.s-bpmn.z-schleife .s-rueck { opacity: 1; }
.s-bpmn .s-ende { stroke-width: 2.5; }
.s-bpmn .s-fluss-zurueck { transition: stroke 300ms ease; }
.s-bpmn.z-schleife .s-fluss-zurueck { stroke: var(--mint); animation: s-ameisen .6s linear infinite; }
@keyframes s-ameisen { to { stroke-dashoffset: -6; } }
@media (prefers-reduced-motion: reduce) { .s-bpmn.z-schleife .s-fluss-zurueck { animation: none; } }
.s-ui { width: 100%; max-width: 20rem; border-radius: 0.6rem; background: #fff; box-shadow: 0 0 0 1px rgb(11 29 43 / .06), 0 14px 30px -12px rgb(11 29 43 / .25); font-size: .8125rem; }
.s-ui-kopf { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--linie); font-weight: 600; }
/* Anforderungen: Liste mit nachlaufendem Vorschaubild (Muster «Liste – Raffiniert») */
.s-ui-vs { position: relative; max-width: 22rem; padding: .7rem .5rem .55rem; }
.s-vs-kopf { display: flex; justify-content: space-between; padding: 0 .7rem .5rem; font-size: .75rem; color: var(--grau); }
.s-ui-vs ul { margin: 0; padding: 0; }
.s-ui-vs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .62rem .7rem; position: relative;
  border-radius: .55rem; }
/* gerade Trennlinie (18.10., Pascal): eigener Strich statt border-top, sonst biegt die Zeilenrundung die Linie an den Enden */
.s-ui-vs li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linie); transition: opacity 140ms ease; }
/* aktive Zeile ohne Fläche (18.10., Pascal: Mint, weiss und grau passten nicht – «mach mal ohne»); es zeigt sie die Vorschau-Pille */
.s-vs-name { font-size: .8125rem; font-weight: 500; line-height: 1.3; }
.s-vs-prio { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem .28rem .45rem; border-radius: 99px; font: 500 .6875rem/1 var(--font); }
.s-vs-prio i { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
/* Funktionsfarben als Bausteine: Text/Punkt kräftig, Fläche hell – für Prioritäten, Zustände und weitere Grafiken */
.s-f-rot { color: var(--rot); background: var(--rot-hell); }
.s-f-gelb { color: var(--gelb); background: var(--gelb-hell); }
.s-f-gruen { color: var(--gruen); background: var(--gruen-hell); }
.s-vs-kachel { position: absolute; left: 0; top: 0; z-index: 3; width: 10rem; height: 2.1rem; border-radius: 99px; overflow: hidden; background: #fff; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px rgb(11 29 43 / .06), 0 10px 22px -10px rgb(11 29 43 / .4); transition: opacity 200ms ease, width 280ms cubic-bezier(.3, .75, .25, 1); will-change: transform; }
.s-vs-kachel.z-zeigt { opacity: 1; }
.s-vs-streifen { transition: transform 280ms cubic-bezier(.3, .75, .25, 1); }
/* Pille passt sich dem Stichwort an (18.10., Pascal: «zum Teil zu breit»): jedes Stichwort so breit wie sein Text, die Pille gleitet auf diese Breite */
.s-vs-bild { box-sizing: border-box; display: flex; align-items: center; gap: .45rem; width: max-content; height: 2.1rem; padding: 0 .85rem; font-size: .75rem; font-weight: 500; white-space: nowrap; }

.s-prio { padding: .15rem .45rem; border-radius: 0.3rem; font: 500 .6875rem/1.3 var(--mono); }
.s-prio-0, .s-prio-1 { background: #e2e9ff; color: #2c4fd6; }
.s-prio-2 { background: #ece6ff; color: #6a4fd6; }
.s-prio-3 { background: #eef2f5; color: var(--grau); }
/* Etappen (Muster «Schritt-für-Schritt-Anzeige – Raffiniert») */
/* Reparatur (17.10.): Spalten gleich breit (flex 1 1 0), Verbinder liegen unter allen Kreisen (kein Stapelkontext je Etappe),
   Glanz nur leicht, Haken als gezeichnetes Zeichen */
.s-st { position: relative; isolation: isolate; display: flex; flex-direction: column; margin: 0; padding: 1rem 1rem .4rem; list-style: none; }
/* jede Zeile ist eine Etappe; der Verbinder läuft senkrecht vom Kreis darüber zum eigenen Kreis */
.s-st li { position: relative; display: flex; align-items: flex-start; gap: .75rem; padding-bottom: .75rem; }
.s-st li:not(:first-child)::before, .s-st li:not(:first-child)::after { content: ""; position: absolute; z-index: 0; left: calc(.825rem - 1.5px); bottom: calc(100% - .825rem); width: 3px; height: 100%; border-radius: 3px; }
.s-st li:not(:first-child)::before { background: var(--linie); }
.s-st li:not(:first-child)::after { background: linear-gradient(var(--mint), var(--tuerkis)); transform: scaleY(0); transform-origin: top; transition: transform 480ms cubic-bezier(.3, .9, .3, 1); }
.s-st li.z-fertig:not(:first-child)::after, .s-st li.z-aktiv:not(:first-child)::after { transform: scaleY(1); }
.s-st li.z-glanz:not(:first-child)::after { animation: s-glanz 800ms ease-out; }
@keyframes s-glanz { 50% { filter: brightness(1.12); } }
/* Flächen statt Konturen (18.10., Pascal: «weniger mit Konturen arbeiten bei den 1234»): offen hellgrau, erledigt mint-hell mit Haken, aktiv Mint mit weichem Schein */
/* Animationen (18.10., Pascal: «fancy und detailliert»):
   – erledigte Kreise ploppen auf, der Haken zeichnet sich
   – die aktive Zahl rollt von unten herein, dazu ein weicher Puls (Lichtbogen weggelassen, 18.10.)
   – die Stichworte werden von links aufgedeckt */
.s-ui-plan { position: relative; }
.s-st-punkt { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #edf1f4;
  font: 500 .75rem/1 var(--mono); color: var(--grau); }
.s-st li:is(.z-fertig, .z-aktiv) .s-st-punkt { transition: background-color 260ms ease, color 260ms ease, scale 360ms cubic-bezier(.3, 1.5, .5, 1); }
.s-st-punkt > * { grid-area: 1 / 1; }
.s-st-haken { width: 1rem; height: 1rem; fill: none; stroke: var(--gruen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 13; stroke-dashoffset: 13; }
/* Übergänge nur beim Erledigen; beim Zurücksetzen verschwinden Haken und Fläche sofort (18.10., Pascal) */
.s-st li.z-fertig .s-st-punkt { background: var(--mint-hell); animation: s-plopp 520ms cubic-bezier(.3, 1.6, .5, 1); }
.s-st li.z-fertig .s-st-haken { stroke-dashoffset: 0; transition: stroke-dashoffset 380ms cubic-bezier(.6, 0, .3, 1) 140ms; }
.s-st li.z-fertig .s-st-zahl { opacity: 0; scale: .4; transition: opacity 200ms ease, scale 200ms ease; }
@keyframes s-plopp { 0% { scale: .7; } 60% { scale: 1.12; } 100% { scale: 1; } }
.s-st li.z-aktiv .s-st-punkt { color: #fff; background: var(--mint); scale: 1.15; }
.s-st li.z-aktiv .s-st-zahl { animation: s-rollen 420ms cubic-bezier(.2, .9, .25, 1.2); }
@keyframes s-rollen { from { opacity: 0; translate: 0 70%; } }
.s-st li.z-aktiv .s-st-punkt::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--mint); animation: s-puls 1.8s ease-out infinite; }
@keyframes s-puls { 0% { opacity: .4; scale: 1; } 100% { opacity: 0; scale: 1.9; } }
/* Maus: die Etappe unter dem Zeiger wird aktiv */

.s-st-text { display: grid; gap: .1rem; min-width: 0; padding-top: .2rem; }
.s-st-name { font-size: .8125rem; line-height: 1.25; font-weight: 500; color: var(--grau); transition: color 260ms ease, font-weight 260ms ease; }
.s-st-sub { font-size: .75rem; line-height: 1.3; color: var(--grau); clip-path: inset(0 100% 0 0); opacity: 0; transition: clip-path 520ms cubic-bezier(.6, 0, .2, 1) 120ms, opacity 200ms ease; }
.s-st li.z-aktiv .s-st-name { font-weight: 600; }
.s-st li.z-aktiv .s-st-sub { clip-path: inset(0); opacity: 1; }
.s-st li:is(.z-aktiv, .z-fertig) .s-st-name { color: var(--tinte); }
.s-ui-plan { max-width: 14.5rem; }   /* schmal, passend zum längsten Eintrag (18.10., Pascal: «rechts zu viel Weissraum») */

/* Masse in em: die Grösse folgt der Schrift von .s-rad-gruppe (Kachel 1rem, dunkler Abschnitt grösser)
   BPM-Zyklus als Titel-Rad (Muster «Karussell – Raffiniert: Titel-Rad steuert das Bild»): Namen auf Speichen um einen Mittelpunkt
   links in der Karte (--cx), Radius --r; Winkel, Grösse und Blässe setzt das Skript je nach Abstand zur Mitte */
/* Masse: Symbol 3.4em breit, danach .45em Luft, dann die Pille mit dem Namen (ohne Pfeil, 18.10.). Symbol .35em vom Rand (sonst «klebt es links»). Der Drehpunkt liegt links ausserhalb
   (--cx negativ, grosser Radius): so stehen die Namen weiter auseinander und die Pille überdeckt die Nachbarn nicht (gemessen, damit sich nichts überdeckt) */
.s-rad-gruppe { font-size: 1rem; display: grid; justify-items: center; gap: .4em; width: calc(100% + 1em); max-width: 23em; }
.s-rad { position: relative; width: 100%; height: 13.5em; --bw: 3.4em; --bh: 3.4em; --cx: -2.5em; --r: 7.6em; }
.s-rad-bild { position: absolute; left: .35em; top: calc(50% - var(--bh) / 2); width: var(--bw); height: var(--bh); z-index: 2; }   /* ohne Karte dahinter (18.10., Pascal) */
/* Wechsel als echte Überblendung: alte und neue Fläche gleichzeitig, das Symbol taucht leicht vergrössert auf */
.s-rad-flaeche { position: absolute; inset: 0; opacity: 0; transition: opacity 320ms ease; }
.s-rad-flaeche.z-da { opacity: 1; }
.s-rad-ico { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%;
  background: radial-gradient(90% 90% at 30% 100%, color-mix(in srgb, var(--ton) 70%, #fff), #fff 70%);
  box-shadow: 0 0 0 1px rgb(11 29 43 / .05), 0 10px 20px -10px rgb(11 29 43 / .35); scale: .85; transition: scale 420ms cubic-bezier(.2, .8, .2, 1); }
.s-rad-flaeche.z-da .s-rad-ico { scale: 1; }
.s-rad-ico { background: none; box-shadow: none; }   /* nur das Symbol, ohne Kreis dahinter (18.10., Pascal: «versuch hier mal kein Hintergrund») */
.s-rad-ico { color: var(--tinte); }
.s-rad-ico svg { width: 1.7em; height: 1.7em; }
.s-rad-ico .mint-ico :is(path, rect, circle, polygon, polyline) { stroke: currentColor; stroke-width: var(--ico-strich, 0); stroke-linejoin: round; }
.s-rad-wahl { position: absolute; left: var(--bw); right: 0; top: 0; bottom: 0; user-select: none; -webkit-user-select: none; }
/* ganze Karte klickbar (Zyklus, Business Analyse; 18.10., Pascal): das Skript leitet Klicks auf den Titel-Link weiter.
   Kein Überzug über der Karte, damit die Mausbewegungen in der Grafik weiter wirken */

.s-karte-ganz, .s-karte-ganz * { cursor: pointer; }   /* Klickhand überall auf der Karte (18.10., Pascal) */
/* Auswahlfenster: weisse Pille hinter dem Namen in der Mitte, Breite folgt dem Namen */
.s-rad-fenster { position: absolute; left: calc(var(--cx) - var(--bw) + var(--r) - .9em); top: calc(50% - 1.1em); width: var(--fb, 9em); height: 2.2em; border-radius: 2em;
  background: #fff; box-shadow: 0 0 0 1px rgb(11 29 43 / .06), 0 8px 18px -10px rgb(11 29 43 / .35); transition: width 420ms cubic-bezier(.2, .8, .2, 1); }
.s-rad-wahl:focus-visible .s-rad-fenster { outline: 2px solid var(--tinte); outline-offset: 2px; }
.s-rad-maske { position: absolute; inset: 0; overflow: clip;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
.s-rad-titel { position: absolute; left: calc(var(--cx) - var(--bw)); top: calc(50% - 1em); height: 2em; line-height: 2em; padding-right: .5em; white-space: nowrap;
  font-size: .8125em; font-weight: 600; letter-spacing: -.01em; color: var(--tinte);
  transform-origin: 0 50%; transform: rotate(calc(var(--w, 0) * 1deg)) translateX(var(--r)) scale(var(--s, 1)); }
/* Steuerung rechts am Rad: Pfeil auf, ein Statuspunkt je Phase, Pfeil ab (senkrecht, wie das Rad dreht) */
.s-rad-knopf, .s-rad-punkt { font: inherit; }   /* Knöpfe haben sonst eine eigene Schriftgrösse, die em-Masse wären zu klein */
.s-rad-pfeile { position: absolute; right: 0; top: 50%; z-index: 4; display: grid; justify-items: center; gap: .6em; translate: 0 -50%; }
.s-rad-knopf { display: grid; place-items: center; width: 1.75em; height: 1.75em; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .75); cursor: pointer;
  box-shadow: 0 0 0 1px rgb(11 29 43 / .06), 0 4px 10px -6px rgb(11 29 43 / .3); transition: background-color 160ms ease, scale 160ms ease; }
.s-rad-knopf:hover { background: #fff; scale: 1.08; }
.s-rad-knopf svg { width: .8em; height: .8em; fill: none; stroke: var(--tinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-rad-punkte { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.s-rad-punkt { width: .45em; height: .45em; padding: 0; border: 0; border-radius: 99px; background: rgb(11 29 43 / .18); cursor: pointer;
  transition: height 320ms cubic-bezier(.2, .8, .2, 1), background-color 320ms ease; }
.s-rad-punkt:hover { background: rgb(11 29 43 / .35); }
.s-rad-punkt.z-an { height: 1.2em; background: var(--mint); }
.s-rad-knopf:focus-visible, .s-rad-punkt:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .s-st-haken, .s-st-sub, .s-st-punkt { transition: none; } .s-st li .s-st-punkt, .s-st li .s-st-zahl, .s-st li .s-st-punkt::after { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .s-rad-flaeche, .s-rad-ico, .s-rad-fenster, .s-rad-punkt { transition: none; } }
@keyframes s-einrollen { from { opacity: 0; translate: 0 8px; } }
/* Karteikasten (Muster «Karteikasten – Raffiniert» aus Allgemeines): Masse in Einheiten --e, passend zur Kartenbreite skaliert */
.s-kk { container-type: inline-size; width: 100%; display: grid; justify-items: center; }
.s-kk-feld { --e: min(1px, calc(100cqw / 330)); --streifen: calc(40 * var(--e)); --b: calc(90 * var(--e)); --h: calc(150 * var(--e));
  position: relative; width: calc(330 * var(--e)); height: calc(212 * var(--e)); touch-action: pan-y; user-select: none; }
.s-kk-reihe { position: absolute; left: calc(45 * var(--e)); bottom: calc(14 * var(--e)); width: calc(250 * var(--e)); height: var(--h); }
.s-kk-karte { position: absolute; left: calc(var(--i) * var(--streifen)); bottom: 0; width: var(--b); height: var(--h); transform-origin: 50% 100%; will-change: transform; }
/* Karten ruhiger (18.10., Pascal: «zu farbig», dann «Farbwolken statt der typischen KI-Striche»): weiss, die Farbe als weiche Wolke
   unten in der Karte, dazu ein zweiter, schwächerer Ton oben rechts */
.s-kk-blatt { position: absolute; inset: 0; border-radius: calc(14 * var(--e)); color: var(--tinte);
  background: radial-gradient(80% 50% at 110% 0%, color-mix(in srgb, var(--ton) 40%, transparent), transparent 70%) #fff; overflow: hidden;
  box-shadow: -8px 0 14px -10px rgb(11 29 43 / .5), inset 0 0 0 1px rgb(11 29 43 / .08); corner-shape: superellipse(1.1); }
.s-kk-ico { position: absolute; left: calc(8 * var(--e)); top: calc(9 * var(--e)); display: grid; place-items: center; width: calc(26 * var(--e)); height: calc(26 * var(--e));
  border-radius: 50%; background: color-mix(in srgb, var(--ton) 45%, #fff); transition: background-color 180ms ease, color 180ms ease; }
.s-kk-ico svg { width: 62%; height: 62%; }
/* Farbwolke unten links als eigenes Oval um ihren Mittelpunkt (30 % / 105 %) */
.s-kk-blatt::before { content: ""; position: absolute; left: -90%; top: 35%; width: 240%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ton) 85%, transparent), transparent 70%); }
/* aktive Karte: keine Farbänderung, nur die Bewegung (18.10., Pascal: «keine Farbänderung bei Hover, nur Animation») */
.s-kk-ico, .s-kk-name { z-index: 1; }
/* Poppins (18.10.) läuft breiter als Plex: etwas kleiner, 500 statt 600 und höher angesetzt, damit «Versicherungen» ganz auf die Karte passt */
.s-kk-name { position: absolute; left: 0; top: calc(40 * var(--e)); width: var(--streifen); writing-mode: vertical-rl; line-height: var(--streifen); text-align: start;
  font-size: max(9px, calc(12 * var(--e))); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.s-kk-lese { margin-top: .6rem; min-height: 2.8em; max-width: 30ch; text-align: center; font-size: .8125rem; line-height: 1.4; color: var(--grau); text-wrap: balance; }
.s-kk-lese b { margin-right: .35em; color: var(--tinte); font-weight: 600; }
.s-kk-lese { transition: opacity 250ms ease; }
.s-kk-lese.z-leer { opacity: 0; }   /* ohne Auswahl kein Text; der Platz bleibt, damit die Kachel nicht springt */
.s-b-ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 0.45rem; background: var(--mint-hell); color: #1c8f78; }
.s-b-ico svg { width: 1.1rem; height: 1.1rem; }

/* Kennzahlen */
/* mehr Luft zum folgenden Zyklus-Abschnitt (18.10., Pascal) */
.s-zahlen { padding-block: clamp(5rem, 3rem + 6vw, 10rem); }   /* noch mehr Luft oben und unten (18.10., Pascal) */
.s-zahlen-reihe { display: grid; grid-template-columns: repeat(4, 1fr); }
.s-zahlen-reihe > div { padding: 2.5rem 1.5rem 2.75rem; border-left: 1px solid var(--linie); }
.s-zahlen-reihe > div:first-child { border-left: 0; padding-left: 0; }
.s-zahlen b { display: block; font: 300 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--font); letter-spacing: -.03em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-zahlen span { display: block; margin-top: .75rem; color: var(--grau); font-size: .9375rem; max-width: 15rem; }
@media (max-width: 900px) { .s-zahlen-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-zahlen-reihe > div:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .s-zahlen-reihe > div { padding-inline: 1rem 0; } .s-zahlen-reihe > div:nth-child(odd) { padding-left: 0; } }

/* Dunkler Abschnitt mit Strahlen */
.s-dunkel-feld { position: relative; overflow: hidden; background: var(--tinte); color: #fff; padding: clamp(5rem, 3rem + 6vw, 9rem) 0; }
.s-dunkel-feld .s-zweiton .s-weiter { color: #8fa3b3; }
.s-dunkel-feld .s-huelle { position: relative; }
/* Kopf wie bei Stripe: Titel links, Link rechts auf der Grundlinie der letzten Titelzeile (18.10., Pascal: «besser platzieren») */
.s-zk-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; max-width: 68rem; margin-inline: auto; }
.s-zk-kopf .s-mehr { flex: none; margin: 0 0 .45rem; padding: 0; color: var(--mint); }
@media (max-width: 760px) { .s-zk-kopf { flex-direction: column; align-items: flex-start; } }

.s-zkc-ico .mint-ico :is(path, rect, circle, polygon, polyline) { stroke: currentColor; stroke-width: var(--ico-strich, 0); stroke-linejoin: round; }

/* C – über die ganze Breite und dunkel (18.10., Pascal): ein gerades dunkles Band mit den Farbwolken, keine Karte mehr;
   links die Phasen als Liste (die aktive leicht aufgehellt), rechts Name, Vorgehen und Ergebnis */
.s-zkc { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); color: #fff; }
.s-zkc::before { content: ""; position: absolute; inset: 0; z-index: -1;   /* gerade statt schräg (18.10., Pascal) */
  background: radial-gradient(45rem 28rem at 8% 20%, rgb(83 193 170 / .28), transparent 62%), radial-gradient(34rem 24rem at 92% 10%, rgb(167 139 255 / .2), transparent 62%),
    radial-gradient(42rem 26rem at 88% 95%, rgb(61 107 255 / .24), transparent 62%), var(--tinte); }
/* als Box in Inhaltsbreite, nicht bis an den Rand (18.10., Pascal; zuvor Scroll-Animation von der Box zur ganzen Breite) */
.s-zkc::before { --rand: max(1.5rem, (100% - 72rem) / 2); left: var(--rand); right: var(--rand); border-radius: 1.25rem; corner-shape: superellipse(1.1); }   /* Box als echte Rundung statt clip-path, damit auch sie ein Squircle ist */
.s-zkc .s-zkc-karte { padding-inline: clamp(1.5rem, 1rem + 3vw, 3.5rem); }   /* Innenabstand, da die Box jetzt so breit ist wie der Inhalt */
.s-zkc-karte { position: relative; }
.s-zkc .s-zweiton { max-width: 42rem; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); }
.s-zkc .s-zweiton .s-weiter { color: #8fa3b3; }
.s-zkc .s-zk-kopf .s-mehr { color: var(--mint); }
.s-zkc-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.s-zkc-liste { display: grid; gap: .3rem; align-content: start; }
.s-zkc-zeile { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: .75rem .9rem; border: 0; border-radius: .8rem; background: none; text-align: left; cursor: pointer;
  color: #8fa3b3; transition: background-color 250ms ease, color 200ms ease; }
.s-zkc-zeile:hover { background: rgb(255 255 255 / .05); color: #fff; }
/* aktive Zeile: helle Fläche mit feiner Kontur direkt auf der Zeile (kein Gleiten), Name und Symbol grösser, ohne Übergang (18.10., Pascal) */
.s-zkc-zeile.z-an { padding-block: 1.05rem; color: #fff; }
.s-zkc-zeile.z-an .s-zkc-name b { font-size: 1.45rem; }
.s-zkc-zeile.z-an .s-zkc-ico svg { width: 2.15rem; height: 2.15rem; }
/* Übergang (18.10., Pascal): die helle Fläche der neuen Zeile wächst leicht und blendet ein, die alte schrumpft leicht und blendet aus;
   Name und Symbol wachsen weich mit – nichts gleitet von Zeile zu Zeile */
.s-zkc-zeile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
  opacity: 0; scale: .94; transition: opacity 260ms ease, scale 260ms ease; }
.s-zkc-zeile.z-an::before { opacity: 1; scale: 1; transition: opacity 380ms ease, scale 460ms cubic-bezier(.2, .8, .2, 1); }
.s-zkc-zeile { isolation: isolate; transition: background-color 250ms ease, color 250ms ease, padding 320ms cubic-bezier(.2, .8, .2, 1); }
.s-zkc-name b { transition: font-size 320ms cubic-bezier(.2, .8, .2, 1); }
.s-zkc-ico svg { transition: width 320ms cubic-bezier(.2, .8, .2, 1), height 320ms cubic-bezier(.2, .8, .2, 1); }
/* Animationen (18.10., Pascal: «detaillierter»):
   – rechts kommen Titel, Text, Ergebnis und Link nacheinander herein, von unten oder oben je nach Richtung
   – über die Ergebnis-Box zieht einmal ein Lichtstreif */
.s-zkc-liste { position: relative; }
.s-zkc-zeile { position: relative; }

/* ohne Untertitel und ohne Fläche hinter dem Symbol (18.10., Pascal); das aktive Symbol in Mint */
.s-zkc-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; color: currentColor; transition: color 250ms ease; }
.s-zkc-ico svg { width: 1.65rem; height: 1.65rem; }
.s-zkc-zeile.z-an .s-zkc-ico { color: var(--mint); }
.s-zkc-name { display: grid; gap: .15rem; }
/* Schriften wie in den Karten der Seite (18.10., Pascal: «uneinheitlich»): Titel 500, Text .9375rem grau, kleine Labels .8125rem */
.s-zkc-name b { font: 500 1.1rem/1.3 var(--font); }   /* etwas grösser als die Grundschrift (18.10., Pascal) */
.s-zkc-zeile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.s-zkc-panels { display: grid; }
.s-zkc-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 1rem; padding: .4rem 0; }
.s-zkc-panel[hidden] { display: flex; visibility: hidden; opacity: 0; }
.s-zkc-panel.z-an > * { animation: s-zkc-teil 560ms cubic-bezier(.2, .8, .2, 1) both; }
.s-zkc-panel.z-an > :nth-child(2) { animation-delay: 60ms; }
.s-zkc-panel.z-an > :nth-child(3) { animation-delay: 120ms; }
.s-zkc-panel.z-an > :nth-child(4) { animation-delay: 180ms; }
@keyframes s-zkc-teil { from { opacity: 0; translate: 0 var(--von, 16px); } }
.s-zkc-ergebnis { position: relative; overflow: hidden; }
.s-zkc-ergebnis::after { content: ""; position: absolute; inset: 0; pointer-events: none; translate: -110% 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .14) 50%, transparent 70%); }
.s-zkc-panel.z-an .s-zkc-ergebnis::after { animation: s-zkc-glanz 1100ms ease 450ms; }
@keyframes s-zkc-glanz { to { translate: 110% 0; } }
.s-zkc-titel { font: 500 1.375rem/1.3 var(--font); letter-spacing: -.01em; color: #fff; }
.s-zkc-text { font-size: .9375rem; line-height: 1.6; color: #9db0bf; }
.s-zkc-ergebnis { display: flex; gap: .8rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: .9rem; background: rgb(83 193 170 / .14); box-shadow: inset 0 0 0 1px rgb(83 193 170 / .28); corner-shape: superellipse(1.1); }
.s-zkc-ergebnis b { font: 500 .8125rem/1.3 var(--font); color: var(--mint); }
.s-zkc-ergebnis p { margin-top: .25rem; font: 500 .9375rem/1.5 var(--font); color: #fff; }
.s-zkc .s-mehr { margin-top: 0; padding-top: 0; font-size: .9375rem; color: var(--mint); }   /* direkt unter dem Ergebnis statt ganz unten */
.s-zkc .s-zk-kopf .s-mehr { font-size: 1rem; }
/* Link in die obere rechte Ecke der Box (18.10., Pascal) */
.s-zkc .s-zk-kopf { max-width: none; align-items: flex-start; }
.s-zkc .s-zk-kopf .s-mehr { margin: .35rem 0 0; }
@media (max-width: 860px) { .s-zkc-raster { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .s-zkc-panel.z-an, .s-zkc-panel.z-an > *, .s-zkc-panel.z-an .s-zkc-ergebnis::after { animation: none; } .s-zkc-zeile, .s-zkc-zeile::before, .s-zkc-name b, .s-zkc-ico svg { transition: none; } }

/* ===== Fahrt: Kurslinie mit Schiff und drei Stationen (Leitmotiv-Idee, im Stripe-Stil umgesetzt; 18.10., Pascal: «passt gar nicht vom Stil»)
   Statt Strichzeichnung: feine graue Bahn, der gefahrene Teil als leuchtender Mint-Verlauf; Stationen als weisse Knöpfe mit Schatten,
   die aktive mit Verlauf und Schein; das Schiff als gefülltes Zeichen in einem weissen Chip mit Spitze, der über der Station schwebt */
.s-fahrt-lead { max-width: 40rem; margin-top: 1rem; font-size: 1.0625rem; line-height: 1.6; color: var(--grau); }
.s-fahrt-bahn { --oben: 5rem; --marke: 1.45rem; position: relative; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: var(--oben); }
.s-fahrt-linie { position: absolute; left: 0; right: 0; top: calc(var(--oben) + var(--marke) / 2 - 1px); height: 2px; border-radius: 2px; background: var(--linie); }
.s-fahrt-gezogen { position: absolute; left: 0; top: 0; bottom: 0; width: var(--x, 0px); border-radius: 2px; background: var(--verlauf);
  box-shadow: 0 0 12px rgb(83 193 170 / .55); transition: width 1100ms cubic-bezier(.45, .05, .25, 1); }
/* Route (18.10., Pascal: «das Schiff soll so durchfahren per Scroll»): eine geschwungene Linie von den Kacheln herunter, links um den Titel,
   über die drei Stationen und rechts hinaus; das Skript legt sie aus den Positionen fest. Gepunktet die ganze Route, durchgezogen das Kielwasser
   bis zum Schiff; das Schiff fährt mit dem Scrollen, die Station, die es erreicht, wird aktiv */
.s-fahrt { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
/* Wasser (18.10., Pascal, nach «Water Ripple» und «Water Interaction WebGL»): zarte Seekarte unter dem Abschnitt, der Mauszeiger wirft Wellen,
   die die Karte brechen; Texte und Route bleiben scharf darüber */
.s-fahrt-wellen { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.s-fahrt-route { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.s-fahrt-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Hafen am Ende der Route (Ursprung = Liegeplatz, vom Skript in --hx/--hy); liegt unter dem Schiff, über dem Wasser */
.s-fahrt-hafen { position: absolute; left: 0; top: 0; z-index: -1; width: 800px; height: 320px; overflow: visible; pointer-events: none;
  translate: calc(var(--hx, -2000px) - 200px) calc(var(--hy, 0px) - 200px); }   /* unter den Texten: der Lichtstrahl streicht darunter durch */
.s-hafen-kueste { fill: none; stroke: var(--mint); stroke-width: 1.6; }
.s-hafen-kueste2 { fill: none; stroke: rgb(83 193 170 / .35); stroke-width: 1; stroke-dasharray: 2 5; stroke-linecap: round; }   /* Tiefenlinie vor der Küste */
.s-hafen-turm-schatten { fill: rgb(11 29 43 / .18); }
.s-hafen-turm-fuss { stroke: rgb(11 29 43 / .12); }
.s-hafen-galerie { fill: none; stroke: rgb(11 29 43 / .28); stroke-width: 1.2; }
.s-hafen-laterne { stroke: rgb(255 255 255 / .9); stroke-width: 1.5; }
.s-hafen-glut { transform-box: fill-box; transform-origin: center; animation: s-glut 3.5s ease-in-out infinite; }
@keyframes s-glut { 0%, 100% { opacity: .55; scale: .85; } 50% { opacity: 1; scale: 1.1; } }
.s-hafen-strahl { transform-box: fill-box; transform-origin: center; animation: s-strahl 8s linear infinite; }   /* Leuchtturm: Doppelstrahl dreht langsam */
@keyframes s-strahl { to { rotate: 360deg; } }
.s-hafen-schein { transform-box: fill-box; transform-origin: center; animation: s-feuer 2.8s ease-in-out infinite; }
@keyframes s-feuer { 0%, 100% { opacity: .45; scale: .8; } 50% { opacity: 1; scale: 1.15; } }
.s-fahrt-spur { stroke: rgb(83 193 170 / .45); stroke-width: 2; stroke-dasharray: 1 9; }
.s-fahrt-kielwasser { stroke: url(#s-kiel-v); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgb(83 193 170 / .5)); }
.s-fahrt-schiff { position: absolute; left: 0; top: 0; z-index: 3; translate: var(--sx, -200px) var(--sy, 0); rotate: var(--sw, 0deg); transform-origin: 50% 100%; pointer-events: none; will-change: translate; }
.s-fahrt .s-fahrt-linie { display: none; }
.s-fahrt-3d { position: absolute; left: 0; top: 0; width: 300px; height: 300px; pointer-events: none; }   /* Verschiebung setzt das Skript (Wasserlinie auf der Route) */   /* Wasserlinie auf der Route */
.s-fahrt-schiff.z-3d { rotate: none; }
.s-fahrt-schiff.z-3d .s-fahrt-chip { display: none; }
/* 2D-Schiff von oben: Mitte auf der Route, dreht sich mit der Fahrtrichtung (--sw vom Skript, volle Drehung) und schaukelt kaum merklich */
.s-fahrt-schiff { rotate: var(--sw, 0deg); }
.s-fahrt-chip { display: block; width: 7.2rem; translate: -50% -50%; rotate: var(--kipp, 0deg); scale: var(--hub, 1); transition: rotate 500ms ease-out, scale 500ms ease-out; }   /* Wellen der Maus lassen das Schiff schwanken (--kipp, --hub vom Skript) */
.s-fahrt-wiegen { display: block; transform-origin: 50% 50%; animation: s-wiegen 3.4s ease-in-out infinite; }
@keyframes s-wiegen { 0%, 100% { rotate: -.6deg; scale: 1; } 50% { rotate: .6deg; scale: 1.01; } }
/* Krängung (18.10., Pascal: «beim Schaukeln sollte sich der Mast oben mehr bewegen als unten»): von oben gesehen bleibt der Rumpf fast
   stehen, Mastspitze und Segel wandern quer zur Fahrt aus – leise in Ruhe, deutlicher auf den Wellen (--kraeng vom Skript) */
.s-boot-rigg { transform: translateY(calc(var(--kraeng, 0) * 1px)); transition: transform 450ms ease-out; animation: s-kraengen 3.4s ease-in-out infinite; }
@keyframes s-kraengen { 0%, 100% { translate: 0 -1.4px; } 50% { translate: 0 1.4px; } }
.s-fahrt-schiff svg { display: block; width: 100%; height: auto; overflow: visible; }
.s-boot { filter: drop-shadow(0 6px 10px rgb(11 29 43 / .12)); }
.s-boot-rumpf { fill: #fff; stroke: rgb(11 29 43 / .14); stroke-width: 1; }
.s-boot-streifen { fill: none; stroke: var(--mint); stroke-width: 1.2; }
.s-boot-cockpit { fill: #e8eef2; }
.s-boot-kajuete { fill: #f3f6f8; stroke: rgb(11 29 43 / .1); stroke-width: .8; }
.s-boot-tau { fill: none; stroke: rgb(11 29 43 / .28); stroke-width: .6; }
.s-boot-baum { stroke: rgb(11 29 43 / .5); stroke-width: 1.2; stroke-linecap: round; }
.s-boot-segel { stroke: rgb(255 255 255 / .7); stroke-width: .6; stroke-linejoin: round; }
.s-boot-segelschatten { fill: rgb(11 29 43 / .16); }
.s-boot-latte { fill: none; stroke: rgb(255 255 255 / .75); stroke-width: .7; stroke-linecap: round; }
.s-boot-mast { fill: var(--tinte); }
.s-boot-schatten { fill: rgb(11 29 43 / .22); }
.s-fahrt-stationen { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.s-fahrt-station { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; color: var(--grau); }
.s-fahrt-marke { display: grid; place-items: center; width: var(--marke); height: var(--marke); margin-bottom: 1rem; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgb(11 29 43 / .08), 0 8px 18px -10px rgb(11 29 43 / .35); transition: background 350ms ease, box-shadow 350ms ease, scale 350ms cubic-bezier(.3, 1.5, .5, 1); }
/* Bojen statt Wegpunkte (18.10., Pascal: «nimm hier Bojen»): von oben eine runde Boje in Mint mit weissem Korb und dunklem Toppzeichen,
   weicher Schatten, sie schwimmt leise auf und ab und zieht feine Ringe; erreichte Bojen leuchten oben gelb wie ein Feuer */
.s-fahrt-marke { position: relative; background: radial-gradient(circle at 35% 32%, #9ee6d4, #53c1aa 45%, #23917a 100%);
  box-shadow: 0 4px 8px -2px rgb(11 29 43 / .35), inset 0 -2px 3px rgb(11 29 43 / .18); animation: s-boje 3.2s ease-in-out infinite; transition: scale 300ms ease; }
.s-fahrt-marke::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; background: var(--tinte); transition: background-color 300ms ease, box-shadow 300ms ease; }
.s-fahrt-marke::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(83 193 170 / .55); animation: s-boje-ring 3.2s ease-out infinite; pointer-events: none; }
.s-fahrt-stationen li:nth-child(2) .s-fahrt-marke { animation-delay: -1.1s; }
.s-fahrt-stationen li:nth-child(3) .s-fahrt-marke { animation-delay: -2.2s; }
.s-fahrt-stationen li:nth-child(2) .s-fahrt-marke::after { animation-delay: -1.1s; }
.s-fahrt-stationen li:nth-child(3) .s-fahrt-marke::after { animation-delay: -2.2s; }
@keyframes s-boje { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes s-boje-ring { from { opacity: 1; scale: .85; } to { opacity: 0; scale: 1.7; } }
.s-fahrt-station:hover .s-fahrt-marke { scale: 1.12; }
.s-fahrt-station.z-an .s-fahrt-marke::before { background: #ffd76a; box-shadow: 0 0 0 1.5px #fff, 0 0 10px 3px rgb(255 215 106 / .8); }
/* Knopf zur Dienstleistung: klar als Knopf erkennbar, beim Überfahren dunkel gefüllt, Pfeil gleitet */
.s-fahrt-dienst { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .55rem .95rem; border-radius: .5rem; background: #fff;
  box-shadow: inset 0 0 0 1px var(--linie), 0 2px 6px rgb(11 29 43 / .06); font: 500 .9375rem/1 var(--font); color: var(--tinte); corner-shape: superellipse(1.1);
  transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease; }
.s-fahrt-dienst .s-chev { width: .7rem; height: .7rem; transition: translate 220ms ease; }
.s-fahrt-station:hover .s-fahrt-dienst { background: var(--tinte); color: #fff; box-shadow: inset 0 0 0 1px var(--tinte), 0 6px 14px -6px rgb(11 29 43 / .45); }
.s-fahrt-station:hover .s-fahrt-dienst .s-chev { translate: 3px 0; }
.s-fahrt-station b { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; color: var(--tinte); }
.s-fahrt-mehr { max-width: 22rem; margin-top: .6rem; font-size: .9375rem; line-height: 1.55; color: var(--grau); opacity: 0; translate: 0 6px; transition: opacity 300ms ease, translate 300ms ease; }
.s-fahrt-station.z-an .s-fahrt-mehr { opacity: 1; translate: none; transition-delay: 250ms; }
.s-fahrt-station:focus-visible { outline: 2px solid var(--blau); outline-offset: 6px; border-radius: .4rem; }
/* Seitwärts-Fahrt (18.10., Pascal: «versuch mal mit Seitwärtsscrollen»): das Skript setzt .z-quer (breit, ohne «Bewegung reduzieren»).
   Der Abschnitt wird hoch, der Inhalt bleibt als Bildschirm stehen (sticky). Zuerst baut sich der Titel Wort für Wort auf, dann fährt das Boot
   von links herein; beim Weiterscrollen zieht die Welt (Wasser, Raster, Stationen) nach links vorbei, die Stationen tauchen nacheinander
   auf und wieder ab; an der dritten bremst das Boot, rechts am Rand leuchtet der angeschnittene Leuchtturm. Danach geht es normal weiter. */
.s-fahrt-pin { position: relative; }
.s-fahrt.z-quer { height: calc(100vh + 380vh); padding: 0; overflow: visible; }
.s-fahrt.z-quer .s-fahrt-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; overflow: clip; display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--kopf-h); }
.s-fahrt.z-quer .s-fahrt-bahn { margin-top: clamp(2rem, 1rem + 4vh, 4.5rem); padding-top: 0; }
.s-fahrt.z-quer .s-fahrt-stationen { display: block; height: 12rem; }
.s-fahrt.z-quer .s-fahrt-stationen li { position: absolute; left: 0; top: 0; width: min(24rem, 40vw); translate: var(--x, 120vw) 0;
  opacity: var(--o, 0); transition: opacity 120ms linear; }
.s-fahrt.z-quer .s-fahrt-station { transform: translateY(calc((1 - var(--o, 0)) * 18px)); filter: blur(calc((1 - var(--o, 0)) * 3px)); }
.s-fahrt.z-quer .s-fahrt-mehr { max-width: 20rem; }
/* ohne Bojen (18.10., Pascal: «Bojen weglassen»): die Marke bleibt unsichtbar als Platzhalter – auf ihrer Höhe fährt das Boot */
.s-fahrt .s-fahrt-marke { visibility: hidden; animation: none; }
.s-fahrt:not(.z-quer) .s-fahrt-marke { display: none; }
/* Titel: Wörter tauchen der Reihe nach auf */
.s-fahrt.z-quer .s-wort { display: inline-block; opacity: 0; translate: 0 .35em; filter: blur(4px); transition: opacity 450ms ease, translate 550ms cubic-bezier(.2, .8, .2, 1), filter 450ms ease; }
.s-fahrt.z-quer .s-wort.z-da { opacity: 1; translate: none; filter: none; }
.s-fahrt.z-quer .s-fahrt-lead { opacity: 0; translate: 0 10px; transition: opacity 500ms ease, translate 600ms cubic-bezier(.2, .8, .2, 1); }
.s-fahrt.z-quer.z-lead .s-fahrt-lead { opacity: 1; translate: none; }
/* Leuchtturm: gehört zur vorbeiziehenden Welt, gleitet von rechts ins Bild und steht am Ende angeschnitten am rechten Rand (Pascal: «er slidet ins Bild») */

.s-fahrt.z-quer .s-fahrt-schiff { rotate: none; }
/* Handy: Boot fährt senkrecht neben den Stationen nach unten (.z-hoch vom Skript) */
.s-fahrt.z-hoch .s-fahrt-schiff { display: block; transform-origin: 0 0; }   /* dreht um die Bootsmitte: Bug zeigt nach unten */
.s-fahrt.z-hoch .s-fahrt-chip { width: 4.4rem; }
.s-fahrt.z-hoch .s-fahrt-stationen { padding-left: 3.4rem; }
.s-fahrt.z-hoch .s-fahrt-mehr { opacity: .55; translate: none; transition: opacity 300ms ease; }
.s-fahrt.z-hoch .s-fahrt-station.z-an .s-fahrt-mehr { opacity: 1; }
@media (max-width: 760px) {
  .s-fahrt-stationen { grid-template-columns: 1fr; gap: 1.75rem; }
  .s-fahrt-linie, .s-fahrt-schiff, .s-fahrt-route, .s-fahrt-hafen { display: none; }   /* Raster und Wellen bleiben auch auf dem Handy (18.10., Pascal) */
  .s-fahrt-bahn { padding-top: 0; }
  .s-fahrt-mehr { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) { .s-fahrt-marke { transition: none; } .s-fahrt-wiegen, .s-boot-rigg, .s-fahrt-marke, .s-fahrt-marke::after { animation: none; } .s-fahrt-schiff { display: none; } .s-fahrt-mehr { opacity: 1; translate: none; } .s-hafen-glut, .s-hafen-strahl { animation: none; } }

/* Referenzen */
.s-refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
@media (max-width: 900px) { .s-refs { grid-template-columns: 1fr; } }
.s-ref { display: flex; flex-direction: column; border-radius: 0.9rem; overflow: hidden; box-shadow: 0 0 0 1px var(--linie); background: #fff; transition: box-shadow 250ms ease; }
.s-ref:hover { box-shadow: 0 0 0 1px #cfd8e0, 0 18px 40px -20px rgb(11 29 43 / .3); }
.s-ref-bild { display: grid; place-items: center; height: 11rem; background: var(--tinte); }
.s-ref-bild { position: relative; overflow: hidden; isolation: isolate; }
.s-ref-bild.s-verlauf-1 { background: linear-gradient(135deg, #0f6f61, var(--mint)); }
.s-ref-bild.s-verlauf-2 { background: linear-gradient(135deg, #2541c9, var(--tuerkis)); }
.s-ref-bild.s-verlauf-3 { background: linear-gradient(135deg, #5a3fd0, var(--flieder) 60%, #ffb3d1); }
/* Hover (17.10., Pascal: «keine Mausinteraktion, nur der Farbverlauf dreht sich langsam»): eine übergrosse Verlaufsfläche hinter dem Logo
   dreht sich beim Überfahren langsam um die Mitte und bleibt beim Verlassen in ihrer Lage stehen */
.s-ref-bild::before { content: ""; position: absolute; inset: -60%; z-index: 0; background: inherit; animation: s-verlauf-dreh 16s linear infinite paused; }
.s-ref:is(:hover, :focus-visible) .s-ref-bild::before { animation-play-state: running; }
@keyframes s-verlauf-dreh { to { rotate: 360deg; } }
.s-ref-bild img { position: relative; z-index: 1; max-height: 2.4rem; max-width: 60%; width: auto; transition: scale 600ms cubic-bezier(.2, .7, .2, 1); }
.s-ref:is(:hover, :focus-visible) .s-ref-bild img { scale: 1.04; }
.s-ref-text { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.s-ref-text p { color: var(--grau); font-size: .9375rem; }
.s-ref-text b { color: var(--tinte); font-weight: 500; }
.s-mehr { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1rem; font-weight: 500; color: #1c8f78; }

/* Abschlusskarten */
.s-schluss { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 860px) { .s-schluss { grid-template-columns: 1fr; } }
/* Kontakt: dunkel mit denselben Farbwolken wie die Zyklus-Box (18.10., Pascal: «Hintergrund ohne Bezug – versuch sowas wie beim Zyklus»):
   Mint oben links, Flieder oben rechts, Blau unten rechts; auf die kleinere Karte umgerechnet, ohne Bogenlinien */
.s-ab-kontakt { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 22rem; padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  border-radius: .9rem; background: var(--tinte); color: #fff; }
.s-ab-kontakt::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(75% 85% at 8% 18%, rgb(83 193 170 / .28), transparent 62%), radial-gradient(58% 65% at 94% 8%, rgb(167 139 255 / .2), transparent 62%),
    radial-gradient(70% 80% at 90% 100%, rgb(61 107 255 / .24), transparent 62%); }
.s-ab-inhalt { max-width: 30rem; }
.s-ab-kontakt h3 { font: 300 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.12 var(--font); letter-spacing: -.02em; }
.s-ab-kontakt p { margin-top: .9rem; font-size: 1rem; line-height: 1.55; color: #9db0bf; }
/* weisser Knopf auf dunkler Karte (18.10., Pascal) */
.s-knopf-weiss { margin-top: 1.75rem; background: #fff; color: var(--tinte); }
.s-ab-kontakt:hover .s-knopf-weiss { background: #e9f1f4; }
.s-ab-kontakt:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
/* Insights: hell, drei Beiträge als Zeilen mit Themen-Pille; gerade Trennlinien */
.s-ab-insights { display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); border-radius: .9rem; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); }
.s-ab-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.s-ab-kopf h3 { font: 500 1.375rem/1.3 var(--font); letter-spacing: -.01em; }
.s-ab-kopf .s-mehr { margin: 0; padding: 0; font-size: .875rem; }
.s-ab-insights > p { margin-top: .5rem; color: var(--grau); font-size: .9375rem; }
.s-ab-insights ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.s-ab-insights li + li { border-top: 1px solid var(--linie); }
.s-ab-insights li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "thema chev" "titel chev"; align-items: center; gap: .35rem 1rem; padding: .95rem 0; }
.s-ins-thema { grid-area: thema; justify-self: start; padding: .22rem .55rem; border-radius: 99px; font-size: .6875rem; font-weight: 500; }
.s-ins-gruen { background: var(--gruen-hell); color: var(--gruen); }
.s-ins-blau { background: #e3ebff; color: #2f55d6; }
.s-ins-flieder { background: #efe8ff; color: #6d4bd6; }
.s-ins-titel { grid-area: titel; font-weight: 500; line-height: 1.35; color: var(--tinte); transition: color 200ms ease; }
.s-ab-insights li a .s-chev { grid-area: chev; color: var(--grau); transition: color 200ms ease, translate 200ms ease; }
.s-ab-insights li a:hover .s-ins-titel { color: #1c8f78; }
.s-ab-insights li a:hover .s-chev { color: #1c8f78; translate: 3px 0; }

/* Fuss */
.s-fuss { position: relative; overflow: clip; padding: 5rem 0 6rem; font-size: .9375rem; }
/* leichte Farbwolken im Fuss (17.10., Pascal, wie im Entwurf «neu»): Mint links unten, Türkis in der Mitte, zartes Blau rechts;
   oben laufen sie weich ins Weiss aus */
.s-fuss-wolken { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.s-fuss-wolken span { position: absolute; border-radius: 50%; filter: blur(40px); animation: s-wandern 22s ease-in-out infinite alternate; }
.s-fuss-wolken span:nth-child(1) { width: 46vw; aspect-ratio: 1; left: -12vw; bottom: -30%; background: radial-gradient(closest-side, rgb(83 193 170 / .6), transparent); }
.s-fuss-wolken span:nth-child(2) { width: 34vw; aspect-ratio: 1; left: 34vw; bottom: -45%; background: radial-gradient(closest-side, rgb(53 199 192 / .3), transparent); animation-duration: 27s; animation-delay: -8s; }
.s-fuss-wolken span:nth-child(3) { width: 44vw; aspect-ratio: 1; right: -12vw; bottom: -25%; background: radial-gradient(closest-side, rgb(127 176 255 / .45), transparent); animation-duration: 31s; animation-delay: -15s; }
.s-fuss-raster { position: relative; }
.s-fuss-raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 800px) { .s-fuss-raster { grid-template-columns: 1fr 1fr; } }
.s-fuss p { margin-top: 1rem; max-width: 22rem; color: var(--grau); }
.s-fuss h2 { margin-bottom: .8rem; font: 500 .9375rem/1.3 var(--font); color: var(--tinte); }
.s-fuss-raster > div > a:not(.s-logo) { display: block; padding: .2rem 0; }
.s-fuss a:hover { color: #1c8f78; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Squircle-Ecken, dezent (17.10., Pascal: «1.2 Faktor», danach «zu stark»): corner-shape: superellipse(1.1) – knapp neben dem
   Kreisbogen (1 = rund, 2 = voller Squircle). Die Radien sind wieder die ursprünglichen. Kreise und Pillen bleiben rund. Ältere Browser ohne corner-shape zeigen die gewöhnliche Rundung. */
.s-knopf, .s-karte, .s-ecke, .s-karte-bild, .s-ui, .s-ref, .s-ab-kontakt, .s-ab-insights, .s-n-knopf, .s-n-panel, .s-n-panel li a, .s-n-ico, .s-b-ico,
.s-prio, .s-st-punkt + span, .s-ui-vs li, .s-zkc-zeile, .s-zkc-zeile::before, .s-zkc-ico { corner-shape: superellipse(1.1); }   /* auch die neueren Boxen (18.10.) */
/* ===== Dunkelmodus (18.10., Pascal): Umschalter im Footer, html[data-thema="dunkel"] =====
   Seite, Flächen, Linien und Schrift werden dunkel; die Produkt-Karten (weisse UI-Ansichten in den Kacheln) bleiben hell wie Bildschirmfotos */
.s-fuss-unten { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.s-fuss-stil { font-size: .875rem; color: var(--grau); }   /* Link zum Stilguide der Fassung */
.s-thema { all: unset; position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--grau); cursor: pointer;
  transition: color 200ms ease; }   /* schlichtes Icon ohne Hintergrund (18.10., Pascal): Mond = dunkel einschalten, Sonne = hell */
.s-thema:hover { color: var(--tinte); }
.s-thema:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.s-thema svg { grid-area: 1 / 1; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 300ms ease, rotate 500ms cubic-bezier(.2, .8, .2, 1), scale 400ms cubic-bezier(.2, .8, .2, 1); }
.s-thema .s-thema-sonne { opacity: 0; rotate: -90deg; scale: .6; }
html[data-thema="dunkel"] .s-thema .s-thema-mond { opacity: 0; rotate: 90deg; scale: .6; }
html[data-thema="dunkel"] .s-thema .s-thema-sonne { opacity: 1; rotate: 0deg; scale: 1; }

html[data-thema="dunkel"] { color-scheme: dark;
  --papier: #08131c; --flaeche: #0f1e2a; --linie: #1e3242; --grau: #93a5b4; --mint-hell: rgb(83 193 170 / .16); --text-hell: #e7eef3; }
html[data-thema="dunkel"] body { color: var(--text-hell); }
html[data-thema="dunkel"] :is(.s-m-gruppe li a:not(.s-m-alle), .s-m-kopf) { color: var(--text-hell); }
html[data-thema="dunkel"] .s-m-kontakt { background: #fff; color: #0b1d2b; }
html[data-thema="dunkel"] :is(.s-n-knopf, .s-n-panel, .s-n-panel li a) { color: var(--text-hell); }
html[data-thema="dunkel"] :is(.s-fahrt-station b, .s-ref-text b, .s-ins-titel, .s-fuss h2, .s-zweiton .s-dunkel, .s-riesig, .s-karte h3) { color: var(--text-hell); }
html[data-thema="dunkel"] .s-kopf.z-gerollt { background: rgb(8 19 28 / .78); box-shadow: 0 1px 0 rgb(255 255 255 / .06); }
html[data-thema="dunkel"] :is(.s-n-panel, .s-n-panel::after) { background: #102130; }
html[data-thema="dunkel"] .s-n-panel { box-shadow: 0 0 0 1px var(--linie), 0 24px 48px -20px rgb(0 0 0 / .6); }
html[data-thema="dunkel"] .s-knopf-voll { background: #fff; color: #0b1d2b; }
html[data-thema="dunkel"] .s-knopf-voll:hover { background: #dfe8ee; }
html[data-thema="dunkel"] .s-knopf-hell { background: var(--flaeche); color: var(--text-hell); box-shadow: 0 0 0 1px var(--linie); }
html[data-thema="dunkel"] :is(.s-ecke, .s-ref) { background: var(--flaeche); }
html[data-thema="dunkel"] .s-karte { box-shadow: 0 0 0 1px var(--linie); }
/* Produkt-Karten im Dunkeln (18.10., Pascal: «diese Elemente in den Darkmode umwandeln»): Kachel-Hintergründe als dunkle Farbwolken,
   UI-Karten dunkle Fläche mit heller Schrift, Grafiken (Prozessmodell, Liste, Plan, Rad, Karteikasten) passend umgefärbt */
html[data-thema="dunkel"] { --ui: #13232f; --ui-2: #1a2d3c; --rot: #ff8a8d; --rot-hell: rgb(217 58 63 / .2); --gelb: #f2b84a; --gelb-hell: rgb(201 138 4 / .22);
  --gruen: #5fd3b8; --gruen-hell: rgb(83 193 170 / .18); }
html[data-thema="dunkel"] .s-karte-bild.s-verlauf-1 { background: radial-gradient(120% 120% at 0% 100%, rgb(83 193 170 / .22) 0%, transparent 55%), radial-gradient(120% 120% at 100% 0%, rgb(61 107 255 / .18) 0%, transparent 60%), #0e1b26; }
html[data-thema="dunkel"] .s-karte-bild.s-verlauf-2 { background: radial-gradient(130% 130% at 100% 100%, rgb(167 139 255 / .2) 0%, transparent 60%), radial-gradient(100% 100% at 0% 0%, rgb(83 193 170 / .18) 0%, transparent 60%), #0f1a28; }
html[data-thema="dunkel"] .s-karte-bild.s-verlauf-3 { background: radial-gradient(130% 130% at 0% 0%, rgb(61 107 255 / .2) 0%, transparent 60%), radial-gradient(100% 100% at 100% 100%, rgb(83 193 170 / .18) 0%, transparent 60%), #0d1a26; }
html[data-thema="dunkel"] .s-karte-bild.s-verlauf-4 { background: radial-gradient(90% 80% at 0% 100%, rgb(83 193 170 / .12), transparent 65%), #0f1c27; }   /* ruhiger: nur ein Hauch Mint (18.10., Pascal: «zu farbiger Verlauf») */
html[data-thema="dunkel"] .s-karte-bild.s-verlauf-5 { background: radial-gradient(120% 120% at 100% 0%, rgb(255 140 180 / .15) 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, rgb(83 193 170 / .18) 0%, transparent 60%), #101a26; }
html[data-thema="dunkel"] .s-ui { background: var(--ui); color: var(--text-hell); box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 14px 30px -12px rgb(0 0 0 / .6); }
/* Prozessmodell */
html[data-thema="dunkel"] .s-bpmn text { fill: var(--text-hell); }
html[data-thema="dunkel"] .s-bpmn :is(.s-start, .s-gw) { fill: var(--ui); }
html[data-thema="dunkel"] .s-bpmn .s-ende { fill: var(--ui); stroke: var(--text-hell); }
html[data-thema="dunkel"] .s-bpmn .s-gw { stroke: var(--text-hell); }
html[data-thema="dunkel"] .s-bpmn .s-gw-x { stroke: var(--text-hell); }
html[data-thema="dunkel"] .s-bpmn .s-task rect { fill: var(--ui-2); stroke: rgb(255 255 255 / .1); }
html[data-thema="dunkel"] .s-bpmn :is(.s-task.z-an, .s-task.z-zeige) rect { fill: rgb(83 193 170 / .18); stroke: var(--mint); }
html[data-thema="dunkel"] .s-bpmn .s-task-haken circle { fill: #1e3f45; stroke: var(--ui); }   /* deckend wie im Projektplan */
html[data-thema="dunkel"] .s-bpmn .s-fluss { stroke: rgb(255 255 255 / .45); }
html[data-thema="dunkel"] .s-bpmn .s-fluss.z-weg { stroke: var(--mint); }
html[data-thema="dunkel"] .s-bpmn .s-pf { fill: rgb(255 255 255 / .55); }
html[data-thema="dunkel"] .s-bpmn .s-rolle rect { fill: var(--text-hell); }
html[data-thema="dunkel"] .s-bpmn .s-rolle text { fill: #0b1d2b; }
/* Anforderungsliste und Projektplan */
html[data-thema="dunkel"] .s-vs-kachel { background: var(--ui-2); }
html[data-thema="dunkel"] .s-st-punkt { background: #1e3242; }
html[data-thema="dunkel"] .s-st li.z-fertig .s-st-punkt { background: #1e3f45; }   /* deckend, sonst scheint die Verbindungslinie durch den Haken */
html[data-thema="dunkel"] .s-st li:is(.z-aktiv, .z-fertig) .s-st-name { color: var(--text-hell); }
html[data-thema="dunkel"] .s-st li.z-aktiv .s-st-punkt { color: #0b1d2b; }
/* Titel-Rad */
html[data-thema="dunkel"] .s-rad-ico { color: var(--text-hell); }
html[data-thema="dunkel"] .s-rad-fenster { background: var(--ui-2); box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 8px 18px -10px rgb(0 0 0 / .6); }
html[data-thema="dunkel"] .s-rad-titel { color: var(--text-hell); }
html[data-thema="dunkel"] .s-rad-knopf { background: rgb(255 255 255 / .08); }
html[data-thema="dunkel"] .s-rad-knopf:hover { background: rgb(255 255 255 / .16); }
html[data-thema="dunkel"] .s-rad-knopf svg { stroke: var(--text-hell); }
html[data-thema="dunkel"] .s-rad-punkt { background: rgb(255 255 255 / .22); }
html[data-thema="dunkel"] .s-rad-punkt:hover { background: rgb(255 255 255 / .4); }
html[data-thema="dunkel"] .s-rad-punkt.z-an { background: var(--mint); }
/* Karteikasten */
html[data-thema="dunkel"] .s-kk-blatt { color: var(--text-hell); background: radial-gradient(80% 50% at 110% 0%, color-mix(in srgb, var(--ton) 25%, transparent), transparent 70%) #16283a;
  box-shadow: -8px 0 14px -10px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 255 255 / .08); }
html[data-thema="dunkel"] .s-kk-blatt::before { opacity: .45; }
html[data-thema="dunkel"] .s-kk-ico { background: color-mix(in srgb, var(--ton) 30%, #16283a); }
html[data-thema="dunkel"] .s-kk-lese b { color: var(--text-hell); }
html[data-thema="dunkel"] .s-logos-band { background: var(--papier); }   /* das Band ist eine eigene Ebene: «screen» mischt gegen diesen Grund, Schwarz verschwindet */
html[data-thema="dunkel"] .s-logos img { filter: grayscale(1) invert(1) brightness(1.3); mix-blend-mode: screen; opacity: .65; }
html[data-thema="dunkel"] .s-logos img:hover { filter: invert(1) brightness(1.3); opacity: 1; }
html[data-thema="dunkel"] .s-fahrt-dienst { background: var(--flaeche); color: var(--text-hell); box-shadow: inset 0 0 0 1px var(--linie); }
html[data-thema="dunkel"] .s-fahrt-station:hover .s-fahrt-dienst { background: #fff; color: #0b1d2b; }
html[data-thema="dunkel"] .s-fahrt-hafen g[mask] > path:first-child { opacity: .22; }
html[data-thema="dunkel"] .s-zkc::before { box-shadow: inset 0 0 0 1px var(--linie); }
html[data-thema="dunkel"] .s-ab-kontakt { box-shadow: inset 0 0 0 1px var(--linie); }
html[data-thema="dunkel"] .s-thema:hover { color: var(--text-hell); }
html[data-thema="dunkel"] .s-knopf-kontur { box-shadow: inset 0 0 0 1px var(--linie); }
html[data-thema="dunkel"] .s-knopf-kontur::before { background-color: #102130; }
html[data-thema="dunkel"] .s-knopf-kontur:hover { color: var(--mint); }