/* Variabler Schnitt, latin. Bewusst nicht vom Google-CDN: dabei geht die
   IP-Adresse des Besuchers an Google, das LG Muenchen I hat das 2022
   (3 O 17493/20) als DSGVO-Verstoss gewertet. */
@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;
  font-display:swap;src:url("/fonts/raleway-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --ink:#111110; --ink-raised:#1A1917; --ink-line:#2C2A26;
  --paper:#F3F2EE; --surface:#FFFFFF; --line:#E1DFD8;
  --muted:#5A5854; --muted-dark:#B5B2AC;
  --primary:#FD4402; --primary-press:#E03C01; --primary-deep:#B83500;
  --container:1200px;
  --pad-x:clamp(20px,5vw,64px);
  --pad-y:clamp(64px,9vw,128px);
  /* Untere Anschlaege am 25.09.2026 angehoben, Max fand H2 und H3 am Handy
     zu klein: h2 27 -> 30, h3 20 -> 22, lead 17 -> 18. Die oberen bleiben,
     am Desktop aendert sich nichts. h3 steht damit ueberall auf 22. */
  --fs-display:clamp(38px,5.6vw,64px);
  --fs-h2:clamp(30px,3.4vw,36px);
  --fs-h3:22px;
  --fs-lead:clamp(18px,1.5vw,19px);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Raleway","Segoe UI",system-ui,sans-serif;font-weight:400;font-size:16px;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4,p,ul{margin:0;font-weight:400;}
ul{list-style:none;padding:0;}
img{max-width:100%;display:block;}
/* Der Build legt um jedes Bild ein <picture> mit einer WebP-Fassung. Ohne
   display:contents waere das ein zusaetzlicher Kasten zwischen Rahmen und
   Bild, und jedes height:100% am img liefe ins Leere. */
picture{display:contents;}
/* Und die Kehrseite davon: <source> steht nicht in der Liste der Elemente,
   die der Browser von sich aus nicht darstellt -- es wird nur deshalb nie
   gezeichnet, weil sein picture den Kasten baut. Faellt der mit
   display:contents weg, erzeugt jedes source einen eigenen Kasten. In einem
   Rahmen mit Raster oder flex ist das ein leeres Element neben dem Bild: im
   Bildbetrachter besetzte es Zeile eins, das Bild rutschte in eine zweite,
   selbst wachsende Zeile, und max-height:100% am Bild bezog sich dann auf
   diese Zeile statt auf die Buehne -- Hochkantbilder liefen unten aus dem
   Dialog. Gilt fuer die ganze Seite, nicht nur fuer den Betrachter.     */
picture > source{display:none;}

/* ---------- bands ---------- */
.band{position:relative;width:100%;padding:var(--pad-y) 0;overflow:hidden;}
.ink{background:var(--ink);color:var(--surface);}
.paper{background:var(--paper);color:var(--ink);}
.ink{letter-spacing:.004em;}
.ink p{line-height:1.72;}
.wrap{position:relative;z-index:2;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x);}

/* ---------- type ---------- */
.display{font-size:var(--fs-display);line-height:1.06;letter-spacing:-.02em;text-wrap:balance;}
.h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.018em;text-wrap:balance;max-width:22ch;}
.h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.014em;}
.lead{font-size:var(--fs-lead);line-height:1.6;letter-spacing:-.005em;}
.small{font-size:14px;line-height:1.55;}
.measure{max-width:58ch;}
.dim{color:var(--muted);}
/* Auf jeder dunklen Flaeche, nicht nur in .ink-Sections: Dialog, Projektkopf,
   Bewerbungskarte, Bildbetrachter und Projektkarten stehen ausserhalb einer
   Section und bekamen sonst das Grau der hellen Seiten, 2,4:1 auf Schwarz. */
:is(.ink,dialog.modal,.pj-hero,.bw,.lb,.pk) .dim{color:var(--muted-dark);}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;}
.kicker::before{content:"";width:6px;height:6px;background:var(--primary);flex:none;}
.head{margin-bottom:20px;}

/* ---------- buttons ---------- */
.btn{--btn-roll:1.5em;--btn-tilt:15deg;--btn-dur:.525s;--btn-ease:cubic-bezier(.625,.05,0,1);
  position:relative;display:inline-grid;min-height:48px;padding:0;line-height:1;
  border:0;text-decoration:none;background:transparent;font-family:inherit;font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;outline:none;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform 160ms var(--ease-out);}
.btn:active{transform:scale(.97);}
.btn::after{content:"";position:absolute;inset:-3px;border-radius:2px;z-index:1;pointer-events:none;
  transition:box-shadow .2s cubic-bezier(.32,.72,0,1);}
.btn:focus-visible::after{box-shadow:0 0 0 2px var(--primary);}
.btn-bg{grid-area:1/1;position:relative;overflow:clip;display:flex;align-items:center;
  justify-content:center;width:100%;height:100%;border-radius:2px;background:var(--btn-bg);
  box-shadow:inset 0 0 0 1px var(--btn-line,transparent);}
/* Drehpunkt links, mittig. Um die Mitte gedreht hebt sich das linke Ende der
   Flaeche um halbe Breite mal sin 15 Grad, und ab etwa 300 px Knopfbreite
   ragt diese Ecke in Ruhe in den Knopf: ein Keil links unten, auf dem Handy
   bei jedem Knopf ueber die volle Breite zu sehen. Mit dem Drehpunkt am
   linken Rand steigt nichts ueber ihn hinaus, egal wie breit der Knopf ist. */
.btn-bg-hover{position:absolute;bottom:0;left:-10%;width:120%;height:100%;background:var(--btn-bg-hover);
  transform-origin:0 50%;transform:translate3d(0,175%,0) rotate(var(--btn-tilt));
  transition:transform var(--btn-dur) var(--btn-ease);}
.btn-inner{grid-area:1/1;position:relative;display:flex;align-items:center;justify-content:center;
  gap:.8em;width:100%;height:100%;padding:12px 22px;}
.btn-mask{display:flex;align-items:center;flex:none;clip-path:inset(-30% 0);}
.btn-text{text-shadow:0 var(--btn-roll) var(--btn-text-hover);
  transition:transform var(--btn-dur) var(--btn-ease);}
.btn-ico{position:relative;display:grid;flex:none;width:1.75em;height:1.75em;border-radius:2px;
  color:var(--btn-ico-fg);}
.btn-ico-bg{grid-area:1/1;width:100%;height:100%;border-radius:2px;background:var(--btn-ico-bg);
  transition:transform var(--btn-dur) var(--btn-ease);}
.btn-ico-mask{grid-area:1/1;position:relative;display:flex;justify-content:flex-end;width:100%;
  height:100%;overflow:clip;}
.btn-ico-list{grid-area:1/1;position:absolute;display:flex;}
.btn-ico svg{width:1.75em;height:1.75em;padding:.34em;display:block;
  transition:transform var(--btn-dur) var(--btn-ease);}
.btn-primary{--btn-bg:var(--primary);--btn-bg-hover:var(--primary-deep);--btn-text-hover:var(--paper);
  --btn-line:transparent;--btn-ico-bg:var(--ink);--btn-ico-fg:var(--primary);color:var(--ink);}
.btn-dark{--btn-bg:transparent;--btn-bg-hover:var(--surface);--btn-text-hover:var(--ink);
  --btn-line:rgba(255,255,255,.24);--btn-ico-bg:var(--primary);--btn-ico-fg:var(--ink);color:var(--surface);}
.btn-light{--btn-bg:transparent;--btn-bg-hover:var(--ink);--btn-text-hover:var(--paper);
  --btn-line:var(--line);--btn-ico-bg:var(--primary);--btn-ico-fg:var(--ink);color:var(--ink);}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn:is(:hover,:focus-visible) .btn-bg-hover{transform:translate3d(0,0,0) rotate(0deg);}
  .btn:is(:hover,:focus-visible) .btn-text{transform:translateY(calc(-1 * var(--btn-roll)));}
  .btn:is(:hover,:focus-visible) .btn-ico-bg{transform:rotate(90deg);}
  .btn:is(:hover,:focus-visible) .btn-ico svg{transform:translate3d(200%,0,0);}
}
@media (prefers-reduced-motion:reduce){
  .btn-bg-hover{display:none;}
  .btn:is(:hover,:focus-visible) .btn-bg{box-shadow:inset 0 0 0 1px currentColor;}
}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- nav ---------- */
/* Lenis: die Bibliothek setzt diese Klassen selbst, das CSS gehoert dazu. */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}
.nav{background:var(--paper);border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:14px;min-height:72px;}
.logo{display:block;line-height:.98;letter-spacing:-.02em;text-decoration:none;color:var(--ink);}
.nav-links{display:flex;gap:30px;}
.nav-links a{font-size:14px;color:var(--ink);text-decoration:none;
  transition:color 160ms var(--ease-out);}
.nav-links a:hover{color:var(--primary-deep);}
@media (max-width:900px){.nav-links{display:none;}}

/* ---------- blueprint ---------- */
.bp{position:absolute;pointer-events:none;z-index:0;color:var(--surface);opacity:.07;}
.paper .bp{color:var(--ink);opacity:.055;}

/* ---------- why: head + 2x2 ---------- */
.why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);
  align-items:start;}
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.why-cell{background:var(--paper);padding:28px 26px 30px;}
@media (max-width:900px){.why{grid-template-columns:1fr;}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}
/* ---------- Eckdaten unter den Projektkarten der Startseite ---------- */
.specs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);}
.spec{flex:1 1 33%;padding:12px 12px 0 0;}
.spec dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.spec dd{margin:2px 0 0;font-size:15px;font-variant-numeric:tabular-nums;}
/* ---------- Formularfelder und Kontaktzeilen, beide auf dunklem Grund ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);}
.field input,.field textarea{font-family:inherit;font-size:16px;font-weight:400;color:var(--surface);
  background:var(--ink-raised);border:1px solid var(--ink-line);border-radius:2px;padding:13px 14px;
  transition:border-color 160ms var(--ease-out);}
.field textarea{resize:vertical;min-height:112px;}
/* 5,2:1 auf ink-raised. Der alte Ton #7C7973 stand bei 3,9:1. */
.field input::placeholder,.field textarea::placeholder{color:#8F8B84;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--primary);}
.ct-line{padding:18px 0;border-top:1px solid var(--ink-line);}
.ct-line a{color:var(--surface);text-decoration:none;}
.ct-line a:hover{color:var(--primary);}
.ct-key{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);
  margin-bottom:4px;}

/* Ueberschrift nur fuer Vorleseprogramme: haelt die Folge h1, h2, h3 heil,
   wo das Design keine sichtbare Ueberschrift vorsieht. clip statt display:none,
   sonst ueberspringen Vorleseprogramme sie mit. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0;}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);}
.rv.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  *{animation-duration:.01ms !important;}
}
/* ============ H-C: Hero mit vollflächigem Bild ============ */
.hero-full{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;
  padding:clamp(72px,10vw,120px) 0;overflow:hidden;background:var(--ink);}
.hero-full-bg{position:absolute;inset:0;z-index:0;}
.hero-full-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(17,17,16,.94) 0%,rgba(17,17,16,.86) 34%,
             rgba(17,17,16,.42) 62%,rgba(17,17,16,.06) 100%);}
.hero-full .wrap{z-index:2;}
.hero-copy{max-width:min(56ch,52%);}
@media (max-width:900px){
  .hero-copy{max-width:100%;}
  .hero-scrim{background:linear-gradient(180deg,rgba(17,17,16,.86) 0%,rgba(17,17,16,.72) 55%,rgba(17,17,16,.9) 100%);}
  .hero-full-bg img{object-position:60% 50%;}
}

/* ============ F-C: Fakten zentriert mit Zeichnungen ============ */
.fx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
/* Die Kachel bringt ihren eigenen hellen Grund mit, also muss sie auch ihre
   eigene Schriftfarbe setzen. Ohne color erbt die Ueberschrift die Farbe des
   Bandes: auf hellem Band ging das gut, seit der Abschnitt am 23.09.2026 auf
   dunklem Band steht, stand sie weiss auf hellem Grund -- Kontrast 1,12,
   also unlesbar. Der Absatz darunter war nicht betroffen, er setzt seine
   Farbe selbst.                                                          */
