/* Schreinerei Feldmann GmbH — Stil
   Farbherkunft: Arbeitskleidung (dunkelblaue Polos, sandbraune Zunfthosen),
   Firmenschild (rot mit weissem Hobel). */

:root{
  --blau:#1b2a44;
  --blau-tief:#132033;
  --eiche:#c19a6b;
  --sand:#e8dcc8;
  --sand-hell:#f2ebdf;
  --rot:#b8232f;
  --flaeche:#faf8f5;
  --weiss:#fff;
  --tinte:#141d2b;
  --grau:#5d6470;
  --linie:#d5cbb9;
  /* KANON: was man ansieht hat eine Kante, was man anfasst darf rund sein. */
  --radius:0;            /* Flaechen: Karte, Bild, Band, Galerie, Kasten */
  --radius-gross:0;
  --radius-bedien:6px;   /* Bedienung: Knopf, Feld, Auswahl, Navigation */
  --ease:cubic-bezier(.2,.7,.3,1);
  --schatten-m:0 2px 6px rgba(20,29,43,.07), 0 14px 34px rgba(20,29,43,.09);
  --breite:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--flaeche);color:var(--tinte);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.021em;font-weight:800}
h1{font-size:clamp(2.05rem,6.2vw,3.9rem)}
h2{font-size:clamp(1.6rem,4.1vw,2.6rem)}
h3{font-size:clamp(1.12rem,2.3vw,1.4rem);letter-spacing:-.012em}
p{margin:0}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,255,255,.92);border-radius:4px}

.wrap{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:20px}
@media(min-width:800px){.wrap{padding-inline:36px}}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:60;background:var(--blau);color:#fff}
.kopf__innen{display:flex;align-items:center;gap:16px;min-height:66px}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;padding:9px 0;margin-right:auto}
.marke svg{width:38px;flex:none}
.marke__text{font-weight:800;font-size:1.02rem;line-height:1.06;letter-spacing:-.018em}
.marke__text span{display:block;font-weight:500;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;opacity:.72;margin-top:3px}

.nav{display:none}
@media(min-width:1000px){
  .nav{display:flex;align-items:center;gap:2px}
  .nav a{text-decoration:none;font-size:.94rem;font-weight:600;padding:9px 13px;border-radius:var(--radius-bedien);
    color:rgba(255,255,255,.86);transition:background .18s var(--ease),color .18s var(--ease)}
  .nav a:hover{background:rgba(255,255,255,.11);color:#fff}
  .nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.15)}
  .nav a.stellen{background:var(--rot);color:#fff;margin-left:8px}
  .nav a.stellen:hover{background:#cf2836}
}
.kopf__tel{display:none}
@media(min-width:1000px){
  .kopf__tel{display:inline-flex;align-items:center;gap:8px;margin-left:14px;text-decoration:none;
    font-weight:700;font-size:.95rem;white-space:nowrap}
}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
  padding:0 11px;background:rgba(255,255,255,.1);border:0;border-radius:var(--radius-bedien);cursor:pointer}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .22s var(--ease),opacity .18s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}

.mobilnav{display:none;background:var(--blau-tief);border-top:1px solid rgba(255,255,255,.1)}
.mobilnav.offen{display:block}
@media(min-width:1000px){.mobilnav{display:none!important}}
.mobilnav a{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;
  text-decoration:none;color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08)}
.mobilnav a.stellen{background:var(--rot)}
.mobilnav a::after{content:"›";opacity:.5;font-size:1.3rem;line-height:1}

/* ---------- Bereiche ---------- */
.bereich{padding-top:clamp(52px,8vw,92px);padding-bottom:clamp(52px,8vw,92px)}
.bereich--sand{background:var(--sand-hell)}
.bereich--blau{background:var(--blau);color:#fff}
.bereich--blau .vor{color:var(--eiche)}
.bereich--blau .fliess{color:rgba(255,255,255,.82)}

.vor{font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--rot);margin-bottom:13px}
.bereich--sand .vor{color:#8a6a3e}
.fliess{color:var(--grau);font-size:1.045rem;line-height:1.72}
.mass{max-width:62ch}
.kopfzeile{margin-bottom:clamp(28px,4vw,46px)}
.kopfzeile h2+.fliess,.kopfzeile h1+.fliess{margin-top:15px}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 25px;border-radius:var(--radius-bedien);text-decoration:none;font-weight:700;font-size:1rem;
  border:2px solid transparent;cursor:pointer;transition:transform .16s var(--ease),
  background .18s var(--ease),border-color .18s var(--ease);min-height:50px}
