/* Krohnbau (Wood Construction Krohn), Kunde 23. Zeile 1 "Werkbank" (Wahl Auftraggeber 06.10.2026).
   Gestaltungsmaß: roema-design/DESIGNSPRACHE.md. Nur transform und opacity bewegen sich. */

@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/barlow-500.woff2) format("woff2")}

/* Tokens mit gegenständlichen Namen. Kontraste gerechnet (WCAG), schlechtester Wert zählt:
   Tinte auf Papier 13,9 · Tinte auf Span 11,8 · Leise auf Papier 6,3 · Leise auf Span 5,5
   Balken auf Papier 10,1 (Knopf, Schrift Papier) · Kupfer auf Papier 6,6 · Kupfer auf Span 5,6
   Laerche auf Tief 9,4 · Papier auf Tief 14,3 · Leise-hell auf Tief 7,0 */
:root{
  --papier:#F7F1E6; --span:#ECE0CC; --tief:#2B1D14; --tief-2:#3A2818;
  --tinte:#2A221B; --leise:#3F352C; --kupfer:#7A4A1E; --balken:#483722; --laerche:#E2C08D; --leise-hell:#CDBBA2;
  --linie:color-mix(in oklab,var(--tinte) 15%,transparent);
  --linie-hell:color-mix(in oklab,var(--papier) 22%,transparent);
  --grund:var(--papier); --flaeche:var(--span); --akzent:var(--kupfer); --knopf:var(--kupfer); --knopf-hover:color-mix(in oklab,var(--kupfer) 86%,#000);
  --maxw:1240px; --rand2:clamp(2rem,8vw,8rem); --maxw-text:680px; --r:6px; --r-gross:6px; --schatten:0 1rem 2.4rem -1rem rgba(20,12,6,.55); --kopf:4.5rem;
  --t-marke:clamp(3rem,1.8rem + 6.2vw,7rem);
  --t-h1:clamp(2.5rem,1.6rem + 4.4vw,5.5rem);
  --t-h2:clamp(1.875rem,1.3rem + 2.6vw,3.25rem);
  --t-h3:clamp(1.375rem,1.2rem + 0.6vw,1.75rem);
  --t-lead:clamp(1.1875rem,1.12rem + 0.34vw,1.375rem);
  --t-text:clamp(1.0625rem,1.03rem + 0.18vw,1.125rem);
  --t-klein:clamp(0.8125rem,0.78rem + 0.16vw,0.875rem);
  --luft:clamp(4rem,2.6rem + 6vw,9rem);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf) + 1rem)}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:"Barlow",system-ui,sans-serif;font-size:var(--t-text);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:"Barlow Condensed",sans-serif;font-weight:600;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:var(--t-h1);text-transform:uppercase;letter-spacing:.01em;font-weight:700;line-height:1.02}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.2}
p{margin:0 0 1rem;max-width:var(--maxw-text);text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px}
.auf-tief :focus-visible,.tief :focus-visible{outline-color:var(--laerche)}
.nur-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--balken);color:var(--papier);padding:.75rem 1.25rem;z-index:1200;border-radius:var(--r)}
.skip:focus{top:1rem}
.wrap{width:min(100% - var(--rand2),var(--maxw));margin-inline:auto}
.kicker{display:block;font-size:var(--t-klein);letter-spacing:.16em;text-transform:uppercase;color:var(--leise);margin:0 0 1rem;font-weight:500}
.tief .kicker,.auf-tief .kicker{color:var(--leise-hell)}
.lead{font-size:var(--t-lead);line-height:1.5}
.sektion{padding-block:var(--luft)}
.sektion--span{background:var(--span)}
.tief{background:var(--tief);color:var(--papier)}
.tief p{color:var(--papier)}
/* Holz: dunkles Braun mit weichem, verwischtem Hintergrund aus der Sammlung des Team-Dashboards
   (Motiv Lichtkreise, in Krohnbau-Braun eingefärbt, Skript _werkzeuge/bau-hintergrund.py). Der Schleier darüber hält
   Papier-Text über 7:1, Hell über 5,5:1 an der hellsten Stelle (gemessen mit pruef.py). */
.holz{--holz-hell:#E6D5B8;background:linear-gradient(rgba(32,20,11,.42),rgba(32,20,11,.42)),url(../img/bg-lichtkreise.svg) center/cover no-repeat,var(--tief);color:var(--papier)}
/* Startseite, Karriere: freies Foto einer Säge im Holz (Unsplash, John Cardamone, Herkunft in bilder/HERKUNFT.md F) statt einfarbigem Braun; Schleier hält den hellen Text über 4,5:1 */
.holz--saege{background:linear-gradient(90deg,rgba(32,20,11,.86) 0%,rgba(32,20,11,.7) 55%,rgba(32,20,11,.55) 100%),url(../img/karriere-start.webp) center/cover no-repeat,var(--tief)}
@media (max-width:800px){.holz--saege{background:linear-gradient(rgba(32,20,11,.78),rgba(32,20,11,.7)),url(../img/karriere-start-hoch.webp) center/cover no-repeat,var(--tief)}}
.holz p{color:var(--papier)}
.holz .kicker{color:var(--holz-hell)}
.holz .schritt{border-top-color:color-mix(in oklab,var(--papier) 40%,transparent)}
.holz .schritt::before{background:var(--laerche)}
.holz .schritt p{color:var(--holz-hell)}
.holz .knopf--voll{background:var(--laerche);color:var(--tief)}
.holz .knopf--voll:hover{background:color-mix(in oklab,var(--laerche) 88%,#000)}
.holz .knopf--rahmen{color:var(--papier);border-color:color-mix(in oklab,var(--papier) 55%,transparent)}
.knopf--hell{background:var(--papier);color:var(--balken)}
.knopf--hell:hover{background:var(--laerche)}
.fuss .knopf--hell{border-bottom:1px solid transparent;color:var(--balken)}
.holz .knopf--rahmen:hover{border-color:var(--papier);background:color-mix(in oklab,var(--papier) 8%,transparent)}
.holz :focus-visible{outline-color:var(--papier)}
.kopfzeile-sektion{max-width:760px;margin-bottom:clamp(2rem,1rem + 3vw,4rem)}
.haar{border:0;border-top:1px solid var(--linie);margin:0}

/* Knöpfe: genau zwei Arten, 44 px */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.5rem 1.5rem;border-radius:6px;border:1px solid transparent;font:500 .9375rem/1.2 "Barlow",sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .22s,color .22s,border-color .22s,transform .12s}
.knopf:active{transform:translateY(1px)}
.knopf--voll{background:var(--knopf);color:var(--papier)}
.knopf--voll:hover{background:var(--knopf-hover)}
.knopf--rahmen{background:transparent;color:var(--balken);border-color:color-mix(in oklab,var(--balken) 45%,transparent)}
.knopf--rahmen:hover{border-color:var(--balken);background:color-mix(in oklab,var(--balken) 6%,transparent)}
.tief .knopf--voll,.auf-tief .knopf--voll,.hero .knopf--voll{background:var(--laerche);color:var(--tief)}
.tief .knopf--voll:hover,.auf-tief .knopf--voll:hover,.hero .knopf--voll:hover{background:color-mix(in oklab,var(--laerche) 88%,#000)}
.tief .knopf--rahmen,.auf-tief .knopf--rahmen,.hero .knopf--rahmen{color:var(--papier);border-color:var(--linie-hell)}
.tief .knopf--rahmen:hover,.auf-tief .knopf--rahmen:hover,.hero .knopf--rahmen:hover{border-color:var(--laerche);background:color-mix(in oklab,var(--papier) 6%,transparent)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.textlink{color:var(--kupfer);text-underline-offset:.2em;text-decoration-thickness:1px}
.tief .textlink,.hero .textlink{color:var(--laerche)}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:100;background:color-mix(in oklab,var(--papier) 97%,transparent);border-bottom:1px solid var(--linie);}
.kopf__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--kopf)}
.marke{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--balken)}
.marke img{width:3.2rem;height:3.2rem;object-fit:contain}
.marke span{font:700 1.5rem/1 "Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:clamp(1rem,.5rem + 1.6vw,2rem)}
.nav a{font-size:.9375rem;letter-spacing:.04em;text-decoration:none;color:var(--tinte);padding:.5rem 0;border-bottom:1px solid transparent;min-height:2.75rem;display:inline-flex;align-items:center}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--kupfer)}
.nav .knopf{border-bottom:1px solid transparent;color:var(--papier);padding:.5rem 1.25rem}
.nav .knopf:hover{border-bottom-color:transparent}
@media (min-width:861px){
  .kopf{background:color-mix(in oklab,var(--papier) 88%,transparent);border-bottom-color:transparent}
  .nav{gap:.25rem}
  .nav a:not(.knopf){padding:.45rem 1.05rem;border-bottom:0;border-radius:6px;transition:background-color .25s var(--ease),color .25s}
  .nav a:not(.knopf):hover{background:color-mix(in oklab,var(--balken) 8%,transparent)}
  .nav a[aria-current="page"]:not(.knopf){background:color-mix(in oklab,var(--balken) 12%,transparent)}
  .nav .knopf{margin-left:.5rem}
}
@media (max-width:860px){
  .nav{display:none}
  .hero .knopf{min-height:3.25rem}
}

/* Hero */
.hero{position:relative;color:var(--papier);background:var(--tief);overflow:hidden;min-height:min(88svh,56rem);display:flex;align-items:flex-end}
.hero__bild{position:absolute;inset:0}
.hero__bild picture{display:contents}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:scale(1.02);transform-origin:50% 60%}
.hero__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(32,20,11,.92) 0%,rgba(32,20,11,.82) 42%,rgba(32,20,11,.5) 72%,rgba(32,20,11,.2) 100%)}
.hero__in{position:relative;padding-block:clamp(7rem,12vh,10rem) clamp(2.5rem,6vh,5rem);width:min(100% - var(--rand2),var(--maxw))}
.hero .kicker{color:var(--papier)}
.hero--klein .hero__bild::after{background:linear-gradient(to top,rgba(32,20,11,.92),rgba(32,20,11,.74))}
.hero h1{max-width:12ch;font-size:var(--t-marke);line-height:.98}
.hero p.lead{margin-top:1.5rem;max-width:34rem;color:var(--papier)}
.hero.ist-bereit .hero__bild img{animation:ken 22s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero--klein{min-height:min(52svh,30rem)}
.hero--klein h1{font-size:var(--t-h1);max-width:16ch}
/* Foto-Kopf der Leistungsseite: Bild bleibt sichtbar, nur unten dunkel für die Schrift */
.hero--foto{min-height:min(60svh,34rem)}
.hero--foto .hero__bild::after{background:linear-gradient(to top,rgba(32,20,11,.88) 0%,rgba(32,20,11,.6) 34%,rgba(32,20,11,.12) 70%,rgba(32,20,11,.05) 100%)}
.hero--foto h1{font-size:var(--t-marke);max-width:12ch}

/* Über uns */
.zwei{display:grid;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
@media (min-width:900px){.zwei{grid-template-columns:5fr 4fr}.zwei--bild-links{grid-template-columns:4fr 5fr}.zwei--bild-links .zwei__bild{order:-1}}
.zwei__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
@media (min-width:900px){.zwei__bild img{aspect-ratio:1/1}}
/* Handy: Bild bei Über uns über die ganze Breite, aber niedrig */
@media (max-width:899px){.zwei__bild{margin-inline:calc(50% - 50vw)}.zwei__bild img{aspect-ratio:2/1;border-radius:0}.zwei__bild--platzhalter{border-radius:0}}
.fakten{display:grid;grid-template-columns:repeat(3,auto);gap:1.5rem clamp(1rem,.4rem + 2.6vw,2.5rem);justify-content:start;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--linie)}
.fakten dt{font-size:var(--t-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.fakten dd{margin:.25rem 0 0;font:600 1.625rem/1.1 "Barlow Condensed",sans-serif}
@media (max-width:360px){.fakten dd{font-size:1.375rem}}

/* Leistungen als Zeitstrahl-Zickzack */
.strahl{position:relative;display:grid;gap:clamp(3rem,2rem + 4vw,6rem)}
.strahl::before{content:"";position:absolute;left:15.5px;top:0;bottom:0;width:2px;background:color-mix(in oklab,var(--kupfer) 30%,transparent)}
.strahl__punkt{position:absolute;left:8px;top:0;width:16px;height:16px;border-radius:50%;background:var(--kupfer);box-shadow:0 0 0 4px var(--papier);will-change:transform;transition:none}
.sektion--span .strahl__punkt{box-shadow:0 0 0 4px var(--span)}
.station{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(.75rem,.4rem + 1.4vw,1rem);align-items:center}
.station::before,.strahl::before,.strahl__punkt{display:none}
.station__bild{grid-column:1/8;grid-row:1}
.station__text{grid-column:8/13;grid-row:1;min-width:0}
.station:nth-child(even) .station__bild{grid-column:6/13}
.station:nth-child(even) .station__text{grid-column:1/6}
.station__bild img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.station__text h3{margin-bottom:.5rem;font-size:clamp(1.2rem,1rem + .9vw,1.5rem);overflow-wrap:anywhere;hyphens:auto}
.station__text p{color:var(--tinte)}
.st-kurz{display:block;font-size:.9375rem;line-height:1.4}
.st-lang{display:none}
.station__text .kicker{display:none}
.station__text .knopfreihe{margin-top:.75rem}
.station__text .knopf{width:100%;justify-content:center;padding-inline:.5rem;letter-spacing:.06em;min-height:2.75rem}
@media (min-width:900px){
  /* Desktop ohne Mittellinie und Punkte: die Zickzack-Reihen stehen frei (Auftraggeber 09.10.2026) */
  .station{gap:0 clamp(1.5rem,1rem + 2vw,3rem)}
  .station__bild{grid-column:1/9}
  .station__text{grid-column:9/13}
  .station:nth-child(even) .station__bild{grid-column:5/13}
  .station:nth-child(even) .station__text{grid-column:1/5}
  .station__bild img{aspect-ratio:16/10}
  .vn{aspect-ratio:5/4} /* Vorher-Nachher höher (Ansage 19.10.2026) */
  .st-kurz{display:none}
  .st-lang{display:block}
  .station__text .kicker{display:block}
  .station__text .knopfreihe{margin-top:1.5rem}
  .station__text .knopf{width:auto;padding-inline:1.5rem;letter-spacing:.14em}
  .station__text h3{margin-bottom:.75rem}
}


/* Schritte (Karriere) */
.schritte{display:grid;gap:2rem;counter-reset:s}
.schritt{position:relative;padding-top:1.75rem;border-top:1px solid var(--linie-hell)}
.schritt::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--laerche)}
.schritt h3{margin-bottom:.5rem}
.schritt p{color:var(--leise-hell);margin:0}
@media (min-width:800px){.schritte{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.sektion:not(.tief):not(.holz) .schritt{border-top-color:var(--linie)}
.sektion:not(.tief):not(.holz) .schritt::before{background:var(--kupfer)}
.sektion:not(.tief):not(.holz) .schritt p{color:var(--leise)}

/* Instagram */
.insta{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:2rem}
.insta a,.insta figure{margin:0;display:block;overflow:hidden;border-radius:var(--r);background:var(--span)}
.insta img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media (min-width:700px){.insta{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.insta{grid-template-columns:repeat(6,1fr)}}
.feld-gate{margin-top:2rem;border:1px solid var(--linie);border-radius:var(--r);padding:1.25rem 1.5rem;background:color-mix(in oklab,var(--papier) 60%,var(--span))}
.feld-gate p{font-size:.9375rem;line-height:1.6;color:var(--leise);margin:0 0 1rem;max-width:60ch}
.feld-gate .textlink{display:inline-block;min-height:2.75rem;padding-block:.7rem}
.feld-gate iframe{width:100%;height:560px;border:0;background:#fff;border-radius:var(--r)}

/* Kontakt */
.kontakt{display:grid;gap:2rem}
@media (min-width:900px){.kontakt{grid-template-columns:1fr 1fr;gap:4rem}}
.kontakt dl{margin:0;display:grid;gap:1.25rem}
.kontakt dt{font-size:var(--t-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--leise-hell)}
.kontakt dd{margin:.15rem 0 0;font:600 clamp(1.4rem,1.2rem + .8vw,1.9rem)/1.2 "Barlow Condensed",sans-serif}
.kontakt a{text-decoration:none;border-bottom:1px solid var(--linie-hell);display:inline-block;padding-block:.65rem}
.kontakt a.knopf{display:inline-flex;padding-block:.5rem;border-bottom:1px solid transparent}
.kontakt a:hover{border-bottom-color:var(--laerche)}

/* Platzhalter, sichtbar gerahmt (vor Live klären) */
.platzhalter{display:inline-block;border:1px dashed currentColor;padding:.25rem .6rem;border-radius:var(--r);font-size:.9em;color:var(--kupfer);background:color-mix(in oklab,var(--kupfer) 8%,transparent)}
.tief .platzhalter{color:var(--laerche);background:color-mix(in oklab,var(--laerche) 10%,transparent)}
.platzhalter-block{border:1px dashed var(--kupfer);padding:1rem 1.25rem;border-radius:var(--r);background:color-mix(in oklab,var(--kupfer) 7%,transparent);color:var(--kupfer);max-width:var(--maxw-text);margin:0 0 1rem}

/* Fußzeile */
.fuss{position:relative;isolation:isolate;background:var(--tief) url(../img/holzwand.webp) 0 0/760px auto repeat;color:var(--leise-hell);padding-block:3rem 1.5rem;border-top:1px solid var(--linie-hell);font-size:.9375rem}
.fuss::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(20,12,6,.62),rgba(20,12,6,.72));pointer-events:none}
.fuss__raster{display:grid;gap:2.5rem 3rem;grid-template-columns:1fr}
@media (min-width:800px){.fuss__raster{grid-template-columns:1.5fr 1fr 1fr}}
@media (max-width:799px){.fuss{padding-block:2rem 1.25rem}.fuss__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}.fuss__marke{grid-column:1/-1;max-width:none}.fuss__ende{margin-top:1.25rem}}
.fuss__marke{display:grid;gap:1rem;align-content:start;justify-items:start;max-width:24rem}
.fuss__marke p{margin:0;color:var(--leise-hell)}
.fuss__logo{width:72px;height:73px;object-fit:contain;filter:brightness(0) invert(.92) sepia(.25)}
.fuss__h{font:600 .8125rem/1.2 "Barlow",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--laerche);margin:0 0 .75rem}
.fuss__spalte{display:block}
.fuss a{color:var(--papier);text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem;padding-block:.35rem}
.fuss a:hover{color:var(--laerche)}
.fuss ul{display:grid;gap:0}
.fuss__ende{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--linie-hell);font-size:var(--t-klein);color:var(--leise-hell)}
.fuss__ende a{min-height:2.75rem;padding:0;text-decoration:underline;text-underline-offset:3px}

/* Auftauchen beim Scrollen (Inhalt bleibt ohne Skript sichtbar) */
.js [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.js [data-reveal="links"]{transform:translate3d(-40px,0,0)}
.js [data-reveal="rechts"]{transform:translate3d(40px,0,0)}
.js [data-reveal="gross"]{transform:scale(.96)}
.js [data-reveal].ist-da{opacity:1;transform:none}

/* Galerie (Vorbild Kretsch Gebäudetechnik, Raster mit Lightbox) */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem}
.filter button{min-height:2.75rem;padding:.4rem 1.1rem;border:1px solid var(--linie);background:transparent;border-radius:6px;font:500 .9375rem "Barlow",sans-serif;letter-spacing:.04em;color:var(--tinte);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.filter button:hover{border-color:var(--balken)}
.filter button[aria-pressed="true"]{background:var(--balken);color:var(--papier);border-color:var(--balken)}
.galerie{columns:2;column-gap:.75rem}
@media (min-width:760px){.galerie{columns:3}}
@media (min-width:1100px){.galerie{columns:4}}
.gcell{break-inside:avoid;display:block;margin:0 0 .75rem;padding:0;border:0;background:var(--span);border-radius:var(--r);overflow:hidden;cursor:zoom-in;position:relative;width:100%}
.gcell img{width:100%;height:auto;transition:transform .6s var(--ease)}
.gcell:hover img{transform:scale(1.03)}
.gcell[hidden]{display:none}
.gcell figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.25rem .75rem .5rem;font-size:var(--t-klein);color:var(--papier);background:linear-gradient(to top,rgba(32,20,11,.7),rgba(32,20,11,0));opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;text-align:left}
.gcell:hover figcaption,.gcell:focus-visible figcaption{opacity:1;transform:none}
.lb{position:fixed;inset:0;z-index:1300;background:rgba(24,15,8,.94);display:flex;align-items:center;justify-content:center;padding:1rem}
.lb[hidden]{display:none}
.lb img{max-width:min(96vw,1400px);max-height:84svh;width:auto;height:auto;object-fit:contain;border-radius:var(--r)}
.lb__kn{position:absolute;width:2.75rem;height:2.75rem;border:1px solid var(--linie-hell);background:rgba(43,29,20,.7);color:var(--papier);border-radius:var(--r);cursor:pointer;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center}
.lb__kn:hover{border-color:var(--laerche)}
.lb__zu{top:1rem;right:1rem}.lb__vor{right:1rem;top:50%;margin-top:-1.375rem}.lb__zur{left:1rem;top:50%;margin-top:-1.375rem}
.lb__cap{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:var(--leise-hell);font-size:var(--t-klein);margin:0;max-width:none}

