/* Seitengestaltung poschmann-steuerberater.de
 *
 * Regeln (geprüft von tools/pruefe_css.py, Kriterien in docs/qualitaetskriterien.md):
 *   - Farben nur aus tokens.css (--c-*), nie als Hex-Wert — sonst greift data-scheme nicht.
 *   - Schriftgrößen nur aus der Typoskala (--s-*), Abstände nur aus der Abstandsskala (--a-*),
 *     ein Radius (--radius). Freie Längen nur für Haarlinien (1–3 px).
 *
 * Gestaltungsidee (Variante B): ein Raster für die ganze Seite — Randspalte (4) und Inhaltsspalte (8),
 * vom Kopf bis zum Fuß. Jeder Menüpunkt ist ein Bereich mit eigener Fläche. Prägendes Element: das
 * Gedicht im Einstieg. Bewegung nur zweimal und nur durch Scrollen: das Bildband gleitet langsamer
 * als die Seite, Überschriften der Randspalte laufen mit. Bei „Bewegung reduzieren“ steht alles. */

/* ---- Schriften (selbst gehostet, Herkunft: fonts/QUELLEN.md) ---- */
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/fira-sans/FiraSans-Latin-Regular.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("/assets/fonts/fira-sans/FiraSans-Latin-Italic.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/fira-sans/FiraSans-Latin-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 300 800; font-style: normal; font-display: swap;
  src: url("/assets/fonts/open-sans/OpenSans-Latin%5Bwght%5D.woff2") format("woff2"); }

/* ---- Skalen ---- */
:root {
  /* Typoskala: Grundschrift 18 px, Verhältnis 1,25 (Major Third) */
  --s--1: 0.72rem;        /* 11,5 px — nur Quellenhinweise in Karten */
  --s-0: 0.9rem;          /* 14,4 px */
  --s-1: 1.125rem;        /* 18 px   */
  --s-2: 1.40625rem;      /* 22,5 px */
  --s-3: 1.7578125rem;    /* 28,1 px */
  --s-4: 2.197265625rem;  /* 35,2 px */
  --s-5: 2.746582031rem;  /* 43,9 px */
  --s-6: 3.433227539rem;  /* 54,9 px */

  /* Abstandsskala: 4-/8-px-Raster */
  --a-1: 0.25rem;  /*  4 */
  --a-2: 0.5rem;   /*  8 */
  --a-3: 1rem;     /* 16 */
  --a-4: 1.5rem;   /* 24 */
  --a-5: 2rem;     /* 32 */
  --a-6: 3rem;     /* 48 */
  --a-7: 4rem;     /* 64 */
  --a-8: 6rem;     /* 96 */

  /* Laufweiten */
  --laufweite-titel: -.01em;
  --laufweite-gross: -.02em;
  --laufweite-kapitaelchen: .14em;
  --laufweite-kapitaelchen-eng: .08em;   /* Wortmarke unter 360 px, damit der Menüknopf daneben passt */
  --unterstrich-abstand: .2em;
  --extern-symbol: .7em;     /* Pfeil hinter externen Links */
  --extern-abstand: .25em;

  --radius: 0.25rem;
  --schatten: 0 1.5rem 3rem -1.5rem rgba(var(--c-primary-rgb), .55);
  --schatten-foto: 0 .125rem .375rem rgba(var(--c-primary-rgb), .35);

  /* Rollen, je Breite umgeschaltet */
  --h1: var(--s-4);
  --h2: var(--s-3);
  --abstand-abschnitt: var(--a-7);

  /* feste Maße (bewusst als Token, damit sie benannt sind) */
  --lesebreite: 68ch;
  --zeitspalte: 11.5rem;
  --punkt: 0.75rem;
  --symbol: 1.5rem;
  --portraet: 7.5rem;      /* Handy */
  --buehne-hoehe: clamp(32rem, 72vh, 44rem);   /* Bühne ab 992 px */
  --buehne-karte-handy: 30rem;                   /* Karte über dem Text, schmale Bildschirme */
  --buehne-text: 34rem;
  /* Kopfkarte „breit“ (tools/biesdorf_karte.py, KOPF['breit']): Band 3800 × 760, immer volle Höhe.
     Ihr Bezugspunkt (fx = 63 % der Kartenbreite) liegt auf --karte-anker der Bühne. */
  --karte-format: 5;
  --karte-bezug: 63%;
  --karte-anker: 50%;
  --c-umland: color-mix(in srgb, var(--c-border) 45%, var(--c-bg));
  --schriftzug: 9rem;      /* 144 px: Schriftzug-Original 230 px → 0,80 bei DPR 2 */
  --qr: 17.25rem;          /* 276 px = 4 px je Modul */
  --karte-hoehe: 28rem;
  --karte-hinweis: 26rem;
  --rinne: var(--a-6);
  --autofill-fuellung: 50rem;  /* Innenschatten, der die Autofill-Farbe des Browsers überdeckt */     /* Abstand zwischen Rand- und Inhaltsspalte, überall gleich */
  --bildband-weg: -15.9%;  /* Bildüberstand im Band (16:9) in % der Bildhöhe, siehe Bildband */

  --schrift-text: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --schrift-titel: "Fira Sans", "Segoe UI", system-ui, sans-serif;

  /* Bootstrap an die Skalen binden */
  --bs-body-font-family: var(--schrift-text);
  --bs-body-font-size: var(--s-1);
  --bs-body-line-height: 1.6;
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius);
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-xl: var(--radius);
  --bs-border-radius-xxl: var(--radius);

  /* Helle Grundfarben, festgehalten für helle Flächen innerhalb des dunklen Bereichs */
  --hell-ink: var(--c-ink);
  --hell-text: var(--c-text);
  --hell-muted: var(--c-muted);
  --hell-link: var(--c-link);
  --hell-border: var(--c-border);
  --hell-primary: var(--c-primary);
  --hell-focus: var(--c-focus);
  --hell-success: var(--c-success);
  --hell-danger: var(--c-danger);
}
@media (min-width: 992px) {
  :root { --h1: var(--s-6); --h2: var(--s-4); --abstand-abschnitt: var(--a-8); --portraet: 11.25rem; --karte-anker: 72%; }
}
/* Kartenanker: bis 1399 px weiter rechts, damit die Fotos nicht unter Text und Knöpfe rutschen */
@media (min-width: 1400px) { :root { --karte-anker: 64%; } }
/* 992–1199 px: Bei 72 % lag das Kirchenfoto auf „Leistungen ansehen“ (bis 51 px, gemessen 29.10.2026 bei
   992 × 1200). Weiter rechts allein reicht auf hohen Fenstern nicht — die Karte wächst mit der Bühnenhöhe,
   rechts fiele ein Motiv heraus. Deshalb hier Mindesthöhe und 78 %: Luft ≥ 79 px, alle Motive im Bild. */
