/* =========================================================
   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 */
  --fehler: #A5342A;       /*  6,05:1, nur für Formularfehler */
  --linie: rgba(20, 24, 26, .15);
  --linie-stark: #85837B;  /*  3,42:1 */
  --auf-akzent: #FFFFFF;

  /* Die eine dunkle Fläche */
  --schiefer: #0E1416;
  /* Akzentschrift AUF der Schieferflaeche. Die Flaeche dreht beim Thema um,
     die feste Logofarbe darf es deshalb nicht sein. */
  --auf-schiefer-akzent: #7AB4C7;
  --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);
  /* Groesste Breite des Satzspiegels. Darueber wird zentriert, sonst klebt auf
     grossen Schirmen alles links und rechts bleiben zwei Drittel leer. */
  --seite: 100rem;
  --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(5.5rem, 3rem + 7vw, 10rem);

  /* 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 */
    --fehler: #F0A79E;     /*  9,49:1 */
    --linie: rgba(236, 239, 236, .18);
    --linie-stark: #646F6B;
    --auf-akzent: #0E1416;
    --schiefer: #F4F3EF;
    --auf-schiefer-akzent: #1A697F;   /* 5,62:1 auf hellem Papier */
    --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: 1.58;   /* Fliesstext. --lh-body war nie definiert, der Wert lief auf "normal" (rund 1,2). */
  color: var(--ink);
  background: var(--papier);
  font-variant-numeric: tabular-nums lining-nums;
}

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%; max-width: var(--seite); margin-inline: auto;
        padding-left: var(--satz); padding-right: var(--rand); }
.wrap > * { max-width: 82rem; }

/* Die Achse: eine Haarlinie, die zugleich linke Satzkante und Lesefortschritt ist. */
/* Die Achse benutzt dieselbe Zentrierung wie .wrap, damit sie auf jeder Breite
   exakt auf der Satzkante sitzt statt daneben. */
.achse { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 40; pointer-events: none;
         max-width: var(--seite); margin-inline: auto; }
.achse::before { content: ""; position: absolute; left: var(--achse); top: 0; bottom: 0; width: 1px; background: var(--linie); }
.achse::after {
  content: ""; position: absolute; left: var(--achse); 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; } }
.section { padding-block: var(--kapitel); }
.section > .wrap > * + * { margin-top: var(--s7); }
.mt-5 { margin-top: var(--s5); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--akzent); color: var(--auf-akzent); 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--light {
  background: transparent; color: var(--ink); border-color: var(--linie-stark);
}
.btn--ghost:hover, .btn--light:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px) scale(.988); transition-duration: 80ms; }

/* Reaktion auf den Druck, nicht auf das Loslassen. Alles, was man antippen kann,
   antwortet sofort; erst dadurch fuehlt sich die Seite direkt an. */
.opt, .qa summary, .mx-tab, .ct-way, .calltop, .ba__grip {
  transition: background-color 140ms var(--kurve), border-color 140ms var(--kurve),
              transform 110ms cubic-bezier(.2,.7,.3,1), color 140ms var(--kurve);
}
.opt:active, .mx-tab:active, .ct-way:active { transform: scale(.985); }
.qa summary:active { transform: scale(.994); }
.calltop:active { transform: scale(.96); }
.ba__grip:active { transform: translate(-50%, -50%) scale(1.12); }
.nav__link:active { opacity: .6; transition-duration: 60ms; }
/* auf der dunklen Beilage drehen sich die Rollen um */
.landlord .btn--ghost, .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) 88%, transparent);   /* 72 % liess den Text darunter durchscheinen */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: transparent;
}
/* Statt einer harten Trennlinie eine weiche Kante: dort, wo der Inhalt unter der
   schwebenden Leiste durchlaeuft, verlaeuft die Flaeche aus. */