/* Karriere: Datenblatt (technischer Ton) */
.daten{width:100%;border-collapse:collapse;font-size:1rem}
.daten caption{text-align:left;font-size:var(--t-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--leise);padding-bottom:.75rem}
.daten th,.daten td{text-align:left;vertical-align:top;padding:1rem 1.25rem 1rem 0;border-top:1px solid var(--linie)}
.daten thead th{font-size:var(--t-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--leise);font-weight:500;border-top:0;border-bottom:1px solid var(--tinte)}
.daten tbody th{font:600 1.25rem/1.2 "Barlow Condensed",sans-serif;width:28%}
.daten td:last-child{padding-right:0}
@media (max-width:700px){
  .daten thead{display:none}
  .daten,.daten tbody,.daten tr,.daten th,.daten td{display:block;width:100%}
  .daten tr{border-top:1px solid var(--linie);padding:1rem 0}
  .daten th,.daten td{border:0;padding:.15rem 0}
  .daten td::before{content:attr(data-k) ": ";color:var(--leise);font-size:var(--t-klein);letter-spacing:.08em;text-transform:uppercase}
}
.wege{display:grid;gap:0;margin-top:1rem}
@media (min-width:800px){.wege{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.weg{padding:1.5rem 0;border-top:1px solid var(--linie)}
.weg h3{margin-bottom:.5rem}
.weg p{margin:0;color:var(--leise)}

/* Bewerbung als Fenster in der Mitte (Ansage Auftraggeber 07.10.2026, Vorbild Anfrage-Fenster bei Roema): Karriere-Foto als Hintergrund */
dialog.reiter{margin:0;padding:0;border:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:transparent;color:var(--papier);overflow:hidden;opacity:0;transition:opacity .35s}
dialog.reiter[open]{display:grid;place-items:center}
dialog.reiter.ist-offen{opacity:1}
dialog.reiter::backdrop{background:rgba(32,20,11,.74);backdrop-filter:blur(4px)}
.reiter__karte{position:relative;display:flex;flex-direction:column;width:min(62rem,calc(100% - 1.5rem));max-height:min(96dvh,60rem);overflow:hidden;background:var(--tief);border:1px solid color-mix(in oklab,var(--laerche) 35%,transparent);border-radius:var(--r);box-shadow:var(--schatten);transform:translate3d(0,18px,0) scale(.97);transition:transform .45s var(--ease)}
dialog.reiter.ist-offen .reiter__karte{transform:none}
/* Das Foto liegt nur in der Karte, direkt hinter dem Text (Ansage Auftraggeber 07.10.2026). Schleier: Papier-Text über 7:1. */
.reiter__bild{position:absolute;inset:0;z-index:0}
.reiter__bild img{width:100%;height:100%;object-fit:cover}
.reiter__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(32,20,11,.8),rgba(32,20,11,.88))}
.reiter__karte.ist-fertig .reiter__bild::after{background:linear-gradient(rgba(32,20,11,.62),rgba(32,20,11,.72))}
.reiter__kopf,.reiter__koerper,.erfolg{position:relative;z-index:1}
.reiter__zu{position:absolute;top:.75rem;right:.75rem;z-index:2;width:2.75rem;height:2.75rem;border:1px solid var(--linie-hell);background:rgba(247,241,230,.06);color:var(--papier);border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;transition:background-color .2s,color .2s}
.reiter__zu:hover{background:var(--laerche);color:var(--tief)}
.reiter__kopf{padding:2.25rem 1.5rem 1rem;text-align:center}
.reiter__kopf .kicker{margin-bottom:.5rem}
.reiter__kopf h2{font-size:var(--t-h2);margin-bottom:.6rem;text-transform:none}
.reiter__kopf .lead{margin:0 auto;max-width:28rem;font-size:1.0625rem;color:var(--leise-hell)}
.reiter__koerper{overflow-y:auto;overscroll-behavior:contain;padding:1rem 1.5rem 2rem;flex:1}
.reiter__karte .kicker{color:var(--leise-hell)}
.reiter__karte.ist-fertig .reiter__kopf,.reiter__karte.ist-fertig .reiter__koerper{display:none}
@media (max-width:520px){.reiter__kopf{padding:2rem 1rem .75rem}.reiter__koerper{padding:.75rem 1rem 1.5rem}}
.form{display:grid;gap:1.25rem}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:1rem}
.form legend{font:600 1.25rem/1.2 "Barlow Condensed",sans-serif;padding:0;margin-bottom:.25rem;color:var(--laerche);letter-spacing:.04em;text-transform:uppercase}
.feldzeile{display:grid;gap:1rem}
@media (min-width:560px){.feldzeile--2{grid-template-columns:1fr 1fr}.feldzeile--plz{grid-template-columns:8rem 1fr}}
.feld label,.feld .etikett{display:block;font-size:.9375rem;font-weight:500;margin-bottom:.35rem}
.feld .hilfe{display:block;font-size:var(--t-klein);color:var(--leise-hell);margin-top:.35rem}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld select,.feld textarea{width:100%;min-height:2.75rem;padding:.6rem .85rem;font:400 1rem/1.4 "Barlow",sans-serif;color:var(--papier);background:rgba(247,241,230,.08);border:1px solid color-mix(in oklab,var(--papier) 50%,transparent);border-radius:var(--r);appearance:none;-webkit-appearance:none}
.feld select option{background:var(--tief);color:var(--papier)}
.feld ::placeholder{color:var(--leise-hell);opacity:1}
.feld select{background-image:linear-gradient(45deg,transparent 50%,var(--papier) 50%),linear-gradient(135deg,var(--papier) 50%,transparent 50%);background-position:calc(100% - 1.2rem) 50%,calc(100% - .85rem) 50%;background-size:.4rem .4rem;background-repeat:no-repeat;padding-right:2.5rem}
.feld textarea{min-height:11rem;resize:vertical}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--laerche);outline-offset:1px;border-color:var(--laerche)}
.feld .fehler{display:none;color:#ffb4a6;font-size:var(--t-klein);margin-top:.35rem}
.feld.ist-falsch .fehler{display:block}
.feld.ist-falsch input,.feld.ist-falsch select,.feld.ist-falsch textarea,.feld.ist-falsch .ablage{border-color:#ffb4a6}
.pflicht{color:var(--laerche)}
.optional{font-weight:400;font-size:.85em;opacity:.8}
.ablage{position:relative;display:block;border:1.5px dashed color-mix(in oklab,var(--papier) 50%,transparent);border-radius:var(--r);padding:1.25rem 1rem;text-align:center;background:rgba(247,241,230,.05);cursor:pointer;transition:background-color .2s,border-color .2s}
.ablage:hover,.ablage.ist-ueber,.ablage:focus-within{border-color:var(--laerche);background:rgba(226,192,141,.1)}
.ablage input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ablage strong{display:block;font-weight:500}
.ablage small{display:block;color:var(--leise-hell);font-size:var(--t-klein);margin-top:.15rem}
.dateien{display:grid;gap:.4rem;margin-top:.6rem}
.dateien li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.4rem .75rem;background:rgba(247,241,230,.1);border-radius:var(--r);font-size:.9375rem}
.dateien li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dateien button{flex:none;min-height:2.75rem;min-width:2.75rem;border:0;background:transparent;cursor:pointer;color:var(--laerche);font:500 .875rem "Barlow",sans-serif;text-decoration:underline}
.form .einwilligung{display:flex;gap:.75rem;align-items:flex-start}
.form .einwilligung input{flex:none;width:1.4rem;height:1.4rem;margin-top:.2rem;accent-color:var(--laerche)}
.form .hinweis{font-size:var(--t-klein);color:var(--leise-hell);max-width:none}
.reiter .textlink{color:var(--laerche)}
.reiter .knopf--voll{background:var(--laerche);color:var(--tief)}
.reiter .knopf--voll:hover{background:color-mix(in oklab,var(--laerche) 88%,#000)}
.reiter .knopf--rahmen{color:var(--papier);border-color:color-mix(in oklab,var(--papier) 55%,transparent)}
.reiter .knopf--rahmen:hover{border-color:var(--papier);background:rgba(247,241,230,.08)}
.reiter .knopfreihe{justify-content:center}
.reiter .form .knopfreihe .knopf{width:100%}
.form .meldung{padding:.9rem 1rem;border-radius:var(--r);font-size:1rem;display:none}
.form .meldung.ist-sichtbar{display:block}
.form .meldung--fehler{background:rgba(255,180,166,.16);color:#ffd2c8;border:1px solid rgba(255,180,166,.5)}
.form .meldung a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.erfolg{display:none;padding:3.5rem 1.5rem 2.5rem;text-align:center}
.reiter__karte.ist-fertig .erfolg{display:block}
.erfolg h3{font-size:var(--t-h2);margin-bottom:.9rem}
.erfolg p{margin:0 auto;max-width:26rem;color:var(--papier);font-size:var(--t-lead)}
.erfolg .knopfreihe{margin-top:2rem}
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Rechtsseiten */
.recht{padding-block:clamp(3rem,2rem + 4vw,6rem)}
.recht .wrap{max-width:820px}
.recht h1{font-size:var(--t-h2);text-transform:none;margin-bottom:1.5rem}
.recht h2{font-size:var(--t-h3);margin:2.25rem 0 .75rem}
.recht p,.recht li{max-width:70ch}
.recht ul{list-style:disc;padding-left:1.25rem;margin:0 0 1rem}
.recht a{color:var(--kupfer);display:inline-block;padding-block:.75rem;line-height:1.2}
.recht a.knopf{display:inline-flex;padding-block:.5rem}
.recht a.knopf--voll,.recht a.knopf--holz{color:var(--papier)}
.recht a.knopf--rahmen{color:var(--balken)}



/* ---------- Platzhalter-Wasserzeichen am Über-uns-Foto (Ansage Auftraggeber 07.10.2026) ---------- */
.zwei__bild--platzhalter{position:relative;overflow:hidden;border-radius:var(--r)}
.zwei__bild--platzhalter img{border-radius:0}
.wasserzeichen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1.5rem;text-align:center;font:700 clamp(1.5rem,1.1rem + 1.6vw,2.4rem)/1.15 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--papier);background:linear-gradient(rgba(32,20,11,.5),rgba(32,20,11,.5));text-shadow:0 1px 14px rgba(0,0,0,.65);transform:none}
.wasserzeichen::before{content:"";position:absolute;inset:.9rem;border:2px dashed rgba(247,241,230,.8);border-radius:var(--r)}
.wasserzeichen{max-width:none}

/* ---------- Bewerbungs-Ablauf von Punkt zu Punkt ---------- */
.ablauf{--g:2.5rem;--w1:calc((100% + var(--g)) / 3);--w2:calc((200% + 2 * var(--g)) / 3);position:relative;display:grid;gap:var(--g)}
.ablauf::before{content:"";position:absolute;top:8px;left:8px;width:var(--w2);height:2px;background:color-mix(in oklab,var(--papier) 32%,transparent)}
.ablauf__seg{position:absolute;top:8px;left:8px;height:2px;background:var(--laerche);transform-origin:0 50%}
.ablauf__seg--1{width:var(--w1)}
.ablauf__seg--2{left:calc(8px + var(--w1));width:calc(var(--w2) - var(--w1))}
.ablauf__lauf{position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--papier);z-index:2}
.ablauf__punkt{position:relative;padding-top:2.75rem}
.ablauf__knoten{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--laerche);background:var(--tief);z-index:1}
.ablauf__punkt h3{margin-bottom:.5rem}
.ablauf__punkt p{margin:0;color:var(--holz-hell)}
@media (min-width:800px){.ablauf{grid-template-columns:repeat(3,1fr)}}
@media (max-width:799px){
  .ablauf{--g:2rem;--w1:0px;--w2:0px;gap:0}
  .ablauf::before{width:2px;height:var(--w2);left:8px;top:9px}
  .ablauf__seg{width:2px;left:8px;top:9px;transform-origin:50% 0}
  .ablauf__seg--1{height:var(--w1);width:2px}
  .ablauf__seg--2{left:8px;top:calc(9px + var(--w1));height:calc(var(--w2) - var(--w1));width:2px}
  .ablauf__punkt{padding:0 0 var(--g) 3rem}
  .ablauf__punkt:last-child{padding-bottom:0}
}
/* Zustände: ohne Skript und bei reduzierter Bewegung steht alles fertig da */
.js .ablauf:not(.ist-da) .ablauf__seg{transform:scaleX(0)}
.js .ablauf:not(.ist-da) .ablauf__punkt:nth-of-type(n+2) .ablauf__knoten{opacity:.35;transform:scale(.8)}
.ablauf.ist-da .ablauf__seg--1{animation:abl-seg-x 1s var(--ease) .2s both}
.ablauf.ist-da .ablauf__seg--2{animation:abl-seg-x 1s var(--ease) 1.5s both}
.ablauf.ist-da .ablauf__punkt:nth-of-type(2) .ablauf__knoten{animation:abl-knoten .45s var(--ease) 1.2s both}
.ablauf.ist-da .ablauf__punkt:nth-of-type(3) .ablauf__knoten{animation:abl-knoten .45s var(--ease) 2.5s both}
.ablauf.ist-da .ablauf__lauf{animation:abl-lauf-x 2.7s var(--ease) .2s both}
@keyframes abl-seg-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes abl-knoten{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes abl-lauf-x{0%{transform:translate3d(0,0,0)}37%{transform:translate3d(var(--w1),0,0)}48%{transform:translate3d(var(--w1),0,0)}100%{transform:translate3d(var(--w2),0,0)}}
@media (max-width:799px){
  .js .ablauf:not(.ist-da) .ablauf__seg{transform:scaleY(0)}
  .ablauf.ist-da .ablauf__seg--1,.ablauf.ist-da .ablauf__seg--2{animation-name:abl-seg-y}
  .ablauf.ist-da .ablauf__lauf{animation-name:abl-lauf-y}
}
@keyframes abl-seg-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes abl-lauf-y{0%{transform:translate3d(0,0,0)}37%{transform:translate3d(0,var(--w1),0)}48%{transform:translate3d(0,var(--w1),0)}100%{transform:translate3d(0,var(--w2),0)}}

/* ---------- Bereiche (Karriere): Bildkarten mit Datenblatt ---------- */
.bereiche{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem .75rem}
@media (min-width:900px){.bereiche{grid-template-columns:repeat(3,1fr);gap:2.5rem 1.5rem}}
.bereich img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);transition:transform .6s var(--ease)}
.bereich{overflow:hidden}
.bereich:hover img{transform:scale(1.03)}
.bereich__text{padding:1rem .15rem 0}
.bereich__text h3{margin-bottom:.6rem}
.bereich__text dl{margin:0;display:grid;gap:.5rem;font-size:.9375rem}
.bereich__text dl>div{display:grid;grid-template-columns:5.5rem 1fr;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--linie)}
.bereich__text dt{font-size:var(--t-klein);letter-spacing:.12em;text-transform:uppercase;color:var(--leise);padding-top:.15rem}
.bereich__text dd{margin:0}
@media (max-width:520px){.bereich__text dl>div{grid-template-columns:1fr;gap:.1rem}}

