/* =========================================================================
   Ingenieurbüro Skroblin — Stylesheet
   Kein externer Font, kein Tracking, keine Fremd-Requests.
   Farbwelten:  html[data-farbe="anthrazit" | "sand" | "stahl"]
   Layouts:     html[data-layout="klassisch" | "kompakt"]
   ========================================================================= */

/* ---------- 1. Zurücksetzen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg{max-width:100%;height:auto;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}

/* ---------- 2. Tokens ---------- */
:root{
  /* Abstandsraster — nie null */
  --luft-min:1rem;
  --luft-nach-ueberschrift:max(1.5rem, .7em);
  --luft-unter-titel:2rem;
  --karte-abstand:1rem;
  --luft-raster:1.5rem;
  --luft-s:clamp(.75rem,2vw,1.25rem);
  --luft-m:clamp(1.5rem,4vw,2.5rem);
  --luft-l:clamp(2.5rem,7vw,5rem);
  --luft-xl:clamp(3rem,8vw,5.5rem);

  /* Nicht clamp(20rem,…): Die Untergrenze steht in rem und wächst mit, wenn
     jemand die Schrift größer stellt. Bei 200 % waren daraus 640 px feste
     Hüllenbreite geworden — auf einem 390-px-Gerät lief damit jede Seite
     seitlich weg (gemessen 28.08.2026, alle 10 Seiten). min() kann das nicht
     passieren, die Hülle bleibt immer innerhalb des Fensters. */
  --breite:min(92vw,74rem);
  --breite-text:min(100%,62ch);
  --rand:clamp(1.15rem,5vw,2.75rem);

  --radius:14px;
  --radius-s:8px;
  --linie-staerke:1px;

  /* „Segoe UI Variable Text“ zuerst: auf Windows 11 die sauberere Fassung
     derselben Schrift. Bewusst nur Systemschriften — jede Webschrift wäre
     entweder ein Fremd-Request oder eine Lizenzfrage. */
  --schrift:"Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Liberation Sans",sans-serif;
  --schrift-zahl:"Segoe UI Variable Display","Segoe UI",Roboto,system-ui,sans-serif;

  /* Überschriften bewusst zurückhaltend. Große Grade brechen bei deutschen
     Komposita an schlechten Stellen — lieber eine Stufe kleiner und ruhig. */
  --f-xs:clamp(.8rem,.78rem + .1vw,.86rem);
  --f-s:clamp(.9rem,.87rem + .15vw,.97rem);
  --f-m:clamp(1rem,.96rem + .2vw,1.06rem);
  --f-l:clamp(1.06rem,1rem + .28vw,1.2rem);
  --f-h3:clamp(1.08rem,1.02rem + .3vw,1.25rem);
  --f-h2:clamp(1.3rem,1.13rem + .78vw,1.8rem);
  --f-h1:clamp(1.6rem,1.3rem + 1.4vw,2.5rem);

  --tempo:.34s;
  --kurve:cubic-bezier(.22,.61,.36,1);

}

/* --- Farbwelten. Erzeugt aus scripts/farben.mjs, dort auch gemessen.
       Nicht von Hand ändern. --- */

/* Anthrazit — Weiß und Anthrazit mit dem Signalrot aus dem Logo */
:root{
  --grund:#ffffff;
  --grund-2:#f4f3f1;
  --grund-3:#26282e;
  --flaeche:#ffffff;
  --text:#26282e;
  --text-leise:#55585f;
  --text-auf-dunkel:#ffffff;
  --text-leise-auf-dunkel:#d9dbe0;
  --akzent:#9c182c;
  --akzent-tief:#7c1223;
  --akzent-auf-dunkel:#e97186;
  --akzent-knopf-dunkel:#c81f3c;
  --knopf-text:#ffffff;
  --linie:#dedcd8;
  --linie-dunkel:#3e414a;
  --kopf-grund:#ffffffe6;
  --schatten:0 1px 2px rgba(20,22,26,.05),0 8px 26px -12px rgba(20,22,26,.22);
  --schatten-hoch:0 2px 4px rgba(20,22,26,.06),0 22px 48px -18px rgba(20,22,26,.32);
}

/* Sand — Warmer Sandton, das Rot zurückgenommen */
html[data-farbe="sand"]{
  --grund:#fbf8f3;
  --grund-2:#f1e9dc;
  --grund-3:#2c2823;
  --flaeche:#ffffff;
  --text:#2c2823;
  --text-leise:#57503f;
  --text-auf-dunkel:#fdfbf7;
  --text-leise-auf-dunkel:#ded5c6;
  --akzent:#8c1b26;
  --akzent-tief:#6f141d;
  --akzent-auf-dunkel:#e8899a;
  --akzent-knopf-dunkel:#bb2733;
  --knopf-text:#ffffff;
  --linie:#e0d6c5;
  --linie-dunkel:#4a4339;
  --kopf-grund:#fbf8f3e6;
  --schatten:0 1px 2px rgba(20,22,26,.05),0 8px 26px -12px rgba(20,22,26,.22);
  --schatten-hoch:0 2px 4px rgba(20,22,26,.06),0 22px 48px -18px rgba(20,22,26,.32);
}

/* Stahl — Dunkle Fassung, technisch */
html[data-farbe="stahl"]{
  --grund:#1b1e24;
  --grund-2:#232830;
  --grund-3:#12151a;
  --flaeche:#252a33;
  --text:#f0f2f5;
  --text-leise:#aeb5c1;
  --text-auf-dunkel:#f0f2f5;
  --text-leise-auf-dunkel:#aeb5c1;
  --akzent:#f2a9a0;
  --akzent-tief:#f8c8c1;
  --akzent-auf-dunkel:#f2a9a0;
  --akzent-knopf-dunkel:#f2a9a0;
  --knopf-text:#1b1e24;
  --linie:#3a4150;
  --linie-dunkel:#3a4150;
  --kopf-grund:#1b1e24e6;
  --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 26px -12px rgba(0,0,0,.7);
  --schatten-hoch:0 2px 4px rgba(0,0,0,.45),0 22px 48px -18px rgba(0,0,0,.8);
}