.hdr.is-stuck::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--papier) 55%, transparent), transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}
@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); }
.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 {
    /* 100vw statt rechts:0. Die Kopfleiste bekommt beim Andocken einen
       backdrop-filter und wird dadurch zum Bezugsrahmen fuer fixierte Kinder,
       dann stimmte die Breite nicht mehr mit dem Bildschirm ueberein. */
    position: fixed; inset: 4.5rem auto auto 0; width: 100vw; max-width: 100vw;
    flex-direction: column; align-items: stretch; gap: 0;
    /* durchscheinendes Material: der Inhalt laeuft sichtbar darunter durch,
       statt von einer gleichfarbigen Platte verdeckt zu werden */
    background: color-mix(in srgb, var(--papier) 78%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
            backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 22px 44px -22px rgba(10, 26, 21, .32);
    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; }
/* Das Bildzeichen der Marke, gross und in Farbe statt als 13-Prozent-Geist in der
   Ecke. Die vier Dreiecke bewegen sich unabhaengig und sehr langsam, damit der
   Kopf der Seite lebt, ohne zu zappeln. Eine Maske nach links haelt es vom Text weg. */
.hero__mark {
  position: absolute; top: 50%; translate: 0 -50%;
  right: max(var(--rand), calc((100% - var(--seite)) / 2 + var(--rand)));
  width: min(48vw, 37rem); height: auto; opacity: .66;
  -webkit-mask-image: linear-gradient(100deg, transparent 2%, #000 34%);
          mask-image: linear-gradient(100deg, transparent 2%, #000 34%);
}
.hm { transform-origin: 50px 50px; }
.js .hm { opacity: 0; }

/* Der Wasch: nimmt dem Seitenanfang das reine Weiss, ohne Flaeche zu behaupten. */
.hero__wash {
  position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background:
    radial-gradient(58% 52% at 82% 14%, color-mix(in oklab, var(--z-links) 42%, transparent), transparent 70%),
    radial-gradient(46% 44% at 96% 62%, color-mix(in oklab, var(--z-rechts) 38%, transparent), transparent 72%),
    radial-gradient(70% 46% at 8% 96%, color-mix(in oklab, var(--akzent) 20%, transparent), transparent 74%);
}
.hero__glow { display: none; }
@media (max-width: 62rem) {
  /* Auf dem Handy rahmt das Zeichen von der Ecke her, statt unter der Ueberschrift
     zu liegen. */
  .hero__mark { width: min(64vw, 21rem); opacity: .5; top: 0; translate: 0 -26%;
    right: calc(var(--rand) * -0.7);
    -webkit-mask-image: linear-gradient(196deg, #000 24%, transparent 82%);
            mask-image: linear-gradient(196deg, #000 24%, transparent 82%); }
}

.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); }
/* Ü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) {
  }
}

/* ---------- 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-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: var(--auf-akzent); }   /* 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; }
/* Zwei Spalten erst ab 64rem: darunter halbiert sich jede SVG-Flaeche und die
   Gewerkenamen fallen auf zehn Pixel. Einspaltig sind es dort 18 Pixel. */
@media (min-width: 64rem) { .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 ---------- */
/* Nur fuer Screenreader: aus dem Bild, aber im Textfluss und im Zugaenglichkeitsbaum */
.nur-sr {
  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;
}

/* --- Leistungsmatrix ------------------------------------------------ */
.mx-wrap { margin-top: var(--s7); overflow-x: auto; overscroll-behavior-x: contain; }
.mx { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: .97rem; }
.mx th, .mx td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.mx thead th {
  font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--grau); text-align: center;
  border-bottom: 1px solid var(--linie-stark); padding-bottom: var(--s2);
  position: sticky; top: 0; background: var(--papier);
}
.mx thead th:first-child { text-align: left; padding-left: 0; }
.mx tbody th { font-weight: 400; text-align: left; color: var(--ink); padding-left: 0; padding-right: var(--s5); text-wrap: pretty; }
.mx td { text-align: center; width: 13%; }
/* 62 % statt 48 %: sonst steht zwischen Bezeichnung und Haken eine leere Bahn */
.mx thead th:first-child, .mx tbody th { width: 62%; }
.mx tbody tr { transition: background var(--zeit) var(--kurve); }
.mx tbody tr:hover th, .mx tbody tr:hover td { background: color-mix(in oklab, var(--akzent) 5%, transparent); }
.mx-mark {
  display: inline-block; width: .52em; height: .92em;
  border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent);
  transform: rotate(42deg) translateY(-.14em);
}
/* Der Punkt sagt "gilt hier nicht" und ist damit Inhalt, nicht Zierrat:
   er muss lesbar sein, auch wenn er dem Haken nachgeordnet bleibt. */
.mx-nein { color: var(--grau); }
.disclaim { margin-top: var(--s4); font-size: .9rem; color: var(--ink-2); max-width: 52ch; }

.mx-tabs { display: none; }
/* Die Ein-Spalten-Ansicht greift erst, wenn die volle Tabelle wirklich nicht mehr
   passt. Bis 960px liess sie den halben Satzspiegel leer stehen. */
@media (max-width: 49.99rem) {
  html.js .mx-tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s6); margin-bottom: calc(var(--s5) * -1); }
  html.js .mx { min-width: 0; }
  html.js .mx thead th:not(:first-child), html.js .mx td { display: none; }
  html.js .mx thead th.mx-an, html.js .mx td.mx-an { display: table-cell; }
  /* table-layout: fixed, sonst erzwingen lange Komposita wie
     "Modernisierungsankuendigung" eine Mindestbreite, die unter 366 px die
     Hakenspalte aus dem Bild schiebt. */
  html.js .mx { table-layout: fixed; }
  html.js .mx tbody th { width: auto; padding-right: var(--s4); hyphens: auto; overflow-wrap: break-word; }
  html.js .mx td { width: 3.5rem; }
  html.js .mx thead th:first-child { hyphens: auto; }
  /* Zeilen, die fuer die gewaehlte Spalte nicht gelten, treten zurueck statt zu verschwinden */
  html.js .mx tr.mx-aus th { opacity: .42; }
  html.js .mx-wrap { overflow-x: visible; }
}
.mx-tab {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  padding: var(--s2) var(--s3); min-height: 40px; background: none; color: var(--ink-2);
  border: 1px solid var(--linie); border-radius: var(--r); cursor: pointer;
  transition: color var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve);
}
.mx-tab[aria-pressed="true"] { color: var(--auf-akzent); background: var(--akzent); border-color: var(--akzent); }

