/* =========================================================
   EH WESTFALEN
   Eine Achse. Ein Akzent. Kein Baukasten.
   Alle Kontraste gerechnet (WCAG 2.1). Null externe Requests.
   ========================================================= */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, li { overflow-wrap: break-word; }
:target { scroll-margin-top: 7rem; }


/* ---------- Schriften, lokal ausgeliefert, keine externe Verbindung ----------
   Archivo (SIL OFL 1.1), variabel in Gewicht 100..900 und Breite 62..125.
   Die Breitenachse ist der Grund für genau diese Schrift: GENERALÜBERNEHMER
   steht bei wdth 88 in einer Zeile, ohne dass die Größe zurückgenommen wird.
   IBM Plex Mono 500 (SIL OFL 1.1) als zweites Register für alles Technische.
   Lizenztexte liegen unter /assets/font/OFL.txt.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/font/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'EH Mono';
  src: url('/assets/font/plexmono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
/* Metrisch angeglichener Ersatz: beim Nachladen springt das Layout nicht. */
@font-face {
  font-family: 'Archivo Ersatz';
  src: local('Helvetica Neue'), local('Arial'), local('Segoe UI'), local('Roboto');
  size-adjust: 97%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- 2. Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Logofarben. Nur Flächen im Zeichen und im Diagramm, nie Text. */
  --z-oben: #065C44; --z-links: #7AB4C7; --z-rechts: #78A97D; --z-unten: #1A697F;

  /* HELL, Grund Kalk. Kontraste gegen #F4F3EF gerechnet. */
  --papier: #F4F3EF;
  --blatt: #FFFFFF;
  --ink: #14181A;          /* 16,09:1 */
  --ink-2: #54605B;        /*  5,91:1 */
  --akzent: #065C44;       /*  7,21:1 */
  --akzent-tief: #0B4A38;
  --link: #1A697F;         /*  5,61:1 */
  --grau: #6E6A62;         /*  4,85:1, Zustand „üblich", kein Rot */
  --linie: rgba(20, 24, 26, .15);
  --linie-stark: #85837B;  /*  3,42:1 */
  --auf-akzent: #FFFFFF;

  /* Die eine dunkle Fläche */
  --schiefer: #0E1416;
  --auf-dunkel: #ECEFEC;
  --auf-dunkel-2: #9AA5A2;

  /* Schrift. Zwei Register: Fließsatz und Technik. */
  --sans: 'Archivo', 'Archivo Ersatz', system-ui, -apple-system, sans-serif;
  --mono: 'EH Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typoskala */
  --t-h1:    clamp(2.75rem, 1.2rem + 6.2vw, 6.5rem);
  --t-h2:    clamp(1.85rem, 1.15rem + 3vw, 3.25rem);
  --t-h3:    clamp(1.15rem, 1.06rem + .45vw, 1.4rem);
  --t-lead:  clamp(1.15rem, 1rem + .7vw, 1.55rem);
  --t-body:  clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-klein: .9375rem;
  --t-mono:  .8125rem;

  /* Achse und Satzspiegel. Kein zentrierter Block, alles beginnt an --satz. */
  --achse: clamp(1.25rem, 5.2vw, 7.5rem);
  --satz:  calc(var(--achse) + clamp(1.25rem, 2.4vw, 2.75rem));
  --rand:  clamp(1.25rem, 5.2vw, 7.5rem);
  --kopf:  4.25rem;

  /* Abstandsskala, 4-px-Basis, keine Zwischengrößen */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4.5rem; --s9:6.5rem; --s10:9.5rem; --s11:14rem;
  /* Der 4:1-Sprung: zwischen Kapiteln --kapitel, innerhalb nie mehr als --s7. */
  --kapitel: clamp(7rem, 4rem + 9vw, 14rem);

  /* Genau ein Radius. Keine Pillen. */
  --r: 2px;

  --kurve: cubic-bezier(.2, .7, .2, 1);
  --zeit: 140ms;
  --zeit-lang: 260ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0E1416;
    --blatt: #171E20;
    --ink: #ECEFEC;        /* 16,03:1 */
    --ink-2: #9AA5A2;      /*  7,32:1 */
    --akzent: #78A97D;     /*  6,87:1, #065C44 wäre hier 2,32:1 und ist als Text gesperrt */
    --akzent-tief: #94C099;
    --link: #7AB4C7;       /*  8,12:1 */
    --grau: #8A8E86;       /*  5,57:1 */
    --linie: rgba(236, 239, 236, .18);
    --linie-stark: #646F6B;
    --auf-akzent: #0E1416;
    --schiefer: #F4F3EF;
    --auf-dunkel: #14181A;
    --auf-dunkel-2: #54605B;
  }
}
@supports (color: color-mix(in oklab, #000 10%, transparent)) {
  :root { --linie: color-mix(in oklab, #14181A 15%, transparent); }
  @media (prefers-color-scheme: dark) { :root { --linie: color-mix(in oklab, #ECEFEC 18%, transparent); } }
}

/* ---------- 3. Grundlagen ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

p, li, dd { text-wrap: pretty; }

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--papier);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.08; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
@supports (font-variation-settings: "wdth" 90) {
  h1 { font-variation-settings: "wdth" 90, "wght" 600; }
  h2 { font-variation-settings: "wdth" 94, "wght" 600; }
  h3 { font-variation-settings: "wdth" 100, "wght" 620; }
  .eyebrow, .prob__n, .step__when, .ll__tag, .case dt, .badge { font-variation-settings: normal; }
}
h1 { font-size: var(--t-h1); line-height: .96; letter-spacing: -.036em; font-weight: 600; max-width: 13ch; }
h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.026em; }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.012em; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--akzent); }

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

/* Kein zentrierter Block mehr: alles beginnt an der Achse. */
.wrap { width: 100%; padding-left: var(--satz); padding-right: var(--rand); }
.wrap > * { max-width: 82rem; }

/* Die Achse: eine Haarlinie, die zugleich linke Satzkante und Lesefortschritt ist. */
.achse { position: fixed; left: var(--achse); top: 0; bottom: 0; width: 1px; z-index: 40; pointer-events: none; }
.achse::before { content: ""; position: absolute; inset: 0; background: var(--linie); }
.achse::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: var(--akzent); transform-origin: 50% 0; transform: scaleY(var(--fortschritt, 0));
}
@media (max-width: 47.99rem) { .achse { display: none; } }
.measure { max-width: var(--measure); }
.section { padding-block: var(--kapitel); }
.section > .wrap > * + * { margin-top: var(--s7); }
.section--tight { padding-block: var(--kapitel); }
.section--alt { background: transparent; }
.mt-5 { margin-top: var(--s5); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--akzent); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ---------- 4. Bausteine ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: .5;
}
.lead { font-size: var(--t-lead); line-height: 1.48; color: var(--ink-2); letter-spacing: -.012em; }
.sec-head { max-width: 46ch; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.sec-head h2 { margin-top: var(--s4); }
.sec-head .lead { margin-top: var(--s5); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.5rem; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 550; font-size: var(--t-klein); letter-spacing: .005em; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
.btn--primary { background: var(--akzent); color: var(--auf-akzent); }
.btn--primary:hover { background: var(--akzent-tief); }
.btn--primary:active { background: var(--akzent-tief); }
.btn--ghost, .btn--onink, .btn--light {
  background: transparent; color: var(--ink); border-color: var(--linie-stark);
}
.btn--ghost:hover, .btn--onink:hover, .btn--light:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); transition-duration: 60ms; }
/* auf der dunklen Beilage drehen sich die Rollen um */
.beilage .btn--ghost, .beilage .btn--onink, .beilage .btn--light,
.landlord .btn--ghost, .landlord .btn--onink, .landlord .btn--light {
  color: var(--auf-dunkel); border-color: rgba(236,239,236,.32);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.card {
  background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
}

/* ---------- 5. Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__mark .q-empty { fill: transparent; }
.logo__txt { display: flex; flex-direction: column; line-height: 1.06; }
.logo__txt b { font-weight: 640; font-size: 1.02rem; letter-spacing: -.028em; }
.logo__txt span { font-size: .68rem; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }

/* ---------- 6. Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--zeit-lang) var(--kurve), border-color var(--zeit-lang) var(--kurve), backdrop-filter var(--zeit-lang) var(--kurve);
}
.hdr__in { display: flex; align-items: center; gap: var(--s5); min-height: var(--kopf); }
/* Auf der Startseite schwebt der Header ueber dem dunklen Hero */
.hdr--over { margin-bottom: calc(var(--kopf) * -1); color: var(--ink); }
.hdr--over .nav__link { color: var(--ink-2); }
.hdr--over .nav__link:hover { color: var(--ink); }
.hdr--over .logo__txt span { color: var(--ink-2); }
.hdr--over .burger { border-color: var(--linie); }
.hdr--over .burger span, .hdr--over .burger span::before, .hdr--over .burger span::after { background: var(--ink); }
.hdr--over[data-open="true"] .burger span { background: transparent; }
.hdr--over.is-stuck { color: var(--ink); }
.hdr--over.is-stuck .nav__link { color: var(--ink-2); }
.hdr--over.is-stuck .nav__link:hover { color: var(--ink); }
.hdr--over.is-stuck .logo__txt span { color: var(--ink-2); }
.hdr--over.is-stuck .burger { border-color: var(--linie); }
.hdr--over.is-stuck .burger span, .hdr--over.is-stuck .burger span::before, .hdr--over.is-stuck .burger span::after { background: var(--ink); }
.hdr--over.is-stuck[data-open="true"] .burger span { background: transparent; }
.hdr.is-stuck {
  background: color-mix(in srgb, var(--papier) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--linie);
}
@supports not (backdrop-filter: blur(1px)) { .hdr.is-stuck { background: var(--papier); } }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.6rem, .2rem + 1.1vw, 1.9rem); }
.nav__link { font-size: .95rem; text-decoration: none; color: var(--ink-2); font-weight: 500; letter-spacing: -.005em; transition: color var(--zeit-lang) var(--kurve); }
.nav__link:hover { color: var(--ink); }
.nav__tel { font-variant-numeric: tabular-nums; }
.hdr .btn { padding: .62rem 1.15rem; font-size: .93rem; }

.burger { display: none; width: 44px; height: 44px; margin-left: auto; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linie); border-radius: var(--r); cursor: pointer; }
.burger span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; transition: background var(--zeit-lang) var(--kurve); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink); transition: transform var(--zeit-lang) var(--kurve); }
.burger span::before { top: -5.5px; } .burger span::after { top: 5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 4.5rem 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    padding: var(--s3) clamp(1.25rem, .6rem + 2.6vw, 3rem) var(--s6);
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--zeit-lang) var(--kurve), transform var(--zeit-lang) var(--kurve), visibility var(--zeit-lang);
    max-height: calc(100dvh - 4.5rem); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav__link { padding: .95rem 0; border-bottom: 1px solid var(--linie); font-size: 1.05rem; color: var(--ink); }
  .hdr .btn { margin-top: var(--s4); width: 100%; padding: .95rem 1.6rem; font-size: 1rem; }
}

