/* ---------- Fonts (self-hosted) ----------
   Dozed Condensed traegt die Headlines (ein Schnitt, Gewicht 400,
   niedrige Versalhoehe, deshalb laufen die Display-Stufen groesser).
   Einer Grotesk traegt Fliesstext und UI in 400/500(Book)/700. */
@font-face{font-family:'Dozed';src:url('fonts/dozed-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Einer Grotesk';src:url('fonts/einer-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Einer Grotesk';src:url('fonts/einer-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Einer Grotesk';src:url('fonts/einer-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- Ersatzschriften fuer die Ladezeit ----------
   font-display: swap zeigt bis zum Eintreffen der Webfont die naechste
   Schrift im Stack. Weil die anders laeuft, springt das Layout, sobald
   getauscht wird (Lighthouse 10.09.: Startseite 0,06 mobil, 0,10 Desktop).
   Diese Faces greifen dieselben Systemschriften ab, rechnen sie aber auf
   Laufweite und Zeilenhoehe der Webfont um. Gemessen am 10.09. im Browser
   (Referenztext bei 100 px) und aus den Metriken der Dateien:
     Dozed  990/-250/100 auf 1000 em, laeuft 78,07 % von Arial Narrow
     Einer 2028/-430/0  auf 2048 em, laeuft 100,47 / 100,23 / 94,99 %
                        von Arial in 400 / 500 / 700
   Die Overrides sind durch size-adjust geteilt, weil size-adjust auch die
   Metriken skaliert. Fehlt die Systemschrift (Android, viele Linux), greift
   das Face nicht und der Stack laeuft weiter wie bisher. */
@font-face{font-family:'Dozed Ersatz';src:local('Arial Narrow');
  size-adjust:78.07%;ascent-override:126.81%;descent-override:32.02%;line-gap-override:12.81%}
@font-face{font-family:'Einer Ersatz';src:local('Arial'),local('Liberation Sans'),local('Helvetica');
  font-weight:400;size-adjust:100.47%;ascent-override:98.56%;descent-override:20.90%;line-gap-override:0%}
@font-face{font-family:'Einer Ersatz';src:local('Arial'),local('Liberation Sans'),local('Helvetica');
  font-weight:500;size-adjust:100.23%;ascent-override:98.80%;descent-override:20.95%;line-gap-override:0%}
@font-face{font-family:'Einer Ersatz';src:local('Arial Bold'),local('Arial'),local('Liberation Sans Bold'),local('Helvetica');
  font-weight:700;size-adjust:94.99%;ascent-override:104.25%;descent-override:22.10%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  /* Marine traegt die Flaeche, das Orange aus dem Logo ist die einzige
     Akzentfarbe. Farbton 250 ist ein sattes Blau; ab 265 kippt es sichtbar
     ins Violette, deshalb liegt die ganze Skala darunter.
     Beide Akzentstufen liegen bewusst auf demselben Farbton 44.7. */
  --bg:oklch(93% 0.014 250);
  --surface:oklch(96.5% 0.009 250);
  --ink:oklch(21% 0.035 250);
  --ink-2:oklch(42% 0.035 250);
  --line:oklch(85% 0.020 250);
  /* Studioweiss der Produktfotos. Die Platten sind auf reinem Weiss
     freigestellt (gemessen #ffffff bis #f7f9f9), --surface ist dagegen
     leicht blaustichig. Fuer Flaechen, die an das Fotoweiss anschliessen. */
  --foto-grund:oklch(100% 0 0);
  /* Ton 2 der Vorlage "Bestand Orange" aus dem Logofarbwerkzeug, #d95900.
     Die Buntheit steht auf 0.178 und nicht auf den 0.200 aus dem Werkzeug.
     0.200 liegt bei dieser Helligkeit ausserhalb von sRGB, und der Browser
     kappt anders als das Werkzeug: er ergaebe #e14f00, das Logo traegt aber
     #d95900. Bei 0.178 rechnen beide dasselbe, Knopf und Logo passen also
     zusammen. Zweite Stufe auf demselben Farbton, sonst lesen sie sich als
     zwei verschiedene Orangetoene. */
  --accent:oklch(62.05% 0.178 44.7);      /* #d95900 */
  --accent-strong:oklch(52% 0.150 44.7);  /* #ab4400, Textstufe, 5.4:1 auf heller Flaeche */
  --on-dark:oklch(96% 0.009 250);
  --on-dark-2:oklch(81% 0.016 250);
  --veil:oklch(15% 0.03 250 / .10);
  --scrim:oklch(15% 0.035 250 / .55);
  /* Die Hero-Buehne und die tiefen Abschluss-Baender tragen denselben Ton
     wie die tiefen Sektionen. Es gibt auf der Seite genau ein Dunkelblau.
     Als Verweis abgelegt und nicht als zweiter Zahlenwert, damit die
     beiden nicht wieder auseinanderlaufen koennen. */
  --stage:var(--tief);
  --fehler:oklch(48% 0.16 28);
  --rahmen:oklch(62% 0.018 250);
  /* Grundton der Lesbarkeitsverlaeufe ueber Fotos. Als Komponentenliste
     abgelegt, damit die Verlaeufe ihre eigene Deckkraft setzen koennen:
     oklch(var(--flor) / .5) */
  --flor:12% 0.04 250;

  /* Tiefe Markenflaeche. Traegt ganze Sektionen, damit die Seite zwischen
     hell und tief wechselt statt durchgehend hell zu bleiben. */
  --tief:oklch(26% 0.060 250);
  --tief-2:oklch(31% 0.055 250);
  --line-tief:oklch(44% 0.040 250);

  /* Grundfarbe je Bildflaeche, steht bis das Foto geladen ist */
  --ph-puzzle:oklch(33% 0.030 250);
  --ph-klick:oklch(37% 0.034 250);
  --ph-design-klick:oklch(60% 0.024 250);
  --ph-design-puzzle:oklch(52% 0.020 250);
  --ph-maker:oklch(33% 0.030 250);


  --f-display:'Dozed','Dozed Ersatz','Arial Narrow',sans-serif;
  --f-body:'Einer Grotesk','Einer Ersatz',Helvetica,sans-serif;

  /* Typo-Skala: jede Stufe traegt ihre Zeilenhoehe (Namensschema wie im
     spaeteren Tailwind-v4-Build). Keine Groessen ausserhalb der Skala.
     Die Display-Stufen sind auf Dozed kalibriert (Versalhoehe 0.5em,
     rendert also kleiner als eine normale Grotesk). */
  --text-display:clamp(3.25rem,6vw,5rem);         --text-display--line-height:1.02;
  --text-h2:clamp(2.25rem,3.4vw,3rem);            --text-h2--line-height:1.08;
  --text-h3:clamp(1.5rem,1.9vw,1.75rem);          --text-h3--line-height:1.2;
  --text-lead:clamp(1.125rem,1rem + .4vw,1.25rem);--text-lead--line-height:1.5;
  --text-body:clamp(1rem,.95rem + .25vw,1.0625rem);--text-body--line-height:1.6;
  --text-small:.9375rem;                          --text-small--line-height:1.55;
  --text-meta:.8125rem;                           --text-meta--line-height:1.5;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --radius:8px;--radius-s:4px;
  --header-h:76px;
  --shell:1920px;
  --gutter:clamp(32px,6.5vw,112px);
  --pad-section:clamp(4.5rem,11vh,9.5rem);
  --peek:56px;--gap:24px;

  /* Motion: eine Standardkurve, drei Mikro-Dauern, Reveal-Tempi */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:.3s;--dur-base:.45s;--dur-slow:.7s;
  --dur-reveal:.85s;--dur-reveal-move:1s;
  --stagger:.07s;--stagger-max:.45s;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Kein Scroll-Snap mehr. Die Rastpunkte gab es nur fuer die alte
   Hero-Choreografie, der Scroll laeuft jetzt durchgehend nativ. */
html{scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s5))}
body{
  font-family:var(--f-body);
  font-size:var(--text-body);line-height:var(--text-body--line-height);
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none}
/* Dozed hat nur einen Schnitt: Hierarchie entsteht allein ueber Groesse,
   nicht ueber Fettung. Condensed nie zusaetzlich verdichten. */
h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:.01em;
  text-wrap:balance}
h1{font-size:var(--text-display);line-height:var(--text-display--line-height)}
h2{font-size:var(--text-h2);line-height:var(--text-h2--line-height)}
h3{font-size:var(--text-h3);line-height:var(--text-h3--line-height)}
p,li,dd{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;
  border-radius:var(--radius-s)}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.small{font-size:var(--text-small);line-height:var(--text-small--line-height);color:var(--ink-2)}
.meta{font-size:var(--text-meta);line-height:var(--text-meta--line-height);
  font-weight:500;letter-spacing:.04em;color:var(--ink-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:fixed;top:8px;left:8px;z-index:200;background:var(--surface);
  padding:12px 20px;border-radius:var(--radius-s);transform:translateY(-200%);
  transition:transform .2s var(--ease-out)}
.skip:focus-visible{transform:none}

/* ---------- Header ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  background:var(--surface);border-bottom:1px solid var(--line);
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
/* Am Seitenanfang liegt der Header transparent auf der dunklen Hero-Buehne */
.site-head.head-clear{background:transparent;border-bottom-color:transparent}
.site-head.head-clear .site-nav a.navlink{color:var(--on-dark-2)}
.site-head.head-clear .site-nav a.navlink:hover{color:var(--on-dark)}
.site-head .shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
/* Zwei Fassungen der Wortmarke statt eines Filters. brightness(0) invert(1)
   haette das Orange der Marke auf der Buehne zu Weiss gemacht. */
/* Die Marke gibt nicht nach. Vorher war sie das einzige nachgiebige Glied
   der Kopfleiste und wurde zwischen rund 760 und 1000 px auf 30 px Breite
   zusammengedrueckt, der Schriftzug war dort unlesbar. */
.brand{display:flex;align-items:center;min-height:44px;flex:none}
.brand img{height:26px;width:auto;display:block;flex:none}
.brand .logo-hell{display:none}
.site-head.head-clear .brand .logo-dunkel{display:none}
.site-head.head-clear .brand .logo-hell{display:block}
.site-nav{display:flex;align-items:center;gap:clamp(8px,1.6vw,28px)}
/* 700 statt 500. Der Kontrast stimmt in beiden Zustaenden, gemessen 7.6:1
   auf heller Leiste und 10.6:1 ueber der dunklen Buehne. Was fehlte, war
   Strichstaerke: 15 px in 500 tragen auf einer Fotoflaeche zu wenig. */
.site-nav a.navlink{
  font-size:var(--text-small);font-weight:700;letter-spacing:.02em;
  text-decoration:none;color:var(--ink-2);
  padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:var(--radius-s);
  transition:color var(--dur-fast) var(--ease-out);
}
.site-nav a.navlink:hover{color:var(--ink)}
/* Buttons: der Hover-Fill legt sich wie eine Bodenplatte von links ueber
   die Flaeche (schraege Vorderkante), die Textfarbe wechselt erst, wenn
   der Fill unter dem Text angekommen ist. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:52px;padding:0 var(--s6);border-radius:var(--radius-s);
  position:relative;overflow:hidden;z-index:0;
  /* 700 statt 500. Die Familie kennt nur 400, 500 und 700, und in der
     kleinen Knopfgroesse traegt 500 zu wenig. */
  font-family:var(--f-body);font-size:var(--text-small);font-weight:700;letter-spacing:.03em;
  white-space:nowrap;text-decoration:none;cursor:pointer;border:0;
  transition:color var(--dur-fast) var(--ease-out),transform .18s var(--ease-out)}
.btn::before{content:"";position:absolute;top:-2px;bottom:-2px;left:-14%;width:128%;
  z-index:-1;background:var(--btn-fill,var(--ink));
  transform:translateX(-112%) skewX(-14deg);
  transition:transform var(--dur-base) var(--ease-out)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0) skewX(-14deg)}
.btn:hover,.btn:focus-visible{transition-delay:.08s,0s}
.btn:active{transform:scale(.97)}
.btn .arrow{transition:transform .35s var(--ease-out)}
.btn:hover .arrow{transform:translateX(5px)}
.btn-primary{background:var(--accent);color:var(--ink);--btn-fill:var(--accent-strong)}
.btn-primary:hover,.btn-primary:focus-visible{color:var(--on-dark)}
.btn-ghost{background:transparent;color:var(--ink);--btn-fill:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--surface)}

/* ---------- Menue fuer Tablet und Handy (assets/menue.js) ----------
   Unter 920 px treten die Links der Leiste ab; dieser Knopf oeffnet sie als
   Liste unter der Leiste. Zwei Striche, die sich zum Kreuz drehen. Ohne
   Skript bleibt der Knopf hidden. */
.menu-knopf{display:none;width:44px;height:44px;flex:none;position:relative;
  border:0;border-radius:var(--radius-s);background:transparent;color:var(--ink);cursor:pointer}
.menu-knopf span{position:absolute;left:11px;width:22px;height:2px;border-radius:1px;
  background:currentColor;
  transition:top var(--dur-fast) var(--ease-out),rotate var(--dur-fast) var(--ease-out)}
.menu-knopf span:first-child{top:16px}
.menu-knopf span:last-child{top:26px}
.menu-knopf[aria-expanded="true"] span{top:21px}
.menu-knopf[aria-expanded="true"] span:first-child{rotate:45deg}
.menu-knopf[aria-expanded="true"] span:last-child{rotate:-45deg}
.site-head.head-clear .menu-knopf{color:var(--on-dark)}
.site-head.menu-offen{background:var(--surface);border-bottom-color:var(--line)}
.site-head.menu-offen .menu-knopf{color:var(--ink)}
.site-head.menu-offen .brand .logo-hell{display:none}
.site-head.menu-offen .brand .logo-dunkel{display:block}
@media (max-width:920px){
  .menu-knopf[hidden]{display:none}
  .menu-knopf:not([hidden]){display:block}
}
.menue{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:99;
  overflow:auto;background:var(--surface);
  padding:var(--s5) var(--gutter) var(--s8);
  opacity:0;translate:0 -8px;
  transition:opacity var(--dur-fast) var(--ease-out),translate var(--dur-fast) var(--ease-out)}
.menue[hidden]{display:none}
.menue.ist-offen{opacity:1;translate:0 0}
html.menu-offen{overflow:hidden}
.menue-liste a{display:flex;align-items:center;min-height:56px;
  font-family:var(--f-display);font-size:var(--text-h3);line-height:var(--text-h3--line-height);
  letter-spacing:.01em;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.menue-liste a:hover{color:var(--accent-strong)}
.menue-aktionen{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (min-width:921px){.menue{display:none}}
@media (prefers-reduced-motion:reduce){
  .menue,.menu-knopf span{transition:none}
  .menue{translate:0 0}
}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--surface)}
.site-foot .shell{padding-block:var(--s7);display:flex;flex-wrap:wrap;
  gap:var(--s5) var(--s8);align-items:center;justify-content:space-between}
.site-foot a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px}
.site-foot a:hover{color:var(--ink)}
.foot-links{display:flex;gap:var(--s5);flex-wrap:wrap}
/* Firma, Anschrift und Kontakt. Vorher stand im Footer nur die Mailadresse,
   fuer Vertrauen und die lokale Suche gehoeren Name und Ort dazu. */
