@charset "utf-8";
/* ============================================================
   ISA ERZI — Ingenieur · Sachverständiger · Bauherrenvertreter
   Designsystem 1.0 / Markensystem 1.0 / Auftritt 5.0 — Texte der bisherigen Seite
   Alle Schriften selbst gehostet. Keine Verbindung zu Dritten.
   ============================================================ */

@font-face{font-family:"Archivo Var";src:url("/schriften/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("/schriften/plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("/schriften/plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("/schriften/plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/schriften/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/schriften/plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --petrol:#0C2E2A; --petrol-tief:#071C1A; --petrol-linie:#2F534E; --petrol-linie-zart:#1E4440;
  --text-1:#10221F; --text-2:#4B5C58; --text-3:#5E6E6B;
  --weiss:#FFFFFF; --flaeche-1:#F1F4F3; --flaeche-2:#E7ECEB; --bronze-flaeche:#FBF7F1;
  --linie:#C9D2D0; --linie-zart:#E2E8E7; --bronze-linie:#E3D9C8;
  --bronze:#96631F; --bronze-hell:#D9A05A; --signal:#C13B1B;
  --auf-dunkel-1:#E4EDEB; --auf-dunkel-2:#8FAAA5; --auf-dunkel-3:#B7CBC7; --fuss-grau:#74938D;

  --sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --display:"Archivo Var","Arial Black","Helvetica Neue",Arial,sans-serif;

  --mass:1320px; --rand:56px;
  --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px; --a-5:24px; --a-6:32px;
  --a-7:48px; --a-8:64px; --a-9:96px; --a-10:128px;
  --kopf-hoch:88px; --kopf-schmal:68px;
  --dauer-kurz:120ms; --dauer:140ms; --dauer-lang:200ms; --verlauf:cubic-bezier(.2,.6,.3,1);
  --gleiten:cubic-bezier(.16,.7,.24,1); --takt:95ms; --spalt:24px; --a-11:168px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--text-1);font-family:var(--sans);
  font-size:18px;line-height:1.66;font-synthesis-weight:none;-webkit-font-smoothing:antialiased;hyphens:auto}
img,svg{display:block;max-width:100%}
img{height:auto}
:where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd){margin:0}
ul{padding:0;list-style:none}