@media (min-width: 992px) and (max-width: 1199.98px) { :root { --buehne-hoehe: 32rem; --karte-anker: 78%; } }

/* ---- Grundlagen ---- */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; }   /* kurze Seiten: Fuß bleibt unten */
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 600; color: var(--c-ink);
  letter-spacing: var(--laufweite-titel); text-wrap: balance; margin-top: 0;
  /* lange Komposita (Datenschutzhinweise) dürfen trennen — sonst Überlauf bei 320 px (WCAG 1.4.10) */
  hyphens: auto; overflow-wrap: break-word; }
h2 { font-size: var(--h2); line-height: 1.2; margin-bottom: var(--a-5); }
h3 { font-size: var(--s-2); line-height: 1.3; margin-bottom: var(--a-3); }
a { text-underline-offset: var(--unterstrich-abstand); }
/* Externe Links: dezenter Pfeil (Bootstrap Icons „box-arrow-up-right“), rein optisch; bei den Kooperationen
   (ganze Karte ist der Link) hinter der Adresszeile. Nur am Bildschirm:
   im Druck steht dort die ausgeschriebene Adresse (druck.css). */
@media screen {
  a[href^="http"]:not(:has(.kooperation-url))::after, .kooperation-url::after { content: ""; display: inline-block; width: var(--extern-symbol); height: var(--extern-symbol);
    margin-left: var(--extern-abstand); background: currentColor; opacity: .6;
    mask: url("/assets/img/extern.svg") center / contain no-repeat; }
}
small, .small, code { font-size: var(--s-0); }
.bi { width: var(--symbol); height: var(--symbol); flex: none; }

.btn { --bs-btn-font-size: var(--s-1); --bs-btn-padding-x: var(--a-5); --bs-btn-padding-y: var(--a-2);
  --bs-btn-border-radius: var(--radius); font-family: var(--schrift-titel); font-weight: 600; }