/* ---------- 7. Hero ---------- */
.hero { position: relative; background: var(--papier); color: var(--ink); overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg svg {
  position: absolute; right: -14%; top: -22%; width: min(84vw, 900px); height: auto; opacity: .13;
  /* Die Grafik hat vier Kanten. Ein linearer Verlauf nach unten lässt die senkrechte
     Kante stehen, die quer durch den Hero-Absatz läuft. Deshalb radial aus der Ecke,
     aus der das Motiv kommt: dann laufen alle Kanten gleichzeitig aus. */
  -webkit-mask-image: radial-gradient(130% 130% at 100% 0%, #000 38%, transparent 86%);
          mask-image: radial-gradient(130% 130% at 100% 0%, #000 38%, transparent 86%);
}
.hero__glow { display: none; }
.hero__in { padding-block: clamp(8rem, 5rem + 12vw, 13rem) clamp(4rem, 2rem + 9vw, 8rem); position: relative; }
.hero .eyebrow { color: var(--akzent); }
.hero h1 { margin-top: var(--s5); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--akzent); }
.hero__lead { margin-top: var(--s6); max-width: 42ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); }
.hero .btn-row { margin-top: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); }
.hero__facts {
  margin-top: clamp(3.5rem, 2rem + 5vw, 6rem); padding-top: var(--s6);
  border-top: 1px solid var(--linie);
  display: grid; gap: var(--s7);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .hero__facts { grid-template-columns: repeat(3, 1fr); } }
