/* =====================================================================
   BNM · Bau nach Maß — Stylesheet
   Aesthetic Direction: „Materialprobe" — Handwerk in Nahaufnahme
   Archetyp: Versetzte Bildbänder mit überlappender Typografie
   Signature: Materialband · Der Versatz · Materialangabe
   Farben aus dem Logo-Handbuch (MARKE.md).
   ===================================================================== */

/* ---------- Schriften: lokal gehostet, kein Google-CDN (DSGVO) ------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/marcellus-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/marcellus-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Design-Tokens ------------------------------------------- */
:root{
  /* Farbe — Quelle: MARKE.md */
  --papier:#F7F5F1;
  --papier-tief:#EFECE6;
  --tinte:#2A2622;
  --tinte-weich:#55504A;
  --bronze:#8A6236;
  --dunkel:#14120F;
  --dunkel-tief:#0F0E0C;
  --gold:#C6A15C;
  --gold-hell:#D8B379;
  --stahl:#BEC2C9;
  --stahl-weich:#8E9299;
  /* Stahl-N der Variante 1B auf hellem Grund. Das Logo-Handbuch nennt für
     Dunkelgrund #BEC2C9 und lässt den Hellgrund offen; die Demo des
     Markenpakets nutzte #7B7F86 — das ergibt in der kleinen Kopfzeilen-Größe
     nur 3,69:1. Eine Stufe dunkler bleibt Stahl und erreicht 4,63:1. */
  --stahl-dunkel:#6B6F76;

  --linie-hell:rgba(42,38,34,.16);
  --linie-dunkel:rgba(190,194,201,.18);

  --f-display:'Marcellus',Georgia,'Times New Roman',serif;
  --f-text:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Typoskala — Verhältnis >= 1.25, Display-Maximum 84px */
  --t-display:clamp(2.4rem,1.5rem + 4.1vw,5.25rem);
  --t-h2:clamp(1.8rem,1.32rem + 2.1vw,3rem);
  --t-h3:clamp(1.2rem,1.08rem + .6vw,1.55rem);
  --t-gross:clamp(1.12rem,1.02rem + .5vw,1.4rem);
  --t-body:clamp(1rem,.97rem + .16vw,1.125rem);
  --t-small:.9375rem;
  --t-mini:.8125rem;
  --t-label:.75rem;

  /* Abstände — 8px-Basis */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem; --s6:4rem; --s7:6rem; --s8:8rem;
  --sektion:clamp(4rem,2.5rem + 7vw,8.5rem);
  --sektion-eng:clamp(2.75rem,1.9rem + 4vw,5rem);

  --breite:1280px;
  --rand:clamp(1.25rem,1rem + 3vw,4.5rem);

  /* Der Versatz: der kürzere Logo-Turm beginnt rund ein Drittel tiefer */
  --versatz:clamp(2.5rem,7vw,6.5rem);

  --ease:cubic-bezier(.2,.7,.2,1);
  --schnell:180ms;

  --z-klebend:100;
  --z-menue:200;
  --z-skiplink:300;
}

/* ---------- Grundgerüst --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  color-scheme:light;              /* die Seite ist bewusst nur hell */
  scroll-behavior:smooth;
}
:target,[id]{scroll-margin-top:8.5rem}
a,button,summary,label{
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(138,98,54,.14);
  scroll-margin-top:8.5rem;
}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--f-text);
  font-size:var(--t-body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
picture{display:contents} /* sonst greifen Größenregeln am img nicht mehr */

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.005em;
  margin:0;
  text-wrap:balance;
  hyphens:auto;
  hyphenate-limit-chars:14 7 5;
}
h1{font-size:var(--t-display);line-height:1.02}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.2}
p{margin:0 0 var(--s3);text-wrap:pretty}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 var(--s3);padding-left:1.15em}
li{margin-bottom:.4em}
strong{font-weight:600}

a{color:var(--bronze);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--tinte)}

:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.dunkelraum :focus-visible,.materialband :focus-visible{outline-color:var(--gold)}