/* ---------- 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);
}
/* bis zur naechsten Ziffer durchziehen: die Polsterung des Schritts gehoert zur Strecke */
.step__ln { flex: 1; width: 1px; background: var(--linie); margin-top: .5rem;
  margin-bottom: calc(clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem) * -1); }
.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);
  /* beginnt rechts der Achse, überquert sie nie, und laeuft auf grossen Schirmen
     nicht ueber die Spalte hinaus */
  margin-left: calc(max(0px, (100% - var(--seite)) / 2) + var(--achse));
  margin-right: max(0px, calc((100% - var(--seite)) / 2));
  padding-left: clamp(1.25rem, 2.4vw, 2.75rem);
}
.landlord .wrap { padding-left: 0; }
.landlord .eyebrow { color: var(--auf-schiefer-akzent); }
.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);
  /* Rasterkinder haben min-width: auto und werden damit von langen Komposita
     breiter gedrueckt als ihre Spur. Bei 320 px lief die Karte 21 px ueber. */
  min-width: 0; hyphens: auto; overflow-wrap: break-word;
}
.ll__tag { font-size: .74rem; font-weight: 640; letter-spacing: .06em; color: var(--auf-schiefer-akzent); }  /* 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; } }
/* vier Punkte: zwei mal zwei, sonst bleibt in der dritten Spalte ein leeres Feld stehen */
@media (min-width: 1060px) { .why { grid-template-columns: 1fr 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; margin-top: .1rem; 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);
  min-height: 3rem;   /* select rechnete die Hoehe anders als input */
}
.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; }

/* Eigene Fehlermeldungen statt der Browser-Blase: sie bleiben stehen, werden
   vom Screenreader über aria-describedby vorgelesen und zeigen alle Fehler
   gleichzeitig. Farbe ist nie das einzige Signal, es gibt Text und Symbol. */
