/* =========================================================
   Ingenieurbüro Memic
   Farbwelt „Rotstift": Die Seite sieht aus wie ein sauberer
   Ausführungsplan — Papier, Tusche, feine Linien. Das einzige Rot
   ist der Rotstift des Statikers: Bemaßung, Lasten, Momentenlinie,
   ein Wort in der Überschrift, der Hover auf Knöpfen.
   ========================================================= */

/* Schriften lokal, keine Verbindung zu Google (LG München I,
   Urteil vom 20.01.2022). Inter Tight steht unter der SIL Open Font License 1.1. */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nur für Sonderzeichen wie das č in Gračanica — lädt der Browser
   erst, wenn so ein Zeichen tatsächlich auf der Seite steht. */
/* Aus der vollen latin-ext-Datei (88 KB) auf die Zeichen verkleinert, die hier
   wirklich vorkommen: die bosnisch-kroatischen Buchstaben in Namen wie Gračanica.
   Neu bauen mit  Desktop/Memic/schrift-subset.mjs  (npm-Paket subset-font). */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-ext-teil.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E;
}

:root {
  /* Papier & Tusche */
  --papier: #f2f1ed;
  --papier-2: #e8e6e0;
  --weiss: #fbfaf7;
  --tusche: #131313;
  --tusche-2: #3a3936;
  --grau: #64625d;        /* Fließtext zweitrangig: 5,4:1 auf --papier (AA) */
  --grau-2: #85827b;      /* nur große Schrift ab 24 px: 3,4:1 (AA groß) */
  --linie: #d6d3cb;
  --linie-2: #bdb9af;
  --schnitt: #dcd9d1;     /* geschnittene Bauteile in den Zeichnungen */

  /* Dunkle Blöcke */
  --beton: #161615;
  --beton-2: #22211f;
  --auf-beton: #ecebe6;
  --auf-beton-grau: #a3a099; /* 7:1 auf --beton */
  --linie-dunkel: #3a3935;

  /* Rotstift */
  --rot: #c7361f;         /* 4,7:1 auf --papier — für Grafik und große Schrift */
  --rot-text: #bb3019;    /* 4,7:1 auch auf dem grauen --papier-2, für kleine rote Schrift */
  --rot-dunkel: #a82a15;
  --rot-hell: #ef6a52;    /* für Schrift auf --beton: 5,3:1 */
  --rot-zart: rgba(199, 54, 31, .12);

  --sans: "Inter Tight", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  /* Technische Beschriftung: dieselbe Grotesk wie der Text, aber mit
     Tabellenziffern. Die frühere Schreibmaschinenschrift wirkte klein grob. */
  --etikett: "Inter Tight", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  --h1: clamp(2.7rem, 1.2rem + 5.6vw, 6.6rem);
  --h2: clamp(2.05rem, 1.25rem + 3.1vw, 4.1rem);
  --h3: clamp(1.3rem, 1.12rem + .75vw, 1.8rem);
  --gross: clamp(1.55rem, .95rem + 2.5vw, 3.25rem);
  --lead: clamp(1.06rem, 1rem + .3vw, 1.25rem);

  --shell: 1320px;
  --pad-x: clamp(1.15rem, .55rem + 2.5vw, 2.75rem);
  --sec-y: clamp(4.5rem, 2.8rem + 6.5vw, 9.5rem);
  --kopf-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-zeichnen: cubic-bezier(.65, 0, .35, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 12px);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tusche);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: -.003em;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
::selection { background: var(--rot); color: #fff; }

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

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--pad-x));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.shell--schmal { max-width: calc(860px + 2 * var(--pad-x)); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--tusche);
  color: var(--papier);
  padding: .8rem 1.2rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

.etikett {
  font-family: var(--etikett);
  font-size: .8125rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.rot { color: var(--rot); }

/* Abschnittsmarke wie ein Planstempel: [01] Leistungen ———— */
.marke {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3.5rem);
  font-family: var(--etikett);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grau);
}
.marke b { color: var(--tusche); font-weight: 500; }
.marke::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie-2);
}
.dunkel .marke { color: var(--auf-beton-grau); }
.dunkel .marke b { color: var(--auf-beton); }
.dunkel .marke::after { background: var(--linie-dunkel); }

.zweiton { color: var(--grau-2); }
.dunkel .zweiton { color: var(--auf-beton-grau); }

/* ---------------------------------------------------------
   Knöpfe — Pille mit Pfeilkreis
   --------------------------------------------------------- */
.btn {
  --btn-bg: var(--tusche);
  --btn-fg: var(--papier);
  --btn-kreis: var(--papier);
  --btn-pfeil: var(--tusche);
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  min-height: 3.1rem;
  padding: .35rem .4rem .35rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn__pfeil {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--btn-kreis);
  color: var(--btn-pfeil);
  transition: transform .35s var(--ease), background-color .25s, color .25s;
}
.btn__pfeil svg { width: 14px; height: 14px; }
.btn:hover { --btn-bg: var(--rot); --btn-fg: #fff; --btn-kreis: #fff; --btn-pfeil: var(--rot); }
.btn:hover .btn__pfeil { transform: translateX(3px) rotate(-45deg); }

.btn--linie {
  --btn-bg: transparent;
  --btn-fg: var(--tusche);
  --btn-kreis: var(--tusche);
  --btn-pfeil: var(--papier);
  border-color: var(--linie-2);
}
.btn--linie:hover { --btn-bg: var(--tusche); --btn-fg: var(--papier); --btn-kreis: var(--papier); --btn-pfeil: var(--tusche); border-color: var(--tusche); }

.btn--hell { --btn-bg: var(--auf-beton); --btn-fg: var(--tusche); --btn-kreis: var(--tusche); --btn-pfeil: var(--auf-beton); }
.btn--ohne-pfeil { padding-right: 1.35rem; }

/* ---------------------------------------------------------
   Kopfleiste
   --------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 241, 237, .86);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.kopf.is-stuck { border-bottom-color: var(--linie); }
.kopf__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .5rem + 2vw, 2.5rem);
  min-height: 76px;
}

.marke-logo {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  flex-shrink: 0;
}
.marke-logo svg { width: 36px; height: auto; }
.marke-logo__text { display: grid; line-height: 1.15; }
/* Schriftzug wie auf dem Logo: Versalien, MEMIC fett, rote Linie, gesperrte Unterzeile. */
.marke-logo__name { font-weight: 500; font-size: .92rem; letter-spacing: .015em; text-transform: uppercase; }
.marke-logo__name b { font-weight: 700; }
.marke-logo__zusatz {
  position: relative;
  margin-top: .28rem;
  padding-top: .3rem;
  font-size: .575rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grau);
}
.marke-logo__zusatz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--rot);
}

.nav { margin-left: auto; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, .3rem + 1.4vw, 2rem);
  list-style: none;
}
.nav__liste a {
  position: relative;
  display: inline-block;
  padding: .5rem 0;
  font-size: .95rem;
  white-space: nowrap;   /* „Das Büro" sonst zweizeilig, sobald es eng wird */
  text-decoration: none;
  color: var(--tusche-2);
}
.nav__liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .25rem;
  height: 1.5px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__liste a:hover, .nav__liste a.is-active { color: var(--tusche); }
.nav__liste a:hover::after, .nav__liste a.is-active::after { transform: scaleX(1); }

/* Die Nummer als rote Pille, gebaut wie „Anfrage": Symbol im weißen Kreis
   (Bilal, 14.09.2026 — Variante B aus drei Entwürfen, gegen Umriss und
   Umriss mit rotem Kreis). */