::selection{background:var(--gold);color:var(--dunkel)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skiplink{
  position:absolute;left:var(--rand);top:-100px;z-index:var(--z-skiplink);
  background:var(--dunkel);color:var(--gold);
  padding:.9rem 1.4rem;font-size:var(--t-small);text-decoration:none;
  transition:top var(--schnell) var(--ease);
}
.skiplink:focus{top:.75rem;color:var(--gold)}

/* ---------- Layout --------------------------------------------------- */
.wrap{
  width:100%;max-width:var(--breite);margin-inline:auto;
  padding-left:max(var(--rand),env(safe-area-inset-left));
  padding-right:max(var(--rand),env(safe-area-inset-right));
}
.sektion{padding-block:var(--sektion)}
.sektion--eng{padding-block:var(--sektion-eng)}
.fliess{max-width:38rem}
.flaeche-tief{background:var(--papier-tief)}

.dunkelraum{background:var(--dunkel);color:var(--stahl)}
.dunkelraum h1,.dunkelraum h2,.dunkelraum h3{color:var(--papier)}
.dunkelraum a{color:var(--gold)}
.dunkelraum a:hover{color:var(--gold-hell)}

/* ===================================================================
   Signature 1 · Materialband
   Vollbild-Nahaufnahme des Materials, die Typografie liegt IM Bild.
   Der Verlauf verdunkelt nur die Seite, auf der Text steht.
   =================================================================== */
.materialband{
  position:relative;
  isolation:isolate;
  background:var(--dunkel);            /* Rückfall, solange das Bild lädt */
  color:var(--stahl);
  display:flex;
  align-items:flex-end;
  min-height:clamp(26rem,74vh,46rem);
  overflow:hidden;
}
.materialband > picture > img,
.materialband > img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
.materialband::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,
    rgba(15,14,12,.90) 0%,
    rgba(15,14,12,.78) 34%,
    rgba(15,14,12,.34) 66%,
    rgba(15,14,12,.10) 100%);
}
.materialband--rechts{align-items:flex-end;justify-content:flex-end}
.materialband--rechts::before{
  background:linear-gradient(258deg,
    rgba(15,14,12,.90) 0%,
    rgba(15,14,12,.78) 34%,
    rgba(15,14,12,.34) 66%,
    rgba(15,14,12,.10) 100%);
}
.materialband--abschluss::before{
  background:linear-gradient(102deg,
    rgba(15,14,12,.76) 0%,
    rgba(15,14,12,.62) 38%,
    rgba(15,14,12,.24) 68%,
    rgba(15,14,12,.06) 100%);
}
.materialband__inhalt{
  width:100%;
  padding-block:clamp(2.5rem,7vw,5.5rem);
}
.materialband__satz{max-width:40rem}
.materialband h1,.materialband h2{color:var(--papier)}
/* Marcellus hat keinen Kursivschnitt — <em> würde sonst schräg gestellt */
h1 em,h2 em,h3 em,.satz em{font-style:normal}
.materialband h1 em{color:var(--gold)}
/* Auf dem Bild etwas kleiner gesetzt, damit „Ansprechpartner" nicht trennt */
.materialband h1{font-size:clamp(2.2rem,1.35rem + 3.3vw,4rem)}
.materialband p{color:var(--stahl);max-width:32rem}
.materialband--kompakt{min-height:clamp(20rem,52vh,32rem)}

/* Kopfzeile über einem Materialband: heller Grund bleibt Pflicht,
   weil das Logo sonst nicht lesbar ist. */
.materialband__fuss{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s5);
  margin-top:clamp(1.5rem,3vw,2.5rem);
}

/* ===================================================================
   Signature 2 · Der Versatz
   Die zwei ungleich hohen Türme der Bildmarke als Satzrhythmus:
   ungleich breite Spalten, die zweite beginnt tiefer.
   =================================================================== */
.versatz{
  display:grid;
  gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
}
.versatz > *{min-width:0}
@media (min-width:820px){
  .versatz{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr)}  /* 21 : 15 wie im Logo */
  .versatz > :nth-child(2){margin-top:var(--versatz)}
  .versatz--gekehrt{grid-template-columns:minmax(0,1fr) minmax(0,1.42fr)}
  .versatz--gekehrt > :nth-child(1){margin-top:var(--versatz)}
  .versatz--gekehrt > :nth-child(2){margin-top:0}
  .versatz--gleich{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ===================================================================
   Signature 3 · Materialangabe
   Jedes Bild trägt eine präzise technische Angabe statt einer Floskel.
   Trägt immer einen echten Wert — nie einen Sektionsnamen.
   =================================================================== */
.materialangabe{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem .9rem;
  margin:.75rem 0 0;
  font-family:var(--f-text);font-size:var(--t-mini);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--bronze);
}
.materialangabe b{font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums}
.materialband .materialangabe{color:var(--gold-hell);margin-top:clamp(2rem,4vw,3rem)}
.materialband .materialangabe b{color:var(--papier)}

/* ---------- Bilder in Textstrecken ---------------------------------- */
.bild{margin:0}
.bild img{width:100%;object-fit:cover}
.bild--hoch img{aspect-ratio:4/5}
.bild--quer img{aspect-ratio:3/2}
.bild--quadrat img{aspect-ratio:1/1}
.bildgrad{filter:saturate(.84) contrast(1.03)}
/* Für Aufnahmen, deren Eigenfarbe gegen die Marke arbeitet */
.bildgrad--neutral{filter:grayscale(1) sepia(.24) contrast(1.06) brightness(1.06)}

/* ---------- Kennzeichnung KI-generierter Bilder ---------------------- */
/* Alle Aufnahmen sind synthetisch erzeugt und zeigen keine realen
   Objekte. Der Hinweis liegt sehr klein in der unteren rechten Bildecke:
   lesbar, wenn man hinsieht, sonst zurueckhaltend.                     */
.bild__flaeche{position:relative;display:block}

.ki-ecke{
  position:absolute;
  right:clamp(.5rem,1.4vw,.9rem);bottom:clamp(.4rem,1.2vw,.7rem);
  z-index:1;margin:0;
  font-family:var(--f-text);font-size:.5625rem;font-weight:500;
  line-height:1;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;opacity:.6;
  /* Doppelter Schatten, damit die Marke auch auf hellen Fassaden
     noch lesbar bleibt, ohne als Kasten aufzutragen.                */
  text-shadow:0 0 2px rgba(15,14,12,.9),0 1px 3px rgba(15,14,12,.6);
  pointer-events:none;user-select:none;
}
/* Vollflaechige Bildbaender: gleiche Marke, nur weiter von der Kante weg,
   damit sie nicht mit dem Bandtext ins Gehege kommt.                    */
