/* ==========================================================================
   Tischlerei Kernholz – Stylesheet
   Farben: Papier (Off-White), Eiche, Nussbaum, Anthrazit, Akzent Waldgrün.
   Motiv: Maßlinien mit schrägen Begrenzungsstrichen wie in der Werkzeichnung.
   ========================================================================== */

@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/young-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/young-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations'), url('../fonts/hanken-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --papier: #f5f0e6;
  --papier-2: #ede5d6;
  --papier-3: #e2d7c3;
  --linie: #cfc1a8;
  --linie-fein: #ddd2bf;
  --text: #262421;
  --text-2: #595147;
  --anthrazit: #262421;
  --anthrazit-2: #33302b;
  --eiche: #c49a63;
  --eiche-hell: #e3c99f;
  --nuss: #5a3a27;
  --wald: #1d4636;
  --wald-2: #265a45;
  --wald-hell: #d5e3d6;
  --fehler: #a3321b;
  --weiss: #fffdf8;

  --serif: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rand: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --radius: 6px;
  --abstand: clamp(64px, 7.5vw, 120px);
  --kopf-h: 64px;

  /* Maßlinie mit schrägen Begrenzungen als Maske (Farbe = currentColor) */
  --masslinie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14' preserveAspectRatio='none'%3E%3Cpath d='M1 7h62M1 1v12M63 1v12M-3 11l8-8M59 11l8-8' stroke='black' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 16px);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  line-height: 1.6;
  font-variation-settings: normal;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--wald); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--wald);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  background: var(--wald);
  color: var(--weiss);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-weight: 600;
}
.skip:focus { top: 12px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.rahmen {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7em 1.35em;
  border: 2px solid var(--wald);
  border-radius: var(--radius);
  background: var(--wald);
  color: var(--weiss);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.knopf:hover { background: var(--wald-2); border-color: var(--wald-2); }
.knopf:active { transform: translateY(1px); }
.knopf-rand { background: transparent; color: var(--wald); }
.knopf-rand:hover { background: var(--wald); color: var(--weiss); }
.knopf-klein { min-height: 44px; padding: 0.55em 1.05em; font-size: 0.95rem; }
.knopf-breit { width: 100%; }
.knopf-hell { background: var(--papier); border-color: var(--papier); color: var(--wald); }
.knopf-hell:hover { background: var(--weiss); border-color: var(--weiss); }
.knopf-rand-hell { background: transparent; border-color: var(--papier); color: var(--papier); }
.knopf-rand-hell:hover { background: var(--papier); color: var(--wald); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

.textknopf {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wald);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.textknopf:hover { text-decoration-thickness: 2px; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky;
  top: -44px;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie-fein);
}
.kopf-leiste {
  background: var(--anthrazit);
  color: #e9e1d2;
  font-size: 0.875rem;
  height: 44px;
}
.kopf-leiste-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}
.kopf-leiste a { display: inline-flex; align-items: center; min-height: 44px; color: #f4ead8; font-weight: 600; text-decoration: none; }
.kopf-leiste a:hover { text-decoration: underline; }
.kopf-adresse { margin-left: auto; color: #cfc4b2; }
.kopf-leiste :focus-visible { outline-color: var(--eiche-hell); }

.status-klein, .status-gross { display: inline-flex; align-items: center; gap: 0.55em; }
.punkt {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #9b9184;
  flex: none;
}
[data-offen='ja'] .punkt { background: #3bb273; box-shadow: 0 0 0 4px rgb(59 178 115 / 0.2); }
[data-offen='bald'] .punkt { background: #e0a43a; box-shadow: 0 0 0 4px rgb(224 164 58 / 0.2); }
[data-offen='nein'] .punkt { background: #c7654a; }

.kopf-innen {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--kopf-h);
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
}
.marke-zeichen { width: 42px; height: 42px; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.05; }
.marke-name { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.01em; }
.marke-zusatz { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); margin-top: 3px; }

.hauptnav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.hauptnav ul { list-style: none; display: flex; gap: 2px; }
.hauptnav ul a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--text);
  font-weight: 550;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 4px;
}
.hauptnav ul a:hover { background: var(--papier-2); }

.menue-knopf {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
  font-weight: 600;
}
.menue-striche, .menue-striche::before, .menue-striche::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s;
}
.menue-striche { position: relative; }
.menue-striche::before, .menue-striche::after { content: ''; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
.menue-knopf[aria-expanded='true'] .menue-striche { background: transparent; }
.menue-knopf[aria-expanded='true'] .menue-striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded='true'] .menue-striche::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); }
.abschnitt-kopf { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.nummer {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 18px;
}
.nummer span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0;
  color: var(--wald);
}
.nummer span::after {
  content: '';
  width: 56px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--masslinie) center / 100% 100% no-repeat;
  mask: var(--masslinie) center / 100% 100% no-repeat;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.abschnitt-intro {
  margin-top: 18px;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  color: var(--text-2);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ---------- Einstieg ---------- */
.held { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 7vw, 112px); }
.held-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.oberzeile {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wald);
  margin-bottom: 22px;
}
h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.3rem + 4vw, 5.1rem);
  line-height: 1;
  letter-spacing: -0.015em;
}
.h1-zweit { color: var(--nuss); }
.einleitung {
  margin-top: 28px;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  max-width: 36em;
  color: var(--text-2);
  text-wrap: pretty;
}
.held .knopfreihe { margin-top: 32px; }
.held-tel { margin-top: 18px; color: var(--text-2); }
.held-tel a { font-weight: 700; }
.fakten {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--linie);
}
.fakten li { display: flex; flex-direction: column; gap: 2px; font-size: 0.93rem; color: var(--text-2); }
.fakten strong { color: var(--text); font-size: 1rem; }