.form-control, .form-select { font-size: var(--s-1); padding: var(--a-2) var(--a-3); border-color: var(--c-control); }
.form-check-input[type="checkbox"] { border-radius: var(--radius); }
.navbar-toggler { --bs-navbar-toggler-border-radius: var(--radius); }
/* 320 px: Wortmarke (244 px) und Menüknopf (56 px) passten nicht nebeneinander, der Knopf brach in eine
   zweite Zeile (Kopf 129 statt ~90 px). Engere Laufweite und schmalerer Knopf nur in diesem Bereich. */
@media (max-width: 359.98px) {
  .wortmarke .wortmarke-name { letter-spacing: var(--laufweite-kapitaelchen-eng); }   /* schlägt die spätere Grundregel */
  .navbar-toggler { --bs-navbar-toggler-padding-x: var(--a-2); }
}
/* Einheitlicher, kontraststarker Fokus: Bootstrap ersetzt die Kontur sonst durch einen
   halbtransparenten Schatten (Buttons, Navigation, Formularfelder). */
.btn:focus-visible, .nav-link:focus-visible, .navbar-toggler:focus-visible, .kopf-druck:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
  outline: 3px solid var(--c-focus); outline-offset: 2px; box-shadow: none; }

.skip-link { position: absolute; left: var(--a-3); top: var(--a-2); z-index: 1100;
  padding: var(--a-2) var(--a-3); background: var(--c-surface); color: var(--c-ink); }

/* ---- Raster: Randspalte 4, Inhaltsspalte 8 — für Kopf, alle Bereiche, Unterseiten und Fuß ---- */
.bereich-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-5); }
@media (min-width: 992px) {
  .bereich-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--rinne); }
  .bereich-raster > .bereich-inhalt { grid-column: 2; }
}
/* Überschriften der Randspalte laufen mit, solange ihr Bereich zu sehen ist — nur wenn der
   Bildschirm hoch genug ist, damit nichts abgeschnitten wird */
@media (min-width: 992px) and (min-height: 50rem) {
  .rand-mitlaufend { position: sticky; top: calc(var(--kopfhoehe, var(--a-8)) + var(--a-5)); }
}

/* ---- Kopf ---- */
.site-kopf { position: sticky; top: 0; z-index: 1000; background: var(--c-surface);
  border-top: 3px solid var(--c-primary); border-bottom: 1px solid var(--c-border); }
@media (min-width: 992px) {
  .kopf-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--rinne); }
  .kopf-raster .navbar-collapse { justify-content: space-between; }
  .kopf-raster .navbar-nav { gap: var(--a-5); }
  .kopf-raster .navbar-nav .nav-link { padding-inline: 0; }
}
.wortmarke { display: inline-block; text-decoration: none; line-height: 1.2; padding-block: var(--a-2); }
.wortmarke-name { display: block; font-family: var(--schrift-titel); font-variant: small-caps;
  letter-spacing: var(--laufweite-kapitaelchen); font-size: var(--s-2); color: var(--c-brand); }
.wortmarke-beruf { display: block; font-family: var(--schrift-titel); font-size: var(--s-0); color: var(--c-brand);
  border-top: 1px solid var(--c-brand); margin-top: var(--a-1); padding-top: var(--a-1); }
.navbar .nav-link { color: var(--c-text); text-decoration-thickness: 2px; text-underline-offset: var(--a-2); }
.navbar .nav-link:hover { color: var(--c-link); }
.navbar .nav-link[aria-current] { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); }
.kopf-telefon { display: none; }
@media (min-width: 992px) {
  .kopf-telefon { display: inline-flex; align-items: center; gap: var(--a-2); margin-left: var(--a-4);
    padding: var(--a-2) var(--a-3); border: 1px solid var(--c-border); border-radius: var(--radius);
    font-family: var(--schrift-titel); font-weight: 600; color: var(--c-primary); text-decoration: none; }
  .kopf-telefon:hover { border-color: var(--c-primary); color: var(--c-primary-strong); }
  .kopf-telefon .bi { width: var(--s-1); height: var(--s-1); }
  .kopf-aktionen .kopf-telefon { margin-left: 0; }
}

/* Druckfassung: unter 992 px (Menü zugeklappt) als Menüeintrag mit Text; ab 992 px als Symbol neben dem
   Telefon-Knopf (gleicher Rahmen, gleiche Höhe über align-items: stretch). Das Menü klappt deshalb erst ab
   992 px aus: Bei 768–991 px (Kopf 720 px) blieben neben den Menüpunkten nur 19 px frei. Bei 992–1199 px
   (Kopf 960 px) fehlten auch mit 16 px Menüabstand rund 55 px (gemessen 29.10.2026): Dort ist der
   Telefon-Knopf ebenfalls ein quadratisches Symbol; die Nummer bleibt als versteckter Text sein Name. */
