/* ============================================================
   Design system — Schreiner-Template (invariant)
   Palette (3 colors + tints): ink, paper, oak. Clay only for
   form errors. No pure #000/#FFF anywhere.

   The BASE colours + fonts (--ink, --paper, --oak, --oak-deep,
   --clay, --font-display, --font-body, --wood-bg, --sand-bg) are
   injected per client from the YAML `theme` block — see the
   <style> block in templates/partials/head.njk. Everything below
   is the same for every Schreiner: the alpha tints are derived
   from the base tokens via color-mix(), so re-branding only ever
   touches the injected block.

   ROLLEN-TOKENS (optional im theme-Block, Default = bisheriges Verhalten):
     --oak            Fläche (Buttons, FAB) + Dekor (Linien, Rahmen)
     --on-oak         Schrift auf --oak-Flächen            (Default: ink)
     --oak-on-light   Akzent-Text/-Zeichen auf paper       (Default: oak)
     --oak-on-dark    Akzent-Text auf Hero/Bändern/Kontakt (Default: oak)
     --focus          Fokus-Ringe, Input-Fokus             (Default: oak)
     --oak-deep       kräftiger Akzent auf paper + Hover-Flächen
   ============================================================ */
:root {
  /* tints derived from the injected base colours (value-identical
     to the original hard-coded rgba() values) */
  --ink-70:     color-mix(in srgb, var(--ink) 72%, transparent);
  --ink-55:     color-mix(in srgb, var(--ink) 55%, transparent);
  --line:       color-mix(in srgb, var(--ink) 16%, transparent);
  --ghost:      color-mix(in srgb, var(--ink) 7%, transparent);

  --paper-70:   color-mix(in srgb, var(--paper) 72%, transparent);
  --paper-line: color-mix(in srgb, var(--paper) 22%, transparent);

  /* fluid type — tuned so the H1 sits at 2–3 lines on 380 px */
  --fs-hero:    clamp(2.75rem, 10.5vw, 6.75rem);
  --fs-h2:      clamp(2.125rem, 4.6vw, 3.75rem);
  --fs-h3:      clamp(1.375rem, 2.4vw, 2rem);
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.3125rem);
  --fs-body:    clamp(1.0625rem, .95rem + .3vw, 1.125rem);
  --fs-small:   .9375rem;
  --fs-eyebrow: .8125rem;

  --sp-section: clamp(4.5rem, 10vw, 9.5rem);
  --pad-x:      clamp(1.25rem, 4.5vw, 4.5rem);
  --gutter:     clamp(1rem, 2.5vw, 2.5rem);
  --container:  1560px;
  --header-h:   60px;
  --notice-h:   46px;   /* Entwurfs-Balken; mobil höher, weil der Text umbricht */

  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 768px) { :root { --header-h: 76px; --notice-h: 30px; } }

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--notice-h) + var(--header-h) + 1.25rem);
}
html, body { overflow-x: clip; }   /* safety net — causes are fixed individually */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; }

/* paper grain — kills the sterile flatness, sits over every surface */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999;
  pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