.kopf__tel {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  padding: .35rem 1.25rem .35rem .4rem;
  border-radius: 999px;
  background: var(--rot);
  color: #fff;
  font-family: var(--etikett);
  font-size: .95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.kopf__tel svg {
  /* Ohne das drückt die enge Kopfleiste knapp über 1080 px den Kreis zum Oval. */
  flex-shrink: 0;
  box-sizing: content-box;
  width: 15px;
  height: 15px;
  padding: .53rem;
  border-radius: 50%;
  background: #fff;
  color: var(--rot);
  transition: background-color .25s, color .25s;
}
/* Beim Überfahren schwarz wie die roten Knöpfe im Formular. */
.kopf__tel:hover { background: var(--tusche); color: var(--papier); }
.kopf__tel:hover svg { background: var(--papier); color: var(--tusche); }
.kopf .btn { min-height: 2.75rem; }
.kopf .btn__pfeil { width: 2rem; height: 2rem; }
/* Die rote Nummernpille ist 56 px breiter als die frühere Textnummer. Knapp
   über 1080 px lief die Kopfleiste damit 6 px über den Rand, und das Menü
   wurde gestaucht — dort rücken Logo, Menü, Nummer und Anfrage enger.
   Allein das ließ bei 1081 px keinen Pixel Luft; Safari (iPads quer:
   1133–1194 px) setzt Schrift etwas breiter, daher auch die Menüpunkte. */
/* Sieben Menüpunkte passen zwischen 901 und 1240 px nur mit engeren Abständen
   in eine Zeile — darunter übernimmt das Burger-Menü, darüber ist Platz genug.
   Das Menü darf nie umbrechen, sonst wächst die Kopfleiste auf zwei Zeilen. */
.nav__liste { flex-wrap: nowrap; }
@media (min-width: 901px) and (max-width: 1240px) {
  .nav__liste { gap: .85rem; }
  .nav__liste a { font-size: .9rem; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .kopf__in { gap: 1rem; }
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--linie-2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--tusche);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 1080px) {
  .kopf__tel { display: none; }
}

@media (max-width: 900px) {
  /* Kein backdrop-filter am Handy: Er macht die Kopfleiste zum Bezugsrahmen
     für position: fixed — das Menü wäre dann nur so hoch wie die Leiste
     selbst und damit unsichtbar. */
  .kopf { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .burger { display: block; }
  .kopf .kopf__cta { display: none; }
  .nav {
    position: fixed;
    inset: var(--kopf-h) 0 0 0;
    z-index: 49;
    margin: 0;
    padding: 1.5rem var(--pad-x) 2rem;
    background: var(--papier);
    border-top: 1px solid var(--linie);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste li { border-bottom: 1px solid var(--linie); }
  .nav__liste a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 0;
    font-size: clamp(1.7rem, 1.2rem + 3vw, 2.4rem);
    letter-spacing: -.03em;
    color: var(--tusche);
  }
  .nav__liste a::after { display: none; }
  .nav__fuss { display: grid; gap: .8rem; margin-top: 2rem; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 901px) {
  .nav__fuss { display: none; }
}

/* ---------------------------------------------------------
   Zeichnungen — gemeinsame Regeln
   Linienstärken wie im Plan: fein / mittel / breit. Mit
   non-scaling-stroke bleiben sie in jeder Größe gleich dick.
   --------------------------------------------------------- */
.zeichnung { width: 100%; height: auto; overflow: visible; }
.zeichnung * { vector-effect: non-scaling-stroke; }
.zeichnung .s, .zeichnung .f { fill: none; stroke: var(--tusche); stroke-width: 1.2; stroke-linecap: butt; stroke-linejoin: miter; }
.zeichnung .d0 { stroke: var(--grau-2); stroke-width: .6; }
.zeichnung .d1 { stroke: var(--tusche-2); stroke-width: .9; }
.zeichnung .d2 { stroke-width: 1.5; }
.zeichnung .d3 { stroke-width: 2.4; }
.zeichnung .schnitt { fill: var(--schnitt); }
.zeichnung .voll { fill: var(--tusche); stroke: none; }
.zeichnung .achse { stroke: var(--grau-2); stroke-width: .7; stroke-dasharray: 16 4 2 4; }
.zeichnung .rs { stroke: var(--rot); }
.zeichnung .rf { fill: var(--rot); stroke: none; }
.zeichnung .rflaeche { fill: var(--rot-zart); stroke: var(--rot); stroke-width: 1.2; }
.zeichnung .erde { stroke: var(--grau-2); stroke-width: .7; }
.zeichnung text {
  font-family: var(--etikett);
  font-size: 12px;
  fill: var(--grau);
  stroke: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* Große Blätter werden kleiner dargestellt, als sie gezeichnet sind —
   dort die Beschriftung anheben, damit sie am Bildschirm lesbar bleibt. */
.held__plan .zeichnung text, .lastpfad__plan .zeichnung text { font-size: 15px; }
.zeichnung text.rt { fill: var(--rot); }
.zeichnung text.tt { fill: var(--tusche); font-weight: 500; }
.zeichnung .blase { fill: var(--weiss); stroke: var(--grau-2); stroke-width: .8; }

/* Das Zeichnen selbst: main.js setzt Strichlänge und Verzögerung
   und schaltet .zeichnen-an erst ein, wenn es auch wieder
   aufdecken kann. Ohne JavaScript steht die Zeichnung einfach da. */
.zeichnen-an .zeichnung .f { opacity: 0; transition: opacity .9s var(--ease); }
.zeichnen-an .zeichnung .schnitt { fill-opacity: 0; transition: fill-opacity .9s var(--ease) 1s; }
.zeichnen-an .zeichnung.is-gezeichnet .f { opacity: 1; }
.zeichnen-an .zeichnung.is-gezeichnet .schnitt { fill-opacity: 1; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.held { padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0 0; }
.held__in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: center;
}
.held__text { min-width: 0; }
.held h1 { display: grid; gap: clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.held__zeile {
  display: block;
  font-size: var(--h1);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 500;
}
.held__zeile .rot { font-style: normal; }
.held__unter {
  display: block;
  max-width: 30ch;
  font-size: clamp(1.35rem, 1rem + 1.35vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 450;
}
.held__lead--zwei { margin-top: .9rem; }
.held__lead {
  max-width: 46ch;
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.4rem) 0 0;
  font-size: var(--lead);
  color: var(--grau);
}
.held__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Planblatt mit Millimeterpapier, Kopfzeile und Schriftfeld */
.plan {
  position: relative;
  margin: 0;
  background-color: var(--weiss);
  background-image:
    linear-gradient(rgba(19, 19, 19, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 19, 19, .035) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--linie-2);
}
.plan__kopf {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--linie);
  color: var(--grau);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.plan__bild { padding: clamp(1rem, .5rem + 2vw, 2rem) clamp(.75rem, .3rem + 1.5vw, 1.75rem) .5rem; }
.held__plan .zeichnung { max-height: min(62vh, 640px); margin-inline: auto; }

.schriftfeld {
  display: grid;
  grid-template-columns: 1.3fr 1fr .6fr;
  margin: 0;
  border-top: 1px solid var(--linie-2);
}
.schriftfeld div {
  padding: .55rem .9rem .6rem;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  min-width: 0;
}
.schriftfeld div:nth-child(3n) { border-right: 0; }
.schriftfeld div:nth-last-child(-n+3) { border-bottom: 0; }
.schriftfeld dt {
  font-family: var(--etikett);
  font-size: .66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grau);
}
.schriftfeld dd {
  margin: .1rem 0 0;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.schriftfeld dd.etikett { font-size: .86rem; font-weight: 500; }

/* Faktenleiste unter dem Hero */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(3rem, 2rem + 3vw, 5rem) 0 0;
  border-top: 1px solid var(--linie-2);
  list-style: none;
}
.fakten li {
  padding: 1.4rem 1.2rem 1.6rem 0;
  border-right: 1px solid var(--linie);
}
.fakten li + li { padding-left: 1.4rem; }
.fakten li:last-child { border-right: 0; }
.fakten__zahl {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 450;
}
.fakten__zahl--wort { font-size: clamp(1.15rem, .95rem + .8vw, 1.7rem); letter-spacing: -.035em; line-height: 1.1; }
.fakten__zahl sup { font-size: .45em; vertical-align: top; margin-left: .1em; color: var(--rot); letter-spacing: 0; }
.fakten__text { display: block; margin-top: .55rem; font-size: .9rem; color: var(--grau); line-height: 1.4; max-width: 24ch; }

/* Am großen Bildschirm passt der Start samt Faktenleiste in das erste
   Bild. Die Zeichnung gibt dafür Höhe ab, nicht die Schrift. */
@media (min-width: 961px) {
  .held {
    min-height: calc(100svh - var(--kopf-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.25rem, 3vh, 3rem) 0 clamp(.5rem, 1.5vh, 1.25rem);
  }
  .held__plan .zeichnung { max-height: clamp(260px, calc(100svh - var(--kopf-h) - 440px), 620px); }
  .fakten { margin-top: clamp(1.5rem, 4vh, 3.5rem); }
  .fakten li { padding-top: 1.1rem; padding-bottom: .4rem; }
}

@media (max-width: 960px) {
  .held__in { grid-template-columns: 1fr; align-items: start; }
  .held__plan .zeichnung { max-height: 460px; }
  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fakten li:nth-child(2) { border-right: 0; }
  .fakten li:nth-child(3) { padding-left: 0; }
  .fakten li:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 560px) {
  .schriftfeld { grid-template-columns: 1fr 1fr; }
  .schriftfeld div { border-right: 1px solid var(--linie) !important; border-bottom: 1px solid var(--linie) !important; }
  .schriftfeld div:nth-child(2n) { border-right: 0 !important; }
  .schriftfeld div:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .schriftfeld div:last-child { grid-column: auto; }
  .held__knoepfe .btn { flex: 1 1 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------
   Abschnitte allgemein
   --------------------------------------------------------- */
.abschnitt { padding: var(--sec-y) 0; }
.abschnitt--eng { padding-top: 0; }
.dunkel { background: var(--beton); color: var(--auf-beton); }
.titel { font-size: var(--h2); letter-spacing: -.045em; line-height: 1; }
.titel + .unter { margin-top: 1.2rem; }
.unter { max-width: 52ch; font-size: var(--lead); color: var(--grau); }
.dunkel .unter { color: var(--auf-beton-grau); }

/* ---------------------------------------------------------
   [01] Aussage — Wörter werden beim Lesen dunkel
   --------------------------------------------------------- */
.aussage__text {
  max-width: 26em;
  margin: 0;
  font-size: var(--gross);
  line-height: 1.16;
  letter-spacing: -.035em;
  font-weight: 450;
}
.aussage__text .w { color: var(--tusche); transition: color .3s linear; }
.woerter-an .aussage__text .w { color: var(--linie-2); }
.woerter-an .aussage__text .w.is-an { color: var(--tusche); }
.aussage__text .rot.w.is-an, .aussage__text .rot .w.is-an { color: var(--rot); }

.aussage__unten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  /* oben bündig: bei "end" stand der Absatz 67 px tiefer als die Liste daneben,
     das las sich als Loch über dem Text. */
  align-items: start;
}
.aussage__klein { max-width: 44ch; color: var(--grau); margin: 0; }
.aussage__unten .btn { justify-self: start; margin-top: 1.5rem; }
.aussage__liste { list-style: none; border-top: 1px solid var(--linie-2); }
.aussage__liste li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 1rem;
}
.aussage__liste li span:first-child { color: var(--grau); }
.aussage__liste li span:last-child { font-weight: 500; letter-spacing: -.01em; color: var(--tusche); text-align: right; }

@media (max-width: 820px) {
  .aussage__unten { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Foto-Band (Symbolbild) mit leichter Parallaxe
   --------------------------------------------------------- */
.fotoband {
  position: relative;
  height: clamp(280px, 52vw, 780px);
  overflow: hidden;
  background: var(--beton);
}
.fotoband picture, .fotoband img {
  width: 100%;
  height: 100%;
}
.fotoband img {
  object-fit: cover;
  transform: translate3d(0, var(--versatz, 0px), 0) scale(1.14);
  will-change: transform;
}
.fotoband__zeile {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  padding: 1.1rem var(--pad-x);
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.fotoband__satz {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.3rem, .9rem + 1.8vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.symbolbild {
  font-family: var(--etikett);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
}

/* ---------------------------------------------------------
   [02] Leistungen — nummerierte Liste mit wechselnder Zeichnung
   --------------------------------------------------------- */
.leistungen__in {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 1rem + 5vw, 7rem);
  align-items: start;
}
.leistungen__kopf { position: sticky; top: calc(var(--kopf-h) + 2rem); }
.leistungen__plan { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); max-width: 520px; }
.leistungen__plan .plan__bild { display: grid; }
.leistungen__plan .zeichnung { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.leistungen__plan .zeichnung.is-sichtbar { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }

.liste { border-top: 1px solid var(--linie-2); }
.liste__punkt { border-bottom: 1px solid var(--linie-2); }
.liste__punkt summary {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: .5rem;
  padding: clamp(1.1rem, .8rem + 1vw, 1.7rem) 0;
  cursor: pointer;
  list-style: none;
}
.liste__punkt summary::-webkit-details-marker { display: none; }
.liste__nr { color: var(--grau); font-size: .85rem; }
.liste__name {
  font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  color: var(--grau-2);
  transition: color .3s var(--ease);
}
.liste__name sup {
  font-family: var(--etikett);
  font-size: .8rem;
  letter-spacing: 0;
  margin-left: .25em;
  vertical-align: super;
  color: var(--grau);
}
.liste__punkt summary:hover .liste__name,
.liste__punkt[open] .liste__name { color: var(--tusche); }
.liste__punkt[open] .liste__nr { color: var(--rot); }
.liste__plus {
  position: relative;
  justify-self: end;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--linie-2);
  border-radius: 50%;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.liste__plus::before, .liste__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--tusche);
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), background-color .3s;
}
.liste__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.liste__punkt[open] .liste__plus { background: var(--tusche); border-color: var(--tusche); }
.liste__punkt[open] .liste__plus::before, .liste__punkt[open] .liste__plus::after { background: var(--papier); }
.liste__punkt[open] .liste__plus::after { transform: translate(-50%, -50%) rotate(0deg); }

.liste__inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  padding: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.4rem) 4.1rem;
  animation: aufklappen .45s var(--ease);
}
.liste__inhalt p { margin: 0; color: var(--grau); }
.liste__inhalt ul { list-style: none; border-top: 1px solid var(--linie); }
/* Ganze Pixel: sonst landen die Striche auf unterschiedlichen Halbpixeln und
   sehen mal kräftig, mal blass aus. Zeilenhöhe und Innenabstand in px halten
   jede Zeile genau 40 px hoch. */
.liste__inhalt li {
  position: relative;
  padding: 9px 0 9px 21px;
  border-bottom: 1px solid var(--linie);
  font-size: .96rem;
  line-height: 22px;
}
.liste__inhalt li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 10px;
  height: 2px;
  background: var(--rot);
}
@keyframes aufklappen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .leistungen__in { grid-template-columns: 1fr; }
  .leistungen__kopf { position: static; }
  .leistungen__plan { display: none; }
  .liste__inhalt { grid-template-columns: 1fr; padding-left: 0; }
}
@media (max-width: 520px) {
  .liste__punkt summary { grid-template-columns: 2.6rem minmax(0, 1fr) 2.2rem; }
}

/* ---------------------------------------------------------
   [03] Bauaufgaben — Foto links, vier Planquadrate rechts
   --------------------------------------------------------- */
.bauaufgaben__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 1rem + 4vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.bauaufgaben__kopf .unter { margin: 0; }
.bauaufgaben__in {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, .5rem + 1.5vw, 2rem);
  align-items: stretch;
}
.bauaufgaben__foto {
  position: relative;
  margin: 0;
  min-height: 420px;
  overflow: hidden;
  background: var(--beton);
}
.bauaufgaben__foto picture, .bauaufgaben__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bauaufgaben__foto img { object-fit: cover; transition: transform 1.2s var(--ease); }
.bauaufgaben__foto:hover img { transform: scale(1.03); }
.bauaufgaben__foto figcaption {
  position: absolute;
  left: 1rem;
  bottom: .9rem;
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--linie-2);
  border-left: 1px solid var(--linie-2);
}
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, .9rem + 1vw, 1.9rem);
  border-right: 1px solid var(--linie-2);
  border-bottom: 1px solid var(--linie-2);
  background: transparent;
  transition: background-color .35s var(--ease);
}
.kachel:hover { background: var(--weiss); }
.kachel__bild { max-width: 240px; margin-bottom: 1.4rem; }
.kachel__nr { position: absolute; top: 1rem; right: 1.1rem; font-size: .7rem; color: var(--grau); }
.kachel__titel { font-size: var(--h3); letter-spacing: -.035em; margin-bottom: .9rem; }
.kachel__liste { list-style: none; margin-top: auto; }
.kachel__liste li {
  padding: .38rem 0;
  border-top: 1px solid var(--linie);
  font-size: .92rem;
  color: var(--tusche-2);
  line-height: 1.4;
}

