/* ============================================================
   WebVerte v16 – Dunkelgrün / Bronze D
   Papier / Tinte / ein Akzent. Haarlinien statt Schatten.
   Keine externen Requests: Inter wird lokal ausgeliefert.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

/* Auf Latein-Umfang beschnittenes Subset (112 statt 352 KB), Achsen opsz und
   wght bleiben erhalten. Wie CSS und JS ein Jahr gecacht, deshalb traegt auch
   die Font-URL eine Version, die bei jeder Aenderung der Datei steigen muss. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2?v=2026-08-21-5") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Flächen */
  --paper:        #ffffff;
  --paper-warm:   #f5f5f2;
  --paper-deep:   #e8e8e2;
  --ink:          #0b0b0c;
  --ink-2:        #26262a;

  /* Text */
  --mute:         #67676d;
  --on-ink:       #f4f2ed;
  --on-ink-mute:  rgba(244, 242, 237, 0.62);

  /* Linien */
  --line:         rgba(11, 11, 12, 0.12);
  --line-strong:  rgba(11, 11, 12, 0.26);
  --line-on-ink:  rgba(244, 242, 237, 0.18);

  /* Bereich A: tiefes Waldgrün, ergänzt durch helle Salbeitöne. */
  --accent:       #0b3d2e;
  --accent-deep:  #072b21;
  --accent-bright:#a4c6b4;
  --accent-wash:  #eaf1ed;

  /* Maße */
  /* Gemeinsame Desktop-Flucht fuer Kopf und Inhalt. Der fruehere Textkoerper
     (1240 px) war deutlich schmaler als die zweigeteilte Navigation
     (1560 px). 1360 px bildet bewusst die Mitte: mehr Raum fuer Inhalte,
     zugleich ein ruhigerer, kompakterer Header. */
  --content:      1360px;
  --content-half: 680px;
  --measure:      64ch;
  --gutter:       clamp(20px, 4vw, 44px);
  --section:      clamp(64px, 8vw, 128px);
  --section-tight:clamp(44px, 5vw, 76px);

  /* Typo-Skala */
  --display-xl:   clamp(2.6rem, 6.4vw, 5.4rem);
  --display-lg:   clamp(2.1rem, 4.6vw, 3.9rem);
  --display-md:   clamp(1.7rem, 3vw, 2.7rem);
  --display-sm:   clamp(1.3rem, 2vw, 1.65rem);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-shift-duration: 0.95s;
  --header-shift-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bereich B: KI. Papier, Tinte und Typografie bleiben identisch,
   nur der Akzent wechselt. Das gibt sofortige Orientierung, ohne
   dass zwei Gestaltungssysteme entstehen. */
body.bereich-ki {
  /* Originalkupfer bleibt im Logo/Hero; Funktionstext erhält mehr Kontrast. */
  --accent:       var(--side-b-ink);
  --accent-deep:  #78431e;
  --accent-bright:#dbab84;
  --accent-wash:  #f6ebe2;
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 32 px Sprachleiste + 100 px Dual-Header + etwas optische Luft. */
  scroll-padding-top: 148px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.58;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--on-ink);
}
.skip-link:focus { left: 0; }

/* ---------- 2b. Bereichs-Splash (v14-Prototyp) ----------
   Ein weicher Kreis in der jeweiligen Markenfarbe waechst hinter dem
   Seiteninhalt aus der linken beziehungsweise rechten oberen Haelfte und
   verschwindet wieder vollstaendig. `main` liegt als transparenter
   Stacking-Context darueber: Text und Bedienelemente bleiben scharf,
   klickbar und unverdeckt. */
body {
  position: relative;
  isolation: isolate;
}
main {
  position: relative;
  z-index: 10;
}
/* Die Hero-Flaeche ist visuell ohnehin weiss. Transparent bleibt sie im
   Ruhezustand identisch, laesst den tiefer liegenden Splash aber durch. */
.hero.s-paper { background: transparent; }
.wave-effects-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.wave-splash {
  --splash-duration: 1.15s;
  --splash-scale: 1.35;
  --splash-opacity: 0.52;
  position: absolute;
  top: calc(var(--langbar-h) + 100px);
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  filter: blur(4px);
  will-change: transform, opacity;
}
.wave-left {
  left: 25%;
  background: radial-gradient(circle,
    rgba(11, 61, 46, 0.4) 0%,
    rgba(11, 61, 46, 0.15) 50%,
    transparent 70%);
}
.wave-right {
  left: 75%;
  background: radial-gradient(circle,
    rgba(166, 95, 43, 0.4) 0%,
    rgba(166, 95, 43, 0.15) 50%,
    transparent 70%);
}
.wave-splash.is-animating {
  animation: splash-expand var(--splash-duration) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes splash-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  15% { opacity: var(--splash-opacity); }
  100% {
    transform: translate(-50%, -50%) scale(var(--splash-scale));
    opacity: 0;
  }
}

@media (max-width: 1080px) {
  .wave-splash {
    --splash-duration: 1s;
    --splash-scale: 2.5;
    --splash-opacity: 0.7;
    top: calc(var(--langbar-h) + 96px);
    width: 150vw;
    height: 150vw;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: var(--section-tight); }
/* Schliesst direkt an den Hero an, deshalb oben weniger Luft. */
.section--anschluss { padding-top: clamp(36px, 4vw, 56px); }

.s-paper { background: var(--paper); }
.s-warm  { background: var(--paper-warm); }
.s-deep  { background: var(--paper-deep); }
.s-ink   { background: var(--ink); color: var(--on-ink); }

.s-ink .mute,
.s-ink .lead { color: var(--on-ink-mute); }
.s-ink .eyebrow { color: var(--on-ink-mute); }
.s-ink .eyebrow::before { background: var(--accent-bright); }

.rule { border-top: 1px solid var(--line); }

/* ---------- 4. Typografie ---------- */

.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  /* An der ersten Zeile ausrichten, nicht am gesamten Block. Sonst
     rutscht der Punkt bei zweizeiligen Eyebrows in die Mitte. */
  margin-top: 0.45em;
}

.display {
  font-size: var(--display-xl);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 16ch;
}

.h2 {
  font-size: var(--display-lg);
  line-height: 1.02;
  letter-spacing: -0.032em;
  font-weight: 500;
  max-width: 18ch;
}
.h2--wide { max-width: 26ch; }

.h3 {
  font-size: var(--display-md);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 500;
}

.h4 {
  font-size: var(--display-sm);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.19rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

.copy { color: var(--mute); max-width: var(--measure); }
.mute { color: var(--mute); }

.mono {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.stack > * + * { margin-top: 20px; }
.stack-sm > * + * { margin-top: 12px; }

/* Kopf einer Sektion: Titel links, Erläuterung rechts */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head .copy { font-size: 1rem; }
/* Zweiter Sektionskopf innerhalb derselben Sektion, etwa "Nach innen" auf /ki/. */
.section-head--abstand { margin-top: clamp(56px, 7vw, 96px); }

/* ---------- 5. Buttons und Links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 26px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.btn::after {
  content: "→";
  font-size: 15px;
  transition: transform 0.25s var(--ease);
}
.btn:hover::after { transform: translateX(4px); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent-deep); }

.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(11,11,12,0.04); }

.s-ink .btn--ghost { color: var(--on-ink); border-color: var(--line-on-ink); }
.s-ink .btn--ghost:hover { border-color: var(--on-ink); background: rgba(255,255,255,0.06); }

.btn--plain::after { content: none; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.tlink::after { content: "→"; }
.tlink:hover { gap: 14px; color: var(--accent-deep); }

.s-ink .tlink { color: var(--accent-bright); }

/* ---------- 5b. Sprachleiste ----------
   Schmale Tintenleiste ganz oben, nach dem Vorbild der BARTOSEK-Seite.
   Sie klebt ueber dem Header; dessen Sticky-Offset haengt an --langbar-h. */

:root { --langbar-h: 32px; }

.langbar {
  --langbar-bg: var(--ink);
  --langbar-text: var(--on-ink);
  --langbar-muted: var(--on-ink-mute);
  --langbar-line: rgba(244, 242, 237, 0.22);
  --langbar-indicator: rgba(244, 242, 237, 0.12);
  --langbar-flag-line: rgba(244, 242, 237, 0.3);
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--langbar-bg);
  color: var(--langbar-text);
  transition: background-color 0.36s var(--header-shift-ease), color 0.36s var(--header-shift-ease);
  view-transition-name: language-bar;
}
html[lang^="en"] .langbar {
  --langbar-bg: #eceae5;
  --langbar-text: var(--ink);
  --langbar-muted: rgba(11, 11, 12, 0.58);
  --langbar-line: rgba(11, 11, 12, 0.18);
  --langbar-indicator: rgba(255, 255, 255, 0.86);
  --langbar-flag-line: rgba(11, 11, 12, 0.24);
  box-shadow: inset 0 -1px rgba(11, 11, 12, 0.08);
}
.langbar-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  min-height: var(--langbar-h);
}
.lang-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: center;
  width: 116px;
  height: 26px;
  border: 1px solid var(--langbar-line);
  border-radius: 999px;
  isolation: isolate;
}
/* Ruhiger Schieber statt eines klassischen Slash-Umschalters. Seine Flaeche
   bleibt neutral, weil Sprache keine dritte Marken- oder Bereichsfarbe ist. */
.lang-switch::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: var(--langbar-indicator);
  transform: translateX(0);
  transition: transform 0.32s var(--header-shift-ease), background-color 0.36s var(--header-shift-ease);
  pointer-events: none;
}
.lang-switch:has(a[lang="en"][aria-current])::before { transform: translateX(100%); }
.lang-switch a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 24px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.08em;
  color: var(--langbar-muted);
  border-radius: 999px;
  transition: color 0.2s var(--ease);
}
.lang-switch a::before {
  content: "";
  width: 16px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 1px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 0 1px var(--langbar-flag-line);
  opacity: 0.7;
  filter: saturate(0.88);
  transition: opacity 0.2s var(--ease), filter 0.2s var(--ease);
}
.lang-switch a[lang="de"]::before {
  background-image: url("../img/flags/de.svg?v=7.5.0");
}
html[data-site-country="at"] .lang-switch a[lang="de"]::before {
  background-image: url("../img/flags/at.svg?v=7.5.0");
}
.lang-switch a[lang="en"]::before { background-image: url("../img/flags/gb.svg?v=7.5.0"); }
.lang-switch a:hover { color: var(--langbar-text); }
.lang-switch a:hover::before { opacity: 0.92; filter: saturate(0.96); }
.lang-switch a[aria-current] { color: var(--langbar-text); font-weight: 650; }
.lang-switch a[aria-current]::before { opacity: 1; filter: saturate(1); }
.lang-switch a[aria-current] { pointer-events: none; cursor: default; }
.lang-switch a:focus-visible {
  outline-color: var(--langbar-text);
  outline-offset: -3px;
}
.lang-sep { display: none; }

