/* ══════════════════════════════════════════════════════════════════════
   Björn Schillinger — Schreinermeister, Germering
   Signatur: DIE FUGE. Wo andere aufhören, geht bei uns das Licht an.

   Das Logo zeigt zwei Bretter mit einer schmalen Fuge dazwischen. Genau
   diese Fuge ist bei Björn die LED-Lichtfuge — auf seinen eigenen Küchen-,
   Sideboard- und Badfotos real zu sehen. Alles hier kommt daher:
   Inhalte öffnen sich AUS einer Lichtlinie (nie ein fade-in), jede Fläche
   trägt oben eine 1-px-Lichtkante, der Cursor ist ein warmer Lichtpunkt.

   Farben gemessen aus dem Logo (PIL-Counter):
     #664746  Korpus (dunkle Fläche)    #a87474  Anschnitt (Holz, Maserung)
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --nacht:#14100f;      /* Grund */
  --korpus:#221b19;     /* Fläche */
  --tiefer:#2d2421;     /* Fläche 2 */
  --kante:#42342f;      /* Linien */
  --holz:#c49090;       /* Logo hell — 🔴 22.09.2026 von #a87474 angehoben: als Textfarbe
                         trug sie nur 3,4–4,4:1 und riss 20 Kicker, Labels und Breadcrumbs
                         unter die Lesbarkeitsgrenze. Jetzt ≥ 4,9:1 auf JEDER der vier
                         Flaechen. Der Farbton bleibt, nur die Helligkeit steigt. */
  --tief:#664746;       /* Logo dunkel */
  --licht:#ffd9a0;      /* LED warm */
  --glut:#ffb865;       /* LED intensiv */
  --text:#f3ede9;
  --leise:#bfb2ab;
  --papier:#3a2d28;     /* 🔴 vierte DUNKLE Flaeche. Bjoern, 17.09.2026: "Mein Auto ist
                           schwarz, meine Klamotten sind anthrazitgrau. Ich bin kein weisser
                           Maler, deswegen habe ich das Dunkle durchgezogen." Der Name bleibt,
                           damit nicht 11 Seiten umgeschrieben werden muessen. */
  --papier-text:#f3ede9;
  --papier-leise:#cbbcb4;
  --breit:1260px;
  --rand:30px;
  --kopf:112px;
}
@media (max-width:900px){ :root{ --rand:20px; --kopf:74px; } }

*{box-sizing:border-box}
.sprung{position:absolute; left:12px; top:12px; z-index:9999; background:var(--licht); color:#1c1615;
        padding:14px 22px; text-decoration:none; font-size:15px;
        clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap}
.sprung:focus{clip-path:none; width:auto; height:auto; overflow:visible}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nacht); color:var(--text);
  font:400 17px/1.7 var(--sans);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--glut); color:#1c1615}

.wrap{max-width:var(--breit); margin:0 auto; padding:0 var(--rand)}
.eng{max-width:860px}

/* ── Typografie ──────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:400;
  font-optical-sizing:auto;
  margin:0; line-height:1.06;
  text-wrap:balance;
}
/* Tracking je Groesse, nicht einmal fuer alles (Apple, Details of UI Typography) */
h1{font-size:clamp(40px,6.4vw,88px); letter-spacing:-.032em; line-height:1.02}
/* 🔴 Deutsche Komposita sprengen sonst das Handy-Layout: „Siphonschublade.“ lief
   auf baeder.html 4 px ueber den Traeger. Netz fuer jedes kuenftige lange Wort. */
@media (max-width:480px){ h1,h2{overflow-wrap:break-word; hyphens:auto} }
h2{font-size:clamp(32px,4.3vw,58px); letter-spacing:-.026em; line-height:1.05}
h3{font-size:clamp(23px,2.5vw,32px); letter-spacing:-.016em; line-height:1.14}
h4{font-size:20px; line-height:1.28; letter-spacing:-.008em; font-weight:500}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

/* Der Kicker ist selbst eine Fuge: Lichtlinie + gesperrte Versalien */
.kicker{
  font-family:var(--sans); font-size:13px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:var(--holz);
  display:flex; align-items:center; gap:14px; margin:0 0 22px;
}
.kicker::before{
  content:""; width:46px; height:2px; flex:none;
  background:linear-gradient(90deg,var(--glut),rgba(255,184,101,0));
  box-shadow:0 0 12px rgba(255,184,101,.55);
}
.auf-papier .kicker{color:var(--holz)}
.auf-papier .kicker::before{background:linear-gradient(90deg,var(--glut),rgba(255,184,101,0))}

.mass{font-family:var(--sans); font-size:13px; letter-spacing:.08em; color:var(--leise)}
.lead{font-size:clamp(18px,1.9vw,21px); line-height:1.66; color:#ded3cd}
.auf-papier .lead{color:var(--papier-leise)}

/* ── Flächen ─────────────────────────────────────────────────────────── */
.abschnitt{padding:clamp(84px,9vw,136px) 0; position:relative}
.f-korpus{background:var(--korpus)}
.f-tiefer{background:var(--tiefer)}
.f-papier{background:var(--papier); color:var(--papier-text)}
.f-papier h1,.f-papier h2,.f-papier h3,.f-papier h4{color:var(--papier-text)}

/* Die Lichtkante: jede Fläche wird von oben angeleuchtet — 1 px, wie eine
   eingelassene LED-Leiste. Das ist die Signatur als Zeichen, nicht als Muster. */
.f-korpus::before,.f-tiefer::before,.f-papier::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,
    rgba(255,217,160,0) 0%, rgba(255,217,160,.42) 22%,
    rgba(255,217,160,.10) 58%, rgba(255,217,160,0) 100%);
}
.f-papier::before{background:linear-gradient(90deg,rgba(255,217,160,0),rgba(255,217,160,.22) 30%,rgba(255,217,160,0))}

/* ── Kopf ────────────────────────────────────────────────────────────── */
/* 🔴 Noah, 22.09.2026: „da ist immer noch die alte Schrift drin" · „diese hässliche
   Schrift" · „vielleicht matcht das Braune mit dieser Schrift nicht". Die Seite lief auf
   DREI Familien — Outfit, Urbanist und DM Mono; letztere allein an 17 Stellen quer durch
   Kicker, Maße, Formular-Labels, Fußzeile und Breadcrumbs. Jetzt EINE Logik: Bricolage
   Grotesque traegt die Display-Grade (echte optische Groessen), Instrument Sans alles
   andere. Hierarchie entsteht aus Gewicht, Groesse und Tracking — nicht aus dem Mischen
   von Familien. Monospace gibt es auf dieser Seite nicht mehr. */
.topbar{
  background:#0f0c0b; border-bottom:1px solid var(--kante);
  font-size:13.5px; letter-spacing:.012em;
}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:38px; padding-block:6px}
.topbar a{color:var(--leise); text-decoration:none; display:inline-flex; align-items:center; gap:7px; padding:10px 0; margin:-10px 0}
.topbar a:hover{color:var(--licht)}
.topbar .ort{color:#897d78}
.topbar-rechts{display:flex; gap:22px; align-items:center}
@media (max-width:760px){ .topbar .ort{display:none} .topbar .wrap{justify-content:center} }

header.kopf{position:sticky; top:0; z-index:60}
.kopfzeile{
  background:rgba(20,16,15,.80); backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--kante);
}
.kopfzeile .wrap{display:flex; align-items:center; gap:26px; min-height:var(--kopf)}
@media (max-width:900px){ .kopfzeile .wrap{min-height:var(--kopf)} }

.marke{display:flex; align-items:center; gap:15px; text-decoration:none; padding:8px 0; margin:-8px 0}
.marke img{width:62px; height:auto; flex:none}
.marke .wort{font-family:var(--display); font-weight:300; font-size:16px; letter-spacing:.19em; line-height:1.18; text-transform:uppercase; white-space:nowrap}
.marke .wort small{display:block; font-size:13px; letter-spacing:.30em; color:var(--holz); font-weight:300}
@media (max-width:520px){ .marke img{width:48px} .marke .wort{font-size:14px; letter-spacing:.14em} .marke .wort small{font-size:13px; letter-spacing:.18em} }

.nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.nav > a,.nav > .hat-menu > a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 15px;
  text-decoration:none; font-size:15px; letter-spacing:.045em; color:#cdc0ba;
  position:relative; transition:color .22s;
}
.nav > a:hover,.nav > .hat-menu:hover > a,.nav > a[aria-current]{color:var(--text)}
/* Die aktive Seite trägt eine Lichtfuge, keinen Balken */
.nav > a[aria-current]::after,.nav > .hat-menu > a[aria-current]::after{
  content:""; position:absolute; left:15px; right:15px; bottom:7px; height:2px;
  background:var(--glut); box-shadow:0 0 10px rgba(255,184,101,.75);
}

