/* ==========================================================================
   Weblandschaften — Design-Schicht · Redesign 2026-09 · Stand 2026-09-05
   Verbindlich: docs/redesign-2026-09/DESIGN.md. Vorlage der Mechaniken:
   docs/redesign-2026-09/bestand/04-werbelandschaften-designsystem.md
   (Farben dort alt — hier vollständig auf die Rollen-Tokens aus tokens.css umgestellt).

   Ladereihenfolge (DESIGN §8.2):
   fonts.css → tokens.css → shopnav.css | proto.css/portal.css → <style> Seite
   → wl-design.css (diese Datei) → wl-legacy.css → wl-slots.css

   Kaskadenregeln dieser Datei:
   - Sie liegt NACH dem Seiten-<style>; bei gleicher Spezifität gewinnt sie.
   - shopnav.css arbeitet mit 38 !important (Mobile-Typo, Abstände, Fokus,
     Motion-aus). Nur dort wird mit gleicher Spezifität + !important gekontert,
     sonst kein !important.
   - Keine Hex-Werte in Komponenten; Farbe ausschließlich über --wl-*.
   - Kein Klassenname aus den DOM-Verträgen (bestand/02 §h) wird berührt.

   Abschnitte:
   (a) Legacy-Aliase (späte Wiederholung)   (f) Sektionen, Hero, Schlussaufruf, Fragen,
   (b) Basis                                     Marquee, Formular, Tabelle
   (c) Typografie                            (g) Ridge, Höhenlinien, Rasterpunkte
   (d) Buttons                               (h) Höhenlinien-Relief
   (e) Karten, Kacheln, Chips, Links         (i) Utilities
   (k) Motion-Zustände (Gegenstück zu wl-motion.js)
   (j) Reduzierte Bewegung und html.wl-motion-aus
   ========================================================================== */


/* ==========================================================================
   (a) Legacy-Aliase — späte Wiederholung, damit sie das Inline-:root schlagen
   Inhaltlich identisch mit dem Block am Ende von tokens.css (DESIGN §8.3).
   ========================================================================== */
:root {
  --ink:        var(--wl-tinte);
  --ink2:       var(--wl-sekundaer);
  --faint:      var(--wl-hilfstext);
  --line:       var(--wl-linie);
  --bg:         var(--wl-weiss);
  --bg2:        var(--wl-flaeche-2);
  --bg-mint:    var(--wl-flaeche-2);      /* Grün-Diät: Mint-Bänder → Fläche 2 (Befund 6) */
  --green-l:    var(--wl-linie);
  --green:      var(--wl-blau);
  --green-50:   var(--wl-blau-50);
  --green-d:    var(--wl-blau-hover);
  --green-ink:  var(--wl-aktion-text);
  --green-900:  var(--wl-blau-hover);
  --blue:       var(--wl-blau);
  --sh-sm:      var(--wl-schatten-sm);
  --sh-md:      var(--wl-schatten-md);
  /* Schrift-Aliase mit Fallback: fehlt tokens.css, wären die Aliase guaranteed-invalid und die
     Seite fiele in die Browser-Serife (Kritik-Runde 1, Befund 1/2). */
  --fd:         var(--wl-schrift-display, "Sora", system-ui, -apple-system, "Segoe UI", sans-serif);
  --fb:         var(--wl-schrift-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --faint-ink:  var(--wl-hilfstext);
  --green-text: var(--wl-blau-hover);
  --accent:       var(--wl-blau);
  --accent-text:  var(--wl-blau-hover);   /* App-Familie: Blau 700 statt Grün-Text (DESIGN §5); Erfolg über Zustandsklassen in wl-legacy.css */
  --accent-soft:  var(--wl-blau-50);
  --accent-ink:   var(--wl-aktion-text);
  --canvas:       var(--wl-grund);
  --canvas-2:     var(--wl-weiss);
  --muted:        var(--wl-sekundaer);
  --glass:        var(--wl-flaeche-2);
  --glass-2:      var(--wl-weiss);
  --good:         var(--wl-erfolg);
  --good-text:    var(--wl-erfolg-text);
  --warn:         var(--wl-warnung);
  --bad:          var(--wl-fehler);
  --info:         var(--wl-info);
  --font-d:       var(--wl-schrift-display, "Sora", system-ui, -apple-system, "Segoe UI", sans-serif);
  --font-b:       var(--wl-schrift-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --r-sm:         var(--wl-radius-sm);
  --r-md:         var(--wl-radius-ui);
  --r-lg:         var(--wl-radius-card);
  --r-xl:         var(--wl-radius-hero);
  --shadow:       var(--wl-schatten-sm);
  --shadow-md:    var(--wl-schatten-md);
}


/* ==========================================================================
   (b) Basis — Grund, Schrift, Korn, Selektion, Fokus, Scrollbar
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;                       /* clip statt hidden: kein Scroll-Container, sticky bleibt intakt */
  scroll-padding-top: var(--wl-nav-hoehe);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Grund, Tinte und Schrift mit Fallback — die Schicht darf ohne tokens.css nie in Serife oder ins Leere fallen */
body {
  background-color: var(--wl-grund, #FFFFFF);
  color: var(--wl-tinte, #0E1B2E);
  font-family: var(--wl-schrift-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  overflow-x: clip;                       /* Seiten setzen overflow-x:hidden — clip erzeugt keinen Scroll-Container */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Korn 2,8 % gegen digitale Flachheit (DESIGN §3) — ein Data-URI, liegt über Nav (60), unter Consent/Skip */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--wl-z-korn);
  pointer-events: none;
  opacity: .028;
  background-image: var(--wl-korn);
}

::selection { background-color: var(--wl-blau); color: var(--wl-weiss); }

/* Fokus: Blau-Ring. shopnav.css setzt auf genau dieser Selektorliste Dunkelgrün mit !important,
   deshalb hier dieselbe Liste, gleiche Spezifität, !important — spätere Datei gewinnt. */
:focus-visible {
  outline: 2px solid var(--wl-blau);
  outline-offset: 2px;
  border-radius: 6px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wl-blau) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
/* Auf Dunkel trägt der Ring Licht (Brand-Blau auf Horizont wäre 2,83:1) */
.live-band :focus-visible,
.portalband :focus-visible,
[class*="dark"] :focus-visible,
.sektion-dunkel :focus-visible,
.schlussaufruf :focus-visible,
.karte-dunkel :focus-visible,
.sfoot :focus-visible {
  outline-color: var(--wl-licht) !important;
}

/* Scrollbar neutral (DESIGN §1.3) — kontert die grüne Leiste aus shopnav.css (gleiche Selektoren) */
html { scrollbar-width: thin; scrollbar-color: var(--wl-scrollbar) var(--wl-flaeche-2); }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--wl-flaeche-2); }
html::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid var(--wl-flaeche-2);
  background: var(--wl-scrollbar);
}
html::-webkit-scrollbar-thumb:hover { border-width: 2px; background: var(--wl-blau); }
html.is-scrolling::-webkit-scrollbar-thumb { border-width: 3px; background: var(--wl-scrollbar); }

h1, h2, h3 {
  font-family: var(--wl-schrift-display, "Sora", system-ui, -apple-system, "Segoe UI", sans-serif);
  text-wrap: balance;
  overflow-wrap: break-word;               /* nicht „anywhere“: das drückte Flex-Kinder (Topbar-H1) auf Null und brach „Willkomm/en“ (Befund 5) */
}
/* Nur die Seiten-Heroes dürfen auf schmalen Geräten notfalls im Wort brechen — dann mit Silbentrennung zuerst */
@media (max-width: 640px) {
  .seiten-hero h1, .hero h1, .rhero h1, .vhero h1, .head h1, section.intro h1, .legal h1, .article h1 {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 5 4;
    overflow-wrap: anywhere;
  }
}
h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Nur klassenlose Links im Inhalt (0,1,1). Die Hauptnavigation (.snav-links > a), das Mega-Menü
   (.snav-menu-grid a) und die App-Sidebar (.side a) tragen ebenfalls keine Klassen und würden sonst zur
   blauen Linkliste (Kritik-Runde 1, Befund 5) — wl-legacy.css (l) zieht sie mit gleicher Spezifität,
   später geladen, zurück auf Sekundär-Tinte. Bewusst kein :not(.snav-links > a) hier: das höbe die
   Spezifität auf (0,6,6) und schlüge die Licht-Regeln auf dunklen Flächen. */
a:not([class]) {
  color: var(--wl-blau);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  transition: color var(--wl-mittel) var(--wl-weich);
}
a:not([class]):hover { color: var(--wl-blau-hover); }


/* ==========================================================================
   (c) Typografie — Display-Skala, Lead, Eyebrow, Highlight, Verlaufswort
   ========================================================================== */
.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--wl-schrift-display, "Sora", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.display-xl { font-size: var(--wl-display-xl); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; }
.display-lg { font-size: var(--wl-display-lg); line-height: 1.06; letter-spacing: -.028em; }
.display-md { font-size: var(--wl-display-md); line-height: 1.1;  letter-spacing: -.024em; }
.display-sm { font-size: var(--wl-display-sm); line-height: 1.16; letter-spacing: -.02em;  font-weight: 600; }

.lead {
  font-family: var(--wl-schrift-body);
  font-size: var(--wl-lead);
  font-weight: 400;
  line-height: 1.6;
  color: var(--wl-sekundaer);
  max-width: 42rem;
}

/* Highlight-Wort: <em> nicht kursiv, Brand-Blau (Vollton). Auf Inline-Elemente begrenzt,
   weil eine Bestandsseite .highlight als Block mit Randlinie nutzt. */
em.highlight, span.highlight, strong.highlight,
.display-xl em, .display-lg em, .display-md em, .display-sm em,
.sektion-kopf h2 em, .seiten-hero h1 em {
  font-style: normal;
  color: var(--wl-blau);
}
.sektion-dunkel .display-xl em, .sektion-dunkel .display-lg em, .sektion-dunkel .display-md em,
.sektion-dunkel .display-sm em, .sektion-dunkel .sektion-kopf h2 em,
.schlussaufruf .display-xl em, .schlussaufruf .display-lg em, .schlussaufruf .display-md em,
.karte-dunkel em.highlight {
  color: var(--wl-licht);
}

/* Verlaufswort: nur Display ≥ 24 px, einmal pro Seite (Start-Hero) */
.verlaufswort {
  font-style: normal;
  background-image: var(--wl-verlaufswort);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: .04em;                    /* Sperrung schneidet sonst die letzte Glyphe an */
}
.verlaufswort-hell, .sektion-dunkel .verlaufswort, .schlussaufruf .verlaufswort {
  background-image: var(--wl-verlaufswort-hell);
}
@supports not (background-clip: text) {
  .verlaufswort { color: var(--wl-blau); -webkit-text-fill-color: currentColor; background-image: none; }
  .verlaufswort-hell, .sektion-dunkel .verlaufswort, .schlussaufruf .verlaufswort { color: var(--wl-licht); }
}

/* Eyebrow: Punkt grün mit Halo, Text Blau 700-Ton, Sperrung .12em (M14 — greift auf 349 Seiten) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin: 0;
  font-family: var(--wl-schrift-body);
  font-size: var(--wl-eyebrow);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wl-blau-hover);
}
.eyebrow-punkt {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wl-gruen);
  box-shadow: 0 0 0 4px var(--wl-gruen-halo);
}
.eyebrow-hell, .sektion-dunkel .eyebrow, .schlussaufruf .eyebrow, .karte-dunkel .eyebrow { color: var(--wl-licht); }
.eyebrow-hell .eyebrow-punkt, .sektion-dunkel .eyebrow-punkt, .schlussaufruf .eyebrow-punkt, .karte-dunkel .eyebrow-punkt {
  background: var(--wl-licht);
  box-shadow: 0 0 0 4px rgba(124, 184, 255, .2);
}
.eyebrow-zentriert { justify-content: center; }

/* Mobile Typografie: shopnav.css zieht h1 auf 1,55–1,9 rem und h2/h3 auf 1,2/1,05 rem (!important).
   DESIGN §2: h1 mobil nie unter 2,35 rem; Display-Klassen behalten ihre Token-Größe. */
@media (max-width: 640px) {
  h1, .hero h1 {
    font-size: clamp(2.35rem, 7.5vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.028em;
  }
  .display-xl { font-size: var(--wl-display-xl) !important; line-height: 1.04 !important; }
  .display-lg { font-size: max(2.35rem, var(--wl-display-lg)) !important; line-height: 1.06 !important; }
  .display-md { font-size: var(--wl-display-md) !important; line-height: 1.1 !important; }
  .display-sm { font-size: var(--wl-display-sm) !important; line-height: 1.16 !important; }
  .lead { font-size: 1.0625rem !important; line-height: 1.6 !important; }
  /* App-Shells: die Topbar-H1 (portal.css .topbar h1, 1.05 rem mobil) ist Werkzeugtitel, kein Seiten-Hero —
     ohne Ausnahme sprengte die Display-Größe die Leiste (admin--mobil-fold). DESIGN §5: .display-sm. */
  .topbar h1, .shell .topbar h1, .bar h1 { font-size: 1.25rem !important; line-height: 1.25 !important; letter-spacing: -.02em; }
}


/* ==========================================================================
   (d) Button-System — Pille, Lichtwisch, Lift, Druck, Glanz, Glow-Ring
   Varianten mit .btn.btn-* (0,2,0), damit sie Inline-Regeln wie a.btn schlagen.
   Primaer ist blau (Fjordblau) mit weisser Schrift; Gruen ist nur noch Akzent.
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  border: 0;
  border-radius: var(--wl-radius-pille);
  padding: .875rem 1.5rem;
  font-family: var(--wl-schrift-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--wl-schnell) var(--wl-aus),
    box-shadow var(--wl-mittel) var(--wl-weich),
    background-color var(--wl-mittel) var(--wl-weich),
    border-color var(--wl-mittel) var(--wl-weich),
    color var(--wl-mittel) var(--wl-weich);
}
/* Lichtwisch: läuft beim Überfahren einmal von links nach rechts durch */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform var(--wl-lang) var(--wl-weich);
}
.btn > svg { flex: none; width: 1rem; height: 1rem; transition: transform var(--wl-mittel) var(--wl-aus); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover::after { transform: translateX(130%); }
  .btn:hover > .pfeil { transform: translateX(3px); }
}
/* Druck: Element-Selektor, damit :active die Hover-Regel schlägt */
a.btn:active, button.btn:active { transform: scale(.97); box-shadow: none; }

/* Primär: Grün-Verlauf, Grün-Tinte, grüner Schatten, Glow-Ring beim Hover */
.btn.btn-primaer {
  color: var(--wl-aktion-text);
  background-color: var(--wl-blau);
  background-image: var(--wl-verlauf-btn);
  box-shadow: var(--wl-schatten-gruen), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn.btn-primaer:hover, .btn.btn-primaer:focus-visible {
  color: var(--wl-aktion-text);
  background-image: var(--wl-verlauf-btn-hover);
  box-shadow: var(--wl-glow), inset 0 1px 0 rgba(255, 255, 255, .42);
}

/* Navy: Horizont-Verlauf, Weiß, Blau-Ring beim Hover */
.btn.btn-navy {
  color: var(--wl-weiss);
  background-color: var(--wl-horizont);
  background-image: linear-gradient(135deg, var(--wl-horizont-700) 0%, var(--wl-horizont) 52%, var(--wl-horizont-900) 100%);
  box-shadow: 0 12px 26px -12px rgba(11, 27, 43, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn.btn-navy:hover, .btn.btn-navy:focus-visible {
  color: var(--wl-weiss);
  box-shadow: 0 20px 40px -14px rgba(11, 27, 43, .65), 0 0 0 1px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Hell: Weiß→Grund, Rahmen Linie, blauer Lichtwisch, Hover-Rahmen Blau */
.btn.btn-hell {
  border: 1px solid var(--wl-linie);
  color: var(--wl-tinte);
  background-color: var(--wl-weiss);
  background-image: linear-gradient(135deg, var(--wl-weiss) 0%, var(--wl-flaeche-2) 100%);
  box-shadow: 0 8px 20px -12px rgba(16, 42, 67, .28), var(--wl-glanz);
}
.btn.btn-hell::after { background: linear-gradient(100deg, transparent 30%, var(--wl-blau-schleier) 50%, transparent 70%); }
.btn.btn-hell:hover, .btn.btn-hell:focus-visible {
  color: var(--wl-tinte);
  border-color: var(--wl-blau-rand);
  box-shadow: 0 16px 30px -14px rgba(16, 42, 67, .3), 0 0 0 1px rgba(37, 99, 235, .18), var(--wl-glanz);
}

/* Glas: auf dunkler Fläche */
.btn.btn-glas {
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--wl-weiss);
  background-color: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn.btn-glas:hover, .btn.btn-glas:focus-visible {
  color: var(--wl-weiss);
  border-color: rgba(255, 255, 255, .4);
  background-color: rgba(255, 255, 255, .14);
  box-shadow: 0 16px 34px -16px rgba(11, 27, 43, .55), inset 0 1px 0 rgba(255, 255, 255, .24);
}

/* Blau: Blau-Verlauf, Weiß — Portal/Dashboards (Weiß auf #2563EB 5,17, auf #1D4ED8 6,70) */
.btn.btn-blau {
  color: var(--wl-weiss);
  background-color: var(--wl-blau);
  background-image: var(--wl-verlauf-blau);
  box-shadow: 0 12px 26px -12px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn.btn-blau:hover, .btn.btn-blau:focus-visible {
  color: var(--wl-weiss);
  box-shadow: 0 20px 40px -14px rgba(37, 99, 235, .6), 0 0 0 1px var(--wl-blau-rand), inset 0 1px 0 rgba(255, 255, 255, .26);
}

/* Größen */
.btn.btn-sm { padding: .625rem 1rem; font-size: .86rem; }
.btn.btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.btn.btn-block { width: 100%; }
@media (min-width: 640px) { .btn.btn-block-sm-auto { width: auto; } }

/* Deaktiviert */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn:disabled::after, .btn[aria-disabled="true"]::after { display: none; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }


/* ==========================================================================
   (e) Karten, Icon-Kachel, Chip, Verlaufsrahmen, Link-Slide
   ========================================================================== */
.karte {
  position: relative;
  overflow: hidden;
  border-radius: var(--wl-radius-card);
  border: 1px solid var(--wl-linie);
  padding: 1.5rem;
  color: var(--wl-tinte);
  background-color: var(--wl-weiss);
  background-image: linear-gradient(160deg, var(--wl-weiss) 0%, var(--wl-weiss) 55%, var(--wl-flaeche-2) 100%);
  box-shadow: var(--wl-glanz), var(--wl-schatten-md);
  transition:
    transform var(--wl-mittel) var(--wl-aus),
    box-shadow var(--wl-mittel) var(--wl-weich),
    border-color var(--wl-mittel) var(--wl-weich);
}
.karte.ist-randlos { padding: 0; }
/* Spotlight: Lichtkegel folgt --mx/--my (setzt wl-motion.js), grün 13 % */
.karte::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 184, 255, .13), transparent 42%);
  transition: opacity var(--wl-mittel) var(--wl-weich);
}
/* Verlaufskante oben Horizont→Blau→Grün, wächst von links */
.karte::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: inherit;
  background-image: linear-gradient(90deg, var(--wl-horizont) 0%, var(--wl-blau) 50%, var(--wl-licht) 100%);
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left;
  transition: opacity var(--wl-mittel) var(--wl-weich), transform var(--wl-lang) var(--wl-aus);
}
@media (hover: hover) and (pointer: fine) {
  .karte:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: var(--wl-glanz), 0 30px 56px -24px rgba(16, 42, 67, .4);
  }
  .karte:hover::before, .karte:hover::after { opacity: 1; }
  .karte:hover::after { transform: scaleX(1); }
}
.karte:focus-within::after { opacity: 1; transform: scaleX(1); }

/* Karte dunkel: Glasfläche auf Horizont; + .verlauf-navy / .verlauf-blau als Flächenverlauf */
.karte-dunkel {
  position: relative;
  overflow: hidden;
  border-radius: var(--wl-radius-card);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 1.5rem;
  color: var(--wl-text-dunkel);
  background-color: var(--wl-horizont);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%);
  transition:
    transform var(--wl-mittel) var(--wl-aus),
    border-color var(--wl-mittel) var(--wl-weich),
    background-color var(--wl-mittel) var(--wl-weich);
}
.karte-dunkel h1, .karte-dunkel h2, .karte-dunkel h3, .karte-dunkel h4 { color: var(--wl-weiss); }
.karte-dunkel a:not([class]) { color: var(--wl-licht); }
.karte-dunkel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 184, 255, .18), transparent 42%);
  transition: opacity var(--wl-mittel) var(--wl-weich);
}
@media (hover: hover) and (pointer: fine) {
  .karte-dunkel:hover { transform: translateY(-4px); border-color: rgba(124, 184, 255, .4); }
  .karte-dunkel:hover::before { opacity: 1; }
}
/* Flächenverläufe — auch allein auf Sektionen und Panels nutzbar */
.verlauf-navy { background-color: var(--wl-horizont); background-image: var(--wl-verlauf-navy); color: var(--wl-text-dunkel); }
.verlauf-blau { background-color: var(--wl-blau);     background-image: var(--wl-verlauf-blau); color: var(--wl-weiss); }
.karte-dunkel.verlauf-navy {
  background-image:
    radial-gradient(60% 70% at 85% 10%, rgba(37, 99, 235, .22) 0%, transparent 62%),
    radial-gradient(40% 50% at 10% 90%, rgba(124, 184, 255, .12) 0%, transparent 60%),
    var(--wl-verlauf-navy);
}
.karte-dunkel.verlauf-blau {
  background-image:
    radial-gradient(60% 80% at 15% 90%, rgba(124, 184, 255, .28) 0%, transparent 60%),
    var(--wl-verlauf-blau);
  color: var(--wl-weiss);
}