.fx-cell{background:var(--paper);color:var(--ink);padding:34px 24px 36px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:background 300ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){.fx-cell:hover{background:var(--surface);}}
.fx-ico{width:52px;height:52px;color:var(--primary);}
.fx-ico svg{width:100%;height:100%;display:block;}
.fx-cell h3{font-size:19px;line-height:1.3;letter-spacing:-.014em;}
.fx-cell p{font-size:14px;line-height:1.55;color:var(--muted);max-width:26ch;}
@media (max-width:960px){.fx{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.fx{grid-template-columns:1fr;}}

/* ============ L-C: Leistungen als Reiter ============ */
.tabs{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,56px);align-items:start;}
.tab-list{display:flex;flex-direction:column;position:sticky;top:40px;}
.tab{display:flex;align-items:baseline;gap:16px;width:100%;text-align:left;
  padding:22px 0;background:none;border:0;border-top:1px solid var(--ink-line);
  color:var(--muted-dark);font-family:inherit;font-size:20px;font-weight:400;
  letter-spacing:-.014em;line-height:1.3;cursor:pointer;
  transition:color 300ms var(--ease-out),padding-left 300ms var(--ease-out);}
.tab:last-child{border-bottom:1px solid var(--ink-line);}
.tab-mark{width:7px;height:7px;flex:none;background:transparent;
  transition:background 300ms var(--ease-out);position:relative;top:-4px;}
.tab[aria-selected="true"]{color:var(--surface);padding-left:12px;}
.tab[aria-selected="true"] .tab-mark{background:var(--primary);}
@media (hover:hover) and (pointer:fine){.tab:hover{color:var(--surface);}}
.tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.panel{display:none;}
.panel[data-on="1"]{display:block;animation:panelIn 460ms var(--ease-out) both;}
@keyframes panelIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.panel-media{border-radius:2px;overflow:hidden;aspect-ratio:4/3;background:var(--ink-raised);}
.panel-media img{width:100%;height:100%;object-fit:cover;}
.panel-body{margin-top:22px;}
@media (max-width:900px){
  .tabs{grid-template-columns:1fr;}
  .tab-list{position:static;}
  .panel-media{aspect-ratio:16/10;}
}
@media (prefers-reduced-motion:reduce){.panel[data-on="1"]{animation:none;}}

/* Die Reiter waren nur fuer ein dunkles Band gebaut: Linien in --ink-line,
   Schrift in --muted-dark, der ausgewaehlte Reiter in --surface. Seit dem
   23.09.2026 steht der Abschnitt auf hellem Grund, damit der Wechsel der
   Toene wieder stimmt -- vorher standen Leistungen und Schluesselfertig
   beide dunkel hintereinander, seit der Abschnitt "Warum" auf /leistungen
   umgezogen ist.

   Nur die Farben werden gedreht, nichts an Aufbau oder Abstaenden. Die
   Regeln haengen an .paper und nicht an einer neuen Klasse, weil .tab und
   .panel nur in diesem einen Abschnitt vorkommen.                       */
.paper .tab{border-top-color:var(--line);color:var(--muted);}
.paper .tab:last-child{border-bottom-color:var(--line);}
.paper .tab[aria-selected="true"]{color:var(--ink);}
@media (hover:hover) and (pointer:fine){.paper .tab:hover{color:var(--ink);}}
.paper .panel-media{background:var(--line);}
.paper .tabs-foot{border-top-color:var(--line);}
.paper .tabs-foot p{color:var(--muted);}

/* ============ P-A: Bauprojekt-Karten ============ */
.pcards{display:flex;flex-direction:column;gap:20px;}
.pcard{display:grid;grid-template-columns:1.05fr 1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;text-decoration:none;
  color:inherit;transition:border-color 300ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){.pcard:hover{border-color:var(--ink);}}
/* Das Verhaeltnis muss hier stehen, sonst bestimmt das Foto die Kartenhoehe.
   Ohne es war die Medienspalte so hoch wie das Bild von sich aus: Karten mit
   einem Hochkantfoto wurden 733 px hoch, die mit einem Querformat 413 px.
   Die Bilder aus Sanity kommen so, wie sie geschossen wurden, also meistens
   hochkant. 4/3 ist genau die Hoehe, die die Querformat-Karte vorher hatte;
   damit rueckt der Abschnitt nicht. Hochkantfotos werden dafuer auf einen
   liegenden Ausschnitt beschnitten -- object-fit:cover steht schon darunter.
   Unter 821 px gilt stattdessen 16/10, siehe weiter unten.             */
.pcard-media{overflow:hidden;min-height:320px;background:var(--line);
  aspect-ratio:4/3;}
.pcard-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 700ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){.pcard:hover .pcard-media img{transform:scale(1.04);}}
.pcard-body{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;
  justify-content:center;gap:16px;}
.pcard-go{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  transition:gap 300ms var(--ease-out);}
.pcard-go svg{width:17px;height:17px;color:var(--primary);
  transition:transform 300ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .pcard:hover .pcard-go{gap:16px;}
  .pcard:hover .pcard-go svg{transform:translateX(4px);}
}
@media (max-width:820px){.pcard{grid-template-columns:1fr;}.pcard-media{min-height:0;aspect-ratio:16/10;}}

/* ============ A-B: Ablauf als Scroll-Akkordeon ============ */
.accwrap{position:relative;}
.accstick{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(48px,7vw,88px) 0;}
.acc{display:flex;flex-direction:column;gap:14px;}
.tile{background:var(--ink-raised);border:1px solid var(--ink-line);border-radius:2px;
  padding:clamp(20px,2.4vw,30px);overflow:hidden;}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;}
.tile-head{display:flex;align-items:baseline;gap:16px;}
.tile-num{font-size:13px;letter-spacing:.12em;color:var(--muted-dark);flex:none;
  font-variant-numeric:tabular-nums;transition:color 400ms var(--ease-out);}
.tile-title{font-size:clamp(22px,2.8vw,32px);line-height:1.16;letter-spacing:-.018em;
  color:var(--muted-dark);transition:color 400ms var(--ease-out);}
.tile.on .tile-title{color:var(--surface);}
.tile.on .tile-num{color:var(--primary);}
.tile-fold{display:flex;flex-direction:column;gap:18px;margin-top:18px;
  transition:opacity 420ms var(--ease-out);}
.tile-list{border-top:1px solid var(--ink-line);}
.tile-list div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;
  border-bottom:1px solid var(--ink-line);font-size:14px;}
.tile-list span:last-child{color:var(--muted-dark);}
.tile-bar{height:2px;background:var(--ink-line);max-width:320px;overflow:hidden;}
.tile-bar i{display:block;height:100%;width:0;background:var(--primary);}
.tile-media{border-radius:2px;overflow:hidden;aspect-ratio:4/3;background:var(--ink);
  transition:opacity 420ms var(--ease-out);}
.tile-media img{width:100%;height:100%;object-fit:cover;}
/* Der fruehere Desktop-Block stand hier und schaltete die geschlossene
   Kachel mit display:none hart weg. Dagegen kam keine Ueberblendung an, und
   weil .tile:not(.on) ... spezifischer ist als die spaeteren Regeln, hat er
   sie stillschweigend ueberstimmt. Das Zusammenklappen loest jetzt allein
   der Abschnitt Ablauf weiter unten. */
@media (max-width:991px){
  .accstick{position:static;min-height:0;padding:0;}
  .tile-grid{grid-template-columns:1fr;}
  .tile-bar{display:none;}
  .tile-title{color:var(--surface);}
  .tile-num{color:var(--primary);}
}
/* ====== Korrektur Container: .wrap schrumpft in Flex-Eltern auf Inhaltsbreite.
        Deshalb stand der Hero-Text 198 px weiter rechts als alle anderen Sections. */
.wrap{width:100%;}

/* ====== Nav: fixiert, ueber dem Hero transparent ====== */
.nav{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;
  transition:background-color 420ms var(--ease-out),border-color 420ms var(--ease-out),
             backdrop-filter 420ms var(--ease-out);}
.nav.solid{background:rgba(243,242,238,.82);border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);}
.nav.over .logo,.nav.over .nav-links a{color:var(--surface);}
.nav.over .btn-light{--btn-line:rgba(255,255,255,.28);--btn-bg-hover:var(--surface);
  --btn-text-hover:var(--ink);color:var(--surface);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.solid{background:var(--paper);}
}

/* ====== Hero, groesser ====== */
/* Genau die Navhoehe hoch, damit die Leiste ueber dem Bild liegt. Vorher
   stand hier fest -73px bei einer 77px hohen Leiste: die fehlenden 4px
   verdeckte die dunkle Kontaktzeile, nach deren Entfernung blitzte der
   helle Seitengrund oben durch. --navh misst das JS, der Wert im calc
   ist der Stand vor dem ersten Skriptlauf. */
.hero-full{position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  padding:0 0 clamp(56px,7vw,88px);margin-top:calc(var(--navh,77px) * -1);overflow:hidden;background:var(--ink);}
.hero-full-bg{position:absolute;inset:0;z-index:0;}
.hero-full-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;
  transform:scale(1.06);animation:heroIn 1600ms var(--ease-out) both;}
@keyframes heroIn{from{transform:scale(1.14);opacity:.4;}to{transform:scale(1.06);opacity:1;}}
/* Seit dem 25.09.2026 Max' Foto vom Reetdachhaus, das Bild selbst ist
   unbearbeitet. Vorher lag hier ein Verlauf ueber dem ganzen Bild, das war
   Max zu dunkel, und Jonah wollte den Himmel hell. Die ganze Abdunklung
   steckt in diesem Overlay, drei Teile:
   - oben ein schmaler Streifen, nur so viel, dass die Leiste 4,5:1 haelt
   - unten der Verlauf fuer die Leistungszeile und den Uebergang
   - ::before links hinter der Schrift, per Maske erst ab 20 % der Hoehe,
     voll ab 33 %; darueber bleibt der Himmel frei
   Gemessen am gebauten Hero von 1024 bis 1920 px: jede Zeile mindestens
   4,5:1, die Ueberschrift mindestens 3:1. */
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(17,17,16,.68) 0%,rgba(17,17,16,.64) 6%,rgba(17,17,16,0) 11%),
  linear-gradient(0deg,rgba(17,17,16,.9) 0%,rgba(17,17,16,.6) 16%,rgba(17,17,16,0) 36%);}
.hero-scrim::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(17,17,16,.66) 0%,rgba(17,17,16,.58) 46%,rgba(17,17,16,.22) 62%,rgba(17,17,16,0) 74%);
  -webkit-mask-image:linear-gradient(180deg,transparent 20%,#000 33%);
  mask-image:linear-gradient(180deg,transparent 20%,#000 33%);}
.hero-full .wrap{z-index:2;}
.hero-copy{max-width:min(72ch,62%);}
/* Der Anlauftext im Hero fast weiss statt im Grau der dunklen Baender. Auf
   dem hellen Foto haette das Grau (#B5B2AC) fuer 4,5:1 einen Grund von
   hoechstens #454545 verlangt, links also fast Schwarz. */
.hero-copy .lead.dim{color:rgba(255,255,255,.92);}
.hero-foot{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;margin-top:44px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);}
.hero-foot b{font-weight:500;color:var(--surface);}
.hero-foot a{color:inherit;text-decoration:none;position:relative;padding-bottom:3px;
  transition:color 260ms var(--ease-out);}
.hero-foot a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--primary);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 380ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .hero-foot a:hover{color:var(--surface);}
  .hero-foot a:hover::after{transform:scaleX(1);}}
.hero-foot a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
@media (max-width:900px){
  .hero-copy{max-width:100%;}
  .hero-full{min-height:auto;padding:clamp(96px,22vw,150px) 0 clamp(48px,10vw,72px);}
  /* Am Handy das Hochformat (Flaeche "Hero hoch"). Die Schrift steht ueber
     die ganze Breite, deshalb hier ein Verlauf von oben nach unten und kein
     Teil nur links. */
  .hero-scrim{background:linear-gradient(180deg,rgba(17,17,16,.56) 0%,rgba(17,17,16,.54) 28%,rgba(17,17,16,.6) 52%,rgba(17,17,16,.93) 100%);}
  .hero-scrim::before{display:none;}
}
@media (prefers-reduced-motion:reduce){.hero-full-bg img{animation:none;transform:none;}}

/* ====== Fakten: Domino-Welle beim Hover ====== */
.fx-cell{transform:translateY(0) rotate(0deg);
  transition:background 300ms var(--ease-out),
             transform 620ms cubic-bezier(.22,1.2,.36,1);}
.fx-cell .fx-ico svg{transition:transform 620ms cubic-bezier(.22,1.2,.36,1);}

/* ====== Vorhangeffekt: Bilder wischen diagonal auf ====== */
.curtain{clip-path:polygon(0 0,0 0,0 100%,0 100%);
  transition:clip-path 1100ms cubic-bezier(.62,.05,0,1);}
