:root { --mint: #53c1aa; --mint-hell: #e3f6f1; --tuerkis: #45becb; --blau: #89aaef; --flieder: #b19de7; --fokus: #3f60a7;   /* 21.10.: Türkis/Blau/Flieder = Grafikfarben «Kräftig», Fokus = Blau tief */ --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 */
  /* Grafikfarben (21.10., Variante «Vertrauen 1b»): ohne Bedeutung, nur für Grafiken; Mint Wolke/Kräftig = Original (#e3f6f1, #53c1aa) */
  --g-mint-wolke: #e3f6f1; --g-mint-pastell: #98ead7; --g-mint-kraeftig: #53c1aa; --g-mint-tief: #007862;
  --g-tuerkis-wolke: #ddfafd; --g-tuerkis-pastell: #91e8f2; --g-tuerkis-kraeftig: #45becb; --g-tuerkis-tief: #007583;
  --g-himmel-wolke: #e1f7ff; --g-himmel-pastell: #9fe2ff; --g-himmel-kraeftig: #60b6e4; --g-himmel-tief: #006c9c;
  --g-blau-wolke: #e9f4ff; --g-blau-pastell: #bbd8ff; --g-blau-kraeftig: #89aaef; --g-blau-tief: #3f60a7;
  --g-violett-wolke: #f5f0ff; --g-violett-pastell: #dccdff; --g-violett-kraeftig: #b19de7; --g-violett-tief: #6a529f;
  --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%, color-mix(in oklch, var(--mint), var(--tuerkis)) 38%, var(--tuerkis) 72%, var(--g-himmel-kraeftig) 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; }
/* Punkteraster im Hintergrund (24.10., Pascal: «auf der gesamten Seite ein hellgraues Punkteraster»): 1-px-Punkte im 24-px-Raster;
   Karten, Kacheln und dunkle Boxen decken es mit ihrer eigenen Fläche ab */