.nav-druck { margin-top: var(--a-2); border-top: 1px solid var(--c-border); }
.nav-druck .nav-link { display: inline-flex; align-items: center; gap: var(--a-2); }
.nav-druck .bi { width: var(--s-1); height: var(--s-1); }
.kopf-druck { display: none; }
@media (min-width: 992px) {
  .nav-druck { display: none; }
  .kopf-aktionen { display: flex; align-items: stretch; gap: var(--a-3); margin-left: auto; }
  /* quadratisch: Höhe = Zeilenhöhe + Innenabstand wie beim Telefon-Knopf, Breite seitlich passend aufgefüllt */
  .kopf-druck { --seitlich: calc(var(--a-2) + (1lh - var(--s-1)) / 2);
    display: inline-flex; align-items: center; justify-content: center; padding: var(--a-2) var(--seitlich);
    font-family: var(--schrift-titel); font-weight: 600;
    border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-primary); }
  .kopf-druck:hover { border-color: var(--c-primary); color: var(--c-primary-strong); }
  .kopf-druck .bi { width: var(--s-1); height: var(--s-1); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .kopf-raster .navbar-nav { gap: var(--a-4); }
  .kopf-telefon { --seitlich: calc(var(--a-2) + (1lh - var(--s-1)) / 2); padding-inline: var(--seitlich); gap: 0; }
  /* Breite 0 statt herausgelöst: Die Zeile bleibt und gibt beiden Knöpfen die Höhe wie ab 1200 px. */
  .kopf-telefon span { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; }
}

/* ---- Bereiche: jeder Menüpunkt eine eigene Fläche ---- */
.bereich { padding-block: var(--abstand-abschnitt);
  /* --kopfhoehe setzt site.js aus der gemessenen Höhe des klebenden Kopfs */
  scroll-margin-top: var(--kopfhoehe, var(--a-8)); }
.bereich-hell { background: var(--c-surface); border-top: 1px solid var(--c-border); }
.bereich-flaeche { background: var(--c-surface-alt); }
.bereich-rand > :last-child, .rand-mitlaufend > :last-child { margin-bottom: 0; }

/* Dunkler Bereich (Kontakt): Farbrollen werden lokal umgedreht; helle Flächen darin bekommen
   die festgehaltenen hellen Werte zurück. */
.bereich-dunkel { background: var(--c-primary-strong); color: var(--c-surface);
  --c-ink: var(--c-surface); --c-text: var(--c-surface); --c-link: var(--c-surface);
  --c-muted: color-mix(in srgb, var(--c-surface) 80%, var(--c-primary-strong));
  --c-border: color-mix(in srgb, var(--c-surface) 30%, var(--c-primary-strong));
  --c-primary: var(--c-accent-soft); --c-focus: var(--c-focus-inverse); }
.bereich-dunkel a { color: var(--c-link); }
.bereich-dunkel :focus-visible { outline-color: var(--c-focus); }
.bereich-dunkel .karte {   /* Karte und Hinweis: helle Farbrollen wie außerhalb */ color: var(--hell-text);
  --c-ink: var(--hell-ink); --c-text: var(--hell-text); --c-muted: var(--hell-muted); --c-link: var(--hell-link);
  --c-border: var(--hell-border); --c-primary: var(--hell-primary); --c-focus: var(--hell-focus); }

/* ---- Einstieg ---- */
/* Eine h1 mit zwei Zeilen; die Berufszeile setzt die Überschriften-Grundregel (Gewicht, Laufweite, Ausgleich) zurück. */
.einstieg-titel { margin-bottom: var(--a-5); }
.einstieg-name { display: block; font-size: var(--h1); line-height: 1.05; letter-spacing: var(--laufweite-gross); margin-bottom: var(--a-3); }
.einstieg-beruf { display: block; font-family: var(--schrift-titel); font-size: var(--s-2); color: var(--c-primary);
  font-weight: 400; line-height: var(--bs-body-line-height); letter-spacing: normal; text-wrap: wrap; }