.hat-menu{position:relative}
.drop{
  position:absolute; top:100%; left:-8px; min-width:356px; padding:10px;
  background:#191313; border:1px solid var(--kante);
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,217,160,.22);
  opacity:0; visibility:hidden; transform:translateY(-7px); transition:.2s;
}
.hat-menu:hover .drop,.hat-menu:focus-within .drop{opacity:1; visibility:visible; transform:none}
.drop a{
  display:flex; gap:13px; align-items:flex-start; padding:11px 13px;
  text-decoration:none; color:#cdc0ba; transition:background .18s,color .18s;
}
.drop a[hidden]{display:none}
.drop a:hover{background:#221a19; color:var(--text)}
.drop svg{width:30px; height:30px; flex:none; margin-top:1px; stroke:#fff; fill:none; stroke-width:1.45;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); transition:stroke .28s, transform .28s}
.drop a:hover svg{stroke:var(--licht); transform:translateX(2px)}
.drop b{display:block; font-weight:500; font-size:15.5px; letter-spacing:.01em}
.drop span{display:block; font-size:13.5px; color:#8d817c; line-height:1.4}
.drop .alle{border-top:1px solid var(--kante); margin-top:6px; padding-top:13px; color:var(--holz); font-size:14px}

.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 26px; text-decoration:none; border:0; cursor:pointer;
  font-family:var(--display); font-size:15.5px; font-weight:400; letter-spacing:.05em;
  background:var(--licht); color:#1c1615; position:relative; overflow:hidden;
  transition:transform .1s, box-shadow .25s;
}
.cta::after{ /* Glanz-Sweep */
  content:""; position:absolute; inset:0; transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transition:transform .65s;
}
.cta:hover{box-shadow:0 0 34px rgba(255,217,160,.34)}
.cta:hover::after{transform:translateX(110%)}
.cta:active{transform:scale(.97)}
.cta-kopf{margin-left:6px}
.cta.linie{background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--kante)}
.cta.linie:hover{box-shadow:inset 0 0 0 1px var(--holz), 0 0 26px rgba(168,116,116,.2)}
.f-papier .cta.linie{color:var(--papier-text); box-shadow:inset 0 0 0 1px rgba(28,22,21,.28)}

.burger{display:none; width:48px; height:48px; margin-left:auto; background:none; border:0; cursor:pointer; padding:12px}
.burger span{display:block; height:1.5px; background:var(--text); margin:6px 0; transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* 🔴 backdrop-filter am Kopf macht ihn zum containing block für fixed (Musch).
   Deshalb feste Höhe statt top/bottom — und visibility:hidden im Ruhezustand,
   sonst fängt die unsichtbare Fläche die Klicks auf den Burger ab. */
.mobilmenu{
  position:fixed; left:0; right:0; top:var(--kopf); height:calc(100svh - var(--kopf));
  background:#100c0b; padding:22px var(--rand) 40px; overflow-y:auto; z-index:55;
  transform:translateY(-100%); visibility:hidden; transition:transform .34s cubic-bezier(.4,0,.2,1), visibility .34s;
}
.mobilmenu.offen{transform:none; visibility:visible}
.mobilmenu a{display:block; padding:15px 0; text-decoration:none; font-size:19px; border-bottom:1px solid var(--kante)}
.mobilmenu .unter a{padding-left:20px; font-size:16.5px; color:#a99d97}
.mobilmenu .cta{width:100%; margin-top:24px}
@media (max-width:1080px){ .nav,.cta-kopf{display:none} .burger{display:block} }
@media (min-width:1081px){ .mobilmenu{display:none} }

/* ── HERO: die Fuge öffnet sich ──────────────────────────────────────── */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#0b0908}
.hero.unter{min-height:100svh}
.hero-film{position:absolute; inset:0}
.hero-film video,.hero-film img{width:100%; height:100%; object-fit:cover}
.hero-film::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,9,8,.58) 0%,rgba(11,9,8,.10) 34%,rgba(11,9,8,.84) 100%),
             linear-gradient(90deg,rgba(11,9,8,.74),rgba(11,9,8,0) 56%);
}
/* Bild-Heros brauchen weniger Schleier als das bewegte Video */
.hero.unter .hero-film::after{
  background:linear-gradient(180deg,rgba(11,9,8,.46) 0%,rgba(11,9,8,.06) 32%,rgba(11,9,8,.80) 100%),
             linear-gradient(90deg,rgba(11,9,8,.68),rgba(11,9,8,0) 54%);
}
/* Gemessen dunkle Aufnahmen (LED bei Nacht) werden angehoben, statt sie zu ersetzen —
   genau diese Fotos zeigen die Lichtfuge, die die Signatur trägt. */
.hero-film img[data-dunkel]{filter:brightness(1.45) saturate(1.06)}
/* Zwei Blenden fahren beim Laden auseinander — die Fuge öffnet sich */
.blende{position:absolute; left:0; right:0; background:#0b0908; z-index:3; transition:transform 1.15s cubic-bezier(.76,0,.24,1)}
.blende.o{top:0; height:50%}
.blende.u{bottom:0; height:50%}
.hero.auf .blende.o{transform:translateY(-100%)}
.hero.auf .blende.u{transform:translateY(100%)}
.fugenlicht{
  position:absolute; left:0; right:0; top:50%; height:2px; z-index:4;
  background:linear-gradient(90deg,transparent,var(--licht) 18%,#fff 50%,var(--licht) 82%,transparent);
  box-shadow:0 0 40px 8px rgba(255,217,160,.5); opacity:0; transition:opacity .5s;
}
.hero.zuendet .fugenlicht{opacity:1}
.hero.auf .fugenlicht{opacity:0; transition:opacity .9s .3s}

.hero-inhalt{position:relative; z-index:5; padding-top:170px; padding-bottom:clamp(64px,7vw,104px); width:100%}
/* Der Text sitzt auf einem eigenen Träger statt auf mehr Schleier: ein dunkler
   Korpus mit Lichtkante oben — dieselbe Geste wie bei jeder Fläche der Seite.
   Ein Verlauf über das ganze Bild deckt entweder das Motiv zu oder lässt den
   Text auf hellen Stellen stehen; der Träger löst beides. */
.hero-traeger{--tp:clamp(20px,3vw,40px);
  position:relative; display:inline-block; max-width:min(760px,100%);
  padding:clamp(26px,3vw,40px) var(--tp) clamp(28px,3vw,42px);
  margin-left:calc(-1 * var(--tp));
  background:rgba(11,9,8,.62); backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15)}
.hero-traeger::before{content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg,var(--licht),rgba(255,217,160,.14) 62%,rgba(255,217,160,0));
  box-shadow:0 0 18px rgba(255,184,101,.4)}
@media (max-width:560px){ .hero-traeger{padding:22px 20px 24px} }
.hero h1{max-width:16ch}
.hero h1 .ort{display:block; font-size:.38em; letter-spacing:.015em; color:var(--holz); margin-top:18px; font-weight:300}
.hero .lead{max-width:52ch; margin-top:26px}
.hero-knoepfe{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}

/* Der Fugenzeiger am rechten Rand: eine senkrechte Lichtlinie, die mit dem
   Scroll wächst. Ersetzt die übliche Scroll-Anzeige. */
.fugenzeiger{position:absolute; right:var(--rand); top:22%; bottom:14%; width:2px; background:var(--kante); z-index:5}
.fugenzeiger i{position:absolute; inset:0 0 auto; height:var(--p,0%); background:linear-gradient(180deg,var(--glut),var(--licht)); box-shadow:0 0 14px rgba(255,184,101,.65)}
.fugenzeiger b{position:absolute; right:14px; top:0; font-family:var(--sans); font-size:13px; color:var(--holz); writing-mode:vertical-rl; letter-spacing:.2em}
@media (max-width:900px){ .fugenzeiger{display:none} }

/* ── Reveal: Inhalte öffnen sich AUS der Fuge ────────────────────────── */
/* Kein fade-in, kein translateY: eine Lichtlinie in der Mitte, von der aus
   sich der Block nach oben UND unten öffnet. Grundzustand ist sichtbar —
   die Maske wird erst gesetzt, wenn der Block in die Nähe kommt (Lipp). */
.fugt{clip-path:inset(50% 0 50% 0); opacity:.001; transition:clip-path .9s cubic-bezier(.22,1,.36,1), opacity .35s}
.fugt.offen{clip-path:inset(0 0 0 0); opacity:1}
@media (prefers-reduced-motion:reduce){
  .fugt,.fugt.offen{clip-path:none!important; opacity:1!important; transition:none!important}
  .blende{display:none}
  /* 🔴 Das Video NICHT ausblenden — sonst stand im Kopf gar kein Bild mehr.
     Es wird stattdessen angehalten (main.js), sichtbar bleibt sein Poster. */
  *{animation:none!important}
}

/* ── Cursor: warmer Lichtpunkt ───────────────────────────────────────── */
.lichtpunkt{
  position:fixed; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; z-index:9999;
  border-radius:50%; background:var(--licht); pointer-events:none; mix-blend-mode:screen;
  box-shadow:0 0 26px 10px rgba(255,184,101,.30); opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s, width .2s, height .2s;
}
.lichtpunkt.an{opacity:.9; visibility:visible}
.lichtpunkt.gross{width:44px; height:44px; margin:-22px 0 0 -22px; box-shadow:0 0 60px 22px rgba(255,184,101,.32)}
@media (hover:none),(prefers-reduced-motion:reduce){ .lichtpunkt{display:none} }

/* ── Statement: der Satz wird vom Licht abgetastet ───────────────────── */
.statement{text-align:left; padding:clamp(96px,11vw,168px) 0}
.statement p{
  font-family:var(--display); font-weight:300; font-size:clamp(30px,4.6vw,62px);
  line-height:1.16; letter-spacing:-.02em; max-width:19ch; margin:0;
}
/* 🔴 Der Ruhezustand eines FÜLL-TEXTES muss lesbar sein — gemessen, nicht geschätzt.
   Vorher #51413d auf #14100f = 1,96:1: der Satz war unlesbar, bis der Scroll ihn
   füllte. Wer währenddessen liest, liest nichts. Jetzt 4,99:1 (AA erfüllt); der
   Effekt ist die Aufhellung von „lesbar" auf „hell", nicht von „unsichtbar" auf
   „sichtbar". Grundlage: NN/G, „Scroll-Triggered Text Animations Delay Users". */
/* 🔴 Noah, 23.09.2026: „animation hier rausgemacht … obwohl ich sie gut fande."
   Sie lief technisch weiter (gemessen 0 → 2 → 5 → 8 Wörter), war aber zu leise
   geworden: der Ruhezustand musste fuer die Lesbarkeit aufgehellt werden, und damit
   schrumpfte der Abstand zum gefuellten Wort. Der Ruhezustand bleibt lesbar — das
   GEFUELLTE Wort traegt jetzt den Unterschied: heller als der Fliesstext, mit einem
   warmen Schimmer, und die Leuchtmarke deutlich kraeftiger. */