.foot-adresse{font-style:normal;font-size:var(--text-small);
  line-height:var(--text-small--line-height);color:var(--ink-2)}
.foot-adresse a{min-height:0;display:inline}
/* Das vollstaendige Lockup samt Claim, hier ist Platz dafuer. Es bricht als
   erstes Element in eine eigene Zeile, wenn der Footer schmal wird. */
.foot-marke{height:34px;width:auto;display:block;flex:none}
@media (max-width:760px){.foot-marke{height:28px}}


/* ---------- Sektions-Grundgeruest ---------- */
.sec-head{margin-bottom:var(--s7)}
/* ch misst die Null, in Einer Grotesk rund 1,4-mal breiter als das mittlere
   Zeichen. 48ch sind deshalb rund 68 Zeichen je Zeile, nicht 48. Gilt fuer
   alle Deckel in diesem Projekt (Befund Fuer-David/01, 08.09.2026). */
.sec-head p{margin-top:var(--s4);max-width:44ch;color:var(--ink-2);
  font-size:var(--text-lead);line-height:var(--text-lead--line-height)}

/* ---------- Responsiv (gemeinsam) ---------- */
/* Zwischen rund 920 und 1100 px passt die volle Kopfleiste nur knapp neben
   die Marke. Knappere Luecken und eine Stufe kleinere Links, dann behaelt
   die Marke ihre Breite. */