/* Das Gedicht: prägendes Element, groß gesetzt (ohne Strich als Auftakt — KWNO, 30.10.2026) */
.einstieg-zitat blockquote { margin: 0 0 var(--a-6);
  font-family: var(--schrift-titel); font-style: italic; font-size: var(--s-2); line-height: 1.45;
  color: var(--c-ink); letter-spacing: var(--laufweite-titel); }
/* Je Vers ein Absatz; bricht ein Vers in der schmalen Spalte um, rückt die Fortsetzung ein */
.einstieg-zitat blockquote p { margin: 0; padding-left: var(--a-4); text-indent: calc(-1 * var(--a-4)); }
@media (min-width: 576px) { .einstieg-zitat blockquote { font-size: var(--s-3); line-height: 1.4; } }
.einstieg-aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3); }
@media (max-width: 575.98px) { .einstieg-aktionen .btn { width: 100%; } }

/* Bildband: Bild höher als sein Rahmen; beim Scrollen gleitet es langsamer als die Seite.
   Nur Transform (Grafikkarte), kein Skript. Ohne Unterstützung: ruhig, mittig. */
.bildband { margin-top: var(--a-7); overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius);
  view-timeline-name: --bildband; }
@media (min-width: 992px) {
  :root { --bildband-weg: -34.6%; }   /* Rahmen 16:7 statt 16:9 */
  .bildband { aspect-ratio: 16 / 7; }
}
.bildband-bild { display: block; width: 100%; height: auto; transform: translateY(calc(var(--bildband-weg) / 2)); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bildband-bild { animation: bildband-gleiten linear both; animation-timeline: --bildband; }
  }
}
/* ---- Bühne: Biesdorf-Karte über die volle Breite (Vektor, tools/biesdorf_karte.py) ----
   Ab 992 px liegt der Text links auf einem Verlauf über der Karte; die Karte gleitet beim
   Herausscrollen langsamer als die Seite. Darunter liegt sie unter dem Text, ohne Bewegung. */
.einstieg { scroll-margin-top: var(--kopfhoehe, var(--a-8)); padding-bottom: var(--abstand-abschnitt); }
.buehne { position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-umland); border-bottom: 1px solid var(--c-border); view-timeline-name: --buehne; }
.buehne-inhalt { position: relative; z-index: 2; padding-block: var(--a-7) var(--a-6); background: var(--c-bg); }
.buehne-karte { position: relative; height: var(--buehne-karte-handy); }
.buehne-karte svg { display: block; width: 100%; height: 100%; }
.buehne-karte .bk-breit { display: none; }
@media (min-width: 768px) {
  /* Volle Höhe statt volle Breite: oben und unten wird nie beschnitten, breitere Bildschirme zeigen
     seitlich mehr Umland (vorher fiel die Kanzlei auf Breitbildmonitoren oben heraus). */
  .buehne-karte .bk-breit { display: block; position: absolute; top: 0; left: var(--karte-anker);
    width: auto; height: 100%; max-width: none; aspect-ratio: var(--karte-format);
    transform: translateX(calc(-1 * var(--karte-bezug))); }
  .buehne-karte .bk-schmal { display: none; }
}
/* Quellenhinweis unten rechts in beiden Karten (Kopf und Anfahrt) */
.buehne-quelle, .karte-quelle { position: absolute; right: 0; bottom: 0; z-index: 2; margin: 0;
  padding: var(--a-1) var(--a-2); font-size: var(--s--1); line-height: 1.3; color: var(--c-muted);
  background: color-mix(in srgb, var(--c-bg) 85%, transparent); border-top-left-radius: var(--radius); }
/* Unter 992 px steht die Karte über dem Text: Hinweis an die untere Kante der Karte, nicht der Bühne */
@media (max-width: 991.98px) {
  .buehne-quelle { bottom: auto; top: var(--buehne-karte-handy); transform: translateY(-100%); }
}
@media (min-width: 992px) {
  .buehne { min-height: var(--buehne-hoehe); justify-content: center; }
  .buehne-karte { position: absolute; inset: 0; height: auto; }
  .buehne-inhalt { background: none; padding-block: var(--a-8); }
  .buehne::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--c-bg) 0%, var(--c-bg) 28%, transparent 52%); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .buehne-karte { inset: calc(-1 * var(--a-6)) 0; animation: karte-gleiten linear both;
        animation-timeline: --buehne; animation-range: exit; }
    }
  }
}
@keyframes karte-gleiten {
  from { transform: translateY(0); }
  to { transform: translateY(var(--a-8)); }
}
.buehne-inhalt > * { max-width: var(--buehne-text); }
.buehne-inhalt .einstieg-titel { margin-bottom: var(--a-1); }
.buehne-inhalt .einstieg-aktionen { margin-top: var(--a-5); }
.einstieg-folge { margin-top: var(--abstand-abschnitt); }
.einstieg-folge .einstieg-zitat blockquote { margin-bottom: 0; }
@media (min-width: 992px) {
  .einstieg-folge { align-items: center; }       /* Gedicht mittig neben dem Bild */
  .einstieg-folge .bildband { margin-top: 0; }
}