/* Icon-Kachel: Blau 50 / Blau; bei Karten-Hover Grün / Grün-Tinte */
.ikon-kachel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  background: var(--wl-blau-50);
  color: var(--wl-blau);
  transition: background-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich), transform var(--wl-mittel) var(--wl-aus);
}
.ikon-kachel svg { width: 1.25rem; height: 1.25rem; }
.karte:hover .ikon-kachel, .karte:focus-within .ikon-kachel { background: var(--wl-blau); color: var(--wl-aktion-text); }
.karte-dunkel .ikon-kachel { background: rgba(255, 255, 255, .1); color: var(--wl-licht); }
.karte-dunkel:hover .ikon-kachel { background: var(--wl-blau); color: var(--wl-aktion-text); }

/* Chip: Pille, Weiß, Rahmen Linie; aktiv Blau 50 / Blau */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: var(--wl-radius-pille);
  border: 1px solid var(--wl-linie);
  background: var(--wl-weiss);
  padding: .3rem .7rem;
  font-family: var(--wl-schrift-body);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--wl-sekundaer);
  white-space: nowrap;
  transition: background-color var(--wl-mittel) var(--wl-weich), border-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich);
}
.chip svg { width: .9rem; height: .9rem; color: var(--wl-blau); }
.chip.ist-aktiv, .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current] {
  background: var(--wl-blau-50);
  border-color: var(--wl-blau-100);
  color: var(--wl-blau-hover);
}
.chip.ist-erfolg { background: var(--wl-gruen-50); border-color: transparent; color: var(--wl-gruen-text); }
button.chip:hover, a.chip:hover { border-color: var(--wl-blau-rand); color: var(--wl-tinte); }
.karte-dunkel .chip, .sektion-dunkel .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: var(--wl-text-dunkel); }
.karte-dunkel .chip.ist-aktiv, .sektion-dunkel .chip.ist-aktiv { background: rgba(124, 184, 255, .16); border-color: transparent; color: var(--wl-licht); }

/* Verlaufsrahmen für Bildkarten */
.rahmen-verlauf { position: relative; background-clip: padding-box; border: 1px solid transparent; isolation: isolate; }
.rahmen-verlauf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: -1px;
  border-radius: inherit;
  background-image: linear-gradient(140deg, rgba(124, 184, 255, .7), rgba(37, 99, 235, .25) 45%, transparent 75%);
}

/* Link mit Unterstrich-Slide */
.link-slide { position: relative; display: inline-block; font-weight: 600; text-decoration: none; color: var(--wl-blau-hover); }
.link-slide::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--wl-mittel) var(--wl-aus);
}
.link-slide:hover::after, .link-slide:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.sektion-dunkel .link-slide, .karte-dunkel .link-slide, .schlussaufruf .link-slide { color: var(--wl-licht); }

/* Schimmer auf Platzhaltern (Codex-Slots) */
@keyframes schimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.schimmer {
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: schimmer 3.2s linear infinite;
}


/* ==========================================================================
   (f) Sektionen — Section-Head, Seiten-Hero, Rhythmus, dunkle Sektion,
       Schlussaufruf, Fragen, Marquee, Formular, Tabelle
   ========================================================================== */

/* Section-Head: Eyebrow · H2 (.display-md, <em>) · Lead · optional Aktion rechts */
.sektion-kopf {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
@media (min-width: 768px) {
  .sektion-kopf { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.sektion-kopf-text { max-width: 60ch; min-width: 0; }
.sektion-kopf h2 { margin: 1rem 0 0; }
.sektion-kopf .eyebrow + h2, .sektion-kopf .eyebrow + .display-md { margin-top: 1rem; }
/* p:not([class]) — sonst schlägt (0,1,1) die Eyebrow-Farbe (.eyebrow ist 0,1,0) */
.sektion-kopf p:not([class]), .sektion-kopf .lead { margin: 1.25rem 0 0; font-size: var(--wl-lead); line-height: 1.6; color: var(--wl-sekundaer); }
.sektion-kopf-aktion { flex: none; }
.sektion-kopf.ist-zentriert { text-align: center; align-items: center; }
@media (min-width: 768px) { .sektion-kopf.ist-zentriert { flex-direction: column; } }
.sektion-kopf.ist-zentriert .sektion-kopf-text { margin: 0 auto; }
.sektion-kopf.ist-zentriert .lead, .sektion-kopf.ist-zentriert p { margin-left: auto; margin-right: auto; }
.sektion-dunkel .sektion-kopf h2, .sektion-dunkel .sektion-kopf .display-md { color: var(--wl-weiss); }
.sektion-dunkel .sektion-kopf p:not([class]), .sektion-dunkel .sektion-kopf .lead { color: var(--wl-text-dunkel); }

/* Seiten-Hero: Bergpanorama + Himmelsverlauf + Höhenlinien + atmende Lichtflecken.
   IMMER zentriert (Auftraggeber 2026-09-06) — kein Element rechts. .seiten-hero--bild ist nur
   noch ein Alias und zentriert ebenfalls; .seiten-hero-bild wird ausgeblendet. */
@keyframes orb-atmen {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2%, -3%, 0) scale(1.06); }
}
.seiten-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3rem, 7vw, 6rem);
  text-align: center;
  /* Himmel: kühler Verlauf von oben nach unten, damit die Fläche Tiefe bekommt */
  background-image:
    radial-gradient(72% 62% at 50% 46%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.42) 58%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.20) 42%, rgba(255,255,255,.80) 86%, var(--wl-weiss) 100%),
    var(--hero-bild, url("/assets/img/hero/berglandschaft-hero.jpg"));
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
}
/* Höhenlinien als feine Struktur im oberen Bereich */
.seiten-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .35;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 76%);
  mask-image: radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 76%);
}
/* Bergpanorama am unteren Rand — das Motiv der Marke als Landschaft */
.seiten-hero::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -1px;
  height: clamp(9rem, 22vw, 17rem);
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/img/panorama.svg");
  display: none;   /* Berge kommen jetzt aus den Fotos */
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 104% 100%;
  transform: translateY(calc((var(--p, .5) - .5) * 14px));
}
.seiten-hero.ist-hoch { padding-bottom: clamp(5rem, 12vw, 9rem); }
.seiten-hero.ohne-panorama::after { display: none; }
/* Auf dunklem Grund: dunkles Panorama, heller Text */
.seiten-hero.auf-dunkel {
  background-image:
    radial-gradient(90% 70% at 50% -10%, rgba(124, 184, 255, .16) 0%, transparent 62%),
    var(--wl-verlauf-navy);
  color: var(--wl-text-dunkel);
}
.seiten-hero.auf-dunkel::after { background-image: url("/assets/img/panorama-dunkel.svg"); }
.seiten-hero.auf-dunkel h1 { color: var(--wl-weiss); }

.orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  opacity: .32;
  pointer-events: none;
  will-change: transform;
  animation: orb-atmen 14s ease-in-out infinite;
}
.orb-blau {
  left: -12rem; top: -6rem;
  width: 32rem; height: 32rem;
  background: radial-gradient(circle, rgba(26, 86, 219, .85) 0%, rgba(26, 86, 219, .30) 38%, transparent 68%);
}
.orb-gruen {
  right: -9rem; top: 1.5rem;
  width: 27rem; height: 27rem;
  background: radial-gradient(circle, rgba(124, 184, 255, .9) 0%, rgba(124, 184, 255, .32) 38%, transparent 68%);
  animation-delay: -7s;
}

/* Zentrierter Inhalt: eine Spalte, alles mittig, Lesebreite begrenzt */
.seiten-hero-raster { display: block; }
.seiten-hero-text { max-width: 54rem; margin-inline: auto; }
.seiten-hero-bild, .seiten-hero-aktion { display: none; }
.seiten-hero h1 {
  margin: 1rem auto 0;
  max-width: 20ch;
  overflow-wrap: break-word;
  hyphens: auto;
  color: var(--wl-tinte);
}
.seiten-hero-text > p:not([class]), .seiten-hero .lead {
  margin: 1.5rem auto 0;
  max-width: 46rem;
  font-size: var(--wl-lead);
  line-height: 1.6;
  color: var(--wl-sekundaer);
}
.seiten-hero .eyebrow, .seiten-hero .vertrauen { justify-content: center; }
.seiten-hero-aktionen { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
.seiten-hero-hinweis {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: flex-start;
  gap: .625rem;
  border-radius: var(--wl-radius-ui);
  border: 1px solid var(--wl-blau-100);
  background: rgba(234, 241, 254, .7);
  padding: .75rem 1rem;
  font-size: .875rem;
  color: var(--wl-sekundaer);
}

/* Vertrauenszeile: Häkchen als Maske in Grün-als-Text (Token, kein Hex in der Grafik) */
.vertrauen {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--wl-sekundaer);
}
/* Häkchen an die erste Zeile binden und den Punkt nie über die volle Zeilenbreite
   strecken lassen — sonst löst sich das Häkchen bei zweizeiligem Umbruch (mobil)
   vom Text und steht allein am linken Rand. */
.vertrauen > * {
  display: inline-flex;
  align-items: flex-start;
  flex: 0 1 auto;
  max-width: max-content;
  gap: .5rem;
  margin: 0;
  text-align: left;
}
.vertrauen > *::before {
  content: "";
  flex: none;
  margin-top: .15em;
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--wl-blau);
  -webkit-mask: var(--wl-ikon-haken) center / contain no-repeat;
  mask: var(--wl-ikon-haken) center / contain no-repeat;
}
.sektion-dunkel .vertrauen, .schlussaufruf .vertrauen { color: var(--wl-text-dunkel); }
.sektion-dunkel .vertrauen > *::before, .schlussaufruf .vertrauen > *::before { background-color: var(--wl-licht); }

/* Brotkrumen */
.krumen {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--wl-sekundaer);
}
.krumen a { border-radius: var(--wl-radius-pille); padding: .25rem .5rem; color: inherit; text-decoration: none; }
.krumen a:hover { background: var(--wl-flaeche-2); color: var(--wl-tinte); }
.krumen [aria-current] { border-radius: var(--wl-radius-pille); background: var(--wl-blau-50); padding: .25rem .5rem; color: var(--wl-blau-hover); }
.krumen li + li::before {
  content: "";
  display: inline-block;
  width: .8rem; height: .8rem;
  margin-right: .25rem;
  vertical-align: -.15em;
  background-color: var(--wl-hilfstext);
  -webkit-mask: var(--wl-ikon-chevron) center / contain no-repeat;
  mask: var(--wl-ikon-chevron) center / contain no-repeat;
  transform: rotate(-90deg);
}