.materialband > .ki-ecke{
  right:clamp(1rem,4vw,2.5rem);bottom:clamp(.75rem,2vw,1.15rem);
}
.materialband:has(> .ki-ecke) .materialband__inhalt{padding-bottom:1.75rem}

/* ---------- Kopfzeile ------------------------------------------------ */
.kopf{
  position:sticky;top:0;z-index:var(--z-klebend);
  background:var(--papier);
  border-bottom:1px solid transparent;
  transition:border-color var(--schnell) linear;
}
.kopf.ist-geheftet{border-bottom-color:var(--linie-hell)}
.kopf__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);min-height:6.5rem;position:relative;
}
.kopf__rechts{display:flex;align-items:center;gap:clamp(.75rem,2vw,2rem)}

.hauptnav ul{display:flex;gap:clamp(1.1rem,2.2vw,2.1rem);list-style:none;margin:0;padding:0}
.hauptnav li{margin:0}
.hauptnav a{
  display:flex;align-items:center;min-height:44px;
  white-space:nowrap;
  font-size:var(--t-small);font-weight:500;letter-spacing:.02em;
  color:var(--tinte);text-decoration:none;
  border-bottom:1px solid transparent;
}
.hauptnav a:hover{color:var(--bronze);border-bottom-color:var(--bronze)}
.hauptnav a[aria-current="page"]{color:var(--bronze);border-bottom-color:var(--gold)}

.kopf__tel{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;
  font-size:var(--t-small);font-weight:600;letter-spacing:.02em;
  color:var(--tinte);text-decoration:none;white-space:nowrap;
  padding-left:clamp(1rem,2vw,1.75rem);border-left:1px solid var(--linie-hell);
}
.kopf__tel:hover{color:var(--bronze)}
.kopf__tel svg{width:15px;height:15px;flex:none;color:var(--bronze)}

.menueknopf{
  display:none;align-items:center;gap:.6rem;
  min-height:44px;min-width:44px;padding:.5rem .75rem;
  background:transparent;
  border:1px solid var(--linie-hell);color:var(--tinte);
  font:inherit;font-size:var(--t-mini);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
}
.menueknopf:hover{border-color:var(--bronze);color:var(--bronze)}
.menueknopf__balken{position:relative;width:18px;height:11px;flex:none}
.menueknopf__balken span{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform var(--schnell) var(--ease),opacity var(--schnell) linear;
}
.menueknopf__balken span:nth-child(1){top:0}
.menueknopf__balken span:nth-child(2){top:50%;margin-top:-.75px}
.menueknopf__balken span:nth-child(3){bottom:0}
.menueknopf[aria-expanded="true"] .menueknopf__balken span:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
.menueknopf[aria-expanded="true"] .menueknopf__balken span:nth-child(2){opacity:0}
.menueknopf[aria-expanded="true"] .menueknopf__balken span:nth-child(3){transform:translateY(-4.75px) rotate(-45deg)}

/* ---------- Logo-Lockup 1B (aus dem Markenpaket) --------------------
   Kopfzeile und Fußzeile nutzen dieselbe gestapelte Variante 1B —
   nur die Einfärbung unterscheidet sich nach Untergrund. Die Anordnung
   bleibt unverändert, wie im Logo-Handbuch gefordert.
   ------------------------------------------------------------------- */
.logo-b{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:13px;color:var(--gold);text-decoration:none;flex:none;
}
.logo-b svg{display:block;width:104px;height:53px}
.logo-b__wort{font-family:var(--f-display);font-size:46px;line-height:.85;display:flex;gap:3px;color:var(--gold)}
.logo-b__n{color:var(--stahl)}
.logo-b__claim{display:flex;align-items:center;gap:13px;color:var(--gold-hell)}
.logo-b__claim span{font-family:var(--f-text);font-weight:500;font-size:11.5px;letter-spacing:.24em;white-space:nowrap}
.logo-b__claim i{display:block;width:30px;height:1px;background:currentColor;opacity:.55}

/* Kopfzeilen-Fassung: heller Grund, kompakter gesetzt */
.logo-b--kopf{
  gap:clamp(6px,.8vw,8px);
  color:var(--bronze);
  padding-block:.35rem;
}
.logo-b--kopf svg{width:clamp(56px,6.4vw,78px);height:auto}
.logo-b--kopf .logo-b__wort{
  font-size:clamp(22px,2.5vw,31px);color:var(--tinte);gap:2px;
}
.logo-b--kopf .logo-b__n{color:var(--stahl-dunkel)}
.logo-b--kopf .logo-b__claim{gap:9px;color:var(--bronze)}
.logo-b--kopf .logo-b__claim span{font-size:9px;letter-spacing:.22em}
.logo-b--kopf .logo-b__claim i{width:18px;opacity:.6}
.logo-b--kopf:hover .logo-b__wort{color:var(--bronze)}

/* Aufbau-Animation der Variante 1B, übernommen aus dem Markenpaket:
   Dach und Türme zeichnen sich, Fenster blenden auf, Wortmarke steigt. */