@media (min-width:921px) and (max-width:1099px){
  .site-nav{gap:8px}
  .site-nav a.navlink{font-size:var(--text-meta)}
  .site-head .shell{gap:var(--s4)}
}
/* Unter 920 px reicht der Platz auch dafuer nicht mehr. Die Links treten ab,
   der Knopf bleibt. Frueher lag diese Grenze bei 760 px, dazwischen wurde
   die Marke zusammengequetscht. */
@media (max-width:920px){
  .site-nav a.navlink{display:none}
}
@media (max-width:760px){
  .site-nav .btn{min-height:44px;padding:0 var(--s4)}
}
/* Auf dem Handy passen Wortmarke und Knopf nicht mehr nebeneinander, wenn
   die Marke ihre volle Breite von 198 px behaelt. Statt sie zu quetschen
   wird sie ueber die Hoehe verkleinert, dann stimmt das Seitenverhaeltnis.
   Gerechnet bei 360 px: 129 plus 12 Luecke plus 151 Knopf sind 292 bei 296
   verfuegbaren. Das seitliche Polster bleibt bei den geforderten 32 px. */
/* Mit dem Menueknopf (44 px plus Luecke) passt der lange Knopftext nicht
   mehr neben die Marke: bei 375 px stehen 311 px zur Verfuegung, Marke 129,
   "Angebot anfragen" 151, Menue 44 und zwei Luecken ergaeben 348. Unter
   640 px zeigt der Knopf deshalb nur "Angebot", die lange Fassung steht
   im Menue. */
