/* Stuckateur Saller · Richtung A "Baustellenschild", festgelegt in R3 (27.09.2026)
   Schrift: Big Shoulders Display (Titel), Hanken Grotesk (Text), IBM Plex Mono (Marken)
   Farbe: Kalkweiß, Anthrazit aus der Altseite (#1d2327), Logo-Grün als einziger Akzent
   Signatur: der offene Eckrahmen aus dem Logo, zeichnet sich um Schlüsselbilder */
@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
 /* Feedback 01.10.: ganze Seite Anthrazit (Saller), Kalk bleibt Schriftfarbe; --nacht trennt die früher dunklen Sektionen */
 --nacht:#13181b;
 --kalk:#ebe9e3;--kalk2:#dfddd5;--kalk3:#cfccc2;
 --ink:#1d2327;--ink2:#262e32;--ink3:#3a4348;
 --sig:#3fe633;--sig-d:var(--sig);--grau:#959595;
 /* Streifen aus dem Logo: graue Außenlinie, grüne Innenlinie */
 --st-grau:#c7ccc9;--st-a:28px;--st-l:8px;--st-b:17px;
 --mute:#4f585d;--mute-hell:#aeb6b8;
 --linie:#56616a;
 --pad:clamp(20px,4vw,56px);--pad-l:max(var(--pad),calc(var(--st-a) + var(--st-l) + var(--st-b) + 16px));
 --kopf:84px;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--kalk);font:400 18px/1.6 "Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sig);outline-offset:3px}
::selection{background:var(--sig);color:var(--ink)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--sig);color:var(--ink);padding:12px 16px;font-weight:600}
.skip:focus{top:12px}