.hero__fact { display: grid; gap: var(--s3); align-content: start; }
.hero__fact b { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); font-weight: 620; letter-spacing: -.03em; line-height: 1.2; }
.hero__fact p { font-size: var(--t-klein); color: var(--ink-2); line-height: 1.55; }
/* Überschrift und Text der drei Fakten liegen auf gemeinsamen Zeilen, egal wie lang die Überschrift bricht */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 780px) {
    .hero__facts { grid-template-rows: auto auto; }
    .hero__fact { grid-row: span 2; grid-template-rows: subgrid; }
  }
}

/* ---------- 8. Problem ---------- */
.problem { background: var(--papier); }
/* Genau vier Karten: feste 2x2-Aufteilung, damit nie eine allein in einer Reihe steht. */
.probs { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie);
  grid-template-columns: 1fr; }
@media (min-width: 660px) { .probs { grid-template-columns: 1fr 1fr; } }
.prob { background: var(--papier); padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem) clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.prob__n { font-size: .78rem; font-weight: 650; letter-spacing: .09em; color: var(--akzent); }
.prob h3 { margin-top: var(--s4); }
.prob p { margin-top: var(--s3); color: var(--ink-2); font-size: .99rem; line-height: 1.6; }

/* ---------- 9. Prinzip / Diagramm ---------- */
.principle { background: var(--papier); }
.diagram { margin-top: var(--s4); }
.diagram svg { width: 100%; height: auto; }
.dg-label { font: 600 13px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.dg-node { font: 500 13.5px/1 var(--sans); letter-spacing: -.01em; }
.dg-hub  { font: 620 15px/1 var(--sans); letter-spacing: -.015em; }
.dg-line-old { stroke: #6E6A62; stroke-width: 1.4; fill: none; opacity: .8; }
.dg-line-new { stroke: var(--akzent); stroke-width: 1.6; fill: none; }
.dg-chip { fill: var(--blatt); stroke: var(--linie); }
.dg-chip-hub { fill: var(--akzent); stroke: var(--akzent); }
.dg-you { fill: var(--ink); }
.dg-tx { fill: var(--ink); }
.dg-tx-mute { fill: var(--ink-2); }
.dg-tx-inv { fill: #fff; }          /* Text auf der gruenen EH-Westfalen-Flaeche */
.dg-tx-you { fill: var(--papier); }     /* Text auf der "Sie"-Flaeche, die die Textfarbe hat */
@media (prefers-color-scheme: dark) {
  .dg-line-old { stroke: #8A8E86; }
  .dg-line-new { stroke: var(--z-rechts); }
  .dg-chip-hub { fill: var(--akzent); stroke: var(--z-rechts); }
}
.dg-wrap { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 800px) { .dg-wrap { grid-template-columns: 1fr 1fr; } }
.dg-panel { margin: 0; }
.dg-panel figcaption { font-size: .93rem; line-height: 1.55; color: var(--ink-2); margin-bottom: var(--s5); max-width: 44ch; }
.dg-cap { display: block; font-size: .76rem; font-weight: 660; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .35rem; }
.dg-cap--old { color: #6E6A62; }
.dg-cap--new { color: var(--akzent); }
@media (prefers-color-scheme: dark) { .dg-cap--old { color: #8A8E86; } }
/* pathLength="1" im SVG: die Laenge jedes Pfades zaehlt als 1, deshalb funktioniert
   das Zeichnen unabhaengig davon, wie lang die Kurve tatsaechlich ist. */
.dg-links-old path, .dg-links-new path, .dg-line-new { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .dg-links-old path, .is-in .dg-links-new path, .is-in .dg-line-new { animation: draw .9s var(--kurve) forwards; }
.is-in .dg-links-old path:nth-child(2), .is-in .dg-links-new path:nth-child(2) { animation-delay: .06s; }
.is-in .dg-links-old path:nth-child(3), .is-in .dg-links-new path:nth-child(3) { animation-delay: .12s; }
.is-in .dg-links-old path:nth-child(4), .is-in .dg-links-new path:nth-child(4) { animation-delay: .18s; }
.is-in .dg-links-old path:nth-child(5), .is-in .dg-links-new path:nth-child(5) { animation-delay: .24s; }
.is-in .dg-links-old path:nth-child(6), .is-in .dg-links-new path:nth-child(6) { animation-delay: .30s; }
.is-in .dg-links-old path:nth-child(7), .is-in .dg-links-new path:nth-child(7) { animation-delay: .36s; }
.is-in .dg-links-old path:nth-child(8), .is-in .dg-links-new path:nth-child(8) { animation-delay: .42s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dg-links-old path, .dg-links-new path, .dg-line-new { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
}

.pillars { display: grid; gap: var(--s5); grid-template-columns: 1fr; margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
@media (min-width: 780px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding-top: var(--s5); border-top: 2px solid var(--akzent); }
.pillar h3 { letter-spacing: -.02em; }
.pillar p { margin-top: var(--s3); color: var(--ink-2); font-size: .99rem; }

/* ---------- 10. Leistungen ---------- */
.svc { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 780px) { .svc { grid-template-columns: 1fr 1fr; } }
.svc .card { display: flex; flex-direction: column; transition: transform var(--zeit-lang) var(--kurve), border-color var(--zeit-lang) var(--kurve); }
.svc .card:hover { border-color: var(--linie-stark); }  /* kein Anheben: die Karten sind nicht klickbar */
.svc__ic { width: 42px; height: 42px; }
.svc h3 { margin-top: var(--s5); }
.svc .card > p { margin-top: var(--s3); color: var(--ink-2); font-size: .99rem; }
.ticks { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: .7rem; }
.ticks li { position: relative; padding-left: 1.7rem; font-size: .97rem; line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: .72rem; height: .4rem;
  border-left: 1.8px solid var(--akzent); border-bottom: 1.8px solid var(--akzent);
  transform: rotate(-45deg);
}

/* ---------- 11. Ablauf ---------- */
.steps { display: grid; gap: 0; counter-reset: st; }
.step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, .8rem + 1.6vw, 2.6rem); position: relative; padding-bottom: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); }
.step:last-child { padding-bottom: 0; }
.step__rail { display: flex; flex-direction: column; align-items: center; }
.step__dot {
  width: 2.4rem; height: 2.4rem; flex: none; border-radius: var(--r);
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--linie); color: var(--akzent);
}
.step__ln { flex: 1; width: 1px; background: var(--linie); margin-top: .5rem; }
.step:last-child .step__ln { display: none; }
.step__bd { padding-top: .35rem; }
.step__bd h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
@media (max-width: 620px) { .step__when { flex: 0 0 100%; } }
.step__when { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.step__bd p { margin-top: var(--s3); color: var(--ink-2); max-width: 58ch; }

/* ---------- 12. Vermieter (dunkel) ---------- */
.landlord {
  background: var(--schiefer); color: var(--auf-dunkel);
  margin-left: var(--achse);           /* beginnt rechts der Achse, überquert sie nie */
  padding-left: clamp(1.25rem, 2.4vw, 2.75rem);
}
.landlord .wrap { padding-left: 0; }
.landlord .eyebrow { color: var(--z-links); }
.landlord .lead { color: var(--auf-dunkel-2); }
.ll-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .ll-grid { grid-template-columns: 1fr 1fr; } }
.ll {
  background: rgba(244,246,244,.045); border: 1px solid var(--linie); border-radius: var(--r);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.1rem);
}
.ll__tag { font-size: .74rem; font-weight: 640; letter-spacing: .06em; color: var(--z-links); }  /* kein uppercase: sonst wird § 555c zu § 555C */
.ll h3 { margin-top: var(--s3); color: var(--auf-dunkel); }
.ll p { margin-top: var(--s3); color: var(--auf-dunkel-2); font-size: .97rem; line-height: 1.6; }
.ll-note { margin-top: var(--s6); font-size: .87rem; color: var(--auf-dunkel-2); max-width: 72ch; opacity: .85; }

/* ---------- 13. Beispiele ---------- */
.badge {
  display: inline-block; font-size: .72rem; font-weight: 640; letter-spacing: .075em; text-transform: uppercase;
  padding: .38rem .72rem; border-radius: var(--r);
  background: color-mix(in srgb, var(--link) 12%, transparent);
  color: var(--link); border: 1px solid color-mix(in srgb, var(--link) 30%, transparent);
}
@media (prefers-color-scheme: dark) { .badge { color: var(--z-links); border-color: color-mix(in srgb, var(--z-links) 34%, transparent); background: color-mix(in srgb, var(--z-links) 11%, transparent); } }
.cases { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 940px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case h3 { margin-top: var(--s4); }
.case__meta { margin-top: var(--s2); font-size: .9rem; color: var(--ink-2); }
.case dl { margin-top: var(--s5); display: grid; gap: 0; }
.case dt { font-size: .76rem; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: var(--s4); }
.case dd { margin: .35rem 0 0; font-size: .97rem; line-height: 1.55; }
.case dd + dt { border-top: 1px solid var(--linie); margin-top: var(--s4); }
.case__fig { font-size: 1.45rem; font-weight: 620; letter-spacing: -.025em; color: var(--akzent); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 940px) {
    /* 11 Zeilen: Badge, Überschrift, Metazeile, dann 4x (Label, Text).
       Ohne das laufen die Trennlinien der drei Karten auf drei Höhen. */
    .cases { grid-template-rows: repeat(11, auto); }
    .case  { grid-row: span 11; display: grid; grid-template-rows: subgrid; align-content: start; }
    .case dl { grid-row: span 8; display: grid; grid-template-rows: subgrid; }
  }
}
.disclaim { margin-top: var(--s6); font-size: .87rem; color: var(--ink-2); max-width: 78ch; }

/* ---------- 14. Warum ---------- */
.why { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden;
  grid-template-columns: 1fr; }
@media (min-width: 700px)  { .why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why > div { background: var(--papier); padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); }
.why h3 { letter-spacing: -.02em; }
.why p { margin-top: var(--s3); color: var(--ink-2); font-size: .97rem; }

/* ---------- 15. FAQ ---------- */
.faq { max-width: 880px; }
.faq .qa summary { padding-right: var(--s4); }
.qa { border-top: 1px solid var(--linie); }
.qa:last-of-type { border-bottom: 1px solid var(--linie); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s5) 0; font-size: clamp(1.03rem, .98rem + .35vw, 1.2rem); font-weight: 560; letter-spacing: -.016em; line-height: 1.4;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: .42em; width: .62rem; height: .62rem;
  border-right: 1.8px solid var(--akzent); border-bottom: 1.8px solid var(--akzent);
  transform: rotate(45deg); transition: transform var(--zeit-lang) var(--kurve);
}
.qa[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover { color: var(--akzent); }
.qa__a { padding: 0 0 var(--s6); max-width: 68ch; color: var(--ink-2); }
.qa__a p + p { margin-top: var(--s4); }

/* ---------- 16. Kontakt ---------- */
.contact { background: transparent; }
.ct-grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .ct-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.ct-ways { display: grid; gap: var(--s5); margin-top: var(--s7); }
.ct-way { display: flex; gap: var(--s4); align-items: flex-start; text-decoration: none; }
.ct-way__ic { width: 2.4rem; height: 2.4rem; flex: none; border-radius: var(--r); display: grid; place-items: center;
  border: 1px solid var(--linie); color: var(--akzent); }
.ct-way__ic svg { width: 1.15rem; height: 1.15rem; }
.ct-way b { display: block; font-weight: 600; letter-spacing: -.015em; font-size: 1.06rem; }
.ct-way span { display: block; font-size: .93rem; color: var(--ink-2); margin-top: .15rem; }
a.ct-way:hover b { color: var(--akzent); }

.form { display: grid; gap: var(--s5); }
.fld { display: grid; gap: .5rem; }
.fld label { font-size: .87rem; font-weight: 560; letter-spacing: .005em; }
.fld .req { color: var(--akzent); }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: .82rem 1rem; border-radius: var(--r);
  border: 1px solid var(--linie); background: var(--blatt); color: var(--ink);
  font-size: 1rem; transition: border-color var(--zeit-lang) var(--kurve);
}
.fld textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--akzent);
}
.fld input:user-invalid, .fld textarea:user-invalid { border-color: #6E6A62; }
.fld-row { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.consent { display: flex; gap: .8rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.consent input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .18rem; accent-color: var(--akzent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: .84rem; color: var(--ink-2); }
.form__msg { padding: var(--s4) var(--s5); border-radius: var(--r); font-size: .95rem; display: none; }
.form__msg.is-on { display: block; }
.form__msg--ok { background: color-mix(in srgb, var(--akzent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 34%, transparent); }
.form__msg--err { background: rgba(110,106,98,.1); border: 1px solid rgba(110,106,98,.36); }

/* ---------- 17. Footer ---------- */
.ftr { background: transparent; color: var(--ink); border-top: 1px solid var(--linie); padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) var(--s6); }
.ftr .logo__txt span { color: var(--ink-2); }
.ftr__top { display: grid; gap: var(--s7); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.ftr h2 { font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .06em; color: var(--ink-2); }
.ftr ul { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: .7rem; }
.ftr a { color: var(--ink); text-decoration: none; font-size: var(--t-klein);
  display: inline-block; padding-block: .3rem; }   /* Antippfläche nach WCAG 2.2 mindestens 24 px */
.ftr a:hover { text-decoration: underline; text-decoration-color: var(--z-rechts); }
.ftr address { font-style: normal; margin-top: var(--s4); color: var(--ink-2); font-size: var(--t-klein); line-height: 1.7; }
.ftr__bot {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: var(--s5); border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; justify-content: space-between;
  font-size: var(--t-klein); color: var(--ink-2);
}
.ftr__bot nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.ftr__bot nav a { padding-block: .35rem; }
.ftr__bot--solo { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---------- 18. Rechtsseiten ---------- */
.legal { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--kapitel); }
.legal__bd { max-width: 74ch; }
.legal__bd h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.legal__bd h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--linie); }
.legal__bd h3 { margin-top: var(--s6); font-size: 1.1rem; }
.legal__bd p, .legal__bd ul, .legal__bd ol { margin-top: var(--s4); }
.legal__bd ul, .legal__bd ol { padding-left: 1.3rem; display: grid; gap: .5rem; }
.legal__bd a { color: var(--akzent); }
.legal__bd .lead { margin-top: var(--s5); }
.legal__bd dl { margin-top: var(--s4); }
.legal__bd dt { font-weight: 600; margin-top: var(--s4); }
.legal__bd dd { margin: .2rem 0 0; color: var(--ink-2); }
.legal__bd h2.todo-head { border-top: 0; }
.todo { background: rgba(110,106,98,.1); border: 1px solid rgba(110,106,98,.4); border-radius: var(--r); padding: var(--s4) var(--s5); font-size: .93rem; }

/* ---------- 19. 404 ---------- */
.nf { min-height: 68vh; display: grid; place-items: center; text-align: center; padding-block: var(--s9); }
.nf h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); }
.nf p { margin-top: var(--s5); color: var(--ink-2); }
.nf .btn-row { margin-top: var(--s6); justify-content: center; }

/* ---------- 20. Scroll-Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--kurve), transform .7s var(--kurve); }
.rv { opacity: 1; transform: none; }
.js .rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s; } .rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .21s; } .rv-d4 { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .svc .card:hover { transform: none; }
}

@media print {
  .hdr, .burger, .hero__bg, .hero__glow, .btn { display: none !important; }
  body { color: #000; background: #fff; }
}

/* =========================================================
   21. Bewegung und Interaktion (Ausbaustufe 2)
   ========================================================= */

/* ---- Lesefortschritt im Header ---- */
.hdr__prog {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--akzent), var(--z-rechts));
  opacity: 0; transition: opacity .3s var(--kurve);
}
.hdr.is-stuck .hdr__prog { opacity: 1; }
.hdr--over:not(.is-stuck) .hdr__prog { opacity: 0; }