.site-nav .btn-kurz{display:none}
@media (max-width:640px){
  .site-nav .btn-lang{display:none}
  .site-nav .btn-kurz{display:inline}
}
@media (max-width:520px){
  .site-head .shell{gap:var(--s3)}
  .site-nav{gap:var(--s2)}
  .brand img{height:22px}
}
@media (max-width:400px){
  .brand img{height:17px}
  .site-nav .btn{padding:0 var(--s3)}
}


/* Einleitungsabsatz unter einer Ueberschrift, seitenuebergreifend */
.vt-lead{margin-top:var(--s4);max-width:36ch;color:var(--ink-2);
  font-size:var(--text-lead);line-height:var(--text-lead--line-height)}

/* Sekundaerer Weg neben dem Hauptknopf, seitenuebergreifend */
.textlink{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--text-small);font-weight:500;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;
  transition:color var(--dur-fast) var(--ease-out)}
.textlink:hover{color:var(--accent-strong)}

/* Kruemelpfad unter dem Kopf einer Unterseite, seitenuebergreifend.
   Klickflaeche auf 44px, ohne die Zeile optisch aufzublaehen. */
.krumel{margin-bottom:var(--s5);font-size:var(--text-meta);
  line-height:var(--text-meta--line-height);letter-spacing:.04em;color:var(--on-dark-2)}