.lbl{font:500 14px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
h1,h2,h3,.titel{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.005em;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--ink);background:linear-gradient(180deg,transparent 14%,var(--sig) 14% 90%,transparent 90%);padding-inline:.06em;background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dunkel h1 em,.dunkel h2 em,.hero h1 em,.shero h1 em{color:var(--sig);background:none;padding:0}
.wrap{padding-inline:var(--pad-l) var(--pad);max-width:1440px;margin-inline:auto}
section{padding-block:clamp(72px,10vw,150px)}
.dunkel{background:var(--nacht);color:#fff}
.dunkel a{color:#fff}
.dunkel .lbl{color:var(--sig)}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:20;color:#fff;transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}
/* Hintergrund und Unschärfe auf ::before: backdrop-filter am Kopf selbst würde das Vollbild-Menü (position:fixed) in den Kopf sperren */
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(29,35,39,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:1;transition:opacity .3s}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--kopf);gap:24px}
.kopf.fest::before{opacity:1}
/* Logo-Streifen: laufen am linken Rand durch die ganze Seite */
@keyframes streifen-ein{from{transform:scaleY(0)}}
body::after{transform-origin:50% 0;animation:streifen-ein 1s cubic-bezier(.16,1,.3,1) .15s both;content:"";position:fixed;top:0;bottom:0;left:0;z-index:30;pointer-events:none;width:calc(var(--st-a) + var(--st-l) + var(--st-b));background:linear-gradient(90deg,var(--st-grau) 0 var(--st-a),transparent var(--st-a) calc(var(--st-a) + var(--st-l)),var(--sig) calc(var(--st-a) + var(--st-l)))}
.kopf.weg{transform:translateY(-100%)}
/* Offenes Menü: transform/will-change am Kopf machen ihn zum Bezugsrahmen fuer das fixe Menü,
   dann war der dunkle Grund nur 72 px hoch (Saller, 02. und 05.10.) */
.kopf.menue-auf,.kopf:has(.nav.offen){transform:none!important;will-change:auto}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 24px/1 "Big Shoulders Display";text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.marke img{width:40px;height:40px}
.marke .logo-kopf{width:auto;height:44px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.marke-text{display:flex;flex-direction:column;gap:5px}
.motto{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;color:#c9cdcc}
.motto em{font-style:normal;color:var(--sig)}
.nav{display:flex;gap:28px;align-items:center}
.nav a{text-decoration:none;font:500 14px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;padding-block:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--sig)}
.nav .tel{background:var(--sig);color:var(--ink);padding:12px 18px}
.nav .tel:hover{background:#fff;color:var(--ink)}
.menue-knopf{display:none;background:none;border:1px solid rgba(255,255,255,.35);padding:10px 14px;font:500 14px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.seitenkopf{padding-top:var(--kopf)}

/* ---------- Knöpfe ---------- */
.cta{display:inline-flex;gap:14px;align-items:center;background:var(--sig);color:var(--ink)!important;text-decoration:none;font:800 26px/1 "Big Shoulders Display";text-transform:uppercase;letter-spacing:.05em;padding:20px 28px;border:0;cursor:pointer;transition:background .2s}
.cta:hover{background:#fff}
.cta.hell:hover{background:var(--ink);color:#fff!important}
.cta.rand{background:transparent;color:inherit!important;box-shadow:inset 0 0 0 2px currentColor}
.cta.rand:hover{background:#fff;color:var(--ink)!important;box-shadow:none}
.cta .pf{transition:transform .2s}.cta:hover .pf{transform:translateX(4px)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.link{font:500 14px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:2px solid var(--sig);padding-bottom:3px}
.link:hover{border-bottom-width:5px}.dunkel .link:hover{color:var(--sig)}

/* ---------- Signatur: Eckrahmen aus dem Logo ---------- */
.rahmen{position:relative;isolation:isolate}
.rahmen::before,.rahmen::after{content:"";position:absolute;width:clamp(48px,9%,120px);height:clamp(48px,12%,120px);pointer-events:none;z-index:2;transition:clip-path 1s cubic-bezier(.2,.7,.1,1)}
.rahmen::before{left:-16px;top:-16px;border-left:5px solid var(--grau);border-top:5px solid var(--grau);background:linear-gradient(var(--sig),var(--sig)) 5px 5px/3px 100% no-repeat,linear-gradient(var(--sig),var(--sig)) 5px 5px/100% 3px no-repeat;clip-path:inset(0 100% 100% 0)}
.rahmen::after{right:-16px;bottom:-16px;border-right:5px solid var(--grau);border-bottom:5px solid var(--grau);background:linear-gradient(var(--sig),var(--sig)) right 5px bottom 5px/3px 100% no-repeat,linear-gradient(var(--sig),var(--sig)) right 5px bottom 5px/100% 3px no-repeat;clip-path:inset(100% 0 0 100%)}
.rahmen.da::before,.rahmen.da::after,.keine-bewegung .rahmen::before,.keine-bewegung .rahmen::after{clip-path:inset(0 0 0 0)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:90svh;background:var(--nacht);color:#fff;display:flex;align-items:flex-end;overflow:hidden;padding:0}
.hero-bild{position:absolute;inset:0}
.hero-bild img,.hero-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero-bild video{opacity:0;transition:opacity .8s}.hero-bild video.laeuft{opacity:1}
.hero-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,35,39,.7) 0,rgba(29,35,39,.2) 30%,rgba(29,35,39,.55) 55%,rgba(29,35,39,.94) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:calc(var(--kopf) + 40px);padding-bottom:clamp(28px,5vw,64px)}
.hero .ort{color:#fff;margin-bottom:18px}
.hero h1{font-size:clamp(64px,9.2vw,164px)}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.hero-satz{margin-top:24px;max-width:42ch;font-size:clamp(18px,1.45vw,21px);line-height:1.45;color:#e6e6e2}
.hero-aktion{display:flex;flex-direction:column;gap:12px}
.hero-aktion .cta{justify-content:space-between}
.hero-aktion .cta.rand{justify-content:center}
.hero-aktion .google{margin-top:10px}
.hero h1 .z{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .z>span{display:block}
.hero-fuss{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:32px;flex-wrap:wrap}
.hero-fuss p{max-width:44ch;font-size:20px;color:#e6e6e2}
.google{display:inline-flex;gap:10px;align-items:center;margin-top:18px;text-decoration:none;font:500 14px "IBM Plex Mono";letter-spacing:.04em;color:#e6e6e2}
.google b{color:var(--sig);font-weight:500}
/* R6: Bewertung als ruhige, zentrierte Zeile unter den Knöpfen, Sterne in lesbarer Größe */
.hero-aktion .google{justify-content:center;align-self:stretch;gap:12px;margin-top:6px}
.google .sterne{font:18px/1 system-ui,sans-serif;letter-spacing:1px}
.google b{font:800 22px/1 "Big Shoulders Display";letter-spacing:.02em;margin-right:4px}
.google:hover{color:#fff}
.sterne{letter-spacing:2px;color:var(--sig)}
.hero .knopfreihe{justify-content:flex-end}

/* ---------- Zahlen ---------- */
.zahlen{background:var(--nacht);color:#fff;padding:0;position:relative}
.zahlen{border-top:1px solid var(--ink3)}
.zahlen .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.zahlen .wrap>div{padding:36px 0 40px clamp(16px,3vw,40px);border-left:1px solid var(--ink3)}
.zahlen .wrap>div:first-child{border-left:0;padding-left:0}
.zahlen b{display:block;font:800 clamp(56px,8vw,120px)/.9 "Big Shoulders Display";color:var(--sig)}
.zahlen span{color:#c9cdcc;font-size:17px}

/* ---------- Kopf einer Sektion ---------- */
.sek-kopf{display:block;margin-bottom:clamp(36px,6vw,80px);align-items:end}
.sek-kopf h2{font-size:clamp(48px,7.5vw,120px)}
.sek-kopf .rechts{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}

/* ---------- Leistungen (Startseite) ---------- */
.zeilen{border-top:2px solid var(--kalk3)}
.zeile{display:grid;grid-template-columns:120px 1.1fr 1.6fr 64px;gap:clamp(16px,3vw,48px);padding:36px 0;border-bottom:1px solid var(--linie);align-items:start;text-decoration:none;position:relative}
.zeile h3{font-size:clamp(40px,5vw,72px);transition:color .2s}
.zeile ul{list-style:none;padding:0;columns:2;column-gap:32px}
.zeile li{padding:7px 0;border-bottom:1px solid var(--kalk3);break-inside:avoid}
.zeile li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--sig-d);margin-right:12px;vertical-align:middle}
.zeile .pf{font:800 48px/1 "Big Shoulders Display";justify-self:end;transition:transform .25s}
.zeile:hover h3{text-decoration:underline 5px var(--sig);text-underline-offset:6px}.zeile:hover .pf{transform:translateX(6px)}

/* ---------- Film ---------- */

/* ---------- Referenzen-Streifen (Startseite) ---------- */
.ref{background:var(--ink2)}
.streifen{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.streifen figure{position:relative;overflow:hidden;background:var(--ink)}
.streifen img{width:100%;height:100%;object-fit:cover;transform:scale(1.16)}
.streifen figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;padding:8px 12px}
.s1{grid-column:span 7;aspect-ratio:3/2}.s2{grid-column:span 5;aspect-ratio:3/2}
.s3{grid-column:span 4;aspect-ratio:4/5}.s4{grid-column:span 4;aspect-ratio:4/5}.s5{grid-column:span 4;aspect-ratio:4/5}
.s6{grid-column:span 5;aspect-ratio:4/3}.s7{grid-column:span 7;aspect-ratio:16/9}
.ref-fuss{display:flex;justify-content:flex-end;margin-top:28px}

/* ---------- Stimmen ---------- */
.stimmen .wrap{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,6vw,96px)}
.note{font:800 clamp(120px,16vw,240px)/.8 "Big Shoulders Display";color:var(--sig)}
.note-zu{margin-top:16px;color:#c9cdcc;max-width:28ch}
.stimmen .knopfreihe{margin-top:28px}
.zitate{display:grid;gap:0;border-top:1px solid var(--ink3)}
.zitat{padding:28px 0;border-bottom:1px solid var(--ink3)}
.zitat p{font-size:clamp(20px,1.8vw,26px);line-height:1.45;max-width:58ch}
.zitat footer{margin-top:14px;color:var(--mute-hell)}
.g-karten{border-top:0;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.g-karte{background:#fff;color:#202124;border-radius:12px;padding:20px 22px 22px;font-family:"Hanken Grotesk",Arial,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.g-karte header{display:flex;align-items:center;gap:12px}
.g-ava{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font:500 19px/1 Arial,sans-serif}
.g-wer{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.g-wer b{font-weight:600;font-size:16px}
.g-wer small{font-size:13px;color:#5f6368}
.g-logo{flex:none;width:22px;height:22px}
.g-sterne{margin-top:12px;color:#fbbc04;font-size:18px;letter-spacing:2px;line-height:1}
.g-karte p:last-child{margin-top:10px;font-size:16px;line-height:1.55;color:#3c4043}
.partner-text{font-size:20px;max-width:52ch}
/* Feedback 01.10.: dunkle Partnerlogos brauchen hellen Grund, darum Kalkstreifen auf Anthrazit */
.marken-band{margin-top:clamp(28px,4vw,48px);overflow:hidden;background:var(--kalk);padding-block:clamp(20px,2.6vw,32px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marken-spur{display:flex;width:max-content;animation:marken 38s linear infinite}
.marken-satz{display:flex;align-items:center;gap:clamp(48px,6vw,96px);padding-right:clamp(48px,6vw,96px)}
.marken-satz img{height:clamp(34px,3.6vw,50px);width:auto;opacity:.9}
.marken-satz img[src*="henning"],.marken-satz img[src*="tsg"]{height:clamp(50px,5.2vw,72px)}
@keyframes marken{to{transform:translateX(-50%)}}
.stimmen .hinweis{margin-top:18px;color:var(--mute-hell);font-size:15px;max-width:60ch}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.team h2{font-size:clamp(48px,7vw,110px);margin:14px 0 24px}
.team p{max-width:54ch;margin-bottom:16px}
.werte{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;border-top:2px solid var(--kalk3)}
.werte div{padding:16px 16px 20px 0;border-bottom:1px solid var(--linie)}
.werte b{display:block;font:800 30px/1 "Big Shoulders Display";text-transform:uppercase;margin-bottom:6px}
.team-bild img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gesichter{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.6vw,36px);margin-top:clamp(56px,8vw,112px)}
.gesicht button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.gesicht button:focus-visible{outline:3px solid var(--sig);outline-offset:4px}
/* Team (Feedback Saller 01.10.): schwarz-weiss mit Name, beim Drueberfahren/Antippen Farbe und Spruch */
.gesicht{margin:0}
.gesicht.zeigt img,.gesicht:hover img,.gesicht:focus-within img{filter:none}
.gesichter img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);transition:filter .4s}
.gesichter figcaption{margin-top:12px;font-size:17px;display:flex;flex-direction:column;gap:6px}
.gesichter figcaption b{font:800 22px/1 "Big Shoulders Display";text-transform:uppercase;letter-spacing:.04em}
.gesicht .spruch{font-size:15px;line-height:1.4;color:var(--mute-hell);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.gesicht.zeigt .spruch,.gesicht:hover .spruch,.gesicht:focus-within .spruch{opacity:1;transform:none}
.gesichter.gross{grid-template-columns:repeat(4,1fr);margin-top:0}
.team-seite{padding-top:clamp(40px,6vw,72px)}
.team-kaffee{padding-top:0}
.mehr-link{margin-top:clamp(24px,3vw,40px)}
.clips.gross{grid-template-columns:repeat(auto-fill,minmax(min(260px,42vw),1fr));gap:16px}

/* Kaffeezähler (Bot zählt, api/kaffee); ohne Zahl bleibt er versteckt */
.kaffee{display:grid;grid-template-columns:auto 1fr;gap:12px clamp(20px,4vw,56px);align-items:start;margin-top:clamp(48px,6vw,80px);padding-top:18px;border-top:2px solid var(--kalk3)}
.kaffee[hidden]{display:none}
.kaffee .lbl{color:var(--mute-hell)}
/* Gipsplatte: helles Brett mit feinem Korn, Bleistift darauf */
.kaffee-brett{position:relative;color:var(--ink);padding:18px 22px 16px;background:#f3f2ee radial-gradient(rgba(0,0,0,.05) .6px,transparent .8px) 0 0/5px 5px;box-shadow:inset 0 0 0 1px rgba(29,35,39,.08),0 10px 24px -14px rgba(29,35,39,.35);max-width:640px}
.kaffee-zahl{margin:0 0 8px;font:800 clamp(34px,4vw,52px)/1 "Big Shoulders Display";text-transform:uppercase}
.kaffee-zahl b{font-weight:800;font-variant-numeric:tabular-nums;border-bottom:6px solid var(--sig)}
.kaffee-striche{display:block;width:100%;height:auto;max-height:260px}
.kaffee-striche path{fill:none;stroke:#3a4043;stroke-width:3.2;stroke-linecap:round;opacity:.85;stroke-dasharray:1;stroke-dashoffset:1}
.kaffee-striche.zeichnet path{animation:strich .22s ease-out forwards}
.kaffee-striche.fertig path{stroke-dashoffset:0}
@keyframes strich{to{stroke-dashoffset:0}}
.ohne-striche .kaffee-striche{display:none}
.kaffee-rest{margin:4px 0 0;font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--mute)}
.kaffee-rest:empty{display:none}
.kaffee-notiz{grid-column:2;color:var(--mute-hell);font-size:16px;max-width:60ch;margin:0}
.kaffee-demo{color:var(--kalk)}
/* Kachel im Zahlenband: fünfte Spalte, sobald der Bot eine Zahl liefert */
.kaffee-kachel[hidden]{display:none}
.zahlen .wrap.mit-kaffee{grid-template-columns:repeat(5,1fr)}

/* ---------- Einsatzgebiet ---------- */
.gebiet{background:var(--ink2)}
.gebiet .wrap{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,6vw,96px)}
.gebiet p{max-width:44ch;margin-top:20px}
.orte{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 .5em;font:800 clamp(34px,4.6vw,76px)/1.05 "Big Shoulders Display";text-transform:uppercase}
.orte li{color:var(--mute-hell)}
.orte li::after{content:"·";margin-left:.5em;color:var(--kalk3)}
.orte li:last-child::after{content:""}
.orte .mitte{color:var(--kalk)}
.orte .mitte::before{content:"";display:inline-block;width:.32em;height:.32em;background:var(--sig);margin-right:.18em;vertical-align:.12em}

/* ---------- Aktuelles ---------- */
.akt-liste{list-style:none;padding:0;display:grid;gap:clamp(24px,3vw,40px)}
.akt-kompakt .akt-liste{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.akt-liste li{border-top:2px solid var(--kalk3);padding-top:18px}
.akt-datum{font:500 14px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;color:var(--mute-hell)}
.akt-titel{font:800 clamp(30px,3vw,44px)/1 "Big Shoulders Display";text-transform:uppercase;margin:8px 0 12px}
.akt-bild{width:100%;aspect-ratio:4/3;object-fit:cover;margin:12px 0}
.akt-kurz{font-weight:600;margin-bottom:10px}
.akt-termin{font:500 15px/1.4 "IBM Plex Mono";letter-spacing:.02em;border-left:6px solid var(--sig);padding:4px 0 4px 12px;margin:0 0 12px}
.akt-termin span{text-transform:uppercase;letter-spacing:.06em;color:var(--mute-hell);margin-right:.4em}
.akt-text p{margin-bottom:12px;max-width:65ch}
.akt-galerie{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin-top:16px;max-width:900px}
.akt-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover}
.akt-mehr a{font:500 14px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em}

/* ---------- Fragen ---------- */
.fragen{border-top:2px solid var(--kalk3);max-width:980px;margin-left:auto}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font:800 clamp(26px,2.6vw,38px)/1.05 "Big Shoulders Display";text-transform:uppercase}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-size:1.3em;color:var(--sig-d);transition:transform .25s;flex:none}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding:0 0 26px;max-width:62ch}

/* ---------- Partner ---------- */
.partner{padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--linie)}
.partner .wrap{display:grid;grid-template-columns:1fr 3fr;gap:32px}
.partner dl{display:grid;grid-template-columns:auto 1fr;gap:10px 28px}
.partner dt{font:500 14px/1.9 "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;color:var(--mute-hell)}
.partner dd{font-size:20px}

/* ---------- Kontakt-Block ---------- */
.kontakt .raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.kontakt h2{font-size:clamp(56px,9vw,150px);margin:14px 0 28px}
.kontakt .lead{font-size:20px;max-width:40ch;margin-bottom:28px;color:#e6e6e2}
.kontakt dl{display:grid;grid-template-columns:110px 1fr;gap:12px 0}
.kontakt dt{color:#9aa3a6}

/* ---------- Unterseiten ---------- */
.shero{background:var(--nacht);color:#fff;padding-block:calc(var(--kopf) + clamp(40px,7vw,100px)) clamp(40px,6vw,80px)}
.shero h1{font-size:clamp(64px,12vw,190px);max-width:12ch}
.shero .lbl{color:var(--sig);margin-bottom:16px}
.shero h1 em{color:var(--sig)}
.shero h1 .z{display:block;overflow:hidden;padding-bottom:.04em}
.shero h1 .z>span{display:block}
.shero-fuss{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:28px;flex-wrap:wrap}
.shero p{max-width:52ch;font-size:20px;color:#e6e6e2}
.sprung{display:flex;flex-wrap:wrap}
.sprung a,.sprung button{font:500 14px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border:1px solid #4a555a;background:none;padding:12px 18px;margin:0 -1px -1px 0;cursor:pointer;color:inherit}
.sprung a:hover,.sprung button:hover,.sprung [aria-pressed="true"]{background:var(--sig);color:var(--ink);border-color:var(--sig)}

/* Leistungen */
.bereich{border-top:2px solid var(--kalk3)}
.bereich:nth-of-type(even){background:var(--ink2)}
.bereich-raster{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,80px);align-items:start}
.bereich-kopf{position:sticky;top:calc(var(--kopf) + 24px)}
.bereich-kopf h2{font-size:clamp(48px,6.5vw,104px);margin:14px 0 20px}
.bereich-kopf p{max-width:44ch;margin-bottom:28px;color:var(--mute-hell)}
.bereich-kopf img{width:100%;aspect-ratio:3/2;object-fit:cover}
.liste{border-top:2px solid var(--kalk3)}
.liste>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(12px,2.4vw,32px);padding:22px 0;border-bottom:1px solid var(--linie)}
.liste dt{overflow-wrap:anywhere;hyphens:auto;font:800 clamp(24px,2.3vw,32px)/1 "Big Shoulders Display";text-transform:uppercase;letter-spacing:.01em}
.liste dd{color:var(--mute-hell)}

/* Referenzen */
.galerie{columns:3 320px;column-gap:12px}
.galerie figure{break-inside:avoid;margin-bottom:12px;position:relative;background:var(--ink)}
.galerie button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.galerie img{width:100%;transition:opacity .3s}
.galerie button:hover img{opacity:.88}
.galerie figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;padding:6px 10px;font:500 13px/1.3 "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em}
.galerie figure[hidden]{display:none}
.filter{margin-bottom:clamp(28px,4vw,48px)}
.filter button{border-color:var(--linie)}
.leuchte{border:0;padding:0;background:rgba(15,18,20,.96);max-width:none;max-height:none;width:100vw;height:100dvh;color:#fff}
.leuchte::backdrop{background:rgba(15,18,20,.96)}
.leuchte[open]{display:grid;grid-template-rows:auto 1fr auto}
.leuchte-kopf{display:flex;justify-content:space-between;align-items:center;padding:12px var(--pad)}
.leuchte figure{display:grid;place-items:center;min-height:0;padding:0 var(--pad)}
.leuchte img{max-width:100%;max-height:calc(100dvh - 160px);width:auto;object-fit:contain}
.leuchte figcaption{padding:12px var(--pad) 20px;color:#c9cdcc;text-align:center}
.leuchte button{background:none;border:1px solid #4a555a;color:#fff;padding:10px 16px;cursor:pointer;font:500 14px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em}
.leuchte button:hover{background:var(--sig);color:var(--ink);border-color:var(--sig)}
.leuchte-nav{display:flex;gap:8px}

/* Formular */
.formular-raster{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,6vw,96px);align-items:start}
.formular-raster aside dl{display:grid;grid-template-columns:110px 1fr;gap:12px 0;margin-top:24px}
.formular-raster aside dt{color:var(--mute-hell)}
.formular-raster aside p{max-width:44ch}
form.anfrage{display:grid;gap:18px}
.feld{display:grid;gap:6px;align-content:start}
.feld label,.feld legend{font-weight:600}
.feld small{color:var(--mute-hell);font-size:15px}
.feld input,.feld select,.feld textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid #8f9594;padding:14px;border-radius:0;width:100%}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:3px solid var(--sig);outline-offset:0;border-color:var(--ink)}
.feld textarea{min-height:140px;resize:vertical}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fotos{border:2px dashed #8f9594;background:var(--ink2);color:var(--kalk);padding:22px;display:grid;gap:10px;justify-items:start;cursor:pointer}
.fotos:hover,.fotos.drueber{border-color:var(--sig-d);background:var(--ink3)}
.fotos input{position:absolute;opacity:0;width:1px;height:1px}
.fotos:focus-within{outline:3px solid var(--sig)}
.fotos .titel{font-size:30px}
.vorschau{display:flex;gap:8px;flex-wrap:wrap}
.vorschau img{width:88px;height:88px;object-fit:cover}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.einwilligung{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.einwilligung input{width:22px;height:22px;margin-top:3px;flex:none;accent-color:var(--sig-d)}
.meldung{padding:18px 20px;font-weight:600;border-left:6px solid var(--sig-d);background:#fff}
.meldung.fehler{border-color:#b3261e}
form.anfrage .cta{justify-self:start}
form.anfrage .cta[disabled]{opacity:.6;cursor:wait}

/* Rechtstexte */
.recht{max-width:760px}
.recht h2{font-size:clamp(34px,4vw,52px);margin:48px 0 14px;hyphens:auto;overflow-wrap:break-word}
.recht h3{font-size:26px;margin:28px 0 8px}
.recht p,.recht ul{margin-bottom:14px}
.offen{background:#fff3c4;border-left:6px solid #c79a00;padding:2px 8px;font-weight:600}
.offen:not(.nav),.offen-block{color:var(--ink)} /* gelber Platzhalter bleibt dunkel beschriftet, auch auf Anthrazit */
.offen-block{background:#fff3c4;border-left:6px solid #c79a00;padding:18px 20px;margin:20px 0}

/* ---------- Fuß ---------- */
.fuss{background:#14181a;color:#b4bbbd;padding-block:clamp(48px,6vw,80px) 28px;font-size:16px}
.fuss .oben{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid #2a3236}
.fuss .marke{color:#fff;margin-bottom:16px}
.fuss h2{font:500 14px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;color:var(--sig);margin-bottom:12px}
.fuss ul{list-style:none;padding:0;display:grid;gap:8px}
.fuss a{color:#e6e6e2;text-decoration:none}.fuss a:hover{color:var(--sig)}
.fuss .unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:15px}
.anrufleiste{display:none}
.nach-oben{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:14;width:52px;height:52px;border:0;border-radius:50%;background:var(--sig);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s}
.nach-oben.da{opacity:1;visibility:visible;transform:none}
.nach-oben svg{width:22px;fill:currentColor}
.nach-oben:focus-visible{outline:3px solid #fff;outline-offset:3px}
.karte{position:relative;margin-top:28px;aspect-ratio:4/3;max-height:420px;width:100%;border:1px solid rgba(127,127,127,.4);background:repeating-linear-gradient(0deg,rgba(127,127,127,.12) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(127,127,127,.12) 0 1px,transparent 1px 40px);overflow:hidden}
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.karte-laden{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
.karte-laden svg{width:40px;fill:var(--sig)}
.karte-laden b{font:800 28px/1 "Big Shoulders Display";text-transform:uppercase;letter-spacing:.03em}
.karte-laden small{max-width:34ch;font-size:13px;opacity:.7}
.karte-laden:hover b{color:var(--sig)}
.karte-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px}

/* ---------- Bearbeiten-Modus (inhalte.js) ---------- */
.bearbeiten [data-edit]{outline:2px dashed var(--sig-d);outline-offset:4px;cursor:text}
.bearbeiten [data-edit]:focus{outline-style:solid}
.edit-leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:#fff;padding:14px var(--pad);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:16px}
.edit-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.edit-knoepfe button{background:none;color:#fff;border:1px solid #4a555a;padding:10px 14px;cursor:pointer}
.edit-knoepfe .edit-speichern{background:var(--sig);color:var(--ink);border-color:var(--sig);font-weight:700}
.edit-status.ist-fehler{color:#ffb4ab}

/* ---------- Bewegung ---------- */
.js .auf{opacity:0;transform:translateY(28px)}
.keine-bewegung .auf{opacity:1!important;transform:none!important}

/* ---------- Mobil ---------- */
@media (max-width:980px){
 .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:var(--pad);transform:translateY(-100%);transition:transform .35s;visibility:hidden}
 .nav.offen{transform:none;visibility:visible;border-left:0;background:var(--ink);font-weight:inherit} /* .offen ist auch die gelbe Platzhalterklasse */
 .nav a{font:800 44px/1.1 "Big Shoulders Display";letter-spacing:.02em}
 .nav .tel{margin-top:16px;font-size:30px}
 .menue-knopf{display:block;position:relative;z-index:2}
 .zeile{grid-template-columns:1fr;gap:12px}.zeile .pf{display:none}
 .hero-raster,.stimmen .wrap,.team,.gebiet .wrap,.partner .wrap,.kontakt .raster,.bereich-raster,.formular-raster{grid-template-columns:1fr}
 .bereich-kopf{position:static}
 .fuss .oben{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
 .kaffee{grid-template-columns:1fr}
 .kaffee-notiz{grid-column:1}
 .g-karten{grid-template-columns:1fr}
 :root{--kopf:68px;--st-a:13px;--st-l:4px;--st-b:9px}
 .marke{font-size:21px}.marke img{width:34px;height:34px}.marke .logo-kopf{width:auto;height:38px}
 .hero h1{font-size:clamp(60px,19vw,120px)}
 .hero-bild img{object-position:30% 40%}
 .hero-bild::after{background:linear-gradient(180deg,rgba(29,35,39,.6) 0,rgba(29,35,39,.2) 28%,rgba(29,35,39,.35) 50%,rgba(29,35,39,.9) 100%)}
 .hero-fuss p{font-size:18px}
 .hero .knopfreihe{justify-content:flex-start}
 .cta{font-size:22px;padding:18px 22px}
 .zahlen .wrap{grid-template-columns:1fr 1fr}
 .zahlen .wrap>div,.zahlen .wrap>div:first-child{border-left:0;padding:24px 12px 26px 0;border-top:1px solid var(--ink3)}.zahlen .wrap>div:nth-child(-n+2){border-top:0}
 .zahlen .wrap>div:nth-child(even){padding-left:16px;border-left:1px solid var(--ink3)}
 .zahlen span{font-size:15px}
 .zahlen .wrap.mit-kaffee{grid-template-columns:1fr 1fr}
 .zahlen .wrap>.kaffee-kachel{grid-column:1/-1;padding-left:0;border-left:0;border-top:1px solid var(--ink3)}
 .motto{font-size:9.5px;letter-spacing:.12em}
 .zeile ul{columns:1}
 .streifen{gap:8px}.s1,.s2,.s6,.s7{grid-column:span 12}.s3,.s4{grid-column:span 6}.s5{grid-column:span 12;aspect-ratio:3/2}
 .werte{grid-template-columns:1fr}
 .gesichter,.gesichter.gross{grid-template-columns:repeat(2,1fr)}
 .gesichter figcaption b{font-size:19px}
 .gesicht .spruch{font-size:14px}
 .liste>div{grid-template-columns:1fr;gap:6px}
 .zwei{grid-template-columns:1fr}
 .partner dl{grid-template-columns:1fr;gap:2px}
 .partner dd{margin-bottom:12px}
 .fuss .oben{grid-template-columns:1fr}
 .anrufleiste{display:flex;position:fixed;inset:auto 0 0 0;z-index:15;transition:transform .3s}
 .anrufleiste.weg{transform:translateY(100%)}
 .nach-oben{bottom:76px}
 .anrufleiste a{flex:1;text-align:center;padding:16px 8px;text-decoration:none;font:800 22px/1 "Big Shoulders Display";text-transform:uppercase;letter-spacing:.05em}
 .anrufleiste a:first-child{background:var(--sig);color:var(--ink)}.anrufleiste a:last-child{background:var(--ink);color:#fff;border-top:1px solid var(--ink3)}
 .fuss{padding-bottom:96px}
 .rahmen::before{left:-10px;top:-10px}.rahmen::after{right:-10px;bottom:-10px}
}
/* ---------- Feedback R4 (29.09.2026) ---------- */
/* Zoomende Bilder (Teamfoto 1,12) dürfen den Abschnitt nicht seitlich verbreitern */
main>section{overflow-x:clip}
/* Motto bündig unter dem Namen: beide Zeilen gleich breit */
.motto{display:flex;justify-content:space-between;align-items:baseline;letter-spacing:.1em}
.motto i{font-style:normal;color:#7d8689}
.motto>:last-child{margin-right:-.1em}

/* Strich-Varianten R5: <html data-strich="0..4">, gewählt über ?strich=, Umschalter unten rechts.
   0 = bisher (Randlinie links). 1–4 schalten die Randlinie ab und bauen den Streifen anders ein. */
[data-strich="1"],[data-strich="2"],[data-strich="3"],[data-strich="4"]{--pad-l:var(--pad);--band-h:calc(var(--st-a) + var(--st-l) + var(--st-b));--band:linear-gradient(180deg,var(--st-grau) 0 var(--st-a),transparent 0 calc(var(--st-a) + var(--st-l)),var(--sig) 0 var(--band-h))}
[data-strich="1"] body::after,[data-strich="2"] body::after,[data-strich="3"] body::after{display:none}

/* 1 · Logo-Rahmen: der Hero steht im offenen Doppelrahmen aus dem Logo, der Titel bricht unten heraus wie das S; Bilder tragen die Ecke innen */
[data-strich="1"] .hero::before,[data-strich="1"] .hero::after{content:"";position:absolute;z-index:1;pointer-events:none}
[data-strich="1"] .hero::before{left:var(--pad);right:var(--pad);top:calc(var(--kopf) + 20px);bottom:clamp(90px,14vw,190px);border-left:var(--st-a) solid var(--st-grau);border-top:var(--st-a) solid var(--st-grau);border-right:var(--st-a) solid var(--st-grau);-webkit-mask:linear-gradient(90deg,#000 calc(100% - var(--st-a)),transparent 0) 0 0/100% 100% no-repeat,linear-gradient(#000,#000) 100% 0/var(--st-a) 38% no-repeat;mask:linear-gradient(90deg,#000 calc(100% - var(--st-a)),transparent 0) 0 0/100% 100% no-repeat,linear-gradient(#000,#000) 100% 0/var(--st-a) 38% no-repeat}
[data-strich="1"] .hero::after{left:calc(var(--pad) + var(--st-a) + var(--st-l));width:62%;top:calc(var(--kopf) + 20px + var(--st-a) + var(--st-l));bottom:calc(clamp(90px,14vw,190px) - var(--st-b) * 3);border-left:var(--st-b) solid var(--sig);border-bottom:var(--st-b) solid var(--sig)}
[data-strich="1"] .hero .wrap{padding-left:calc(var(--pad) + var(--st-a) + var(--st-l) + var(--st-b) + 18px)}
[data-strich="1"] .hero h1{text-shadow:0 2px 24px rgba(29,35,39,.5)}
[data-strich="1"] .streifen figure::after,[data-strich="1"] #team figure::after{content:"";position:absolute;left:14px;top:14px;width:42%;height:46%;z-index:2;pointer-events:none;border-left:6px solid var(--st-grau);border-top:6px solid var(--st-grau);background:linear-gradient(var(--sig),var(--sig)) 5px 5px/4px 100% no-repeat,linear-gradient(var(--sig),var(--sig)) 5px 5px/100% 4px no-repeat}
[data-strich="1"] #team figure{position:relative}

/* 2 · Durch die Schrift: ein breites Band läuft quer über die ganze Seite, hinter dem Titel durch wie die Linie hinter dem S */
[data-strich="2"] .hero h1{position:relative}
[data-strich="2"] .hero h1::before{content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:.6em;height:.44em;background:linear-gradient(180deg,var(--st-grau) 0 46%,transparent 0 62%,var(--sig) 0);transform-origin:0 50%;animation:band-quer 1.4s cubic-bezier(.16,1,.3,1) .5s both}
[data-strich="2"] main section h2:not(.sr):not(.lbl){position:relative;z-index:0}
[data-strich="2"] main section h2:not(.sr):not(.lbl)::before{content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:.42em;height:calc(var(--band-h) * 1.1);background:var(--band);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
[data-strich="2"] main section h2.strich-da:not(.sr):not(.lbl)::before,.keine-bewegung[data-strich="2"] main section h2:not(.sr):not(.lbl)::before{transform:none}
@keyframes band-quer{from{transform:scaleX(0)}to{transform:none}}

/* 3 · Spachtel-Bahn (R9): eine durchgehende Bahn aus Weiß und Grün, als SVG über main (site.js).
   Die Trenner sind nur noch Abstandhalter, in deren Mitte die Bahn quer läuft. */
.st-trenner{display:none}
[data-strich="3"] .st-trenner{display:block;height:40px}
[data-strich="3"] .st-trenner[hidden]{display:none}
main{position:relative}
/* Bahn belegt rand 6 + Breite 40 = 46px am Rand, Text hält 16px Abstand (Messung 01.10.) */
[data-strich="3"] .wrap{padding-inline:max(var(--pad),64px)}
.bahn{display:none}
[data-strich="3"] .bahn{display:block;position:absolute;left:0;top:0;z-index:3;pointer-events:none;overflow:hidden}
.bahn-weiss>path,.bahn-gruen>path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bahn-schatten{stroke:rgba(20,24,26,.28)}
.bahn-gruen .bahn-schatten{stroke:rgba(18,70,14,.34)}
.bahn-korn{mix-blend-mode:soft-light}
.bahn-glanz{opacity:.75}
.bahn-frisch{opacity:.55}
.bahn-kelle{opacity:0;transition:opacity .3s cubic-bezier(.22,1,.36,1)}
.bahn-kelle.an{opacity:1}
.keine-bewegung .bahn-kelle,.keine-bewegung .bahn-frisch{display:none}

/* 4 · Scroll-Balken: das Band liegt oben quer und füllt sich beim Lesen von links nach rechts */
[data-strich="4"] body::after{animation:none;inset:0 0 auto 0;width:auto;height:var(--band-h);background:var(--band);transform:scaleX(var(--lauf,0));transform-origin:0 50%;z-index:30;box-shadow:0 2px 10px rgba(0,0,0,.25)}
[data-strich="4"] .kopf{top:var(--band-h)}

/* Umschalter, nur sichtbar, wenn über den Link gewählt wurde */
.strich-wahl{display:none}
[data-strich-wahl] .strich-wahl{display:flex;align-items:center;gap:4px;position:fixed;right:16px;bottom:16px;z-index:40;background:var(--ink);color:#fff;padding:6px 8px 6px 12px;border:1px solid var(--ink3);box-shadow:0 8px 24px rgba(0,0,0,.25);font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em}
.strich-wahl span{margin-right:6px;color:var(--mute-hell)}
.strich-wahl button{width:36px;height:36px;border:1px solid var(--ink3);background:transparent;cursor:pointer;font:800 18px/1 "Big Shoulders Display"}
.strich-wahl button[aria-pressed="true"]{background:var(--sig);color:var(--ink);border-color:var(--sig)}
.strich-wahl b{font-weight:500;margin-left:8px;min-width:15ch}
[data-strich-wahl] .nach-oben{bottom:84px}

@media (max-width:720px){
 /* Hero mobil: nur Titel und ein Knopf; Anrufen steht in der Leiste unten, Google im Zahlenband direkt darunter */
 .hero{min-height:76svh}
 .hero .ort,.hero-satz,.hero-aktion .cta.rand,.hero-aktion .google{display:none}
 .hero h1{font-size:clamp(52px,16vw,96px)}
 .hero-raster{gap:28px}
 [data-strich="1"] .hero::before{top:calc(var(--kopf) + 12px);bottom:120px}
 [data-strich="1"] .hero::after{top:calc(var(--kopf) + 12px + var(--st-a) + var(--st-l));bottom:calc(120px - var(--st-b) * 3);width:78%}
 [data-strich="3"] .st-trenner{height:23px}
 [data-strich="3"] .wrap{padding-inline:max(var(--pad),44px)} /* Bahn belegt 25px (rand 2 + 23), dazu 16px Luft zum Text */
 [data-strich-wahl] .strich-wahl{bottom:72px;right:12px;left:12px;justify-content:center}
 .strich-wahl b{display:none}
 [data-strich-wahl] .nach-oben{bottom:132px}
}

@media (prefers-reduced-motion:reduce){
 .marken-spur{animation:none;width:auto}
 .marken-satz{flex-wrap:wrap;justify-content:center;row-gap:28px;padding-right:0}
 .marken-satz+.marken-satz{display:none}
 .marken-band{-webkit-mask-image:none;mask-image:none}
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Baustellenvideos vom Kunden (Feedback 01.10.) */
.videos{padding-block:clamp(48px,7vw,96px)}
.videos h2{margin-bottom:clamp(20px,3vw,36px)}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,38vw),1fr));gap:12px}
.clip{margin:0;background:var(--nacht)}
.clip video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--nacht)}
.clip figcaption{padding:8px 10px;font:500 14px/1.3 "IBM Plex Mono",monospace;color:var(--mute-hell)}

/* ---------- Runde 02.10. (Johannes): Startseite schlanker ---------- */
/* Sprungleiste unter „Von unseren Baustellen“ */
.baustellen-sprung{display:flex;flex-wrap:wrap;gap:10px}
.baustellen-sprung a{font:500 15px/1 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:#fff;text-decoration:none;padding:12px 16px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);background:rgba(29,35,39,.35);transition:background .2s,color .2s,box-shadow .2s}
.baustellen-sprung a:hover,.baustellen-sprung a:focus-visible{background:var(--sig);color:var(--ink);box-shadow:none}
/* Leistungen aufklappbar */
.zeilen.klapp .zeile{display:block;padding:0}
.zeilen.klapp summary{display:grid;grid-template-columns:1fr 64px;gap:clamp(16px,3vw,48px);align-items:center;padding:28px 0;cursor:pointer;list-style:none}
.zeilen.klapp summary::-webkit-details-marker{display:none}
.zeilen.klapp summary:focus-visible{outline:3px solid var(--sig);outline-offset:4px}
.zeilen.klapp summary:hover h3{text-decoration:underline 5px var(--sig);text-underline-offset:6px}
.auf-zu{justify-self:end;width:44px;height:44px;position:relative;box-shadow:inset 0 0 0 2px currentColor;transition:background .2s}
.auf-zu::before,.auf-zu::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:3px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s}
.auf-zu::after{transform:translate(-50%,-50%) rotate(90deg)}
.zeile[open] .auf-zu{background:var(--sig);color:var(--ink);box-shadow:none}
.zeile[open] .auf-zu::after{transform:translate(-50%,-50%) rotate(0)}
.zeile-inhalt{padding:0 0 32px}
.zeile-inhalt ul{max-width:760px}
.zeile-inhalt .link{display:inline-block;margin-top:22px;font-size:15px}
.sek-kopf .cta{font-size:22px;padding:16px 22px}
/* Videos im Bildstreifen der Startseite */
.streifen .clip-kachel{margin:0;position:relative;overflow:hidden;background:var(--nacht)}
.streifen .clip-kachel video{width:100%;height:100%;object-fit:cover;display:block}
.streifen .clip-kachel figcaption{position:absolute;left:0;top:0;bottom:auto;background:var(--ink);color:#fff;padding:8px 12px;font:500 14px/1.3 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
/* Videos in der Referenzen-Galerie */
.galerie .clip figcaption{position:static;text-transform:none;letter-spacing:0;font-size:14px;color:var(--mute-hell);background:var(--nacht)}
/* Teamfotos: gruene Ecke wie beim grossen Teamfoto (.rahmen) */
.gesicht button{position:relative;isolation:isolate}
.gesicht button::before{content:"";position:absolute;right:-10px;bottom:-10px;width:clamp(34px,22%,64px);height:clamp(34px,18%,64px);z-index:2;pointer-events:none;border-right:4px solid var(--grau);border-bottom:4px solid var(--grau);background:linear-gradient(var(--sig),var(--sig)) right 4px bottom 4px/3px 100% no-repeat,linear-gradient(var(--sig),var(--sig)) right 4px bottom 4px/100% 3px no-repeat}
@media (max-width:980px){
 .zeilen.klapp summary{grid-template-columns:1fr 44px;gap:16px;padding:22px 0}
}
@media (max-width:720px){
 .baustellen-sprung{gap:8px}
 .baustellen-sprung a{font-size:14px;padding:11px 12px}
 .gesicht button::before{right:-6px;bottom:-6px}
 /* Ueberschrift mobil in zwei Zeilen statt drei ("in Esslingen." braucht ~4,95em) */
 .hero h1{font-size:min(16vw,calc((100vw - 96px) / 5.1))}
 .hero h1 .z>span{white-space:nowrap}
}
/* Motto unter dem Logo war 11px (mobil 9,5px), R6 verlangt mindestens 14px */
.marke .motto,.motto{font-size:14px;letter-spacing:.08em}
@media (max-width:720px){.marke .motto,.motto{font-size:14px;letter-spacing:.06em}}
/* Logo war gestreckt (02.10.2026): die Flex-Spalte zog das Bild auf Mottobreite
   (2,68:1 wurde 3,86:1, mobil 4,34:1). Jetzt bestimmt das Motto die Breite und
   das Logo folgt mit height:auto, Seitenverhältnis bleibt. Laufweite enger,
   damit das Logo nicht zu hoch wird. */
.marke-text{align-items:stretch}
.marke .logo-kopf{width:0;min-width:100%;height:auto;aspect-ratio:473/176}
.marke .motto,.motto{letter-spacing:.05em}
@media (max-width:720px){.marke .motto,.motto{font-size:14px;letter-spacing:.01em}}
@media (max-width:720px){:root{--kopf:84px}.marke-text{gap:4px}}
/* Logo-Variante B (02.10.2026, Johannes): Motto rechts neben dem Logo,
   durch einen Strich abgesetzt. Das Logo steht frei in seinem Verhaeltnis. */
.kopf .marke-text{flex-direction:row;align-items:center;gap:18px}
.kopf .marke .logo-kopf{width:auto;min-width:0;height:54px}
.kopf .marke .motto{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding-left:18px;border-left:1px solid #5a6366;letter-spacing:.12em}
.kopf .marke .motto i{display:none}
@media (max-width:720px){:root{--kopf:72px}.kopf .marke-text{gap:12px}.kopf .marke .logo-kopf{height:46px}.kopf .marke .motto{padding-left:12px;gap:3px;font-size:14px;letter-spacing:.08em}}
/* Hero-Titel "Stuckateur und Maler / im Raum Esslingen." (02.10.2026, Johannes):
   laengere Zeilen, darum kleiner; mobil darf er umbrechen. */
.hero h1.lang{font-size:clamp(40px,5.9vw,92px)}
@media (max-width:720px){.hero h1.lang{font-size:min(15vw,60px)}.hero h1.lang .z>span{white-space:normal}}