/* Sektionsrhythmus 80 / 112 px (M7) */
.sektion { position: relative; isolation: isolate; padding: var(--wl-sektion) 0; }   /* isolate: z-index:-1-Lagen (Relief, Orbs) bleiben über dem Sektionsgrund */
.sektion.ist-eng { padding: calc(var(--wl-sektion) * .625) 0; }
.sektion.ist-flaeche { background-color: var(--wl-flaeche-2); }
.sektion.ist-weiss { background-color: var(--wl-weiss); }
.sektion-kopf + .grid-2, .sektion-kopf + .grid-3, .sektion-kopf + .grid-4, .sektion-kopf + .bento { margin-top: 0; }

/* Dunkle Sektion: Verlauf navy + Höhenlinien-hell, Text-auf-Dunkel, Links in Licht */
.sektion-dunkel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--wl-sektion) 0;
  color: var(--wl-text-dunkel);
  background-color: var(--wl-horizont);
  background-image: var(--wl-verlauf-navy);
  background-size: 400px 400px, auto;
  background-attachment: scroll;
}
.sektion-dunkel h1, .sektion-dunkel h2, .sektion-dunkel h3, .sektion-dunkel h4 { color: var(--wl-weiss); }
.sektion-dunkel p { color: var(--wl-text-dunkel); }
.sektion-dunkel .lead { color: var(--wl-text-dunkel); }
.sektion-dunkel a:not([class]) { color: var(--wl-licht); }
.sektion-dunkel a:not([class]):hover { color: var(--wl-weiss); }
.sektion-dunkel .gedaempft, .sektion-dunkel small, .sektion-dunkel .meta { color: var(--wl-gedaempft); }
.sektion-dunkel .orb { opacity: .35; }

/* Mobile Abstände: shopnav.css setzt section auf 32 px (!important); Design-Sektionen behalten Rhythmus */
@media (max-width: 640px) {
  section.sektion, .sektion,
  section.sektion-dunkel, .sektion-dunkel { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  section.seiten-hero, .seiten-hero, .hero.seiten-hero { padding-top: 2rem !important; padding-bottom: 2.25rem !important; }
}

/* Schlussaufruf: dunkle Karte, Verlauf blau + Grün-Lichtfleck, Headline Weiß, zwei Buttons, Kontaktzeile */
.schlussaufruf {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--wl-radius-hero);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  color: var(--wl-weiss);
  background-color: var(--wl-blau-hover);
  background-image:
    radial-gradient(45% 60% at 82% 18%, rgba(124, 184, 255, .34) 0%, transparent 62%),
    radial-gradient(40% 50% at 12% 88%, rgba(255, 255, 255, .12) 0%, transparent 60%),
    var(--wl-verlauf-blau);
  background-size: auto, auto, auto;
  box-shadow: var(--wl-schatten-lg);
}
.schlussaufruf-innen { position: relative; margin: 0 auto; max-width: 48rem; }
.schlussaufruf h2, .schlussaufruf .display-lg, .schlussaufruf .display-md { margin: 1.25rem 0 0; color: var(--wl-weiss); }
.schlussaufruf p:not([class]), .schlussaufruf .lead {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.schlussaufruf-aktionen {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
@media (min-width: 640px) { .schlussaufruf-aktionen { flex-direction: row; } }
.schlussaufruf-kontakt {
  margin-top: 1.5rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem 1.25rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .72);
}
.schlussaufruf-kontakt a { color: var(--wl-weiss); text-decoration: none; font-weight: 600; }
.schlussaufruf-kontakt a:hover { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 640px) {
  .schlussaufruf, .ctaband.schlussaufruf { padding: 2.5rem 1.25rem !important; }
}

/* Fragen: details/summary, Pfeil-Rotation, Rahmen Linie, Hover Fläche 2 (.faqitem per Alias in wl-legacy.css) */
@keyframes frage-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fragen { display: grid; gap: .625rem; }
.fragen > details {
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-ui);
  background: var(--wl-weiss);
  box-shadow: var(--wl-schatten-sm);
  transition: border-color var(--wl-mittel) var(--wl-weich), box-shadow var(--wl-mittel) var(--wl-weich);
}
.fragen > details[open] { border-color: var(--wl-blau-rand); box-shadow: var(--wl-schatten-md); }
.fragen summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: inherit;
  cursor: pointer;
  font-family: var(--wl-schrift-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wl-tinte);
  transition: background-color var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary:hover { background: var(--wl-flaeche-2); }
.fragen > details[open] > summary { color: var(--wl-blau-hover); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fragen summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--wl-linie);
  background-color: var(--wl-sekundaer);
  -webkit-mask: var(--wl-ikon-chevron) center / 1rem no-repeat;
  mask: var(--wl-ikon-chevron) center / 1rem no-repeat;
  transition: transform var(--wl-mittel) var(--wl-aus), background-color var(--wl-mittel) var(--wl-weich);
}
.fragen > details[open] > summary::after { transform: rotate(180deg); background-color: var(--wl-blau); }
.fragen > details > :not(summary) {
  padding: 0 1.25rem 1.25rem;
  margin: 0;
  font-size: .95rem;
  line-height: 1.62;
  color: var(--wl-sekundaer);
  animation: frage-auf 350ms var(--wl-reveal);
}
.fragen > details > :not(summary) p { margin: 0 0 .75rem; }
.fragen > details > :not(summary) p:last-child { margin-bottom: 0; }
@media (min-width: 640px) {
  .fragen summary { padding-left: 1.5rem; padding-right: 1.5rem; }
  .fragen > details > :not(summary) { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Marquee: Chips-Band 38 s, Pause bei Hover/Fokus, Maske links/rechts */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: .25rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-spur {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  padding-right: 1.5rem;
  will-change: transform;
  animation: marquee var(--dauer, 38s) linear infinite;
}
.marquee.ist-umgekehrt .marquee-spur { animation-direction: reverse; }
.marquee:hover .marquee-spur, .marquee:focus-within .marquee-spur { animation-play-state: paused; }
.marquee-gruppe { display: flex; flex: none; align-items: center; gap: 1.5rem; }
.marquee-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  border-radius: var(--wl-radius-pille);
  border: 1px solid var(--wl-linie);
  background: var(--wl-weiss);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--wl-tinte);
  text-decoration: none;
}
.marquee-chip svg { width: 1rem; height: 1rem; color: var(--wl-blau); }
.marquee-band { border-top: 1px solid var(--wl-linie); border-bottom: 1px solid var(--wl-linie); background: var(--wl-weiss); padding: 1rem 0; }

/* Formular: .feld (Label 600 .85rem, Input 3rem, Radius UI, Rahmen UI-Rand, Fokus Blau-Ring) */
.feld { display: grid; gap: .4rem; margin: 0 0 1rem; }
.feld > label, .feld-label { font-size: .85rem; font-weight: 600; color: var(--wl-tinte); }
.feld input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.feld select,
.feld textarea,
.feld-input {
  width: 100%;
  min-height: 3rem;
  padding: .7rem 1rem;
  border: 1px solid var(--wl-ui-rand);
  border-radius: var(--wl-radius-ui);
  background: var(--wl-weiss);
  color: var(--wl-tinte);
  font-family: var(--wl-schrift-body);
  font-size: 1rem;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color var(--wl-mittel) var(--wl-weich), box-shadow var(--wl-mittel) var(--wl-weich);
}
.feld select {
  padding-right: 2.5rem;
  background-image: var(--wl-ikon-chevron);
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1rem;
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--wl-hilfstext); opacity: 1; }
.feld input:hover:not(:focus), .feld select:hover:not(:focus), .feld textarea:hover:not(:focus) { border-color: var(--wl-sekundaer); }
/* Fokus: Ring als box-shadow, Outline transparent (bleibt im Forced-Colors-Modus sichtbar);
   kontert input:focus-visible aus shopnav.css mit höherer Spezifität + !important */
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible, .feld-input:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
  border-color: var(--wl-blau);
  box-shadow: var(--wl-fokus);
}
.feld input[type="checkbox"], .feld input[type="radio"] {
  width: 1.15rem; height: 1.15rem;
  margin: .1rem 0 0;
  accent-color: var(--wl-blau);
  flex: none;
}
.feld.ist-zeile { grid-template-columns: auto 1fr; align-items: start; gap: .625rem; }
.feld.ist-zeile > label { font-weight: 500; font-size: .9rem; line-height: 1.45; color: var(--wl-sekundaer); }
.feld-hinweis { display: flex; align-items: flex-start; gap: .4rem; font-size: .8rem; line-height: 1.45; color: var(--wl-hilfstext); }
.feld-hinweis::before {
  content: none;
  flex: none;
  width: 1rem; height: 1rem;
  margin-top: .05rem;
  background-color: currentColor;
  -webkit-mask: var(--wl-ikon-info) center / contain no-repeat;
  mask: var(--wl-ikon-info) center / contain no-repeat;
}
/* Zustände: Rahmen + Hinweis mit Icon */
.feld.ist-erfolg input, .feld.ist-erfolg select, .feld.ist-erfolg textarea { border-color: var(--wl-erfolg); }
.feld.ist-warnung input, .feld.ist-warnung select, .feld.ist-warnung textarea { border-color: var(--wl-warnung); }
.feld.ist-fehler input, .feld.ist-fehler select, .feld.ist-fehler textarea { border-color: var(--wl-fehler); }
.feld.ist-fehler input:focus-visible, .feld.ist-fehler select:focus-visible, .feld.ist-fehler textarea:focus-visible {
  border-color: var(--wl-fehler); box-shadow: 0 0 0 3px rgba(225, 29, 72, .28);
}
.feld.ist-erfolg .feld-hinweis { color: var(--wl-erfolg-text); }
.feld.ist-warnung .feld-hinweis { color: var(--wl-warnung-text); }
.feld.ist-fehler .feld-hinweis { color: var(--wl-fehler-text); }
.feld.ist-erfolg .feld-hinweis::before, .feld.ist-warnung .feld-hinweis::before, .feld.ist-fehler .feld-hinweis::before { content: ""; }
.feld.ist-erfolg .feld-hinweis::before { -webkit-mask-image: var(--wl-ikon-erfolg); mask-image: var(--wl-ikon-erfolg); }
.feld.ist-warnung .feld-hinweis::before { -webkit-mask-image: var(--wl-ikon-warnung); mask-image: var(--wl-ikon-warnung); }
.feld.ist-fehler .feld-hinweis::before { -webkit-mask-image: var(--wl-ikon-fehler); mask-image: var(--wl-ikon-fehler); }

/* Meldung (Formular-Rückmeldung, #wlMelde per Alias in wl-legacy.css) */
.meldung {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  border-radius: var(--wl-radius-ui);
  border: 1px solid var(--wl-linie);
  background: var(--wl-flaeche-2);
  padding: .875rem 1rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--wl-tinte);
}
.meldung::before {
  content: "";
  flex: none;
  width: 1.1rem; height: 1.1rem;
  margin-top: .1rem;
  background-color: currentColor;
  -webkit-mask: var(--wl-ikon-info) center / contain no-repeat;
  mask: var(--wl-ikon-info) center / contain no-repeat;
}
.meldung.ist-erfolg  { background: var(--wl-erfolg-flaeche);  border-color: rgba(18, 164, 99, .3);   color: var(--wl-erfolg-text); }
.meldung.ist-warnung { background: var(--wl-warnung-flaeche); border-color: rgba(217, 119, 6, .3);   color: var(--wl-warnung-text); }
.meldung.ist-fehler  { background: var(--wl-fehler-flaeche);  border-color: rgba(225, 29, 72, .3);   color: var(--wl-fehler-text); }
.meldung.ist-erfolg::before  { -webkit-mask-image: var(--wl-ikon-erfolg);  mask-image: var(--wl-ikon-erfolg); }
.meldung.ist-warnung::before { -webkit-mask-image: var(--wl-ikon-warnung); mask-image: var(--wl-ikon-warnung); }
.meldung.ist-fehler::before  { -webkit-mask-image: var(--wl-ikon-fehler);  mask-image: var(--wl-ikon-fehler); }

