/* ============================================================
   SPAN & LOT — Tischlerei (fiktive Showcase-Marke, SITEBASE)
   Welt: „Reißbrett & Werkbank" — Zeichenpapier, Graphit, Blueprint-Tinte.
   Motion-Charakter: mechanisch-präzise. Wipes statt Fades, kein Overshoot.
   Critical-Blöcke werden via scripts/build-critical-css.mjs inline gespiegelt.
   ============================================================ */

/* [CRITICAL:START fonts+tokens+reset+nav+hero] */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/public/fonts/SpaceGrotesk-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/public/fonts/SpaceGrotesk-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/public/fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/public/fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/public/fonts/InterTight.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root {
  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
  --bg: #F5F2EB;
  --surface: #FCFAF5;
  --ink: #181B1E;
  --ink-muted: rgba(24, 27, 30, .62);
  --blueprint: #1E3F8F;
  --blueprint-soft: rgba(30, 63, 143, .12);
  --wood: #9C6B3F;
  --dark-bg: #15181B;
  --dark-surface: #1D2125;
  --dark-text: #EFEDE6;
  --dark-text-muted: rgba(239, 237, 230, .6);
  --line: rgba(24, 27, 30, .14);
  --line-soft: rgba(24, 27, 30, .07);
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --section: clamp(5rem, 11vw, 10rem);
  --ease-mech: cubic-bezier(.3, 0, .1, 1);
  --d-wipe: .6s;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, .97rem + .2vw, 1.06rem);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
/* Papierkorn — sehr leise, multiply auf hellem Grund */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.0; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; outline: 1px solid rgba(0, 0, 0, .08); outline-offset: -1px; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kicker {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blueprint);
  display: flex; align-items: center; gap: .8rem;
}
.kicker::after { content: ""; height: 1px; width: 56px; background: var(--blueprint); opacity: .5; }
.skip-link {
  position: fixed; top: -48px; left: 12px; z-index: 200;
  background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: .8rem;
  padding: .6rem 1rem; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ── Nav ── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .35s var(--ease-mech), box-shadow .35s var(--ease-mech);
}
.nav-progress {
  position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--blueprint); transform: scaleX(0); transform-origin: left;
}
.nav.scrolled { background: rgba(252, 250, 245, .92); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--line); }
.nav-inner {
  max-width: var(--maxw); margin-inline: auto; padding: .9rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav-logo {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  text-decoration: none; display: flex; align-items: center; gap: .55rem;
}
.nav-logo svg { width: 22px; height: 22px; }
.nav-links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--mono); font-size: .73rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-muted);
  padding: .5rem 0; position: relative;
  transition: color .25s var(--ease-mech);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: .2rem; height: 1px; width: 100%;
  background: var(--blueprint); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-mech);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-tel {
  font-family: var(--mono); font-size: .78rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--ink); padding: .55rem .95rem; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: background-color .25s var(--ease-mech), color .25s var(--ease-mech);
}
.nav-tel:hover { background: var(--ink); color: var(--bg); }
.burger {
  display: none; background: none; border: 1px solid var(--line); cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .3s var(--ease-mech), opacity .2s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  .nav-links, .nav-tel { display: none; }
  .burger { display: flex; }
}