::selection { background: var(--oak-on-light); color: var(--paper); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p  { max-width: 62ch; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-weight: 400; }

a, button, input, select, textarea, label { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; font-size: var(--fs-small);
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- shared typography ---------- */
.eyebrow {
  display: block;
  font: 600 var(--fs-eyebrow)/1.4 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 1.25rem;
}
.eyebrow b { font-weight: 600; color: var(--oak-on-light); }

h2 {
  font: 400 var(--fs-h2)/1.08 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 16ch;
}
/* one italic oak word per display heading — color play through type */
h1 em, h2 em { font-style: italic; color: var(--oak-deep); }
.contact h2 em { color: var(--oak-on-dark); }

/* line-mask reveals: lines rise out of overflow-hidden wrappers */
.mask { display: block; overflow: hidden; padding-block: .08em; margin-block: -.08em; }
.mask > span {
  display: block;
  transform: translateY(118%);
  transition: transform .95s var(--ease);
  transition-delay: calc(var(--l, 0) * .11s + .05s);
}
.in-view .mask > span { transform: none; }

/* image reveals: soft fade + gentle rise — same calm language as the text reveals.
   (The earlier clip-wipe + 1.14 zoom read as heavy/laggy now that each image
   triggers on its own as it scrolls in.) Parallax images keep their JS-driven
   transform on the <img>; this animates the wrapper, so the two never fight. */
.reveal-img { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal-img.is-in { opacity: 1; transform: none; }
/* parallax images are driven per-frame by JS — no transition, JS owns transform */
.reveal-img img[data-parallax] { transition: none; }

/* unified warm grading over photography */
.hero-media img, .hero-media video, .work-media img, .about-figure img, .visual-stack img, .wood-card img, .wood-panel img {
  filter: sepia(.08) saturate(.9) contrast(.97);
}
[data-parallax] { will-change: transform; }
.section { padding-block: var(--sp-section); }
.section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head .intro {
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 46ch;
}
@media (min-width: 1024px) {
  .section-head--split {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    align-items: end;
  }
  .section-head--split > div:first-child { grid-column: 1 / 7; }
  .section-head--split .intro { grid-column: 8 / 13; margin-top: 0; padding-bottom: .5rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .875rem 1.75rem;
  font: 500 1rem/1.2 var(--font-body); letter-spacing: .01em;
  border-radius: 2px; border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-primary { background: var(--oak); color: var(--on-oak); }
.btn-primary:hover { background: var(--oak-deep); color: var(--paper); }
.btn-primary::after {
  content: "→"; display: inline-block; margin-left: .625em;
  transition: transform .35s var(--ease);
}
.btn-primary:hover::after { transform: translateX(5px); }
.btn-ghost { border-color: rgba(33, 28, 23, .35); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: rgba(33, 28, 23, .05); }

/* ============================================================
   Header
   ============================================================ */
/* ---------- Entwurfs-Hinweis (fix, über der Navigation) ---------- */
.demo-notice {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  min-height: var(--notice-h);
  display: flex; align-items: center; justify-content: center;
  padding: .35rem .9rem;
  background: var(--ink); color: rgba(245, 241, 232, .9);
  font: 500 .6875rem/1.35 var(--font-body);
  letter-spacing: .02em; text-align: center; text-wrap: balance;
}

.site-header {
  position: fixed; top: var(--notice-h); left: 0; right: 0; z-index: 100;
  /* tall & airy at the top; condenses on scroll (BC-style) */
  padding-top: calc(env(safe-area-inset-top) + clamp(.65rem, 1.5vh, 1rem));
  padding-bottom: clamp(.65rem, 1.5vh, 1rem);
  background: transparent;                        /* fixes Element transparent (iOS: sonst deckt der BG die Notch nicht) */
  transition: padding .5s var(--ease);
}
/* Glas-Schicht als absolutes Kind: deckt die volle Header-Box inkl. Safe-Area/
   Notch-Streifen bis nach ganz oben. Das fixe Element selbst bleibt transparent
   (iOS/Safari rendert dessen eigenen BG nicht bis in die Safe-Area). */
.site-header::before {
  content: ""; position: absolute; z-index: 0;
  /* aktiv bis zum physischen oberen Rand ziehen: falls die fixe Header-Box unter
     der Notch sitzt, deckt der negative top die Safe-Area; sitzt sie schon oben,
     ist der Überstand einfach off-screen (kein Schaden). */
  top: -100px; left: 0; right: 0; bottom: 0;   /* fester Überstand nach oben (deckt Notch/Safe-Area geräteunabhängig) */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-scrolled::before {
  background: rgba(245, 241, 232, .72);           /* translucent glass, not solid */
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(33, 28, 23, .08);
}
.site-header.is-scrolled {
  padding-top: calc(env(safe-area-inset-top) + .3rem);
  padding-bottom: .3rem;
}
.header-inner {
  position: relative; z-index: 1;                 /* über der Glas-Schicht */
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.5rem;
  transition: height .5s var(--ease);
}
.is-scrolled .header-inner { height: calc(var(--header-h) - 10px); }
.brand svg { transition: transform .5s var(--ease); }
.is-scrolled .brand svg { transform: scale(.9); }
.brand { display: inline-flex; align-items: center; gap: .75rem; margin-right: auto; }
.brand svg { flex: none; }
.brand-name {
  font: 500 1.25rem/1 var(--font-display);
  letter-spacing: -.01em;
}
.brand-sub {
  display: block;
  font: 600 .625rem/1.4 var(--font-body);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-55);
  margin-top: .2rem;
}
.desktop-nav { display: none; }
.header-cta { display: none; }
@media (min-width: 1024px) {
  .desktop-nav { display: flex; gap: 2rem; }
  /* 1024–1199: same layout, tighter tracking so nothing wraps */
  @media (max-width: 1199px) {
    .desktop-nav { gap: 1.25rem; }
    .desktop-nav a { font-size: .875rem; }
    .header-inner { gap: 1rem; }
    .header-cta { padding-inline: 1rem; font-size: .875rem; }
  }
  .desktop-nav a {
    font: 500 .9375rem/1 var(--font-body);
    color: var(--ink-70);
    padding: .875rem 0;
    border-bottom: 1px solid transparent;
    transition: color .25s var(--ease), border-color .25s var(--ease);
  }
  .desktop-nav a:hover { color: var(--ink); border-bottom-color: var(--oak); }
  .header-cta { display: inline-flex; min-height: 44px; padding: .625rem 1.375rem; }
  .nav-toggle { display: none !important; }
}
/* wider nav spacing at the top, tightening as the bar condenses (room only ≥1200) */
@media (min-width: 1200px) {
  .desktop-nav { gap: 2.5rem; transition: gap .5s var(--ease); }
  .is-scrolled .desktop-nav { gap: 2rem; }
}

/* hamburger */
.nav-toggle {
  width: 44px; height: 44px; margin-right: calc((44px - 20px) / -2);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  width: 20px; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* mobile overlay menu */
.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  padding: calc(var(--notice-h) + var(--header-h) + env(safe-area-inset-top) + 2rem) var(--pad-x) calc(2rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.menu-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .35s var(--ease);
}
.menu-nav a {
  display: block;
  font: 400 clamp(2rem, 8.5vw, 2.75rem)/1.25 var(--font-display);
  letter-spacing: -.01em;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.menu-overlay.is-open .menu-nav a {
  opacity: 1; transform: none;
  transition-delay: calc(.06s + var(--d) * .055s);
}
.menu-foot {
  margin-top: 2.5rem;
  font-size: var(--fs-small); color: var(--ink-70);
  display: grid; gap: .25rem;
}
.menu-foot a { display: inline-block; padding-block: .375rem; font-weight: 500; color: var(--ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; }
.hero-grid {
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(2.5rem, 8vw, 4rem));
}
.hero-copy { max-width: 40rem; }
.hero h1 {
  font: 340 var(--fs-hero)/1 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.hero-lede {
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--ink-70);
  max-width: 44ch;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-actions .btn { flex: 1 1 100%; }
@media (min-width: 480px) { .hero-actions .btn { flex: 0 0 auto; } }
.hero-meta {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink-55);
  letter-spacing: .02em;
}
.hero { min-height: 100vh; min-height: 100svh; }

/* poster + video fill the hero as a full-bleed background, stacked as layers:
   the poster <img> paints instantly (preloaded LCP), the video fades in over it. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-poster, .hero-video { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* video sits above the poster and fades in only once it can actually play —
   no hard poster→video swap; if the video never loads, the sharp poster stays.
   Short fade on purpose: the video now loads eagerly, so it typically arrives
   within a few hundred ms — a long crossfade would just add back the delay
   we removed from the loading side. */
.hero-video { opacity: 0; transition: opacity .3s var(--ease); }
.hero-video.is-playing { opacity: 1; }
/* reduced motion: never show the moving clip — the sharp poster carries the hero */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
/* phones crop the landscape clip hard — bias left so the wood curl, not the plane, holds the frame */
@media (max-width: 767px) {
  .hero-media video, .hero-media img { object-position: 15% center; }
}
/* desktop: the 16:9 clip fills the hero height exactly (object-position Y is inert),
   so nudge the whole media box up a touch to lift the framing */
@media (min-width: 768px) {
  .hero-media { top: -6%; bottom: auto; height: 106%; }
}

/* atmosphere over the footage: vignette + procedural sawdust + legibility scrim.
   Sawdust ported in spirit from moebelplusraum-scrollfilm — pure canvas, no asset. */
.hero-media::after {                       /* vignette breathing over the footage */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 96% 82% at 50% 44%, transparent 50%, rgba(20, 14, 8, .55) 100%);
}
.hero-dust {                               /* sawdust canvas — JS-driven, screen-blended glow */
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen;
}
.hero-media::before {                      /* directional scrim so the copy stays readable */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 14, 8, .5) 0%, transparent 15%),
    linear-gradient(96deg, rgba(20, 14, 8, .82) 0%, rgba(20, 14, 8, .44) 42%, transparent 72%),
    linear-gradient(0deg, rgba(20, 14, 8, .74) 0%, transparent 48%);
}

/* copy overlaid on the footage, anchored bottom-left, inverted to paper */
.hero-grid {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--notice-h) + var(--header-h) + env(safe-area-inset-top) + clamp(3rem, 10vh, 5rem));
  padding-bottom: clamp(2.5rem, 8vh, 6rem);
  color: var(--paper);
}
.hero-copy { position: relative; z-index: 2; max-width: 46rem; }
.hero .eyebrow { color: rgba(245, 241, 232, .74); }
.hero .eyebrow b { color: var(--oak-on-dark); }
.hero h1 { color: var(--paper); }
.hero h1 em { color: var(--oak-on-dark); }         /* oak-deep goes muddy on the dark footage */
.hero-lede { color: rgba(245, 241, 232, .84); }
.hero-meta { color: rgba(245, 241, 232, .62); border-top-color: var(--paper-line); }
.hero .btn-ghost { border-color: rgba(245, 241, 232, .42); color: var(--paper); }
.hero .btn-ghost:hover { border-color: var(--paper); background: rgba(245, 241, 232, .08); }

@media (min-width: 1024px) {
  .hero h1 { max-width: 16ch; }
  .hero-lede { max-width: 48ch; }
  .hero-meta { max-width: 44rem; }
}

/* hero entrance — the copy holds hidden, then rises in (JS adds .is-ready).
   The poster paints instantly (no fade); only the video layer fades in on play. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero-copy > * { opacity: 0; }
.hero-copy > h1 { opacity: 1; }            /* its line-masks do the reveal, not a fade */
.hero.is-ready .hero-copy > * { animation: rise .8s var(--ease) both; }
.hero.is-ready .hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero.is-ready .hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero.is-ready .hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero.is-ready .hero-copy > *:nth-child(5) { animation-delay: .32s; }
.hero.is-ready .hero-copy > h1 { animation: none; }   /* h1 reveals via its masks, not the block fade */

/* hero headline: line masks, gated on the same ready state */
@keyframes lineUp { to { transform: none; } }
.hero h1 .mask > span { transform: translateY(118%); transition: none; }
.hero.is-ready h1 .mask > span {
  animation: lineUp 1s var(--ease) forwards;
  animation-delay: calc(.2s + var(--l, 0) * .13s);
}

/* vertical coordinates label + scroll cue — removed with the old split layout */
.hero-side, .scroll-cue { display: none; }

/* header sits transparent over the hero — go light until it scrolls to its paper state */
.site-header:not(.is-scrolled) { color: var(--paper); }
.site-header:not(.is-scrolled) .brand-sub { color: rgba(245, 241, 232, .7); }
.site-header:not(.is-scrolled) .desktop-nav a { color: rgba(245, 241, 232, .82); }
.site-header:not(.is-scrolled) .desktop-nav a:hover { color: var(--paper); }
body:not(.is-locked) .site-header:not(.is-scrolled) .nav-toggle span { background: var(--paper); }

/* Mehrfarbiges Kundenlogo (brand.logoSvg als <img class="logo-tile">): helle Kachel nur über
   dem dunklen Hero, wo dunkle Logoteile sonst verschwinden. Im hellen Header, im Footer und auf
   den Unterseiten steht das Logo frei. Das Padding bleibt in beiden Zuständen, damit nichts springt. */
.logo-tile {
  display: block; flex: none; height: 50px; width: auto;
  padding: 5px; border-radius: 2px;
  transition: background-color .5s var(--ease);
}
body:not(.is-locked) .site-header:not(.is-scrolled) .logo-tile { background: var(--paper); }

/* ============================================================
   Scroll reveals (section-level, staggered children)
   ============================================================ */
.rv { opacity: 0; transform: translateY(14px); }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* ============================================================
   Leistungen — editorial list, hover-revealed imagery ≥1200px
   ============================================================ */
.services-inner { position: relative; }
.services-list { border-bottom: 1px solid var(--line); }
.service-row {
  display: grid;
  grid-template-columns: 2.75rem 1fr 3rem;
  grid-template-areas: "num title icon" "num copy copy";
  align-items: center;
  row-gap: .375rem;
  padding-block: 2.25rem;
  border-top: 1px solid var(--line);
}
.service-num  { grid-area: num; align-self: start; font: 600 var(--fs-eyebrow)/2.2 var(--font-body); letter-spacing: .1em; color: var(--ink-55); }
.service-name { grid-area: title; font: 400 var(--fs-h3)/1.15 var(--font-display); letter-spacing: -.01em; transform-origin: left; transition: color .3s var(--ease), transform .3s var(--ease); }
.service-copy { grid-area: copy; color: var(--ink-70); font-size: var(--fs-small); max-width: 52ch; }
.service-icon { grid-area: icon; justify-self: end; align-self: start; color: var(--ink-55); transition: color .3s var(--ease); }
.service-icon svg { display: block; }
.service-shot { display: none; }

@media (min-width: 768px) {
  .service-row {
    grid-template-columns: 3.5rem 5fr 4fr 3.5rem;
    grid-template-areas: "num title copy icon";
    column-gap: var(--gutter);
    padding-block: clamp(2.75rem, 4vw, 3.75rem);
  }
  .service-copy { font-size: 1rem; }
  .service-icon { align-self: center; }
}
/* sticky image stage: the list scrolls, the picture on the right crossfades */
.services-visual { display: none; }
@media (min-width: 1024px) {
  .services-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .service-row { grid-template-columns: 3.5rem 1.2fr 1fr; grid-template-areas: "num title icon" "num copy copy"; row-gap: .5rem; }
  .service-copy { grid-area: copy; }
  .service-icon { align-self: start; }
  .services-visual {
    display: block;
    position: sticky; top: calc(var(--header-h) + 2.5rem);
  }
  .visual-stack { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
  .visual-frame {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity .9s var(--ease);
    will-change: opacity;
  }
  .visual-frame.is-active { opacity: 1; }
  .visual-stack img { width: 100%; height: 100%; object-fit: cover; }
  /* aktive Leistung (deren Bild gerade sichtbar ist): Titel + Icon golden & größer */
  .service-row.is-current .service-name { color: var(--oak-on-light); transform: scale(1.06); }
  .service-row.is-current .service-icon { color: var(--oak-on-light); }
}
/* Mobile (<768): Bild oben + Text unten, horizontal durch die Leistungen scrollen */
@media (max-width: 767px) {
  .services-list {
    display: flex; gap: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x); scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x);
    padding-bottom: .5rem; border-bottom: 0;
  }
  .services-list::-webkit-scrollbar { display: none; }
  .service-row {
    flex: 0 0 82%; scroll-snap-align: start;
    border-top: 0; padding-block: 0; align-content: start;
    grid-template-columns: 2.75rem 1fr 2rem;
    grid-template-areas: "shot shot shot" "num title icon" "num copy copy";
  }
  .service-shot {
    display: block; grid-area: shot;
    aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.125rem;
  }
  .service-shot img { width: 100%; height: 100%; object-fit: cover; }
}

/* ============================================================
   Über uns
   ============================================================ */
.about-grid { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4rem); }
.about-figure { position: relative; margin-right: clamp(2rem, 12vw, 5rem); }
.about-figure .main {
  aspect-ratio: 4 / 5; overflow: hidden;
}
.about-figure .main img { width: 100%; height: 100%; object-fit: cover; }
.about-figure .detail {
  position: absolute; right: clamp(-4.5rem, -8vw, -2rem); bottom: -2rem;
  width: clamp(8.5rem, 32%, 13rem); aspect-ratio: 1;
  overflow: hidden;
  border: .5rem solid var(--paper);
}
.about-figure .detail img { width: 100%; height: 100%; object-fit: cover; }
.about-copy p + p { margin-top: 1.25rem; }
.about-copy .lede { font-size: var(--fs-lead); line-height: 1.55; }
.about-copy p:not(.lede) { color: var(--ink-70); }
.pull {
  margin: 1.75rem 0 clamp(2rem, 4vw, 2.75rem);
  padding-left: 1.375rem;
  border-left: 2px solid var(--oak);
  font: italic 400 clamp(1.25rem, 1.9vw, 1.5625rem)/1.45 var(--font-display);
  color: var(--ink);
  max-width: 24ch;
}