/* Tabelle: Kopf Fläche 2, Zeilen Linie, Zebra aus (Portal/Admin) */
.tabelle-wrap { overflow-x: auto; border: 1px solid var(--wl-linie); border-radius: var(--wl-radius-ui); background: var(--wl-weiss); }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; color: var(--wl-tinte); }
.tabelle th {
  background: var(--wl-flaeche-2);
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--wl-linie);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wl-sekundaer);
  white-space: nowrap;
}
.tabelle td { padding: .85rem 1rem; border-bottom: 1px solid var(--wl-linie); vertical-align: top; }
.tabelle tbody tr:nth-child(even) td { background: transparent; }
.tabelle tbody tr:hover td { background: var(--wl-flaeche-2); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle td.ist-zahl, .tabelle th.ist-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle .kennzahl { font-family: var(--wl-schrift-display); font-weight: 700; }


/* ==========================================================================
   (g) Ridge (Kammlinie), Höhenlinien, Rasterpunkte
   Ridge ohne Markup: <div class="ridge" aria-hidden="true" data-parallaxe></div>
   Lesart: --ridge-bg = Fläche der VORHERIGEN Sektion, --ridge-vorn = Fläche der FOLGENDEN.
     Hell → Dunkel:  <div class="ridge" style="--ridge-bg:var(--wl-grund)"></div>   (vorn = Sektion-Top)
     Dunkel → Hell:  <div class="ridge ist-flip auf-dunkel" style="--ridge-bg:var(--wl-grund)"></div>
                     (gedreht: vorn = Horizont-900 hängt von oben, hinten = Licht 22 %, bg = folgende helle Fläche)
   Alternativ mit zwei inline-SVGs (bestand/04 §7.1): dann greifen die svg-Regeln, Pseudo-Elemente entfallen.
   ========================================================================== */
.ridge {
  --ridge-vorn: var(--wl-sektion-top);
  --ridge-hinten: rgba(37, 99, 235, .18);
  position: relative;
  height: 4rem;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  background: var(--ridge-bg, transparent);
}
@media (min-width: 640px)  { .ridge { height: 6rem; } }
@media (min-width: 1024px) { .ridge { height: 7rem; } }
.ridge.ist-flip { transform: rotate(180deg); }
.ridge.auf-dunkel { --ridge-vorn: var(--wl-horizont-900); --ridge-hinten: rgba(124, 184, 255, .22); }
.ridge.zu-weiss { --ridge-vorn: var(--wl-weiss); }
.ridge.zu-grund { --ridge-vorn: var(--wl-grund); }
.ridge.zu-flaeche { --ridge-vorn: var(--wl-flaeche-2); }
.ridge:not(:has(svg))::before, .ridge:not(:has(svg))::after {
  content: "";
  position: absolute;
  left: -4%;
  bottom: 0;
  height: 100%;
  width: 108%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ridge:not(:has(svg))::before {
  background-color: var(--ridge-hinten);
  -webkit-mask-image: var(--wl-ridge-hinten);
  mask-image: var(--wl-ridge-hinten);
  transform: translateX(calc((var(--p, .5) - .5) * 80px));      /* −40 … +40 px */
}
.ridge:not(:has(svg))::after {
  background-color: var(--ridge-vorn);
  -webkit-mask-image: var(--wl-ridge-vorn);
  mask-image: var(--wl-ridge-vorn);
  transform: translateX(calc((.5 - var(--p, .5)) * 60px));      /* +30 … −30 px */
}
.ridge svg { position: absolute; left: -4%; bottom: 0; height: 100%; width: 108%; }
.ridge-hinten { transform: translateX(calc((var(--p, .5) - .5) * 80px)); }
.ridge-vorn   { transform: translateX(calc((.5 - var(--p, .5)) * 60px)); }
.ridge-hinten path { fill: var(--ridge-hinten); }
.ridge-vorn path   { fill: var(--ridge-vorn); }

/* Höhenlinien (Data-URI aus tokens.css: Blau .14 / Weiß .09) */
.hoehenlinien      { background-image: var(--wl-hoehenlinien);      background-size: 400px 400px; }
.hoehenlinien-hell { background-image: var(--wl-hoehenlinien-hell); background-size: 400px 400px; }
.hoehenlinien-lage { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hoehenlinien-maske {
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%);
}
.raster-punkte {
  background-image: radial-gradient(rgba(37, 99, 235, .18) 1px, transparent 1px);
  background-size: 22px 22px;
}


/* ==========================================================================
   (h) Höhenlinien-Relief der Bergmarke (DESIGN §7) — Leitmotiv
   Vorlage: assets/img/relief.svg (erzeugt von scripts/redesign/relief-erzeugen.mjs),
   inline einsetzen. Linien zeichnen sich beim Laden (1,2 s, gestaffelt über --i),
   Deckkraft 14–22 % über --t, Parallaxe über --p (wl-motion.js, data-parallaxe).
   ========================================================================== */
@keyframes relief-zeichnen { to { stroke-dashoffset: 0; } }
.relief {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.relief-linie {
  fill: none;
  stroke: var(--wl-blau);
  stroke-opacity: calc(.14 + var(--t, 0) * .08);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: relief-zeichnen 1.2s var(--wl-reveal) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.relief-linie--gruen { stroke: var(--wl-gruen); stroke-opacity: .6; }
.relief-boden {
  fill: none;
  stroke: var(--wl-horizont);
  stroke-opacity: .2;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: relief-zeichnen 1.2s var(--wl-reveal) .1s forwards;
}
/* Parallaxe: hinterer Gipfel wandert stärker als der vordere */
.relief-gipfel { transition: transform 120ms linear; }
.relief-gipfel--hinten { transform: translateY(calc((.5 - var(--p, .5)) * 30px)); }
.relief-gipfel--vorn   { transform: translateY(calc((.5 - var(--p, .5)) * 16px)); }
/* Auf Dunkel: Weiß statt Blau, Grün-Linie in Licht */
.relief.auf-dunkel .relief-linie, .sektion-dunkel .relief-linie, .schlussaufruf .relief-linie {
  stroke: var(--wl-weiss);
  stroke-opacity: calc(.1 + var(--t, 0) * .08);
}
.relief.auf-dunkel .relief-linie--gruen, .sektion-dunkel .relief-linie--gruen { stroke: var(--wl-licht); stroke-opacity: .55; }
.relief.auf-dunkel .relief-boden, .sektion-dunkel .relief-boden { stroke: var(--wl-weiss); stroke-opacity: .2; }
/* Relief als Fond hinter Inhalt (Hero rechte Hälfte, 404, Login-Aside) */
.relief-fond {
  position: absolute;
  inset: auto -6% -4% auto;
  width: min(62%, 52rem);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(75% 75% at 60% 55%, #000 35%, transparent 82%);
  mask-image: radial-gradient(75% 75% at 60% 55%, #000 35%, transparent 82%);
}
@media (max-width: 1023px) { .relief-fond { width: 85%; inset: auto -20% -6% auto; opacity: .7; } }


/* ==========================================================================
   (i) Utilities — Container, Raster, Bento, Stack, Screenreader, Versteckt
   ========================================================================== */
.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--wl-maxw);
  padding-left: var(--wl-seitenrand);
  padding-right: var(--wl-seitenrand);
  box-sizing: border-box;
}
.wrap.ist-schmal { max-width: var(--wl-maxw-schmal); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Bento: erste Karte groß (2 Spalten, 2 Zeilen), zweite 2 Spalten, Rest je eine Zelle */
.bento { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > :first-child, .bento > :nth-child(2) { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bento > :first-child { grid-column: span 2; grid-row: span 2; }
  .bento > :nth-child(2) { grid-column: span 2; }
}
.mass { max-width: 72ch; }                          /* Lesemaß für Fließtext ohne Karte (Befund 10) */
.stack { display: grid; gap: var(--stack, 1rem); }
.stack.ist-eng { --stack: .5rem; }
.stack.ist-weit { --stack: 2rem; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
html .ist-versteckt { display: none; }
.zentriert { text-align: center; }
.gedaempft { color: var(--wl-hilfstext); }


/* ==========================================================================
   (k) Motion-Zustände — Gegenstück zu prototype/wl-motion.js (DESIGN §6)
   Nur mit html.js ausblenden; ohne Skript ist alles sichtbar.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--wl-reveal-dauer) var(--wl-reveal), transform var(--wl-reveal-dauer) var(--wl-reveal);
  transition-delay: var(--delay, 0ms);
}
html.js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }
html.js [data-staffel] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--wl-staffel-dauer) var(--wl-reveal), transform var(--wl-staffel-dauer) var(--wl-reveal);
  transition-delay: calc(50ms + var(--i, 0) * var(--wl-staffel-schritt));
}
html.js [data-staffel].ist-sichtbar > * { opacity: 1; transform: none; }
/* Reveal-Ziele aus shopnav.js (.wl-rv/.wl-in) auf dieselbe Kurve ziehen */
html.wl-anim .wl-rv {
  transform: translateY(24px);
  transition: opacity var(--wl-reveal-dauer) var(--wl-reveal), transform var(--wl-reveal-dauer) var(--wl-reveal);
}
html.wl-anim .wl-rv.wl-in { opacity: 1; transform: none; }
/* Sichtbar bis zur Sofortprüfung von wl-motion.js: shopnav.js versteckt .wl-rv sofort, sein Beobachter
   (threshold .06) feuert bei Sektionen höher als der Viewport nie → leere Halbseite unter dem Hero (Befund 1).
   wl-motion.js setzt .wl-in für alles im Bild, dann html.wl-motion-bereit; zwei Frames später .wl-motion-los
   (erst ab dann Übergänge, damit das Verstecken selbst nicht ausblendet). (0,3,1) > shopnav.css (0,2,1). */
html.wl-anim:not(.wl-motion-bereit) .wl-rv { opacity: 1; transform: none; transition: none; }
html.wl-anim.wl-motion-bereit:not(.wl-motion-los) .wl-rv { transition: none; }
.magnet { display: inline-block; will-change: transform; }


/* ==========================================================================
   (j) Reduzierte Bewegung und Schalter html.wl-motion-aus (#sfootMotion)
   Alles aus: Lichtwisch, Lift, Reveal, Marquee, Orbs, Parallaxe; Relief sofort fertig.
   shopnav.css pausiert Animationen bereits global mit !important — deshalb
   hier animation:none + Endzustand, damit gezeichnete Linien nicht unsichtbar bleiben.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn, .karte, .karte-dunkel, .ikon-kachel, .chip, .link-slide::after, .relief-gipfel,
  .fragen summary, .fragen summary::after, .fragen > details { transition: none; }
  .btn:hover, .karte:hover, .karte-dunkel:hover { transform: none; }
  .karte:hover::after { transform: scaleX(1); transition: none; }
  .orb, .marquee-spur, .schimmer { animation: none; }
  .relief-linie, .relief-boden { animation: none; stroke-dashoffset: 0; }
  .ridge::before, .ridge::after, .ridge-hinten, .ridge-vorn, .relief-gipfel--hinten, .relief-gipfel--vorn { transform: none; }
  .fragen > details > :not(summary) { animation: none; }
  html.js [data-reveal], html.js [data-staffel] > * { opacity: 1; transform: none; transition: none; }
  html.wl-anim .wl-rv, html.wl-anim .wl-rv.wl-in { opacity: 1; transform: none; transition: none; }
}
html.wl-motion-aus .btn::after { display: none; }
html.wl-motion-aus .btn, html.wl-motion-aus .karte, html.wl-motion-aus .karte-dunkel,
html.wl-motion-aus .ikon-kachel, html.wl-motion-aus .chip, html.wl-motion-aus .link-slide::after,
html.wl-motion-aus .relief-gipfel, html.wl-motion-aus .fragen summary,
html.wl-motion-aus .fragen summary::after, html.wl-motion-aus .fragen > details { transition: none; }
html.wl-motion-aus .btn:hover, html.wl-motion-aus .karte:hover, html.wl-motion-aus .karte-dunkel:hover { transform: none; }
html.wl-motion-aus .karte:hover::after { transform: scaleX(1); transition: none; }
html.wl-motion-aus .orb, html.wl-motion-aus .marquee-spur, html.wl-motion-aus .schimmer { animation: none; }
html.wl-motion-aus .relief-linie, html.wl-motion-aus .relief-boden { animation: none; stroke-dashoffset: 0; }
html.wl-motion-aus .ridge::before, html.wl-motion-aus .ridge::after, html.wl-motion-aus .ridge-hinten,
html.wl-motion-aus .ridge-vorn, html.wl-motion-aus .relief-gipfel--hinten, html.wl-motion-aus .relief-gipfel--vorn { transform: none; }
html.wl-motion-aus .fragen > details > :not(summary) { animation: none; }
html.wl-motion-aus [data-reveal], html.wl-motion-aus [data-staffel] > * { opacity: 1; transform: none; transition: none; }
html.wl-motion-aus .wl-rv, html.wl-motion-aus .wl-rv.wl-in { opacity: 1; transform: none; transition: none; }


/* === Tiefe Flächen v2 === dunkle Sektionen und Schlussaufruf mit Landschaftsfoto und Verlauf.
   Bild je Sektion austauschbar:  style="--sektion-bild:url('../assets/img/hero/berglandschaft-hero-v3.webp')"
   Ohne Bild:  class="ohne-bild"  === */

.sektion-dunkel {
  position: relative;
  isolation: isolate;
  background-color: var(--wl-horizont);
  background-image:
    linear-gradient(165deg, rgba(18, 58, 107, .93) 0%, rgba(11, 37, 69, .96) 52%, rgba(7, 26, 51, .98) 100%),
    var(--sektion-bild, url("/assets/img/hero/berglandschaft-hero.jpg"));
  background-size: cover, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat, no-repeat;
  color: var(--wl-text-dunkel);
}
.sektion-dunkel.ohne-bild {
  background-image: linear-gradient(165deg, #123A6B 0%, #0B2545 52%, #071A33 100%);
}
/* Lichtfleck und Höhenlinien darüber, Inhalt bleibt oben */
.sektion-dunkel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(70% 55% at 18% 12%, rgba(124, 184, 255, .22) 0%, transparent 62%),
    radial-gradient(55% 45% at 88% 92%, rgba(26, 86, 219, .28) 0%, transparent 60%);
}
.sektion-dunkel > * { position: relative; z-index: 1; }
.sektion-dunkel h1, .sektion-dunkel h2, .sektion-dunkel h3 { color: var(--wl-weiss); }
.sektion-dunkel p { color: var(--wl-text-dunkel); }
/* Lichtflecken in dunklen Sektionen deutlich zurücknehmen, sonst wird die Fläche milchig */
.sektion-dunkel .orb { opacity: .14; }

.schlussaufruf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--wl-radius-hero);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  background-color: var(--wl-horizont);
  background-image:
    linear-gradient(140deg, rgba(26, 86, 219, .90) 0%, rgba(18, 58, 107, .94) 46%, rgba(7, 26, 51, .97) 100%),
    var(--sektion-bild, url("/assets/img/hero/landschaft-referenzen.jpg"));
  background-size: cover, cover;
  background-position: center, center 40%;
  box-shadow: var(--wl-schatten-lg);
  color: var(--wl-text-dunkel);
  text-align: center;
}
.schlussaufruf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 60% at 82% 8%, rgba(124, 184, 255, .30) 0%, transparent 62%);
}
/* Kammlinie als untere Kante des Schlussaufrufs */
.schlussaufruf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(4rem, 9vw, 7rem);
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background: url("/assets/img/panorama-dunkel.svg") no-repeat bottom center / 100% 100%;
}
.schlussaufruf-innen { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
.schlussaufruf h2 { color: var(--wl-weiss); }
.schlussaufruf p { color: var(--wl-text-dunkel); }
.schlussaufruf-aktionen { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.schlussaufruf-kontakt { margin-top: 1.5rem; font-size: .95rem; }
.schlussaufruf-kontakt a { color: var(--wl-licht); }

/* Hero mit Foto: Bestandsbilder weiterverwenden, Text bleibt lesbar (heller Schleier darüber) */
.seiten-hero.mit-foto {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, .82) 42%, rgba(255, 255, 255, .96) 100%),
    var(--hero-bild, url("/assets/img/hero/berglandschaft-hero.jpg"));
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
}
.seiten-hero.mit-foto::after { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .sektion-dunkel .orb, .seiten-hero .orb { animation: none; }
}

/* Hero-Varianten: ohne Foto (ruhige Fläche) und mit dunklem Foto */
.seiten-hero.ohne-foto {
  background-image:
    radial-gradient(90% 70% at 50% -10%, rgba(26, 86, 219, .10) 0%, transparent 62%),
    linear-gradient(180deg, var(--wl-blau-50) 0%, #F7FAFE 46%, var(--wl-weiss) 100%);
}
.seiten-hero.foto-dunkel {
  background-image:
    linear-gradient(180deg, rgba(11, 37, 69, .82) 0%, rgba(11, 37, 69, .74) 42%, rgba(7, 26, 51, .92) 100%),
    var(--hero-bild, url("/assets/img/hero/berglandschaft-hero.jpg"));
  color: var(--wl-text-dunkel);
}
.seiten-hero.foto-dunkel h1 { color: var(--wl-weiss); }
.seiten-hero.foto-dunkel .lead, .seiten-hero.foto-dunkel p { color: var(--wl-text-dunkel); }

/* Schmale Ableitungen der neuen Bildfamilie sparen auf Mobilgeraeten Bandbreite. */
@media (max-width: 720px) {
  .seiten-hero[style*="--hero-bild-mobil"] {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .74) 38%, rgba(255, 255, 255, .93) 78%, var(--wl-weiss) 100%),
      var(--hero-bild-mobil);
  }
}

/* REDAKTIONELLE HERO-BILDER: Blog, Lexikon, Aktuelles und Standorte */
.article > .medien-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: clamp(19rem, 38vw, 25rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  padding: clamp(2.5rem, 7vw, 4.75rem) clamp(1.25rem, 5vw, 3.5rem);
  border: 1px solid rgba(98, 139, 195, .24);
  border-radius: var(--wl-radius-hero);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .70) 45%, rgba(255, 255, 255, .92) 100%),
    var(--artikel-hero);
  background-position: center, center;
  background-size: cover, cover;
  box-shadow: var(--wl-schatten-lg), inset 0 1px 0 rgba(255, 255, 255, .72);
  text-align: center;
}
.article > .medien-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .72));
  pointer-events: none;
}
.article > .medien-hero h1 {
  max-width: 18ch;
  margin-inline: auto;
  color: var(--wl-tinte);
  text-wrap: balance;
}
.article > .medien-hero .lead {
  max-width: 60ch;
  margin: .75rem auto 0;
  color: var(--wl-text);
}
.article > .medien-hero .meta {
  justify-content: center;
}
.article > .medien-hero .stand {
  width: min(100%, 38rem);
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (max-width: 720px) {
  .article > .medien-hero {
    min-height: 19rem;
    margin-inline: -2px;
    padding: 2.5rem 1.15rem;
    border-radius: 22px;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .70) 45%, rgba(255, 255, 255, .92) 100%),
      var(--artikel-hero-mobil, var(--artikel-hero));
  }
}
/* === Buttons und Verläufe v2 === tiefer Fjord-Verlauf, Lichtrand, farbiger Schatten === */