.curtain.is-in{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
/* Nachfahre statt direktes Kind: seit dem WebP-Umbau liegt ein <picture>
   dazwischen. Das rendert zwar als display:contents, gilt aber trotzdem als
   Elternelement des Bildes. */
.curtain img{transform:scale(1.1);transition:transform 1500ms cubic-bezier(.62,.05,0,1);}
.curtain.is-in img{transform:scale(1);}
.curtain.rev{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);}
@media (prefers-reduced-motion:reduce){
  .curtain,.curtain.rev{clip-path:none;}.curtain img{transform:none;}
}

/* ====== Blur-Reveal fuer eine Aussage ====== */
.blurline{font-size:clamp(24px,3.4vw,40px);line-height:1.22;letter-spacing:-.02em;
  max-width:20ch;}
.blurline w{display:inline-block;filter:blur(6px);opacity:.22;
  transition:filter 700ms var(--ease-out),opacity 700ms var(--ease-out);}
.blurline.is-in w{filter:blur(0);opacity:1;}
@media (prefers-reduced-motion:reduce){.blurline w{filter:none;opacity:1;}}

/* ====== Ablauf: Kopf in die Buehne, weichere Klappbewegung ====== */
.accwrap{position:relative;}
@media (min-width:992px){.accwrap{height:340vh;}}
@media (prefers-reduced-motion:reduce){.accwrap{height:auto;}}
.accstick{position:sticky;top:0;min-height:100dvh;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(24px,3vw,40px);padding:clamp(88px,10vw,120px) 0 clamp(40px,5vw,64px);}
.acc{display:flex;flex-direction:column;gap:12px;}
.tile{background:var(--ink-raised);border:1px solid var(--ink-line);border-radius:2px;
  padding:clamp(18px,2.2vw,28px);
  transition:border-color 620ms var(--ease-out),background 620ms var(--ease-out);}
.tile.on{border-color:rgba(253,68,2,.42);}
/* Die Breite haengt an flex-basis, einer echten Laenge. Spaltenlisten mit
   fr-Werten sind laut Spezifikation nicht animierbar; Chrome interpoliert
   sie in Einzelfaellen zwar doch, bei zwei Spalten aber nachweislich nicht.
   Nachgemessen mit der Web Animations API: mit flex-basis laeuft die Breite
   in beide Richtungen ueber die vollen 700 ms. */
.tile-grid{display:flex;align-items:center;gap:0;
  transition:gap 700ms cubic-bezier(.62,.05,0,1);}
.tile-grid>:first-child{flex:1 1 auto;min-width:0;}
.tile.on .tile-grid{gap:clamp(24px,4vw,56px);}
.tile-head{display:flex;align-items:baseline;gap:16px;}
.tile-num{font-size:13px;letter-spacing:.12em;color:var(--muted-dark);flex:none;
  font-variant-numeric:tabular-nums;transition:color 500ms var(--ease-out);}
.tile-title{font-size:clamp(21px,2.6vw,30px);line-height:1.16;letter-spacing:-.018em;
  color:var(--muted-dark);transition:color 500ms var(--ease-out);}
.tile.on .tile-title{color:var(--surface);}
.tile.on .tile-num{color:var(--primary);}
/* Ausklappen ueber grid-template-rows: laeuft weich statt zu springen. */
.tile-foldwrap{display:grid;grid-template-rows:0fr;pointer-events:none;
  transition:grid-template-rows 700ms cubic-bezier(.62,.05,0,1),opacity 500ms var(--ease-out);
  opacity:0;}
.tile.on .tile-foldwrap{grid-template-rows:1fr;opacity:1;pointer-events:auto;}
.tile-fold{overflow:hidden;min-height:0;}
.tile-fold>div{display:flex;flex-direction:column;gap:16px;padding-top:16px;}
.tile-list{border-top:1px solid var(--ink-line);}
.tile-list div{display:flex;justify-content:space-between;gap:18px;padding:8px 0;
  border-bottom:1px solid var(--ink-line);font-size:14px;}
.tile-list span:last-child{color:var(--muted-dark);}
.tile-bar{height:2px;background:var(--ink-line);max-width:300px;overflow:hidden;}
.tile-bar i{display:block;height:100%;width:0;background:var(--primary);
  transition:width 220ms linear;}
.tile-mediawrap{flex:0 0 0%;min-width:0;overflow:hidden;opacity:0;pointer-events:none;
  transition:flex-basis 700ms cubic-bezier(.62,.05,0,1),opacity 520ms var(--ease-out);}
.tile.on .tile-mediawrap{flex-basis:48%;opacity:1;pointer-events:auto;}
.tile-media{overflow:hidden;min-width:0;border-radius:2px;aspect-ratio:4/3;background:var(--ink);}
.tile-media img{width:100%;height:100%;object-fit:cover;}
@media (max-width:991px){
  .accwrap{height:auto;}
  .accstick{position:static;min-height:0;padding:32px 0 0;}
  .tile-grid,.tile.on .tile-grid{flex-direction:column;align-items:stretch;gap:20px;}
  .tile-foldwrap,.tile-mediawrap{grid-template-rows:1fr;opacity:1;pointer-events:auto;}
  .tile-mediawrap,.tile.on .tile-mediawrap{flex:0 0 auto;}
  .tile-title{color:var(--surface);}.tile-num{color:var(--primary);}
  .tile-bar{display:none;}
}

/* ====== Projektkarten: Bild wischt diagonal auf ====== */
.pcard-media{overflow:hidden;}
/* ====== Fix: .curtain.rev stand nach .curtain.is-in bei gleicher Spezifitaet
        und hat den aufgedeckten Zustand ueberschrieben. Deshalb fehlte das
        Bild bei Fockbek. Die Kombination muss explizit gewinnen. ====== */
.curtain.rev.is-in{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}

/* ====== Warum: Kacheln mit Zeichnung und diagonalem Umschlag ====== */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.why-cell{position:relative;isolation:isolate;background:var(--paper);overflow:hidden;
  padding:clamp(26px,3vw,38px) clamp(24px,2.6vw,32px) clamp(30px,3.4vw,44px);
  display:flex;flex-direction:column;gap:12px;min-height:236px;
  transition:color 420ms var(--ease-out);}
.why-fill{position:absolute;bottom:0;left:-10%;width:120%;height:100%;z-index:-1;
  background:var(--ink);transform-origin:0 50%;transform:translate3d(0,175%,0) rotate(15deg);
  transition:transform 620ms cubic-bezier(.625,.05,0,1);}
.why-art{position:absolute;right:-18px;bottom:-22px;width:132px;height:132px;z-index:-1;
  color:var(--ink);opacity:.10;pointer-events:none;
  transition:opacity 520ms var(--ease-out),color 520ms var(--ease-out),
             transform 700ms cubic-bezier(.625,.05,0,1);}
.why-art svg{width:100%;height:100%;display:block;}
.why-cell h3{font-size:clamp(19px,2vw,22px);line-height:1.28;letter-spacing:-.016em;}
.why-cell p{font-size:14px;line-height:1.55;color:var(--muted);max-width:30ch;
  transition:color 420ms var(--ease-out);}
.why-num{margin-top:auto;font-size:12px;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color 420ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .why-cell:hover{color:var(--paper);}
  .why-cell:hover .why-fill{transform:translate3d(0,0,0) rotate(0deg);}
  .why-cell:hover p{color:var(--muted-dark);}
  .why-cell:hover .why-num{color:var(--primary);}
  .why-cell:hover .why-art{color:var(--primary);opacity:.5;transform:translate(-8px,-8px);}
}
.why-cell:focus-within{color:var(--paper);}
.why-cell:focus-within .why-fill{transform:translate3d(0,0,0) rotate(0deg);}
@media (prefers-reduced-motion:reduce){
  .why-fill{display:none;}
  .why-cell:hover{color:var(--ink);background:var(--surface);}
}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}
/* ====== CTA mit Vollbild ====== */
.cta{position:relative;overflow:hidden;background:var(--ink);color:var(--surface);
  letter-spacing:.004em;}
.cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cta-bg img{width:100%;height:118%;object-fit:cover;object-position:50% 40%;will-change:transform;}
.cta-tint{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(17,17,16,.66) 0%,rgba(17,17,16,.34) 34%,rgba(17,17,16,.58) 72%,rgba(17,17,16,.92) 100%);}
/* Progressiver Weichzeichner am unteren Rand, damit die Section in die Fusszeile laeuft.
   Gestaffelte Ebenen statt eines harten Verlaufs. */
.cta-blur{position:absolute;left:0;right:0;bottom:0;height:min(15rem,32%);z-index:2;
  pointer-events:none;transform:rotate(180deg);}
.cta-blur i{position:absolute;inset:0;display:block;}
.cta-blur i:nth-child(1){backdrop-filter:blur(48px);-webkit-backdrop-filter:blur(48px);
  -webkit-mask-image:linear-gradient(#000 0% 12%,#0000 34%);mask-image:linear-gradient(#000 0% 12%,#0000 34%);}
.cta-blur i:nth-child(2){backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  -webkit-mask-image:linear-gradient(#0000 6%,#000 22% 34%,#0000 54%);mask-image:linear-gradient(#0000 6%,#000 22% 34%,#0000 54%);}
.cta-blur i:nth-child(3){backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(#0000 24%,#000 42% 54%,#0000 74%);mask-image:linear-gradient(#0000 24%,#000 42% 54%,#0000 74%);}
.cta-blur i:nth-child(4){backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(#0000 44%,#000 64% 78%,#0000 100%);mask-image:linear-gradient(#0000 44%,#000 64% 78%,#0000 100%);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cta-blur{background:linear-gradient(0deg,rgba(17,17,16,.9),transparent);transform:none;}
  .cta-blur i{display:none;}
}
.cta .wrap{position:relative;z-index:3;}
.cta-inner{min-height:min(78vh,760px);display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:26px;padding:clamp(96px,12vw,150px) 0 clamp(110px,14vw,170px);
  max-width:min(58ch,62%);}
.cta h2{font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.022em;text-wrap:balance;}
.cta-note{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-dark);}
@media (max-width:900px){.cta-inner{max-width:100%;min-height:0;}}
@media (prefers-reduced-motion:reduce){.cta-bg img{transform:none !important;}}

/* WhatsApp-Button: gruener Grund, schwarze Schrift, gleiche Mechanik wie die anderen */
.btn-wa{--btn-bg:#25D366;--btn-bg-hover:#0E7A3C;--btn-text-hover:var(--paper);
  --btn-line:transparent;--btn-ico-bg:var(--ink);--btn-ico-fg:#25D366;color:var(--ink);}

/* ====== Fusszeile ====== */
.ft{background:var(--ink);color:var(--surface);border-top:1px solid var(--ink-line);
  letter-spacing:.004em;padding:clamp(48px,6vw,72px) 0 clamp(26px,3vw,34px);}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(36px,6vw,80px);padding-bottom:clamp(40px,5vw,60px);}
.ft-brand .logo{color:var(--surface);}
.ft-lines{display:flex;flex-direction:column;gap:16px;margin-top:26px;font-size:15px;
  color:var(--muted-dark);line-height:1.6;}
.ft-lines a{color:var(--surface);text-decoration:none;
  transition:color 260ms var(--ease-out);}
.ft-lines a:hover{color:var(--primary);}
.ft-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,32px);}
.ft-col h3{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dark);margin-bottom:16px;}
.ft-col ul{display:flex;flex-direction:column;gap:9px;}
.ft-col a{font-size:15px;color:var(--surface);text-decoration:none;position:relative;
  transition:color 260ms var(--ease-out);}
.ft-col a:hover{color:var(--primary);}
.ft-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:12px 40px;padding:20px 0;border-top:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line);font-size:13px;color:var(--muted-dark);}
.ft-legal a{color:var(--muted-dark);text-decoration:none;transition:color 260ms var(--ease-out);}
.ft-legal a:hover{color:var(--surface);}
.ft-legal nav{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;}
.ft-legal nav span{opacity:.4;}
.ft-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;
  padding-top:24px;font-size:13px;color:var(--muted-dark);}
.ft-end p{max-width:62ch;line-height:1.6;}
.ft a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
@media (max-width:900px){
  .ft-top{grid-template-columns:1fr;}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
}
@media (max-width:520px){.ft-nav{grid-template-columns:1fr;}}
/* ====== Fix: .cta setzt eigenen dunklen Grund, hatte aber nicht .ink.
        Deshalb erbte der Anlauftext das dunkle .dim und war kaum lesbar. ====== */
.cta .dim{color:var(--muted-dark);}
.cta-note{color:rgba(255,255,255,.72);}