/* Petrol — Kühles Blaugrün statt Rot, hell und ruhig */
html[data-farbe="petrol"]{
  --grund:#ffffff;
  --grund-2:#eef3f3;
  --grund-3:#12292c;
  --flaeche:#ffffff;
  --text:#16262a;
  --text-leise:#4d6166;
  --text-auf-dunkel:#f2f8f8;
  --text-leise-auf-dunkel:#c2d6d8;
  --akzent:#0d5c63;
  --akzent-tief:#08454b;
  --akzent-auf-dunkel:#7fd3d8;
  --akzent-knopf-dunkel:#0f7178;
  --knopf-text:#ffffff;
  --linie:#d5e2e3;
  --linie-dunkel:#2a4247;
  --kopf-grund:#ffffffe6;
  --schatten:0 1px 2px rgba(20,22,26,.05),0 8px 26px -12px rgba(20,22,26,.22);
  --schatten-hoch:0 2px 4px rgba(20,22,26,.06),0 22px 48px -18px rgba(20,22,26,.32);
}

/* Beton — Kühles Grau, das Signalrot als einziger Farbton */
html[data-farbe="beton"]{
  --grund:#f7f7f8;
  --grund-2:#e8e9eb;
  --grund-3:#31343a;
  --flaeche:#ffffff;
  --text:#1f2226;
  --text-leise:#54585f;
  --text-auf-dunkel:#ffffff;
  --text-leise-auf-dunkel:#d3d6db;
  --akzent:#a51022;
  --akzent-tief:#830a19;
  --akzent-auf-dunkel:#f08c9a;
  --akzent-knopf-dunkel:#c31527;
  --knopf-text:#ffffff;
  --linie:#d6d8dc;
  --linie-dunkel:#484c55;
  --kopf-grund:#f7f7f8e6;
  --schatten:0 1px 2px rgba(20,22,26,.05),0 8px 26px -12px rgba(20,22,26,.22);
  --schatten-hoch:0 2px 4px rgba(20,22,26,.06),0 22px 48px -18px rgba(20,22,26,.32);
}

/* Nacht — Tiefes Marineblau mit warmem Messing */
html[data-farbe="nacht"]{
  --grund:#101827;
  --grund-2:#182133;
  --grund-3:#0a1020;
  --flaeche:#1a2434;
  --text:#eef2f8;
  --text-leise:#a9b5c8;
  --text-auf-dunkel:#eef2f8;
  --text-leise-auf-dunkel:#a9b5c8;
  --akzent:#e8b567;
  --akzent-tief:#f2cd93;
  --akzent-auf-dunkel:#e8b567;
  --akzent-knopf-dunkel:#e8b567;
  --knopf-text:#101827;
  --linie:#2b3648;
  --linie-dunkel:#2b3648;
  --kopf-grund:#101827e6;
  --schatten:0 1px 2px rgba(0,0,0,.4),0 8px 26px -12px rgba(0,0,0,.7);
  --schatten-hoch:0 2px 4px rgba(0,0,0,.45),0 22px 48px -18px rgba(0,0,0,.8);
}

/* Dunkle Farbwelten: helle Wortmarke */
html[data-farbe="stahl"] .wortmarke--dunkel,
html[data-farbe="nacht"] .wortmarke--dunkel{display:none}
html[data-farbe="stahl"] .wortmarke--hell,
html[data-farbe="nacht"] .wortmarke--hell{display:block}

/* ---------- 3. Grundlagen ---------- */
body{
  font-family:var(--schrift);
  font-size:var(--f-m);
  line-height:1.7;
  color:var(--text);
  background:var(--grund);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background var(--tempo) var(--kurve),color var(--tempo) var(--kurve);
}
/* hyphens:manual statt auto — die automatische Trennung setzt im Deutschen
   Trennstriche an unschönen Stellen („Bau-wesen"). overflow-wrap:break-word
   bleibt als Rückfall: es greift nur, wenn ein Wort sonst überstehen würde
   (z. B. „Datenschutzerklärung" bei 320 px). */
h1,h2,h3,h4{
  line-height:1.22;font-weight:650;letter-spacing:-.012em;
  hyphens:manual;overflow-wrap:break-word;
}
/* balance verteilt die Zeilen gleichmäßig — bei kurzen Überschriften das
   bessere Werkzeug. Es unterdrückt allerdings die Silbentrennung, deshalb
   bleibt overflow-wrap oben als Rückfall für lange Einzelwörter. */
h1,h2{text-wrap:balance}
h3,h4{text-wrap:pretty}
/* Satzteile aus umbruchSchutz(): ein inline-block bricht als Einheit um und
   nur dann intern, wenn er allein nicht in eine Zeile passt. Dadurch fällt
   der Umbruch bevorzugt auf die Satzgrenze statt mitten in den Halbsatz.
   Siehe Skill /umbruch-regel. */
.satzteil{display:inline-block}
/* Sobald eine Überschrift in Satzteile geklammert ist, muss balance weichen.
   balance verteilt die Wörter auf möglichst gleich lange Zeilen und zerlegt
   dabei auch die Klammern — aus „Ingenieurbüro für Bauwesen | Volkmar Skroblin"
   wurden so wieder drei Zeilen. Ohne balance bricht der Browser an den
   Klammergrenzen, also genau dort, wo es gewollt ist. */
h1:has(.satzteil),h2:has(.satzteil),h3:has(.satzteil),h4:has(.satzteil){text-wrap:normal}
/* Die Breitengrenze hält die Zeilen lesbar, war mit 22ch/26ch aber so eng,
   dass Überschriften schon dreizeilig umbrachen, während rechts daneben die
   halbe Seite frei blieb. Jetzt so weit, dass die verfügbare Spalte genutzt
   wird — die Lesbarkeit trägt bis etwa 40 Zeichen je Zeile locker.
   Siehe Skill /umbruch-regel. */
/* Abstand nach jeder Ueberschrift. Vorher hing ueberall --luft-min (16px)
   fest, unabhaengig von der Schriftgroesse — nach einer 51-px-H1 klebte der
   Folgeblock. max() haelt einen Sockel von 24px und laesst den Abstand ab
   ca. 44px Schriftgroesse proportional mitwachsen.
   Gemessen mit scripts/pruefe-abstaende.mjs, Schranke vor dem Deploy. */
h1,h2,h3,h4{margin-bottom:var(--luft-nach-ueberschrift)}

/* Gleicher Abstand unter JEDER H1 und H2 - egal ob danach Text, eine Karte,
   ein Raster oder ein Kasten kommt. Vorher sprang der Abstand zwischen 24 und
   40 px, weil nicht diese Regel ihn bestimmte, sondern das margin-top des
   Folgeelements: im Block-Kontext fallen die beiden Abstaende zusammen und
   der groessere gewinnt. Deshalb wird das margin-top des direkten Nachbarn
   genullt - dann entscheidet allein --luft-unter-titel. */