.btn.btn-primaer {
  color: var(--wl-aktion-text);
  background-color: #1A56DB;
  background-image: var(--wl-verlauf-btn);
  border: 1px solid rgba(11, 37, 69, .18);
  box-shadow: var(--wl-schatten-gruen), inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(11, 37, 69, .25);
  text-shadow: 0 1px 1px rgba(11, 37, 69, .28);
}
.btn.btn-primaer:hover, .btn.btn-primaer:focus-visible {
  color: var(--wl-aktion-text);
  background-image: var(--wl-verlauf-btn-hover);
  box-shadow: var(--wl-glow), inset 0 1px 0 rgba(255, 255, 255, .38);
}
/* Sekundär auf Hell: klare Kante, blaue Schrift, sanfter Verlauf */
.btn.btn-hell {
  color: var(--wl-blau-hover);
  background-image: linear-gradient(170deg, #FFFFFF 0%, #F4F7FC 100%);
  border: 1px solid var(--wl-blau-100);
  box-shadow: 0 6px 16px -10px rgba(11, 37, 69, .35), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.btn.btn-hell:hover, .btn.btn-hell:focus-visible {
  color: var(--wl-blau-hover);
  border-color: var(--wl-blau);
  background-image: linear-gradient(170deg, #FFFFFF 0%, #E8F0FD 100%);
  box-shadow: 0 12px 26px -14px rgba(26, 86, 219, .45), inset 0 1px 0 rgba(255, 255, 255, .95);
}
/* Glas auf dunklem Grund */
.btn.btn-glas {
  color: var(--wl-weiss);
  background-image: linear-gradient(170deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .08) 100%);
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn.btn-glas:hover, .btn.btn-glas:focus-visible {
  border-color: rgba(124, 184, 255, .70);
  background-image: linear-gradient(170deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .12) 100%);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .30);
}
/* Navy-Button: Tiefe für sekundäre Hauptaktionen auf Hell */
.btn.btn-navy {
  color: var(--wl-weiss);
  background-image: linear-gradient(135deg, #14416F 0%, #0B2545 55%, #071A33 100%);
  box-shadow: 0 12px 26px -14px rgba(11, 37, 69, .60), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn.btn-navy:hover { box-shadow: 0 18px 36px -16px rgba(11, 37, 69, .65), 0 0 0 1px rgba(46, 111, 232, .40), inset 0 1px 0 rgba(255, 255, 255, .22); }

/* Karten: Verlauf mit Richtung statt flacher Fläche */
.karte { background-image: var(--wl-verlauf-karte); }
.karte::after { background-image: linear-gradient(90deg, var(--wl-horizont) 0%, var(--wl-blau) 48%, var(--wl-licht) 100%); }
.ikon-kachel { background-image: linear-gradient(150deg, #EDF3FE 0%, #DCE8FC 100%); color: var(--wl-blau-hover); }
.karte:hover .ikon-kachel, .karte:focus-within .ikon-kachel,
.karte-dunkel:hover .ikon-kachel {
  background-image: linear-gradient(150deg, #2E6FE8 0%, #1A56DB 60%, #12388F 100%);
  color: var(--wl-aktion-text);
}
/* Getönte Sektion: leichter Verlauf, damit die Fläche nicht gleichförmig wirkt */
.sektion.ist-flaeche {
  background-color: var(--wl-flaeche-2);
  background-image: linear-gradient(180deg, #FFFFFF 0%, var(--wl-flaeche-2) 22%, var(--wl-flaeche-2) 78%, #FFFFFF 100%);
}
.sektion.ist-verlauf {
  background-image:
    radial-gradient(70% 55% at 12% 8%, rgba(26, 86, 219, .10) 0%, transparent 60%),
    radial-gradient(60% 50% at 92% 88%, rgba(124, 184, 255, .16) 0%, transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F7FC 100%);
}
/* === Verlauf-Korrekturen === Vergleich mit dem Maßstab, gemessen === */

/* 1) Verlaufswort schlägt die em-Regel der Überschriften (Spezifität 0,2,2) */
h1 em.verlaufswort, h2 em.verlaufswort, h3 em.verlaufswort,
.seiten-hero h1 .verlaufswort, .sektion-kopf h2 .verlaufswort,
.display-xl .verlaufswort, .display-lg .verlaufswort, .display-md .verlaufswort {
  font-style: normal;
  background-image: var(--wl-verlaufswort);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sektion-dunkel .verlaufswort, .schlussaufruf .verlaufswort, .seiten-hero.foto-dunkel .verlaufswort {
  background-image: var(--wl-verlaufswort-hell);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .verlaufswort { color: var(--wl-blau); -webkit-text-fill-color: currentColor; }
}

/* 2) Karten bekommen wieder einen sichtbaren Verlauf (Ende auf Fläche 2, nicht auf Weiß) */
.karte, .karte.ist-randlos {
  background-color: var(--wl-weiss);
  background-image: linear-gradient(158deg, #FFFFFF 0%, #FCFDFF 52%, #EFF4FC 100%);
}
.karte:hover {
  background-image: linear-gradient(158deg, #FFFFFF 0%, #FAFCFF 48%, #E9F1FD 100%);
}
/* Leitkarte: kräftigerer Verlauf für die erste Karte eines Rasters */
.karte.ist-leitkarte {
  background-image:
    radial-gradient(70% 60% at 88% 6%, rgba(124, 184, 255, .22) 0%, transparent 60%),
    linear-gradient(158deg, #FFFFFF 0%, #F3F8FE 55%, #E4EEFC 100%);
}
/* === Verlaufs-Headlines === hervorgehobene Woerter in Display-Ueberschriften === */

/* Standard: jedes em/.highlight in einer Display-Ueberschrift laeuft im Verlauf */
h1 em, h2 em, h3 em,
.display-xl em, .display-lg em, .display-md em, .display-sm em,
.seiten-hero h1 em, .sektion-kopf h2 em, .schlussaufruf h2 em,
h1 .highlight, h2 .highlight, .display-xl .highlight, .display-lg .highlight, .display-md .highlight {
  font-style: normal;
  background-image: var(--wl-verlaufswort);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* etwas Luft, damit Unterlaengen im Verlauf nicht abgeschnitten werden */
  padding-inline-end: .04em;
}
/* Auf dunklem Grund: heller Verlauf */
.sektion-dunkel h1 em, .sektion-dunkel h2 em, .sektion-dunkel h3 em,
.sektion-dunkel .display-xl em, .sektion-dunkel .display-lg em, .sektion-dunkel .display-md em,
.schlussaufruf h2 em, .schlussaufruf .display-md em, .schlussaufruf .display-lg em,
.karte-dunkel em, .seiten-hero.foto-dunkel h1 em, .sfoot em {
  background-image: var(--wl-verlaufswort-hell);
}
/* Kleine Schriftgroessen tragen keinen Verlauf (waere matschig) */
p em, li em, .lead em, .karte p em, figcaption em, small em, .chip em {
  background-image: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  font-style: italic;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em, h2 em, h3 em, .highlight { color: var(--wl-blau); -webkit-text-fill-color: currentColor; }
  .sektion-dunkel h1 em, .sektion-dunkel h2 em, .schlussaufruf h2 em { color: var(--wl-licht); }
}
/* === Hero-Maße nach Original === gemessen am Live-Stand === */

.seiten-hero {
  padding-top: clamp(2.25rem, 5vw, 4.875rem);      /* 78 px */
  padding-bottom: clamp(2rem, 4.4vw, 4.125rem);    /* 66 px */
  text-align: center;
}
.seiten-hero h1, .seiten-hero .display-xl {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  max-width: 22ch;
  margin-inline: auto;
}
.seiten-hero .lead, .seiten-hero-text > p:not([class]) {
  font-weight: 500;
  line-height: 1.55;
  max-width: 44rem;
  margin-top: 1.125rem;
}
.seiten-hero .eyebrow { margin-bottom: .25rem; }
.seiten-hero-aktionen { margin-top: 1.625rem; }
.seiten-hero .vertrauen { margin-top: 1.5rem; }
@media (min-width: 1024px) {
  .seiten-hero.ist-kompakt { padding-top: 3.5rem; padding-bottom: 3rem; }
}
/* === Karten auf dunklem Grund === Glas statt zweitem Blau === */

/* Auf einer dunklen Sektion ist eine leuchtend blaue Karte ein Fremdkörper.
   Dort wird aus der Verlaufskarte eine Glasfläche auf derselben Bühne. */
.sektion-dunkel .karte-dunkel.verlauf-blau,
.sektion-dunkel .karte-dunkel.verlauf-tief,
.schlussaufruf .karte-dunkel.verlauf-blau {
  background-color: rgba(255, 255, 255, .04);
  background-image:
    radial-gradient(80% 70% at 88% 6%, rgba(124, 184, 255, .16) 0%, transparent 62%),
    linear-gradient(158deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .03) 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 22px 48px -28px rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sektion-dunkel .karte-dunkel.verlauf-blau:hover,
.schlussaufruf .karte-dunkel.verlauf-blau:hover {
  border-color: rgba(124, 184, 255, .38);
}
/* Auf hellem Grund bleibt die Verlaufskarte kräftig — dort ist sie der Akzent. */
/* === Kammlinie wie im Fuß === weichere Werte, gleiche Höhe === */

/* Der Übergang in den Fuß gefällt; dieselben Werte gelten jetzt für jede Kammlinie.
   Kein harter Zacken, sondern ein ruhiger Kamm mit heller Rückenlinie. */
.ridge {
  --ridge-hinten: rgba(26, 86, 219, .32);
  height: 5rem;
  margin-bottom: -1px;
}
@media (min-width: 640px)  { .ridge { height: 7rem; } }
@media (min-width: 1024px) { .ridge { height: 8.5rem; } }
.ridge.auf-dunkel { --ridge-hinten: rgba(124, 184, 255, .26); }
/* Angrenzende Sektionen rücken an die Kammlinie heran, damit kein leerer Streifen entsteht */
.ridge + .sektion, .ridge + .sektion-dunkel { padding-top: calc(var(--wl-sektion) * .55); }
.sektion + .ridge, .sektion-dunkel + .ridge { margin-top: calc(var(--wl-sektion) * -.15); }

/* Wellenmuster stillgelegt (Auftraggeber: „Wellen hier wieder nicht gut").
   Die Hilfsklassen bleiben bestehen, damit vorhandenes Markup nicht bricht,
   zeichnen aber nichts mehr — auch nicht, wenn eine Seite sie erneut setzt. */
.hoehenlinien, .hoehenlinien-hell,
.hoehenlinien-lage, .hoehenlinien-maske { background-image: none !important; }
/* === Glaskarte mit Kontrast === Karte hebt sich von der Flaeche ab === */

/* Sektion, die eine Glaskarte traegt, bekommt eine getoente Flaeche als Bühne. */
.sektion:has(> .wrap > .glaskarte),
.sektion.einstieg-sektion,
.sektion.hat-glaskarte {
  background-color: var(--wl-flaeche-2);
  background-image: linear-gradient(180deg, var(--wl-weiss) 0%, var(--wl-flaeche-2) 18%, var(--wl-flaeche-2) 82%, var(--wl-weiss) 100%);
}
.glaskarte {
  position: relative;
  border-radius: var(--wl-radius-hero);
  border: 1px solid var(--wl-linie);
  background-color: var(--wl-weiss);
  background-image: linear-gradient(158deg, #FFFFFF 0%, #FDFEFF 58%, #F4F8FE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 4px -2px rgba(11, 37, 69, .10),
    0 28px 64px -28px rgba(11, 37, 69, .35);
  padding: clamp(1.5rem, 4vw, 3rem);
}
/* Karten innerhalb der Glaskarte brauchen dann eine Stufe weniger Tiefe */
.glaskarte .karte {
  background-image: linear-gradient(158deg, #FFFFFF 0%, #FBFCFE 60%, #F2F6FD 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 26px -18px rgba(11, 37, 69, .30);
}
/* === Keine Icon-Kachel auf Bildern === das Bild traegt die Aussage === */

.st-weg-bild .ikon-kachel,
.st-mockup .ikon-kachel,
.karte-bild .ikon-kachel,
.branchimg .ikon-kachel,
.st-welt .branchimg + .ikon-kachel,
figure .ikon-kachel,
picture + .ikon-kachel,
.karte > [class$="-bild"] .ikon-kachel { display: none; }
/* Das Bild darf dadurch wieder bis zur Kante laufen */
.st-weg-bild { overflow: hidden; }
.st-weg-body { padding-top: 1.1rem; }
/* === Eigene Icons statt Emojis === Strich-Icons in Textgroesse === */

.wl-ikon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -.16em;
  margin-right: .1em;
  color: var(--wl-blau);
}
.sektion-dunkel .wl-ikon, .schlussaufruf .wl-ikon, .sfoot .wl-ikon, .karte-dunkel .wl-ikon { color: var(--wl-licht); }
.btn .wl-ikon { color: currentColor; margin-right: .35em; }

/* ==[ Hero wie im Original ]== */
/* Die Zeile schließt den Hero ab und steht deshalb etwas weiter unten als zuvor. */
.st-hero-finder .vertrauen {
  margin: 1.5rem auto 0;
  justify-content: center;
}
.st-hero-text .lead { margin-bottom: 0; }

/* Das Zeichen in der Pille wechselt mit dem Satz und blendet dabei kurz auf. */
.hpill-anim > .wl-ikon {
  transition: opacity .26s var(--wl-weich), transform .26s var(--wl-aus);
}
.hpill-anim > .wl-ikon.ist-wechsel {
  opacity: 0;
  transform: scale(.6) rotate(-14deg);
}
/* ==[ /Hero wie im Original ]== */

/* ==[ Hero-Feinschliff ]== */
/* Im Original folgt die Suchzeile dicht auf den Lead. Der Rasterabstand des Heros entfällt,
   damit sich beide Abstände nicht addieren. */
.st-hero-raster { gap: 0; }
@media (min-width: 1024px) { .st-hero-raster { gap: 0; } }
.st-hero-finder { margin-top: 1.625rem; }
/* Der Kasten trägt seinen eigenen Abstand aus der Seite; sonst zählt er doppelt. */
.st-hero-finder > .st-finder { margin-top: 0; }
.st-hero .st-pop { margin-top: 1rem; }
.st-hero-finder .vertrauen { margin-top: 1.5rem; }
.st-hero-text .lead { margin-bottom: 0; }

/* Umbruch nur dort, wo die Zeile sonst zu lang würde. */
.umbruch-breit { display: none; }
@media (min-width: 900px) { .umbruch-breit { display: inline; } }

/* Die helle Bildmarke im Fuß bekommt etwas mehr Luft, sie wirkt sonst kleiner als im Kopf. */
.sfoot-zeichen img { width: 2.5rem; height: 2.5rem; }
/* ==[ /Hero-Feinschliff ]== */

/* ==[ Branchen-Module ]== */
/* Auftakt: der einordnende Absatz. Er steht für sich, nicht als Vorspann einer Kachelreihe —
   deshalb eine getönte Fläche, eine Kante im Branchenton und Satzbreite statt Spaltenbreite. */
.einordnung {
  padding-top: calc(var(--wl-sektion) * .55);
  padding-bottom: calc(var(--wl-sektion) * .55);
}
.einordnung-text {
  position: relative;
  max-width: 54rem;
  margin: 0;
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.4rem, 2.6vw, 2.4rem);
  border-radius: var(--wl-radius-md, 1rem);
  background-image: linear-gradient(135deg, var(--wl-flaeche-2) 0%, var(--wl-weiss) 62%);
  border: 1px solid var(--wl-linie);
  border-left: 3px solid var(--wl-branche, var(--wl-blau));
  box-shadow: var(--wl-schatten-sm);
  font-size: clamp(1.06rem, .98rem + .42vw, 1.26rem);
  line-height: 1.62;
  color: var(--wl-sekundaer);
}
/* Der erste Satz trägt das Versprechen der Seite und bleibt in voller Tinte. */
.einordnung-text::first-line {
  color: var(--wl-tinte);
  font-weight: 600;
}

/* Anforderungen: die Liste, die im Original die Branche definiert. */
.anf-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem 2rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .anf-liste { grid-template-columns: 1fr 1fr; } }
.anf-liste li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .7rem .9rem;
  border-radius: var(--wl-radius-sm, .7rem);
  background: var(--wl-flaeche-2);
  color: var(--wl-tinte);
  font-weight: 500;
  transition: background var(--wl-schnell) var(--wl-weich), transform var(--wl-schnell) var(--wl-aus);
}
.anf-liste li:hover { background: var(--wl-blau-50); transform: translateX(3px); }
.anf-haken {
  flex: 0 0 auto;
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .18rem;
  color: var(--wl-branche, var(--wl-blau));
}
.anf-haken svg { width: 100%; height: 100%; }
.anf-nachsatz { margin-top: 1.5rem; max-width: 46rem; color: var(--wl-sekundaer); }
.anf-nachsatz p + p { margin-top: .85rem; }

/* Abschlusssatz unter einem Modul — trägt die Begründung, die im Original hinter den Karten stand. */
.mod-nachsatz {
  margin: 1.5rem 0 0;
  max-width: 46rem;
  color: var(--wl-sekundaer);
  font-size: .98rem;
}

/* Passt dazu: die vier Querverweise. */
.passt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .9rem;
  margin-top: 1.5rem;
}
.passt-karte {
  position: relative;
  display: block;
  padding: 1.1rem 2.6rem 1.1rem 1.15rem;
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-md, 1rem);
  background: var(--wl-weiss);
  background-image: var(--wl-verlauf-karte);
  box-shadow: var(--wl-schatten-sm);
  transition: transform var(--wl-mittel) var(--wl-aus), box-shadow var(--wl-mittel) var(--wl-weich),
              border-color var(--wl-mittel) var(--wl-weich);
}
.passt-karte b { display: block; color: var(--wl-tinte); font-size: .98rem; font-weight: 700; }
.passt-karte > span { display: block; margin-top: .2rem; color: var(--wl-hilfstext); font-size: .86rem; }
.passt-pfeil {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: -.575rem;
  color: var(--wl-blau);
  transition: transform var(--wl-mittel) var(--wl-aus);
}
.passt-pfeil svg { width: 100%; height: 100%; }
.passt-karte:hover, .passt-karte:focus-visible {
  transform: translateY(-3px);
  border-color: var(--wl-blau-rand, #B9CEF6);
  box-shadow: var(--wl-schatten-md);
}
.passt-karte:hover .passt-pfeil { transform: translateX(4px); }

/* „Passt dazu" und der Schlussaufruf bilden den Abschluss der Seite und gehören zusammen.
   Vorher standen zwischen beiden rund 150 px Leerraum — die Sektion endet mit ihrem eigenen
   Bodenabstand, das Band brachte seinen Kopfabstand mit. */
[data-shell="branchen"] #passt-dazu { padding-bottom: 0; }
[data-shell="branchen"] .ctaband { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* Schlussaufruf der Branchenseite: Text und zwei Aktionen, links ausgerichtet wie der
   übrige Seiteninhalt. Der Hauptknopf steht auf blauer Fläche und dreht sich deshalb um —
   weiße Fläche, blaue Schrift (8,6:1). Ein blauer Knopf auf Blau verschwindet. */
/* Das Schlussband bleibt blau — das ist die Aktionsfarbe — nimmt aber in der Tiefe den
   Branchenton auf. So endet die Seite in derselben Farbe, in der sie begonnen hat. */
[data-shell="branchen"] .ctaband {
  background-color: var(--wl-blau-hover);
  background-image:
    radial-gradient(72% 96% at 92% 88%, color-mix(in srgb, var(--wl-branche, #1A56DB) 62%, transparent) 0%, transparent 64%),
    radial-gradient(48% 62% at 8% 12%, rgba(255, 255, 255, .16) 0%, transparent 60%),
    var(--wl-verlauf-blau, linear-gradient(150deg, #2E6FE8 0%, #1A56DB 48%, #12388F 100%));
  border-color: transparent;
}
.ctaband { align-items: center; }
.ctaband > div { text-align: left; }
/* Text links, Aktionen rechts. Ohne Breitenangabe nimmt der Textblock die ganze Zeile und
   die Aktionen rutschen darunter — dann steht rechts eine große leere Fläche. */
.ctaband > div:first-child { flex: 1 1 24rem; max-width: 38rem; }
.ctaband-aktionen { flex: 0 0 auto; }
.ctaband h2 { max-width: 22ch; }
/* .ctaband p aus dem Seiten-CSS zentriert den Absatz (0,1,1) — hier gezielt überstimmt. */
.ctaband .ctaband-text {
  margin: .7rem auto .7rem 0;
  margin-left: 0;
  max-width: 44rem;
  color: rgba(255, 255, 255, .88);
  font-size: .98rem;
  line-height: 1.6;
  text-align: left;
}
.ctaband-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.25rem;
}
body .ctaband .ctaband-aktionen .cta {
  color: var(--wl-blau-hover) !important;
  -webkit-text-fill-color: var(--wl-blau-hover) !important;
  background-color: var(--wl-weiss);
  background-image: none;
  box-shadow: 0 12px 26px -12px rgba(3, 18, 44, .55);
}
/* Der Pfeil erbt sonst die weiße Knopfschrift der Legacy-Regel und verschwindet auf Weiß. */
body .ctaband .ctaband-aktionen .cta svg {
  color: var(--wl-blau-hover);
  stroke: currentColor;
}
body .ctaband .ctaband-aktionen .cta:hover {
  background-image: none;
  background-color: #EAF1FE;
  box-shadow: 0 16px 32px -12px rgba(3, 18, 44, .65);
}
.ctaband-neben {
  display: inline-flex;
  align-items: center;
  padding: .45rem .2rem;
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  border-bottom: 1.5px solid rgba(255, 255, 255, .42);
  transition: color var(--wl-schnell) var(--wl-weich), border-color var(--wl-schnell) var(--wl-weich);
}
.ctaband-neben:hover { color: #FFFFFF; border-color: #FFFFFF; }
/* ==[ /Branchen-Module ]== */

/* ==[ Branchenton ]== */
/* Auszeichnungszeile und Punkt.
   Der Branchenton gilt nur auf hellem Grund. Auf dunklen Flächen bleibt die Zeile hell —
   sonst stand sie dort im Branchenton auf farbigem Grund: gemessen „Noch unsicher?" im
   Schlussaufruf mit rgb(26,86,219) auf rgb(25,81,204), also 1,1:1 und praktisch unsichtbar.
   Die dunklen Kontexte sind dieselben, die in wl-design.css die helle Zeile setzen. */
[data-shell="branchen"] .eyebrow:not(.ctaband .eyebrow):not(.eyebrow-hell):not(.schlussaufruf .eyebrow):not(.sektion-dunkel .eyebrow):not(.karte-dunkel .eyebrow):not(.ist-check-dunkel .eyebrow) { color: var(--wl-branche, var(--wl-blau)); }
[data-shell="branchen"] .eyebrow:not(.ctaband .eyebrow):not(.eyebrow-hell):not(.schlussaufruf .eyebrow):not(.sektion-dunkel .eyebrow):not(.karte-dunkel .eyebrow):not(.ist-check-dunkel .eyebrow) .dot { background: var(--wl-branche, var(--wl-blau)); }

/* Haken in der Anforderungsliste und in den Leistungskarten */
[data-shell="branchen"] .anf-haken,
[data-shell="branchen"] .lcard .lic { color: var(--wl-branche, var(--wl-blau)); }
[data-shell="branchen"] .lcard .lic { background: var(--wl-branche-hell, var(--wl-blau-50)); }

/* Kapitelleiste: der aktive Abschnitt bekommt den Branchenton */
[data-shell="branchen"] .subnav a:hover,
[data-shell="branchen"] .subnav a[aria-current="true"] {
  color: var(--wl-branche, var(--wl-blau));
  border-bottom-color: var(--wl-branche, var(--wl-blau));
}

/* Kante am Branchenbild — der Ton berührt das Foto, statt daneben zu liegen */
[data-shell="branchen"] .branchimg { box-shadow: 0 0 0 1px var(--wl-branche-rand, var(--wl-linie)), var(--wl-schatten-md); }

/* Ortschips: Umriss im Branchenton, Füllung erst beim Hover */
[data-shell="branchen"] .citychip:hover {
  border-color: var(--wl-branche, var(--wl-blau));
  background: var(--wl-branche-hell, var(--wl-blau-50));
  color: var(--wl-branche, var(--wl-blau));
}

/* Überschriften der Module bekommen eine ruhige Breite, sonst laufen die
   langen Branchenzeilen über die volle Spalte. */
[data-shell="branchen"] .mod > h2 { max-width: 34ch; }
/* ==[ /Branchenton ]== */

/* ==[ Naht der Kammlinie ]== */
/* Die dunkle Sektion läuft oben und unten in die Farben aus, welche die Kammlinie als Fläche
   trägt. Ohne diesen Auslauf scheint das Foto bis an die Kante durch und erzeugt einen Strich.
   Der Auslauf sitzt auf ::after, weil manche Sektionen ihr Foto als eigenes Element mitbringen
   (etwa .st-ablauf-foto) und dieses sonst darüber läge. Der Inhalt bleibt darüber. */
.sektion-dunkel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, #123A6B 0, rgba(18, 58, 107, 0) clamp(4rem, 8vw, 7.5rem)),
    linear-gradient(to top, #071A33 0, rgba(7, 26, 51, 0) clamp(5rem, 10vw, 9rem));
}
.sektion-dunkel > .wrap,
.sektion-dunkel > .container,
.sektion-dunkel > .inner { z-index: 3; }

/* Dunkel → hell: Berge stehen aufrecht wie im Fuß, statt gedreht als Vorhang zu hängen.
   Fläche oben = Ende der dunklen Sektion, vorderer Zug = folgende helle Fläche (inline gesetzt). */
.ridge.ab-dunkel {
  transform: none;
  --ridge-hinten: rgba(124, 184, 255, .30);
}
.ridge.ab-dunkel::before { opacity: .9; }

/* Die Kammlinie sitzt bündig an der Sektion — kein Versatz, keine Fuge. */
.ridge { margin-bottom: -1px; }
.sektion-dunkel + .ridge { margin-top: -1px; }
.sektion-dunkel + .sektion, .sektion-dunkel + section { margin-top: 0; }

/* Die Farben leiten sich aus der Nachbarschaft ab, statt in jeder Seite fest zu stehen.
   Fläche über den Bergen = Sektion darüber, vorderer Bergzug = Sektion darunter.
   Reihenfolge zählt: die spezielleren Fälle stehen unten.
   Getonte Sektionen laufen an ihren Kanten ohnehin nach Weiss aus (.sektion.ist-flaeche),
   deshalb ist Weiss und nicht der Flaechenton der richtige Anschluss. Gemessen, nicht geraten. */
.ridge { --ridge-bg: transparent; }
.ist-weiss + .ridge { --ridge-bg: var(--wl-weiss); }
.sektion-dunkel + .ridge { --ridge-bg: var(--wl-horizont-900); }

.ridge:has(+ .sektion), .ridge:has(+ section) { --ridge-vorn: var(--wl-weiss); }
.ridge:has(+ .sektion-dunkel) { --ridge-vorn: var(--wl-sektion-top); }
/* Die Kammlinie im Fuß behält ihre eigene Farbe aus shopnav.css — dort stimmt der Anschluss. */
/* ==[ /Naht der Kammlinie ]== */

/* ==[ Branchen-Hero ]== */
/* Der Branchen-Hero ist wieder der Zweispalter, den die Seiten selbst mitbringen: Text links,
   Bild und Branchenmarke rechts. Die Bühnenfassung entfällt — sie hatte das Bild als flachen
   Streifen über die volle Breite gelegt und den Text darunter gedrängt. */
/* ==[ /Branchen-Hero ]== */

/* ==[ Branchen-Rhythmus ]== */
/* Die Abschnitte wechseln die Fläche, statt sich mit einer Linie zu trennen. */
[data-shell="branchen"] .mod { border-top: 0; }
/* Getönte Abschnitte. Zwischen zwei getönten Flächen liegt immer eine weiße — die FAQ trägt
   ohnehin schon den Branchenton aus dem Seiten-CSS und zählt hier mit. */
[data-shell="branchen"] #einordnung,
[data-shell="branchen"] #anforderungen,
[data-shell="branchen"] #tools {
  position: relative;
  background-image: linear-gradient(180deg, #FFFFFF 0%, var(--wl-flaeche-2) 16%, var(--wl-flaeche-2) 84%, #FFFFFF 100%);
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
  padding-inline: var(--wl-seitenrand, 1.25rem);
  border-radius: var(--wl-radius-md, 1rem);
}

/* Der Ablauf ist die dunkle Fläche der Seite — Landschaftsfoto, tiefer Verlauf, weiße Schrift. */
[data-shell="branchen"] .ist-branchen-dunkel {
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
  padding: clamp(3rem, 5.5vw, 5rem) var(--wl-seitenrand, 1.25rem);
  color: var(--wl-text-dunkel);
}
[data-shell="branchen"] .ist-branchen-dunkel h2,
[data-shell="branchen"] .ist-branchen-dunkel h3,
[data-shell="branchen"] .ist-branchen-dunkel h4 { color: var(--wl-weiss); }
[data-shell="branchen"] .ist-branchen-dunkel p,
[data-shell="branchen"] .ist-branchen-dunkel .sub { color: rgba(255, 255, 255, .84); }

/* Die Schritte werden auf dunklem Grund zu Glaskarten. */
[data-shell="branchen"] .ist-branchen-dunkel .flowstep {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}
[data-shell="branchen"] .ist-branchen-dunkel .flowstep .fnum {
  background: color-mix(in srgb, var(--wl-branche, #7CB8FF) 34%, rgba(255, 255, 255, .12));
  color: var(--wl-weiss);
}
[data-shell="branchen"] .ist-branchen-dunkel .flowstep h4 { color: var(--wl-weiss); }
[data-shell="branchen"] .ist-branchen-dunkel .flowstep p { color: rgba(255, 255, 255, .78); }
/* Die Verbindungslinie des Ablaufs muss auf dunklem Grund heller werden. */
[data-shell="branchen"] .ist-branchen-dunkel .flowgrid::before,
[data-shell="branchen"] .ist-branchen-dunkel .ablauf-linie { background: rgba(255, 255, 255, .18); }

/* Die Kammlinien der Branchenseite laufen über die volle Breite des Inhalts. */
/* Die Sektionen der Branchenseite heißen .mod, nicht .sektion. Die Farbableitung der Naht
   greift dort über :has(+ section) und hat mit (0,1,1) weniger Gewicht als .ridge.auf-dunkel
   mit (0,2,0) — der vordere Bergzug blieb deshalb dunkel und es entstand eine harte Kante
   zur weißen Fläche darunter (gemessener Sprung: 246 Stufen). Hier gezielt gesetzt. */
[data-shell="branchen"] .ridge.ab-dunkel { --ridge-vorn: var(--wl-weiss); }
[data-shell="branchen"] .ridge:not(.ab-dunkel) { --ridge-vorn: var(--wl-sektion-top); }

[data-shell="branchen"] .ridge {
  /* width bleibt sonst auf 100% der Textspalte und die Kammlinie rutscht nur nach links,
     statt mit der dunklen Fläche mitzuwachsen. */
  width: auto;
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
}
/* ==[ /Branchen-Rhythmus ]== */

/* ==[ Referenz-Unterseiten ]== */
/* Die frühere Eigenkomposition der Referenzseiten ist entfallen — die Seiten tragen wieder die
   vollständige Fassung aus referenz.html. Die Stile dafür stehen in „Referenz-Zusatz". */
/* ==[ /Referenz-Unterseiten ]== */

/* ==[ Sichtbarkeits-Check ]== */
/* Sichtbarkeits-Check: die Seite zeigt, was das Werkzeug tut. */
.check-mod { padding: clamp(2.5rem, 4.5vw, 4rem) 0; }
.check-mod > h2 { margin: .75rem 0 0; max-width: 24ch; }
.check-sub { margin: 1rem 0 0; max-width: 46rem; color: var(--wl-sekundaer); }
.check-mod.ist-getoent {
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
  padding-inline: var(--wl-seitenrand, 1.25rem);
  border-radius: var(--wl-radius-md, 1rem);
  background-image: linear-gradient(180deg, #FFFFFF 0%, var(--wl-flaeche-2) 16%, var(--wl-flaeche-2) 84%, #FFFFFF 100%);
}

/* Die gemessenen Punkte stehen auf dunklem Grund — das ist die Substanz des Werkzeugs. */
.ist-check-dunkel {
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
  padding: clamp(3rem, 5.5vw, 5rem) var(--wl-seitenrand, 1.25rem);
  color: var(--wl-text-dunkel);
}
.ist-check-dunkel h2, .ist-check-dunkel h3 { color: var(--wl-weiss); }
.ist-check-dunkel .check-sub { color: rgba(255, 255, 255, .84); }
.ist-check-dunkel .eyebrow { color: rgba(255, 255, 255, .92); }
.ist-check-dunkel .eyebrow .dot { background: var(--wl-licht); }

.pruef-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.pruef-raster.ist-schmal { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pruef-block {
  padding: 1.25rem 1.35rem;
  border-radius: var(--wl-radius-md, 1rem);
  border: 1px solid var(--wl-linie);
  background-color: var(--wl-weiss);
  background-image: var(--wl-verlauf-karte);
  box-shadow: var(--wl-schatten-sm);
}
.ist-check-dunkel .pruef-block {
  border-color: rgba(255, 255, 255, .14);
  background-color: rgba(255, 255, 255, .06);
  background-image: none;
  backdrop-filter: blur(6px);
}
.pruef-block h3 { margin: 0; font-size: 1.02rem; }
.pruef-block > p { margin: .4rem 0 0; font-size: .9rem; color: var(--wl-hilfstext); }
.ist-check-dunkel .pruef-block > p { color: rgba(255, 255, 255, .70); }

.pruef-liste { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.pruef-liste li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--wl-tinte);
}
.ist-check-dunkel .pruef-liste li { color: rgba(255, 255, 255, .90); }
.pruef-haken { flex: 0 0 auto; display: inline-flex; width: 1rem; height: 1rem; margin-top: .2rem; color: var(--wl-blau); }
.ist-check-dunkel .pruef-haken { color: var(--wl-licht); }
.pruef-haken svg { width: 100%; height: 100%; }

/* Wie der Index entsteht: drei Karten und die drei Stufen. */
.index-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}
.index-karte {
  position: relative;
  padding: 1.5rem 1.35rem 1.35rem;
  border-radius: var(--wl-radius-md, 1rem);
  border: 1px solid var(--wl-linie);
  background-color: var(--wl-weiss);
  background-image: var(--wl-verlauf-karte);
  box-shadow: var(--wl-schatten-sm);
  transition: transform var(--wl-mittel) var(--wl-aus), box-shadow var(--wl-mittel) var(--wl-weich);
}
.index-karte:hover { transform: translateY(-3px); box-shadow: var(--wl-schatten-md); }
.index-nr {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-image: var(--wl-verlauf-btn);
  color: var(--wl-aktion-text);
  font-weight: 700;
  font-size: .9rem;
}
.index-karte h3 { margin: .875rem 0 0; font-size: 1.05rem; }
.index-karte p { margin: .4rem 0 0; font-size: .92rem; color: var(--wl-sekundaer); }

.index-stufen { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: clamp(1.25rem, 2.2vw, 1.75rem); }
.index-stufe {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: var(--wl-radius-pille, 999px);
  border: 1px solid var(--wl-linie);
  background: var(--wl-weiss);
  font-size: .88rem;
  color: var(--wl-sekundaer);
}
.index-stufe b { color: var(--wl-tinte); }
.index-stufe.ist-gut { border-color: color-mix(in srgb, var(--wl-gruen) 45%, transparent); }
.index-stufe.ist-gut b { color: var(--wl-gruen-text, #456647); }
.index-stufe.ist-okay { border-color: #E4C079; }
.index-stufe.ist-okay b { color: #8A5A0B; }
.index-stufe.ist-schwach { border-color: #E9A9A9; }
.index-stufe.ist-schwach b { color: #A32020; }

.check-fuss { margin: 1.5rem 0 0; max-width: 46rem; font-size: .88rem; color: var(--wl-hilfstext); }

/* Die Kammlinien laufen wie die dunkle Fläche über die Textspalte hinaus. */
#was-gemessen-wird + .ridge, .check-mod ~ .ridge, .ridge:has(+ .ist-check-dunkel) {
  width: auto;
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
}
.ridge:has(+ .ist-check-dunkel) { --ridge-vorn: var(--wl-sektion-top); }
.ist-check-dunkel + .ridge { --ridge-vorn: var(--wl-weiss); width: auto; margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1); }
/* ==[ /Sichtbarkeits-Check ]== */

/* ==[ Vorlagen-Inhalt ]== */
/* Vorlagenseite: unter der Produktbühne folgen die Abschnitte der Live-Fassung. */
.vorlage-kicker { display: inline-flex; margin-bottom: .5rem; }
.vorlage-mod { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
.vorlage-mod > h2 { margin: 0 0 1rem; max-width: 30ch; }
.vorlage-text { max-width: 48rem; color: var(--wl-sekundaer); }
.vorlage-text p + p { margin-top: .9rem; }
.vorlage-mod.ist-getoent {
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
  padding-inline: var(--wl-seitenrand, 1.25rem);
  border-radius: var(--wl-radius-md, 1rem);
  background-image: linear-gradient(180deg, #FFFFFF 0%, var(--wl-flaeche-2) 16%, var(--wl-flaeche-2) 84%, #FFFFFF 100%);
}
.einordnung-text.ist-folge { margin-top: 1rem; }

/* Die vier Karten des Lieferumfangs */
.vorlage-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}
.vorlage-karte {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-md, 1rem);
  background-color: var(--wl-weiss);
  background-image: var(--wl-verlauf-karte);
  box-shadow: var(--wl-schatten-sm);
  color: var(--wl-tinte);
  transition: transform var(--wl-mittel) var(--wl-aus), box-shadow var(--wl-mittel) var(--wl-weich);
}
.vorlage-karte:hover { transform: translateY(-3px); box-shadow: var(--wl-schatten-md); }
.vorlage-karte b { font-weight: 600; font-size: .95rem; }

/* „So sieht die Vorlage aus": dunkle Bühne, Text links, das Vorlagenbild rechts */
.ist-vorlage-look {
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--wl-seitenrand, 1.25rem);
  color: var(--wl-text-dunkel);
}
.ist-vorlage-look h2 { color: var(--wl-weiss); }
.ist-vorlage-look .vorlage-text { color: rgba(255, 255, 255, .84); }
.vorlage-look-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) { .vorlage-look-raster { grid-template-columns: .9fr 1.1fr; } }
.vorlage-look-bild { margin: 0; }
.vorlage-look-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wl-radius-md, 1rem);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--wl-schatten-lg, var(--wl-schatten-md));
  transition: transform .7s var(--wl-aus);
}
.ist-vorlage-look:hover .vorlage-look-bild img { transform: scale(1.015); }

/* Kammlinien reichen wie die dunkle Fläche über die Textspalte hinaus */
.ridge:has(+ .ist-vorlage-look), .ist-vorlage-look + .ridge {
  width: auto;
  margin-inline: calc(var(--wl-seitenrand, 1.25rem) * -1);
}
.ridge:has(+ .ist-vorlage-look) { --ridge-vorn: var(--wl-sektion-top); }
.ist-vorlage-look + .ridge { --ridge-vorn: var(--wl-weiss); }

main.wrap .ctaband { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
/* ==[ /Vorlagen-Inhalt ]== */

/* ==[ Referenz-Zusatz ]== */
/* Ein Pfeil im Fließtext braucht eine Größe, sonst füllt er die Spalte. */
.pfeil { width: 1.05em; height: 1.05em; flex: none; }

/* Die vertiefenden Absätze der früheren statischen Fassung. */
.ref-langtext { max-width: 48rem; color: var(--wl-sekundaer); }
.ref-langtext p + p { margin-top: .9rem; }
.ref-langtext h3 { margin: 1.75rem 0 .5rem; font-size: 1.05rem; color: var(--wl-tinte); }

/* Schlussnotiz mit dem Verweis auf die veröffentlichte Kundenseite. */
.ref-notiz {
  max-width: 48rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--wl-linie);
  border-left: 3px solid var(--wl-blau);
  border-radius: var(--wl-radius-md, 1rem);
  background-image: linear-gradient(135deg, var(--wl-flaeche-2) 0%, var(--wl-weiss) 64%);
  color: var(--wl-sekundaer);
}
.ref-notiz p { margin: 0; }
.ref-notiz-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .875rem;
  font-weight: 600;
  color: var(--wl-blau);
  transition: color var(--wl-schnell) var(--wl-weich);
}
.ref-notiz-link:hover { color: var(--wl-blau-hover); }

/* Querverweise: verwandte Projekte und „Passt dazu". */
.passt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .9rem;
  margin-top: 1.25rem;
}
.passt-karte {
  position: relative;
  display: block;
  padding: 1.1rem 2.6rem 1.1rem 1.15rem;
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-md, 1rem);
  background-color: var(--wl-weiss);
  background-image: var(--wl-verlauf-karte);
  box-shadow: var(--wl-schatten-sm);
  transition: transform var(--wl-mittel) var(--wl-aus), box-shadow var(--wl-mittel) var(--wl-weich),
              border-color var(--wl-mittel) var(--wl-weich);
}
.passt-karte b { display: block; color: var(--wl-tinte); font-size: .98rem; font-weight: 700; }
.passt-karte > span:not(.passt-pfeil) { display: block; margin-top: .2rem; color: var(--wl-hilfstext); font-size: .86rem; }
.passt-pfeil {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: -.575rem;
  color: var(--wl-blau);
  transition: transform var(--wl-mittel) var(--wl-aus);
}
.passt-karte:hover, .passt-karte:focus-visible {
  transform: translateY(-3px);
  border-color: var(--wl-blau-rand, #B9CEF6);
  box-shadow: var(--wl-schatten-md);
}
.passt-karte:hover .passt-pfeil { transform: translateX(4px); }

/* Fragen in der angehängten Fassung. */
#fragen .faqlist { margin-top: 1.25rem; max-width: 52rem; }
#fragen .faqitem {
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-md, 1rem);
  background: var(--wl-weiss);
  padding: .25rem 1.125rem;
  margin-bottom: .625rem;
  box-shadow: var(--wl-schatten-sm);
}
#fragen .faqitem summary { padding: .875rem 0; font-weight: 600; color: var(--wl-tinte); cursor: pointer; }
#fragen .faqitem .fa-a { padding-bottom: .875rem; color: var(--wl-sekundaer); }

/* Schlussaufruf am Ende der Referenzseite. */
#schluss .ctaband { margin-top: 0; }
.ctaband-text { margin: .6rem 0 0; max-width: 44rem; color: rgba(255, 255, 255, .88); font-size: .98rem; line-height: 1.6; }
.ctaband-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; }
.ctaband-neben {
  display: inline-flex;
  align-items: center;
  padding: .45rem .2rem;
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  border-bottom: 1.5px solid rgba(255, 255, 255, .42);
  transition: color var(--wl-schnell) var(--wl-weich), border-color var(--wl-schnell) var(--wl-weich);
}
.ctaband-neben:hover { color: #FFFFFF; border-color: #FFFFFF; }
/* ==[ /Referenz-Zusatz ]== */

/* ==[ Branchenwelten-Index ]== */
/* Branchenwelten als Index mit Bühne: links alle zwölf, rechts die gewählte. */
.st-welten-raster {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 1024px) { .st-welten-raster { grid-template-columns: 23rem 1fr; align-items: start; } }

.st-welten-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wl-linie); }
.st-welt-zeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--wl-linie);
  color: var(--wl-tinte);
  text-decoration: none;
  transition: background var(--wl-schnell) var(--wl-weich), padding-left var(--wl-schnell) var(--wl-aus);
}
.st-welt-zeile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--ton, var(--wl-blau));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--wl-mittel) var(--wl-aus);
}
.st-welt-zeile:hover, .st-welt-zeile:focus-visible, .st-welt-zeile.ist-aktiv {
  background: var(--wl-flaeche-2);
  padding-left: 1.15rem;
}
.st-welt-zeile:hover::before, .st-welt-zeile:focus-visible::before, .st-welt-zeile.ist-aktiv::before { transform: scaleY(1); }

/* Das Icon trägt den Branchenton, sobald die Zeile aktiv ist. */
.st-welt-zeile .ikon-kachel {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .65rem;
  background: var(--wl-flaeche-2);
  color: var(--wl-sekundaer);
  transition: background var(--wl-mittel) var(--wl-weich), color var(--wl-mittel) var(--wl-weich);
}
.st-welt-zeile .ikon-kachel svg { width: 1.15rem; height: 1.15rem; }
.st-welt-zeile:hover .ikon-kachel, .st-welt-zeile:focus-visible .ikon-kachel, .st-welt-zeile.ist-aktiv .ikon-kachel {
  background: color-mix(in srgb, var(--ton, var(--wl-blau)) 12%, var(--wl-weiss));
  color: var(--ton, var(--wl-blau));
}

.st-welt-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-welt-zeile-text b { font-size: .98rem; font-weight: 600; line-height: 1.25; color: var(--wl-tinte); }
.st-welt-zeile-text > span { font-size: .8rem; line-height: 1.35; color: var(--wl-hilfstext); }

.st-welt-zeile .st-pfeil {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ton, var(--wl-blau));
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--wl-schnell) var(--wl-weich), transform var(--wl-schnell) var(--wl-aus);
}
.st-welt-zeile .st-pfeil svg { width: 100%; height: 100%; }
.st-welt-zeile:hover .st-pfeil, .st-welt-zeile:focus-visible .st-pfeil, .st-welt-zeile.ist-aktiv .st-pfeil { opacity: 1; transform: none; }

/* Die Abschlusszeile führt zur Übersicht und trägt die Zahl statt eines Icons. */
.st-welt-zeile-alle { border-bottom: 0; }
.st-welt-zahl {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .65rem;
  background-image: var(--wl-verlauf-btn);
  color: var(--wl-aktion-text);
  font-weight: 700;
  font-size: .95rem;
}
.st-welt-zeile-alle .st-pfeil { color: var(--wl-blau); }

/* Die Bühne: das Bild der gewählten Branche, darunter ihr Text. */
/* Die Liste ist höher als ein Bild sein sollte. Statt die Bühne zu strecken, bleibt sie beim
   Durchgehen der Liste stehen — man wandert durch die Branchen, das Bild wechselt an Ort. */
.st-welten-buehne {
  position: sticky;
  top: calc(var(--wl-kopf-hoehe, 5rem) + 1.25rem);
  min-height: 27rem;
  aspect-ratio: 3 / 2;
  border-radius: var(--wl-radius-lg, 1.25rem);
  overflow: hidden;
  background: var(--wl-flaeche-2);
  box-shadow: 0 0 0 1px var(--wl-linie), var(--wl-schatten-md);
}
.st-welten-buehne .st-welt-bild {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--wl-weich), visibility .5s;
}
.st-welten-buehne .st-welt-bild.ist-aktiv { opacity: 1; visibility: visible; }
.st-welten-buehne .branchimg, .st-welten-buehne picture, .st-welten-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-welten-buehne img { object-fit: cover; transform: scale(1.05); transition: transform 9s var(--wl-aus); }
.st-welten-buehne .st-welt-bild.ist-aktiv img { transform: scale(1); }
.st-welten-buehne figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--wl-weiss);
  background: linear-gradient(to top, rgba(7, 26, 51, .93) 0%, rgba(7, 26, 51, .74) 46%, rgba(7, 26, 51, 0) 100%);
}
.st-welt-marke { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.18rem; color: var(--wl-weiss); }
.st-welt-punkt {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--ton, var(--wl-licht));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton, var(--wl-licht)) 34%, transparent);
}
.st-welten-buehne figcaption p { margin: .5rem 0 0; max-width: 46ch; color: rgba(255, 255, 255, .88); font-size: .95rem; line-height: 1.55; }
.st-welten-buehne .st-mehr { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-weight: 600; color: var(--wl-weiss); }
.st-welten-buehne .st-mehr svg { width: 1.05rem; height: 1.05rem; transition: transform var(--wl-mittel) var(--wl-aus); }
.st-welten-buehne:hover .st-welt-bild.ist-aktiv .st-mehr svg { transform: translateX(4px); }

