/* ===== Skizze «Passform»: legt sich über stripe.css ===== */
.pf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-platte { fill: #fff; filter: drop-shadow(0 1px 1px rgb(11 29 43 / .06)) drop-shadow(0 24px 40px rgb(11 29 43 / .12)); }
.pf-mulde { transition: filter 500ms ease; }
.pf-mulde.z-voll { filter: drop-shadow(0 0 10px rgb(83 193 170 / .55)); }
.pf-teil { filter: drop-shadow(0 10px 14px rgb(11 29 43 / .16)); }
.pf-teil.z-sitzt { filter: drop-shadow(0 2px 3px rgb(11 29 43 / .14)); }
/* Formen aus der Farbwolke: Zeichenfläche über der Wolke, unter Text und Platte */
.pf-flug, .pf-schiene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 899px) { .pf-schiene { display: none; } }
.s-einstieg-innen { position: relative; z-index: 1; }
/* Header-Konzepte: schienen (Standard), morph, flug – nur das gewählte ist sichtbar */
.pf-morph { display: none; }
html[data-kopf="morph"] .pf-morph { display: block; position: absolute; right: -22vw; top: 50%; width: min(78vw, 72rem);   /* grösser, rechts angeschnitten (26.10., Pascal) */ aspect-ratio: 1; translate: 0 -50%; pointer-events: none;
  filter: blur(var(--unschaerfe, 56px)); transition: filter 1.6s cubic-bezier(.65, 0, .35, 1); }
html[data-kopf="morph"] .pf-morph-form { position: absolute; inset: 0; clip-path: var(--form); transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1), rotate 1.6s cubic-bezier(.65, 0, .35, 1); rotate: var(--dreh, 0deg);
  background: var(--mint); }   /* flächig, ohne Verlauf (26.10., Pascal) */
html[data-kopf="morph"] .s-band, html[data-kopf="morph"] .pf-schiene, html[data-kopf="flug"] .pf-schiene { display: none; }
/* Header «Mitte» (31.10., Pascal, nach teleporthq.io): Text zentriert, Farbwolke oben rechts und unten links, sonst nichts im Header */
html[data-kopf="mitte"] .pf-schiene, html[data-kopf="mitte"] .pf-flug { display: none; }
html[data-kopf="mitte"] .s-band { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }   /* die Stripe-Maske blendet links aus, hier soll die Wolke unten links sichtbar sein */
html[data-kopf="mitte"] .s-einstieg-innen { text-align: center; }
/* Navigation oben mittig (31.10., Pascal): Logo links, Menü in der Mitte der Seite, «Kontakt» rechts; unter 900 px bleibt der Burger */
@media (min-width: 901px) { html[data-kopf="mitte"] .s-kopf-zeile { position: relative; justify-content: space-between; }
  html[data-kopf="mitte"] .s-nav { position: absolute; left: 50%; translate: -50% 0; margin-left: 0; } }