/* Sprachwechsel sind echte Links. Unterstuetzt der Browser seitenuebergreifende
   View Transitions, wischt nur die schmale Leiste vom Schalter aus in ihre
   neue helle bzw. dunkle Tonalitaet; ohne Unterstuetzung wechselt sie sofort. */
@view-transition { navigation: auto; }
::view-transition-group(language-bar) {
  animation-duration: 0.42s;
  animation-timing-function: var(--header-shift-ease);
}
::view-transition-old(language-bar) { animation: none; }
::view-transition-new(language-bar) {
  animation: language-bar-reveal 0.42s var(--header-shift-ease) both;
  transform-origin: right center;
}
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
@keyframes language-bar-reveal {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0); }
}

/* ---------- 6. Header ---------- */

.site-header {
  position: sticky;
  top: var(--langbar-h);
  z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
}

.header-mid { display: flex; align-items: center; gap: 22px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
/* Der Rahmen um das Logo-Zeichen traegt beim Bereichswechsel die abziehende
   Herkunftsfarbe (Abschnitt 6c). Er schmiegt sich exakt um das Bild, damit
   die Wischkante beider Schichten deckungsgleich laeuft; ohne Wechsel ist er
   ein reiner Rahmen ohne eigene Darstellung. */
.brand-w-stack { position: relative; display: inline-flex; flex: 0 0 auto; }
.brand-w { height: 28px; width: auto; flex: 0 0 auto; }
.brand-mark {
  position: relative;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.brand-sub {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  max-width: 22ch;
  line-height: 1.25;
}

.area-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  flex: 0 0 auto;
}
.area-switch a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 450;
  white-space: nowrap;
  color: var(--ink-2);
  transition: background 0.18s, color 0.18s;
}
.area-switch a + a { border-left: 1px solid var(--line-strong); }
.area-switch a:hover { background: var(--paper-warm); color: var(--ink); }
.area-switch .marker {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  opacity: 0.7;
}
/* Die Buchstabenmarker tragen die Bereichsfarben. Der kompakte Umschalter
   erhaelt so die Zweifarbigkeit der grossen Kopfzeile, ohne lauter zu werden. */
.area-switch a:not([aria-current]) .marker { opacity: 1; }
/* `$=` statt `=`: matcht /web/ ebenso wie /en/web/, sonst blieben die
   Marker im englischen Spiegelbaum grau. */
.area-switch a[href$="/web/"]:not([aria-current]) .marker { color: var(--side-a); border-color: var(--side-a); }
.area-switch a[href$="/ki/"]:not([aria-current]) .marker { color: var(--side-b-ink); border-color: var(--side-b-ink); }

/* Der aktive Bereich traegt seine eigene Akzentfarbe. Auf der KI-Seite
   setzt `body.bereich-ki` das Token um, die Regel bleibt dieselbe. */
.area-switch a[aria-current="true"] {
  background: var(--accent);
  color: #fff;
}
.area-switch a[aria-current="true"] .marker { opacity: 1; border-color: rgba(255,255,255,0.7); }
.area-switch a[aria-current="true"]:hover { background: var(--accent-deep); color: #fff; }

.nav { display: flex; align-items: center; gap: 24px; }
/* Der CTA in der Navigation ist ausschliesslich die mobile Variante. */
.nav > .btn { display: none; }
.nav a {
  font-size: 15px;
  font-weight: 450;
  color: var(--ink-2);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.nav a[aria-current] {
  color: var(--accent);
  border-bottom-color: currentColor;
  font-weight: 600;
}
.nav a[aria-current="page"] { pointer-events: none; cursor: default; }

.header-cta { display: inline-flex; }
.header-cta .btn { padding: 12px 20px; font-size: 14.5px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background 0.2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1120px) {
  .brand-sub { display: none; }
}

/* Ab hier uebernimmt die kompakte Kopfzeile: Burger plus A/B-Tab-Leiste.
   Die Schwelle liegt bei 1080px, weil die zweigeteilte Kopfzeile darunter
   ihre Menuepunkte nicht mehr unterbringt (Tablets im Querformat). */
@media (max-width: 1080px) {
  /* Die Sprachleiste bleibt so flach wie am Desktop, damit der Kopf nicht
     unnoetig Hoehe frisst. Die Tippflaeche der Sprachlinks kommt aus der
     Breite, nicht aus der Hoehe. */
  .lang-switch { width: 120px; }
  .lang-switch a { padding: 0 8px; }

  /* Die Weichzeichnung hinter der klebenden Kopfzeile muss der Browser bei
     jedem Scrollschritt neu rechnen – auf Touch-Geraeten der teuerste Teil
     der Seite. Ab hier deshalb eine deckende Flaeche ohne Filter. */
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle { display: inline-flex; }
  .header-mid { display: contents; }
  /* Als randlose Tab-Leiste: laeuft bis an beide Displayraender und
     schliesst buendig mit der Header-Unterkante ab. Die 2px-Akzentlinie
     des Headers bildet die gemeinsame Unterkante der beiden Tabs. */
  .area-switch {
    order: 3;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    margin-bottom: 0;
    border-inline: 0;
    border-bottom: 0;
  }
  .area-switch a {
    flex: 1 1 0;
    justify-content: center;
    gap: 6px;
    padding: 13px 4px;
    font-size: 12px;
    letter-spacing: -0.01em;
  }
  .area-switch .marker { width: 16px; height: 16px; font-size: 8.5px; }
  .header-grid { flex-wrap: wrap; padding-top: 12px; }
  .brand-sub { display: block; }
  .nav {
    /* Haengt an der Unterkante der klebenden Kopfzeile. `absolute` gegen den
       sticky Header statt `fixed` gegen den Viewport: so beginnt das Menue
       ohne Rechenwert genau unter der A/B-Leiste und bleibt richtig, wenn
       die Kopfzeile ihre Hoehe aendert. (Ohne backdrop-filter spannt der
       Header keinen Containing Block fuer fixe Nachfahren mehr auf.) */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Ueber der Akzentlinie des Headers (::after) und der Tab-Leiste. */
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17.5px; }
  .nav > .btn {
    display: inline-flex;
    justify-content: center;
    margin-top: 20px;
    border-bottom: 0;
  }
  /* `.nav a` ist spezifischer als die Button-Klassen, Farbe hier
     zuruecksetzen. Auf Bereichsseiten ist der Menue-CTA ein btn--accent
     und traegt damit die Bereichsfarbe, auf neutralen Seiten Tinte. */
  .nav > .btn--primary { color: var(--paper); }
  .nav > .btn--primary:hover { color: var(--paper); border-bottom: 0; }
  .nav > .btn--accent { color: #fff; }
  .nav > .btn--accent:hover { color: #fff; border-bottom: 0; }
  .header-cta { display: none; }
}

/* Neben dem breiteren Logo-Zeichen (seit v08) draengt die Unterzeile den
   Burger sonst in eine eigene Zeile. Der A/B-Umschalter direkt darunter
   traegt die Bereichsinformation ohnehin. */
@media (max-width: 500px) {
  .header-grid .brand-sub { display: none; }
}


/* ---------- 6b. Zweigeteilte Kopfzeile der Bereichs-Startseiten ----------
   Aufbau: Bereich A | Wortmarke | Bereich B.
   Der aktive Bereich zeigt seine Menüpunkte, der andere nur das Sprungziel.
   Der Zustand ergibt sich aus der aufgerufenen Seite, nicht aus einem
   JavaScript-Schalter. Dadurch bleibt beides für Crawler sichtbar und die
   Seite funktioniert ohne JavaScript.                                        */

:root {
  --side-a: #0b3d2e;
  --side-b: #a65f2b;
  --side-b-ink: #a65f2b;
}

.site-header--dual { border-bottom: 1px solid var(--line); }
.site-header--dual .header-grid { display: none; }
/* Kopf, Sprachschalter und Seiteninhalt enden nun auf derselben Flucht. */
.site-header--dual > .nav-dual { max-width: var(--content); padding-inline: var(--gutter); }

.nav-dual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  /* Eine Hoehe fuer alle Zustaende: Der Neutral-Kasten (Marke plus Leiste)
     braucht 100 px, und die Kopfzeile soll beim Bereichswechsel nicht
     springen — also gelten die 100 px auch angedockt (Nutzerentscheid). */
  min-height: 100px;
}

/* Beim Wechsel in einen Bereich waechst dessen Haelfte, und die Wortmarke
   rutscht dadurch in Richtung des anderen Bereichsknopfes.
   `grid-template-columns` ist animierbar, solange beide Zustaende gleich
   viele Spuren haben. Wo das nicht unterstuetzt wird, springt es direkt
   auf den Endwert, was ebenfalls richtig aussieht.

   Die inaktive Haelfte darf nie schmaler werden als ihr Inhalt (Pfeil-Pille
   plus Beschriftung), sonst ragt sie ueber die Wortmarke. `max-content` als
   Minimum verhindert das; den fehlenden Platz gibt die aktive Haelfte ab. */
.nav-dual[data-zustand="a"] {
  grid-template-columns: minmax(0, 1.45fr) auto minmax(max-content, 0.95fr);
  animation: dock-a var(--header-shift-duration) var(--header-shift-ease);
}
.nav-dual[data-zustand="b"] {
  grid-template-columns: minmax(max-content, 0.95fr) auto minmax(0, 1.45fr);
  animation: dock-b var(--header-shift-duration) var(--header-shift-ease);
}

/* Nur der Startwert ist animiert. Der Endzustand steht in der Regel selbst,
   damit der Header auch ohne laufende Animationen richtig steht. Die
   minmax-Minima muessen je Spur zum Endwert passen, sonst wird die
   Interpolation verworfen und der Header springt. */
@keyframes dock-a { from { grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); } }
@keyframes dock-b { from { grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); } }

/* Rueckweg: Von einer Bereichsseite zurueck auf den neutralen Einstieg
   loest sich die Aufteilung wieder zur Mitte. site.js setzt `data-von`,
   wenn die vorige Seite ein Bereich war. Der Startwert ist rein fr-basiert,
   damit er zum neutralen Endzustand interpoliert; die anfangs zu schmale
   Haelfte weitet sich dabei sofort. */
.nav-dual[data-zustand="neutral"][data-von="a"] { animation: undock-a var(--header-shift-duration) var(--header-shift-ease); }
.nav-dual[data-zustand="neutral"][data-von="b"] { animation: undock-b var(--header-shift-duration) var(--header-shift-ease); }
@keyframes undock-a { from { grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 0.95fr); } }
@keyframes undock-b { from { grid-template-columns: minmax(0, 0.95fr) auto minmax(0, 1.45fr); } }