.logo-b .bnm-roof{--len:120}
.logo-b .bnm-t1{--len:140}
.logo-b .bnm-t2{--len:92}
.logo-b.play .bnm-roof{stroke-dasharray:var(--len);animation:bnmDraw 900ms var(--ease) both}
.logo-b.play .bnm-t1{stroke-dasharray:var(--len);animation:bnmDraw 780ms var(--ease) 400ms both}
.logo-b.play .bnm-t2{stroke-dasharray:var(--len);animation:bnmDraw 720ms var(--ease) 540ms both}
.logo-b.play .bnm-fenster{animation:bnmFade 520ms ease 940ms both}
.logo-b.play .logo-b__wort{animation:bnmUp 620ms var(--ease) 840ms both}
.logo-b.play .logo-b__claim span{animation:bnmTrackB 780ms var(--ease) 1060ms both}
.logo-b.play .logo-b__claim i{animation:bnmRule 700ms var(--ease) 1060ms both}
@keyframes bnmDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes bnmFade{from{opacity:0}to{opacity:1}}
@keyframes bnmUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bnmTrackB{from{opacity:0;letter-spacing:.5em}to{opacity:1;letter-spacing:.22em}}
@keyframes bnmRule{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* ---------- Knöpfe und Textlinks ------------------------------------ */
.knopf{
  display:inline-flex;align-items:center;gap:.7rem;
  min-height:52px;padding:.85rem 1.6rem;
  background:transparent;
  border:1px solid var(--tinte);
  color:var(--tinte);text-decoration:none;
  font-family:var(--f-text);font-size:var(--t-small);font-weight:600;
  letter-spacing:.06em;cursor:pointer;
  transition:background var(--schnell) var(--ease),color var(--schnell) var(--ease),border-color var(--schnell) var(--ease);
}
.knopf:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.knopf--voll{background:var(--tinte);color:var(--papier)}
.knopf--voll:hover{background:var(--bronze);border-color:var(--bronze);color:var(--papier)}
.dunkelraum .knopf,.materialband .knopf{border-color:var(--gold);color:var(--gold)}
.dunkelraum .knopf:hover,.materialband .knopf:hover{background:var(--gold);color:var(--dunkel)}
.dunkelraum .knopf--voll,.materialband .knopf--voll{background:var(--gold);color:var(--dunkel)}
.dunkelraum .knopf--voll:hover,.materialband .knopf--voll:hover{background:var(--gold-hell);border-color:var(--gold-hell)}

.textlink{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  font-size:var(--t-small);font-weight:600;letter-spacing:.04em;
  color:var(--bronze);text-decoration:none;
  border-bottom:1px solid currentColor;
}
.textlink:hover{color:var(--tinte)}
.dunkelraum .textlink,.materialband .textlink{color:var(--gold)}
.dunkelraum .textlink:hover,.materialband .textlink:hover{color:var(--gold-hell)}
.textlink__pfeil{transition:transform var(--schnell) var(--ease)}
.textlink:hover .textlink__pfeil{transform:translateX(4px)}

.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}

/* Platzhalter für Angaben, die der Kunde noch liefert */
.platzhalter{
  color:var(--bronze);
  text-decoration:underline dashed 1px;
  text-underline-offset:.24em;
  font-style:normal;
}
.dunkelraum .platzhalter,.materialband .platzhalter,.fuss .platzhalter{color:var(--gold-hell)}

/* ---------- Statement ------------------------------------------------ */
.satz{
  font-family:var(--f-display);
  font-size:clamp(1.75rem,1.1rem + 2.8vw,3.2rem);
  line-height:1.24;letter-spacing:-.005em;
  max-width:22ch;margin:0;
  text-wrap:balance;
}
.satz em{font-style:normal;color:var(--bronze)}
.materialband .satz em{color:var(--gold)}

/* ---------- Arbeitsfeld (Leistungsgruppe auf der Startseite) -------- */
.feld{padding-block:var(--sektion-eng)}
.feld + .feld{border-top:1px solid var(--linie-hell)}
.feld h2{margin-bottom:var(--s3)}
.feld p{color:var(--tinte-weich);max-width:34rem}
.feld__gewerke{
  margin:var(--s3) 0 var(--s4);padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.5rem .4rem;
}
.feld__gewerke li{
  margin:0;font-size:var(--t-mini);letter-spacing:.02em;color:var(--tinte-weich);
  border:1px solid var(--linie-hell);padding:.35rem .7rem;
}

/* ---------- Zusagen -------------------------------------------------- */
.zusagen{display:grid;gap:0;grid-template-columns:minmax(0,1fr);margin-top:var(--s5)}
@media (min-width:820px){
  .zusagen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2.5rem,5vw,5rem)}
}
.zusage{
  min-width:0;
  padding:var(--s4) 0;
  border-top:1px solid var(--linie-hell);
}
.zusage h2,.zusage h3{margin-bottom:.6rem}
/* Acht Zusagen untereinander vertragen keine volle H2-Größe */
.zusage h2{font-size:clamp(1.35rem,1.1rem + 1.05vw,1.9rem)}
.zusage p{font-size:var(--t-small);line-height:1.7;color:var(--tinte-weich);max-width:32rem}
.dunkelraum .zusage{border-top-color:var(--linie-dunkel)}
.dunkelraum .zusage p{color:var(--stahl)}

/* ---------- Ablauf: versetzte Schritte ohne gezeichnete Achse ------- */
.ablauf{list-style:none;margin:var(--s5) 0 0;padding:0}
.schritt{margin:0 0 var(--s6);min-width:0;max-width:34rem}
.schritt:last-child{margin-bottom:0}
.schritt__nr{
  display:block;font-family:var(--f-text);
  font-size:var(--t-mini);font-weight:600;letter-spacing:.2em;
  color:var(--bronze);font-variant-numeric:tabular-nums;margin-bottom:.55rem;
}
.schritt h3{margin-bottom:.6rem}
.schritt p{color:var(--tinte-weich);font-size:var(--t-small);line-height:1.7}
@media (min-width:900px){
  .schritt:nth-child(2){margin-left:clamp(3rem,10vw,11rem)}
  .schritt:nth-child(3){margin-left:clamp(1.5rem,5vw,5.5rem)}
  .schritt:nth-child(4){margin-left:clamp(4.5rem,15vw,16rem)}
}