/* ====== Logo aus dem Schild statt nachgesetzter Schrift ====== */
.logo{position:relative;display:block;line-height:0;}
.logo img{display:block;height:38px;width:auto;transition:opacity 420ms var(--ease-out);}
.logo .lg-hell{position:absolute;inset:0;opacity:0;}
.nav.over .logo .lg-hell{opacity:1;}
.nav.over .logo .lg-dunkel{opacity:0;}
.ft-brand .logo img{height:44px;}
/* Fusszeile ist dunkel: dort gilt die helle Fassung. */
.ft-brand .logo .lg-hell{opacity:1;}
.ft-brand .logo .lg-dunkel{opacity:0;}
@media (max-width:600px){.logo img{height:32px;}}

/* ====== WhatsApp unten rechts in der Ecke, faehrt mit ====== */
.wa-dock{position:fixed;right:clamp(16px,2.2vw,28px);bottom:clamp(16px,2.2vw,28px);
  z-index:60;display:flex;align-items:center;gap:0;height:56px;padding:0;
  border-radius:28px;background:#25D366;color:var(--ink);text-decoration:none;
  box-shadow:0 6px 26px rgba(17,17,16,.28);overflow:hidden;
  transition:gap 420ms var(--ease-out),padding 420ms var(--ease-out),
             background 260ms var(--ease-out),transform 260ms var(--ease-out);}
.wa-dock:active{transform:scale(.97);}
.wa-ico{flex:none;width:56px;height:56px;display:grid;place-items:center;}
.wa-ico svg{width:26px;height:26px;display:block;}
.wa-label{display:grid;grid-template-columns:0fr;
  transition:grid-template-columns 460ms cubic-bezier(.625,.05,0,1);}
.wa-label span{overflow:hidden;min-width:0;white-space:nowrap;font-size:13px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;}
@media (hover:hover) and (pointer:fine){
  .wa-dock:hover{background:#1EB955;padding-right:22px;}
  .wa-dock:hover .wa-label{grid-template-columns:1fr;}
}
.wa-dock:focus-visible{outline:2px solid var(--surface);outline-offset:3px;}
@media (max-width:820px){
  .wa-dock{height:52px;}
  .wa-ico{width:52px;height:52px;}
}
@media (prefers-reduced-motion:reduce){.wa-dock,.wa-label{transition:none;}}

/* ====== Leistungen: Wege auf die Unterseiten ====== */
.panel-cta{margin-top:22px;}
.tabs-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:40px;
  padding-top:26px;border-top:1px solid var(--ink-line);}
.tabs-foot p{font-size:14px;color:var(--muted-dark);max-width:44ch;}
/* ====== Fix: .nav.over .nav-links a (0,3,1) schlug .nav-links a:hover (0,2,1),
        deshalb passierte ueber dem Hero beim Hover nichts. Die Unterstreichung
        haengt jetzt nicht mehr an der Farbe, und der Hover ist spezifisch genug. ====== */
.nav-links a{position:relative;padding-bottom:5px;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--primary);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform 420ms cubic-bezier(.625,.05,0,1);}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%;}
  .nav .nav-links a:hover{color:var(--primary-deep);}
  .nav.over .nav-links a:hover{color:var(--primary);}
}
.nav-links a:focus-visible{outline:none;color:var(--primary-deep);}
.nav.over .nav-links a:focus-visible{color:var(--primary);}
@media (prefers-reduced-motion:reduce){.nav-links a::after{transition:none;}}

/* ====== Terminbuchung als Dialog ====== */
dialog.modal{width:min(760px,calc(100vw - 32px));max-height:min(88dvh,900px);padding:0;border:0;
  border-radius:2px;background:var(--ink);color:var(--surface);overflow:hidden;
  letter-spacing:.004em;}
dialog.modal::backdrop{background:rgba(9,9,8,.66);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
dialog.modal[open]{animation:mdIn 420ms cubic-bezier(.625,.05,0,1) both;}
dialog.modal[open]::backdrop{animation:bdIn 320ms ease both;}
@keyframes mdIn{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes bdIn{from{opacity:0;}to{opacity:1;}}
.md-scroll{max-height:inherit;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.md-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:clamp(24px,3.4vw,38px) clamp(24px,3.4vw,38px) 0;}
.md-x{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ink-line);
  border-radius:2px;background:transparent;color:var(--muted-dark);cursor:pointer;
  font-family:inherit;font-size:20px;line-height:1;
  transition:color 240ms var(--ease-out),border-color 240ms var(--ease-out);}
.md-x:hover{color:var(--surface);border-color:var(--surface);}
.md-x:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.md-body{padding:22px clamp(24px,3.4vw,38px) clamp(26px,3.4vw,38px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,44px);align-items:start;}
@media (max-width:700px){.md-body{grid-template-columns:1fr;}}
.md-side{border-left:1px solid var(--ink-line);padding-left:clamp(20px,2.4vw,30px);}
@media (max-width:700px){.md-side{border-left:0;border-top:1px solid var(--ink-line);
  padding-left:0;padding-top:24px;}}
.md-side .ct-line:first-child{border-top:0;padding-top:0;}
html.modal-open{overflow:hidden;}

/* ====== Haeufige Fragen ====== */
.faq{border-top:1px solid var(--line);}
.fq{border-bottom:1px solid var(--line);}
.fq-h{margin:0;font:inherit;}
.fq-q{width:100%;display:flex;align-items:baseline;gap:20px;text-align:left;cursor:pointer;
  background:none;border:0;padding:24px 0;color:inherit;font-family:inherit;font-weight:400;
  font-size:clamp(18px,2vw,21px);line-height:1.35;letter-spacing:-.014em;
  transition:color 260ms var(--ease-out);}
.fq-q:hover{color:var(--primary-deep);}
.fq-q:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.faq-sign{margin-left:auto;flex:none;position:relative;width:14px;height:14px;
  align-self:center;color:var(--primary);}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;background:currentColor;
  transition:transform 420ms cubic-bezier(.625,.05,0,1),opacity 300ms var(--ease-out);}
.faq-sign::before{left:0;right:0;top:6px;height:1.5px;}
.faq-sign::after{top:0;bottom:0;left:6px;width:1.5px;}
.fq-q[aria-expanded="true"] .faq-sign::after{transform:rotate(90deg);opacity:0;}
/* Auf und Zu ueber grid-template-rows. Das aufklappbare Element des Browsers
   ueberspringt seinen Inhalt, solange es zu ist: dadurch fehlte beim Oeffnen
   der Startwert und die Bewegung sprang. Der Panel bleibt jetzt immer
   gerendert, visibility nimmt ihn erst nach dem Zuklappen aus Fokus und
   Vorlesereihenfolge. */
.fq-a{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows 520ms cubic-bezier(.625,.05,0,1),visibility 0s linear 520ms;}
.fq-a.on{grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows 520ms cubic-bezier(.625,.05,0,1),visibility 0s;}
.fq-in{overflow:hidden;min-height:0;}
.fq-in p{padding:0 0 26px;max-width:62ch;color:var(--muted);line-height:1.7;
  opacity:0;transform:translateY(-10px);
  transition:opacity 300ms var(--ease-out),transform 520ms cubic-bezier(.625,.05,0,1);}
.fq-a.on .fq-in p{opacity:1;transform:none;}

/* Die Leistungsliste klebte auf 40px und lief damit unter die 77px hohe
   Navigation, der erste Punkt war halb verdeckt. --navh misst das JS. */
@media (min-width:901px){.tab-list{top:calc(var(--navh,77px) + 30px);}}

/* Das Bild ist 118% hoch, sass aber oben buendig: der ganze Ueberhang lag
   unten, und die Parallaxe nach unten riss oben einen Spalt auf. Jetzt
   haengt der Ueberhang zu gleichen Teilen oben und unten. */
.cta-bg img{position:absolute;top:-9%;left:0;}
@media (prefers-reduced-motion:reduce){
  dialog.modal[open]{animation:none;}
  .fq-a,.fq-a.on,.fq-in p{transition:none;}
  .faq-sign::before,.faq-sign::after{transition:none;}
}
/* ====== Schluesselfertig: Bild links, Tabelle rechts ======
   Aufbau nach BYQ kelvin-value-features-19. Der Punkt der Vorlage: die
   Aussage steht nicht im Fliesstext, sondern in einer Tabelle mit einem
   rechtsbuendigen Wert pro Zeile. Hier traegt dieser Wert die eigentliche
   Botschaft, naemlich wer das Gewerk ausfuehrt. */
.sf{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(32px,4.4vw,68px);align-items:center;}
@media (max-width:900px){.sf{grid-template-columns:1fr;gap:40px;}}

/* Zwei Spalten, die zweite haengt tiefer. Das ist der Versatz, der das
   Raster aufbricht, ohne dass die Bilder frei schweben. Fuer echtes Masonry
   mit ungleichen Hoehen braucht es hier nichts weiter: die Seitenverhaeltnisse
   der vier Bilder sind bewusst verschieden (3:4, 1:1, 4:3, 3:4). */
.sf-grid{display:flex;gap:clamp(10px,1.1vw,16px);align-items:flex-start;}
.sf-spalte{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  gap:clamp(10px,1.1vw,16px);}
.sf-spalte:last-child{margin-top:clamp(26px,4vw,58px);}
.sf-grid figure{margin:0;border-radius:2px;overflow:hidden;background:var(--ink-raised);}
.sf-grid img{display:block;width:100%;height:100%;object-fit:cover;}
/* Unter 900 px stehen Bilder und Text uebereinander statt nebeneinander, und
   genau dann kosten die vier Fotos am meisten Platz: sie machen aus dem
   Abschnitt eine Bildstrecke, durch die man sich hindurchwischt, bevor man
   zur Tabelle kommt. Die Tabelle ist aber der Inhalt -- sie sagt, was der
   Betrieb selbst macht und was er vergibt.

   Die Regel muss NACH .sf-grid{display:flex} stehen. Im ersten Anlauf stand
   sie oben bei der .sf-Regel und blieb wirkungslos: gleiche Spezifitaet,
   spaetere Regel gewinnt. Der Abschnitt war danach exakt gleich hoch.   */
@media (max-width:900px){.sf-grid{display:none;}}
.sf-spalte:first-child figure:first-child{aspect-ratio:3/4;}
.sf-spalte:first-child figure:last-child{aspect-ratio:4/3;}
.sf-spalte:last-child figure:first-child{aspect-ratio:1/1;}
.sf-spalte:last-child figure:last-child{aspect-ratio:3/4;}
/* Die vier Vorhaenge nacheinander statt gleichzeitig. */
.sf-spalte:last-child figure:first-child{transition-delay:90ms;}
.sf-spalte:first-child figure:last-child{transition-delay:180ms;}
.sf-spalte:last-child figure:last-child{transition-delay:270ms;}

.sf-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.sf-copy .h2{margin-top:2px;}
/* Erste Haelfte der Zeile gedimmt: die Aussage sitzt im zweiten Teil. */
.sf-copy .h2 .dim{color:var(--muted-dark);}
.sf-copy > p{margin:0;}

.sf-tab{width:100%;border-bottom:1px solid var(--ink-line);margin-top:4px;}
.sf-row{display:flex;align-items:center;gap:16px;padding:13px 0;
  border-top:1px solid var(--ink-line);}
.sf-row i{flex:none;width:9px;height:9px;border-radius:1px;
  box-shadow:inset 0 0 0 1.5px var(--muted-dark);}
.sf-row i.ja{background:var(--primary);box-shadow:none;}
.sf-row span{flex:auto;font-size:16px;color:var(--surface);}
.sf-row em{flex:none;font-style:normal;font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);white-space:nowrap;}
.sf-row i.ja ~ em{color:var(--primary);}
@media (max-width:520px){
  .sf-row{flex-wrap:wrap;gap:6px 14px;}
  .sf-row span{flex:1 1 auto;}
  .sf-row em{flex:1 0 100%;padding-left:25px;}
}
.sf-fuss{font-size:14px;line-height:1.6;color:var(--muted-dark);max-width:48ch;
  padding-left:16px;border-left:2px solid var(--primary);}

/* ====== Wo wir bauen: Fahrzeittafel ======
   Vorher stand hier ein Radiusplan ueber einem Luftbild. Der sah nach Grafik
   aus, beantwortete aber die Frage nicht, die Kunden wirklich stellen. Die
   Fahrzeit tut das, und sie nimmt der Reichweite gleichzeitig den Deckel:
   Hamburg steht in derselben Liste wie Kropp. Die Ortsnamen sind ausserdem
   das, was bei der Ortssuche zaehlt, und stehen jetzt gross statt klein. */