.fld__error, .consent__error {
  font-size: .84rem; line-height: 1.45; color: var(--fehler);
  display: flex; gap: .4rem; align-items: baseline;
}
.fld__error::before, .consent__error::before { content: "!"; font-weight: 700; flex: none; }
.fld[data-invalid="true"] input,
.fld[data-invalid="true"] select,
.fld[data-invalid="true"] textarea { border-color: var(--fehler); }
.fld[data-invalid="true"] input:focus,
.fld[data-invalid="true"] select:focus,
.fld[data-invalid="true"] textarea:focus { outline-color: var(--fehler); }
.consent[data-invalid="true"] { color: var(--fehler); }
.consent[data-invalid="true"] input { outline: 2px solid var(--fehler); outline-offset: 2px; }
.consent { flex-wrap: wrap; }
.consent__error { flex-basis: 100%; }
.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); }

/* ---------- 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; }

@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 { transform: none; }
}

@media print {
  /* Browser drucken Flaechen standardmaessig nicht. Wuerden nur die Flaechen
     wegfallen und die Farben bleiben, verschwaenden ganze Abschnitte in Weiss.
     Deshalb hier die Tokens selbst auf Papier stellen. */
  :root {
    --papier: #fff; --blatt: #fff; --schiefer: #fff;
    --ink: #000; --ink-2: #333; --grau: #444;
    --auf-dunkel: #000; --auf-dunkel-2: #333; --auf-akzent: #000;
    --auf-schiefer-akzent: #000; --akzent: #000; --akzent-tief: #000; --link: #000;
    --linie: #bbb; --linie-stark: #666;
  }
  .hdr, .burger, .hero__bg, .hero__glow, .btn, .totop, .calltop, .achse, .bd { display: none !important; }
  body { color: #000; background: #fff; }
  /* Ausklappbares aufgeklappt drucken, sonst fehlt der halbe Inhalt */
  .qa__wrap { grid-template-rows: 1fr !important; }
  .qa__a { overflow: visible !important; }
  details::details-content { content-visibility: visible !important; block-size: auto !important; }
  .band__buehne { height: auto !important; }
  .mx-wrap { overflow: visible !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

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

/* ---- Lesefortschritt im Header ---- */
.hdr__prog {
  /* laeuft von der Satzkante, nicht vom Bildschirmrand: auf breiten Schirmen
     haengt er sonst als Stummel im leeren Rand */
  position: absolute; bottom: -1px; height: 2px;
  left: calc(max(0px, (100% - var(--seite)) / 2) + var(--achse));
  right: max(0px, calc((100% - var(--seite)) / 2 + var(--rand)));
  width: auto;
  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; }

/* ---- Bewegung im Bildzeichen ---------------------------------------------- */
@keyframes hm-ein   { from { opacity: 0; transform: scale(.86) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes hm-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-1.6%, 1.2%) scale(1.035); } }
@keyframes hm-drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(1.4%, -1.6%) scale(1.05); } }
@keyframes hm-drift-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-1.1%, -1.3%) scale(1.028); } }
@keyframes hm-drift-d { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(1.8%, 1.5%) scale(1.06); } }

.js .hm-a { animation: hm-ein .9s var(--kurve)  .10s both, hm-drift-a 23s ease-in-out 1.2s infinite; }
.js .hm-b { animation: hm-ein .9s var(--kurve)  .22s both, hm-drift-b 29s ease-in-out 1.4s infinite; }
.js .hm-c { animation: hm-ein .9s var(--kurve)  .34s both, hm-drift-c 26s ease-in-out 1.6s infinite; }
.js .hm-d { animation: hm-ein .9s var(--kurve)  .46s both, hm-drift-d 33s ease-in-out 1.8s infinite; }

/* ---- 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));
}

/* Auf schmalen Geraeten faellt der Unterschied zwischen Satzachse und Aussenrand
   nicht mehr als Gestaltung auf, sondern als schiefer Satz. Dort beide gleich. */