.stats {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem var(--gutter);
}
.stats > div { position: relative; padding-top: .875rem; }
.stats > div::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 2rem; height: 2px; background: var(--oak);
}
.stat-value { font: 300 clamp(2.25rem, 4vw, 3.25rem)/1 var(--font-display); letter-spacing: -.02em; }
.stat-label {
  display: block; margin-top: .5rem;
  font: 600 .75rem/1.4 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-55);
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  .about-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }
  .about-figure { grid-column: 1 / 6; margin-right: 0; margin-top: .5rem; }
  .about-body { grid-column: 7 / 13; }
  .about-figure .detail { right: -3rem; }
}

/* warm brown band — contrast between the two paper sections */
.section--wood {
  /* --wood-bg is injected per client (head.njk); tint derived from paper */
  --wood-line: color-mix(in srgb, var(--paper) 20%, transparent);
  background: var(--wood-bg);
  color: var(--paper);
}
.section--wood .eyebrow { color: rgba(245, 241, 232, .58); }
.section--wood .eyebrow b { color: var(--oak-on-dark); }
.section--wood h2 em { color: var(--oak-on-dark); }
.section--wood .about-copy p:not(.lede) { color: var(--paper-70); }
.section--wood .pull { color: var(--paper); }
.section--wood .stats { border-top-color: var(--wood-line); }
.section--wood .stat-label { color: rgba(245, 241, 232, .55); }
.section--wood .about-figure .detail { border-color: var(--wood-bg); }