.bahn{width:min(var(--mass),100% - 2*var(--rand));margin-inline:auto}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-weight:600;text-wrap:balance;hyphens:manual}
.dp{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:600;letter-spacing:-.024em}
h1{font-size:clamp(1.85rem,3.6vw,2.875rem);line-height:1.08;margin:0}
h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.12}
h3,h4{font-size:1.1875rem;line-height:1.26;letter-spacing:-.012em}
.titel{font-size:1.0625rem;font-weight:600;line-height:1.32;letter-spacing:-.008em;margin:0 0 5px}
p{max-width:66ch}
.lead{font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.64;color:var(--text-2)}
.text{font-size:1.125rem;line-height:1.64;color:var(--text-2)}
.klein{font-size:1rem;line-height:1.6;color:var(--text-2);max-width:54ch}
.mo{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);line-height:1.45;display:block}
a{color:var(--bronze)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.dunkel :focus-visible{outline-color:var(--bronze-hell)}

.springmarke{position:absolute;left:var(--a-4);top:var(--a-4);z-index:200;background:var(--petrol);
  color:#fff;padding:12px 20px;font-weight:600;text-decoration:none;transform:translateY(-200%)}
.springmarke:focus{transform:none}
.symbole{position:absolute}
[id]{scroll-margin-top:calc(var(--kopf-schmal) + 24px)}
.nur-lesegeraet{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ---------- Marke ---------- */
.marke{display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--petrol)}
/* Signetfarben laut Firmenlogo: Navy #0B2F57 links, Petrol (= Logogruen) rechts.
   Im Fuss bleiben beide Gruppen hell, deshalb dort keine Variablen setzen. */
.marke .signet{width:44px;height:44px;flex:none;color:currentColor;--sig-a:#0B2F57;--sig-b:var(--petrol)}
.marke .wort{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:600;
  font-size:1.4375rem;line-height:1;letter-spacing:-.026em;display:block}
.marke .zusatz{display:block;font-size:.84375rem;line-height:1.2;color:var(--text-3);margin-top:5px;white-space:nowrap}


/* ---------- Datenband (Antwortseite kontakt.php) ---------- */
.datenband{background:var(--petrol);color:var(--auf-dunkel-2);font-family:var(--mono);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.datenband .bahn{display:flex;align-items:center;min-height:34px}

/* ---------- Kopf ---------- */

.kopf{position:sticky;top:0;z-index:100;background:var(--weiss);border-bottom:1px solid var(--linie)}
.kopf .bahn{display:flex;align-items:center;justify-content:space-between;gap:var(--a-5);
  height:var(--kopf-hoch);transition:height var(--dauer-lang) var(--verlauf)}
.kopf[data-verdichtet="ja"] .bahn{height:var(--kopf-schmal)}
.haupt-nav ul{display:flex;gap:clamp(18px,1.9vw,30px)}
.haupt-nav a{position:relative;font-size:.9375rem;font-weight:500;color:var(--text-2);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color var(--dauer) var(--verlauf)}
.haupt-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--gleiten)}
.haupt-nav a:hover{color:var(--text-1)}
.haupt-nav a:hover::after{transform:scaleX(1)}
.haupt-nav a[aria-current="true"]{color:var(--text-1);border-bottom-color:var(--text-1)}
.haupt-nav .nr{font-family:var(--mono);font-size:.75rem;color:var(--text-3);margin-right:5px}
.haupt-nav a:hover .nr,.haupt-nav a[aria-current="true"] .nr{color:var(--signal)}
.kopf-rechts{display:flex;align-items:center;gap:var(--a-5)}
.kopf-tel{font-family:var(--mono);font-size:.8125rem;color:var(--text-1);text-decoration:none}
.kopf-tel:hover{color:var(--bronze)}
.menue-schalter{display:none}

/* ---------- Bedienelemente ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  border:1px solid var(--petrol);background:var(--petrol);color:#fff;text-decoration:none;
  border-radius:0;cursor:pointer;transition:background var(--dauer) var(--verlauf),border-color var(--dauer) var(--verlauf)}
.btn:hover{background:var(--petrol-tief);border-color:var(--petrol-tief)}
.btn:active{transform:translateY(1px)}
.btn.m{min-height:40px;font-size:.875rem;padding:0 18px}
.btn.hell{background:#fff;border-color:#fff;color:var(--petrol)}
.btn.hell:hover{background:var(--auf-dunkel-1);border-color:var(--auf-dunkel-1)}
.txtlink{position:relative;display:inline-block;font-size:1rem;font-weight:500;color:var(--bronze);
  text-decoration:none;padding-bottom:4px;transition:color var(--dauer) var(--verlauf)}
.txtlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform-origin:left;transition:transform 320ms var(--gleiten)}
.txtlink:hover{color:#7A5019}
.txtlink:hover::after{transform:scaleX(.35)}
.dunkel a{color:var(--bronze-hell)}
.dunkel .txtlink:hover{color:#F0C48A}

/* ============================================================
   Raster: 12 Inhaltsspalten plus je eine Randspalte links und rechts.
   Linie 1 = Bildschirmrand links, 2 = Inhaltsbeginn,
   14 = Inhaltsende, 15 = Bildschirmrand rechts.
   ============================================================ */
.raster{display:grid;column-gap:var(--spalt);
  grid-template-columns:minmax(calc(var(--rand) - var(--spalt)),1fr) repeat(12,minmax(0,calc((var(--mass) - 11*var(--spalt))/12))) minmax(calc(var(--rand) - var(--spalt)),1fr)}
.raster>*{grid-column:2/14;min-width:0}

.z{display:block}
.gross{font-size:clamp(1.75rem,3.4vw,2.875rem);line-height:1.06}
.riesig{font-size:clamp(2.25rem,6.2vw,5.5rem);line-height:.98;letter-spacing:-.032em}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:var(--a-9)}
.abschnitt.tont{background:var(--flaeche-1)}
.abschnitt.dunkel{background:var(--petrol);color:var(--auf-dunkel-1)}
.abschnitt.dunkel h1,.abschnitt.dunkel h2,.abschnitt.dunkel h3,.abschnitt.dunkel h4,.abschnitt.dunkel .titel{color:#fff}
.abschnitt.dunkel .lead,.abschnitt.dunkel .text,.abschnitt.dunkel .klein{color:var(--auf-dunkel-3)}
.abschnitt.dunkel .lbl{color:var(--auf-dunkel-2)}

/* Bildrahmen: Bild minimal größer als der Ausschnitt, damit die Ruhebewegung keine Kante zeigt */
.bildrahmen{overflow:hidden;background:var(--flaeche-2)}
.dunkel .bildrahmen{background:var(--petrol-tief)}
.bildrahmen img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--gleiten)}
@media (hover:hover){
  figure:hover .bildrahmen img{transform:scale(1.03)}
}