/* ---------- Instagram: Ausschnitt als Link, nichts wird vorher geladen ---------- */
.insta-zeile{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center}
@media (min-width:900px){.insta-zeile{grid-template-columns:1.35fr 1fr}}
.insta-zeile__text{order:-1}
@media (min-width:900px){.insta-zeile__text{order:0}}
.insta-karte{display:block;text-decoration:none;color:#262626;background:#fff;border:1px solid #dbdbdb;border-radius:6px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;box-shadow:var(--schatten);transition:transform .35s var(--ease)}
.insta-karte:hover{transform:translateY(-3px)}
.insta-karte__kopf{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem .5rem}
.insta-karte__avatar{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:contain;padding:.5rem;background:#fff;box-shadow:0 0 0 2px #dd2a7b,0 0 0 4px #fff,0 0 0 6px #feda75;margin:.4rem;flex:none}
.insta-karte__name{display:flex;flex-direction:column;line-height:1.3;min-width:0;font-size:.9375rem}
.insta-karte__name strong{font-weight:600;font-size:1.0625rem;overflow:hidden;text-overflow:ellipsis}
.insta-karte__name span{color:#595959}
.insta-karte__knopf{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:6px;background:#efefef;color:#262626;font-size:.8125rem;font-weight:600}
.insta-karte__knopf .ig-logo{width:1.2em;height:1.2em;margin:0}
.insta-karte__bio{display:block;padding:.35rem 1.1rem 1rem;font-size:.9375rem;line-height:1.4;color:#262626}
.insta-karte__reiter{display:flex;justify-content:center;gap:3rem;border-top:1px solid #dbdbdb;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#262626}
.insta-karte__reiter span{display:inline-flex;align-items:center;gap:.4rem;padding:.8rem 0;border-top:1px solid #262626;margin-top:-1px}
.insta-karte__reiter svg{width:.95rem;height:.95rem}
.insta-karte__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#fff}
.insta-karte__raster img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.insta-karte__fuss{display:flex;align-items:center;gap:.5rem;justify-content:center;padding:.9rem 1.1rem;font-size:.875rem;font-weight:600;color:#00376b;border-top:1px solid #dbdbdb}
@media (max-width:520px){.insta-karte__knopf{display:none}.insta-karte__kopf{gap:.75rem;padding:.9rem .9rem .4rem}.insta-karte__avatar{width:3.5rem;height:3.5rem;margin:.25rem}.insta-karte__name strong{font-size:.875rem}}

/* ---------- Kontakt (Aufbau wie bei Kretsch: links Text und Zeilenliste, rechts ein großes Bild) ---------- */
.kontakt-sektion{padding-block:clamp(2rem,1.25rem + 3.5vw,4.5rem);position:relative;background:var(--tief) url(../img/holzwand.webp) 0 0/760px auto repeat;overflow:hidden}
.kontakt-sektion::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(20,12,6,0) 38%,rgba(20,12,6,.55) 100%);pointer-events:none}
.kontakt-sektion>.wrap{position:relative}
.plakat-wand{max-width:1080px;margin-inline:auto}
.plakat{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;min-height:clamp(22rem,17rem + 20vw,31rem);padding:clamp(.3rem,.15rem + .45vw,.5rem);background:var(--papier);border-radius:1px;box-shadow:var(--schatten)}
@media (min-width:900px){.plakat{transform:rotate(-.45deg)}}
.plakat__foto{position:absolute;inset:clamp(.3rem,.15rem + .45vw,.5rem);overflow:hidden;z-index:-1;box-shadow:inset 0 0 0 1px rgba(20,12,6,.5)}
.plakat__foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.plakat__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,15,8,0) 0,rgba(25,15,8,.06) calc(42vw - 1rem),rgba(25,15,8,.72) calc(42vw + 3rem))}
@media (max-width:899px){.plakat .plakat__in{padding-top:calc(42vw + 2.25rem)}}
@media (min-width:900px){.plakat__foto::after{background:linear-gradient(90deg,rgba(25,15,8,.66) 0,rgba(25,15,8,.5) 48%,rgba(25,15,8,.06) 80%,rgba(25,15,8,0) 100%)}}
.plakat__in{position:relative;min-width:0;padding:clamp(1.25rem,.7rem + 2.2vw,2.5rem);color:var(--papier)}
@media (min-width:900px){.plakat__in{width:min(100%,37rem)}}
.plakat__in .lead{margin-top:1rem;max-width:30rem}
.plakat__liste{margin:1.25rem 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
.plakat__liste .ig-logo{margin:0;flex:none}
.plakat__liste li>a,.plakat__anschrift{display:grid;grid-template-columns:7.6rem 1fr;gap:.15rem .5rem;align-items:center;min-height:2.75rem;padding:.35rem 1rem;background:rgba(24,14,7,.86);border:1px solid var(--linie-hell);border-radius:var(--r);color:var(--papier);text-decoration:none;position:relative}
.plakat__liste li>a{transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.plakat__liste li>a::after{content:"\2192";position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--laerche);transition:transform .25s var(--ease)}
.plakat__liste li>a:hover,.plakat__liste li>a:focus-visible{background:rgba(24,14,7,.96);border-color:var(--laerche)}
.plakat__liste li>a:hover::after{transform:translate(.3rem,-50%)}
.plakat__liste .lbl{font-size:var(--t-klein);letter-spacing:.1em;text-transform:uppercase;color:#e4d6c0}
.plakat__in h2,.plakat__in .lead,.plakat__in .kicker{text-shadow:0 1px 14px rgba(20,12,6,.55)}
.plakat__in .kicker{color:#e4d6c0}
.plakat__liste .val{font:600 clamp(1.2rem,1.05rem + .5vw,1.5rem)/1.2 "Barlow Condensed",sans-serif;display:inline-flex;align-items:center;gap:.5rem;padding-right:2rem}
.plakat__anschrift .val{padding-right:0}
@media (max-width:520px){.plakat__liste li>a,.plakat__anschrift{grid-template-columns:1fr;padding-right:2.5rem}}
.nagel{position:absolute;z-index:2;width:clamp(.8rem,.6rem + .6vw,1.05rem);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 30%,#d9d4cb 0,#8d8780 34%,#4d4944 72%,#2b2825 100%);box-shadow:1px 2px 2px rgba(0,0,0,.6),0 0 0 1px rgba(20,12,6,.35)}
.nagel--ol{left:.2rem;top:.2rem}.nagel--or{right:.2rem;top:.2rem}.nagel--ul{left:.2rem;bottom:.2rem}.nagel--ur{right:.2rem;bottom:.2rem}
@media (hover:hover) and (pointer:fine){.plakat:hover .plakat__foto img{transform:scale(1.05) translate3d(var(--tx,0%),var(--ty,0%),0)}}

/* ---------- Logo-Übergang auf JEDER Seite (Ansage Auftraggeber 10.10.2026): 2,5 s, immer gleich, weich ----------
   Das Logo steht von Anfang an in Endgröße (scharf) und wird nur per transform verkleinert/vergrößert. Kein linearer Abschnitt:
   langsam hinein (0 bis 0,9 s), ruhiges Atmen (bis 1,9 s), dann Logo und Papier weich weg (bis 2,5 s). */
.lo{display:none}
html.lo-lang .lo{display:grid;place-items:center;position:fixed;inset:0;z-index:3000;opacity:1;animation:lo-weg 2.5s cubic-bezier(.45,0,.55,1) forwards}
.lo__grund{position:absolute;inset:0;background:var(--papier)}
.lo__logo{position:relative;z-index:1;width:clamp(380px,46vw,680px);height:auto;transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden}
html.lo-lang .lo__logo{animation:lo-logo 2.5s linear forwards}
@keyframes lo-weg{0%,76%{opacity:1;pointer-events:auto}99%{opacity:0;pointer-events:auto}100%{opacity:0;pointer-events:none}}
@keyframes lo-logo{
  0%{opacity:0;transform:scale(.4);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  36%{opacity:1;transform:scale(.62);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  76%{opacity:1;transform:scale(.67);animation-timing-function:cubic-bezier(.5,0,.75,0)}
  100%{opacity:0;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.lo{display:none!important}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .hero.ist-bereit .hero__bild img{animation:none}
  dialog.reiter{transform:none}
}

/* Instagram immer mit dem Originalzeichen (Ansage Auftraggeber 07.10.2026) */
.ig-logo{display:inline-block;flex:none;width:1.4em;height:1.4em;margin-right:.55rem;vertical-align:-.3em}
.fuss__ig{gap:0}

/* ---------- Seitenwechsel wie bei Mamma Mia, auf Krohnbau abgestimmt (Ansage Auftraggeber 07.10.2026) ----------
   Der Browser blendet beim Seitenwechsel selbst über (View Transitions, Chrome und Safari), Kopfzeile und Logo bleiben stehen,
   die neue Seite hebt sich kurz aus der Tiefe, wie ein Balken, der eingesetzt wird. Ohne Unterstützung wechselt die Seite einfach. */
@view-transition{navigation:auto}
.kopf{view-transition-name:kopf}
.marke img{view-transition-name:marke}
::view-transition-group(kopf),::view-transition-group(marke){animation-duration:0s}
::view-transition-old(root){animation:ue-aus 240ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:ue-ein 460ms var(--ease) 60ms both}
@keyframes ue-aus{to{opacity:0;transform:scale(.985)}}
@keyframes ue-ein{from{opacity:0;transform:translate3d(0,16px,0) scale(1.012)}}

/* Auftakt: Text im Kopfbereich steigt gestaffelt auf, zusammen unter 700 ms (nach dem Logo-Intro erst danach) */
html.js .auftakt>*{opacity:0;transform:translate3d(0,14px,0);animation:auftakt .55s var(--ease) forwards}
html.js .auftakt>*:nth-child(1){animation-delay:60ms}
html.js .auftakt>*:nth-child(2){animation-delay:140ms}
html.js .auftakt>*:nth-child(3){animation-delay:220ms}
html.js .auftakt>*:nth-child(4){animation-delay:300ms}
html.lo-lang.js .auftakt>*:nth-child(1){animation-delay:2.1s}
html.lo-lang.js .auftakt>*:nth-child(2){animation-delay:2.18s}
html.lo-lang.js .auftakt>*:nth-child(3){animation-delay:2.26s}
html.lo-lang.js .auftakt>*:nth-child(4){animation-delay:2.34s}
@keyframes auftakt{to{opacity:1;transform:none}}

/* Bilder öffnen sich beim Scrollen von oben nach unten (Mamma Mia: zeig--bild) */
.js [data-reveal="bild"]{opacity:0;transform:translate3d(0,32px,0) scale(.97);transition:opacity 1.2s var(--ease),transform 1.3s var(--ease);transition-delay:calc(var(--i,0) * 120ms)}
.js [data-reveal="bild"] img{transform:scale(1.07);transition:transform 1.8s var(--ease)}
.js [data-reveal="bild"].ist-da{opacity:1;transform:none}
.js [data-reveal="bild"].ist-da img{transform:scale(1)}

/* Bilder reagieren auf den Zeiger: leichter Zoom, der dem Mauszeiger ein Stück folgt (nur Maus) */
.station__bild,.zwei__bild,.vorschau a,.bereich,.gcell{overflow:hidden}
.station__bild img,.zwei__bild img,.vorschau img,.bereich img,.gcell img{transition:transform .7s var(--ease);will-change:auto}
@media (hover:hover) and (pointer:fine){
  .station__bild:hover img,.zwei__bild:hover img,.vorschau a:hover img,.bereich:hover img,.gcell:hover img{transform:scale(1.07) translate3d(var(--tx,0%),var(--ty,0%),0);will-change:transform}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.js .auftakt>*{opacity:1;transform:none;animation:none}
  .js [data-reveal="bild"]{transform:none;transition:none}
  .js [data-reveal="bild"] img{transform:none;transition:none}
  .station__bild:hover img,.zwei__bild:hover img,.vorschau a:hover img,.bereich:hover img,.gcell:hover img{transform:none}
}

.ref-fuss{padding-block:clamp(1.5rem,1rem + 1.5vw,2.25rem) clamp(2rem,1.25rem + 2vw,3rem)}
.ref-fuss .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1.5rem}
.ref-fuss .lead{margin:0}
.ref-fuss .knopfreihe{justify-content:center;margin-top:0}

/* T4 (Technik-Prüfung 08.10.2026): Glas der Kopfzeile ist teuer, weil jede Fläche pro Bild neu gerastert wird und darunter das Hero-Foto
   langsam zoomt. Auf Touch-Geräten Radius auf 5 px und Grund dichter (nur Deckkraft, Farbe bleibt Papier). Ans Dateiende mit body-Präfix,
   damit die Regel bei gleicher Spezifität sicher gewinnt. */
@media (pointer:coarse){
  body .kopf{background:color-mix(in oklab,var(--papier) 97%,transparent);}
}
/* Anfrage-Knopf in der Kopfzeile: kräftig, Kupfer (Auftraggeber 09.10.2026: zu dezent) */
.nav .knopf--voll{background:var(--kupfer);font-weight:600;padding:.6rem 1.5rem;box-shadow:var(--schatten)}
.nav .knopf--voll:hover{background:color-mix(in oklab,var(--kupfer) 86%,#000)}

/* ---------- Leistungen als eigene Seite (Ansage 13.10.2026) ----------
   Seite „Leistungen“ mit Kachel-Liste, jede Kachel führt auf eine eigene Seite mit wischbaren Fotos (scroll-snap im eigenen
   Behälter, die Seite scrollt nie quer), Text, Anfrage-Knopf und Rückweg. Ohne Skript stehen alle Fotos untereinander sichtbar. */
.kat-hinweis{margin:0 0 1.5rem;color:var(--leise)}
.katalog{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:760px){.katalog{grid-template-columns:repeat(2,1fr);gap:1rem 1.25rem}}
.kat{min-width:0}
.kat__kachel{display:grid;grid-template-columns:4.5rem 1fr 2.75rem;gap:1rem;align-items:center;min-height:6.5rem;padding:.8rem 1rem .8rem .8rem;background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);text-decoration:none;color:var(--tinte);transition:border-color .35s var(--ease),background-color .35s var(--ease),transform .5s var(--ease);height:100%}
.kat__bild{display:block;width:4.5rem;height:4.5rem;border-radius:6px;overflow:hidden;background:var(--span)}
.kat__bild img{width:100%;height:100%;object-fit:cover}
.kat__text{display:grid;gap:.25rem;min-width:0}
.kat__text strong{font:600 1.25rem/1.15 "Barlow Condensed",sans-serif;color:var(--balken);text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:360px){.kat__kachel{grid-template-columns:3.5rem 1fr 2.25rem;gap:.7rem;padding:.7rem .7rem .7rem .7rem}.kat__bild{width:3.5rem;height:3.5rem}.kat__plus{width:2.25rem;height:2.25rem;font-size:1.25rem}.kat__text strong{font-size:1.125rem}}
.kat__teaser{color:var(--leise);font-size:.9375rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kat__plus{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid color-mix(in oklab,var(--kupfer) 55%,transparent);color:var(--kupfer);font:400 1.5rem/1 "Barlow",sans-serif}
@media (hover:hover) and (pointer:fine){.kat__kachel:hover{border-color:var(--kupfer);background:color-mix(in oklab,var(--papier) 70%,var(--span));transform:translate3d(0,-2px,0)}.kat__kachel:hover .kat__plus{background:var(--kupfer);color:var(--papier)}}
.kat__kachel:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px}

/* Fotos der Leistungsseite: wischbar, ohne Skript scrollbar */
.kat-fotos{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:var(--span);border-radius:var(--r)}
.kat-fotos::-webkit-scrollbar{display:none}
.kat-fotos img{flex:0 0 100%;width:100%;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always}
.kat-fotos:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px}
/* Ohne Skript (kein .js an html): alle Fotos untereinander, keine toten Pfeile (Gegenprobe Mobil 13.10.2026) */
html:not(.js) .kat-fotos{flex-direction:column;gap:.75rem;overflow:visible;scroll-snap-type:none;background:none}
html:not(.js) .kat-fotos img{flex:none}
html:not(.js) .kat-steuerung{display:none}
.kat-steuerung{display:flex;align-items:center;gap:1rem;padding:.9rem 0 0}
.kat-fortschritt{position:relative;flex:1;height:3px;border-radius:2px;background:var(--linie);overflow:hidden}
.kat-fortschritt span{position:absolute;inset:0;background:var(--kupfer);transform:scaleX(0);transform-origin:left}
.kat-fortschritt span.laeuft{animation:kat-lauf 5s linear forwards}
@keyframes kat-lauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.kat-zaehler{margin:0;font-size:var(--t-klein);letter-spacing:.14em;color:var(--leise);white-space:nowrap}
.kat-pfeile{display:flex;gap:.5rem}
.kat-pfeile button{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;border:1px solid color-mix(in oklab,var(--kupfer) 55%,transparent);background:var(--papier);color:var(--kupfer);font:400 1.5rem/1 "Barlow",sans-serif;cursor:pointer}
.kat-pfeile button[aria-disabled="true"]{opacity:.35;cursor:default}
.kat-pfeile button:focus-visible{outline:3px solid var(--kupfer);outline-offset:2px}
.kat-pause::before{content:"";display:block;width:.8rem;height:.8rem;border-left:3px solid currentColor;border-right:3px solid currentColor}
.kat-pause[aria-pressed="true"]::before{width:0;height:0;border:.45rem solid transparent;border-left:.75rem solid currentColor;border-right:0}
.kat-text p{max-width:none}
.kat-text p+p,.kat-text .platzhalter{margin-top:1rem}
.kat-text .platzhalter{display:block;line-height:1.45}
.knopfreihe--mitte{justify-content:center;margin-top:2rem}
.lstg{padding-block:clamp(1.5rem,1rem + 3vw,3.5rem) clamp(2rem,1rem + 4vw,4rem)}
.lstg__in{max-width:56rem}
.lstg__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .75rem}
.lstg__weg{margin:0;font-size:.9375rem}
.lstg__blaettern{display:flex;align-items:center;gap:.5rem}
.lstg__nr{margin-right:.25rem;font-size:var(--t-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.lstg__pfeil{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid color-mix(in oklab,var(--kupfer) 55%,transparent);background:var(--papier);color:var(--kupfer);font:400 1.5rem/1 "Barlow",sans-serif;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease)}
.lstg__pfeil:hover{background:var(--kupfer);color:var(--papier)}
.lstg__pfeil:focus-visible{outline:3px solid var(--kupfer);outline-offset:2px}
.lstg__weg a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--kupfer);text-decoration:underline;text-underline-offset:4px;letter-spacing:.06em;text-transform:uppercase}
.lstg__titel{margin:0 0 1.25rem;color:var(--balken);text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.lstg__text{margin-top:1.75rem}
.lstg__text .knopfreihe{margin-top:1.5rem}
@media (prefers-reduced-motion:reduce){.kat__kachel{transition:none}.kat-fotos{scroll-behavior:auto}.kat-fortschritt span.laeuft{animation:none}}

/* ---------- Wasserzeichen: KI-Kupferstiche Holzdielen und Baumstämme (Ansage 13.10.2026), nur Dekor hinter dem Inhalt ---------- */
.wz{position:relative;isolation:isolate;overflow:clip}
.wz::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:-6%;top:50%;transform:translate3d(0,-50%,0);width:min(100vw,52rem);aspect-ratio:800/447;background:no-repeat center/contain;opacity:.13;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 36%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 50%,#000 36%,transparent 72%)}
.wz--dielen::before{background-image:url(../img/wz-dielen.webp)}
.wz--staemme::before{background-image:url(../img/wz-staemme.webp)}
.wz--links::before{right:auto;left:-6%}
@media (min-width:900px){.wz::before{width:min(58vw,62rem);opacity:.14}}
#ueber.wz::before{top:auto;bottom:-4%;transform:none;width:min(130vw,44rem);opacity:.18}
@media (min-width:900px){#ueber.wz::before{top:auto;bottom:-6%;transform:none;width:min(72vw,78rem);opacity:.19}}
@media (max-width:899px){.zwei__bild.zwei__bild--platzhalter{border-radius:0}}

/* ---------- Menü nach dem Vorbild von roema-design.de: Aufklapp-Fläche der Leistungen (Rechner), gestaffeltes Panel von rechts (Handy) ---------- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop>a::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 0 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.55;transform:translateY(-3px) rotate(45deg);transition:transform .18s ease-out}
.nav-drop:hover>a::after,.nav-drop:focus-within>a::after{transform:translateY(0) rotate(225deg)}
.nav-sub{position:absolute;top:calc(100% + 12px);left:50%;width:min(36rem,calc(100vw - 3rem));margin:0 0 0 calc(min(36rem,calc(100vw - 3rem)) / -2);padding:.6rem;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:color-mix(in oklab,var(--tief) 96%,transparent);border:1px solid var(--linie-hell);border-radius:var(--r);box-shadow:var(--schatten);opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .18s ease-out .15s,transform .18s ease-out .15s,visibility 0s linear .33s;z-index:50}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .18s ease-out,transform .18s var(--ease),visibility 0s}
.nav-sub li{margin:0}
.nav .nav-sub a{display:grid;grid-template-columns:3.5rem 1fr;align-items:center;gap:.9rem;min-height:4.5rem;padding:.55rem .7rem;border:0;border-radius:4px;color:var(--papier);background:transparent;letter-spacing:0;white-space:normal}
.nav .nav-sub a:hover,.nav .nav-sub a:focus-visible{background:color-mix(in oklab,var(--papier) 9%,transparent);color:#fff}
.nav .nav-sub a:focus-visible{outline:2px solid var(--laerche);outline-offset:-2px}
.nav-sub img{display:block;width:3.5rem;height:3.5rem;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px color-mix(in oklab,var(--papier) 14%,transparent)}
.nav-sub-t{font:600 1.1875rem/1.15 "Barlow Condensed",sans-serif;letter-spacing:.03em;text-transform:uppercase}
.sm-toggle{display:none;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--r);cursor:pointer;background:color-mix(in oklab,var(--kupfer) 12%,transparent);border:1px solid color-mix(in oklab,var(--kupfer) 55%,transparent);transition:background-color .3s var(--ease),transform .2s}
.sm-toggle:active{transform:scale(.94)}
.sm-toggle:focus-visible{outline:3px solid var(--kupfer);outline-offset:2px}
.sm-icon{position:relative;width:1.2rem;height:.875rem;display:inline-block}
.sm-icon-line{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--balken);transition:transform .4s var(--ease),opacity .25s}
.sm-icon-line:nth-child(1){top:0}.sm-icon-line:nth-child(2){top:6px}.sm-icon-line:nth-child(3){top:12px}
.sm-toggle.open .sm-icon-line:nth-child(1){transform:translateY(6px) rotate(45deg)}
.sm-toggle.open .sm-icon-line:nth-child(2){opacity:0}
.sm-toggle.open .sm-icon-line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.sm-wrap{position:fixed;inset:0;z-index:2200;pointer-events:none;visibility:hidden;overflow:clip;contain:paint;transition:visibility 0s .6s}
.sm-wrap.open{pointer-events:auto;visibility:visible;transition:visibility 0s}
.sm-prelayer,.sm-panel{position:absolute;top:0;right:0;height:100%;width:min(26rem,100%);transform:translateX(105%);will-change:transform}
.sm-prelayer-1{background:var(--kupfer);transition:transform .5s var(--ease)}
.sm-prelayer-2{background:var(--laerche);transition:transform .5s var(--ease) .07s}
.sm-panel{background:color-mix(in oklab,var(--tief) 98%,transparent);display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem 1.5rem 1.75rem;overflow-y:auto;overscroll-behavior:contain;transition:transform .6s var(--ease) .14s}
.sm-wrap.open .sm-prelayer,.sm-wrap.open .sm-panel{transform:translateX(0)}
.sm-back{display:inline-flex;align-items:center;align-self:flex-start;min-height:2.75rem;padding:.5rem 1.1rem;background:color-mix(in oklab,var(--papier) 8%,transparent);border:1px solid color-mix(in oklab,var(--papier) 24%,transparent);border-radius:6px;color:var(--papier);font:500 .9375rem/1.2 "Barlow",sans-serif;cursor:pointer;opacity:0;transform:translateY(-8px);transition:opacity .35s ease .18s,transform .35s ease .18s,background-color .2s}
.sm-wrap.open .sm-back{opacity:1;transform:none}
.sm-back:hover{background:var(--kupfer)}
.sm-back:focus-visible,.sm-item:focus-visible,.sm-sub a:focus-visible,.sm-social:focus-visible{outline:3px solid var(--laerche);outline-offset:3px}
.sm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.sm-list>li{overflow:hidden}
.sm-item{display:inline-flex;align-items:center;min-height:2.75rem;font:600 clamp(2rem,8vw,2.75rem)/1.05 "Barlow Condensed",sans-serif;color:var(--papier);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;transform:translateY(120%) rotate(5deg);transition:transform .7s var(--ease),color .25s}
.sm-wrap.open .sm-item{transform:none}
.sm-list>li:nth-child(1) .sm-item{transition-delay:.18s}.sm-list>li:nth-child(2) .sm-item{transition-delay:.26s}.sm-list>li:nth-child(3) .sm-item{transition-delay:.34s}.sm-list>li:nth-child(4) .sm-item{transition-delay:.42s}
.sm-item:hover,.sm-item[aria-current="page"]{color:var(--laerche)}
.sm-sub{list-style:none;margin:.15rem 0 .5rem;padding:0 0 0 .9rem;border-left:1px solid var(--linie-hell);display:grid;gap:0;opacity:0;transition:opacity .5s ease .45s}
.sm-wrap.open .sm-sub{opacity:1}
.sm-sub a{display:flex;align-items:center;min-height:2.75rem;color:var(--leise-hell);font-size:1.0625rem;text-decoration:none}
.sm-sub a:hover{color:var(--papier)}
.sm-cta{align-self:stretch;justify-content:center;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s ease .5s,transform .5s ease .5s}
.sm-wrap.open .sm-cta{opacity:1;transform:none}
.sm-social{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;color:var(--papier);text-decoration:none;opacity:0;transition:opacity .5s ease .55s}
.sm-wrap.open .sm-social{opacity:1}
@media (max-width:860px){.sm-toggle{display:inline-flex}}
@media (min-width:861px){.sm-wrap{display:none}}
@media (prefers-reduced-motion:reduce){.sm-prelayer,.sm-panel,.sm-item,.sm-back,.sm-sub,.sm-cta,.sm-social,.sm-icon-line{transition:none}.sm-item,.sm-back,.sm-cta{transform:none;opacity:1}.sm-sub,.sm-social{opacity:1}}
html:has(.sm-wrap.open){overflow:hidden}

/* ---------- Säge-Video als Hintergrund (Karriere), Stock-Video Pexels 5972630, Herkunft bilder/HERKUNFT.md I ---------- */
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.bg-video.ist-spielt{opacity:1}
.holz--saege{position:relative;isolation:isolate;overflow:clip}
.holz--saege>.bg-video{z-index:-2}
.holz--saege::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(32,20,11,.84) 0%,rgba(32,20,11,.68) 55%,rgba(32,20,11,.5) 100%);opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.holz--saege.video-an::before{opacity:1}
@media (max-width:800px){.holz--saege::before{background:linear-gradient(rgba(32,20,11,.74),rgba(32,20,11,.66))}}
@media (prefers-reduced-motion:reduce){.bg-video{display:none}}

/* ---------- „Mehr erfahren“ auf den Leistungsbildern (Ansage 14.10.2026): im Blick abgedunkelt, Hinweis leuchtet alle 10 s kurz auf ---------- */
.mehr-bild{position:relative;display:block;overflow:hidden;border-radius:var(--r);color:inherit}
.mehr-bild::after,.vn::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(58,50,42,.42);opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.mehr-bild img,.vn img{transition:filter .8s var(--ease),transform .7s var(--ease)}
.mehr-hinweis{position:absolute;right:.75rem;bottom:.75rem;z-index:2;display:inline-flex;align-items:center;min-height:2.75rem;padding:.55rem 1rem;border-radius:6px;background:var(--papier);color:var(--balken);font:600 .8125rem/1 "Barlow",sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;box-shadow:var(--schatten);opacity:.9;transform:translate3d(0,0,0);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mehr-hinweis::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--laerche);opacity:0;transition:opacity .9s var(--ease)}
.mehr-hinweis{isolation:isolate}
.mehr-hinweis::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid #A8703A;opacity:0;pointer-events:none}
.ist-im-blick .mehr-hinweis,.ist-im-blick.mehr-hinweis{opacity:1}
.mehr-hinweis.puls{animation:mehr-wackeln .8s var(--ease)}
@keyframes mehr-wackeln{0%,100%{transform:rotate(0)}15%{transform:rotate(-4deg)}30%{transform:rotate(3.5deg)}45%{transform:rotate(-2.5deg)}60%{transform:rotate(1.5deg)}75%{transform:rotate(-.5deg)}}
@media (max-width:899px){.vn .mehr-hinweis--link{min-height:2.75rem}.mehr-hinweis{right:.4rem;bottom:.4rem;min-height:1.9rem;padding:.3rem .6rem;font-size:.625rem;letter-spacing:.04em;box-shadow:none}.mehr-hinweis--kachel{font-size:.6875rem;min-height:2rem}}
.mehr-hinweis--kachel{position:static;grid-column:2;justify-self:end;margin-top:-.25rem;box-shadow:none;border:1px solid color-mix(in oklab,var(--kupfer) 55%,transparent);background:transparent;color:var(--kupfer);min-height:2.25rem;padding:.35rem .8rem;font-size:.75rem}
.kat__kachel{grid-template-columns:4.5rem 1fr}
.kat__kachel .kat__text{display:grid}
.kat__kachel .kat__bild img{transition:opacity .7s var(--ease)}
.kat__kachel .kat__bild img{transition:opacity .8s var(--ease),filter .8s var(--ease)}
@media (max-width:360px){.kat__kachel{grid-template-columns:3.5rem 1fr}}

/* Farbton der ganzen Seite (Ansage 14.10.2026): beim Scrollen sehr langsam von hell zu mittel und wieder hell.
   Eine feste Farbschicht hinter dem Inhalt, nur ihre Deckkraft ändert sich (läuft auf der Grafikkarte). */
html.js{background:var(--papier)}
html.js body{background:transparent}
html.js .sektion--span{background:color-mix(in oklab,var(--span) 50%,transparent)}
.lstg__weg a,.recht a:not(.knopf),.stelle-fest h4,.stelle__detail h4,.platzhalter,.platzhalter-block{color:var(--balken)}
.farbton{position:fixed;inset:0;z-index:-1;background:#BF9F78;opacity:0;pointer-events:none;will-change:opacity}
/* Handy (Technik-Prüfer 27.10.2026, Ansage: soll nicht ruckeln): feste Höhe der größten Ansicht statt inset:0, damit die Fläche beim Ein- und Ausklappen der Adressleiste nicht neu gemessen und gezeichnet wird; eigene Ebene */
@media (pointer:coarse){.farbton{inset:auto;top:0;left:0;right:0;height:100vh;height:100lvh;contain:strict;transform:translateZ(0)}}
#leistungen .kicker{color:var(--leise)}

/* Vorher-Nachher-Schieber (Holzrahmenbau, Anbau Rohbau links, fertig rechts) */
.vn{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/5;touch-action:pan-y}
.vn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.vn .vn__oben{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.vn__griff{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;margin-left:-1px;background:var(--papier);z-index:2;pointer-events:none}
.vn__griff::after{content:"‹ ›";position:absolute;top:50%;left:50%;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;display:grid;place-items:center;border-radius:50%;background:var(--papier);color:var(--balken);font:600 1rem/1 "Barlow",sans-serif;box-shadow:var(--schatten)}
.vn__regler{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:2}
.vn:focus-within{outline:3px solid var(--kupfer);outline-offset:3px}
.vn__marke{position:absolute;top:.6rem;z-index:2;padding:.3rem .65rem;border-radius:6px;background:rgba(32,20,11,.74);color:var(--papier);font:600 .75rem/1 "Barlow",sans-serif;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.vn__marke--l{left:.6rem}.vn__marke--r{right:.6rem}
.vn .mehr-hinweis--link{z-index:3}

/* Karriere: drei Kästen untereinander nach dem Vorbild Kretsch, „Mehr erfahren“ klappt Aufgaben mit kleinen Bildern auf */
.stellen{display:grid;gap:1rem;max-width:58rem}
.stelle{padding:clamp(1.25rem,1rem + 1.2vw,2rem);background:var(--papier);border:1px solid var(--linie);border-radius:var(--r)}
.sektion--span .stelle,.stelle{background:var(--papier)}
.stelle h3{margin-bottom:.4rem}
.stelle>p{margin:0;color:var(--leise);max-width:60ch}
.stelle__mehr{margin-top:1rem}
.stelle__mehr summary{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.45rem 1.1rem;border-radius:6px;border:1px solid color-mix(in oklab,var(--kupfer) 55%,transparent);color:var(--kupfer);font:600 .8125rem/1 "Barlow",sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;list-style:none}
.stelle__mehr summary::-webkit-details-marker{display:none}
.stelle__mehr summary::after{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.stelle__mehr[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.stelle__mehr summary:hover{background:var(--kupfer);color:var(--papier)}
.stelle__mehr summary:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px}
.stelle__detail{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--linie)}
.stelle__detail h4{font:600 .8125rem/1.2 "Barlow",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--kupfer);margin:0 0 .75rem}
.stelle__detail h4:not(:first-child){margin-top:1.5rem}
.aufgaben{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:760px){.aufgaben{grid-template-columns:1fr 1fr;gap:.9rem 1.5rem}}
.aufgaben li{display:grid;grid-template-columns:5rem 1fr;gap:.9rem;align-items:center}
.aufgaben img{width:5rem;height:3.75rem;object-fit:cover;border-radius:6px}
.aufgaben strong{display:block;font:600 1.0625rem/1.2 "Barlow Condensed",sans-serif;color:var(--balken)}
.aufgaben span{font-size:.9375rem;line-height:1.4;color:var(--tinte)}
.schicken{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.schicken li{padding:.35rem .8rem;border-radius:6px;background:var(--span);font-size:.9375rem}
.stelle__detail{animation:stelle-auf .45s var(--ease)}
@keyframes stelle-auf{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}

/* Ablauf der Bewerbung auf Holz wie Kontakt und Fuß */
.holz.holz--wand{position:relative;isolation:isolate;background:var(--tief) url(../img/holzwand.webp) 0 0/760px auto repeat}
.holz.holz--wand::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(20,12,6,.58),rgba(20,12,6,.7));pointer-events:none}

@media (prefers-reduced-motion:reduce){.mehr-bild::after,.mehr-hinweis,.kat__kachel .kat__bild img,.mehr-bild img{transition:none}.puls .mehr-hinweis,.mehr-hinweis.puls,.puls .mehr-hinweis::after,.mehr-hinweis.puls::after,.stelle__detail{animation:none}}

/* Karriere: nur die gelernte Fachkraft, offen, mit Bereichen als Bildbänder über die ganze Breite (Ansage 14.10.2026) */
.stelle-fest{max-width:68rem}
.stelle-text{display:grid;gap:1rem 3rem;margin-top:.5rem}
@media (min-width:800px){.stelle-text{grid-template-columns:1fr 1fr}}
.stelle-liste{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.stelle-liste li{position:relative;padding-left:1.25rem;line-height:1.45}
.stelle-liste li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--kupfer)}
.stelle-fest h3{font-size:var(--t-h3);margin-bottom:.4rem}
.stelle-fest>p{margin:0;color:var(--leise);max-width:60ch}
.stelle-fest h4,.stelle__detail h4{font:600 .8125rem/1.2 "Barlow",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--kupfer);margin:1.75rem 0 .9rem}
.stelle-fest--fuss h4{margin-top:clamp(1.5rem,1rem + 2vw,2.5rem)}
.baender{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
@media (max-width:699px){.baender{grid-template-columns:1fr}}
.band{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(14rem,9rem + 14vw,22rem);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--papier)}
.band img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(32,20,11,.64)}

.band__in{display:flex;justify-content:center;width:auto;margin:0;padding:clamp(1rem,.6rem + 1.6vw,2rem)}

.band__text{max-width:22rem;display:flex;flex-direction:column;align-items:center}
.band__knopf{margin-top:1rem}

.band h4{font:600 clamp(1.125rem,.8rem + 1.6vw,2.25rem)/1.05 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .6rem;color:var(--papier)}
.band p{margin:0;font-size:clamp(.8125rem,.7rem + .5vw,1.125rem);line-height:1.4;color:var(--papier)}
.stellen-klapp{display:grid;gap:.75rem;margin-top:clamp(2rem,1.5rem + 2vw,3rem);max-width:58rem}
.stelle--klapp{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);padding:0}
.stelle--klapp summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem;padding:1rem clamp(1.25rem,1rem + 1vw,1.75rem);cursor:pointer;list-style:none}
.stelle--klapp summary::-webkit-details-marker{display:none}
.stelle__titel{font:600 var(--t-h3)/1.1 "Barlow Condensed",sans-serif;color:var(--balken)}
.mehr-hinweis--klapp{position:relative;right:auto;bottom:auto;box-shadow:none;background:transparent;opacity:1}
.stelle__auf{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.4rem 1rem;border-radius:6px;border:1px solid color-mix(in oklab,var(--kupfer) 55%,transparent);color:var(--kupfer);font:600 .75rem/1 "Barlow",sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.stelle__auf::after{content:"";width:.4rem;height:.4rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.stelle--klapp[open] .stelle__auf::after{transform:translateY(2px) rotate(-135deg)}
.stelle--klapp summary:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px;border-radius:var(--r)}
.stelle--klapp .stelle__detail{margin:0;padding:0 clamp(1.25rem,1rem + 1vw,1.75rem) 1.5rem;border-top:0}
.stelle--klapp .stelle__detail>p{margin:0;color:var(--leise)}

/* Bewerbung auf einer Seite (Ansage 14.10.2026): breiter, Unterlagen nebeneinander, Kopf knapper */
@media (min-width:900px){
  .reiter__kopf{padding:1.25rem 1.5rem .5rem}
  .reiter__kopf .lead{display:none}
  .reiter__koerper{padding:.5rem 2rem 1.25rem}
  .reiter fieldset{margin-top:.75rem}
  .reiter fieldset:has([data-feld="lebenslauf"]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
  .reiter fieldset:has([data-feld="lebenslauf"]) legend{grid-column:1/-1}
  .reiter .ablage{padding:.9rem .75rem;min-height:0}
  .reiter textarea[name="anschreiben"]{min-height:7rem;height:7rem}
  #reiter fieldset:has([data-feld="email"]){grid-template-columns:2fr 1fr;align-items:start}
  #reiter fieldset:has([data-feld="email"]) legend{grid-column:1/-1}
  .reiter__kopf h2{font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);margin-bottom:0}
}
/* Anfrage: Wahl zwischen E-Mail-Formular und Anruf (Ansage 14.10.2026) */
.anfrage__wahl{position:relative;z-index:1;display:grid;gap:.75rem;padding:.5rem 1.5rem 2rem}
@media (min-width:640px){.anfrage__wahl{grid-template-columns:1fr 1fr;padding:.75rem 2rem 2.5rem}}
.wahl{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-height:7rem;padding:1.25rem 1.4rem;border-radius:var(--r);border:1px solid color-mix(in oklab,var(--laerche) 45%,transparent);background:rgba(247,241,230,.06);color:var(--papier);text-align:left;text-decoration:none;cursor:pointer;font:inherit;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.wahl strong{font:600 1.5rem/1.1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.wahl span{color:var(--leise-hell);font-size:.9375rem}
.wahl:hover{background:rgba(247,241,230,.12);border-color:var(--laerche);transform:translate3d(0,-2px,0)}
.wahl:focus-visible{outline:3px solid var(--laerche);outline-offset:3px}
.reiter__karte.ist-fertig .anfrage__wahl,.anfrage__wahl[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.wahl{transition:none}}

/* Reveal-Versatz nach rechts darf die Seite nie breiter machen (Gegenprobe 13.10.2026) */
main{overflow-x:clip}

/* Kontrast auf dem Farbton (14.10.2026): kupferne Kleintexte auf hellem Grund in Balkenbraun */
.stelle-fest h4,.stelle__detail h4,.platzhalter,.platzhalter-block,.recht a:not(.knopf),.lstg__weg a{color:var(--balken)}

/* Kontakt am Handy (14.10.2026): Foto als Band oben im richtigen Zuschnitt statt über die ganze Karte gestreckt, Text darunter auf dunklem Grund */
@media (max-width:899px){
  .plakat{min-height:0;align-content:start}
  .plakat__foto{position:relative;inset:auto;z-index:0;aspect-ratio:4/3;box-shadow:none}
  .plakat__foto::after{background:linear-gradient(180deg,rgba(25,15,8,0) 55%,rgba(34,22,13,.9) 100%)}
  .plakat .plakat__in{padding-top:1.1rem;background:#22160D}
}

/* Teamfoto Über uns (Ansage 19.10.2026): Querformat behalten */
.zwei__bild--team img{object-position:50% 42%}
@media (min-width:900px){.zwei__bild--team img{aspect-ratio:4/3}}
.zwei__bild--team img{border-radius:var(--r) var(--r) 0 0;display:block}
.team-leiste{display:grid;grid-template-columns:1fr 1fr;margin:0;background:var(--tief);color:var(--papier);border-radius:0 0 var(--r) var(--r)}
.team-leiste>div{padding:1rem 1.5rem 1.1rem}
.team-leiste>div+div{border-left:1px solid rgba(247,241,230,.16)}
.team-leiste dt{font-size:var(--t-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--leise-hell)}
.team-leiste dd{margin:.2rem 0 0;font:600 2.25rem/1 "Barlow Condensed",sans-serif;overflow:hidden}
.team-leiste__zahl{display:inline-block;font-variant-numeric:tabular-nums}
.team-leiste__zahl.tickt{animation:zahl-tickt .2s cubic-bezier(.2,.7,.3,1)}
@keyframes zahl-tickt{from{transform:translate3d(0,.6em,0);opacity:.25}to{transform:none;opacity:1}}
@media (max-width:899px){.zwei__bild--team img,.team-leiste{border-radius:0}.team-leiste>div{padding:.8rem 1rem .9rem}.team-leiste dd{font-size:1.875rem}}
@media (prefers-reduced-motion:reduce){.team-leiste__zahl.tickt{animation:none}}

/* Schriftzug im Kopf „Wood Construction Krohn“ (Ansage 19.10.2026): kleiner, damit er neben das Logo passt */
.marke span{font-size:1.2rem;letter-spacing:.04em}
@media (max-width:420px){.marke span{font-size:.95rem;letter-spacing:.02em}}

/* Seitenkopf mit dem Krohn-Symbol (Ansage 19.10.2026): die Baumscheibe aus dem Original groß und leise hinter der Überschrift,
   dreht sich beim Laden ein Stück ein und blendet auf. Farbe über eine Maske, damit sie auf Foto und Papier passt. */
.siegel-deko{position:absolute;z-index:1;pointer-events:none;width:clamp(14rem,34vw,30rem);aspect-ratio:900/871;right:clamp(-4rem,-2vw,0rem);top:50%;
  -webkit-mask:url(../img/symbol-scheibe.webp) center/contain no-repeat;mask:url(../img/symbol-scheibe.webp) center/contain no-repeat;
  background:var(--papier);opacity:.16;transform:translateY(-50%)}
.hero .hero__in{z-index:2}
.lstg--siegel{position:relative;overflow:hidden}
.lstg--siegel .lstg__in{position:relative;z-index:2}
.siegel-deko--hell{background:var(--balken);opacity:.07;top:clamp(2rem,6vw,6rem);width:clamp(13rem,30vw,26rem);transform:none}
@media (max-width:899px){.siegel-deko{right:-5rem;width:17rem}.siegel-deko--hell{right:-4rem;top:1rem;width:14rem}}
@media (prefers-reduced-motion:no-preference){
  html.js .siegel-deko{animation:siegel-ein .95s cubic-bezier(.22,1,.36,1) .15s both}
  html.js .siegel-deko--hell{animation-name:siegel-ein-hell}
  html.js .lstg__titel{animation:titel-ein .8s cubic-bezier(.22,1,.36,1) .1s both}
  html.lo-lang.js .siegel-deko,html.lo-lang.js .lstg__titel{animation-delay:1.9s}
}
@keyframes siegel-ein{from{opacity:0;transform:translateY(-50%) rotate(-14deg) scale(.9)}to{opacity:.16;transform:translateY(-50%) rotate(0) scale(1)}}
@keyframes siegel-ein-hell{from{opacity:0;transform:rotate(-14deg) scale(.9)}to{opacity:.07;transform:none}}
@keyframes titel-ein{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Vom Rohbau bis fertig auf den Leistungsseiten (Ansage 19.10.2026 nachts) */
.vgl{margin-top:clamp(2.25rem,1.5rem + 2.5vw,3.5rem)}
.vgl__titel{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.6rem);color:var(--balken);margin:0}
.vgl__hinweis{margin-top:.5rem;color:var(--tinte);opacity:.85}
.vgl__vn{margin-top:1rem;aspect-ratio:4/5}
.vgl-paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,.3rem + 1vw,1rem);margin-top:1rem}
.vgl-paar__bild{position:relative;margin:0;overflow:hidden;border-radius:var(--r)}
.vgl-paar__bild img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.vgl-platz{margin-top:1rem;display:grid;place-items:center;aspect-ratio:16/9;border:1px dashed color-mix(in oklab,var(--kupfer) 55%,transparent);border-radius:var(--r);background:color-mix(in oklab,var(--kupfer) 5%,transparent)}
.lstg__knoepfe{margin-top:clamp(1.75rem,1rem + 2vw,2.75rem)}
@media (min-width:900px){.vgl__vn{aspect-ratio:4/3}.vgl-paar__bild img{aspect-ratio:4/3}.lstg .kat-text{font-size:1.125rem;line-height:1.65}}
.vgl__vn::after{display:none}.vgl__vn:hover img{filter:none;transform:none}

/* Referenzen-Laufband (Ansage 20.10.2026, wie bei Mamma Mia): echte Arbeiten fahren langsam durch, Maus anhalten stoppt,
   bei weniger Bewegung steht es still und lässt sich wischen. */
.laufband{overflow:hidden;padding-block:clamp(1rem,.6rem + 1.5vw,2rem)}
.laufband__spur,.laufband__doppel{display:flex;gap:clamp(.5rem,.3rem + .8vw,.9rem)}
.laufband__spur{width:max-content}
.laufband img{height:clamp(170px,9rem + 8vw,280px);width:auto;border-radius:var(--r);object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .laufband__spur{animation:laufband 130s linear infinite}
}
@keyframes laufband{to{transform:translateX(calc(-50% - clamp(.25rem,.15rem + .4vw,.45rem)))}}
@media (prefers-reduced-motion:reduce){.laufband{overflow-x:auto}.laufband__doppel{display:none}}

/* Startbereich mit Video (Ansage 20.10.2026): der Clip zeigt, wie die Veranda Balken für Balken entsteht, spielt einmal und bleibt
   auf dem echten Foto stehen; danach kommt der Text. Ohne Skript und bei reduzierter Bewegung: Foto und Text sofort. */
.vhero{position:relative;isolation:isolate;overflow:hidden;background:var(--tief);color:var(--papier);height:calc(100svh - var(--kopf));min-height:34rem;max-height:62rem;display:flex;align-items:center}
.vhero__bild,.vhero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;z-index:-3}
.vhero__video{z-index:-2;opacity:0;transition:opacity .6s var(--ease)}
.vhero__video.ist-spielt{opacity:1}
.vhero__schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(32,20,11,.82) 0%,rgba(32,20,11,.58) 38%,rgba(32,20,11,.12) 68%,rgba(32,20,11,0) 100%);pointer-events:none}
.vhero__in{position:relative;width:min(100% - var(--rand2),var(--maxw))}
.vhero__text{max-width:36rem}
.vhero .kicker{color:var(--holz-hell,#E6D5B8)}
.vhero h1{color:var(--papier);margin:0}
.vhero h1 span{display:block}
.vhero .lead{color:var(--papier);margin-top:1.1rem;max-width:28rem}
.vhero .knopfreihe{margin-top:1.6rem}
.vhero .knopf--rahmen{border-color:var(--papier);color:var(--papier)}
.vhero .knopf--rahmen:hover{background:color-mix(in oklab,var(--papier) 14%,transparent)}
.ki-label{position:absolute;top:1rem;right:1rem;z-index:2;font-size:.75rem;line-height:1;letter-spacing:.04em;padding:.4rem .6rem;border-radius:6px;background:rgba(32,20,11,.72);color:var(--papier);pointer-events:none}
@media (max-width:800px){
  .vhero{align-items:flex-end;min-height:32rem;height:calc(100svh - var(--kopf))}
  .vhero__bild,.vhero__video{object-position:50% 40%}
  .vhero__schleier{background:linear-gradient(0deg,rgba(32,20,11,.9) 0%,rgba(32,20,11,.66) 36%,rgba(32,20,11,.1) 64%,rgba(32,20,11,0) 100%)}
  .vhero__in{padding-bottom:2.25rem}
  .vhero .lead{font-size:1.0625rem}
}
/* Solange das Video spielt: Text und Schleier warten; spätestens nach 16 s erscheinen sie auch ohne Skript-Meldung */
@media (prefers-reduced-motion:no-preference){
  html.js .vhero:not(.ist-fertig) .vhero__text{opacity:0;transform:translate3d(0,18px,0);animation:vhero-notfall .01s 16s forwards}
  html.js .vhero:not(.ist-fertig) .vhero__schleier{opacity:0;animation:vhero-notfall .01s 16s forwards}
  .vhero__text,.vhero__schleier{transition:opacity .8s var(--ease),transform .8s var(--ease)}
}
@keyframes vhero-notfall{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vhero__video{display:none}}
/* Vom Plan zum Bau (Leistung Sonderkonstruktionen, 20.10.2026): Text links, Video rechts, am Handy untereinander */
.pzb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.25rem,.8rem + 2vw,2.75rem);align-items:center;margin-top:clamp(2.25rem,1.5rem + 2.5vw,3.5rem)}
.pzb__text p{margin-top:1rem}
.pzb__film{position:relative;margin:0;overflow:hidden;border-radius:var(--r);aspect-ratio:1/1;background:var(--span)}
.pzb__film img,.pzb__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pzb__film video{opacity:0;transition:opacity .5s var(--ease)}
.pzb__film video.ist-spielt{opacity:1}
@media (max-width:800px){.pzb{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pzb__film video{display:none}}

/* ===== Umbau Startseite 20.10.2026 (Ansage) ===== */
/* Öffnungsstatus im Kopf (Handy): live nach Mo bis Fr 8 bis 15 Uhr, Berliner Zeit */
.offen{display:none;align-items:center;gap:.45rem;margin:0;font-size:.8125rem;line-height:1.2;color:var(--tinte);white-space:nowrap}
.offen i{width:.55rem;height:.55rem;border-radius:50%;background:#9A8F82;flex:none}
.offen.ist-offen i{background:#2E8B4A;box-shadow:0 0 0 3px rgba(46,139,74,.18)}
.offen.ist-offen span{color:#1F6B37;font-weight:600}
@media (max-width:860px){
  .offen:not([hidden]){display:flex;margin-right:auto;margin-left:.6rem}
  .marke span{display:none}
}
/* Startbereich: Handy-Text mittig, erst der Name, dann der Rest */
@media (max-width:800px){
  .vhero{align-items:center}
  .vhero__in{padding-bottom:0}
  .vhero__schleier{background:radial-gradient(120% 70% at 50% 50%,rgba(32,20,11,.72) 0%,rgba(32,20,11,.45) 55%,rgba(32,20,11,.12) 100%)}
}
@media (prefers-reduced-motion:no-preference){
  html.js .vhero:not(.ist-fertig) .vhero__text>*{opacity:0;transform:translate3d(0,14px,0)}
  html.js .vhero:not(.ist-fertig) .vhero__text{opacity:1;transform:none}
  .vhero__text>*{transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .vhero.ist-fertig .vhero__text>.kicker{transition-delay:.55s}
  .vhero.ist-fertig .vhero__text>.lead{transition-delay:.75s}
  .vhero.ist-fertig .vhero__text>.knopfreihe{transition-delay:.95s}
  html.js .vhero:not(.ist-fertig) .vhero__text>*{animation:vhero-notfall .01s 16s forwards}
}
/* Leistungen als Strecke (wie „Der Ablauf“ auf roema-design.de) */
.gang{position:relative;background:var(--tief)}
.gang__buehne{padding:.5rem}
.gang__fenster{position:relative;overflow:hidden;border-radius:var(--r);background:var(--tief)}
.gang__kopf{position:absolute;z-index:3;top:clamp(1rem,.6rem + 1.5vw,1.75rem);left:0;right:0;margin:0;text-align:center;color:var(--papier);font-size:clamp(1.25rem,1rem + 1vw,1.875rem);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.gang__bahn{display:flex;flex-direction:column}
.raum{position:relative;min-height:min(80svh,46rem);display:flex;align-items:flex-end;overflow:hidden;color:var(--papier)}
.raum__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.05);transition:transform 1.4s var(--ease)}
.raum.da .raum__foto{transform:none}
.raum::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(32,20,11,.86) 0%,rgba(32,20,11,.42) 46%,rgba(32,20,11,.12) 100%);pointer-events:none}
.raum__tafel{position:relative;z-index:2;width:min(100% - var(--rand2),var(--maxw));margin:0 auto;padding:0 0 clamp(5.5rem,4rem + 4vw,7rem)}
.raum__tafel .kicker{color:var(--laerche);margin-bottom:.6rem}
.raum__titel{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem}
.raum__titel h3{margin:0;font-size:clamp(1.75rem,1.3rem + 2vw,3rem);line-height:1.05;color:var(--papier);text-transform:uppercase;letter-spacing:.02em}
.raum__tafel p{margin:.75rem 0 0;max-width:34rem;color:var(--papier)}
.raum__mehr{min-height:2.75rem}
.gang__zaehler{position:absolute;z-index:3;right:clamp(1rem,.6rem + 1.5vw,1.75rem);top:clamp(1rem,.6rem + 1.5vw,1.75rem);margin:0;color:var(--papier);font-size:.875rem;letter-spacing:.08em}
.gang__zaehler b{font:600 1.5rem/1 "Barlow Condensed",sans-serif}
.gang__balken{display:none}
.gang__alle{position:absolute;z-index:3;right:clamp(1rem,.6rem + 1.5vw,1.75rem);bottom:clamp(1rem,.6rem + 1.5vw,1.75rem)}
/* Mit Skript und ohne reduzierte Bewegung: Bühne bleibt stehen, die Bahn fährt nach rechts weiter */
@media (prefers-reduced-motion:no-preference){
  html.js .gang{height:calc(var(--n) * 85svh + 15svh)}
  html.js .gang__buehne{position:sticky;top:var(--kopf);height:calc(100svh - var(--kopf));box-sizing:border-box}
  html.js .gang__fenster{height:100%}
  html.js .gang__bahn{flex-direction:row;height:100%;transition:transform .9s var(--ease);will-change:transform}
  html.js .raum{flex:0 0 100%;min-height:0;height:100%}
  html.js .gang__balken{position:absolute;z-index:3;right:clamp(1.2rem,.8rem + 1.5vw,2rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
  html.js .gang__balken i{display:block;width:2px;height:clamp(14px,3svh,26px);background:rgba(247,241,230,.4);transition:background .3s}
  html.js .gang__balken i.an{background:var(--papier)}
  html.js .gang__alle{position:absolute}
  .raum.da .raum__mehr{animation:mehr-wackeln 4s ease-in-out 1.2s infinite}
}
@keyframes mehr-wackeln{0%,82%,100%{transform:none}86%{transform:rotate(-3deg)}90%{transform:rotate(3deg)}94%{transform:rotate(-2deg)}97%{transform:rotate(1deg)}}
@media (max-width:600px){.gang__buehne{padding:.35rem}.raum__tafel{padding-bottom:5rem}}
/* Karriere kurz: längliches Band mit dem Säge-Video dahinter */
.kar-kurz{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.kar-kurz .bg-video{z-index:-1}
.kar-kurz__in h2{margin:0;color:var(--papier)}
.kar-kurz__klein{margin:.6rem 0 0;font-size:var(--t-klein);color:var(--holz-hell)}
.kar-kurz .knopfreihe{margin-top:1.25rem}
/* Kontakt kurz auf einem Foto */
.kontakt-foto{position:relative;isolation:isolate;overflow:hidden;color:var(--papier);padding-block:clamp(4rem,3rem + 5vw,7.5rem);background:var(--tief)}
.kontakt-foto__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.kontakt-foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(32,20,11,.8) 0%,rgba(32,20,11,.55) 50%,rgba(32,20,11,.3) 100%)}
.kontakt-foto__in .kicker{color:var(--laerche)}
.kontakt-foto__in h2{margin:0;color:var(--papier)}
.kontakt-foto__knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.knopf--glas{background:rgba(247,241,230,.12);color:var(--papier);border-color:rgba(247,241,230,.7)}
.knopf--glas:hover{background:rgba(247,241,230,.22)}
.kontakt-foto__zeile{margin:1.25rem 0 0;font-size:var(--t-klein);color:var(--papier)}
@media (max-width:800px){.kontakt-foto::after{background:linear-gradient(0deg,rgba(32,20,11,.84),rgba(32,20,11,.5))}.kontakt-foto__knoepfe .knopf{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.raum__foto{transform:none;transition:none}}
/* Team-Leiste als dünner Streifen (Ansage 20.10.2026): „13 Jahre Holzbau“ und „Standort: Berlin“ je in einer Zeile */
.team-leiste>div{display:flex;align-items:baseline;gap:.5rem;padding:.55rem 1.25rem .6rem}
.team-leiste dd{margin:0;font-size:1.625rem}
.team-leiste dt{font-size:var(--t-klein)}
@media (max-width:899px){.team-leiste>div{padding:.5rem 1rem}.team-leiste dd{font-size:1.375rem}}
/* Laufband läuft mit Skript per JS weiter, auch unter Maus und Finger; nur nach Klick oder Ziehen hält es 5 s (Ansage 20.10.2026) */
html.js .laufband[data-lauf] .laufband__spur{animation:none}
.laufband[data-lauf]{cursor:grab;touch-action:pan-y}
.laufband[data-lauf].zieht{cursor:grabbing}
.laufband[data-lauf] img{user-select:none;-webkit-user-drag:none}
/* Startbereich: nach dem Video 10 s Stillstand, dann wechseln fünf echte Fotos alle 10 s (Ansage 20.10.2026) */
.vhero__bild{z-index:-4}
.vhero__video{z-index:-3}
.vhero__wechsel{position:absolute;inset:0;z-index:-2}
.vhero__wechsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.4s var(--ease),transform 10s linear}
.vhero__wechsel img.an{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.vhero__wechsel{display:none}}
/* Startbereich, Stand 20.10.2026 abends: das Quadrat ganz zeigen, Ränder mit unscharfer, abgedunkelter Kopie füllen */
.vhero__unscharf,.vhero__leinwand{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;z-index:-6;filter:blur(26px) brightness(.62) saturate(1.1);pointer-events:none}
.vhero__leinwand{z-index:-5;opacity:0;transition:opacity .4s}
.vhero__leinwand.an{opacity:1}
.vhero__bild,.vhero__video{object-fit:contain;object-position:50% 50%}
@media (max-width:800px){.vhero__bild,.vhero__video{object-position:50% 50%}}
/* Name in einer Zeile, Wort für Wort gestampft (5 s, 6 s, 7 s), danach der Rest gleichzeitig */
.vhero h1{white-space:nowrap;font-size:clamp(2.6rem,1rem + 5.2vw,6.25rem);line-height:1}
.vhero h1 span{display:inline-block}
.vhero__text{max-width:none}
.vhero .lead{max-width:none;font-size:clamp(.9375rem,.85rem + .3vw,1.125rem);letter-spacing:.06em;text-transform:uppercase;margin-top:1rem}
.vhero .knopf{min-height:3.4rem;padding:.9rem 2.4rem;font-size:1.0625rem}
@media (max-width:800px){
  .vhero h1{white-space:normal;font-size:clamp(2.5rem,11vw,3.4rem)}
  .vhero h1 span{display:inline-block}
  .vhero h1 span:last-child{display:block}
  .vhero__text{text-align:center}
  .vhero .knopfreihe{justify-content:center}
  .vhero .lead{letter-spacing:.03em}
}
@media (prefers-reduced-motion:no-preference){
  html.js .vhero:not(.ist-fertig) .vhero__text>h1{opacity:1;transform:none}
  html.js .vhero:not(.ist-fertig) .vhero__wort{opacity:0;transform:translate3d(0,-0.9em,0) scale(1.35);animation:vhero-notfall .01s 16s forwards}
  .vhero__wort.da{animation:stampf .55s cubic-bezier(.3,1.6,.5,1) forwards}
  .vhero.ist-fertig .vhero__text>.kicker,.vhero.ist-fertig .vhero__text>.lead,.vhero.ist-fertig .vhero__text>.knopfreihe{transition-delay:.35s}
}
@keyframes stampf{0%{opacity:0;transform:translate3d(0,-0.9em,0) scale(1.35)}55%{opacity:1;transform:translate3d(0,.06em,0) scale(.97)}100%{opacity:1;transform:none}}
/* Lesbarkeit auf hellen Fotos (pruef.py 20.10.2026) */
.gang__fenster::before{content:"";position:absolute;left:0;right:0;top:0;height:9rem;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(32,20,11,.78),rgba(32,20,11,0))}
.gang__kopf,.gang__zaehler{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.raum__tafel .kicker,.kontakt-foto__in .kicker{color:var(--papier);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.raum::after{background:linear-gradient(0deg,rgba(32,20,11,.9) 0%,rgba(32,20,11,.6) 40%,rgba(32,20,11,.15) 100%)}
.ki-label{background:var(--tief);color:var(--papier)}
/* ===== Runde 3, 20.10.2026 abends (Ansage) ===== */
/* Startbereich: Video füllt wie ein Foto, fährt in 7 s ganz leicht heran */
.vhero__bild,.vhero__video{object-fit:cover;object-position:50% 56%}
.vhero__video{transform:scale(1);transition:opacity .6s var(--ease),transform 7.2s linear}
.vhero__video.ist-spielt{transform:scale(1.06)}
.vhero__bild{transform:scale(1.06)}
@media (max-width:800px){.vhero__bild,.vhero__video{object-position:50% 50%}}
@media (prefers-reduced-motion:reduce){.vhero__bild{transform:none}}
/* Holz-Knöpfe im Ton des Logos */
.knopf--holz{position:relative;color:var(--papier);border:1px solid rgba(226,192,141,.55);background:linear-gradient(rgba(72,55,34,.78),rgba(52,38,22,.86)),url(../img/holzwand.webp) center/280px auto;text-shadow:0 1px 2px rgba(0,0,0,.55);box-shadow:var(--schatten)}
.knopf--holz:hover{background:linear-gradient(rgba(92,68,40,.74),rgba(62,45,26,.84)),url(../img/holzwand.webp) center/280px auto;color:var(--papier)}
.vhero .knopf--holz{min-height:3.6rem;padding:1rem 2.6rem;font-size:1.0625rem}
/* Anfrage im Kopf: am Handy neben dem Menü; auf der Startseite erst, wenn der Knopf oben weg ist */
.kopf__anfrage{display:none}
@media (max-width:860px){.kopf__anfrage{display:inline-flex;min-height:2.75rem;padding:.5rem 1rem;font-size:.8125rem;margin-right:.5rem}}
.kopf__anfrage,.nav__anfrage{transition:opacity .35s var(--ease),transform .35s var(--ease)}
html.kopf-knopf-weg .kopf__anfrage,html.kopf-knopf-weg .nav__anfrage{opacity:0;transform:translateY(-6px);pointer-events:none}
/* Öffnungsstatus: offen grün, geschlossen rot */
.offen i{background:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.16)}
.offen span{color:#9B2019;font-weight:600}
.offen.ist-offen i{background:#2E8B4A;box-shadow:0 0 0 3px rgba(46,139,74,.18)}
.offen.ist-offen span{color:#1F6B37}
/* Leistungs-Strecke */
.gang__kopf{font-size:clamp(1.125rem,.95rem + .8vw,1.5rem)}
.raum__tafel{text-align:center;padding-bottom:clamp(5.75rem,4.5rem + 4vw,7.5rem)}
.raum__titel{justify-content:center}
.raum__titel h3{font-size:clamp(2.25rem,1.6rem + 3vw,4rem)}
.raum__tafel p{margin-inline:auto;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem)}
.raum__mehr{min-height:3.1rem;padding:.75rem 1.75rem;font-size:1rem}
.raum__foto{object-position:var(--fokus,50% 50%)}
.raum__vn{position:absolute;inset:0;z-index:0}
.raum__vn .raum__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.raum__vn .vn__regler{z-index:3}
.raum__vn .vn__griff,.raum__vn .vn__marke{z-index:3}
.raum__vn .vn__marke{top:5.5rem}
.gang__zaehler{font-size:1.125rem;top:clamp(.8rem,.5rem + 1vw,1.4rem)}
.gang__zaehler b{font-size:clamp(2.25rem,1.8rem + 1.5vw,3.25rem)}
.gang__zaehler span{opacity:.85}
.gang__rast{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  html.js .raum:not(.da){visibility:hidden;transition:visibility 0s .9s}
  html.js .raum.da{visibility:visible}
  .raum.da .raum__mehr{animation:mehr-wackeln 11s ease-in-out 1.5s infinite}
  .gang__alle{animation:mehr-wackeln 12s ease-in-out 6s infinite}
  html.js .gang__fenster{opacity:0;transform:scale(.985);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  html.js .gang.im-bild .gang__fenster{opacity:1;transform:none}
}
@keyframes mehr-wackeln{0%,90%,100%{transform:none}92%{transform:rotate(-3deg)}94%{transform:rotate(3deg)}96%{transform:rotate(-2deg)}98%{transform:rotate(1deg)}}
/* Ankerpunkte beim Scrollen */
html.anker{scroll-snap-type:y proximity}
html.anker #ueber,html.anker #instagram,html.anker #karriere,html.anker #kontakt{scroll-snap-align:start;scroll-margin-top:var(--kopf)}
@media (prefers-reduced-motion:reduce){html.anker{scroll-snap-type:none}}
/* Kontakt mit Karte */
.kontakt-foto__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);align-items:center}
.kontakt-foto__in h2{font-size:clamp(2.25rem,1.6rem + 3vw,4rem)}
.kontakt-karte{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);border:1px solid rgba(247,241,230,.25)}
.kontakt-karte img{display:block;width:100%;height:auto}
@media (max-width:899px){.kontakt-foto__in{grid-template-columns:1fr}}
.raum__vn.vn{aspect-ratio:auto;border-radius:0;position:absolute}
/* Bounce weicher: fällt von oben, federt zweimal nach */
.vhero__wort.da{animation:stampf .8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes stampf{0%{opacity:0;transform:translate3d(0,-1.1em,0) scale(1.18)}45%{opacity:1;transform:translate3d(0,.08em,0) scale(.98)}70%{transform:translate3d(0,-.05em,0) scale(1.01)}85%{transform:translate3d(0,.015em,0)}100%{opacity:1;transform:none}}
/* Kopf am Handy: Logo fest, Status darf zweizeilig umbrechen, nichts läuft aus dem Bild */
@media (max-width:860px){
  .marke{flex:none}
  .marke img{width:3rem;height:3rem}
  .offen:not([hidden]){flex:1 1 auto;min-width:0;white-space:normal;font-size:.75rem;line-height:1.15;margin-left:.5rem;margin-right:.4rem}
  .kopf__anfrage{flex:none;padding:.45rem .8rem;font-size:.75rem;letter-spacing:.05em;margin-right:.35rem}
  .sm-toggle{flex:none}
}
/* Kontakt wieder als Plakat mit Holz drumherum (Ansage 20.10.2026): links dunkle Tafel mit Text und Knöpfen, rechts die Karte; darunter das Adressband über die ganze Breite */
.plakat__foto--karte::after{display:none}
.plakat__foto--karte img{object-fit:cover}
@media (min-width:900px){
  .kontakt-sektion .plakat{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;min-height:clamp(22rem,17rem + 14vw,28rem)}
  .kontakt-sektion .plakat__in{grid-column:1;grid-row:1;width:auto;background:#22160D;display:flex;flex-direction:column;justify-content:center}
  .kontakt-sektion .plakat__foto--karte{position:relative;inset:auto;grid-column:2;grid-row:1;z-index:0}
}
@media (max-width:899px){.kontakt-sektion .plakat__foto--karte{aspect-ratio:14/9}.kontakt-sektion .plakat__foto--karte::after{display:none}}
.kontakt-sektion .plakat__in h2{font-size:clamp(2.25rem,1.6rem + 2.6vw,3.6rem);margin:0}
.kontakt-knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.kontakt-knoepfe .knopf--rahmen{color:var(--papier);border-color:rgba(247,241,230,.6)}
.kontakt-knoepfe .knopf--rahmen:hover{background:rgba(247,241,230,.12)}
@media (max-width:560px){.kontakt-knoepfe .knopf{flex:1 1 100%}}
.kontakt-sektion{padding-bottom:0}
.kontakt-band{margin-top:clamp(2rem,1.25rem + 3vw,3.5rem);background:linear-gradient(rgba(58,40,24,.9),rgba(43,29,20,.94)),url(../img/holzwand.webp) center/420px auto;border-top:1px solid rgba(226,192,141,.35);position:relative}
.kontakt-band__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2rem;padding-block:clamp(1.25rem,1rem + 1vw,1.75rem)}
.kontakt-band p{margin:0;display:flex;flex-direction:column;gap:.2rem;color:var(--papier)}
.kontakt-band .lbl{font-size:var(--t-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--laerche)}
.kontakt-band a{color:var(--papier);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:760px){.kontakt-band__in{grid-template-columns:1fr;gap:.85rem}}
.offen [data-offen-text]{display:flex;flex-direction:column;line-height:1.15}
.offen b{font-weight:600}
.offen small{font-size:.6875rem;font-weight:500;opacity:.9}
.offen b,.offen small{white-space:nowrap}
/* Wasserzeichen Über uns ohne sichtbare Kante: Ränder weich ausblenden, Grund bleibt einfarbig (Ansage 20.10.2026) */
#ueber.wz::before{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 72%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 72%)}
/* Ausgeblendetes ist auch unsichtbar (nicht nur durchsichtig), für Screenreader und Kontrastmessung */
html.kopf-knopf-weg .kopf__anfrage,html.kopf-knopf-weg .nav__anfrage{visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.ki-label.ki-label--weg{visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
/* Wartezustand im Startbereich echt unsichtbar (auch für die Kontrastmessung), Notfall nach 16 s zeigt alles */
@media (prefers-reduced-motion:no-preference){
  html.js .vhero:not(.ist-fertig) .vhero__text>:not(h1){visibility:hidden}
  .vhero.ist-fertig .vhero__text>*{visibility:visible}
}
@keyframes vhero-notfall{to{opacity:1;transform:none;visibility:visible}}

/* Freie Formen (Roema-164, Ansage 09.10.2026): schräg angeschnittene Bildformen statt Rechtecke, nur Form, keine Bewegung */
.kat__bild{border-radius:0;clip-path:polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%)}
.laufband img{border-radius:0;clip-path:polygon(1.1rem 0,100% 0,calc(100% - 1.1rem) 100%,0 100%)}

/* Knopf "Alle Leistungen entdecken": Logo links, der Holzstamm läuft nach rechts weiter, wackelt alle 5 s (nur transform) */
.knopf-stamm{display:inline-flex;align-items:center;gap:1rem;min-height:3.75rem;padding:.4rem 2.2rem .4rem .4rem;border-radius:6px;color:var(--papier);text-decoration:none;border:1px solid rgba(226,192,141,.55);background:linear-gradient(rgba(72,55,34,.7),rgba(52,38,22,.82)),url(../img/holzwand.webp) center/320px auto;text-shadow:0 1px 2px rgba(0,0,0,.55);box-shadow:var(--schatten);transform-origin:center}
.knopf-stamm__logo{display:grid;place-items:center;flex:none;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--papier)}
.knopf-stamm__logo img{width:2.6rem;height:auto;display:block}
.knopf-stamm__text{font:600 1.1875rem/1.1 "Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.knopf-stamm:hover{border-color:rgba(226,192,141,.9)}
.knopf-stamm:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.knopf-stamm{animation:stamm-wackeln 5s var(--ease) infinite}}
@keyframes stamm-wackeln{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-2.2deg)}94%{transform:rotate(2deg)}97%{transform:rotate(-1deg)}}
.mehr-hinweis--link{min-height:2.75rem;display:inline-flex;align-items:center}

/* Startseite Leistungen (Ansage 21.10.2026): Titel und Text groß über dem Bild, Bild niedrig im Querformat */
#leistungen .station{grid-template-columns:1fr;row-gap:1.25rem;align-items:start}
#leistungen .station .station__text,#leistungen .station:nth-child(even) .station__text{grid-column:1;grid-row:1}
#leistungen .station .station__bild,#leistungen .station:nth-child(even) .station__bild{grid-column:1;grid-row:2}
#leistungen .station__bild.vn{aspect-ratio:4/3}
@media (min-width:700px){#leistungen .station__bild.vn{aspect-ratio:16/9}}
#leistungen .station__text .kicker{display:block}
#leistungen .station__text h3{font-size:clamp(2rem,1.2rem + 3.2vw,3.75rem);line-height:1.02;margin-bottom:.6rem}
#leistungen .station__text p{font-size:clamp(1.0625rem,.95rem + .5vw,1.3125rem);line-height:1.45;max-width:46ch}
@media (min-width:900px){#leistungen .station__bild.vn{aspect-ratio:2.4/1}}

/* Leistungen Startseite (Ansage 21.10.2026): nur "Leistungen" groß, Bilder in voller Schärfe und höher, Knopf auf dem Bild */
#leistungen .kopfzeile-sektion h2{font-size:clamp(3.5rem,2rem + 7vw,8rem);line-height:.95}
#leistungen .station__bild.vn,#leistungen .station__bild.vn{aspect-ratio:4/3}
@media (min-width:900px){#leistungen .station__bild.vn{aspect-ratio:3/2;max-width:1100px}}
.knopf-stamm--bild{position:absolute;left:1rem;bottom:1rem;z-index:4;animation-name:stamm-wackeln}
@media (max-width:520px){.knopf-stamm--bild{left:.6rem;bottom:.6rem;min-height:3rem;padding-right:1.1rem;gap:.6rem}.knopf-stamm--bild .knopf-stamm__logo{width:2.5rem;height:2.5rem}.knopf-stamm--bild .knopf-stamm__logo img{width:2rem}.knopf-stamm--bild .knopf-stamm__text{font-size:1rem;letter-spacing:.05em}}

/* Ansage 21.10.2026: Kontakt mit Bild-Block über der Karte, Footer links Social, rechts Rechtliches, Knöpfe ruhiger */
.nav__anfrage,.kopf__anfrage{white-space:nowrap;background:#3a2a1a;border:1px solid rgba(226,192,141,.6);border-radius:6px;text-shadow:none;box-shadow:none;padding:.6rem 1.25rem;min-height:2.75rem;font-size:.9375rem;letter-spacing:.1em}
.nav__anfrage:hover,.kopf__anfrage:hover{background:#4a3722}
@media (max-width:800px){.vhero h1{font-size:clamp(2.6rem,11.7vw,3.7rem)}}
.knopf-stamm{min-height:3rem;padding:.3rem 1.4rem .3rem .3rem;gap:.75rem}
.knopf-stamm__logo{width:2.4rem;height:2.4rem;padding:0;overflow:hidden;background:var(--papier)}
.knopf-stamm__logo img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.knopf-stamm__text{font-size:1.0625rem}
.knopf-stamm--bild .knopf-stamm__logo{width:2.4rem;height:2.4rem}
@media (max-width:520px){.knopf-stamm--bild .knopf-stamm__logo img{width:100%}.knopf-stamm--bild{min-height:2.75rem}.knopf-stamm--bild .knopf-stamm__logo{width:2.2rem;height:2.2rem}}
@keyframes stamm-wackeln{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-1.2deg)}96%{transform:rotate(1deg)}}
.kontakt-sektion .plakat{grid-template-columns:minmax(0,1fr);min-height:0}
.kontakt-sektion .plakat__in{position:relative;isolation:isolate;grid-column:1;grid-row:1;width:auto;background:#22160D;padding:clamp(1.5rem,1rem + 2.4vw,3rem)}
.plakat__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.plakat__bg img{width:100%;height:100%;object-fit:cover}
.plakat__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,15,8,.86) 0,rgba(25,15,8,.7) 55%,rgba(25,15,8,.45) 100%)}
.kontakt-sektion .plakat__foto--karte{position:relative;inset:auto;grid-column:1;grid-row:2;z-index:0;aspect-ratio:16/7}
@media (max-width:899px){.kontakt-sektion .plakat .plakat__in{padding-top:clamp(1.5rem,1rem + 2.4vw,3rem)}.kontakt-sektion .plakat__foto--karte{aspect-ratio:14/9}}
.kontakt-daten{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem}
.kontakt-daten li{display:flex;flex-direction:column;gap:.1rem;color:var(--papier)}
.kontakt-daten .lbl{font-size:var(--t-klein);letter-spacing:.14em;text-transform:uppercase;color:var(--laerche)}
.kontakt-daten a{color:var(--papier);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.fuss__links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.fuss__links .fuss__ig{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem}
.fuss__rechts{display:flex;flex-direction:column;gap:.15rem;text-align:right}
@media (max-width:799px){.fuss__rechts{text-align:left}}
.kontakt-knoepfe .knopf--holz{background:#3a2a1a;border-radius:6px;text-shadow:none;box-shadow:none;letter-spacing:.1em}
.kontakt-knoepfe .knopf--holz:hover{background:#4a3722}
@media (max-width:520px){.nav__anfrage,.kopf__anfrage{padding:.5rem .75rem;font-size:.75rem;letter-spacing:.05em;flex:none}}

/* Logo im Knopf auf dem Vorher-Nachher-Bild: nicht von .vn img erfassen lassen */
.vn .knopf-stamm img{position:static;inset:auto;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;clip-path:none}

@media (max-width:520px){.nav__anfrage,.kopf__anfrage{padding:.45rem .55rem;letter-spacing:.02em;font-size:.6875rem}.offen:not([hidden]){margin-left:.3rem;margin-right:.3rem}}

/* Ansage 21.10.2026: Knöpfe am Handy kleiner, alle 8 s ein minimales Wackeln */
@keyframes knopf-wackeln-8{0%,94%,100%{transform:rotate(0)}95.5%{transform:rotate(-1deg)}97%{transform:rotate(.8deg)}98.5%{transform:rotate(-.4deg)}}
@media (prefers-reduced-motion:no-preference){
  .knopf-stamm,.knopf-stamm--bild{animation:knopf-wackeln-8 8s var(--ease) infinite}
  .vhero.ist-fertig .knopfreihe .knopf:not(.knopf--tel){animation:knopf-wackeln-8 8s var(--ease) 2s infinite}
}
@media (max-width:600px){
  .vhero .knopf,.vhero .knopf.knopf--holz{min-height:2.9rem;padding:.65rem 1.6rem;font-size:.9375rem}
  .knopf-stamm--bild{min-height:2.75rem;padding:.25rem 1rem .25rem .25rem;gap:.5rem}
  .knopf-stamm--bild .knopf-stamm__logo{width:2.1rem;height:2.1rem}
  .knopf-stamm--bild .knopf-stamm__text{font-size:.875rem;letter-spacing:.04em}
}

/* Knopf Alle Leistungen: rechts ebenfalls rund, Logo ganz sichtbar und größer */
.knopf-stamm,.knopf-stamm--bild{border-radius:6px;padding-right:1.6rem}
.knopf-stamm__logo,.knopf-stamm--bild .knopf-stamm__logo{width:2.9rem;height:2.9rem;padding:2px;background:var(--papier)}
.knopf-stamm__logo img,.vn .knopf-stamm img{object-fit:contain;transform:none;border-radius:50%}
@media (max-width:600px){.knopf-stamm--bild .knopf-stamm__logo{width:2.5rem;height:2.5rem}.knopf-stamm--bild{padding-right:1.1rem}}
.knopf-stamm__logo,.knopf-stamm--bild .knopf-stamm__logo{width:3.1rem;height:3.1rem;padding:7px}
.knopf-stamm__logo img,.vn .knopf-stamm img{border-radius:0}
@media (max-width:600px){.knopf-stamm--bild .knopf-stamm__logo{width:2.75rem;height:2.75rem;padding:6px}}

/* Karte mit Rückfrage zu Google Maps (Ansage 21.10.2026) */
.plakat__foto--karte{cursor:pointer}
.karte-knopf{position:absolute;inset:0;z-index:2;width:100%;height:100%;background:transparent;border:0;padding:0;cursor:pointer}
.karte-knopf:focus-visible{outline:3px solid var(--kupfer);outline-offset:-4px}
.karte-frage{width:min(92vw,26rem);padding:1.5rem 1.5rem 1.25rem;border:1px solid var(--linie);border-radius:6px;background:var(--papier);color:var(--tinte);box-shadow:var(--schatten)}
.karte-frage::backdrop{background:rgba(25,15,8,.55)}
.karte-frage__zu{position:absolute;top:.4rem;right:.4rem;width:2.75rem;height:2.75rem;border:0;background:transparent;color:var(--tinte);font:400 1.75rem/1 "Barlow",sans-serif;cursor:pointer;border-radius:6px}
.karte-frage__zu:focus-visible{outline:3px solid var(--kupfer)}
.karte-frage__titel{font:600 1.5rem/1.15 "Barlow Condensed",sans-serif;margin:0 2.5rem .5rem 0;color:var(--balken)}
.karte-frage__text{margin:0 0 1.25rem;font-size:.9375rem;line-height:1.45;color:var(--tinte)}
.karte-frage__knoepfe{display:flex;flex-wrap:wrap;gap:.6rem}
.karte-frage__knoepfe .knopf{min-height:2.75rem}
.karte-frage .knopf--rahmen{color:var(--tinte);border-color:var(--linie)}
@media (prefers-reduced-motion:no-preference){.karte-frage[open]{animation:karte-frage-ein .35s var(--ease)}}
@keyframes karte-frage-ein{from{opacity:0;transform:translate3d(0,10px,0) scale(.98)}to{opacity:1;transform:none}}



/* Zählerleiste bei sehr schmalen Handys (320 px): Zahl nicht anschneiden, Beschriftung in einer Zeile */
@media (max-width:359px){
  .team-leiste>div{padding:.5rem .6rem;gap:.35rem}
  .team-leiste dd{flex:none}
  .team-leiste dt{letter-spacing:.06em;white-space:nowrap}
}


/* Hero-Name (23.10.2026): die Wörter stampfen einzeln beim Auslöser (Wood, 0,3 s später Construction, 0,3 s später Krohn), nicht erst mit ist-fertig.
   Die Regel mit :not(.ist-fertig) hatte höhere Spezifität und hielt sie bis dahin auf Deckkraft 0. */
@media (prefers-reduced-motion:no-preference){
  html.js .vhero:not(.ist-fertig) .vhero__wort.da{animation:stampf .55s cubic-bezier(.3,1.6,.5,1) forwards}
}

/* Hero-Name früh lesbar: der dunkle Schleier kommt mit dem Namen (ist-name), nicht erst mit ist-fertig; weicher Schatten unter der H1 */
@media (prefers-reduced-motion:no-preference){
  html.js .vhero.ist-name:not(.ist-fertig) .vhero__schleier{opacity:1}
}
.vhero h1{text-shadow:0 2px 22px rgba(20,12,6,.55)}

/* Bilderfahrt vor Über uns (Ansage 23.10.2026): vier Bilderreihen ohne Überschrift, Sticky, drei neue Bilder rücken nach, Zoom ins Teamfoto,
   das Foto schiebt sich nach oben (Handy rund 40 Prozent), darunter baut sich Über uns auf. Ohne Skript und bei reduzierter Bewegung:
   Bilderreihen, darunter Foto und Text untereinander. Die Fahrt zeichnet main.js (Klasse bf--an), nur transform, opacity und clip-path. */
.bf{position:relative;background:var(--span)}
.bf__band{overflow:hidden;padding-block:clamp(1.5rem,1rem + 2vw,3rem)}
.bf__reihen{display:grid;gap:.75rem;justify-items:start}
.bf__spur{display:flex;gap:.75rem;width:max-content}
.bf__spur:nth-child(even){margin-left:-6rem}
.bf__bild{margin:0;flex:none;width:clamp(11rem,7rem + 13vw,19rem);aspect-ratio:3/2;overflow:hidden;border-radius:6px;background:var(--papier)}
.bf__bild img{width:100%;height:100%;object-fit:cover}
.bf__bild--team img{object-position:50% 35%}
.bf__ueber{background:var(--papier)}
.bf__foto{position:relative;margin:0;overflow:hidden}
.bf__foto img{width:100%;height:clamp(16rem,42svh,36rem);object-fit:cover;object-position:50% 35%}
.bf__leiste{position:absolute;left:clamp(1rem,.5rem + 2vw,2rem);bottom:clamp(.75rem,.5rem + 1vw,1.5rem);border-radius:6px;box-shadow:var(--schatten)}
.bf__text{padding-block:clamp(1.5rem,1rem + 2.5vw,3.5rem)}
.bf__kopf .kicker{margin-bottom:.5rem}
.bf__kopf h2{font-size:clamp(2rem,1.3rem + 3vw,3.75rem);line-height:1.02}
.bf__absatz p{color:var(--leise);line-height:1.55}
.bf__absatz p:last-child{margin-bottom:0}
.bf__zoom{display:none}
@media (min-width:900px){
  .bf__text{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,1rem + 4vw,6rem);align-items:start}
  .bf__absatz p{font-size:clamp(1.0625rem,.95rem + .3vw,1.25rem)}
}
@media (max-width:599px){
  .bf__lang{display:none}
  .bf__kopf h2{font-size:clamp(1.75rem,1.2rem + 3vw,2.25rem)}
  .bf__absatz p{font-size:.975rem;line-height:1.5;margin-bottom:.6rem}
  .bf__text{padding-block:1.1rem}
}
/* Fahrt */
.bf.bf--an{height:470svh;display:flex;flex-direction:column;justify-content:flex-end}
/* Die Bühne klebt von unten: gleiche Fahrt, aber im Dokument steht Über uns am Ende des Abschnitts (dort, wo man es fertig sieht);
   so treffen Sprungmarken, Vorlesen und Messwerkzeuge den fertigen Zustand und nicht den Anfang der Fahrt. */
.bf--an .bf__buehne{position:sticky;bottom:0;flex:none;height:100svh;overflow:hidden;background:var(--span)}
.bf--an .bf__band{position:absolute;inset:0;padding:0;overflow:visible;display:grid;align-content:center}
.bf--an .bf__reihen{width:100%;gap:var(--bf-luecke,14px);transform:rotate(-4deg);will-change:transform,opacity}
.bf--an .bf__spur{margin-left:0;gap:var(--bf-luecke,14px);will-change:transform}
.bf--an .bf__bild{width:auto;height:calc(100svh / 4.5)}
.bf--an .bf__ueber{position:absolute;inset:0;background:transparent;pointer-events:none}
.bf--an .bf__ueber.ist-grund{background:var(--papier)}
.bf--an .bf__ueber.ist-da{pointer-events:auto}
.bf--an .bf__foto{position:absolute;left:0;top:0;width:100%;height:var(--bf-band,42svh);opacity:0}
.bf--an .bf__foto img{height:100%}
.bf--an .bf__leiste{opacity:0;will-change:opacity}
.bf--an .bf__text{position:absolute;left:0;right:0;top:var(--bf-band,42svh);bottom:0;margin-inline:auto;padding-block:clamp(.9rem,3svh,2.75rem) .75rem;align-content:start}
.bf--an [data-bf-teil]{opacity:0;transform:translate3d(0,36px,0);will-change:opacity,transform}
.bf--an .bf__zoom{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:3;transform-origin:50% 50%;opacity:0;pointer-events:none;will-change:transform,clip-path,opacity}
.bf--an .bf__zoom img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;will-change:transform}
@media (max-width:899px){.bf.bf--an{height:420svh}.bf--an .bf__bild{height:calc(100svh / 4.8)}}
@media (max-width:599px){.bf--an .bf__absatz p{font-size:clamp(.9rem,2.25svh,1rem)}.bf--an .bf__kopf h2{font-size:clamp(1.6rem,4.6svh,2.25rem)}.bf--an .bf__kopf .kicker{margin-bottom:.25rem}}

/* Leistungen: Abschnitt, Titel und gemeinsame Knöpfe (Kategorie farbig, weiß „Alle Leistungen entdecken“). Die Einträge stehen
   seit 24.10.2026 spät als drei Vorher-Nachher-Schieber im Wechsel (Block .schieb weiter unten). */
.leist{position:relative;background:var(--papier);padding-top:var(--luft)}
.leist__titel{font-size:clamp(3.5rem,2rem + 7vw,8rem);line-height:.95;margin:0 0 clamp(1.5rem,1rem + 2vw,3rem)}
.arch__knoepfe{display:flex;flex-wrap:wrap;gap:.6rem}
.arch__knopf{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.65rem 1.3rem;border-radius:6px;border:1px solid transparent;font:500 .875rem/1.2 "Barlow",sans-serif;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--tinte);text-align:center;transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.arch__knopf--kat{background:var(--kat,#D9B48A);border-color:color-mix(in oklab,var(--kat,#D9B48A) 70%,#000 12%)}
.arch__knopf--kat:hover{background:color-mix(in oklab,var(--kat,#D9B48A) 86%,#000)}
.arch__knopf--alle{background:#fff;border-color:color-mix(in oklab,var(--tinte) 18%,transparent)}
.arch__knopf--alle:hover{border-color:var(--balken)}
.arch__knopf:active{transform:translate3d(0,1px,0)}
@media (max-width:599px){.arch__knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.arch__knopf{padding:.55rem .6rem;font-size:.8125rem;letter-spacing:.03em;line-height:1.15}}
/* große Handys: genug Höhe für den ganzen Über-uns-Text (die Fahrt verkleinert das Foto, falls er doch nicht passt) */
@media (max-width:599px) and (min-height:760px){.bf__lang{display:inline}.bf--an .bf__absatz p{font-size:1rem}}
/* Leistungen nach den Fremd-Prüfern: Knöpfe und Text am Rechner größer, Farbwechsel des Hintergrunds deutlicher */
.vn__marke{font-size:.8125rem}
.bf__leiste dt{white-space:nowrap}
@media (max-width:599px){.bf__leiste dt{letter-spacing:.08em}.bf__leiste>div{padding:.45rem .8rem}}
@media (max-width:374px){.bf__leiste{left:.5rem}.bf__leiste>div{padding:.4rem .55rem;gap:.3rem}.bf__leiste dt{letter-spacing:.04em;font-size:.75rem}.bf__leiste dd{font-size:1.25rem}}
/* Kopfzeile sehr schmaler Handys (320 bis 374 px, gemessen 24.10.2026: Öffnungsstatus und Anfrage-Knopf überlappten):
   Logo etwas kleiner, Status darf schrumpfen und schneidet nie in den Knopf, die zweite Statuszeile entfällt unter 360 px */
@media (max-width:374px){
  .kopf__in{gap:.4rem}
  .marke img{width:2.6rem;height:2.6rem}
  .offen:not([hidden]){overflow:hidden;margin-left:.25rem;margin-right:.25rem}
  .offen b,.offen small{overflow:hidden;text-overflow:ellipsis}
  .kopf__anfrage{margin-right:.25rem}
}
@media (max-width:359px){.offen small{display:none}.kopf__in{gap:.25rem}.marke img{width:2.4rem;height:2.4rem}.kopf__anfrage{padding:.4rem .5rem;letter-spacing:.01em;font-size:.6875rem}}
/* Leistungen: Schriftfarbe der Kategorie-Knöpfe */
.leist{background:var(--span)}
/* wie die übrigen Abschnitte halbtransparent, damit die Farbschicht der Seite gleichmäßig durchscheint und unten keine Kante entsteht */
html.js .leist{background:color-mix(in oklab,var(--span) 50%,transparent)}
.arch__knopf--kat{color:#21190F}
.bf__grund{display:none}
.bf--an .bf__grund{display:block;position:absolute;inset:0;background:var(--papier);opacity:0;pointer-events:none;will-change:opacity}
/* Über uns am Rechner (Ansage 24.10.2026 abends): Foto links und kleiner, Text rechts daneben; Zoom zielt genau auf dieses Foto */
@media (min-width:900px){
  .bf{--bf-fw:min(40vw,34rem);--bf-fh:min(64svh,38rem);--bf-luft:clamp(2.5rem,1rem + 4vw,5.5rem)}
  .bf__foto img{object-position:50% 32%}
  .bf:not(.bf--an) .bf__ueber{display:grid;grid-template-columns:var(--bf-fw) 1fr;gap:var(--bf-luft);align-items:center;padding:clamp(3rem,2rem + 3vw,5rem) max(1rem,(100% - var(--maxw)) / 2)}
  .bf:not(.bf--an) .bf__foto{border-radius:var(--r)}
  .bf:not(.bf--an) .bf__foto img{height:var(--bf-fh)}
  .bf:not(.bf--an) .bf__text{display:block;width:auto;padding:0;margin:0}
  .bf--an .bf__foto{left:max(1rem,(100% - var(--maxw)) / 2);top:calc(var(--kopf-h,4.5rem) + (100svh - var(--kopf-h,4.5rem) - var(--bf-fh)) / 2);width:var(--bf-fw);height:var(--bf-fh);border-radius:var(--r)}
  .bf--an .bf__text{top:var(--kopf-h,4.5rem);bottom:0;padding-block:0;display:grid;grid-template-columns:var(--bf-fw) 1fr;column-gap:var(--bf-luft);align-content:center}
  .bf--an .bf__kopf,.bf--an .bf__absatz{grid-column:2}
  .bf--an .bf__kopf{margin-bottom:1.25rem}
}
@media (min-width:900px){
  .leist{padding-top:clamp(3rem,2rem + 3vw,5rem)}
  .leist__titel{font-size:clamp(2.75rem,1.6rem + 3.2vw,4.5rem);margin:0}
}
/* Leistungen (Ansage 24.10.2026 spät): drei Leistungen mit Vorher-Nachher-Schieber im Wechsel, Foto rechts, links, rechts.
   Der Masken-Effekt ist wieder entfernt (Code im Verlauf bis 40a659060). */
.leist__kopf{margin-bottom:clamp(2rem,1.2rem + 2.5vw,4rem)}
.schieb{display:grid;gap:clamp(3.5rem,2rem + 5vw,7rem);padding-bottom:var(--luft)}
.schieb__eintrag{display:grid;gap:1.25rem;align-items:center}
.schieb__text h3{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem);line-height:1.02;margin:0 0 .7rem}
.schieb__text p{font-size:clamp(1.0625rem,.98rem + .35vw,1.25rem);line-height:1.45;color:var(--leise);max-width:36ch;margin-bottom:1.4rem}
.schieb__bild{aspect-ratio:4/3}
.schieb__eintrag:nth-child(1) .arch__knopf--kat{--kat:#C99A6B}
.schieb__eintrag:nth-child(2) .arch__knopf--kat{--kat:#D9AE7C}
.schieb__eintrag:nth-child(3) .arch__knopf--kat{--kat:#C98F7B}
@media (min-width:900px){
  .schieb__eintrag{grid-template-columns:5fr 7fr;gap:clamp(2rem,1rem + 4vw,5rem)}
  .schieb__eintrag:nth-child(even){grid-template-columns:7fr 5fr}
  .schieb__eintrag:nth-child(even) .schieb__text{order:2}
  .schieb__bild{aspect-ratio:3/2}
}

/* ===== Ansage 24.10.2026 abends ===== */
/* Kopfzeile: nur das Logo, größer; die Leiste nutzt die ganze Breite (Logo ganz links, Menü ganz rechts) */
.kopf .kopf__in{width:calc(100% - 2 * clamp(1rem, 2.2vw, 2.25rem));max-width:none}
@media (min-width:375px){.marke img{width:3.6rem;height:3.6rem}}
@media (min-width:861px){:root{--kopf:5.25rem}.marke img{width:4.4rem;height:4.4rem}}
/* Neu abspielen: kleiner runder Knopf unten rechts, erscheint erst, wenn das Video einmal durchgelaufen ist */
.nochmal{position:absolute;right:clamp(.75rem, .5rem + 1vw, 1.25rem);bottom:clamp(.75rem, .5rem + 1vw, 1.25rem);z-index:3;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgba(247,240,228,.35);border-radius:50%;background:rgba(32,20,11,.5);color:#F7F0E4;cursor:pointer;opacity:.8;transition:opacity .25s var(--ease),background-color .25s var(--ease)}
.nochmal[hidden]{display:none}
.nochmal:hover{opacity:1;background:rgba(32,20,11,.72)}
.nochmal:focus-visible{opacity:1;outline:3px solid var(--laerche, #E2C08D);outline-offset:2px}
.nochmal.ist-neu{animation:nochmal-ein .6s var(--ease) both}
@keyframes nochmal-ein{from{opacity:0;transform:scale(.85)}to{opacity:.8;transform:none}}
@media (prefers-reduced-motion:reduce){.nochmal{display:none}}
/* Unterleistungen: kein Wasserzeichen; Fotos über die ganze Breite, immer knapp kleiner als der Bildschirm; Überschrift mittig;
   unter den Fotos keine Leiste mehr, nur ein kleiner Pause-Knopf im Bild (Bildwechsel muss anhaltbar bleiben, BFSG) */
.lstg .wrap.lstg__in{width:calc(100% - var(--rand2));max-width:none}
.lstg__in>*:not(.lstg__galerie){max-width:56rem;margin-left:auto;margin-right:auto}
.lstg__titel{text-align:center}
.lstg__galerie{position:relative;container-type:inline-size}
.lstg__galerie .kat-fotos img{aspect-ratio:auto;height:75cqw;height:clamp(56.25cqw, calc(100svh - var(--kopf) - 5rem), 75cqw)}
html:not(.js) .lstg__galerie .kat-fotos img{height:auto;aspect-ratio:4/3}
.kat-pause--bild{position:absolute;right:clamp(.75rem, .5rem + 1vw, 1.25rem);bottom:clamp(.75rem, .5rem + 1vw, 1.25rem);z-index:2;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgba(247,240,228,.35);border-radius:50%;background:rgba(32,20,11,.5);color:#F7F0E4;cursor:pointer;opacity:.8;transition:opacity .25s var(--ease),background-color .25s var(--ease)}
.kat-pause--bild:hover{opacity:1;background:rgba(32,20,11,.72)}
.kat-pause--bild:focus-visible{opacity:1;outline:3px solid var(--kupfer);outline-offset:2px}
.kat-pause--bild[hidden]{display:none}
html:not(.js) .kat-pause--bild{display:none}
/* Handy-Kopfzeile: Logo etwas größer, Öffnungsstatus kleiner, Höhe bleibt 4,5 rem */
@media (min-width:375px) and (max-width:860px){.marke img{width:4rem;height:4rem}}
@media (max-width:860px){.offen,.offen:not([hidden]){font-size:.6875rem;gap:.35rem}.offen small{font-size:.625rem}.offen i{width:.45rem;height:.45rem}}
/* Über uns am Handy: Foto beginnt unter der Kopfzeile, oben ist immer das Firmenbanner zu sehen */
@media (max-width:899px){
  .bf__foto img{object-position:50% 0}
  .bf--an .bf__foto{top:var(--kopf-h,4.5rem)}
  .bf--an .bf__text{top:calc(var(--bf-band,42svh) + var(--kopf-h,4.5rem))}
}
/* Farbschicht wechselt den Ton weich zwischen den Abschnitten */
.farbton{transition:background-color .9s ease}
@media (prefers-reduced-motion:reduce){.farbton{transition:none}}
/* Menü: kleinerer Anfrage-Knopf, Unterleistungen zweispaltig und enger, damit das ganze Menü auf einen Bildschirm passt */
.sm-panel{gap:.9rem;padding:1rem 1.5rem 1.25rem}
.sm-list{gap:.15rem}
.sm-item{font-size:clamp(1.75rem,1.2rem + 2.4vw,2.25rem)}
.sm-sub{grid-template-columns:1fr 1fr;column-gap:1rem;margin:.1rem 0 .35rem}
.sm-sub a{font-size:.9375rem;line-height:1.2;padding-block:.2rem}
.sm-cta{align-self:flex-start;min-height:2.75rem;padding:.5rem 1.4rem;font-size:.875rem}
.sm-sozial{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
/* Anfrage: Wahl zwischen E-Mail und WhatsApp */
.weg-wahl__optionen{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.weg-wahl__option{position:relative;display:flex}
.weg-wahl__option input{position:absolute;opacity:0;width:1px;height:1px}
.weg-wahl__option span{flex:1;display:flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.5rem .75rem;border:1px solid color-mix(in oklab,var(--laerche) 55%,transparent);border-radius:6px;color:var(--papier);font-weight:600;letter-spacing:.03em;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.weg-wahl__option input:checked+span{background:var(--laerche);border-color:var(--laerche);color:var(--tief)}
.weg-wahl__option input:focus-visible+span{outline:3px solid var(--laerche);outline-offset:2px}
html:not(.js) .weg-wahl{display:none}
.erfolg [data-wa-nochmal]{margin-top:1.25rem}
@media (max-height:680px){.sm-panel{gap:.55rem;padding-top:.75rem;padding-bottom:1rem}.sm-item{min-height:2.5rem;font-size:1.6rem}}
/* Hero-Name (Ansage 24.10.2026 abends): Wörter kommen weiter von oben, aber weich und ohne Nachfedern */
@media (prefers-reduced-motion:no-preference){
  .vhero__wort.da,html.js .vhero:not(.ist-fertig) .vhero__wort.da{animation:wort-ein .75s cubic-bezier(.22,1,.36,1) forwards}
}
@keyframes wort-ein{from{opacity:0;transform:translate3d(0,-.55em,0) scale(1.06)}to{opacity:1;transform:none}}
/* Kopfzeile weicht beim Runterscrollen aus und kommt nach dem Scrollen zurück (Ansage 24.10.2026) */
.kopf{transition:transform .35s var(--ease),opacity .35s var(--ease)}
html.kopf-weg .kopf{transform:translate3d(0,-100%,0);opacity:0}   /* 26.10.2026: blendet weich ein und aus */
@media (prefers-reduced-motion:reduce){.kopf{transition:none}}
/* Nach dem Website-Panel 24.10.2026 */
/* (1) Handy bis 420 px: Öffnungshinweis bekommt genug Platz neben dem Anfrage-Knopf (vorher „Montag ab 8 Uh“ abgeschnitten) */
@media (min-width:375px) and (max-width:420px){.kopf__in{gap:.5rem}.marke img{width:3.75rem;height:3.75rem}}
/* Tablet: Öffnungshinweis mindestens 12 px */
@media (min-width:521px) and (max-width:860px){.offen,.offen:not([hidden]),.offen small{font-size:.75rem}}
/* (2) Telefon und Anschrift in der Fußzeile jeder Seite */
.fuss__kontakt{margin:0}
.fuss__kontakt a{display:inline-flex;align-items:center;min-height:2.75rem;color:inherit;text-decoration:underline;text-underline-offset:4px}
/* (3) Karriere auf der Startseite: Abdunklung liegt über dem Video (vorher darunter), Satz größer und hell */
.kar-kurz.holz--saege>.bg-video{z-index:-2}
.kar-kurz__klein{font-size:1rem;color:var(--papier)}
/* Ansage 24.10.2026 nachts: Kopfzeile ganz deckend (vorher schimmerten Texte und Bilder durch) */
.kopf,body .kopf{background:var(--papier)}
/* Unterleistungen: Galerie kleiner (Breite wie der Text, höchstens Bildschirm minus Kopf, Titel und Leiste), Pfeile links und rechts im Foto, darunter Zeitstrahl mit Zähler */
.lstg__galerie{max-width:56rem;margin-left:auto;margin-right:auto}
.lstg__galerie .kat-fotos img{height:56.25cqw;height:max(40cqw, min(56.25cqw, calc(100svh - var(--kopf) - 23rem)))}
@media (max-width:699px){.lstg__galerie .kat-fotos img{height:68cqw}}
.kat-pfeil{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0 0 .15rem;border:1px solid rgba(247,240,228,.35);border-radius:50%;background:rgba(32,20,11,.55);color:#F7F0E4;font:400 1.75rem/1 "Barlow",sans-serif;cursor:pointer;transform:translateY(-50%);transition:background-color .25s var(--ease)}
.kat-pfeil--l{left:clamp(.5rem, .25rem + 1vw, 1rem)}
.kat-pfeil--r{right:clamp(.5rem, .25rem + 1vw, 1rem)}
.kat-pfeil:hover{background:rgba(32,20,11,.78)}
.kat-pfeil:focus-visible{outline:3px solid var(--kupfer);outline-offset:2px}
.lstg__leiste{display:flex;align-items:center;gap:1rem;padding:.9rem 0 0}
html:not(.js) .kat-pfeil,html:not(.js) .lstg__leiste{display:none}

/* Ansage 24.10.2026: Leiste mit „6 von 10 ‹ ›“ bleibt beim Scrollen unter der Kopfzeile stehen (statt Etikett im Foto); weicht die Kopfzeile aus, rückt sie nach oben */
.lstg__kopf{position:sticky;top:var(--kopf);z-index:50;margin-left:calc(-1 * clamp(.5rem, 1vw, 1rem));margin-right:calc(-1 * clamp(.5rem, 1vw, 1rem));padding:.5rem clamp(.5rem, 1vw, 1rem);background:var(--papier);border-radius:0 0 6px 6px;transition:transform .35s var(--ease)}
html.kopf-weg .lstg__kopf{transform:translate3d(0,calc(-1 * var(--kopf)),0)}
@media (prefers-reduced-motion:reduce){.lstg__kopf{transition:none}}
.lstg{overflow:visible;overflow-x:clip}
.lstg__kopf{border-radius:0;box-shadow:0 0 0 100vmax var(--papier);clip-path:inset(0 -100vmax)}
.lstg__leiste[hidden]{display:none}
/* Ansage 24.10.2026 spät: Fotos besser zugeschnitten. Festes 3:2-Format statt flachem Streifen; auf niedrigen Bildschirmen wird die Galerie schmaler statt flacher. Hoch- und Quadratformate ganz zeigen, Rand mit unscharfer Kopie desselben Fotos gefüllt */
.lstg__in{--gal-b:min(52rem, max(20rem, calc((100svh - var(--kopf) - 17rem) * 1.5)))}
.lstg__galerie,.lstg__leiste{max-width:var(--gal-b)}
.lstg__galerie .kat-fotos img{height:auto;aspect-ratio:3/2}
.lstg__galerie .kat-fotos img.kat-hoch{object-fit:contain;background-position:center;background-size:cover;background-repeat:no-repeat}
.lstg__in>.lstg__leiste{max-width:var(--gal-b)}
.kat-pfeil[hidden]{display:none}
/* Prüfer-Lauf 24.10.2026 (20 Agenten), optische Fehler */
/* W04: Überschrift bricht nie mitten im Wort */
.lstg__titel{overflow-wrap:break-word;hyphens:manual}
/* W13/W14: Kopfleiste, Text, Vergleich und Knöpfe auf der Galeriebreite; Fließtext höchstens etwa 68 Zeichen */
.lstg__in>.lstg__text,.lstg__in>.vgl,.lstg__in>.lstg__knoepfe{max-width:max(var(--gal-b), min(42rem, 100%))}
.lstg__in>.lstg__kopf{max-width:calc(max(var(--gal-b), min(42rem, 100%)) + 2rem);padding-inline:1rem}
.kat-text p,.lstg__text p{max-width:42rem}
.recht p,.recht li{max-width:62ch;text-wrap:wrap}
/* W15: Leistungsübersicht */
.kat__teaser{-webkit-line-clamp:3}
.kat__text{align-self:start}
.ref-fuss .lead{text-align:center}
/* W20: Über uns */
@media (max-width:899px){.bf__kopf h2{margin-bottom:.75rem}}
@media (min-width:900px){.bf--an .bf__text{row-gap:0}}
.bf__absatz p{text-wrap:wrap}
/* W21: Kontakt mit Luft zur Fußzeile, Kartenquelle lesbar */
.kontakt-sektion{padding-bottom:clamp(2rem,1.25rem + 3.5vw,4.5rem)}
.plakat__foto--karte{position:relative}
.karte-quelle{position:absolute;left:.5rem;bottom:.5rem;z-index:3;padding:.15rem .45rem;border-radius:4px;background:rgba(247,241,230,.9);color:#3a2a1a;font-size:.6875rem;line-height:1.3;pointer-events:none}
.kontakt-daten li{margin:0}
.kontakt-daten a{display:inline-flex;align-items:center;min-height:2.75rem;margin-block:-.6rem}
.kontakt-knoepfe .knopf{border-radius:6px}
/* W22: Menü am Rechner rechtsbündig, Öffnungsstatus lesbar und ruhig */
@media (min-width:861px){.nav{margin-left:auto;position:relative}html.kopf-knopf-weg .nav__anfrage{position:absolute;right:0}}
.offen span{color:var(--tinte)}
@media (min-width:375px) and (max-width:860px){.offen,.offen:not([hidden]){font-size:.8125rem}.offen small{font-size:.75rem}}
/* W23: Fußzeile unten, Rechtsseiten ruhiger */
.seite{display:flex;flex-direction:column;min-height:100svh}
.seite>main{flex:1 0 auto}
.recht a{display:inline-block;padding-block:.8rem;margin-block:-.8rem}
.nobr{white-space:nowrap}
/* W24: Karriere */
.stelle-fest>h4:last-child{margin-bottom:1.5rem}
.band::before{background:linear-gradient(rgba(32,20,11,.5),rgba(32,20,11,.62))}
.band__text{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.band__text p{font-size:1rem}
.band__text h4{text-wrap:balance}
.stelle-liste li{text-wrap:pretty}
/* W25: eine Größe für Abschnittsüberschriften, Leistungs-h3 darunter; Firmenname in der Fußzeile abgesetzt */
#h-ueber,.leist__titel,#h-insta,#h-kar,#h-kon{font-size:clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem)}
.schieb h3{font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)}
.fuss__name{display:block;color:var(--papier);font-weight:600;margin-bottom:.25rem}
.insta-karte__avatar{padding:.75rem}
/* Startbild am Rechner (Ansage 25.10.): die Blumen unten sollen zu sehen sein, Vordach bleibt im Bild */
@media (min-width:801px){.vhero__bild,.vhero__video{object-position:50% 72%}}
@media (min-width:861px){.nav-drop .nav-sub{left:auto;right:0;margin:0}}
@media (max-width:699px){.lstg__in>.lstg__kopf{padding-inline:0;max-width:none}}
/* W08: Kachelbilder der Leistungsübersicht größer (96 px) */
@media (min-width:360px){.kat__kachel{grid-template-columns:6rem 1fr}.kat__bild{width:6rem;height:6rem}}
/* Nachtpaket 24./25.10.2026 (Gegenprüfung MAIN) */
@media (hover:none){.nur-maus{display:none}}
.band__text h4{min-height:2.3em;display:flex;align-items:flex-end;justify-content:center}
#wege{padding-bottom:0}
@media (max-width:699px){.ablauf__knoten{top:6px}}
.bf__leiste{position:static;border-radius:0;box-shadow:none}
.kat-text p{text-wrap:pretty}
.vhero .lead{text-wrap:balance}
.insta-karte{background:var(--papier);font-family:inherit;border-color:var(--linie)}
#leistungen .schieb{padding-bottom:clamp(2rem,1rem + 3vw,4rem)}
@media (max-width:374px){.offen,.offen:not([hidden]){font-size:.8125rem}.offen small{display:none}}
/* Entscheidung 24.10.2026 nachts (Empfehlung angenommen): Öffnungsstatus am Handy entfernt */
@media (max-width:860px){.kopf .offen,.kopf .offen:not([hidden]){display:none}}
@media (max-width:860px){.kopf__anfrage{margin-left:auto}}
/* Effekt A (Ansage 25.10.2026, Startseite): Holzstich-Wasserzeichen mit Parallaxe hinter den Leistungen, js/effekt-a.js */
.wz--parallax::before{top:8%;transform:translate3d(0,var(--wz-y,0px),0);opacity:.16;will-change:transform}
@media (min-width:900px){.wz--parallax::before{opacity:.17}}
/* Leistungsseiten (Ansage 25.10.2026): keine Vorher-Nachher mehr, Foto und Text nutzen die ganze Breite.
   Handy und Tablet untereinander, ab 1100 px Foto mit Zeitleiste links, Text und Anfrage rechts. */
.lstg__in>.lstg__seite{max-width:max(var(--gal-b), min(42rem, 100%));margin-left:auto;margin-right:auto}
.lstg__seite>.lstg__knoepfe{margin-top:clamp(1.75rem,1rem + 2vw,2.75rem)}
@media (min-width:1100px){
  .lstg .wrap.lstg__in{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(2rem,3.2vw,3.75rem);max-width:var(--maxw);margin-left:auto;margin-right:auto}
  .lstg__in>.lstg__kopf,.lstg__in>.lstg__titel{grid-column:1/-1}
  .lstg__in>.lstg__kopf{max-width:none;width:auto;justify-self:stretch;margin-left:calc(-1 * clamp(.5rem, 1vw, 1rem));margin-right:calc(-1 * clamp(.5rem, 1vw, 1rem))}
  .lstg__in>.lstg__titel{max-width:none;justify-self:start;margin:0 0 1.25rem;text-align:left}
  .lstg__in>.lstg__galerie{grid-column:1;grid-row:3;max-width:none;width:100%;margin:0}
  .lstg__in>.lstg__leiste{grid-column:1;grid-row:4;align-self:start;max-width:none;width:100%;margin:0}
  .lstg__in>.lstg__seite{grid-column:2;grid-row:3/5;align-self:start;max-width:none;margin:0}
  .lstg__seite>.lstg__text{margin-top:0}
  .lstg__seite .kat-text p{max-width:none}
  .lstg__seite>.lstg__knoepfe{margin-top:2rem}
}
/* Ansage 25.10.2026: Leiste „Leistungen“ mit Zähler und Pfeilen rechtsbündig direkt unter der Kopfzeile, Rechner und Handy */
.lstg__kopf{justify-content:flex-end;gap:clamp(.75rem,2vw,1.5rem)}
.lstg{padding-top:clamp(.5rem,.25rem + 1vw,1.25rem)}
/* Ansage 25.10.2026 nachmittags: Wort „Leistungen“ weg, Zähler und Pfeile ganz rechts in der Zeile der Überschrift (kein Spalt oben), Handy-Fotos etwas kleiner */
.lstg .wrap.lstg__in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:center}
.lstg__in>*{grid-column:1/-1}
.lstg__in>.lstg__titel{grid-column:1;grid-row:1;justify-self:stretch;margin:0;text-align:left;max-width:none}
.lstg__in>.lstg__kopf{grid-column:2;grid-row:1;justify-self:end;align-self:center;max-width:none;width:auto;margin:0;padding:.25rem .35rem;border-radius:6px;box-shadow:none;clip-path:none;background:color-mix(in oklab,var(--papier) 92%,transparent)}
.lstg__in>.lstg__galerie{margin-top:1rem}
.lstg__in>.lstg__galerie,.lstg__in>.lstg__leiste,.lstg__in>.lstg__seite{width:100%}
@media (max-width:699px){
  .lstg__in>.lstg__galerie,.lstg__in>.lstg__leiste{width:92%;margin-left:auto;margin-right:auto}
  .lstg__nr{display:none}
}
@media (min-width:1100px){
  .lstg .wrap.lstg__in{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr}
  .lstg__in>.lstg__titel{grid-column:1;grid-row:1}
  .lstg__in>.lstg__kopf{grid-column:2;grid-row:1}
  .lstg__in>.lstg__galerie{grid-column:1;grid-row:2}
  .lstg__in>.lstg__leiste{grid-column:1;grid-row:3}
  .lstg__in>.lstg__seite{grid-column:2;grid-row:2/5;margin-top:1rem}
}
/* Ansage 25.10.2026: alle Anfrage-Knöpfe in einer Farbe; außer in der Kopfzeile, im Handy-Menü und im Formular wackeln sie alle 10 s leicht */
html body .knopf.knopf--anfrage{background:var(--kupfer);color:var(--papier);border:1px solid color-mix(in oklab,var(--laerche) 45%,transparent);text-shadow:none}
html body .knopf.knopf--anfrage:hover{background:color-mix(in oklab,var(--kupfer) 86%,#000);color:var(--papier)}
@keyframes anfrage-wackeln{0%,90%,100%{transform:none}92%{transform:rotate(-2.5deg)}94%{transform:rotate(2.5deg)}96%{transform:rotate(-1.5deg)}98%{transform:rotate(1deg)}}
@media (prefers-reduced-motion:no-preference){
  a.knopf--anfrage:not(.kopf__anfrage):not(.nav__anfrage):not(.sm-cta){animation:anfrage-wackeln 10s ease-in-out infinite}
}
/* Ansage 25.10.2026: Anfrage und „Zurück zu allen Leistungen“ immer nebeneinander, auch am Handy */
.lstg__knoepfe{display:flex;flex-wrap:nowrap;gap:.6rem;align-items:stretch}
.lstg__knoepfe .knopf{flex:1 1 0;min-width:0;justify-content:center;text-align:center;white-space:normal;line-height:1.25}
@media (max-width:699px){.lstg__knoepfe .knopf{padding:.7rem .6rem;font-size:.8125rem;letter-spacing:.06em}}

/* Panel v44 (25.10.2026): Telefon sichtbar neben der Anfrage, eine Zählung je Seite, Dachbau auf der Startseite */
.ruf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1rem}
.ruf__zeit{font-size:.9375rem;color:var(--leise)}
.holz .ruf__zeit{color:var(--papier)}
.lstg__nr{display:none}
.schieb__eintrag:nth-child(4) .arch__knopf--kat{--kat:#C4A07A}
/* Pfeile (Ansage 25.10.2026 spät): bleiben beim Scrollen immer oben rechts sichtbar, damit man alle Leistungen durchklicken kann.
   Kein Kasten und kein Schleier dahinter, nur die zwei runden Knöpfe mit voller Papierfarbe. */
.lstg__in>.lstg__kopf{position:fixed;top:calc(var(--kopf) + .6rem);right:max(calc((100vw - var(--maxw)) / 2), calc(var(--rand2) / 2));z-index:40;margin:0;background:none;box-shadow:none;clip-path:none;padding:0;border-radius:0}
.lstg__pfeil{background:var(--papier);box-shadow:none}
/* 25.10.2026: Bühne klebt oben statt unten. Der untere Bildschirmrand wandert, wenn Safari oder Chrome am Handy die Adressleiste
   ein- und ausblendet; die Fahrt sprang dabei mit (Wackeln bei kleinsten Fingerbewegungen). Der obere Rand bleibt stehen. */
.bf.bf--an{justify-content:flex-start}
.bf--an .bf__buehne{top:0;bottom:auto}
@media (max-width:1099px){.lstg__in>.lstg__titel{margin-right:6.6rem}}
/* Pfeile als gezeichnete Winkel, genau mittig im Kreis (Ansage 25.10.2026), etwas größer */
.lstg__pfeil,.kat-pfeil{padding:0;line-height:0}
.lstg__pfeil svg,.kat-pfeil svg{display:block;width:1.4rem;height:1.4rem}
/* Ersatz für das Startvideo, wenn das Handy keine Videos abspielt (Stromsparmodus) */
.vhero__anim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-3;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.vhero__anim.ist-an{opacity:1}
@media (min-width:801px){.vhero__anim{object-position:50% 72%}}
/* Startseite: Logo als Ladepuffer, bis das Aufbau-Video ganz geladen ist (mindestens 2 s, höchstens 7 s) */
html.vorlade{overflow:hidden}
html.vorlade .lo{display:grid;place-items:center;position:fixed;inset:0;z-index:3000;opacity:1;transition:opacity .55s cubic-bezier(.45,0,.55,1)}
html.vorlade .lo__logo{animation:lo-puls 2.4s cubic-bezier(.37,0,.63,1) infinite alternate;opacity:1}
html.vorlade-weg .lo{opacity:0;pointer-events:none}
@keyframes lo-puls{from{transform:scale(.97)}to{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){html.vorlade .lo{display:none}html.vorlade{overflow:auto}}
/* Ladeanzeige der Startseite wie bei Kretsch: Logo, „Willkommen“, Ladebalken mit echtem Fortschritt des Startvideos */
.lo__willkommen,.lo__balken{display:none}
html.vorlade .lo{grid-template-rows:auto auto auto;align-content:center;gap:0}
html.vorlade .lo__logo{width:clamp(220px,34vw,360px)}
html.vorlade .lo__willkommen{display:block;position:relative;z-index:1;margin:1.4rem 0 0;text-align:center;font:700 clamp(1.6rem,4.4vw,2.3rem)/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--balken)}
html.vorlade .lo__balken{display:block;position:relative;z-index:1;width:min(220px,56vw);height:4px;margin:1.6rem auto 0;border-radius:2px;background:color-mix(in oklab,var(--balken) 16%,transparent);overflow:hidden}
html.vorlade .lo__balken span{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--kupfer);border-radius:2px;transition:transform .2s linear}

/* Kontaktleiste am Handy (Ansage 26.10.2026): dezent, zwei echte Knöpfe, nur bis 767 px; erscheint erst nach dem Startbild,
   weicht dem Kontaktbereich, Formularen, offenem Menü und der Tastatur aus. Nur transform und opacity. */
.kleiste{display:none}
@media (max-width:767px){
  .kleiste{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom,0px));background:var(--papier);border-top:1px solid var(--linie);
    transform:translate3d(0,110%,0);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease)}
  html.kleiste-an .kleiste{transform:none;opacity:1}
  .kleiste .knopf{min-height:2.75rem;padding:.5rem .75rem;font-size:.875rem;letter-spacing:.06em;border-radius:var(--r);box-shadow:none}
  .kleiste__ruf{background:transparent;color:var(--tinte);border-color:color-mix(in oklab,var(--tinte) 45%,transparent)}
  .kleiste__anfrage{background:var(--balken);color:var(--papier);border-color:var(--balken)}
  html.mit-kleiste body{padding-bottom:calc(var(--kleiste-h,3.75rem) + .5rem)}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.kleiste{transition:none}}
@media (max-width:359px){.kleiste{gap:.375rem;padding-inline:.5rem}.kleiste .knopf{font-size:.8125rem;letter-spacing:.02em;padding-inline:.375rem;white-space:nowrap}}
/* Danke-Seiten nach Anfrage und Bewerbung (26.10.2026) */
.danke .wrap{max-width:var(--maxw-text);padding-block:clamp(3rem,10vw,6rem)}
.danke__knopf{margin-top:2rem}
/* Einzelfoto ohne Vorher-Nachher im Leistungsblock (Ansage 26.10.2026: beim Pool kein Regler) */
.schieb__bild:not(.vn){position:relative;overflow:hidden;border-radius:var(--r)}
.schieb__bild:not(.vn) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== Startbild neu (Ansage 26.10.2026): links oben der Name, darunter ein Satz und „Anfrage stellen“;
   rechts unten die Eckdaten im hellen Kasten. Video, Ladebildschirm und Stampf-Ablauf bleiben. ===== */
.vhero{align-items:stretch}
.vhero__in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;margin-inline:auto;
  padding-block:clamp(2rem,1rem + 5vh,4.5rem) clamp(1.5rem,.8rem + 3vh,3rem)}
.vhero__text{grid-column:1;grid-row:1;text-align:left;max-width:none}
.vhero .knopfreihe{justify-content:flex-start}
.vhero .lead{text-transform:none;letter-spacing:.01em;font-size:clamp(1.0625rem,.95rem + .45vw,1.375rem);line-height:1.45;max-width:30rem;margin-top:1.1rem}
.vhero__schleier{background:linear-gradient(165deg,rgba(32,20,11,.8) 0%,rgba(32,20,11,.5) 34%,rgba(32,20,11,.08) 62%,rgba(32,20,11,0) 78%)}
.vhero__daten{grid-column:2;grid-row:3;align-self:end;justify-self:end;margin:0;display:grid;gap:.85rem 2rem;grid-template-columns:auto auto;
  padding:1.25rem 1.5rem;border-radius:var(--r);background:color-mix(in oklab,var(--papier) 94%,transparent);color:var(--tinte);box-shadow:var(--schatten)}
.vhero__daten div{display:flex;flex-direction:column;gap:.15rem;min-width:9rem}
.vhero__daten dt{font:600 .75rem/1.2 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--kupfer)}
.vhero__daten dd{margin:0;font-size:1rem;line-height:1.35}
@media (max-width:800px){
  .vhero{align-items:stretch}
  .vhero__in{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding-block:1.5rem 1rem}
  .vhero__text{text-align:left}
  .vhero .knopfreihe{justify-content:flex-start}
  .vhero h1{font-size:clamp(2.3rem,10.5vw,3.4rem)}
  .vhero__schleier{background:linear-gradient(180deg,rgba(32,20,11,.82) 0%,rgba(32,20,11,.5) 38%,rgba(32,20,11,.1) 60%,rgba(32,20,11,.55) 100%)}
  .vhero__daten{grid-column:1;justify-self:stretch;padding:.85rem 1rem;gap:.6rem 1rem}
  .vhero__daten div{min-width:0}
  .vhero__daten dd{font-size:.9375rem}
}
@media (max-width:359px){.vhero__daten{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  html.js .vhero:not(.ist-fertig) .vhero__daten{opacity:0;transform:translate3d(0,14px,0);animation:vhero-notfall .01s 16s forwards}
  .vhero__daten{transition:opacity .8s var(--ease) 1.15s,transform .8s var(--ease) 1.15s}
}
/* Startbild, Runde 3 (Ansage 26.10.2026): kein Datenblock mehr, nur zwei Eckdaten als ruhige Zeile unter dem Satz;
   heller Knopf „Anfrage stellen“ unten rechts (Handy unten mittig); Name und Text am Handy mittig und etwas weiter oben.
   Nach dem Ende des Startvideos erscheint alles gleichzeitig (keine gestaffelten Verzögerungen). */
html body .vhero .knopf.knopf--anfrage{background:var(--papier);color:var(--tinte);border:1px solid color-mix(in oklab,var(--tinte) 20%,transparent);text-shadow:none;box-shadow:var(--schatten)}
html body .vhero .knopf.knopf--anfrage:hover{background:#fff;color:var(--tinte)}
.vhero__in{display:block;position:static}
.vhero__fakten{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin-top:1.1rem;font:600 clamp(.8125rem,.75rem + .2vw,.9375rem)/1.3 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--laerche)}
.vhero__ecke{position:absolute;right:clamp(1.25rem,4vw,3.5rem);bottom:clamp(1.25rem,5vh,3rem);margin:0;z-index:1}
@media (max-width:800px){
  .vhero__in{padding-top:clamp(1.75rem,7vh,3.5rem)}
  .vhero__text{text-align:center}
  .vhero .lead{margin-inline:auto}
  .vhero__fakten{justify-content:center}
  .vhero .vhero__ecke{left:0;right:0;bottom:clamp(1.5rem,5vh,2.5rem);display:flex;justify-content:center}
}
@media (prefers-reduced-motion:no-preference){
  .vhero.ist-fertig .vhero__text>*,.vhero.ist-fertig .vhero__text>.lead,.vhero.ist-fertig .vhero__text>.knopfreihe{transition-delay:0s}
  html.js .vhero:not(.ist-fertig) .vhero__ecke{opacity:0;transform:translate3d(0,14px,0);animation:vhero-notfall .01s 16s forwards}
  .vhero__ecke{transition:opacity .8s var(--ease),transform .8s var(--ease)}
}
/* ===== Knöpfe hell und ruhig auf der ganzen Seite (Ansage 26.10.2026: „minimalistisch, Apple-mäßig, heller und freundlicher,
   Braun nur dezent, die Knöpfe heller, alle“). Ein Stil für alle Haupt-Knöpfe: weißer Grund, dunkle Schrift, feiner Rand,
   keine Holzstruktur, kein Verlauf, höchstens eine leichte Schattenstufe. ===== */
html body .knopf.knopf--holz,html body .knopf.knopf--anfrage,html body .knopf.knopf--voll,html body .nav__anfrage,html body .kopf__anfrage,
html body .kleiste__anfrage,html body .arch__knopf,html body .sm-cta{
  background:#fff;background-image:none;color:var(--tinte);border:1px solid color-mix(in oklab,var(--tinte) 16%,transparent);
  text-shadow:none;box-shadow:0 1px 2px rgba(42,34,27,.06);font-weight:500}
html body .knopf.knopf--holz:hover,html body .knopf.knopf--anfrage:hover,html body .knopf.knopf--voll:hover,html body .nav__anfrage:hover,
html body .kopf__anfrage:hover,html body .kleiste__anfrage:hover,html body .arch__knopf:hover,html body .sm-cta:hover{
  background:var(--papier);color:var(--tinte);border-color:color-mix(in oklab,var(--kupfer) 45%,transparent)}
html body .knopf.knopf--holz::before,html body .knopf.knopf--holz::after{content:none}
html body .kleiste__ruf,html body .knopf.knopf--rahmen{background:transparent;color:var(--tinte);border-color:color-mix(in oklab,var(--tinte) 22%,transparent)}
.vhero .knopf.knopf--rahmen,.tief .knopf.knopf--rahmen{color:var(--papier);border-color:color-mix(in oklab,var(--papier) 55%,transparent)}

/* ===== Startbild nach Agentur-Reel (Ansage 26.10.2026): Satz, Wörter rücken auseinander, nasse Terrasse öffnet sich zwischen
   „für“ und „Holzbau“ und schließt sich, Carport wächst zum Hintergrund, dann Name, Satz und Knopf. js/start.js treibt die Zeitleiste
   nur über transform und opacity. Endstand (ohne Skript, reduzierte Bewegung): Carport, Schleier, Text. ===== */
@font-face{font-family:"Cormorant";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/cormorant-500.woff2) format("woff2")}
.start{position:relative;isolation:isolate;overflow:hidden;background:#1C192B;color:var(--papier);height:calc(100svh - var(--kopf));min-height:34rem;max-height:62rem}
.start__zwei{position:absolute;inset:0;z-index:-3;overflow:hidden}
.start__zwei img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.start__schleier{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(165deg,rgba(32,20,11,.78) 0%,rgba(32,20,11,.45) 36%,rgba(32,20,11,.08) 62%,rgba(32,20,11,.35) 100%)}
.start__buehne{position:absolute;inset:0;z-index:2;display:none;pointer-events:none}
.start__eins{position:absolute;overflow:hidden;width:min(30vw,22rem);aspect-ratio:4/5;left:0;top:0;will-change:transform}
.start__eins img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.start__satz{margin:0}
.start__w{position:absolute;left:0;top:0;white-space:nowrap;font:500 clamp(1.4rem,.9rem + 1.6vw,2.6rem)/1 "Cormorant",Georgia,serif;letter-spacing:-.005em;color:#E6E3EC;opacity:0;will-change:transform,opacity}
.start__in{position:absolute;inset:0;width:min(100% - var(--rand2),var(--maxw));margin-inline:auto;padding-block:clamp(2rem,1rem + 5vh,4.5rem) 0}
.start__text{max-width:none}
.start__unter{margin:0 0 .9rem;font:500 clamp(1.125rem,.95rem + .6vw,1.6rem)/1.15 "Cormorant",Georgia,serif;letter-spacing:.01em;color:var(--laerche)}
.start h1{color:var(--papier);margin:0;white-space:nowrap;font-size:clamp(2.6rem,1rem + 5.2vw,6.25rem);line-height:1}
.start .lead{color:var(--papier);margin-top:1.1rem;max-width:30rem;font-size:clamp(1.0625rem,.95rem + .45vw,1.375rem);line-height:1.45}
.start__ecke{position:absolute;right:0;bottom:clamp(1.25rem,5vh,3rem);margin:0}
html body .start .knopf.knopf--anfrage{min-height:3.2rem;padding:.85rem 2.2rem;font-size:1rem}
@media (max-width:800px){
  .start__in{padding-top:clamp(1.75rem,7vh,3.5rem)}
  .start__text{text-align:center}
  .start h1{white-space:normal;font-size:clamp(2.3rem,10.5vw,3.4rem)}
  .start .lead{margin-inline:auto}
  .start .start__ecke{left:0;right:0;display:flex;justify-content:center}
  .start__eins{width:min(52vw,15rem)}
  .start__w{font-size:clamp(1.5rem,7vw,2.25rem)}
  .start__schleier{background:linear-gradient(180deg,rgba(32,20,11,.8) 0%,rgba(32,20,11,.45) 40%,rgba(32,20,11,.12) 62%,rgba(32,20,11,.5) 100%)}
}
/* Intro nur mit Skript und ohne reduzierte Bewegung */
html.start-an .start__buehne{display:block}
html.start-an .start__zwei{opacity:0}
html.start-an .start__schleier,html.start-an .start__text,html.start-an .start__ecke{opacity:0}
html.start-an .start__text,html.start-an .start__ecke{transform:translate3d(0,16px,0)}
html.start-an .start.ist-fertig .start__schleier{opacity:1;transition:opacity 1.2s var(--ease)}
html.start-an .start.ist-fertig .start__text,html.start-an .start.ist-fertig .start__ecke{opacity:1;transform:none;transition:opacity 1.2s var(--ease) .15s,transform 1.2s var(--ease) .15s}
html.start-an .start.ist-fertig .start__buehne{display:none}
/* Notbremse ohne Skriptlauf: nach 9 s steht der Endstand */
@media (prefers-reduced-motion:no-preference){
  html.start-an .start:not(.ist-fertig) .start__zwei,html.start-an .start:not(.ist-fertig) .start__schleier,
  html.start-an .start:not(.ist-fertig) .start__text,html.start-an .start:not(.ist-fertig) .start__ecke{animation:vhero-notfall .01s 11s forwards}
}
/* Startbild genau nach dem Reel (Ansage 26.10.2026): Farben wie dort (tiefes Indigo, helles Grau), feine Verbindungslinie zwischen „für“ und „Holzbau“ */
.start__linie{position:absolute;left:0;top:0;height:1px;width:100px;background:rgba(230,227,236,.7);transform-origin:0 50%;transform:scaleX(0);opacity:0;will-change:transform,opacity}

/* ===== Leistungen auf der Startseite (Ansage 26.10.2026, Vorbild holzrausch.de): ruhig, ohne Farbwechsel; Bilder abwechselnd
   rechts und links, darunter nur die Leistungsart; das Bild ist der Link. Vorher und nachher als langsamer Endloslauf: der
   Strich wandert von selbst hin und her (kein Ziehen), nur transform. Video startet auf Knopfdruck. Am Ende zwei Bilder zu allen
   Leistungen mit Pfeil in der inneren oberen Ecke, eins schwarz-weiß. ===== */
.lz{background:var(--papier);padding-block:clamp(4rem,9vw,8rem)}
.lz__kopf{margin-bottom:clamp(2.5rem,6vw,5rem)}
.lz__ueber{margin:0;font:500 .9375rem/1 "Barlow",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--tinte)}
.lz__liste{width:min(100% - var(--rand2),var(--maxw));margin-inline:auto;display:grid;gap:clamp(4rem,9vw,8rem)}
.lz__eintrag{margin:0;width:min(70%,54rem)}
.lz__eintrag--rechts{justify-self:end}
.lz__karte{position:relative;display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--span)}
.lz__karte img,.lz__karte video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
a.lz__karte:focus-visible{outline:3px solid var(--kupfer);outline-offset:4px}
.lz__titel{margin-top:1rem;font:500 .875rem/1.2 "Barlow",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte)}
.lz__deck{position:absolute;inset:0;overflow:hidden;transform:translate3d(-50%,0,0);animation:lz-deck 13s linear var(--lz-verz,0s) infinite}
.lz__deck img{transform:translate3d(50%,0,0);animation:lz-gegen 13s linear var(--lz-verz,0s) infinite}
.lz__strich{position:absolute;inset:0;pointer-events:none;transform:translate3d(50%,0,0);animation:lz-strich 13s linear var(--lz-verz,0s) infinite}
.lz__strich::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lz__pfeil{position:absolute;top:1rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--papier);color:var(--tinte);border:1px solid color-mix(in oklab,var(--tinte) 14%,transparent)}
.lz__eintrag--rechts .lz__pfeil{left:1rem}
.lz__eintrag--links .lz__pfeil{right:1rem}
.lz__eintrag--rechts .lz__pfeil svg{transform:rotate(180deg)}
.lz__play{position:absolute;left:50%;top:50%;width:4rem;height:4rem;margin:-2rem 0 0 -2rem;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in oklab,var(--tinte) 16%,transparent);background:var(--papier);color:var(--tinte);cursor:pointer;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lz__play:hover{transform:scale(1.05)}
.lz__play[hidden]{display:grid;opacity:0;pointer-events:none}
.lz__ki{position:absolute;right:.7rem;bottom:.55rem;z-index:2;font-size:.625rem;line-height:1;letter-spacing:.06em;color:#fff;opacity:.32;pointer-events:none} /* Ansage 27.10.: KI-Hinweis fast unsichtbar, bleibt stehen */
@media (max-width:800px){.lz__eintrag{width:88%}}
@media (prefers-reduced-motion:reduce){.lz__deck,.lz__deck img,.lz__strich{animation:none}}
/* versetzte Läufe, damit die Striche nicht im Gleichschritt wandern */
/* Über uns ohne Zoom (Ansage 26.10.2026): Reihen laufen endlos, abwechselnd gegenläufig, Tempo setzt main.js (26 px/s) */
.bf--lauf .bf__spur{animation:bf-lauf var(--bf-dauer,60s) linear infinite;will-change:transform}
.bf--lauf .bf__spur:nth-child(even){animation-direction:reverse}
.bf--lauf .bf__spur:nth-child(even){margin-left:0}
@keyframes bf-lauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.bf--lauf .bf__spur{animation:none}}
/* Vorher-Nachher-Lauf (Ansage 26.10.2026): vom Rand zügig zur Mitte, in der Mitte langsam, dann weiter; an den Enden weich wenden; 22 s je Hin und Zurück */
/* kleine Handys (iPhone SE 1, 568 px hoch): Startbild nie höher als der Bildschirm, Knopf bleibt ganz sichtbar */
@media (max-width:800px){.start{min-height:24rem}}
@media (max-width:800px) and (max-height:620px){.start h1{font-size:2.25rem}.start .lead{margin-top:.75rem;font-size:1rem}.start__in{padding-top:1.25rem}}
/* Ansage 26.10.2026 spät: Knopf am Startbild am Handy kleiner, Leistungsfotos ohne Überschrift direkt nach Über uns */
@media (max-width:800px){html body .start .start__ecke .knopf.knopf--anfrage{min-height:44px;padding:.6rem 1.4rem;font-size:.8125rem;letter-spacing:.12em;width:auto;max-width:none}}
.lz{padding-top:clamp(3rem,2rem + 4vw,6rem)}
/* Startbild edler (Ansage 26.10.2026 spät): schwarz und clean statt Indigo, schmale Serifenschrift wie im Reel, feiner weißer Streifen
   unten mit Text, der am Ende mit dem Bild nach links weggeschoben wird. Am Handy kein Hochkant: das Carport-Foto steht quer über
   die ganze Breite zwischen Name und Knopf, der schwarze Grund trägt den Text. */
@font-face{font-family:"Instrument Serif";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/instrument-serif-400.woff2) format("woff2")}
.start{background:#0B0B0C}
.start__w{font:400 clamp(1.5rem,.9rem + 1.9vw,3rem)/1 "Instrument Serif",Georgia,serif;letter-spacing:-.012em;color:#F2F0EC}
.start__linie{background:rgba(255,255,255,.75)}
.start__leiste{position:absolute;left:6%;right:6%;bottom:clamp(1.25rem,6vh,3rem);display:flex;justify-content:space-between;gap:1rem;padding-top:.75rem;font:500 .6875rem/1 "Barlow",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);opacity:0;will-change:transform,opacity}
.start__leiste i{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.5);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:800px){
  .start__in{padding-top:clamp(1.5rem,5vh,2.75rem)}
  .start__leiste{font-size:.625rem;letter-spacing:.18em}
}
/* Ansage 26.10.2026 spät: Anfrage-Knopf ruhig (kein Wackeln), auf der Startseite rechts unten auch am Handy, ohne Hereinrutschen;
   Fotoreihen vor Über uns nur drei und leicht schräg */
html body a.knopf--anfrage,html body .knopf{animation:none}
html.start-an .start__ecke{transform:none}
html.start-an .start.ist-fertig .start__ecke{transition:opacity 1.2s var(--ease) .15s}
@media (max-width:800px){.start .start__ecke{left:auto;right:0;justify-content:flex-end}}
.bf--lauf .bf__band{overflow:hidden;padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.bf--lauf .bf__reihen{transform:rotate(-4deg);width:116%;margin-left:-8%}
/* Startbild hell (Ansage 26.10.2026 spät): heller Grund statt Schwarz, dunkle Schrift; zweites Bild ist die helle Pergola (Instagram
   23.10.2025, aufgewertet) und füllt das ganze Startbild bis zum unteren Bildschirmrand, auch am Handy. Während des Text-Intros sind
   Kopfzeile und Kontaktleiste aus; sie kommen, sobald das Bild ganz groß ist. */
.start{background:var(--papier);color:var(--tinte);height:calc(100svh - var(--kopf));height:calc(100lvh - var(--kopf))}
/* Anfrage-Knopf über der Browserleiste (Ansage 29.10.2026, Samsung Fold): das Bild reicht bis 100lvh, der Knopf sitzt im sichtbaren Teil (svh). */
.start__ecke{bottom:calc(100lvh - 100svh + clamp(1.25rem,5vh,3rem))}
.start__w{color:var(--tinte)}
.start__linie{background:color-mix(in oklab,var(--tinte) 55%,transparent)}
.start__leiste{color:color-mix(in oklab,var(--tinte) 62%,transparent)}
.start__leiste i{background:color-mix(in oklab,var(--tinte) 35%,transparent)}
.start__zwei img{object-position:50% 70%}
@media (max-width:800px){.start__zwei img{object-position:42% 60%}}
.start__schleier{background:linear-gradient(180deg,rgba(247,241,230,.9) 0%,rgba(247,241,230,.62) 30%,rgba(247,241,230,0) 56%)}
@media (min-width:801px){.start__schleier{background:linear-gradient(100deg,rgba(247,241,230,.92) 0%,rgba(247,241,230,.6) 34%,rgba(247,241,230,0) 60%)}}
.start h1,.start .lead{color:var(--tinte)}
html body .start .knopf.knopf--anfrage{box-shadow:0 .5rem 1.5rem -.75rem rgba(20,12,6,.45)}
html.start-an:not(:has(.start.ist-fertig)) .kopf,html.start-an:not(:has(.start.ist-fertig)) .kleiste{opacity:0;pointer-events:none}
html.start-an .kopf{transition:transform .35s var(--ease),opacity .9s var(--ease)}
/* Über uns (Ansage 26.10.2026 spät): Teamfoto kleiner links, Text rechts, auch am Handy */
.bf:not(.bf--an) .bf__ueber{display:grid;grid-template-columns:minmax(0,clamp(8.5rem,24vw,19rem)) minmax(0,1fr);gap:clamp(1rem,.4rem + 3vw,4.5rem);align-items:center;padding:clamp(2rem,1rem + 3vw,5rem) max(1rem,(100% - var(--maxw)) / 2)}
.bf:not(.bf--an) .bf__foto{border-radius:var(--r)}
.bf:not(.bf--an) .bf__foto img{height:auto;aspect-ratio:4/5;object-position:50% 18%}
.bf:not(.bf--an) .bf__text{display:block;width:auto;padding:0;margin:0}
.bf:not(.bf--an) .bf__kopf{margin-bottom:.75rem}
@media (max-width:599px){
  .bf:not(.bf--an) .bf__kopf h2{font-size:clamp(1.35rem,6vw,1.75rem)}
  .bf:not(.bf--an) .bf__absatz p{font-size:.9rem;line-height:1.5}
  .bf:not(.bf--an) .bf__leiste{display:grid;grid-template-columns:1fr}
  .bf:not(.bf--an) .bf__leiste>div{padding:.4rem .5rem;flex-wrap:wrap;column-gap:.35rem;row-gap:0}
  .bf:not(.bf--an) .bf__leiste dd{font-size:1.1rem}
  .bf:not(.bf--an) .bf__leiste dt{font-size:.625rem;letter-spacing:.06em;white-space:normal}
  .bf:not(.bf--an) .bf__ueber{grid-template-columns:minmax(0,36vw) minmax(0,1fr);align-items:start}
}
.bf:not(.bf--an) .bf__leiste{display:grid;grid-template-columns:1fr}
.bf:not(.bf--an) .bf__leiste>div{flex-wrap:wrap;column-gap:.4rem;row-gap:0}
.bf:not(.bf--an) .bf__leiste>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
/* Handy (Ansage 26.10.2026 spät): Foto links, Zahlen darunter, Text rechts daneben und unter dem Foto weiter */
@media (max-width:599px){
  .bf:not(.bf--an) .bf__ueber{display:flow-root;padding:1.75rem 1rem}
  .bf:not(.bf--an) .bf__foto{float:left;width:46%;margin:.2rem 1rem .75rem 0;overflow:visible;border-radius:0}
  .bf:not(.bf--an) .bf__foto img{border-radius:var(--r)}
  .bf:not(.bf--an) .bf__leiste{margin-top:.4rem;border-radius:var(--r)}
  .bf:not(.bf--an) .bf__text{display:block}
}
/* Ansage 26.10.2026 spät: Zahlen nebeneinander unter dem Foto, ohne braunen Block; Foto etwas größer */
.bf:not(.bf--an) .bf__leiste{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;margin-top:.6rem;background:none;color:var(--tinte);border-radius:0;box-shadow:none}
.bf:not(.bf--an) .bf__leiste>div,.bf:not(.bf--an) .bf__leiste>div+div{display:block;padding:0;border:0}
.bf:not(.bf--an) .bf__leiste dd{margin:0;font-size:1.6rem;color:var(--tinte)}
.bf:not(.bf--an) .bf__leiste dt{margin-top:.15rem;font-size:.6875rem;letter-spacing:.12em;color:var(--leise);white-space:nowrap}
.bf:not(.bf--an) .bf__ueber{grid-template-columns:minmax(0,clamp(9rem,28vw,23rem)) minmax(0,1fr)}
@media (max-width:599px){
  .bf:not(.bf--an) .bf__foto{width:54%}
  .bf:not(.bf--an) .bf__leiste{gap:.3rem 1rem}
  .bf:not(.bf--an) .bf__leiste dd{font-size:1.3rem}
  .bf:not(.bf--an) .bf__leiste dt{font-size:.5625rem;letter-spacing:.08em}
}
@media (max-width:599px){.bf:not(.bf--an) .bf__foto{width:50%;margin-right:.85rem}.bf:not(.bf--an) .bf__kopf h2{font-size:clamp(1.25rem,5.6vw,1.5rem)}}
@media (max-width:374px){html body .bf:not(.bf--an) .bf__foto{width:46%;margin-right:.7rem}html body .bf:not(.bf--an) .bf__kopf h2{font-size:1.2rem}html body .bf:not(.bf--an) .bf__kopf .kicker{font-size:.6875rem}}
@media (max-width:599px){.bf:not(.bf--an) #h-ueber{font-size:1.3rem;line-height:1.08;margin-bottom:.45rem}.bf:not(.bf--an) .bf__kopf{margin-bottom:.4rem}.bf:not(.bf--an) .bf__kopf .kicker{margin-bottom:.25rem}}
@media (max-width:374px){.bf:not(.bf--an) #h-ueber{font-size:1.15rem}}
@media (max-width:599px){html body .bf:not(.bf--an) .bf__absatz p{font-size:.875rem;line-height:1.5}}
@media (max-width:374px){html body .bf:not(.bf--an) .bf__leiste{gap:.25rem .75rem;flex-wrap:nowrap}html body .bf:not(.bf--an) .bf__leiste dd{font-size:1.05rem}html body .bf:not(.bf--an) .bf__leiste dt{font-size:.5rem;letter-spacing:.06em}}
/* Über uns (Ansage 26.10.2026 spät, auf allen Geräten): Foto links, Überschrift und erster Absatz daneben, „Wir setzen auf …“ darunter über die volle Breite */
.bf:not(.bf--an) .bf__ueber{display:flow-root;padding:clamp(1.75rem,1rem + 3vw,5rem) max(1rem,(100% - var(--maxw)) / 2)}
.bf:not(.bf--an) .bf__foto{float:left;width:clamp(9rem,30vw,23rem);margin:.2rem clamp(.85rem,.4rem + 2.5vw,3.5rem) .75rem 0;overflow:visible;border-radius:0}
.bf:not(.bf--an) .bf__foto img{border-radius:var(--r)}
.bf:not(.bf--an) .bf__text,.bf:not(.bf--an) .bf__absatz{display:block}
.bf:not(.bf--an) .bf__absatz p+p{clear:both;padding-top:.75rem}
@media (max-width:599px){.bf:not(.bf--an) .bf__foto{width:50%}}
@media (max-width:374px){html body .bf:not(.bf--an) .bf__foto{width:46%}}
.bf:not(.bf--an) .bf__absatz p{max-width:44rem}
/* Über uns (Ansage 26.10.2026 spät): Rechner alles rechts neben dem Foto, Zahlen unter dem Foto; Handy Foto links bis auf Höhe
   des ersten Absatzendes, „Wir setzen auf …“ darunter über die volle Breite. Überzeile „Über uns“ entfällt. */
.bf:not(.bf--an) .bf__ueber{display:grid;grid-template-columns:minmax(0,clamp(9rem,30vw,23rem)) minmax(0,1fr);column-gap:clamp(.85rem,.4rem + 2.5vw,3.5rem);row-gap:0;align-items:start}
.bf:not(.bf--an) .bf__text,.bf:not(.bf--an) .bf__absatz{display:contents}
.bf:not(.bf--an) .bf__foto{float:none;width:auto;margin:0;grid-column:1;grid-row:1 / 4}
.bf:not(.bf--an) .bf__kopf{grid-column:2;grid-row:1}
.bf:not(.bf--an) .bf__absatz p{grid-column:2;margin:0 0 .9rem}
.bf:not(.bf--an) .bf__absatz p+p{clear:none;padding-top:0}
@media (min-width:600px){.bf:not(.bf--an) .bf__kopf{padding-top:.25rem}}
@media (max-width:599px){
  .bf:not(.bf--an) .bf__ueber{grid-template-columns:minmax(0,48%) minmax(0,1fr)}
  .bf:not(.bf--an) .bf__foto{grid-row:1 / 3;align-self:end;margin-bottom:.9rem}
  .bf:not(.bf--an) .bf__absatz p:first-child{grid-row:2}
  .bf:not(.bf--an) .bf__absatz p+p{grid-column:1 / -1;grid-row:3;padding-top:.35rem}
  html body .bf:not(.bf--an) .bf__foto{width:auto}
}
.bf:not(.bf--an) .bf__leiste dd{white-space:nowrap}
@media (max-width:599px){
  .bf:not(.bf--an) .bf__foto{align-self:stretch;display:flex;flex-direction:column}
  .bf:not(.bf--an) .bf__foto img{flex:1 1 0;min-height:7.5rem;height:0;aspect-ratio:auto}
}
/* Vorher-Nachher (Ansage 26.10.2026 spät): Enden schnell, nur die Mitte deutlich langsamer, ganz von Rand zu Rand, 13 s je Hin und Zurück */
@keyframes lz-deck{0%{transform:translate3d(-100.00%,0,0)}2.08%{transform:translate3d(-97.68%,0,0)}4.17%{transform:translate3d(-94.34%,0,0)}6.25%{transform:translate3d(-90.11%,0,0)}8.33%{transform:translate3d(-85.36%,0,0)}10.42%{transform:translate3d(-80.53%,0,0)}12.5%{transform:translate3d(-75.07%,0,0)}14.58%{transform:translate3d(-69.39%,0,0)}16.67%{transform:translate3d(-63.96%,0,0)}18.75%{transform:translate3d(-58.50%,0,0)}20.83%{transform:translate3d(-54.07%,0,0)}22.92%{transform:translate3d(-51.43%,0,0)}25%{transform:translate3d(-50.00%,0,0)}27.08%{transform:translate3d(-48.57%,0,0)}29.17%{transform:translate3d(-45.93%,0,0)}31.25%{transform:translate3d(-41.50%,0,0)}33.33%{transform:translate3d(-36.04%,0,0)}35.42%{transform:translate3d(-30.61%,0,0)}37.5%{transform:translate3d(-24.93%,0,0)}39.58%{transform:translate3d(-19.47%,0,0)}41.67%{transform:translate3d(-14.64%,0,0)}43.75%{transform:translate3d(-9.89%,0,0)}45.83%{transform:translate3d(-5.66%,0,0)}47.92%{transform:translate3d(-2.32%,0,0)}50%{transform:translate3d(-0.00%,0,0)}52.08%{transform:translate3d(-2.32%,0,0)}54.17%{transform:translate3d(-5.66%,0,0)}56.25%{transform:translate3d(-9.89%,0,0)}58.33%{transform:translate3d(-14.64%,0,0)}60.42%{transform:translate3d(-19.47%,0,0)}62.5%{transform:translate3d(-24.93%,0,0)}64.58%{transform:translate3d(-30.61%,0,0)}66.67%{transform:translate3d(-36.04%,0,0)}68.75%{transform:translate3d(-41.50%,0,0)}70.83%{transform:translate3d(-45.93%,0,0)}72.92%{transform:translate3d(-48.57%,0,0)}75%{transform:translate3d(-50.00%,0,0)}77.08%{transform:translate3d(-51.43%,0,0)}79.17%{transform:translate3d(-54.07%,0,0)}81.25%{transform:translate3d(-58.50%,0,0)}83.33%{transform:translate3d(-63.96%,0,0)}85.42%{transform:translate3d(-69.39%,0,0)}87.5%{transform:translate3d(-75.07%,0,0)}89.58%{transform:translate3d(-80.53%,0,0)}91.67%{transform:translate3d(-85.36%,0,0)}93.75%{transform:translate3d(-90.11%,0,0)}95.83%{transform:translate3d(-94.34%,0,0)}97.92%{transform:translate3d(-97.68%,0,0)}100%{transform:translate3d(-100.00%,0,0)}}
@keyframes lz-gegen{0%{transform:translate3d(100.00%,0,0)}2.08%{transform:translate3d(97.68%,0,0)}4.17%{transform:translate3d(94.34%,0,0)}6.25%{transform:translate3d(90.11%,0,0)}8.33%{transform:translate3d(85.36%,0,0)}10.42%{transform:translate3d(80.53%,0,0)}12.5%{transform:translate3d(75.07%,0,0)}14.58%{transform:translate3d(69.39%,0,0)}16.67%{transform:translate3d(63.96%,0,0)}18.75%{transform:translate3d(58.50%,0,0)}20.83%{transform:translate3d(54.07%,0,0)}22.92%{transform:translate3d(51.43%,0,0)}25%{transform:translate3d(50.00%,0,0)}27.08%{transform:translate3d(48.57%,0,0)}29.17%{transform:translate3d(45.93%,0,0)}31.25%{transform:translate3d(41.50%,0,0)}33.33%{transform:translate3d(36.04%,0,0)}35.42%{transform:translate3d(30.61%,0,0)}37.5%{transform:translate3d(24.93%,0,0)}39.58%{transform:translate3d(19.47%,0,0)}41.67%{transform:translate3d(14.64%,0,0)}43.75%{transform:translate3d(9.89%,0,0)}45.83%{transform:translate3d(5.66%,0,0)}47.92%{transform:translate3d(2.32%,0,0)}50%{transform:translate3d(0.00%,0,0)}52.08%{transform:translate3d(2.32%,0,0)}54.17%{transform:translate3d(5.66%,0,0)}56.25%{transform:translate3d(9.89%,0,0)}58.33%{transform:translate3d(14.64%,0,0)}60.42%{transform:translate3d(19.47%,0,0)}62.5%{transform:translate3d(24.93%,0,0)}64.58%{transform:translate3d(30.61%,0,0)}66.67%{transform:translate3d(36.04%,0,0)}68.75%{transform:translate3d(41.50%,0,0)}70.83%{transform:translate3d(45.93%,0,0)}72.92%{transform:translate3d(48.57%,0,0)}75%{transform:translate3d(50.00%,0,0)}77.08%{transform:translate3d(51.43%,0,0)}79.17%{transform:translate3d(54.07%,0,0)}81.25%{transform:translate3d(58.50%,0,0)}83.33%{transform:translate3d(63.96%,0,0)}85.42%{transform:translate3d(69.39%,0,0)}87.5%{transform:translate3d(75.07%,0,0)}89.58%{transform:translate3d(80.53%,0,0)}91.67%{transform:translate3d(85.36%,0,0)}93.75%{transform:translate3d(90.11%,0,0)}95.83%{transform:translate3d(94.34%,0,0)}97.92%{transform:translate3d(97.68%,0,0)}100%{transform:translate3d(100.00%,0,0)}}
@keyframes lz-strich{0%{transform:translate3d(0.00%,0,0)}2.08%{transform:translate3d(2.32%,0,0)}4.17%{transform:translate3d(5.66%,0,0)}6.25%{transform:translate3d(9.89%,0,0)}8.33%{transform:translate3d(14.64%,0,0)}10.42%{transform:translate3d(19.47%,0,0)}12.5%{transform:translate3d(24.93%,0,0)}14.58%{transform:translate3d(30.61%,0,0)}16.67%{transform:translate3d(36.04%,0,0)}18.75%{transform:translate3d(41.50%,0,0)}20.83%{transform:translate3d(45.93%,0,0)}22.92%{transform:translate3d(48.57%,0,0)}25%{transform:translate3d(50.00%,0,0)}27.08%{transform:translate3d(51.43%,0,0)}29.17%{transform:translate3d(54.07%,0,0)}31.25%{transform:translate3d(58.50%,0,0)}33.33%{transform:translate3d(63.96%,0,0)}35.42%{transform:translate3d(69.39%,0,0)}37.5%{transform:translate3d(75.07%,0,0)}39.58%{transform:translate3d(80.53%,0,0)}41.67%{transform:translate3d(85.36%,0,0)}43.75%{transform:translate3d(90.11%,0,0)}45.83%{transform:translate3d(94.34%,0,0)}47.92%{transform:translate3d(97.68%,0,0)}50%{transform:translate3d(100.00%,0,0)}52.08%{transform:translate3d(97.68%,0,0)}54.17%{transform:translate3d(94.34%,0,0)}56.25%{transform:translate3d(90.11%,0,0)}58.33%{transform:translate3d(85.36%,0,0)}60.42%{transform:translate3d(80.53%,0,0)}62.5%{transform:translate3d(75.07%,0,0)}64.58%{transform:translate3d(69.39%,0,0)}66.67%{transform:translate3d(63.96%,0,0)}68.75%{transform:translate3d(58.50%,0,0)}70.83%{transform:translate3d(54.07%,0,0)}72.92%{transform:translate3d(51.43%,0,0)}75%{transform:translate3d(50.00%,0,0)}77.08%{transform:translate3d(48.57%,0,0)}79.17%{transform:translate3d(45.93%,0,0)}81.25%{transform:translate3d(41.50%,0,0)}83.33%{transform:translate3d(36.04%,0,0)}85.42%{transform:translate3d(30.61%,0,0)}87.5%{transform:translate3d(24.93%,0,0)}89.58%{transform:translate3d(19.47%,0,0)}91.67%{transform:translate3d(14.64%,0,0)}93.75%{transform:translate3d(9.89%,0,0)}95.83%{transform:translate3d(5.66%,0,0)}97.92%{transform:translate3d(2.32%,0,0)}100%{transform:translate3d(0.00%,0,0)}}
.lz__eintrag:nth-child(3) .lz__deck,.lz__eintrag:nth-child(3) .lz__deck img,.lz__eintrag:nth-child(3) .lz__strich{--lz-verz:-3s}
.lz__eintrag:nth-child(5) .lz__deck,.lz__eintrag:nth-child(5) .lz__deck img,.lz__eintrag:nth-child(5) .lz__strich{--lz-verz:-6.5s}
.lz__eintrag:nth-child(7) .lz__deck,.lz__eintrag:nth-child(7) .lz__deck img,.lz__eintrag:nth-child(7) .lz__strich{--lz-verz:-9.5s}
/* Handy-Menü (Ansage 26.10.2026 spät): nur Hauptpunkte, rund halbe Breite, drei gleich große Knöpfe untereinander */
@media (max-width:860px){
  .sm-sub{display:none}
  .sm-prelayer,.sm-panel{width:clamp(13rem,60vw,18rem)}
  .sm-panel{padding:1rem 1.25rem 1.25rem}
  .sm-item{font-size:clamp(1.45rem,6.4vw,1.9rem)}
  .sm-sozial{display:flex;flex-direction:column;gap:.5rem}
  html body .sm-panel .sm-cta,html body .sm-panel .sm-social{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;max-width:none;min-height:2.85rem;padding:.6rem .75rem;box-sizing:border-box;border-radius:var(--r);font:500 .8125rem/1 "Barlow",sans-serif;letter-spacing:.12em;text-transform:uppercase}
  html body .sm-panel .sm-social{border:1px solid rgba(247,241,230,.4);color:var(--papier);background:transparent}
  html body .sm-panel .sm-social .ig-logo{width:1.1rem;height:1.1rem}
}
@media (max-width:860px){html body .sm-panel .sm-cta,html body .sm-panel .sm-social{width:var(--sm-breite,100%);padding:.6rem .4rem;font-size:.6875rem;letter-spacing:.08em;gap:.35rem}.sm-item{font-size:clamp(1.7rem,8.4vw,2.35rem)}}
@media (max-width:860px){html body .sm-panel .sm-cta,html body .sm-panel .sm-social{padding:.6rem .9rem}}
/* Menü mit Holz wie in der Fußzeile (Ansage 26.10.2026 spät) */
.sm-panel{background:linear-gradient(rgba(20,12,6,.62),rgba(20,12,6,.72)),var(--tief) url(../img/holzwand.webp) 0 0/760px auto repeat}
.lstg__in>.lstg__titel{min-height:2.75rem;display:flex;align-items:center}
.lstg__in>.lstg__galerie{margin-top:1.25rem}
/* Leistungs-Unterseiten (Ansage 26.10.2026 spät): unter dem Bildwechsler abwechselnd rechts und links Foto mit Absatz darunter */
.kat-fortschritt span.laeuft{animation-duration:7s}
.lu{grid-column:1/-1;display:grid;gap:clamp(3rem,2rem + 5vw,6rem);margin-top:clamp(3rem,2rem + 4vw,5.5rem)}
.lu__eintrag{margin:0;width:min(62%,44rem)}
.lu__eintrag--rechts{justify-self:end}
.lu__eintrag img{display:block;width:100%;height:auto;max-height:78svh;object-fit:cover;border-radius:var(--r)}
.lu__text{margin:1.1rem 0 0;color:var(--leise);font-size:clamp(1rem,.95rem + .3vw,1.1875rem);line-height:1.6;max-width:40rem}
.lu__gross{max-width:46rem}
.lu__gross p{margin:0 0 1rem;color:var(--leise);font-size:clamp(1.0625rem,1rem + .45vw,1.3125rem);line-height:1.6}
@media (max-width:800px){.lu__eintrag{width:88%}}
.lu-sek{padding-bottom:clamp(3rem,2rem + 4vw,6rem)}
.lu-sek .lu{margin-top:clamp(2.5rem,1.5rem + 4vw,5rem)}
/* Unterseiten Fassung 2 (Ansage 26.10.2026 spät): jedes Foto mit Absatz direkt darunter, Text im Blocksatz und genau so breit wie das Foto,
   abwechselnd links und rechts, am Ende „Anfrage senden“; erster Bildwechsler so groß wie die anderen Fotos, mit Abstand zur Überschrift */
.lstg__in>.lu--block{grid-column:1/-1;margin-top:clamp(1.75rem,1rem + 2.5vw,3rem);display:grid;gap:clamp(3rem,2rem + 4vw,5.5rem)}
.lu--block .lu__eintrag{margin:0;width:min(62%,44rem);justify-self:start}
.lu--block .lu__eintrag--rechts{justify-self:end}
.lu--block .lstg__galerie,.lu--block .lstg__leiste{max-width:none;width:100%;margin:0}
.lu--block .lstg__galerie .kat-fotos img{height:auto;aspect-ratio:3/2}
.lu--block figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.lu--block .lu__text{margin:1rem 0 0;max-width:none;text-align:justify;hyphens:manual;-webkit-hyphens:manual;color:var(--leise);font-size:clamp(1rem,.95rem + .3vw,1.1875rem);line-height:1.6}
.lu--block .lu__text+.lu__text{margin-top:.75rem}
.lu--block .lu__schluss{justify-self:center;margin-top:calc(-1 * clamp(1rem,.5rem + 2vw,2.5rem))}
.lu--block .lu__schluss .knopfreihe{justify-content:center}
@media (max-width:800px){.lu--block .lu__eintrag{width:92%}}

/* Baustoffe (Ansage 27.10.2026, Fassung 3): Streifen unter den Leistungen, gleicher heller Grund wie dort. Eine Reihe großer
   Bilder; der Abschnitt bleibt stehen, beim Scrollen fährt das Bild seitlich raus und das nächste rein (Vorbild Mercedes).
   Rechner und Tablet: ein großes Bild, das nächste halb sichtbar. Handy: fast bildschirmfüllend. Name unten links im Bild.
   Ohne Skript oder bei reduzierter Bewegung: Reihe wischbar, nichts versteckt. */
.bs{--bs-spalt:6px;--bs-h:calc(100svh - var(--kopf) - 6rem);background:var(--papier);color:var(--tinte);position:relative}
.bs__buehne{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding-block:calc(var(--kopf) + 1rem) 2rem;overflow:hidden}
.bs__ueber{margin:0 auto;width:min(100% - var(--rand2),var(--maxw));font:500 .9375rem/1.2 "Barlow",sans-serif;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--tinte)}
.bs__reihe{display:flex;gap:var(--bs-spalt);padding-inline:calc((100vw - min(100vw - var(--rand2),var(--maxw))) / 2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.bs__reihe::-webkit-scrollbar{display:none}
.bs__eintrag{position:relative;margin:0;flex:0 0 auto;width:min(68vw,calc(var(--bs-h) * 1.6));scroll-snap-align:start}
.bs__karte{position:relative;display:block;overflow:hidden;border-radius:var(--r);height:min(var(--bs-h),calc(68vw / 1.25));background:var(--span)}
.bs__karte::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(20,12,6,.55),rgba(20,12,6,0));pointer-events:none}
.bs__karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bs__karte:hover img,.bs__karte:focus-visible img{transform:scale(1.03)}
.bs__pfeil{right:1rem;top:1rem}
.bs__name{position:absolute;left:1.25rem;bottom:1.1rem;z-index:1;margin:0;font:500 1rem/1.2 "Barlow",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.bs.ist-gepinnt .bs__buehne{position:sticky;top:0;height:100svh}
.bs.ist-gepinnt .bs__reihe{overflow:visible;scroll-snap-type:none;will-change:transform}
/* Handy (auch zugeklappte Faltgeräte); aufgeklappte Faltgeräte ab 600 px laufen wie Tablet */
@media (max-width:599px){.bs{--bs-h:calc(100svh - var(--kopf) - 5rem)}.bs__buehne{padding-block:calc(var(--kopf) + .75rem) 1.25rem;gap:.75rem}.bs__reihe{padding-inline:.5rem}.bs__eintrag{width:calc(100vw - 1rem)}.bs__karte{height:min(var(--bs-h),178vw)}.bs__ueber{width:calc(100% - 1rem);font-size:clamp(.6875rem,3.1vw,.875rem);letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){.bs__karte img{transition:none}}
.bst__einleitung{grid-column:1/-1;margin:1.25rem 0 0;max-width:40rem;font-size:var(--t-lead);line-height:1.55;color:var(--leise)}
.bst__bild{position:relative}
.bst__bild::after{content:"";position:absolute;inset:0 0 auto 0;height:40%;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(to bottom,rgba(20,12,6,.55),rgba(20,12,6,0));pointer-events:none}
.bst__name{position:absolute;top:1rem;left:1.1rem;z-index:1;margin:0;font:500 clamp(1rem,.9rem + .5vw,1.375rem)/1.2 "Barlow",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.lu__eintrag--rechts .bst__name{left:auto;right:1.1rem;text-align:right}
.lu--block .bst__eintrag{width:min(54%,40rem)}
@media (max-width:800px){.lu--block .bst__eintrag{width:92%}}
.bst__eintrag{scroll-margin-top:calc(var(--kopf) + 1.5rem)}
.bst .lu__schluss .knopfreihe{gap:.75rem;flex-wrap:wrap}
/* Kontaktleiste (Ansage 27.10.2026): kein Anrufen, nur „Projekt anfragen“ und nur auf den Leistungs-Unterseiten, klein rechts unten statt Balken */
@media (max-width:767px){
  .kleiste{left:auto;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));grid-template-columns:auto;padding:0;background:none;border-top:0}
  .kleiste .knopf{min-height:2.75rem;padding:.5rem 1.1rem;font-size:.8125rem;letter-spacing:.06em;box-shadow:0 .5rem 1.25rem -.5rem rgba(20,12,6,.45)}
  html.mit-kleiste body{padding-bottom:0}
}
/* Unterseiten (Ansage 27.10.2026): unten ein weicher Übergang vom Seitenton in den Holzton des Fußes, darüber kein Text */
.lstg::after{content:"";display:block;height:clamp(7rem,5rem + 8vw,12rem);margin-top:clamp(2rem,1rem + 3vw,4rem);margin-bottom:calc(-1 * clamp(2rem,1rem + 4vw,4rem));background:linear-gradient(to bottom,rgba(43,29,20,0),var(--tief));pointer-events:none}
/* Baustoffe am Handy (Ansage 27.10.2026, Vorbild Mercedes-Reel): zwei Bilder übereinander, je rund 45 % des Bildschirms. Beim Scrollen
   fährt das obere nach links, das untere nach rechts hinaus, das nächste Paar kommt von den Gegenseiten herein. Nur mit Skript (ist-handy). */
@media (max-width:599px){
  .bs.ist-handy .bs__buehne{height:100svh;height:100dvh;min-height:0;padding-block:calc(var(--kopf) + .35rem) .35rem;gap:.35rem}
  .bs.ist-handy .bs__reihe{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:6px;padding-inline:.5rem}
  .bs.ist-handy .bs__eintrag{grid-column:1;width:auto;will-change:transform}
  .bs.ist-handy .bs__eintrag:nth-child(odd){grid-row:1}
  .bs.ist-handy .bs__eintrag:nth-child(even){grid-row:2}
  .bs.ist-handy .bs__karte{height:calc((100svh - var(--kopf) - 2.6rem) / 2);height:calc((100dvh - var(--kopf) - 2.6rem) / 2)}
  .bs.ist-handy .bs__ueber{font-size:clamp(.625rem,2.9vw,.8125rem)}
}
/* Richtung sichtbar machen (Ansage 27.10.2026): oberes Bild fährt nach rechts (Streifen rechts, Name unten links, Pfeil oben rechts),
   unteres nach links (gespiegelt) */
@media (max-width:599px){
  .bs.ist-handy .bs__karte::before{content:"";position:absolute;top:0;bottom:0;right:0;z-index:2;width:7px;background:rgba(255,255,255,.92);pointer-events:none}
  .bs.ist-handy .bs__eintrag:nth-child(even) .bs__karte::before{right:auto;left:0}
  .bs.ist-handy .bs__eintrag:nth-child(odd) .bs__pfeil{right:1.25rem}
  .bs.ist-handy .bs__eintrag:nth-child(even) .bs__pfeil{right:auto;left:1.25rem}
  .bs.ist-handy .bs__eintrag:nth-child(even) .bs__pfeil svg{transform:rotate(180deg)}
  .bs.ist-handy .bs__eintrag:nth-child(even) .bs__name{left:auto;right:1.5rem;text-align:right}
  .bs.ist-handy .bs__eintrag:nth-child(odd) .bs__name{left:1.25rem}
}
/* Unterlängen sichtbar (Ansage 27.10.2026: das g in „Brandenburg“ war abgeschnitten): dd schneidet wegen overflow:hidden bei Zeilenhöhe 1 die Unterlänge ab; Platz nach unten ohne Höhenänderung */
html body .team-leiste dd{padding-bottom:.16em;margin-bottom:-.16em}
/* Über uns (Ansage 27.10.2026): Foto etwas größer, die Angaben stehen dauerhaft unten im Bild (links Holzbau seit 2013, rechts in Berlin und
   Brandenburg), ohne Schatten; dunkle Schrift, weil der Bildboden heller Kies ist (weiß dort unter 2:1). Die Leiste darunter entfällt. */
.bf__im-bild{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:.75rem;padding:0 .75rem .6rem;pointer-events:none;font:600 clamp(.8125rem,.72rem + .35vw,1.0625rem)/1.15 "Barlow Condensed",sans-serif;letter-spacing:.04em;color:#1c140c}
.bf__im-bild span{max-width:50%}
.bf__im-bild span+span{text-align:right}
.bf:not(.bf--an) .bf__ueber{grid-template-columns:minmax(0,clamp(10rem,35vw,27rem)) minmax(0,1fr)}
@media (max-width:599px){.bf:not(.bf--an) .bf__ueber{grid-template-columns:minmax(0,55%) minmax(0,1fr)}.bf__im-bild{padding:0 .5rem .45rem;gap:.4rem;font-size:.75rem;letter-spacing:.02em}}
/* Über uns Fassung 2 (Ansage 27.10.2026): Teamfoto so groß wie die Leistungsbilder darunter (gleiche Breite, 4:3, links), Text darunter;
   der Text tippt sich beim Hinscrollen langsam ein (js/start.js), ohne Skript und bei reduzierter Bewegung steht er sofort da. */
html body .bf:not(.bf--an) .bf__ueber{display:block;padding:clamp(3rem,2rem + 4vw,6rem) calc((100% - min(100% - var(--rand2),var(--maxw))) / 2) clamp(1.5rem,1rem + 2vw,3rem)}
html body .bf:not(.bf--an) .bf__foto{display:block;float:none;width:min(70%,54rem);margin:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in}
html body .bf:not(.bf--an) .bf__foto img{display:block;width:100%;height:auto;flex:none;min-height:0;aspect-ratio:4/3;object-fit:cover;object-position:50% 35%;border-radius:0}
html body .bf:not(.bf--an) .bf__text,html body .bf:not(.bf--an) .bf__absatz{display:block}
html body .bf:not(.bf--an) .bf__text{width:min(70%,54rem);margin-top:clamp(1.25rem,1rem + 1.5vw,2.25rem)}
html body .bf:not(.bf--an) .bf__kopf{margin:0 0 .9rem;padding:0}
html body .bf:not(.bf--an) .bf__absatz p{margin:0 0 .9rem;padding:0;max-width:44rem}
@media (max-width:800px){html body .bf:not(.bf--an) .bf__foto,html body .bf:not(.bf--an) .bf__text{width:88%}}
@media (max-width:599px){html body .bf:not(.bf--an) .bf__text{width:100%}html body .bf:not(.bf--an) .bf__lang{display:inline}.bf__im-bild{font-size:.875rem;padding:0 .7rem .55rem}}
.tz{opacity:0}.tz.da{opacity:1}
.tz-strich{display:inline-block;width:2px;height:1em;margin:0 -2px -.12em 0;background:currentColor;animation:tz-blink .9s steps(1) infinite}
@keyframes tz-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tz{opacity:1}.tz-strich{display:none}}
/* Leistungsnamen (Ansage 27.10.2026): erst blass wie verwaschene Wasserfarbe, beim Hinscrollen füllt sich die Farbe von links mit weicher
   Kante (--f von 0 bis 1 aus js/start.js). Nur mit Skript; ohne Skript und bei reduzierter Bewegung ganz normal. */
.fuell{background:linear-gradient(90deg,var(--tinte) calc(var(--f,0) * 130% - 30%),rgba(42,34,27,.3) calc(var(--f,0) * 130%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Schriftgrößen gegengemessen (Ansage 27.10.2026, 375/768/1440): Über-uns-Text war noch auf die alte schmale Spalte verkleinert
   (14 px, Überschrift 21 px) und steht jetzt wie die übrigen Abschnitte; Leistungsnamen am Rechner größer; Baustoffe-Überzeile am
   Handy lesbarer bei weiter einer Zeile; Startseiten-H1 nie unter 40 px. */
html body .bf:not(.bf--an) #h-ueber{font-size:clamp(2.25rem,1.5rem + 2.6vw,3.75rem);line-height:1.04;margin-bottom:0}
html body .bf:not(.bf--an) .bf__absatz p{font-size:var(--t-text);line-height:1.6}
.lz__titel{font-size:clamp(.875rem,.7rem + .5vw,1.125rem)}
@media (max-width:800px) and (min-height:621px){.start h1{font-size:clamp(2.5rem,10.5vw,3.4rem)}}
@media (max-width:599px){html body .bs__ueber,html body .bs.ist-handy .bs__ueber{font-size:.78rem;letter-spacing:.03em}}
/* Ansage 27.10.2026: Bildtexte weiß und etwas kleiner (dunkel war auf dem Foto schlecht lesbar), weiter ohne Schatten */
.bf__im-bild{color:#fff;font-size:clamp(.75rem,.68rem + .25vw,.9375rem)}
@media (max-width:599px){.bf__im-bild{font-size:.78rem}}
/* Ansage 27.10.2026: Überschrift einzeilig, Größe setzt js/start.js auf Fotobreite */
html body .bf:not(.bf--an) #h-ueber{white-space:nowrap;text-wrap:nowrap;line-height:1.05}
/* Instagram-Vorschau 1:1 wie das Profil (Ansage 27.10.2026, Screenshot): Nutzername oben, Logo, Name, Zahlen, Kategorie, Bio mit Emojis,
   Link, zwei Knöpfe, Highlights, vier Reiter, Raster. Zahlen sind Stand 27.10.2026. */
.ig__name-oben{display:block;padding:.85rem 1.1rem 0;font-weight:700;font-size:1.0625rem;color:#262626;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insta-karte .insta-karte__avatar{box-shadow:0 0 0 3px #fff,0 0 0 5px #c7c7c7;background:#f3eadb}
.ig__rechts{display:flex;flex-direction:column;gap:.35rem;min-width:0;flex:1}
.ig__voll{font-weight:600;font-size:1rem;color:#262626}
.ig__zahlen{display:flex;justify-content:space-between;gap:.75rem;max-width:20rem}
.ig__zahlen span{display:flex;flex-direction:column;font-size:.875rem;color:#262626;line-height:1.25}
.ig__zahlen b{font-size:1.0625rem;font-weight:600}
.insta-karte .insta-karte__bio{padding:.2rem 1.1rem .6rem;line-height:1.45}
.ig__kat{display:block;color:#737373}
.ig__link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.25rem;color:#00376b;font-weight:600}
.ig__pillen{display:flex;gap:.5rem;padding:0 1.1rem .9rem;flex-wrap:wrap}
.ig__pille{display:inline-flex;align-items:center;gap:.4rem;max-width:100%;padding:.4rem .8rem;border:1px solid #dbdbdb;border-radius:999px;font-size:.8125rem;font-weight:600;color:#262626;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig__hls{display:flex;gap:.9rem;padding:.1rem 1.1rem 1rem;overflow:hidden}
.ig__hl{flex:none;width:4.4rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.75rem;color:#262626;text-align:center}
.ig__hl img{width:4rem;height:4rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #c7c7c7}
.ig__hl span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig__tabs{justify-content:space-around;gap:0}
.ig__tabs span{border-top-color:transparent;padding:.75rem 0;color:#8e8e8e}
.ig__tabs span.ist-an{border-top:1px solid #262626;color:#262626}
.ig__tabs svg{width:1.4rem;height:1.4rem}
@media (max-width:520px){.ig__name-oben{padding:.75rem .9rem 0;font-size:.95rem}.ig__zahlen span{font-size:.8125rem}.ig__zahlen b{font-size:.9375rem}.insta-karte .insta-karte__bio{padding:.2rem .9rem .55rem;font-size:.875rem}.ig__pillen{padding:0 .9rem .8rem}.ig__pille{font-size:.75rem;padding:.35rem .65rem}.ig__hls{padding:.1rem .9rem .9rem;gap:.7rem}.ig__hl{width:3.9rem;font-size:.6875rem}.ig__hl img{width:3.5rem;height:3.5rem}}
html body .insta-karte .insta-karte__avatar{padding:.12rem;object-fit:contain}
.ig__pillen{flex-wrap:nowrap}.ig__pille{flex:0 1 auto;min-width:0}.ig__pille svg{flex:none}
/* Website-Panel 29.10.2026: auf schmalen Handys passen beide Pillen nicht in eine Reihe, umbrechen statt mitten im Wort kürzen */
@media (max-width:420px){.ig__pillen{flex-wrap:wrap}.ig__pille{flex:none}}
/* Ansage 27.10.2026 (Mercedes-Video): Über-uns-Foto größer als die Leistungsbilder und mittig, Text darunter größer */
.fw-wort{white-space:nowrap}
html body .bf:not(.bf--an) .bf__foto,html body .bf:not(.bf--an) .bf__text{width:min(100%,64rem);margin-inline:auto}
html body .bf:not(.bf--an) .bf__absatz p{font-size:clamp(1.3125rem,1.05rem + 1.1vw,2rem);line-height:1.32;max-width:none}
@media (max-width:599px){html body .bf:not(.bf--an) .bf__absatz p{line-height:1.36}}
/* Ansage 27.10.2026: Über-uns-Text als Block (Blocksatz wie die Leistungs-Unterseiten, ohne Silbentrennung), beide Absätze als ein
   durchgehender Text, genau so breit wie das Foto darüber */
html body .bf:not(.bf--an) .bf__absatz{text-align:justify;hyphens:manual;-webkit-hyphens:manual}
html body .bf:not(.bf--an) .bf__absatz p{display:inline;margin:0;padding:0}
html body .bf:not(.bf--an) .bf__absatz p+p::before{content:" "}
html body .bf:not(.bf--an) .bf__text{margin-top:clamp(1rem,.8rem + 1vw,1.75rem)}
/* Ansage 27.10.2026: keine Kante zwischen Bildband und Über uns. Hinter den schrägen Bildern wird es nach unten fließend heller bis zum
   Papierton; ab dem vierten Leistungsbild wieder minimal dunkler (--lz-ab setzt js/start.js), Baustoffe bleiben in diesem Ton. */
html body .bf:not(.bf--an){background:var(--papier)}
html body .bf:not(.bf--an) .bf__band{background:linear-gradient(to bottom,var(--span) 0%,var(--span) 25%,var(--papier) 100%)}
html body .bf:not(.bf--an) .bf__ueber{background:transparent}
.lz{--lz-ton:color-mix(in srgb,var(--papier) 72%,var(--span));background:linear-gradient(to bottom,var(--papier) 0,var(--papier) var(--lz-ab,60%),var(--lz-ton) calc(var(--lz-ab,60%) + 70vh),var(--lz-ton) 100%)}
.bs{background:color-mix(in srgb,var(--papier) 72%,var(--span))}
/* Über uns (Ansage 27.10.2026): weitere Fotos liegen deckungsgleich über dem Teamfoto und blenden alle 15 s weich über */
.bf__foto .bf__wechsel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;transition:opacity 1.1s cubic-bezier(.65,0,.35,1);border-radius:inherit}
.bf__foto .bf__wechsel.ist-an{opacity:1}
@media (prefers-reduced-motion:reduce){.bf__foto .bf__wechsel{transition:none}}