/* ============================================================
   Referenzen — broken masonry + filter
   ============================================================ */
/* Nur die Kategorie-Navigation bleibt beim Scrollen oben kleben (nicht der ganze
   Section-Kopf) — die Überschrift scrollt mit weg, so bleibt mehr Platz für die Items */
.work-head {
  position: sticky; top: var(--header-h); z-index: 5;
  background: var(--paper);
  padding-top: clamp(.6rem, 1.5vw, 1rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
/* deckt den Bereich hinter der leicht transparenten Navbar ab, damit dort keine Items durchscheinen */
.work-head::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--header-h); background: var(--paper);
}
.work-filters {
  display: flex; gap: 1.5rem;
  overflow-x: auto; overflow-y: hidden;   /* nur horizontal — kein impliziter Vertikal-Scroll */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block: .4rem;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2rem), transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2rem), transparent);
}
.work-filters::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start;
  padding: .35rem 0;
  background: transparent; border: 0; border-radius: 0;
  font: 600 .75rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-55); cursor: pointer;
  transition: color .25s var(--ease);
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] {
  color: var(--oak-on-light);
  text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 1px;
}

.work-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem) var(--gutter); }
.work-item { margin: 0; }
/* Mobile (<600): Referenzen als horizontales Carousel — nur seitliches Wischen,
   kein langer vertikaler Stapel */
@media (max-width: 599px) {
  .work-grid {
    display: flex; gap: 1.5rem;   /* wie Holz-Carousel */
    align-items: flex-start;      /* Karten NICHT auf die höchste strecken (kein Leerraum) */
    overflow-x: auto; overflow-y: hidden;   /* nur horizontal — verhindert den zweiten,
                                               vertikalen Scrollbereich (overflow-x:auto
                                               würde overflow-y implizit auf auto setzen) */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x); scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x);
    padding-bottom: .5rem;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-item { flex: 0 0 90%; scroll-snap-align: start; margin: 0; }
  /* einheitliche Bildhöhe im Carousel — sonst sind die Karten durch die
     unterschiedlichen Seitenverhältnisse verschieden hoch und wirken beim
     Wischen unruhig */
  .work-grid .work-media { aspect-ratio: 4 / 3; }   /* wie Holz: dezenter Peek */
  /* Reveal nur als Fade, kein vertikales Aufsteigen (wirkt neben dem
     seitlichen Scrollen deplatziert) */
  .work-item .reveal-img, .work-item .rv { transform: none; }
  /* Beschreibung im mobilen Carousel ausblenden: auf Desktop ist sie hinter Hover
     versteckt (kompakte Karten). Auf Touch gibt es kein Hover, sonst stünde sie
     immer offen → hohe, unterschiedlich lange Karten und eine viel längere Section. */
  .work-note { display: none; }
  /* KEIN klebender Filter-Header auf Mobile — sonst bleibt der Kopf oben stehen
     und der Kartenbereich scrollt darunter durch (Desktop-Effekt, hier unerwünscht) */
  .work-head { position: static; }
  .work-head::before { display: none; }
  /* Filter-Chips bis an den echten Bildschirmrand ziehen, damit die nächste Chip
     sichtbar anschneidet (Scroll-Hinweis) statt mit Innenabstand sauber zu enden */
  .work-filters {
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x);
    scroll-padding-inline: var(--pad-x);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent);
  }
}
.work-media { overflow: hidden; }
.work-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .work-item:hover .work-media img { transform: scale(1.035); }
}

/* klickbare Bildfläche → Lightbox. Button-Reset, damit die Kachel unverändert
   aussieht; cursor + Lupen-Icon signalisieren „vergrößerbar". */
.work-zoom {
  display: block; width: 100%; margin: 0; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: inherit;
  -webkit-appearance: none; appearance: none;
  position: relative; cursor: zoom-in;
}
.work-zoom:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.work-zoom-ico {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 2px; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.work-zoom-ico svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .work-item:hover .work-zoom-ico,
  .work-zoom:focus-visible .work-zoom-ico { opacity: 1; transform: none; }
}
@media (hover: none) {   /* Touch: kein Hover → Hinweis dezent dauerhaft zeigen */
  .work-zoom-ico { opacity: 1; transform: none; background: color-mix(in srgb, var(--ink) 42%, transparent); }
}
.work-item figcaption { padding-top: 1rem; }
.work-title { font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.2 var(--font-display); display: flex; align-items: baseline; gap: .625rem; }
.work-idx {
  font: 600 .6875rem/1 var(--font-body);
  letter-spacing: .14em; color: var(--oak-deep);
}
.work-meta {
  display: block; margin-top: .375rem;
  font: 600 .75rem/1.5 var(--font-body);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-55);
}
.work-note { margin-top: .375rem; font-size: var(--fs-small); color: var(--ink-70); }
@media (hover: hover) and (pointer: fine) {
  .work-note { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .45s var(--ease); }
  .work-item:hover .work-note { max-height: 4rem; opacity: 1; }
}

/* varied aspect ratios survive every breakpoint — no flattening to squares */
.pos-top  img { object-position: center top; }
.pos-left img { object-position: 20% center; }
.ar-43  { aspect-ratio: 4 / 3; }
.ar-45  { aspect-ratio: 4 / 5; }
.ar-34  { aspect-ratio: 3 / 4; }
.ar-169 { aspect-ratio: 16 / 9; }
.ar-11  { aspect-ratio: 1 / 1; }
.ar-1610{ aspect-ratio: 16 / 10; }

@media (min-width: 600px) and (max-width: 1023px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-item.w-wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(12, 1fr); }
  .w-7 { grid-column: span 7; }
  .w-5 { grid-column: span 5; }
  .w-4 { grid-column: span 4; }
  .w-8 { grid-column: span 8; }
  .w-6 { grid-column: span 6; }
  .work-item.raise { margin-top: 4.5rem; }
  .work-item.sink  { margin-top: -2.5rem; }
}
@keyframes refade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.work-item.refade { animation: refade .5s var(--ease) both; }

/* ============================================================
   Holzbibliothek — tap a wood, read its story
   ============================================================ */
.wood-shelf {
  display: flex; gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-x);
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad-x));
  padding-inline: var(--pad-x);
  padding-bottom: .5rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.wood-shelf::-webkit-scrollbar { display: none; }
.wood-card {
  position: relative; display: block; width: 100%;
  flex: 0 0 68%;
  scroll-snap-align: start;
  aspect-ratio: 3 / 4; overflow: hidden;
  padding: 0; border: 0; background: var(--ghost);
  cursor: pointer; text-align: left;
  font: inherit;
  opacity: 1;
  transform: scale(1);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.wood-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wood-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33, 28, 23, 0) 45%, rgba(33, 28, 23, .72) 100%);
}
.wood-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border: 2px solid var(--oak);
  opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.wood-card[aria-selected="true"] {
  opacity: 1;
  transform: scale(1.03);
  z-index: 1;
}
.wood-card[aria-selected="true"]::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .wood-card:hover { opacity: 1; }
  .wood-card:hover img { transform: scale(1.045); }
}
.wood-card-label { position: absolute; left: 1rem; right: 1rem; bottom: .875rem; z-index: 1; color: var(--paper); }
.wood-card-label b { display: block; font: 400 clamp(1.125rem, 1.8vw, 1.5rem)/1.15 var(--font-display); }
.wood-card-label i {
  display: block; margin-top: .25rem; font-style: normal;
  font: 600 .6875rem/1.4 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245, 241, 232, .66);
}