.held-bild { margin: 0; position: relative; }
.scheibe { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; margin-inline: auto; }
.scheibe-canvas {
  width: 100%; height: 100%;
  filter: drop-shadow(0 22px 28px rgb(64 42 20 / 0.22)) drop-shadow(0 4px 6px rgb(64 42 20 / 0.18));
}
.scheibe-notiz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.notiz-linien polyline { fill: none; stroke: var(--anthrazit); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.notiz-punkte circle { fill: var(--papier); stroke: var(--anthrazit); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.notiz {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(0, -125%);
  padding: 3px 9px;
  background: var(--papier);
  border: 1px solid var(--anthrazit);
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.notiz-rechts { transform: translate(-100%, -125%); }
.scheibe-mass { display: block; width: 100%; max-width: 600px; height: auto; margin: 22px auto 0; overflow: visible; }
.scheibe-mass path { fill: none; stroke: var(--anthrazit); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.scheibe-mass text { fill: var(--anthrazit); font-family: var(--sans); font-size: 15px; font-weight: 700; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--papier); stroke-width: 12px; stroke-linejoin: round; }
.held-bild figcaption {
  margin: 18px auto 0;
  max-width: 34em;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-2);
}

/* ---------- Leistungen ---------- */
.leistungen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
}
.leistung {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  transition: background-color 0.25s;
}
.leistung:hover { background: var(--papier-2); }
.leistung-icon {
  width: 56px; height: 56px;
  fill: none;
  stroke: var(--nuss);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  margin-bottom: 6px;
}
.leistung-icon .icon-mass { stroke: var(--wald); stroke-width: 1.4; }
.leistung h3 { font-family: var(--serif); font-size: 1.4rem; line-height: 1.15; }
.leistung p { color: var(--text-2); font-size: 0.97rem; }
.leistung-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 6px; }
.leistung-cta { background: var(--wald); color: #eef1ea; }
.leistung-cta:hover { background: var(--wald-2); }
.leistung-cta p { color: #d9e3da; }
.leistung-cta .leistung-icon { stroke: var(--eiche-hell); }
.leistung-cta .leistung-icon .icon-mass { stroke: #eef1ea; }
.leistung-cta a { color: #fbf6ec; }
.leistung-cta :focus-visible { outline-color: var(--eiche-hell); }
.leistung-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 650;
}

/* ---------- Konfigurator ---------- */
.konfigurator { background: var(--papier-2); border-block: 1px solid var(--linie-fein); }
.konf {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.konf-buehne {
  position: sticky;
  top: calc(var(--kopf-h) + 20px);
  aspect-ratio: 4 / 3.1;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 38%, #fbf7f0 0%, #f1eadf 55%, #e6dccb 100%);
  border: 1px solid var(--linie);
  box-shadow: 0 1px 0 #fff inset;
  touch-action: pan-y;
}
.konf-zeichnung { margin: 0; position: absolute; inset: 0; padding: 3% 3% 64px; transition: opacity 0.5s; }
.konf-svg { width: 100%; height: 100%; }
.konf-3d { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s; }
.konf-3d canvas { width: 100% !important; height: 100% !important; display: block; outline: none; cursor: grab; }
.konf-3d canvas:active { cursor: grabbing; }
.konf-buehne[data-modus='3d'] .konf-3d { opacity: 1; }
.konf-buehne[data-modus='3d'] .konf-zeichnung { opacity: 0; visibility: hidden; }
.konf-buehne[data-modus='zeichnung'] .konf-3d { visibility: hidden; }

.mass-etikett {
  position: absolute;
  left: 0; top: 0;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgb(250 246 239 / 0.92);
  color: var(--anthrazit);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.konf-hinweis {
  position: absolute;
  left: 14px; top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: rgb(38 36 33 / 0.78);
  color: #f4ecdf;
  font-size: 0.8rem;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 0.4s;
}
.konf-hinweis svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.konf-hinweis.ist-weg { opacity: 0; }

.konf-werkzeuge {
  position: absolute;
  left: 12px; bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.werkzeug {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: rgb(252 249 243 / 0.92);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.werkzeug:hover { border-color: var(--anthrazit); }
.werkzeug[aria-pressed='true'] { background: var(--anthrazit); border-color: var(--anthrazit); color: var(--papier); }
.werkzeug-icon { padding: 0; display: inline-grid; place-items: center; }
.werkzeug-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.werkzeug-modus { position: absolute; right: 12px; top: 12px; }
.konf-status {
  position: absolute;
  right: 14px; bottom: 16px;
  font-size: 0.78rem;
  color: var(--text-2);
  pointer-events: none;
}
.konf-buehne[data-modus='3d'] .konf-status { opacity: 0; }

/* Werkzeichnung (SVG) */
.wz-linie { fill: none; stroke: var(--anthrazit); stroke-width: 1.4; stroke-linejoin: round; }
.wz-flaeche { stroke: var(--anthrazit); stroke-width: 1.4; stroke-linejoin: round; }
.wz-stahl { fill: #3a3835; }
.wz-mass { fill: none; stroke: var(--wald); stroke-width: 1.1; }
.wz-hilfs { fill: none; stroke: var(--wald); stroke-width: 0.8; opacity: 0.55; }
.wz-text { fill: var(--wald); font-family: var(--sans); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wz-titel { fill: var(--text-2); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.wz-boden { stroke: var(--anthrazit); stroke-width: 1.2; }
.wz-schraffur { stroke: var(--anthrazit); stroke-width: 0.7; opacity: 0.35; }

/* Steuerung */
.konf-steuerung {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 10px;
}
.regler-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.regler-kopf label { font-weight: 700; }
.regler-kopf output {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--wald);
  font-variant-numeric: tabular-nums;
}
.regler-skala { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-2); margin-top: -2px; }

/* Schieberegler als Maßband */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 2px 0 0;
  background: transparent;
  cursor: pointer;
  --anteil: 50%;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 18px;
  border-radius: 3px;
  border: 1px solid #b89a6b;
  background:
    repeating-linear-gradient(90deg, #6b5438 0 1px, transparent 1px 10%) 0 100% / 100% 45% no-repeat,
    repeating-linear-gradient(90deg, #6b5438 0 1px, transparent 1px 2.5%) 0 100% / 100% 25% no-repeat,
    linear-gradient(#f1d98f, #e8c96e);
}
input[type='range']::-moz-range-track {
  height: 18px;
  border-radius: 3px;
  border: 1px solid #b89a6b;
  background:
    repeating-linear-gradient(90deg, #6b5438 0 1px, transparent 1px 10%) 0 100% / 100% 45% no-repeat,
    repeating-linear-gradient(90deg, #6b5438 0 1px, transparent 1px 2.5%) 0 100% / 100% 25% no-repeat,
    linear-gradient(#f1d98f, #e8c96e);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 34px;
  margin-top: -9px;
  border-radius: 4px;
  background: var(--wald);
  border: 2px solid var(--papier);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}
input[type='range']::-moz-range-thumb {
  width: 18px;
  height: 30px;
  border-radius: 4px;
  background: var(--wald);
  border: 2px solid var(--papier);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}
input[type='range']:focus-visible { outline: none; }
input[type='range']:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--wald); outline-offset: 2px; }
input[type='range']:focus-visible::-moz-range-thumb { outline: 3px solid var(--wald); outline-offset: 2px; }

.wahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.wahl legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.wahl-raster { display: grid; gap: 8px; }
.wahl-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wahl-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wahl-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 6px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.chip:hover { border-color: var(--anthrazit); }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip:has(input:checked) {
  border-color: var(--wald);
  box-shadow: 0 0 0 2px var(--wald) inset;
  background: #f3f7f2;
}
.chip:has(input:focus-visible) { outline: 3px solid var(--wald); outline-offset: 2px; }
.chip small { display: block; font-weight: 500; font-size: 0.75rem; color: var(--text-2); margin-top: 2px; }
.chip-holz { padding: 6px 6px 8px; }
.chip-muster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  background: var(--papier-3) center / cover;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08) inset;
}
.chip-muster[data-muster='eiche'] { background-color: #c9a06c; }
.chip-muster[data-muster='nussbaum'] { background-color: #6e4a33; }
.chip-muster[data-muster='esche'] { background-color: #e0cba3; }
.chip-muster[data-muster='ahorn'] { background-color: #ecdfc4; }
.chip-icon svg { width: 48px; height: 30px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
.chip-icon svg .dick { stroke-width: 3.2; stroke: var(--nuss); }

.konf-ergebnis {
  padding-top: 18px;
  border-top: 1px dashed var(--linie);
  display: grid;
  gap: 4px;
}
.konf-zusammenfassung { font-weight: 700; }
.konf-details { font-size: 0.9rem; color: var(--text-2); }
.konf-preis { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.konf-preis span { font-size: 0.9rem; color: var(--text-2); }
.konf-preis strong { font-family: var(--serif); font-weight: 400; font-size: 2rem; color: var(--text); font-variant-numeric: tabular-nums; }
.konf-fiktiv {
  justify-self: start;
  margin-top: 2px;
  padding: 3px 8px;
  border-radius: 3px;
  background: #f6e7c8;
  color: #5d4415;
  font-size: 0.8rem;
  font-weight: 650;
}

/* ---------- Ablauf ---------- */
.ablauf { background: var(--anthrazit); color: #efe6d6; }
.ablauf .nummer { color: #bdb09c; }
.ablauf .nummer span { color: var(--eiche-hell); }
.ablauf .abschnitt-intro { color: #c9bdaa; }
.ablauf :focus-visible { outline-color: var(--eiche-hell); }
.ablauf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  view-timeline: --ablauf block;
}
.ablauf-buehne {
  position: sticky;
  top: calc(var(--kopf-h) + 40px);
  border-radius: 10px;
  background: radial-gradient(90% 90% at 50% 40%, #3a3631, #2b2925);
  border: 1px solid #45403a;
  padding: clamp(10px, 2vw, 24px);
}
.hobelbild { width: 100%; height: auto; overflow: visible; }
.werkzeugwand { fill: none; stroke: #5d554b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.werkzeugwand .leiste { stroke: #4a443c; stroke-width: 6; }
.werkzeugwand .flaeche { fill: #4a443c; stroke: none; }
.boden-linie { stroke: #4a443c; stroke-width: 2; }
.bank rect { fill: #8a6a48; }
.bank rect:first-child { fill: #a47f55; }
.brett-rau { fill: #9c8466; }
.brett-rau-spuren { stroke: #7a664e; stroke-width: 1.6; opacity: 0.8; }
.brett-kante { fill: none; stroke: #1b1a18; stroke-width: 1.5; }
.brett-glatt { clip-path: inset(0 42% 0 0); }
.spaene-liegend path, .span { fill: none; stroke: #e7c790; stroke-width: 3.2; stroke-linecap: round; }
.hobel-koerper { fill: #b88a55; stroke: #1b1a18; stroke-width: 1.5; }
.hobel-nase, .hobel-griff { fill: #7b5236; stroke: #1b1a18; stroke-width: 1.5; }
.hobel-eisen { fill: #7d8588; stroke: #1b1a18; stroke-width: 1.2; }
.hobel-keil { fill: #5e3e29; stroke: #1b1a18; stroke-width: 1.2; }
.hobel-bahn { transform: translateX(360px); }
.span { transform-box: fill-box; transform-origin: 90% 60%; }
.span-1 { transform: translate(-30px, -44px) rotate(-40deg); }
.span-2 { transform: translate(-58px, -70px) rotate(-90deg); opacity: 0.8; }
.span-3 { transform: translate(-90px, -40px) rotate(-150deg); opacity: 0.6; }
.span-4 { transform: translate(-14px, -20px) rotate(-10deg); }
.messband-linie { stroke: #6a6258; stroke-width: 2; }
.messband-fuellung { fill: var(--eiche-hell); transform-box: fill-box; transform-origin: left center; transform: scaleX(0.58); }
.messband-ticks { stroke: #c9bdaa; stroke-width: 2; }
.messband-zahlen text { fill: #efe6d6; font-family: var(--serif); font-size: 18px; text-anchor: middle; }

.schritte { list-style: none; display: grid; gap: clamp(20px, 3vw, 28px); padding-block: 4vh 10vh; }
.schritt-karte {
  position: relative;
  padding: 28px 30px 30px;
  border-radius: 10px;
  background: #2f2c28;
  border: 1px solid #45403a;
  min-height: 34vh;
}
.schritt-nr {
  width: 44px; height: 44px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--eiche-hell);
  color: var(--eiche-hell);
  font-family: var(--serif);
  font-size: 1.25rem;
}
.schritt-karte h3 { font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); line-height: 1.15; color: #fbf4e7; }
.schritt-karte p:last-child { margin-top: 10px; color: #cfc3b1; }

/* Scroll-getriebene Animationen – nur wo unterstützt und Bewegung erwünscht */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hobel-bahn {
      animation: hobel-fahrt linear both;
      animation-timeline: --ablauf;
      animation-range: contain 0% contain 100%;
    }
    .brett-glatt {
      animation: brett-glatt linear both;
      animation-timeline: --ablauf;
      animation-range: contain 0% contain 100%;
    }
    .messband-fuellung {
      animation: band-fuellen linear both;
      animation-timeline: --ablauf;
      animation-range: contain 0% contain 100%;
    }
    .spaene-liegend path {
      animation: span-liegt linear both;
      animation-timeline: --ablauf;
      animation-range: contain 0% contain 100%;
    }
    .spaene-liegend path:nth-child(2) { animation-range: contain 10% contain 100%; }
    .spaene-liegend path:nth-child(3) { animation-range: contain 25% contain 100%; }
    .spaene-liegend path:nth-child(4) { animation-range: contain 40% contain 100%; }
    .span-1, .span-3 {
      animation: span-flug-a linear both;
      animation-timeline: --ablauf;
      animation-range: contain 0% contain 100%;
    }
    .span-2, .span-4 {
      animation: span-flug-b linear both;
      animation-timeline: --ablauf;
      animation-range: contain 0% contain 100%;
    }
    .span-3, .span-4 { stroke-width: 2.4; }
    .schritt-karte {
      animation: schritt-rein linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }
  }
}
@keyframes hobel-fahrt { from { transform: translateX(150px); } to { transform: translateX(520px); } }
@keyframes brett-glatt { from { clip-path: inset(0 84% 0 0); } to { clip-path: inset(0 10% 0 0); } }
@keyframes band-fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes span-liegt { 0% { opacity: 0; transform: translateY(-14px); } 20%, 100% { opacity: 1; transform: none; } }
/* Späne: mehrere Flüge über den Scrollweg, gegeneinander versetzt */
@keyframes span-flug-a {
  0%, 20%, 40%, 60%, 80% { transform: translate(0, 0) rotate(0) scale(0.2); opacity: 0; }
  3%, 23%, 43%, 63%, 83% { opacity: 1; }
  16%, 36%, 56%, 76%, 96% { transform: translate(-70px, -86px) rotate(-200deg) scale(1); opacity: 0; }
  19.9%, 39.9%, 59.9%, 79.9%, 100% { transform: translate(-70px, -86px) rotate(-200deg) scale(1); opacity: 0; }
}
@keyframes span-flug-b {
  0% { transform: translate(-40px, -60px) rotate(-120deg) scale(0.8); opacity: 0.6; }
  6% { transform: translate(-60px, -80px) rotate(-170deg) scale(1); opacity: 0; }
  10%, 30%, 50%, 70%, 90% { transform: translate(0, 0) rotate(0) scale(0.2); opacity: 0; }
  13%, 33%, 53%, 73%, 93% { opacity: 1; }
  26%, 46%, 66%, 86% { transform: translate(-44px, -104px) rotate(-240deg) scale(0.9); opacity: 0; }
  29.9%, 49.9%, 69.9%, 89.9%, 100% { transform: translate(-44px, -104px) rotate(-240deg) scale(0.9); opacity: 0; }
}
@keyframes schritt-rein {
  from { opacity: 0.2; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Holzarten ---------- */
.lexikon {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.holzkarte {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
}
.holzkarte-muster {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--papier-3);
}
.holzkarte[data-holz='eiche'] .holzkarte-muster { background: #c9a06c; }
.holzkarte[data-holz='nussbaum'] .holzkarte-muster { background: #6e4a33; }
.holzkarte[data-holz='esche'] .holzkarte-muster { background: #e0cba3; }
.holzkarte[data-holz='ahorn'] .holzkarte-muster { background: #ecdfc4; }
.holzkarte[data-holz='kirsche'] .holzkarte-muster { background: #b57a55; }
.holzkarte[data-holz='buche'] .holzkarte-muster { background: #d9b18d; }
.holzkarte-text { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 18px; flex: 1; }
.holzkarte h3 { font-family: var(--serif); font-size: 1.6rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.holzkarte h3 span { font-family: var(--sans); font-style: italic; font-size: 0.95rem; color: var(--text-2); }
.holzkarte p { color: var(--text-2); }
.holzkarte dl { margin: 4px 0 0; display: grid; gap: 0; border-top: 1px solid var(--linie-fein); }
.holzkarte dl div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie-fein); font-size: 0.93rem; }
.holzkarte dt { font-weight: 700; }
.holzkarte dd { margin: 0; color: var(--text-2); }
.holzkarte .textknopf { align-self: flex-start; margin-top: auto; }
.holzkarte-hinweis { margin-top: auto !important; min-height: 44px; display: flex; align-items: center; font-size: 0.9rem; font-weight: 650; }

/* ---------- Referenzen ---------- */
.referenzen { background: var(--papier-2); border-block: 1px solid var(--linie-fein); }
.ref-raster {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.ref { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); }
.ref-gross { grid-column: span 2; grid-row: span 2; }
.ref-bild { width: 100%; height: auto; background: #f9f5ee; }
.ref-gross .ref-bild { flex: 1; min-height: 0; }
.ref-wand { fill: #f9f5ee; }
.ref-linie, .ref-linie rect, .ref-linie path { stroke: var(--anthrazit); stroke-width: 1.3; stroke-linejoin: round; }
.ref-innen { fill: #efe7da; }
.ref-geraet { fill: #d9d4cc; }
.ref-geraet-detail { fill: none; stroke: var(--anthrazit); stroke-width: 1.2; }
.ref-sockel { fill: #3b3834; }
.ref-regal-inhalt rect, .ref-regal-inhalt circle { fill: #b9a98c; stroke: var(--anthrazit); stroke-width: 1; }
.ref-regal-inhalt rect:nth-child(3n) { fill: #7c8c7f; }
.ref-griff { fill: none; stroke: var(--anthrazit); stroke-width: 2; stroke-linecap: round; opacity: 0.75; }
.ref-griff-hell { stroke: #e9d3ad; opacity: 1; stroke-width: 3; }
.ref-fuellung { fill: none; stroke: #2a1d14; stroke-width: 1.3; opacity: 0.8; }
.ref-knopf circle { fill: #3b2a1c; }
.ref-boden { stroke: var(--anthrazit); stroke-width: 1.6; fill: none; }
.buecher rect { fill: #7c8c7f; }
.buecher rect:nth-child(3n) { fill: #b5654a; }
.buecher rect:nth-child(4n) { fill: #2f4b3f; }
.buecher rect:nth-child(5n) { fill: #d8b46b; }
.buecher .kiste { fill: #c3ad8b; stroke: var(--anthrazit); stroke-width: 1; }
.ref-mass { fill: none; stroke: var(--wald); stroke-width: 1.2; }
.ref-masszahl { fill: var(--wald); font-family: var(--sans); font-size: 14px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #f9f5ee; stroke-width: 6px; }
.ref-notiz { fill: none; stroke: var(--wald); stroke-width: 1.3; }
.ref-notiz circle { fill: var(--wald); }
.ref-notiz text { fill: var(--wald); stroke: none; font-family: var(--sans); font-size: 13px; font-weight: 700; }
.ref-fuge { stroke: #2a1d14; stroke-width: 1; opacity: 0.45; fill: none; }
.ref-schwalben path { fill: #e3cfa6; stroke: #2a1d14; stroke-width: 1; }
.ref-verdeckt { fill: none; stroke: #f3e6cf; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.7; }
.ref-text { padding: 18px 22px 22px; border-top: 1px solid var(--linie-fein); }
.ref-text h3 { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.ref-text p { margin-top: 6px; font-size: 0.93rem; color: var(--text-2); }

.stimmen { margin-top: clamp(56px, 7vw, 96px); }
.stimmen-titel { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 28px; }
.stimmen-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(18px, 2vw, 28px); }
.stimmen-liste li { position: relative; padding: 62px 26px 24px; background: var(--papier); border-radius: 10px; border: 1px solid var(--linie); }
.stimmen-liste li::before {
  content: '„';
  position: absolute;
  top: -14px; left: 22px;
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--eiche);
}
.stimmen-liste blockquote { margin: 0; font-size: 1.06rem; }
.stimme-wer { margin-top: 14px; font-size: 0.9rem; font-weight: 700; color: var(--text-2); }

/* ---------- Team ---------- */
.team { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(22px, 3vw, 40px); }
.person h3 { font-family: var(--serif); font-size: 1.4rem; margin-top: 18px; }
.person-rolle { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wald); margin-top: 4px; }
.person p:last-child { margin-top: 10px; color: var(--text-2); font-size: 0.97rem; }
.avatar { width: min(160px, 60%); height: auto; }
.avatar-grund { fill: var(--papier-3); }
.avatar-ringe { fill: none; stroke: #d3c4a8; stroke-width: 1.5; }

.ausbildung {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 12px;
  background: var(--wald);
  color: #eef1ea;
}
.ausbildung :focus-visible { outline-color: var(--eiche-hell); }
.ausbildung-marke {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 3px;
  background: var(--eiche-hell);
  color: var(--anthrazit);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ausbildung h3 { font-family: var(--serif); font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.08; margin-top: 16px; color: #fbf6ec; }
.ausbildung-text > p:not(.ausbildung-marke) { margin-top: 16px; max-width: 56ch; color: #dbe4db; }
.ausbildung-liste { margin: 18px 0 26px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.ausbildung-liste li { padding-left: 26px; position: relative; }
.ausbildung-liste li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 14px; height: 2px; background: var(--eiche-hell); }
.ausbildung-bild { color: #eef1ea; width: 100%; max-width: 340px; justify-self: center; }
.ausb-oben { fill: #e3c99f; stroke: #13241c; stroke-width: 1.6; stroke-linejoin: round; }
.ausb-unten { fill: #c49a63; stroke: #13241c; stroke-width: 1.6; stroke-linejoin: round; }
.ausb-pfeil { fill: none; stroke: var(--eiche-hell); stroke-width: 1.4; stroke-dasharray: 4 4; }
.ausb-pfeilspitze { fill: var(--eiche-hell); }
.ausb-mass { fill: none; stroke: var(--eiche-hell); stroke-width: 1.4; }
.ausb-text { fill: var(--eiche-hell); font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-anchor: middle; text-transform: uppercase; }

/* ---------- Anfrage ---------- */
.anfrage-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.anfrage .abschnitt-kopf { position: sticky; top: calc(var(--kopf-h) + 24px); margin-bottom: 0; }
.anfrage-alternativ { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); color: var(--text-2); line-height: 1.9; }
.anfrage-alternativ a { font-weight: 700; }

.formular-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 40px);
  box-shadow: 0 30px 60px -40px rgb(60 40 20 / 0.35);
}
.fortschritt { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fortschritt li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 0.8rem; color: var(--text-2); }
.fs-nr {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--linie);
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--weiss);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.fortschritt li[data-zustand='fertig'] .fs-nr { background: var(--wald-hell); border-color: var(--wald); color: var(--wald); }
.fortschritt li[aria-current='step'] { color: var(--text); font-weight: 700; }
.fortschritt li[aria-current='step'] .fs-nr { background: var(--wald); border-color: var(--wald); color: var(--weiss); }
.fortschritt-band {
  position: relative;
  height: 10px;
  margin: 14px 0 28px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 2%) 0 100% / 100% 50% no-repeat,
    var(--papier-2);
  overflow: hidden;
}
.fortschritt-band span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: var(--wald);
  transition: width 0.4s ease;
}

.form-schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.schritt-titel {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  padding: 0;
  margin-bottom: 20px;
}
/* Überschrift wird nur per Skript fokussiert (Orientierung für Screenreader) – ohne Rahmen */
.schritt-titel:focus, .schritt-titel:focus-visible { outline: none; }

.projekt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.projekt-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.projekt-karte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.projekt-karte span { font-weight: 700; }
.projekt-karte small { color: var(--text-2); font-size: 0.85rem; }
.projekt-karte:hover { border-color: var(--anthrazit); }
.projekt-karte:has(input:checked) { border-color: var(--wald); box-shadow: 0 0 0 2px var(--wald) inset; background: #f3f7f2; }
.projekt-karte:has(input:focus-visible) { outline: 3px solid var(--wald); outline-offset: 2px; }

.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; min-width: 0; }
.feld label, .unterfeld legend { font-weight: 700; }
.optional { font-weight: 450; color: var(--text-2); }
.feld input, .feld select, .feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid #b5a68d;
  border-radius: var(--radius);
  background: var(--weiss);
  font-size: 1rem;
}
.feld textarea { resize: vertical; min-height: 110px; }
.feld select {
  appearance: none;
  background: var(--weiss) 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' stroke='%23262421' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  padding-right: 40px;
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--wald); outline-offset: 1px; border-color: var(--wald); }
.feld [aria-invalid='true'] { border-color: var(--fehler); background: #fdf3f0; }
.feld-hilfe { font-size: 0.88rem; color: var(--text-2); }
.feld-fehler { color: var(--fehler); font-size: 0.9rem; font-weight: 650; display: flex; gap: 6px; align-items: center; }
.feld-fehler::before { content: '!'; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fehler); color: #fff; font-size: 0.75rem; flex: none; }
.feld-fehler[hidden] { display: none; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.unterfeld { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.unterfeld legend { padding: 0; margin-bottom: 10px; }
.masse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.masse .feld label { font-weight: 550; font-size: 0.92rem; }

.optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.option { position: relative; display: inline-flex; }
.option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.option span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.option:hover span { border-color: var(--anthrazit); }
.option input:checked + span { background: var(--wald); border-color: var(--wald); color: var(--weiss); }
.option input:focus-visible + span { outline: 3px solid var(--wald); outline-offset: 2px; }
.fehler-feld .option span, .fehler-feld .projekt-karte { border-color: var(--fehler); }

.haken { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; cursor: pointer; }
.haken input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--wald); cursor: pointer; }
.haken input[aria-invalid='true'] { outline: 2px solid var(--fehler); outline-offset: 2px; }

.fehler-liste {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-left: 4px solid var(--fehler);
  background: #fbefe9;
  border-radius: 4px;
}
.fehler-liste p { font-weight: 700; color: var(--fehler); }
.fehler-liste ul { margin-top: 6px; padding-left: 20px; }
.fehler-liste a { color: var(--fehler); }
.form-hinweis {
  margin-bottom: 22px;
  padding: 14px 18px;
  border-radius: 6px;
  background: var(--wald-hell);
  border: 1px solid #a9c4ae;
}
.form-hinweis strong { display: block; }

.zusammenfassung { margin: 0; display: grid; border-top: 1px solid var(--linie-fein); }
.zusammenfassung div { display: grid; grid-template-columns: 11em 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie-fein); }
.zusammenfassung dt { font-weight: 700; }
.zusammenfassung dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.zusammenfassung button { min-height: 44px; }

.form-knoepfe { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linie-fein); }
.form-knoepfe #form-weiter, .form-knoepfe #form-senden { margin-left: auto; }

.form-erfolg { text-align: center; padding: 20px 0; }
.form-erfolg svg { width: 64px; height: 64px; margin: 0 auto 14px; fill: none; stroke: var(--wald); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.form-erfolg h3 { font-family: var(--serif); font-size: 2rem; }
.form-erfolg p { margin-top: 10px; color: var(--text-2); }
.form-erfolg .demo-hinweis { display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 4px; background: #f6e7c8; color: #5d4415; font-weight: 700; }
.form-erfolg .knopf { margin-top: 22px; }
.form-erfolg:focus { outline: none; }

/* ---------- Besuch ---------- */
.besuch-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.zeiten-block + .zeiten-block { margin-top: 30px; }
.zeiten h3 { font-family: var(--serif); font-size: 1.45rem; }
.status-gross { margin-top: 8px; font-weight: 700; font-size: 0.98rem; }
[data-offen='ja'].status-gross { color: #1c6b43; }
[data-offen='bald'].status-gross { color: #87570f; }
[data-offen='nein'].status-gross { color: #8b3a26; }
.zeiten-tabelle { width: 100%; margin-top: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten-tabelle th, .zeiten-tabelle td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--linie-fein); font-weight: 450; vertical-align: top; }
.zeiten-tabelle th { font-weight: 700; width: 7.5em; padding-right: 12px; }
.zeiten-tabelle tr.heute th, .zeiten-tabelle tr.heute td { color: var(--wald); font-weight: 700; }
.zeiten-tabelle tr.heute th::after { content: ' · heute'; font-weight: 500; font-size: 0.85em; }
.zeiten-hinweis { margin-top: 20px; font-size: 0.93rem; color: var(--text-2); }
.adresse { margin-top: 26px; padding: 20px 22px; border: 1px solid var(--linie); border-radius: 10px; background: var(--weiss); font-style: normal; line-height: 1.75; }
.adresse a { font-weight: 650; }

.karte { margin: 0; }
.karte-svg { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linie); }
.k-grund { fill: #ece5d6; }
.k-feld { fill: #e3dcc3; }
.k-wald { fill: #c5d1bc; }
.k-baeume circle { fill: #a9bba0; }
.k-bach { fill: none; stroke: #9fb9c4; stroke-width: 10; stroke-linecap: round; }
.k-bach-name { fill: #3f6070; font-family: var(--sans); font-size: 13px; font-style: italic; font-weight: 600; }
.k-bahn { fill: none; stroke: #7d756a; stroke-width: 4; }
.k-bahn-quer { fill: none; stroke: #ece5d6; stroke-width: 2; stroke-dasharray: 10 10; }
.k-str-rand path { fill: none; stroke: #bcae95; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.k-str path { fill: none; stroke: #fffaf1; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.k-route { fill: none; stroke: var(--wald); stroke-width: 4; stroke-dasharray: 2 8; stroke-linecap: round; }
.k-haus rect { fill: #d6cab4; stroke: #b9a98c; stroke-width: 1; }
.k-werkstatt rect, .k-werkstatt path { fill: #8a6a48; stroke: #3c2c1d; stroke-width: 1.5; }
.k-park rect { fill: #2f5d8a; }
.k-park text { fill: #fff; font-family: var(--sans); font-weight: 800; font-size: 15px; text-anchor: middle; }
.k-halt circle { fill: #f2c94c; stroke: #3c3528; stroke-width: 1.5; }
.k-halt text { fill: #3c3528; font-family: var(--sans); font-weight: 800; font-size: 12px; text-anchor: middle; }
.k-pin path { fill: var(--wald); stroke: #fffaf1; stroke-width: 2; }
.k-pin-innen { fill: #fffaf1; }
.k-pin-ring { fill: none; stroke: var(--wald); stroke-width: 2.5; }
.k-namen text { fill: #4d463d; font-family: var(--sans); font-size: 13px; font-weight: 600; }
.k-namen .k-ort { font-size: 15px; font-weight: 800; letter-spacing: 0.22em; fill: #3a342d; }
.k-namen .k-werkstatt-name { font-family: var(--serif); font-size: 18px; font-weight: 400; fill: var(--wald); text-anchor: end; paint-order: stroke; stroke: #ece5d6; stroke-width: 5px; }
.k-nord path { fill: var(--anthrazit); }
.k-nord text { fill: var(--anthrazit); font-family: var(--sans); font-weight: 800; font-size: 13px; text-anchor: middle; }
.k-massstab path { fill: none; stroke: var(--anthrazit); stroke-width: 1.5; }
.k-massstab text { fill: var(--anthrazit); font-family: var(--sans); font-size: 12px; font-weight: 700; text-anchor: middle; }
.anfahrt-liste { list-style: none; margin-top: 18px; display: grid; gap: 10px; font-size: 0.97rem; color: var(--text-2); }
.anfahrt-liste strong { color: var(--text); }

/* ---------- Fuß ---------- */
.fuss { background: var(--anthrazit); color: #d8cfbf; padding-block: clamp(48px, 6vw, 80px) 40px; }
.fuss a { color: #f4ead8; }
.fuss :focus-visible { outline-color: var(--eiche-hell); }
.fuss-raster { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px 48px; }
.fuss-name { font-family: var(--serif); font-size: 2rem; color: #fbf4e7; margin-bottom: 10px; }
.fuss-marke p + p { margin-top: 12px; }
.fuss-nav ul { list-style: none; columns: 2; column-gap: 32px; }
.fuss-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 550; }
.fuss-nav a:hover { text-decoration: underline; }
.fuss-studie { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid #45403a; font-size: 0.9rem; color: #bdb09c; }

/* ---------- Anruf-Leiste (nur Handy) ---------- */
.anruf-leiste { display: none; }


/* ---------- Textseite (Impressum) ---------- */
.kopf-einfach { top: 0; }
.kopf-zurueck { margin-left: auto; }
.textinhalt { max-width: calc(760px + 2 * var(--rand)); padding-block: clamp(48px, 7vw, 96px); }
.textinhalt h1 { font-size: clamp(2.4rem, 1.8rem + 3vw, 4rem); }
.textinhalt h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin-top: 40px; margin-bottom: 10px; }
.textinhalt p + p { margin-top: 12px; }
.fiktiv-hinweis { margin-top: 24px; padding: 16px 20px; border-radius: 8px; background: #f6e7c8; color: #4d3912; }
.klein { font-size: 0.9rem; color: var(--text-2); }
.zurueck-link { margin-top: 48px !important; }
.zurueck-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .hauptnav ul a { padding: 0 7px; font-size: 0.9rem; }
  .kopf-adresse { display: none; }
}

@media (max-width: 1040px) {
  .menue-knopf { display: inline-flex; }
  .hauptnav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px var(--rand) 24px;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 20px 30px -20px rgb(0 0 0 / 0.25);
    display: none;
  }
  .hauptnav.ist-offen { display: flex; }
  .hauptnav ul { flex-direction: column; }
  .hauptnav ul a { display: flex; min-height: 48px; font-size: 1.05rem; padding: 0 8px; border-bottom: 1px solid var(--linie-fein); border-radius: 0; }
  .kopf-innen { position: relative; }

  .held-raster { grid-template-columns: 1fr; }
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .held-bild { max-width: 520px; width: 100%; margin-inline: auto; }

  .konf { grid-template-columns: 1fr; }
  .konf-buehne { top: calc(var(--kopf-h) + 8px); z-index: 5; }

  .ablauf-raster { grid-template-columns: 1fr; }
  .ablauf-buehne { top: calc(var(--kopf-h) + 8px); z-index: 2; }
  .schritt-karte { min-height: 0; }
  .schritte { padding-block: 8px 30vh; }

  .ref-raster { grid-template-columns: 1fr 1fr; }
  .ref-gross { grid-column: 1 / -1; grid-row: auto; }

  .anfrage-raster { grid-template-columns: 1fr; }
  .anfrage .abschnitt-kopf { position: static; }
  .besuch-raster { grid-template-columns: 1fr; }
  .ausbildung { grid-template-columns: 1fr; }
  .ausbildung-bild { max-width: 280px; justify-self: start; }
}

@media (max-width: 760px) {
  :root { --kopf-h: 60px; }
  .kopf { top: 0; }
  .kopf-leiste { display: none; }
  .marke-zeichen { width: 38px; height: 38px; }
  .marke-name { font-size: 1.35rem; }
  .menue-wort { display: none; }
  .menue-knopf { padding: 0; justify-content: center; width: 48px; }

  .fakten { grid-template-columns: 1fr; gap: 12px; }
  .leistungen { grid-template-columns: 1fr; }
  .fakten li { flex-direction: row; gap: 8px; flex-wrap: wrap; }
  .notiz { font-size: 0.66rem; padding: 2px 6px; }

  .konf-buehne { aspect-ratio: auto; height: min(46svh, 380px); border-radius: 8px; }
  .konf-zeichnung { padding: 8px 8px 58px; }
  .konf-werkzeuge { left: 8px; right: 8px; bottom: 8px; gap: 4px; }
  .werkzeug { padding: 0 10px; font-size: 0.8rem; }
  .werkzeug-modus { right: 8px; top: 8px; }
  .konf-hinweis { left: 8px; top: 8px; }
  .konf-status { display: none; }
  .wahl-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wahl-paar { grid-template-columns: 1fr; }

  .ablauf-buehne { padding: 8px; }
  .schritt-karte { padding: 22px 20px 24px; }
  .schritt-nr { width: 38px; height: 38px; margin-bottom: 12px; }

  .ref-raster { grid-template-columns: 1fr; }
  .feld-paar { grid-template-columns: 1fr; }
  .masse { grid-template-columns: 1fr 1fr; }
  .fortschritt .fs-text { display: none; }
  .fortschritt li { position: relative; }
  .fortschritt li[aria-current='step'] .fs-text { display: block; position: absolute; top: 36px; left: 0; white-space: nowrap; }
  .fortschritt li[data-schritt='5'][aria-current='step'] .fs-text, .fortschritt li[data-schritt='4'][aria-current='step'] .fs-text { left: auto; right: 0; }
  .fortschritt { margin-bottom: 30px; }
  .fortschritt-band { margin-top: 14px; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .avatar { width: 110px; }
  .person h3 { font-size: 1.2rem; margin-top: 12px; }
  .person-rolle { font-size: 0.72rem; }
  .person p:last-child { font-size: 0.9rem; }
  .ref-masszahl { font-size: 24px; stroke-width: 8px; }
  .wz-text { font-size: 26px; }
  .wz-titel { font-size: 20px; }
  .scheibe-mass text { font-size: 26px; stroke-width: 16px; }
  .zusammenfassung div { grid-template-columns: 1fr auto; }
  .zusammenfassung dd { grid-column: 1 / -1; grid-row: 2; }
  .form-knoepfe .knopf { flex: 1; }

  .fuss-raster { grid-template-columns: 1fr; }
  body { padding-bottom: 76px; }
  .anruf-leiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--papier) 94%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--linie);
  }
  .anruf-knopf, .anruf-anfrage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: var(--radius);
    font-weight: 700;
    text-decoration: none;
  }
  .anruf-knopf { background: var(--wald); color: var(--weiss); }
  .anruf-knopf svg { width: 20px; height: 20px; fill: currentColor; }
  .anruf-anfrage { border: 2px solid var(--wald); color: var(--wald); background: var(--weiss); }
}

@media (min-width: 1800px) {
  :root { --max: 1480px; }
  body { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}