html[data-kopf="mitte"] .s-einstieg .s-riesig { margin-inline: auto; max-width: 16ch; text-wrap: balance; }
html[data-kopf="mitte"] .s-einstieg .s-einstieg-lead { margin-inline: auto; text-wrap: balance; }
html[data-kopf="mitte"] .s-einstieg .s-knoepfe { justify-content: center; }
html[data-kopf="mitte"] .s-band span:nth-child(1) { width: 52vw; right: -20vw; left: auto; top: -34%; bottom: auto; }
html[data-kopf="mitte"] .s-band span:nth-child(2) { width: 52vw; left: -22vw; right: auto; top: auto; bottom: -30%; filter: blur(34px); opacity: 1; background: radial-gradient(closest-side, var(--g-tuerkis-kraeftig) 35%, transparent); }
html[data-kopf="mitte"] .s-band span:nth-child(3) { width: 30vw; left: 6vw; right: auto; top: auto; bottom: -14%; opacity: .5; }   /* Schienen A/B/C zeichnen alle auf .pf-schiene */
/* Wolken schweben und verformen sich leicht (31.10., Pascal): langsames Driften, kleine Drehung, abwechselnd breiter/schmaler; jede Wolke eigenes Tempo */
html[data-kopf="mitte"] .s-band span { animation: pf-wolke 19s ease-in-out infinite; transform-origin: 50% 50%; }
html[data-kopf="mitte"] .s-band span:nth-child(2) { animation-duration: 24s; animation-delay: -8s; animation-direction: reverse; }
html[data-kopf="mitte"] .s-band span:nth-child(3) { animation-duration: 29s; animation-delay: -15s; }
@keyframes pf-wolke {
  0%, 100% { translate: 0 0; scale: 1 1; rotate: 0deg; }
  25% { translate: 2.5vw -3%; scale: 1.12 .9; rotate: 9deg; }
  50% { translate: -1.5vw 4%; scale: .92 1.1; rotate: -6deg; }
  75% { translate: -3vw -2%; scale: 1.06 .95; rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { html[data-kopf="mitte"] .s-band span { animation: none; } }
.pf-kopf-schalter { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; display: flex; gap: .25rem; padding: .3rem; border-radius: 99px; background: rgb(255 255 255 / .92);
  box-shadow: 0 0 0 1px var(--linie), 0 10px 30px -12px rgb(11 29 43 / .35); font: 500 .8125rem/1 var(--font); }
.pf-kopf-schalter span { padding: .45rem .6rem; color: var(--grau); }
.pf-kopf-schalter a { padding: .45rem .75rem; border-radius: 99px; color: var(--tinte); text-decoration: none; }
.pf-kopf-schalter a[aria-current="true"] { background: var(--tinte); color: #fff; }
/* Titel: Buchstabe unter dem Zeiger wird zur drehenden Form (26.10., Pascal) */
.pf-wort { display: inline-block; white-space: nowrap; }
.pf-zeichen { position: relative; display: inline-block; transition: color 200ms ease; }
.pf-zeichen.z-form { color: transparent; }
/* Walze (Einarmiger Bandit): der Buchstabe selbst wird durchsichtig, die Felder der Walze laufen einzeln durch (Lage, Grösse, Deckkraft per Skript) */
.pf-zeichen.z-walze { color: transparent; clip-path: inset(-.08em -.3em -.18em); }   /* oben und unten beschnitten: nichts fliegt über den Text darunter */
.pf-walze { position: absolute; left: 0; right: 0; top: 0; height: var(--h); pointer-events: none; }
.pf-wz { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: var(--h); opacity: 0; }
.pf-zeichen .pf-walze svg { position: static; translate: none; opacity: 1; scale: 1; width: .62em; height: .62em; margin-top: .12em; transition: none; }   /* stärker als die Hover-Regel .pf-zeichen svg (sonst unsichtbar) */
.pf-zeichen .pf-walze svg g { animation: none; }
.pf-zeichen svg { position: absolute; left: 50%; top: 56%; width: .62em; height: .62em; translate: -50% -50%; overflow: visible; pointer-events: none; opacity: 0; scale: .3;
  transition: opacity 200ms ease, scale 380ms cubic-bezier(.3, 1.5, .5, 1); }
.pf-zeichen.z-form svg { opacity: 1; scale: 1; }
.pf-zeichen svg g { animation: pf-dreh 1.6s linear infinite; transform-origin: 0 0; }
@keyframes pf-dreh { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .pf-zeichen svg g { animation: none; } }
/* Dienstleistungs-Grafiken auf Zeichenflächen */
.pf-dg { display: grid; place-items: center; width: 100%; height: 100%; max-width: 30rem; }
.pf-slot { display: none; }
html[data-g1="a"] [data-slot="1a"], html[data-g1="b"] [data-slot="1b"], html[data-g1="c"] [data-slot="1c"],
html:not([data-g2]) [data-slot="2a"], html[data-g2="a"] [data-slot="2a"], html[data-g2="b"] [data-slot="2b"], html[data-g2="c"] [data-slot="2c"],
html:not([data-g3]) [data-slot="3a"], html[data-g3="a"] [data-slot="3a"], html[data-g3="b"] [data-slot="3b"], html[data-g3="c"] [data-slot="3c"] { display: grid; }
html:not([data-g1]) [data-slot="1d"], html[data-g1="d"] [data-slot="1d"] { display: block; }
/* 1D (30.10., Skizze von Pascal): die Schienen laufen oben in die Kachel hinein und unten hinaus, darum reicht die Fläche über die ganze Kartenhöhe */
[data-slot="1d"] { height: 16rem; max-width: none; }
[data-slot="1d"] canvas { width: 100%; height: 100%; }
/* 31.10., Pascal: «alle Formen 5× so gross, heller und angeschnitten»: die Flächen von 1D, 2A und 3C liegen über der ganzen Kachel hinter dem Text,
   beschnitten wird nur am Kachelrand */
.s-dienste-gruppe > .s-karte:has(.pf-slot) .s-karte-bild { position: static; }
.s-dienste-gruppe > .s-karte .s-karte-text, .s-dienste-gruppe > .s-karte .s-ecke { position: relative; z-index: 1; }
.s-dienste-gruppe > .s-karte .s-ecke { position: absolute; }
html:not([data-g2]) [data-slot="2a"], html[data-g2="a"] [data-slot="2a"], html[data-g3="c"] [data-slot="3c"] { display: block; position: absolute; inset: 0; max-width: none; z-index: 0; }
[data-slot="2a"] canvas, [data-slot="3c"] canvas { width: 100%; height: 100%; }
@media (min-width: 761px) { html:not([data-g1]) .s-karte-quer .s-karte-bild, html[data-g1="d"] .s-karte-quer .s-karte-bild { position: static; }
  .s-dienste-gruppe [data-slot="1d"] { position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: auto; z-index: 0; max-width: none; } }
.pf-dg-schalter { bottom: 3.8rem; }
.pf-dg-schalter b { padding: .45rem .2rem .45rem .6rem; font-weight: 600; }
.pf-dg-schalter button { all: unset; cursor: pointer; padding: .45rem .6rem; border-radius: 99px; color: var(--tinte); }
.pf-dg-schalter button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.pf-dg-breit { max-width: 40rem; }
.pf-dg canvas { display: block; }   /* Grösse setzt das Skript: so breit wie möglich, aber nie höher als der Platz in der Kachel */
.pf-legende { margin: .4rem 0 0; font: 500 .75rem/1.4 var(--font); color: var(--grau); text-align: center; }   /* Kreislauf: die fünf Phasen als HTML-Zeile, kein Text im Canvas */
/* Boxen ohne graue Kontur (31.10., Pascal): feine Ringlinie weg, Schlagschatten bleiben */
.s-karte, .s-karte:hover, .s-dienste-gruppe > .s-karte, html[data-thema="dunkel"] .s-karte, .s-zkh-spur .s-zks-ergebnis, .s-ab-insights, .s-formular-karte, .s-ecke { box-shadow: none; }
.s-zkc:has(.s-zk-varianten) .s-zks-blatt { box-shadow: 0 24px 50px -28px rgb(11 29 43 / .3); }
html[data-thema="dunkel"] .s-zkc:has(.s-zk-varianten) .s-zks-blatt { box-shadow: 0 24px 50px -28px rgb(0 0 0 / .6); }
.s-ref { box-shadow: none; background: color-mix(in srgb, var(--linie) 45%, var(--flaeche)); }   /* hellgrau statt weiss (31.10., Pascal) */ .s-ref:hover { box-shadow: 0 18px 40px -20px rgb(11 29 43 / .3); }
/* Einleitung über den Dienstleistungen eingerückt (31.10., Pascal: «klebt links, soll nicht so breit laufen wie die Boxen darunter, so entsteht Spannung») */
/* Container sm (31.10., Pascal: «Text soll sm sein»): Titel und Lead mittig in der Stufe sm, die Kacheln darunter bleiben in lg */
.s-abschnitt:has(.s-dienste-gruppe) > .s-huelle > :is(.s-zweiton, .s-geschichte-lead) { max-width: var(--c-sm); margin-inline: auto; }
/* Kachel Prozessmanagement: Inhalt oben wie bei den beiden anderen Kacheln (gleicher Abstand oben und links, 24 px), nicht vertikal zentriert (31.10., Pascal) */
.s-dienste-gruppe > .s-karte-quer .s-karte-text { align-self: start; padding: 1.5rem 1.5rem 1.5rem; }
/* «Kontakt» oben: beim Hover flächig Mint, Schrift weiss (31.10., Pascal); Mint-Dunkel #1c8f78, damit Weiss gut lesbar bleibt */
header .s-knopf-kontur::before { background: #1c8f78; }
header .s-knopf-kontur:hover { color: #fff; }
header .s-knopf-kontur:hover::before { animation: none; }
/* Dienstleistungs-Kacheln (31.10., Pascal): oben, links und rechts gleicher Abstand (24 px) – Nummernkreis und Pfeil-Kästchen oben auf einer Linie;
   beim Hover wird der Eckradius konzentrisch zum Nummernkreis: Radius Kreis 19 px + Abstand 24 px = 43 px */
.s-dienste-gruppe > .s-karte { transition: border-radius 350ms cubic-bezier(.2, .7, .2, 1), box-shadow 200ms, background-color 200ms; }
.s-dienste-gruppe > .s-karte:hover { border-radius: 43px; }   /* nur beim Hover (31.10., Pascal); sonst bleibt der normale Radius */
.s-dienste-gruppe > .s-karte .s-schritt-nr { margin-top: 0; }
.s-dienste-gruppe > .s-karte .s-ecke { top: 1.5rem; right: 1.5rem; }
/* Pfeil: Kreis gleich gross wie der Nummernkreis (38 px); beim Hover wächst er nach links zur Pille, der Pfeil fährt aus (31.10., Pascal) */
.s-dienste-gruppe > .s-karte .s-ecke { width: 38px; height: 38px; border-radius: 999px; background: rgb(255 255 255 / 0); color: var(--tinte); box-shadow: none;
  transition: width 420ms cubic-bezier(.2, .8, .2, 1), background-color 250ms ease, color 250ms ease; }
.s-dienste-gruppe > .s-karte .s-ecke .s-chev { width: .95rem; height: .95rem; }
.s-dienste-gruppe > .s-karte:is(:hover, :focus-within) .s-ecke { width: 66px; background: #fff; }   /* ohne Hover kein Hintergrund, beim Hover weisse Pille (31.10., Pascal) */
/* Knöpfe als Pillen (31.10., Pascal: «versuch mal Pills»): ganz runde Enden, etwas mehr Luft links und rechts */
.s-knopf { border-radius: 999px; padding-inline: 1.35em; }
/* Pfeile mit eckigen Enden und spitzer Ecke statt rund (31.10., Pascal) */
.s-chev { stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; }
.s-chev .s-schaft { translate: 1.2px 0; scale: 1.35 1; }
.s-chev .s-spitze { transform-origin: 8px 5px; scale: 1.3; stroke-width: .885; }   /* Spitze grösser, um ihre Spitze herum (31.10., Pascal); Strich 1,15 / 1,3, damit gleich dick wie der Schaft */   /* Schaft etwas länger (wirkt nur, wenn er beim Hover ausgefahren ist; wächst nach links) */   /* die Spitze rückt beim Hover 1,2 nach rechts; der Schaft rückt mit, sonst bleibt mit eckigen Enden eine Lücke */
/* Label «Dienstleistungen» über den Kacheln weggelassen (31.10., Pascal); bleibt für Screenreader, weil es die Kachelgruppe benennt */
.s-dienste-titel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Navigation optisch wie die Kacheln (31.10., Pascal): Dropdown mit dem Kachel-Verlauf statt Weiss, Kachel-Radius, Symbole in weissen Kreisen
   wie der Nummernkreis, Hover = der Eintrag wird zur weissen Fläche (statt Wolken), keine Trennlinie; Hover-Fläche hinter den Menütiteln als Pille */
.s-n-flaeche, .s-nav:not(.z-morph) .s-n-panel { border-radius: .9rem;
  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-n-flaeche::after, .s-n-panel::after { background: #f3f8fb; }
.s-n-panel li a { border-radius: .9rem; transition: background-color 220ms ease; }
.s-n-panel li a::before { display: none; }
.s-n-panel li a:is(:hover, :focus-visible) { background: rgb(255 255 255 / .8); }
.s-n-panel .s-n-ico, .s-n-panel li a:is(:hover, :focus-visible) .s-n-ico { width: 38px; height: 38px; padding: .55rem; border-radius: 50%; background: #fff; color: #1c8f78; }
.s-n-fuss { border-top: 0; }
.s-n-schieber { border-radius: 999px; background: rgb(255 255 255 / .8); }
/* Phasen-Karten wie die Dienstleistungs-Kacheln (31.10., Pascal): 24 px Rand, Kopfzeile Symbol im weissen 38-px-Kreis + «Phase n» wie «1 Kernthema»,
   Pfeil ohne Hintergrund, beim Hover weisse Pille; Ecken beim Hover konzentrisch (43 px); Ergebnis-Feld als weisse Fläche ohne Linie */
.s-zkh-spur .s-zks-blatt.s-karte { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: .7rem; align-content: start; padding: 1.5rem;
  transition: border-radius 350ms cubic-bezier(.2, .7, .2, 1), box-shadow 200ms; }
.s-zkh-spur .s-zks-blatt.s-karte:hover { border-radius: 43px; }
.s-zkh-spur .s-zks-blatt > :not(.s-zks-ico, .s-zks-nr, .s-ecke) { grid-column: 1 / -1; }
.s-zkh-spur .s-zks-ico { width: 38px; height: 38px; background: #fff; }
.s-zkh-spur .s-zks-ico svg { width: 36px; height: 36px; }   /* 31.10., Pascal: Icons 80 % grösser (vorher 20 px) */
.s-zkh-spur .s-zks-nr { align-self: center; margin: 0; font-size: 1rem; font-weight: 500; color: var(--tinte); }
.s-zkh-spur .s-zks-titel { margin-top: 1rem; }
.s-zkh-spur .s-zks-ergebnis { background: rgb(255 255 255 / .8); box-shadow: none; }
.s-zkh-spur .s-zks-blatt .s-ecke { top: 1.5rem; right: 1.5rem; width: 38px; height: 38px; border-radius: 999px; background: rgb(255 255 255 / 0); color: var(--tinte); box-shadow: none;
  transition: width 420ms cubic-bezier(.2, .8, .2, 1), background-color 250ms ease; }
.s-zkh-spur .s-zks-blatt .s-ecke .s-chev { width: .95rem; height: .95rem; }
.s-zkh-spur .s-zks-blatt:is(:hover, :focus-visible) .s-ecke { width: 66px; background: #fff; }
/* Kein waagrechter Seiten-Scrollbalken: der Slider reicht mit 100vw um die Breite des senkrechten Scrollbalkens über den Rand (clip statt hidden, Sticky bleibt) */
html, body { overflow-x: clip; }
/* Balken unter dem Phasen-Slider wie ein Scrollbalken (31.10., Pascal): runde Schiene, ein Griff in Mint-Dunkel wandert von links nach rechts statt sich zu füllen */
.s-zkh-balken { width: 16rem; height: 4px; border-radius: 999px; background: rgb(11 29 43 / .08); max-width: calc(100% - 3rem); margin: 1.5rem auto 0; flex: none; }   /* mittig (31.10., Pascal); feste Breite, sonst schrumpft er im Flex-Pin auf 0 */
.s-zkh-balken i { width: 30%; margin-left: calc(var(--fort, 0) * 70%); scale: none; border-radius: 999px; background: #1c8f78; }
/* Branchen ohne Kachel, in der Breite sm (31.10., Pascal): Titel, darunter der Text (Standard bzw. die überfahrene Branche), darunter der Kartenfächer ganz sichtbar */
.pf-br-abschnitt .s-karte.s-karte-branchen { display: block; max-width: var(--c-sm); width: 100%; margin-inline: auto; padding: 0; background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.s-karte-branchen > .s-ecke { display: none; }
.s-karte-branchen .s-karte-text { padding: 0; }
.s-karte-branchen .s-karte-bild { height: auto; background: none; }
.s-karte-branchen .s-kk { margin-top: .75rem; justify-items: start; }
.s-karte-branchen .s-kk-lese { position: static; grid-area: 1 / 1; width: auto; max-width: none; min-height: 0; margin: 0; font-size: 1rem; }
.s-karte-branchen .s-kk-feld { grid-area: 2 / 1; margin-top: -1.5rem; }   /* oben im Feld ist Platz für das Anheben der Karten */
@media (max-width: 760px) { .s-karte-branchen .s-kk-lese { display: block; } }
/* ab 761 px nebeneinander (31.10., Pascal: «oder sonst nebeneinander, ohne Box, responsive untereinander»): links Titel und Text, rechts der Fächer.
   Bild- und Fächer-Hülle lösen sich auf (display: contents), damit Text und Fächer direkt im Raster der Branchen liegen; Massstab des Fächers nach der halben Breite */
@media (min-width: 761px) {
  .pf-br-abschnitt .s-karte.s-karte-branchen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 2rem; align-items: start; container-type: inline-size; }
  .s-karte-branchen .s-karte-text { grid-area: 1 / 1; }
  .s-karte-branchen .s-karte-bild, .s-karte-branchen .s-kk { display: contents; }
  .s-karte-branchen .s-kk-lese { grid-area: 2 / 1; margin-top: .75rem; }
  .s-karte-branchen .s-kk-feld { grid-area: 1 / 2 / 3 / 3; margin-top: 0; --e: min(1.25px, calc((50cqw - 1rem) / 330)); }
}
/* Fliesstext einheitlich wie der Lead unter «Die Arbeit beginnt beim Prozess.» (31.10., Pascal): 1.0625rem (17 px), Zeilenhöhe 1.6.
   Ausnahme bleibt der grosse Einleitungssatz im Header; Überschriften, Labels und Zahlen behalten ihre Grösse. */
main :is(.s-karte-text > p:not(.s-schritt-nr), .s-zks-text, .s-zks-ergebnis p, .s-ref-text p, .s-ab-insights p, .s-ab-inhalt p, .s-ab-inhalt li, .s-zahlen p, .s-kk-lese, .s-kk-lese span) { font-size: 1.0625rem; line-height: 1.6; }
.s-karte-branchen .s-kk-lese { --grafik-schrift: 1.0625rem; line-height: 1.6; }   /* die Vorlage erzwingt in Kachel-Grafiken var(--grafik-schrift) mit !important; hier auf Fliesstextgrösse setzen */
/* Branchen als eigener Abschnitt (31.10., Pascal): Breite sm, links Titel + Text, rechts Knöpfe untereinander – Pastelltöne mit dunkler Schrift (erst «tief» mit weisser Schrift, zu hart),
   beim Hover erscheint rechts der ganze Pfeil; schmal untereinander. Gleicher Abstand oben und unten. Karten-Fassung nur mit ?branchen=karten */
.pf-branchen { max-width: var(--c-sm); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.pf-br-titel { margin: 0; font: 500 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1.15 var(--font); letter-spacing: -.02em; }
.pf-br-titel a { color: inherit; text-decoration: none; }
.pf-br-lese { margin: .9rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--grau); text-wrap: pretty; }
.pf-br-lese b { display: block; margin-bottom: .2rem; font-weight: 600; color: var(--tinte); }
.pf-wort-w { display: inline-block; }   /* Wörter einzeln animierbar */
.pf-br-knoepfe { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pf-br-knopf { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.3rem .7rem .8rem; border-radius: 999px; background: color-mix(in oklch, var(--ton) 42%, #fff); color: var(--tinte);
  font: 500 1.0625rem/1.3 var(--font); text-decoration: none; transition: background-color 250ms ease; }
.pf-br-knopf { position: relative; overflow: hidden; isolation: isolate; }
.pf-br-knopf > * { position: relative; z-index: 1; }
/* 31.10., Pascal: «simple Füllanimation bei Hover ohne Formen» – der volle Ton füllt den Knopf von links nach rechts */
.pf-br-knopf::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ton); transform: scaleX(0); transform-origin: left center;
  transition: transform 550ms cubic-bezier(.2, .8, .2, 1); }
.pf-br-knopf:is(:hover, :focus-visible)::before { transform: scaleX(1); }
/* beim Hineinscrollen gleiten die Knöpfe nacheinander herein */
.pf-br-knoepfe li { opacity: 0; translate: 2rem 0; transition: opacity 500ms ease, translate 700ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 80ms); }
.pf-br-knoepfe.z-da li { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .pf-br-knoepfe li { opacity: 1; translate: none; transition: none; } .pf-br-knopf::before { transition: none; } }
/* Icon der Branche in einem hellen Kreis links; Pfeil dauerhaft als schlanke Spitze, beim Hover fährt der Schaft aus (31.10., Pascal) */
.pf-br-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .7); color: var(--tinte); }
.pf-br-ico svg { width: 20px; height: 20px; }
.pf-br-name { flex: 1; }
.pf-br-knopf .s-chev { flex: none; width: 1.05rem; height: 1.05rem; }
.pf-br-knopf:is(:hover, :focus-visible) .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
.pf-br-knopf:is(:hover, :focus-visible) .s-chev .s-spitze { transform: translateX(1.2px); }
.pf-br-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
@media (max-width: 760px) { .pf-branchen { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
html:not([data-branchen="karten"]) .pf-br-abschnitt .s-karte-branchen { display: none !important; }
html[data-branchen="karten"] .pf-branchen { display: none; }
/* Einheitlicher Abstand zwischen den Abschnitten (31.10., Pascal): --rhythmus = Abstand von Inhalt zu Inhalt (bei 1000 px Breite ≈ 200 px). Grundlage: jeder Abschnitt
   oben und unten die Hälfte; den Weissraum, den ein Inhalt selbst mitbringt, misst formen.js und gleicht ihn pro Abschnitt über --ausgleich aus (alle Seiten, jede Breite). */
:root { --rhythmus: clamp(9rem, 6rem + 10vw, 16rem); --halb: calc(var(--rhythmus) / 2); }
main > section:not(:first-child) { padding-block: var(--halb); margin-top: var(--ausgleich, 0px); }   /* --ausgleich setzt das Rhythmus-Skript (formen.js) */
main > section:first-child { padding-bottom: var(--halb); }
html main > .s-kopfseite + .s-abschnitt.z-eng { padding-top: var(--halb); }   /* ohne Innenabstand oben verschmilzt --ausgleich mit dem Rand des ersten Kindes (Margin-Collapsing) */
html[data-messen] :is([data-zeigen], [data-zeigen] *) { translate: none !important; transform: none !important; transition: none !important; }   /* nur während der Rhythmus-Messung */
/* Raster-Regel (31.10., Pascal: «passen alle Texte ins Raster? einheitliche Paddings»): Einleitungen (Titel + Text) in sm, Raster aus Kacheln/Karten/Zahlen in lg;
   alle Karten 24 px Innenabstand */
.s-zkc-karte.s-zk-varianten { padding-inline: 0; }   /* Phasen-Abschnitt hatte eine eigene Kante (71 px); jetzt Slider auf lg */
.s-zkh .s-zks-kopf { width: 100%; max-width: var(--c-sm); margin-inline: auto; }
main > .s-zkc + .s-abschnitt > .s-huelle > :is(.s-zweiton, .s-geschichte-lead) { max-width: var(--c-sm); margin-inline: auto; }   /* Referenzen-Einleitung in sm */
.s-ref-text, .s-ab-kontakt, .s-ab-insights { padding: 1.5rem; }
/* Logoband grösser (31.10., Pascal) */
.s-logos img { max-height: calc(3rem * var(--s, 1)); }
.s-logos-band li { padding-inline: 3.2rem; }
/* Umbruchregeln fürs Web (31.10., Pascal; Recherche: MDN hyphenate-limit-chars, web.dev Typografie, Allgemeines «text-wrap», «Silbentrennung», «Zeilenlänge»):
   Überschriften ausgeglichen (balance), ohne automatische Trennung; Fliesstext mit pretty (keine einzelnen Wörter in der letzten Zeile) und Silbentrennung
   nur für lange Wörter (ab 8 Zeichen, mindestens 3 vor und 3 nach dem Trennstrich; lang="de-CH" ist gesetzt); Zeilenlänge Fliesstext höchstens ~70 Zeichen */
main :is(h1, h2, h3, .s-zweiton, .s-riesig, .pf-br-titel) { text-wrap: balance; hyphens: manual; }
main :is(p, li, blockquote) { text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 12 5 4; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4; }   /* Prüfung 31.10.: 8 3 3 trennte zu oft */
main :is(.s-einstieg-lead, .s-zitat, .s-zitat *, .s-kachel-dach) { hyphens: manual; }
main :is(.s-knopf, .pf-br-knopf, .s-schritt-nr, .pf-wk-nr, .s-zks-nr, .s-mehr) { hyphens: manual; }
.pf-nb { white-space: nowrap; }
main .s-geschichte-lead { padding-right: max(0px, calc(100% - 70ch)); }   /* Kante bleibt sm, die Zeile wird nicht länger als ~70 Zeichen */
/* ===== Unterseiten im Passform-Stil (31.10., Pascal: «Raster, Gestaltungsstil, Umbruchregeln auf alle anderen Seiten») ===== */
html[data-seite="unter"] .pf-kopf-schalter { display: none; }
/* Kopf ohne Grafik zentriert wie die Startseite (Brotkrumen, Titel, Lead, Knöpfe); mit Grafik bleibt er zweispaltig */
html[data-seite="unter"] .s-kopfseite-innen.z-allein { text-align: center; }
html[data-seite="unter"] .s-kopfseite-innen.z-allein .s-zweiton { max-width: 22ch; margin-inline: auto; }
html[data-seite="unter"] .s-kopfseite-innen.z-allein .s-einstieg-lead { margin-inline: auto; }
html[data-seite="unter"] .s-kopfseite-innen.z-allein :is(.s-knoepfe, .s-krumen ol) { justify-content: center; }
/* Einleitungen (Abschnittskopf) in sm, linksbündig; Abstand Kopf → Inhalt einheitlich */
html[data-seite="unter"] .s-abschnitt-kopf { max-width: var(--c-sm); margin-inline: auto; margin-bottom: 3rem; }
html[data-seite="unter"] .s-abschnitt-kopf > p { max-width: none; padding-right: max(0px, calc(100% - 70ch)); }
/* Fliesstext 17 px (ohne Brotkrumen und Labels) */
html[data-seite="unter"] main :is(p, li, dd, td):not(.s-krumen *, .s-ui *, .s-bildfeld *, .s-lk *, .s-lk-kette *, .s-inhaltsverzeichnis *, .s-kunde-zahlen *, .s-zitat *, .s-reiter *, .s-pillen *, .s-pille, .s-schritt-nr, .s-zks-nr, .s-dienste-titel, .s-kk-name, .s-kachel-dach, .s-hinweis *) { font-size: 1.0625rem; line-height: 1.6; }
/* Pfeil in Karten: ohne Hintergrund, beim Hover weisse Pille (wie auf der Startseite) */
.s-karte .s-ecke { top: 1.5rem; right: 1.5rem; width: 38px; height: 38px; border-radius: 999px; background: rgb(255 255 255 / 0); color: var(--tinte); box-shadow: none;
  transition: width 420ms cubic-bezier(.2, .8, .2, 1), background-color 250ms ease; }
.s-karte .s-ecke .s-chev { width: .95rem; height: .95rem; }
.s-karte:is(:hover, :focus-within) .s-ecke { width: 66px; background: #fff; }
/* ===== Prüfung aller Seiten (31.10., 64 Befunde aus 5 Prüfern): Stil, Mobile, Dunkel ===== */
/* Zusammenhalt-Spans dürfen Flex- und Block-Regeln nicht brechen */
.s-zahlen span.pf-nb { display: inline; margin: 0; font: inherit; color: inherit; }
:is(.s-knopf, .s-mehr, .s-krumen a) .pf-nb { display: contents; }
.s-inhaltsverzeichnis .pf-nb { white-space: normal; }
/* Lead: Zeilenlänge aus der eigenen Breite (Prozent bezog sich auf die lg-Hülle) */
main .s-geschichte-lead { padding-right: max(0px, calc(min(100%, var(--c-sm)) - 70ch)); }
/* Zweispaltiger Unterseitenkopf (mit Grafik): Lead bündig unter dem Titel, Grafik oben an der lg-Kante */
html[data-seite="unter"] .s-kopfseite-innen:not(.z-allein) { align-items: start; }
html[data-seite="unter"] .s-kopfseite-innen:not(.z-allein) .s-einstieg-lead { margin-inline: 0; text-wrap: pretty; }
@media (min-width: 961px) { html[data-seite="unter"] .s-kopfseite-innen:not(.z-allein) .s-kopfseite-bild { justify-items: end; margin-top: 3.25rem; } }
@media (max-width: 960px) { html[data-seite="unter"] .s-kopfseite-bild > .s-bildfeld { width: 100%; } }
html[data-seite="unter"] .s-kopfseite-innen.z-allein .s-reiter { justify-content: center; }
/* Titel: lange Zweiton-Titel im Unterseitenkopf etwas kleiner; mobil alle Titel kompakter */
html[data-seite="unter"] .s-titel-gross:has(.s-weiter) { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); }
html[data-seite="unter"] .s-kopfseite-innen.z-allein .s-titel-gross:has(.s-weiter) { max-width: 26ch; }
@media (max-width: 640px) {
  html[data-seite="unter"] .s-kopfseite .s-titel-gross { font-size: clamp(1.625rem, 1.1rem + 2.6vw, 2rem); line-height: 1.12; }
  main .s-zweiton:not(.s-titel-gross, .s-riesig) { font-size: 1.6rem; line-height: 1.2; }
  html[data-seite="unter"] .s-kopfseite-innen.z-allein .s-einstieg-lead { font-size: 1.0625rem; }
}
/* Flache Flächen statt grauer Konturen (alle Seiten, hell und dunkel) */
:is(.s-kachel, .s-kachel:hover, .s-kunde, .s-ui, .s-person, .s-plus, .s-hinweis, .s-logowand li, .s-pille, .s-reiter a, .s-knopf-hell, .s-knopf-hell:hover, .s-bild-breit, .s-dunkelband-box, .s-formular-karte),
html[data-thema="dunkel"] :is(.s-kachel, .s-kunde, .s-ui, .s-person, .s-plus, .s-hinweis, .s-logowand li, .s-pille, .s-reiter a, .s-knopf-hell, .s-bild-breit, .s-dunkelband-box, .s-ab-kontakt, .s-karte, .s-formular-karte) { box-shadow: none; }
:is(.s-kunde, .s-logowand li, .s-hinweis) { background: color-mix(in srgb, var(--linie) 45%, var(--flaeche)); background-image: none; }
:is(.s-pille, .s-reiter a) { background: var(--mint-hell); color: var(--tinte); }
.s-pille { font-size: .8125rem; line-height: 1.3; }
.s-reiter a:hover { background: color-mix(in oklch, var(--g-mint-pastell) 60%, #fff); }
.s-knopf-hell { background: color-mix(in oklch, var(--g-mint-pastell) 35%, #fff); }
.s-knopf-hell:hover { background: color-mix(in oklch, var(--g-mint-pastell) 55%, #fff); }
.s-zkc-zeile.z-an::before, .s-zkc-ergebnis { box-shadow: none; }
.s-zahlen-reihe > div { border-left: 0; }
.s-zahlen-reihe > div > span { font-size: 1.0625rem; line-height: 1.6; }
.s-ins-thema { font-size: .8125rem; padding: .25rem .65rem; }
/* Einheitliche Innenabstände: Karten, Kacheln, dunkle Felder 24 px seitlich */
.s-kachel, .s-formular-karte, .s-person > div { padding: 1.5rem; }
.s-kachel:has(.s-ecke) .s-kachel-dach { padding-right: 3.5rem; }
.s-dunkelband-box, .s-zkc .s-zkc-karte:not(.s-zk-varianten) { padding-inline: 1.5rem; }
.s-kachel-dach { font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: #1c8f78; text-wrap: balance; }
/* Pfeil in Kacheln wie in den Karten: ohne Hintergrund, beim Hover weisse Pille */
.s-kachel .s-ecke { top: 1.5rem; right: 1.5rem; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgb(255 255 255 / 0); color: var(--tinte); box-shadow: none;
  transition: width 420ms cubic-bezier(.2, .8, .2, 1), background-color 250ms ease; }
.s-kachel .s-ecke .s-chev { width: .95rem; height: .95rem; }
.s-kachel:is(:hover, :focus-visible) .s-ecke { width: 66px; background: #fff; }
/* Symbol- und Nummernkreise: 38 px, weiss, Ziffer in Grundschrift */
.s-ablauf-nr, .s-ablauf.z-sichtbar .s-ablauf-nr { width: 38px; height: 38px; background: #fff; color: var(--tinte); font: 500 1rem/1 var(--font); scale: 1; }
.s-ablauf li:not(:last-child)::before, .s-ablauf li:not(:last-child)::after { left: 19px; top: 18px; }
.s-ablauf.z-senkrecht li:not(:last-child)::before, .s-ablauf.z-senkrecht li:not(:last-child)::after { left: 18px; top: 19px; }
.s-plus { width: 38px; height: 38px; background: #fff; }
.s-fragen details[open] .s-plus { background: var(--mint-hell); }
/* Referenzen: Kontrast der Links und Labels, Faktenkarte, Logowand */
.s-ref .s-mehr, .s-ref-ergebnis b { color: var(--g-mint-tief); }
.s-ref-ergebnis b { font-size: .8125rem; letter-spacing: .02em; }
.s-kunde-zahlen { border-top: 0; }
.s-kunde-zahlen dd { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.75rem); font-weight: 400; }
.s-kunde-zahlen dt { font-size: .8125rem; }
@media (min-width: 761px) { .s-team { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--c-sm); margin-inline: auto; } }
/* Fünf Kacheln in drei Spalten: zweite Reihe 2 × 1,5 Spalten statt Lücke */
@media (min-width: 961px) { .s-kacheln:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s-kacheln:has(> :nth-child(5):last-child) > * { grid-column: span 2; } .s-kacheln:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; } }
/* Rechtstexte und Hinweise in sm */
.s-abschnitt > .s-huelle > .s-rechtstext, .s-kacheln + .s-hinweis { max-width: var(--c-sm); margin-inline: auto; }
@media (min-width: 961px) { .s-artikel { display: grid; grid-template-columns: 15rem minmax(0, 42rem); justify-content: space-between; } .s-artikel .s-rechtstext { max-width: none; } }
.s-inhaltsverzeichnis li { font-size: .9375rem; line-height: 1.45; hyphens: manual; }
/* Grafiken: eigene kleine Schrift, keine Trennung */
.s-lk-kette li { font-size: .75rem; line-height: 1.3; hyphens: manual; }
.s-bildfeld .s-ui { box-shadow: none; }
/* Mobile */
@media (max-width: 760px) {
  .s-inhaltsverzeichnis ol { grid-template-columns: minmax(0, 1fr); columns: auto; }
  .s-logowand { gap: .75rem; } .s-logowand li { min-height: 5.5rem; padding: .5rem; } .s-logowand img { max-width: 100%; max-height: 3.2rem; }
  main :is(p, li, blockquote) { hyphenate-limit-chars: 12 5 4; }
}
@media (max-width: 640px) {
  .s-bildfeld.z-breit, .s-bildfeld.z-breit > *, .s-bildfeld.z-breit .s-ui { min-width: 0; max-width: 100%; }
  .s-bildfeld.z-breit .s-ui-bpmn-rumpf { max-width: 100%; overflow-x: auto; } .s-bildfeld.z-breit .s-ui-bpmn-rumpf svg { min-width: 34rem; }   /* nur die Grafik scrollt, nicht der Rahmen */
  .s-aufruf .s-knopf { width: 100%; justify-content: space-between; line-height: 1.3; padding-block: .8rem; text-align: left; }
  .s-hinweis { display: block; } .s-hinweis b { display: block; margin-bottom: .35rem; }
}
@media (max-width: 480px) { .s-lk-kette li { padding-inline: .9rem .5rem; } }
/* ===== Dunkel ===== */
html[data-thema="dunkel"] .pf-br-lese b { color: var(--text-hell); }
html[data-thema="dunkel"] .s-dienste-gruppe > .s-karte .s-karte-bild { background: none; }
html[data-thema="dunkel"] :is(.s-karte, .s-kachel, .s-zks-blatt) .s-ecke, html[data-thema="dunkel"] .pf-wk-pfeil { background: transparent; color: var(--text-hell); }
html[data-thema="dunkel"] :is(.s-karte:is(:hover, :focus-within), .s-kachel:is(:hover, :focus-visible), .s-zks-blatt:is(:hover, :focus-visible)) .s-ecke { background: rgb(255 255 255 / .14); }
html[data-thema="dunkel"] :is(.s-knopf-voll, .s-knopf-weiss) { background: var(--mint); color: #0b1d2b; }
html[data-thema="dunkel"] :is(.s-knopf-voll:hover, .s-ab-kontakt:hover .s-knopf-weiss, .s-knopf-weiss:hover) { background: #6fd0bb; }
html[data-thema="dunkel"] .s-knopf-hell { background: #16283a; color: var(--text-hell); }
html[data-thema="dunkel"] .s-knopf-hell:hover { background: #1e3242; }
html[data-thema="dunkel"] .pf-br-knopf { background: color-mix(in oklch, var(--ton) 22%, #0f1e2a); color: var(--text-hell); }
html[data-thema="dunkel"] .pf-br-knopf::before { background: color-mix(in oklch, var(--ton) 45%, #0f1e2a); }
html[data-thema="dunkel"] .pf-br-ico { background: rgb(255 255 255 / .1); color: var(--text-hell); }
html[data-thema="dunkel"] :is(.s-ablauf-nr, .s-ablauf.z-sichtbar .s-ablauf-nr, .s-plus) { background: #16283a; color: var(--text-hell); }
html[data-thema="dunkel"] :is(.s-pille, .s-reiter a) { background: rgb(255 255 255 / .06); color: var(--text-hell); }
html[data-thema="dunkel"] :is(.s-kunde, .s-logowand li, .s-hinweis) { background: var(--flaeche); }
html[data-thema="dunkel"] .s-ref .s-mehr, html[data-thema="dunkel"] .s-ref-ergebnis b, html[data-thema="dunkel"] .s-kachel-dach { color: var(--mint); }
html[data-thema="dunkel"] .s-bildfeld.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-bildfeld:is(.s-verlauf-4, .s-verlauf-5) { background: radial-gradient(120% 120% at 100% 0%, rgb(177 157 231 / .18) 0%, transparent 55%), radial-gradient(120% 120% at 0% 100%, rgb(83 193 170 / .16) 0%, transparent 55%), #0d1a26; }
/* Dunkel für die neuen Passform-Elemente (Navigation, Phasen, Kacheln): keine weissen Flächen */
html[data-thema="dunkel"] .s-n-flaeche, html[data-thema="dunkel"] .s-nav:not(.z-morph) .s-n-panel {
  background: radial-gradient(120% 120% at 0% 100%, rgb(83 193 170 / .16) 0%, transparent 55%), radial-gradient(120% 120% at 100% 0%, rgb(137 170 239 / .14) 0%, transparent 60%), #0f1e2a; }
html[data-thema="dunkel"] :is(.s-n-flaeche, .s-n-panel)::after { background: #0f1e2a; }
html[data-thema="dunkel"] .s-n-panel li a:is(:hover, :focus-visible) { background: rgb(255 255 255 / .06); }
html[data-thema="dunkel"] :is(.s-n-panel .s-n-ico, .s-n-panel li a:is(:hover, :focus-visible) .s-n-ico) { background: #16283a; color: var(--mint); }
html[data-thema="dunkel"] .s-n-schieber { background: rgb(255 255 255 / .08); }
/* Navigation einheitlich (31.10., Pascal: «Nav und Dropdown nicht einheitlich; Hintergrund doch nicht verlauffarbig, nur die Hover-Kästchen»):
   Dropdown weiss wie der Kopf, Farbe nur auf dem überfahrenen Eintrag und hinter dem Menütitel – beides derselbe Kachel-Verlauf */
:root { --pf-nav-hover: radial-gradient(120% 140% at 0% 100%, color-mix(in oklch, var(--g-mint-pastell) 60%, #fff) 0%, transparent 60%),
  radial-gradient(120% 140% at 100% 0%, color-mix(in oklch, var(--g-blau-pastell) 60%, #fff) 0%, transparent 65%), #f1f7fa; }
.s-n-flaeche, .s-nav:not(.z-morph) .s-n-panel { background: #fff; }
.s-n-flaeche::after, .s-n-panel::after { background: #fff; }
.s-n-panel li a:is(:hover, :focus-visible), .s-n-schieber { background: var(--pf-nav-hover); }
.s-n-panel .s-n-ico { background: var(--mint-hell); }
.s-n-panel li a:is(:hover, :focus-visible) .s-n-ico { background: #fff; }
html[data-thema="dunkel"] { --pf-nav-hover: radial-gradient(120% 140% at 0% 100%, rgb(83 193 170 / .2) 0%, transparent 60%), radial-gradient(120% 140% at 100% 0%, rgb(137 170 239 / .16) 0%, transparent 65%), #13263a; }
html[data-thema="dunkel"] .s-n-flaeche, html[data-thema="dunkel"] .s-nav:not(.z-morph) .s-n-panel, html[data-thema="dunkel"] :is(.s-n-flaeche, .s-n-panel)::after { background: #0f1e2a; }
html[data-thema="dunkel"] :is(.s-n-panel li a:is(:hover, :focus-visible), .s-n-schieber) { background: var(--pf-nav-hover); }
html[data-thema="dunkel"] :is(.s-n-panel .s-n-ico, .s-n-panel li a:is(:hover, :focus-visible) .s-n-ico) { background: #16283a; }
html[data-thema="dunkel"] .s-zkh-spur .s-zks-ico { background: #16283a; color: var(--mint); }
html[data-thema="dunkel"] .s-zkh-spur .s-zks-ergebnis { background: rgb(255 255 255 / .06); }
html[data-thema="dunkel"] :is(.s-dienste-gruppe .s-schritt-nr span, .pf-wk-nr span) { background: #16283a; color: var(--text-hell); }
/* ===== Prüfrunde 2 (31.10.) ===== */
/* Kreise auf weissem Grund: Mint-hell statt Weiss, sonst unsichtbar (weiss bleibt nur auf Pastellflächen) */
:is(.s-ablauf-nr, .s-ablauf.z-sichtbar .s-ablauf-nr, .s-fragen details:not([open]) .s-plus) { background: var(--mint-hell); color: var(--tinte); }
html[data-thema="dunkel"] :is(.s-ablauf-nr, .s-ablauf.z-sichtbar .s-ablauf-nr, .s-fragen details .s-plus) { background: #16283a; color: var(--text-hell); }
/* Kacheln: alte Regeln der Vorlage mit höherer Spezifität überstimmen */
a.s-kachel { padding: 1.5rem; }
a.s-kachel:has(.s-ecke) h3 { padding-right: 3.5rem; }
a.s-kachel:hover { box-shadow: none; }
.s-kachel p.s-kachel-dach { font-size: .8125rem; color: var(--g-mint-tief); }
html[data-thema="dunkel"] .s-kachel p.s-kachel-dach { color: var(--mint); }
html[data-thema="dunkel"] .s-dienste-gruppe > .s-karte .s-ecke { background: transparent; }
html[data-thema="dunkel"] .s-dienste-gruppe > .s-karte:is(:hover, :focus-within) .s-ecke { background: rgb(255 255 255 / .14); }
html[data-thema="dunkel"] :is(.s-kachel.z-dunkel, .s-zkc::before, .s-foto) { box-shadow: none; }
.s-foto { box-shadow: 0 24px 50px -28px rgb(11 29 43 / .35); }
/* Zahlenreihe: gleiche Spalten, mobil Trennung langer Wörter */
.s-zahlen-reihe { column-gap: 1.5rem; } .s-zahlen-reihe > div, .s-zahlen-reihe > div:first-child { padding-inline: 0; }
@media (max-width: 560px) { .s-zahlen-reihe > div > span { hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; } }
.pf-br-lese b { hyphens: manual; text-wrap: balance; }
/* Insights-Pillen im Dunkeln */
html[data-thema="dunkel"] .s-ins-blau { background: rgb(110 150 230 / .18); color: #a9c4f5; }
html[data-thema="dunkel"] .s-ins-flieder { background: rgb(150 120 230 / .18); color: #cdb8f5; }
/* Referenzen und Branchen: Kennzahlen und Links mit genug Kontrast */
.s-kunde-zahlen dd { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--g-mint-tief); }
html[data-thema="dunkel"] .s-kunde-zahlen dd { color: var(--mint); }
.s-kunde .s-mehr { color: var(--g-mint-tief); }
html[data-thema="dunkel"] .s-kunde .s-mehr { color: var(--mint); }
html[data-thema="dunkel"] .s-kunde .s-ref-bild { box-shadow: inset 0 0 0 100vmax rgb(8 19 28 / .35); }
.s-kunde-weitere img { max-height: none; height: 3.25rem; width: auto; }
/* Silbentrennung: in breiten Spalten und schmalen Karten seltener */
@media (min-width: 761px) { main :is(.s-abschnitt-kopf, .s-dunkelband-box, .s-ab-kontakt, .s-kunde, .s-kachel) :is(p, li) { hyphens: manual; } }
main :is(.s-ablauf p, .s-ref p, .s-ref-ergebnis p) { hyphenate-limit-chars: 15 6 5; }
.s-kunde p { hyphens: manual; }
@media (max-width: 760px) { .s-ablauf li { padding-left: 3rem; } .s-loesung-logo:empty { display: none; } }
/* Hinweise */
html[data-thema="dunkel"] .s-formular-karte .s-hinweis { background: rgb(255 255 255 / .05); }
.s-rechtstext .s-hinweis { max-width: none; }
/* Prozesslandkarte mobil: Pfeilfelder schmaler beschriftet; BPMN mobil mit Auslauf als Wisch-Hinweis */
@media (max-width: 480px) { .s-lk-kette { gap: .15rem; } .s-lk-kette li { font-size: .6875rem; padding-inline: .7rem .45rem; } .s-lk-kette li:first-child { padding-left: .6rem; } }
@media (max-width: 640px) { .s-bildfeld.z-breit .s-ui-bpmn-rumpf { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); } }
/* Vergleichs-Umschalter (nur lokal): mobil waagrecht scrollbar, dunkel abgedunkelt */
.pf-kopf-schalter { max-width: calc(100vw - 2rem); overflow-x: auto; scrollbar-width: none; } .pf-kopf-schalter :is(a, span, b, button) { white-space: nowrap; }
html[data-thema="dunkel"] .pf-kopf-schalter { background: rgb(22 40 58 / .92); } html[data-thema="dunkel"] .pf-kopf-schalter a:not([aria-current="true"]) { color: var(--text-hell); }
/* Container-Stufen (31.10., Pascal): xs–2xl und full; lg = die bisherige Seitenbreite 72rem. Jede Stufe mit 1,5rem Rand links und rechts.
   Klassen .pf-c-xs … .pf-c-full zum Zuweisen; die Einblendung .pf-cstufen (nur lokal, Schalter «Container» im Header-Umschalter) zeichnet alle Stufen. */
:root { --c-xs: 40rem; --c-sm: 48rem; --c-md: 64rem; --c-lg: 72rem; --c-xl: 80rem; --c-2xl: 96rem; }
.pf-c-xs { width: min(100% - 3rem, var(--c-xs)); margin-inline: auto; } .pf-c-sm { width: min(100% - 3rem, var(--c-sm)); margin-inline: auto; }
.pf-c-md { width: min(100% - 3rem, var(--c-md)); margin-inline: auto; } .pf-c-lg { width: min(100% - 3rem, var(--c-lg)); margin-inline: auto; }
.pf-c-xl { width: min(100% - 3rem, var(--c-xl)); margin-inline: auto; } .pf-c-2xl { width: min(100% - 3rem, var(--c-2xl)); margin-inline: auto; }
.pf-c-full { width: 100%; }
.pf-cstufen { display: none; position: fixed; inset: 0; z-index: 70; pointer-events: none; }   /* eigener Name: .pf-raster ist schon der Passform-Abschnitt */
html[data-cstufen] .pf-cstufen { display: block; }
.pf-cstufen > div { position: absolute; top: 0; bottom: 0; left: 50%; translate: -50% 0; width: min(100% - 3rem, var(--w)); border-inline: 1px dashed var(--f); }
.pf-cstufen > div.z-voll { width: 100%; border-inline: 3px solid var(--f); }
.pf-cstufen > div span { position: absolute; top: var(--y); left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--f); color: #fff; font: 600 11px/1.4 ui-monospace, monospace; white-space: nowrap; }
.s-kk-blatt { box-shadow: -8px 0 14px -10px rgb(11 29 43 / .5); }   /* Branchen-Karten: Farbfüllung am 31.10. ausprobiert und auf Wunsch zurückgenommen */
/* Branchen: Standardtext, solange keine Karte gewählt ist; blendet aus, sobald der Text einer Karte erscheint */
.pf-kk-standard { opacity: 0; pointer-events: none; }
.s-kk:has(.s-kk-lese.z-leer) .pf-kk-standard { opacity: 1; }
/* Navigation ohne Konturen (31.10., Pascal): Schieber hinter dem Menütitel, «Kontakt», Dropdown-Fläche und ihr Zeiger; Schatten des Dropdowns bleibt */
.s-n-schieber, header .s-knopf-kontur, html[data-thema="dunkel"] header .s-knopf-kontur { box-shadow: none; }
.s-n-panel, .s-n-flaeche { box-shadow: 0 24px 56px -16px rgb(11 29 43 / .28), 0 4px 12px rgb(11 29 43 / .06); }
.s-nav.z-morph .s-n-panel { box-shadow: none; }
.s-n-panel::after, .s-n-flaeche::after { box-shadow: none; }
/* Kacheln 2 und 3 gleich hoch wie Kachel 1 (26.10., Pascal): 19rem = 17rem Grafik + 2 × 1rem Rand der Querkachel */
@media (min-width: 761px) { .s-dienste-gruppe > .s-karte:not(.s-karte-quer) { height: 19rem; } .s-dienste-gruppe > .s-karte:not(.s-karte-quer) .s-karte-bild { min-height: 0; flex: 1; } }
/* Einstieg: Platte rechts neben dem Titel */
.pf-einstieg-raster { position: relative; }
.pf-einstieg { position: absolute; right: 0; top: 50%; width: min(34vw, 30rem); translate: 0 -46%; pointer-events: none; }
@media (max-width: 1100px) { .pf-einstieg { position: relative; right: auto; top: auto; translate: none; width: min(100%, 26rem); margin: 0 auto 1.5rem; } }
.pf-einstieg-raster .s-riesig, .pf-einstieg-raster .s-einstieg-lead { max-width: min(100%, 44rem); }
@media (min-width: 1101px) { .pf-einstieg-raster .s-riesig { max-width: 50rem; } .pf-einstieg-raster .s-einstieg-lead { max-width: min(36rem, 100% - 34vw); } }
/* Abschnitt «Eine Form verwandelt sich» (31.10.): steht beim Scrollen; links Titel + wechselnde Karte im Kachel-Stil + Punkte, rechts die grosse Form */
.pf-abschnitt { height: 320vh; padding-block: 0; }
.pf-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 5rem; box-sizing: border-box; }
.pf-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.pf-wechsel { display: grid; margin-top: 2rem; }
.pf-wk { grid-area: 1 / 1; position: relative; display: block; padding: 1.5rem; border-radius: .9rem; color: var(--tinte); text-decoration: none;
  opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity 450ms ease, translate 550ms cubic-bezier(.2, .8, .2, 1), border-radius 350ms cubic-bezier(.2, .7, .2, 1); }
.pf-wk.z-an { opacity: 1; translate: 0 0; pointer-events: auto; }
.pf-wk:hover { border-radius: 43px; }
.pf-wk-nr { display: flex; align-items: center; gap: .7rem; margin: 0 0 .5rem; font-size: 1rem; font-weight: 500; color: var(--tinte); }
.pf-wk-nr span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; font: 500 1rem/1 var(--font); }
.pf-wk h3 { margin: 1rem 0 0; font: 500 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--font); letter-spacing: -.02em; }
.pf-wk-text { margin: .6rem 0 0; color: var(--grau); line-height: 1.55; max-width: 34rem; }
.pf-wk-pfeil { position: absolute; top: 1.5rem; right: 1.5rem; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgb(255 255 255 / 0);
  transition: width 420ms cubic-bezier(.2, .8, .2, 1), background-color 250ms ease; }
.pf-wk-pfeil .s-chev { width: .95rem; height: .95rem; }
.pf-wk:is(:hover, :focus-visible) .pf-wk-pfeil { width: 66px; background: #fff; }
.pf-wk:is(:hover, :focus-visible) .s-chev .s-schaft { transform: scaleX(1); opacity: 1; }
.pf-wk:is(:hover, :focus-visible) .s-chev .s-spitze { transform: translateX(1.2px); }
.pf-punkte { display: flex; gap: .45rem; margin-top: 1.25rem; padding-left: 1.5rem; }
.pf-punkte span { width: 8px; height: 8px; border-radius: 999px; background: rgb(11 29 43 / .14); transition: width 400ms cubic-bezier(.2, .8, .2, 1), background-color 300ms ease; }
.pf-punkte span.z-an { width: 28px; background: #1c8f78; }
.pf-wandel { position: relative; height: min(70vh, 36rem); }
.pf-wandel canvas { display: block; width: 100%; height: 100%; }
/* ohne Stehenbleiben (schmal oder reduzierte Bewegung): alle Karten untereinander, keine Punkte */
@media (max-width: 899px), (prefers-reduced-motion: reduce) { .pf-abschnitt { height: auto; padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); } .pf-pin { position: static; height: auto; padding-top: 0; }
  .pf-wechsel { gap: .75rem; } .pf-wk { grid-area: auto; opacity: 1; translate: none; pointer-events: auto; } .pf-punkte { display: none; } }
@media (max-width: 899px) { .pf-raster { grid-template-columns: minmax(0, 1fr); } .pf-wandel { order: -1; height: 16rem; } }
html[data-thema="dunkel"] .pf-platte { fill: #16283a; }
html[data-thema="dunkel"] .pf-dienst.z-da a, html[data-thema="dunkel"] .pf-dienst a:hover { background: #16283a; }
html[data-thema="dunkel"] .pf-dienst a { color: var(--text-hell); }