/* ---- Aktiver Abschnitt in der Navigation ---- */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--zeit-lang) var(--kurve);
}
.nav__link[aria-current="true"] { color: var(--ink); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

@media (max-width: 900px) { .nav__link::after { display: none; } }

/* ---- Überschriften steigen aus einer Maske ---- */
.rise { display: block; overflow: hidden; }
.rise > span { display: block; text-wrap: balance; }
.js .rise > span {
  transform: translateY(105%);
  transition: transform .85s cubic-bezier(.16, .84, .28, 1);
}
.js .is-in .rise > span, .js .rise.is-in > span { transform: none; }

/* ---- Hero: Geometrie folgt dem Scrollen ---- */
.hero__bg svg, .hero__glow {
  will-change: transform;
  /* Scroll-Versatz (--sy, --sk) und Zeiger-Versatz (--zx, --zy) getrennt gehalten,
     damit sie sich nicht gegenseitig überschreiben */
  transform: translate3d(var(--zx, 0px), calc(var(--sy, 0px) + var(--zy, 0px)), 0) scale(var(--sk, 1));
}

/* ---- Zurück nach oben ---- */
.totop {
  position: fixed; right: clamp(1rem, .5rem + 1.6vw, 2rem); bottom: clamp(1rem, .5rem + 1.6vw, 2rem);
  z-index: 90; width: 2.8rem; height: 2.8rem; border-radius: var(--r); display: grid; place-items: center;
  background: var(--blatt); color: var(--ink); border: 1px solid var(--linie);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--zeit-lang) var(--kurve), transform var(--zeit-lang) var(--kurve), visibility var(--zeit-lang),
              background-color var(--zeit-lang) var(--kurve), color var(--zeit-lang) var(--kurve);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.calltop {
  position: fixed; right: clamp(1rem, .5rem + 1.6vw, 2rem); bottom: calc(clamp(1rem, .5rem + 1.6vw, 2rem) + 3.6rem);
  z-index: 90; width: 2.8rem; height: 2.8rem; border-radius: var(--r); display: none; place-items: center;
  background: var(--akzent); color: #fff; border: 1px solid var(--akzent);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--zeit-lang) var(--kurve), transform var(--zeit-lang) var(--kurve), visibility var(--zeit-lang);
}
@media (max-width: 900px) { .calltop { display: grid; } }
.calltop.is-on { opacity: 1; visibility: visible; transform: none; }
.calltop svg { width: 1.15rem; height: 1.15rem; }
.totop:hover { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.totop svg { width: 1.1rem; height: 1.1rem; }

/* ---- Diagramm: Gewerk antippen hebt seine Linie hervor ---- */
.dg-item { cursor: default; }
.dg-item rect { transition: stroke var(--zeit-lang) var(--kurve), filter var(--zeit-lang) var(--kurve); }
.dg-line-old, .dg-line-new { transition: opacity var(--zeit-lang) var(--kurve), stroke-width var(--zeit-lang) var(--kurve); }
.dg-panel.is-hovering .dg-line-old, .dg-panel.is-hovering .dg-line-new { opacity: .18; }
.dg-panel.is-hovering .dg-line-old.hi, .dg-panel.is-hovering .dg-line-new.hi { opacity: 1; stroke-width: 2.6; }
.dg-panel.is-hovering .dg-item { opacity: .45; transition: opacity var(--zeit-lang) var(--kurve); }
.dg-panel.is-hovering .dg-item.hi { opacity: 1; }
.dg-panel.is-hovering .dg-item.hi rect { stroke: var(--akzent); }
.dg-hint { margin-top: var(--s4); font-size: .83rem; color: var(--ink-2); }
@media (hover: none) { .dg-hint { display: none; } }

/* ---- Ablauf: Fortschritt läuft mit ---- */
.step__dot {
  transition: background-color .45s var(--kurve), color .45s var(--kurve),
              border-color .45s var(--kurve), transform .45s var(--kurve);
}
.step.is-active .step__dot { background: var(--akzent); border-color: var(--akzent); color: #fff; transform: scale(1.06); }
.step__ln { position: relative; overflow: hidden; }
.step__ln::after {
  content: ""; position: absolute; inset: 0; background: var(--akzent);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .7s var(--kurve);
}
.step.is-active .step__ln::after { transform: scaleY(1); }

/* ---- Bildbänder ---- */
.band { margin: 0; position: relative; overflow: hidden; background: var(--papier); }
.band img {
  width: 100%; height: clamp(230px, 40vw, 560px); object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.2, .7, .3, 1);
}
.js .band img.bereit { transform: scale(1.06); }
.js .band.is-in img.bereit { transform: scale(1); }
.band.is-in img { transform: scale(1); }
.band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem clamp(1.25rem, .6rem + 2.6vw, 3rem) 1.2rem;
  /* Verlauf früh und kräftig genug, damit die Schrift auch über hellen Bildstellen trägt */
  background: linear-gradient(to bottom, transparent, rgba(10,26,21,.55) 45%, rgba(10,26,21,.88));
  color: #F4F6F4; font-size: .87rem; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(10,26,21,.55);
}
.band figcaption b { font-weight: 600; }

/* ---- Vorher/Nachher-Schieber ---- */
.ba { position: relative; overflow: hidden; border-radius: var(--r); background: var(--papier);
      touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba img { width: 100%; height: clamp(260px, 46vw, 620px); object-fit: cover; display: block; }
.ba__after { position: absolute; inset: 0; }
.ba__after img { height: 100%; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; cursor: ew-resize;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; border-radius: var(--r); background: #fff; color: var(--schiefer);
  display: grid; place-items: center; box-shadow: 0 4px 18px rgba(10,26,21,.3);
}
.ba__grip svg { width: 1.1rem; height: 1.1rem; }
.ba__tag {
  position: absolute; top: 1rem; font-size: .72rem; font-weight: 640; letter-spacing: .09em; text-transform: uppercase;
  padding: .34rem .7rem; border-radius: var(--r); background: rgba(10,26,21,.62); color: #F4F6F4;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ba__tag--l { left: 1rem; } .ba__tag--r { right: 1rem; }
.ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}
.ba input[type="range"]:focus-visible ~ .ba__handle { box-shadow: 0 0 0 3px var(--akzent); }

/* ---- Selbsttest ---- */
.check { background: transparent; color: var(--ink); }
.check .eyebrow { color: var(--akzent); }
.check .lead { color: var(--ink-2); }
.quiz {
  background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem); max-width: 780px; position: relative; overflow: hidden;
}
.quiz__bar { height: 2px; background: var(--linie); border-radius: 3px; overflow: hidden; margin-bottom: var(--s6); }
.quiz__bar span { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .5s var(--kurve); }
.quiz__step { display: block; }                       /* ohne JavaScript stehen alle Fragen untereinander */
.quiz__step + .quiz__step { margin-top: var(--s7); }
.quiz__res:empty { display: none; }
.quiz.is-js .quiz__step { display: none; margin-top: 0; }
.quiz.is-js .quiz__step.is-on { display: block; animation: qin .45s var(--kurve); }
@keyframes qin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.quiz fieldset { border: 0; padding: 0; margin: 0; }
.quiz legend { font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem); font-weight: 600; letter-spacing: -.022em; line-height: 1.3; margin-bottom: var(--s5); }
.quiz__n { display: block; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .06em; color: var(--akzent); margin-bottom: .6rem; }
.opts { display: grid; gap: .7rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt span {
  display: block; padding: .95rem 1.2rem; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--linie); background: var(--papier); color: var(--ink);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--zeit-lang) var(--kurve), background-color var(--zeit-lang) var(--kurve), transform var(--zeit-lang) var(--kurve);
}
.opt span:hover { border-color: var(--linie-stark); }
.opt input:checked + span { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); }
.opt input:focus-visible + span { outline: 2px solid var(--z-rechts); outline-offset: 3px; }
.quiz__nav { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s6); }
.quiz__back {
  background: none; border: 0; color: var(--ink-2); cursor: pointer; font-size: .93rem;
  padding: .5rem .2rem; text-decoration: underline; text-underline-offset: .2em;
}
.quiz__back:hover { color: var(--ink); }
.quiz__res h3 { font-size: var(--t-h3); color: var(--ink); }
.quiz__verdict { display: inline-block; font-size: .74rem; font-weight: 640; letter-spacing: .09em; text-transform: uppercase;
  padding: .38rem .8rem; border-radius: var(--r); margin-bottom: var(--s4); }