h1,h2{margin-bottom:var(--luft-unter-titel)}
h1 + :where(*),h2 + :where(*){margin-top:0}
/* :where() zaehlt null, deshalb hier zusaetzlich mit Klassengewicht fuer
   die Nachbarn, die selbst ein margin-top mitbringen. */
h1 + [class],h2 + [class]{margin-top:0}

h1{font-size:var(--f-h1);max-width:38ch}
h2{font-size:var(--f-h2);max-width:40ch}
h3{font-size:var(--f-h3);font-weight:640}
p,li,dd,address{text-wrap:pretty;hyphens:manual;overflow-wrap:break-word}
strong{font-weight:640}
::selection{background:var(--akzent);color:var(--knopf-text)}

:where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--akzent);
  outline-offset:3px;
  border-radius:var(--radius-s);
}

.springmarke{
  position:absolute;left:var(--luft-min);top:var(--luft-min);
  transform:translateY(-160%);
  background:var(--akzent);color:var(--knopf-text);
  padding:.7rem 1.2rem;border-radius:var(--radius-s);
  z-index:100;text-decoration:none;font-weight:640;
  transition:transform var(--tempo) var(--kurve);
}
.springmarke:focus{transform:translateY(0)}

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

/* ---------- 4. Bausteine ---------- */
.huelle{width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.huelle--schmal{width:min(92vw,54rem)}

.abschnitt{padding-block:var(--luft-xl)}
.abschnitt--knapp{padding-block:var(--luft-l)}
.abschnitt--getoent{background:var(--grund-2)}
.abschnitt--dunkel{background:var(--grund-3);color:var(--text-auf-dunkel)}
.abschnitt--dunkel .leise{color:var(--text-leise-auf-dunkel)}
.abschnitt--dunkel .vorzeile{color:var(--akzent-auf-dunkel)}

/* flex-wrap und ein schrumpfbarer Strich: bei 200 % Schrift war
   „BÜROGEMEINSCHAFT“ mitsamt Sperrung und 2-rem-Strich breiter als ein
   390-px-Gerät, und die ganze Seite lief seitlich weg. Jetzt gibt erst der
   Strich nach, dann rutscht das Wort in die nächste Zeile. */
.vorzeile{
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  font-size:var(--f-xs);font-weight:680;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent);
  margin-bottom:var(--luft-min);
}
.vorzeile::before{content:"";flex:0 1 2rem;min-width:1rem;height:2px;background:currentColor}

.leise{color:var(--text-leise)}
.fliesstext{max-width:var(--breite-text)}
.fliesstext > * + *{margin-top:var(--luft-min)}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.6rem;min-height:3rem;
  border:var(--linie-staerke) solid transparent;border-radius:100px;
  font-weight:640;font-size:var(--f-s);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  background:var(--akzent);color:var(--knopf-text);
  transition:transform var(--tempo) var(--kurve),box-shadow var(--tempo) var(--kurve),background var(--tempo) var(--kurve),color var(--tempo) var(--kurve),border-color var(--tempo) var(--kurve);
}
.knopf:hover{transform:translateY(-2px);box-shadow:var(--schatten-hoch);background:var(--akzent-tief)}
.knopf:active{transform:translateY(0)}
.knopf--linie{background:transparent;color:var(--text);border-color:var(--linie)}
.knopf--linie:hover{background:transparent;border-color:var(--akzent);color:var(--akzent)}
/* Knöpfe auf dunklem Grund.
   Das Kontaktfeld ist eine dunkle Karte, liegt aber NICHT in einem
   .abschnitt--dunkel. Vorher erbte der Umriss-Knopf dort die Textfarbe für
   hellen Grund und stand damit dunkel auf dunkel. Beide Fälle werden jetzt
   gemeinsam behandelt.
   Der gefüllte Knopf behält die Signalfarbe, nur eine Spur aufgehellt
   (--akzent-knopf-dunkel), und bekommt einen feinen hellen Rand. Vorher stand
   dort die helle Akzentfarbe als Füllung — das ergab einen Lachston, der neben
   dem Rot der Marke wie eine zweite Farbe wirkte. Der Rand übernimmt jetzt die
   Aufgabe, den Knopf von der dunklen Fläche abzuheben, ohne den Ton zu ändern. */
:is(.abschnitt--dunkel,.kontaktfeld) .knopf:not(.knopf--linie){
  background:var(--akzent-knopf-dunkel);
  color:var(--knopf-text);
  border:var(--linie-staerke) solid var(--akzent-auf-dunkel);
}
:is(.abschnitt--dunkel,.kontaktfeld) .knopf:not(.knopf--linie):hover{
  background:var(--akzent-knopf-dunkel);
  filter:brightness(1.12);
}
:is(.abschnitt--dunkel,.kontaktfeld) .knopf--linie{
  color:var(--text-auf-dunkel);
  border-color:var(--linie-dunkel);
}
:is(.abschnitt--dunkel,.kontaktfeld) .knopf--linie:hover{
  border-color:var(--akzent-auf-dunkel);
  color:var(--akzent-auf-dunkel);
}
.knopf__pfeil{transition:transform var(--tempo) var(--kurve)}
.knopf:hover .knopf__pfeil{transform:translateX(4px)}

.knopfreihe{display:flex;flex-wrap:wrap;gap:var(--luft-min);margin-top:var(--luft-m)}

.textlink{
  color:var(--akzent);text-decoration:none;font-weight:620;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--tempo) var(--kurve);
  padding-bottom:1px;
}
.textlink:hover{background-size:0% 1px}
.abschnitt--dunkel .textlink{color:var(--akzent-auf-dunkel)}

/* ---------- 5. Kopfbereich + Navigation ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:var(--kopf-grund);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:var(--linie-staerke) solid transparent;
  transition:border-color var(--tempo) var(--kurve),box-shadow var(--tempo) var(--kurve);
}
.kopf.kopf--gescrollt{border-bottom-color:var(--linie);box-shadow:var(--schatten)}
.kopf__innen{
  display:flex;align-items:center;justify-content:space-between;gap:var(--luft-min);
  min-height:4.5rem;padding-block:.7rem;
}
.kopf__marke{display:flex;align-items:center;text-decoration:none;flex:0 1 auto;min-width:0}
.kopf__marke .wortmarke{width:clamp(11rem,26vw,15.5rem);height:auto}

/* Wortmarke: echte helle Zweitfassung statt Invert-Filter — ein Filter
   würde das Signalrot in Cyan verwandeln. Welche Farbwelten die helle
   Fassung zeigen, entscheidet der erzeugte Block weiter oben. */