.knopf:active{transform:scale(.975)}
.knopf--voll{background:var(--rot);color:#fff}
.knopf--voll:hover{background:#cf2836}
.knopf--blau{background:var(--blau);color:#fff}
.knopf--blau:hover{background:#25395c}
.knopf--rand{border-color:currentColor;color:var(--blau)}
.knopf--rand:hover{background:var(--blau);color:#fff;border-color:var(--blau)}
.knopf--hell{background:#fff;color:var(--blau)}
.knopf--hell:hover{background:var(--sand)}
.knopf--randhell{border-color:rgba(255,255,255,.5);color:#fff}
.knopf--randhell:hover{background:rgba(255,255,255,.13);border-color:#fff}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Hero mit Firmenplatte (18.08.) ----------
   Ihr Firmenbild traegt Marke, Claim und die vier Felder selbst. Deshalb steht
   hier kein Text im Bild, sondern daneben: links Schrift auf der Markenflaeche,
   rechts die Platte vollstaendig. Kein cover, kein Anschnitt — eine gestaltete
   Platte anzuschneiden nimmt ihr die Aussage. Die Breite ist gedeckelt, damit
   sie nie ueber ihre 1463 px hinaus hochgerechnet wird. */
/* Der erste Bildschirm IST das Firmenbild — randlos ueber die volle Breite,
   kein Rahmen, keine Flaeche drumherum (Samir, 18.08.: "Fullscreen Background").

   Gemessen am Bild: der Handhobel sitzt bei 3–13 % Hoehe, die Wortmarke bei
   14–48 %, die Leiste mit den vier Feldern bei 88–96 %, der Claim ganz unten.
   Ein echtes cover auf Bildschirmhoehe (16:9) zeigt nur 80 % der Hoehe — dann
   faellt ENTWEDER der Hobel oben ODER der Claim unten weg, beides geht nicht.
   18.08. abends, Samir: der Hero soll GENAU einen Bildschirm hoch sein —
   „wenn ich runterscrolle, geht's direkt los mit der Seite". Also fuellt der
   Block den Rest des Fensters unter der Kopfleiste (66 px gemessen), das Bild
   nimmt darin alles ausser der Gewerkezeile. Der Beschnitt ist damit
   unvermeidlich; die Wahl faellt zugunsten des **Handhobels** (3–13 % Hoehe,
   ihr Zeichen). Die Feldleiste unten faellt weg — sie steht als echter Text
   direkt darunter in der Gewerkezeile. */
.hero.hero--schirm{min-height:0;padding:0;background:var(--blau-tief);
  display:flex;flex-direction:column;align-items:stretch;height:auto}
/* 08.09. (Samir, am Vergleichsbild entschieden): am Rechner traegt das GANZE
   Firmenbild in voller Breite — kein Rand, kein Beschnitt; der Hero darf dabei
   ueber die Fensterkante hinausreichen. Die Ein-Bildschirm-Regel mit `cover`
   gilt nur noch hochkant (Handy, Tablet hochkant), wo die Wand-Fassung steht.
   Dieselbe Schwelle wie die Bildquelle im Generator (max-aspect-ratio 1/1). */
@media(max-aspect-ratio:1/1){
  .hero.hero--schirm{height:calc(100svh - 66px)}
  @supports not (height:1svh){.hero.hero--schirm{height:calc(100vh - 66px)}}
}
@media(min-aspect-ratio:1001/1000){
  .hero--schirm .hero__platte{flex:none}
  .hero--schirm .hero__platte img{height:auto;object-fit:fill}
}
/* ⚠️ Doppelte Klasse mit Absicht: weiter unten steht in der Handy-Media-Query
   noch `.hero{min-height:min(72svh,620px)}` aus der Zeit des Vollbild-Heros.
   Gleiche Spezifitaet, spaetere Regel — sie haette hier gewonnen und dem Bild
   ein leeres blaues Feld darueber gegeben (am 18.08. am Handy gemessen: 608 px
   Hero fuer ein 273 px hohes Bild). */
.hero--schirm::after{content:none}
/* ⚠️ .hero__innen liegt ZWISCHEN Hero und Bild — ohne eigenes Flex-Layout
   waechst es nach Inhalt, und `flex:1` am Bild greift ins Leere. Gemessen am
   18.08.: Hero 834 px hoch, Bild darin 273 px, Gewerkezeile bei 1137 px also
   ausserhalb. Es muss selbst Spalte sein und die volle Hoehe nehmen. */
.hero--schirm .hero__innen{padding:0;width:100%;max-width:none;
  display:flex;flex-direction:column;height:100%;min-height:0}
.hero--schirm .hero__innen>*{max-width:none}
.hero__platte{margin:0;padding:0;width:100%;max-width:none;background:none;
  box-shadow:none;line-height:0;flex:1;min-height:0}
.hero__platte img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 8%}
/* Die Gewerkezeile schliesst unter dem Bild an, auf der Markenflaeche. */
.hero--schirm .hero__spur{margin:0;padding:clamp(14px,2vw,20px) 20px clamp(16px,2.2vw,22px);
  border-top:0;justify-content:center}

/* Die Seitenueberschrift steht im ersten Abschnittskopf (18.08.), nicht mehr in
   einem eigenen Auftakt-Block. */
.kopfzeile h1{font-size:clamp(1.78rem,4.4vw,3rem);line-height:1.06;max-width:22ch}
.kopfzeile .knopfreihe{margin-top:22px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--blau-tief);color:#fff;overflow:hidden;isolation:isolate;
  min-height:min(88svh,880px);display:flex;align-items:flex-end}
@supports not (height:1svh){.hero{min-height:min(88vh,880px)}}
.hero__medium{position:absolute;inset:0;z-index:-2}
.hero__medium img{width:100%;height:100%;object-fit:cover}
.hero__medium picture{display:contents}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(100deg,rgba(12,20,33,.7) 0%,rgba(12,20,33,.44) 44%,rgba(12,20,33,0) 74%),
  linear-gradient(180deg,rgba(12,20,33,.3) 0%,rgba(12,20,33,0) 30%,rgba(12,20,33,.2) 58%,rgba(12,20,33,.68) 100%)}
@media(max-width:760px){.hero::after{background:
  linear-gradient(180deg,rgba(12,20,33,.42) 0%,rgba(12,20,33,.62) 55%,rgba(12,20,33,.8) 100%)}}
.hero__innen{width:100%;padding-top:clamp(96px,18vh,200px);padding-bottom:clamp(34px,5vw,58px)}
.hero__innen>*{max-width:820px}
.hero h1{text-shadow:0 2px 22px rgba(0,0,0,.32)}
.hero__vor{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);font-size:.8rem;font-weight:700;
  letter-spacing:.05em;margin-bottom:20px;border:1px solid rgba(255,255,255,.2)}
.hero__text{margin-top:19px;font-size:clamp(1.04rem,2.4vw,1.24rem);line-height:1.62;
  color:rgba(255,255,255,.9);max-width:56ch;text-shadow:0 1px 12px rgba(0,0,0,.3)}

/* Kennzahlen unter dem Hero */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);
  border-block:1px solid var(--linie)}
@media(min-width:760px){.zahlen{grid-template-columns:repeat(3,1fr)}}
.zahl{background:var(--flaeche);padding:26px 20px;text-align:center}
.zahl b{display:block;font-size:clamp(1.75rem,4.4vw,2.5rem);font-weight:800;color:var(--blau);
  letter-spacing:-.03em;line-height:1}
.zahl span{display:block;margin-top:7px;font-size:.86rem;color:var(--grau);font-weight:600}

/* ---------- Karten / Raster ---------- */
.raster{display:grid;gap:20px}
.raster--2{grid-template-columns:1fr}
@media(min-width:760px){.raster--2{grid-template-columns:repeat(2,1fr)}}
.raster--3{grid-template-columns:1fr}
@media(min-width:640px){.raster--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.raster--3{grid-template-columns:repeat(3,1fr)}}
.raster--4{grid-template-columns:1fr}
@media(min-width:640px){.raster--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.raster--4{grid-template-columns:repeat(4,1fr)}}

.karte{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
  display:flex;flex-direction:column;min-width:0}
a.karte{text-decoration:none;color:inherit}
a.karte:hover .karte__bild img{opacity:.87}
.karte__bild{aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.karte__bild img{width:100%;height:100%;object-fit:cover;transition:opacity .25s var(--ease)}
/* Die EINE Linie stellt die Zuordnung zwischen Bild und Text her. */
.karte__leib{padding:14px 0 0;border-top:1.5px solid var(--tinte);
  display:flex;flex-direction:column;gap:10px;flex:1}
.karte__leib .fliess{font-size:.97rem}

/* Formatwechsel (Cox: gleiche Spaltenbreite, versetzte Unterkanten).
   Die Verhaeltnisse bleiben massvoll — die Vorlagen sind 4:3, ein 2:3
   Beschnitt wuerde sie halbieren. */
.raster{align-items:start}
/* Gewichtung statt gleichmaessiger Reihe: das Feld, das die Ueberschrift
   nennt, bekommt die doppelte Breite. Die Spaltenbreite bleibt als
   Ordnungsachse bestehen — nur der Inhalt ist ungleich. */
/* 18.08.: Die vier Felder standen ab 1080 px in 7/5/5/7 Spalten, zwei davon
   quer statt hoch. Das war als Formatwechsel gedacht (Cox) und trug, solange
   alle Bilder erzeugt waren — gleiches Licht, gleiche Tiefe. Echte Fotos aus
   zwei Kameras und dreissig Raeumen bringen ihre eigene Unruhe mit; der
   Formatwechsel addierte sich dazu, statt zu ordnen. Vier gleiche Felder,
   ein Format. Die Vielfalt hat die Werkschau. */
.raster--4>* .karte__bild{aspect-ratio:4/5}
.raster--3>* .karte__bild{aspect-ratio:4/5}
.karte__nr{font-size:.74rem;font-weight:800;letter-spacing:.14em;color:var(--eiche)}
.karte__mehr{margin-top:auto;padding-top:14px;font-weight:700;font-size:.94rem;color:var(--rot);
  display:inline-flex;align-items:center;gap:6px;transition:gap .2s var(--ease)}
a.karte:hover .karte__mehr{gap:11px}

/* ---------- Sichtbar offener Bildplatz ----------
   Wo kein Foto existiert, steht nicht nichts und schon gar nichts Erfundenes,
   sondern der Satz, was hier fehlt. Dieselbe Schraffur wie beim Personenplatz —
   sie liest sich als Baustelle, nicht als Gestaltung. */
.platzbild,.karte__bild:has(.platzbild__satz),.wahl__bild:has(.platzbild__satz){
  background:var(--sand-hell);display:grid;place-items:center;padding:18px;
  background-image:repeating-linear-gradient(135deg,
    rgba(193,154,107,.22) 0 1.5px,transparent 1.5px 15px)}
.platzbild span,.platzbild__satz{max-width:20ch;text-align:center;
  font-size:.74rem;font-weight:700;letter-spacing:.07em;line-height:1.6;
  text-transform:uppercase;color:rgba(27,42,68,.46)}
/* Solange dort offene Plaetze stehen, tragen alle drei dasselbe Format: drei
   verschieden hohe Schraffuren sind Unruhe ohne Inhalt. Kommen echte Fotos,
   koennen die drei Verhaeltnisse zurueck. */
.halle>:nth-child(1) .karte__bild:has(.platzbild),
.halle>:nth-child(2) .karte__bild:has(.platzbild),
.halle>:nth-child(3) .karte__bild:has(.platzbild){aspect-ratio:4/5}
.karte__bild>.platzbild{width:100%;height:100%;aspect-ratio:auto!important}

/* ---------- Zweispalt Bild + Text ---------- */
.duo{display:grid;gap:clamp(28px,4.6vw,60px);align-items:center}
@media(min-width:880px){
  .duo{grid-template-columns:1fr 1fr}
  .duo--gedreht .duo__bild{order:2}
  /* Versetzte Platzierung (Chipperfield): eine Achse verschieben, nicht alles.
     Nur wo wirklich ein Bild neben Text steht — die Kontaktseite bleibt aussen vor. */
  .duo:has(.duo__bild){grid-template-columns:7fr 5fr;gap:0;align-items:start}
  .duo:has(.duo__bild)>:not(.duo__bild){position:relative;z-index:2;
    margin-left:-7%;margin-top:7%;background:var(--flaeche);
    padding:clamp(22px,3vw,38px) 0 clamp(22px,3vw,38px) clamp(22px,3vw,38px)}
  .duo--gedreht:has(.duo__bild)>:not(.duo__bild){margin-left:0;margin-right:-7%;
    padding:clamp(22px,3vw,38px) clamp(22px,3vw,38px) clamp(22px,3vw,38px) 0}
  .bereich--sand .duo:has(.duo__bild)>:not(.duo__bild){background:var(--sand-hell)}
}
/* Die versetzte Platzierung traegt, wenn Bild und Text aehnlich hoch sind. Wo
   der Text kuerzer ist, ragt der Kasten ins Bild und laesst unten einen Streifen
   stehen (18.08. am Betriebsblock gesehen). Dort: duo--klar. */
@media(min-width:880px){
  .duo--klar:has(.duo__bild){grid-template-columns:1fr 1fr;
    gap:clamp(28px,4.6vw,60px);align-items:center}
  .duo--klar:has(.duo__bild)>:not(.duo__bild){margin:0;padding:0;background:none}
  .bereich--sand .duo--klar:has(.duo__bild)>:not(.duo__bild){background:none}
}
.duo__bild{border-radius:0;overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.duo__bild img{width:100%;height:100%;object-fit:cover}
.duo__bild--hoch{aspect-ratio:3/4}

/* ---------- Liste mit Haken ---------- */
.haken{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.haken li{position:relative;padding-left:30px;color:var(--grau);line-height:1.58}
.haken li::before{content:"";position:absolute;left:2px;top:.55em;width:13px;height:8px;
  border-left:2.5px solid var(--eiche);border-bottom:2.5px solid var(--eiche);
  transform:rotate(-45deg)}
.bereich--blau .haken li{color:rgba(255,255,255,.85)}
.bereich--blau .haken li::before{border-color:var(--eiche)}

/* ---------- Aufklapper (Leistungen) ---------- */
.klapp{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-gross);
  overflow:hidden;margin-bottom:14px}
.klapp>summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:center;
  gap:16px;font-weight:800;font-size:clamp(1.06rem,2.2vw,1.26rem);letter-spacing:-.012em}
.klapp>summary::-webkit-details-marker{display:none}
.klapp>summary::after{content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--blau);border-bottom:2.5px solid var(--blau);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s var(--ease)}
.klapp[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.klapp>summary:hover{background:var(--sand-hell)}
.klapp__nr{flex:none;width:38px;height:38px;border-radius:0;background:var(--blau);color:#fff;
  display:grid;place-items:center;font-size:.95rem;font-weight:800}
.klapp__leib{padding:0 24px 26px;border-top:1px solid var(--linie);margin-top:-1px;padding-top:22px}
.klapp__gruppe{margin-bottom:20px}
.klapp__gruppe:last-child{margin-bottom:0}
.klapp__gruppe h4{font-size:.98rem;font-weight:800;margin-bottom:8px;color:var(--blau)}

/* ---------- Zeitstrahl ---------- */
.strahl{list-style:none;margin:0;padding:0;position:relative}
.strahl::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;background:var(--linie)}
.strahl li{position:relative;padding:0 0 30px 42px}
.strahl li:last-child{padding-bottom:0}
.strahl li::before{content:"";position:absolute;left:2px;top:7px;width:16px;height:16px;
  border-radius:50%;background:var(--flaeche);border:3px solid var(--eiche)}
.strahl li.jetzt::before{border-color:var(--rot);background:var(--rot)}
.strahl b{display:block;font-size:1.16rem;color:var(--blau);letter-spacing:-.01em}
.strahl span{color:var(--grau);font-size:1rem}
.bereich--sand .strahl li::before{background:var(--sand-hell)}

/* ---------- Galerie ---------- */
.galerie{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.galerie{grid-template-columns:repeat(3,1fr);gap:18px}}
.galerie figure{margin:0;border-radius:0;overflow:hidden;background:var(--sand);
  aspect-ratio:4/3;position:relative}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.galerie figure:hover img{transform:scale(1.04)}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 11px;
  background:linear-gradient(180deg,transparent,rgba(12,20,33,.8));color:#fff;
  font-size:.86rem;font-weight:600}

/* ---------- Stellen ---------- */
.stelle{background:#fff;border:1px solid var(--linie);border-left:5px solid var(--rot);
  border-radius:var(--radius-gross);padding:clamp(24px,3.4vw,34px)}
.stelle__kopf{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px}
.marke-neu{display:inline-block;padding:5px 12px;border-radius:0;background:var(--rot);color:#fff;
  font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.stelle__spalten{display:grid;gap:24px;margin-top:24px}
@media(min-width:720px){.stelle__spalten{grid-template-columns:repeat(2,1fr);gap:34px}}
.stelle__spalten h4{font-size:.98rem;font-weight:800;color:var(--blau);margin-bottom:4px}

/* ---------- Kontakt ---------- */
.formular{display:grid;gap:17px}
.feld{display:grid;gap:7px}
.feld label{font-weight:700;font-size:.93rem}
.feld input,.feld textarea,.feld select{
  font:inherit;font-size:1rem;padding:13px 15px;border:1.5px solid var(--linie);border-radius:var(--radius-bedien);
  background:#fff;color:var(--tinte);width:100%;min-width:0;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:0;border-color:var(--blau);box-shadow:0 0 0 3px rgba(27,42,68,.13)}
.feld textarea{min-height:132px;resize:vertical}
.feld--zwei{display:grid;gap:17px}
@media(min-width:640px){.feld--zwei{grid-template-columns:1fr 1fr}}
.hinweis{font-size:.86rem;color:var(--grau);line-height:1.55}

.karten-box{border:1px solid var(--linie);border-radius:var(--radius-gross);overflow:hidden;background:#fff}
.karten-bild{position:relative;aspect-ratio:16/10;background:var(--sand);display:block;text-decoration:none}
.karten-bild__knopf{cursor:pointer;font:inherit;border:0}
.karten-bild svg{width:100%;height:100%;display:block}
.karten-bild__knopf{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  background:var(--blau);color:#fff;padding:11px 20px;border-radius:var(--radius-bedien);font-weight:700;
  font-size:.92rem;white-space:nowrap;box-shadow:var(--schatten-m)}
.karten-box__fuss{padding:16px 20px;font-size:.86rem;color:var(--grau);border-top:1px solid var(--linie)}

.infozeile{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--linie);align-items:flex-start}
.infozeile:last-child{border-bottom:0}
.infozeile__kopf{flex:none;width:40px;height:40px;border-radius:0;background:var(--sand-hell);
  display:grid;place-items:center;color:var(--blau)}
.infozeile b{display:block;font-size:.98rem}
.infozeile a{color:var(--blau);font-weight:700}

/* ---------- Handlungsband ---------- */
.band{background:var(--blau);color:#fff;border-radius:var(--radius-gross);
  padding:clamp(30px,5vw,54px);text-align:center}
.band h2{margin-bottom:14px}
.band .fliess{color:rgba(255,255,255,.84);margin-inline:auto}
.band .knopfreihe{justify-content:center}

/* ---------- Fuss ---------- */
.fuss{background:var(--blau-tief);color:rgba(255,255,255,.74);padding-top:56px;padding-bottom:28px;
  font-size:.94rem}
.fuss__raster{display:grid;gap:34px;padding-bottom:34px}
@media(min-width:720px){.fuss__raster{grid-template-columns:1.5fr 1fr 1fr}}
/* 05.08.: vierte Spalte ("Zweiter Betriebszweig") ist raus — sonst stuende
   ab 1000px eine leere Spalte im Raster und die Fusszeile liefe nach links
   zusammen. Drei Spalten auf beiden Stufen, das Verhaeltnis der ersten bleibt. */
@media(min-width:1000px){.fuss__raster{grid-template-columns:1.7fr 1fr 1fr}}
.fuss h4{color:#fff;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:15px;
  font-weight:700}
.fuss a{color:rgba(255,255,255,.74);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss .marke{margin-right:0;margin-bottom:14px}
.fuss__unten{border-top:1px solid rgba(255,255,255,.13);padding-top:22px;display:flex;
  flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:.87rem}
.fuss__unten nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.schwester{display:block;margin-top:16px;padding:15px 17px;border:1px solid rgba(255,255,255,.19);
  border-radius:0;text-decoration:none;line-height:1.45;transition:background .2s var(--ease)}
.schwester:hover{background:rgba(255,255,255,.07)}
.schwester b{display:block;color:#fff;font-size:.98rem}
.schwester span{font-size:.86rem;opacity:.76}

/* ---------- Rechtstexte ---------- */
.recht{max-width:76ch}
.recht h2{margin-top:44px;margin-bottom:15px;font-size:clamp(1.3rem,2.7vw,1.7rem)}
.recht h2:first-of-type{margin-top:0}
.recht h3{margin-top:26px;margin-bottom:9px;font-size:1.06rem}
.recht p,.recht ul{color:var(--grau);margin-bottom:14px;line-height:1.72}
.recht ul{padding-left:22px}
.recht li{margin-bottom:7px}
.recht a{color:var(--blau);font-weight:600}
.recht dl{display:grid;gap:9px;margin:0 0 18px}
@media(min-width:600px){.recht dl{grid-template-columns:210px 1fr;gap:9px 20px}}
.recht dt{font-weight:700;color:var(--tinte)}
.recht dd{margin:0;color:var(--grau)}
/* NICHT '.offen' nennen: so heisst auch der Zustand des geoeffneten
   Mobil-Menues (.mobilnav.offen). Die Kollision faerbte die Navigation
   cremefarben und machte ihre weisse Schrift unlesbar — auf JEDEM Handy,
   gefunden erst durch Samirs Screenshots am 26.07.2026. */
.merkkasten{background:#fff6e8;border:1px solid #e8c98a;border-radius:0;padding:15px 18px;
  color:#7a5410;font-size:.93rem;margin-bottom:18px}

/* ---------- Rückweg ---------- */
.rueckweg{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;
  text-decoration:none;color:var(--grau);margin-bottom:20px}
.rueckweg:hover{color:var(--blau)}

/* ---------- Einblenden ---------- */
.zeig{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.zeig.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .zeig{opacity:1;transform:none}
}

/* 17.08.: Das Hero-Video ist weg (es war erzeugt). Das Bild steht allein. */
#herobild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Inhalt ist ohne JavaScript, im Druck und ohne Skript-Unterstuetzung sichtbar.
   Die Einblendung greift nur, wenn das Skript wirklich laeuft (html.js). */
.zeig{opacity:1;transform:none}
html.js .zeig{opacity:0;transform:translateY(16px)}
html.js .zeig.da{opacity:1;transform:none}
@media (scripting: none){html.js .zeig{opacity:1;transform:none}}
@media print{.zeig,html.js .zeig{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){html.js .zeig{opacity:1;transform:none}}

.klapp{scroll-margin-top:84px}

/* Fusszeilen- und Rechtstext-Links als ausreichend grosse Touchziele */
.fuss ul{gap:2px}
.fuss ul li a{display:inline-block;padding:9px 0;min-height:24px}
.fuss__unten nav a{display:inline-block;padding:10px 0}
.recht a{padding:2px 0}

@media(min-width:760px){
  .klapp__leib{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px 34px}
  .klapp__gruppe{margin-bottom:0}
}
/* Ueberschrift und Fließtext bekommen eigene Maße statt eines gemeinsamen Textmaßes */
.kopfzeile{max-width:none}
.kopfzeile h1,.kopfzeile h2{max-width:20ch}
.kopfzeile .fliess{max-width:58ch}
/* Handy-Hero: Bildausschnitt auf die Werkzeugwand, langer Fließtext raus */
/* Bildmitte des Heros: am Rechner steht das ganze Tor im Bild, am Handy
   traegt eine eigene, engere Fassung (siehe HERO im Generator). */
.hero__medium img,#herobild{object-position:62% 54%}
@media(max-width:760px){.hero__medium img,#herobild{object-position:50% 50%}}
/* Gewerke-Zeile: traegt den Fuss des Heros anstelle des gestrichenen Zahlenbands. */
.hero__spur{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(28px,4vw,44px);
  padding-top:16px;border-top:1px solid rgba(255,255,255,.26);max-width:none;
  font-size:.83rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.82)}
.hero__spur span{white-space:nowrap}
@media(max-width:520px){.hero__spur{gap:6px 16px;font-size:.74rem;letter-spacing:.06em}}
/* Sprunglink */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blau);color:#fff;
  padding:12px 20px;border-radius:0;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* ---------- Strich-Icons ---------- */
.ikon{width:24px;height:24px;flex:none;display:block}
.ikonfeld{width:44px;height:44px;border-radius:0;display:grid;place-items:center;flex:none;
  background:var(--sand-hell);color:var(--blau);margin-bottom:4px}
.ikonfeld--auf{background:var(--blau);color:#fff}
.karte__nr{display:none}
.klapp__nr{background:var(--sand-hell);color:var(--blau);width:44px;height:44px}
.stelle__spalten h4{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.stelle__spalten h4 .ikon{width:20px;height:20px;color:var(--eiche)}
.infozeile__kopf{color:var(--blau)}
.karte__mehr span{transition:transform .2s var(--ease);display:inline-block}
a.karte:hover .karte__mehr span{transform:translateX(4px)}

/* Karten mit Bild: Icon klein in der Titelzeile, nicht als zweites Bildelement */
.titelikon{display:inline-flex;flex:none;color:var(--eiche)}
.titelikon .ikon{width:21px;height:21px}
.karte__leib h3{display:flex;align-items:center;gap:10px}

/* ══════════════════════════════════════════════════════════════
   HANDY: Rahmen auflösen.
   Auf 390px kostet jede Karte 2px Rahmen + 48px Innenabstand — der Text
   behält 300px. Gestapelt wird daraus eine Kette gleicher Kästchen.
   Deshalb: unter 640px trägt Weißraum die Struktur, nicht die Linie.
   Karten werden erst ab Tablet wieder zu Karten.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:639px){
  .karte{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .karte__leib{padding:16px 0 0}
  .karte__bild{overflow:hidden}
  .raster{gap:38px}
  .raster--4,.raster--3{gap:38px}

  /* Textkarten ohne Bild: dünne Linie statt Rahmen */
  .karte:not(:has(.karte__bild)){padding-bottom:24px;border-bottom:1px solid var(--linie)}
  .karte:not(:has(.karte__bild)):last-child{border-bottom:0;padding-bottom:0}
  .karte:not(:has(.karte__bild)) .karte__leib{padding-top:0}
  .raster:has(.karte:not(:has(.karte__bild))){gap:24px}

  /* Aufklapper und Stellenkästen: gleiche Behandlung */
  .klapp{border:0;border-radius:0;border-bottom:1px solid var(--linie);margin-bottom:0}
  .klapp>summary{padding:20px 0}
  .klapp>summary:hover{background:none}
  .klapp__leib{padding:0 0 24px;border-top:0}
  .stelle{border:0;border-left:3px solid var(--rot);border-radius:0;
    padding:4px 0 4px 18px;background:none}

  /* Handlungsband darf Fläche behalten — es ist der Abschluss, kein Listenglied */
  .band{padding:30px 22px}
}

/* ===== unternehmen ===== */

/* ---------- Hero: Schrift auf eigener Fläche, Foto daneben ----------
   Recherche 1.5 / G9: kein Text im Bild, kein Verlauf über dem Foto.
   Das Bildfeld ist die einzige randlose Zäsur der Seite (G7) und zugleich
   der reservierte Platz für die Fassaden-Strichzeichnung. */
.uhero{position:relative;background:var(--blau-tief);color:#fff;overflow:hidden}
.uhero__text{position:relative;z-index:1;
  padding-top:clamp(40px,6vw,74px);padding-bottom:clamp(34px,5vw,64px)}
.uhero .uhero__vor{color:var(--eiche)}
.uhero__lead{margin-top:19px;max-width:48ch;font-size:clamp(1.02rem,2.1vw,1.16rem);
  line-height:1.66;color:rgba(255,255,255,.82)}
.uhero .hero__spur{max-width:none}

/* Handy: Bild unter dem Text, über die volle Breite. */
.uhero__bild{width:100vw;margin-inline:calc(50% - 50vw);aspect-ratio:5/4;
  background:var(--blau);overflow:hidden}
.uhero__bild img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}

@media(min-width:900px){
  .uhero{display:flex;align-items:center;min-height:min(72svh,620px)}
  .uhero__innen{width:100%}
  .uhero__text{max-width:min(58%,660px);padding-block:clamp(48px,6.5vw,88px)}
  /* Das Feld läuft über die volle Höhe und bis an den rechten Fensterrand.
     Bezug ist .uhero, nicht .uhero__innen — sonst endet es am Satzspiegel. */
  .uhero__bild{position:absolute;inset-block:0;right:0;z-index:0;
    width:min(42%,600px);margin:0;aspect-ratio:auto}
}
@supports not (height:1svh){@media(min-width:900px){.uhero{min-height:min(72vh,620px)}}}

/* ---------- Geschichte: das Bild misst den Zeitstrahl ----------
   Vorher hing es als 4:3-Kachel oben rechts und endete mitten im Strahl.
   Jetzt bestimmt die Komposition seine Höhe, nicht ein Slot-Verhältnis. */
.duo.ugesch{align-items:stretch}
.ugesch .duo__bild{aspect-ratio:auto;align-self:stretch;min-height:320px}
/* Das Gebaeudebild traegt eine Unterschrift — es ist eine Ortsangabe, keine
   Dekoration, und die Quelle (Street View) soll erkennbar bleiben. */
.duo__bild--sitz{display:flex;flex-direction:column;margin:0}
.ugesch .duo__bild--sitz{aspect-ratio:auto;align-self:start;min-height:0}
.ugesch .duo__bild--sitz img{aspect-ratio:4/3;object-fit:cover;height:auto;width:100%}
.duo__bild--sitz img{flex:1;min-height:0}
.duo__bild--sitz figcaption{flex:none;padding:9px 2px 0;font-size:.82rem;
  line-height:1.45;color:var(--grau);background:var(--flaeche)}
.bereich--sand .duo__bild--sitz figcaption{background:var(--sand-hell)}
.ugesch .duo__bild img{height:100%;object-position:50% 62%}

/* ---------- 07.09.: Annikas Bilder — Geschichte, Auszeichnung, Engagement ----------
   Bildpaar: zwei Figuren nebeneinander, jede mit Unterschrift. Ein Raster fuer
   "damals/heute" (4:3) und fuer das Sponsoring (4:5, schmaler gesetzt). */
.bildpaar{display:grid;gap:clamp(18px,2.6vw,30px);margin-top:clamp(28px,4vw,44px)}
@media(min-width:760px){.bildpaar{grid-template-columns:1fr 1fr}}
.bildpaar figure{margin:0}
.bildpaar img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--sand)}
@media(min-width:760px){.bildpaar--drei{grid-template-columns:repeat(3,1fr)}}
.bildpaar--hoch{max-width:820px;margin-top:0}
.bildpaar--hoch img{aspect-ratio:4/5}
.bildpaar figcaption{margin-top:11px;font-size:.88rem;line-height:1.5;color:var(--grau)}
.bildpaar figcaption b{color:var(--tinte)}
/* 11.09.: Engagement — fuenf Motive in sechs Zellen. Ab 760 px drei Spalten:
   drei Hochformate (4:5) in der ersten Reihe, darunter die Bande ueber zwei
   Spalten in genau der Hoehe der Urkunde daneben (Container-Query, damit die
   Unterkanten buendig stehen). Darunter zwei Spalten, die Bande als eigene
   Reihe 3:2; dense fuellt das Loch neben dem dritten Hochformat. Die Urkunde
   ist ein Dokument und wird nicht beschnitten (contain auf Sand). */
.bildpaar--engagement{--g:clamp(14px,2.2vw,26px);gap:var(--g);container-type:inline-size;
  grid-template-columns:1fr 1fr;grid-auto-flow:dense;max-width:none}
.bildpaar--engagement img{aspect-ratio:4/5}
.bildpaar--engagement .breit{grid-column:span 2}
.bildpaar--engagement .breit img{aspect-ratio:3/2}
.bildpaar--engagement .dokument img{object-fit:contain;background:var(--sand-hell)}
@media(min-width:760px){
  .bildpaar--engagement{grid-template-columns:repeat(3,1fr)}
  .bildpaar--engagement .breit img{aspect-ratio:auto;height:calc((100cqw - 2*var(--g))/3*1.25)}
}
/* 18.09.: Meisterbrief — quer (4:3), nie beschnitten. Bewusst NICHT .duo__bild: die
   Handy-Sammelregel zieht jedes .duo__bild auf 3:2 und wuerde die Urkunde oben und unten kappen. */
.meisterbrief{display:grid;gap:clamp(22px,3.4vw,52px);align-items:center}
.meisterbrief__bild{margin:0;background:var(--sand-hell);border:1px solid var(--linie)}
.meisterbrief__bild img{display:block;width:100%;height:auto}
@media(min-width:880px){.meisterbrief{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
/* 11.09.: Werkstatt und Montage — links Annikas Werkstattfoto, rechts der Platz
   fuer das Gruppenbild und der Ausbildungssatz; der Platz fuellt die Hoehe. */
.werkstatt{display:grid;gap:clamp(18px,2.6vw,30px);margin-top:26px}
.werkstatt figure{margin:0}
.werkstatt img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--sand)}
.werkstatt figcaption{margin-top:11px;font-size:.88rem;line-height:1.5;color:var(--grau)}
.werkstatt figcaption b{color:var(--tinte)}
.werkstatt .teambild{margin-top:0}
/* 18.09.: das Gruppenbild ist da und hochkant (1413x1600). Es wird NIE beschnitten — das
   Firmenschild oben gehoert zum Bild. Drei Rasterkinder: Werkstattfoto, Team, Ausbildungssatz. */
.werkstatt .teambild img{aspect-ratio:auto;object-fit:contain}
.werkstatt .teamsatz{margin-top:0}
/* 18.09. mittags (Samir): das Werkstattfoto ist von dieser Seite raus — nur das Teambild.
   Zwei Rasterkinder: Bild links, der Ausbildungssatz daneben auf Bildmitte. */
@media(min-width:880px){
  .werkstatt{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;
    gap:clamp(22px,3.4vw,52px)}
  .werkstatt .teamsatz{font-size:1.08rem;max-width:34ch}
}
.werkstatt .teamtext .teamsatz{margin-top:10px}
/* Die Urkunde ist 3:4 und wird nie beschnitten; die Spalte bleibt schmaler als der Text. */
@media(min-width:880px){.auszeichnung.duo--klar:has(.duo__bild){grid-template-columns:2fr 3fr}}
.auszeichnung__bild{background:var(--sand-hell);margin:0}
/* Stellenseite: die Auszeichnung als Zeile im Ausbildungs-Angebot. */
.stelle__auszeichnung{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  padding:12px 14px;background:var(--sand-hell);border-left:3px solid var(--rot);
  font-size:.95rem;line-height:1.5;color:var(--tinte)}
.stelle__auszeichnung .ikon{width:20px;height:20px;flex:none;color:var(--eiche);margin-top:2px}
.stelle__auszeichnung a{color:var(--blau)}
/* 07.09., Annika am PC: "Unten die Symbolleisten ueberschneiden sich." Am
   Rechner traegt das Bild ihre eigene Leiste (drei Felder + Claim) — die
   Gewerkezeile darunter war dieselbe Aussage ein zweites Mal. Sie faellt dort
   weg; hochkant (Marke auf Wand, keine Leiste im Bild) bleibt sie.
   Schwelle = die Umschaltung der Bildquelle im Generator (max-aspect-ratio 1/1). */
@media(min-aspect-ratio:1001/1000){.hero--schirm .hero__spur{display:none}}

/* ---------- Menschen ----------
   Drei Sätze statt drei Textkarten: die Linie trägt, nicht der Kasten. */
.dreispur{list-style:none;margin:0;padding:0;display:grid;gap:22px}
@media(min-width:760px){.dreispur{grid-template-columns:repeat(3,1fr);gap:26px}}
.dreispur li{padding-top:13px;border-top:1.5px solid var(--tinte)}
.dreispur b{display:block;font-size:.78rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blau);margin-bottom:5px}
.dreispur span{color:var(--grau);font-size:.98rem;line-height:1.55}

.untertitel{margin-top:clamp(44px,6vw,72px);margin-bottom:clamp(20px,2.6vw,28px);
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);display:flex;align-items:center;gap:16px}
.untertitel::after{content:"";flex:1;height:1px;background:var(--linie)}

.leute{display:grid;gap:clamp(22px,2.6vw,30px);align-items:start;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.leute--team{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1020px){.leute--team{grid-template-columns:repeat(5,1fr)}}
/* Geschäftsführung: Platz und Angaben nebeneinander. So füllt der Eintrag
   die Zeile, statt zwei grosse Leerflächen neben einem leeren Drittel. */
@media(min-width:620px){
  .leute--fuehrung{gap:clamp(28px,4vw,54px)}
  .leute--fuehrung .person{display:grid;gap:clamp(16px,2vw,24px);
    grid-template-columns:minmax(0,212px) 1fr;align-items:start}
}
/* Bildplatz: kein erfundenes Portrait. Eine schraffierte Fläche wie in einer
   Werkzeichnung markiert, was noch einzusetzen ist — mit den Initialen darin. */
.person__platz{aspect-ratio:3/4;background:var(--sand-hell);display:grid;place-items:center;
  background-image:repeating-linear-gradient(135deg,
    rgba(193,154,107,.22) 0 1.5px,transparent 1.5px 15px)}
.person__platz span{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(27,42,68,.42)}
.person__leib{padding-top:12px;border-top:1.5px solid var(--tinte)}
.person__leib b{display:block;font-size:1.02rem;letter-spacing:-.012em;line-height:1.25}
.leute--fuehrung .person__leib b{font-size:clamp(1.16rem,2.2vw,1.34rem)}
.person__rolle{display:block;margin-top:3px;font-size:.9rem;color:var(--grau)}
/* Sichtbar offene Angabe — vom Betrieb noch zu liefern, nicht erfunden. */
.person__rolle--offen,.person__felder span{color:#8a6a3e;
  border-bottom:1px dashed rgba(138,106,62,.55)}
.person__rolle--offen{display:inline-block;font-style:italic}
.person__felder{display:flex;flex-wrap:wrap;gap:4px 11px;margin-top:10px;
  font-size:.71rem;letter-spacing:.03em;line-height:1.5}

/* ---------- Was in der Halle steht ----------
   Gleiche Spaltenbreite als Ordnungsachse, ungleiche Bildhöhe (Cox),
   das mittlere Feld leicht versetzt (Chipperfield, dosiert). */
/* 17.08.: Die drei Kacheln tragen keine Bilder mehr (es gab dafuer nur
   erzeugte). Als Textkarten bleibt die Linie ueber dem Text die einzige
   Rahmung — auf jeder Breite, nicht erst unter 640 px. */
.halle--text .karte__leib{padding-top:14px}
.halle--text .karte{gap:0}
/* 11.09.: Drei echte Maschinenfotos, eine Kamera, alle 16:9 — ein Format fuer
   alle drei (3:2, ohne Versatz). Die drei Verhaeltnisse und der Versatz waren
   auf erzeugte Bilder kalibriert (Falle 25: je unruhiger das Material, desto
   ruhiger das Raster — hier ist das Material ruhig, das Raster bleibt es auch). */
.halle>:nth-child(1) .karte__bild,
.halle>:nth-child(2) .karte__bild,
.halle>:nth-child(3) .karte__bild{aspect-ratio:3/2}

/* ---------- Firmenblatt (Unternehmen) ----------
   Ihre gestaltete Firmen-Bilddatei. Sie wird NICHT beschnitten: darin stehen
   Marke, Claim und die vier Felder — ein Anschnitt wuerde ihr die Aussage
   nehmen. Deshalb kein cover, sondern die volle Platte, gedeckelt auf eine
   Breite, bei der sie nicht hochgerechnet wird (1463 px nativ). */
.firmenblatt{margin:clamp(26px,4vw,40px) 0 0;max-width:960px}
.firmenblatt img{width:100%;height:auto;display:block}
.firmenblatt figcaption{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:13px;
  padding-top:12px;border-top:1.5px solid var(--tinte);
  font-size:.83rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grau)}

/* ═══════════════════════════════════════════════════════════════
   ===== referenzen =====
   Eine Ordnungsachse, und zwar die SPALTENBREITE (Sebastian Cox:
   3 Spalten a 414px, Bilder darin mit 0.75 / 0.75 / 0.67 — die
   Unterkanten liegen absichtlich versetzt). Alles rastet auf einem
   12-Spalten-Raster; ungleich sind nur die Bildhoehen und die Spannen.
   Dazu zwei randlose Zaesuren ueber die volle Fensterbreite (Moormann).
   Kein Radius, keine Flaeche, kein Schatten — die Bilder stehen nackt.
   ═══════════════════════════════════════════════════════════════ */

/* ---- Verzeichnis der Gewerke: reine Sprungmarken, ohne Skript vollstaendig
        bedienbar. Kein Filter — es wird nichts versteckt, nur gefunden. ---- */
.verzeichnis{display:grid;margin-top:clamp(28px,4vw,42px);
  border-top:1.5px solid var(--tinte)}
.verzeichnis a{display:flex;align-items:baseline;gap:10px;padding:14px 0;
  text-decoration:none;font-weight:700;font-size:.97rem;letter-spacing:-.008em;
  border-bottom:1px solid var(--linie);transition:color .18s var(--ease)}
.verzeichnis a b{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  color:var(--eiche)}
.verzeichnis a:hover{color:var(--rot)}
@media(min-width:820px){
  .verzeichnis{grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid var(--linie)}
  .verzeichnis a{border-bottom:0;padding-right:20px}
}

/* ---- Kapitelmarke: dieselbe Liniensprache wie .karte__leib ---- */
.werk__marke{display:flex;align-items:baseline;gap:14px;
  margin-top:clamp(54px,8vw,94px);padding-top:13px;
  border-top:1.5px solid var(--tinte);scroll-margin-top:84px;
  font-size:clamp(1.24rem,2.7vw,1.74rem)}
/* Nach einer Zaesur beginnt ein neuer Satzspiegel — dann traegt der
   Abstand der Zaesur, die Marke braucht keinen eigenen. */
.wrap>.werk__marke:first-child{margin-top:0}
.werk__marke b{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  color:var(--eiche)}

/* ---- Das Raster ---- */
.werk{display:grid;grid-template-columns:1fr;align-items:start;
  margin-top:clamp(22px,3vw,34px);
  column-gap:clamp(14px,2.2vw,28px);row-gap:clamp(30px,4.6vw,58px)}
@media(min-width:820px){.werk{grid-template-columns:repeat(12,1fr)}}
.werkstueck{margin:0;min-width:0}
.werk__bild{overflow:hidden;background:var(--sand)}
.werk__bild img{width:100%;height:100%;object-fit:cover}
.werkstueck figcaption{margin-top:11px;font-size:.88rem;line-height:1.5;
  color:var(--grau)}

/* Die Seitenverhaeltnisse gelten auf jeder Breite — sie gehoeren zum Motiv,
   nicht zum Bildschirm. Neun von fuenfzehn Bildern stehen hoch.
   17.08.: neu besetzt mit Annikas Arbeiten, 6/4/3/2 statt 3/1/2/3. Jeder
   Wert hier hat einen Zwilling in bilder_annika_17.py (PLAETZE) — dort wird
   gemessen, ob das Motiv im Rahmen bleibt. Beide wandern zusammen. */
.werk--tueren  >:nth-child(1) .werk__bild{aspect-ratio:3/4}
.werk--tueren  >:nth-child(2) .werk__bild{aspect-ratio:4/5}
.werk--tueren  >:nth-child(3) .werk__bild{aspect-ratio:3/4}
.werk--tueren  >:nth-child(4) .werk__bild{aspect-ratio:4/5}
.werk--tueren  >:nth-child(5) .werk__bild{aspect-ratio:3/4}
.werk--tueren  >:nth-child(6) .werk__bild{aspect-ratio:3/2}
.werk--innen   >:nth-child(1) .werk__bild{aspect-ratio:3/4}
.werk--innen   >:nth-child(2) .werk__bild{aspect-ratio:3/4}
.werk--innen   >:nth-child(3) .werk__bild{aspect-ratio:4/5}
.werk--innen   >:nth-child(4) .werk__bild{aspect-ratio:3/2}
.werk--objekt  >:nth-child(1) .werk__bild{aspect-ratio:3/4}
.werk--objekt  >:nth-child(2) .werk__bild{aspect-ratio:3/4}
.werk--objekt  >:nth-child(3) .werk__bild{aspect-ratio:3/4}   /* 12.09.: Wendeltreppe */
.werk--objekt  >:nth-child(4) .werk__bild{aspect-ratio:3/2}
.werk--tore    >:nth-child(1) .werk__bild{aspect-ratio:4/3}
/* 12.09.: die Nebentuer hochkant neben dem Tor — 4 Spalten zu 3:4 sind so hoch
   wie 7 Spalten zu 4:3 (bei 18 px Luecke auf 1 px genau), Unterkanten buendig. */
.werk--tore    >:nth-child(2) .werk__bild{aspect-ratio:3/4}
/* 21.09.: die Denkmalschutz-Haustuer in der Werkstatt (Kai Ewald) — hochkant
   wie die Nebentuer, eine Reihe tiefer. */
.werk--tore    >:nth-child(3) .werk__bild{aspect-ratio:3/4}

/* Die Spannen. Ab hier wird komponiert, nicht mehr aufgezaehlt. */
@media(min-width:820px){
  /* 01 — Cox pur: sechs Bilder, EINE Spaltenbreite (4 von 12), drei
     Verhaeltnisse, versetzte Unterkanten. Die groesste Gruppe traegt die
     Ordnung, alle folgenden weichen davon ab. */
  .werk--tueren  >:nth-child(1){grid-column:1/span 4}
  .werk--tueren  >:nth-child(2){grid-column:5/span 4}
  .werk--tueren  >:nth-child(3){grid-column:9/span 4}
  .werk--tueren  >:nth-child(4){grid-column:1/span 4}
  .werk--tueren  >:nth-child(5){grid-column:5/span 4}
  .werk--tueren  >:nth-child(6){grid-column:9/span 4}
  /* die mittlere Spalte faellt ab (Chipperfield: EINE Achse verschieben) */
  .werk--tueren  >:nth-child(2),
  .werk--tueren  >:nth-child(5){margin-top:clamp(24px,3.4vw,52px)}
  /* 02 — zwei grosse Hochformate, darunter klein neben breit. */
  .werk--innen   >:nth-child(1){grid-column:1/span 5}
  .werk--innen   >:nth-child(2){grid-column:7/span 5}
  .werk--innen   >:nth-child(3){grid-column:1/span 4}
  .werk--innen   >:nth-child(4){grid-column:6/span 7}
  /* 03 — 12.09.: drei Hochformate in einer Reihe (wie 01, ohne Versatz),
     darunter das breite Querformat eingerueckt. Vorher zwei hoch mit Luft
     rechts; die Wendeltreppe fuellt die Reihe. */
  .werk--objekt  >:nth-child(1){grid-column:1/span 4}
  .werk--objekt  >:nth-child(2){grid-column:5/span 4}
  .werk--objekt  >:nth-child(3){grid-column:9/span 4}
  .werk--objekt  >:nth-child(4){grid-column:3/span 8}
  /* 04 — das Tor gross, daneben hochkant die Nebentuer mit derselben
     Schalung (12.09.). Das zweite Tor steht als randlose Zaesur weiter oben. */
  .werk--tore    >:nth-child(1){grid-column:1/span 7}
  .werk--tore    >:nth-child(2){grid-column:9/span 4}
  .werk--tore    >:nth-child(3){grid-column:1/span 4}
  /* Die Tuer bekommt exakt die Hoehe des Tors: dieselbe Rechnung wie das
     Raster (12 Spalten, dieselbe Luecke), nicht ein Naeherungs-Verhaeltnis —
     an der Vorschau bei 1366 lagen 3:4 und 4:3 noch 9 px auseinander. */
  .werk--tore{container-type:inline-size;--cg:clamp(14px,2.2vw,28px)}
  .werk--tore    >:nth-child(2) .werk__bild{aspect-ratio:auto;
    height:calc(((100cqw - 11*var(--cg))/12*7 + 6*var(--cg))*0.75)}
}

/* ---- Randlose Zaesur. Sie steht ausserhalb von .wrap und damit ohne
        Viewport-Rechnerei ueber die volle Breite; die Unterschrift
        kehrt in den Satzspiegel zurueck. ---- */
.zaesur{margin:clamp(48px,7vw,88px) 0 0}
.zaesur__bild{overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.zaesur__bild img{width:100%;height:100%;object-fit:cover}
.zaesur figcaption{margin-top:12px;font-size:.88rem;line-height:1.5;color:var(--grau)}
@media(min-width:820px){
  .zaesur--bank   .zaesur__bild{aspect-ratio:2/1}
  .zaesur--keller .zaesur__bild{aspect-ratio:12/5}
}
/* Nach der Zaesur oeffnet ein neuer Satzspiegel — der Abstand liegt hier. */
.zaesur+.wrap{margin-top:clamp(48px,7vw,88px)}


/* ===== leistungen ===== */

/* Auswahlebene: die vier Bereiche gross, mit Bild, zum Auswaehlen.
   Ungleiche Gewichtung statt vier gleicher Kacheln (Recherche 1.7): der
   Schwerpunkt fuehrt breit, die drei uebrigen stehen als Reihe darunter.
   Ordnungsachse ist die Spalte; ungleich sind Bildformat, Breite und Hoehe.
   Rahmung ist die 1,5px-Linie ueber dem Text — sonst nichts. */
.wahl{display:grid;gap:clamp(46px,7vw,84px)}
.wahl__reihe{display:grid;gap:clamp(38px,5vw,44px)}
.wahl__feld{display:block;text-decoration:none;color:inherit;min-width:0}
.wahl__bild{overflow:hidden;background:var(--sand);aspect-ratio:3/2}
/* Das Kopffeld traegt das einzige Querformat der Seite — es fuehrt die drei
   Hochformate darunter an. 18.08.: dort haengt das Hoftor aus Eiche. */
.wahl__feld--kopf .wahl__bild{aspect-ratio:3/2}
.wahl__bild img{width:100%;height:100%;object-fit:cover;transition:opacity .3s var(--ease)}
.wahl__feld:hover .wahl__bild img{opacity:.86}
/* 18.08.: Die drei Felder standen in 3:4, 4:5 und (je nach Breite) 2:1 oder
   1:1, dazu drei verschiedene Anstiege. Jetzt ein Format fuer alle drei —
   derselbe Grund wie bei den Startkarten. */
.wahl__reihe>* .wahl__bild{aspect-ratio:3/4}
.wahl__leib{padding-top:15px;border-top:1.5px solid var(--tinte)}
.wahl__feld--kopf .wahl__nr{font-size:.8rem}
.wahl__feld--kopf h2{font-size:clamp(1.5rem,3.4vw,2.35rem)}
.wahl__feld--kopf .fliess{font-size:1.07rem;max-width:38ch}
@media(min-width:640px){
  .wahl__reihe{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(24px,3.2vw,44px);align-items:start}
  .wahl__reihe>:nth-child(3){grid-column:1 / -1}
}
@media(min-width:900px){
  .wahl__feld--kopf{display:grid;grid-template-columns:7fr 5fr;
    column-gap:clamp(30px,4vw,60px);align-items:center}
  .wahl__reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wahl__reihe>:nth-child(3){grid-column:auto}
}
.wahl__nr{display:block;font-size:.76rem;font-weight:800;letter-spacing:.17em;color:var(--eiche)}
.wahl__feld h2{margin-top:9px;font-size:clamp(1.34rem,2.6vw,1.98rem)}
.wahl__feld .fliess{margin-top:11px;max-width:44ch;font-size:1rem}
.wahl__spur{margin-top:15px;font-size:.83rem;font-weight:600;line-height:1.8;
  letter-spacing:.03em;color:var(--grau)}
.wahl__mehr{display:inline-flex;align-items:center;gap:7px;margin-top:17px;
  font-weight:700;font-size:.94rem;color:var(--rot);transition:gap .2s var(--ease)}
.wahl__mehr span{display:inline-block;transition:transform .2s var(--ease)}
.wahl__feld:hover .wahl__mehr{gap:12px}
.wahl__feld:hover .wahl__mehr span{transform:translateX(4px)}

/* Aufklapper: Register statt Kasten. Die Zeile ist die Zuordnung. */
.klapp{background:none;border:0;border-top:1.5px solid var(--tinte);border-radius:0;
  overflow:visible;margin-bottom:0}
.klapp:last-of-type{border-bottom:1.5px solid var(--tinte)}
.klapp>summary{padding:clamp(19px,2.4vw,27px) 0;gap:clamp(14px,2.2vw,28px);
  align-items:baseline}
.klapp>summary:hover{background:none;color:var(--rot)}
.klapp>summary:hover .klapp__nr{color:var(--rot)}
.klapp>summary::after{align-self:center}
.klapp>summary:hover::after{border-right-color:var(--rot);border-bottom-color:var(--rot)}
.klapp__nr{display:block;width:auto;height:auto;background:none;color:var(--eiche);
  font-size:.78rem;font-weight:800;letter-spacing:.17em;
  transition:color .18s var(--ease)}
.klapp__leib{padding:0 0 clamp(24px,3.2vw,38px);border-top:0;margin-top:0}
.klapp__gruppe h4{margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--linie)}
@media(min-width:760px){
  /* Gruppen fuellen ihre Zeile vollstaendig aus: zwei Gruppen -> Haelften,
     fuenf Gruppen -> Drittel plus Haelften. Kein angebrochener Rest. */
  .klapp__leib{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(22px,2.8vw,34px) clamp(28px,4vw,56px)}
  .klapp__leib:has(.klapp__gruppe:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))}
  .klapp__leib:has(.klapp__gruppe:nth-child(5))>.klapp__gruppe{grid-column:span 2}
  .klapp__leib:has(.klapp__gruppe:nth-child(5))>.klapp__gruppe:nth-child(n+4){grid-column:span 3}
}

/* Einbruchschutz: Hochformat, keine Ueberlappung — der Beschlag ist das Motiv
   und darf nicht von einer Textflaeche zerschnitten werden. */
.sicher{display:grid;gap:clamp(26px,4vw,44px)}
/* Ohne Bild traegt der Text allein — dann aber nicht ueber die volle
   Fensterbreite, sonst reisst die Zeile (17.08.). */
.sicher--ohnebild{grid-template-columns:1fr!important}
.sicher--ohnebild .sicher__text .fliess{max-width:62ch}
/* Das Zeichen der Initiative steht als Bildmarke, nicht als nachgesetzte
   Schrift (18.08.). Breite gedeckelt, damit es neben dem Text nicht dominiert. */
.sicher__zeichen img{width:100%;max-width:300px;height:auto;display:block}
@media(min-width:880px){
  .sicher{grid-template-columns:5fr 7fr;column-gap:clamp(34px,5vw,72px);align-items:start}
  .sicher__fuss{grid-column:1 / -1}
}
/* Gestapelt laeuft das Bild ueber die volle Spalte — dann traegt das Hochformat
   nicht mehr, es wuerde einen halben Bildschirm hoch. Darum Ausgangsformat. */
.sicher__bild{overflow:hidden;background:var(--sand);aspect-ratio:4/3}
@media(min-width:880px){.sicher__bild{aspect-ratio:3/4}}
.sicher__bild img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.sicher__text .fliess+.fliess{margin-top:14px}
.sicher__text h2{margin-bottom:16px}
.sicher__fuss{padding-top:clamp(20px,2.6vw,30px);border-top:1.5px solid var(--tinte);
  display:grid;gap:12px}
@media(min-width:760px){
  .sicher__fuss{grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    column-gap:clamp(28px,4vw,56px);align-items:start}
}
.sicher__zeichen b{display:block;font-size:1.06rem;font-weight:800;letter-spacing:.08em}
.sicher__zeichen span{display:block;margin-top:5px;font-size:.84rem;color:var(--grau);
  line-height:1.5}
.sicher__fuss a{color:var(--blau);font-weight:700}
/* 18.09.: das Original-Banner (468x114, freigestellt). Es steht in seiner EIGENEN Groesse —
   nie breiter als 468 px (kein Hochziehen), die Spalte richtet sich nach ihm, nicht umgekehrt.
   Der Satz daneben traegt, was im Banner am Handy nicht lesbar ist. */
.sicher__fuss--banner .sicher__zeichen{margin:0}
.sicher__fuss--banner .sicher__zeichen img{max-width:468px}
.sicher__fuss--banner .fliess+.fliess{margin-top:10px}
.sicher__fuss--banner a{white-space:nowrap}   /* „k-einbruch.de" brach am Handy am Bindestrich um */
.sicher__fuss--banner{gap:18px}
@media(min-width:1000px){
  .sicher__fuss--banner{grid-template-columns:468px minmax(0,1fr);align-items:center}
}
@media(min-width:760px) and (max-width:999px){.sicher__fuss--banner{grid-template-columns:1fr}}
/* ===== leistungen ende ===== */

/* ===== kontakt ===== */
/* Anordnung statt Fuellung. Telefon, Fax, E-Mail, Adresse und Zeiten sassen
   unter dem Formular in der zweiten Spalte und machten sie lang; unter dem
   Formular blieb ein Loch von rund 360px. Sie stehen jetzt im Kopf rechts,
   wo die Seite bisher leer war. Den zweiten Streifen tragen Formular und
   Karte gemeinsam.
   Kanon: kein Kasten, kein Schatten, Rundung nur an Knopf, Feld, Auswahl. */

/* Kopf: das Wort links, die Angaben rechts daneben. */
.kkopf{display:grid;gap:clamp(30px,4.5vw,64px)}
@media(min-width:900px){
  .kkopf{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
}
.kkopf h1{max-width:14ch}
.kkopf .fliess{max-width:32ch;margin-top:15px}

/* Angaben: die Beschriftung steht als Marginalie neben dem Wert. Keine
   Icon-Huelle mehr — in neun Referenzseiten kommt kein einziges
   Icon-Kaestchen vor. Die Zeile wird von ihrer Beschriftung gehalten. */
.kdaten{margin:0;display:grid}
.kdaten>div{padding:15px 0;border-top:1px solid var(--linie);display:grid;gap:3px 22px}
.kdaten>div:first-child{border-top:1.5px solid var(--tinte)}
@media(min-width:460px){
  .kdaten>div{grid-template-columns:9em minmax(0,1fr);align-items:baseline}
}
.kdaten dt{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);line-height:1.6}
.kdaten dd{margin:0;line-height:1.55}
.kdaten dd a{color:var(--blau);font-weight:700;text-underline-offset:3px}
/* Die Nummer ist die schnellste Antwort auf der Seite — sie bekommt den Rang.
   Das Fax steht in derselben Zeile eine Stufe leiser: es ist derselbe Draht,
   nur der seltenere. */
.kdaten__ruf dd a{font-size:clamp(1.5rem,3vw,1.85rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.12;text-decoration:none;display:inline-block}
.kdaten__ruf dd a:hover{text-decoration:underline}
.kdaten .kdaten__leise{font-size:.84rem;letter-spacing:.1em;color:var(--grau);margin-top:5px}
.kdaten dd.kdaten__leise{letter-spacing:normal;font-weight:400}
.kdaten__mail dd{overflow-wrap:anywhere}

/* Zweiter Streifen: Formular und Karte, etwa gleich hoch. */
.kzwei{display:grid;gap:clamp(32px,5vw,64px)}
@media(min-width:900px){
  .kzwei{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
}
/* Die Linie ist das einzige Rahmungsmittel: sie stellt die beiden Spalten
   als Geschwister nebeneinander. */
.ktitel{font-size:clamp(1.18rem,2.3vw,1.42rem);padding-bottom:12px;
  margin-bottom:clamp(20px,2.4vw,28px);border-bottom:1.5px solid var(--tinte)}

/* Formular: dieselbe Beschriftung wie oben bei den Angaben — eine
   Auszeichnung fuer die ganze Seite statt zweier Systeme. */
.formular{gap:clamp(18px,2vw,23px)}
.formular .feld label{font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte)}
/* Markiert wird die Ausnahme, nicht die Regel: ein Feld ist freiwillig. */
.formular .feld .freiwillig{font-weight:400;letter-spacing:.02em;text-transform:none;
  color:var(--grau);font-size:.86rem}
/* 1px statt 1.5px, dafuer dunkler: #9a8f7c auf Weiss ist 3,2:1 und erfuellt
   damit 1.4.11; die alte Linie #d5cbb9 lag bei 1,6:1. */
.formular .feld input,.formular .feld textarea,.formular .feld select{
  border-width:1px;border-color:#9a8f7c;padding:12px 14px}
.formular .feld textarea{min-height:180px}
.formular .feld input:focus,.formular .feld textarea:focus,.formular .feld select:focus{
  border-color:var(--blau)}
.formular .knopf{margin-top:5px}
.formular .hinweis{max-width:42ch}

/* Fehler erst nach der Eingabe (:user-invalid), ohne JavaScript. */
.formular .feld:has(:user-invalid) label{color:var(--rot)}
.formular .feld :user-invalid{border-color:var(--rot)}
.formular .feld:has(:user-invalid)::after{content:"Bitte ausfüllen.";
  font-size:.84rem;font-weight:600;color:var(--rot)}
.formular .feld:has(select:user-invalid)::after{content:"Bitte ein Thema wählen."}

/* Karte: kein Kasten, kein Schatten. Hochformat, damit die Spalte das
   Formular traegt; unter 900px flacher — der Schnitt haelt die Mitte. */
.karten-box{border:0;background:none;overflow:visible}
.karten-bild{aspect-ratio:4/5}
/* Der Knopf war eine schwebende Pille mit Schatten. Er wird zur Leiste an
   der Unterkante: eindeutig ein Schalter fuer diese Flaeche, grosses Ziel,
   und der Schatten wird nicht mehr gebraucht. Buendig heisst eckig. */
.karten-bild__knopf{left:0;right:0;bottom:0;width:100%;transform:none;
  border-radius:0;padding:15px 20px;font-size:.95rem;box-shadow:none}
.karten-bild__knopf:hover{background:#25395c}
.karten-box__fuss{padding:14px 0 0;border-top:1px solid var(--linie)}
.karten-box__fuss a{white-space:nowrap}
@media(max-width:899px){.karten-bild{aspect-ratio:4/3}}

/* ═══════════════════════════════════════════════════════════════
   stellenangebote
   Kanon: kein Kasten. Der Stellenblock ist kein Kaertchen mehr,
   sondern ein Eintrag unter einer Linie — die Linie stellt die
   Zuordnung her, der rote Balken markiert die Klasse.
   Die Figur liegt IN der Flaeche, angeschnitten, nie ueber Text.
   ═══════════════════════════════════════════════════════════════ */

/* --- Stellenblock entkasten (ueberschreibt .stelle weiter oben) --- */
.stelle{
  background:none; border:0;
  padding:clamp(26px,3.4vw,38px) 0 clamp(30px,4vw,44px);
  position:relative; overflow:hidden; isolation:isolate;
}
.stelle+.stelle{margin-top:0}
/* Die Linie und die rote Marke liegen INNEN — overflow:hidden schneidet
   alles ab, was ueber der Kante liegt (Grund fuer den Umbau). */
.stelle::before{
  content:""; position:absolute; inset:0 0 auto; height:1.5px; z-index:2;
  background:var(--linie);
}
.stelle::after{
  content:""; position:absolute; left:0; top:0; width:72px; height:3px; z-index:2;
  background:var(--rot);
}
.stelle>*{position:relative; z-index:1}
/* Textmass begrenzen — der Rest der Flaeche gehoert der Figur. */
.stelle>*:not(.stelle__figur){max-width:min(100%,640px)}
.stelle h2{max-width:20ch; text-wrap:balance}
.bereich--sand .stelle::before{background:#ddd0b8}

/* --- Figur: Strichzeichnung im Hintergrund der Flaeche --- */
.figur{display:block;width:100%;height:100%;color:var(--blau)}
.stelle__figur{
  position:absolute; z-index:0; pointer-events:none;
  opacity:.13; --figur-grund:var(--flaeche);
  /* Nach links ausblenden — sonst endet die Werkbank als Rechteck
     mitten in der Flaeche statt als Anschnitt. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%);
}
/* Rechts ueber die Kante hinaus: die Figur ist angeschnitten, nicht
   danebengestellt. Hoehe definiert, Breite ueber das Seitenverhaeltnis. */
.stelle__figur--ganz{top:0; bottom:0; right:-6%; width:auto; aspect-ratio:430/436}
.stelle__figur--werk{
  bottom:-3%; right:-6%; height:58%; width:auto; aspect-ratio:292/220;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);
  mask-image:linear-gradient(90deg,transparent 0,#000 42%);
}
.bereich--sand .stelle__figur{--figur-grund:var(--sand-hell)}
/* Die Figur darf nie neben dem Text auftauchen, wenn kein Platz ist. */
@media(max-width:900px){
  .stelle__figur{opacity:.085}
  .stelle__figur--ganz{right:-16%}
  .stelle__figur--werk{right:-14%; height:66%}
}
@media(max-width:620px){.stelle__figur{display:none}}
@media(prefers-contrast:more){.stelle__figur{display:none}}

/* --- Bewerbungswege: drei Spalten unter einer Linie, kein Kasten --- */
.wege{
  display:grid; gap:26px 34px; margin-top:clamp(34px,5vw,52px);
  padding-top:26px; border-top:1.5px solid var(--linie);
}
@media(min-width:760px){.wege{grid-template-columns:repeat(3,1fr)}}
.wege h3{font-size:1.02rem; margin-bottom:8px}
.wege .fliess{font-size:.98rem}
.wege__stark{color:var(--blau); font-weight:700; text-decoration:none;
  border-bottom:1.5px solid var(--eiche); word-break:break-word}
.wege__stark:hover{color:var(--rot); border-bottom-color:var(--rot)}

/* --- Handy: der Block ist schon ohne Rahmen, nur Abstaende --- */
@media(max-width:639px){
  .stelle{border:0; padding:24px 0 32px}
  .stelle::after{width:52px}
}


/* ══════════════════════════════════════════════════════════════════════
   ===== Handy-Schicht =====
   Eigene Gestaltung fuer die einspaltige Ansicht, nicht nur eine Anpassung.
   Grund: siehe build/patch_mobil.py — auf 390 px machte jedes Hochformat
   aus einem Eintrag einen halben Bildschirm Bild.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:639px){

  /* 1 · Bilder legen sich quer. Der groesste Hebel: pro Eintrag ~230 px. */
  .karte__bild,
  .raster--4>* .karte__bild,
  .raster--3>* .karte__bild,
  .halle>:nth-child(1) .karte__bild,
  .halle>:nth-child(2) .karte__bild,
  .halle>:nth-child(3) .karte__bild,
  .duo__bild,
  .duo__bild--hoch,
  .ugesch .duo__bild,
  .wahl__bild,
  .wahl__reihe>* .wahl__bild,
  .zaesur__bild{aspect-ratio:3/2;min-height:0}

  /* 1b · ANRISS ODER BELEG (18.08.2026).
        Die Regel darueber legt Anrisse quer — Startkarten, Wahlfelder,
        Zweispalter. Die Werkschau auf der Referenzenseite ist kein Anriss,
        sondern der Beleg: dort will jemand die Arbeit sehen. Zehn der
        fuenfzehn Arbeiten stehen hochkant; auf 3:2 gezwungen zeigt eine Tuer
        ein Tuerfragment (die Doppeltuer fiel mit Dichte 0,42 durch die
        Messung). Sie behalten hier 4:5 — nicht die vollen 3:4, das waere
        467 px je Bild; 4:5 sind 350. Die Querformate der Werkschau bleiben
        quer, ihre Grundregel greift ohnehin.
        ⚠️ Die Liste muss vollstaendig sein: die Grundregeln stehen mit
        drei Klassen da und schlagen jede kuerzere Fassung, auch in dieser
        Media-Query. Kommt eine Arbeit dazu, gehoert sie hier hinein. */
  .werk--tueren>:nth-child(1) .werk__bild,
  .werk--tueren>:nth-child(2) .werk__bild,
  .werk--tueren>:nth-child(3) .werk__bild,
  .werk--tueren>:nth-child(4) .werk__bild,
  .werk--tueren>:nth-child(5) .werk__bild,
  .werk--innen>:nth-child(1) .werk__bild,
  .werk--innen>:nth-child(2) .werk__bild,
  .werk--innen>:nth-child(3) .werk__bild,
  .werk--objekt>:nth-child(1) .werk__bild,
  .werk--objekt>:nth-child(2) .werk__bild,
  .werk--objekt>:nth-child(3) .werk__bild,
  .werk--tore>:nth-child(2) .werk__bild,
  .werk--tore>:nth-child(3) .werk__bild{aspect-ratio:4/5}

  /* 2 · Knoepfe: gleich breit untereinander. Nebeneinander umgebrochen
        ergaben sie zwei verschieden breite Kloetze — das las als Fehler. */
  .knopfreihe{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  .knopfreihe .knopf{width:100%}

  /* 3 · Hero: kuerzer und heller. 88 svh Vollbild mit dunklem Verlauf
        wirkte auf dem Handy wie eine graue Wand. */
  .hero{min-height:min(72svh,620px)}
  .hero__innen{padding-top:clamp(64px,12vh,110px);padding-bottom:26px}
  .hero::after{background:
    linear-gradient(180deg,rgba(12,20,33,.34) 0%,rgba(12,20,33,.30) 42%,rgba(12,20,33,.74) 100%)}
  .hero__spur{margin-top:20px;padding-top:12px;font-size:.66rem;gap:4px 14px;
    letter-spacing:.05em}

  /* 4 · Abstaende und Schriftgrade fuer die schmale Spalte */
  .bereich{padding-top:40px;padding-bottom:40px}
  .kopfzeile{margin-bottom:24px}
  h1{font-size:2rem}
  h2{font-size:1.5rem}
  .kopfzeile h1,.kopfzeile h2{max-width:none}
  .raster{gap:30px}

  /* 5 · Personen: quadratisch und dreispaltig. Hochkant zweispaltig ergab
        vier Bildschirme Schraffur, bevor der erste Name kam. */
  .person__platz{aspect-ratio:1/1}
  .leute{grid-template-columns:repeat(3,1fr);gap:18px 14px}
  .leute--fuehrung{grid-template-columns:repeat(2,1fr);gap:22px}
  .person__leib b{font-size:.92rem}
  .person__felder{font-size:.72rem}
}

/* ══════════════════════════════════════════════════════════════════════
   Stellenanzeigen: echtes Arbeitsbild statt Strichfigur.
   Das Bild steht NEBEN der Anzeige, nicht dahinter — ein Foto hinter Text
   waere wieder eine Huelle. Harte Kante, kein Radius, kein Schatten.
   ══════════════════════════════════════════════════════════════════════ */
.stelle__bild{overflow:hidden;background:var(--sand);aspect-ratio:3/2;margin-bottom:26px}
.stelle__bild img{width:100%;height:100%;object-fit:cover;display:block}

/* ══════════════════════════════════════════════════════════════════════
   Angedeutete Zeichnung im Hintergrund der Stellenanzeigen.
   Wasserzeichen, kein Motiv: sie soll auffallen, wenn man hinsieht, und
   sonst nur den Eindruck heben. Deshalb Deckkraft im einstelligen bis
   knapp zweistelligen Bereich, rechts angeschnitten, nie ueber dem Text.
   ══════════════════════════════════════════════════════════════════════ */
.stelle{position:relative;overflow:hidden;isolation:isolate}
.stelle>*:not(.stelle__zeichnung){position:relative;z-index:1}
.stelle__zeichnung{
  position:absolute;right:-4%;bottom:0;z-index:0;
  width:min(56%,520px);height:auto;
  opacity:.10;pointer-events:none;user-select:none}
@media(max-width:639px){
  /* Auf dem Handy steht der Text dichter am Rand — die Zeichnung wird
     schmaler und blasser, damit sie nie mit ihm ins Gehege kommt. */
  .stelle__zeichnung{width:min(72%,320px);right:-10%;opacity:.06}
}
@media(prefers-reduced-motion:no-preference){}

/* ===== Termin 04.08.2026 =====
   Team-Umbau: keine Einzelkacheln mehr (Kundenentscheid), stattdessen die
   Geschaeftsfuehrung als Text mit ihren eigenen Angaben und EIN Platz fuer
   das Gruppenbild von Werkstatt und Montage. */
.fuehrung{display:grid;gap:clamp(22px,3vw,44px);margin-top:18px}
@media(min-width:760px){.fuehrung{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 18.09.: je ein Portraet (4:5, gleiche Kopfgroesse) ueber dem Namen. Die Breite ist gedeckelt —
   in voller Spaltenbreite waeren es zwei 700 px hohe Gesichter. */
.fuehrung__bild{margin:0 0 18px;max-width:360px}
.fuehrung__bild img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--sand,#f4efe7)}
.fuehrung__person b{font-size:1.12rem;color:var(--tinte,inherit)}
.fuehrung__rolle{display:block;margin:2px 0 10px;color:var(--grau,#666);font-size:.92rem}
.fuehrung__person .fliess{max-width:46ch}

.teambild{margin:26px 0 0}
.teambild img{width:100%;height:auto;display:block}
.teambild--platz{display:flex;align-items:center;justify-content:center;
  min-height:220px;border:1px solid var(--linie,#ddd);background:var(--sand,#f4efe7);
  padding:28px}
.teambild--platz span{max-width:34ch;text-align:center;color:var(--grau,#666);
  font-size:.98rem;line-height:1.5}
.teamsatz{margin-top:22px;max-width:58ch}