.krumel a{display:inline-flex;align-items:center;min-height:44px;margin-block:-13px;
  text-decoration:underline;text-underline-offset:3px}
.krumel a:hover{color:var(--on-dark)}

/* Knopfzeile unter einem Textblock, seitenuebergreifend */
.r-aktionen{margin-top:var(--s6);display:flex;align-items:center;
  gap:var(--s5);flex-wrap:wrap}

/* Tiefes Abschlussband mit Anfrage, auf jeder Unterseite gleich */
.abschluss{padding-block:var(--pad-section);background:var(--stage);color:var(--on-dark)}
.abschluss h2{max-width:20ch}
.abschluss p{margin-top:var(--s4);max-width:44ch;color:var(--on-dark-2)}
.abschluss .r-aktionen .textlink{color:var(--on-dark)}
.abschluss .r-aktionen .textlink:hover{color:var(--accent)}
@media (max-width:760px){
  .krumel{margin-bottom:var(--s3)}
  .abschluss{padding-block:var(--s8)}
}

/* ---------- Lightbox für Dekore (assets/lightbox.js) ----------
   Der Auslöser liegt als Knopf um das Bild. Ohne Skript ist er ein Knopf
   ohne Wirkung, deshalb zeigt erst (scripting:enabled) den Zoom-Cursor
   und den Hinweis. */
.lb-knopf{display:block;width:100%;height:100%;padding:0;border:0;
  background:none;cursor:default;position:relative;text-align:left;color:inherit;font:inherit}
.lb-knopf img{width:100%;height:100%;object-fit:cover;display:block}
.lb-hinweis{position:absolute;right:var(--s3);bottom:var(--s3);
  padding:6px 10px;border-radius:var(--radius-s);
  background:oklch(var(--flor) / .72);color:var(--on-dark);
  font-size:var(--text-meta);line-height:1;font-weight:500;letter-spacing:.03em;
  opacity:0;transition:opacity var(--dur-fast) var(--ease-out);pointer-events:none}