.wood-panel {
  display: grid; gap: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  opacity: 0;   /* verborgener Grundzustand (mobil) — sonst blitzt der Panel-Inhalt
                   sichtbar auf und wird beim refade zurück auf 0 gesetzt */
}
.wood-panel[hidden] { display: none; }
/* refade wird erst getriggert, wenn die Holz-Bibliothek eingescrollt ist
   (nicht schon beim Laden, off-screen) — und spielt bei jedem Tab-Wechsel neu.
   Dank Grundzustand opacity:0 gibt es nichts zurückzusetzen → kein Aufflackern. */
.wood-layout.is-in .wood-panel { animation: refade .5s var(--ease) both; }
.wood-figure { margin: 0; display: flex; flex-direction: column; gap: clamp(.875rem, 2vw, 1.25rem); }
.wood-ref-main, .wood-ref-detail { overflow: hidden; }
.wood-ref-main { aspect-ratio: 4 / 5; }
.wood-ref-detail { aspect-ratio: 3 / 2; }
.wood-ref-main img, .wood-ref-detail img { width: 100%; height: 100%; object-fit: cover; }
/* Mobile (<768): horizontal durch die Holzarten scrollen — keine Auswahl-Buttons, keine Nahaufnahme */
@media (max-width: 767px) {
  .wood-shelf { display: none; }
  .wood-ref-detail { display: none; }
  .wood-layout {
    display: flex; gap: 1.5rem;   /* mehr Abstand zur nächsten Karte (Peek „Esche“) */
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x); scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x);
    padding-bottom: .5rem;
  }
  .wood-layout::-webkit-scrollbar { display: none; }
  .wood-panel, .wood-panel[hidden] {
    display: flex; flex-direction: column;
    flex: 0 0 90%; scroll-snap-align: start;   /* breitere Karte → „Esche“ ragt weniger rein */
    border-top: 0; padding-top: 0;
  }
  /* Eigenschaften (Härte, Farbton, Charakter) gestapelt statt Label|Wert
     nebeneinander — Stapelung + Ausrichtung stehen gebündelt weiter unten
     (nach den Basisregeln, sonst gewinnt bei gleicher Spezifität die spätere). */
}
.wood-info h3 { font: 400 var(--fs-h3)/1.15 var(--font-display); }
.wood-latin {
  display: block; margin-top: .375rem;
  font: 600 .75rem/1.4 var(--font-body);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-55);
}
.wood-desc { margin-top: 1.125rem; color: var(--ink-70); max-width: 52ch; }
.wood-props { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.wood-props > div {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .625rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.wood-props dt { color: var(--ink-55); font-weight: 600; flex: none; }
.wood-props dd { text-align: right; color: var(--ink-70); }
/* Härte als dezente Skala Weich → Hart mit Positionspunkt (rechts, statt Textwert) */
.hardness-scale { width: clamp(9rem, 42%, 12rem); }
.hardness-track {
  position: relative; display: block; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--line), var(--oak));
}
.hardness-dot {
  position: absolute; top: 50%; left: var(--pos, 50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--oak-deep); border: 2px solid var(--paper);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(33, 28, 23, .25);
}
.hardness-ends { display: flex; justify-content: space-between; margin-top: .45rem; }
.hardness-ends i {
  font-style: normal; font: 600 .625rem/1 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55);
}
/* Farbton als kleiner runder Swatch vor dem Text */
.color-swatch {
  display: inline-block; width: .8125rem; height: .8125rem;
  margin-right: .5rem; vertical-align: -1px; border-radius: 50%;
  background: var(--c, var(--oak));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 1px rgba(33, 28, 23, .12);
}
.wood-uses { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.wood-uses li {
  border: 1px solid var(--line); border-radius: 2px;
  padding: .4375rem .8125rem;
  font: 600 .6875rem/1.4 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-70);
}
/* Mobile: Eigenschaften gestapelt + alles linksbündig, Härte-Skala über volle
   Breite (steht bewusst nach den Basisregeln, damit die Overrides greifen —
   die Basis setzt align-items:center/space-between, das würde sonst gewinnen) */
@media (max-width: 767px) {
  .wood-props > div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .4rem; }
  .wood-props dt { text-align: left; }
  .wood-props dd { text-align: left; }
  .hardness-scale { width: 100%; }
  /* Karten des Holz-Carousels kartenübergreifend ausrichten: die variabel langen
     Blöcke reservieren die Höhe des jeweils längsten (Eiche hat die längste
     Beschreibung), damit Härte / Farbton / Charakter beim Wischen bei jeder
     Holzart auf exakt derselben Höhe stehen. */
  .wood-latin { min-height: 2.125rem; }                          /* immer 2 Zeilen */
  .wood-desc  { min-height: 14rem; }                             /* längste Beschreibung */
  .wood-props dd:not(.hardness-scale) { min-height: 3.125rem; }  /* Wert immer 2 Zeilen */
  /* Test: Trennlinien der Eigenschaften auf Mobile entfernen */
  .wood-props, .wood-props > div { border: 0; }
}
@media (min-width: 768px) {
  /* left: reference workpiece · right: small wood selector above the copy */
  .wood-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 4.5vw, 4.5rem);
    row-gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
  }
  .wood-panel { display: contents; }
  .wood-panel[hidden] { display: none; }

  .wood-figure { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: stretch; opacity: 0; }
  .wood-ref-main, .wood-ref-detail { min-height: 0; aspect-ratio: auto; }
  .wood-ref-main { flex: 3 1 0; }
  .wood-ref-detail { flex: 2 1 0; }

  .wood-shelf {
    grid-column: 2; grid-row: 1;
    display: flex; flex-wrap: nowrap; gap: .75rem;
    overflow: visible; scroll-snap-type: none;
    margin: 0; padding: 0;
  }
  .wood-card { flex: 1 1 0; width: auto; aspect-ratio: 4 / 3; scroll-snap-align: none; opacity: .5; }
  .wood-card[aria-selected="true"] { opacity: 1; transform: none; }
  .wood-card-label { left: .875rem; right: .875rem; bottom: .75rem; }
  .wood-card-label b { font-size: 1rem; }
  .wood-card-label i { font-size: .625rem; }

  .wood-info { grid-column: 2; grid-row: 2; align-self: start; opacity: 0; }
  /* Grundzustand opacity:0 (Panel ist hier display:contents, daher pro Box) —
     verhindert das kurze Aufblitzen vor dem refade. */
  .wood-layout.is-in .wood-figure,
  .wood-layout.is-in .wood-info { animation: refade .5s var(--ease) both; }
}

/* ============================================================
   Ablauf — sand-toned band, outlined numerals, drawing line
   ============================================================ */