/* Karte: Biesdorf hell vor grauem Umland; Straßen als Haarlinien; Kanzlei in Kupfer */
.bk-bezirk { fill: var(--c-bg); }
.bk-neben { fill: none; stroke: var(--c-border); stroke-width: 1; }
.bk-haupt { fill: none; stroke: color-mix(in srgb, var(--c-primary) 45%, transparent); stroke-width: 2.4; }
.bk-bahn { fill: none; stroke: var(--c-muted); stroke-width: 1.4; stroke-dasharray: 8 4; }
.bk-grenze { fill: none; stroke: var(--c-primary); stroke-width: 2; }
.bk-motiv line { stroke: var(--c-primary-strong); stroke-width: 1.5; }
.bk-ort { fill: var(--c-primary-strong); }
.bk-rahmen { fill: var(--c-surface); filter: drop-shadow(var(--schatten-foto)); }
.bk-name { fill: var(--c-ink); font-family: var(--schrift-titel); font-weight: 600;
  stroke: var(--c-bg); stroke-width: 4; stroke-linejoin: round; paint-order: stroke; }   /* heller Rand: lesbar über Linien */
.bk-kanzlei circle { fill: var(--c-accent); }
.bk-kanzlei .bk-kanzlei-hof { fill: color-mix(in srgb, var(--c-accent) 25%, transparent); }
.bk-kanzlei text { fill: var(--c-ink); font-family: var(--schrift-titel); font-weight: 600; }

.biesdorf-schriftzug { display: block; width: var(--schriftzug); aspect-ratio: 230 / 89; margin: 0 0 0 var(--a-7);
  background: var(--c-accent); mask: url("/assets/img/biesdorf-schriftzug.png") center / contain no-repeat; }

@keyframes bildband-gleiten {
  from { transform: translateY(var(--bildband-weg)); }
  to { transform: translateY(0); }
}

/* Werdegang */
.portraet { display: block; width: var(--portraet); height: auto; border-radius: var(--radius); }
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: var(--zeitspalte); top: var(--a-3); bottom: var(--a-3);
  width: 2px; background: var(--c-border); }
.zeitleiste li { position: relative; display: grid; grid-template-columns: var(--zeitspalte) minmax(0, 1fr);
  column-gap: var(--a-5); padding-block: var(--a-2); }
.zeitleiste li::before { content: ""; position: absolute; left: calc(var(--zeitspalte) - var(--punkt) / 2 + 1px);
  top: calc(var(--a-2) + var(--a-2)); width: var(--punkt); height: var(--punkt); border-radius: 50%;
  background: var(--c-surface); border: 2px solid var(--c-brand); }
.zeitleiste li:last-child::before { background: var(--c-brand); }
.zeitleiste-zeit { font-family: var(--schrift-titel); font-weight: 600; color: var(--c-primary);
  font-variant-numeric: tabular-nums; text-align: right; padding-right: var(--a-4); white-space: nowrap; }
@media (max-width: 575.98px) {
  .zeitleiste::before { left: 0; }
  .zeitleiste li { grid-template-columns: minmax(0, 1fr); padding-left: var(--a-5); }
  .zeitleiste li::before { left: calc(1px - var(--punkt) / 2); }
  .zeitleiste-zeit { text-align: left; padding-right: 0; }
}

/* Leistungen: Liste mit Haarlinien, Symbole ohne Kreis */
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; column-gap: var(--a-6); }
@media (min-width: 768px) { .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.leistungen li { display: flex; gap: var(--a-3); align-items: flex-start; padding-block: var(--a-4);
  border-top: 1px solid var(--c-border); color: var(--c-ink); }
.leistungen .bi { color: var(--c-primary); }

/* Kontakt */
.kontaktwege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-4); }
@media (min-width: 576px) and (max-width: 991.98px) {
  .kontaktwege { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-5); }
}
.kontaktwege li { display: flex; gap: var(--a-3); align-items: flex-start; }
.kontaktwege .bi { color: var(--c-primary); width: var(--s-1); height: var(--s-1); margin-top: var(--a-1); }
.kontaktweg-art { display: block; font-size: var(--s-0); color: var(--c-muted); }
.kontakt-qr { display: none; margin: var(--a-6) 0 0; }
@media (min-width: 768px) { .kontakt-qr { display: block; } }
.kontakt-qr img { display: block; width: var(--qr); height: var(--qr); max-width: 100%; }
.kontakt-qr figcaption { margin-top: var(--a-2); max-width: var(--qr); font-size: var(--s-0); color: var(--c-muted); }