/* ---------- Kennwerte-Tabelle (Erreichbarkeit, Steckbriefe) --------- */
.kennwerte{
  margin:var(--s3) 0 0;display:grid;gap:0;
  grid-template-columns:minmax(7rem,auto) 1fr;
  font-size:var(--t-small);
}
.kennwerte dt{
  padding:.55rem 1rem .55rem 0;border-top:1px solid var(--linie-hell);
  font-size:var(--t-mini);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinte-weich);
}
.kennwerte dd{
  margin:0;padding:.55rem 0;border-top:1px solid var(--linie-hell);
  color:var(--tinte);min-width:0;
}

/* ---------- Belege (kurze Vertrauenszeilen) ------------------------- */
.belege{
  display:grid;gap:var(--s4) clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr);
  margin:0;padding:var(--s4) 0 0;list-style:none;
  border-top:1px solid var(--linie-hell);
}
.belege li{margin:0;min-width:0}
.belege h3{
  font-family:var(--f-text);font-size:var(--t-small);font-weight:600;
  letter-spacing:.06em;margin-bottom:.5rem;
}
.belege h3 a{display:inline-flex;align-items:center;min-height:44px}
.belege p{font-size:var(--t-small);line-height:1.65;color:var(--tinte-weich)}

/* ---------- Kontaktkarten -------------------------------------------- */
.kontaktraster{
  display:grid;gap:clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr);
  margin-top:var(--s5);
}
@media (min-width:768px){.kontaktraster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kontaktkarte{min-width:0}
.kontaktkarte h3{
  font-family:var(--f-text);font-size:var(--t-mini);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hell);
  margin-bottom:var(--s2);
}
.kontaktkarte p{font-size:var(--t-small);line-height:1.75;color:var(--stahl)}
.kontaktkarte__gross{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-gross);font-family:var(--f-display);
  color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(198,161,92,.4);
}
.kontaktkarte__gross:hover{color:var(--gold-hell);border-bottom-color:var(--gold-hell)}

/* ---------- Faktenband ----------------------------------------------- */
/* Beantwortet direkt unter dem Auftakt die vier Fragen, mit denen Besucher
   ankommen: Wo? Wie viel? Was kostet das Angebot? Wann bekomme ich einen
   Termin?                                                               */
.fakten{border-block:1px solid var(--linie-hell);background:var(--papier-tief)}
.fakten dl{
  display:grid;gap:0;margin:0;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:600px){.fakten dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.fakten dl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fakten dl > div{
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,3vw,2rem);
  border-top:1px solid var(--linie-hell);
}
.fakten dl > div:first-child{border-top:0}
@media (min-width:600px){
  .fakten dl > div{border-top:0;border-left:1px solid var(--linie-hell)}
  .fakten dl > div:nth-child(odd){border-left:0}
  .fakten dl > div:nth-child(n+3){border-top:1px solid var(--linie-hell)}
}
@media (min-width:960px){
  .fakten dl > div{border-top:0}
  .fakten dl > div:nth-child(odd){border-left:1px solid var(--linie-hell)}
  .fakten dl > div:first-child{border-left:0}
}
.fakten dt{
  font-family:var(--f-text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);
  margin-bottom:.6rem;
}
.fakten dd{margin:0;font-family:var(--f-display);font-size:var(--t-h3);line-height:1.25;color:var(--tinte)}
.fakten .zahl{font-size:1.45em;line-height:1;font-variant-numeric:tabular-nums}

/* ---------- Einwände -------------------------------------------------- */
/* Der Besucher kommt oft mit einer schlechten Erfahrung, nicht mit einer
   Frage. Erst das Zitat, dann unsere Antwort darauf.                    */