/* Das kleine Bild in der Zeile trägt die schmale Anzeige, wo es keine Bühne gibt. */
.st-welt-zeile-bild { display: none; flex: 0 0 4.5rem; }
.st-welt-zeile-bild .branchimg { border-radius: .6rem; overflow: hidden; }

@media (max-width: 1023px) {
  .st-welten-buehne { display: none; }
  .st-welt-zeile-bild { display: block; }
  .st-welt-zeile { gap: .7rem; padding-block: .55rem; }
  .st-welt-zeile .ikon-kachel { display: none; }
  .st-welt-zeile .st-pfeil { opacity: 1; transform: none; }
  .st-welt-zeile-alle .st-welt-zahl { display: grid; }
}

/* Ohne Bewegungswunsch bleibt der Wechsel, aber ohne Fahrt. */
html.wl-motion-aus .st-welten-buehne img,
@media (prefers-reduced-motion: reduce) { .st-welten-buehne img { transition: none; transform: none; } }
/* ==[ /Branchenwelten-Index ]== */

/* ==[ Branchenwahl ]== */
/* Ersetzt durch „Branchenwahl schlank": Die Auswahl trägt kein Bild mehr, deshalb braucht sie
   auch keine Schleier-Abstimmung. */
/* ==[ /Branchenwahl ]== */