/* ── Hero ── */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: clamp(6rem, 14vh, 9rem) 0 clamp(3rem, 8vh, 5rem);
  background: var(--bg); overflow: hidden;
}
/* Reißbrett-Raster + Eckmarken */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 64px);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
}
.hero-inner {
  position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero-kicker { margin-bottom: 1.4rem; }
.hero-title {
  font-size: clamp(3rem, 9.5vw, 7.5rem); position: relative; z-index: 1;
}
.hero-title .amp { color: var(--blueprint); font-weight: 500; }
.hero-sub {
  margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  color: var(--ink-muted);
}
.hero-ctas { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.btn {
  font-family: var(--mono); font-size: .82rem; font-weight: 500; letter-spacing: .06em;
  text-decoration: none; display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.5rem; min-height: 48px; cursor: pointer; position: relative;
  transition: transform .2s var(--ease-mech), background-color .25s var(--ease-mech),
              color .25s var(--ease-mech), outline-offset .2s var(--ease-mech);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--blueprint); color: #FCFAF5; outline: 1px solid var(--blueprint); outline-offset: 0; }
.btn-primary:hover { outline-offset: 4px; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
/* Maßlinien-SVG um den Titel */
.hero-dim { position: absolute; pointer-events: none; color: var(--blueprint); }
.hero-dim text { font-family: var(--mono); font-size: 11px; fill: var(--blueprint); }
.hero-dim line, .hero-dim path { stroke: var(--blueprint); stroke-width: 1; }
.dim-top { top: -2.4rem; left: 0; width: min(100%, 560px); height: 30px; }
.dim-left { left: -2.6rem; top: 0; height: 100%; width: 30px; display: none; }
@media (min-width: 1100px) { .dim-left { display: block; } }
.hero-title-block { position: relative; }
/* Foto-Karte: ein Projekt, ans Reißbrett geheftet */
.hero-card {
  position: relative; transform: rotate(-1.6deg);
  background: var(--surface); padding: .8rem .8rem 1rem;
  box-shadow: 0 1px 0 var(--line), 0 14px 34px -18px rgba(24, 27, 30, .35);
}
.hero-card::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px;
  border-radius: 50%; background: var(--blueprint);
  box-shadow: 0 2px 4px rgba(24, 27, 30, .35); transform: translateX(-50%);
}
.hero-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-card figcaption {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  color: var(--ink-muted); margin-top: .7rem; display: flex; justify-content: space-between; gap: 1rem;
}
.hero-scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted); display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero-scroll::after { content: ""; width: 1px; height: 34px; background: var(--ink-muted); }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { max-width: 420px; margin-top: .5rem; }
  .hero-scroll { display: none; }
}

/* ── Reveals: Schnittkanten-Wipes, NUR bei voller Motion ──
   ⚠ Grundzustand darf NIE voll geclippt sein: Chrome rechnet clip-path in die
   IntersectionObserver-Ratio — inset(…100%…) → Ratio 0 → Observer feuert nie
   (live bewiesen 2026-06-11). 4%-Sliver bleibt, opacity versteckt ihn. */
html[data-anim] [data-reveal] {
  clip-path: inset(0 96% 0 0);
  opacity: 0;
  transition: clip-path var(--d-wipe) var(--ease-mech),
              opacity .3s linear;
  transition-delay: calc(var(--rd, 0) * 70ms);
}
html[data-anim] [data-reveal="up"] { clip-path: inset(96% 0 0 0); }
html[data-anim] [data-reveal].revealed { clip-path: inset(0 0 0 0); opacity: 1; }
/* [CRITICAL:END] */

/* ============================================================
   Ab hier asynchron (css/style.css via preload-Swap)
   ============================================================ */

/* ── Sticky-Mobile-Bar (erst nach Hero) ── */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; padding: .65rem var(--gutter);
  background: rgba(24, 27, 30, .96); color: var(--dark-text);
  transform: translateY(110%); transition: transform .4s var(--ease-mech);
}
.sticky-bar.visible { transform: translateY(0); }
.sticky-bar a {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-decoration: none;
  display: flex; justify-content: center; align-items: center; gap: .6rem; min-height: 46px;
  border: 1px solid rgba(239, 237, 230, .35);
}
@media (max-width: 860px) { .sticky-bar { display: block; } }

/* ── Fullscreen-Menü ── */
.menu-overlay {
  position: fixed; inset: 0; z-index: 95; background: var(--bg);
  opacity: 0; transition: opacity .35s var(--ease-mech);
  display: grid; place-items: center;
}
.menu-overlay[hidden] { display: none; }
.menu-overlay.open { opacity: 1; }
.menu-inner { text-align: center; outline: none; }
.menu-inner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.menu-inner a {
  font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 8vw, 3.4rem);
  text-decoration: none; letter-spacing: -.02em; line-height: 1.25;
  transition: color .2s var(--ease-mech);
}
.menu-inner a:hover { color: var(--blueprint); }
.menu-meta { margin-top: 2.2rem; font-family: var(--mono); font-size: .74rem; color: var(--ink-muted); letter-spacing: .1em; }

/* ── Sektions-Gerüst ── */
section { position: relative; }
.section-pad { padding-block: var(--section); }
.section-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); max-width: 46rem; }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.section-head .lead { color: var(--ink-muted); font-size: 1.05rem; max-width: 38rem; }

/* ── Leitsatz ── */
.leitsatz { border-top: 1px solid var(--line); }
.leitsatz-line {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12;
  font-size: clamp(1.7rem, 4.2vw, 3rem); max-width: 56rem;
}
.leitsatz-line em { font-style: normal; color: var(--blueprint); }
.leitsatz-meta { margin-top: 2rem; display: flex; gap: 2.5rem; flex-wrap: wrap; }
.leitsatz-meta div { font-family: var(--mono); font-size: .74rem; color: var(--ink-muted); letter-spacing: .06em; }
.leitsatz-meta strong { display: block; color: var(--ink); font-size: 1.3rem; font-weight: 500; margin-bottom: .25rem; }