.fz-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,60px);}
@media (max-width:900px){.fz-kopf{grid-template-columns:1fr;gap:20px;}}
.fz-kopf p{max-width:52ch;line-height:1.65;}

.fz-gruppe{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-bottom:10px;}
.fz-gruppe + .fz-liste{border-top:1px solid var(--line);}
.fz-liste + .fz-gruppe{padding-top:clamp(32px,4vw,48px);}
.fz-liste{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px);}
@media (max-width:640px){.fz-liste{grid-template-columns:1fr;}}
.fz-liste li{list-style:none;display:flex;align-items:baseline;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line);}
/* Bei zwei Spalten fehlt der oberen rechten Zelle sonst die Linie darueber. */
@media (min-width:641px){.fz-liste li:nth-child(2){box-shadow:0 -1px 0 var(--line);}}
.fz-liste b{font-weight:400;font-size:clamp(20px,2.4vw,27px);letter-spacing:-.016em;
  line-height:1.15;}
.fz-liste i{font-style:normal;margin-left:auto;font-size:13px;font-weight:500;
  letter-spacing:.1em;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;}

/* ====== Stellen: schmales oranges Band ======
   Bewusst nur Aussage und Knopf. Die Stellen selbst gehoeren auf die
   Karriereseite, sonst veraltet die Startseite bei jeder Einstellung.
   Sekundaertext steht auf rgba(17,17,16,.88), das sind 4,84:1 gegen Orange.
   Bei .72 waeren es 3,83:1 gewesen, unter AA. Die Knopflinie liegt auf .62
   und damit bei 3,19:1, der Grenze fuer Bedienelemente. */
.jobs{background:var(--primary);color:var(--ink);}
.jobs .wrap{padding-block:clamp(40px,4.6vw,58px);}
.jobs .kicker{color:rgba(17,17,16,.88);}
.jobs .kicker::before{background:var(--ink);}
.jobs h2{font-size:clamp(23px,2.6vw,31px);line-height:1.15;letter-spacing:-.018em;
  margin-top:14px;max-width:18ch;}
.jb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:clamp(24px,3.4vw,56px);align-items:center;}
@media (max-width:900px){.jb{grid-template-columns:1fr;gap:24px;align-items:start;}}
.jb p{font-size:15px;line-height:1.65;color:rgba(17,17,16,.88);max-width:40ch;}
.btn-onprimary{--btn-bg:transparent;--btn-bg-hover:var(--ink);--btn-text-hover:var(--paper);
  --btn-line:rgba(17,17,16,.62);--btn-ico-bg:var(--ink);--btn-ico-fg:var(--primary);
  color:var(--ink);}
/* ================================================================
   Unterseiten. Kommt nach _v8_css und ueberschreibt damit, wo noetig.
   Keine neuen Farben: alles laeuft ueber die Tokens aus _base_css.
   ================================================================ */

/* ---------- Navigation: mobil ----------------------------------
   Bis hierher gab es unter 900 px gar keine Navigation, .nav-links
   stand auf display:none und ein Ersatz fehlte. Auf einer Einseiten-
   Startseite faellt das nicht auf, bei dreizehn Seiten ist es der
   Ausfall der Navigation fuer die Mehrheit der Besucher.            */

.nav-rechts{display:flex;align-items:center;gap:12px;}

/* Die aktive Seite wird durch den orangen Strich markiert, nicht durch orange
   Schrift. Orange auf Papier steht bei 3,12:1 und faellt damit fuer 14 px durch
   (DESIGN-SYSTEM.md Abschnitt 2: auf hellem Grund keine Textfarbe, sondern
   Flaeche und Linie). Der Strich traegt den Zustand ohnehin besser. */
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%;}
.nav.over .nav-links a[aria-current="page"]{color:var(--surface);}

.nav-burger{display:none;width:48px;height:48px;padding:12px 10px;border:0;
  background:transparent;cursor:pointer;flex-direction:column;justify-content:space-between;
  color:inherit;-webkit-tap-highlight-color:transparent;}
.nav-burger i{display:block;height:1px;width:100%;background:currentColor;
  transition:transform 260ms var(--ease-out);}
.nav.over .nav-burger{color:var(--surface);}
.nav-burger:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
@media (max-width:900px){.nav-burger{display:flex;}}
@media (max-width:600px){.nav-rechts .btn-light{display:none;}}

.mnav{width:100%;max-width:none;height:100%;max-height:none;inset:0;margin:0;
  border:0;padding:0;background:var(--paper);color:var(--ink);overflow-y:auto;}
.mnav::backdrop{background:rgba(17,17,16,.5);}
.mnav[open]{display:flex;flex-direction:column;}
.mnav-kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:72px;padding:14px var(--pad-x);border-bottom:1px solid var(--line);}
.mnav-links{display:flex;flex-direction:column;padding:8px var(--pad-x) 0;}
.mnav-links > a{display:block;padding:20px 0;border-bottom:1px solid var(--line);
  font-size:clamp(22px,6vw,28px);line-height:1.2;letter-spacing:-.018em;
  color:var(--ink);text-decoration:none;}
.mnav-links > a[aria-current="page"]{color:var(--ink);position:relative;
  padding-left:22px;}
.mnav-links > a[aria-current="page"]::before{content:"";position:absolute;left:0;
  top:calc(50% - 3px);width:6px;height:6px;background:var(--primary);}
.mnav-unter{display:flex;flex-direction:column;gap:2px;padding:16px 0 20px 16px;
  border-bottom:1px solid var(--line);border-left:1px solid var(--primary);
  margin:0 0 0 2px;}
.mnav-unter a{padding:7px 0;font-size:15px;color:var(--muted);text-decoration:none;}
.mnav-unter a:hover{color:var(--primary-deep);}
.mnav-fuss{margin-top:auto;padding:28px var(--pad-x) 40px;}
.mnav-fuss a{display:block;font-size:clamp(24px,7vw,32px);letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;}
.mnav-fuss p{margin-top:8px;font-size:14px;color:var(--muted);}
.mnav a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}

/* ---------- Brotkrume ------------------------------------------ */

.krume{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:34px;
  font-size:13px;color:var(--muted);}
.krume a{color:var(--muted);text-decoration:none;
  transition:color 160ms var(--ease-out);}
.krume a:hover{color:var(--primary-deep);}
.pj-hero .krume a:hover{color:var(--primary);}
.krume i{display:block;width:14px;height:1px;background:var(--line);}
.krume span{color:var(--ink);}
.ink .krume,.ink .krume a{color:var(--muted-dark);}

/* ---------- Seitenkopf ----------------------------------------- */

.sk{padding-top:clamp(40px,5vw,72px);}
/* Zwei gleich breite Spalten. Das Bild sitzt unten buendig mit den Knoepfen
   statt mittig neben der Ueberschrift: es traegt weniger als der Titel, soll
   aber ein Foto bleiben und keine Briefmarke. Der erste Anlauf hatte die
   Spalte auf .85fr verschmaelert und war damit zu klein. */
.sk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start;}
.sk-bild{border-radius:2px;overflow:hidden;aspect-ratio:4/3;background:var(--line);
  align-self:end;}
.sk-bild img{width:100%;height:100%;object-fit:cover;}
@media (max-width:900px){
  .sk-grid{grid-template-columns:1fr;}
  .sk-bild{aspect-ratio:16/10;}
}
.ohne-oben{padding-top:0;}

/* ---------- Haarlinien-Liste -----------------------------------
   Karten nur, wo die Karte das Bauteil ist. Ueberall sonst trennen
   Haarlinien und Weissraum, DESIGN-SYSTEM.md Abschnitt 5.          */

.hl{max-width:64ch;}
.hl li{padding:17px 0 17px 30px;border-top:1px solid var(--line);position:relative;
  font-size:17px;line-height:1.55;}
.hl li:last-child{border-bottom:1px solid var(--line);}
.hl li::before{content:"";position:absolute;left:0;top:28px;width:14px;height:1px;
  background:var(--primary);}
.hl-ink li{border-color:var(--ink-line);}
.hl-ink li:last-child{border-bottom-color:var(--ink-line);}
.hl b{font-weight:400;color:var(--primary);}
.ink .hl b{color:var(--primary);}

/* ---------- Bauzeichnungen ------------------------------------- */

.bp-gewerk{right:-7%;top:50%;transform:translateY(-50%);width:min(44%,500px);height:auto;}
@media (max-width:1100px){.bp-gewerk{display:none;}}

/* ---------- Zweispalter ---------------------------------------- */

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);align-items:start;}
.duo p{margin-top:12px;}
.duo a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--primary);}
.duo-hl .hl{margin-top:22px;}
@media (max-width:760px){.duo{grid-template-columns:1fr;}}

.preis-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px);align-items:start;}
@media (max-width:900px){.preis-grid{grid-template-columns:1fr;}}
.preis-grid .head{margin-bottom:0;}

/* ---------- Stellenzeilen -------------------------------------- */

.jz-liste{border-top:1px solid var(--line);}
.jz{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.85fr)) auto;
  gap:clamp(16px,2.4vw,30px);align-items:center;padding:26px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:padding-left 300ms var(--ease-out);}
.jz-titel{display:flex;flex-direction:column;gap:5px;}
.jz-fakt{display:flex;flex-direction:column;gap:5px;font-size:15px;}
.jz-fakt b{font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);}
.jz-pfeil{width:22px;height:22px;color:var(--muted);flex:none;
  transition:transform 300ms var(--ease-out),color 300ms var(--ease-out);}
.jz-pfeil svg{width:22px;height:22px;}
@media (hover:hover) and (pointer:fine){
  .jz:hover{padding-left:14px;}
  .jz:hover .jz-pfeil{transform:translateX(6px);color:var(--primary);}
}
.jz:focus-visible{outline:2px solid var(--primary);outline-offset:4px;}
@media (max-width:900px){
  .jz{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;}
  .jz-titel{grid-column:1 / -1;}
  .jz-pfeil{display:none;}
}

/* ---------- Wer baut ------------------------------------------- */

.wer{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px);align-items:center;}
@media (max-width:900px){.wer{grid-template-columns:1fr;}}
.wer-bild{border-radius:2px;overflow:hidden;aspect-ratio:4/5;}
.wer-bild img{width:100%;height:100%;object-fit:cover;}

/* ---------- Rechtstexte -----------------------------------------
   Eine Spalte, keine Kicker. Die Kicker-Regel gilt fuer Section-
   Folgen, nicht fuer einen Rechtstext: ein Label ueber jedem Absatz
   waere hier Unfug.                                                */

.rt-seite{padding-bottom:clamp(64px,9vw,128px);}
.rt{max-width:68ch;margin-top:48px;}
.rt h2{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.014em;
  margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line);}
.rt h2:first-child{margin-top:0;}
.rt p{margin-bottom:14px;color:var(--muted);line-height:1.75;}
.rt p b{color:var(--ink);font-weight:400;}
.rt a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--primary);}
.rt-warn{max-width:68ch;margin-top:36px;padding:22px 26px;background:var(--surface);
  border:1px solid var(--line);border-left:2px solid var(--primary);border-radius:2px;}
.rt-warn p{margin:0;font-size:15px;line-height:1.7;color:var(--ink);}
.rt-warn b{font-weight:500;}

/* ---------- Reduzierte Bewegung -------------------------------- */

@media (prefers-reduced-motion:reduce){
  .jz,.jz-pfeil,.nav-burger i{transition:none;}
}
/* ================================================================
   Zweiter Durchgang an den Unterseiten. Struktur aus BYQ Supply,
   Oberflaeche aus unserer CI, wie in KONZEPT.md Abschnitt 8
   festgelegt. Keine neuen Farben, alles ueber die Tokens.
   ================================================================ */

/* ---------- Bild und Text im Wechsel ---------------------------
   Leistungsseite, Abschnitt 2. Vorher stand dort eine einzige lange
   Haarlinien-Liste: vollstaendig und trotzdem nichtssagend.        */

.wr-stapel{display:flex;flex-direction:column;gap:clamp(56px,7vw,104px);
  margin-top:clamp(40px,5vw,64px);}
.wr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;}
.wr-bild{border-radius:2px;overflow:hidden;aspect-ratio:4/3;background:var(--line);}
.wr-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 700ms var(--ease-out);}
.wr-gedreht .wr-bild{order:2;}
.wr-liste{margin-top:24px;}
.wr-liste li{position:relative;padding:11px 0 11px 26px;font-size:16px;
  line-height:1.5;border-top:1px solid var(--line);}