@media (max-width: 1080px) {
  .bauaufgaben__in { grid-template-columns: 1fr; }
  .bauaufgaben__foto { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 820px) {
  .bauaufgaben__kopf { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kacheln { grid-template-columns: 1fr; }
  .kachel__bild { max-width: 200px; }
}

/* ---------------------------------------------------------
   [04] Der Lastpfad
   Grundzustand (ohne JS, Handy, reduzierte Bewegung): normaler
   Abschnitt, Zeichnung komplett. Erst .lastpfad-an am <html>
   macht daraus die klebende Bühne mit Schritt-Steuerung.
   --------------------------------------------------------- */
.lastpfad {
  position: relative;
  padding: var(--sec-y) 0;
  background: var(--papier-2);
}
.lastpfad__in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: center;
}
.lastpfad .titel { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.4rem); }
.schritte {
  position: relative;
  list-style: none;
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  border-top: 1px solid var(--linie-2);
}
.schritte::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: var(--rot);
  transform: scaleX(var(--fortschritt, 1));
  transform-origin: left;
}
.schritt {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linie-2);
  transition: opacity .4s var(--ease);
}
.schritt__nr { padding-top: .3rem; color: var(--rot-text); }
.schritt__titel { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.03em; line-height: 1.2; }
.schritt__text { margin: .4rem 0 0; color: var(--grau); max-width: 48ch; font-size: .96rem; }
.lastpfad__plan { background-color: var(--weiss); }
.lastpfad .lp-fluss { stroke-dasharray: 12 10; animation: fluss 1.1s linear infinite; }
@keyframes fluss { to { stroke-dashoffset: -22; } }