@media (scripting:enabled){
  .lb-knopf{cursor:zoom-in}
  .lb-knopf:hover .lb-hinweis,.lb-knopf:focus-visible .lb-hinweis{opacity:1}
  @media (hover:none){.lb-hinweis{opacity:1}}
}
.lb-knopf:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}

.lb{border:0;padding:0;margin:auto;width:min(96vw,1680px);max-width:none;
  max-height:none;height:auto;background:var(--tief);color:var(--on-dark);
  border-radius:var(--radius);overflow:hidden}
.lb::backdrop{background:oklch(10% 0.03 250 / .82)}
html.lb-offen{overflow:hidden}
.lb-kopf{display:flex;align-items:center;gap:var(--s5);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-tief)}
.lb-titel{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-system{font-size:var(--text-meta);letter-spacing:.04em;color:var(--on-dark-2)}
.lb-name{font-size:var(--text-body);font-weight:700}
.lb-wahl{display:inline-flex;border:1px solid var(--line-tief);border-radius:var(--radius-s);overflow:hidden}
.lb-ansicht{min-height:40px;padding:0 var(--s4);border:0;background:transparent;
  color:var(--on-dark-2);font:inherit;font-size:var(--text-small);font-weight:700;
  letter-spacing:.02em;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.lb-ansicht + .lb-ansicht{border-left:1px solid var(--line-tief)}
.lb-ansicht[aria-pressed="true"]{background:var(--accent);color:var(--ink)}
.lb-ansicht:hover:not([aria-pressed="true"]){color:var(--on-dark)}
.lb-zu{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;border-radius:var(--radius-s);
  background:transparent;color:var(--on-dark);cursor:pointer}
.lb-zu:hover{background:var(--tief-2)}
.lb-buehne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;padding:var(--s4) var(--s3) var(--s5)}
.lb-figur{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s3);min-width:0}
.lb-bild{display:block;max-width:100%;max-height:calc(100vh - 200px);width:auto;height:auto;
  border-radius:var(--radius-s);background:var(--foto-grund);
  transition:opacity var(--dur-fast) var(--ease-out)}
.lb-bild.wechselt{opacity:.35}
.lb-stand{font-size:var(--text-meta);letter-spacing:.03em;color:var(--on-dark-2)}
.lb-pfeil{background:none;border:0;padding:var(--s3) var(--s2);cursor:pointer;
  color:var(--on-dark-2);transition:color var(--dur-fast) var(--ease-out)}
.lb-pfeil:hover,.lb-pfeil:focus-visible{color:var(--accent)}
.lb-pfeil svg{display:block}
.lb-pfeil[disabled]{opacity:.28;cursor:default}
@media (max-width:640px){
  .lb{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  /* Kopf als Raster: Titel und Schliessen in der ersten Zeile, der
     Umschalter darunter. Buehne: Bild ueber die volle Breite, die Pfeile
     darunter links und rechts. */
  .lb-kopf{display:grid;grid-template-columns:1fr auto;gap:var(--s3) var(--s4);align-items:center}
  .lb-titel{grid-column:1;grid-row:1}
  .lb-zu{grid-column:2;grid-row:1}
  .lb-wahl{grid-column:1 / -1;grid-row:2;justify-self:start}
  .lb-buehne{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;padding:var(--s3)}
  .lb-figur{grid-column:1 / -1;grid-row:1}
  .lb-zurueck{grid-column:1;grid-row:2}
  .lb-vor{grid-column:3;grid-row:2}
  .lb-bild{max-height:calc(100dvh - 230px)}
}
@media (prefers-reduced-motion:reduce){
  .lb-bild{transition:none}
  .lb-bild.wechselt{opacity:1}
}

/* ---------- Scroll-Reveals ----------
   Fail-open: der versteckte Startzustand existiert nur, wenn Skripte
   laufen UND keine reduzierte Bewegung gewuenscht ist. Ohne JS ist
   alles sichtbar. reveal.js setzt .is-in beim ersten Sichtbarwerden. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  [data-reveal],[data-reveal-group]>*{
    opacity:0;translate:0 24px;
    transition:opacity var(--dur-reveal) var(--ease-out),
               translate var(--dur-reveal-move) var(--ease-out);
    transition-delay:var(--reveal-delay,0s)}
  [data-reveal].is-in,[data-reveal-group].is-in>*{opacity:1;translate:0 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}