/* Kontaktformular: liegt direkt auf der Fläche seines Bereichs (kein aufgesetzter Kasten).
   Felder sind leicht aufgehellte Flächen mit kräftiger Unterkante — die Kante hält 3:1 (WCAG 1.4.11). */
.formular-titel { font-size: var(--s-2); margin-bottom: var(--a-4); }
.formular-hinweis { margin-bottom: var(--a-5); padding-left: var(--a-4); border-left: 3px solid var(--c-accent);
  color: var(--c-muted); }
.formular-hinweis strong { color: var(--c-ink); }
.formular-felder { display: grid; gap: var(--a-4) var(--a-5); margin-bottom: var(--a-5); }
@media (min-width: 768px) {
  .formular-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formular-felder .feld-breit { grid-column: 1 / -1; }
}
.kontaktformular .form-label { font-family: var(--schrift-titel); font-weight: 600; color: var(--c-ink); margin-bottom: var(--a-2); }
.formular-zustimmung { margin-bottom: var(--a-5); }
.formular-abschluss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5); }
.formular-abschluss p { margin: 0; }
.cf-honig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.alert-meldung { margin-bottom: var(--a-4); font-weight: 600; }
.alert-meldung.erfolg { color: var(--c-success); }
.alert-meldung.fehler { color: var(--c-danger); }

.bereich-dunkel .kontaktformular {
  --feld: color-mix(in srgb, var(--c-surface) 8%, var(--c-primary-strong));
  --feld-kante: color-mix(in srgb, var(--c-surface) 70%, var(--c-primary-strong));
  --c-success: color-mix(in srgb, var(--hell-success) 30%, var(--c-surface));
  --c-danger: color-mix(in srgb, var(--hell-danger) 30%, var(--c-surface)); }
.bereich-dunkel .kontaktformular .form-control { background: var(--feld); color: var(--c-surface);
  border: 1px solid transparent; border-bottom: 2px solid var(--feld-kante); border-radius: var(--radius) var(--radius) 0 0; }
.bereich-dunkel .kontaktformular .form-control:focus { background: var(--feld); color: var(--c-surface);
  border-bottom-color: var(--c-surface); box-shadow: none; }
.bereich-dunkel .kontaktformular .form-control.is-invalid { border-bottom-color: var(--c-danger); background-image: none; }
.bereich-dunkel .kontaktformular .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--c-surface); box-shadow: inset 0 0 0 var(--autofill-fuellung) var(--feld); }
.bereich-dunkel .kontaktformular .form-check-input { background-color: var(--feld); border: 2px solid var(--feld-kante); }
.bereich-dunkel .kontaktformular .form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-surface); }
.bereich-dunkel .kontaktformular .form-check-input.is-invalid { border-color: var(--c-danger); }

/* Anfahrt / Karte: darüber eine Zeile im Raster, darunter die Karte über die volle Breite.
   Vorschau ist eine Vektorkarte (Kanzlei in der Mitte); der Hinweis zum Laden liegt daneben. */
.anfahrt { margin-top: var(--a-7); }
.anfahrt-titel { font-size: var(--s-2); margin: 0; }
.anfahrt-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a-2) var(--a-5); }
.anfahrt-zeile p { margin: 0; }
.anfahrt-adresse { font-weight: 600; }
.anfahrt-links { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); }
.karte { position: relative; overflow: hidden; margin-top: var(--a-4); width: 100%; height: var(--karte-hoehe);
  background: var(--c-umland); }
.karte > svg { display: block; width: 100%; height: 100%; }
.karte-hinweis { position: absolute; left: 50%; bottom: var(--a-3); transform: translateX(-50%);   /* Handy: tief genug, dass die Kanzlei (Kartenmitte) frei bleibt */
  width: min(var(--karte-hinweis), calc(100% - var(--a-5))); padding: var(--a-4); text-align: center;
  background: color-mix(in srgb, var(--c-surface) 94%, transparent); border-radius: var(--radius); box-shadow: var(--schatten); }