/* 520vh war Bilal zu viel Scrollweg (17.09.2026): Jetzt reichen zwei bis drei
   Mausrad-Raster pro Schritt, bei 900 px Fensterhöhe rund 280 px. */
.lastpfad-an .lastpfad { height: 250vh; padding: 0; }
.lastpfad-an .lastpfad__buehne {
  position: sticky;
  top: var(--kopf-h);
  height: calc(100vh - var(--kopf-h));
  height: calc(100svh - var(--kopf-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.lastpfad-an .lastpfad__plan .zeichnung { max-height: calc(100svh - var(--kopf-h) - 8rem); }
.lastpfad-an .schritt { opacity: .4; }
.lastpfad-an .schritt .schritt__nr { color: var(--grau); }
.lastpfad-an .schritt.is-aktiv { opacity: 1; }
.lastpfad-an .schritt.is-aktiv .schritt__nr { color: var(--rot-text); }
.lastpfad-an .schritt__text {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease);
}
.lastpfad-an .schritt.is-aktiv .schritt__text { max-height: 14em; margin-top: .4rem; opacity: 1; }
.lastpfad-an .lastpfad .lp { opacity: 0; transition: opacity .6s var(--ease); }
.lastpfad-an .lastpfad.ab-1 .lp-1,
.lastpfad-an .lastpfad.ab-2 .lp-2,
.lastpfad-an .lastpfad.ab-3 .lp-3,
.lastpfad-an .lastpfad.ab-4 .lp-4,
.lastpfad-an .lastpfad.ab-5 .lp-5 { opacity: 1; }
.lastpfad-an .lastpfad .lp-5 { transform: scale(1.15); transform-origin: 390px 420px; transition: opacity .35s var(--ease), transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.lastpfad-an .lastpfad.ab-5 .lp-5 { transform: none; }

@media (max-width: 1000px) {
  .lastpfad__in { grid-template-columns: 1fr; }
  .lastpfad__plan { order: -1; max-width: 560px; }
  .lastpfad__text { display: contents; }
  .lastpfad__text .marke { order: -3; }
  .lastpfad__text .titel { order: -2; }
}

/* ---------------------------------------------------------
   [05] Arbeitsweise — breite Hallenansicht, vier Grundsätze
   --------------------------------------------------------- */
/* Referenzen (vorher „Arbeitsweise"): links Text und Projektliste, rechts der
   Planstapel des gewählten Projekts. Er liegt ruhig da und fächert beim
   Überfahren auf. Weitere Projekte kommen als neuer Listeneintrag plus Stapel
   dazu; die Bereichsfilter baut main.js selbst. */
.referenzen__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.referenzen__intro { max-width: 52ch; margin: 1.4rem 0 0; font-size: var(--lead); color: var(--grau); }

.projekte__filter { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.projekte__filter[hidden] { display: none; }
.projekte__filter button {
  min-height: 2.5rem;
  padding: .4rem 1.05rem;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: transparent;
  font-size: .9rem;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s;
}
.projekte__filter button:hover { border-color: var(--tusche); }
.projekte__filter button[aria-pressed="true"] { background: var(--tusche); border-color: var(--tusche); color: var(--papier); }

.projekte { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); list-style: none; border-top: 1px solid var(--linie-2); }
.projekt[hidden] { display: none; }
.projekt__knopf {
  position: relative;
  display: grid;
  gap: .3rem;
  width: 100%;
  padding: 1.1rem 0 1.2rem;
  border: 0;
  border-bottom: 1px solid var(--linie-2);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* Das gewählte Projekt bekommt oben einen roten Strich wie eine Markierung im Plan */
.projekt__knopf::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.projekt__knopf[aria-pressed="true"]::before { transform: scaleX(1); }
.projekt__kopf { display: flex; align-items: center; gap: .8rem; }
.projekt__nr { color: var(--grau); }
.projekt__bereich { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.projekt__titel { font-size: 1.3rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; color: var(--tusche-2); transition: color .25s var(--ease); }
.projekt__text { font-size: .95rem; line-height: 1.45; color: var(--grau); }
.projekt__knopf:hover .projekt__titel, .projekt__knopf[aria-pressed="true"] .projekt__titel { color: var(--tusche); }
.projekt__knopf[aria-pressed="true"] .projekt__nr, .projekt__knopf[aria-pressed="true"] .projekt__bereich { color: var(--rot); }
.referenzen__plaene .planstapel[hidden] { display: none; }

.planstapel { margin: 0; }
.planstapel__buehne { position: relative; aspect-ratio: 1.18; }
.planblatt {
  --dreh: 0deg;
  --x: 0%;
  --y: 0%;
  position: absolute;
  left: 9%;
  top: 12%;
  width: 82%;
  aspect-ratio: 1.4142;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--linie-2);
  background: #fff;
  box-shadow: 0 1px 2px rgba(19, 19, 19, .08), 0 18px 34px -22px rgba(19, 19, 19, .45);
  cursor: pointer;
  transform: translate(var(--x), var(--y)) rotate(var(--dreh));
  transform-origin: 50% 100%;
  translate: 0 0;
  transition: transform .65s cubic-bezier(.2, .8, .2, 1), translate .35s var(--ease), box-shadow .35s var(--ease);
}
.planblatt picture, .planblatt img { display: block; width: 100%; height: 100%; }
.planblatt img { object-fit: cover; }
/* Ruhelage: ein leicht verschobener Stapel, P-01 liegt oben */
/* Gezählt vom obersten Blatt (im HTML zuletzt) nach unten — so liegt auch ein
   Stapel mit zwei, drei oder sechs Blättern richtig. */
.planblatt:nth-last-child(n+5) { --dreh: -9deg; --x: -4%; --y: 4%; }
.planblatt:nth-last-child(4) { --dreh: -7deg; --x: -3%; --y: 3%; }
.planblatt:nth-last-child(3) { --dreh: -3deg; --x: -1%; --y: 1.5%; }
.planblatt:nth-last-child(2) { --dreh: 2.5deg; --x: 2%; --y: -.5%; }
.planblatt:nth-last-child(1) { --dreh: -.5deg; }
/* Aufgefächert — beim Überfahren und wenn ein Blatt den Tastaturfokus hat */
/* Gemessen bei 1440 px: Mit ±15 % ragte das rechte Blatt über den Fensterrand
   und das linke in die Textspalte — deshalb ±10 %. */
.planstapel__buehne:hover .planblatt:nth-last-child(n+5), .planstapel__buehne:focus-within .planblatt:nth-last-child(n+5) { --dreh: -12deg; --x: -11%; --y: 4%; }
.planstapel__buehne:hover .planblatt:nth-last-child(4), .planstapel__buehne:focus-within .planblatt:nth-last-child(4) { --dreh: -10deg; --x: -10%; --y: 3%; }
.planstapel__buehne:hover .planblatt:nth-last-child(3), .planstapel__buehne:focus-within .planblatt:nth-last-child(3) { --dreh: -3.5deg; --x: -3.5%; --y: 0%; }
.planstapel__buehne:hover .planblatt:nth-last-child(2), .planstapel__buehne:focus-within .planblatt:nth-last-child(2) { --dreh: 3.5deg; --x: 3.5%; --y: -1%; }
.planstapel__buehne:hover .planblatt:nth-last-child(1), .planstapel__buehne:focus-within .planblatt:nth-last-child(1) { --dreh: 9deg; --x: 10%; --y: 2%; }
.planblatt:hover, .planblatt:focus-visible { translate: 0 -5%; box-shadow: 0 2px 4px rgba(19, 19, 19, .1), 0 34px 50px -26px rgba(19, 19, 19, .6); }
.planblatt:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.planblatt__etikett {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .3rem .65rem;
  background: var(--tusche);
  color: var(--papier);
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
}
.planblatt__etikett b { margin-right: .3em; font-weight: 600; color: var(--rot-hell); }
/* In Ruhelage würden sich die Etiketten der unteren Blätter überlappen:
   Dort trägt nur das oberste eins, aufgefächert zeigen alle ihres. */
.planblatt:not(:last-child) .planblatt__etikett { opacity: 0; transition: opacity .3s var(--ease); }
.planstapel__buehne:hover .planblatt__etikett,
.planstapel__buehne:focus-within .planblatt__etikett { opacity: 1; }
@media (hover: none) {
  .planblatt:not(:last-child) .planblatt__etikett { opacity: 1; }
}
.planstapel__text { display: grid; gap: .2rem; margin-top: 1.4rem; text-align: center; font-size: .92rem; color: var(--tusche-2); }
.planstapel__hinweis { font-size: .8rem; color: var(--grau); }

/* Ohne Maus gibt es kein Überfahren: dort liegt der Stapel gleich leicht aufgefächert */
@media (hover: none) {
  .planblatt:nth-last-child(n+5) { --dreh: -11deg; --x: -10%; --y: 5%; }
  .planblatt:nth-last-child(4) { --dreh: -9deg; --x: -9%; --y: 4%; }
  .planblatt:nth-last-child(3) { --dreh: -3deg; --x: -3%; --y: 1%; }
  .planblatt:nth-last-child(2) { --dreh: 3deg; --x: 3%; --y: -1%; }
  .planblatt:nth-last-child(1) { --dreh: 8deg; --x: 9%; --y: 2%; }
}
@media (max-width: 900px) {
  .referenzen__raster { grid-template-columns: 1fr; }
  .planstapel { width: 100%; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 520px) {
  .planblatt { left: 14%; width: 72%; }
}

.planfenster {
  /* Breite aus der verfügbaren Höhe abgeleitet: So passt das ganze Blatt
     immer auf den Bildschirm, ohne Rand oder Anschnitt. */
  width: min(1320px, 94vw, calc((92vh - 3.8rem) * 1.4142));
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: var(--papier);
  color: var(--tusche);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.planfenster::backdrop { background: rgba(19, 19, 19, .78); }
.planfenster[open] { animation: fenster-auf .3s var(--ease); }
@keyframes fenster-auf { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.planfenster__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3.8rem;
  padding: .5rem .6rem .5rem 1.2rem;
  border-bottom: 1px solid var(--linie);
}
.planfenster__titel { margin: 0; min-width: 0; font-size: .98rem; line-height: 1.3; }
.planfenster__titel b { margin-right: .35rem; font-weight: 600; color: var(--rot); }
.planfenster__knoepfe { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.planfenster__gross { margin-right: .5rem; font-size: .9rem; font-weight: 500; color: var(--rot-dunkel); text-decoration: none; white-space: nowrap; }
.planfenster__gross:hover { text-decoration: underline; }
.planfenster__knopf {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--linie-2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s, border-color .2s;
}
.planfenster__knopf svg { width: 14px; height: 14px; }
.planfenster__knopf:hover { background: var(--tusche); border-color: var(--tusche); color: var(--papier); }
.planfenster__rahmen { position: relative; overflow: hidden; background: #fff; }
.planfenster__rahmen img { display: block; width: 100%; height: auto; }
body.fenster-offen { overflow: hidden; }

/* Lupe nur im geöffneten Planblatt, nur mit Maus. Sie trifft die richtige
   Stelle, weil das Blatt den Rahmen genau ausfüllt (Breite oben aus der
   Höhe abgeleitet). */
.lupe {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  border: 2px solid var(--tusche);
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28), 0 0 0 6px rgba(255, 255, 255, .7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
  will-change: transform;
}
.planfenster__rahmen.is-lupe { cursor: none; }
.planfenster__rahmen.is-lupe .lupe { opacity: 1; }


@media (max-width: 560px) {
  .planfenster { width: 96vw; max-height: 92vh; }
  .planfenster__titel span { display: none; }
  .planfenster__rahmen { overflow: auto; max-height: calc(92vh - 3.8rem); }
  .planfenster__rahmen img { width: 900px; max-width: none; }
}
.grundsaetze {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie-2);
  list-style: none;
}
.grundsatz__nr { color: var(--rot); }
.grundsatz__titel { margin: .7rem 0 .6rem; font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.15; }
.grundsatz p { margin: 0; font-size: .95rem; color: var(--grau); }
@media (max-width: 900px) { .grundsaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grundsaetze { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   [06] Profil — Porträt, Datenblatt, Werdegang als Maßkette
   --------------------------------------------------------- */
.profil { border-top: 1px solid var(--linie); }
.profil__in {
  display: grid;
  /* 316 px = die halbe Kantenlänge der Bilddatei (632 px). So ist das Porträt
     auch auf Bildschirmen mit doppelter Pixeldichte gestochen scharf. */
  grid-template-columns: minmax(0, 316px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 5vw, 7rem);
  align-items: start;
}
.profil__bild { margin: 0; }
.profil__bild img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  border: 1px solid var(--linie-2);
}
.profil__bild figcaption { margin-top: .7rem; color: var(--grau); font-size: .72rem; }
.profil__lead--zwei { margin-top: .9rem !important; }
.profil__lead { margin: 1.6rem 0 0; max-width: 58ch; font-size: var(--lead); color: var(--tusche-2); }

.datenblatt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
}
.datenblatt div { padding: .9rem 0; border-top: 1px solid var(--linie-2); }
.datenblatt dt { font-size: .82rem; color: var(--grau); line-height: 1.35; }
.datenblatt dd { margin: .3rem 0 0; font-size: .95rem; color: var(--tusche); }

.werdegang { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.werdegang__titel { margin-bottom: 1.2rem; font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.werdegang__liste {
  display: grid;
  /* Sieben Stationen in einer Reihe. Die Werte sind nicht streng nach Jahren,
     sondern nach dem Platz, den die Beschriftung braucht. */
  grid-template-columns: 4.5fr 3fr 3fr 3fr 3.5fr 3.5fr 4fr;
  list-style: none;
}
.werdegang__liste li {
  position: relative;
  display: grid;
  align-content: start;
  gap: .2rem;
  padding: 2.6rem 1rem 0 0;
  font-size: .9rem;
  line-height: 1.35;
  min-width: 0;
}
/* Maßlinie mit Schrägstrich am Anfang — wie eine Bemaßungskette */
.werdegang__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.75rem;
  height: 1px;
  background: var(--tusche);
  transform-origin: left;
  transition: transform .7s var(--ease-zeichnen);
}
.werdegang__liste li::after {
  content: "";
  position: absolute;
  left: -5px;
  top: calc(1.75rem - 6px);
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, transparent 45%, var(--tusche) 45%, var(--tusche) 58%, transparent 58%);
  transform: rotate(-90deg);
}
/* Ab 2021 rot: seit der Gruendung arbeitet er auf eigene Rechnung,
   zuerst neben der Anstellung, seit 2025 hauptberuflich. */
.werdegang__liste li.werdegang__eigen::before { background: var(--rot); height: 2px; }
.werdegang__jahr { position: absolute; top: 0; left: 0; font-size: .78rem; color: var(--grau); }
.werdegang__liste strong { font-weight: 500; letter-spacing: -.01em; }
.werdegang__liste span:not(.werdegang__jahr) { color: var(--grau); }
.werdegang__jetzt .werdegang__jahr, .werdegang__jetzt strong { color: var(--rot); }

.zeichnen-an .werdegang__liste li::before { transform: scaleX(0); }
.zeichnen-an .werdegang__liste.is-gezeichnet li::before { transform: scaleX(1); }
.werdegang__liste li:nth-child(2)::before { transition-delay: .25s; }
.werdegang__liste li:nth-child(3)::before { transition-delay: .5s; }
.werdegang__liste li:nth-child(4)::before { transition-delay: .75s; }
.werdegang__liste li:nth-child(5)::before { transition-delay: 1s; }
.werdegang__liste li:nth-child(6)::before { transition-delay: 1.35s; }
.werdegang__liste li:nth-child(7)::before { transition-delay: 1.6s; }

@media (max-width: 980px) {
  .werdegang__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.8rem; }
}
@media (max-width: 820px) {
  .profil__in { grid-template-columns: 1fr; }
  .profil__bild { max-width: 320px; }
}
@media (max-width: 600px) {
  .datenblatt { grid-template-columns: 1fr; }
  .werdegang__liste { grid-template-columns: 1fr; row-gap: 0; border-left: 1px solid var(--tusche); margin-left: .3rem; }
  .werdegang__liste li { padding: .2rem 0 1.3rem 5.2rem; }
  .werdegang__liste li::before { display: none; }
  .werdegang__liste li::after { left: -6px; top: .45rem; transform: none; }
  .werdegang__jahr { left: 1.1rem; top: .28rem; }
}

/* Füllungen und Beschriftungen erscheinen erst, wenn die Striche
   stehen. main.js rechnet aus, wann das ist (--f-delay). */
.zeichnen-an .zeichnung.is-gezeichnet .f { transition-delay: var(--f-delay, .6s); }
.zeichnen-an .zeichnung.is-gezeichnet .schnitt { transition-delay: var(--f-delay, 1s); }

/* ---------------------------------------------------------
   [07] Fragen
   --------------------------------------------------------- */
.fragen { border-top: 1px solid var(--linie); }
.fragen__in {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 5vw, 7rem);
  align-items: start;
}
.fragen__kopf { position: sticky; top: calc(var(--kopf-h) + 2rem); }
.fragen__kopf .unter a { color: var(--rot); white-space: nowrap; }
.liste--fragen .liste__punkt summary { grid-template-columns: minmax(0, 1fr) 2.4rem; }
.liste--fragen .liste__name {
  font-size: clamp(1.15rem, 1rem + .75vw, 1.6rem);
  letter-spacing: -.025em;
  line-height: 1.25;
  color: var(--tusche-2);
}
.liste--fragen .liste__inhalt { grid-template-columns: 1fr; padding-left: 0; }
.liste--fragen .liste__inhalt p { max-width: 62ch; color: var(--tusche-2); }
@media (max-width: 1000px) {
  .fragen__in { grid-template-columns: 1fr; }
  .fragen__kopf { position: static; }
}

/* ---------------------------------------------------------
   [08] Kontakt — dunkler Betonblock
   --------------------------------------------------------- */
.kontakt {
  position: relative;
  overflow: hidden;
  padding: var(--sec-y) 0;
}
.kontakt__hintergrund, .kontakt__hintergrund img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kontakt__hintergrund img { object-fit: cover; opacity: .2; filter: grayscale(1); }
.kontakt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22, 22, 21, .35) 0%, rgba(22, 22, 21, .82) 45%, var(--beton) 100%);
  pointer-events: none;
}
.kontakt__in { position: relative; z-index: 1; }
.kontakt__kopf { position: relative; }
.kontakt__titel {
  max-width: 15ch;
  font-size: clamp(2.5rem, 1.2rem + 5vw, 6rem);
  line-height: .96;
  letter-spacing: -.055em;
}
.kontakt__symbol { display: inline-block; margin-top: 1.2rem; color: var(--auf-beton-grau); }
.kontakt__raster {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.kontakt__lead {
  margin: 1.4rem 0 0;
  max-width: 62ch;
  color: var(--auf-beton-grau);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.55;
}

/* Das Formular ist eine helle Karte auf dem dunklen Block: Es soll das
   Erste sein, was man im Kontaktbereich sieht, nicht Linien im Dunkeln. */
.formular {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.2rem;
  padding: clamp(1.4rem, .9rem + 2.4vw, 3.25rem);
  background: var(--papier);
  color: var(--tusche);
  border-top: 4px solid var(--rot);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75);
}
.formular__kopf { grid-column: 1 / -1; margin-bottom: .3rem; }
.formular__titel { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: -.045em; line-height: 1.02; }
.formular__unter { max-width: 50ch; margin: .6rem 0 0; color: var(--grau); }
.feld { grid-column: 1 / -1; display: grid; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.feld--halb { grid-column: span 1; }
.feld label, .feld legend { padding: 0; font-size: .92rem; font-weight: 500; color: var(--tusche-2); }
.feld legend { margin-bottom: .55rem; }
.pflicht { color: var(--rot); }
.optional { font-weight: 400; color: var(--grau); }
.feld input:not([type="radio"]):not([type="checkbox"]), .feld textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--linie-2);
  border-radius: 6px;
  background: var(--weiss);
  color: var(--tusche);
  font-size: 16px; /* darunter zoomen iPhones beim Antippen hinein */
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.feld textarea { resize: vertical; min-height: 8.5rem; line-height: 1.5; }
.feld ::placeholder { color: #8f8c85; }
.feld input:not([type="radio"]):not([type="checkbox"]):hover, .feld textarea:hover { border-color: var(--grau-2); }
.feld input:not([type="radio"]):not([type="checkbox"]):focus-visible, .feld textarea:focus-visible {
  outline: none;
  border-color: var(--tusche);
  box-shadow: 0 0 0 4px var(--rot-zart);
}
.feld .is-invalid { border-color: var(--rot) !important; background: #fdf1ee !important; }
.feld--haken input.is-invalid + label { color: var(--rot-dunkel); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem 1.05rem;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: var(--weiss);
  font-size: .93rem;
  line-height: 1.2;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s;
}
.chip:hover span { border-color: var(--tusche); }
.chip input:checked + span { background: var(--tusche); border-color: var(--tusche); color: var(--papier); }
.chip input:focus-visible + span { outline: 2px solid var(--rot); outline-offset: 2px; }

.feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld--haken { display: flex; align-items: flex-start; gap: .75rem; }
.feld--haken input { flex: 0 0 22px; width: 22px; height: 22px; margin: .05rem 0 0; accent-color: var(--rot); cursor: pointer; }
.feld--haken label { font-weight: 400; cursor: pointer; }
.feld--haken a { color: var(--tusche); }
.formular__fuss { grid-column: 1 / -1; display: grid; gap: .8rem; margin-top: .3rem; }
.formular__hinweis { margin: 0; font-size: .87rem; color: var(--grau); }
.formular__meldung { grid-column: 1 / -1; min-height: 1.5em; margin: 0; font-size: .95rem; }
.formular__meldung.is-error { color: var(--rot-dunkel); }
.formular__meldung.is-ok { color: var(--tusche); }

.btn--rot { --btn-bg: var(--rot); --btn-fg: #fff; --btn-kreis: #fff; --btn-pfeil: var(--rot); }
.btn--rot:hover { --btn-bg: var(--tusche); --btn-fg: var(--papier); --btn-kreis: var(--papier); --btn-pfeil: var(--tusche); }
.btn--breit { width: 100%; justify-content: space-between; min-height: 3.75rem; padding-left: 1.6rem; font-size: 1.06rem; }
.btn--breit .btn__pfeil { width: 2.8rem; height: 2.8rem; }

.kontakt__daten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--linie-dunkel);
}
.kontakt__block { display: grid; gap: .35rem; justify-items: start; }
.kontakt__block .etikett { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--auf-beton-grau); }
.kontakt__block p { margin: 0; color: var(--auf-beton); }
.kontakt__block a { color: var(--auf-beton); text-decoration: none; }
.kontakt__block a:hover { color: var(--rot-hell); }
.kontakt__gross { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); letter-spacing: -.03em; line-height: 1.15; }
.kontakt__block a.kontakt__karte { color: var(--rot-hell); font-size: .92rem; }

@media (max-width: 900px) {
  .kontakt__daten { grid-template-columns: 1fr; }

}
@media (max-width: 560px) {
  .formular { grid-template-columns: 1fr; }
  .feld--halb { grid-column: 1 / -1; }
  .formular__fuss .btn { width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------
   Fußzeile mit angeschnittener Wortmarke
   --------------------------------------------------------- */
.fuss { position: relative; overflow: hidden; padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); border-top: 1px solid var(--linie-dunkel); }
.fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
}
.fuss__marke svg { width: 52px; height: auto; color: var(--auf-beton); }
.fuss__marke p { max-width: 30ch; margin: 1.2rem 0 0; color: var(--auf-beton-grau); }
.fuss__spalte { display: grid; align-content: start; gap: .55rem; }
.fuss__spalte .etikett { margin-bottom: .3rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--auf-beton-grau); }
.fuss__spalte a, .fuss__spalte span:not(.etikett) { color: var(--auf-beton); text-decoration: none; font-size: .95rem; }
.fuss__spalte a:hover { color: var(--rot-hell); }
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--linie-dunkel);
  font-size: .85rem;
  color: var(--auf-beton-grau);
}
.fuss__unten nav { display: flex; gap: 1.5rem; }
.fuss__unten a { color: var(--auf-beton-grau); text-decoration: none; padding: .6rem 0; }
.fuss__unten a:hover { color: var(--auf-beton); }
.fuss__wort {
  margin: 0 0 -.2em;
  font-size: clamp(6rem, 30vw, 32rem);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.075em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(to bottom, #3a3935 0%, #22211f 55%, var(--beton) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 760px) {
  .fuss__oben { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------
   Unterseiten (Impressum / Datenschutz)
   --------------------------------------------------------- */
.kopf__zurueck { margin-left: auto; }
.seitenkopf { padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); border-bottom: 1px solid var(--linie-2); }
.seitenkopf h1 { font-size: var(--h2); letter-spacing: -.045em; }
.seitenkopf p { margin: 1rem 0 0; color: var(--grau); }
.recht { padding: clamp(2.5rem, 2rem + 3vw, 5rem) 0 var(--sec-y); }
.recht h2 {
  margin: 2.6rem 0 .8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linie);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  letter-spacing: -.025em;
  line-height: 1.2;
}
.recht h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.recht h3 { margin: 1.6rem 0 .5rem; font-size: 1.05rem; letter-spacing: -.01em; }
.recht p, .recht li { color: var(--tusche-2); }
.recht ul { padding-left: 1.2rem; margin-bottom: 1em; }
.recht li { margin-bottom: .4rem; }
.recht a { color: var(--rot-dunkel); }
.recht address {
  margin: 1.2rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--rot);
  color: var(--tusche);
}
/* Noch offene Angaben sichtbar markieren, statt sie stillschweigend
   wegzulassen — eine Lücke im Impressum darf niemand übersehen. */