.dual-half {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0 clamp(10px, 1.4vw, 20px);
  text-decoration: none;
  color: inherit;
}
.dual-half[data-side="a"] { --side: var(--side-a); justify-content: flex-start; }
.dual-half[data-side="b"] { --side: var(--side-b-ink); justify-content: flex-end; }

/* Akzentleiste am unteren Rand, wächst aus der jeweiligen Außenkante */
.dual-half::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--side);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease);
}
.dual-half[data-side="a"]::after { transform-origin: left; }
.dual-half[data-side="b"]::after { transform-origin: right; }
.dual-half[data-active]::after { transform: scaleX(1); transition-delay: 0.24s; }

.dual-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.dual-half[data-side="a"] .dual-label { order: 1; }
.dual-half[data-side="b"] .dual-label { order: 3; }

.dual-letter {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  font-weight: 600;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.dual-half[data-active] .dual-label { color: var(--side); }
.dual-half[data-active] .dual-letter {
  background: var(--side);
  border-color: var(--side);
  color: #fff;
}

/* Sprungziel im inaktiven Bereich */
.dual-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--mute);
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* Im Neutralzustand ist der Aufruf deutlicher: beide Bereiche sind gleichwertig
   und werden aktiv angeboten, keiner ist vorausgewählt. */
.nav-dual[data-zustand="neutral"] .dual-switch {
  border-color: var(--side);
  color: var(--side);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.dual-half[data-side="a"] .dual-switch { order: 2; }
.dual-half[data-side="b"] .dual-switch { order: 2; }
.dual-half:hover .dual-switch,
.dual-half:focus-visible .dual-switch {
  background: var(--side);
  border-color: var(--side);
  color: #fff;
}
.dual-half:hover .dual-letter,
.dual-half:focus-visible .dual-letter {
  background: var(--side);
  border-color: var(--side);
  color: #fff;
}
.dual-half:hover::after { transform: scaleX(1); }

/* Menüpunkte des aktiven Bereichs */
.dual-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 22px);
  min-width: 0;
}
.dual-half[data-side="a"] .dual-links { order: 2; margin-left: auto; }
.dual-half[data-side="b"] .dual-links { order: 2; margin-right: auto; }

.dual-links a {
  font-size: 14.5px;
  font-weight: 450;
  color: var(--ink-2);
  white-space: nowrap;
  padding-block: 5px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.dual-links a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.dual-links a[aria-current] {
  color: var(--side);
  border-bottom-color: var(--side);
  font-weight: 600;
}
.dual-links a[aria-current="page"] { pointer-events: none; cursor: default; }

.dual-links .dual-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 13.5px;
  border: 1px solid var(--side);
  color: var(--side);
  font-weight: 500;
  border-bottom-width: 1px;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.dual-links .dual-cta::after { content: "→"; }
.dual-links .dual-cta:hover {
  background: var(--side);
  color: #fff;
  border-color: var(--side);
}

/* Einblenden beim Seitenaufbau, gestaffelt von der Wortmarke nach außen.
   Grundzustand ist sichtbar; die Animation liefert nur den Weg dorthin.
   `backwards` haelt waehrend der Verzoegerung den from-Zustand. */
.dual-links > * {
  animation: dual-in 0.5s var(--ease) backwards;
}
.dual-links > *:nth-child(1) { animation-delay: 0.30s; }
.dual-links > *:nth-child(2) { animation-delay: 0.37s; }
.dual-links > *:nth-child(3) { animation-delay: 0.44s; }
.dual-links > *:nth-child(4) { animation-delay: 0.51s; }
.dual-links > *:nth-child(5) { animation-delay: 0.58s; }

@keyframes dual-in {
  from { opacity: 0; transform: translateY(-5px); }
}

/* Beim Seitenwechsel innerhalb desselben Bereichs setzt site.js `data-ruhig`:
   Andocken und gestaffelte Einblendung entfallen, der Header steht sofort.
   Der Grundzustand aller beteiligten Elemente ist sichtbar, `animation: none`
   ist deshalb sicher. Auch die Akzentleiste erscheint dann ohne Verzoegerung. */
.nav-dual[data-ruhig],
.nav-dual[data-ruhig] .dual-links > * { animation: none; }
.nav-dual[data-ruhig] .dual-half[data-active]::after { transition: none; }

.dual-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 0 clamp(16px, 2vw, 26px);
  border-inline: 1px solid var(--line);
  text-align: center;
}
/* Der Abstand sitzt am Rahmen, nicht am Bild: so bleibt der Rahmen genau so
   gross wie das Logo und die Wischschicht liegt passgenau darauf. */
.dual-brand .brand-w-stack { margin-bottom: 4px; }
.dual-brand .brand-w { height: 35px; width: auto; }
.dual-brand .brand-mark { font-size: 18px; line-height: 1; }
.dual-brand .brand-sub {
  max-width: 24ch;
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: 0.11em;
}

/* Zweistoeckige Markeninsel der neutralen Seiten: oben die Marke, darunter
   zwei bewusst leise Unternehmenslinks. Sie ersetzen dort die Unterzeile;
   die Bereichsnamen stehen links und rechts ohnehin im Header. Keine
   Bereichsfarbe: Das ist Markenebene, kein dritter Bereich. */
/* Die zwei Links bilden die Unterkante des Kastens, deshalb gibt der
   Kasten fuer sie sein seitliches und unteres Polster auf. Die Marke
   behaelt ihre Luft nach oben; `margin-top:auto` an der Leiste haelt
   sie unten, ohne die Kastenhoehe zu veraendern. */
.dual-brand--global {
  gap: 0;
  justify-content: flex-start;
  /* 10 + Marke 62 (Logo 35) + Leiste 28 ergeben die 100 px des
     Neutralzustands (seit v09: groesseres Logo-W, bewusst +4 px). */
  padding-block: 10px 0;
  padding-inline: 0;
}
.dual-brand-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.dual-brand--global .dual-brand-link { padding-inline: clamp(16px, 2vw, 26px); }
.dual-brand--global .brand-w-stack { margin-bottom: 0; }
.dual-brand--global .brand-w { height: 35px; }
/* Wortmarke folgt dem Logo-Prinzip: auf neutralen Seiten zweifarbig
   (Web = Petrol, Verte = Aubergine), auf Bereichsseiten einfarbig in der
   Bereichsfarbe (auf /ki/ setzt body.bereich-ki das Token um). */
.brand-mark--bereich { color: var(--accent); }
body.bereich-ki .brand-mark--bereich { color: var(--side-b); }
.mark-a { color: var(--side-a); }
.mark-b { color: var(--side-b); }

/* Zwei eckige Felder von Kastenrand zu Kastenrand, getrennt durch
   Haarlinien – dieselbe Bauform wie die Bereichsleiste des kompakten
   Headers. Bewusst still: Versalien in Grau, Farbe erst beim Ueberfahren.
   So entsteht keine dritte Bereichs-Ebene neben A und B. */
.brand-global {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.brand-global a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 4px 12px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mute);
  transition: color 0.18s, background 0.18s;
}
.brand-global a + a { border-left: 1px solid var(--line); }
.brand-global a:hover,
.brand-global a:focus-visible {
  color: var(--ink);
  background: var(--paper-warm);
}
/* Die Felder schliessen buendig mit der Kastenunterkante ab, deshalb liegt
   der Fokusring innen statt aussen. */
.brand-global a:focus-visible { outline-offset: -3px; }

/* Zwischenbreiten: Menüpunkte weichen, das Sprungziel bleibt */
@media (max-width: 1400px) {
  .dual-links a:not(.dual-cta):nth-child(n+4) { display: none; }
}
/* Der laengere B-Bereich braucht bei typischen 1280-px-Notebooks etwas
   frueher Luft zwischen CTA und Bereichsname. */
@media (max-width: 1320px) {
  .dual-half[data-side="b"] .dual-links a:not(.dual-cta):nth-child(n+3) { display: none; }
}
@media (max-width: 1240px) {
  .dual-links a:not(.dual-cta):nth-child(n+3) { display: none; }
}
/* Oberhalb der Viewport-Breakpoints waechst der Header nicht mehr weiter als
   die gemeinsame 1360-px-Flucht. Die Linkmenge bleibt deshalb auch auf sehr
   breiten Bildschirmen auf dem tatsaechlich vorhandenen Platz begrenzt. */
@media (min-width: 1400.01px) {
  .dual-links a:not(.dual-cta):nth-child(n+4) { display: none; }
  .dual-half[data-side="b"] .dual-links a:not(.dual-cta):nth-child(n+3) { display: none; }
}

/* Neutralzustand: keine Haelfte ist gewaehlt. Beide werden gleichwertig
   angeboten, es gibt keine Akzentleiste und die Wortmarke traegt die Mitte.
   (Die Hoehe kommt seit v09 einheitlich aus der Basisregel.) */