@media (min-width: 768px) {
  .karte-hinweis { left: auto; right: var(--a-6); bottom: auto; top: 50%; transform: translateY(-50%); }
}
.karte-hinweis p { margin: var(--a-3) 0 0; font-size: var(--s-0); color: var(--c-muted); }
/* 320 px: der Hinweis bricht öfter um und reichte bis über die Kanzlei (Kartenmitte). Eine höhere Karte
   hilft nicht — sie skaliert mit und schiebt „Kanzlei Poschmann“ über den rechten Rand. Also kompakter. */
@media (max-width: 359.98px) {
  .karte-hinweis { width: calc(100% - var(--a-3)); padding: var(--a-3); }
  .karte-hinweis p { margin-top: var(--a-2); }
}
.karte-laden { display: inline-flex; align-items: center; gap: var(--a-2); }
.karte-laden .bi { width: var(--s-1); height: var(--s-1); }
.karte-live iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Unter der Karte ein Streifen der Bereichsfarbe: rahmt die Karte als Teil von „Kontakt“
   (gemeinsame Fläche). Abstand größer als innen (Zeile → Karte: --a-4), kleiner als zwischen Bereichen. */
.bereich:has(> .anfahrt:last-child) { padding-bottom: var(--a-6); }
.bk-strasse { fill: var(--c-muted); font-family: var(--schrift-text); letter-spacing: var(--laufweite-titel);
  stroke: var(--c-bg); stroke-width: 4; stroke-linejoin: round; paint-order: stroke; }

/* Kooperationen: Haarlinie oben statt Kasten */
.kooperationen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-5); }
@media (min-width: 768px) { .kooperationen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kooperationen a { display: flex; flex-direction: column; gap: var(--a-2); height: 100%; padding-top: var(--a-3);
  border-top: 2px solid var(--c-border); text-decoration: none; color: var(--c-text); }
.kooperationen a:hover { border-top-color: var(--c-primary); }
.kooperation-name { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--s-2); line-height: 1.3; color: var(--c-ink);
  hyphens: manual; overflow-wrap: break-word; }   /* „Steuerberaterverband“ ist bei ~1000 px breiter als seine Spalte: trennt am weichen Trennstrich im Namen (automatisch trennte es „Ber-lin“) */
.kooperation-text { font-size: var(--s-0); color: var(--c-muted); }
.kooperation-url { margin-top: auto; font-size: var(--s-0); color: var(--c-link); text-decoration: underline; }

/* ---- Fuß ---- */
.site-fuss { padding-block: var(--a-7) var(--a-6); font-size: var(--s-0); }
.site-fuss p { margin-bottom: var(--a-2); }
.fuss-name { font-family: var(--schrift-titel); font-variant: small-caps; letter-spacing: var(--laufweite-kapitaelchen); font-size: var(--s-1); }
.fuss-inhalt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a-4); }
/* Telefon und E-Mail: Bezeichnungen in einer Spalte, Nummer und Adresse bündig in der zweiten */
.fuss-kontakt { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--a-3);
  row-gap: var(--a-2); margin: 0; align-content: start; }
.fuss-kontakt dt { font-weight: inherit; }
.fuss-kontakt dd { margin: 0; overflow-wrap: anywhere; }
.fuss-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-2); }

/* ---- Unterseiten ---- */
.seite h1 { font-size: var(--h2); margin-bottom: var(--a-5); }
.seite .bereich-inhalt h2 { font-size: var(--s-2); margin: var(--a-6) 0 var(--a-3); }
.seite .bereich-inhalt > h2:first-child { margin-top: 0; }
.seite blockquote { margin: 0 0 var(--a-5); padding: var(--a-3) var(--a-4); background: var(--c-accent-soft);
  border-radius: var(--radius); color: var(--c-ink); }
.seite blockquote p { margin: 0; }
.seite [id] { scroll-margin-top: calc(var(--kopfhoehe, var(--a-8)) + var(--a-3)); }
.inhalt { max-width: var(--lesebreite); overflow-wrap: break-word; }   /* lange Adressen im Bildnachweis */
.bildnachweis { padding-left: var(--a-4); }


/* Druckfassung: Kopfzeile und Werkzeugleiste zeigt nur druck.css (Ausdruck bzw. /druck/) */
.druck-meta, .druck-leiste { display: none; }