.section--sand {
  background: var(--sand-bg);   /* injected per client (head.njk) */
  border-block: 1px solid var(--line);
}
.process-grid { position: relative; padding-left: clamp(2rem, 7vw, 3rem); }
/* Zollstock statt Linie: eine Messlatte, die sich beim Scrollen aufzieht */
.process-grid::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='56'%3E%3Cg stroke='%2393622F' stroke-opacity='.5'%3E%3Cpath d='M.5 0v56'/%3E%3Cpath d='M0 .5h13'/%3E%3Cpath d='M0 14.5h6M0 28.5h9M0 42.5h6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-y;
  clip-path: inset(0 0 calc((1 - var(--draw, 1)) * 100%) 0);
}
.step {
  position: relative;
  display: grid; grid-template-columns: clamp(3rem, 12vw, 4.5rem) 1fr;
  column-gap: clamp(1.25rem, 4vw, 2rem);
  align-items: start;
  padding-block: 1.75rem;
}
.step-num {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  font: 300 clamp(3rem, 11vw, 4.5rem)/1 var(--font-display);
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(147, 98, 47, .38);
  user-select: none; pointer-events: none;
}
.step h3 { grid-column: 2; grid-row: 1; font: 500 1.25rem/1.3 var(--font-display); margin-bottom: .5rem; }
.step p { grid-column: 2; grid-row: 2; color: var(--ink-70); font-size: var(--fs-small); max-width: 38ch; }

@media (min-width: 1024px) {
  .process-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    column-gap: var(--gutter);
    padding-left: 0; padding-top: clamp(2.5rem, 4vw, 3.5rem);
  }
  .process-grid::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14'%3E%3Cg stroke='%2393622F' stroke-opacity='.5'%3E%3Cpath d='M0 .5h56'/%3E%3Cpath d='M.5 0v13'/%3E%3Cpath d='M14.5 0v6M28.5 0v9M42.5 0v6'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-x;
    clip-path: inset(0 calc((1 - var(--draw, 1)) * 100%) 0 0);
  }
  .step {
    grid-template-columns: auto 1fr;
    column-gap: clamp(.75rem, 1.2vw, 1.25rem);
    padding-block: 0;
  }
  .step-num { font-size: clamp(2.25rem, 3vw, 3.25rem); }
  .step h3 { font-size: 1.1875rem; }
  .step p { font-size: .9375rem; max-width: none; }
}

/* ============================================================
   Kundenstimmen — editorial quotes; swipe carousel on mobile
   ============================================================ */
.quotes-grid {
  display: flex; gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad-x));
  padding-inline: var(--pad-x);
  padding-bottom: .5rem;
}
.quotes-grid::-webkit-scrollbar { display: none; }
.quote {
  flex: 0 0 85%;
  scroll-snap-align: start;
  border-left: 1px solid var(--line);
  padding-left: 1.25rem;
}
.quote blockquote {
  font: 400 1.25rem/1.4 var(--font-display);
  font-style: italic;
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.quote cite::before {
  content: ""; display: block;
  width: 2rem; height: 1px; background: var(--oak);
  margin-bottom: .875rem;
}
.quote cite {
  display: block; margin-top: 1.25rem;
  font: 600 .75rem/1.6 var(--font-body); font-style: normal;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-55);
}
@media (min-width: 768px) {
  .quotes-grid {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: clamp(3.5rem, 6vw, 5rem) var(--gutter);
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  .quote { border-left: 0; padding-left: 0; }
  .q-1 { grid-column: 1 / 9; }
  .q-1 blockquote { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.3; }
  .q-2 { grid-column: 9 / 13; align-self: end; }
  .q-3 { grid-column: 1 / 6; }
  .q-4 { grid-column: 7 / 13; margin-top: 3rem; }
  .q-4 blockquote { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.35; }
  .q-5 { grid-column: 2 / 9; }
  /* Das Raster ist auf FÜNF Zitate gesetzt (q-1 … q-5, bewusst ungleich
     gewichtet). Der Bau wählt aus dem Brief maximal fünf aus. Diese Regel ist
     nur das Netz darunter: alles ab dem sechsten liefe sonst in die
     Auto-Platzierung und stünde 1/12 breit da. */
  .quote:nth-child(n+6) { grid-column: span 6; }
}

/* ============================================================
   FAQ — hairline accordion
   ============================================================ */
.faq-list { max-width: 860px; border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
/* staggered row reveal without inline delays */
.faq-item:nth-child(2) { --d: 1; } .faq-item:nth-child(3) { --d: 2; }
.faq-item:nth-child(4) { --d: 3; } .faq-item:nth-child(5) { --d: 4; }
.faq-item:nth-child(6) { --d: 5; } .faq-item:nth-child(7) { --d: 6; }
.faq-q {
  width: 100%; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.375rem 0;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font: 400 clamp(1.125rem, 1.6vw, 1.375rem)/1.35 var(--font-display);
  color: var(--ink);
  transition: color .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .faq-q:hover { color: var(--oak-deep); } }
.faq-icon { flex: none; color: var(--ink-55); transition: transform .4s var(--ease); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: 1.5rem; color: var(--ink-70); max-width: 58ch; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* ============================================================
   Kontakt — the one dark moment
   ============================================================ */
.contact { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.contact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(640px 480px at 18% 62%, rgba(176, 121, 63, .14), transparent 70%);
}
.contact .container { position: relative; }
.contact .eyebrow { color: var(--paper-70); }
.contact .eyebrow b { color: var(--oak-on-dark); }
.contact h2 { color: var(--paper); }
.contact-grid { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 5rem); }
.contact-copy > p { color: var(--paper-70); margin-top: 1.5rem; max-width: 42ch; }
.contact-lines { margin-top: 2.5rem; display: grid; gap: 1rem; }
.contact-phone {
  font: 400 clamp(1.75rem, 3.4vw, 2.625rem)/1.1 var(--font-display);
  letter-spacing: -.01em;
  transition: color .25s var(--ease);
}
.contact-mail {
  font: 400 clamp(1.125rem, 1.8vw, 1.5rem)/1.3 var(--font-display);
  overflow-wrap: anywhere;
  transition: color .25s var(--ease);
}
.contact-phone:hover, .contact-mail:hover { color: var(--oak-on-dark); }
.contact-address {
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--paper-line);
  font-size: var(--fs-small); color: var(--paper-70);
  line-height: 1.8; font-style: normal;
}
/* Öffnungszeiten schließen ohne Trennlinie an die Adresse an */
.contact-hours {
  margin-top: .75rem;
  font-size: var(--fs-small); color: var(--paper-70);
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .contact-grid {
    display: grid; grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter); align-items: start;
  }
  .contact-copy { grid-column: 1 / 6; }
  .contact-form { grid-column: 7 / 13; }
}