.wr-liste li:last-child{border-bottom:1px solid var(--line);}
.wr-liste li::before{content:"";position:absolute;left:0;top:22px;width:12px;
  height:1px;background:var(--primary);}
@media (max-width:860px){
  .wr{grid-template-columns:1fr;gap:24px;}
  .wr-gedreht .wr-bild{order:0;}
  .wr-bild{aspect-ratio:16/10;}
}

/* ---------- Ablauf: klebende Ueberschrift, Schritte rechts ------ */

.ab{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,80px);align-items:start;}
.ab-kopf{position:sticky;top:calc(var(--navh, 77px) + 32px);}
.ab-liste{list-style:none;margin:0;padding:0;}
.ab-schritt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,34px);
  padding:26px 0;border-top:1px solid var(--line);}
.ab-schritt:last-child{border-bottom:1px solid var(--line);}
.ink .ab-schritt{border-top-color:var(--ink-line);}
.ink .ab-schritt:last-child{border-bottom-color:var(--ink-line);}
.ab-num{font-size:13px;letter-spacing:.12em;color:var(--primary);
  font-variant-numeric:tabular-nums;padding-top:5px;}
.ab-schritt p{margin-top:10px;font-size:15px;}
@media (max-width:900px){
  .ab{grid-template-columns:1fr;gap:28px;}
  .ab-kopf{position:static;}
}

/* ---------- Projektkarten --------------------------------------
   Bild im Anschnitt, Angaben darauf statt darunter. Die Breiten
   wechseln, damit gar nicht erst ein Raster aus gleichen Kacheln
   entsteht. Bleibt eine Karte allein in der Zeile, laeuft sie ueber
   die volle Breite und bekommt ein flacheres Format.

   Die grosse Kachel wechselt zeilenweise die Seite: gross-klein,
   dann klein-gross. Darum 4n und nicht 2n. Die frueheren Regeln
   gaben jeder geraden Karte die schmale Breite, das ergab bei
   ungerader Anzahl den gewuenschten Wechsel und bei gerader zwei
   gleiche Zeilen mit beiden grossen Kacheln links.               */

.pkg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;}
.pk{position:relative;display:block;grid-column:span 7;border-radius:2px;
  overflow:hidden;text-decoration:none;color:var(--surface);background:var(--ink);
  isolation:isolate;}
.pk:nth-child(4n+2),.pk:nth-child(4n+3){grid-column:span 5;}
.pkg > .pk:last-child:nth-child(odd){grid-column:span 12;}
/* height:100% zusaetzlich zum Verhaeltnis, und zwar wegen der Zeile: das
   Raster zieht beide Kacheln einer Zeile auf dieselbe Hoehe, die von der
   breiten Kachel kommt. Die schmale Kachel ist dann hoeher als ihre eigenen
   4/3 -- ohne diese Zeile blieb darunter ein schwarzer Streifen stehen (bei
   1280 px waren es 136 px), in dem die Angaben sassen. Gemessen, nicht
   geraten: unter 821 px steht eine Kachel je Zeile, dort gab es die Luecke
   nie. Beim Sortieren der Hoehe zaehlt weiter das Verhaeltnis, weil 100 %
   sich zu diesem Zeitpunkt noch auf nichts beziehen kann.

   width:100% muss dazu. Ohne die Breite steht nur die Hoehe fest, und dann
   rechnet das Verhaeltnis die Breite aus: die schmale Kachel war 375 px
   breit, das Bild darin 531 px und ragte seitlich heraus. Stehen beide
   Masse fest, tritt das Verhaeltnis zurueck.                            */
.pk-media{display:block;aspect-ratio:4/3;width:100%;height:100%;}
.pkg > .pk:last-child:nth-child(odd) .pk-media{aspect-ratio:21/9;}
.pk-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 700ms var(--ease-out);}
/* Der Verlauf muss die Schrift auch ueber einer hellen Klinkerwand tragen.
   Die erste Fassung endete bei 88 Prozent und wurde zu frueh durchsichtig:
   auf der breiten Karte stand die Leistungszeile dann auf hellem Ziegel. */
.pk-scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,17,16,.94) 0%,rgba(17,17,16,.78) 22%,
    rgba(17,17,16,.42) 48%,rgba(17,17,16,.10) 74%,rgba(17,17,16,0) 100%);
  transition:opacity 400ms var(--ease-out);}
.pk-info{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  gap:7px;padding:clamp(22px,3vw,34px);}
.pk-meta{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--surface);}
.pk-meta i{display:block;width:14px;height:1px;background:var(--primary);}
.pk-titel{font-size:clamp(21px,2.3vw,27px);line-height:1.2;letter-spacing:-.018em;}
.pk-leist{font-size:14px;line-height:1.5;color:var(--muted-dark);max-width:44ch;}
.pk-go{position:absolute;top:clamp(18px,2.4vw,26px);right:clamp(18px,2.4vw,26px);
  display:grid;place-items:center;width:44px;height:44px;border-radius:2px;
  background:var(--primary);color:var(--ink);opacity:0;transform:translateY(-6px);
  transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);}
.pk-go svg{width:18px;height:18px;}
@media (hover:hover) and (pointer:fine){
  .pk:hover .pk-media img{transform:scale(1.04);}
  .pk:hover .pk-go,.pk:focus-visible .pk-go{opacity:1;transform:none;}
}
.pk:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
@media (max-width:820px){
  .pkg{grid-template-columns:1fr;}
  /* Jede Breitenregel muss hier namentlich zurueckgenommen werden. .pk
     allein reicht nicht: es ist schwaecher als .pk:nth-child(...) und
     wuerde ueberstimmt.                                              */
  .pk,.pk:nth-child(4n+2),.pk:nth-child(4n+3),
  .pkg > .pk:last-child:nth-child(odd){grid-column:auto;}
  .pk-media,.pkg > .pk:last-child:nth-child(odd) .pk-media{aspect-ratio:4/3;}
  .pk-go{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .pk-media img,.pk-go,.pk-scrim,.wr-bild img{transition:none;}
}

/* ---------- Projektseite: Hauptbild -----------------------------
   Die eine bewusste Ausnahme von "Unterseiten beginnen mit paper":
   bei einem Projekt ist das Bild die Sache selbst.                 */

.pj-hero{position:relative;display:flex;align-items:flex-end;min-height:min(74vh,660px);
  padding:clamp(40px,7vw,96px) 0 clamp(32px,5vw,64px);background:var(--ink);
  color:var(--surface);overflow:hidden;letter-spacing:.004em;}
.pj-hero-bild{position:absolute;inset:0;}
.pj-hero-bild img{width:100%;height:100%;object-fit:cover;}
.pj-hero-scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,17,16,.92) 6%,rgba(17,17,16,.55) 48%,
    rgba(17,17,16,.28) 100%);}
.pj-hero .wrap{width:100%;}
.pj-hero-in{max-width:62ch;}
.pj-hero .krume,.pj-hero .krume a{color:var(--muted-dark);}
.pj-hero .krume span{color:var(--surface);}
.pj-hero .krume i{background:rgba(255,255,255,.28);}
.pj-hero p{line-height:1.72;}

/* ---------- Projektseite: Beschreibung und Tafel --------------- */

.pj-kopf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,5vw,80px);align-items:start;}
@media (max-width:900px){.pj-kopf{grid-template-columns:1fr;}}
.pj-tafel{margin:0;border-top:1px solid var(--ink);}
.pj-zeile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:20px;padding:15px 0;border-bottom:1px solid var(--line);}
.pj-zeile dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding-top:2px;}
.pj-zeile dd{margin:0;font-size:16px;}

.pj-posten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(32px,5vw,72px);margin-top:clamp(32px,4vw,48px);}
.pj-pos{display:flex;align-items:baseline;gap:16px;padding:16px 0;
  border-top:1px solid var(--ink-line);}
.pj-pos-text{flex:1 1 auto;font-size:16px;line-height:1.5;}
.pj-pos-menge{flex:none;font-size:15px;color:var(--primary);
  font-variant-numeric:tabular-nums;}
@media (max-width:760px){.pj-posten{grid-template-columns:1fr;}}

/* ---------- Galerie und Lupe ----------------------------------- */

/* Masonry ueber Spalten statt eines Rasters aus gleichen 4:3-Kacheln: jedes
   Bild behaelt sein Format, hochkant steht neben quer, die Spalten fuellen
   sich von oben. Kein Skript noetig; der Bildbetrachter liest die
   Reihenfolge aus dem Markup. */
.ga-grid{columns:3 260px;column-gap:14px;margin-top:clamp(32px,4vw,48px);}
.ga{position:relative;display:block;width:100%;margin:0 0 14px;padding:0;border:0;
  border-radius:2px;overflow:hidden;background:var(--line);cursor:zoom-in;
  break-inside:avoid;}
.ga img{width:100%;height:auto;transition:transform 600ms var(--ease-out);}
/* Mit Skript: das Skript setzt Breite, Hoehe und Position je Kachel. */
.ga-grid.ga-js{columns:auto;position:relative;}
.ga-js .ga{position:absolute;top:0;left:0;margin:0;}
.ga-js .ga img{height:100%;object-fit:cover;}
.ga-lupe{position:absolute;inset:0;background:rgba(17,17,16,0);
  transition:background 300ms var(--ease-out);}
.ga-lupe::after{content:"";position:absolute;right:14px;bottom:14px;width:34px;
  height:34px;border-radius:2px;background:var(--primary);opacity:0;
  transition:opacity 300ms var(--ease-out);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
@media (hover:hover) and (pointer:fine){
  .ga:hover img{transform:scale(1.04);}
  .ga:hover .ga-lupe{background:rgba(17,17,16,.16);}
  .ga:hover .ga-lupe::after{opacity:1;}
}
.ga:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}

.lb{width:100%;max-width:none;height:100%;max-height:none;inset:0;margin:0;
  padding:0;border:0;background:rgba(17,17,16,.96);color:var(--surface);}
.lb::backdrop{background:rgba(17,17,16,.9);}
.lb[open]{display:flex;flex-direction:column;}
/* grid-template-rows:minmax(0,1fr) ist hier der Kern, nicht Beiwerk. Ohne die
   Zeile hat die Buehne eine selbstwachsende Reihe: sie wird so hoch wie das
   Bild, und max-height:100% am Bild rechnet dann gegen genau diese Hoehe,
   begrenzt also nichts. Bei 1440 x 900 war die Buehne 796 px hoch und das
   Hochkantbild wurde 1728 px hoch gezeigt -- 916 px unter den Dialogrand.
   Aufgefallen ist es nur bei Hochformat, weil quer liegende Bilder schon an
   max-width:100% haengenbleiben, bevor die Hoehe stoert. minmax(0,1fr) macht
   die Reihe so hoch wie die Buehne und nicht hoeher; erst dadurch hat
   max-height:100% etwas Festes, worauf es sich beziehen kann.        */
.lb-buehne{flex:1 1 auto;display:grid;grid-template-rows:minmax(0,1fr);
  place-items:center;padding:clamp(48px,7vw,88px) clamp(16px,5vw,72px) 8px;
  min-height:0;}
.lb-buehne img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:2px;}
.lb-fuss{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px clamp(16px,5vw,72px) clamp(24px,4vw,40px);}
.lb-text{font-size:14px;color:var(--muted-dark);max-width:60ch;}
.lb-zaehler{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dark);font-variant-numeric:tabular-nums;flex:none;}
.lb-nav{display:flex;gap:8px;flex:none;}
.lb-knopf{display:grid;place-items:center;width:48px;height:48px;border:0;
  border-radius:2px;background:var(--ink-raised);color:var(--surface);cursor:pointer;
  transition:background 200ms var(--ease-out),color 200ms var(--ease-out);}
.lb-knopf:hover{background:var(--primary);color:var(--ink);}
.lb-knopf:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.lb-knopf svg{width:20px;height:20px;}
.lb-zurueck svg{transform:rotate(180deg);}
.lb-x{position:absolute;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);
  width:48px;height:48px;border:0;background:transparent;color:var(--surface);
  font-size:30px;line-height:1;cursor:pointer;}
.lb-x:hover{color:var(--primary);}
.lb-x:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* ---------- Ueber uns: Fakten neben dem Foto ------------------- */

.wer-fakten{margin:30px 0 0;border-top:1px solid var(--ink-line);}
.wf-zeile{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:20px;padding:14px 0;border-bottom:1px solid var(--ink-line);}
.wf-zeile dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-dark);padding-top:2px;}
.wf-zeile dd{margin:0;font-size:15px;}
@media (max-width:520px){.wf-zeile{grid-template-columns:1fr;gap:4px;}}

/* ---------- Karriere: Was wir bieten --------------------------- */