.einwaende{
  display:grid;gap:var(--s5);margin:var(--s5) 0 0;padding:0;list-style:none;
  grid-template-columns:minmax(0,1fr);counter-reset:einwand;
}
@media (min-width:860px){.einwaende{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.einwand{padding-top:var(--s3);border-top:1px solid var(--linie-hell);counter-increment:einwand}
.einwand::before{
  content:counter(einwand,decimal-leading-zero);
  display:block;margin-bottom:var(--s2);
  font-family:var(--f-text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;color:var(--bronze);
}
.einwand__zitat{
  font-family:var(--f-display);font-size:var(--t-h3);line-height:1.35;
  color:var(--tinte);margin:0 0 var(--s2);
}
.einwand__antwort{font-size:var(--t-small);line-height:1.75;color:var(--tinte-weich);margin:0}
.einwand__antwort strong{color:var(--tinte);font-weight:600}

/* ---------- Vorher / Nachher ------------------------------------------ */
.gegenueber{display:grid;gap:var(--s3);margin-top:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.gegenueber{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gegenueber figure{margin:0;min-width:0}
.gegenueber img{width:100%;aspect-ratio:8/5;object-fit:cover;display:block}
.gegenueber figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;
  margin-top:.75rem;font-size:var(--t-small);line-height:1.7;color:var(--tinte-weich);
}
.zustandsmarke{
  font-family:var(--f-text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);
}

/* ---------- Versprechen in Zahlen ------------------------------------- */
.zahlenreihe{
  display:grid;gap:var(--s5);margin-top:var(--s5);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){.zahlenreihe{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.zahlenreihe > div{padding-top:var(--s3);border-top:1px solid var(--linie-hell)}
.zahlenreihe h3{margin:0 0 .6rem}
/* :not() noetig, sonst schlaegt diese Regel die Zahl darueber — gleiche
   Elementart, hoehere Spezifitaet.                                      */
.zahlenreihe p:not(.grosse-zahl){font-size:var(--t-small);line-height:1.75;color:var(--tinte-weich);margin:0}
.zahlenreihe .grosse-zahl{
  font-family:var(--f-display);font-size:clamp(3.5rem,2.2rem + 5vw,6rem);
  line-height:.9;color:var(--bronze);margin:0 0 var(--s2);
  font-variant-numeric:tabular-nums;
}
.dunkelraum .zahlenreihe > div,.materialband .zahlenreihe > div{border-top-color:var(--linie-dunkel)}
.dunkelraum .zahlenreihe .grosse-zahl,.materialband .zahlenreihe .grosse-zahl{color:var(--gold)}

/* ---------- Kontaktformular ------------------------------------------ */
/* Das HTML-Formular wird direkt an den Formspree-Endpunkt gesendet. */
.formular{max-width:44rem;margin-top:var(--s5)}
.formular__reihe{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.formular__reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.formular__feld{display:block;margin-bottom:var(--s3);min-width:0}
.formular__feld:last-of-type{margin-bottom:0}

.formular__marke{
  display:block;margin-bottom:.55rem;
  font-family:var(--f-text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-weich);
}
.formular__marke span{color:var(--bronze);font-weight:400}

.formular input[type=text],
.formular input[type=email],
.formular input[type=tel],
.formular select,
.formular textarea{
  display:block;width:100%;
  padding:.85rem 1rem;min-height:52px;
  background:var(--papier);
  border:1px solid var(--linie-hell);border-radius:0;
  font-family:var(--f-text);font-size:var(--t-body);color:var(--tinte);
  transition:border-color var(--schnell) var(--ease),background var(--schnell) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.formular textarea{min-height:11rem;line-height:1.7;resize:vertical}
.formular select{
  /* Eigener Pfeil, damit das Feld nicht nach Systemdialog aussieht */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A6236' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px;
  padding-right:2.6rem;cursor:pointer;
}
.formular input:hover,.formular select:hover,.formular textarea:hover{border-color:var(--stahl-weich)}
.formular input:focus-visible,.formular select:focus-visible,.formular textarea:focus-visible{
  outline:2px solid var(--bronze);outline-offset:2px;border-color:var(--bronze);
}
.formular ::placeholder{color:var(--stahl-weich);opacity:1}

/* Erst nach einem Absendeversuch faerben, nicht schon beim Tippen */
.formular.ist-geprueft input:invalid,
.formular.ist-geprueft select:invalid,
.formular.ist-geprueft textarea:invalid{border-color:#9B3B2F}

.formular__zustimmung{
  display:flex;gap:.85rem;align-items:flex-start;
  margin-top:var(--s4);font-size:var(--t-small);line-height:1.7;color:var(--tinte-weich);
}
.formular__zustimmung input{margin-top:.28rem;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--bronze)}

/* Honigtopf gegen Formularroboter: fuer Menschen unerreichbar */
.formular__topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formular__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.formular__hinweis{font-size:var(--t-mini);line-height:1.7;color:var(--tinte-weich);max-width:26rem}
.formular__meldung{
  margin-top:var(--s3);padding:.85rem 1rem;
  border-left:2px solid var(--bronze);background:var(--papier-tief);
  font-size:var(--t-small);line-height:1.7;color:var(--tinte);
}
.formular__meldung:empty{display:none}

/* ---------- WhatsApp-Knopf ------------------------------------------- */
/* Bewusst in der Hausfarbe statt im Markengruen: das Zeichen traegt die
   Wiedererkennung, die Flaeche muss nicht dagegen anlaufen.            */
.knopf--wa svg{width:19px;height:19px;flex:0 0 auto}
.wa-block{margin-top:var(--s3)}
.wa-block .knopf{width:100%;justify-content:center}
@media (min-width:480px){.wa-block .knopf{width:auto;justify-content:flex-start}}

/* ---------- Einwilligungsbanner --------------------------------------- */
/* Erscheint nur, solange keine Entscheidung vorliegt. Die Karte laedt erst
   nach ausdruecklicher Zustimmung — bis dahin steht an ihrer Stelle eine
   Platzhalterflaeche. Ablehnen ist genauso leicht wie Zustimmen.        */
.einwilligung{
  position:fixed;z-index:80;
  left:max(var(--rand),env(safe-area-inset-left));
  right:max(var(--rand),env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  max-width:34rem;margin-inline:auto;
  padding:clamp(1.25rem,3vw,1.75rem);
  background:var(--dunkel);color:var(--stahl);
  border:1px solid rgba(198,161,92,.28);
  box-shadow:0 18px 50px rgba(15,14,12,.35);
}
.einwilligung[hidden]{display:none}
.einwilligung__marke{
  font-family:var(--f-text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin:0 0 .5rem;
}
.einwilligung h2{
  font-family:var(--f-display);font-size:var(--t-h3);color:var(--papier);
  margin:0 0 .75rem;
}
.einwilligung__fuss{
  margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid rgba(190,194,201,.14);
  font-size:var(--t-mini);line-height:1.65;color:var(--stahl-weich);
}
/* Aktive Auswahl leicht hervorheben, wenn der Banner erneut geoeffnet wird */
.einwilligung .knopf[aria-pressed="true"]{border-color:var(--gold-hell)}
.einwilligung p{font-size:var(--t-small);line-height:1.7;color:var(--stahl);margin:0 0 .75rem}
.einwilligung p:last-of-type{margin-bottom:0}
.einwilligung a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.einwilligung__knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s3)}
.einwilligung__knoepfe .knopf{flex:1 1 10rem;justify-content:center}
/* Auf kleinen Schirmen darf das Banner nicht den halben Bildschirm
   einnehmen — enger setzen und den Text etwas kleiner.            */
@media (max-width:30rem){
  .einwilligung{padding:1rem}
  .einwilligung__marke{font-size:.625rem;margin-bottom:.35rem}
  .einwilligung h2{font-size:var(--t-gross);margin-bottom:.5rem}
  .einwilligung p{font-size:var(--t-mini);line-height:1.6;margin-bottom:.5rem}
  .einwilligung__knoepfe{margin-top:var(--s2);gap:.5rem}
  .einwilligung__fuss{margin-top:var(--s2);padding-top:.6rem;font-size:.625rem}
}
/* Sehr niedrige Fenster: Banner scrollbar machen, statt ihn ueber den
   Bildschirmrand hinauswachsen zu lassen.                              */
@media (max-height:44rem){
  .einwilligung{max-height:70vh;overflow-y:auto}
}

/* ---------- Kartenplatzhalter ----------------------------------------- */
.karte{margin-top:var(--s4);border:1px solid var(--linie-hell);background:var(--papier-tief)}
.karte__flaeche{position:relative;aspect-ratio:16/10;min-height:18rem}
.karte__flaeche iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.karte__sperre{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);padding:var(--s4);text-align:center;
}
.karte__sperre h3{margin:0;font-size:var(--t-h3)}
.karte__sperre p{max-width:32rem;margin:0;font-size:var(--t-small);line-height:1.7;color:var(--tinte-weich)}
.karte__fuss{
  padding:var(--s3);border-top:1px solid var(--linie-hell);
  font-size:var(--t-mini);line-height:1.7;color:var(--tinte-weich);
}
.karte__fuss a{color:var(--bronze)}
@media (max-width:30rem){
  .karte__flaeche{aspect-ratio:auto}
  .karte__sperre{
    position:relative;inset:auto;min-height:18rem;
    padding:var(--s3) var(--s2);gap:.75rem;
  }
  .karte__sperre h3,.karte__sperre p,.karte__fuss{overflow-wrap:anywhere}
}

/* ---------- Fußzeile ------------------------------------------------- */
.fuss{background:var(--dunkel-tief);color:var(--stahl-weich);padding-block:var(--sektion-eng) var(--s5)}
.fuss__oben{
  display:grid;gap:var(--s5) clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr);
  padding-bottom:var(--s5);border-bottom:1px solid var(--linie-dunkel);
}
.fuss h3{
  font-family:var(--f-text);font-size:var(--t-mini);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hell);
  margin-bottom:var(--s2);
}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:.2rem}
.fuss a{color:var(--stahl);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fuss a:hover{color:var(--gold)}
.fuss p{font-size:var(--t-small);line-height:1.75;color:var(--stahl-weich)}
.fuss__unten{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);padding-top:var(--s4);font-size:var(--t-mini);
}
.fuss__recht{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hoch{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:var(--stahl);text-decoration:none}
/* Schalter, der wie die Links daneben aussieht — er ist ein Button,
   weil er eine Einstellung aendert und kein Ziel aufruft.          */
.fuss__schalter{
  display:inline-flex;align-items:center;min-height:44px;padding:0;
  background:none;border:0;cursor:pointer;
  font-family:var(--f-text);font-size:inherit;color:var(--stahl);
  text-decoration:underline;text-underline-offset:3px;
}
.fuss__schalter:hover{color:var(--gold)}
.hoch:hover{color:var(--gold)}

/* ---------- Seitenkopf der Unterseiten ------------------------------ */
.seitenkopf{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem) var(--sektion-eng)}
.seitenkopf h1{max-width:18ch;margin-bottom:var(--s4)}
.seitenkopf__lead{font-size:var(--t-gross);line-height:1.55;color:var(--tinte-weich);max-width:36rem}

/* Fließtextseiten (Impressum, Datenschutz) */
.rechtstext{max-width:44rem}
.rechtstext h2{font-size:var(--t-h3);margin:var(--s5) 0 var(--s2)}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext h3{font-size:var(--t-body);font-family:var(--f-text);font-weight:600;margin:var(--s4) 0 var(--s1)}
.rechtstext p,.rechtstext li{font-size:var(--t-small);line-height:1.75;color:var(--tinte-weich)}
.rechtstext strong{color:var(--tinte)}

/* Leistungsdetail-Seite */
.leistung{
  padding-block:var(--sektion-eng);border-top:1px solid var(--linie-hell);
  display:grid;gap:clamp(.75rem,3vw,3rem);grid-template-columns:minmax(0,1fr);
}
.leistung__marke{min-width:0}
.leistung h3{font-size:var(--t-h3);margin:0}
.leistung__text{min-width:0;max-width:38rem}
.leistung__text p{font-size:var(--t-small);line-height:1.75;color:var(--tinte-weich)}
.leistung__liste{
  margin:var(--s2) 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.5rem .4rem;
}
.leistung__liste li{
  margin:0;font-size:var(--t-mini);letter-spacing:.02em;color:var(--tinte-weich);
  border:1px solid var(--linie-hell);padding:.35rem .7rem;
}
@media (min-width:768px){.leistung{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
.leistungsgruppe{padding-block:var(--sektion-eng) 0}
.leistungsgruppe > h2{margin-bottom:var(--s3)}
.leistungsgruppe > p{color:var(--tinte-weich);max-width:34rem}

/* FAQ */
.faq{margin-top:var(--s5);border-top:1px solid var(--linie-hell);max-width:44rem}
.faq__eintrag{border-bottom:1px solid var(--linie-hell)}
.faq__eintrag > summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:1.1rem 0;cursor:pointer;list-style:none;min-height:44px;
  font-family:var(--f-display);font-size:var(--t-h3);line-height:1.3;
}
.faq__eintrag > summary::-webkit-details-marker{display:none}
.faq__eintrag > summary:hover{color:var(--bronze)}
.faq__eintrag > summary > span:first-child{flex:1 1 auto;min-width:0}
.faq__zeichen{flex:none;width:13px;height:13px;position:relative;color:var(--bronze);align-self:center}
.faq__zeichen::before,.faq__zeichen::after{content:"";position:absolute;background:currentColor;transition:transform var(--schnell) var(--ease),opacity var(--schnell) linear}
.faq__zeichen::before{left:0;right:0;top:6px;height:1px}
.faq__zeichen::after{top:0;bottom:0;left:6px;width:1px}
.faq__eintrag[open] .faq__zeichen::after{transform:scaleY(0);opacity:0}
.faq__antwort{padding:0 0 1.35rem;max-width:36rem}
.faq__antwort p{font-size:var(--t-small);line-height:1.75;color:var(--tinte-weich)}

/* ---------- Reveal: Inhalte sind ohne JS immer sichtbar ------------- */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].ist-sichtbar{
  opacity:1;transform:none;
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
}

/* ---------- Ab Tablet ------------------------------------------------ */
@media (min-width:768px){
  .fuss__oben{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
  .belege{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Mobile Navigation ---------------------------------------- */
@media (max-width:899px){
  .menueknopf{display:inline-flex}
  /* Nummer optisch weg, aber als zugänglicher Name erhalten —
     display:none würde dem Link den Namen nehmen. */
  .kopf__tel span{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .kopf__tel{padding-left:0;border-left:0;min-width:44px;justify-content:center}
  .hauptnav{
    position:absolute;left:calc(var(--rand) * -1);right:calc(var(--rand) * -1);top:100%;
    z-index:var(--z-menue);
    background:var(--papier);border-top:1px solid var(--linie-hell);
    border-bottom:1px solid var(--linie-hell);
    box-shadow:0 8px 24px rgba(20,18,15,.07);
    display:none;
  }
  .hauptnav[data-offen="true"]{display:block}
  .hauptnav ul{flex-direction:column;gap:0;padding:var(--s1) var(--rand) var(--s3)}
  .hauptnav li{border-bottom:1px solid var(--linie-hell)}
  .hauptnav li:last-child{border-bottom:0}
  .hauptnav a{min-height:56px;font-size:var(--t-gross);font-family:var(--f-display);border-bottom:0}
  .hauptnav a[aria-current="page"]{border-bottom:0}
}
@media (max-width:599px){
  /* Auf schmalen Geraeten entfaellt die Claim-Zeile, sonst wird die
     Kopfzeile hoeher als der halbe Bildschirm. */
  .logo-b--kopf .logo-b__claim{display:none}
  .logo-b--kopf svg{width:52px}
  .logo-b--kopf .logo-b__wort{font-size:21px}
  .kopf__inner{min-height:5rem}
}
@media (max-width:479px){
  /* Auf schmalen Geräten ist der Verlauf über das ganze Bild nötig */
  .materialband::before,.materialband--rechts::before{
    background:linear-gradient(180deg,rgba(15,14,12,.55) 0%,rgba(15,14,12,.88) 58%,rgba(15,14,12,.94) 100%);
  }
  .materialband--abschluss::before{
    background:linear-gradient(180deg,rgba(15,14,12,.28) 0%,rgba(15,14,12,.72) 54%,rgba(15,14,12,.86) 100%);
  }
}
@media (max-width:400px){
  :root{--rand:1rem}
  .logo-b--kopf svg{width:46px}
  .logo-b--kopf .logo-b__wort{font-size:19px}
  .kopf__rechts{gap:.5rem}
  .menueknopf{gap:.45rem;padding:.5rem .6rem;font-size:.6875rem;letter-spacing:.1em}
  .kopf__inner{min-height:4.5rem}
}

/* ---------- Druck ---------------------------------------------------- */
@media print{
  .kopf,.menueknopf,.skiplink,.hoch{display:none}
  body{background:#fff;color:#000}
  .dunkelraum,.materialband{background:#fff;color:#000}
  .materialband::before{display:none}
}

/* ---------- Reduzierte Bewegung -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
}