.recht .offen {
  background: #fdf3d6;
  border: 1px dashed #d9a441;
  border-radius: 3px;
  padding: .1rem .4rem;
  color: #6b4c05;
  font-size: .93em;
}
.zurueck { display: inline-flex; gap: .45rem; margin-top: 3rem; font-weight: 500; color: var(--rot-dunkel); text-decoration: none; }
.zurueck:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   Einblenden beim Scrollen. Das Verstecken hängt an .reveal-on,
   das erst main.js setzt — eine kaputte JS-Datei kann Inhalte
   so niemals dauerhaft unsichtbar machen.
   --------------------------------------------------------- */
.reveal-on .reveal { opacity: 0; transform: translateY(18px); }
.reveal-on .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .lastpfad .lp-fluss { animation: none; stroke-dasharray: none; }
}

/* ---------------------------------------------------------
   Druck
   --------------------------------------------------------- */
@media print {
  .kopf, .burger, .held__knoepfe, .formular, .fotoband, .fuss__wort, .kontakt__hintergrund, .skip-link { display: none !important; }
  body, .dunkel, .lastpfad { background: #fff !important; color: #000 !important; }
  .kontakt::after { display: none; }
  .lastpfad-an .lastpfad { height: auto; }
  .lastpfad-an .lastpfad__buehne { position: static; height: auto; }
}

/* ---------------------------------------------------------
   Unterseite „Über uns": ruhiger Fließtext mit Inhaltsleiste
   links, die beim Scrollen stehen bleibt. Die Startseite bleibt
   kurz; ausführliche Texte stehen hier.
   --------------------------------------------------------- */
.seitenkopf__lead { max-width: 60ch; margin: 1.4rem 0 0; font-size: var(--lead); color: var(--grau); }
.langtext { padding: clamp(2.5rem, 2rem + 3vw, 5rem) 0 var(--sec-y); }
.langtext__raster {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: start;
}
.langtext__inhalt {
  position: sticky;
  top: calc(var(--kopf-h) + 2rem);
  display: grid;
  border-top: 1px solid var(--linie-2);
}
.langtext__inhalt-titel {
  padding: .8rem 0 .4rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grau);
}
.langtext__inhalt a {
  padding: .65rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: .95rem;
  color: var(--tusche-2);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.langtext__inhalt a:hover { color: var(--rot); }
.langtext__text { max-width: 68ch; }
.langtext__text section + section {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--linie-2);
}
.langtext__text h2 { margin-bottom: 1.2rem; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -.04em; line-height: 1.05; }
.langtext__text h3 { margin: 2.2rem 0 .6rem; font-size: 1.25rem; letter-spacing: -.025em; line-height: 1.2; }
.langtext__text h2 + h3 { margin-top: 1.4rem; }
.langtext__text p { margin: 0 0 1.1em; font-size: 1.08rem; line-height: 1.7; color: var(--tusche-2); }
.langtext__text ul { list-style: none; border-top: 1px solid var(--linie); }
/* Siehe .liste__inhalt: ganze Pixel, damit alle Striche gleich aussehen. */
.langtext__text li {
  position: relative;
  padding: 12px 0 12px 24px;
  border-bottom: 1px solid var(--linie);
  font-size: 1.05rem;
  line-height: 24px;
  color: var(--tusche-2);
}
.langtext__text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 23px;
  width: 10px;
  height: 2px;
  background: var(--rot);
}
.langtext__abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 18px;
  background: var(--beton);
  color: var(--auf-beton);
}
.langtext__abschluss p { margin: 0; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -.035em; line-height: 1.15; color: var(--auf-beton); }
.langtext__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 900px) {
  .langtext__raster { grid-template-columns: 1fr; }
  .langtext__inhalt { position: static; }
}