@media (max-width: 48rem) {
  .wrap { padding-left: var(--rand); padding-right: var(--rand); }
  .landlord { margin-left: 0; }
  .landlord .wrap { padding-left: var(--rand); }
  .band--naht figcaption { padding-left: var(--rand); }
}

/* ---- Schwebender Termin-Knopf ----------------------------------------------
   Vorher lagen zwei fixierte Knoepfe frei ueber dem Satzspiegel und deckten
   Fliesstext, Kartentexte und in der Fusszeile das Wort "Datenschutz" zu.
   Jetzt: auf dem Handy eine angedockte Leiste, die nichts ueberlagert, weil die
   Seite unten Platz dafuer freihaelt. Auf grossen Schirmen gar kein schwebender
   Knopf mehr, dort steht der Termin dauerhaft in der klebenden Kopfleiste. */
.calltop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1rem; border: 0; border-top: 1px solid var(--akzent-tief);
  background: var(--akzent); color: var(--auf-akzent); text-decoration: none;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  box-shadow: 0 -12px 34px -14px rgba(10, 26, 21, .4);
  opacity: 0; visibility: hidden; transform: translateY(100%);
  transition: opacity var(--zeit-lang) var(--kurve), transform var(--zeit-lang) var(--kurve), visibility var(--zeit-lang);
}
.calltop svg { width: 1.15rem; height: 1.15rem; flex: none; }
.calltop.is-on { opacity: 1; visibility: visible; transform: none; }
.calltop:active { transform: translateY(2px); }

@media (max-width: 900px) {
  .calltop { display: flex; }
  /* Platz fuer die Leiste, damit sie nie auf dem letzten Inhalt liegt */
  body { padding-bottom: 3.9rem; }
  .calltop__sr { display: none; }
}
@media (min-width: 901px) {
  .calltop, .totop { display: none; }
}

/* ---- 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: var(--auf-akzent); 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); }

.ct-vorb { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--linie); max-width: 34ch; }
.ct-vorb ul { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.ct-vorb li { position: relative; padding-left: 1.15rem; margin-top: var(--s2); font-size: .95rem; color: var(--ink-2); }
.ct-vorb li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--akzent); }
.ct-vorb > p:last-child { margin-top: var(--s4); font-size: .88rem; color: var(--grau); }

/* Wer Transparenz oder mehr Kontrast eingestellt hat, bekommt feste Flaechen.
   Reduzierte Bewegung ist weiter unten eigens geregelt. */