.wortmarke--hell{display:none}

.navi{display:none}
.navi__liste{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.6rem)}
.navi__link{
  position:relative;text-decoration:none;font-size:var(--f-s);font-weight:600;
  padding:.55rem .2rem;color:var(--text);white-space:nowrap;
  transition:color var(--tempo) var(--kurve);
}
.navi__link::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;
  background:var(--akzent);transform:scaleX(0);transform-origin:right;
  transition:transform var(--tempo) var(--kurve);
}
.navi__link:hover::after,.navi__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.navi__link[aria-current="page"]{color:var(--akzent)}

.kopf__aktionen{display:flex;align-items:center;gap:var(--luft-min);flex:none}
.kopf__knopf{display:none}

/* Menüschalter — animierte Striche */
.schalter{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:2.9rem;height:2.9rem;flex:none;
  padding:0 .6rem;border:var(--linie-staerke) solid var(--linie);
  border-radius:var(--radius-s);background:transparent;cursor:pointer;
}
.schalter span{
  display:block;height:2px;width:100%;background:var(--text);border-radius:2px;
  transition:transform var(--tempo) var(--kurve),opacity calc(var(--tempo)/2) linear;
}
.schalter[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.schalter[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.schalter[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Schublade (mobil) */
/* overflow:clip, weil die geschlossene Tafel per translateX(101%) neben dem
   Bildschirm geparkt ist. Bei vergrößerter Schrift ging die Rechnung nicht
   mehr genau auf und die Tafel verbreiterte die Seite um ein paar Pixel —
   gemessen bei 390 px und 200 % Schrift. Geclippt kann das nicht passieren. */
.schublade{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none;overflow:clip}
.schublade__schleier{
  position:absolute;inset:0;background:rgba(20,21,25,.5);
  opacity:0;transition:opacity var(--tempo) var(--kurve);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.schublade__tafel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(88vw,22rem);
  background:var(--flaeche);color:var(--text);
  box-shadow:var(--schatten-hoch);
  display:flex;flex-direction:column;
  padding:var(--luft-m) var(--rand) var(--luft-l);
  transform:translateX(101%);
  transition:transform var(--tempo) var(--kurve);
  overflow-y:auto;overscroll-behavior:contain;
}
.schublade.offen{visibility:visible;pointer-events:auto}
.schublade.offen .schublade__schleier{opacity:1}
.schublade.offen .schublade__tafel{transform:translateX(0)}

.schublade__kopf{display:flex;justify-content:flex-end;margin-bottom:var(--luft-m)}
.schublade__schliessen{
  width:2.9rem;height:2.9rem;border:var(--linie-staerke) solid var(--linie);
  border-radius:var(--radius-s);background:transparent;cursor:pointer;
  font-size:1.35rem;line-height:1;display:grid;place-items:center;
}
.schublade__liste{display:flex;flex-direction:column;gap:.15rem}
.schublade__link{
  display:flex;align-items:center;justify-content:space-between;gap:var(--luft-min);
  padding:.95rem .35rem;text-decoration:none;font-size:var(--f-l);font-weight:620;
  border-bottom:var(--linie-staerke) solid var(--linie);
  opacity:0;transform:translateX(14px);
}
.schublade.offen .schublade__link{
  animation:einschweben .45s var(--kurve) forwards;
  animation-delay:calc(var(--nr,0) * 55ms + 90ms);
}
@keyframes einschweben{to{opacity:1;transform:translateX(0)}}
.schublade__link::after{content:"\2192";color:var(--akzent);opacity:.55}
.schublade__fuss{margin-top:auto;padding-top:var(--luft-m);font-size:var(--f-s)}
.schublade__fuss a{text-decoration:none}
.schublade__fuss .knopf{width:100%;margin-top:var(--luft-min)}

@media (min-width:62rem){
  .navi{display:block}
  .kopf__knopf{display:inline-flex}
  .schalter{display:none}
}

/* ---------- 6. Bühne ---------- */
.buehne{position:relative;padding-block:var(--luft-xl) var(--luft-l);overflow:hidden}
.buehne__raster{display:grid;grid-template-columns:1fr;gap:var(--luft-l);align-items:center}
.buehne__text{min-width:0}
.buehne h1{margin-bottom:var(--luft-unter-titel)}
.buehne__anriss{font-size:var(--f-l);color:var(--text-leise);max-width:52ch;margin-top:var(--luft-s)}
.buehne__bild{position:relative;min-width:0}
.buehne__bild img{
  width:100%;border-radius:var(--radius);box-shadow:var(--schatten-hoch);
  aspect-ratio:16/10;object-fit:cover;
}
.buehne__signet{
  position:absolute;left:var(--luft-min);bottom:var(--luft-min);
  background:var(--akzent);color:var(--knopf-text);
  padding:.6rem 1rem;border-radius:var(--radius-s);
  font-size:var(--f-xs);font-weight:660;letter-spacing:.06em;text-transform:uppercase;
  max-width:calc(100% - 2 * var(--luft-min));
}


.dreiklang{
  display:flex;flex-wrap:wrap;gap:var(--luft-s) var(--luft-m);
  margin-top:var(--luft-m);font-size:var(--f-s);font-weight:620;
}
.dreiklang li{display:flex;align-items:center;gap:.5rem;min-width:0}
.dreiklang li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--akzent);flex:none}

@media (min-width:56rem){
  .buehne__raster{grid-template-columns:1.05fr .95fr}
}

/* Layout „kompakt“: Bühne als Vollbild mit Überlagerung */
html[data-layout="kompakt"] .buehne{
  padding-block:0;position:relative;
  display:flex;align-items:flex-end;
  min-height:min(84vh,44rem);
}
/* position:static, damit das Bild sich am Abschnitt ausrichtet und wirklich
   randlos läuft — nicht an der eingerückten Hülle. */
html[data-layout="kompakt"] .buehne__raster{
  grid-template-columns:1fr;gap:0;position:static;width:var(--breite);
}
/* Der Schalplan ist eine Strichzeichnung auf Weiß. Vollflächig hinter Text
   verliert er unter jedem Schleier seine Zeichnung und wird zur grauen
   Fläche. Für das Kompakt-Layout steht deshalb ein Projektbild dahinter,
   der Plan bleibt dem Klassisch-Layout vorbehalten. */
.buehne__foto{display:none}
html[data-layout="kompakt"] .buehne__plan{display:none}
html[data-layout="kompakt"] .buehne__foto{display:block}
html[data-layout="kompakt"] .buehne__bild{position:absolute;inset:0;z-index:0}
html[data-layout="kompakt"] .buehne__bild img{
  width:100%;height:100%;border-radius:0;box-shadow:none;aspect-ratio:auto;
}
/* Zwei gestapelte Verläufe statt einem. Der Schalplan im Hintergrund hat
   fast weiße Flächen — mit einem einzigen Verlauf lag die weiße Überschrift
   dort bei gemessenen 3,3:1, stellenweise auf reinem Weiß. Senkrecht plus
   waagerecht gestapelt bleibt auch die hellste Stelle dunkel genug. */
html[data-layout="kompakt"] .buehne__bild::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(12,14,18,.93) 0%,rgba(12,14,18,.86) 34%,rgba(12,14,18,.42) 62%,rgba(12,14,18,.12) 100%),
    linear-gradient(to top,rgba(12,14,18,.55) 0%,rgba(12,14,18,.3) 55%,rgba(12,14,18,.14) 100%);
}
/* Schmale Schirme: der Text liegt ueber der ganzen Breite, deshalb dort
   flaechig abdunkeln statt nur links. */
