/* ============================================================================
   tagwerk.css — Vorlage 8 „Tagwerk": ein Kanzlei-Arbeitstag in harten
   Schnitten (Rhythmic Cutlist). Grounds werden pro Schnitt HART gesetzt,
   kein Drift (devices.md §10, Cutlist-Regel). Engine unangetastet.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sc-canvas:     #F7F5F1;   /* Naturweiß */
  --sc-surface:    #EFECE4;   /* gesenkter Grund */
  --sc-ink:        #1C1B17;
  --sc-ink-soft:   #5D5850;
  --sc-accent:     #14555A;   /* Tiefes Petrol */
  --sc-accent-ink: #EDF4F2;

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: Charter, "Iowan Old Style", Georgia, serif;

  /* Schatten auf hellem Grund: halbiert und warm getönt (worlds.md, light canvas) */
  --sc-shadow-color: 38 18% 22%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.09);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.11), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.13);

  --tw-kohle: #17181A;
  --tw-kohle-hoch: #24262B;
  --tw-kohle-ink: #F4F1EA;
  --tw-leiste-h: 3.25rem;
  --tw-nav-h: 2.875rem; /* Gebiete-Reiter unter der Zeitleiste: 46px Leiste,
                           Links 45px hoch (1px Hairline unten) — Tap ≥44px */
  --tw-chrome-h: calc(var(--tw-leiste-h) + var(--tw-nav-h));
}

/* Reiter springen weich zum Gebiet — nur wenn Bewegung erwünscht ist */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html { background: var(--sc-canvas); }
body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  line-height: var(--sc-leading-body);
  padding-top: var(--tw-leiste-h);
}
/* index.html trägt die Gebiete-Reiter als zweite fixe Zeile; impressum.html
   nicht — dort bleibt es beim Zeitleisten-Padding. */
body.hat-gebietenav { padding-top: var(--tw-chrome-h); }

img { max-width: 100%; }

.skip {
  position: fixed; left: 0.75rem; top: 0.5rem; z-index: 60;
  transform: translateY(-300%);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-size: 0.85rem;
  padding: 0.6rem 1rem; border-radius: 6px; text-decoration: none;
}
.skip:focus-visible { transform: none; }

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

/* ==================================================== Die Zeitleiste == */
.zeitleiste {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--tw-leiste-h);
  background: var(--tw-kohle); color: var(--tw-kohle-ink);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
  padding-inline: clamp(0.75rem, 2.5vw, 2rem);
  font-family: var(--sc-font-display);
}

.flap { display: flex; align-items: center; gap: 3px; justify-self: start; }
.fc, .fsek {
  display: inline-block; position: relative;
  background: var(--tw-kohle-hoch);
  border-radius: 3px;
  font-weight: 640; font-size: 1.02rem; line-height: 1.7;
  width: 1.35ch; text-align: center;
  font-variant-numeric: tabular-nums;
  transition: transform 80ms ease-in, opacity 80ms linear;
  transform-origin: center;
  overflow: hidden;
}
.fc::after, .fsek::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px);
  height: 1px; background: rgba(0, 0, 0, 0.5);
}
.fc.dreht, .fsek.dreht { transform: scaleY(0.08); opacity: 0.6; }
.fk { opacity: 0.65; font-weight: 640; margin-inline: 1px; }
.fsek {
  font-size: 0.66rem; line-height: 1.9; width: 2.6ch;
  margin-left: 0.4rem; align-self: center;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms linear, transform 80ms ease-in;
}
.zeit-echt .fsek { opacity: 0.85; visibility: visible; }
.fsek[hidden] { display: inline-block; }
.fwort {
  margin-left: 0.9rem;
  font-size: 0.68rem; font-weight: 560;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: color-mix(in oklab, var(--tw-kohle-ink) 72%, var(--tw-kohle));
  white-space: nowrap;
  transition: opacity 140ms linear;
}
.fwort.dreht { opacity: 0; }