@media (prefers-reduced-transparency: reduce) {
  .hdr.is-stuck, .nav, .calltop, .ba__tag, .band__marke--links {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .hdr.is-stuck { background: var(--papier); border-bottom-color: var(--linie); }
  .hdr.is-stuck::after { display: none; }
  .nav { background: var(--papier); }
  .band__marke--links { background: var(--schiefer); }
}
@media (prefers-contrast: more) {
  .hdr.is-stuck { background: var(--papier); border-bottom: 1px solid var(--ink); }
  .hdr.is-stuck::after { display: none; }
  .nav { background: var(--papier); border-bottom-color: var(--ink); }
  .card, .why > div, .mx th, .mx td { border-color: var(--linie-stark); }
  .band__marke--links { background: #0E1416; }
}

.quiz__nav { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s5); }
.quiz__vor:disabled { opacity: .45; cursor: not-allowed; }
.quiz__vor:disabled:hover { background: var(--akzent); }
/* Der Fokus wandert beim Weiterschalten auf das Fragefeld, damit die Frage
   vorgelesen wird. Ein Rahmen darum waere dabei nur Rauschen. */
.quiz__step fieldset:focus { outline: none; }
.quiz__step fieldset:focus-visible { outline: 2px solid var(--akzent); outline-offset: 6px; }

/* ---- Bildbänder ---- */
.band { margin: 0; position: relative; overflow: hidden; background: var(--papier); }
.band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 3.6rem clamp(1.1rem, 2.4vw, 2rem) 1.15rem;
  /* 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; }
/* Der Verlauf läuft über die ganze Bildbreite, der Satz hört vorher auf:
   sonst stünde die Zeile über 90 Zeichen breit unter dem Foto. */
.band figcaption span { display: block; max-width: 58ch; }

/* ---- Bildband mit Naht: halb Bestand, halb fertig ---- */
/* Die Naht sitzt im Standbild bei 49,6 % der Bildbreite, am Ende der Kamerafahrt bei 47,3 %.
   Beides steckt in --naht, die Beschriftungen haengen daran und wandern mit.
   Beschnitten werden darf deshalb nur oben und unten: das Seitenverhaeltnis der Buehne
   ist immer breiter als das des Bildes, damit cover nie seitlich kappt. */
.band--naht { --naht: 49.6%; }
.band--naht.film-fertig { --naht: 47.3%; }

/* Ab Tablet steht das Bild in derselben Spalte wie der Text statt randlos:
   randlos war es auf grossen Schirmen das einzige ueberbreite Element und
   sprengte die Satzkante. Auf dem Telefon bleibt es randlos, dort traegt das. */
@media (min-width: 48.01rem) {
  .band--naht {
    margin-left:  calc(max(0px, (100% - var(--seite)) / 2) + var(--satz));
    margin-right: calc(max(0px, (100% - var(--seite)) / 2) + var(--rand));
    /* Randlos stiess das Foto direkt an den dunklen Vermieter-Block, was als
       ganzseitiger Schnitt gelesen wurde. Eingerueckt braucht es darunter
       Papier, sonst wirkt der dunkle Block wie ein Beschnitt des Fotos. */
    margin-bottom: var(--s8);
  }
}

/* Das Bild gibt die Hoehe vor: kein Beschnitt, keine Balken, und die Naht
   bleibt bei ihrem Prozentwert. Durch die Spaltenbreite wird es nie zu hoch. */
.band--naht .band__buehne {
  position: relative; width: 100%; overflow: hidden; background: var(--schiefer);
  /* eigener Stapelkontext: Naht und Marken bleiben drinnen, die Bildunterschrift
     liegt darueber statt sich mit der Ebene des transformierten Bildes zu streiten */
  isolation: isolate;
}
.band--naht .band__still { display: block; }
.band--naht .band__still img { display: block; width: 100%; height: auto; max-width: none; }
.band--naht .band__film {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  /* Der Film liegt ueber dem Standbild und blendet erst auf, wenn er wirklich
     laeuft. Ohne das steht dort waehrend des Ladens eine leere Flaeche. */
  opacity: 0; transition: opacity .45s linear;
}
.band--naht .band__film.laeuft { opacity: 1; }

.band--naht .band__naht {
  position: absolute; left: var(--naht); top: 0; bottom: 0; width: 1px; z-index: 2;
  background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.34));
  box-shadow: 0 0 0 .5px rgba(10,26,21,.4);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .15s, left .5s var(--kurve);
}
.band--naht.is-in .band__naht { transform: scaleY(1); }

.band--naht .band__marke {
  position: absolute; top: 7.5%; z-index: 3; margin: 0; white-space: nowrap;
  font-family: var(--mono); font-size: clamp(.55rem, .3rem + .6vw, .74rem);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  padding: .45em .72em; border-radius: var(--r);
  opacity: 0; transform: translateY(.5rem);
  transition: opacity .7s var(--kurve), transform .7s var(--kurve), left .5s var(--kurve), right .5s var(--kurve);
}
.band--naht.is-in .band__marke { opacity: 1; transform: translateY(0); }
.band--naht .band__marke--links {
  right: calc(100% - var(--naht) + .9rem); transition-delay: .55s;
  background: rgba(14,20,22,.84); color: #EDF0ED;
}
.band--naht .band__marke--rechts {
  left: calc(var(--naht) + .9rem); transition-delay: .8s;
  background: var(--akzent); color: var(--auf-akzent);
  /* darf nie ueber den rechten Bildrand hinauslaufen, notfalls zweizeilig */
  max-width: calc(100% - var(--naht) - 1.8rem); white-space: normal; text-align: left;
}