.quiz__verdict.ja   { background: rgba(120,169,125,.2);  color: var(--z-rechts); border: 1px solid rgba(120,169,125,.42); }
.quiz__verdict.evtl { background: rgba(122,180,199,.16); color: var(--z-links);  border: 1px solid rgba(122,180,199,.4); }
.quiz__verdict.nein { background: rgba(244,246,244,.09); color: var(--auf-dunkel-2); border: 1px solid var(--linie); }
.quiz__res p { margin-top: var(--s4); color: var(--ink-2); line-height: 1.62; }
.quiz__res ul { margin: var(--s5) 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.quiz__res ul li { position: relative; padding-left: 1.7rem; font-size: var(--t-klein); color: var(--ink-2); }
.quiz__res ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .4rem;
  border-left: 1.8px solid var(--z-rechts); border-bottom: 1.8px solid var(--z-rechts); transform: rotate(-45deg); }
.quiz__nojs { color: var(--ink-2); font-size: var(--t-klein); margin-top: var(--s6); }

/* ---- FAQ: Antwort fährt weich auf ---- */
.qa__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--kurve); }
.qa[open] .qa__wrap { grid-template-rows: 1fr; }
.qa__wrap > .qa__a { overflow: hidden; min-height: 0; }
/* Der Rasterkniff allein greift nicht: der geschlossene Inhalt von <details> ist
   vom Browser ausgeblendet, die Höhe springt trotzdem. Deshalb zusätzlich den
   Inhaltsbereich selbst animieren, wo der Browser das kann. */