/* form */
.contact-form { display: grid; gap: 1.375rem; }
.field { display: grid; gap: .5rem; }
.field label {
  font: 600 .75rem/1.4 var(--font-body);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--paper-70);
}
.field :is(input, select, textarea) {
  width: 100%;
  min-height: 52px;
  padding: .875rem 1rem;
  font: 400 1.0625rem/1.4 var(--font-body);  /* ≥16px — no iOS zoom */
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field :is(input, select, textarea):focus { border-color: var(--focus); outline: none; }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field ::placeholder { color: rgba(245, 241, 232, .35); }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F5F1E8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.75rem;
  cursor: pointer;
}
.field select:invalid { color: rgba(245, 241, 232, .35); }
.field select option { color: var(--ink); background: var(--paper); }
.field-row { display: grid; gap: 1.375rem; }
@media (min-width: 768px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* visible error / success states (markup only — no backend yet) */
.field .field-error { display: none; font-size: .8125rem; color: #D98E70; }
.field.is-error :is(input, select, textarea) { border-color: var(--clay); }
.field.is-error .field-error { display: block; }
.form-success {
  border: 1px solid var(--oak);
  padding: 1.25rem 1.5rem;
  font-size: var(--fs-small); color: var(--paper);
}
.form-success b { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; display: block; margin-bottom: .25rem; }

.consent {
  display: flex; gap: .875rem; align-items: flex-start;
  padding-block: .25rem;
  font-size: var(--fs-small); color: var(--paper-70);
  cursor: pointer;
}
.consent input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 22px; height: 22px; margin-top: .125rem;
  border: 1px solid var(--paper-line); border-radius: 2px;
  background: transparent; cursor: pointer;
  display: grid; place-content: center;
}
.consent input::before {
  content: ""; width: 12px; height: 12px;
  background: var(--oak);
  clip-path: polygon(14% 44%, 0 62%, 46% 100%, 100% 18%, 82% 4%, 42% 66%);
  transform: scale(0);
  transition: transform .2s var(--ease);
}
.consent input:checked::before { transform: scale(1); }
.consent a { text-decoration: underline; text-underline-offset: 2px; color: var(--paper); }
.contact-form .btn { justify-self: stretch; }
@media (min-width: 768px) { .contact-form .btn { justify-self: start; padding-inline: 2.5rem; } }
.form-note { font-size: .8125rem; color: rgba(245, 241, 232, .45); max-width: none; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.footer-grid { display: grid; gap: 2.75rem; }
.footer-brand p { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-70); max-width: 34ch; }
.footer-col h3 {
  font: 600 .75rem/1.4 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: .875rem;
}
.footer-col a { display: inline-block; padding-block: .4375rem; font-size: var(--fs-small); color: var(--ink-70); transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-col address { font-style: normal; font-size: var(--fs-small); color: var(--ink-70); line-height: 2; }
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--gutter); } }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: .8125rem; color: var(--ink-55);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-legal a { padding-block: .375rem; transition: color .25s var(--ease); }
.footer-legal a:hover { color: var(--ink); }

/* ============================================================
   Rechtsseite (impressum.html) — eigenständige, ruhige Textseite.
   Kein Anker-Header, weil die Sektions-IDs der Startseite hier nicht
   existieren; stattdessen Wortmarke + Rücksprung.
   ============================================================ */
.legal-body { padding-top: var(--notice-h); }
.legal-header { border-bottom: 1px solid var(--line); }
.legal-header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1rem;
}
.legal-back {
  font-size: var(--fs-small); color: var(--ink-70);
  border-bottom: 1px solid var(--line); padding-bottom: .15rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.legal-back:hover { color: var(--ink); border-color: var(--oak); }

.legal-main { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 8rem); }
/* linksbündig wie der Rest der Seite — .container würde sonst zentrieren */
.legal-inner { max-width: 46rem; margin-inline: 0; }
.legal-title {
  font: 400 var(--fs-h2)/1.08 var(--font-display);
  letter-spacing: -.015em; max-width: 16ch;
}
.legal-intro { margin-top: 1.25rem; color: var(--ink-70); }
.legal-block { margin-top: clamp(2.25rem, 5vw, 3rem); }
.legal-h2 {
  font: 600 .75rem/1.4 var(--font-body);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-55); max-width: none;
  padding-bottom: .875rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.legal-line { line-height: 1.9; overflow-wrap: anywhere; }
/* schmale Screens: Wortmarken-Zusatz weicht, damit Rücksprung einzeilig bleibt */
@media (max-width: 520px) {
  .legal-header .brand-sub { display: none; }
  .legal-back { white-space: nowrap; }
}
/* Fließtext-Blöcke (Datenschutz o. Ä.) brauchen Absatzabstand — Adressblöcke nicht. */
.legal-block--prose .legal-line { line-height: 1.75; }
.legal-block--prose .legal-line + .legal-line { margin-top: 1.125rem; }
.legal-line a { border-bottom: 1px solid var(--line); transition: border-color .25s var(--ease); }
.legal-line a:hover { border-color: var(--oak); }
.legal-note {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: 1.25rem 1.5rem;
  background: var(--ghost);
  font-size: var(--fs-small); color: var(--ink-70); max-width: none;
}
.legal-footer { border-top: 1px solid var(--line); }
.legal-footer-inner {
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: .8125rem; color: var(--ink-55);
}
.legal-footer-inner a:hover { color: var(--ink); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .rv, .hero-copy > *, .hero-media { opacity: 1 !important; transform: none !important; }
  .mask > span, .hero h1 .mask > span { transform: none !important; animation: none !important; }
  .reveal-img { opacity: 1 !important; transform: none !important; }
  .reveal-img img { transform: none !important; }
  .wood-panel, .wood-figure, .wood-info { opacity: 1 !important; }
  .scroll-cue span { animation: none !important; }
  .process-grid::before { transform: none !important; clip-path: none !important; }
}

/* ============================================================
   Floating contact widget (FAB) — squared, template palette
   ============================================================ */
.fab {
  position: fixed; right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom));
  z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
  /* Container fängt KEINE Events ab (sonst blockiert der unsichtbare Aktions-
     Stapel das Scrollen auf Mobile); nur Button + offene Pills sind klickbar. */
  pointer-events: none;
}
.fab-toggle {
  width: 58px; height: 58px; border: 1px solid transparent; border-radius: 2px;
  background: var(--oak); color: var(--on-oak); cursor: pointer; pointer-events: auto;
  display: grid; place-items: center; position: relative;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 24%, transparent);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.fab-toggle:hover { background: var(--oak-deep); color: var(--paper); }