/* ---------------------------------------------------------
   404 — eigene Fehlerseite
   --------------------------------------------------------- */
.fehlerseite { padding: clamp(3rem, 2rem + 6vw, 7rem) 0 clamp(4rem, 3rem + 6vw, 8rem); }
.fehlerseite__plan { display: block; width: 100%; max-width: 420px; margin: 0 0 clamp(2rem, 1rem + 3vw, 3rem); color: var(--tusche); }
.fehlerseite h1 { margin: .4rem 0 0; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -.045em; line-height: 1.05; }
.fehlerseite__lead { margin: 1.2rem 0 0; max-width: 54ch; font-size: var(--lead); color: var(--tusche-2); }
.fehlerseite__wege { list-style: none; margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; padding: 0; border-top: 1px solid var(--linie); max-width: 54ch; }
.fehlerseite__wege li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--linie); line-height: 24px; color: var(--grau); }
.fehlerseite__wege li::before { content: ""; position: absolute; left: 0; top: 23px; width: 10px; height: 2px; background: var(--rot); }
.fehlerseite__wege a { color: var(--tusche); text-decoration: none; border-bottom: 1px solid var(--linie-2); }
.fehlerseite__wege a:hover { color: var(--rot-text); border-color: currentColor; }
.fehlerseite__hilfe { margin: clamp(1.6rem, 1rem + 2vw, 2.4rem) 0 0; color: var(--grau); }
.fehlerseite__hilfe a { color: var(--tusche); text-decoration: none; border-bottom: 1px solid var(--linie-2); }
.fehlerseite__hilfe a:hover { color: var(--rot-text); }