:root { --punkt: #d4dce3; --punkt-abstand: 24px; }
html[data-thema="dunkel"] { --punkt: #1d3040; }
/* Punkte standardmässig fein (24.10., Pascal: «noch etwas kleiner») */
body { background-image: radial-gradient(circle at center, var(--punkt) .7px, transparent 1.1px); background-size: var(--punkt-abstand) var(--punkt-abstand); background-position: center top; }
/* Punkte weichen der Maus aus (25.10., Pascal: «Mausinteraktion weglassen, die Maus soll die Punkte leicht wegschieben»): eine feste Zeichenfläche
   hinter main zeichnet nur den Kreis um den Zeiger neu: sie deckt dort die ruhenden Punkte mit der Seitenfarbe ab und setzt sie leicht nach aussen
   verschoben neu (am Kreisrand ohne Versatz, darum kein Übergang sichtbar). Steht die Maus still, wird nichts gezeichnet. Nur mit Maus und ohne
   «Bewegung reduzieren»; Karten und Boxen liegen darüber. */
.s-punktfeld { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .s-punktfeld { display: block; } }
.z-punktfeld body { background-image: none; }   /* Raster zeichnet dann die Zeichenfläche */
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(177 157 231 / .22), transparent 72%),
    radial-gradient(35% 92% at 75% 85%, rgb(137 170 239 / .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(--fokus); 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 { position: relative; display: flex; gap: .5rem; margin-left: 1rem; font-size: 1rem; font-weight: 500; }
.s-n-gruppe { position: relative; z-index: 1; }
/* Gleitender Rahmen (21.10., Pascal: «Nav-Switch wie bei cloudflare.com»): ein einziger Rahmen liegt hinter den Menüpunkten und gleitet
   beim Überfahren zum nächsten, Breite inklusive; erscheint und verschwindet weich. Lage und Grösse setzt das Skript (--sx, --sy, --sb, --sh). */
.s-n-schieber { position: absolute; left: 0; top: 0; width: var(--sb, 0px); height: var(--sh, 0px); translate: var(--sx, 0px) var(--sy, 0px); z-index: 0; pointer-events: none;
  border-radius: .5rem; box-shadow: inset 0 0 0 1px var(--linie); background: color-mix(in srgb, var(--flaeche) 70%, transparent); opacity: 0;
  transition: translate 300ms cubic-bezier(.19, 1, .22, 1), width 300ms cubic-bezier(.19, 1, .22, 1), opacity 300ms cubic-bezier(.19, 1, .22, 1); }
.s-n-schieber.z-an { opacity: 1; }   /* erscheint gleitend aus der letzten Lage, wie bei cloudflare.com */
.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; }
.s-n-knopf:focus-visible { outline: 2px solid var(--fokus); 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; }   /* alter Winkel (21.10., Pascal: Doppelpfeil von Cloudflare nicht übernehmen) */
/* 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 { margin-left: var(--verschub, 0px); }
/* Morphendes Panel (21.10., Pascal: «hin und her sliden und morphen wie bei Cloudflare»): eine gemeinsame Fläche (.s-n-flaeche) liegt hinter dem
   offenen Panel und verwandelt beim Wechsel Lage, Breite und Höhe; der Inhalt gleitet 24 px aus der Laufrichtung herein, der alte in die Gegenrichtung
   hinaus. Die Panels selbst sind dann durchsichtig. Ohne Skript (keine Klasse z-morph) bleibt jedes Panel eine eigene Karte. */
.s-n-flaeche { position: absolute; left: 0; top: 0; z-index: 0; width: var(--fb, 0px); height: var(--fh, 0px); translate: var(--fx, 0px) var(--fy, 0px); pointer-events: none;
  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; scale: .98; transform-origin: 50% 0;
  transition: translate 360ms cubic-bezier(.19, 1, .22, 1), width 360ms cubic-bezier(.19, 1, .22, 1), height 360ms cubic-bezier(.19, 1, .22, 1), opacity 180ms ease, scale 260ms cubic-bezier(.2, .7, .2, 1); }
.s-n-flaeche::after { content: ""; position: absolute; left: var(--fp, 1.6rem); top: -.35rem; width: .7rem; height: .7rem; rotate: 45deg; background: inherit; box-shadow: -1px -1px 0 rgb(11 29 43 / .06);
  transition: left 360ms cubic-bezier(.19, 1, .22, 1); }
.s-n-flaeche.z-an { opacity: 1; scale: 1; }
.s-n-flaeche.z-sprung, .s-n-flaeche.z-sprung::after { transition: opacity 180ms ease, scale 260ms cubic-bezier(.2, .7, .2, 1); }   /* erstes Öffnen: an Ort erscheinen */
.s-nav.z-morph .s-n-panel { background: none; box-shadow: none; translate: var(--von, 0 6px); }
.s-nav.z-morph .s-n-panel::after { display: none; }
.s-nav.z-morph .s-n-gruppe.z-offen .s-n-panel { translate: 0 0; }
.s-nav.z-morph .s-n-panel.z-sofort { transition: none !important; }
.s-n-panel::after { content: ""; position: absolute; left: calc(1.6rem - var(--verschub, 0px)); 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(--fokus); 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(177 157 231 / .22), transparent 72%),
    radial-gradient(35% 92% at 75% 85%, rgb(137 170 239 / .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(--fokus); 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(--fokus); 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, var(--g-tuerkis-kraeftig) 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, var(--g-blau-kraeftig), 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: calc(2.2rem * var(--s, 1)); 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; }
/* Leistungen im Raster 1–2–2 (25.10., Pascal): Prozessmanagement über die ganze Breite (quer), darunter je zwei Karten; Handy einspaltig */
.s-geschichte-lead { max-width: 40rem; margin-top: 1.25rem; color: var(--grau); font-size: 1.0625rem; }
.s-raster-122 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.s-karte.s-karte-quer { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.s-karte-quer .s-karte-text { padding: 2rem; }
.s-karte-quer .s-karte-bild { margin: 1rem; min-height: 17rem; }
/* untere vier Kacheln mit kleineren Grafiken (25.10., Pascal) */
:is(.s-raster-122, .s-dienste-gruppe) > .s-karte:not(.s-karte-quer) .s-karte-bild { min-height: 11rem; padding: .9rem; }
/* Grafiken grösser und kontrastreicher (25.10., Pascal: «zum Teil zu klein oder zu wenig Kontrast»): kein zoom .82 mehr, eine Schriftgrösse 13 px
   für alle Grafiken (vorher 11 px, davor 9–13 px), Konturen, offene Schritte und Statuspunkte dunkler */
.s-raster-122 { --grafik-schrift: 13px; }
.s-raster-122 .s-karte-bild :not(.s-rad-gruppe, .s-rad-gruppe *) { font-size: var(--grafik-schrift) !important; }
@media (min-width: 761px) { .s-karte-quer .s-pl { margin-top: 2.25rem; } }
.s-karte-branchen .s-kk-feld { --e: min(1.15px, calc(100cqw / 330)); }   /* Fächer etwas grösser, seit die Kachel die ganze Breite hat (25.10.) */
.s-karte-branchen .s-karte-bild { min-height: 0; margin-block: .25rem; padding-block: .5rem; }   /* Kachel weniger hoch (25.10., Pascal) */   /* Platz für den Pfeil-Knopf oben rechts */
/* Projektplan: erledigte Etappe kräftiger (25.10., Pascal: «Kontrast der hellgrünen Bubble zu gering») */
html:not([data-thema="dunkel"]) .s-raster-122 .s-st li.z-fertig .s-st-punkt { background: var(--g-mint-pastell); }
html:not([data-thema="dunkel"]) .s-raster-122 .s-st-haken { stroke: var(--g-mint-tief); stroke-width: 2.4; }
/* Zyklus-Rad plakativer (25.10., Pascal): eigenes, grösseres Mass (das Rad rechnet in em), dunkle Pille mit weissem Namen, Symbol in Mint-Kreis */
.s-raster-122 .s-rad-gruppe { font-size: 19px; }
.s-raster-122 .s-rad-titel { font-weight: 600; }
.s-raster-122 .s-rad-fenster { width: calc(var(--fb, 9em) + .3em); background: rgb(83 193 170 / .2); box-shadow: none; }
.s-raster-122 .s-rad-titel.z-innen { color: #3b4b5a; }   /* aktiver Name grau, Pille und Kreis hellgrün transparent (25.10., Pascal: «ohne dunkelgrüne Pille und Bubble») */
.s-raster-122 .s-rad-ico { background: rgb(83 193 170 / .2); color: var(--g-mint-tief); box-shadow: none; }   /* Mint tief statt Schwarz (25.10., Pascal: «Schwarz zu starker Kontrast») */   /* wie die Pille (25.10., Pascal: Pastell-Kreis «passt nicht farblich») */
.s-raster-122 .s-rad-ico svg { width: 1.6em; height: 1.6em; }
html[data-thema="dunkel"] .s-raster-122 .s-rad-fenster, html[data-thema="dunkel"] .s-raster-122 .s-rad-ico { background: rgb(83 193 170 / .18); }
html[data-thema="dunkel"] .s-raster-122 .s-rad-ico { color: var(--mint); }
html[data-thema="dunkel"] .s-raster-122 .s-rad-titel.z-innen { color: var(--text-hell); }
.s-raster-122 .s-bpmn text { font-size: 12px !important; }   /* SVG wird auf ~1.2-fach gestreckt: sichtbar etwa 13 px wie der Rest */
.s-raster-122 .s-bpmn, .s-raster-122 .s-ui.s-ui-bpmn { max-width: 44rem; }
/* quer: Abschnitt steht, Karten gleiten seitwärts */
.s-zkh { height: calc(100vh + 240vh); }
.s-zkh-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; padding-top: 5.5rem; padding-bottom: 1.5rem; box-sizing: border-box; }   /* mittig in der sichtbaren Höhe unter der Navigation (25.10., Pascal) */
.s-zkh .s-zks-kopf { position: static; }
.s-zkh-fenster { overflow: visible; }
.s-zkh-spur { display: flex; gap: 1.5rem; width: max-content; translate: var(--x, 0) 0; }
.s-zkh-spur .s-zks-blatt { position: relative; top: auto; width: min(26rem, 80vw); margin: 0; rotate: none; scale: none;
  background: radial-gradient(120% 85% at 100% 0%, color-mix(in srgb, var(--ton-a) 65%, transparent), transparent 62%), radial-gradient(110% 80% at 0% 100%, var(--ton-b), transparent 60%), #fff; }   /* farbige Verläufe (25.10., Pascal) */
.s-zkh-spur .s-zks-blatt.s-karte { display: block; overflow: visible; border-radius: 1.08rem; color: var(--tinte); text-decoration: none; }
.s-zkh-spur .s-zks-ergebnis { background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px rgb(11 29 43 / .06); }
.s-zkh-spur .s-zks-ico { background: rgb(255 255 255 / .8); }
html[data-thema="dunkel"] .s-zkh-spur .s-zks-blatt { background: radial-gradient(120% 85% at 100% 0%, color-mix(in srgb, var(--ton-a) 22%, transparent), transparent 62%), #142636; }
html[data-thema="dunkel"] .s-zkh-spur :is(.s-zks-ergebnis, .s-zks-ico) { background: rgb(255 255 255 / .06); }
.s-zkh-balken { height: 3px; border-radius: 3px; background: var(--linie); max-width: 20rem; }
.s-zkh-balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--tuerkis)); transform-origin: left; scale: var(--fort, 0) 1; }
.s-zkh { overflow-x: clip; overflow-y: visible; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .s-zkh { height: auto; } .s-zkh-pin { position: static; height: auto; }
  .s-zkh-fenster { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; } .s-zkh-spur { translate: none; } .s-zkh-spur .s-zks-blatt { scroll-snap-align: start; } .s-zkh-balken { display: none; } }
@keyframes s-pl-ameisen { to { stroke-dashoffset: -16; } }
/* Grafik Prozessmanagement (25.10.): Vorher/Nachher-Regler, Stil «Schein» */
.s-pm-v { display: grid; width: 100%; max-width: 42rem; }
/* Regler (Vorher/Nachher zum Ziehen) */
.s-pc-regler { touch-action: pan-y; cursor: ew-resize; }
.s-pc-zustand.s-pc-rechts { text-anchor: end !important; }
.s-pc-vorher { opacity: .85; }
.s-pc-nachher .s-pc-bahn { display: none; }   /* keine zweite Linie unter den Ameisen (25.10., Pascal: «wirkt nicht richtig») */
.s-pc-nachher .s-pc-bahn-ameisen { fill: none; stroke: url(#s-pc-lg); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 6; animation: s-pl-ameisen 1s linear infinite; }
.s-pc-nachher .s-pc-n rect { stroke: none; transition: filter 300ms ease; }   /* keine Konturen, Verlauf im Hintergrund (25.10., Pascal) */
.s-pc-nachher .s-pc-n { transition: translate 350ms cubic-bezier(.3, 1.4, .5, 1); }
.s-pc-nachher .s-pc-n.z-an rect { filter: saturate(1.6) drop-shadow(0 6px 12px color-mix(in srgb, var(--ton) 55%, transparent)); }
.s-pc-nachher .s-pc-n.z-an { translate: 0 -3px; }
.s-pc-nachher .s-pc-start circle { fill: #fff; stroke: var(--g-mint-kraeftig); stroke-width: 2.5; }
.s-pc-nachher .s-pc-ziel circle { fill: #fff; stroke: var(--g-blau-kraeftig); stroke-width: 3.5; }
.s-pc-schein .s-pc-nachher .s-pc-n rect { fill: #fff !important; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--ton) 45%, transparent)); }
/* aktiver Schritt nur leicht grösser, Schein bleibt gleich (25.10., Pascal) */
.s-pc-schein .s-pc-nachher .s-pc-n.z-an { translate: none; }
/* skaliert wird der Inhalt um die Mitte des Kastens (lokaler Nullpunkt), nicht die Gruppe mit ihrer translate-Lage (sonst wandert der Kasten) */
.s-pc-schein .s-pc-nachher .s-pc-n > * { transform-box: view-box; transform-origin: 0 0; transition: scale 400ms cubic-bezier(.3, 1.3, .5, 1); }
.s-pc-schein .s-pc-nachher .s-pc-n.z-an > * { scale: 1.07; }
.s-pc-schein .s-pc-nachher .s-pc-n.z-an rect { filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--ton) 45%, transparent)); }
.s-pc-licht { fill: var(--mint); filter: drop-shadow(0 0 6px rgb(83 193 170 / .95)); }
@media (prefers-reduced-motion: reduce) { .s-pc-licht { display: none; } .s-pc-nachher .s-pc-bahn-ameisen { animation: none; } }
.s-pc-griff line { stroke: url(#s-pc-griff-lg); stroke-width: 2; }   /* läuft oben und unten aus (25.10., Pascal) */
.s-pc-griff circle { fill: var(--mint); stroke: none; filter: drop-shadow(0 4px 10px rgb(83 193 170 / .5)); }   /* Mintfarbe (25.10., Pascal) */   /* farbig gefüllt statt weiss mit Kontur */
.s-pc-griff path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-pm-v svg { display: block; width: 100%; height: auto; overflow: visible; }
.s-pm-v svg text { font-family: var(--font); font-weight: 500; fill: var(--tinte); text-anchor: middle; }
/* A Vorher → Nachher */
.s-pc-k rect { fill: #fff; stroke: rgb(11 29 43 / .22); }
.s-pc-rund circle { fill: #fff; stroke: var(--mint); stroke-width: 2.5; }
.s-pc-ende circle { stroke: var(--tinte); stroke-width: 3.5; }
.s-pc-zustand { text-anchor: start !important; fill: var(--grau) !important; }
.s-pc-linie { fill: none; stroke: rgb(11 29 43 / .35); stroke-width: 1.4; }
.s-pc-linie.z-fluss { stroke: var(--g-mint-tief); stroke-width: 1.8; stroke-dasharray: 5 3; animation: s-pl-ameisen 900ms linear infinite; }
.z-ordnung .s-pc-k:not(.s-pc-rund) rect { stroke: var(--mint); fill: var(--mint-hell); transition: fill 400ms ease, stroke 400ms ease; }
html[data-thema="dunkel"] :is(.s-pc-k rect, .s-pc-rund circle) { fill: #16283a; }
html[data-thema="dunkel"] .s-pm-v svg text { fill: var(--text-hell); }
@media (min-width: 761px) { :is(.s-raster-122, .s-dienste-gruppe) > .s-karte:not(.s-karte-quer) .s-ui { max-width: 36rem; } }
html:not([data-thema="dunkel"]) .s-raster-122 .s-bpmn .s-task rect { stroke: rgb(11 29 43 / .28); }
html:not([data-thema="dunkel"]) .s-raster-122 .s-bpmn .s-gw { stroke-opacity: .9; }
html:not([data-thema="dunkel"]) .s-raster-122 .s-bpmn .s-gw-x { opacity: .9; }
html:not([data-thema="dunkel"]) .s-raster-122 .s-st-punkt { background: #dfe6ec; color: var(--tinte); }
html:not([data-thema="dunkel"]) .s-raster-122 .s-st-name { color: #3b4b5a; }
html:not([data-thema="dunkel"]) .s-raster-122 .s-st li:not(:first-child)::before { background: #d3dce4; }
html:not([data-thema="dunkel"]) .s-raster-122 .s-rad-punkt { background: rgb(11 29 43 / .3); }
html:not([data-thema="dunkel"]) .s-raster-122 .s-rad-punkt.z-an { background: var(--mint); }
/* Zyklus und Branchen ohne farbigen Grafik-Hintergrund (25.10., Pascal): die Grafik steht direkt auf der Kachel */
.s-raster-122 > .s-karte .s-karte-bild, html[data-thema="dunkel"] .s-raster-122 > .s-karte .s-karte-bild { background: none; }
/* Querformat (25.10., Pascal: «Grafiken besser im Querformat, mehr in die Länge, weniger hoch»): Produktansichten breiter, der Projektplan
   läuft waagrecht statt senkrecht; nur ab 761 px, auf dem Handy bleibt alles senkrecht */
@media (min-width: 761px) {
  :is(.s-raster-122, .s-dienste-gruppe) > .s-karte:not(.s-karte-quer) .s-ui { max-width: 32rem; }
  .s-raster-122 .s-ui-plan .s-st { flex-direction: row; padding: 1.1rem .75rem .6rem; }
  .s-raster-122 .s-ui-plan .s-st li { flex: 1; flex-direction: column; align-items: center; gap: .45rem; padding-bottom: 0; text-align: center; }
  .s-raster-122 .s-ui-plan .s-st li:not(:first-child)::before, .s-raster-122 .s-ui-plan .s-st li:not(:first-child)::after {
    left: calc(-50% + .95rem); right: calc(50% + .95rem); width: auto; top: calc(.825rem - 1.5px); bottom: auto; height: 3px; }
  .s-raster-122 .s-ui-plan .s-st li:not(:first-child)::after { background: linear-gradient(90deg, var(--mint), var(--tuerkis)); transform: scaleX(0); transform-origin: left; }
  .s-raster-122 .s-ui-plan .s-st li:is(.z-fertig, .z-aktiv):not(:first-child)::after { transform: scaleX(1); }
  .s-raster-122 .s-ui-plan .s-st-text { padding-top: 0; justify-items: center; }
}
/* Die drei Dienstleistungen gehören zusammen (25.10., Pascal: «die ersten drei gehören zusammen, sollen sich von den anderen beiden abheben»):
   einzelne Karten im Raster 1–2–2 auf einer gemeinsamen hellen Mint-Fläche; Zyklus und Branchen folgen mit Abstand direkt auf dem Punkteraster */
.s-dienste-gruppe { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1rem 1rem; margin-bottom: 1.5rem;
  border-radius: 1.5rem; corner-shape: superellipse(1.1);
  background: none; padding: 0; }   /* Karten selbst ganz im Verlauf (25.10., Pascal), darum keine Fläche dahinter */
.s-dienste-titel { grid-column: 1 / -1; padding: 0; font: 500 .9375rem/1.3 var(--font); color: #167a66; }
/* die drei Karten ganz mit ihrem Verlauf eingefärbt; die Grafikfläche darin wird durchsichtig */
.s-dienste-gruppe > .s-karte { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 22%, var(--linie)); }
.s-dienste-gruppe > .s-karte .s-karte-bild { background: none; }
.s-dienste-gruppe > .s-karte .s-ecke { background: rgb(255 255 255 / .75); }
/* keine «Fenster»-Grafiken (25.10., Pascal): in den drei Dienstleistungs-Karten liegen Prozessmodell, Anforderungsliste und Projektplan
   direkt auf dem Verlauf, ohne weisse Box, Schatten und Kopfzeile; die Linien in der Liste bleiben als feine Trenner */
.s-dienste-gruppe .s-ui { background: none; box-shadow: none; border-radius: 0; }
/* Titel plakativer (25.10., Pascal) */
.s-raster-122 .s-karte h3 { font: 500 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1.15 var(--font); letter-spacing: -.02em; }   /* auch Zyklus und Branchen gleich gross (25.10., Pascal) */
.s-dienste-gruppe > .s-karte-quer h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.s-dienste-gruppe > .s-karte .s-schritt-nr { margin-bottom: .5rem; }
.s-dienste-gruppe .s-ui-kopf, .s-dienste-gruppe .s-vs-kopf { display: none; }
.s-dienste-gruppe .s-ui-vs li:first-child::before { display: none; }
.s-dienste-gruppe .s-ui-vs li::before { background: rgb(11 29 43 / .08); }
.s-dienste-gruppe .s-ui-bpmn-rumpf { padding: 0; }
.s-dienste-gruppe .s-ui-plan .s-st { padding: .5rem 0 .2rem; }
html[data-thema="dunkel"] .s-dienste-gruppe .s-ui { background: none; box-shadow: none; }
html[data-thema="dunkel"] .s-dienste-gruppe > .s-karte .s-ecke { background: rgb(255 255 255 / .08); }
html[data-thema="dunkel"] .s-dienste-titel { color: var(--mint); }
@media (max-width: 760px) { .s-dienste-gruppe { grid-template-columns: minmax(0, 1fr); } }
.s-schritt-nr { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .8125rem; font-weight: 500; color: var(--grau); }
.s-schritt-nr span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--mint-hell); color: var(--tinte); font: 500 .75rem/1 var(--mono); }
.s-schritt-kern .s-schritt-nr span { background: var(--mint); color: #fff; }
/* Ziffern grösser und besser sichtbar (25.10., Pascal: «die 1. 2. 3. muss grösser, besser sichtbar sein») */
.s-dienste-gruppe .s-schritt-nr { gap: .7rem; font-size: 1rem; color: var(--tinte); }
.s-dienste-gruppe .s-schritt-nr span { width: 2.4rem; height: 2.4rem; background: var(--g-mint-tief); color: #fff; font: 600 1.05rem/1 var(--font); box-shadow: 0 6px 14px -6px rgb(0 120 98 / .5); }
html[data-thema="dunkel"] .s-dienste-gruppe .s-schritt-nr { color: var(--text-hell); }
html[data-thema="dunkel"] .s-dienste-gruppe .s-schritt-nr span { background: var(--mint); color: #0b1d2b; }
@media (max-width: 760px) {
  .s-raster-122 { grid-template-columns: minmax(0, 1fr); }
  .s-karte.s-karte-quer { grid-template-columns: minmax(0, 1fr); }
  .s-karte-quer .s-karte-text { padding: 1.5rem 1.5rem 0; }
}

@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: inset 0 0 0 1px var(--linie);
  transition: box-shadow 250ms ease, translate 250ms ease; }
.s-karte:hover { box-shadow: inset 0 0 0 1px var(--linie); }   /* kein Schlagschatten beim Überfahren (25.10., Pascal) */
/* Outline erscheint nach Entfernung zur Eintrittsstelle der Maus (25.10., Pascal: «nach Position bzw. Entfernung zum Mouseenter animieren, nicht dem
   Pfad entlang»): ein Kreis breitet sich vom Eintrittspunkt aus und macht den Rand sichtbar, wo er ihn erreicht; der Rand des Kreises ist weich
   (240 px). Das Skript setzt Eintrittspunkt (--ex, --ey) und die Entfernung zur fernsten Ecke (--rmax). Bei Fokus oder «Bewegung reduzieren» sofort ganz. */
@property --outline-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.s-karte::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; corner-shape: inherit; padding: 1.5px; pointer-events: none;
  /* dezent und mit Farbverlauf (25.10., Pascal): Farbe = Mint → Türkis → Himmel, 1 px dünn, 70 % Deckkraft; die Kreis-Enthüllung (240 px weiche Kante)
     liegt als Maske darüber */
  padding: 1px; opacity: 0;
  background: linear-gradient(135deg, var(--mint), var(--tuerkis) 55%, var(--g-himmel-kraeftig));
  -webkit-mask: radial-gradient(circle at var(--ex, 50%) var(--ey, 0%), #000 max(0px, var(--outline-r) - 240px), transparent var(--outline-r)), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, xor;
  mask: radial-gradient(circle at var(--ex, 50%) var(--ey, 0%), #000 max(0px, var(--outline-r) - 240px), transparent var(--outline-r)) intersect, linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 450ms ease, --outline-r 0s 450ms; }   /* Verlassen: nur ausblenden, Kreis springt danach unsichtbar zurück (25.10., Pascal: «auflösen über Transparenz, nicht zurück animieren») */
@media (hover: hover) { .s-karte:hover::after { opacity: .7; --outline-r: calc(var(--rmax, 1400px) + 240px); transition: opacity 0s, --outline-r 1800ms cubic-bezier(.25, .8, .3, 1); } }   /* Eintritt: ease-out, ruhiger Start, lange weich auslaufend (25.10., Pascal: «zu schnell», vorher 1100 ms) */
.s-karte:focus-visible::after { opacity: .7; --outline-r: 3000px; }
@media (prefers-reduced-motion: reduce) { .s-karte::after, .s-karte:hover::after { transition: none; } }
.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%, color-mix(in oklch, var(--g-mint-pastell) 55%, #fff) 0%, transparent 55%), radial-gradient(120% 120% at 100% 0%, color-mix(in oklch, var(--g-blau-pastell) 55%, #fff) 0%, transparent 60%), #f3f8fb; }
.s-verlauf-2 { background: radial-gradient(130% 130% at 100% 100%, color-mix(in oklch, var(--g-violett-pastell) 55%, #fff) 0%, transparent 60%), radial-gradient(100% 100% at 0% 0%, color-mix(in oklch, var(--g-mint-pastell) 55%, #fff) 0%, transparent 60%), #f6f7fd; }
.s-verlauf-3 { background: radial-gradient(130% 130% at 0% 0%, color-mix(in oklch, var(--g-himmel-pastell) 55%, #fff) 0%, transparent 60%), radial-gradient(100% 100% at 100% 100%, color-mix(in oklch, var(--g-mint-pastell) 55%, #fff) 0%, transparent 60%), #f4f8fc; }
.s-verlauf-4 { background: conic-gradient(from 200deg at 50% 50%, color-mix(in oklch, var(--g-mint-pastell) 45%, #fff), color-mix(in oklch, var(--g-himmel-pastell) 45%, #fff), color-mix(in oklch, var(--g-violett-pastell) 45%, #fff), color-mix(in oklch, var(--g-mint-pastell) 45%, #fff)); }
.s-verlauf-5 { background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklch, var(--g-violett-pastell) 55%, #fff) 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, color-mix(in oklch, var(--g-tuerkis-pastell) 55%, #fff) 0%, transparent 60%), #f6f8fb; }

/* 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(177 157 231 / .2), transparent 62%),
    radial-gradient(42rem 26rem at 88% 95%, rgb(137 170 239 / .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; }
/* Kartenstapel (25.10.): links Kopf fest, rechts Phasen-Karten, die beim Scrollen hängen bleiben und sich zudecken */
.s-zks { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.s-zks-kopf { position: sticky; top: var(--oben, 7.5rem); display: grid; gap: 1.5rem; justify-items: start; }
.s-zks-stapel { display: grid; padding-block: .5rem 1rem; }
.s-zks-blatt { --kipp: 0deg; position: sticky; top: calc(var(--oben, 7rem) + var(--i) * 1.1rem); margin-bottom: 42vh; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: 1.08rem; corner-shape: squircle; background: #fff; color: var(--tinte);
  rotate: var(--kipp); transform-origin: 50% 0; scale: calc(1 - var(--zu, 0) * .07); }
/* nach hinten transparenter statt dunkler (25.10., Pascal); nur der Inhalt blendet aus, die Fläche bleibt deckend, sonst scheinen die Texte der Karten dahinter durch («unschön») */
.s-zks-blatt > * { opacity: calc(1 - var(--zu, 0) * .85); }
.s-zks-blatt {
  box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 24px 50px -24px rgb(0 0 0 / .55); }
.s-zks-blatt:last-child { margin-bottom: 0; }
.s-zks-blatt:nth-child(2) { --kipp: 2deg; } .s-zks-blatt:nth-child(3) { --kipp: -2.2deg; } .s-zks-blatt:nth-child(4) { --kipp: 1.4deg; } .s-zks-blatt:nth-child(5) { --kipp: -1deg; }
.s-zks-ico { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--mint-hell); color: var(--g-mint-tief); }   /* ohne gestrichelte Kontur (25.10., Pascal) */
.s-zks-ico svg { width: 2rem; height: 2rem; }
.s-zks-ico .mint-ico :is(path, rect, circle, polygon, polyline) { stroke: currentColor; stroke-width: var(--ico-strich, 0); stroke-linejoin: round; }
.s-zks-nr { margin-top: 1.5rem; font-size: .875rem; font-weight: 500; color: var(--g-mint-tief); }
.s-zks-titel { margin-top: .2rem; font: 500 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--font); letter-spacing: -.02em; }
.s-zks-text { margin-top: .7rem; color: var(--grau); line-height: 1.6; text-wrap: pretty; }
.s-zks-ergebnis { margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: .9rem; background: var(--mint-hell); }
.s-zks-ergebnis b { font-size: .875rem; font-weight: 500; color: var(--g-mint-tief); }
.s-zks-ergebnis p { margin-top: .25rem; font-weight: 500; line-height: 1.45; }
.s-zks .s-zks-blatt .s-mehr { margin-top: 1.1rem; color: var(--g-mint-tief); }
/* ohne dunkle Box, direkt auf dem hellen Seitengrund (25.10., Pascal: «nicht schwarz hinterlegen mit einer Box») */
.s-zkc:has(.s-zk-varianten) { color: var(--tinte); }
.s-zkc:has(.s-zk-varianten)::before { display: none; }
.s-zkc:has(.s-zk-varianten) .s-zweiton .s-weiter { color: var(--grau); }
.s-zkc:has(.s-zk-varianten) .s-zks-kopf .s-mehr { color: var(--g-mint-tief); }
.s-zkc:has(.s-zk-varianten) .s-zks-blatt { box-shadow: inset 0 0 0 1px var(--linie), 0 24px 50px -28px rgb(11 29 43 / .3); }   /* feine Linie wie die übrigen Karten */
html[data-thema="dunkel"] .s-zkc:has(.s-zk-varianten) { color: var(--text-hell); }
html[data-thema="dunkel"] .s-zkc:has(.s-zk-varianten) .s-zks-kopf .s-mehr { color: var(--mint); }
@media (max-width: 899px) { .s-zks { grid-template-columns: minmax(0, 1fr); } .s-zks-kopf { position: static; } .s-zks-blatt { top: calc(5.5rem + var(--i) * .8rem); margin-bottom: 30vh; } }
@media (prefers-reduced-motion: reduce) { .s-zks-blatt { scale: none; } .s-zks-blatt > * { opacity: 1; } }
html[data-thema="dunkel"] .s-zks-blatt { background: #142636; color: var(--text-hell); }
html[data-thema="dunkel"] .s-zkc:has(.s-zk-varianten) .s-zks-blatt { box-shadow: inset 0 0 0 1px var(--linie), 0 24px 50px -28px rgb(0 0 0 / .6); }
html[data-thema="dunkel"] .s-zks-ico { background: rgb(83 193 170 / .16); color: var(--mint); }
html[data-thema="dunkel"] .s-zks-ergebnis { background: rgb(83 193 170 / .14); }
html[data-thema="dunkel"] :is(.s-zks-nr, .s-zks-ergebnis b) { color: var(--mint); } html[data-thema="dunkel"] .s-zks .s-zks-blatt .s-mehr { color: var(--mint); }
.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(--fokus); 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, var(--g-mint-tief), var(--g-mint-kraeftig)); }
.s-ref-bild.s-verlauf-2 { background: linear-gradient(135deg, var(--g-blau-tief), var(--g-himmel-kraeftig)); }
.s-ref-bild.s-verlauf-3 { background: linear-gradient(135deg, var(--g-violett-tief), var(--g-violett-kraeftig)); }
/* 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(177 157 231 / .2), transparent 62%),
    radial-gradient(70% 80% at 90% 100%, rgb(137 170 239 / .24), transparent 62%); }
.s-ab-inhalt { max-width: 30rem; }
.s-ab-kontakt :is(h3, .s-aufruf-titel) { 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(--fokus); 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: var(--g-blau-wolke); color: var(--g-blau-tief); }   /* Grafikfarben (21.10.) */
.s-ins-flieder { background: var(--g-violett-wolke); color: var(--g-violett-tief); }
.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(69 190 203 / .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(137 170 239 / .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-schieber, .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.) */
/* ===== Aus «Allgemeines» übernommen (21.10., Pascal: «neue Einträge, evtl. einiges für die Seite übernehmen») ===== */
/* Sprunglink «Zum Inhalt»: unsichtbar, bleibt aber im Tab-Weg; rein 120 ms mit Ausklang, raus 60 ms */
.s-sprung { position: fixed; left: 1rem; top: .75rem; z-index: 50; padding: .7rem 1.1rem; border-radius: .5rem; background: var(--tinte); color: #fff; font: 500 .9375rem/1 var(--font);
  opacity: 0; translate: 0 -4px; pointer-events: none; transition: opacity 60ms ease, translate 60ms ease; }
.s-sprung:focus-visible { opacity: 1; translate: 0 0; pointer-events: auto; outline: 2px solid var(--mint); outline-offset: 2px; transition: opacity 120ms cubic-bezier(.22, 1, .36, 1), translate 120ms cubic-bezier(.22, 1, .36, 1); }
main:focus { outline: none; }
/* Gestaltete Textmarkierung: markierter Text in Mint statt Systemblau (Mint 38 % nachgedunkelt, weisse Schrift ≈ 5 : 1) */
::selection { background: color-mix(in oklch, var(--mint), black 38%); color: #fff; }
html[data-thema="dunkel"] ::selection { background: color-mix(in oklch, var(--mint) 45%, transparent); color: var(--text-hell); }
/* Ruhige Ziffern: Zahlen, die untereinander oder nebeneinander stehen, behalten ihre Breite */
.s-zahlen b, .s-kunde-zahlen dd, .s-st-zahl { font-variant-numeric: tabular-nums; }
/* Druck-Feedback: alles Klickbare gibt beim Drücken leicht nach (hin 120 ms, zurück 220 ms) */
.s-knopf, .s-karte, .s-ref, .s-ab-kontakt, .s-ab-insights li a, .s-n-panel li a { transition-property: background-color, box-shadow, color, translate, scale, opacity; transition-duration: 200ms; }
:is(.s-knopf, .s-karte, .s-ref, .s-ab-kontakt, .s-ab-insights li a, .s-n-panel li a):active { scale: .985; transition-duration: 120ms; transition-timing-function: ease-out; }
.s-knopf:active { scale: .97; }
/* Fuss auf sehr kleinen Handys (320 px): Spalten dürfen schrumpfen, unter 420 px eine Spalte (Stolperfalle «Lange Wörter sprengen Box») */
@media (max-width: 800px) { .s-fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .s-fuss-raster { grid-template-columns: minmax(0, 1fr); } }
/* Zweiton-Titel auf sehr schmalen Handys etwas kleiner, lange Wörter wie «Geschäftsprozesse» brechen sonst über den Rand */
@media (max-width: 360px) { .s-zweiton { font-size: 1.55rem; } }
.s-zweiton, .s-riesig { overflow-wrap: break-word; }

/* ===== 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(--fokus); 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, .s-n-flaeche) { background: #102130; }
html[data-thema="dunkel"] .s-n-flaeche { box-shadow: 0 0 0 1px var(--linie), 0 24px 48px -20px rgb(0 0 0 / .6); }
html[data-thema="dunkel"] .s-nav.z-morph .s-n-panel { background: none; box-shadow: none; }
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: inset 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"] { --fokus: var(--g-blau-kraeftig); --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"] :is(.s-karte-bild, .s-dienste-gruppe > .s-karte).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%, color-mix(in srgb, var(--g-blau-kraeftig) 18%, transparent) 0%, transparent 60%), #0e1b26; }
html[data-thema="dunkel"] :is(.s-karte-bild, .s-dienste-gruppe > .s-karte).s-verlauf-2 { background: radial-gradient(130% 130% at 100% 100%, color-mix(in srgb, var(--g-violett-kraeftig) 20%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 0% 0%, rgb(83 193 170 / .18) 0%, transparent 60%), #0f1a28; }
html[data-thema="dunkel"] :is(.s-karte-bild, .s-dienste-gruppe > .s-karte).s-verlauf-3 { background: radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--g-blau-kraeftig) 20%, transparent) 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%, color-mix(in srgb, var(--g-violett-kraeftig) 15%, transparent) 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); }

/* ===== Baukasten für Unterseiten (18.10., stripe_seiten.py): Seitenkopf, Brotkrumen, Kartenraster, Ablauf, Text-Bild, dunkles Band
   mit Zitat, Fragen, Kundenkarte, Aufruf. Gleiche Mittel wie die Startseite: Poppins, Zweiton-Titel, Farbwolken, weiche Flächen, Tinte. */
/* Seitenkopf: kleiner als der Einstieg der Startseite, dieselbe Farbwolke etwas leiser; als erster Abschnitt läuft er unter den durchsichtigen Kopf */
.s-kopfseite { position: relative; overflow: clip; padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 4vw, 6rem); }
main > .s-kopfseite:first-child { margin-top: calc(-1 * var(--kopf-h)); padding-top: calc(var(--kopf-h) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem)); }
.s-kopfseite .s-band { opacity: .55; }
.s-kopfseite-innen { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.s-kopfseite-innen.z-allein { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .s-kopfseite-innen { grid-template-columns: minmax(0, 1fr); } }
.s-titel-gross { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.4rem); line-height: 1.1; letter-spacing: -.025em; max-width: 46rem; }
.s-kopfseite .s-einstieg-lead { max-width: 36rem; }
.s-kopfseite-bild { display: grid; place-items: center; min-width: 0; }
/* Brotkrumen (Muster «Brotkrumen – Schlicht» aus Allgemeines): Kette mit feinem Winkel als Trenner, die aktuelle Seite ohne Link */
.s-krumen { margin-bottom: 1.5rem; }
.s-krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; font-size: .875rem; color: var(--grau); }
.s-krumen li { display: flex; align-items: center; gap: .15rem; }
.s-krumen li:not(:last-child)::after { content: ""; flex: none; width: .3rem; height: .3rem; margin: 0 .45rem; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; rotate: -45deg; opacity: .6; }
.s-krumen a { padding: .2rem .1rem; border-radius: .3rem; transition: color 200ms ease; }
.s-krumen a:hover { color: #1c8f78; }
.s-krumen a:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.s-krumen [aria-current] { color: var(--tinte); font-weight: 500; }
/* Abschnittskopf: Zweiton-Titel mit optionalem Text darunter */
.s-abschnitt-kopf { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.s-abschnitt-kopf > p { max-width: 40rem; margin-top: 1rem; font-size: 1.0625rem; color: var(--grau); }
.s-abschnitt.z-eng { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
/* Kartenraster: ruhige Flächen mit Titel und Text, je eine weiche Farbwolke in der Ecke; als Link mit Pfeil-Ecke wie die Kacheln */
.s-kacheln { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .s-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .s-kacheln { grid-template-columns: minmax(0, 1fr); } }
.s-kachel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem 1.5rem 1.7rem; border-radius: .9rem;
  background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); transition: box-shadow 250ms ease; }
.s-kachel::before { content: ""; position: absolute; z-index: -1; right: -30%; top: -55%; width: 80%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ton, #a9e4d6) 70%, transparent), transparent); opacity: .7; }
.s-kachel h3 { font: 500 1.1875rem/1.3 var(--font); letter-spacing: -.01em; }
.s-kachel p { color: var(--grau); font-size: .9375rem; line-height: 1.6; }
a.s-kachel { padding-right: 3.5rem; }
a.s-kachel:hover { box-shadow: 0 0 0 1px #cfd8e0, 0 18px 40px -20px rgb(11 29 43 / .3); }
a.s-kachel:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
:is(a.s-kachel):is(:hover, :focus-visible) .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
:is(a.s-kachel):is(:hover, :focus-visible) .s-chev .s-spitze { transform: translateX(1.2px); }
/* Ablauf: Schritte auf einer Linie, die sich beim Hereinscrollen von links füllt; die Punkte werden nacheinander Mint (auf dem Handy senkrecht) */
.s-ablauf { --n: 3; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2rem; }
.s-ablauf li { position: relative; padding-top: 3.4rem; }
.s-ablauf li:not(:last-child)::before, .s-ablauf li:not(:last-child)::after { content: ""; position: absolute; left: 1.1rem; top: calc(1.1rem - 1px); width: calc(100% + 2rem); height: 2px; border-radius: 2px; }
.s-ablauf li:not(:last-child)::before { background: var(--linie); }
.s-ablauf li:not(:last-child)::after { background: var(--verlauf); transform-origin: 0 50%; scale: 0 1; transition: scale 700ms cubic-bezier(.6, 0, .3, 1) calc(var(--i) * 450ms + 200ms); }
.s-ablauf-nr { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #edf1f4;
  font: 500 .8125rem/1 var(--mono); color: var(--grau); transition: background-color 350ms ease calc(var(--i) * 450ms), color 350ms ease calc(var(--i) * 450ms), scale 450ms cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 450ms); }
.s-ablauf.z-sichtbar li:not(:last-child)::after { scale: 1 1; }
.s-ablauf.z-sichtbar .s-ablauf-nr { background: var(--mint); color: #fff; scale: 1.08; }
.s-ablauf-titel { font: 500 1.25rem/1.3 var(--font); letter-spacing: -.01em; }
.s-ablauf.z-senkrecht { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.s-ablauf.z-senkrecht li { padding: .2rem 0 0 3.4rem; }
.s-ablauf.z-senkrecht li:not(:last-child)::before, .s-ablauf.z-senkrecht li:not(:last-child)::after { left: calc(1.1rem - 1px); top: 1.1rem; width: 2px; height: calc(100% + 1.5rem); transform-origin: 50% 0; }
.s-ablauf.z-senkrecht li:not(:last-child)::after { scale: 1 0; }
.s-ablauf.z-senkrecht.z-sichtbar li:not(:last-child)::after { scale: 1 1; }
.s-ablauf p { max-width: 24rem; margin-top: .6rem; color: var(--grau); font-size: .9375rem; line-height: 1.6; }
.s-ablauf p + p { margin-top: .5rem; }
@media (max-width: 760px) {
  .s-ablauf { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .s-ablauf li { padding: .2rem 0 0 3.4rem; }
  .s-ablauf li:not(:last-child)::before, .s-ablauf li:not(:last-child)::after { left: calc(1.1rem - 1px); top: 1.1rem; width: 2px; height: calc(100% + 2.25rem); transform-origin: 50% 0; }
  .s-ablauf li:not(:last-child)::after { scale: 1 0; }
  .s-ablauf.z-sichtbar li:not(:last-child)::after { scale: 1 1; }
}
/* Text-Bild-Block: Text links, Bild oder Grafik rechts (umgekehrt mit .z-umgekehrt); auf dem Handy untereinander */
.s-textbild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.s-textbild.z-oben { align-items: start; }
.s-textbild.z-umgekehrt > :first-child { order: 2; }
@media (max-width: 900px) { .s-textbild { grid-template-columns: minmax(0, 1fr); } .s-textbild.z-umgekehrt > :first-child { order: 0; } }
.s-textbild-text > p { max-width: 34rem; margin-top: 1rem; color: var(--grau); font-size: 1.0625rem; line-height: 1.65; }
.s-textbild-text > .s-zweiton + p { margin-top: 1.5rem; }
.s-textbild-text .s-knoepfe { margin-top: 2rem; }
.s-bildfeld > div { display: grid; justify-items: center; width: 100%; }
.s-bildfeld { position: relative; display: grid; place-items: center; min-width: 0; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: .9rem; }
.s-kopfseite + .s-abschnitt.z-eng { padding-top: 0; }
/* breites Bildfeld unter dem Seitenkopf: die Produkt-Ansicht gross wie ein Bildschirmfoto */
.s-bildfeld.z-breit { min-height: clamp(16rem, 10rem + 14vw, 26rem); }
.s-bildfeld.z-breit .s-ui-bpmn { max-width: 50rem; }
.s-bildfeld.z-breit .s-ui-bpmn-rumpf { padding: 1rem 1.5rem .9rem; }
.s-bild-breit { margin: 0; overflow: hidden; border-radius: .9rem; box-shadow: 0 0 0 1px var(--linie); }
.s-bild-breit img { width: 100%; height: auto; aspect-ratio: 1200 / 520; object-fit: cover; }
@media (max-width: 640px) { .s-bild-breit img { aspect-ratio: 4 / 3; } }
/* Prozesslandkarte als UI-Karte: Führung oben, drei Kernprozesse als Pfeilkette, Unterstützung unten */
.s-ui.s-ui-lk { max-width: 26rem; }
.s-lk { display: grid; gap: .55rem; padding: 1rem; }
.s-lk-band { display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: .55rem; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.s-lk-band b { font-weight: 600; font-size: .8125rem; }
.s-lk-band span { color: var(--grau); font-size: .75rem; line-height: 1.4; }
.s-lk-kette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.s-lk-kette li { display: grid; place-items: center; min-height: 3.6rem; padding: .5rem 1rem .5rem 1.35rem; text-align: center; font-size: .75rem; font-weight: 500; line-height: 1.3;
  background: var(--mint-hell); color: var(--tinte); clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%, .7rem 50%); }
.s-lk-kette li:first-child { padding-left: .8rem; clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%); border-radius: .45rem 0 0 .45rem; }
.s-lk-kette li.z-kern { background: var(--mint); color: #fff; }
.s-bildfeld-text { margin-top: 1rem; max-width: 26rem; text-align: center; font-size: .875rem; color: var(--grau); text-wrap: balance; }
/* Einblenden beim Hereinscrollen (nur mit Skript, sonst steht alles da) */
.s-lk-kette li, .s-lk-band { transition: opacity 450ms ease calc(var(--i, 0) * 90ms), translate 550ms cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms); }
[data-zeigen].z-wartet :is(.s-lk-kette li, .s-lk-band) { opacity: 0; translate: 0 8px; }
/* Dunkles Band: Box in Inhaltsbreite mit den Farbwolken der Zyklus-Box */
.s-dunkelband { padding-block: clamp(2rem, 1rem + 3vw, 4rem); }
.s-dunkelband-box { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2rem, 1.25rem + 3.5vw, 4.5rem); border-radius: 1.25rem; background: var(--tinte); color: #fff; }
.s-dunkelband-box::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 75% at 6% 15%, rgb(83 193 170 / .28), transparent 62%), radial-gradient(45% 60% at 95% 5%, rgb(177 157 231 / .2), transparent 62%),
    radial-gradient(55% 70% at 92% 100%, rgb(137 170 239 / .24), transparent 62%); }
.s-dunkelband .s-zweiton .s-dunkel { color: #fff; }
.s-dunkelband .s-zweiton .s-weiter { color: #8fa3b3; }
.s-dunkelband-box > p { max-width: 44rem; margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.65; color: #9db0bf; }
/* Zitat (Muster «Zitat mit Anführungszeichen – Raffiniert»): das Zeichen zeichnet sich beim Hereinscrollen wie mit einem Stift */
.s-zitat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 1rem + 2vw, 3rem); align-items: start; margin: 0; max-width: 60rem; }
.s-zitat-zeichen { width: 2.6rem; height: 2.1rem; margin-bottom: 1.25rem; overflow: visible; }
.s-zitat-zeichen path { fill: var(--mint); stroke: var(--mint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-zeigen].z-wartet .s-zitat-zeichen path { fill: transparent; stroke-dasharray: 140; stroke-dashoffset: 140; }
.s-zitat.z-sichtbar .s-zitat-zeichen path { stroke-dasharray: 140; transition: stroke-dashoffset 900ms ease-out, fill 300ms ease-out 700ms; }
.s-zitat blockquote { margin: 0; }
.s-zitat blockquote p { font: 300 clamp(1.35rem, 1.05rem + 1.1vw, 2rem)/1.4 var(--font); letter-spacing: -.015em; text-wrap: pretty; }
.s-zitat-foto { width: clamp(4.5rem, 3.5rem + 3vw, 6.5rem); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgb(255 255 255 / .12); }
.s-zitat figcaption { display: grid; gap: .15rem; margin-top: 1.5rem; font-size: .9375rem; }
.s-zitat figcaption b { font-weight: 500; }
.s-zitat figcaption span { color: #9db0bf; }
@media (max-width: 640px) { .s-zitat { grid-template-columns: minmax(0, 1fr); } }
/* Fragen: native Aufklapper (Tastatur ohne Skript); Höhe gleitet, wo der Browser das kann; Plus dreht zum Minus */
.s-fragen { border-bottom: 1px solid var(--linie); interpolate-size: allow-keywords; }
.s-fragen details { border-top: 1px solid var(--linie); }
.s-fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; list-style: none; cursor: pointer;
  font: 500 1.0625rem/1.4 var(--font); letter-spacing: -.005em; }
.s-fragen summary::-webkit-details-marker { display: none; }
.s-fragen summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: .3rem; }
.s-fragen summary:hover { color: #1c8f78; }
.s-plus { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); transition: background-color 250ms ease; }
.s-plus::before, .s-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1.3px; border-radius: 2px; background: currentColor; translate: -50% -50%;
  transition: rotate 320ms cubic-bezier(.2, .8, .2, 1); }
.s-plus::after { rotate: 90deg; }
.s-fragen details[open] .s-plus::after { rotate: 0deg; }
.s-fragen details[open] .s-plus { background: var(--mint-hell); }
.s-fragen details::details-content { block-size: 0; overflow: clip; transition: block-size 380ms cubic-bezier(.2, .8, .2, 1), content-visibility 380ms allow-discrete; }
.s-fragen details[open]::details-content { block-size: auto; }
.s-fragen details p { max-width: 38rem; padding: 0 2.5rem 1.4rem 0; color: var(--grau); font-size: .9375rem; line-height: 1.65; }
/* Kundenkarte (Referenz): Logo auf Farbverlauf, Kurzbeschrieb, Kennzahlen, Schwerpunkte */
.s-kunde { overflow: hidden; width: 100%; max-width: 26rem; justify-self: end; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px var(--linie), 0 24px 50px -28px rgb(11 29 43 / .35); }
@media (max-width: 960px) { .s-kunde { justify-self: start; } }
.s-kunde .s-ref-bild { height: 9.5rem; }
.s-kunde-text { padding: 1.4rem 1.5rem 1.5rem; }
.s-kunde-text > p { color: var(--grau); font-size: .9375rem; }
.s-kunde-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1.25rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--linie); }
.s-kunde-zahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .3rem; min-width: 0; }
.s-kunde-zahlen dd { margin: 0; font: 300 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1 var(--font); letter-spacing: -.02em; white-space: nowrap;
  background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-kunde-zahlen dt { font-size: .75rem; line-height: 1.35; color: var(--grau); }
.s-pillen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.s-pille { padding: .3rem .65rem; border-radius: 99px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); font-size: .75rem; font-weight: 500; color: var(--grau); }
/* Aufruf am Seitenende: die Kontaktkarte der Startseite in ganzer Breite */
.s-ab-kontakt.s-aufruf { min-height: 0; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.s-aufruf .s-ab-inhalt { max-width: 36rem; }
.s-aufruf .s-knopf-weiss { margin-top: 0; }
.s-refs.z-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .s-refs.z-zwei { grid-template-columns: minmax(0, 1fr); } }
.s-refs.z-ohne-abstand { margin-top: 0; }
/* Sprungmarken: unter dem klebenden Kopf nicht verdeckt */
[id] { scroll-margin-top: calc(var(--kopf-h) + 1rem); }
.s-n-panel li a[aria-current] .s-n-text b, .s-m-gruppe li a[aria-current] { color: #1c8f78; }
.s-kacheln, .s-ablauf-nr, .s-bildfeld, .s-bild-breit, .s-lk-band, .s-dunkelband-box, .s-kunde, .s-plus { corner-shape: superellipse(1.1); }
.s-kachel, .s-bildfeld, .s-bild-breit, .s-dunkelband-box, .s-kunde { corner-shape: superellipse(1.1); }
@media (prefers-reduced-motion: reduce) { .s-fragen details::details-content { transition: none; } }
/* Dunkelmodus der Bausteine */
html[data-thema="dunkel"] .s-krumen [aria-current] { color: var(--text-hell); }
html[data-thema="dunkel"] .s-kachel::before { opacity: .22; }
html[data-thema="dunkel"] .s-ablauf-nr { background: #1e3242; }
html[data-thema="dunkel"] .s-ablauf.z-sichtbar .s-ablauf-nr { color: #0b1d2b; }
html[data-thema="dunkel"] .s-lk-kette li { color: var(--text-hell); }
html[data-thema="dunkel"] .s-lk-kette li.z-kern { color: #0b1d2b; }
html[data-thema="dunkel"] .s-kunde { background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); }
html[data-thema="dunkel"] :is(.s-dunkelband-box, .s-bild-breit) { box-shadow: inset 0 0 0 1px var(--linie); }
html[data-thema="dunkel"] .s-n-panel li a[aria-current] .s-n-text b, html[data-thema="dunkel"] .s-m-gruppe li a[aria-current] { color: var(--mint); }
html[data-thema="dunkel"] .s-bildfeld.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%, color-mix(in srgb, var(--g-blau-kraeftig) 18%, transparent) 0%, transparent 60%), #0e1b26; }
html[data-thema="dunkel"] .s-bildfeld.s-verlauf-2 { background: radial-gradient(130% 130% at 100% 100%, color-mix(in srgb, var(--g-violett-kraeftig) 20%, transparent) 0%, transparent 60%), radial-gradient(100% 100% at 0% 0%, rgb(83 193 170 / .18) 0%, transparent 60%), #0f1a28; }
/* ===== Weitere Bausteine für die übrigen Unterseiten (18.10. abends, «grob»: Inhalt vollständig, Gestaltung schlicht, keine neuen Einzelanimationen) */
.s-fuss-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .875rem; color: var(--grau); }
/* Karten mit Dachzeile und Link-Text */
.s-kachel-dach { font-size: .8125rem; font-weight: 500; color: #1c8f78; }
.s-kachel .s-mehr { padding-top: .6rem; font-size: .9375rem; }
.s-kacheln.z-zwei { --spalten: 2; }
/* Hinweis für die Umsetzung (Prototyp-Notizen aus dem Kunden-Prototyp, Fragen zum Wortlaut) */
.s-hinweis { display: flex; gap: .6rem; max-width: 44rem; margin-top: 1.5rem; padding: .85rem 1rem; border-radius: .6rem; box-shadow: inset 0 0 0 1px var(--linie);
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgb(11 29 43 / .025) 8px 9px); font-size: .8125rem; line-height: 1.5; color: var(--grau); }
.s-hinweis b { flex: none; font: 500 .6875rem/1.9 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte); }
/* Liste mit Haken */
.s-haken-liste { display: grid; gap: .65rem; margin-top: 1rem; }
.s-haken-liste li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .5rem; align-items: start; font-size: .9375rem; line-height: 1.55; }
.s-haken { width: 1.4rem; height: 1.4rem; padding: .2rem; border-radius: 50%; background: var(--mint-hell); fill: none; stroke: var(--gruen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-zwischentitel { margin-top: 1.75rem; font: 500 1rem/1.3 var(--font); }
/* Reiter im Seitenkopf (Branchen): Sprungmarken als Pillen */
.s-reiter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.s-reiter a { padding: .55rem .95rem; border-radius: 99px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); font-size: .875rem; font-weight: 500; transition: box-shadow 200ms ease, color 200ms ease; }
.s-reiter a:hover { color: #1c8f78; box-shadow: inset 0 0 0 1px var(--mint); }
.s-reiter a:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* Branche: Pille mit dem Namen über dem Titel, rechts die Kundenkarte */
.s-branche .s-pille { display: inline-block; margin-bottom: 1rem; }
.s-kunde .s-mehr { padding-top: .9rem; }
.s-kunde-weitere { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.s-kunde-weitere p { margin-top: .6rem; color: var(--grau); font-size: .875rem; }
.s-kunde-text h3 { font: 500 1.125rem/1.3 var(--font); margin-bottom: .5rem; }
/* Logos: einzeln in der Karte und als Wand */
.s-logozeile { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.s-logozeile img, .s-logowand img { width: auto; max-height: 2.6rem; max-width: 9rem; filter: grayscale(1) contrast(1.1); opacity: .75; mix-blend-mode: multiply; }
.s-logowand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.s-logowand img { max-height: 3.4rem; max-width: 80%; }
.s-logowand li { display: grid; place-items: center; min-height: 6.5rem; padding: 1rem; border-radius: .9rem; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); }
@media (max-width: 760px) { .s-logowand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Referenz-Karte mit Schwerpunkten, Text und Ergebnis (Übersicht) */
.s-ref-text .s-pillen { margin: 0 0 .9rem; }
.s-ref-text h3 { font: 500 1.125rem/1.35 var(--font); color: var(--tinte); }
.s-ref-text h3 + p { margin-top: .5rem; }
.s-ref-text .s-ref-ergebnis { margin-top: 1rem; padding: .8rem .95rem; border-radius: .6rem; background: var(--mint-hell); font-size: .875rem; line-height: 1.5; color: var(--tinte); }
.s-ref-ergebnis b { display: block; margin-bottom: .15rem; font-size: .75rem; font-weight: 500; color: #1c8f78; }
/* Foto im Seitenkopf */
.s-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .9rem; box-shadow: 0 0 0 1px var(--linie), 0 24px 50px -28px rgb(11 29 43 / .35); }
/* Lösungen (Technologie) */
.s-loesung-logo { display: flex; align-items: center; height: 2.6rem; margin: .6rem 0 .4rem; }
.s-loesung-logo img { max-height: 2.4rem; max-width: 9rem; width: auto; }
.s-loesung h3 small { display: block; margin-top: .1rem; font-size: .8125rem; font-weight: 400; color: var(--grau); }
.s-kachel .s-pille { align-self: flex-start; }
.s-kachel.z-dunkel { background: var(--tinte); color: #fff; box-shadow: none; }
.s-kachel.z-dunkel::before { background: radial-gradient(closest-side, rgb(83 193 170 / .45), transparent); opacity: .6; }
.s-kachel.z-dunkel p { color: #9db0bf; }
.s-kachel.z-dunkel .s-knopf { align-self: flex-start; margin-top: auto; }
/* Team */
.s-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 52rem; }
@media (max-width: 640px) { .s-team { grid-template-columns: minmax(0, 1fr); } }
.s-person { overflow: hidden; border-radius: .9rem; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); }
.s-person img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; }
.s-person div { padding: 1.1rem 1.25rem 1.3rem; }
.s-person h3 { font: 500 1.125rem/1.3 var(--font); }
.s-person p { color: var(--grau); font-size: .875rem; }
.s-person .s-mehr { padding-top: .6rem; font-size: .9375rem; }
/* Kontakt */
.s-kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
@media (max-width: 900px) { .s-kontakt-raster { grid-template-columns: minmax(0, 1fr); } }
.s-formular-karte { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: .9rem; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie); }
.s-formular-karte h2, .s-kontakt-seite h2 { font: 500 1.375rem/1.3 var(--font); letter-spacing: -.01em; }
.s-formular { display: grid; gap: 1.1rem; margin-top: 1.25rem; }
.s-feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 640px) { .s-feld-paar { grid-template-columns: minmax(0, 1fr); } }
.s-feld { display: grid; gap: .35rem; min-width: 0; }
.s-feld label { font-size: .875rem; font-weight: 500; }
.s-feld label span { font-weight: 400; color: var(--grau); }
.s-feld :is(input, select, textarea) { width: 100%; min-width: 0; padding: .75rem .85rem; border: 0; border-radius: .5rem; background: var(--papier); color: inherit; font: 400 1rem/1.4 var(--font);
  box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow 200ms ease; }
.s-feld textarea { min-height: 8rem; resize: vertical; }
.s-feld :is(input, select, textarea):focus { outline: none; box-shadow: inset 0 0 0 2px var(--mint); }
.s-fehler { display: none; font-size: .8125rem; color: var(--rot); }
.z-geprueft .s-feld :invalid { box-shadow: inset 0 0 0 1.5px var(--rot); }
.z-geprueft .s-feld :invalid ~ .s-fehler { display: block; }
.s-einwilligung { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .6rem; font-size: .875rem; color: var(--grau); }
.s-einwilligung input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--mint); }
.s-einwilligung a { color: #1c8f78; text-decoration: underline; }
.z-geprueft .s-einwilligung input:invalid { outline: 1.5px solid var(--rot); outline-offset: 2px; }
.s-formular button { border: 0; cursor: pointer; justify-self: start; }
.s-formular button:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.s-danke { padding: 1.25rem; border-radius: .7rem; background: var(--mint-hell); }
.s-danke:focus { outline: none; }
.s-danke h3 { font: 500 1.125rem/1.3 var(--font); }
.s-danke p { margin-top: .3rem; color: var(--grau); font-size: .9375rem; }
.s-direkt { display: grid; gap: .9rem; margin-top: 1rem; font-size: .9375rem; }
.s-direkt dt { font-size: .75rem; color: var(--grau); }
.s-direkt dd { margin: .1rem 0 0; }
.s-direkt a { color: #1c8f78; }
.s-direkt a:hover { text-decoration: underline; }
.s-kontakt-seite > * + * { margin-top: 2.5rem; }
.s-kontakt-seite .s-ablauf { margin-top: 1.25rem; }
.s-kontakt-seite > div > p { margin-top: 1rem; color: var(--grau); font-size: .9375rem; }
/* Rechtstexte (Impressum, Datenschutz) */
.s-rechtstext { max-width: 46rem; }
.s-rechtstext h2 { margin-top: 2.25rem; font: 500 1.25rem/1.35 var(--font); letter-spacing: -.01em; }
.s-rechtstext h2:first-child { margin-top: 0; }
.s-rechtstext :is(p, li, dd) { margin-top: .75rem; color: var(--grau); font-size: .9375rem; line-height: 1.7; overflow-wrap: anywhere; }
.s-rechtstext ul { padding-left: 1.2rem; list-style: disc; }
.s-rechtstext a { color: #1c8f78; text-decoration: underline; }
.s-rechtstext dl { margin: 0; }
.s-rechtstext dt { margin-top: .9rem; font-weight: 500; font-size: .9375rem; }
.s-rechtstext dd { margin: .1rem 0 0; }
.s-artikel { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.s-inhaltsverzeichnis { position: sticky; top: calc(var(--kopf-h) + 1rem); max-height: calc(100vh - var(--kopf-h) - 2rem); overflow-y: auto; font-size: .8125rem; }
.s-inhaltsverzeichnis p { margin-bottom: .6rem; font-weight: 500; }
.s-inhaltsverzeichnis ol { display: grid; gap: .1rem; }
.s-inhaltsverzeichnis a { display: block; padding: .25rem 0; color: var(--grau); }
.s-inhaltsverzeichnis a:hover { color: #1c8f78; }
@media (max-width: 900px) { .s-artikel { grid-template-columns: minmax(0, 1fr); } .s-inhaltsverzeichnis { position: static; max-height: none; } .s-inhaltsverzeichnis ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } }
.s-hinweis, .s-reiter a, .s-logowand li, .s-ref-ergebnis, .s-foto, .s-person, .s-formular-karte, .s-feld :is(input, select, textarea), .s-danke { corner-shape: superellipse(1.1); }
html[data-thema="dunkel"] .s-hinweis { background: none; }
html[data-thema="dunkel"] .s-hinweis b { color: var(--text-hell); }
html[data-thema="dunkel"] :is(.s-logozeile, .s-logowand) img { filter: grayscale(1) invert(1) brightness(1.3); mix-blend-mode: screen; }
html[data-thema="dunkel"] .s-logowand li { background: var(--papier); }
html[data-thema="dunkel"] .s-ref-text h3, html[data-thema="dunkel"] .s-ref-ergebnis { color: var(--text-hell); }
html[data-thema="dunkel"] :is(.s-kachel-dach, .s-direkt a, .s-einwilligung a, .s-rechtstext a) { color: var(--mint); }
html[data-thema="dunkel"] .s-kachel.z-dunkel { background: #0b1d2b; box-shadow: inset 0 0 0 1px var(--linie); }
html[data-thema="dunkel"] .s-loesung-logo img { filter: brightness(0) invert(1); opacity: .85; }