/* ============================================================
   Gemeinsame Achsen: Alle Überschriften und Texte beginnen auf
   Rasterlinie 2. Lesebreite für Fließtext max. 66 Zeichen.
   ============================================================ */
.gross{font-size:clamp(1.75rem,3vw,2.625rem);line-height:1.1;letter-spacing:-.026em}
.riesig{font-size:clamp(2.125rem,5vw,4.25rem);line-height:1.02;letter-spacing:-.03em}
.kopf-block{grid-column:2/11;margin-bottom:var(--a-8)}
.kopf-block h2{max-width:30ch}
.kopf-block .text,.kopf-block .lead{margin-top:var(--a-5);max-width:66ch;font-size:1.1875rem}
.kopf-block h3{margin-top:var(--a-7)}
.lbl-titel{margin-bottom:var(--a-3)}
.punkte{margin-top:var(--a-5);display:grid;gap:0}
.punkte li{position:relative;padding:10px 0 10px 22px;border-top:1px solid var(--linie-zart);
  font-size:1.0625rem;line-height:1.5;color:var(--text-1)}
.punkte li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:1px;background:var(--bronze)}
.dunkel .punkte li{border-top-color:var(--petrol-linie);color:var(--auf-dunkel-1)}
.dunkel .punkte li::before{background:var(--bronze-hell)}

/* ---------- Start ---------- */
.s-start{padding-block:0 var(--a-10)}
.portraet{grid-column:1/7;margin:0}


.portraet .bildrahmen{aspect-ratio:4/5;max-height:calc(100vh - var(--kopf-hoch));min-height:540px}
.start-text{grid-column:8/14;padding-top:var(--a-9)}
.aufhaenger{font-family:var(--mono);font-size:.875rem;letter-spacing:.06em;color:var(--bronze);line-height:1.5}
.held{font-size:clamp(2.125rem,3.8vw,3.5rem);line-height:1.04;letter-spacing:-.032em;margin:var(--a-4) 0 var(--a-6);max-width:15ch}
.start-text .lead{max-width:56ch;font-size:1.1875rem}
.aktionen{display:flex;gap:var(--a-5);margin-top:var(--a-6);align-items:center;flex-wrap:wrap}
.eckdaten{margin-top:var(--a-8);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--a-6);
  border-top:2px solid var(--text-1)}
.eckdaten>div{padding:14px 0 16px;border-bottom:1px solid var(--linie-zart)}
.eckdaten dd{margin-top:6px;font-size:1.0625rem;line-height:1.45;color:var(--text-1)}

/* ---------- Zwei Wege ---------- */
.s-zwei-wege{padding-block:var(--a-8)}
.zwei-spalten{grid-column:2/14;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--a-7)}
.zwei-spalten h2{font-size:1.1875rem;line-height:1.26;letter-spacing:-.012em}
.zwei-spalten .spalte p{margin-top:var(--a-3);font-size:1.0625rem;line-height:1.6;color:var(--text-2)}
.zwei-spalten .spalte .klein{margin-top:var(--a-4)}

/* ---------- Situationen ---------- */
.s-situationen{padding-block:var(--a-10) var(--a-9)}
.s-situationen .kopf-block{grid-column:2/7;margin-bottom:0;align-self:start}
.situationen{grid-column:8/14;border-top:2px solid var(--text-1)}
.situationen li{padding:16px 0 16px 34px;position:relative;border-bottom:1px solid var(--linie);
  font-size:1.1875rem;line-height:1.45;color:var(--text-1)}