.nav-dual[data-zustand="neutral"] .dual-half::after { transform: scaleX(0); }
.nav-dual[data-zustand="neutral"] .dual-half:hover::after { transform: scaleX(1); }
.nav-dual[data-zustand="neutral"] .dual-brand .brand-mark { font-size: 22px; }
.nav-dual[data-zustand="neutral"] .dual-label { font-size: 14px; }

/* ---------- 6b-1. Desktop-Prototyp: leise Bereichsflaeche ----------
   Die aktive Haelfte erhaelt bewusst nur einen sehr hellen Farbhauch. Auf
   der grossen Desktopflaeche waere die volle Mobilfarbe zu dominant; die
   leichte Flaeche verbindet Bereichsname, Navigation und Hero trotzdem
   eindeutig. Beim echten A/B-Wechsel laufen Herkunft und Ziel gleichzeitig
   in derselben Richtung; Neutralwechsel bleiben bewusst unveraendert. */
@keyframes desktop-bereich-ein {
  from { transform: scaleX(0); }
}
@keyframes desktop-bereich-ein-nach-wechsel {
  from { transform: scaleX(0); }
}
@keyframes desktop-bereich-aus {
  from { transform: scaleX(1); }
}
@keyframes desktop-bereich-aus-zur-mitte {
  from { transform: scaleX(1); }
  50%, to { transform: scaleX(0); }
}

@media (min-width: 1080.01px) {
  .nav-dual {
    --dual-full-bleed: max(
      var(--gutter),
      calc(50vw - var(--content-half) + var(--gutter))
    );
  }
  .dual-half::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--desktop-bereich-wash);
    pointer-events: none;
    transform: scaleX(0);
    will-change: transform;
  }
  .dual-half[data-side="a"] {
    --desktop-bereich-wash: rgba(11, 61, 46, 0.08);
  }
  .dual-half[data-side="b"] {
    --desktop-bereich-wash: rgba(166, 95, 43, 0.075);
  }
  .dual-half[data-side="a"]::before { transform-origin: right center; }
  .dual-half[data-side="b"]::before { transform-origin: left center; }

  /* Nur Flaeche und Akzentlinie laufen bis zum Viewportrand. Texte, Links
     und Markeninsel behalten unveraendert die gemeinsame 1360-px-Flucht. */
  .dual-half[data-side="a"]::before,
  .dual-half[data-side="a"]::after {
    left: calc(0px - var(--dual-full-bleed));
  }
  .dual-half[data-side="b"]::before,
  .dual-half[data-side="b"]::after {
    right: calc(0px - var(--dual-full-bleed));
  }

  /* Inhalt und Akzentlinie bleiben stets ueber der getoenten Flaeche. */
  .dual-half > * { position: relative; z-index: 1; }
  .dual-half::after { z-index: 2; }

  .dual-half[data-active]::before { transform: scaleX(1); }

  /* Neutral -> Bereich: Die neue Flaeche oeffnet direkt von der Mitte. */
  .nav-dual[data-von="neutral"] .dual-half[data-active]::before {
    animation: desktop-bereich-ein var(--header-shift-duration) var(--header-shift-ease);
  }

  /* Bereich -> Bereich: Herkunft und Ziel bewegen sich gleichzeitig in
     Wechselrichtung. Die gegenueberliegenden Urspruenge spiegeln B -> A. */
  .nav-dual[data-von="a"] .dual-half[data-active]::before,
  .nav-dual[data-von="b"] .dual-half[data-active]::before {
    animation: desktop-bereich-ein-nach-wechsel var(--header-shift-duration) var(--header-shift-ease);
  }
  .nav-dual[data-zustand="b"][data-von="a"] .dual-half[data-side="a"]:not([data-active])::before,
  .nav-dual[data-zustand="a"][data-von="b"] .dual-half[data-side="b"]:not([data-active])::before {
    animation: desktop-bereich-aus var(--header-shift-duration) var(--header-shift-ease);
  }

  /* Bereich -> Neutral behaelt die bisherige Choreografie: Die Tönung ist
     in der ersten Hälfte fort, danach kann die Logo-Rückgabe übernehmen. */
  .nav-dual[data-zustand="neutral"][data-von="a"] .dual-half[data-side="a"]::before,
  .nav-dual[data-zustand="neutral"][data-von="b"] .dual-half[data-side="b"]::before {
    animation: desktop-bereich-aus-zur-mitte var(--header-shift-duration) var(--header-shift-ease);
  }
}

/* Unterhalb von 1080px uebernimmt die kompakte Kopfzeile mit Umschalter
   und Burger-Menue. Diese Regeln muessen NACH den Basisregeln stehen. */
@media (max-width: 1080px) {
  .site-header--dual > .nav-dual { display: none; }
  .site-header--dual .header-grid { display: flex; }

  /* Hinter dem geoeffneten Menue wird der Seiteninhalt abgedunkelt, damit
     die Menuepunkte nicht mit durchscheinenden Inhalten konkurrieren.
     Als body::after zwischen Inhalt (z-index auto) und Header (60)
     geschichtet. Bewusst nicht im Header selbst: dort haenge er an dessen
     Flaeche, statt ueber dem Inhalt zu liegen. Klicks auf den Schleier
     treffen den body; site.js schliesst das Menue dann. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(11, 11, 12, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease), visibility 0.22s;
  }
  body:has(.nav[data-open="true"])::after {
    opacity: 1;
    visibility: visible;
  }

  /* Akzentlinie an der Unterkante: Auf Bereichsseiten in der Bereichsfarbe,
     auf den neutralen Seiten als geteilte Signatur beider Bereiche. Ersetzt
     visuell die graue Haarlinie und gibt dem kompakten Header denselben
     Farbanker wie der grossen Kopfzeile. */
  .site-header--dual::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent);
  }
  .site-header--dual:has(.nav-dual[data-zustand="neutral"])::after {
    background: linear-gradient(to right, var(--side-a) 0 50%, var(--side-b) 50% 100%);
  }
}

/* ---------- 6c. Farbwechsel beim Bereichswechsel ----------
   Beim echten Bereichswechsel faerbt sich die Kopfzeile sichtbar um: Ueber
   dem fertigen neuen Bild liegt eine Schicht im Herkunftszustand, die mit
   einer harten Kante weggewischt wird. Darunter kommt das neue Bild zum
   Vorschein – gewischt wird also das Alte, nicht aufgebaut das Neue.

   Ausloeser ist ausschliesslich `data-von`, das site.js beim Seitenaufbau
   setzt, wenn ein Same-Origin-Referrer aus einem anderen Bereich kommt. Ohne
   echten Wechsel (erster Seitenaufruf, `data-ruhig` im selben Bereich, Reload)
   entsteht die Schicht gar nicht erst und die Kopfzeile steht exakt wie
   bisher. Wie bei den Andock-Animationen ist nur der Startwert animiert; der
   Ruhezustand (Schicht vollstaendig weggeschnitten) steht in der Regel selbst.

   Logo und Akzentlinie bewegen nur `clip-path`; die kompakte A/B-Leiste nur
   ihre Hintergrundbreite. Beides veraendert kein Layout und berechnet keinen
   Textfluss neu.                                                            */

@keyframes farbwechsel { from { clip-path: inset(0 0 0 0); } }

/* Nicht nur das Bildzeichen, sondern auch die Wortmarke traegt beim Wechsel
   kurz den Herkunftszustand. Das Zeichen beginnt, die Wortmarke folgt leicht
   ueberlappend. So laeuft die Farbe als eine zusammenhaengende Bewegung durch
   das gesamte Logo, statt in beiden Teilen gleichzeitig zu starten. */
.site-header--dual:has(.nav-dual[data-von="neutral"]) {
  --wortmarke-von: linear-gradient(to right, var(--side-a) 0 45%, var(--side-b) 45% 100%);
}
.site-header--dual:has(.nav-dual[data-von="a"]) {
  --wortmarke-von: linear-gradient(var(--side-a), var(--side-a));
}
.site-header--dual:has(.nav-dual[data-von="b"]) {
  --wortmarke-von: linear-gradient(var(--side-b), var(--side-b));
}
.site-header--dual:has(.nav-dual[data-von]) .brand-mark::before {
  content: "WebVerte";
  position: absolute;
  inset: 0;
  z-index: 1;
  color: transparent;
  background: var(--wortmarke-von);
  background-clip: text;
  -webkit-background-clip: text;
  white-space: nowrap;
  pointer-events: none;
  will-change: clip-path;
  clip-path: var(--wisch);
  animation: farbwechsel 0.58s var(--header-shift-ease) var(--logo-wort-delay) backwards;
}

/* Laufrichtung: Die Kante wandert immer von der Herkunft zum Ziel. Bei einer
   Bewegung nach rechts startet deshalb das links stehende Bildzeichen und die
   Wortmarke folgt. Nach links ist die räumliche Reihenfolge umgekehrt: erst
   die rechts stehende Wortmarke, danach das Zeichen. */
.site-header--dual:has(.nav-dual[data-von]) {
  --wisch: inset(0 0 0 100%);
  --logo-zeichen-delay: 0s;
  --logo-wort-delay: 0.37s;
}
.site-header--dual:has(.nav-dual[data-zustand="a"][data-von]),
.site-header--dual:has(.nav-dual[data-zustand="neutral"][data-von="b"]) {
  --wisch: inset(0 100% 0 0);
  --logo-zeichen-delay: 0.37s;
  --logo-wort-delay: 0s;
}

/* (a) Das Logo-Zeichen. Ein Selektor deckt beide Kopfzeilen ab, weil immer
   nur die im aktuellen Bereich sichtbare gerendert wird. Die Herkunftsfarbe
   kommt als Hintergrundbild – dieselben fertigen Dateien wie im Markup, aber
   ohne zusaetzliche <img>-Elemente und damit ohne doppelte Vorlese-Semantik. */
.site-header--dual:has(.nav-dual[data-von]) .brand-w-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  clip-path: var(--wisch);
  animation: farbwechsel 0.58s var(--header-shift-ease) var(--logo-zeichen-delay) backwards;
}
.site-header--dual:has(.nav-dual[data-von="neutral"]) .brand-w-stack::before {
  background-image: url("../img/webverte-w.svg?v=2026-09-08-18");
}
.site-header--dual:has(.nav-dual[data-von="a"]) .brand-w-stack::before {
  background-image: url("../img/webverte-w-web.svg?v=2026-09-08-18");
}
.site-header--dual:has(.nav-dual[data-von="b"]) .brand-w-stack::before {
  background-image: url("../img/webverte-w-ki.svg?v=2026-09-08-18");
}