@media (max-width:56rem){
  html[data-layout="kompakt"] .buehne__bild::after{
    background:linear-gradient(to top,rgba(12,14,18,.94) 0%,rgba(12,14,18,.86) 55%,rgba(12,14,18,.6) 100%);
  }
}
html[data-layout="kompakt"] .buehne__signet{display:none}
html[data-layout="kompakt"] .buehne__text{
  position:relative;z-index:1;color:#fff;
  padding-block:var(--luft-xl) var(--luft-l);
  max-width:46rem;
}
html[data-layout="kompakt"] .buehne__anriss{color:rgba(255,255,255,.86)}
html[data-layout="kompakt"] .buehne .vorzeile{color:var(--akzent-auf-dunkel)}
html[data-layout="kompakt"] .buehne .knopf--linie{color:#fff;border-color:rgba(255,255,255,.4)}
html[data-layout="kompakt"] .buehne .knopf--linie:hover{border-color:#fff;color:#fff}

/* ---------- 7. Raster & Karten ---------- */
.raster{display:grid;grid-template-columns:1fr;gap:var(--luft-m)}
@media (min-width:40rem){
  .raster--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:52rem){ .raster--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:64rem){ .raster--4{grid-template-columns:repeat(4,minmax(0,1fr))} }

.karte{
  display:flex;flex-direction:column;gap:var(--karte-abstand);
  min-width:0;
  padding:var(--luft-m);
  background:var(--flaeche);
  border:var(--linie-staerke) solid var(--linie);
  border-radius:var(--radius);
  transition:transform var(--tempo) var(--kurve),box-shadow var(--tempo) var(--kurve),border-color var(--tempo) var(--kurve);
}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hoch)}
.karte__nr{
  font-family:var(--schrift-zahl);font-size:var(--f-xs);font-weight:700;
  letter-spacing:.16em;color:var(--akzent);
}
/* Ausgleich: im flex-Container addieren sich gap und margin, der Abstand
   unter einer Karten-Ueberschrift war dadurch 32+16=48 px. Abgezogen wird
   der gap, damit unterm Strich ueberall derselbe Abstand steht. */
.karte h1,.karte h2,.karte h3,.karte h4{
  margin-bottom:calc(var(--luft-unter-titel) - var(--karte-abstand))
}
.karte p{font-size:var(--f-s);color:var(--text-leise)}
/* Kein margin-top:auto mehr. Das schob die Liste an den Kartenboden und riss
   bei kurzem Einleitungstext ein Loch mitten in die Karte — am deutlichsten
   bei „Baubegleitende Beratung" neben der längeren Nachbarkarte. Der freie
   Platz sitzt jetzt unten, wo er nicht auffällt. */
.karte__liste{display:flex;flex-direction:column;gap:.45rem;font-size:var(--f-s);margin-top:var(--luft-min);padding-top:var(--luft-min);color:var(--text-leise)}
.karte__liste li{display:flex;gap:.6rem;align-items:flex-start;min-width:0}
.karte__liste li::before{content:"\2014";color:var(--akzent);flex:none;font-weight:700}

html[data-layout="kompakt"] .karte{
  border-radius:4px;padding:var(--luft-s) var(--luft-m) var(--luft-m);
  border-top:3px solid var(--akzent);
}

/* Zahlenband */
/* Bewusst 2 x 2 statt 4 nebeneinander: vier schmale Spalten zerreißen die
   Beschriftungen in drei Zeilen. */
.zahlen{display:grid;grid-template-columns:1fr;gap:var(--luft-m) var(--luft-l)}
@media (min-width:34rem){ .zahlen{grid-template-columns:repeat(2,minmax(0,1fr))} }
.zahl{min-width:0;padding-left:var(--luft-min);border-left:3px solid var(--akzent)}
.zahl__wert{font-family:var(--schrift-zahl);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.zahl__text{font-size:var(--f-s);color:var(--text-leise);margin-top:.35rem}
.abschnitt--dunkel .zahl__text{color:var(--text-leise-auf-dunkel)}
.abschnitt--dunkel .zahl{border-left-color:var(--akzent-auf-dunkel)}

/* ---------- 8. Wechselbild (Text + Foto) ---------- */
.wechsel{display:grid;grid-template-columns:1fr;gap:var(--luft-l);align-items:center}
.wechsel__text{min-width:0}
.wechsel__bild{min-width:0}
.wechsel__bild img{width:100%;border-radius:var(--radius);box-shadow:var(--schatten);object-fit:cover}
@media (min-width:56rem){
  /* Nicht 1fr 1fr. Die halbe Seite reichte der Textspalte nicht: „Ingenieurbüro
     für Bauwesen Volkmar Skroblin" brach dort dreizeilig um, während das Bild
     danebenstand. Die Textspalte bekommt jetzt gut ein Fünftel mehr. */
  .wechsel{grid-template-columns:1.25fr 1fr}
  .wechsel--gedreht .wechsel__text{order:2}
  .wechsel--gedreht .wechsel__bild{order:1}
}
html[data-layout="kompakt"] .wechsel__bild img{border-radius:4px}

/* Datenzeilen */
.daten{display:grid;grid-template-columns:1fr;gap:.15rem;margin-top:var(--luft-m);font-size:var(--f-s)}
.daten__zeile{
  display:grid;grid-template-columns:1fr;gap:.15rem;
  padding-block:.75rem;border-top:var(--linie-staerke) solid var(--linie);
}
.daten__zeile:last-child{border-bottom:var(--linie-staerke) solid var(--linie)}
.daten__name{font-weight:660;color:var(--text)}
.daten__wert{color:var(--text-leise);min-width:0}
@media (min-width:30rem){
  .daten__zeile{grid-template-columns:minmax(7.5rem,10rem) 1fr;gap:var(--luft-min)}
}

/* ---------- 9. Projektkacheln ---------- */
.projekt{
  position:relative;display:block;min-width:0;
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:#fff;
  background:var(--grund-3);
  box-shadow:var(--schatten);
  transition:transform var(--tempo) var(--kurve),box-shadow var(--tempo) var(--kurve);
}
.projekt:hover{transform:translateY(-5px);box-shadow:var(--schatten-hoch)}
.projekt img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--kurve)}
.projekt:hover img{transform:scale(1.05)}
.projekt__schleier{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,18,22,.9) 0%,rgba(16,18,22,.45) 42%,rgba(16,18,22,.05) 78%);
}
.projekt__text{position:absolute;left:0;right:0;bottom:0;padding:var(--luft-m);min-width:0}
/* display:block ist Pflicht — es sind span-Elemente (ein a darf keine
   Blockelemente enthalten), und inline stünden Ort und Titel in einer Zeile. */