/* ==[ Branchenwahl schlank ]== */
/* Branchenwahl: ruhige Leiste statt zwölf Bildkacheln. Das Foto zeigt die Bühne darunter. */
#selector.bw-wahl { gap: .5rem; }

#selector .branch {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem;
  min-height: 0;
  aspect-ratio: auto;
  border: 1px solid var(--wl-linie);
  border-radius: var(--wl-radius-ui, .8rem);
  background: var(--wl-weiss);
  color: var(--wl-tinte);
  box-shadow: none;
  transition: border-color var(--wl-schnell) var(--wl-weich), background var(--wl-schnell) var(--wl-weich),
              transform var(--wl-schnell) var(--wl-aus);
}

/* Das Bild bleibt im Markup und trägt die schmale Anzeige — auf dem Schreibtisch ruht es. */
#selector .branch .b-bild { display: none; }
#selector .branch::before { content: none; }
#selector .branch::after { content: none; }

/* Das Zeichen führt, im Ton der Branche. */
#selector .branch .bi {
  position: static;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: .6rem;
  border: 0;
  background: color-mix(in srgb, var(--accent, var(--wl-blau)) 11%, var(--wl-weiss));
  color: var(--accent, var(--wl-blau));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--wl-schnell) var(--wl-weich), color var(--wl-schnell) var(--wl-weich);
}
#selector .branch .bi svg { width: 1.1rem; height: 1.1rem; }