/* Solange die Kamerafahrt laeuft, waere die Beschriftung an der falschen Stelle:
   sie kommt erst, wenn das Bild steht. */
.band--naht.hat-film .band__naht  { transform: scaleY(0); transition-delay: 0s; }
.band--naht.hat-film .band__marke { opacity: 0; transform: translateY(.5rem); transition-delay: 0s; }
.band--naht.hat-film.film-fertig .band__naht  { transform: scaleY(1); transition-delay: .1s; }
.band--naht.hat-film.film-fertig .band__marke { opacity: 1; transform: translateY(0); }
.band--naht.hat-film.film-fertig .band__marke--links  { transition-delay: .5s; }
.band--naht.hat-film.film-fertig .band__marke--rechts { transition-delay: .7s; }

@media (max-width: 34rem) {
  .band--naht .band__marke--rechts { font-size: .5rem; letter-spacing: .05em; }
  .band--naht .band__marke--links, .band--naht .band__marke--rechts { padding: .4em .55em; }
}

/* Solange das Band randlos laeuft, deckt eine eingeblendete Bildunterschrift das
   halbe Foto zu. Dort steht sie deshalb darunter, auf Papier statt auf dem Bild.
   Die Grenze ist genau die des Satzspiegels weiter unten (max-width: 48rem), das
   Einruecken oben beginnt erst darueber. Sonst haette bei genau 48rem das Band
   schon den breiten, der Text noch den schmalen Rand. */
@media (max-width: 48rem) {
  .band--naht figcaption {
    position: static; padding: var(--s4) var(--rand) var(--s6) var(--satz);
    background: none; color: var(--ink-2); text-shadow: none; font-size: .84rem;
  }
  .band--naht figcaption b { color: var(--ink); }
}

/* ---- 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: var(--r); overflow: hidden; margin-bottom: var(--s6); }
/* scaleX statt width: der Balken bewegt sich im Compositor und loest kein Layout aus */
.quiz__bar span { display: block; height: 100%; width: 100%; background: var(--akzent);
  transform: scaleX(0); transform-origin: left; transition: transform .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(--akzent);  border: 1px solid rgba(120,169,125,.42); }
.quiz__verdict.evtl { background: rgba(122,180,199,.16); color: var(--link);    border: 1px solid rgba(122,180,199,.4); }
.quiz__verdict.nein { background: rgba(244,246,244,.09); color: var(--ink-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); }
@media (prefers-reduced-motion: reduce) { .qa__wrap { transition: none; } }
.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:not(.band--naht) img { transform: none !important; }
  .band--naht .band__naht { transform: scaleY(1) !important; transition: none; }
  .band--naht .band__marke { opacity: 1 !important; transform: none !important; transition: none; }
  .quiz__step.is-on { animation: none; }
  .hero__bg svg, .hero__glow { transform: none !important; }
  .js .hm { animation: none !important; opacity: 1 !important; 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,
.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; }

/* ============ 12) Paderborn-Seite ============ */
/* Fotoband. Folgt .band: Unterschrift liegt IM Bild, gleicher Verlauf, gleicher Satz.
   Eine Zeile darunter waere ein Fremdkoerper zwischen zwei Kapiteln. */
.fotoband { margin: 0; position: relative; overflow: hidden; background: var(--papier); }
.fotoband img {
  display: block; width: 100%;
  height: clamp(17rem, 46vw, 36rem);
  object-fit: cover; object-position: center;
}
/* Der Domturm sitzt im oberen Bilddrittel: mittiger Ausschnitt kappt die Spitze,
   ein zu hoher Ausschnitt verliert den Marktplatz. */
.fotoband--dom img { object-position: center 25%; }
/* Die Pader liegt schon als Panorama vor: flacher halten, sonst beschneidet
   cover sie seitlich statt oben und unten. */