.situationen li::before{content:"";position:absolute;left:0;top:24px;width:18px;height:2px;background:var(--signal)}

/* ---------- Umfang ---------- */
.s-umfang{padding-block:var(--a-10)}
.drei-spalten{grid-column:2/14;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--a-7)}
.spalte{border-top:2px solid var(--text-1);padding-top:var(--a-4)}
.spalte .lbl{color:var(--bronze)}
.spalte h3{font-size:1.375rem;margin-top:var(--a-3)}
.spalte>p:not(.lbl){margin-top:var(--a-3);font-size:1.0625rem;line-height:1.6;color:var(--text-2)}

/* ---------- Leistungen ---------- */
.s-leistungen{padding-block:var(--a-10) var(--a-10)}
.leistungen{grid-column:2/14;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--a-8);row-gap:var(--a-8)}
.leistung{border-top:2px solid var(--bronze-hell);padding-top:var(--a-4)}
.dunkel .leistung .lbl{color:var(--bronze-hell)}
.leistung h4{font-size:clamp(1.3125rem,1.8vw,1.625rem);line-height:1.2;margin-top:var(--a-3);max-width:24ch}
.leistung>p:not(.lbl){margin-top:var(--a-4);font-size:1.125rem;line-height:1.62;color:var(--auf-dunkel-3);max-width:56ch}

/* Dunkler Teilbereich der Leistungen innerhalb von "Was ich technisch beurteile" */
.leistungen-dunkel{grid-column:2/14;background:var(--petrol);color:var(--auf-dunkel-1);
  margin-top:var(--a-8);padding:var(--a-8) var(--a-7)}
.leistungen-dunkel h3,.leistungen-dunkel h4{color:#fff}
.leistungen-dunkel .leistungen{grid-column:auto}
.leistungen-titel{font-size:clamp(1.5rem,2.2vw,1.875rem);line-height:1.16;letter-spacing:-.02em;
  padding-bottom:var(--a-5);margin-bottom:var(--a-7);border-bottom:1px solid var(--petrol-linie)}

/* ---------- Ablauf ---------- */
.s-ablauf{padding-block:var(--a-10) var(--a-9)}
.schritte{grid-column:2/14;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--a-5);
  counter-reset:schritt;padding:0;list-style:none}
.schritte li{counter-increment:schritt;border-top:2px solid var(--text-1);padding-top:var(--a-4)}
.schritte li::before{content:counter(schritt);display:block;font-family:var(--mono);font-size:.8125rem;color:var(--signal);margin-bottom:var(--a-3)}
.schritte h3{font-size:1.25rem}
.schritte p{margin-top:var(--a-3);font-size:1.0625rem;line-height:1.58;color:var(--text-2)}

/* ---------- Region ---------- */
.s-region{padding-block:var(--a-9)}
.region-text{grid-column:2/8}
.region-text .text{margin-top:var(--a-5);max-width:60ch;font-size:1.1875rem}
.region-text .text+.text{margin-top:var(--a-4)}
.region-text .btn{margin-top:var(--a-6)}
.regionen{grid-column:9/14;align-self:end;border-top:2px solid var(--bronze-hell)}
.regionen li{padding:14px 0;border-bottom:1px solid var(--petrol-linie);font-size:1.125rem;line-height:1.45;color:var(--text-1)}

/* ---------- Person ---------- */
.s-person{padding-block:var(--a-10)}
.person-text{grid-column:2/9}
.person-text .text{margin-top:var(--a-5);max-width:64ch;font-size:1.1875rem}
.person-text .text+.text{margin-top:var(--a-4)}
.ausbildung{grid-column:10/14;align-self:start;margin-top:calc(var(--a-2) + .5rem)}
.ausbildung h3{padding-bottom:var(--a-3);border-bottom:2px solid var(--text-1)}
.ausbildung li{padding:14px 0;border-bottom:1px solid var(--linie-zart);font-size:1.0625rem;line-height:1.5;color:var(--text-1)}
.ausbildung .marker{display:block;margin-top:5px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;color:var(--bronze)}
.person-bild{grid-column:2/9;margin-top:var(--a-6);max-width:520px}
/* Seitenverhaeltnis exakt wie die Fotovorlage — dadurch kein Beschnitt. */
.person-bild .bildrahmen{aspect-ratio:1040/1011}