.projekt__daten { display: block; margin-top: .7rem; color: var(--grau); font-size: .9rem; line-height: 1.5; }
.projekt__daten span { display: block; }
.projekt__daten b { color: var(--tusche-2); font-weight: 500; margin-right: .4rem; }

/* ---------------------------------------------------------
   Partnerbüro — ruhiger Block unter der Haltung
   --------------------------------------------------------- */
.partner {
  /* Zwei Spalten wie im Abschnitt darueber: links der Text, rechts die
     Partner. Einspaltig blieb die rechte Haelfte leer. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  padding-top: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  border-top: 1px solid var(--linie);
}
.partner__titel, .partner__vorsatz, .partner__nachsatz { grid-column: 1; }
.partner__raster { grid-column: 2; grid-row: 1 / span 3; }
.partner__titel {
  margin: 0 0 1rem;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-weight: 600;
  color: var(--tusche);
}
.partner__titel .zweiton { font-weight: 400; }
.partner__vorsatz, .partner__nachsatz {
  margin: 0;
  max-width: 78ch;
  color: var(--tusche-2);
  font-size: .97rem;
  line-height: 1.5;
}
.partner__nachsatz { margin-top: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.partner__raster {
  display: grid;
  gap: clamp(1.3rem, 1rem + 1.2vw, 2rem);
}
/* Logo links, Angaben rechts daneben. Die Schrift bleibt so klein, dass der
   Textblock nicht hoeher wird als das Logo. */
.partner__karte {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.1rem, .8rem + 1.2vw, 1.8rem);
}
.partner__logo { display: block; width: 100%; }
.partner__logo img { display: block; width: 100%; height: auto; }
.partner__text { display: grid; gap: .25rem; }
.partner__name { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.partner__name .zweiton { display: block; margin-top: .1rem; font-weight: 400; font-size: .88rem; letter-spacing: 0; }
.partner__web { margin: 0; color: var(--grau); font-size: .88rem; line-height: 1.3; }
.partner__link {
  color: var(--rot-text);
  text-decoration: none;
  border-bottom: 1px solid var(--linie-2);
}
.partner__link:hover { border-color: currentColor; }
@media (max-width: 900px) {
  .partner { grid-template-columns: 1fr; }
  .partner__raster { grid-column: 1; grid-row: auto; margin: clamp(1.4rem, 1rem + 1.5vw, 2rem) 0; }
  .partner__nachsatz { margin-top: 0; }
}
@media (max-width: 560px) {
  .partner__karte { grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; }
}