.fab-toggle svg { width: 25px; height: 25px; grid-area: 1 / 1; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.fab-ico-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.fab.is-open .fab-ico-open { opacity: 0; transform: rotate(90deg) scale(.5); }
.fab.is-open .fab-ico-close { opacity: 1; transform: none; }

.fab-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.fab-action {
  display: inline-flex; align-items: center; gap: .625rem;
  background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  opacity: 0; transform: translateY(10px) scale(.94); pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.fab.is-open .fab-action {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.fab-label {
  background: var(--paper); color: var(--ink);
  font: 500 .875rem/1 var(--font-body); letter-spacing: .01em; white-space: nowrap;
  padding: .5rem .75rem; border-radius: 2px; border: 1px solid var(--line);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 12%, transparent);
}
.fab-ico {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: var(--paper); color: var(--oak-deep);
  border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 12%, transparent);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.fab-ico svg { width: 22px; height: 22px; }
.fab-action:hover .fab-ico { background: var(--oak); color: var(--on-oak); border-color: var(--oak); }
.fab-toggle:focus-visible, .fab-action:focus-visible { outline: 2px solid var(--oak-deep); outline-offset: 3px; }

/* callback modal */
.fab-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.25rem; }
.fab-modal[hidden] { display: none; }
.fab-modal-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.fab-modal-panel {
  position: relative; width: min(400px, 100%); background: var(--paper); color: var(--ink);
  border-radius: 2px; padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 38%, transparent);
  animation: fab-pop .35s var(--ease);
}
@keyframes fab-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.fab-modal-close {
  position: absolute; top: .5rem; right: .5rem; width: 40px; height: 40px;
  border: 0; background: transparent; color: var(--ink-70); cursor: pointer;
  font-size: 1.75rem; line-height: 1; border-radius: 2px;
}
.fab-modal-close:hover { color: var(--ink); background: var(--ghost); }
.fab-modal-panel h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: .375rem; }
.fab-modal-panel > p { color: var(--ink-70); font-size: var(--fs-small); margin-bottom: 1.25rem; }
.fab-form { display: flex; flex-direction: column; gap: .875rem; }
.fab-field { display: flex; flex-direction: column; gap: .375rem; }
.fab-field label { font: 500 var(--fs-eyebrow)/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-70); }
.fab-field input {
  font: 400 var(--fs-body) var(--font-body); padding: .75rem .875rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink);
}
.fab-field input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
/* day chips (multi-select) + time-slot cards — pattern from novamind-starter, template skin */
.fab-choice { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.fab-choice legend {
  font: 500 var(--fs-eyebrow)/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-70); margin-bottom: .5rem; padding: 0;
}
.fab-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fab-chip {
  font: 500 .875rem/1 var(--font-body); padding: .5rem .8rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink-70);
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.fab-chip:hover { border-color: var(--ink); color: var(--ink); }
.fab-chip[aria-pressed="true"] { background: var(--oak); border-color: var(--oak); color: var(--on-oak); }
.fab-slots { display: flex; gap: .5rem; }
@media (max-width: 460px) { .fab-slots { flex-direction: column; } }
.fab-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: .625rem .5rem; cursor: pointer; text-align: center;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink-70);
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.fab-slot:hover { border-color: var(--ink); }
.fab-slot[aria-pressed="true"] {
  border-color: var(--oak); color: var(--oak-deep);
  background: color-mix(in srgb, var(--oak) 12%, var(--paper));
}
.fab-slot-label { font: 500 .875rem/1.15 var(--font-body); }
.fab-slot-sub { font-size: .75rem; opacity: .75; }
.fab-chip:focus-visible, .fab-slot:focus-visible { outline: 2px solid var(--oak-deep); outline-offset: 2px; }
.fab-form .btn { margin-top: .25rem; }
.fab-form-success { background: var(--ghost); border-left: 2px solid var(--oak); padding: .875rem 1rem; font-size: var(--fs-small); }
.fab-form-success[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fab-action, .fab-toggle svg { transition: none; }
  .fab-modal-panel { animation: none; }
}

/* ============================================================
   Referenz-Lightbox — vergrößertes Projektbild über dem Scrim
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); }
.lightbox[hidden] { display: none; }
.lightbox-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 82%, transparent); }
.lightbox-figure {
  position: relative; margin: 0; max-width: min(1100px, 92vw);
  background: var(--paper); border-radius: 2px; padding: .75rem;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--ink) 50%, transparent);
  animation: fab-pop .35s var(--ease);
}
.lightbox-img {
  display: block; width: 100%; max-height: 74vh; object-fit: contain;
  border-radius: 1px; background: color-mix(in srgb, var(--ink) 6%, var(--paper));
}
.lightbox-cap { padding: .875rem .5rem .25rem; max-width: 60ch; }
.lightbox-title { display: block; font: 400 clamp(1.125rem, 1.6vw, 1.375rem)/1.2 var(--font-display); color: var(--ink); }
.lightbox-meta  { display: block; margin-top: .3rem; font: 600 .6875rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55); }
.lightbox-note  { display: block; margin-top: .375rem; font-size: var(--fs-small); color: var(--ink-70); }
.lightbox-title:empty, .lightbox-meta:empty, .lightbox-note:empty { display: none; }

.lightbox-btn {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 2px; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper);
  transition: background .25s var(--ease);
}
.lightbox-btn[hidden] { display: none; }
.lightbox-btn:hover { background: var(--oak-deep); }
.lightbox-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.lightbox-btn svg { width: 22px; height: 22px; }
.lightbox-close { top: clamp(.75rem, 3vw, 1.5rem); right: clamp(.75rem, 3vw, 1.5rem); }
.lightbox-prev  { left:  clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .lightbox-figure { animation: none; }
}

/* ============================================================
   09 — Karriere / Bewerbung
   Homepage-Banner über der Kontaktsektion + die Bewerbungs-Unterseite.
   Alles aus den bestehenden Theme-Tokens abgeleitet; die dunkle
   Formular-Sektion nutzt unverändert die .contact-/.field-Styles.
   ============================================================ */

/* ---- Homepage: Karriere-Banner (heller Streifen über der Kontaktsektion) ---- */
/* Kein unteres Padding: der Banner sitzt bündig auf der dunklen Kontaktsektion. */
.jobs-banner { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.jobs-banner-inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--oak) 11%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--oak) 32%, transparent);
  border-radius: 2px;
}
.jobs-banner .eyebrow { margin-bottom: .625rem; }
.jobs-banner-title {
  font: 400 var(--fs-h3)/1.15 var(--font-display);
  color: var(--ink); max-width: 24ch;
}
.jobs-banner-text { margin-top: .75rem; color: var(--ink-70); max-width: 56ch; }
.jobs-banner-cta { flex: none; }
@media (min-width: 768px) {
  .jobs-banner-inner {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: clamp(2rem, 5vw, 4rem);
  }
}

/* ---- Bewerbungs-Unterseite ---- */
.jobs-body { padding-top: var(--notice-h); }

.jobs-header { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.jobs-header-inner { max-width: 52rem; }
.jobs-title {
  font: 400 clamp(2.5rem, 6vw, 5rem)/1.02 var(--font-display);
  letter-spacing: -.015em; text-wrap: balance;
}
.jobs-title em { font-style: italic; color: var(--oak-deep); }
.jobs-intro { margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-70); max-width: 48ch; }

.jobs-benefits-section { padding-top: 0; }
.jobs-sub { font: 400 var(--fs-h3)/1.15 var(--font-display); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.jobs-benefits { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .jobs-benefits { grid-template-columns: repeat(2, 1fr); } }
.job-benefit { border-top: 2px solid var(--oak); padding-top: 1.25rem; }
.job-benefit-title { font: 500 1.25rem/1.3 var(--font-display); color: var(--ink); }
.job-benefit-text { margin-top: .625rem; color: var(--ink-70); }

/* Hinweis in der dunklen Bewerbungs-Sektion (unter Telefon/E-Mail) */
.jobs-docs-note { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--paper-70); max-width: 42ch; }

/* Datei-Upload (Lebenslauf) — der native File-Input wird versteckt, ein
   gestylter Auslöser + Dateiname übernehmen; passt in den dunklen Formular-Look. */
.field-file { position: relative; }
.file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.file-drop {
  display: flex; align-items: center; gap: .875rem; flex-wrap: wrap;
  min-height: 52px; cursor: pointer;
}
.file-drop-btn {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  padding: .75rem 1.125rem;
  font: 600 .8125rem/1 var(--font-body); letter-spacing: .04em;
  color: var(--paper);
  border: 1px solid var(--paper-line); border-radius: 2px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.file-drop-btn svg { width: 18px; height: 18px; }
.file-drop:hover .file-drop-btn { border-color: var(--oak); background: color-mix(in srgb, var(--paper) 6%, transparent); }
.file-input:focus-visible ~ .file-drop .file-drop-btn { outline: 2px solid var(--focus); outline-offset: 2px; }
.file-drop-name {
  font-size: var(--fs-small); color: rgba(245, 241, 232, .5);
  overflow-wrap: anywhere;
}
.file-drop-name.has-file { color: var(--oak-on-dark); }