#selector .branch .bt { position: static; flex: 1; min-width: 0; }
#selector .branch .bt::before { content: none; }
#selector .branch .bt b {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--wl-tinte);
  text-shadow: none;
}
#selector .branch .bt > span {
  display: block;
  margin-top: .1rem;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--wl-hilfstext);
}

#selector .branch .bx {
  position: static;
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--accent, var(--wl-blau));
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--wl-schnell) var(--wl-weich), transform var(--wl-schnell) var(--wl-aus);
}

/* Gewählt: der Ton trägt die Fläche. */
#selector .branch:hover, #selector .branch:focus-visible {
  border-color: color-mix(in srgb, var(--accent, var(--wl-blau)) 42%, transparent);
  background: color-mix(in srgb, var(--accent, var(--wl-blau)) 5%, var(--wl-weiss));
  transform: translateY(-1px);
}
#selector .branch.on {
  border-color: color-mix(in srgb, var(--accent, var(--wl-blau)) 60%, transparent);
  background: color-mix(in srgb, var(--accent, var(--wl-blau)) 9%, var(--wl-weiss));
}
#selector .branch.on .bi {
  background: var(--accent, var(--wl-blau));
  color: var(--wl-weiss);
}
#selector .branch:hover .bx, #selector .branch:focus-visible .bx, #selector .branch.on .bx { opacity: 1; transform: none; }

/* Auf schmalen Anzeigen gibt es keine Bühne — dort trägt die Zeile ihr eigenes Bild. */
@media (max-width: 899px) {
  #selector .branch .b-bild {
    display: block;
    position: static;
    flex: 0 0 3.4rem;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: .55rem;
    overflow: hidden;
  }
  #selector .branch .b-bild img { width: 100%; height: 100%; object-fit: cover; }
  #selector .branch .bi { display: none; }
  #selector .branch .bx { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #selector .branch, #selector .branch .bx { transition: none; transform: none; }
}
/* ==[ /Branchenwahl schlank ]== */

/* ==[ Anmeldebühne ]== */
/* Die Anmeldebühne kommt ohne Abbildung aus: Der Text trägt sie allein, deshalb etwas mehr
   Abstand zwischen Lead und Nutzenliste. */
.buehne-mitte .buehne-lead { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.buehne-mitte .nutzen { margin-top: 0; }
/* Falls die Figur an anderer Stelle zurückkehrt, bleibt ihre Form definiert — sie steht hier
   nur nicht mehr. */
.portalfenster:empty { display: none; }
/* ==[ /Anmeldebühne ]== */

/* ==[ Navigation mobil ]== */
/* Untermenüs auf schmalen Anzeigen: eine Spalte, Zeilen statt Kacheln.
   Zweispaltig bleiben je Spalte rund 150 px — die Titel brechen mitten im Wort und die rechte
   Spalte läuft über den Rand. Einspaltig hat jeder Eintrag die volle Breite. */
@media (max-width: 899px) {
  .snav-links .snav-menu-col { grid-template-columns: 1fr; gap: 0; }

  .snav-links .snav-sub-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    /* Als Rasterfeld haelt sich der Eintrag sonst an seiner Inhaltsbreite fest: auf 320 px
       stand er 283 px breit in einer 251 px schmalen Spalte und ragte ueber das Feld hinaus. */
    min-width: 0;
    min-height: 3rem;
    padding: .7rem .25rem;
    border: 0;
    border-bottom: 1px solid var(--wl-linie);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .snav-links .snav-menu-col > .snav-sub-item:last-child { border-bottom: 0; }

  /* Titel und Beschreibung bekommen die Breite, die sie brauchen. */
  .snav-links .snav-li-tx { flex: 1; min-width: 0; }
  .snav-links .snav-li-t {
    display: block;
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wl-tinte);
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .snav-links .snav-li-d {
    display: block;
    margin-top: .1rem;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--wl-hilfstext);
    /* Auf 320 px wurde die Beschreibung mit Auslassungspunkten abgeschnitten. Sie hat hier die
       ganze Zeilenbreite - dann darf sie auch umbrechen statt zu enden. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Das Zeichen führt die Zeile, wo eines vorhanden ist. */
  .snav-links .snav-mi-ic {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: .55rem;
    background: var(--wl-blau-50);
    color: var(--wl-blau);
  }
  .snav-links .snav-mi-ic svg { width: 1.05rem; height: 1.05rem; }

  /* Der Pfeil steht rechts und markiert, dass die Zeile weiterführt. */
  .snav-links .snav-sub-item::after {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    margin-left: auto;
    border-right: 2px solid var(--wl-ui-rand);
    border-bottom: 2px solid var(--wl-ui-rand);
    transform: rotate(-45deg);
    opacity: .75;
  }

  /* Das aufgeklappte Feld sitzt bündig in der Spalte, ohne eigene Kachelwirkung. */
  .snav-links .snav-panel, .snav-links .snav-menu {
    width: auto;
    max-width: none;
    margin: 0;
    padding: .25rem .9rem .5rem;
    border-radius: var(--wl-radius-ui, .8rem);
    box-shadow: none;
    background: var(--wl-flaeche-2);
  }

  /* „Alle … ansehen" schließt den Block als eigene Zeile ab. */
  .snav-links .snav-menu-all {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .35rem;
    padding: .75rem .25rem .25rem;
    border-top: 1px solid var(--wl-linie);
    font-weight: 600;
    color: var(--wl-blau);
  }
  .snav-links .snav-menu-all .pfeil { width: 1rem; height: 1rem; }

  /* Das Branchenraster bleibt zweispaltig — zwölf Namen ohne Beschreibung einspaltig zu setzen,
     hieße 570 px Menü vor dem nächsten Punkt. Es braucht aber echte halbe Spalten: gemessen
     stand dort ein inhaltsbestimmtes Raster (171 px + 189 px bei 321 px Platz), das sich am
     längsten Namen festhielt und rechts über den Rand lief. */
  .snav-links .snav-menu-grid { grid-template-columns: 1fr 1fr; gap: .25rem; }
  .snav-links .snav-menu-grid .snav-sub-item {
    min-width: 0;
    min-height: 2.75rem;
    gap: .5rem;
    padding: .5rem .45rem;
    border-bottom: 0;
    border-radius: var(--wl-radius-ui, .7rem);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.25;
    /* „Bauunternehmen" passt nicht in eine halbe Spalte. Ohne Trennung bleibt ein einzelnes „n"
       auf der zweiten Zeile stehen; die Seiten sind mit lang="de" ausgezeichnet, also trennt
       der Browser nach deutschen Regeln. */
    hyphens: auto;
    overflow-wrap: break-word;
  }
  /* Der Pfeil kostet hier die Breite, die der Name braucht — die Kachel führt ohnehin weiter. */
  .snav-links .snav-menu-grid .snav-sub-item::after { content: none; }
  .snav-links .snav-menu-grid .snav-mi-ic { width: 1.75rem; height: 1.75rem; }
  .snav-links .snav-menu-grid .snav-mi-ic svg { width: .95rem; height: .95rem; }
}
/* ==[ /Navigation mobil ]== */

/* ==[ Laufband kompakt ]== */
/* Das Laufband der Branchenwelten ist ein Streifen, kein Abschnitt.
   Die allgemeine Abstandsregel gibt jedem Abschnitt var(--wl-sektion) — beim Laufband waren das
   112 px über und unter 35 px Inhalt. Der Wert wird hier am Element selbst kleiner gesetzt,
   damit jene Regel mit ihm rechnet; gegen ihre acht :not() käme eine Klasse sonst nicht an. */
.bw-band {
  --wl-sektion: clamp(.7rem, 1.1vw, 1rem);
  padding-block: var(--wl-sektion);
}
/* Die Maske am Rand darf bei einem so flachen Band nicht mehr Platz kosten als nötig. */
.bw-band .marquee { padding-block: .2rem; }

/* Unter 640 px hilft der Umweg über --wl-sektion nicht: wl-legacy.css setzt dort
   "main > section …" dort padding-top: 3.5rem !important mit festem Wert. Dagegen kommt nur ein
   eigenes !important an; die Klasse ist spezifischer als jene Elementselektoren, also genügt es
   hier und bleibt auf dieses eine Band beschränkt. */
@media (max-width: 640px) {
  .bw-band { padding-block: var(--wl-sektion) !important; }
}
/* ==[ /Laufband kompakt ]== */

/* ==[ Branchen Flächen weich ]== */
/* Getönte Bänder der Branchenseiten: über die volle Fensterbreite, aber oben und unten
   auslaufend. Der bisherige Weg — box-shadow als Farbfläche, clip-path als Begrenzung — endet
   zwangsläufig mit einer Kante, weil ein Schlagschatten nicht verlaufen kann. */
[data-shell="branchen"] section.mod#faq,
[data-shell="branchen"] section.mod#tools,
[data-shell="branchen"] section.mod:nth-of-type(2n):not(.sektion-dunkel):not(.ist-branchen-dunkel) {
  position: relative;
  background: none;
  box-shadow: none;
  clip-path: none;
}
[data-shell="branchen"] section.mod#faq::before,
[data-shell="branchen"] section.mod#tools::before,
[data-shell="branchen"] section.mod:nth-of-type(2n):not(.sektion-dunkel):not(.ist-branchen-dunkel)::before {
  content: "";
  position: absolute;
  /* linke und rechte Fensterkante, unabhängig von der Breite des Inhaltsbereichs */
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0,
    var(--flaeche, var(--accent-soft)) clamp(2rem, 6vh, 4.5rem),
    var(--flaeche, var(--accent-soft)) calc(100% - clamp(2rem, 6vh, 4.5rem)),
    transparent 100%);
}
/* Der Wechselstreifen trägt den neutralen Grund, die beiden Bänder den Branchenton. */
[data-shell="branchen"] section.mod:nth-of-type(2n):not(.sektion-dunkel):not(.ist-branchen-dunkel)::before {
  --flaeche: var(--canvas, var(--wl-weiss));
}
[data-shell="branchen"] section.mod#faq::before,
[data-shell="branchen"] section.mod#tools::before {
  --flaeche: var(--accent-soft);
}

/* Der Einordnungskasten trug einen 3 px starken Balken im Branchenton an der linken Kante —
   dieselbe harte Farbkante im Kleinen. Der Ton bleibt, als feine Linie statt als Balken. */
[data-shell="branchen"] .einordnung-text {
  border-left: 1px solid var(--wl-linie);
  box-shadow: inset 3px 0 0 -1px color-mix(in srgb, var(--wl-branche, var(--wl-blau)) 55%, transparent);
}

/* Dasselbe an den Seiten. Gemessen quer über die Seite bei sechs Höhen:
     x = 112 und x = 1328   Sprung 30 bis 79   der Kopfbereich
     x =  72 und x = 1368   Sprung 20 bis 26   Einordnung und Anforderungen
   Diese Abschnitte tragen ihre Tönung als eigenen Hintergrund. Ein Hintergrund endet am
   Element — also genau dort, wo der Inhaltsbereich endet, mitten auf der Seite. Auf weißem
   Grund steht damit eine senkrechte Kante über die ganze Höhe des Abschnitts.
   Sie bekommen dieselbe Behandlung wie die Bänder: eine Fläche über die volle Fensterbreite,
   oben und unten auslaufend. */
[data-shell="branchen"] section.hero,
[data-shell="branchen"] section#einordnung,
[data-shell="branchen"] section#anforderungen {
  position: relative;
  background-image: none;
}
[data-shell="branchen"] section.hero::before,
[data-shell="branchen"] section#einordnung::before,
[data-shell="branchen"] section#anforderungen::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0,
    var(--wl-flaeche-2) clamp(2rem, 6vh, 4.5rem),
    var(--wl-flaeche-2) calc(100% - clamp(2rem, 6vh, 4.5rem)),
    transparent 100%);
}
/* Der Kopfbereich beginnt direkt unter der Navigation — dort ist oben nichts abzurunden,
   die Tönung setzt gleich ein und läuft nur nach unten aus. */
[data-shell="branchen"] section.hero::before {
  background: linear-gradient(180deg,
    var(--wl-weiss) 0,
    var(--wl-flaeche-2) 42%,
    var(--wl-flaeche-2) calc(100% - clamp(2rem, 6vh, 4.5rem)),
    transparent 100%);
}

/* Über dem Kopf liegt zusätzlich ein Lichtschimmer aus wl-legacy.css — zwei radiale Verläufe,
   der linke mit 22 % Deckung. Er sitzt auf inset: 0, endet also am Inhaltsbereich: gemessen
   eine Kante von 65 bis 70 Stufen bei x = 112 und x = 1328, über die ganze Höhe des Kopfes.
   Der Schimmer bleibt — er gibt dem Kopf seine Tiefe —, er reicht nur jetzt bis an den
   Fensterrand und hat dort nichts mehr, wogegen er abbrechen könnte. */
[data-shell="branchen"] section.hero::after {
  inset: 0 calc(50% - 50vw);
  /* Sein Zentrum liegt bei 8 % der Höhe, an der Oberkante steht also fast die volle Deckung —
     gemessen ein Sprung von 61 Stufen bei y = 81, direkt unter der Navigation. Er blendet
     jetzt ein, statt dort zu beginnen. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(2rem, 7vh, 5rem));
  mask-image: linear-gradient(180deg, transparent 0, #000 clamp(2rem, 7vh, 5rem));
}
/* Beide Flächen reichen nur dann bis zum Fensterrand, wenn der Kopf sie lässt: er stand auf
   overflow: hidden und schnitt sie exakt an seiner eigenen Kante ab — gemessen bei x = 112.
   Seitliches Überlaufen fängt der Seitenkörper ohnehin mit overflow-x: clip ab. */
[data-shell="branchen"] section.hero { overflow: visible; }
/* ==[ /Branchen Flächen weich ]== */

/* ==[ Branchenkopf vollständig ]== */
/* Zwei Wege im Kopf, wie auf den Vorlagenseiten: der Hauptweg zuerst, der unverbindliche
   daneben. Der zweite trägt Umriss statt Fläche, damit die Reihenfolge sichtbar bleibt. */
[data-shell="branchen"] .hero-cta { gap: .75rem; align-items: center; flex-wrap: wrap; }
[data-shell="branchen"] .hero-cta .cta.ghost {
  background: var(--wl-weiss);
  background-image: none;
  color: var(--wl-blau-hover, var(--wl-blau));
  border: 1px solid var(--wl-blau-rand, var(--wl-linie));
  box-shadow: none;
}
[data-shell="branchen"] .hero-cta .cta.ghost:hover {
  border-color: var(--wl-blau);
  background: var(--wl-blau-50, var(--wl-flaeche-2));
}
/* ==[ /Branchenkopf vollständig ]== */