/* ============================================================
ARBO WERKLICHT — Design-System
Leitformel: Helle Werkhalle, carbon-schwarze Maschine.
75–85% hell · Carbon nur als gefräste Kammern · helles Grün NUR auf Carbon
Grün-Kanon: --tann #164d26 stammt AUS Jans Logo-Datei (nie nachgemischt).
--signal #429459 = derselbe Farbton (137°), aufgehellt UND entsättigt.
Weg: #33b358 (Jan: „beißend") → #509f67 (T12, S33% L47%, 5.5:1) → #429459
(Samir 04.08.: noch dunkler Richtung Marke — S38% L42%, Kontrast auf Carbon 4.77:1;
das Marken-Grün selbst läge bei 1.8:1 und ist auf Carbon unbrauchbar).
============================================================ */
:root{
--werklicht:#f4f6f2; --werklicht2:#eef0ef; --blatt:#ffffff;
--tann:#164d26; --tann-tief:#0f3419; --tinte:#0f1d14;
--carbon:#14181a; --carbon2:#1b2124; --carbon3:#232a2d;
--signal:#429459; --signal-hell:#7ebe91; --blueprint:#8fa096; --tan:#c9a674;
--line:#dfe4de; --muted:#57655e; --papier:#efe6d6; --tafel:#e4d6bd; --tan-tief:#8a6230;
--scheibe:#a3773f; /* Braun der Baumscheibe (baumscheibe-tan.svg) — K2-Ziffern, Jan 19.08. */
--ease:cubic-bezier(.2,.7,.3,1); --spring:cubic-bezier(.34,1.3,.4,1);
--sh-s:0 2px 10px rgba(15,29,20,.06); --sh-m:0 14px 40px rgba(15,29,20,.12);
--wrap:1160px;
/* Dunkel-Anteil steuerbar: eine Variable für Jans Abnahme-Regler */
--kammer-bg:var(--carbon);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--werklicht);color:var(--tinte);
font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:var(--tann)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px}
h1,h2,h3,h4{font-family:'Barlow Semi Condensed','Arial Narrow',system-ui,sans-serif;
letter-spacing:-.02em;line-height:1.04;margin:0;text-wrap:balance;font-weight:800}
h1{font-size:clamp(3.1rem,7.8vw,6.6rem);letter-spacing:-.01em}
h2{font-size:clamp(2.2rem,4.8vw,3.5rem)}
h3{font-size:1.34rem;line-height:1.24;font-weight:700}
.g{color:var(--tann)}
.lead{font-size:clamp(1.15rem,1.6vw,1.32rem);line-height:1.55;color:#33413a;max-width:54ch}
p{margin:.65em 0}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte)}
.eyebrow::before{content:'';width:38px;height:2px;background:var(--tan);flex:none}
.eyebrow .no{color:var(--tan-tief);font-variant-numeric:tabular-nums;font-weight:700;margin-right:12px}
.mass{font-weight:500;letter-spacing:.08em;text-transform:uppercase;
font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--muted)}
.quote{font-family:'Lora',Georgia,serif;font-style:italic;font-size:1.15rem;color:#3d4a42;line-height:1.55}
.hw{font-family:'Lora',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:0}
.quote-display{font-family:'Lora',Georgia,serif;font-style:italic;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.4;max-width:26ch;color:var(--tinte);position:relative;padding-top:38px}
.quote-display::before{content:'\201E';position:absolute;top:-30px;left:-8px;font-size:6rem;line-height:1;color:var(--tan);font-style:normal}
.matzeile{font-family:'Lora',Georgia,serif;font-style:italic;font-size:.95rem;color:var(--muted);margin-top:10px}
/* Quellenzeile unter einem Zitat — vorher als Inline-Style dupliziert */
.quelle{display:block;font-style:normal;font-family:'Inter',system-ui,sans-serif;
font-size:.85rem;color:var(--muted);margin-top:8px}
/* Firmenclaim, wenn er als Aussage im Text steht (Über uns) */
.claim{font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;font-weight:700;
font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.2;letter-spacing:-.01em;
color:var(--tann);margin:0 0 12px;max-width:24ch}
.claim-sub{font-size:.98rem;color:var(--muted);max-width:52ch;margin:0}
/* Fräsbahn-Unterstreichung (eine Bewegungssprache) */
.lnk{color:var(--tinte);text-decoration:none;background-image:linear-gradient(var(--tann),var(--tann));
background-repeat:no-repeat;background-size:0% 2px;background-position:0 100%;
transition:background-size .35s var(--ease);padding-bottom:2px}
.lnk:hover,.lnk:focus-visible{background-size:100% 2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--tann);outline-offset:3px;border-radius:4px}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem;
text-decoration:none;border-radius:3px;padding:14px 26px;min-height:48px;
transition:transform .18s var(--ease),box-shadow .18s var(--ease);cursor:pointer;border:0}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--tann);color:#fff}
.btn-primary:hover{box-shadow:0 10px 26px rgba(22,77,38,.32)}
.btn-ghost{background:transparent;color:var(--tinte);border:1.5px solid var(--tinte)}
.btn-ghost:hover{border-color:var(--tann);color:var(--tann)}
.on-carbon .btn-ghost{color:#eef2ee;border-color:#4a5450}
.on-carbon .btn-ghost:hover{border-color:var(--signal);color:var(--signal)}
.on-carbon .btn-primary{background:var(--signal);color:var(--carbon)}
/* Sägeschnitt-Divider */
.kerf{border:none;height:2px;margin:0;background:var(--tan)}
.schnitt{position:relative}
.schnitt::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tan);z-index:2}
/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(244,246,242,.88);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px}
.brand img{height:52px;width:auto}
@media (max-width:900px){.brand img{height:42px}}
.nav ul.main{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav .lnk{font-size:.95rem;font-weight:500}
.nav .lnk[aria-current="page"],.nav .lnk.sect{background-size:100% 2px;font-weight:600}
.nav .cta{padding:10px 20px;min-height:0;font-size:.9rem}
/* Samir 04.08.: bei 950–1140px brachen "CNC-Lohnfräsen", "Über uns" und der
CTA-Button mehrzeilig um (gemessen: Button 67px hoch statt 43). Nichts im
Header darf umbrechen; im Mittelbereich rücken die Punkte enger zusammen. */
.nav .lnk,.nav .cta{white-space:nowrap}
@media (max-width:1140px) and (min-width:901px){
.nav ul.main{gap:14px}
.nav .lnk{font-size:.88rem}
.nav .cta{padding:9px 14px;font-size:.85rem}
}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;color:var(--tinte)}
.burger svg{width:26px;height:26px}
/* T6 (Jan, 02.08.): Der ovale Ring trägt die Kontur des äußersten Baumscheiben-Rings.
Die Borken-Kontur stammt als Maske aus Jans Original-SVG (baumscheibe-ring.svg,
abgeleitet aus stump_outer_bark) — nie nachzeichnen. */
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;
font-weight:600;color:var(--muted);text-decoration:none;border:0;border-radius:999px;
padding:8px 18px;
background:url('../logo/baumscheibe-ring.svg') center/100% 100% no-repeat}
.backlink:hover{color:var(--tann);
background-image:url('../logo/baumscheibe-ring-gruen.svg')}
@media (max-width:900px){
/* Samir 20.08. (Handy): Burger sass MITTIG — .nav hat drei Flex-Kinder (brand, burger, leeres
nav-Element, dessen ul fixed ist) und space-between schiebt den Burger in die Mitte.
order:3 stellt ihn ganz nach rechts. */
.burger{display:block;order:3}
/* backdrop-filter am Header macht ihn zum Bezugsrahmen fuer position:fixed —
das Menue war dadurch nur 56px hoch statt bildschirmfuellend (gemessen).
Auf Mobil deshalb kein Blur, sondern eine deckende Flaeche. */
header.site{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--werklicht)}
.nav ul.main{position:fixed;inset:84px 0 0 0;background:var(--werklicht);flex-direction:column;
align-items:flex-start;padding:28px 26px calc(28px + env(safe-area-inset-bottom));gap:8px;
transform:translateX(105%);visibility:hidden;
transition:transform .32s var(--ease),visibility 0s .32s;overflow-y:auto;z-index:59}
.nav ul.main.open{transform:none;visibility:visible;transition:transform .32s var(--ease)}
/* Samir 31.08.: „wenn ich ganz oben bin ist es in Ordnung ... aber nicht runter scrolle und
dann das Hamburger Menü öffne, sehe ich oben ein Teil der Seite, Texte oder so."
Gemessen und in vier Schritten eingekreist: die Scroll-Sperre `body{overflow:hidden}`, die
beim Öffnen gesetzt wird, hebelt `position:sticky` des Kopfes aus — der Kopf rutscht mit
dem Dokument nach oben weg (bei scrollY 1400 auf y=-1400). Das Menü liegt aber fixed ab
84 px und rechnet mit einem Kopf, der dort steht. Die oberen 84 px blieben unbedeckt.
Dazu kam ein Fehler, der schwerer wiegt als der sichtbare Streifen: der Burger stand bei
y=-1382, also ausserhalb des Bildes — das Menü liess sich mit dem Finger nicht mehr
schliessen.
Solange das Menü offen ist, steht der Kopf deshalb selbst `fixed`. Damit ist er davon
unabhängig, ob `sticky` unter der Sperre noch greift. */
html.nav-offen header.site{position:fixed;top:0;left:0;right:0}
.nav ul.main .lnk{font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;
font-size:1.7rem;font-weight:700;padding:10px 0;display:block}
.nav ul.main li{width:100%;border-bottom:1px solid var(--line)}
.nav ul.main li:last-child{border:0;margin-top:10px}
}
/* ---------- Sektionen ---------- */
section{padding:88px 0}
@media (max-width:720px){section{padding:60px 0}}
.sec-head{max-width:820px;margin-bottom:40px}
/* PR-2 (Jan KW35): der braune Strich vor der Kicker-Zeile fehlte auf der Projekte-Seite.
Ursache war nicht ein fehlender Strich, sondern DIESE Regel: mit display:block ist
das ::before eine Inline-Box, dort haben width/height keine Wirkung. Gemessen waren
20 von 49 Kicker-Zeilen ohne Strich — restlos alle davon in .sec-head.
display:flex haelt die Block-Wirkung und macht das ::before wieder zum Flex-Element. */
.sec-head .eyebrow{display:flex;margin-bottom:12px}
.alt{background:#e9ece6}
.warm{background:var(--papier)}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.kammer.bleed .split{max-width:1440px;margin-inline:auto}
/* Vollbild-Bildbreak mit Text-Overlay */
.bildbreak{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.bildbreak>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bildbreak .ov{position:relative;z-index:1;width:100%;padding:220px 22px 64px;
background:linear-gradient(180deg,transparent 0%,rgba(10,14,12,.72) 78%)}
.bildbreak .ov>*{max-width:var(--wrap);margin-left:auto;margin-right:auto;display:block}
.bildbreak .ov h2{max-width:var(--wrap)}
@media (max-width:720px){.bildbreak{min-height:72svh}.bildbreak .ov{padding:140px 20px 44px}}
/* ---------- Hero „Vollbild-Bühne" (Video als Hintergrund) ---------- */
/* 68px war geraten — die Kopfzeile ist 85px hoch (gemessen 21.08. auf 390/1366/1920/2560),
der Hero schoss dadurch überall 17px über die Bildschirmkante. Gleiche Kante wie bei
.subhero.hero-bild: unten schliesst das Bild mit dem Bildschirm ab. */
.hero-full{position:relative;min-height:calc(100vh - 85px);min-height:calc(100svh - 85px);display:flex;align-items:flex-end;overflow:hidden;background:var(--carbon)}
.hero-full video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* Die Querformat-Fassung (30.08.) ist bereits AUS dem Band bei 62 % geschnitten — sie darf
nicht ein zweites Mal dorthin verschoben werden, sonst rutscht das Motiv nach unten aus
dem Bild. Dieselbe Bedingung wie die Quellenwahl in VIDEO_JS, damit beide dasselbe meinen. */
@media (min-aspect-ratio:1/1){.hero-full video{object-position:50% 50%}}
/* Zweite Scrim-Lage links→rechts: die Zeilenenden der Headline lagen auf hellem
Holz bei ~1,6:1 Kontrast (Frische-Augen-Review 04.08.) — rechts läuft sie aus,
damit das Meisterstück hell bleibt. */
.hero-full .scrim{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(10,14,12,.48) 0%,rgba(10,14,12,.24) 48%,rgba(10,14,12,0) 76%),
linear-gradient(200deg,rgba(10,14,12,0) 30%,rgba(10,14,12,.38) 62%,rgba(10,14,12,.82) 100%)}
.hero-full .content{position:relative;z-index:2;width:100%;max-width:var(--wrap);
margin:0 auto;padding:0 22px 76px;color:#f2f5f1}
.hero-full .eyebrow{color:#eef2ee;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-full .eyebrow::before{background:var(--tan)}
.hero-full h1{color:#fff;margin:16px 0 20px;max-width:14ch;
text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-full h1 .hw{color:var(--tan)}
.hero-full .lead{color:#dfe5df;max-width:46ch}
.hero-full .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-full .btn-ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.hero-full .btn-ghost:hover{border-color:var(--tan);color:var(--tan)}
.hero-full .plate{position:absolute;right:22px;bottom:24px;z-index:2;display:inline-flex;gap:14px;
align-items:center;background:rgba(16,20,22,.66);backdrop-filter:blur(8px);border-radius:999px;
padding:9px 18px;color:#dfe6e1;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
font-variant-numeric:tabular-nums}
.hero-full .plate b{color:var(--tan);font-weight:600}
@media (max-width:720px){
.hero-full{min-height:calc(100vh - 85px);min-height:calc(100svh - 85px)}
.hero-full .content{padding-bottom:56px}
.hero-full .plate{display:none}
}
/* Kurze Laptop-Schirme (1366x768): der Textblock schob den Hero sonst 53px zu tief. */
@media (min-width:721px) and (max-height:830px){
.hero-full .content{padding-bottom:44px}
.hero-full h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:12px 0 14px}
.hero-full .cta-row{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){.hero-full video{display:none}
.hero-full{background:var(--carbon) url('../video/hero-meisterstueck-poster.jpg') center/cover}}
/* ---------- Hero „Werkbank-Panel" ---------- */
.hero{position:relative;overflow:visible}
.hero .inner{display:grid;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch;
max-width:none;padding:0}
.hero .copy{max-width:calc(min(1160px,100vw)/2 + 60px);margin-left:auto;
padding:96px 48px 96px 22px;display:flex;flex-direction:column;justify-content:center}
.hero h1{margin:16px 0 18px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.vitrine{position:relative;min-height:min(78vh,760px)}
.vitrine .frame{position:absolute;inset:0 0 0 0;border-radius:0 0 0 26px;overflow:hidden;
background:var(--carbon);box-shadow:var(--sh-m)}
.vitrine video,.vitrine img{width:100%;height:100%;object-fit:cover;display:block}
.vitrine .plate{position:absolute;left:22px;bottom:22px;display:inline-flex;gap:14px;align-items:center;
background:rgba(16,20,22,.78);backdrop-filter:blur(8px);border-radius:999px;padding:9px 18px;
color:#dfe6e1;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
font-variant-numeric:tabular-nums;pointer-events:none}
.vitrine .plate b{color:var(--signal);font-weight:600}
@media (max-width:900px){
.hero .inner{display:flex;flex-direction:column}
.vitrine{order:-1;min-height:0;margin:0}
.vitrine .frame{position:relative;inset:auto;border-radius:0;aspect-ratio:auto;height:72svh}
.hero .copy{max-width:none;margin:-58px 14px 0;padding:30px 22px 30px;background:var(--werklicht);
position:relative;z-index:2;border-top:2px solid var(--tan)}
}
/* ---------- Persona-Router ---------- */
.router{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.door{display:block;background:transparent;border:0;border-top:2px solid var(--tinte);
padding:18px 4px 6px;text-decoration:none;color:var(--tinte);transition:border-color .2s var(--ease)}
.door:hover{border-top-color:var(--tann)}
/* ABSICHT, kein Fehler (29.08. geprueft): `display:block` macht das ::before hier zu einer
Inline-Box, der Tan-Strich vor dem Kicker verschwindet also — derselbe Mechanismus wie
bei `.sec-head .eyebrow`, dort war es ein Fehler. HIER nicht: die Router-Kachel traegt
oben bereits eine dunkle Trennlinie, ein zweiter Strich direkt darunter waere Dopplung,
und mit Strich verliert das Label die Flucht zur Ueberschrift darunter. Beides
nebeneinander gerendert und verglichen. Bitte nicht auf display:flex "reparieren". */
.door .eyebrow{font-size:.66rem;margin-bottom:5px;display:block}
.door b{font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;font-size:1.14rem;font-weight:700;letter-spacing:-.01em}
.door span.arr{color:var(--tann);font-weight:700}
@media (max-width:720px){.router{grid-template-columns:1fr}}
/* ---------- Leistungs-Karten (grosse Bilder) ---------- */
.lindex{list-style:none;margin:0;padding:0 0 116px;display:grid;
grid-template-columns:1fr 1fr;column-gap:72px;row-gap:92px;align-items:start}
/* durchgehender Wechsel: rechte Spalte konstant versetzt, kein Sonderfall pro Kachel */
.lindex li:nth-child(even){transform:translateY(116px)}
.lindex a{display:block;text-decoration:none;color:var(--tinte)}
/* E6: auch hier hochkant — Jan hat index-01 bis -06 so markiert, und 5 der 6 Fotos sind
hochkant. Die Kacheln stehen versetzt in zwei Spalten mit Text DARUNTER, das traegt ein
3:4 muehelos. (Auf der Leistungsseite gilt das ausdruecklich NICHT, siehe `.sparten .thumb`.) */
.lindex .thumb{display:block;position:relative;overflow:hidden;background:var(--werklicht2);aspect-ratio:3/4}
.lindex .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.lindex a:hover .thumb img{transform:scale(1.03)}
/* T4 (Jan, Rückmeldung 02.08.): Nummern größer, der „Kringel" ist jetzt eine
Mini-Baumscheibe (kleine Scheibe als Icon ist lt. Jan ausdrücklich erlaubt). */
.lindex .n{display:flex;align-items:center;gap:8px;font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;
font-weight:600;font-size:1.18rem;letter-spacing:.1em;color:var(--tan-tief);
font-variant-numeric:tabular-nums;margin:20px 0 2px}
.nscheibe{width:21px;height:18px;flex:none;transform:translateY(-1px)}
.lindex .bd{display:flex;align-items:baseline;gap:12px;padding:0}
.lindex h3{font-size:clamp(1.6rem,2.6vw,2.15rem)}
.lindex p{margin:6px 0 0;font-size:.95rem;color:var(--muted);max-width:42ch}
.lindex .arr{color:var(--tann);font-weight:700;font-size:1.2rem;flex:none;
transition:transform .25s var(--ease)}
.lindex a:hover .arr{transform:translateX(6px)}
@media (max-width:820px){
.lindex{grid-template-columns:1fr;row-gap:52px;padding-bottom:0}
.lindex li:nth-child(even){transform:none}
}
.sec-head h1{font-size:clamp(2.1rem,3.6vw,3rem);margin:0}
/* ---------- Beleg-Leiste ---------- */
.belege{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px}
.beleg{padding:8px 26px;border-left:2px solid var(--tan)}
.beleg .n{font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;font-weight:600;
font-size:clamp(3rem,5vw,4.6rem);color:var(--tann);font-variant-numeric:tabular-nums;line-height:1}
.beleg .t{font-weight:600;margin-top:6px}
.beleg .d{font-size:.88rem;color:var(--muted);margin-top:2px}
@media (max-width:720px){.belege{grid-template-columns:1fr}}
/* ---------- Carbon-Kammer ---------- */
.kammer{background:var(--kammer-bg);color:#dfe6e1;padding:0;overflow:hidden;position:relative;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
/* schraege Linien entfernt — Jan: stoeren optisch (S35 / C18) */
.kammer .split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.kammer .txt{padding:96px 48px;position:relative;z-index:1}
.kammer h2,.kammer h3{color:#fff}
.kammer p{color:#aeb8b1}
.kammer .media{position:relative;min-height:340px}
.kammer .media img,.kammer .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kammer .media::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--kammer-bg) 0%,transparent 22%)}
.kammer .eyebrow{color:var(--signal)}
.kammer .mass{color:#8f9a93}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:24px 0 28px;padding:0;list-style:none}
.specs .k{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#7d8983}
.specs .v{font-weight:600;color:#eef2ee;font-variant-numeric:tabular-nums;margin-top:2px}
@media (max-width:900px){
.kammer .split{grid-template-columns:1fr}
.kammer .txt{padding:34px 26px}
.kammer .media{min-height:260px}
.kammer .media::after{background:linear-gradient(180deg,var(--kammer-bg) 0%,transparent 26%)}
}
/* Toolpath-Linie (zeichnet sich einmal auf Carbon) */
.toolpath{stroke:var(--signal);stroke-width:2;fill:none;
stroke-dasharray:var(--tp-len,600);stroke-dashoffset:var(--tp-len,600)}
.in-view .toolpath{animation:tp 1.4s var(--ease) .2s forwards}
@keyframes tp{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.toolpath{stroke-dashoffset:0;animation:none}}
/* ---------- Splits / Projekt-Beweis ---------- */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split2 .media{border-radius:2px;overflow:hidden;box-shadow:var(--sh-m)}
.split2 .media img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.split2{grid-template-columns:1fr;gap:28px}}
.bigproof{border-radius:24px;overflow:hidden;box-shadow:var(--sh-m);position:relative}
.bigproof img{width:100%;height:auto;max-height:640px;object-fit:cover}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.duo .media{border-radius:2px;overflow:hidden}
.duo img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:end}
.person{text-align:left}
/* Jan (U19): alle drei Portraits auf gleiche Aussengroesse. Die Originale haben
1000x1500, 1000x1000 und 1000x1426 — ohne festes Verhaeltnis stehen sie ungleich. */
.person .pic{border-radius:2px;overflow:hidden;background:var(--werklicht2);
box-shadow:var(--sh-s);aspect-ratio:3/4}
.person img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.team{align-items:start}
.person .bd{padding:14px 4px 0}
.person .rolle{font-size:.76rem;color:var(--tann);letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.person h3{margin:3px 0 5px;font-size:1.3rem}
.person p{font-size:.9rem;color:var(--muted);margin:0}
@media (max-width:820px){.team{grid-template-columns:1fr;gap:30px;max-width:420px}}
/* ---------- Ablauf ---------- */
.ablauf{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;counter-reset:ab;position:relative;padding-top:34px}
.ablauf::before{content:'';position:absolute;top:9px;left:0;right:0;height:2px;background:var(--tan)}
.schritt{position:relative;padding:0}
.schritt::after{content:'';position:absolute;top:-31px;left:0;width:10px;height:10px;background:var(--tann);border-radius:50%}
.schritt::before{counter-increment:ab;content:"0" counter(ab);display:block;
font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;font-weight:600;
font-variant-numeric:tabular-nums;color:var(--tan-tief);font-size:2.4rem;line-height:1;margin-bottom:8px}
.schritt h3{margin:8px 0 6px;font-size:1.05rem}
.schritt p{font-size:.88rem;color:var(--muted);margin:0}
.schritt.hi h3{color:var(--tann)}
.schritt.hi::after{background:var(--tann);box-shadow:0 0 0 4px rgba(22,77,38,.18)}
@media (max-width:1100px){.ablauf{grid-template-columns:repeat(3,1fr);row-gap:38px}}
@media (max-width:820px){.ablauf{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ablauf{grid-template-columns:1fr}}
/* Ab dem Umbruch traegt jeder Schritt seinen eigenen Punkt, die durchgehende
Linie waere sonst nur noch fuer die erste Reihe richtig. */
@media (max-width:1100px){.ablauf::before{display:none}
.schritt::after{top:-22px}}
/* MERKE: Bilder mit width/height-Attribut bekommen daraus einen Presentational Hint.
Wer ein aspect-ratio vorgibt, MUSS height:auto dazusetzen — sonst rendert das Bild in
Originalhoehe und das Seitenverhaeltnis ist wirkungslos. Genau das liess Bilder hier
507x1200 statt 507x380 werden. */
/* ---------- Werkblatt (Unterseiten) ---------- */
.subhero{padding:52px 0 40px}
/* ── Hero mit Bild · bildschirmhoch, dunkler Grund (Samir 21.08.) ────────────────────
Vorher lag Werklicht-Weiß über dem Bild (Links-Fade). Aus Jans Nachtfoto wurde Milchglas,
das CNC-Bild verschwand im weißen Grund — Samir: „das mit diesem weiß effekt sieht auch
nicht gut aus“. Jetzt trägt das BILD, die Schrift steht hell darauf: dieselbe Sprache wie
.hero-full auf der Startseite, damit die Seite EINE Hero-Handschrift hat.
Unterkante = Unterkante Bildschirm: 100svh minus Kopf (85px) minus Zurück-Zeile (58px).
Beide Höhen am 21.08. auf 360/390/768/1366/1536/1920/2560 gemessen — konstant 143px.
Ändert sich eine davon, hier --hero-versatz nachziehen. */
.subhero.hero-bild{--hero-versatz:143px;
position:relative;overflow:hidden;background:var(--carbon);padding:0;
display:flex;align-items:flex-end;
min-height:calc(100vh - var(--hero-versatz));
min-height:calc(100svh - var(--hero-versatz))}
.subhero.hero-bild .hbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.subhero.hero-bild .hbg img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
/* Schattensockel unten links statt globaler Decke: ein Radial-Verlauf, in dem die Schrift
liegt — die rechte Bildhälfte bleibt hell und lebendig. Ton = Bildschatten (#090d0b), nie Weiß.
ZWEI Stärken, weil die beiden Bilder gegensätzlich hell sind: das helle Nachtfoto (Küche)
braucht viel, die dunkle Werkstatt (CNC, .hero-dunkel) kippt damit in Schwarz. */
.subhero.hero-bild .hbg::after{content:'';position:absolute;inset:0;
background:
radial-gradient(128% 118% at 1% 100%,rgba(9,13,11,.95) 0%,rgba(9,13,11,.84) 20%,rgba(9,13,11,.60) 40%,rgba(9,13,11,.28) 62%,rgba(9,13,11,.06) 84%,rgba(9,13,11,0) 100%),
linear-gradient(0deg,rgba(9,13,11,.50) 0%,rgba(9,13,11,.16) 34%,rgba(9,13,11,0) 64%),
linear-gradient(180deg,rgba(9,13,11,.30) 0%,rgba(9,13,11,0) 18%)}
.subhero.hero-bild.hero-dunkel .hbg::after{
background:
radial-gradient(116% 106% at 0% 100%,rgba(9,13,11,.78) 0%,rgba(9,13,11,.56) 24%,rgba(9,13,11,.28) 48%,rgba(9,13,11,.06) 76%,rgba(9,13,11,0) 100%),
linear-gradient(0deg,rgba(9,13,11,.34) 0%,rgba(9,13,11,.08) 40%,rgba(9,13,11,0) 70%)}
.subhero.hero-bild .wrap{position:relative;z-index:1;width:100%;padding-top:60px;padding-bottom:78px}
.subhero.hero-bild .grid{min-height:0;align-items:end} /* Spalten kommen von .subhero .grid — hier NICHT setzen (Spezifität schlug die Mobil-Regel) */
.subhero.hero-bild .eyebrow{color:#f6faf6;text-shadow:0 1px 3px rgba(0,0,0,.72),0 2px 18px rgba(0,0,0,.66)}
.subhero.hero-bild .eyebrow::before{background:var(--tan)}
.subhero.hero-bild h1{color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.45)}
.subhero.hero-bild h1 .g{color:var(--tan)} /* Tann-Grün trägt auf Dunkel nicht — Tan wie auf der Startseite */
.subhero.hero-bild .lead{color:#dde5de;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.subhero.hero-bild .btn-ghost{color:#fff;border-color:rgba(255,255,255,.62);background:transparent}
.subhero.hero-bild .btn-ghost:hover{border-color:var(--tan);color:var(--tan)}
/* Kurze Laptop-Schirme (1366x768): sonst schiebt der Textblock den Hero 18px über die
Bildschirmkante — gemessen 21.08. Weniger Luft, kleinere Zeile, Unterkante bleibt exakt. */
@media (min-width:901px) and (max-height:830px){
.subhero.hero-bild .wrap{padding-top:28px;padding-bottom:46px}
.subhero.hero-bild h1{font-size:clamp(2.2rem,4.3vw,3.5rem)}
.subhero.hero-bild .lead{font-size:1rem}
.subhero.hero-bild .cta-row{margin-top:20px!important}}
/* Mobil steht die Schrift über der ganzen unteren Hälfte — der Sockel muss entsprechend
hoch reichen (bei der Küche lag weiße Schrift sonst auf heller Inselfront). */
@media (max-width:900px){
.subhero.hero-bild .hbg::after{background:
linear-gradient(0deg,rgba(9,13,11,.94) 0%,rgba(9,13,11,.88) 30%,rgba(9,13,11,.76) 50%,rgba(9,13,11,.54) 64%,rgba(9,13,11,.24) 84%,rgba(9,13,11,.08) 100%),
linear-gradient(180deg,rgba(9,13,11,.48) 0%,rgba(9,13,11,.14) 30%,rgba(9,13,11,0) 46%)}
.subhero.hero-bild.hero-dunkel .hbg::after{background:
linear-gradient(0deg,rgba(9,13,11,.84) 0%,rgba(9,13,11,.62) 30%,rgba(9,13,11,.34) 54%,rgba(9,13,11,.10) 80%,rgba(9,13,11,0) 100%),
linear-gradient(180deg,rgba(9,13,11,.34) 0%,rgba(9,13,11,0) 24%)}
/* Querformat auf schmalem Schirm zeigt sonst nur ein Maschinen-Stück: Fenster auf den
Portalwagen (34%), dort ist die Fräse als Fräse erkennbar. Gemessen am Raster 21.08. */
.subhero.hero-bild.hero-dunkel .hbg img{object-position:34% 56%!important}
.subhero.hero-bild .wrap{padding-top:40px;padding-bottom:54px}}
.subhero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
/* CNC-4 + CNC-5 (Jan, 30.08.): „Freigestelltes CNC-Modell rechts muss groesser werden" und
„Untertext ... schmaler/nach rechts kuerzer ... Dadurch kann das CNC-Bild groesser werden."
Das ist EIN Handgriff, nicht zwei. Gemessen bei 1280 bis 2560 px: der Untertext steht bei
jeder Spaltenbreite von 401 bis 561 px auf drei Zeilen — die drei Zeilen sind also nicht
das Ziel, sondern Jans Beschreibung des schmaleren Masses. Bei .82fr/1.18fr bleiben es
drei Zeilen (Text 438 px) und das Bild waechst von 507 auf 630 px, also um 24 %.
Nur auf der CNC-Seite: die anderen Koepfe hat Jan nicht beanstandet. */
.subhero.cnc-kopf .grid{grid-template-columns:.82fr 1.18fr}
/* CNC-9b (Jan, 30.08.): „Bilder bei 01, 03 und 04 insgesamt kleiner machen — sie sollen vom
Grundprinzip her nicht viel groesser sein als der jeweilige Textabsatz. Aktuell wirkt die
Seite dadurch zu leer/weitlaeufig."
Gemessen: Bild 532x709 gegen Textblock 532x288 — die 2,46-fache Hoehe. Sein eigener
Massstab steht auf derselben Seite: Abschnitt 02 hat er NICHT beanstandet, dort liegt das
Verhaeltnis bei 0,98. Mit 340 px Spaltenbreite kommen 01/03/04 auf das 1,57-Fache, und die
Abschnittshoehe faellt von 885 auf 629 px — knapp ein Drittel weniger Leere.
Bewusst nicht auf 1,0 gedrueckt: dafuer muesste das Foto auf 216 px schrumpfen, dann sieht
man von Jans Arbeit nichts mehr. 02 bleibt unberuehrt (dort ist das Bild quer). */
#kleinteile .media,#korpusbau .media,#sonderfraesung .media{max-width:340px;margin-inline:auto}
@media (max-width:900px){#kleinteile .media,#korpusbau .media,#sonderfraesung .media{max-width:none}}
/* NH-2 (Jan, 30.08.): „Bild oben rechts (ARBO-Nachhaltigkeitskreis) einen Tick groesser
ziehen, damit es besser lesbar ist." Die Grafik fuellt ihre Spalte schon zu 100 %, die
Deckelung max-height greift gar nicht — die SPALTE war die Grenze. Also die Spalte. */
.subhero.nh-kopf .grid{grid-template-columns:.9fr 1.1fr}
.subhero.nh-kopf .media.zeichnung img{max-height:min(64vh,540px)}
/* Kollisions-Schutz OHNE Silbentrennung (hyphens:auto erzeugte "Einbaukü-chen"):
Obergrenze der h1 im Split-Hero kleiner, damit "Ausbaupartner," in die Spalte passt. */
.subhero h1{font-size:clamp(2.7rem,5.6vw,4.9rem)}
.subhero .media{border-radius:2px;overflow:hidden;box-shadow:var(--sh-m)}
/* P4 · Maschinen-Cutout im Subhero (cnc): kein Rahmen, kein Schatten — die Maschine steht frei */
.subhero .media.cutout{border-radius:0;overflow:visible;box-shadow:none;background:transparent}
.subhero .media.cutout img{filter:drop-shadow(0 18px 34px rgba(15,29,20,.16))}
.subhero .media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.subhero .grid{grid-template-columns:1fr;gap:26px}}
.steckbrief{border-top:2px solid var(--tan);padding:22px 4px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px 26px}
.steckbrief .k{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.steckbrief .v{font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px;font-size:.95rem}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);column-gap:36px;row-gap:52px;align-items:start}
.gallery figure{margin:0;overflow:hidden;background:transparent;border:0}
/* E6 (Jan KW35, Samirs Entscheid): „lieber hochkant" stand auf rund 40 von 57 Bildplaetzen.
Nachgemessen an den Dateien, die jetzt drinstehen: ALLE elf Galerien tragen ueberwiegend
hochkante Fotos (4 bis 10 hochkant gegen 0 bis 2 quer) — Jans Bilder sind 1536x2048.
Im bisherigen 4:3 fiel bei jedem die Oberkante des Raums weg. 3:4 zeigt die Mehrzahl
ungeschnitten; die wenigen Querformate werden dafuer beschnitten, das ist der Tausch,
um den Jan gebeten hat. */
.gallery img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .5s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
/* KW35, ab 30.08. site-weit: Bleibt am Ende EIN einzelnes Foto in der Reihe stehen, sass es bisher links
und liess den Rest der Reihe leer — gemessen bei „03 Gewerbe" (7 Kacheln) und
„06 Klangschild" (4). Die Regel darueber faengt das nur ab, wenn zufaellig eine
Zitat-Karte an letzter Stelle steht; Jan hat genau in diesen zwei Kategorien die
Zitat-Karten streichen lassen. Ein einzelnes Foto wird deshalb mittig gesetzt,
in normaler Spaltenbreite — nicht aufgeblasen, nur nicht mehr an den Rand geklebt. */
@media (min-width:821px){
.gallery > figure:not(.stimme):nth-child(3n+1):last-child{
grid-column:1/-1;justify-self:center;width:calc((100% - 72px)/3)}
}
@media (min-width:561px) and (max-width:820px){
.gallery > figure:not(.stimme):nth-child(odd):last-child{
grid-column:1/-1;justify-self:center;width:calc((100% - 26px)/2)}
}
/* KW36 (Jan, 30.08.): „Die vorher vorgegebenen Bildausrichtungen im Projektbereich duerfen
nicht eigenstaendig geaendert werden." Die E6-Regel darueber ist der MEHRHEITSFALL (54 von
66 Plaetzen), nicht das Gesetz. Jans zwoelf Abweichungen tragen ab jetzt eine eigene Klasse.
Die Klassen werden NICHT von Hand gesetzt: `jan_formate_karte.py` liest sie aus seinem
Studio-Export, `formate_anwenden.py` schreibt sie, `tor_bildformate.py` misst sie nach.
Warum das noetig war: der Wunsch stand vorher nur in einem Bericht, den kein Bauweg las —
und wurde beim naechsten globalen Griff (E6) lautlos ueberschrieben. */
.gallery img.fmt-43, .lindex .thumb.fmt-43, .sparten .thumb.fmt-43 {aspect-ratio:4/3}
.gallery img.fmt-32, .lindex .thumb.fmt-32, .sparten .thumb.fmt-32 {aspect-ratio:3/2}
.gallery img.fmt-169, .lindex .thumb.fmt-169, .sparten .thumb.fmt-169 {aspect-ratio:16/9}
.gallery img.fmt-11, .lindex .thumb.fmt-11, .sparten .thumb.fmt-11 {aspect-ratio:1/1}
.gallery img.fmt-34, .lindex .thumb.fmt-34, .sparten .thumb.fmt-34 {aspect-ratio:3/4}
/* Auch ausserhalb der Galerien (Bild neben Text, `.split2 .media`) muss Jans Wunsch greifen —
dort steht das Verhaeltnis sonst inline im Partial und schlaegt jede Klasse. */
.media img.fmt-43{aspect-ratio:4/3}
.media img.fmt-32{aspect-ratio:3/2}
.media img.fmt-169{aspect-ratio:16/9}
.media img.fmt-11{aspect-ratio:1/1}
.media img.fmt-34{aspect-ratio:3/4}
.media.fmt-43,.media.fmt-32,.media.fmt-169,.media.fmt-11,.media.fmt-34{aspect-ratio:auto}
/* NH-1 (Jan KW35): eine freigestellte Grafik im Seitenkopf statt eines Fotos.
Ohne diese Regel greift `.subhero .media img` mit aspect-ratio:4/3 und
object-fit:cover — eine 16:9-Grafik wird darin ohne Warnung beschnitten, und im
Quelltext ist davon nichts zu sehen. Deshalb: kein Kasten, kein Radius, kein
Schatten, kein erzwungenes Verhaeltnis, und die Grafik passt sich EIN statt zu fuellen. */
.subhero .media.zeichnung{border-radius:0;overflow:visible;box-shadow:none;background:transparent}
.subhero .media.zeichnung img{width:auto;max-width:100%;height:auto;aspect-ratio:auto;
object-fit:contain;max-height:min(58vh,470px);display:block;margin-inline:auto}
@media (max-width:900px){.subhero .media.zeichnung img{max-height:42vh}}
/* Dasselbe im Carbon-Block: dort setzt `.kammer .media img` auf absolut + object-fit:cover,
was ein freigestelltes Objekt am Rand abschneidet — gemessen an der Fraese im Datenblatt,
die rechts angeschnitten war. Hier also einpassen statt fuellen, und der Grauschleier
(`.kammer .media::after`) hat ueber einem freigestellten Objekt nichts zu suchen. */
/* DB-1 (Jan, 30.08.): „Freigestelltes CNC-Bild ist noch zu klein — bitte groesser ziehen."
Die Deckelung lag bei 340 px, die Kammer ist 577 px hoch. 470 px lassen oben und unten
je gut 50 px Luft und machen die Maschine um 38 % groesser. */
.kammer .media.zeichnung img{position:relative;inset:auto;width:100%;height:auto;
object-fit:contain;max-height:470px;margin-block:auto}
.kammer .media.zeichnung::after{display:none}
/* KS-1 (Jan KW35): hochkantes Video im Seitenkopf. Wie bei `.zeichnung` darf hier NICHT
das 4:3 aus `.subhero .media img` greifen — ein 9:16-Film wuerde darin auf ein Drittel
beschnitten. Deshalb einpassen, Hoehe deckeln, mittig. */
.subhero .media.hochvideo{position:relative;border-radius:2px;overflow:hidden;
box-shadow:var(--sh-m);background:#0f1113;max-width:340px;margin-inline:auto}
.subhero .media.hochvideo video{display:block;width:100%;height:auto;aspect-ratio:9/16;
object-fit:cover}
.tonschalter{position:absolute;right:10px;bottom:10px;z-index:2;
border:1px solid rgba(255,255,255,.55);background:rgba(15,17,19,.62);color:#fff;
font:600 .72rem/1 inherit;letter-spacing:.06em;text-transform:uppercase;
padding:8px 12px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);
transition:background .18s var(--ease),border-color .18s var(--ease)}
.tonschalter:hover{background:rgba(15,17,19,.86);border-color:#fff}
.tonschalter:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
@media (max-width:900px){.subhero .media.hochvideo{max-width:280px}}
/* KW35: Jans Bildunterschriften aus dem Bild-Studio sind ganze Saetze mit Material- und
Ausstattungsangaben, nicht mehr die kurzen Zwei-Wort-Marken von vorher. In Versalien
mit 0,09em Sperrung werden daraus dreizeilige Bloecke, die niemand liest. Gemischte
Schreibung, wenig Sperrung, etwas mehr Zeilenabstand — leise bleibt es trotzdem.
Die Versalien-Sprache traegt weiterhin die Kicker (.eyebrow); die Trennung der beiden
Ebenen wird dadurch sogar deutlicher. */
.gallery figcaption{padding:12px 2px 0;font-size:.8rem;letter-spacing:.01em;line-height:1.45;
font-variant-numeric:tabular-nums;color:var(--muted);max-width:42ch}
@media (max-width:820px){.gallery{grid-template-columns:1fr 1fr;column-gap:26px;row-gap:38px}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}
/* `.gallery.hoch` war die erste Fassung fuer die Klangschild-Galerie, bevor gemessen war,
dass ALLE Galerien ueberwiegend hochkant sind. Seit das 3:4 der Standard ist, waere ein
zweites, noch hoeheres Verhaeltnis nur eine Unstimmigkeit im Satzbild — die Klasse
bleibt wirkungslos stehen, damit vorhandenes Markup nicht bricht. */
/* ---------- Sticky Sub-Navigation (CNC-Seite) ----------
War vorher hart auf Carbon gestylt. Jan wollte die Seite heller — die Leiste
traegt jetzt die helle Werkflaeche und bleibt trotzdem klar abgesetzt. */
.subnav{position:sticky;top:84px;z-index:40;background:rgba(244,246,242,.94);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:10px;overflow-x:auto;padding-top:12px;padding-bottom:12px;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav .backlink{flex:0 0 auto}
@media (max-width:900px){.subnav{top:84px}}
/* Zitat mit Baumscheiben-Motiv daneben (Jan C6: der leere Platz rechts) */
.zitatblock{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:center}
.zitatmotiv img{width:100%;height:auto;opacity:.16}
@media (max-width:820px){.zitatblock{grid-template-columns:1fr}.zitatmotiv{display:none}}
/* Feature-Liste */
.feats{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.feats li{position:relative;padding-left:32px;font-size:.97rem}
.feats li::before{content:"";position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:3px;
border:2px solid var(--tann);background:linear-gradient(135deg,var(--tann) 0 32%,transparent 32%)}
/* ---------- Kontakt / Formular ---------- */
.form{display:grid;gap:16px;background:var(--blatt);border:1px solid var(--line);
border-radius:2px;padding:28px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .row>*{min-width:0}
.form input,.form select,.form textarea{min-width:0}
.subhero .grid>*,.split2>*,.kammer .split>*{min-width:0}
.form label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;border:1.5px solid var(--line);border-radius:2px;
padding:13px 14px;font:inherit;font-size:.98rem;background:var(--werklicht);color:var(--tinte)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--tann);outline-offset:1px;border-color:var(--tann)}
.chipsrow{display:flex;flex-wrap:wrap;gap:8px}
/* Die Radios sind optisch versteckt, das Label ist der Chip. Ohne eigene Groesse
erben sie width:100% aus der Formular-Regel und ragen absolut positioniert aus
dem Raster — auf 390px waren das 56px horizontaler Ueberlauf. */
.chipsrow input{position:absolute;width:1px;height:1px;margin:0;padding:0;
opacity:0;pointer-events:none;clip-path:inset(50%)}
.chipsrow label{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;
padding:9px 16px;font-size:.9rem;font-weight:500;cursor:pointer;text-transform:none;letter-spacing:0;
color:var(--tinte);margin:0;min-height:40px;transition:all .18s var(--ease)}
.chipsrow input:checked+label{background:var(--tann);border-color:var(--tann);color:#fff}
.chipsrow input:focus-visible+label{outline:2px solid var(--tann);outline-offset:2px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
/* ---------- CTA-Band ---------- */
.band{background:var(--kammer-bg);color:#e7ece8;padding:72px 0;position:relative;overflow:hidden}
.band h2{color:#fff}
.band p{color:#aeb8b1}
.band .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.band .lines{position:absolute;inset:0;opacity:.22;pointer-events:none}
/* ---------- Footer ---------- */
footer.site{background:var(--carbon);color:#8f9a93;padding:60px 0 46px;font-size:.92rem}
footer.site a{color:#c3ccc5;text-decoration:none}
.fbot a{display:inline-block;padding:6px 2px}
footer.site a:hover{color:var(--signal)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
.fcol h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-weight:600}
.fcol a{display:block;padding:4px 0}
.flogo{height:54px;width:auto;margin-bottom:16px}
.fname{color:#e7ece8;font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;
font-weight:700;font-size:1.16rem;letter-spacing:.01em;margin:0 0 8px}
.fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #262e30;
margin-top:40px;padding-top:22px;font-size:.84rem;color:#8f9a93}
@media (max-width:820px){.fgrid{grid-template-columns:1fr}}
/* ---------- Scroll-Reveals — FAIL-OPEN ----------
Sichtbar ist der Default. Erst wenn JavaScript laeuft (html.js), wird ueberhaupt
ausgeblendet und wieder eingeblendet. Vorher war es umgekehrt: .rv{opacity:0} in der
CSS, sichtbar nur durch JS — gemessen waren nach 900 ms 0 von 22 Elementen sichtbar.
Ohne JS oder bei langsamer Verbindung sah der Besucher eine leere Seite. */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(18px);
transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
html.js .rv{opacity:1;transform:none;transition:none}}
/* Wortmarke mitten im Fliesstext einer Ueberschrift — Jan wollte „ARBO" hier in der
Logo-Schrift und mit der Baumscheibe als O, in Textfarbe statt Gruen (S25). */
.wortmarke{display:inline-block;height:.78em;width:auto;vertical-align:-.03em;margin:0 .04em}
/* ---------- Baumscheiben-Motiv (Jans Original-Asset, dezent) ---------- */
.morphwrap{position:relative}
.morphbg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.morphbg img{position:absolute;right:-16%;top:-6%;width:min(56vw,760px);opacity:.14;
transform:rotate(8deg)}
.morphwrap>.wrap{position:relative;z-index:1}
@media (max-width:820px){.morphbg img{right:-42%;width:88vw;opacity:.1}}
/* ---------- T3/T9 · Leistungs-Sparten: gestapelte Streifen, brauner Trenner ----------
Jan (Rückmeldung 02.08.): nicht mehr als Kacheln neben-/untereinander, sondern nur
noch übereinander, getrennt durch die braunen Trennlinien; Reihenfolge = Hero-
Nummerierung. Die Startseiten-Kacheln (.lindex) bleiben unverändert (B3/S16). */
.sparten{list-style:none;margin:0;padding:0}
.sparten li{position:relative}
/* Klickflaeche = ganzer Streifen: Padding liegt am Link, nicht am li (Audit 04.08.) */
.sparten li a{padding:58px 0}
.sparten li:first-child a{padding-top:14px}
.sparten li + li::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tan)}
.sparten a{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
text-decoration:none;color:var(--tinte)}
.sparten a>*{min-width:0}
.sparten li:nth-child(even) .thumb{order:-1}
/* E6 — hier BEWUSST kein Hochformat, obwohl Jan es markiert hat. Grund gemessen: in diesem
Streifen steht das Bild NEBEN dem Text, nicht darueber. Ueberhang des Bildes ueber den
Textblock im Mittel: 3:2 = 136 px · 1:1 = 312 · 4:5 = 444 · 3:4 = 488. Ein Hochformat
liesse hier neben vier Textzeilen eine halbe Bildschirmhoehe leer stehen.
Jans Bildausschnitt geht trotzdem nicht verloren: seine object-position aus dem
Bild-Studio sitzt am und bestimmt, WELCHER Teil im 3:2 zu sehen ist. */
.sparten .thumb{display:block;position:relative;overflow:hidden;background:var(--werklicht2);aspect-ratio:3/2}
.sparten .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sparten a:hover .thumb img{transform:scale(1.03)}
.sparten .n{display:flex;align-items:center;gap:8px;font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;
font-weight:600;font-size:1.18rem;letter-spacing:.1em;color:var(--tan-tief);
font-variant-numeric:tabular-nums;margin:0 0 6px}
.sparten h3{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.sparten p{margin:10px 0 0;font-size:.97rem;color:var(--muted);max-width:46ch}
.sparten .arr{display:inline-block;color:var(--tann);font-weight:700;margin-top:14px;
transition:transform .25s var(--ease)}
.sparten a:hover .arr{transform:translateX(6px)}
@media (max-width:820px){
.sparten li a{padding:40px 0}
.sparten a{grid-template-columns:1fr;gap:20px}
.sparten .thumb{order:-1}
}
/* T2 · Projekt-Kategorien: Kopfzeile mit Nummern-Scheibe, brauner Trenner darüber */
.kat{position:relative;padding-top:34px;margin:64px 0 30px}
.kat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tan)}
.kat.erste{margin-top:8px;padding-top:0}
.kat.erste::before{display:none}
.kat .n{display:flex;align-items:center;gap:8px;font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;
font-weight:600;font-size:1.05rem;letter-spacing:.1em;color:var(--tan-tief);
font-variant-numeric:tabular-nums;margin:0 0 4px}
.kat h2{font-size:clamp(1.5rem,2.4vw,2rem)}
/* ---------- T1 · Galerie-Lightbox (Bild unbeschnitten, ruhig, Tastatur) ---------- */
.gallery figure img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
padding:34px 22px;background:rgba(12,19,15,.93);opacity:0;visibility:hidden;
transition:opacity .26s var(--ease),visibility 0s .26s}
.lb.on{opacity:1;visibility:visible;transition:opacity .26s var(--ease)}
.lb figure{margin:0;max-width:min(1400px,94vw);display:flex;flex-direction:column;gap:12px}
.lb img{max-width:100%;max-height:min(80vh,980px);width:auto;height:auto;object-fit:contain;
margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb figcaption{text-align:center;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
font-variant-numeric:tabular-nums;color:#c3ccc5}
.lb-close{position:absolute;top:16px;right:16px;width:48px;height:48px;border:0;border-radius:999px;
background:rgba(244,246,242,.14);color:#eef2ee;font-size:26px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.lb-close:hover{background:rgba(244,246,242,.26)}
.lb-close:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}
/* Der Header (sticky + backdrop-filter) tritt bei offener Lightbox ab —
Blur-Compositing kann sonst über dem Overlay erscheinen. */
body:has(.lb.on) header.site{visibility:hidden}
/* ---------- T13 · Fräsbahn-Winkel um das CNC-Video ----------
Jan will das grüne Element am Video zurück, aber moderner und nicht direkt über
dem Video (Rückmeldung 02.08.). Das Video sitzt jetzt mit Carbon-Passepartout in
der Kammer, zwei Werkzeugbahn-Winkel fassen es — Technik-Feeling statt Farbfeld. */
.kammer .media video{inset:20px;width:calc(100% - 40px);height:calc(100% - 40px)}
.kammer .media .tpf{position:absolute;inset:10px;pointer-events:none;z-index:1}
.kammer .media .tpf::before,.kammer .media .tpf::after{content:'';position:absolute;
width:72px;height:72px;opacity:0;transition:opacity .7s var(--ease) .35s}
.kammer .media .tpf::before{top:0;left:0;border-top:2px solid var(--signal);border-left:2px solid var(--signal)}
.kammer .media .tpf::after{bottom:0;right:0;border-bottom:2px solid var(--signal);border-right:2px solid var(--signal)}
.kammer.in-view .media .tpf::before,.kammer.in-view .media .tpf::after{opacity:1}
@media (prefers-reduced-motion:reduce){
.kammer .media .tpf::before,.kammer .media .tpf::after{opacity:1;transition:none}}
/* Mobile Bottom-CTA */
.mcta{display:none}
@media (max-width:720px){
.mcta{display:flex;position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));
z-index:55;justify-content:center;transform:translateY(120%);transition:transform .35s var(--spring)}
.mcta.show{transform:none}
.mcta.footer-near{transform:translateY(140%);pointer-events:none}
footer.site{padding-bottom:calc(46px + 76px + env(safe-area-inset-bottom))}
.mcta a{flex:1;justify-content:center;box-shadow:0 14px 34px rgba(15,29,20,.35)}
}
/* Pending liest sich als Information, nicht als Fehlerzustand — das Rostorange
war ein Fremdton in der Palette (Review 04.08.). */
.pending{color:var(--muted);font-weight:500;font-style:italic}
footer.site .pending{color:#8f9a93}
.skip{position:absolute;left:-9999px;top:0;background:var(--tann);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}
/* ---------- Werkstück-Framing: gefaste Ecke + Tan-Anriss ---------- */
/* EIN Eckenschnitt fuer alle Werkstueck-Bilder — gleiche Ecke, gleiche Groesse.
Vorher wechselte er zwischen oben-links und unten-rechts und fehlte teils ganz. */
.lindex .thumb,.sparten .thumb,.subhero .media,.split2 .media,.duo .media{
outline:1px solid rgba(201,166,116,.55);outline-offset:14px;
clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%)}
/* In der Galerie muss die Fase ans BILD, nicht ans : das enthaelt auch die
Bildunterschrift, die Ecke landete dadurch 50px unter der Bildkante im Leeren und
war schlicht unsichtbar. Genau Jans Punkt „teils fehlt der Schnitt ganz". */
.gallery img{
clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%)}
@media (max-width:720px){
.lindex .thumb,.sparten .thumb,.subhero .media,.split2 .media,.duo .media{
outline-offset:10px;
clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.gallery img{
clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
}
/* ============================================================
RUNDE 3 (18.08.2026) — Bauteile K1–K10 nach Jans Gesamtdatei KW 33
(docs/MASTERPLAN-RUNDE-3.md §4). Einmal gebaut, überall benutzt.
============================================================ */
/* K1 · Fakten-Block v2: Wort-Headlines („Gegründet 2026", „6 Bereiche unter einem Dach")
brauchen eine kleinere Auszeichnungsgröße als die nackte Zahl „27". */
.beleg .n.wort{font-size:clamp(1.85rem,3vw,2.6rem);line-height:1.08;letter-spacing:-.01em;
font-variant-numeric:normal}
.beleg .n.wort b{font-weight:800}
/* K2 · Nummern-Marke v3 (Jans Antwort 19.08., F1 = Variante c): Ziffer OHNE Scheibe,
davor ein Tan-Strich. Ziffer im Braun der Baumscheibe (#a3773f, baumscheibe-tan.svg —
die Scheibe, die Jan auf der Entscheidungsseite neben den Nummern sah), Barlow 800.
Gilt identisch am Handy und am Desktop (Jans Wortlaut). Scheiben-Assets bleiben für K3/K5. */
.nmark{display:inline-flex;align-items:center;gap:12px;flex:none;
color:var(--scheibe);font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;font-weight:800;
font-size:1.5rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1}
/* A + PR-3 (Jan KW35): statt des Binderstrichs die Baumscheibe, „im selben Braun wie die
Zahlen“ (#a3773f = baumscheibe-tan.svg, NICHT --tan #c9a674) und „Durchmesser wie die
bisherige Breite des Minus“ — gemessen 26 px. Bei 26 px bleiben alle Jahresringe lesbar
(unter 18 px waere die Scheibe ein Fleck). Die Zeichnung ist dieselbe, die Jan als
Baumscheibe.svg geschickt hat: Pfad und alle fuenf Ringe stimmen ueberein. */
.nmark::before{content:'';width:26px;height:26px;flex:none;
background:url('../logo/baumscheibe-tan.svg') center/contain no-repeat}
.lindex .n,.sparten .n,.kat .n{gap:12px;letter-spacing:0;color:var(--tinte)}
.lindex .n{margin:20px 0 8px}
.sparten .n{margin:0 0 10px}
.kat .n{margin:0 0 8px}
.kammer .nmark,.on-carbon .nmark{color:var(--tan)} /* auf Carbon hellere Braun-Stufe (Kontrast) */
/* K9 · Küchen-Musterprojekt (P4, Jans Konzept KW33 §4): vier Ansichten mit Werkstück-Fase,
Sprechblasen auf der Detailecke = Fasen-Rahmen, Linie mittig nach unten + Punkt,
innen Feinlinien-Icon (Tann, 1,5 px, 48x48) + Kurztext. Mobil: Blasen als Liste unterm Bild. */
.muster .mfig{margin:0 0 8px;position:relative}
.muster .mfig>img{width:100%;height:auto;display:block;
clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%)}
.muster .mfig>figcaption{padding:12px 2px 0;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.muster .mzeile{margin-top:34px}
.muster .split2 .media img{aspect-ratio:4/3;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
/* K3 · Zeitstrahl: Baumscheiben-Marke MITTIG auf der Linie (Jan: sitzt sonst nur im
unteren Drittel). Linie: .ablauf::before top 9px / 2px → Linienmitte y=10px.
Marke 22 px → top = 10 - 11 = -1px relativ zum Schritt (padding-top 34px). */
.schritt::after,.schritt.hi::after{display:none}
/* C (Jan KW35): keine vollflaechig gefuellte Scheibe mehr, sondern die Fassung mit offenen
Jahresringen — und „einen Ticken groesser“: 22 -> 26 px. Der Marker sitzt mittig auf der
Linie, deshalb wandert top um die halbe Groessenzunahme mit (-35 -> -37, mobil -26 -> -28). */
.schritt .smark{position:absolute;top:-37px;left:-6px;width:26px;height:26px;background:url('../logo/baumscheibe-gruen.svg') center/contain no-repeat}
@media (max-width:1100px){.schritt .smark{top:-28px}}
/* Zeitstrahl 30.08. (Samir): „der Strich laeuft bis zu einer Baumscheibe und faengt dahinter
wieder an" — die Scheiben sollen die Linie UNTERBRECHEN, nicht auf ihr liegen.
Vorher lief EINE durchgehende Linie ueber die volle Breite hinter allen Scheiben durch.
Weil Jans Scheibe offene Jahresringe hat, war die Linie zwischen den Ringen sichtbar —
daher der Eindruck „Strich, auf den Scheiben draufgesetzt sind".
Also: die durchgehende Linie faellt weg, jeder Schritt zieht sein eigenes Stueck von der
eigenen Scheibe bis kurz vor die naechste. Das traegt sich selbst durch jede Breite, weil
jeder Schritt eine Rasterspalte IST — eine Maske mit festen Pixelwerten koennte das nicht.
Die Werte stammen aus dem gemessenen Layout, nicht aus dem Gefuehl:
Scheibe 26 px bei left:-6px -> Mitte x=7, rechte Kante x=20, mit 4 px Luft Start 24.
Naechste Scheibe beginnt (Spaltenabstand 28 - 6) = 22 px hinter der Spaltenkante,
minus 4 px Luft -> right:-18px.
Linienmitte y: .ablauf::before top 9 + halbe Hoehe 1 = 10, abzueglich padding-top 34
des Rasters = -24 im Schritt; Segment top -25 bei 2 px Hoehe trifft genau diese Mitte.
Die Segmente gehoeren jetzt den Schritten und blenden mit ihnen ein (.rv, gestaffelt d1-d5),
die Linie zeichnet sich also mit auf. Scheibe und Segment bewegen sich dabei gemeinsam. */
.ablauf::before{display:none}
.schritt::after,.schritt.hi::after{
display:block;content:'';position:absolute;
top:-25px;left:24px;right:-18px;width:auto;height:2px;
background:var(--tan);border-radius:0;box-shadow:none}
/* Hinter dem letzten Schritt laeuft die Linie aus, statt hart an der Blattkante abzubrechen:
„Wartung & Pflege" ist der Schritt, der nicht aufhoert. */
.schritt:last-child::after{right:auto;width:104px;
background:linear-gradient(90deg,var(--tan),rgba(201,166,116,0))}
/* Ab dem Umbruch traegt jeder Schritt nur noch seine Scheibe — Segmente zwischen Spalten
waeren am Zeilenende falsch. */
@media (max-width:1100px){.schritt::after,.schritt.hi::after{display:none}}
/* K4 · Zurück-Button (Regel 8, Jans Antwort 19.08. F4 = Fassung 4): Stadion-Form,
KRÄFTIGER Borkenring MIT dem Wort „Leistungen" (zurueck-rahmen-wort.svg, 148x40,
build/zurueck_rahmen.py). Jan schickt noch eine eigene Ring-Datei nach → dann Asset tauschen. */
.zurueck-zeile{padding-top:18px} /* NUR padding-top: .wrap-Seitenabstand bleibt (Agent-Hinweis: mobil stand der Button bei x=0) */
/* KW35 · Punkt 10 (Jan) + Samirs Entscheide E3/E4:
Jans eigene Ringdatei ist jetzt das Asset. Drei Dinge aus seiner Lieferung sind bewusst
NICHT uebernommen, weil sie sonst Schaden anrichten:
· ihr deckendes Hintergrundrechteck (#f4f6f2 ueber die ganze Flaeche) — hier nur der Ring,
· ihr Gruen #22461f — gemessener Abstand zum Kanon-Gruen dE 6,2, also im direkten
Nebeneinander sichtbar; E3: Kanon #164d26, der aus Jans eigener Logodatei stammt,
· Pfeil und das eingebackene Wort in Arial — E4: beides bleibt lebendes HTML in der
Hausschrift, sonst stuende es doppelt und waere nicht vorlesbar.
Masse: Jans Ring hat das Verhaeltnis 3,14. 152x48 trifft das fast genau (3,17), streckt
ihn also praktisch nicht — und 48 px ist zugleich ein tragfaehiges Antippziel, die
bisherigen 40 px lagen darunter. */
.zurueck{display:inline-flex;align-items:center;justify-content:center;gap:9px;
width:152px;height:48px;padding:0 14px 0 10px;
background:url('../logo/zurueck-ring-jan.svg') center/100% 100% no-repeat;
color:var(--tann);text-decoration:none;font-weight:600;font-size:.9rem;line-height:1;
white-space:nowrap;transition:transform .2s var(--ease)}
.zurueck:hover{transform:translateX(-2px)}
.zurueck:focus-visible{outline:2px solid var(--tann);outline-offset:4px;border-radius:20px}
.zurueck svg{width:22px;height:14px;display:block}
.subhero.mit-zurueck{padding-top:22px}
/* K5 · Zitat-/Kundenstimmen-Karte + Platzhalter-Zustand */
/* IB-3 (Jan, 30.08.): „Der beige/braune Strich ueber dem Zitat laeuft aktuell durch die
Baumscheibe. Muss links gekuerzt werden, sodass er erst nach der Baumscheibe beginnt."
Stimmt: der `border-top` begann bei left:0 und die Scheibe (::before, 24 px) sitzt
ebenfalls bei left:0 — die Linie lief hinter ihr durch, und seit die Scheibe offene
Jahresringe hat (PR-4), sieht man sie ZWISCHEN den Ringen. Ein Rand kann nicht links
eingerueckt werden, deshalb zeichnet ihn jetzt ein Hintergrundstreifen, der bei 34 px
anfaengt: 24 px Scheibe + 10 px Luft. Gilt fuer alle sechs Zitate auf drei Seiten. */
.stimme{position:relative;border-top:0;padding:22px 4px 6px;max-width:44ch;margin:0;
background-image:linear-gradient(var(--tan),var(--tan));
background-size:calc(100% - 34px) 2px;background-position:34px 0;background-repeat:no-repeat}
.stimme .zit{font-family:'Lora',Georgia,serif;font-style:italic;font-size:1.08rem;line-height:1.55;color:var(--tinte);margin:0}
.stimme .wer{display:block;margin-top:12px;font-size:.84rem;color:var(--muted);font-style:normal}
.stimme .wer b{color:var(--tinte);font-weight:600}
/* PR-4 (Jan KW35): die Scheibe ueber der gestrichelten Zitat-Linie war flaechig gefuellt
(baumscheibe-voll-tan.svg, #c9a674). Jan will die offenen Jahresringe, „in Braun“ —
also dieselbe Zeichnung in #a3773f, dem Braun der Nummerierung. */
.stimme::before{content:'';position:absolute;top:-13px;left:0;width:24px;height:24px;
background:url('../logo/baumscheibe-tan.svg') center/contain no-repeat}
.stimme .logo{height:26px;width:auto;margin-top:12px;opacity:.85}
.stimme.platzhalter{border-top:0;
background-image:repeating-linear-gradient(to right,var(--tan) 0 7px,transparent 7px 14px)}
.stimme.platzhalter .zit{color:var(--muted)}
.stimme.platzhalter::after{content:'Platzhalter · Zitat folgt';display:block;margin-top:10px;
font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tan-tief)}
.gallery .stimme{padding-top:26px}
/* Kachel-Form (beige, wie „In Jans Worten") mit Baumscheibe rechts */
.zitat-kachel{background:var(--papier)}
.zitat-kachel .stimme{border:0;background-image:none;max-width:56ch}
.zitat-kachel .stimme::before{display:none}
.zitat-kachel .zit{font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.4}
/* K6 · Baumscheiben-Deko: einheitliche Größe/Zuschnitt wie leistungen-Hero (Vorbild),
height:auto — das HTML-Attribut height=590 streckte den Bildkasten (Agent-Hinweis) */
.morphbg img{height:auto}
/*
Variante --voll = kompletter Kreis (Innenausbau, graue Kachel) */
.morphbg.klein img{width:min(38vw,460px);right:-6%;top:auto;bottom:-18%;opacity:.16}
.morphwrap.voll .morphbg img{right:6%;top:50%;transform:translateY(-50%) rotate(8deg);width:min(30vw,380px);opacity:.15}
@media (max-width:820px){.morphwrap.voll .morphbg img{right:-8%;width:52vw;top:auto;bottom:-6%;transform:rotate(8deg)}}
/* K7 · Beige/braune Kacheln: Trenner OBEN UND UNTEN (Regel 3) */
.schnitt.beidseitig::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--tan);z-index:2}
/* K8 · Video-Eckrahmen kräftiger (Jan: „dicker/kräftiger, peppiger") */
.kammer .media .tpf::before{border-top-width:4px;border-left-width:4px}
.kammer .media .tpf::after{border-bottom-width:4px;border-right-width:4px}
.kammer .media .tpf::before,.kammer .media .tpf::after{width:84px;height:84px}
/* K9 · Sprechblasen im Fasen-Stil (Küchen-Musterprojekt) */
.mp{position:relative}
.mp .bild{position:relative}
/* Fase liegt auf der Innenbox .bk — laege sie auf .blase, wuerde sie den .strich
(top:100%, ausserhalb der Box) wegclippen. Gemessen 20.08.: clip-path clippt Kinder. */
.blase{position:absolute;left:var(--bx);top:var(--by);width:var(--bw,250px);z-index:2;color:var(--tinte);
font-size:.82rem;line-height:1.45}
.blase .bk{background:var(--blatt);padding:12px 14px 11px;box-shadow:var(--sh-m);
clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.blase b{display:block;font-family:'Barlow Semi Condensed','Arial Narrow',sans-serif;font-size:1rem;font-weight:700;margin-bottom:2px}
.blase svg{width:26px;height:26px;stroke:var(--tann);fill:none;stroke-width:1.5;float:left;margin:2px 10px 4px 0}
.blase b,.blase .txt{overflow:hidden} /* Block bleibt neben dem Float-Icon (Mobile-Audit 20.08.) */
.blase .txt{display:block;color:var(--muted)}
.blase .strich{position:absolute;left:calc(50% - 1px);top:100%;width:2px;height:var(--l,54px);background:var(--tann)}
.blase .strich::after{content:'';position:absolute;left:50%;bottom:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--tann)}
@media (max-width:820px){
.mfig .blase,.mp .blase{position:static;width:auto;max-width:none;margin:10px 0 0}
.blase .strich{display:none}
.blase .bk{box-shadow:var(--sh-s);border-left:2px solid var(--tan)}}
/* K10 · Karte automatisch geladen (E8), Satellit */
.karte{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--werklicht2);border:1px solid var(--line)}
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.karte-hinweis{font-size:.8rem;color:var(--muted);margin-top:8px}
/* Regel 1/2 · Kontakt: „Rheingau‑Taunus" darf nicht brechen */
.nowrap{white-space:nowrap}
/* WhatsApp-Platzhalter */
.wa{display:flex;gap:14px;align-items:center;border:1.5px dashed var(--tan);padding:14px 16px;margin-top:22px;max-width:44ch}
.wa .btn{flex:none}
.wa small{display:block;color:var(--muted);font-size:.8rem}
/* Sticky-CTA: Footer reserviert bereits Platz (footer.site padding-bottom) — kein main-Padding (heller Streifen) */
/* Klangschild-Eyebrow mobil (Audit: abgeschnitten) */
.eyebrow{flex-wrap:wrap;row-gap:4px}
/* Kontrast (Audit A5): Nummern-/Zeitstrahl-Ziffern dunkler */
.schritt::before{color:#8a6230}
/* Startseite: „Was wir machen" größer (Jan) */
.eyebrow-lg{font-size:.92rem;letter-spacing:.14em}