/* ---------- Werdegang ---------- */
.s-werdegang{padding-block:var(--a-10)}
.werdegang-text{grid-column:2/8}
.werdegang-text .text{margin-top:var(--a-5);max-width:60ch;font-size:1.1875rem}
.werdegang-text .text+.text{margin-top:var(--a-4)}
.werdegang-liste{grid-column:9/14;align-self:start;border-top:2px solid var(--text-1)}
.werdegang-liste li{padding:14px 0;border-bottom:1px solid var(--linie-zart);font-size:1.0625rem;line-height:1.4;color:var(--text-1)}
.werdegang-bild{grid-column:3/13;margin-top:var(--a-8)}
/* Seitenverhaeltnis exakt wie die Fotovorlage — dadurch kein Beschnitt. */
.werdegang-bild .bildrahmen{aspect-ratio:3/2}

/* ---------- Praxis ----------
   Beide Fälle folgen derselben Logik: Befund, Untersuchung, Feststellung.
   Text oben, darunter drei gleich große Bilder im Seitenraster.
   Kein Randanschnitt, kein sticky — dadurch keine Leerflächen.
   ------------------------------------------------------------------ */
.s-praxis{padding-block:var(--a-9)}
.fall{grid-column:2/14}
.fall+.fall{margin-top:var(--a-9);padding-top:var(--a-9);border-top:1px solid var(--petrol-linie-zart)}
.fall-text h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.18;letter-spacing:-.018em;max-width:30ch}
.fall-text p{margin-top:var(--a-4);font-size:1.125rem;line-height:1.66;color:var(--auf-dunkel-3);max-width:74ch}
.fall-bilder{margin-top:var(--a-6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--spalt);row-gap:var(--a-5)}
.fall-bilder figure{margin:0}
.fall-bilder .bildrahmen{aspect-ratio:4/3}
.fall-bilder figcaption{margin-top:var(--a-3);font-size:.96875rem;line-height:1.5;color:var(--auf-dunkel-3)}
.praxis-hinweis{grid-column:2/14;margin-top:var(--a-8);max-width:70ch}
.dunkel .praxis-hinweis{color:var(--auf-dunkel-2)}

/* ---------- Fragen ---------- */
.s-fragen{padding-block:var(--a-10)}
.fragen{grid-column:2/14;border-top:2px solid var(--text-1)}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:var(--a-5);
  padding:var(--a-5) 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.25rem;line-height:1.35;color:var(--text-1)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::marker{content:""}
.frage summary:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
.frage-titel{max-width:66ch}
.frage-symbol{position:relative;flex:none;width:18px;height:18px}
.frage-symbol::before,.frage-symbol::after{content:"";position:absolute;top:50%;left:50%;
  background:var(--bronze);transform:translate(-50%,-50%)}
.frage-symbol::before{width:14px;height:2px}
.frage-symbol::after{width:2px;height:14px;transition:transform .2s var(--gleiten)}
.frage[open] .frage-symbol::after{transform:translate(-50%,-50%) scaleY(0)}
.fragen .frage-antwort{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .28s var(--gleiten)}
.frage[open] .frage-antwort{grid-template-rows:1fr}
.frage-antwort>p{overflow:hidden;margin:0 0 var(--a-6);font-size:1.125rem;line-height:1.66;
  color:var(--text-2);max-width:66ch}

/* ============================================================
   Rechtsseiten (Impressum, Datenschutz) — dieselbe Typografie,
   dasselbe Raster und derselbe Kopf/Fuß wie die Startseite.
   ============================================================ */