/* ── Montage (Signature) ── */
.montage { border-top: 1px solid var(--line); }
.montage-stage {
  position: relative; height: clamp(380px, 62vh, 640px);
  background:
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 56px),
    var(--surface);
  border: 1px solid var(--line);
}
.montage-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease-mech); }
.montage-stage.webgl-on canvas { opacity: 1; }
.montage-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 8%;
  transition: opacity .8s var(--ease-mech);
}
.montage-stage.webgl-on .montage-fallback { opacity: 0; }
.montage-fallback svg { width: 100%; height: 100%; max-width: 720px; }
.montage-fallback path, .montage-fallback line {
  stroke: var(--blueprint); stroke-width: 1.2; fill: none; vector-effect: non-scaling-stroke;
}
html[data-anim] .montage-fallback .draw {
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
}
html[data-anim] .montage-fallback.drawn .draw {
  stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s linear;
}
.montage-label {
  position: absolute; max-width: 240px; opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease-mech), transform .45s var(--ease-mech);
  font-family: var(--mono); font-size: .72rem; line-height: 1.5; letter-spacing: .04em;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-left: 2px solid var(--blueprint); padding: .6rem .8rem;
}
.montage-label.on { opacity: 1; transform: translateY(0); }
.montage-label b { color: var(--blueprint); font-weight: 500; display: block; margin-bottom: .15rem; }
.ml-1 { top: 8%; left: 4%; }
.ml-2 { top: 42%; right: 4%; }
.ml-3 { bottom: 8%; left: 8%; }
@media (max-width: 700px) {
  .ml-1 { top: 3%; left: 3%; } .ml-2 { top: auto; bottom: 26%; right: 3%; } .ml-3 { bottom: 3%; left: 3%; }
  .montage-label { max-width: 190px; font-size: .65rem; }
}
.montage-foot {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--ink-muted);
  border: 1px solid var(--line); border-top: 0; padding: .8rem 1.1rem;
}

/* ── Material & Präzision ── */
.material { border-top: 1px solid var(--line); }
.material-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.material-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.material-photo figcaption { font-family: var(--mono); font-size: .68rem; color: var(--ink-muted); margin-top: .6rem; letter-spacing: .08em; }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .8rem; }
.data-table caption { text-align: left; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blueprint); padding-bottom: .9rem; font-weight: 500; }
.data-table th, .data-table td { text-align: left; padding: .85rem .4rem; border-top: 1px solid var(--line); font-weight: 400; vertical-align: top; }
.data-table th { color: var(--ink-muted); width: 42%; font-size: .72rem; letter-spacing: .06em; }
.data-table td { font-variant-numeric: tabular-nums; }
.data-table tr:last-child th, .data-table tr:last-child td { border-bottom: 1px solid var(--line); }
.material-row { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.material-row figure { margin: 0; }
.material-row img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.material-row figcaption { font-family: var(--mono); font-size: .68rem; color: var(--ink-muted); margin-top: .55rem; letter-spacing: .08em; }
@media (max-width: 780px) {
  .material-grid { grid-template-columns: 1fr; }
  .material-row { grid-template-columns: 1fr; }
}

/* ── Prozess 01–04 ── */
.prozess { border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.2rem, 3.5vw, 3rem); padding-block: 2.1rem;
  border-top: 1px solid var(--line); align-items: baseline;
}
.step:last-of-type { border-bottom: 1px solid var(--line); }
.step-num { font-family: var(--mono); font-size: .95rem; color: var(--blueprint); font-weight: 500; }
.step h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 500; }
.step p { color: var(--ink-muted); font-size: .98rem; }
.step-meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--ink-muted); margin-top: .55rem; text-transform: uppercase; }
@media (max-width: 700px) { .step { grid-template-columns: 56px 1fr; } .step p { grid-column: 2; } }