.fotoband--pader img { height: clamp(14rem, 34vw, 26rem); }
.fotoband figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 3.6rem clamp(1.1rem, 2.4vw, 2rem) 1.15rem;
  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);
}
.fotoband figcaption b { font-weight: 600; }
.fotoband figcaption > span { display: block; max-width: 58ch; }
.fotoband .nachweis { margin-top: .3rem; font-size: .72rem; opacity: .72; }
.fotoband .nachweis a { color: inherit; text-underline-offset: .18em; }

/* Orte. Keine Kacheln: die Site arbeitet auf Dunkel mit Linien, nicht mit Flaechen.
   --blatt waere im Hellmodus reines Weiss und damit ein Fremdkoerper auf Schiefer. */
.orte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 0 clamp(1.5rem, 2.6vw, 3rem);
  /* --linie ist fest hell und verschwindet, sobald die Schieferflaeche im
     dunklen Thema auf hell dreht. Diese Linie dreht mit der Schriftfarbe mit. */
  --orte-linie: color-mix(in srgb, var(--auf-dunkel) 22%, transparent);
  border-bottom: 1px solid var(--orte-linie);
}
.orte li { padding: .68rem 0 .74rem; border-top: 1px solid var(--orte-linie); }
.orte li b { display: block; font-weight: 600; font-size: .95rem; color: var(--auf-dunkel); }
.orte li span { display: block; margin-top: .12rem; font-size: .78rem; color: var(--auf-dunkel-2); }
.orte-titel {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--auf-schiefer-akzent);
}

/* Faktenkasten. Uebernimmt die Kartenoptik der dunklen Sektion (.ll). */
.fakten {
  background: color-mix(in srgb, var(--auf-dunkel) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--auf-dunkel) 20%, transparent);
  border-radius: var(--r);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.1rem);
}
.fakten h3 { color: var(--auf-dunkel); font-size: 1.02rem; }
.fakten dl { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.8rem; margin: var(--s5) 0 0; }
.fakten dt { font-weight: 600; color: var(--auf-dunkel); }
.fakten dd { margin: 0; color: var(--auf-dunkel-2); max-width: 62ch; }
@media (max-width: 40rem) {
  .fakten dl { grid-template-columns: 1fr; gap: .15rem; }
  .fakten dd { margin-bottom: .7rem; }
}

/* Rhythmus. Die Grundregel .section > .wrap > * + * setzt pauschal --s7 und
   gewinnt gegen einfache Klassen. Titel und sein Raster gehoeren aber eng
   zusammen, zwischen den Gruppen soll Luft sein. */
.section > .wrap > .orte-titel { margin-top: var(--s8); }
.section > .wrap > .sec-head + .orte-titel { margin-top: 0; }
.section > .wrap > .orte { margin-top: var(--s4); }
.section > .wrap > .owl-zeile { margin-top: var(--s8); }
.section > .wrap > .fakten { margin-top: var(--s8); }
.owl-zeile { max-width: 58ch; }

/* Stadt-Silhouette im Kopf: Abdinghof, Dom, Langhaus, Rathausgiebel. */
.hero__sky { position: absolute; right: clamp(-3rem, -1vw, 1rem); bottom: -2px; width: min(78vw, 46rem); height: auto; opacity: .5; }
@media (prefers-color-scheme: dark) { .hero__sky { opacity: .3; } }
@media (max-width: 48rem) { .hero__sky { width: 30rem; right: -7rem; opacity: .35; } }
/* Ortsteil-Luftbild liegt als flaches Panorama vor (3,25:1). */
.fotoband--dahl img { height: clamp(12rem, 30vw, 23rem); object-position: center 55%; }

/* Praxis-Galerie: drei Hochformate nebeneinander, Unterschrift unter dem Bild. */
.galerie { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
@media (min-width: 55rem) { .galerie { grid-template-columns: repeat(2, 1fr); } }
.gal { margin: 0; }
.gal img { display: block; width: 100%; height: auto; border-radius: var(--r); background: var(--linie); }
.gal figcaption { margin-top: var(--s4); font-size: .95rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.gal figcaption b { font-weight: 600; color: var(--ink); }
.section > .wrap > .galerie { margin-top: var(--s6); }