.s-recht{padding-block:var(--a-9) var(--a-10)}
.rechtstext{grid-column:2/11}
.rechtstext h2{font-size:1.375rem;line-height:1.2;margin-top:var(--a-8);padding-bottom:var(--a-3);
  border-bottom:2px solid var(--text-1)}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{margin-top:var(--a-4);font-size:1.0625rem;line-height:1.66;color:var(--text-2);max-width:70ch}
.rechtstext h2+p{margin-top:var(--a-5)}
.rechtstext ul{margin-top:var(--a-4)}
.rechtstext li{position:relative;padding:10px 0 10px 22px;border-top:1px solid var(--linie-zart);
  font-size:1.0625rem;line-height:1.5;color:var(--text-1)}
.rechtstext li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:1px;background:var(--bronze)}
.rechtstext b{color:var(--text-1);font-weight:600}

.rechtsliste{margin-top:var(--a-6);border-top:2px solid var(--text-1)}
.rechtsliste>div{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:var(--a-6);
  padding:14px 0;border-bottom:1px solid var(--linie-zart)}
.rechtsliste dt{font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);line-height:1.45;padding-top:3px}
.rechtsliste dd{font-size:1.0625rem;line-height:1.55;color:var(--text-1)}

.kasten{margin-top:var(--a-6);background:var(--flaeche-1);border-left:2px solid var(--bronze);
  padding:var(--a-5) var(--a-6)}
.kasten p{margin-top:0;color:var(--text-1);max-width:66ch}

.recht-kopf{display:flex;align-items:center;gap:var(--a-5)}
.recht-zurueck{font-size:.9375rem;font-weight:500;color:var(--text-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-block:4px}
.recht-zurueck:hover{color:var(--text-1);border-bottom-color:var(--bronze)}

@media (max-width:1023px){
  .rechtstext{grid-column:2/14}
}
@media (max-width:599px){
  .rechtsliste>div{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .rechtsliste dt{padding-top:0}
}

/* ---------- Kontakt ---------- */
.s-kontakt{padding-block:var(--a-10)}
.s-kontakt .kopf-block{grid-column:2/12}
.s-kontakt .kopf-block h2{max-width:none}
.s-kontakt .kopf-block .lead{font-size:1.25rem;max-width:60ch}
.kontakt-daten{grid-column:2/7;align-self:start}
.kontaktliste{border-top:2px solid var(--bronze-hell)}
.kontaktliste li{padding:13px 0;border-bottom:1px solid var(--petrol-linie);font-size:1.125rem;color:var(--auf-dunkel-1)}
.kontaktliste a{color:var(--auf-dunkel-1);text-decoration:none;border-bottom:1px solid var(--petrol-linie)}
.kontaktliste a:hover{color:var(--bronze-hell);border-bottom-color:var(--bronze-hell)}
.kontaktliste .kontakt-tel{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:600;
  font-size:clamp(1.375rem,2.2vw,1.875rem);letter-spacing:-.02em;border-bottom:0}
.kontakt-daten .karte{margin-top:var(--a-5);color:var(--auf-dunkel-2);max-width:46ch}
.kontakt-daten .karte a{color:var(--bronze-hell)}
.kontakt-form{grid-column:8/14;align-self:start}

.formfeld{display:block;margin-bottom:var(--a-6)}
.formfeld .lbl{margin-bottom:var(--a-1)}
.formfeld input,.formfeld textarea{width:100%;font-family:var(--sans);font-size:1.125rem;line-height:1.5;
  color:#fff;background:transparent;border:0;border-bottom:1px solid var(--petrol-linie);border-radius:0;
  padding:10px 0;min-height:48px;transition:border-color var(--dauer) var(--verlauf),box-shadow var(--dauer) var(--verlauf)}
.formfeld textarea{min-height:132px;resize:vertical}
.formfeld input:hover,.formfeld textarea:hover{border-bottom-color:var(--auf-dunkel-2)}
.formfeld input:focus,.formfeld textarea:focus{outline:none;border-bottom-color:var(--bronze-hell);box-shadow:0 1px 0 var(--bronze-hell)}
.formzeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a-6)}
.zustimmung{display:flex;align-items:flex-start;gap:var(--a-3);margin:var(--a-2) 0 var(--a-6)}
.zustimmung input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--bronze-hell)}
.zustimmung label{font-size:1rem;line-height:1.55;color:var(--auf-dunkel-3)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Antwortseite des Formulars (kontakt.php) */
.kontaktzone{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:var(--a-7);align-items:start}
.randblock{padding-top:var(--a-3)}
.kontaktzone .randblock{border-top:1px solid var(--petrol-linie)}
.randblock+.randblock{margin-top:var(--a-6)}
.randblock>.lbl{margin-bottom:7px}
.randblock p{font-size:1rem;line-height:1.58;max-width:40ch}
.hinweiskasten{border:1px solid var(--petrol-linie);padding:var(--a-5);margin-bottom:var(--a-6)}
.hinweiskasten.gut{border-color:var(--bronze-hell)}

/* ============================================================
   Bewegung — einmaliges, ruhiges Einblenden. Ohne JavaScript
   oder bei „Bewegung reduzieren" ist alles sofort sichtbar.
   ============================================================ */
.js [data-einblenden]{opacity:0;transform:translateY(16px);
  transition:opacity 700ms var(--gleiten) calc(var(--i,0) * var(--takt)),
             transform 800ms var(--gleiten) calc(var(--i,0) * var(--takt))}
.js [data-einblenden][data-sichtbar="ja"]{opacity:1;transform:none}

/* ---------- Fuß ---------- */
.fuss{background:var(--petrol-tief);color:var(--fuss-grau);padding-block:var(--a-8) 34px}
.fuss-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--a-7);
  align-items:end;padding-bottom:var(--a-6);border-bottom:1px solid #163330}