@supports selector(details::details-content) {
  .qa::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .4s var(--kurve), content-visibility .4s var(--kurve);
    transition-behavior: allow-discrete;
  }
  .qa[open]::details-content { block-size: auto; }
  .qa__wrap { display: block; }
  .qa__wrap > .qa__a { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .rise > span { transform: none !important; }
  .band img { transform: none !important; }
  .quiz__step.is-on { animation: none; }
  .hero__bg svg, .hero__glow { transform: none !important; }
  .step__ln::after { transition: none; }
  .qa__wrap { transition: none; }
}

/* ---------- Zweites Register: Mono für alles Technische ---------- */
.eyebrow, .prob__n, .step__when, .step__dot, .ll__tag, .case dt, .badge,
.dg-label, .nav__tel, .case__fig, .quiz__verdict, .form__note .req {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.eyebrow { font-size: var(--t-mono); text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { width: 1.1rem; opacity: .7; }
.prob__n { font-size: var(--t-mono); color: var(--akzent); letter-spacing: .1em; }
.step__when { font-size: var(--t-mono); text-transform: none; color: var(--ink-2); }
.step__dot { font-size: var(--t-mono); }
.ll__tag { font-size: var(--t-mono); text-transform: none; }
.case dt { font-size: var(--t-mono); text-transform: uppercase; }
.badge { font-size: var(--t-mono); text-transform: uppercase; }
.case__fig { font-family: var(--mono); font-size: 1.25rem; letter-spacing: 0; }
.nav__tel { font-size: var(--t-mono); letter-spacing: .04em; }