.bt{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(32px,5vw,72px);align-items:start;}
.bt-bild{border-radius:2px;overflow:hidden;aspect-ratio:4/5;}
.bt-bild img{width:100%;height:100%;object-fit:cover;}
.bt-zeile{padding:22px 0;border-top:1px solid var(--ink-line);}
.bt-zeile:first-of-type{margin-top:30px;}
.bt-zeile:last-child{border-bottom:1px solid var(--ink-line);}
.bt-zeile p{margin-top:8px;font-size:15px;}
@media (max-width:860px){
  .bt{grid-template-columns:1fr;}
  .bt-bild{aspect-ratio:16/10;}
}

/* ---------- Stellenseite: Chips und zwei Spalten --------------- */

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:2px;
  background:var(--surface);border:1px solid var(--line);font-size:13px;
  color:var(--ink);}

/* Die rechte Spalte trug zuerst nur .65fr. In der Karte lagen dadurch
   Beschriftung und Wert uebereinander und die Mailadresse brach mitten im
   Wort um. Breitere Spalte, und die Kontaktangaben stehen untereinander
   statt nebeneinander. */
.st-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:clamp(32px,4vw,56px);align-items:start;}
@media (max-width:940px){.st-grid{grid-template-columns:1fr;}}
.st-block + .st-block{margin-top:clamp(34px,4vw,52px);}
.st-block .hl{margin-top:16px;}
.st-block .lead{max-width:56ch;}

/* ---------- Bewerbungskarte ------------------------------------
   Das eine orange Element der Karriereseiten. Schrift in ink, nicht
   in weiss: weiss auf Orange steht bei 3,5:1 und faellt durch
   (DESIGN-SYSTEM.md Abschnitt 2).                                  */

.bw{background:var(--primary);color:var(--ink);border-radius:2px;
  padding:clamp(26px,3.2vw,38px);}
.bw-klebend{position:sticky;top:calc(var(--navh, 77px) + 24px);}
@media (max-width:940px){.bw-klebend{position:static;}}
.bw .kicker{color:rgba(17,17,16,.88);}
.bw .kicker::before{background:var(--ink);}
.bw-h{margin-top:14px;font-size:clamp(23px,2.4vw,28px);line-height:1.15;
  letter-spacing:-.018em;}
.bw p{margin-top:14px;font-size:15px;line-height:1.65;color:rgba(17,17,16,.88);}
.bw-stelle{font-size:14px;}
.bw-stelle b{font-weight:500;color:var(--ink);}
.bw-kontakt{margin:24px 0 0;border-top:1px solid rgba(17,17,16,.24);}
.bw-kontakt > div{padding:12px 0;border-bottom:1px solid rgba(17,17,16,.24);}
.bw-kontakt dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(17,17,16,.88);}
.bw-kontakt dd{margin:4px 0 0;font-size:16px;overflow-wrap:anywhere;}
.bw-kontakt a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(17,17,16,.4);}
.bw-kontakt a:hover{text-decoration-color:var(--ink);}
.bw .btn-row{margin-top:24px;}
.bw .btn{flex:1 1 auto;}

/* ---------- Stellenzeilen auf dunklem Grund -------------------- */

.jz-ink{border-top-color:var(--ink-line);}
.jz-ink .jz{border-bottom-color:var(--ink-line);}
.jz-ink .jz-fakt b{color:var(--muted-dark);}
.jz-ink .jz-pfeil{color:var(--muted-dark);}

/* ================================================================
   Dritter Durchgang, nach Rueckmeldung vom 02.09.2026.
   ================================================================ */

/* ---------- Verweise in Haarlinien-Listen --------------------------
   Vorher fielen die Links auf den Projektseiten in Browser-Blau. */

.hl a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--primary);}
.hl a:hover{color:var(--primary);}

/* ---------- Weg damit: Pfeilkasten und Lupenquadrat ----------------
   Beides tauchte beim Ueberfahren als oranges Rechteck auf dem Foto
   auf. Der Zoom des Bildes und die Abdunklung reichen als Rueckmeldung. */

.pk-go{display:none;}
.ga-lupe::after{display:none;}

/* ---------- Bewerbungskarte: dunkel statt orange -------------------
   Orange als Flaeche war zu laut. Die Karte ist jetzt ink, die Knoepfe
   tragen das Orange.                                                 */

.bw{background:var(--ink);color:var(--surface);letter-spacing:.004em;}
.bw .kicker{color:var(--muted-dark);}
.bw .kicker::before{background:var(--primary);}
.bw p{color:var(--muted-dark);}
.bw-stelle b{color:var(--surface);}
.bw-kontakt{border-top-color:var(--ink-line);}
.bw-kontakt > div{border-bottom-color:var(--ink-line);}
.bw-kontakt dt{color:var(--muted-dark);}
.bw-kontakt a{color:var(--surface);text-decoration-color:rgba(255,255,255,.35);}
.bw-kontakt a:hover{text-decoration-color:var(--primary);}

/* ---------- Karriere: Abschluss mit Kontaktraster ----------------- */

.bwa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,80px);align-items:start;}
.bwa-kontakt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,3vw,40px);margin:0;border-top:1px solid var(--ink-line);}
.bwa-kontakt > div{padding:18px 0;border-bottom:1px solid var(--ink-line);}
.bwa-kontakt dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-dark);}
.bwa-kontakt dd{margin:6px 0 0;font-size:17px;overflow-wrap:anywhere;}
.bwa-kontakt a{color:var(--surface);text-decoration:none;}
.bwa-kontakt a:hover{color:var(--primary);}
@media (max-width:900px){.bwa{grid-template-columns:1fr;}}
@media (max-width:520px){.bwa-kontakt{grid-template-columns:1fr;}}

/* ---------- Ueber uns: Belege als typografisches Raster ----------- */

.bel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,80px);align-items:start;}
.bel-kopf{position:sticky;top:calc(var(--navh, 77px) + 32px);}
.bel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--ink-line);border:1px solid var(--ink-line);}
.bel-zelle{background:var(--ink);display:flex;flex-direction:column;gap:14px;
  min-height:200px;padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,32px) clamp(30px,3.4vw,44px);}
.bel-ico{display:block;width:44px;height:44px;color:var(--primary);margin-bottom:4px;}
.bel-ico svg{width:100%;height:100%;display:block;}
.bel-wort{font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.018em;}
.bel-zelle p{font-size:14px;line-height:1.55;max-width:30ch;margin-top:auto;}
@media (max-width:900px){
  .bel{grid-template-columns:1fr;}
  .bel-kopf{position:static;}
}
@media (max-width:560px){.bel-grid{grid-template-columns:1fr;}}

/* ---------- Leistungsuebersicht: klebende Liste, gestapelte Zeilen ----
   Struktur nach BYQ Supply, evermind-value-and-features-6. Links ein
   Satz und die Liste der Gewerke, die beim Scrollen stehen bleibt; rechts
   die Leistungen untereinander, jede als Bild links und Text rechts.
   Oberflaeche: unsere Tokens, Radius 2 px, Raleway.                   */

.ls{display:grid;grid-template-columns:260px minmax(0,1fr);
  gap:clamp(32px,4vw,64px);align-items:start;}
.ls-klebt{position:sticky;top:calc(var(--navh, 77px) + 32px);
  display:flex;flex-direction:column;gap:28px;}
.ls-satz{font-size:clamp(20px,1.7vw,23px);line-height:1.35;letter-spacing:-.012em;
  max-width:24ch;}
.ls-nav{display:flex;flex-direction:column;border-top:1px solid var(--ink-line);}
.ls-tab{position:relative;display:block;padding:13px 0 13px 18px;
  border-bottom:1px solid var(--ink-line);font-size:15px;line-height:1.35;
  color:var(--muted-dark);text-decoration:none;
  transition:color 200ms var(--ease-out);}
.ls-tab::before{content:"";position:absolute;left:0;top:calc(50% - 3px);width:6px;
  height:6px;background:var(--primary);opacity:0;
  transition:opacity 200ms var(--ease-out);}
.ls-tab:hover{color:var(--surface);}
.ls-tab[aria-current="true"]{color:var(--surface);}
.ls-tab[aria-current="true"]::before{opacity:1;}
.ls-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

.ls-inhalt{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px);}
.ls-item{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  gap:clamp(20px,2.6vw,36px);align-items:center;
  scroll-margin-top:calc(var(--navh, 77px) + 24px);}
.ls-bild{position:relative;border-radius:2px;overflow:hidden;aspect-ratio:4/3;
  background:var(--ink-raised);}
/* Das Bild ist 12 Prozent hoeher als sein Rahmen und um 6 Prozent nach oben
   versetzt, damit die Parallaxe (plus/minus 5 Prozent) nie den Rand freilegt. */
.ls-bild img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;
  will-change:transform;}
.ls-text{padding:8px 0;}
.ls-text .h3{max-width:22ch;}
.ls-text p{font-size:15px;max-width:38ch;}
.ls-cta{margin-top:24px;}

@media (max-width:991px){
  .ls{grid-template-columns:1fr;gap:32px;}
  .ls-klebt{position:static;}
  .ls-satz{max-width:40ch;}
  /* Die Liste bleibt eine Liste. Als Zeile mit Umbruch stand hier eine
     Wortwolke mit zufaelligen Luecken, weil die sechs Namen verschieden
     lang sind. Untereinander mit Haarlinien liest sie sich als das, was
     sie ist: ein Sprungmenue fuer eine 9000 px lange Seite. */
}
@media (max-width:767px){
  .ls-item{grid-template-columns:1fr;gap:18px;}
  .ls-bild{aspect-ratio:16/10;}
  .ls-text p{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .ls-bild img{top:0;height:100%;transform:none !important;}
  .ls-tab,.ls-tab::before{transition:none;}
}

/* ================================================================
   Vierter Durchgang, 02.09.2026.
   ================================================================ */

/* ---------- Kleben repariert ------------------------------------
   .band traegt overflow:hidden, damit die Bauzeichnungen an der Kante
   beschnitten werden. Ein Vorfahre mit overflow:hidden macht aber jedes
   position:sticky darin wirkungslos: der Block klebt an einer Box, die
   nie scrollt. Die Startseite umgeht das mit einem Inline-Stil auf dem
   Leistungsabschnitt. Sections mit klebenden Bloecken bekommen jetzt
   diese Klasse; die Zeichnungen stehen nur in Sections ohne sie.       */

.band-offen{overflow:visible;}

/* In der Leistungsuebersicht klebt die Spalte selbst, nicht ihr Inhalt:
   der Rahmen des klebenden Elements muss die volle Zeilenhoehe haben,
   sonst hat es keinen Weg, auf dem es kleben koennte.                 */
.ls-seite{position:sticky;top:calc(var(--navh, 77px) + 32px);}
.ls-klebt{position:static;}
@media (max-width:991px){.ls-seite{position:static;}}

/* ---------- Belege: lange Woerter -------------------------------
   "Betriebshaftpflicht" lief bei 32 px ueber den Zellenrand hinaus.  */

/* Getrennt wird am weichen Trennstrich im Text (Betriebs&shy;haftpflicht).
   overflow-wrap:anywhere hatte stattdessen "Betriebshaftpflic-ht" erzeugt. */
.bel-wort{font-size:clamp(22px,2.2vw,30px);hyphens:manual;}

/* Die Belege-Ueberschrift klebt nicht mehr: das Raster daneben ist kaum hoeher
   als sie selbst, der Weg zum Kleben waere rund 30 px. Gemessen, nicht
   geschaetzt. Kleben nur dort, wo rechts wirklich etwas zu scrollen ist. */
.bel-kopf{position:static;}

/* ---------- Anfrageformular -----------------------------------------
   Im Dialog und auf /kontakt, beide auf dunklem Grund, deshalb reichen
   die Feldstile aus _base_css. Der Honigtopf liegt ausserhalb des
   Bildschirms statt auf display:none, damit Skripte ihn fuer echt halten. */

.af-zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media (max-width:560px){.af-zwei{grid-template-columns:1fr;}}
.af-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.af-hinweis{margin:2px 0 20px;line-height:1.55;color:var(--muted-dark);max-width:52ch;}
.af-hinweis a{color:var(--surface);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--primary);}
.af-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;}
.af button.btn{cursor:pointer;}
.af button.btn:disabled{opacity:.6;cursor:progress;}
.af-status{font-size:14px;line-height:1.5;color:var(--muted-dark);max-width:40ch;}
.af-status.af-fehler{color:var(--primary);}
.kf-form{margin-top:28px;}
.kf .h3{margin-top:0;}
@media (max-width:900px){.kf .h3{margin-top:8px;}}