.statement .w{color:#8c817c; transition:color .45s, text-shadow .45s, opacity .45s}
.statement .w.hell{color:#fffaf4; text-shadow:0 0 18px rgba(255,217,160,.22)}
.statement .w.jetzt{color:var(--glut); text-shadow:0 0 34px rgba(255,184,101,.75),
                                        0 0 12px rgba(255,217,160,.5)}
@media (prefers-reduced-motion:reduce){
  .statement .w{color:var(--text); transition:none}
  .statement .w.jetzt{color:var(--text); text-shadow:none}
}
.statement .quelle{font-family:var(--sans); font-size:13.5px; color:var(--holz); letter-spacing:.1em; margin-top:34px; display:block}

/* 🔴 Noah, 23.09.2026: „das ist auch so eine Quote, die man dann sozusagen irgendwie
   in die Mitte packen koennte." Als eigene Sektion linksbuendig war der Satz eine
   halbleere Doppelseite. Als mittiges Zitat INNERHALB der Philosophie ist er die
   Pointe des Raumvergleichs darueber. */
.statement.zitat{
  text-align:center; padding:clamp(52px,6vw,86px) 0 clamp(30px,3.4vw,44px);
  display:grid; justify-items:center; position:relative;
}
.statement.zitat p{
  max-width:23ch; font-size:clamp(27px,3.5vw,46px); text-wrap:balance;
}
.statement.zitat .quelle{margin-top:24px}
/* Die Signatur des Hauses: eine Lichtfuge, die den Satz traegt */
.zitat-fuge{
  display:block; width:clamp(64px,9vw,128px); height:3px; margin-bottom:clamp(30px,3.4vw,46px);
  background:linear-gradient(90deg,transparent,var(--glut),transparent);
  transform:scaleX(.18); transform-origin:center;
  transition:transform 1.05s cubic-bezier(.22,1,.36,1); opacity:.9;
}
.statement.zitat.offen .zitat-fuge{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){ .zitat-fuge{transform:scaleX(1); transition:none} }
/* Auf dem Papier-Grund traegt der Fuelltext andere Werte als auf dem dunklen */
.auf-papier .statement .w{color:#9c8f89}
.auf-papier .statement .w.hell{color:#fffaf4}

/* ── Der Korpus: Signaturgrafik ──────────────────────────────────────── */
/* Ein Möbel im Schnitt. Beim Scrollen füllt sich Fach für Fach mit Licht —
   links die Dachschräge, die sonst leer bliebe. */
/* 🔴 Die Zeichnung ist die Aussage dieser Sektion — sie bekommt die groessere
   Haelfte und traegt kraeftigere Linien. Vorher stand ein riesiger Textblock neben
   einer duennen Strichgrafik. */
.korpus-block{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(34px,4vw,64px); align-items:center}
@media (max-width:960px){ .korpus-block{grid-template-columns:1fr; gap:44px} }
.korpus-buehne{position:relative}
.korpus-buehne svg{width:100%; height:auto; display:block; overflow:visible;
  filter:drop-shadow(0 0 34px rgba(255,184,101,.12))}
/* Linien kraeftiger, damit die Zeichnung gegen den Text bestehen kann */
.korpus-buehne svg [stroke]{stroke-width:1.9}
.korpus-buehne svg text{font-size:21px}
.korpus-buehne svg text{font-family:var(--sans); font-size:20px; fill:var(--leise); letter-spacing:.06em}
@media (max-width:900px){ .korpus-buehne svg text{font-size:30px} }
.fach{transition:opacity .6s ease, filter .6s ease}
.fach-licht{transition:opacity .55s ease}
.gewinn{display:flex; align-items:baseline; gap:14px; margin-top:30px}
.gewinn .zahl{font-family:var(--display); font-weight:300; font-size:clamp(52px,7vw,86px); line-height:.92; color:var(--licht); letter-spacing:-.03em}
.gewinn .was{font-size:16px; color:var(--leise); max-width:22ch; line-height:1.4}
.korpus-liste{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:2px}
.korpus-liste li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; padding:14px 0; border-top:1px solid var(--kante)}
.korpus-liste .nr{font-family:var(--sans); font-size:13px; color:var(--holz); letter-spacing:.1em}
.korpus-liste b{font-weight:500; font-size:16.5px}
.korpus-liste span{display:block; color:var(--leise); font-size:15.5px; line-height:1.5}

/* ── Leistungen: die Fronten ─────────────────────────────────────────── */
/* Sechs Schrankfronten. Geschlossen sind sie dunkel; beim Erscheinen fährt
   die Front zur Seite und das Licht dahinter geht an. */
.fronten{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; margin-top:54px}
@media (max-width:960px){ .fronten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .fronten{grid-template-columns:1fr} }
.front{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  aspect-ratio:4/5; background:#0f0c0b; isolation:isolate;
}
@media (max-width:600px){ .front{aspect-ratio:16/10} }
.front img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.front:hover img{transform:scale(1)}
/* 🔴 Noah, 22.09.2026: „die Bilder sind irgendwie dunkel". Der Schleier stand
   unten auf 90 % Schwarz. Lesbarkeit kommt aus dem Verlauf UNTEN am Text, nicht
   daraus, das ganze Motiv zuzudecken. */
.front .schleier{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,9,8,0) 0%,rgba(11,9,8,.06) 42%,rgba(11,9,8,.62) 78%,rgba(11,9,8,.88) 100%)}
/* die Front selbst — schiebt sich beim Öffnen nach rechts weg */
.front .tuer{
  position:absolute; inset:0; background:linear-gradient(160deg,#241c1a,#15100f);
  border-right:1px solid rgba(255,217,160,.12); z-index:2;
  transform:translateX(0); transition:transform 1.05s cubic-bezier(.62,0,.2,1);
}
.front.auf .tuer{transform:translateX(101%)}
/* die Lichtfuge am Rand der Tür */
.front .fuge{
  position:absolute; top:0; bottom:0; left:0; width:3px; z-index:3; opacity:0;
  background:linear-gradient(180deg,rgba(255,217,160,0),var(--licht) 25%,var(--licht) 75%,rgba(255,217,160,0));
  box-shadow:0 0 26px 5px rgba(255,184,101,.55);
  transition:transform 1.05s cubic-bezier(.62,0,.2,1), opacity .3s;
}
.front.auf .fuge{opacity:1; transform:translateX(calc(100% * var(--fb,120)));
  animation:fuge-aus .35s 1.05s forwards}
@keyframes fuge-aus{to{opacity:0}}
.front .inhalt{position:absolute; inset:auto 0 0 0; padding:26px 24px; z-index:4}
.front h4{font-size:23px; letter-spacing:-.005em}
.front .zeile{display:block; font-size:14.5px; color:#c3b5af; margin-top:7px; line-height:1.45}
.front .pfeil{
  display:flex; width:fit-content; align-items:center; gap:9px; margin-top:14px;
  font-family:var(--sans); font-size:13px; letter-spacing:.13em; color:var(--licht);
  text-transform:uppercase;
}
.front .pfeil svg{width:17px; height:10px; stroke:var(--licht); fill:none; stroke-width:1.5; transition:transform .3s}
.front:hover .pfeil svg{transform:translateX(6px)}
.front:active{transform:scale(.995)}

/* ── Der Restraum: Situationen ───────────────────────────────────────── */
.situationen{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:52px}
@media (max-width:1000px){ .situationen{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .situationen{grid-template-columns:1fr} }
.situation{position:relative; background:var(--tiefer); overflow:hidden}
.situation .bild{position:relative; aspect-ratio:1/1; overflow:hidden}
.situation img{width:100%; height:100%; object-fit:cover; filter:saturate(.88)}
/* 🔴 Der Maß-Chip klebte als Monospace-Etikett auf dem Foto — genau der Stilbruch,
   den Noah am 22.09.2026 gemeldet hat. Das Maß ist Inhalt, kein Aufkleber: es steht
   jetzt als feine Zeile UNTER dem Titel, in der Schrift der Seite. */
.situation .mass-chip{
  display:block; font-size:13.5px; letter-spacing:.01em; color:var(--holz);
  margin-bottom:9px;
}
.situation .mass-chip::before{
  content:""; display:inline-block; width:16px; height:1px; background:var(--glut);
  vertical-align:middle; margin-right:9px; transition:width .45s cubic-bezier(.22,1,.36,1);
}
.situation:hover .mass-chip::before{ width:28px }
.situation .txt{padding:20px 20px 24px}
.situation b{display:block; font-family:var(--display); font-weight:400; font-size:18px; margin-bottom:6px}
.situation span{font-size:15px; color:var(--leise); line-height:1.5}

/* ── Galerie ─────────────────────────────────────────────────────────── */
.galerie{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; margin-top:48px}
@media (max-width:900px){ .galerie{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .galerie{grid-template-columns:1fr} }
.galerie figure{margin:0; position:relative; aspect-ratio:4/3; overflow:hidden; background:#0f0c0b}
.galerie img{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.22,1,.36,1)}
.galerie figure:hover img{transform:scale(1.045)}
.galerie figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 18px 15px; font-size:14.5px;
  background:linear-gradient(transparent,rgba(11,9,8,.9)); color:#e2d7d1;
}

/* ── Der Weg: sieben Schritte an einer senkrechten Lichtfuge ─────────── */
.weg{position:relative; margin-top:56px; padding-left:clamp(30px,5vw,64px)}
.weg::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; background:var(--kante)}
.weg .glut{position:absolute; left:0; top:10px; width:2px; height:var(--p,0%); background:linear-gradient(180deg,var(--glut),var(--licht)); box-shadow:0 0 14px rgba(255,184,101,.6); transition:height .1s linear}
.weg ol{list-style:none; margin:0; padding:0; display:grid; gap:clamp(24px,3vw,40px)}
/* 🔴 Noah, 22.09.2026: „das steht dann von 2001 bis 2003 … ab 2004 ist es dann
   eingerückt, das ist alles nicht in der Reihe." Ursache: jedes <li> war ein EIGENES
   Grid mit `auto` als erster Spalte — also richtete sich jede Zeile nach der Breite
   ihrer eigenen Jahreszahl. „2001–2003" ist doppelt so breit wie „2004", und der Text
   daneben sprang mit. Feste Spaltenbreite: alle Zeilen starten auf derselben Linie. */
.weg li{position:relative; display:grid; grid-template-columns:var(--nr-breit,9ch) 1fr; gap:clamp(18px,2.6vw,34px); align-items:baseline}
.weg li::before{
  content:""; position:absolute; left:calc(-1 * clamp(30px,5vw,64px) - 4px); top:11px;
  width:10px; height:10px; background:var(--nacht); box-shadow:inset 0 0 0 2px var(--tief); transition:box-shadow .4s, background .4s;
}
.weg li.hier::before{background:var(--licht); box-shadow:0 0 16px 3px rgba(255,184,101,.6)}
.weg .nr{font-family:var(--sans); font-size:13px; color:var(--holz); letter-spacing:.12em; padding-top:6px}
.weg h4{margin-bottom:6px}
.weg p{color:var(--leise); font-size:16px; margin:0}

/* ── Karten ──────────────────────────────────────────────────────────── */
.karten{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; margin-top:48px}
@media (max-width:900px){ .karten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .karten{grid-template-columns:1fr} }
.f-tiefer .karte,.f-tiefer .zahlenfeld,.f-tiefer .situation,
.f-tiefer .anfrage-info,.f-tiefer .anfrage-form{background:var(--korpus)}
.karte{background:var(--tiefer); padding:32px 28px 34px; position:relative}
.karte::before{content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,rgba(255,217,160,.3),rgba(255,217,160,0) 70%)}
.f-papier .karte{background:#382b27}
.f-papier .karte::before{background:linear-gradient(90deg,rgba(255,217,160,.3),rgba(255,217,160,0) 70%)}
.karte svg{width:40px; height:40px; stroke:#fff; fill:none; stroke-width:1.45; margin-bottom:20px;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); transition:stroke .3s, transform .4s cubic-bezier(.22,1,.36,1)}
.f-papier .karte svg{stroke:#fff}
.karte:hover svg{stroke:var(--licht); transform:translateY(-3px)}
.karte h4{margin-bottom:9px}
.karte p{font-size:15.5px; color:var(--leise); margin:0}
.f-papier .karte p{color:var(--papier-leise)}

/* ── Duo ─────────────────────────────────────────────────────────────── */
/* 🔴 Noah, 22.09.2026, zweite Runde: „die Bilder sind nicht so groß wie der Text."
   Beim ersten Mal wurde die BREITE korrigiert — die Hoehe blieb: `align-items:center`
   plus eine max. min-height von 520 px deckelte das Foto, waehrend der Text daneben
   758 px hoch lief. Jetzt traegt die Bildseite die volle Zeilenhoehe (Apple: Bild und
   Text nebeneinander sind gleich gross), die min-height wirkt nur noch als Untergrenze. */
.duo{display:grid; grid-template-columns:1.22fr .78fr; gap:clamp(34px,4.6vw,74px); align-items:stretch}
/* 🔴 KEIN `min-width:0` hier: es laesst die Spalte unter ihre Inhaltsbreite
   schrumpfen, und deutsche Komposita („Dachschrägenschränke") brechen nicht mit —
   der Text lief dann 33 px ueber seinen Kasten. Der Prüfer hat es gefunden,
   nachdem ich es vorsorglich gesetzt hatte. */
.duo > * > h2{overflow-wrap:break-word; hyphens:auto}
/* 🔴 Bild = Texthoehe, ABER gedeckelt: bei sehr langem Text wurde ein
   Handyfoto sonst auf ueber 800 px aufgeblasen und wirkte billig statt gross. */
/* 🔴 Bild = Texthoehe, aber gedeckelt UND mitlaufend: bei sehr langem Text wurde
   ein Handyfoto sonst auf ueber 800 px aufgeblasen und wirkte billig statt gross.
   Jetzt bleibt es 620 px und BEGLEITET den Text beim Scrollen — praesent ueber die
   ganze Sektion, ohne verzerrt zu werden (Apple: raeumliche Bestaendigkeit). */
.duo .bildseite{height:100%; max-height:620px; align-self:start;
                position:sticky; top:calc(var(--kopf) + 26px)}
@media (max-width:900px){ .duo .bildseite{position:relative; top:auto; max-height:none; height:auto; min-height:min(75vw,360px)} }
.duo.gedreht{grid-template-columns:.78fr 1.22fr}
/* 🔴 Noah, 23.09.2026: „unter der Startseite waere perfekt, einfach ein Bild von ihm,
   sodass man da so eine Art Ueber-mich-Sektion macht … der Meister, der es auch baut,
   wird die Sektion dann hochmachen." Bild LINKS — die Sektion darunter („Die Fuge")
   hat Text links und Grafik rechts; zwei gleich gebaute Sektionen in Folge sind der
   Stilbruch, den die Rhythmus-Regel verbietet. */
.duo.umgedreht{grid-template-columns:.92fr 1.08fr}
@media (max-width:900px){ .duo.umgedreht{grid-template-columns:1fr} .duo.umgedreht .bildseite{order:-1} }
.ueber-mich .portraet{min-height:clamp(420px,44vw,560px); max-height:none}
.signatur-zeile{
  font-family:var(--display); font-weight:400; font-size:21px; letter-spacing:-.01em;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--kante); display:block;
}
/* Vier Punkte quer unter einem Duo — eigene Bauform, nicht die halbe Duo-Spalte */
.haken.vierer{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px clamp(26px,3.4vw,52px); margin-top:clamp(34px,3.6vw,48px)}
@media (max-width:760px){ .haken.vierer{grid-template-columns:1fr} }
.signatur-zeile span{
  display:block; font-family:var(--sans); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--holz); margin-top:5px;
}
.duo.gleich{grid-template-columns:1fr 1fr}
/* 🔴 Noah, 22.09.2026: „bei Sonderanfertigung … ist es ein Bild viel kleiner als
   der Text ÜBERALL." Gemessen: in 10 von 10 Duo-Blöcken war die Bildspalte 442 px
   breit und die Textspalte 692 px. Ein Foto, das die Arbeit zeigt, darf nie die
   kleinere Hälfte sein — die Bildseite bekommt die große Spalte, egal auf welcher
   Seite sie steht. */
/* 🔴 NUR ab Tablet aufwärts. `:has()` ist spezifischer als die Mobil-Media-Query
   weiter oben und hat sie überschrieben — am Handy standen dadurch 143-px-Spalten
   und der Zeitstrahl lief aus seinem Kasten. Dieselbe Falle wie ein Inline-Raster,
   nur über die Spezifität statt über das style-Attribut. */
@media (min-width:901px){
  .duo:has(> .bildseite:first-child){grid-template-columns:1.18fr .82fr}
  .duo:has(> .bildseite:last-child){grid-template-columns:.82fr 1.18fr}
  /* :has() ist spezifischer als eine blosse Klasse — deshalb hier ebenfalls mit :has(),
     sonst bleibt bildgross wirkungslos. */
  .duo.bildgross:has(> .bildseite){grid-template-columns:1.34fr .66fr}
  .duo .bildseite{min-height:clamp(380px,40vw,520px)}
  .duo.bildgross .bildseite{min-height:min(74vh,560px)}
}
@media (max-width:900px){ .duo,.duo.gedreht,.duo.gleich{grid-template-columns:1fr; gap:34px} .duo.gedreht .bildseite{order:-1} }
.bildseite{position:relative; min-height:300px; overflow:hidden; background:#0f0c0b}
.bildseite img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bildseite.zwei{display:grid; grid-template-columns:1fr 1fr; gap:3px; position:relative}
.bildseite.zwei img{position:relative; inset:auto; aspect-ratio:3/4}
.bildnotiz{
  position:absolute; left:0; bottom:0; z-index:2; padding:9px 14px;
  background:rgba(13,10,9,.86); color:var(--licht);
  font-family:var(--sans); font-size:13px; letter-spacing:.06em;
  border-left:2px solid var(--glut);
}

/* ── Liste mit Haken ─────────────────────────────────────────────────── */
.haken{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:1px}
.haken li{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; padding:13px 0; border-top:1px solid var(--kante); font-size:16px}
.f-papier .haken li{border-top-color:rgba(28,22,21,.14)}
.haken svg{width:17px; height:17px; margin-top:5px; stroke:var(--glut); fill:none; stroke-width:1.8; flex:none}
.f-papier .haken svg{stroke:var(--tief)}

/* ── Zahlen ──────────────────────────────────────────────────────────── */
.zahlen{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:50px}
.zahlen.zwei{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px}
@media (max-width:820px){ .zahlen{grid-template-columns:repeat(2,minmax(0,1fr))} }
.zahlenfeld{background:var(--tiefer); padding:30px 24px 32px; position:relative}
.zahlenfeld::before{content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,rgba(255,217,160,.3),transparent 70%)}
.zahlenfeld .gr{font-family:var(--display); font-weight:300; font-size:clamp(38px,4.4vw,54px); line-height:1; color:var(--text); letter-spacing:-.03em; display:block}
.zahlenfeld .kl{display:block; margin-top:11px; font-size:15px; color:var(--leise); line-height:1.45}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{margin-top:40px; max-width:860px}
.faq details{border-top:1px solid var(--kante)}
.f-papier .faq details{border-top-color:rgba(28,22,21,.16)}
.faq summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative; font-family:var(--display); font-weight:400; font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:32px; width:13px; height:1.5px; background:var(--holz); transition:transform .3s}
.faq summary::before{content:""; position:absolute; right:11.75px; top:26.25px; width:1.5px; height:13px; background:var(--holz); transition:transform .3s, opacity .3s}
.faq details[open] summary::before{opacity:0; transform:rotate(90deg)}
.faq p{padding:0 0 24px; color:var(--leise); font-size:16px; max-width:70ch}
.f-papier .faq p{color:var(--papier-leise)}

/* ── Anfrage ─────────────────────────────────────────────────────────── */
.anfrage{display:grid; grid-template-columns:.92fr 1.08fr; gap:3px; margin-top:50px}
@media (max-width:900px){ .anfrage{grid-template-columns:1fr} }
.anfrage-info,.anfrage-form{background:var(--tiefer); padding:clamp(30px,3.6vw,48px); position:relative}
.anfrage-info::before,.anfrage-form::before{content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,rgba(255,217,160,.34),transparent 75%)}
.kontaktzeile{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:19px 0; border-top:1px solid var(--kante); align-items:start}
.kontaktzeile:first-of-type{border-top:0; padding-top:0}
.kontaktzeile svg{width:20px; height:20px; stroke:var(--holz); fill:none; stroke-width:1.4; margin-top:4px}
.kontaktzeile b{display:block; font-family:var(--sans); font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:var(--holz); font-weight:400; margin-bottom:4px}
.kontaktzeile a{text-decoration:none; font-size:18px; display:inline-block; padding:11px 0; margin:-11px 0}
main p a:not(.cta){display:inline-block; padding:11px 0; margin:-11px 0;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.kontaktzeile a:hover{color:var(--licht)}
.feld{margin-bottom:17px}
.feld label{display:block; font-family:var(--sans); font-size:13px; letter-spacing:.11em; text-transform:uppercase; color:var(--holz); margin-bottom:8px}
.feld input,.feld textarea,.feld select{
  width:100%; background:#15110f; border:1px solid var(--kante); color:var(--text);
  padding:13px 15px; font:400 16px/1.5 var(--sans); min-height:48px;
}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:2px solid var(--holz); outline-offset:1px; border-color:transparent}
.feld textarea{min-height:132px; resize:vertical}
.zwei-felder{display:grid; grid-template-columns:1fr 1fr; gap:15px}
@media (max-width:520px){ .zwei-felder{grid-template-columns:1fr} }
.hinweis-klein{font-size:13.5px; color:#8d817c; margin-top:14px}

/* ── Fuß ─────────────────────────────────────────────────────────────── */
footer{background:#0d0a09; padding:70px 0 36px; border-top:1px solid var(--kante)}
.fuss{display:grid; grid-template-columns:1.55fr 1fr 1fr 1fr; gap:clamp(28px,3vw,44px)}
/* 🔴 Vier Spalten ab 1000 px, zwei dazwischen, eine am Handy — nie eine
   angebrochene Reihe (bei drei Spalten stand die vierte Spalte allein). */
@media (max-width:1000px){ .fuss{grid-template-columns:1fr 1fr; gap:36px 30px} }
@media (max-width:640px){ .fuss{grid-template-columns:1fr; gap:34px} }
.fuss img.signet{width:118px; margin-bottom:18px}
.fuss h5{font-family:var(--sans); font-size:13px; letter-spacing:.17em; text-transform:uppercase; color:var(--holz); margin:0 0 16px; font-weight:400}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li a,.fuss p a{text-decoration:none; color:#a0938d; font-size:15.5px; display:inline-block; padding:11px 0; margin:-4px 0}
.fuss li a:hover,.fuss p a:hover{color:var(--licht)}
.fuss p{color:#a0938d; font-size:15.5px}
.fussende{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  margin-top:52px; padding-top:24px; border-top:1px solid var(--kante);
  font-size:13.5px; color:#897d78;
}
.fussende a{color:#897d78; text-decoration:none; padding:13px 0; display:inline-block; margin:-13px 0}
.fussende a:hover{color:var(--licht)}

/* ── Brotkrumen ──────────────────────────────────────────────────────── */
.krumen{font-family:var(--sans); font-size:13px; color:#8d817c; letter-spacing:.05em; padding-top:26px}
.krumen a{color:var(--holz); text-decoration:none; padding:13px 0; display:inline-block; margin:-13px 0}
.krumen a:hover{text-decoration:underline; text-underline-offset:4px}

/* ── Einsatzgebiet ───────────────────────────────────────────────────── */
.gebiet{position:relative; margin-top:40px; aspect-ratio:16/9; max-width:720px}
.gebiet svg{width:100%; height:auto; display:block}
.gebiet svg text{font-family:var(--sans); font-size:17px; fill:var(--leise)}
@media (max-width:900px){ .gebiet svg text{font-size:24px} }
.orte{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.orte span{font-family:var(--sans); font-size:13px; letter-spacing:.05em; color:var(--leise); border:1px solid var(--kante); padding:8px 13px}

/* ── Intro ───────────────────────────────────────────────────────────── */
#intro{position:fixed; inset:0; z-index:9998; background:#0b0908; display:grid; place-items:center; transition:opacity .6s .35s, visibility .6s .35s}
#intro.vorbei{opacity:0; visibility:hidden}
#intro .zeichen{width:min(320px,62vw)}
#intro .zeichen svg{width:100%; height:auto; overflow:visible}
#intro .spalt{fill:none; stroke:var(--licht); stroke-width:3; filter:drop-shadow(0 0 12px rgba(255,184,101,.8))}


/* ── Fuß-Logo sichtbar (Noah, 20.09.2026) ──
   War 40 px und damit nicht erkennbar. Mindestmaß 48 px;
   Breite folgt automatisch, damit nichts verzerrt. */
footer img.signet { height:48px !important; width:auto !important; }


/* ═══ Bilder kommen ins Licht ═══════════════════════════════════════════════
   🔴 Noah, 22.09.2026: „die bilder werden nicht hell, wenn man drüber scrollt"
   und „wenn ich über die bilder drüber habe, passiert nichts".
   Beides gehört zur Signatur: die Fuge gibt Licht frei. Jedes Motiv startet
   gedimmt und kühl, wird beim Reveal warm und hell, und unter dem Zeiger
   öffnet sich zusätzlich die Lichtkante. */
/* 🔴 Gedimmt wird NUR, was das Skript vorbereitet hat (.fugt). Stünde das Dimmen
   am nackten img, bliebe ohne JavaScript jedes Foto für immer auf 52 % — der
   Grundzustand muss fertig und lesbar sein. */
.galerie figure img,
.situation .bild img,
.bildseite img,
.front img{
  transition:transform 1.1s cubic-bezier(.22,1,.36,1),
             filter 1.15s cubic-bezier(.22,1,.36,1);
}
.galerie figure.fugt img,
.situation.fugt .bild img,
.bildseite.fugt img,
[data-fugt].fugt .bildseite img{ filter:brightness(.52) saturate(.72) }
.galerie figure.offen img,
.situation.offen .bild img,
.bildseite.offen img,
[data-fugt].offen .bildseite img{ filter:brightness(1) saturate(1); }

/* Unter dem Zeiger: näher heran, einen Tick heller, warme Lichtkante */
.galerie figure:hover img,
.situation:hover .bild img,
.bildseite:hover img{
  transform:scale(1.055);
  filter:brightness(1.1) saturate(1.06);
}
.galerie figure,.situation .bild,.bildseite{ position:relative }
.galerie figure::after,
.situation .bild::after,
.bildseite::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,rgba(255,184,101,0),var(--glut),rgba(255,184,101,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none; z-index:3;
}
.galerie figure:hover::after,
.situation:hover .bild::after,
.bildseite:hover::after{ transform:scaleX(1) }

@media (prefers-reduced-motion:reduce){
  .galerie figure img,.situation .bild img,.bildseite img,.front img{
    filter:none; transition:none;
  }
  .galerie figure:hover img,.situation:hover .bild img,.bildseite:hover img{transform:none}
}


/* ═══ Karten: sichtbar hereinkommen, nicht nur aufdecken ═══════════════════
   🔴 Noah, 22.09.2026 zu „Womit ich arbeite": „wenn ich da drüber scroll …
   haben wir keine Animationen drin". Das clip-path-Reveal allein ist auf einer
   Karte praktisch unsichtbar — sie braucht Weg, Licht und eine Reaktion. */
.karte{
  transform:translateY(26px);
  transition:transform .85s cubic-bezier(.22,1,.36,1),
             background .4s ease, box-shadow .4s ease;
}
.karte.offen,[data-fugt].offen.karte{ transform:none }
.karte::before{ transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.22,1,.36,1) .15s; }
.karte.offen::before{ transform:scaleX(1) }
.karte svg{ transition:stroke .4s ease, transform .5s cubic-bezier(.22,1,.36,1) }
.karte:hover{ background:#3a2d28; box-shadow:0 0 0 1px rgba(255,217,160,.14) }
.karte:hover svg{ stroke:var(--glut); transform:translateY(-3px) scale(1.06) }
.f-papier .karte:hover{ background:#453531 }

@media (prefers-reduced-motion:reduce){
  .karte,.karte::before{transform:none!important; transition:none}
  .karte:hover svg{transform:none}
}


/* ═══ Gegenüberstellung: von der Stange | nach Maß ═════════════════════════
   🔴 Noah, 22.09.2026: „bei Philosophie: da steht es reiner Text. Das wollen
   wir nicht." Die Form kommt aus dem Inhalt — der Inhalt IST ein Gegensatz,
   getrennt von der Lichtfuge, die die Signatur dieser Seite trägt. */
.gegen{
  display:grid; grid-template-columns:1fr 3px 1fr; align-items:stretch;
  margin-top:38px; border-top:1px solid var(--kante);
}
.gegen-seite{ padding:30px 34px 34px }
.gegen-seite.alt{ padding-left:0 }
.gegen-seite.neu{ padding-right:0 }
.gegen-marke{
  display:block; font-family:var(--sans); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:20px;
}
.gegen-seite.alt .gegen-marke{ color:#a99b95 }
.gegen-seite.neu .gegen-marke{ color:var(--glut) }
.gegen-seite ul{ list-style:none; margin:0; padding:0; display:grid; gap:15px }
.gegen-seite li{ font-size:16.5px; line-height:1.5; padding-left:26px; position:relative }
.gegen-seite.alt li{ color:#a79993 }
.gegen-seite.alt li::before{
  content:""; position:absolute; left:2px; top:.62em; width:11px; height:1px; background:#6b5d58;
}
.gegen-seite.neu li{ color:var(--text) }
.gegen-seite.neu li::before{
  content:""; position:absolute; left:2px; top:.44em; width:9px; height:9px; border-radius:50%;
  background:var(--glut); box-shadow:0 0 12px 2px rgba(255,184,101,.45);
}
/* Die Fuge selbst — sie zieht sich auf, wenn der Block erscheint */
.gegen-fuge{
  background:linear-gradient(180deg,rgba(255,184,101,0),var(--glut) 22%,var(--glut) 78%,rgba(255,184,101,0));
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1) .2s;
}
.gegen.offen .gegen-fuge,[data-fugt].offen .gegen-fuge{ transform:scaleY(1) }
.gegen-fuss{ display:grid; grid-template-columns:1fr 1fr; gap:38px; margin-top:34px }
.gegen-fuss .lead{ margin:0 }
@media (max-width:820px){
  .gegen{ grid-template-columns:1fr; }
  .gegen-seite,.gegen-seite.alt,.gegen-seite.neu{ padding:26px 0 }
  .gegen-seite.neu{ border-top:1px solid var(--kante) }
  .gegen-fuge{ display:none }
  .gegen-fuss{ grid-template-columns:1fr; gap:22px }
}
@media (prefers-reduced-motion:reduce){ .gegen-fuge{transform:scaleY(1); transition:none} }


/* ═══ Fuß-Marke: Zeichen UND Name ══════════════════════════════════════════
   🔴 Noah, 22.09.2026: „man sieht das Logo von ihm unten im Footer nicht wirklich.
   Da sieht man nur das Holz einmal, aber steht nicht Björn Schillinger drüber."
   Im Kopf stand beides, im Fuß nur das Signet. */
.fuss-marke{
  display:inline-flex; align-items:center; gap:16px; text-decoration:none;
  margin-bottom:20px; transition:opacity .3s ease;
}
.fuss-marke:hover{ opacity:.82 }
.fuss-marke .signet{ height:42px; width:auto; flex:none }
.fuss-wort{ display:grid; gap:3px; line-height:1.15 }
.fuss-wort b{
  font-size:16.5px; font-weight:500; letter-spacing:.055em;
  text-transform:uppercase; color:var(--text);
}
.fuss-wort i{
  font-style:normal; font-size:13px; letter-spacing:.155em;
  text-transform:uppercase; color:var(--holz);
}
@media (max-width:560px){ .fuss-marke{gap:13px} .fuss-marke .signet{height:36px} }


/* ═══ Philosophie: die Zeilen reagieren ════════════════════════════════════
   🔴 Noah, 22.09.2026: „da will ich auch, dass, wenn ich jetzt über die Sachen
   drüber gehe, irgendwas sich tut." */
.gegen-seite li{ transition:color .3s ease, transform .4s cubic-bezier(.22,1,.36,1) }
.gegen-seite li::before{ transition:all .4s cubic-bezier(.22,1,.36,1) }
.gegen-seite.neu li:hover{ color:#fff; transform:translateX(5px) }
.gegen-seite.neu li:hover::before{
  box-shadow:0 0 18px 4px rgba(255,184,101,.7); transform:scale(1.25);
}
/* Die linke Seite ist das, was man NICHT will — sie verblasst beim Anfassen weiter */
.gegen-seite.alt li:hover{ color:#7d6f69 }
.gegen-seite.alt li:hover::before{ width:18px; background:#574a46 }
/* Die ganze Seite hebt sich leicht, damit klar wird: hier gibt es zwei Welten */
.gegen-seite{ transition:background .35s ease }
.gegen-seite.neu:hover{ background:linear-gradient(90deg,rgba(255,184,101,.05),transparent 70%) }
@media (prefers-reduced-motion:reduce){
  .gegen-seite li:hover{transform:none}
  .gegen-seite.neu li:hover::before{transform:none}
}

/* ── Hero-Signatur: die Fuge, gross ───────────────────────────────────────
   🔴 Noah, 22.09.2026: „die Animation ist nur halb so groß wie der Text links …
   das sind überall Lücken im Design." Gemessen war der alte Zeiger 2 px breit bei
   760 x 530 px Text daneben. Die Signatur traegt jetzt die rechte Herohälfte und
   steht in Textgroesse; --f (0…1) kommt aus main.js und laeuft ueber den Hero hinaus. */
.hero-signatur{
  position:absolute; z-index:2; right:clamp(24px,5vw,86px); top:50%;
  transform:translateY(-50%);
  width:clamp(280px,31vw,470px); height:100svh;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero-signatur svg{width:100%; height:100%; overflow:visible}
/* Die Platten fahren auseinander — bis 26 px je Seite bei vollem Fortschritt */
.sig-links {transform:translateX(calc(var(--f,0) * -26px)); transition:transform .12s linear}
.sig-rechts{transform:translateX(calc(var(--f,0) *  26px)); transition:transform .12s linear}
.sig-kl{transform:translateX(calc(var(--f,0) * -26px)); transition:transform .12s linear}
.sig-kr{transform:translateX(calc(var(--f,0) *  26px)); transition:transform .12s linear}
.sig-spalt{
  transform:translateX(calc(var(--f,0) * -26px)) scaleX(calc(1 + var(--f,0) * 2.17));
  transform-origin:240px 0; transition:transform .12s linear;
  opacity:calc(.55 + var(--f,0) * .45);
}
.sig-kante{stroke:var(--licht); stroke-width:1.1; opacity:calc(.55 + var(--f,0) * .45);
           filter:drop-shadow(0 0 10px rgba(255,217,160,.7))}
.sig-mass line{stroke:var(--licht); stroke-width:1.4; opacity:calc(.25 + var(--f,0) * .6)}
.sig-ml{transform:translateX(calc(var(--f,0) * -26px)); transition:transform .12s linear}
.sig-mr{transform:translateX(calc(var(--f,0) *  26px)); transition:transform .12s linear}
.sig-mq{transform:scaleX(calc(1 + var(--f,0) * 2.17)); transform-origin:240px 0; transition:transform .12s linear}
.sig-wert{
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--holz); white-space:nowrap;
}
.sig-wert b{font-family:var(--display); font-size:30px; font-weight:400; color:var(--licht);
            letter-spacing:-.02em; margin-right:7px; vertical-align:-3px}
/* Unter 1100 px teilt sich der Hero die Breite nicht mehr — die Signatur geht dann,
   statt den Text zu quetschen. Apple: lieber weglassen als klein und unlesbar. */
@media (max-width:1100px){ .hero-signatur{display:none} }
@media (prefers-reduced-motion:reduce){
  .sig-links,.sig-rechts,.sig-spalt,.sig-kl,.sig-kr,.sig-ml,.sig-mr,.sig-mq{transition:none}
}

/* ── Raumschnitte in der Gegenüberstellung ───────────────────────────────
   🔴 Noah, 22.09.2026: „viel zu unveranschaulicht … nur mit Text". Der Unterschied
   zwischen Fertigschrank und Einbau ist ein räumlicher — also wird er gezeichnet:
   links die Restflächen (schraffiert), rechts der Korpus, der Wand und Schräge folgt. */
/* 🔴 Noah, 23.09.2026: „man sieht nicht so wirklich, dass es ein Raum ist. Generell
   sollte man vielleicht noch ein bisschen mehr sehen." Die Konturen lagen in --kante
   (#42342f) auf dem Papier-Grund (#3a2d28) — das sind 1,1:1, also nichts. Jetzt trägt
   der Raum sichtbare Linien, und die Figur gibt ihm den Maßstab. */
.rs{width:100%; height:auto; display:block; margin:18px 0 24px; overflow:visible}
.rs-raum{fill:none; stroke:var(--kante); stroke-width:1.6}
.rs-wand{fill:none; stroke:#9d8880; stroke-width:2.4; stroke-linejoin:round}
.rs-boden{fill:rgba(255,255,255,.055); stroke:#9d8880; stroke-width:1.5}
.rs-diele{stroke:#7d6a63; stroke-width:1}
.rs-sockel{stroke:#7d6a63; stroke-width:2.2}
.rs-fenster{stroke:#d8ccc5; stroke-width:5; stroke-linecap:round}
.rs-fenster-rahmen{stroke:#9d8880; stroke-width:1.6; stroke-linecap:round}
.rs-figur{fill:none; stroke:#cdbdb6; stroke-width:1.9; stroke-linecap:round; opacity:.72}
.rs-korpus{fill:rgba(196,144,144,.14); stroke:var(--holz); stroke-width:2}
.rs-fach,.rs-teiler{stroke:var(--holz); stroke-width:1.3; opacity:.62}
/* Der Fertigschrank ist farblos — die Farbe gehoert dem, was nach Mass gebaut ist.
   Vorher stand er in --holz (rosa) und las sich wie ein Fehler statt wie ein Kompromiss. */
.rs-alt .rs-korpus{fill:rgba(255,255,255,.055); stroke:#9a8a84}
.rs-alt .rs-fach,.rs-alt .rs-teiler{stroke:#9a8a84; opacity:.55}
.rs-figur-halo{fill:none; stroke:#3a2d28; stroke-width:6.5; stroke-linecap:round; opacity:.92}
.f-tiefer .rs-figur-halo{stroke:var(--korpus)}
.rs-rest{fill:rgba(255,255,255,.05); stroke:none}
.rs-alt .rs-rest{fill:rgba(255,255,255,.06); stroke:#8a7770; stroke-width:1.2; stroke-dasharray:5 5}
.rs-mass{fill:var(--leise); font-family:var(--sans); font-size:13px; letter-spacing:.1em;
         text-transform:uppercase; text-anchor:middle}
.rs-neu .rs-voll{fill:rgba(255,217,160,.11); stroke:var(--licht); stroke-width:2.2}
.rs-licht{fill:var(--licht); opacity:.85; filter:drop-shadow(0 0 7px rgba(255,217,160,.75))}
@media (max-width:620px){ .rs{margin:14px 0 18px} }

/* ── Leistungs-Ikonen im Untermenü ───────────────────────────────────────
   🔴 Noah, 22.09.2026: „man sieht die Icons nicht gut … noch mehr Animationen."
   Gemessen waren es 17 x 10 px Pfeile. Jetzt 44 px Moebelschnitte in derselben
   Strichsprache wie Fuge und Raumschnitt — die Linien zeichnen sich beim Eintreten
   und beim Zeigen, statt nur da zu sein. */
.ik{width:50px; height:50px; display:block; margin-bottom:12px; overflow:visible}
.ik path,.ik line,.ik rect,.ik circle{
  fill:none; stroke:#fff; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--l,200); stroke-dashoffset:var(--l,200);
  transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1), opacity .4s;
  opacity:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
}
.front.auf .ik path,.front.auf .ik line,.front.auf .ik rect,.front.auf .ik circle,
.front:hover .ik path,.front:hover .ik line,.front:hover .ik rect,.front:hover .ik circle{
  stroke-dashoffset:0;
}
.front:hover .ik line.ik-licht{stroke:var(--glut); filter:drop-shadow(0 0 6px rgba(255,184,101,.8))}
.ik line.ik-licht{stroke:var(--glut)}
/* 🔴 Der Bild-Zoom der Kachel bleibt, wie er war (scale 1.05 → 1.0 beim Zeigen,
   1,1 s) — Noah, 23.09.2026: „war die animation mit dem zoom in davor besser."
   Hier wird NUR die Kachel selbst angehoben, das Bild nicht angefasst. */
.front{transition:transform .34s cubic-bezier(.22,1,.36,1)}
.front:hover{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){
  .ik path,.ik line,.ik rect,.ik circle{stroke-dashoffset:0; transition:none}
  .front,.front img{transition:none}
  .front:hover{transform:none} .front:hover img{transform:none}
}

/* ── Kontaktformular: die Gehrung aus dem Logo ───────────────────────────
   🔴 Noah, 22.09.2026: „Auch beim Kontaktformular schau mir noch ein bisschen. Es ist
   dann irgendwie krass kantig-eckig alles. Es kann ja ruhig kantig-eckig sein, aber ich
   glaube, wir könnten doch bestimmt noch ein bisschen mehr von unserem Logo reinnehmen."

   Das Signet zeigt zwei Bretter im Schnitt mit einer GEHRUNG — einer schrägen
   Anschnittkante. Genau die bekommt jedes Feld unten rechts: kantig bleibt kantig,
   aber es ist die Kante des Betriebs und nicht irgendein Rechteck. Beim Hineinklicken
   glimmt die Schräge auf, wie die Lichtfuge der Signatur. */
.feld{position:relative}
.feld input,.feld textarea,.feld select,.kontakt-form input,.kontakt-form textarea,.kontakt-form select{
  --gehrung:20px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--gehrung)),
                    calc(100% - var(--gehrung)) 100%, 0 100%);
  background:#1d1714;
  border:1px solid var(--kante);
  transition:background .25s, border-color .25s;
}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none; background:#241c19; border-color:var(--holz);
}
/* Die Schräge selbst — eine Linie in Logo-Farbe, die bei Fokus zum Licht wird */
.feld::after{
  content:""; position:absolute; right:0; bottom:0;
  width:29px; height:29px; pointer-events:none;
  background:linear-gradient(45deg, var(--holz) 0 1.8px, transparent 1.8px);
  opacity:.9; transition:opacity .25s, background .25s;
}
.feld:focus-within::after{
  background:linear-gradient(45deg, var(--licht) 0 2.1px, transparent 2.1px);
  opacity:1; filter:drop-shadow(0 0 6px rgba(255,217,160,.6));
}
/* Der Absendeknopf traegt dieselbe Gehrung — eine Form, ein Haus */
.feld button.cta,.anfrage button.cta,button.cta[style*="width:100%"]{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
@media (prefers-reduced-motion:reduce){
  .feld input,.feld textarea,.feld select,.feld::after{transition:none}
}

/* ── Lebendige Seite: die drei stummen Bauformen ─────────────────────────
   🔴 Skill `lebendige-seite`: was anfassbar aussieht, antwortet — sonst sucht der
   Betrachter den Fehler bei sich. Gemessen waren drei Familien stumm: die Zeilen im
   Stationen-Register, die beiden Seiten der Gegenüberstellung und die Ortschips.
   Jede bekommt die Antwort ihrer Bauform, nicht irgendeine. */

/* Zeile in einem Register: rueckt ein, Grund fuellt sich, ihr Punkt waechst */
.weg li{transition:transform .38s cubic-bezier(.2,.7,.3,1), opacity .3s}
.weg li:hover{transform:translateX(7px)}
.weg li::before{transition:box-shadow .38s, background .38s, transform .38s cubic-bezier(.2,.7,.3,1)}
.weg li:hover::before{background:var(--licht); box-shadow:inset 0 0 0 2px var(--licht), 0 0 12px rgba(255,217,160,.7); transform:scale(1.35)}
.weg li:hover .nr{color:var(--licht)}
.weg li .nr{transition:color .38s}

/* Die beiden Seiten der Gegenüberstellung sind Karten — sie heben sich */
.gegen-seite{transition:transform .38s cubic-bezier(.2,.7,.3,1), background .38s}
.gegen-seite:hover{transform:translateY(-4px)}
.gegen-seite.neu:hover{background:rgba(255,217,160,.045)}
.gegen-seite.alt:hover{background:rgba(255,255,255,.03)}
.gegen-seite:hover .rs-licht{opacity:1; filter:drop-shadow(0 0 11px rgba(255,217,160,.9))}
.gegen-seite .rs-licht{transition:opacity .38s, filter .38s}

/* Chip: Grund heller, Kante in Logo-Farbe */
.orte span{transition:background .35s cubic-bezier(.2,.7,.3,1), border-color .35s, color .35s}
.orte span:hover{background:rgba(196,144,144,.12); border-color:var(--holz); color:var(--text)}

/* Tastatur zaehlt mit — jede Hover-Regel bekommt ihr Gegenstueck */
.weg li:focus-within{transform:translateX(7px)}
.gegen-seite:focus-within{transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){
  .weg li,.weg li::before,.weg li .nr,.gegen-seite,.orte span,.gegen-seite .rs-licht{transition:none}
  .weg li:hover,.gegen-seite:hover,.weg li:focus-within,.gegen-seite:focus-within{transform:none}
  .weg li:hover::before{transform:none}
}

/* ── Hero-Video als TEXTUR über dem Kundenfoto ───────────────────────────
   🔴 Noah, 22.09.2026: „du hast es gefühlt komplett versaut." Der erste Anlauf
   ERSETZTE das Kundenfoto durch einen Werkstattclip — auf der Küchenseite stand
   danach eine unscharfe gelbe Nahaufnahme von Stechbeitel-Griffen statt einer Küche.
   Eine Leistungsseite zeigt oben ihre Leistung. Das Video bringt jetzt Licht und
   Bewegung, ohne dem Motiv den Platz zu nehmen. */
.hero-film video.hero-textur{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  mix-blend-mode:soft-light; opacity:.6; pointer-events:none; z-index:1;
}
@media (prefers-reduced-motion:reduce){ .hero-film video.hero-textur{display:none} }

/* ── Fuge-Sektion: Grafik auf Texthöhe ──────────────────────────────────
   🔴 Noah musste das DREIMAL melden (22.09. · 23.09. vormittags · 23.09. mittags:
   „Die Fuge ist die Sektion immer noch … der Text ist immer noch links größer als
   das andere"). Beide Reparaturen davor haben am Container gedreht — die Ursache
   stand hier: `max-height:700px` in einer SPÄTEREN Regel gleicher Spezifität als
   `.korpus-buehne svg{height:auto}` weiter oben. Eine spätere Regel gleicher
   Spezifität gewinnt still: die Grafik war auf 700 px gedeckelt, egal wie hoch die
   viewBox wurde. Gemessen: 700 px Grafik gegen 768 px Text, dreimal in Folge.
   Kein Deckel mehr. Die Höhe ergibt sich aus der viewBox (620 × 790) und der
   Spaltenbreite — bei 1440 px sind das 859 px gegen 768 px Text.
   Geprüft von pruefen.py, Klasse „Signatur" — damit es kein viertes Mal gibt. */
.korpus-block{align-items:center}
.korpus-buehne{display:flex; align-items:center}
.korpus-buehne svg{width:100%; height:auto; max-height:none}
@media (max-width:900px){ .korpus-buehne{min-height:380px} }

/* ═══════════════════════════════════════════════════════════════════════
   ECHTE WEBSITE — Anfrageformular (25.09.2026)
   Das Formular ist kein Attrappen-Block mehr: Pflichtfeld-Stern, Einwilligung,
   Köderfeld gegen Roboter, Rückmeldung nach dem Absenden.
   🔴 Nichts unter 13 px, auch nicht der Einwilligungssatz.
   ═══════════════════════════════════════════════════════════════════════ */
.feld label i{font-style:normal; color:var(--holz); opacity:.8}

.einwilligung{
  display:flex; gap:12px; align-items:flex-start; margin:6px 0 20px;
  font-family:var(--sans); font-size:13.5px; line-height:1.62; color:var(--leise);
  cursor:pointer;
}
.einwilligung input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto;
  width:22px; height:22px; margin:1px 0 0; border:1px solid rgba(255,217,160,.3);
  background:rgba(0,0,0,.28); cursor:pointer; position:relative;
  transition:border-color .22s ease, background .22s ease;
}
.einwilligung input:hover{border-color:rgba(255,217,160,.55)}
.einwilligung input:focus-visible{outline:2px solid var(--holz); outline-offset:2px}
.einwilligung input:checked{background:var(--holz); border-color:var(--holz)}
/* Der Haken ist die Fuge: zwei Striche, die sich treffen. */
.einwilligung input:checked::after{
  content:""; position:absolute; left:6px; top:3px; width:7px; height:12px;
  border:solid #16110f; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.einwilligung a{color:var(--holz); text-decoration:underline; text-underline-offset:3px}
.einwilligung a:hover{color:var(--licht)}

/* Köderfeld: für Menschen unsichtbar, für Roboter ausfüllbar.
   🔴 Nicht display:none — das überspringen viele Formular-Roboter. */
.koeder{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-hinweis{
  margin:16px 0 0; font-family:var(--sans); font-size:14px; line-height:1.6;
  min-height:0; color:var(--leise);
}
.form-hinweis:empty{margin:0}
.form-hinweis.gut{
  color:var(--licht); border-left:2px solid var(--holz); padding-left:14px;
}
.form-hinweis.fehler{
  color:#f0c9a4; border-left:2px solid #c9784a; padding-left:14px;
}
.anfrage-form button[disabled]{opacity:.62; cursor:progress}

/* ═══════════════════════════════════════════════════════════════════════
   ECHTE WEBSITE — FAQ in ZWEI Spalten (25.09.2026)
   🔴 Noah, 20.09.2026 über alle Konzepte: „das faq … ist dann meist plötzlich
      so in der mitte und sieht so komplett kahl aus, das taugt nicht."
   Links Kopf + Telefonweg (klebt am Desktop), rechts die Liste. Die erste
   Frage steht offen. Der Block füllt die Sektionsbreite, nicht 860 px.
   ═══════════════════════════════════════════════════════════════════════ */
.faq-zwei{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,4.4vw,72px);
  align-items:start; margin-top:8px;
}
.faq-kopf{position:sticky; top:calc(var(--kopf) + 34px)}
.faq-kopf h2{margin-top:6px}
.faq-kopf .lead{max-width:34ch}
.faq-ruf{
  margin-top:34px; padding-top:26px; border-top:1px solid var(--kante);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.auf-papier .faq-ruf{border-top-color:rgba(243,237,233,.17)}
.faq-ruf p{
  font-family:var(--sans); font-size:14px; letter-spacing:.02em; color:var(--holz); margin:0;
}
.faq-ruf .cta svg,.faq-mail svg{width:17px; height:17px; flex:0 0 auto}
.faq-ruf .cta{display:inline-flex; align-items:center; gap:9px}
.faq-mail{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  font-family:var(--sans); font-size:14.5px; color:var(--papier-leise);
  text-decoration:underline; text-underline-offset:3px;
}
.faq-mail:hover{color:var(--licht)}
.faq-liste .faq{margin-top:0; max-width:none}
/* Die offene erste Frage soll man als offen ERKENNEN. */
.faq-liste .faq details[open] summary{color:var(--licht)}
.auf-papier .faq-liste .faq details[open] summary{color:#fff}

@media (max-width:900px){
  .faq-zwei{grid-template-columns:1fr; gap:26px}
  .faq-kopf{position:static}
  .faq-kopf .lead{max-width:none}
  .faq-ruf{margin-top:24px; padding-top:20px}
}

/* Gruppen auf der Fragen-Seite — ZWEISPALTIG, ein Sprungziel je Leistung.
   🔴 Die erste Fassung setzte die Fragenliste (max-width 860px) unter eine
   Überschrift über die volle Breite: rechts klaffte eine leere Fläche, und die
   Trennlinien endeten auf zwei verschiedenen Kanten. Das ist dasselbe „kahl in
   der Mitte", das Noah am 20.09.2026 über alle Konzepte kritisiert hat — nur
   nach links gerutscht. Jetzt trägt der Kopf die linke Spalte und die Liste
   füllt die rechte; zusammen füllen sie die Sektionsbreite. */
.frage-gruppe{
  scroll-margin-top:calc(var(--kopf) + 26px);
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,4vw,64px);
  align-items:start;
  padding-top:clamp(34px,3.6vw,52px); border-top:1px solid var(--kante);
}
.auf-papier .frage-gruppe{border-top-color:rgba(243,237,233,.17)}
.frage-gruppe + .frage-gruppe{margin-top:clamp(34px,3.6vw,52px)}
.fg-kopf{position:sticky; top:calc(var(--kopf) + 30px)}
.fg-kopf h3{
  display:flex; align-items:center; gap:13px; margin:0;
  font-family:var(--display); font-weight:400; font-size:clamp(21px,2.3vw,27px);
}
.fg-kopf h3 svg{width:26px; height:26px; color:var(--holz); flex:0 0 auto}
.fg-kopf p{
  margin:12px 0 0; font-family:var(--sans); font-size:14px; color:var(--holz);
  letter-spacing:.02em;
}
.fg-weg{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; margin-top:8px;
  font-family:var(--sans); font-size:14px; letter-spacing:.02em; color:var(--papier-leise);
  text-decoration:underline; text-underline-offset:3px;
}
.fg-weg svg{width:15px; height:10px; transition:transform .24s ease}
.fg-weg:hover{color:var(--licht)}
.fg-weg:hover svg{transform:translateX(4px)}
.fg-liste .faq{margin-top:0; max-width:none}
.fg-liste .faq details:first-child{border-top:0}
.fg-liste .faq details[open] summary{color:var(--licht)}
.auf-papier .fg-liste .faq details[open] summary{color:#fff}

@media (max-width:900px){
  .frage-gruppe{grid-template-columns:1fr; gap:18px}
  .fg-kopf{position:static}
}

/* Sprungleiste über den Gruppen. */
.frage-sprung{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:30px;
  padding-bottom:clamp(30px,3.4vw,46px);
}
.frage-sprung a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 17px;
  text-decoration:none;
  border:1px solid var(--kante); font-family:var(--sans); font-size:13.5px;
  color:var(--papier-leise); transition:border-color .22s ease, color .22s ease, background .22s ease;
}
.auf-papier .frage-sprung a{border-color:rgba(243,237,233,.2)}
.frage-sprung a:hover{border-color:var(--holz); color:var(--licht); background:rgba(255,217,160,.07)}

/* Hinweiszeile auf den Leistungsseiten, die auf die Fragen-Seite führt. */
.frage-weg{
  margin-top:clamp(26px,3vw,40px); padding:20px 24px;
  border:1px solid var(--kante); display:flex; flex-wrap:wrap;
  align-items:center; gap:10px 18px;
}
.frage-weg p{margin:0; font-size:15.5px; color:var(--leise)}
.frage-weg a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-family:var(--sans); font-size:14px; letter-spacing:.02em; color:var(--holz);
  text-decoration:underline; text-underline-offset:3px;
}
.frage-weg a:hover{color:var(--licht)}

/* 🔴 Ein Inline-Link im Fließtext braucht 44 px Tippfläche (Rohe, 12.09.2026).
   Der Datenschutz-Link in der Einwilligungszeile stand bei 16 px — gefunden von
   Prüfung O, nicht vom Auge. padding + negative margin ändert die Optik nicht. */
.einwilligung a{
  display:inline-block; padding:12px 0; margin:-12px 0;
}

/* Fach-Beschriftung steht INNEN im Fach (die Oberkante folgt der Schräge, oberhalb ist die Wand) */
.korpus-buehne svg .fach text{font-size:19px}
@media (max-width:900px){ .korpus-buehne svg .fach text{font-size:25px} }

/* ══ Foto-Ansicht (Lightbox) — dunkel, schlicht, zur Seite passend ══ */
img.zoombar{cursor:zoom-in}
img.zoombar:focus-visible{outline:2px solid var(--licht); outline-offset:-2px}
.galerie figure,.bildseite,.situation .bild{cursor:zoom-in}
html.lb-offen{overflow:hidden}
.lb{position:fixed; inset:0; z-index:9000; background:rgba(14,10,9,.95); display:flex;
  flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .28s ease;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.lb[hidden]{display:none}
.lb.offen{opacity:1}
.lb-buehne{flex:1; width:100%; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:64px 76px 8px; box-sizing:border-box}
.lb-bild{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
  cursor:default; opacity:0; transform:scale(.985); transition:opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
  box-shadow:0 20px 70px rgba(0,0,0,.55)}
.lb-bild.da{opacity:1; transform:none}
.lb-unter{margin:0; padding:10px 24px 22px; width:100%; box-sizing:border-box; display:flex; gap:18px;
  justify-content:center; align-items:baseline; color:var(--leise); font-family:var(--sans); font-size:15px; text-align:center}
.lb-zahl{letter-spacing:.12em; font-size:13px; color:var(--holz); white-space:nowrap}
.lb-knopf{position:absolute; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(20,16,15,.7); color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, border-color .2s, color .2s; padding:0}
.lb-knopf:hover{background:rgba(255,217,160,.14); border-color:var(--licht); color:var(--licht)}
.lb-knopf:focus-visible{outline:2px solid var(--licht); outline-offset:3px}
.lb-zu{top:16px; right:16px}
.lb-zurueck,.lb-vor{top:50%; transform:translateY(-50%)}
.lb-zurueck{left:16px}
.lb-vor{right:16px}
@media (max-width:700px){
  .lb-buehne{padding:60px 10px 4px}
  .lb-zurueck,.lb-vor{top:auto; bottom:14px; transform:none; width:44px; height:44px}
  .lb-zurueck{left:14px} .lb-vor{right:14px}
  .lb-unter{padding:8px 70px 22px; font-size:14px; flex-direction:column; gap:4px; align-items:center}
}
@media (prefers-reduced-motion:reduce){ .lb,.lb-bild{transition:none} .lb-bild{transform:none} }