.projekt__ort{display:block;font-size:var(--f-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--akzent-auf-dunkel);font-weight:660}
.projekt__titel{display:block;font-size:var(--f-h3);font-weight:650;line-height:1.25;margin-top:.25rem}
.projekt__mehr{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;font-size:var(--f-s);font-weight:620}
.projekt__mehr span{transition:transform var(--tempo) var(--kurve)}
.projekt:hover .projekt__mehr span{transform:translateX(5px)}
html[data-layout="kompakt"] .projekt{border-radius:4px}

/* ---------- 10. Galerie + Leuchtkasten ---------- */
.galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--luft-s)}
@media (min-width:48rem){ .galerie{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--luft-min)} }
.galerie__feld{
  position:relative;display:block;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--radius-s);overflow:hidden;min-width:0;
}
.galerie__feld img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .55s var(--kurve)}
.galerie__feld:hover img{transform:scale(1.06)}
.galerie__feld::after{
  content:"";position:absolute;inset:0;background:rgba(16,18,22,0);
  transition:background var(--tempo) var(--kurve);
}
.galerie__feld:hover::after{background:rgba(16,18,22,.18)}

.leuchtkasten{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:clamp(1rem,5vw,3rem);
  background:rgba(12,13,16,.93);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--tempo) var(--kurve),visibility var(--tempo);
}
.leuchtkasten.offen{opacity:1;visibility:visible;pointer-events:auto}
.leuchtkasten__bild{
  /* Der Leuchtkasten lädt die @2x-Fassung (1440 px). Bei 1100 px Anzeige
     bleibt genug Reserve, damit nichts hochgerechnet wird. */
  max-width:min(100%,1100px);max-height:78vh;width:auto;
  border-radius:var(--radius-s);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  transform:scale(.965);transition:transform var(--tempo) var(--kurve);
}
.leuchtkasten.offen .leuchtkasten__bild{transform:scale(1)}
.leuchtkasten__leiste{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:var(--luft-min);
  padding:var(--luft-min);color:#fff;font-size:var(--f-s);
}
.leuchtkasten__knopf{
  width:3rem;height:3rem;flex:none;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.2rem;
  transition:background var(--tempo) var(--kurve);
}
.leuchtkasten__knopf:hover{background:rgba(255,255,255,.2)}
.leuchtkasten__zu{position:absolute;top:var(--luft-min);right:var(--luft-min)}

/* ---------- 11. Kontaktfeld ---------- */
.kontaktfeld{
  display:grid;grid-template-columns:1fr;gap:var(--luft-l);
  padding:var(--luft-l) var(--luft-m);border-radius:var(--radius);
  background:var(--grund-3);color:var(--text-auf-dunkel);
}
@media (min-width:52rem){ .kontaktfeld{grid-template-columns:1.15fr .85fr;padding:var(--luft-xl) var(--luft-l)} }
.kontaktfeld p{color:var(--text-leise-auf-dunkel)}
.kontaktfeld .vorzeile{color:var(--akzent-auf-dunkel)}
.kontaktliste{display:flex;flex-direction:column;gap:var(--luft-min);min-width:0}
.kontaktliste a,.kontaktliste span{text-decoration:none;color:var(--text-auf-dunkel);min-width:0;overflow-wrap:anywhere}
.kontaktliste dt{font-size:var(--f-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--akzent-auf-dunkel);font-weight:660}
.kontaktliste dd{margin:0;font-size:var(--f-l);font-weight:620}
.kontaktliste dd a:hover{color:var(--akzent-auf-dunkel)}
html[data-layout="kompakt"] .kontaktfeld{border-radius:4px}

/* ---------- 12. Fuß ---------- */
.fuss{
  background:var(--grund-2);
  border-top:var(--linie-staerke) solid var(--linie);
  padding-block:var(--luft-l) var(--luft-m);
  position:relative;
}
/* feiner Akzentstrich als oberer Abschluss */
.fuss::before{
  content:"";position:absolute;top:-1px;left:0;width:min(100%,9rem);height:3px;
  background:var(--akzent);
}

/* Oberer Riegel: Marke und Anschrift links, Anruf rechts */
.fuss__riegel{
  display:grid;grid-template-columns:1fr;gap:var(--luft-m);
  align-items:start;
  padding-bottom:var(--luft-m);
  border-bottom:var(--linie-staerke) solid var(--linie);
}
@media (min-width:52rem){
  .fuss__riegel{grid-template-columns:1.3fr auto;align-items:center}
  .fuss__ruf{text-align:right}
}
.fuss__marke .wortmarke{width:clamp(11rem,30vw,13.5rem)}
.fuss__spruch{
  margin-top:var(--luft-min);font-size:var(--f-s);color:var(--text-leise);
  max-width:44ch;
}
.fuss__ruf{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.fuss__ruf-marke{
  font-size:var(--f-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--akzent);font-weight:680;
}
.fuss__nummer{
  font-family:var(--schrift-zahl);
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);
  font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--text);
  transition:color var(--tempo) var(--kurve);
}
.fuss__nummer:hover{color:var(--akzent)}
.fuss__mail{font-size:var(--f-s);color:var(--text-leise);text-decoration:none;overflow-wrap:anywhere}
.fuss__mail:hover{color:var(--akzent)}