.fuss-marke{display:flex;align-items:center;gap:22px}
.fuss-marke .signet{width:52px;height:52px;flex:none;color:var(--auf-dunkel-1)}
.fuss-marke .wort{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1;color:var(--auf-dunkel-1);display:block;letter-spacing:-.024em}
.fuss-marke .pos{font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fuss-grau);display:block;margin-top:10px}
.fuss-nav{display:flex;gap:var(--a-6);align-items:flex-end;flex-wrap:wrap}
.fuss-nav a{font-size:1rem;color:var(--auf-dunkel-3);text-decoration:none;
  border-bottom:1px solid transparent;display:inline-block;padding-block:4px}
.fuss-nav a:hover{border-bottom-color:var(--bronze-hell)}
.fuss-recht{padding-top:var(--a-5);display:flex;justify-content:space-between;gap:var(--a-5);flex-wrap:wrap}
.fuss-recht span{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--fuss-grau)}
.fuss-recht a{color:var(--auf-dunkel-3);text-decoration:none;border-bottom:1px solid transparent}
.fuss-recht a:hover{border-bottom-color:var(--bronze-hell)}

.rufleiste{display:none}

/* ============================================================
   Haltepunkte
   ============================================================ */
@media (max-width:1279px){
  :root{--rand:32px;--spalt:20px}
  .start-text{grid-column:7/14}
  .drei-spalten{column-gap:var(--a-6)}
  .schritte{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--a-7)}
}

@media (max-width:1179px){
  /* Acht Menüpunkte plus Anrufzeile passen ab hier nicht mehr in eine Zeile. */
  .haupt-nav{position:fixed;inset:var(--kopf-hoch) 0 0;background:var(--weiss);
    transform:translateY(-101%);transition:transform var(--dauer-lang) var(--verlauf);
    overflow-y:auto;border-top:1px solid var(--linie);z-index:99;visibility:hidden}
  .haupt-nav[data-offen="ja"]{transform:none;visibility:visible}
  .kopf[data-verdichtet="ja"] .haupt-nav{inset:var(--kopf-schmal) 0 0}
  .haupt-nav ul{flex-direction:column;gap:0;width:min(var(--mass),100% - 2*var(--rand));margin-inline:auto}
  .haupt-nav li{border-bottom:1px solid var(--linie-zart)}
  .haupt-nav a{display:block;padding:18px 0;font-size:1.25rem;min-height:44px}
  .haupt-nav a::after{display:none}
  .menue-schalter{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    margin-right:-10px;background:none;border:0;cursor:pointer;color:var(--text-1)}
  .kopf-rechts{gap:var(--a-4)}
}