/* (b) Kompakte Kopfzeile: Neutral -> Bereich waechst weiterhin aus der
   mittleren Trennkante. Beim direkten A/B-Wechsel laufen Herkunft und Ziel
   dagegen gleichzeitig in Fahrtrichtung: A -> B wischt beide Haelften von
   links nach rechts, B -> A entsprechend von rechts nach links. Dadurch wirkt
   die Farbe wie eine zusammenhaengende Uebergabe statt wie zwei nacheinander
   abgespielte Vorgaenge. Logo und Desktop-Kopfzeile bleiben davon unberuehrt. */
@keyframes tab-aus-mitte-aktivieren {
  from {
    background-color: transparent;
    background-image: linear-gradient(var(--tab-side), var(--tab-side));
    background-position: var(--tab-origin);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    color: var(--ink-2);
  }
  42% { color: var(--ink-2); }
  42.01%, to { color: #fff; }
  to {
    background-color: transparent;
    background-image: linear-gradient(var(--tab-side), var(--tab-side));
    background-position: var(--tab-origin);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
@keyframes marker-aus-mitte-aktivieren {
  from, 42% { color: var(--tab-side); border-color: var(--tab-side); }
  42.01%, to { color: #fff; border-color: rgba(255,255,255,0.7); }
}

@keyframes tab-beim-wechsel-aktivieren {
  from {
    background-color: transparent;
    background-image: linear-gradient(var(--tab-side), var(--tab-side));
    background-position: var(--tab-origin);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    color: var(--ink-2);
  }
  42% { color: var(--ink-2); }
  58%, to { color: #fff; }
  to {
    background-color: transparent;
    background-image: linear-gradient(var(--tab-side), var(--tab-side));
    background-position: var(--tab-origin);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
@keyframes marker-beim-wechsel-aktivieren {
  from, 42% { color: var(--tab-side); border-color: var(--tab-side); }
  58%, to { color: #fff; border-color: rgba(255,255,255,0.7); }
}

@keyframes tab-beim-wechsel-deaktivieren {
  from {
    background-color: transparent;
    background-image: linear-gradient(var(--tab-side), var(--tab-side));
    background-position: var(--tab-origin);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
  }
  42% { color: #fff; }
  58%, to { color: var(--ink-2); }
  to {
    background-color: transparent;
    background-image: linear-gradient(var(--tab-side), var(--tab-side));
    background-position: var(--tab-origin);
    background-repeat: no-repeat;
    background-size: 0% 100%;
  }
}
@keyframes marker-beim-wechsel-deaktivieren {
  from, 42% { color: #fff; border-color: rgba(255,255,255,0.7); }
  58%, to { color: var(--tab-side); border-color: var(--tab-side); }
}

/* Beim Rueckweg auf den neutralen Einstieg bleibt die bisherige Bewegung zur
   Mitte erhalten. Die neuen simultanen Keyframes gelten bewusst nur fuer den
   direkten Kreuzwechsel A <-> B. */
@keyframes tab-zur-mitte-deaktivieren {
  from {
    background-color: transparent;
    background-image: linear-gradient(var(--tab-side), var(--tab-side));
    background-position: var(--tab-origin);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
  }
  12% { color: #fff; }
  12.01%, to { color: var(--ink-2); }
  50%, to {
    background-color: transparent;
    background-image: linear-gradient(var(--tab-side), var(--tab-side));
    background-position: var(--tab-origin);
    background-repeat: no-repeat;
    background-size: 0% 100%;
  }
}
@keyframes marker-zur-mitte-deaktivieren {
  from, 17% { color: #fff; border-color: rgba(255,255,255,0.7); }
  17.01%, to { color: var(--tab-side); border-color: var(--tab-side); }
}

@media (max-width: 1080px) {
  .site-header--dual:has(.nav-dual[data-zustand="a"]) .nav-toggle { color: var(--side-a); }
  .site-header--dual:has(.nav-dual[data-zustand="b"]) .nav-toggle { color: var(--side-b); }

  .site-header--dual:has(.nav-dual[data-von="neutral"]) { --nav-toggle-von: var(--ink); }
  .site-header--dual:has(.nav-dual[data-von="a"]) { --nav-toggle-von: var(--side-a); }
  .site-header--dual:has(.nav-dual[data-von="b"]) { --nav-toggle-von: var(--side-b); }
  .site-header--dual:has(.nav-dual[data-von]) .nav-toggle {
    animation: nav-toggle-farbwechsel var(--header-shift-duration) var(--header-shift-ease);
  }

  .area-switch a[href$="/web/"] {
    --tab-side: var(--side-a);
    --tab-origin: right center;
  }
  .area-switch a[href$="/ki/"] {
    --tab-side: var(--side-b-ink);
    --tab-origin: left center;
  }

  .site-header--dual:has(.nav-dual[data-von="neutral"]) .area-switch a[aria-current="true"] {
    animation: tab-aus-mitte-aktivieren var(--header-shift-duration) var(--header-shift-ease);
  }
  .site-header--dual:has(.nav-dual[data-von="neutral"]) .area-switch a[aria-current="true"] .marker {
    animation: marker-aus-mitte-aktivieren var(--header-shift-duration) var(--header-shift-ease);
  }

  .site-header--dual:has(
    .nav-dual[data-zustand="b"][data-von="a"],
    .nav-dual[data-zustand="a"][data-von="b"]
  ) .area-switch a[aria-current="true"] {
    animation: tab-beim-wechsel-aktivieren var(--header-shift-duration) var(--header-shift-ease);
  }
  .site-header--dual:has(
    .nav-dual[data-zustand="b"][data-von="a"],
    .nav-dual[data-zustand="a"][data-von="b"]
  ) .area-switch a[aria-current="true"] .marker {
    animation: marker-beim-wechsel-aktivieren var(--header-shift-duration) var(--header-shift-ease);
  }

  .site-header--dual:has(.nav-dual[data-zustand="b"][data-von="a"]) .area-switch a[href$="/web/"]:not([aria-current]) {
    animation: tab-beim-wechsel-deaktivieren var(--header-shift-duration) var(--header-shift-ease);
  }
  .site-header--dual:has(.nav-dual[data-zustand="a"][data-von="b"]) .area-switch a[href$="/ki/"]:not([aria-current]) {
    animation: tab-beim-wechsel-deaktivieren var(--header-shift-duration) var(--header-shift-ease);
  }
  .site-header--dual:has(.nav-dual[data-zustand="b"][data-von="a"]) .area-switch a[href$="/web/"]:not([aria-current]) .marker,
  .site-header--dual:has(.nav-dual[data-zustand="a"][data-von="b"]) .area-switch a[href$="/ki/"]:not([aria-current]) .marker {
    animation: marker-beim-wechsel-deaktivieren var(--header-shift-duration) var(--header-shift-ease);
  }

  .site-header--dual:has(.nav-dual[data-zustand="neutral"][data-von="a"]) .area-switch a[href$="/web/"]:not([aria-current]),
  .site-header--dual:has(.nav-dual[data-zustand="neutral"][data-von="b"]) .area-switch a[href$="/ki/"]:not([aria-current]) {
    animation: tab-zur-mitte-deaktivieren var(--header-shift-duration) var(--header-shift-ease);
  }
  .site-header--dual:has(.nav-dual[data-zustand="neutral"][data-von="a"]) .area-switch a[href$="/web/"]:not([aria-current]) .marker,
  .site-header--dual:has(.nav-dual[data-zustand="neutral"][data-von="b"]) .area-switch a[href$="/ki/"]:not([aria-current]) .marker {
    animation: marker-zur-mitte-deaktivieren var(--header-shift-duration) var(--header-shift-ease);
  }

  .site-header--dual:has(.nav-dual[data-von])::before {
    content: "";
    position: absolute;
    clip-path: var(--wisch);
    animation: farbwechsel var(--header-shift-duration) var(--header-shift-ease);
  }
  /* Deckungsgleich mit der Akzentlinie (::after) und eine Ebene darueber. */
  .site-header--dual:has(.nav-dual[data-von])::before {
    left: 0; right: 0; bottom: 0;
    height: 2px;
    z-index: 1;
  }

  /* Herkunftszustand der Akzentlinie, gespiegelt zu ::after. */
  .site-header--dual:has(.nav-dual[data-von="a"])::before { background: var(--side-a); }
  .site-header--dual:has(.nav-dual[data-von="b"])::before { background: var(--side-b); }
  .site-header--dual:has(.nav-dual[data-von="neutral"])::before {
    background: linear-gradient(to right, var(--side-a) 0 50%, var(--side-b) 50% 100%);
  }
}

@keyframes nav-toggle-farbwechsel {
  from { color: var(--nav-toggle-von); }
}


/* ---------- 7. Hero ---------- */

.hero { padding-block: clamp(56px, 8vw, 104px) clamp(44px, 5vw, 72px); }
/* Auf der neutralen Startseite folgt die Bereichswahl direkt. Die zwei
   Bereiche werden einmal klar angeboten, ohne zusätzliche schwebende CTAs. */
.hero .section-head { margin-bottom: 0; }
.hero--neutral { padding-block: clamp(68px, 8vw, 112px) clamp(34px, 4vw, 54px); }
.hero--neutral .section-head {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 2.5vw, 34px);
  align-items: start;
}
.hero--neutral .display { max-width: 19ch; }
.hero--neutral .lead { max-width: 58ch; }
.hero-title--desktop { display: block; }
.hero-eyebrow--mobile,
.hero-title--mobile,
.hero-lead--mobile { display: none; }
.hero-dual-web, .hero-dual-ki { display: block; }
.hero-dual-web { color: var(--side-a); }
.hero-dual-ki { color: var(--side-b); }
.hero:not(.hero--neutral) .display { max-width: 15ch; }
/* Claim-Headlines wie "Dein Angebot ist stark." brauchen die volle Zeile;
   der Umbruch sitzt per <br> bewusst vor dem Akzentsatz. Doppelte Klasse,
   damit die Regel die 15ch-Grenze darueber sicher uebertrumpft. */
.hero .display.display--claim { max-width: 24ch; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.85fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}

.hero-accent { color: var(--accent); display: inline-block; }
body.bereich-ki .hero-accent { color: var(--side-b); }

/* Ab breiten Viewports spannt die zweizeilige Kopfzeile der neutralen
   Startseite ueber die volle Inhaltsbreite: Zeile eins links, Zeile zwei
   rechts. Das spiegelt die A-links/B-rechts-Logik der Kopfzeile und fuellt
   den vorher leeren rechten Rand. Der Lead darunter bleibt linksbuendig.
   Muss nach `.hero .display` stehen, sonst greift dessen 14ch-Grenze.
   Die Schwelle ist die Gegenseite des 940er-Umbruchs weiter unten: sobald
   die Inhaltsraster einspaltig werden, steht auch die Kopfzeile wieder
   komplett links. */
@media (min-width: 941px) {
  .hero--neutral .display { max-width: 100%; }
  .hero--neutral .hero-dual-ki { text-align: right; }
  /* Der Lead laeuft als durchgehender Fliesstext ueber die volle
     Inhaltsbreite unter beiden Kopfzeilen (Nutzerentscheid: keine
     Spaltenteilung, kein Abstand im Satz). */
  .hero--neutral .lead { max-width: none; }
}

/* Unterhalb davon gilt dieselbe Logik in klein: Zeile eins linksbuendig,
   Zeile zwei rechtsbuendig. Damit beide Bereichsnamen einzeilig bleiben,
   ist die Schrift an die Viewportbreite gebunden — der laengere Name
   ("Intelligente Systeme.") muss auch auf 320 px in eine Zeile passen. */
@media (max-width: 940px) {
  .hero--neutral .display { max-width: none; font-size: clamp(1.4rem, 9.6vw, 3.2rem); }
  .hero--neutral .hero-dual-ki { text-align: right; }
}

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.proof li {
  font-size: 13px;
  font-weight: 450;
  color: var(--mute);
}

/* Check-Karte im Hero */
.check-card {
  border: 1px solid var(--line-strong);
  background: var(--paper-warm);
  padding: clamp(24px, 3vw, 34px);
}
.check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-strong);
}
.check-head strong { font-size: 15px; font-weight: 500; }
.badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--accent);
  color: #fff;
}

.check-list { margin-top: 6px; }
.check-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.check-list .idx { font-size: 11px; font-weight: 500; color: var(--mute); padding-top: 3px; }
.check-list strong { display: block; font-size: 15px; font-weight: 500; }
.check-list span.d { display: block; font-size: 14px; color: var(--mute); margin-top: 3px; }

.check-result {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid var(--accent);
}
.check-result .tick {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}
.check-result strong {
  display: block;
  color: var(--accent-deep);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
}
.check-result > span:last-child > span {
  display: block;
  color: var(--ink-2);
  font-size: 14px;
  margin-top: 5px;
}

/* ---------- 7a. Bereichswahl auf der neutralen Startseite ---------- */

.area-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
}

/* Keine Kaesten: eine kraeftige Oberlinie in der Bereichsfarbe traegt die
   Spalte, getrennt wird mit Haarlinien. Das entspricht der Formsprache
   der uebrigen Sektionen (Rail, Service, Facts). */
.choice {
  --side: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 3px solid var(--side);
}
.choice[data-side="a"] { --side: var(--side-a); }
.choice[data-side="b"] { --side: var(--side-b-ink); border-top-color: var(--side-b); }

.choice-head {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--side);
}
.choice-letter {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
}

.choice .h3 { margin-bottom: 12px; max-width: 15ch; }
.choice > p { font-size: 15px; color: var(--mute); max-width: 42ch; }
.choice-mobile-benefit,
.choice-cta-short { display: none; }

.choice-list { margin: 22px 0 26px; }
.choice-list li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.choice-list li:last-child { border-bottom: 1px solid var(--line); }

.choice-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  align-self: flex-start;
  margin-top: auto;
  padding: 14px 22px;
  background: var(--side);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  transition: background 0.22s var(--ease), gap 0.22s var(--ease);
}
.choice-cta::after { content: "→"; }
/* Kein filter/transform am Link: Die absolut positionierte Klickfläche
   muss dauerhaft auf die ganze .choice bezogen bleiben, auch beim Hover. */
.choice-cta:hover { gap: 16px; background: color-mix(in srgb, var(--side) 90%, #000); }
.choice:hover .choice-cta { gap: 16px; }

/* Im neutralen Kontaktformular folgt die Akzentfarbe der Themenwahl. */
.contact-form:has(input[value^="ki-"]:checked) { --accent: var(--side-b-ink); }
.contact-form:has(input[value="beides"]:checked),
.contact-form:has(input[value="allgemein"]:checked) { --accent: var(--ink); }

/* Die ganze Karte ist klickbar, der Text bleibt markierbar. */
.choice-cta::before {
  content: "";
  position: absolute;
  inset: 0;
}

@media (max-width: 860px) {
  .area-choice { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 8. Trust-Streifen ---------- */

.trust { border-block: 1px solid var(--line); background: var(--paper-warm); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
.trust-grid > div {
  background: var(--paper-warm);
  padding: 30px clamp(18px, 2.2vw, 30px);
}
.trust-grid strong { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.trust-grid span { display: block; font-size: 13.5px; color: var(--mute); line-height: 1.45; }

/* Startseite v11: eine zusammenhaengende Verantwortungsflaeche statt vier
   austauschbarer Vertrauenskaesten. Der einzelne petrolfarbene Strich ordnet
   den Block bewusst dem Website-Schwerpunkt zu. */
.trust--collab { background: var(--paper); }
.trust-collab {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: clamp(36px, 7vw, 108px);
  padding-block: clamp(52px, 6vw, 84px);
}
.trust-collab > .eyebrow { align-self: start; margin-top: 7px; }
.trust-collab__body {
  position: relative;
  max-width: 760px;
  padding-left: clamp(24px, 3.2vw, 42px);
}
.trust-collab__body::before {
  content: "";
  position: absolute;
  inset: 5px auto 5px 0;
  width: 2px;
  background: var(--side-a);
}
.trust-collab__body .h2 { max-width: 16ch; }
.trust-collab__body > p {
  max-width: 64ch;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.62;
}
.trust-collab__signature { margin-top: 26px; }
.trust-collab__signature strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.trust-collab__signature span {
  display: block;
  margin-top: 2px;
  color: var(--mute);
  font-size: 13px;
}
.trust-collab__body .tlink { margin-top: 18px; }

@media (max-width: 620px) {
  .trust-collab {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
    padding-block: 38px 42px;
  }
  .trust-collab > .eyebrow { margin-top: 0; }
  .trust-collab__body { padding-left: 19px; }
  .trust-collab__body::before { inset-block: 3px; }
  .trust-collab__body .h2 {
    font-size: clamp(1.65rem, 7vw, 1.82rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }
  .trust-collab__body > p {
    margin-top: 19px;
    font-size: 16px;
    line-height: 1.56;
  }
  .trust-collab__signature { margin-top: 22px; }
  .trust-collab__body .tlink { margin-top: 12px; }
}

@media (max-width: 360px) {
  .trust-collab__body { padding-left: 15px; }
  .trust-collab__body .h2 { font-size: 1.58rem; }
}

/* ---------- 9. Rail (nummerierte Schritte, keine Karten) ---------- */

.rail {
  display: grid;
  grid-template-columns: repeat(var(--rail-cols, 4), minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 56px);
  counter-reset: rail;
}
.rail > * {
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.rail > *::before {
  counter-increment: rail;
  content: "0" counter(rail);
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--mute);
  margin-bottom: 24px;
}
.rail .h4 { margin-bottom: 9px; }
.rail p { font-size: 14.5px; color: var(--mute); line-height: 1.5; }
.rail ul { margin-top: 15px; }
.rail li {
  position: relative;
  padding-left: 15px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-2);
}
.rail li::before { content: "–"; position: absolute; left: 0; color: var(--mute); }

.s-ink .rail > * { border-top-color: var(--line-on-ink); }
.s-ink .rail > *::before,
.s-ink .rail p { color: var(--on-ink-mute); }
.s-ink .rail li { color: var(--on-ink); }

/* Kompakte Rail unter dem Hero */
.rail--mini { --rail-cols: 2; gap: clamp(18px, 3vw, 34px); }
.rail--mini > * { padding-top: 16px; border-top-width: 1px; }
.rail--mini > *::before { margin-bottom: 14px; }
.rail--mini strong { font-size: 15px; font-weight: 500; }

.rail--3 { --rail-cols: 3; }
.school-case-rail { --rail-cols: 3; margin-top: 40px; }
.school-case .btn--light { background: var(--paper); color: var(--accent); }
.school-case .btn--light:hover { background: var(--accent-wash); }
.rail--2 { --rail-cols: 2; }

/* Rail direkt unter einer Auszeichnungszeile */
.eyebrow + .rail { margin-top: 26px; }
/* Textlink am Fuss einer Rail-Karte */
.rail .tlink { margin-top: 16px; }

/* ---------- 10. Leistungskarten ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  counter-reset: svc;
}
/* Zwei Karten statt drei. Muss vor den Media Queries stehen, damit die
   Seite auf schmalen Viewports weiterhin auf eine Spalte zusammenfaellt. */
.service-grid--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service {
  display: flex;
  flex-direction: column;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.service::before {
  counter-increment: svc;
  content: "0" counter(svc);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--mute);
  margin-bottom: 24px;
}
.service .h4 { margin-bottom: 10px; }
.service > p { font-size: 14.5px; color: var(--mute); }
.service ul { margin: 18px 0 24px; }
.service li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.service .tlink { margin-top: auto; align-self: flex-start; }

/* ---------- 11. Prinzip-Band (schwarze Fläche) ---------- */

.principle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: start;
}
.principle blockquote {
  font-size: var(--display-md);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 500;
  max-width: 20ch;
}
.principle cite {
  display: block;
  margin-top: 22px;
  font-size: 13.5px;
  font-style: normal;
  color: var(--on-ink-mute);
}
.principle-list li {
  padding: 16px 0;
  border-top: 1px solid var(--line-on-ink);
  font-size: 15px;
}

/* ---------- 12. Referenzen im Zickzack ---------- */

.cases > * + * { margin-top: clamp(56px, 7vw, 104px); }

/* Grosser Abschluss-Knopf unter den drei gezeigten Projekten: fuehrt nach
   dem Durchsehen zur Gesamtuebersicht. Zentriert als Sektionsabschluss. */
.cases-cta { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 88px); }

.case {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.case:nth-child(even) .case-media { order: 2; }
/* Zwei Textlinks nebeneinander brauchen mehr Luft als zwei Buttons. */
.case .actions { gap: 22px; }

.case-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-deep);
}
.case-media img,
.case-media svg {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}
.case:hover .case-media img { transform: scale(1.025); }
.case-caption {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  padding: 6px 11px;
  background: rgba(11, 11, 12, 0.74);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.case .h3 { margin: 12px 0 12px; }
.case > div > p { font-size: 15px; color: var(--mute); max-width: 44ch; }

.facts { margin: 24px 0 22px; }
/* Zweispaltige Aufzählung, etwa "Umgesetzt" auf den Fallseiten.
   Unter 760 px wird die Spalte zu schmal für lange deutsche Komposita
   wie "Verbraucherinformationen" und die Seite bekäme Querlauf. */
.facts--zwei { margin-top: 20px; columns: 2; column-gap: clamp(28px, 4vw, 64px); }
@media (max-width: 760px) { .facts--zwei { columns: 1; } }
/* Eckdaten eines Falls: so viele Spalten wie nebeneinander lesbar bleiben. */
.facts--meta {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
}
/* Einzeiliges Fazit am Ende einer Sektion */
.facts--fazit { margin-top: 40px; max-width: 62ch; }
.facts--fazit-weit { margin-top: 44px; max-width: 64ch; }
.facts li {
  overflow-wrap: break-word;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.5;
}
.facts b {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Kompakter Referenz-Teaser auf Bereichsseiten */
.case-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.case-teaser-grid--drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .case-teaser-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 13. Gründer ---------- */

.founder {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.founder-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.founder-media img { width: 100%; height: 100%; object-fit: cover; }
.founder-cap { margin-top: 16px; }
.founder-cap strong { display: block; font-size: 15px; font-weight: 500; }
.founder-cap span { display: block; font-size: 13.5px; color: var(--mute); margin-top: 3px; }

.principles { margin-top: 8px; }
.principles li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}
.principles strong { font-size: 11px; font-weight: 500; color: var(--mute); padding-top: 4px; }
.principles b { font-weight: 500; }

/* ---------- 14. FAQ ---------- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: start;
}

.faq-item { border-top: 1px solid var(--line-strong); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  transition: transform 0.28s var(--ease), background 0.28s, color 0.28s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.faq-item > p {
  padding: 0 0 24px;
  max-width: 62ch;
  color: var(--mute);
  font-size: 15px;
}

/* ---------- 15. Formular ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  margin-bottom: 26px;
}
/* Die neutrale Startseite deckt beide Bereiche, Kombinationen und allgemeine
   Anliegen ab. Vier gleichwertige Felder bleiben als ruhiges 2×2-Raster
   lesbarer als eine enge Viererzeile. Die spezialisierten Formulare behalten
   ihr bestehendes Dreier-Raster. */
.segmented--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented--vier label { display: grid; place-items: center; min-height: 56px; }
.segmented label {
  position: relative;
  background: var(--paper);
  padding: 16px 14px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:hover { background: var(--paper-warm); }
.segmented input:checked + span { color: #fff; }
.segmented label:has(input:checked) { background: var(--accent); color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }

.form-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.form-rows .full { grid-column: 1 / -1; }

.input, .textarea, .select {
  width: 100%;
  padding: 14px 15px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  font-size: 15px;
  transition: border-color 0.2s;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-2); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); outline: none; }
.textarea { min-height: 148px; resize: vertical; }

.form-submit { width: 100%; justify-content: center; margin-top: 26px; }

.form-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--mute);
  line-height: 1.5;
}
.form-note a { color: var(--accent); border-bottom: 1px solid currentColor; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-direct li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.contact-direct b {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
}
.contact-direct a:hover { color: var(--accent); }

/* ---------- 16. CTA-Band ---------- */

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.cta-band .h2 { max-width: 20ch; }

/* ---------- 16b. Querverweis zwischen den Bereichen ---------- */

.cross-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 3.5vw, 40px);
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.cross-band .h4 { margin: 10px 0 8px; max-width: 24ch; }
.cross-band p { font-size: 14.5px; color: var(--mute); max-width: 52ch; }
.cross-marker {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
}
/* Der Bereichsmarker ersetzt den Standardpunkt des Eyebrows. */
.cross-band .eyebrow { gap: 9px; }
.cross-band .eyebrow::before { display: none; }
.cross-marker { color: var(--accent); }

@media (max-width: 780px) {
  .cross-band { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 17. Footer ---------- */

.site-footer { background: var(--ink); color: var(--on-ink); }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(40px, 5vw, 64px);
}
.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
}
.footer-logo { height: clamp(30px, 4.2vw, 52px); width: auto; flex: 0 0 auto; }
.to-top {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 19px;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.to-top:hover { background: var(--accent-bright); color: var(--ink); transform: translateY(-3px); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line-on-ink);
}
.footer-col strong {
  display: block;
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}
.footer-col li { margin-bottom: 9px; font-size: 14.5px; }
.footer-col a { color: var(--on-ink); transition: color 0.18s; }
.footer-col a:hover { color: var(--accent-bright); }
.footer-col p { font-size: 14.5px; color: var(--on-ink-mute); line-height: 1.6; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 24px 36px;
  border-top: 1px solid var(--line-on-ink);
  font-size: 13px;
  color: var(--on-ink-mute);
}

/* ---------- 18. Rechtstexte und schmale Seiten ---------- */

.page-hero { padding-block: clamp(52px, 6vw, 88px) clamp(32px, 4vw, 52px); }
/* Fallbeschreibungen haben laengere Titel als die Bereichsseiten. */
.page-hero .display { max-width: 19ch; font-size: clamp(2.3rem, 5vw, 4.2rem); }
.page-hero .section-head { align-items: end; margin-bottom: 0; }
.page-hero .section-head .actions { margin-top: 26px; }

/* Einfacher Seitenkopf ohne Sektionsraster: Auszeichnung, Titel, Lead, Buttons.
   Nur direkte Kinder, damit die Fallseiten mit .section-head unberuehrt bleiben. */
.page-hero > .wrap > .display { margin-top: 14px; }
.page-hero > .wrap > .lead { margin-top: 24px; }
.page-hero > .wrap > .lead.lead--stand { margin-top: 22px; }
.page-hero > .wrap > .actions { margin-top: 32px; }

/* Nachgelagerter Block auf den Fallseiten, etwa "Umgesetzt" */
.case-block { margin-top: clamp(40px, 5vw, 64px); }
.breadcrumb { display: flex; gap: 9px; font-size: 12.5px; color: var(--mute); margin-bottom: 26px; }
.breadcrumb a:hover { color: var(--accent); }

.prose { max-width: 74ch; }
.prose--schmal { max-width: 62ch; }
.prose h2 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 46px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 26px 0 8px;
}
.prose p { margin-bottom: 14px; color: var(--ink-2); }
.prose ul { margin: 0 0 18px; }
.prose li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 7px;
  color: var(--ink-2);
}
.prose li::before { content: "–"; position: absolute; left: 0; color: var(--mute); }
.prose a { color: var(--accent); border-bottom: 1px solid currentColor; }
.prose address { font-style: normal; margin-bottom: 14px; color: var(--ink-2); }

.todo {
  margin: 16px 0 20px;
  padding: 16px 18px;
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  font-size: 14.5px;
  color: var(--ink-2);
}
.todo--schmal { max-width: 70ch; }
.todo b { display: block; margin-bottom: 5px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }

/* ---------- 19. Statusmeldungen ---------- */

.notice {
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  font-size: 15px;
}
.notice--error { border-left-color: #b42318; background: #fdf0ee; }

/* ---------- 19b. Schnellcheck auf den KI-Seiten ----------
   Vier Fragen, eine Ersteinschaetzung. Die Auswahl steht ausschliesslich im
   DOM (aria-pressed auf dem gewaehlten Knopf), das Ergebnis schreibt site.js
   in die aria-live-Region. Ohne JavaScript bleibt der statische Absatz mit
   denselben vier Fragen stehen: umgeschaltet wird allein ueber die Klasse
   `check-quiz--aktiv`, die site.js setzt.
   Die Antwortreihen folgen dem Muster der segmentierten Themenwahl im
   Formular: Haarlinienraster, gewaehlte Flaeche in der Bereichsfarbe.     */

.check-quiz .check-fragen { display: none; }
.check-quiz--aktiv .check-statisch { display: none; }
.check-quiz--aktiv .check-fragen { display: block; }

.check-statisch { font-size: 15px; color: var(--ink-2); max-width: 68ch; }

.check-fragen { counter-reset: check; }

.check-frage { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.check-frage + .check-frage { margin-top: 30px; }
.check-frage::before {
  counter-increment: check;
  content: "0" counter(check);
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--mute);
  margin-bottom: 12px;
}
.check-frage-titel {
  margin-bottom: 14px;
  max-width: 46ch;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.check-optionen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
/* Mindesthoehe wie die uebrigen Tippziele: 44 px. */
.check-option {
  min-height: 44px;
  padding: 14px 15px;
  border: 0;
  background: var(--paper);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.check-option:hover { background: var(--paper-warm); }
.check-option[aria-pressed="true"] { background: var(--accent); color: #fff; }

.check-ausgabe {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.check-ausgabe--fertig { border-color: var(--accent); background: var(--accent-wash); }
.check-offen { font-size: 14.5px; color: var(--mute); }

.check-ergebnis-modell {
  margin-top: 12px;
  max-width: 30ch;
  font-size: var(--display-sm);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.check-ergebnis-text { margin-top: 12px; max-width: 62ch; font-size: 15px; color: var(--ink-2); }
.check-ergebnis-fuss { margin-top: 14px; max-width: 62ch; font-size: 13.5px; color: var(--mute); }
.check-ausgabe .tlink { margin-top: 18px; }

/* Auf schmalen Viewports stehen die Antworten untereinander, wie die
   segmentierte Themenwahl im Formular. */
@media (max-width: 620px) {
  .check-optionen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 20. Responsive ---------- */

@media (max-width: 1080px) {
  /* Der kompakte Header ist zusammen mit der Sprachleiste rund 155 px hoch. */
  html { scroll-padding-top: 171px; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .hero-grid,
  .section-head,
  .principle,
  .case,
  .founder,
  .faq-layout,
  .contact-grid,
  .cta-band {
    grid-template-columns: minmax(0, 1fr);
  }
  .case:nth-child(even) .case-media { order: 0; }
  .founder-media { aspect-ratio: 3 / 2; max-width: 460px; }
  .cta-band { align-items: start; }
  .rail { --rail-cols: 2; }
  .display, .h2, .h2--wide, .lead { max-width: 100%; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* Der neutrale Einstieg fuehrt zur Bereichswahl; sie ist die eigentliche
     Handlung der Seite und soll auf dem Handy schon ohne Scrollen anreissen.
     Deshalb hier deutlich weniger Luft ueber und unter dem Hero als in der
     Desktop-Stufe. Betrifft nur die beiden neutralen Startseiten. */
  .hero--neutral { padding-block: 40px 26px; }
  .section--anschluss { padding-top: 26px; }
  .trust-grid,
  .service-grid,
  .footer-grid,
  .form-rows { grid-template-columns: minmax(0, 1fr); }
  .rail { --rail-cols: 1; }
  .rail--mini { --rail-cols: 2; }
  .segmented { grid-template-columns: minmax(0, 1fr); }
  .segmented--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmented--vier label { padding-inline: 9px; font-size: 13.5px; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { justify-content: space-between; }
  .check-list li,
  .principles li { grid-template-columns: 26px 1fr; gap: 11px; }
}

/* ---------- 20a. Kompakter mobiler Dual-Header und Startseiten-Einstieg ---
   Die Kopfzeile behaelt beim Wechsel zwischen neutralem Einstieg und den
   Bereichen dieselben Masse. Die folgenden Hero- und Bereichswahlregeln
   bleiben weiterhin ausschliesslich auf die Startseite begrenzt.            */
@media (max-width: 620px) {
  html:has(.site-header--dual) { scroll-padding-top: 143px; }

  .site-header--dual .header-grid {
    flex-wrap: wrap;
    min-height: 0;
    padding: 4px var(--gutter) 0;
    row-gap: 2px;
  }
  .site-header--dual .area-switch a {
    min-height: 44px;
    padding: 8px 4px;
    font-size: clamp(12px, 3.6vw, 14px);
    font-weight: 550;
  }
  .site-header--dual .area-switch .marker {
    width: 17px;
    height: 17px;
    font-size: 8.5px;
  }
  .site-header--dual .header-grid .brand-w { height: 34px; }
  .site-header--dual .header-grid .brand-mark {
    font-size: 22px;
    line-height: 1;
  }

  .page-home .hero--neutral {
    padding-block: 24px 20px;
    background:
      linear-gradient(135deg, rgba(11, 61, 46, 0.07), transparent 52%),
      linear-gradient(315deg, rgba(166, 95, 43, 0.07), transparent 52%),
      var(--paper);
  }
  .page-home .hero--neutral .section-head { gap: 17px; }
  .page-home .hero--neutral .stack-sm > * + * { margin-top: 12px; }

  .page-home .hero-eyebrow--desktop,
  .page-home .hero-title--desktop,
  .page-home .hero-lead--desktop { display: none; }
  .page-home .hero-eyebrow--mobile { display: inline-flex; margin-top: 0; }
  .page-home .hero-title--mobile,
  .page-home .hero-lead--mobile { display: block; }

  .page-home .hero--neutral .display {
    max-width: none;
    font-size: clamp(2.625rem, 12vw, 3.125rem);
    font-weight: 550;
    line-height: 0.93;
    letter-spacing: -0.045em;
  }
  /* Der fuehrende Claim bleibt auf einer Zeile. Seine eigene fluide Groesse
     loest sich auf schmalen Displays vom Mindestwert der H1, waehrend die
     zweite Zeile ihre bewusst kleinere, aber stabile Groesse behaelt. */
  .page-home .hero--neutral .hero-title--mobile .hero-dual-web {
    font-size: clamp(1.75rem, 11.4vw, 3.125rem);
    line-height: 0.93;
    white-space: nowrap;
  }
  html[lang="en"] .page-home .hero--neutral .hero-title--mobile .hero-dual-web {
    font-size: clamp(1.65rem, 10.1vw, 3.125rem);
  }
  .page-home .hero--neutral .hero-title--mobile .hero-dual-ki {
    margin-top: 8px;
    font-size: 0.78em;
    line-height: 1.02;
    letter-spacing: -0.022em;
    text-align: left;
  }
  .page-home .hero--neutral .lead {
    max-width: 36ch;
    font-size: 1rem;
    line-height: 1.45;
  }

  .page-home .section--anschluss { padding-block: 0; }
  .page-home #bereiche .wrap { padding-inline: 0; }
  .page-home .area-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .page-home .choice {
    min-height: 164px;
    padding: 14px 12px 10px;
    border-top-width: 3px;
  }
  .page-home .choice[data-side="a"] { background: #edf3ef; }
  .page-home .choice[data-side="b"] {
    background: #f7ece3;
    border-left: 1px solid var(--line);
  }
  .page-home .choice-head {
    display: none;
  }
  .page-home .choice-letter { width: 22px; height: 22px; }
  .page-home .choice .h3 {
    max-width: 9ch;
    margin-bottom: 6px;
    font-size: clamp(1.1rem, 5.4vw, 1.35rem);
    line-height: 1.08;
  }
  .page-home .choice > p,
  .page-home .choice-list { display: none; }
  .page-home .choice-mobile-benefit {
    display: block;
    max-width: 14ch;
    font-size: 13px;
    line-height: 1.35;
    color: var(--mute);
  }
  .page-home .choice-cta {
    align-self: flex-start;
    min-height: 44px;
    margin-top: auto;
    padding: 0;
    gap: 8px;
    background: transparent;
    color: var(--side);
    font-size: 13px;
  }
  .page-home .choice-cta:hover { background: transparent; gap: 11px; }
  .page-home .choice-cta-long { display: none; }
  .page-home .choice-cta-short { display: inline; }
  .page-home .choice:has(.choice-cta:focus-visible) {
    outline: 2px solid var(--side);
    outline-offset: -4px;
  }
}

@media (max-width: 350px) {
  .site-header--dual .area-switch a {
    gap: 5px;
    padding-inline: 2px;
    font-size: 11.75px;
  }
}

/* ---------- 20b. Mobiler Hero-Rhythmus und geordnete Fakten ----------
   Neutraler Einstieg und Bereichsseiten beginnen unter demselben kompakten
   Dual-Header auf einer gemeinsamen optischen Linie. Die drei Fakten im Hero
   stehen als ruhige, einzeilige Liste statt als zufaellig umbrechende Tags. */
@media (max-width: 620px) {
  main > .hero,
  .page-home .hero--neutral {
    padding-top: 32px;
  }

  .hero .proof { display: none; }
}


/* ---------- 23. Touch-Ziele auf Mobilgeräten ----------
   Apple und Google nennen 44 px als Mindestgröße für Tippziele. Auf dem
   Desktop reicht die kompakte Höhe, mit dem Finger nicht. Betrifft vor allem
   die Fußzeilen-Links und die Textlinks, die vorher bei 18 bzw. 26 px lagen.
   Reine Fließtext-Links (.prose, Brotkrumen) bleiben unangetastet: Sie sitzen
   im Textfluss, wo zusätzliche Höhe den Zeilenabstand zerreißen würde.
   Dieselbe Schwelle wie die kompakte Kopfzeile: 901 bis 1080 px sind in der
   Praxis Tablets, also Touch.                                                */

@media (max-width: 1080px) {
  .footer-col li { margin-bottom: 0; }
  .footer-col li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }
  .footer-col li:not(:has(a)) {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }

  /* Der Unterstrich laeuft als text-decoration mit der Schriftzeile mit,
     statt am unteren Rand der vergroesserten Tippflaeche zu kleben. */
  .tlink {
    min-height: 44px;
    align-items: center;
    padding-bottom: 0;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .brand { min-height: 44px; align-items: center; }

  .contact-direct li a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Projektlinks in der Rail, etwa unter "Weitere Projekte". */
  .rail .h4 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Brotkrumen bleiben Fließtext, bekommen aber etwas Luft zum Tippen. */
  .breadcrumb { gap: 4px; }
  .breadcrumb a { padding: 9px 5px; margin: -9px -5px; }

  /* Versal-Labels bleiben Labels, werden aber eine Spur lesbarer. */
  .eyebrow, .case-kicker { font-size: 11.5px; }
}

/* ---------- 21. Bewegungsreduktion ---------- */
/* Bewegung entfernen, aber weiterhin sichtbar bleiben. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .case:hover .case-media img { transform: none; }
  /* Nicht `animation:none`, sonst bleiben die Menüpunkte auf opacity 0. */
  .dual-links > * { animation-duration: 0.01ms; animation-delay: 0s; transform: none; }
  .dual-half::after { transition: none; }
  .site-header--dual:has(.nav-dual[data-von]) .brand-mark::before,
  .site-header--dual:has(.nav-dual[data-von]) .brand-w-stack::before { animation-delay: 0s !important; }
  .nav-dual[data-zustand="a"],
  .nav-dual[data-zustand="b"],
  .nav-dual[data-zustand="neutral"][data-von] { animation-duration: 0.01ms; }
  .to-top:hover { transform: none; }
  ::view-transition-group(language-bar),
  ::view-transition-old(language-bar),
  ::view-transition-new(language-bar) { animation: none !important; }
}

/* ---------- 22. Druck ---------- */

@media print {
  .langbar, .site-header, .site-footer, .to-top, .btn, .nav-toggle { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .section { padding-block: 12pt; }
}