/* Spalten */
.fuss__raster{
  display:grid;grid-template-columns:1fr;gap:var(--luft-m);
  padding-top:var(--luft-m);
}
@media (min-width:34rem){ .fuss__raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:62rem){ .fuss__raster{grid-template-columns:repeat(4,minmax(0,1fr))} }
.fuss h4{
  font-size:var(--f-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--text);font-weight:680;margin-bottom:var(--luft-min);
}
/* list-style hier ausdruecklich: der Grund-Reset greift nur bei ul MIT
   Klasse (ul[class]), und diese Listen haben keine. */
.fuss ul{display:flex;flex-direction:column;gap:.55rem;font-size:var(--f-s);list-style:none;padding:0;margin:0}
.fuss a{text-decoration:none;color:var(--text-leise);overflow-wrap:anywhere}
.fuss__raster li a{
  display:inline-flex;align-items:center;gap:.5rem;
  transition:color var(--tempo) var(--kurve),gap var(--tempo) var(--kurve);
}
.fuss__raster li a::before{
  content:"";width:0;height:1px;background:currentColor;
  transition:width var(--tempo) var(--kurve);
}
.fuss__raster li a:hover{color:var(--akzent)}
.fuss__raster li a:hover::before{width:.8rem}
.fuss__adresse{font-size:var(--f-s);color:var(--text-leise);font-style:normal;line-height:1.7}

/* Unterer Abschluss */
.fuss__schluss{
  display:flex;flex-wrap:wrap;gap:var(--luft-s) var(--luft-m);
  justify-content:space-between;align-items:center;
  margin-top:var(--luft-l);padding-top:var(--luft-m);
  border-top:var(--linie-staerke) solid var(--linie);
  font-size:var(--f-xs);color:var(--text-leise);
}
.fuss__rechts{display:flex;flex-wrap:wrap;gap:var(--luft-s) var(--luft-m);align-items:center}
.fuss__rechts a:hover{color:var(--akzent)}
.fuss__hoch{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border:var(--linie-staerke) solid var(--linie);
  border-radius:100px;transition:border-color var(--tempo) var(--kurve),color var(--tempo) var(--kurve);
}
.fuss__hoch:hover{border-color:var(--akzent);color:var(--akzent)}
.fuss__hoch span{transition:transform var(--tempo) var(--kurve)}
.fuss__hoch:hover span{transform:translateY(-2px)}

/* ---------- 13. Rechtstexte ---------- */
.rechtstext{max-width:72ch}
.rechtstext h2{margin-top:var(--luft-l);margin-bottom:var(--luft-unter-titel);font-size:var(--f-h3)}
.rechtstext h3{margin-top:var(--luft-m);margin-bottom:var(--luft-nach-ueberschrift);font-size:var(--f-m)}
.rechtstext p,.rechtstext ul,.rechtstext ol{margin-top:var(--luft-min);font-size:var(--f-s);color:var(--text-leise)}
.rechtstext ul,.rechtstext ol{padding-left:1.4rem}
.rechtstext li{margin-top:.4rem}
.rechtstext ul{list-style:disc}
.rechtstext ol{list-style:decimal}
.rechtstext a{color:var(--akzent)}

/* Aufklappbare Liste, ohne eine Zeile JavaScript: <details>/<summary> bringt
   das Auf- und Zuklappen samt Tastaturbedienung von Haus aus mit. Der Inhalt
   steht im Quelltext und ist damit auch für Suchmaschinen und Vorlesegeräte
   da — anders als bei einem Akkordeon, das erst per Skript befüllt wird. */
.falte{
  margin-top:var(--luft-min);
  border:var(--linie-staerke) solid var(--linie);
  border-radius:var(--radius-s);
  background:var(--grund-2);
}
.falte__kopf{
  display:flex;align-items:center;gap:.6rem;
  padding:var(--luft-min);
  font-size:var(--f-s);font-weight:640;
  cursor:pointer;list-style:none;
}
/* Das Standard-Dreieck weg, dafür ein eigenes, das sich beim Öffnen dreht. */
.falte__kopf::-webkit-details-marker{display:none}
.falte__kopf::before{
  content:"";flex:none;width:.5rem;height:.5rem;
  border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
  transform:rotate(-45deg);transform-origin:center;
  transition:transform var(--tempo) var(--kurve);
}
.falte[open] .falte__kopf::before{transform:rotate(45deg)}
.falte__kopf:hover{color:var(--akzent)}
.falte__kopf:focus-visible{outline:3px solid var(--akzent);outline-offset:2px;border-radius:var(--radius-s)}
.falte__inhalt{padding:0 var(--luft-min) var(--luft-min)}
.falte__inhalt h3:first-child{margin-top:0}
@media (prefers-reduced-motion:reduce){
  .falte__kopf::before{transition:none}
}
.hinweiskasten{
  margin-top:var(--luft-m);padding:var(--luft-m);
  border-left:4px solid var(--akzent);border-radius:var(--radius-s);
  background:var(--grund-2);font-size:var(--f-s);
}
.hinweiskasten p{margin-top:.5rem}
.hinweiskasten p:first-child{margin-top:0}
.hinweiskasten strong{color:var(--text)}

/* ---------- 14. Einblenden beim Scrollen ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--kurve),transform .7s var(--kurve)}
html.js .reveal.sichtbar{opacity:1;transform:none}
/* Notaus: Endzustand ohne Übergang erzwingen. Inhalt darf nie unsichtbar bleiben. */
html.reveal-notaus .reveal{opacity:1 !important;transform:none !important;transition:none !important}
html.reveal-notaus .auftritt{opacity:1 !important;transform:none !important;animation:none !important}
html.js .reveal[data-verzug="1"]{transition-delay:.09s}
html.js .reveal[data-verzug="2"]{transition-delay:.18s}
html.js .reveal[data-verzug="3"]{transition-delay:.27s}

/* Auftritt der Bühne beim Laden — gestaffelt über --takt.
   Läuft als Animation mit forwards, nicht als Transition: so steht der
   Endzustand auch dann, wenn die Animation gar nicht erst anläuft. */