@media (max-width:1023px){
  .portraet{grid-column:1/10}
  .portraet .bildrahmen{max-height:none;min-height:0}
  .start-text{grid-column:2/14;padding-top:var(--a-7)}
  .kopf-block,.s-kontakt .kopf-block{grid-column:2/14}
  .s-situationen .kopf-block,.situationen{grid-column:2/14}
  .s-situationen .kopf-block{margin-bottom:var(--a-7)}
  .drei-spalten{grid-template-columns:minmax(0,1fr);row-gap:var(--a-8)}
  .zwei-spalten{grid-template-columns:minmax(0,1fr);row-gap:var(--a-8)}
  .leistungen{column-gap:var(--a-6)}
  .region-text,.regionen{grid-column:2/14}
  .regionen{margin-top:var(--a-7)}
  .person-text,.ausbildung{grid-column:2/14}
  .ausbildung{margin-top:var(--a-8)}
  .person-bild{grid-column:2/14}
  .werdegang-text,.werdegang-liste,.werdegang-bild{grid-column:2/14}
  .werdegang-liste{margin-top:var(--a-7)}
  .praxis-hinweis{grid-column:2/14}
  .kontakt-daten,.kontakt-form{grid-column:2/14}
  .kontakt-form{margin-top:var(--a-8)}
}

@media (max-width:839px){
  :root{--rand:24px;--spalt:12px;--kopf-hoch:64px;--kopf-schmal:56px;--a-7:40px;--a-8:48px;--a-9:64px;--a-10:80px}
  .kopf-anruf{display:none}
  .marke .zusatz{display:none}
  .marke .signet{width:38px;height:38px}
  .marke .wort{font-size:1.3125rem}
  .portraet{grid-column:1/15}
  .portraet .bildrahmen{aspect-ratio:4/4.4}
  .eckdaten{grid-template-columns:minmax(0,1fr)}
  .leistungen{grid-template-columns:minmax(0,1fr)}
  .schritte{grid-template-columns:minmax(0,1fr);row-gap:var(--a-6)}
  .fall-bilder{grid-template-columns:minmax(0,1fr);row-gap:var(--a-5)}
  .fall+.fall{margin-top:var(--a-7);padding-top:var(--a-7)}
  .fall-bilder figcaption{max-width:52ch}
  .kontaktzone{grid-template-columns:minmax(0,1fr);row-gap:var(--a-7)}
  body{padding-bottom:56px}
  .rufleiste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:fixed;inset:auto 0 0;
    height:56px;z-index:101;background:var(--petrol);border-top:1px solid var(--petrol-linie)}
  .rufleiste a{display:flex;align-items:center;justify-content:center;color:#fff;
    text-decoration:none;font-size:.875rem;font-weight:600}
  .rufleiste a:first-child{border-right:1px solid var(--petrol-linie)}
}

@media (max-width:599px){
  :root{--rand:20px}
  .formzeile{grid-template-columns:minmax(0,1fr);gap:0}
  .fuss-kopf{grid-template-columns:minmax(0,1fr);row-gap:var(--a-6)}
  .fuss-marke{gap:16px}
  .fuss-marke .signet{width:40px;height:40px}
  .situationen li{font-size:1.0625rem;padding-left:28px}
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important;animation-duration:.01ms !important}
  .js [data-einblenden]{opacity:1 !important;transform:none !important}
}

@media print{
  .kopf,.rufleiste,.haupt-nav,form,.btn{display:none !important}
  body{font-size:11pt;color:#000;background:#fff;padding-bottom:0}
  [data-einblenden]{opacity:1 !important;transform:none !important}
  .abschnitt.dunkel,.abschnitt.tont{background:#fff !important;color:#000 !important}
  .abschnitt.dunkel h2,.abschnitt.dunkel h3,.abschnitt.dunkel p,.abschnitt.dunkel li,.abschnitt.dunkel dd{color:#000 !important}
}

/* Silbentrennung nur auf schmalen Bildschirmen */
@media (min-width:840px){p,li,dd,dt{hyphens:manual}}

/* Region auf dunklem Grund */
.dunkel .regionen li{color:var(--auf-dunkel-1)}