/* ── Projekte ── */
.projekte { border-top: 1px solid var(--line); }
.projekt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.projekt-card { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.projekt-card img {
  aspect-ratio: 4 / 5; object-fit: cover; width: 100%; outline: none;
  transition: transform .55s var(--ease-mech);
}
.projekt-card:hover img { transform: scale(1.03); }
.projekt-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  outline: 1px solid var(--blueprint); outline-offset: -1px; opacity: 0;
  transition: opacity .3s var(--ease-mech), outline-offset .3s var(--ease-mech);
}
.projekt-card:hover::after { opacity: 1; outline-offset: -8px; }
.projekt-card figcaption {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .07em; color: var(--ink-muted);
  padding: .75rem .9rem; border-top: 1px solid var(--line);
}
.projekt-card figcaption b { color: var(--ink); font-weight: 500; }
@media (max-width: 780px) { .projekt-grid { grid-template-columns: 1fr; } .projekt-card img { aspect-ratio: 16 / 10; } }

/* ── Werkstatt (dunkles Band — bewusst harte Schnittkante) ── */
.werkstatt { background: var(--dark-bg); color: var(--dark-text); }
.werkstatt .kicker { color: #7C9BE8; }
.werkstatt .kicker::after { background: #7C9BE8; }
.werkstatt-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.werkstatt img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; outline-color: rgba(255, 255, 255, .1); }
.werkstatt blockquote { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.25; letter-spacing: -.01em; }
.werkstatt blockquote footer { margin-top: 1.4rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--dark-text-muted); }
.werkstatt-fakten { margin-top: 2.4rem; display: flex; gap: 2.4rem; flex-wrap: wrap; }
.werkstatt-fakten div { font-family: var(--mono); font-size: .7rem; letter-spacing: .07em; color: var(--dark-text-muted); }
.werkstatt-fakten strong { display: block; color: var(--dark-text); font-size: 1.25rem; font-weight: 500; margin-bottom: .2rem; }
@media (max-width: 780px) { .werkstatt-grid { grid-template-columns: 1fr; } }

/* ── Kontakt / CTA ── */
.kontakt { border-top: 1px solid var(--line); }
.kontakt-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.kontakt h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.kontakt .lead { margin-top: 1.2rem; color: var(--ink-muted); max-width: 32rem; }
.kontakt-ctas { margin-top: 2rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.kontakt-info { font-family: var(--mono); font-size: .8rem; line-height: 2; border: 1px solid var(--line); padding: 1.4rem 1.5rem; background: var(--surface); }
.kontakt-info h3 { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--blueprint); margin-bottom: .9rem; }
.kontakt-info a { text-decoration-color: var(--blueprint); text-underline-offset: 3px; }
@media (max-width: 780px) { .kontakt-grid { grid-template-columns: 1fr; } }

/* ── Footer ── */
.footer { border-top: 1px solid var(--line); padding-block: 2.2rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.footer p { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--ink-muted); }
.footer strong { color: var(--ink); font-weight: 500; }

/* ── Fadenkreuz-Cursor (nur Desktop + volle Motion; JS setzt .cursor-live) ── */
html[data-anim].cursor-live, html[data-anim].cursor-live a,
html[data-anim].cursor-live button { cursor: none; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
  width: 0; height: 0; opacity: 0; transition: opacity .3s;
}
html.cursor-live .cursor { opacity: 1; }
.cursor::before, .cursor::after {
  content: ""; position: absolute; background: var(--blueprint);
  transition: transform .25s var(--ease-mech);
}
.cursor::before { left: -11px; top: -.5px; width: 22px; height: 1px; }
.cursor::after { left: -.5px; top: -11px; width: 1px; height: 22px; }
.cursor.is-link::before { transform: scaleX(1.7); }
.cursor.is-link::after { transform: scaleY(1.7); }
.cursor-dot {
  position: absolute; left: -2px; top: -2px; width: 4px; height: 4px;
  background: var(--blueprint); border-radius: 50%;
}
.cursor-read {
  position: absolute; left: 16px; top: 10px; white-space: nowrap;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; color: var(--ink-muted);
}
@media (hover: none), (max-width: 860px) { .cursor { display: none; } }

/* ── Hero-Maßlinien zeichnen sich (nur volle Motion) ── */
html[data-anim] .hero-dim .draw { stroke-dasharray: 600; stroke-dashoffset: 600; }
html[data-anim] .hero-dim.drawn .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s linear; }
html[data-anim] .hero-dim text { opacity: 0; transition: opacity .5s linear 1.1s; }
html[data-anim] .hero-dim.drawn text { opacity: 1; }

/* ── Fokus-Stile ── */
:focus-visible { outline: 2px solid var(--blueprint); outline-offset: 3px; }
.werkstatt :focus-visible, .sticky-bar :focus-visible { outline-color: #7C9BE8; }