@media (prefers-reduced-motion:no-preference){
  html.js .auftritt{
    opacity:0;
    animation:auftreten .8s var(--kurve) forwards;
    animation-delay:calc(var(--takt,0) * 90ms + 60ms);
  }
}
@keyframes auftreten{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* Der Strich vor der Vorzeile zieht sich beim Einblenden auf. */
.vorzeile::before{transition:width .75s .12s var(--kurve)}
html.js .reveal:not(.sichtbar) .vorzeile::before{width:0}

/* Die Akzentkante am Zahlenband wächst mit ein. */
.zahl{transition:border-color .6s .2s var(--kurve)}
html.js .reveal:not(.sichtbar) .zahl{border-left-color:transparent}
/* tabular-nums: beim Hochzählen springt die Breite sonst bei jedem Schritt. */
.zahl__wert{font-variant-numeric:tabular-nums}

/* Karten: die Ziffer bekommt beim Überfahren einen mitwachsenden Strich. */
.karte__nr{display:flex;align-items:center;gap:.7rem}
.karte__nr::after{
  content:"";height:2px;width:1.1rem;background:currentColor;flex:none;
  transition:width var(--tempo) var(--kurve);
}
.karte:hover .karte__nr::after,.karte:focus-within .karte__nr::after{width:3.4rem}

/* Karte: feine Akzentkante, die beim Überfahren einläuft. */
.karte{position:relative;overflow:hidden}
.karte::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--akzent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--kurve);
}
.karte:hover::before,.karte:focus-within::before{transform:scaleX(1)}
html[data-layout="kompakt"] .karte::before{display:none}

/* ---------- 15. Varianten-Schalter (nur Vorschau) ---------- */
.probe{
  position:fixed;right:var(--luft-min);bottom:var(--luft-min);z-index:80;
  display:none;max-width:calc(100vw - 2 * var(--luft-min));
}
.probe.aktiv{display:block}
.probe__griff{
  display:flex;align-items:center;gap:.55rem;margin-left:auto;
  padding:.7rem 1.1rem;min-height:3rem;
  border:0;border-radius:100px;cursor:pointer;
  background:#26282e;color:#fff;font-size:var(--f-xs);font-weight:660;letter-spacing:.06em;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.55);
}
.probe__punkt{width:.55rem;height:.55rem;border-radius:50%;background:#f2a9a0;flex:none}
.probe__tafel{
  margin-top:.6rem;padding:var(--luft-m);width:min(90vw,20rem);
  background:var(--flaeche);color:var(--text);
  border:var(--linie-staerke) solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten-hoch);
  display:none;
}
.probe.geoeffnet .probe__tafel{display:block}
.probe__titel{font-size:var(--f-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--text-leise);font-weight:680;margin-bottom:.6rem}
.probe__gruppe + .probe__gruppe{margin-top:var(--luft-m)}
.probe__reihe{display:flex;flex-wrap:wrap;gap:.45rem}
.probe__wahl{
  /* 40 % Grundbreite: sechs Farben legen sich so zu zweit in eine Zeile,
     statt zu sechs schmalen Streifen zusammengequetscht zu werden. */
  flex:1 1 40%;min-width:0;
  padding:.6rem .7rem;min-height:2.75rem;
  border:var(--linie-staerke) solid var(--linie);border-radius:var(--radius-s);
  background:transparent;cursor:pointer;font-size:var(--f-xs);font-weight:620;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  transition:border-color var(--tempo) var(--kurve),background var(--tempo) var(--kurve);
}
.probe__wahl[aria-pressed="true"]{border-color:var(--akzent);border-width:2px}
.probe__klecks{width:.85rem;height:.85rem;border-radius:50%;flex:none;border:1px solid rgba(128,128,128,.4)}
.probe__fuss{margin-top:var(--luft-m);padding-top:var(--luft-min);border-top:var(--linie-staerke) solid var(--linie);font-size:var(--f-xs);color:var(--text-leise)}

/* ---------- 16. Bewegung sparsam ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  html.js .reveal{opacity:1 !important;transform:none !important}
  html.js .auftritt{opacity:1 !important;transform:none !important;animation:none !important}
  html.js .reveal:not(.sichtbar) .vorzeile::before{width:2rem}
  html.js .reveal:not(.sichtbar) .zahl{border-left-color:var(--akzent)}
  .schublade.offen .schublade__link{opacity:1;transform:none}
  .projekt:hover img,.galerie__feld:hover img{transform:none}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
html{scroll-padding-top:6rem}

/* Druck */
@media print{
  .kopf,.schublade,.probe,.leuchtkasten,.knopfreihe{display:none !important}
  body{background:#fff;color:#000}
  html.js .reveal{opacity:1 !important;transform:none !important}
}

/* ---------- Hilfsklassen statt style-Attribute --------------------------
   Die CSP setzt style-src 'self' ohne 'unsafe-inline'. Der Browser verwirft
   damit JEDES style-Attribut: live wirkten die Inline-Angaben nicht, lokal
   ohne CSP-Kopfzeile schon. Genau daher kam die Abweichung zwischen dem, was
   gemessen wurde, und dem, was ausgeliefert aussah. Deshalb Klassen.
   Nachgewiesen 28.08.2026 an /kontakt/: live margin-top 0px, lokal 40px. */
.luft-oben-min{margin-top:var(--luft-min)}
.luft-oben-s{margin-top:var(--luft-s)}
.luft-oben-m{margin-top:var(--luft-m)}
.luft-unten-m{margin-bottom:var(--luft-m)}
.luft-unten-l{margin-bottom:var(--luft-l)}
.ohne-polster-oben{padding-top:0}
.gross{font-size:var(--f-l)}
.klein{font-size:var(--f-s)}
.winzig{font-size:var(--f-xs)}
.titelgross{font-size:var(--f-h3)}
.schmal-24{max-width:24ch}

/* Staffelung der Einblende-Animation. Fruher als style="--takt:N" gesetzt,
   was die CSP ebenfalls verworfen hat - die Karten liefen dadurch live alle
   gleichzeitig ein. Jetzt ueber ein data-Attribut, das keine CSP beruehrt. */
[data-takt="0"]{--takt:0}
[data-takt="1"]{--takt:1}
[data-takt="2"]{--takt:2}
[data-takt="3"]{--takt:3}
[data-takt="4"]{--takt:4}
[data-nr="0"]{--nr:0}
[data-nr="1"]{--nr:1}
[data-nr="2"]{--nr:2}
[data-nr="3"]{--nr:3}
[data-nr="4"]{--nr:4}

/* Hintergrund-Scrollen sperren, solange Menue oder Leuchtkasten offen sind.
   Frueher per document.body.style.overflow - das verwirft die CSP
   (style-src 'self' gilt auch fuer per JS gesetzte Inline-Stile). */
body.ohne-scroll{overflow:hidden}