.leiste-name {
  margin: 0; justify-self: center;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leiste-ort { font-weight: 420; color: color-mix(in oklab, var(--tw-kohle-ink) 78%, var(--tw-kohle)); }

.leiste-tel {
  justify-self: end;
  white-space: nowrap; /* Umbruch sprengt die 52px-Leiste (Fund 06.09.) */
  color: var(--tw-kohle-ink); text-decoration: none;
  font-size: 0.92rem; font-weight: 640; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  padding: 0.7rem 0.25rem; /* Tap-Ziel ≥ 44px in der 52px-Leiste */
  border-bottom: 2px solid color-mix(in oklab, var(--tw-kohle-ink) 35%, var(--tw-kohle));
  transition: border-color 140ms linear;
}
/* Telefon + E-Mail als Paar rechts in der Leiste. Beide Kontaktwege sind
   auf Kundenwunsch dauerhaft sichtbar, nicht nur die Nummer. */
.leiste-kontakt {
  justify-self: end;
  display: flex; align-items: center; gap: 0.9rem;
  min-width: 0;
}
.leiste-mail {
  color: color-mix(in oklab, var(--tw-kohle-ink) 82%, var(--tw-kohle));
  text-decoration: none;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em;
  padding: 0.7rem 0.25rem;
  border-bottom: 2px solid color-mix(in oklab, var(--tw-kohle-ink) 22%, var(--tw-kohle));
  transition: color 140ms linear, border-color 140ms linear;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leiste-mail:hover { color: var(--tw-kohle-ink); border-color: var(--tw-kohle-ink); }
.leiste-mail:focus-visible { outline-color: #9FD4CE; }

.leiste-tel:hover { border-color: var(--tw-kohle-ink); }
.leiste-tel:focus-visible { outline-color: #9FD4CE; }

/* ============================================ Die Gebiete-Reiter ====== */
.gebiete-nav {
  position: fixed; top: var(--tw-leiste-h); left: 0; right: 0; z-index: 39;
  height: var(--tw-nav-h);
  background: var(--sc-canvas);
  border-bottom: 1px solid var(--sc-hairline-strong);
  font-family: var(--sc-font-display);
}

/* Fund 22.09.2026 (Tim), zweiter Anlauf: Die Fade-Pfeile unten sassen zuerst
   als Pseudo-Elemente direkt auf .gebiete-nav, als dieses selbst noch der
   scrollende Container war (overflow-x:auto). Ergebnis: unsichtbar, sobald
   man scrollte — ein absolut positioniertes Kind eines scrollenden
   Containers, der zugleich sein eigener containing block ist, wird Teil
   DESSEN ueberlaufenden Inhalts und scrollt mit, es bleibt NICHT fix am
   Rand (anders als zuerst angenommen). Deshalb jetzt zwei Ebenen: .gebiete-nav
   bleibt der feste Rahmen (fixed, nicht scrollend) und traegt die Fade-
   Pfeile; der tatsaechlich scrollende Inhalt liegt im Kind
   .gebiete-nav-scroll. Getestet: Pfeile bleiben jetzt bei jeder Scroll-
   position sichtbar am Rand stehen. */
.gebiete-nav-scroll {
  height: 100%;
  display: flex; align-items: stretch;
  gap: clamp(1.1rem, 2.5vw, 2.25rem);
  padding-inline: clamp(0.75rem, 2.5vw, 2rem);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gebiete-nav-scroll::-webkit-scrollbar { display: none; }

/* Auf schmalen Bildschirmen zeigt die Leiste nur die ersten paar Reiter,
   und nichts deutete an, dass rechts noch mehr folgt — „Kontakt" ganz
   hinten blieb unsichtbar, ohne dass man wusste, danach zu suchen. Zwei
   Verlaufsflaechen an den Raendern der Leiste zeigen jetzt an, wenn dort
   noch etwas abgeschnitten ist: ein Farbverlauf zum Leistengrund hin, mit
   einem kleinen Pfeil darin. Beide Seiten per JS ein-/ausgeblendet
   (notdienst.js) — rechts nur, solange noch etwas folgt, links nur, sobald
   schon gescrollt wurde. */
.gebiete-nav::before, .gebiete-nav::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2.75rem;
  z-index: 1; pointer-events: none;
  display: flex; align-items: center;
  font-family: var(--sc-font-display); font-size: 0.9rem;
  color: var(--sc-ink-soft);
  opacity: 0; transition: opacity 160ms linear;
}
.gebiete-nav::before {
  left: 0; justify-content: flex-start; padding-left: 0.3rem;
  background: linear-gradient(to right, var(--sc-canvas) 35%, transparent);
  content: "‹";
}
.gebiete-nav::after {
  right: 0; justify-content: flex-end; padding-right: 0.3rem;
  background: linear-gradient(to left, var(--sc-canvas) 35%, transparent);
  content: "›";
}
.gebiete-nav.kann-links::before { opacity: 1; }
.gebiete-nav.kann-rechts::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gebiete-nav::before, .gebiete-nav::after { transition: none; }
}

.gebiete-nav a {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  color: var(--sc-ink-soft); text-decoration: none;
  font-size: 0.74rem; font-weight: 620;
  text-transform: uppercase; letter-spacing: 0.09em;
  border-bottom: 2px solid transparent;
  padding-inline: 0.1rem;
  transition: color 140ms linear, border-color 140ms linear;
}
.gebiete-nav a:hover { color: var(--sc-ink); }
.gebiete-nav a[aria-current="true"] {
  color: var(--sc-ink);
  border-bottom-color: var(--sc-accent);
}
.gebiete-nav a:focus-visible { outline-offset: -3px; }

/* Sprungziele landen unter dem fixen Chrome, nicht dahinter */
.schnitt[id] { scroll-margin-top: var(--tw-chrome-h); }

/* ======================================================== Schnitte == */
.schnitt { position: relative; background: var(--sc-canvas); }
.grund-b { background: var(--sc-surface); }

.marke {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display);
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
}
.marke--hell { color: inherit; opacity: 0.78; }

.satz {
  margin: 0;
  font-size: var(--sc-t-lg); line-height: 1.42;
  max-width: 30ch;
  text-wrap: pretty;
}

/* -- Hero ------------------------------------------------------------ */
.hero { min-height: calc(100svh - var(--tw-chrome-h)); overflow: hidden; }
.voll { position: absolute; inset: 0; margin: 0; }
.voll img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero::after, .schluss::after {
  /* Scrim als Geschwister der Copy (verify.md), als Dichte-SPALTE unter der
     Textspalte statt vollflächig: die rechte Bildhälfte (Klinke, Hand,
     Morgenlicht) bleibt unangetastet. */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.hero::after {
  background:
    linear-gradient(100deg, rgba(12, 11, 10, 0.80) 0%, rgba(12, 11, 10, 0.74) 56%, rgba(12, 11, 10, 0) 79%);
}
.hero-block {
  position: relative; z-index: 2;
  padding: var(--sc-gutter);
  padding-top: max(26svh, 9rem);
  max-width: 42rem;
  color: #F6F3EC;
}
.hero-block .marke { color: rgba(246, 243, 236, 0.82); }
.hero h1 {
  margin: 0 0 var(--sc-4);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight);
  line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.hero-wer { margin: 0 0 var(--sc-2); font-size: var(--sc-t-lg); }
.hero-gebiete {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: 0.9rem; font-weight: 540; letter-spacing: 0.05em;
  color: rgba(246, 243, 236, 0.85);
}
.demotag {
  display: inline-block; margin: var(--sc-4) 0 0;
  font-family: var(--sc-font-display);
  font-size: 0.72rem; font-weight: 560; letter-spacing: 0.08em;
  color: #F6F3EC;
  border: 1px solid rgba(246, 243, 236, 0.55);
  border-radius: 4px; padding: 0.28rem 0.55rem;
}

/* -- Band: Bild volle Breite, Text darunter --------------------------- */
.band { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
/* 60svh statt 72svh: mit 72svh lagen die Band-Schnitte 08:31/09:44 bei
   1.02vh Span — ueber der SPEC-§4-Obergrenze von 0.9vh (nachgemessen
   30.08., Erstverifikation, nach dem Lazy-Load-Fix). */
.band-bild { margin: 0; height: min(60svh, 40rem); overflow: hidden; }
.band-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-text {
  padding: clamp(1.75rem, 4vw, 3rem) var(--sc-gutter) 0;
  max-width: var(--sc-maxw); margin-inline: auto;
}
.band-text--rechts { display: grid; justify-items: end; text-align: right; }
.band-text--rechts .satz { text-align: right; }

/* -- Split: Bild und Text nebeneinander -------------------------------- */
.split {
  display: grid; grid-template-columns: 7fr 5fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.5rem, 6vw, 5rem) var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto;
}
.split-bild { margin: 0; }
.split-bild img { width: 100%; height: auto; display: block; }
.split--rechts .split-bild { order: 2; }
.split--rechts .split-text { order: 1; justify-self: end; text-align: right; }

/* -- Gebiete ----------------------------------------------------------- */
.gebiet {
  display: grid; grid-template-columns: 4fr 7fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(2rem, 5vw, 3.75rem) var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto;
}
.gebiet--b .gebiet-bild { order: 2; }
.gebiet--b .gebiet-text { order: 1; }
.gebiet-bild {
  /* width:100% ist Pflicht: mit justify-self:center allein waere die Figure
     shrink-to-fit und kollabierte vor dem Lazy-Load des Bildes auf 0x0
     (img width:100% loest zirkulaer zu 0 auf) — ~900px Layout-Shift beim
     ersten Durchscrollen. Gefunden 30.08. bei der Erstverifikation. */
  margin: 0; width: 100%; max-width: 26rem; justify-self: center;
}
.gebiet-bild img {
  /* Quadrat-Beschnitt (Crop, keine Verzerrung): die drei Hochformat-
     Detailfotos (1188x1574) trieben die Gebiets-Schnitte sonst auf
     0.73-0.75vh — ueber der verbindlichen Beat-4-Obergrenze von 0.6vh
     (SPEC §4). Mobil gilt weiterhin der 5/4-Beschnitt unten. */
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.gebiet h2 {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 670;
  letter-spacing: var(--sc-track-snug);
  line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.gebiet-begriff {
  margin: 0 0 var(--sc-4);
  font-family: var(--sc-font-display);
  font-size: 0.8rem; font-weight: 640;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sc-accent);
}
.gebiet-zeile { margin: 0; max-width: 52ch; color: var(--sc-ink); }

/* Harte Grund-Stufen innerhalb der Gebietsfolge: apply-config.mjs setzt
   auf jeder zweiten Gebiets-Sektion die Klassen gebiet--b + grund-b. */

/* -- Zeitraffer (Peak) -------------------------------------------------- */
.zeitraffer { border-block: 1px solid var(--sc-hairline); }
/* 35svh nach SPEC §4 (~0.35vh pro Mikro-Schnitt): mit 42svh lag das
   K4-Frequenzverhaeltnis Beat 5 zu Beats 1-4 nur bei 1.86x statt >=2x. */
.mikro { height: 35svh; min-height: 15rem; overflow: hidden; }
.chip {
  position: absolute; left: var(--sc-gutter); bottom: 1rem; z-index: 2;
  margin: 0;
  background: var(--tw-kohle); color: var(--tw-kohle-ink);
  font-family: var(--sc-font-display);
  font-size: 0.74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  padding: 0.35rem 0.6rem; border-radius: 4px;
}

/* -- Werkzeug (Bußgeldlotse) -------------------------------------------- */
.werkzeug {
  background: var(--sc-accent);
  --sc-ink: #EDF4F2; --sc-ink-soft: #B9D2CE;
  color: var(--sc-ink);
}
.werkzeug-text {
  max-width: 46rem; margin-inline: auto;
  padding: clamp(4rem, 9vw, 7rem) var(--sc-gutter);
}
.werkzeug .marke--hell { color: #B9D2CE; }
.werkzeug h2 {
  margin: 0 0 var(--sc-5);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); font-weight: 660;
  letter-spacing: var(--sc-track-snug); line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.werkzeug-zitat { margin: 0 0 var(--sc-5); padding-left: var(--sc-5); border-left: 1px solid rgba(237, 244, 242, 0.4); }
.werkzeug-zitat p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.5; }
.werkzeug-btn {
  display: inline-block;
  background: #EDF4F2; color: var(--sc-accent);
  font-family: var(--sc-font-display);
  font-size: 0.95rem; font-weight: 680;
  border: none; cursor: pointer;
  padding: 0.75rem 1.2rem; border-radius: 6px;
  box-shadow: var(--sc-e2);
  transition: transform 140ms var(--sc-ease-out);
}
.werkzeug-btn:hover { transform: translateY(-1px); }
.werkzeug-btn:active { transform: translateY(1px) scale(0.985); }
.werkzeug :focus-visible { outline-color: #EDF4F2; }

/* -- Schluss ------------------------------------------------------------ */
/* Chrome-Abzug wie beim Hero: sonst schneidet die fixe Reiterzeile am
   Seitenende die Marke "Jetzt" am Kopf der Schluss-Sektion an. */
.schluss { min-height: calc(100svh - var(--tw-chrome-h)); overflow: hidden; display: grid; }
.schluss::after {
  background:
    radial-gradient(115% 85% at 0% 0%, rgba(10, 11, 14, 0.78) 0%, rgba(10, 11, 14, 0.45) 36%, rgba(10, 11, 14, 0) 64%),
    linear-gradient(to top, rgba(10, 11, 14, 0.82) 0%, rgba(10, 11, 14, 0.35) 16%, rgba(10, 11, 14, 0) 30%);
}
.schluss-block {
  position: relative; z-index: 2;
  padding: clamp(3rem, 7vw, 5.5rem) var(--sc-gutter) 1.75rem;
  color: #F4F1EA;
  display: flex; flex-direction: column; align-items: flex-start;
}
.schluss .marke--hell { color: rgba(244, 241, 234, 0.85); }
.schluss h2 {
  margin: 0 0 var(--sc-6);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight);
  max-width: 18ch; text-wrap: balance;
}
.schluss-tel {
  display: inline-block;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg); font-weight: 680;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  padding: 0.85rem 1.3rem; border-radius: 6px;
  box-shadow: var(--sc-e2);
  transition: transform 140ms var(--sc-ease-out);
}
/* Zweitkontakte unter dem Haupt-CTA: Mobil und E-Mail. Bewusst ruhiger als
   der Telefon-Button — alle Wege erreichbar, ohne den Erstkontakt zu
   verwässern. Umbruch statt Quetschen auf schmalen Displays. */
.schluss-wege {
  margin: 0.9rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  font-family: var(--sc-font-display);
  font-size: 0.9rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 241, 234, 0.9);
}
.schluss-wege .weg { white-space: nowrap; }
.schluss-wege a {
  color: inherit; text-underline-offset: 3px;
  /* Tap-Ziel ≥44px auch bei 0.9rem Schrift (gemessen: 46px) */
  display: inline-block; padding: 0.72rem 0; margin: -0.72rem 0;
}
.schluss-wege a:hover { color: #FFF; }
.schluss-wege a:focus-visible { outline-color: #F7F5F1; }

.schluss-tel:hover { transform: translateY(-1px); }
.schluss-tel:active { transform: translateY(1px) scale(0.985); }
.schluss-tel:focus-visible { outline-color: #F7F5F1; }
.fuss {
  margin-top: auto;
  padding-top: clamp(3rem, 12svh, 8rem);
  font-family: var(--sc-font-display);
  font-size: 0.78rem; line-height: 1.7;
  color: rgba(244, 241, 234, 0.88);
}
.fuss p { margin: 0 0 0.2rem; }
.fuss a { color: inherit; text-underline-offset: 3px; }
/* Mini-Impressum: Telefon, E-Mail, Öffnungszeiten (aus kanzlei.json) */
.fuss-kontakt { font-weight: 600; }
/* Öffnungszeiten noch nicht belegt: unübersehbarer Platzhalter statt
   erfundener Zeiten — fällt beim Gegenlesen auf, wirkt nicht kaputt. */
.zeiten-offen {
  display: inline-block;
  border: 1px dashed rgba(244, 241, 234, 0.7);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.72rem;
}

/* ================================================== Breakpunkte ======= */
@media (max-width: 960px) {
  /* Kanzleiname weicht dem Kontaktblock. Seit Telefon UND E-Mail dauerhaft
     in der Leiste stehen (Kundenwunsch 06.09.), reicht der Platz darunter
     nicht mehr: gemessen 900px = 11px Überlappung, 1024px = 48px Luft.
     Der Name steht unmittelbar darunter im Hero, die Kontaktwege nicht. */
  .leiste-name { display: none; }
}

@media (max-width: 860px) {
  .split, .split--rechts { grid-template-columns: 1fr; gap: 1.25rem; padding-block: 2.25rem; }
  .split--rechts .split-bild { order: 1; }
  .split--rechts .split-text { order: 2; justify-self: start; text-align: left; }
  .split--rechts .split-text .satz { text-align: left; }
  .gebiet, .gebiet--b { grid-template-columns: 1fr; gap: 1.25rem; }
  .gebiet--b .gebiet-bild { order: 1; }
  .gebiet--b .gebiet-text { order: 2; }
  .gebiet-bild { max-width: 100%; }
  .gebiet-bild img { aspect-ratio: 5 / 4; object-fit: cover; }
  .band-text--rechts { justify-items: start; text-align: left; }
  .band-text--rechts .satz { text-align: left; }
}

@media (max-width: 700px) {
  .hero h1 { font-size: var(--sc-t-2xl); }
  /* Fund 22.09.2026 (Tim): Die vier Regeln, die hier bis eben standen
     (.hero auf flex/Spalte umstellen, den Scrim abschalten, .hero .voll auf
     eine statische 44svh-Flaeche zwingen, .hero-block eine Kohle-Flaeche
     geben), waren Reste EINER FRUEHEREN Hero-Fassung ("Bild oben, Textblock
     auf Kohle darunter") — aus der Zeit vor dem Gerichtssaal-Hintergrund vom
     17.09.2026. Weil .hero .voll (zwei Klassen, Spezifitaet 0,2,0) staerker
     wiegt als die eigentliche, unten im Datei stehende .hero-bild-Regel
     (0,1,0), gewann sie trotzdem noch auf jedem Bildschirm unter 700px —
     und riss das Hintergrundbild aus seiner Position: absolute heraus in
     den normalen Textfluss, wo es als eigener, 44svh hoher Block VOR dem
     Text erschien, statt dahinter zu liegen. Auf dem Desktop fiel das nie
     auf, weil dort ausschliesslich die neuere Regel griff.
     Ohne die vier Regeln bleibt .hero-bild jetzt auch mobil absolut
     positioniert (aus der unconditional .hero-bild-Regel weiter unten) —
     dieselbe leise, aufgehellte Gerichtssaal-Textur wie auf dem Desktop,
     mit demselben Scrim (.hero::after, 82% Seitengrund) darueber. */
  .schluss h2 { font-size: var(--sc-t-xl); }
  .mikro { height: 38svh; min-height: 12rem; }
  /* Der Fuß (Mini-Impressum) wächst mobil auf mehrere Zeilen und ragt in
     helle Bildpartien (Papiere, Lampenschein) — der Desktop-Scrim reicht
     dort nicht für 4.5:1. Untere Dichte-Zone kräftiger und höher, weiterhin
     lokal unter dem Textblock, kein vollflächiges Overlay. */
  .schluss::after {
    background:
      radial-gradient(115% 85% at 0% 0%, rgba(10, 11, 14, 0.78) 0%, rgba(10, 11, 14, 0.45) 36%, rgba(10, 11, 14, 0) 64%),
      linear-gradient(to top, rgba(10, 11, 14, 0.92) 0%, rgba(10, 11, 14, 0.85) 34%, rgba(10, 11, 14, 0.35) 48%, rgba(10, 11, 14, 0) 62%);
  }
}

@media (max-width: 640px) {
  .fwort { display: none; }
  .leiste-ort { display: none; }
  .zeitleiste { gap: 0.6rem; }
  /* Enger, aber beide Kontaktwege bleiben lesbar. */
  .leiste-kontakt { gap: 0.55rem; }
  .leiste-mail { font-size: 0.74rem; }
}

@media (max-width: 560px) {
  /* Die Klappuhr ist dekorativ (aria-hidden) und weicht hier den beiden
     Kontaktwegen: Ohne sie passen Telefon und volle E-Mail nebeneinander,
     mit ihr brach die Nummer auf zwei Zeilen um und sprengte die Leiste. */
  .flap { display: none; }
  .zeitleiste { grid-template-columns: 1fr auto; }
  .leiste-kontakt { gap: 0.7rem; }
  .fuss {
    /* Platz für den Lotse-Knopf unten rechts (FAB, fixed bottom/right).
       WICHTIG: margin-bottom, NICHT padding-bottom — Padding liegt innerhalb
       der Border-Box, die Fusszeilen-Rect reichte damit trotz Puffer bis ans
       Seitenende in die FAB-Zone (Regression gefunden 30.08.: Fusszeile war
       durch Content-Wachstum auf 298px angewachsen, Rect-Overlap 52px).
       Margin hebt die Box selbst ueber die FAB-Zone, unabhaengig davon, wie
       hoch die Fusszeile kuenftig wird. Der Wert kommt zur Laufzeit aus
       tagwerk.js (gemessene FAB-Zone + 32px Reserve, --lotse-fab-platz);
       der Fallback 7rem deckt die FAB-Zone (24px bottom + 56px Knopf = 80px)
       plus 32px Reserve auch ohne JS. Right-Padding bleibt fuer den
       Ueberlappweg waehrend des Scrollens. */
    padding-right: 4.75rem;
    margin-bottom: var(--lotse-fab-platz, 7rem);
  }
}

@media (max-width: 480px) {
  /* .leiste-name weicht bereits ab 700px, siehe oben. */
}

/* ================================================ Reduced Motion ====== */
@media (prefers-reduced-motion: reduce) {
  .fc, .fsek, .fwort, .schluss-tel { transition: none; }
  /* tagwerk.js tickt das Sekundenregister unter reduced-motion bewusst
     nicht — dann darf .zeit-echt es auch nicht einblenden, sonst steht
     dort ein eingefrorenes "00" (gefunden 30.08., Erstverifikation). */
  .zeit-echt .fsek { opacity: 0; visibility: hidden; }
}

/* ============================================================================
   UMBAU 07.09.2026 — „Notdienst"

   Alles unterhalb dieser Linie ueberschreibt die Tagwerk-Gestaltung dort, wo
   Gamroths Rueckmeldung sie widerlegt hat. Bewusst als Block am Ende statt als
   Eingriff im Original: So bleibt nachvollziehbar, was die Vorlage war und was
   seine Entscheidung ist.

   1. Die Leiste trug eine Klappuhr. Jetzt traegt sie seine Mobilnummer.
   2. Der Auftakt war ein Vollbild (Hand schliesst die Tuer auf) mit hellem
      Text auf dunklem Scrim. Jetzt: heller Grund, sein Portraet, die Nummer.
   ========================================================================== */

/* --- 1. Die Notdienstleiste ------------------------------------------------
   Vorher drei Spalten (Uhr | Name | Kontakt), jetzt zwei: Name links, Nummer
   rechts. Die Nummer ist der Grund, warum die Leiste ueberhaupt existiert. */
.zeitleiste { grid-template-columns: 1fr auto; }

.leiste-notruf {
  justify-self: end;
  display: flex; align-items: baseline; gap: 0.5rem;
  text-decoration: none; color: var(--tw-kohle-ink);
  padding: 0.35rem 0.7rem; border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--tw-kohle-ink) 34%, transparent);
  background: color-mix(in oklab, var(--tw-kohle-ink) 7%, transparent);
  transition: border-color 180ms var(--sc-ease-out), background 180ms var(--sc-ease-out);
  white-space: nowrap;
}
.leiste-notruf-label {
  font-size: 0.62rem; font-weight: 620; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--tw-kohle-ink) 76%, var(--tw-kohle));
}
.leiste-notruf-nr {
  font-size: 0.94rem; font-weight: 640; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.leiste-notruf:hover { border-color: var(--tw-kohle-ink); background: color-mix(in oklab, var(--tw-kohle-ink) 12%, transparent); }
.leiste-notruf:focus-visible { outline: 2px solid #9FD4CE; outline-offset: 2px; }

/* --- 2. Der Auftakt --------------------------------------------------------
   Kein Vollbild, kein Scrim: Das Bild IST jetzt sein Portraet, und es steht
   neben dem Text statt darunter. Damit faellt auch der dunkle Verlauf weg,
   der nur dazu da war, Text ueber einer Fotografie lesbar zu halten. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  background: var(--sc-canvas);
  padding-inline: var(--sc-gutter);
  overflow: visible;
}
.hero::after { content: none; }              /* Scrim entfaellt ersatzlos */

.hero-block {
  position: relative; z-index: 2;
  padding: 0; padding-block: clamp(2rem, 6svh, 4rem);
  max-width: 34rem;
  color: var(--sc-ink);
}
.hero-block .marke { color: var(--sc-ink-soft); }
.hero h1 { color: var(--sc-ink); }
.hero-wer { color: var(--sc-ink-soft); }
.hero-gebiete {
  margin-top: var(--sc-4);
  color: var(--sc-ink-soft);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  padding-top: var(--sc-3);
}

.hero-portrait { margin: 0; align-self: end; }
.hero-portrait img {
  display: block; width: 100%; height: auto;
  max-height: min(74svh, 620px); object-fit: cover; object-position: 50% 22%;
  border-radius: 3px;
  box-shadow: var(--sc-e2);
}

/* Die Nummer als Handlung, nicht als Angabe. Gamroths Vorgabe: Sie soll das
   Erste sein, was jemand sieht. Deshalb Akzentflaeche, grosse Ziffern und
   die volle Zeilenbreite als Tap-Ziel. */
.notruf {
  display: inline-flex; flex-direction: column; gap: 0.15rem;
  margin: var(--sc-4) 0 var(--sc-2);
  padding: 0.85rem 1.4rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: 4px; text-decoration: none;
  box-shadow: var(--sc-e1);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.notruf-label {
  font-family: var(--sc-font-display);
  font-size: 0.66rem; font-weight: 640; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-accent-ink) 84%, var(--sc-accent));
}
.notruf-nr {
  font-family: var(--sc-font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 700;
  letter-spacing: 0.005em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.notruf:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); }
.notruf:active { transform: translateY(1px) scale(0.99); }
.notruf:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.hero-erreichbar {
  margin: 0; max-width: 32ch;
  font-size: 0.95rem; color: var(--sc-ink-soft);
}

/* Die Bueroeffnungszeiten stehen bewusst getrennt und leiser als die
   Mobilnummer. Gleichrangig gesetzt wuerden sie die Aussage von oben
   aufheben (Entscheidung Tim, 07.09.2026). */
.fuss-zeiten { opacity: 0.85; }

@media (max-width: 880px) {
  /* Portraet ueber den Text: Bei schmalem Fenster gewinnt die Lesbarkeit der
     Nummer gegen die Nebeneinander-Komposition. */
  .hero { grid-template-columns: 1fr; align-items: start; gap: var(--sc-4); }
  .hero-portrait { order: -1; justify-self: start; align-self: start; padding-top: clamp(1rem, 4svh, 2rem); }
  .hero-portrait img { width: clamp(120px, 34vw, 210px); max-height: none; aspect-ratio: 4 / 5; }
  .hero-block { padding-block: 0 clamp(1.5rem, 5svh, 3rem); }
}

@media (max-width: 560px) {
  .leiste-notruf { padding: 0.3rem 0.5rem; gap: 0.35rem; }
  .leiste-notruf-label { display: none; }   /* Die Nummer traegt sich selbst */
  .leiste-notruf-nr { font-size: 0.86rem; }
  .notruf { width: 100%; }
}

/* --- Nachtrag: zwei Funde aus der Erstverifikation (07.09.2026) ------------ */

/* 1. Altlast aus der Tagwerk-Gestaltung: Dort lag der Auftakt-Text auf einem
      Vollbild, und unter 700px bekam er dafuer eine deckende Kohleflaeche als
      Traeger. Ohne das Bild darunter blieb nur ein dunkler Block, auf dem die
      jetzt dunkle Ueberschrift fast unlesbar wurde. */
@media (max-width: 700px) {
  .hero-block { background: none; color: var(--sc-ink); }
  .hero-block .marke { color: var(--sc-ink-soft); }
}

/* 2. Die Notrufnummer in der Leiste war 114x34 gross — unter der 44px-Schwelle,
      und das ausgerechnet bei dem Element, das laut Gamroth das Wichtigste der
      Seite ist. Auf dem Telefon nimmt sie jetzt die volle Leistenbreite. */
.leiste-notruf { min-height: 44px; }
@media (max-width: 560px) {
  .zeitleiste { grid-template-columns: 1fr; }
  .leiste-notruf {
    justify-self: stretch; justify-content: center;
    min-height: 40px; padding-block: 0.25rem;
  }
  .leiste-notruf-nr { font-size: 1rem; }
}

/* Die Leiste war 3.25rem (52px) hoch; darin blieben der Notruf-Flaeche nach
   Innenabstand 40px. Auf dem Telefon bekommt sie 3.5rem, damit das wichtigste
   Tap-Ziel der Seite die 44px-Schwelle wirklich erreicht. */
@media (max-width: 560px) {
  :root { --tw-leiste-h: 3.5rem; }
  .leiste-notruf { min-height: 44px; }
}

/* Fund aus der Erstverifikation: Die Fusszeile liegt ueber der hellsten Stelle
   des Abendfotos. Gemessen wurde nicht der Durchschnitt, sondern der hellste
   Bildpunkt unter jedem Textblock, mit beiden Verlaufsebenen im Canvas
   nachgebaut: Kontaktzeile 3,56:1 und Buerozeiten 4,38:1 gegen die geforderten
   4,5:1. Der untere Verlauf endete zu frueh — er war auf die kuerzere
   Tagwerk-Fusszeile gerechnet, die noch keinen eigenen Buerozeiten-Absatz
   hatte. Er reicht jetzt hoeher und deckt dichter.

   Der radiale Verlauf oben links bleibt unveraendert: Er traegt die
   Ueberschrift (4,72:1 bei 54px, Schwelle 3) und laesst die rechte
   Bildhaelfte bewusst frei. */
.schluss::after {
  background:
    radial-gradient(115% 85% at 0% 0%, rgba(10, 11, 14, 0.78) 0%, rgba(10, 11, 14, 0.45) 36%, rgba(10, 11, 14, 0) 64%),
    linear-gradient(to top,
      rgba(10, 11, 14, 0.88) 0%,
      rgba(10, 11, 14, 0.70) 12%,
      rgba(10, 11, 14, 0.42) 20%,
      rgba(10, 11, 14, 0) 34%);
}

/* Fund aus Tims Durchsicht (07.09.2026): Das Portraet stand mit `align-self:
   end` genau auf der Unterkante des Auftakts — und weil dort ohne Bodenabstand
   sofort das Vollbild des naechsten Bandes beginnt, klebten zwei Fotos ohne
   jede Luft aneinander. Gemessener Abstand: 0 px.

   Der Auftakt bekommt deshalb unten Raum. Das Portraet bleibt auf der
   Grundlinie stehen, aber die Grundlinie liegt jetzt ueber der Sektionskante,
   nicht auf ihr. */
.hero { padding-block-end: clamp(2.5rem, 7vh, 5.5rem); }

@media (max-width: 880px) {
  /* Dort liegt das Portraet oben und der Text darunter — der Abstand kommt
     schon aus dem Block selbst, hier reicht deutlich weniger. */
  .hero { padding-block-end: clamp(1.5rem, 4svh, 2.5rem); }
}

/* Die Notfallnummer im Auftakt: eine Angabe, keine Handlung. Sie steht als
   Link im Fliesstext unter dem Kanzlei-Knopf, damit die Erreichbarkeitszusage
   an der Nummer haengt, die sie einloest — ohne dem Festnetz die Hauptrolle
   streitig zu machen (Aufteilung Tim, 07.09.2026). */
.hero-erreichbar { max-width: 38ch; }
.hero-kanzlei {
  color: var(--sc-accent); font-weight: 600;
  white-space: nowrap;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.hero-kanzlei:hover { text-decoration-thickness: 2px; }
.hero-kanzlei:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 2px; }

/* Der Notfall-Link ist eine Telefonnummer und wird angetippt, war als
   Fliesstext-Link aber nur 105x19 px gross. `padding-block` vergroessert bei
   einem Inline-Element die Trefferflaeche, ohne die Zeilenhoehe zu aendern —
   der Zeilenfall bleibt exakt wie er ist, die Flaeche waechst nach oben und
   unten ueber die Zeile hinaus. */
.hero-kanzlei { padding-block: 0.8rem; }   /* ergibt gemessene 44px Trefferhoehe */

/* Fund aus Tims Durchsicht: Das Portraet war beschnitten — `object-fit: cover`
   gegen eine feste `max-height` ergab 550x620 statt der natuerlichen 550x718,
   also 98 px weniger Hoehe. Bei einem Gesicht ist das keine Geschmacksfrage:
   Kinn und Haaransatz fielen weg.

   Ein Portraet wird nicht beschnitten. Statt die HOEHE zu deckeln und den Rest
   wegzuschneiden, wird die BREITE gedeckelt und die Hoehe folgt dem Bild.
   Damit gibt es keinen Beschnitt mehr, in keiner Fenstergroesse. */
.hero-portrait img {
  width: 100%; height: auto;
  max-width: 27rem; max-height: none;
  object-fit: fill;            /* wirkungslos bei height:auto, aber eindeutig */
  object-position: 50% 50%;
  justify-self: start;
}
.hero-portrait { justify-self: center; }

@media (max-width: 880px) {
  .hero-portrait img { width: clamp(120px, 34vw, 210px); aspect-ratio: auto; }
}

/* ============================================================================
   FARBWELT „Schiefer & Messing" — von Tim gewaehlt am 07.09.2026

   Grund #EDEBE7, Schiefer #232629, Messing #C4A05A.

   Eine Regel traegt den ganzen Block: **Messing ist eine Akzentfarbe, keine
   Textfarbe und keine Flaeche.** Auf dem hellen Grund kommt Messing nur auf
   1,97:1 — unlesbar. Es taugt fuer kleine Markierungen auf DUNKLEM Grund und
   als Flaeche mit dunkler Schrift darauf. Ueberall dort, wo die alte Palette
   ihr Petrol als Text oder als grosse Flaeche benutzt hat, tritt deshalb der
   Schiefer an seine Stelle, nicht das Messing.

   Fuer Messing als Text auf hellem Grund gibt es einen eigenen, abgedunkelten
   Ton (--nd-messing-tief, 5,1:1).
   ========================================================================== */
:root {
  --sc-canvas:     #EDEBE7;
  --sc-surface:    #E3E1DC;
  --sc-ink:        #232629;
  --sc-ink-soft:   #5A5E62;   /* 5,5:1 auf dem Grund */
  --sc-accent:     #C4A05A;   /* Messing — nur auf Dunkel oder als Flaeche */
  --sc-accent-ink: #232629;   /* Schrift AUF Messing: 6,2:1 */

  --nd-messing-tief: #7A5E1E; /* Messing als Text auf hellem Grund: 5,1:1 */

  --tw-kohle:      #232629;
  --tw-kohle-ink:  #E8E6E1;
}

/* Der Sprunglink lag auf dem Akzent. Auf Messing mit heller Schrift waere er
   unlesbar, also Schiefer. */
.skip { background: var(--tw-kohle); color: var(--tw-kohle-ink); }

/* Der Rechtsgebiet-Marker war Akzentfarbe als TEXT auf hellem Grund. */
.gebiet-begriff { color: var(--nd-messing-tief); }

/* Der Werkzeug-Beat war eine vollflaechige Akzentflaeche mit heller Schrift.
   Als Messingflaeche ergaebe das 2,5:1. Er wird zur Schieferflaeche — dort
   traegt das Messing dann die kleinen Markierungen und den Knopf. */
.werkzeug {
  background: var(--tw-kohle);
  --sc-ink: #F1EFEA; --sc-ink-soft: #B6B2A8;
  color: var(--sc-ink);
}
.werkzeug .marke--hell { color: var(--sc-accent); }
.werkzeug-btn { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* Der Kanzlei-Knopf: Schieferflaeche, Messing nur auf dem Kleinlabel — genau
   die Aufteilung aus der gewaehlten Vorlage. */
.notruf { background: var(--tw-kohle); color: var(--tw-kohle-ink); }
.notruf-label { color: var(--sc-accent); }
.notruf-nr { color: var(--tw-kohle-ink); }
.notruf:focus-visible { outline-color: var(--tw-kohle); }

/* Die Notfallnummer im Fliesstext: abgedunkeltes Messing statt Petrol. */
.hero-kanzlei { color: var(--nd-messing-tief); }
.hero-kanzlei:focus-visible { outline-color: var(--nd-messing-tief); }

/* Die Nummer in der Leiste sitzt auf Schiefer — dort darf Messing leuchten. */
.leiste-notruf-nr { color: var(--sc-accent); }

/* ============================================================================
   FARBWELT „Akte & Tiefblau" — von Tim gewaehlt am 07.09.2026,
   loest „Schiefer & Messing" ab (der Block darueber bleibt als Historie).

   Grund #F5F4F1, Tinte #101826, Tiefblau #1D3A6B.

   Der Unterschied zur Messing-Fassung ist grundsaetzlich: Messing war hell und
   taugte deshalb weder als Text auf hellem Grund (1,97:1) noch als Flaeche mit
   heller Schrift (2,5:1) — es brauchte fuer jede Rolle eine Ausnahme. Tiefblau
   ist dunkel und kann beides: als Schrift auf dem Grund 10,2:1, als Flaeche
   mit heller Schrift 11,2:1. Die Sonderregeln entfallen ersatzlos, der Akzent
   darf ueberall stehen, wo frueher das Petrol stand.
   ========================================================================== */
:root {
  --sc-canvas:     #F5F4F1;
  --sc-surface:    #EAE8E4;
  --sc-ink:        #101826;
  --sc-ink-soft:   #616873;   /* 5,1:1 auf dem Grund */
  --sc-accent:     #1D3A6B;
  --sc-accent-ink: #F4F7FB;

  --tw-kohle:      #101826;
  --tw-kohle-ink:  #EDEFF3;
}

/* Die Ausnahmen der Messing-Fassung werden zurueckgenommen: Der Akzent traegt
   diese Rollen jetzt wieder selbst. */
.skip { background: var(--sc-accent); color: var(--sc-accent-ink); }
.gebiet-begriff { color: var(--sc-accent); }

.werkzeug {
  background: var(--sc-accent);
  --sc-ink: #F4F7FB; --sc-ink-soft: #B9C7E0;
  color: var(--sc-ink);
}
.werkzeug .marke--hell { color: #A9BEDF; }
.werkzeug-btn { background: #F4F7FB; color: var(--sc-accent); }

.notruf { background: var(--sc-accent); color: var(--sc-accent-ink); }
.notruf-label { color: color-mix(in oklab, var(--sc-accent-ink) 84%, var(--sc-accent)); }
.notruf-nr { color: var(--sc-accent-ink); }
.notruf:focus-visible { outline-color: var(--sc-accent); }

.hero-kanzlei { color: var(--sc-accent); }
.hero-kanzlei:focus-visible { outline-color: var(--sc-accent); }

/* Auf der dunklen Leiste braucht die Nummer einen helleren Blauton als den
   Akzent selbst — der waere dort zu dunkel. */
.leiste-notruf-nr { color: #9DB4DA; }

/* Auf dem Telefon steht das Portraet ueber dem Text. Mittig gesetzt haengt es
   frei ueber einer linksbuendigen Textspalte; es gehoert auf dieselbe Kante. */
@media (max-width: 880px) {
  .hero-portrait { justify-self: start; }
}

/* ============================================================================
   FARBWELT „Schiefer & Messing", Rückkehr — Gamroth per WhatsApp (14.09.2026):
   „Das ist halt meine Visitenkarte, vielleicht kann man das ja farblich etwas
   einarbeiten mit den schwarz und gold tönen." Seine Karte: dunkler,
   fast schwarzer Grund, Schrift in Messing/Gold geprägt — exakt die Palette,
   die schon einmal gebaut und kontrastgeprüft war, bevor Tim sie am selben
   Tag (07.09.2026) zugunsten von „Akte & Tiefblau" verworfen hat (Block
   darüber, bleibt als Historie stehen). Übernimmt dieselben Werte 1:1 zurück,
   keine neue Farbe erfunden — nur reaktiviert, was zur Visitenkarte passt. */
:root {
  --sc-canvas:     #EDEBE7;
  --sc-surface:    #E3E1DC;
  --sc-ink:        #232629;
  --sc-ink-soft:   #5A5E62;   /* 5,5:1 auf dem Grund */
  --sc-accent:     #C4A05A;   /* Messing — nur auf Dunkel oder als Flaeche */
  --sc-accent-ink: #232629;   /* Schrift AUF Messing: 6,2:1 */

  --nd-messing-tief: #7A5E1E; /* Messing als Text auf hellem Grund: 5,1:1 */

  --tw-kohle:      #232629;
  --tw-kohle-ink:  #E8E6E1;
}
.skip { background: var(--tw-kohle); color: var(--tw-kohle-ink); }
.gebiet-begriff { color: var(--nd-messing-tief); }
.werkzeug {
  background: var(--tw-kohle);
  --sc-ink: #F1EFEA; --sc-ink-soft: #B6B2A8;
  color: var(--sc-ink);
}
.werkzeug .marke--hell { color: var(--sc-accent); }
.werkzeug-btn { background: var(--sc-accent); color: var(--sc-accent-ink); }
.notruf { background: var(--tw-kohle); color: var(--tw-kohle-ink); }
.notruf-label { color: var(--sc-accent); }
.notruf-nr { color: var(--tw-kohle-ink); }
.notruf:focus-visible { outline-color: var(--tw-kohle); }
.hero-kanzlei { color: var(--nd-messing-tief); }
.hero-kanzlei:focus-visible { outline-color: var(--nd-messing-tief); }
.leiste-notruf-nr { color: var(--sc-accent); }

/* Kundenwunsch 17.09.2026 (Tim, nach Abschlussgespräch): die gesamte Leiste
   oben (Name, Adresse, "Im Notfall"-Label) in Messing statt im neutralen
   Kohle-Ink — bisher trug nur die Notruf-Nummer selbst die Akzentfarbe. */
.leiste-name { color: var(--sc-accent); }
.leiste-ort { color: var(--sc-accent); }
.leiste-notruf-label { color: var(--sc-accent); }

/* Kundenwunsch 17.09.2026 (Tim, nach Abschlussgespräch): ein angedeuteter
   Gerichtssaal-Hintergrund statt der reinen Kohle-Flaeche im Hero — Gamroths
   Vorgabe „amerikanischer Gerichtssaal von oben, mit Saeulen", aber danach auf
   seinen Wunsch stark aufgehellt/verschwommen, fast weiss, nur als Struktur-
   Andeutung. kie.ai-generiert (seedream/5-pro-text-to-image), aus drei
   Konzepten ausgewaehlt (Saeulen-Motiv, aus/hero-konzept-2-monumental.png im
   Original vor der Weichzeichnung), auf 1600px/JPEG verkleinert. */
.hero { position: relative; }
.hero-bild { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(7px) brightness(1.35) saturate(0.5);
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
}
.hero-block, .hero-portrait { position: relative; z-index: 2; }

/* Der Auftakt setzt jetzt den Namen an die erste Stelle — Gamroths eigene
   Konstruktion. Beide Teile stehen in derselben h1, damit die Seite weiterhin
   genau EINE Ueberschrift erster Ebene hat; die Hierarchie macht die Groesse,
   nicht die Auszeichnung. */
.h1-name {
  display: block;
  letter-spacing: var(--sc-track-tight);
  margin-bottom: 0.12em;
}
.h1-rolle {
  display: block;
  font-size: 0.54em;
  line-height: 1.2;
  font-weight: 560;
  letter-spacing: 0;
  color: var(--sc-ink);
}
@media (max-width: 880px) {
  .h1-rolle { font-size: 0.62em; }
}

/* Ein fester Umbruch in der Rollenzeile kollidierte mit dem natuerlichen und
   ergab drei ungleich lange Zeilen. Der Satz verteilt sie selbst. */
.h1-rolle { text-wrap: balance; }

/* ============================================================================
   Fund aus Tims Handy-Durchsicht (07.09.2026): Die Fusszeile war auf dem
   Telefon praktisch unlesbar.

   Gemessen bei 390x844: sechs von acht Textbloecken unter der Schwelle, die
   meisten bei 1,0 bis 2,0:1 — heller Text auf hellem Bild. Der hellste
   Bildpunkt unter der Fusszeile war (254, 239, 217), also nahezu weiss.

   Zwei Ursachen greifen ineinander. Erstens wird das Querformat-Foto
   (1920x1066) in eine 390x759 hohe Flaeche gerechnet und dabei so stark
   beschnitten, dass genau der Ausschnitt mit der brennenden Lampe stehen
   bleibt. Zweitens reicht die Abdunklung von unten nur bis 34 % Hoehe,
   waehrend der Textblock bei 35 bis 78 % liegt — also im ungeschuetzten
   Bereich.

   Die Abdunklung weiter hochzuziehen waere die falsche Antwort: Bei genug
   Deckung fuer weissen Text auf weissem Bild ist vom Foto nichts mehr uebrig.
   Auf dem Telefon macht der Abschnitt es deshalb wie alle anderen Baender —
   Bild oben, Text darunter auf eigenem Grund. Damit haengt die Lesbarkeit
   nicht mehr davon ab, was das Bild an dieser Stelle zeigt.
   ========================================================================== */
@media (max-width: 880px) {
  .schluss {
    display: block;
    min-height: 0;
    background: var(--tw-kohle);
  }
  .schluss::after { content: none; }
  .schluss .voll {
    position: static;
    aspect-ratio: 3 / 2;
  }
  .schluss .voll img { width: 100%; height: 100%; object-fit: cover; }
  .schluss-block {
    background: var(--tw-kohle);
    padding-top: clamp(2rem, 7vw, 3rem);
  }
}

/* Zweiter Teil desselben Fundes. Auf breiten Fenstern bleibt das Bild hinter
   dem Text, und dort haengt die Lesbarkeit davon ab, wo der Beschnitt die
   brennende Lampe hinschiebt: bei 1440 px bestand die Kontaktzeile mit 7,2:1,
   bei 1200 px fiel dieselbe Zeile auf 2,3:1, bei 900 px auf 1,2:1. Das ist
   nicht per Breakpoint zu loesen — es waere ein Nachziehen fuer jede Breite,
   und die naechste ungepruefte faellt wieder durch.

   Der Textblock bekommt deshalb eine eigene Dichte-SPALTE: ein Verlauf von
   links, der unter dem Text deckend ist und nach rechts auslaeuft. Damit ist
   der Untergrund des Textes bekannt, statt vom Bildinhalt abzuhaengen — die
   rechte Bildhaelfte bleibt frei. Dasselbe Prinzip, das der Auftakt der
   Tagwerk-Fassung schon benutzt hat. */
@media (min-width: 881px) {
  .schluss-block {
    background: linear-gradient(to right,
      rgba(25, 27, 30, 0.90) 0%,
      rgba(25, 27, 30, 0.88) 62%,
      rgba(25, 27, 30, 0.62) 80%,
      rgba(25, 27, 30, 0) 96%);
  }
}

/* Korrektur nach Tims Einwand (07.09.2026): Das gestapelte Layout auf dem
   Telefon — Bild oben, Text auf Farbgrund darunter — macht das Foto zur
   Dekoration. Der Text soll darauf liegen.

   Also dasselbe Prinzip wie ab 881 px, nur vertikal statt horizontal: Das Bild
   fuellt wieder die ganze Sektion, und der Textblock bringt seine eigene
   Abdunklung mit, die nach OBEN auslaeuft. Damit ist der Untergrund unter dem
   Text bekannt (unabhaengig davon, wo der Beschnitt die Lampe hinschiebt),
   und ueber dem Block bleibt das Foto unverdeckt stehen.

   Der Block sitzt dafuer am unteren Rand: oben Foto, unten Text. */
@media (max-width: 880px) {
  .schluss {
    display: grid;
    align-items: end;
    min-height: calc(100svh - var(--tw-chrome-h));
    background: none;
  }
  .schluss::after { content: ""; }
  .schluss .voll { position: absolute; inset: 0; aspect-ratio: auto; }
  .schluss .voll img { width: 100%; height: 100%; object-fit: cover; }
  .schluss-block {
    align-self: end;
    background: linear-gradient(to top,
      rgba(25, 27, 30, 0.95) 0%,
      rgba(25, 27, 30, 0.94) 68%,
      rgba(25, 27, 30, 0.82) 88%,
      rgba(25, 27, 30, 0.40) 100%);
    padding-top: clamp(2.5rem, 9vw, 4rem);
  }
}

/* Der Textblock ist hoch genug, um die ganze Sektion zu fuellen — dann bliebe
   vom Foto trotz Ueberlagerung nichts Sichtbares. Die Sektion bekommt oben
   Raum, den nur das Bild fuellt: oben Foto, darunter der abgedunkelte Text. */
@media (max-width: 880px) {
  .schluss { padding-top: clamp(10rem, 32svh, 15rem); }
}

/* Der Verlauf begann an der Blockoberkante mit 0,40 und sprang damit von 0 auf
   0,40 — sichtbar als harte waagerechte Kante quer durchs Foto. Er laeuft
   jetzt auf exakt 0 aus, und der Text bekommt genug Abstand von dieser
   Uebergangszone, damit er nicht im schwachen Teil des Verlaufs steht. */
@media (max-width: 880px) {
  .schluss-block {
    padding-top: clamp(6rem, 17svh, 9rem);
    background: linear-gradient(to top,
      rgba(25, 27, 30, 0.95) 0%,
      rgba(25, 27, 30, 0.94) 66%,
      rgba(25, 27, 30, 0.86) 80%,
      rgba(25, 27, 30, 0.52) 92%,
      rgba(25, 27, 30, 0) 100%);
  }
}

/* ============================================================================
   FARBE — Rueckmeldung Gamroth ueber den Vertrieb (10.09.2026): „Ein klein
   wenig Farbe wuerde der Seite wohl auch gut tun. Aktuell wirkt es wie ein
   recht leerer Entwurf."

   Gemessen vor dem Umbau (11.09.): Die Akzentfarbe lag auf vier Elementen,
   zwei davon sichtbar — 8,4 % der Seitenflaeche ueber 7.634 px. Die gesenkten
   Flaechen (grund-b, #EAE8E4 auf #F5F4F1) waren vom Grund kaum zu unter-
   scheiden; das ist die Leere, die er meint.

   Entscheidung Tim (11.09.2026), Variante A: KEINE neue Farbe. Die grund-b-
   Flaechen — zwei Baender, Ordnungswidrigkeiten, Zivilrecht — werden Tiefblau
   mit heller Schrift. Es sind dieselben Paare, die der Werkzeug-Schnitt seit
   dem 07.09. benutzt: Schrift 10.5:1, gedaempfte Schrift 6.6:1, Marke
   5.9:1 (alle ueber 4,5). Rhythmus hell / blau / hell / blau.

   Warum ueber .grund-b und nicht ueber neue Klassen: Der Generator vergibt
   grund-b an jede zweite Gebiets-Sektion; wer die Reihenfolge in kanzlei.json
   aendert, bekommt den Wechsel automatisch richtig.
   ========================================================================== */
.grund-b {
  background: var(--sc-accent);
  --sc-ink: var(--sc-accent-ink);
  --sc-ink-soft: #B9C7E0;
  color: var(--sc-ink);
}
.grund-b .marke { color: #A9BEDF; }
.grund-b .gebiet-begriff { color: #A9BEDF; } /* Akzent auf Akzent waere unsichtbar */
.grund-b .satz, .grund-b .gebiet-zeile { color: var(--sc-ink); }
.grund-b :focus-visible { outline-color: var(--sc-accent-ink); }

/* Der Link vom Gebiets-Schnitt zur Unterseite: dieselbe Sprache wie die
   Reiter (Display-Schrift, Versalien-Abstand), Tap-Ziel ueber Padding. */
.gebiet-mehr {
  display: inline-block; margin-top: var(--sc-4);
  font-family: var(--sc-font-display);
  font-size: 0.84rem; font-weight: 640; letter-spacing: 0.04em;
  color: var(--sc-accent); text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding: 0.55rem 0 0.15rem;
}
.gebiet-mehr:hover { border-bottom-width: 3px; }
.grund-b .gebiet-mehr { color: var(--sc-accent-ink); }

/* ============================================================================
   UNTERSEITEN (11.09.2026) — Gamroth: „neben den Spruengen ... auch eine neue
   Seite". Hybrid: der Einseiter bleibt die Startseite, jedes Rechtsgebiet
   bekommt zusaetzlich <slug>/index.html, erzeugt von apply-config.mjs.

   Statisch, ohne ScrollCraft: keine data-sc-Attribute (die haengen Inhalte
   bis zum Einblenden auf opacity 0), kein scrollcraft.js. scrollcraft.css
   wird trotzdem geladen — dort liegen die Abstands- und Schrifttokens.
   Bausteine des Einseiters werden wiederverwendet (.gebiet, .notruf,
   .schluss-tel, .schluss-wege, .fuss), damit beide Ebenen gleich aussehen.
   ========================================================================== */
.leiste-name a { color: inherit; text-decoration: none; }
.leiste-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.us-hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.us-hero h1 {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 670;
  letter-spacing: var(--sc-track-snug); line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.us-hero .notruf { margin-top: var(--sc-5); }
.us-hero .hero-erreichbar { max-width: 38ch; }

.us-text {
  max-width: var(--sc-maxw); margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--sc-gutter) clamp(3rem, 7vw, 5rem);
}
.us-text h2 {
  margin: 0 0 var(--sc-5);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); font-weight: 660;
  letter-spacing: var(--sc-track-snug); line-height: var(--sc-leading-tight);
}
.us-absatz { margin: 0 0 var(--sc-4); max-width: 62ch; font-size: var(--sc-t-lg); line-height: 1.5; }
.us-absaetze { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.us-schritte {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.us-schritt p { margin: 0; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 880px) {
  .us-schritte { grid-template-columns: 1fr; }
}

.us-anruf {
  background: var(--sc-accent);
  --sc-ink: var(--sc-accent-ink); --sc-ink-soft: #B9C7E0;
  color: var(--sc-ink);
}
.us-anruf-inner {
  max-width: var(--sc-maxw); margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--sc-gutter) 1.75rem;
  display: flex; flex-direction: column; align-items: flex-start;
}
.us-anruf .marke--hell { color: #A9BEDF; }
.us-anruf h2 {
  margin: 0 0 var(--sc-6);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight);
  max-width: 18ch; text-wrap: balance;
}
.us-weiter {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.4rem;
  font-family: var(--sc-font-display);
}
.us-weiter .marke--hell { margin: 0; flex-basis: 100%; }
.us-weiter a {
  color: var(--sc-accent-ink); text-decoration: none;
  font-size: 0.9rem; font-weight: 620; letter-spacing: 0.03em;
  border-bottom: 2px solid color-mix(in oklab, var(--sc-accent-ink) 45%, transparent);
  padding: 0.6rem 0 0.15rem;
}
.us-weiter a:hover { border-bottom-color: var(--sc-accent-ink); }
.us-weiter a:focus-visible { outline-color: var(--sc-accent-ink); }
.us-anruf .fuss { padding-top: clamp(2.5rem, 8svh, 5rem); align-self: stretch; }

/* ============================================================================
   TIEFE (11.09.2026) — Tims Einwand zur ersten Fassung der Blauflaechen:
   „irgendwie zu trocken". Vier Richtungen als Vorschau gezeigt (Verlauf,
   waermeres Blau, Blau nur als Tafel, Kohle); Tim hat den Verlauf gewaehlt.

   Dasselbe Tiefblau, aber nicht als Flaeche, sondern als weicher Verlauf
   von #25487F ueber #1D3A6B nach #152D57 — die Farbe bleibt, die Wand nicht.
   Gilt fuer ALLE blauen Flaechen, damit die Seite nicht zwei Sorten Blau
   hat. Kontrast gegen den hellsten Punkt #25487F: Schrift 8.5:1,
   gedaempft 5.3:1, Marke 4.8:1 — gegen die dunkleren Punkte
   entsprechend hoeher.
   ========================================================================== */
.grund-b, .werkzeug, .us-anruf {
  background: linear-gradient(160deg, #25487F 0%, #1D3A6B 48%, #152D57 100%);
}

/* Rückkehr zu „Schiefer & Messing" (s. Block bei .hero-portrait oben) greift
   nur bei den Variablen — dieser Verlauf hier ist mit festen Blauwerten
   geschrieben, nicht mit var(--sc-accent), und blieb deshalb blau stehen.
   Gleiche Verlaufsform (Tim wollte ausdrücklich Tiefe, keine flache Wand,
   s. Kommentar oben), nur in Schiefer statt Blau: heller/dunkler um denselben
   Mittelpunkt --tw-kohle (#232629) herum. Kontrast gegen den hellsten Punkt
   #2C2F33: Schrift 11,7:1, gedaempft 6,35:1, Messing-Akzent 5,46:1 — überall
   über der blauen Vorgabe (8.5/5.3/4.8:1). */
.grund-b, .werkzeug, .us-anruf {
  background: linear-gradient(160deg, #2C2F33 0%, #232629 48%, #191B1E 100%);
}
/* Die Textfarben von .grund-b/.us-anruf waren noch auf ihre alte Rolle
   ausgelegt — Fläche in der (hellen) Akzentfarbe mit DUNKLER Schrift darauf
   (--sc-ink: var(--sc-accent-ink)). Jetzt ist die Fläche schwarz, nicht mehr
   hell; dieselbe dunkle Schrift wäre auf Schwarz fast unsichtbar. Gleiches
   Muster wie .werkzeug oben: helle Schrift auf der Fläche, Messing nur für
   die Akzent-Marke (genau die Rolle, für die Messing laut Palettenregel
   gedacht ist: "auf DUNKLEM Grund"). */
.grund-b, .us-anruf {
  --sc-ink: #F1EFEA; --sc-ink-soft: #B6B2A8;
  color: var(--sc-ink);
}
.grund-b .marke, .grund-b .gebiet-begriff, .us-anruf .marke--hell { color: var(--sc-accent); }
.grund-b .satz, .grund-b .gebiet-zeile { color: var(--sc-ink); }
.grund-b .gebiet-mehr, .grund-b :focus-visible { color: var(--sc-accent); outline-color: var(--sc-accent); }
.us-weiter a {
  color: var(--sc-ink);
  border-bottom-color: color-mix(in oklab, var(--sc-ink) 45%, transparent);
}
.us-weiter a:hover, .us-weiter a:focus-visible { border-bottom-color: var(--sc-accent); outline-color: var(--sc-accent); }

/* ==================================================== Stimmen (17.09.2026) ==
   Fuenf Google-Rezensionen als Auszuege (Daten in kanzlei.json, der Schnitt
   wird von apply-config.mjs erzeugt). Heller Schnitt zwischen dem dunklen
   Werkzeug und dem dunklen Schluss. Messing nach der Farbwelt-Regel nur als
   kleiner Marker und als Text in der abgedunkelten Stufe (--nd-messing-tief). */
.stimmen {
  padding: clamp(2.5rem, 6vw, 5rem) var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto;
}
.stimmen-kopf { max-width: 42rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem); }
.stimmen h2 {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.stimmen-intro { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; }
.stimmen-sterne { color: var(--nd-messing-tief); letter-spacing: 0.08em; margin-right: 0.2rem; }
.stimmen-link {
  color: var(--nd-messing-tief); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.stimmen-link:hover { text-decoration-thickness: 2px; }
.stimmen-link:focus-visible { outline: 2px solid var(--nd-messing-tief); outline-offset: 2px; border-radius: 2px; }

.stimmen-liste {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
/* Feste Stufen statt auto-fit: mit auto-fit gab es bei 1462px vier Spalten
   und damit eine halbleere zweite Reihe (2 von 4). Drei Spalten sind das
   Maximum, dann geht 5 = (2+1) + (1+1+1) exakt auf. */
@media (min-width: 700px)  { .stimmen-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stimmen-liste { grid-template-columns: repeat(3, 1fr); } }
.stimme {
  margin: 0; display: flex; flex-direction: column; gap: var(--sc-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--sc-surface);
  border-left: 3px solid var(--nd-messing-tief);
  border-radius: 3px;
}
.stimme blockquote { margin: 0; }
.stimme blockquote p { margin: 0; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.stimme figcaption {
  margin-top: auto;
  font-family: var(--sc-font-display);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}
/* Die laengste Stimme steht zuerst und nimmt ab 700px zwei Spalten: bei drei
   Spalten ergibt das 2+1 / 1+1+1, bei zwei Spalten 2 / 1+1 / 1+1 — nie ein
   einzelnes Kaertchen in einer halbleeren letzten Reihe. */
@media (min-width: 700px) {
  .stimme:first-child { grid-column: span 2; }
}

/* ================================================== Kontaktformular (17.09.2026) ==
   Netlify Forms, kein eigenes Backend. Bewusst zurueckhaltend gestaltet —
   der telefonfokussierte Schluss danach bleibt die Hauptbotschaft, das
   Formular ist ein leises Zusatzangebot fuer alles ausserhalb des
   Bussgeldlotsen. */
.kontakt {
  /* Kundenwunsch 17.09.2026, zweiter Anlauf: helle Flaeche + duenne Trennlinie
     gegen die ebenfalls helle Stimmen-Flaeche war im echten Bild trotzdem
     nicht klar genug zu unterscheiden. Jetzt echtes Dunkel wie Werkzeug/
     Schluss — selbes Muster: --sc-ink/--sc-ink-soft lokal auf hell gedreht,
     Messing als Akzent ueber --sc-accent (NICHT --nd-messing-tief, der ist
     laut Farbwelt-Regel nur fuer Text auf HELLEM Grund gedacht). */
  background: var(--tw-kohle);
  --sc-ink: #F1EFEA; --sc-ink-soft: #B6B2A8;
  color: var(--sc-ink);
  padding: clamp(2.5rem, 6vw, 5rem) var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto;
}
.kontakt-kopf { max-width: 42rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.kontakt h2 {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight);
  text-wrap: balance;
  color: var(--sc-ink);
}
.kontakt-intro { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; max-width: 52ch; }

.kontakt-form { max-width: 40rem; display: flex; flex-direction: column; gap: 1rem; }
.kontakt-firma { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kontakt-zeile { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .kontakt-zeile { grid-template-columns: 1fr 1fr; } }
.kontakt-feld {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-family: var(--sc-font-display); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--sc-ink-soft);
}
.kontakt-feld--voll { grid-column: 1 / -1; }
.kontakt-optional { font-weight: 400; text-transform: none; letter-spacing: normal; }
/* Felder bewusst mit FESTEN Farben, nicht var(--sc-ink): die ist innerhalb
   von .kontakt jetzt lokal auf hell gedreht (siehe oben) — mit var(--sc-ink)
   waere die Eingabe-Schrift hell auf dem hellen Eingabefeld-Grund gewesen,
   derselbe Fehler wie beim ersten Anlauf, nur eine Ebene tiefer. */
.kontakt-feld input, .kontakt-feld select, .kontakt-feld textarea {
  font: inherit; font-family: var(--sc-font-text); font-size: 1rem; font-weight: 400;
  color: #232629; background: #F1EFEA;
  border: 1px solid transparent;
  border-radius: 4px; padding: 0.65rem 0.75rem;
}
.kontakt-feld textarea { resize: vertical; min-height: 6rem; }
.kontakt-feld input:focus-visible, .kontakt-feld select:focus-visible, .kontakt-feld textarea:focus-visible {
  outline: 2px solid var(--sc-accent); outline-offset: 1px;
}
.kontakt-einwilligung {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; color: var(--sc-ink-soft); max-width: 46ch;
}
.kontakt-einwilligung input { margin-top: 0.2rem; flex: none; }
.kontakt-einwilligung a { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 2px; }
.kontakt-senden {
  align-self: start;
  font-family: var(--sc-font-display); font-size: 0.95rem; font-weight: 640;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  border: none; border-radius: 4px; padding: 0.8rem 1.5rem;
  cursor: pointer; box-shadow: var(--sc-e1);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.kontakt-senden:hover { transform: translateY(-1px); box-shadow: var(--sc-e2); }
.kontakt-senden:active { transform: translateY(1px) scale(0.99); }
.kontakt-senden:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ================================================== Über mich (18.09.2026) ==
   Persoenlicher Abschnitt + Lebenslauf, Inhalt 1:1 von der alten Wix-Seite.
   Heller Schnitt wie Stimmen, zwischen dem dunklen Kontakt und dem dunklen
   Schluss — dieselbe Hell/Dunkel-Abwechslung wie im Rest der Seite. */
.uebermich {
  padding: clamp(2.5rem, 6vw, 5rem) var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto;
}
.uebermich-intro {
  display: grid; grid-template-columns: 4fr 7fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}
.uebermich-bild {
  margin: 0; width: 100%; max-width: 22rem; justify-self: center;
}
.uebermich-bild img {
  width: 100%; height: auto; aspect-ratio: 800 / 1044; object-fit: cover;
  border-radius: 4px; display: block;
}
.uebermich-text p { margin: 0 0 var(--sc-3); max-width: 52ch; color: var(--sc-ink); }
.uebermich-text p:last-child { margin-bottom: 0; }
.uebermich h2 {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
.uebermich-lebenslauf {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sc-4);
  border-left: 1px solid var(--sc-hairline);
}
.uebermich-lebenslauf li {
  display: grid; grid-template-columns: 13rem 1fr; gap: clamp(0.5rem, 2vw, 1.5rem);
  padding-left: clamp(1rem, 2.5vw, 1.5rem); margin-left: -1px;
  border-left: 2px solid var(--nd-messing-tief);
}
.uebermich-zeit {
  font-family: var(--sc-font-display); font-size: 0.8rem; font-weight: 640;
  letter-spacing: 0.06em; color: var(--sc-ink-soft);
}
.uebermich-eintrag { color: var(--sc-ink); }
.uebermich-stationen {
  list-style: none; margin: var(--sc-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.9rem; color: var(--sc-ink-soft);
}
.uebermich-stationen li::before { content: '— '; }
@media (max-width: 640px) {
  .uebermich-intro { grid-template-columns: 1fr; }
  .uebermich-bild { max-width: 14rem; }
  .uebermich-lebenslauf li { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ======================================= Umbau 21.09.2026 (Tims Wunsch) ==
   1. Reiterleiste: hinter den vier Rechtsgebieten weitere Reiter (Bußgeld-
      lotse, Bewertungen, Über mich, Kontakt), optisch durch einen feinen
      Strich abgesetzt. Der Lotse-Reiter ist ein <button> (oeffnet das
      Werkzeug direkt) und wird hier auf das Aussehen der Links gebracht.
   2. Kontaktformular: kein eigener Schnitt mehr, sondern im Schluss unter den
      Nummern, auf dem Schlussbild. Die Felder behalten ihre festen hellen
      Farben (siehe Kontaktformular oben); nur Beschriftung/Intro werden hier
      lokal auf hell gedreht, weil der Schluss dunkel ist.
   3. Über mich: stand vorher zwischen dem dunklen Kontakt und dem Schluss.
      Ohne den Kontakt stiesse es hell an die hellen Stimmen — dasselbe
      Problem, das Gamroth am 17.09. bemaengelt hat — seit dem Tausch
      Bewertungen/Werkzeug (21.09.) geloest durch die Reihenfolge selbst. */
.gebiete-nav .reiter-lotse {
  appearance: none; background: none; border: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; white-space: nowrap;
  font: inherit; font-size: 0.74rem; font-weight: 620;
  text-transform: uppercase; letter-spacing: 0.09em;
  /* Wie die uebrigen Reiter, nicht hervorgehoben (Tim, 21.09.2026). */
  color: var(--sc-ink-soft);
  border-bottom: 2px solid transparent; padding-inline: 0.1rem;
  transition: color 140ms linear, border-color 140ms linear;
}
.gebiete-nav .reiter-lotse:hover { color: var(--sc-ink); }
.gebiete-nav .reiter-lotse:focus-visible { outline-offset: -3px; }
.gebiete-nav [data-trenner] {
  position: relative;
  margin-left: clamp(0.35rem, 1vw, 0.9rem);
}
.gebiete-nav [data-trenner]::before {
  content: ""; position: absolute;
  left: calc(-1 * clamp(0.9rem, 2vw, 1.6rem));
  top: 30%; bottom: 30%; width: 1px;
  background: var(--sc-hairline-strong);
}

.schluss-kontakt {
  --sc-ink: #F1EFEA; --sc-ink-soft: #C9C5BB;
  width: 100%; max-width: 40rem;
  scroll-margin-top: calc(var(--tw-chrome-h) + 1rem);
}
.schluss-kontakt-titel {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 680;
  letter-spacing: var(--sc-track-tight); line-height: var(--sc-leading-tight);
  color: var(--sc-ink); text-wrap: balance; max-width: 18ch;
}
.schluss-kontakt .kontakt-intro { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.schluss-kontakt .kontakt-feld,
.schluss-kontakt .kontakt-einwilligung { color: var(--sc-ink-soft); }
.schluss-kontakt .kontakt-einwilligung a { color: var(--sc-ink); }
.schluss-kontakt .kontakt-senden:focus-visible { outline-color: #F7F5F1; }

/* Über mich: HELL auf dem normalen Seitengrund (Tim, 21.09.2026). Ein
   dunkler Zwischenstand und danach ein eigener dritter Hellton (#E3E1DC)
   wurden verworfen: Seit die Bewertungen VOR dem Werkzeug stehen, liegt
   zwischen beiden hellen Abschnitten ohnehin die dunkle Werkzeugflaeche —
   ein Sonderton braeuchte keinen Zweck mehr und wirkte nur grau. */
.uebermich { background: var(--sc-canvas); }

/* Farbabgleich der Schluss-Scrims (Fable, 21.09.2026): Die Dichte-Spalte
   ueber dem Schlussbild (.schluss-block, Desktop und Mobil) war noch mit dem
   Tiefblau rgba(16,24,38) der am 07.09. verworfenen Palette geschrieben —
   der einzige Abschnitt in einer anderen Farbfamilie als Schiefer. Jetzt
   rgba(25,27,30), der dunkle Endpunkt des Schiefer-Verlaufs aller anderen
   dunklen Flaechen. Die Regeln selbst stehen oben, hier nur der Vermerk. */