/* Der Routenlink auf der Kontaktseite steht mitten im Satz und muss als
   Verweis erkennbar sein. Die uebrigen Werte im Raster sind selbst der Link. */
.bwa-kontakt a.kt-route{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--primary);}
/* Zweite Zeile unter der Nummer: der WhatsApp-Weg, auf der Kontaktseite und im
   Dialog. Klein und unterstrichen, damit er als Verweis erkennbar bleibt. */
.bwa-kontakt a.kt-neben,.md-side a.kt-neben{display:block;width:fit-content;
  margin-top:6px;font-size:14px;color:var(--muted-dark);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--primary);}
.bwa-kontakt a.kt-neben:hover,.md-side a.kt-neben:hover{color:var(--surface);}

/* ---------- Fahrzeittafel mit Luftbild auf den Unterseiten -------- */

.gb{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(32px,5vw,72px);align-items:start;}
.gb-bild{border-radius:2px;overflow:hidden;aspect-ratio:4/5;background:var(--line);}
.gb-bild img{width:100%;height:100%;object-fit:cover;}
@media (max-width:900px){
  .gb{grid-template-columns:1fr;}
  .gb-bild{aspect-ratio:16/10;}
}
/* ================================================================
   Fuenfter Durchgang, 02.09.2026, zweite Sitzung.
   ================================================================ */

/* ---------- Seitenkopf mit grossem Bild darunter ------------------
   Ueber uns: Kicker, Titel und Anlauftext wie ueberall, darunter ein
   Bild ueber die volle Containerbreite. Das Motiv soll eine
   Drohnenaufnahme sein; bis die von Max da ist, steht ein erzeugter
   Platzhalter drin (IMAGE_MANIFEST.md).                              */

.sk-pano{margin-top:clamp(36px,5vw,64px);border-radius:2px;overflow:hidden;
  aspect-ratio:21/9;background:var(--line);}
.sk-pano img{width:100%;height:100%;object-fit:cover;}
@media (max-width:700px){.sk-pano{aspect-ratio:4/3;margin-top:32px;}}

/* ---------- Haken zur Datenschutzerklaerung ----------------------
   Bewusst ein natives Kaestchen: Fokus, Tastatur und Vorlesereihenfolge
   kommen damit vom Browser. color-scheme sagt ihm, dass es auf dunklem
   Grund steht, accent-color faerbt den gesetzten Haken orange.
   Formuliert als Kenntnisnahme, nicht als Einwilligung: die Verarbeitung
   stuetzt sich auf Art. 6 Abs. 1 lit. b DSGVO, und eine Einwilligung, die
   man nicht verweigern kann, waere nach Art. 7 Abs. 4 keine.            */

.af{color-scheme:dark;}
.af-ok{display:flex;align-items:flex-start;gap:12px;margin:4px 0 18px;}
.af-ok input{flex:none;width:17px;height:17px;margin:2px 0 0;
  accent-color:var(--primary);cursor:pointer;}
.af-ok input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.af-ok label{font-size:14px;line-height:1.55;color:var(--muted-dark);cursor:pointer;}
.af-ok a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--primary);}
.af-ok a:hover{color:var(--surface);}

/* ---------- Die Marke des Studios in der Fusszeile ----------------
   Dieselbe Bewegung wie unten auf immotify.de: der Tropfenkranz dreht
   sich, durch die Buchstaben laeuft eine Welle von links nach rechts.
   Dort ist es eine Lottie-Datei vom Webflow-CDN. Hier waere das ein
   Fremdrequest und damit dieselbe IP-Uebertragung, wegen der die Schrift
   lokal liegt. Also die Bewegung in CSS und die Marke als Inline-SVG.

   Die 60 Grad sind kein Zufall: der Kranz hat exakte Sechszaehligkeit,
   der Endzustand faellt deckungsgleich auf den Anfang.                 */

.ft-credit{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.rf-link{display:inline-flex;align-items:center;color:inherit;text-decoration:none;
  border-radius:2px;transition:color 320ms var(--ease-out);}
.rf-link:hover{color:var(--surface);}
.rf-link:focus-visible{outline:2px solid var(--primary);outline-offset:4px;}
.rf{display:block;width:88px;height:auto;}
.rf-kranz{transform-origin:50px 50px;
  transition:transform 1100ms cubic-bezier(.625,.05,0,1);}
.rf-link:is(:hover,:focus-visible) .rf-kranz{transform:rotate(60deg);}
/* Der Hub in lokalen Einheiten der Wortmarke (viewBox 1477 auf 512), nicht
   in Prozent: bei fill-box waeren Prozent die Hoehe des jeweiligen Zeichens,
   und dann huebe sich das f weiter als der Punkt. 70 Einheiten sind nach
   beiden Skalierungen rund 2,8 px auf dem Schirm, bei einer 21 px hohen
   Marke also spuerbar und nicht albern. */
.rf-b,.rf-p{transition:transform 460ms cubic-bezier(.625,.05,0,1);}
.rf-link:is(:hover,:focus-visible) :is(.rf-b,.rf-p){transform:translateY(-70px);}
/* Die Welle: jeder Buchstabe faengt spaeter an als der davor. Nur beim
   Ankommen, nicht beim Zurueckgehen: sonst haengt der Punkt lange nach. */
.rf-link:is(:hover,:focus-visible) :is(.rf-b,.rf-p):nth-of-type(2){transition-delay:55ms;}
.rf-link:is(:hover,:focus-visible) :is(.rf-b,.rf-p):nth-of-type(3){transition-delay:110ms;}
.rf-link:is(:hover,:focus-visible) :is(.rf-b,.rf-p):nth-of-type(4){transition-delay:165ms;}
.rf-link:is(:hover,:focus-visible) :is(.rf-b,.rf-p):nth-of-type(5){transition-delay:220ms;}
.rf-link:is(:hover,:focus-visible) :is(.rf-b,.rf-p):nth-of-type(6){transition-delay:275ms;}
@media (prefers-reduced-motion:reduce){
  .rf-kranz,.rf-b,.rf-p{transition:none;}
  .rf-link:is(:hover,:focus-visible) :is(.rf-kranz,.rf-b,.rf-p){transform:none;}
}

/* ---------- Lange Woerter in Ueberschriften ----------------------
   "Datenschutzerklaerung" lief bei 375 px rechts aus dem Bild. Die
   Section hat overflow:hidden, also fiel das keiner Messung auf, nur
   dem Auge. Das Wort traegt jetzt ein weiches Trennzeichen; das hier ist
   das Netz darunter: was sonst nicht bricht, darf brechen, und unter
   400 px darf der Browser nach deutschen Regeln trennen.               */

.display,.h2,.h3{overflow-wrap:break-word;}
@media (max-width:400px){.display{hyphens:auto;}}

/* ---------- Bildbetrachter auf dem Handy -------------------------
   Die Fusszeile des Betrachters ist eine Zeile: Text, Zaehler, zwei
   Knoepfe. Auf 375 px blieb dem Text eine Spalte von 240 px, die
   Bildunterschrift stand in fuenf Zeilen neben dem Zaehler. Jetzt
   bricht die Zeile um: der Text bekommt die volle Breite, Zaehler und
   Knoepfe stehen darunter.                                           */

@media (max-width:520px){
  .lb-fuss{flex-wrap:wrap;row-gap:14px;}
  .lb-text{flex:1 1 100%;max-width:none;}
}

/* ---------- Drei Kleinigkeiten aus dem Durchgang der Breiten -------
   1. Kontakt zwischen 901 und 1200 px: neben dem Formular hat die
      Spalte "Oder lieber direkt?" nur rund 430 px, die zweispaltige
      Tafel darin 200 px je Spalte. info@bockmannbau.com brach als
      "bockmannbau.co" und "m". Eine Spalte, bis die Tafel Platz hat.
   2. Ueber uns unter 900 px: das Bild von Max stand ueber die volle
      Breite und wurde bei 4:5 auf dem Tablet 930 px hoch. Ein Portraet
      braucht das nicht.
   3. Karriere zwischen 600 und 900 px: die drei Angaben je Stelle
      standen zu zweit in einer Zeile und die dritte allein darunter.
      Platz fuer drei ist da.                                          */

@media (min-width:901px) and (max-width:1200px){
  .kf .bwa-kontakt{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .wer-bild{max-width:480px;}
}
@media (min-width:600px) and (max-width:900px){
  .jz{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ---------- Barrierefreiheit, 03.09.2026 ---------------------------
   Sprunglink: unsichtbar, bis er per Tastatur den Fokus bekommt, dann
   oben links ueber allem. main:focus ohne Rahmen: der Fokus landet dort
   nur nach dem Sprung, und ein Rahmen um die ganze Seite waere Unsinn. */

.skip{position:absolute;left:16px;top:-120px;z-index:1000;padding:12px 16px;
  background:var(--primary);color:var(--ink);border-radius:2px;font-size:13px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:top 160ms var(--ease-out);}
.skip:focus{top:16px;outline:2px solid var(--ink);outline-offset:2px;}
main:focus{outline:none;}

/* Orange ist auf hellem Grund keine Textfarbe (DESIGN-SYSTEM.md, 2): 3,1:1.
   Die Schrittnummern des Ablaufs stehen auf Kontakt und Karriere aber auf
   paper. Dort das dunkle Orange, 5,3:1, immer noch eindeutig orange. */
.paper .ab-num{color:var(--primary-deep);}

/* ---------- Zielgroessen auf dem Handy -----------------------------
   WCAG 2.5.8 verlangt 24 mal 24 px fuer alles, was man antippt, ausser
   Links im Fliesstext. Die Fusszeilenlinks standen bei 18 px Hoehe, die
   Brotkrumen bei 21, die Nummern in den Kontakttafeln bei 19, der Haken
   bei 17. Innenabstand oben und unten, mit Aussenabstand wieder
   zurueckgenommen: die Flaeche waechst, das Bild bleibt.               */

.ft-col li a,.ft-legal nav a,.krume a,.bw-kontakt dd a,.bwa-kontakt dd a,.hl a{
  display:inline-block;padding-top:3px;padding-bottom:3px;margin-top:-3px;margin-bottom:-3px;}
.rf-link{padding-top:3px;padding-bottom:3px;}
.af-ok input{width:20px;height:20px;margin-top:1px;}

/* Das Schliessen-Kreuz ist fuer den dunklen Dialog gebaut: Grau auf Schwarz,
   8,9:1. Im mobilen Menue steht dasselbe Kreuz auf paper und kam auf 1,9:1.
   Dort das dunkle Grau, 6,3:1, und die helle Linie. */
.mnav .md-x{color:var(--muted);border-color:var(--line);}
.mnav .md-x:hover{color:var(--ink);border-color:var(--ink);}
.bwa-kontakt a.kt-neben,.md-side a.kt-neben{padding-top:3px;padding-bottom:3px;}

/* Der Punkt der aktuellen Seite in der Leiste traegt den orangen Strich
   schon in Ruhe, und seine Farbregel schlaegt die Fokusregel. Beim Tab
   dorthin aenderte sich also nichts. Ein Ring, wie ihn die Knoepfe haben. */
.nav-links a[aria-current="page"]:focus-visible{outline:2px solid var(--primary);
  outline-offset:5px;border-radius:2px;}

/* ---------- Schrift am Handy, Max' Punkt 7 (25.09.2026) ------------
   "Texte allgemein etwas luett." Gemessen bei 375 px standen 44 % aller
   Zeichen unter 16 px: Fliesstext 16, Kartentexte 14 und 15. Hier jeder
   Lesetext einen Schritt hoeher. Grossbuchstaben-Etiketten, Knoepfe,
   Zahlen und das Kleingedruckte der Fusszeile bleiben, wie sie sind.
   Steht am Ende, damit es die Grundregeln gleicher Spezifitaet schlaegt. */
@media (max-width:640px){
  body{font-size:17px;}
  .wr-liste li,.pj-zeile dd,.pj-pos-text,.sf-row span,.bw-kontakt dd{font-size:17px;}
  .ft-lines,.ft-col a,.jb p,.ab-schritt p,.wf-zeile dd,.bt-zeile p,.bw p,
  .ls-text p,.spec dd,.rt-warn p,.mnav-unter a,.ls-tab{font-size:16px;}
  .small,.fx-cell p,.tile-list div,.why-cell p,.tabs-foot p,.sf-fuss,.pk-leist,
  .bel-zelle p,.lb-text,.bw-stelle,.mnav-fuss p,.af-ok label{font-size:15px;}
  .fx-cell h3,.why-cell h3{font-size:21px;}
}