@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-italic-300-700-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-italic-300-700-latin.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: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-normal-300-700-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-normal-300-700-latin.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: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/intertight-normal-400-700-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/intertight-normal-400-700-latin.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;
}

/* Tischlerei Eichenwald — Musterprojekt von Somers Design.
   Helle Fassung: Papier, Tinte, Eiche. Dunkle Kapitel (Auftakt, Jahresringe, Anfrage, Fuß) haben eigene helle Textfarben.
   Kontraste vorab gerechnet: Tinte/Papier 15,3 · Tinte-2/Papier 7,3 · Eiche/Papier 6,4 · Hell/Nussbaum 14,1 · Hell-2/Nussbaum 8,7 */
:root {
  --papier: #F5EFE6;
  --papier-2: #ECE3D5;
  --weiss: #FBF8F3;
  --tinte: #1E1914;
  --tinte-2: #5A4B3C;
  --eiche: #7B4B1F;
  --eiche-tief: #5E3914;
  --eiche-hell: #D9A066;
  --nuss: #261C15;
  --nuss-tief: #1A130E;
  --hell: #F4EBDF;
  --hell-2: #C9B9A6;
  --linie: rgba(30, 25, 20, .14);
  --linie-hell: rgba(244, 235, 223, .18);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --rand: clamp(16px, 4vw, 48px);
  --abstand: clamp(72px, 11vw, 150px);
  --sanft: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; margin: 0; font-variation-settings: "opsz" 120; }
h2 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); margin-bottom: 22px; }
h3 { font-size: 1.5rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.bahn { width: min(1240px, 100% - 2 * var(--rand)); margin-inline: auto; }
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--tinte); color: var(--hell); border-radius: 6px; }
.sprung:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--eiche); outline-offset: 3px; }
.kapitel { font-family: var(--sans); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--eiche); margin-bottom: 18px; }

.knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--eiche); color: #FFFFFF; font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s, transform .2s var(--sanft); }
.knopf:hover { background: var(--eiche-tief); transform: translateY(-1px); }
.knopf-klein { min-height: 40px; padding: 8px 18px; font-size: .9375rem; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: .25em; }
.textlink.hell { color: var(--hell); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0; }

/* Musterleiste und Kopf */
.muster-leiste { background: var(--nuss-tief); color: var(--hell-2); font-size: .8125rem; text-align: center; }
.muster-leiste p { margin: 0; padding: 7px var(--rand); }
.muster-leiste a { color: var(--hell); display: inline-block; padding-block: 3px; }
.kopf { background: var(--papier); border-bottom: 1px solid var(--linie); position: relative; z-index: 20; }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marke-zeichen { width: 40px; height: 40px; fill: none; stroke: var(--tinte); stroke-width: 1.4; }
.marke-zeichen .kern { fill: var(--eiche); stroke: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.1; }
.marke-name { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.marke-zusatz { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); margin-top: 3px; }
.hauptnav { display: flex; align-items: center; gap: 28px; }
.hauptnav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.hauptnav ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; font-weight: 500; font-size: .975rem; border-radius: 6px; }
.hauptnav ul a:hover { color: var(--eiche); }
.menue-knopf { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 999px; background: transparent; color: var(--tinte); font: 600 .95rem var(--sans); cursor: pointer; }
@media (max-width: 920px) {
  .menue-knopf { display: inline-flex; }
  .hauptnav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px var(--rand) 22px; background: var(--papier); border-bottom: 1px solid var(--linie); }
  .js .hauptnav:not(.offen) { display: none; }
  .hauptnav ul { flex-direction: column; }
  .hauptnav .knopf { align-self: flex-start; }
}

/* Auftakt */
.auftakt { position: relative; min-height: min(92svh, 920px); display: grid; align-items: end; overflow: hidden; background: var(--nuss); color: var(--hell); isolation: isolate; }
.auftakt-bild { position: absolute; inset: 0; z-index: -1; }
.auftakt-bild img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.auftakt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26, 19, 14, .35) 0%, rgba(26, 19, 14, .5) 45%, rgba(26, 19, 14, .9) 100%), linear-gradient(90deg, rgba(26, 19, 14, .75) 0%, rgba(26, 19, 14, 0) 70%); }
.auftakt-inhalt { padding-block: 120px clamp(64px, 9vw, 110px); }
.auftakt-marke { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-2); margin-bottom: 22px; }
.auftakt h1 { font-size: clamp(2.7rem, 7.4vw, 7rem); font-weight: 300; line-height: .92; letter-spacing: -.035em; margin-bottom: 30px; color: var(--hell); }
.auftakt h1 em { font-style: italic; color: var(--eiche-hell); font-weight: 300; }
.auftakt-lede { max-width: 34em; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #E7DCCD; margin-bottom: 34px; }
.auftakt-hinweis { position: absolute; right: var(--rand); bottom: 40px; width: 44px; height: 70px; display: grid; justify-items: center; }
.auftakt-hinweis span { width: 1px; height: 100%; background: linear-gradient(var(--hell), transparent); }
.bewegt .auftakt-hinweis span { animation: tropfen 2.4s var(--sanft) infinite; transform-origin: top; }
@keyframes tropfen { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 700px) { .auftakt-hinweis { display: none; } }

/* Titelmaske */
.maske .zeile { display: block; overflow: hidden; padding-bottom: .06em; }
.maske .zeile > span { display: inline-block; }
.bewegt .maske .zeile > span { transform: translateY(105%); transition: transform 1.1s var(--sanft); }
.bewegt .maske .zeile:nth-child(2) > span { transition-delay: .12s; }
.bewegt .maske.in .zeile > span { transform: none; }

/* Einblenden */
.bewegt .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--sanft), transform .9s var(--sanft); }
.bewegt .rv.in { opacity: 1; transform: none; }

/* Laufband der Hölzer */
.laufband { overflow: hidden; border-bottom: 1px solid var(--linie); background: var(--papier); padding-block: clamp(18px, 3vw, 30px); }
.laufband-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0 var(--rand); }
.laufband li { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.15; padding-inline: .45em; white-space: nowrap; }
.laufband li::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .9em; border: 2px solid var(--eiche); border-radius: 50%; vertical-align: .18em; }
.laufband.laeuft .laufband-reihe { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0; animation: laufen 46s linear infinite; }
.laufband.ruht .laufband-reihe { animation-play-state: paused; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* I · Jahresringe */
.jahresringe { background: var(--nuss); color: var(--hell); padding-block: var(--abstand); }
.jahresringe .kapitel { color: var(--eiche-hell); }
.jr-strecke { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.jr-buehne { position: sticky; top: 6vh; height: 88vh; display: grid; align-content: center; justify-items: center; gap: 12px; }
.jr-ringe { width: min(100%, 72vh); aspect-ratio: 1; }
.jr-ringe .r { fill: none; stroke: var(--hell-2); stroke-opacity: .5; stroke-width: .5; }
.jr-ringe .gen { stroke: var(--eiche-hell); stroke-opacity: 1; stroke-width: 1.1; }
.jr-mark { fill: var(--eiche-hell); }
.bewegt .jr-ringe .r { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--sanft); }
.bewegt .jr-ringe .r.an { stroke-dashoffset: 0; }
.jr-jahr { margin: 0; text-align: center; }
.jr-zahl { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 6.5vw, 5.6rem); line-height: 1; color: var(--eiche-hell); font-variant-numeric: tabular-nums; }
.jr-unter { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-2); }
.jr-texte { position: relative; z-index: 1; padding-block: 8vh 4vh; }
.jr-kopf h2 { color: var(--hell); }
.jr-kopf p:last-child, .jr-eintrag p:last-child, .jr-heute { color: var(--hell-2); font-size: 1.125rem; }
.jr-eintrag { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--linie-hell); padding-block: 40px; }
.jr-eintrag-jahr { font-family: var(--serif); font-size: clamp(3rem, 6vw, 4.8rem); font-weight: 300; line-height: 1; color: var(--eiche-hell); margin-bottom: 14px; }
.jr-eintrag h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--hell); margin-bottom: 12px; }
.jr-heute { border-top: 1px solid var(--linie-hell); padding-top: 32px; margin: 0; }
@media (max-width: 900px) {
  .jr-strecke { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jr-buehne { top: 0; z-index: 2; height: auto; padding-block: 18px 14px; background: var(--nuss); grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 18px; border-bottom: 1px solid var(--linie-hell); }
  .jr-ringe { width: min(42vw, 30vh); }
  .jr-jahr { text-align: left; }
  .jr-eintrag { min-height: 0; padding-block: 44px; }
}

/* II · Holzbibliothek */
.holz { padding-block: var(--abstand); }
.holz-kopf { max-width: 760px; margin-bottom: 40px; }
.holz-kopf p:last-child { color: var(--tinte-2); font-size: 1.125rem; }
.holz-wahl { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.js .holz-wahl { display: flex; }
.holz-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 22px 8px 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--tinte); font: 600 1rem var(--sans); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.holz-tab[aria-selected="true"] { background: var(--tinte); color: var(--hell); border-color: var(--tinte); }
.holz-punkt { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background-size: cover; }
.holz-eiche { background: radial-gradient(circle at 30% 30%, #C99A60, #9A6A38); }
.holz-nussbaum { background: radial-gradient(circle at 30% 30%, #6B4A33, #3B2618); }
.holz-esche { background: radial-gradient(circle at 30% 30%, #EFE2CB, #D4BE98); }
.holz-panels { display: grid; gap: 56px; }
.holz-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.holz-bild { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papier-2); }
.holz-bild img { width: 100%; height: 100%; object-fit: cover; }
.holz-blatt h3 { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 300; margin-bottom: 14px; }
.holz-text { color: var(--tinte-2); font-size: 1.125rem; }
.datenblatt { margin: 26px 0 0; border-top: 1px solid var(--tinte); }
.datenblatt div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); align-items: center; }
.datenblatt dt { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.datenblatt dd { margin: 0; }
.skala { display: block; width: 140px; height: 8px; border-radius: 8px; background: var(--papier-2); overflow: hidden; }
.skala i { display: block; height: 100%; width: var(--w); background: var(--eiche); border-radius: 8px; }
.bewegt .holz-panel .skala i { width: 0; transition: width 1s var(--sanft) .25s; }
.bewegt .holz-panel.zeigt .skala i { width: var(--w); }
.bewegt .holz-panel.zeigt .holz-bild img { animation: wisch 1s var(--sanft); }
.bewegt .holz-panel.zeigt .holz-blatt { animation: heben .8s var(--sanft); }
@keyframes wisch { from { clip-path: inset(0 100% 0 0); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes heben { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 900px) { .holz-panel { grid-template-columns: minmax(0, 1fr); } }

/* III · Werkstücke, seitliche Strecke */
.werkstuecke { background: var(--papier-2); padding-top: var(--abstand); }
.werk-kopf { margin-bottom: 32px; }
.werk-hinweis { color: var(--tinte-2); }
.werk-strecke { padding-bottom: var(--abstand); }
.werk-spur { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--rand); scrollbar-width: thin; }
.werk-reihe { display: flex; gap: clamp(18px, 3vw, 40px); list-style: none; margin: 0; padding: 0 0 18px; width: max-content; }
.werk-karte { width: clamp(270px, 42vw, 600px); scroll-snap-align: start; }
.werk-karte figure { margin: 0 0 18px; height: min(54vh, 470px); border-radius: 8px; overflow: hidden; background: var(--papier); }
.werk-karte img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sanft); }
.werk-karte:hover img { transform: scale(1.03); }
.werk-nr { font-family: var(--serif); font-style: italic; color: var(--eiche); font-size: 1.25rem; margin-bottom: 4px; }
.werk-text h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: 6px; }
.werk-meta { font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); margin-bottom: 10px; }
.werk-text p:last-child { color: var(--tinte-2); max-width: 36em; }
.werk-strecke.gepinnt { padding-bottom: 0; }
.werk-strecke.gepinnt .werk-buehne { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: hidden; }
.werk-strecke.gepinnt .werk-spur { overflow: visible; scroll-snap-type: none; min-width: 0; }
.werk-strecke.gepinnt .werk-reihe { will-change: transform; }

/* IV · Zusammenbau */
.zusammenbau { padding-block: var(--abstand); }
.zb-strecke { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.zb-buehne { position: sticky; top: 6vh; height: 88vh; display: grid; align-content: center; justify-items: center; gap: 18px; }
.zb-schrank { width: min(100%, 420px); max-height: 68vh; overflow: visible; }
.teil rect, .teil circle { fill: #B98550; stroke: var(--eiche-tief); stroke-width: .8; transition: fill 1s var(--sanft); }
.teil .rueckwand { fill: #D8B98C; }
.teil .fuge { fill: none; stroke: rgba(94, 57, 20, .45); }
.teil .knauf { fill: var(--tinte); stroke: none; }
.bewegt .zb-schrank:not(.geoelt) .teil rect:not(.fuge) { fill: #E3CBA4; }
.bewegt .zb-schrank:not(.geoelt) .teil .rueckwand { fill: #EEDFC5; }
.teil { transform-box: fill-box; transform-origin: center; }
.zb-stand { margin: 0; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.zb-stand-nr { font-family: var(--serif); font-size: 1.4rem; color: var(--eiche); letter-spacing: 0; }
.zb-texte header p:last-child { color: var(--tinte-2); font-size: 1.125rem; }
.zb-schritte { list-style: none; margin: 40px 0 0; padding: 0; }
.zb-schritt { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; min-height: 46vh; padding-block: 28px; border-top: 1px solid var(--linie); align-content: center; transition: opacity .5s var(--sanft); }
.zb-nr { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--eiche); color: var(--eiche); font-family: var(--serif); font-size: 1.2rem; transition: background-color .4s, color .4s; }
.zb-schritt h3 { margin-bottom: 8px; }
.zb-schritt p { color: var(--tinte-2); margin: 0; }
.bewegt .zb-schritt { opacity: .4; }
.bewegt .zb-schritt.aktiv { opacity: 1; }
.bewegt .zb-schritt.aktiv .zb-nr, .bewegt .zb-schritt.fertig .zb-nr { background: var(--eiche); color: #FFFFFF; }
@media (max-width: 900px) {
  .zb-strecke { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zb-buehne { top: 0; z-index: 2; height: auto; padding-block: 14px; background: var(--papier); border-bottom: 1px solid var(--linie); }
  .zb-schrank { width: auto; height: 30vh; max-height: 260px; }
  .zb-schritt { min-height: 38vh; }
}
@media (max-width: 900px) { .zb-texte header { padding-top: 32px; } }

/* Bildkapitel: Hobelstrich */
.hobelstrich { position: relative; margin: 0; min-height: 88vh; display: grid; align-items: end; overflow: hidden; background: var(--nuss-tief); color: var(--hell); isolation: isolate; }
.hobelstrich-bild { position: absolute; inset: 0; z-index: -1; }
.hobelstrich-bild img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.hobelstrich::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26, 19, 14, .1) 30%, rgba(26, 19, 14, .85) 100%), linear-gradient(90deg, rgba(26, 19, 14, .55) 0%, rgba(26, 19, 14, 0) 65%); }
.hobelstrich figcaption { padding-bottom: clamp(56px, 9vw, 110px); }
.hobel-satz { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.08; letter-spacing: -.025em; margin: 0; max-width: 18em; color: var(--hell); }
.hobel-satz em { color: var(--eiche-hell); }
[data-zoom] { will-change: clip-path; }

/* V · Werkstattbuch, Zeitschriftensatz mit Marginalspalte */
.werkstattbuch { padding-block: var(--abstand); }
.buch-satz { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); }
.buch-kopf { grid-column: 1 / -1; }
.buch-absatz { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 24px; padding-block: 22px; border-top: 1px solid var(--linie); }
.buch-absatz p:last-child { margin: 0; font-size: 1.125rem; }
.rand { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--eiche); }
.buch-bild { margin: 0; position: sticky; top: 40px; align-self: start; }
.buch-bild img { border-radius: 8px; }
.buch-bild figcaption { margin-top: 12px; font-size: .9375rem; color: var(--tinte-2); }
@media (max-width: 900px) { .buch-satz { grid-template-columns: minmax(0, 1fr); } .buch-bild { position: static; } }
@media (max-width: 560px) { .buch-absatz { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* VI · Fragen */
.fragen { background: var(--papier-2); padding-block: var(--abstand); }
.fragen-satz { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.frage { border-top: 1px solid var(--tinte); }
.frage:last-child { border-bottom: 1px solid var(--tinte); }
.frage summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.frage summary::-webkit-details-marker { display: none; }
.pm { width: 26px; height: 26px; transition: transform .35s var(--sanft); color: var(--eiche); }
.frage[open] .pm { transform: rotate(45deg); }
.antwort p { color: var(--tinte-2); max-width: 40em; padding-bottom: 8px; }
@media (max-width: 900px) { .fragen-satz { grid-template-columns: minmax(0, 1fr); } }

/* VII · Anfrage (dunkel) */
.anfrage { background: var(--nuss); color: var(--hell); padding-block: var(--abstand); }
.anfrage .kapitel { color: var(--eiche-hell); }
.anfrage h2 { color: var(--hell); }
.anfrage-satz { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.anfrage-kopf p { color: var(--hell-2); font-size: 1.125rem; }
.anfrage-kopf .anfrage-notiz { font-size: .9375rem; border-left: 2px solid var(--eiche-hell); padding-left: 14px; }
.anfrage-form { display: grid; gap: 20px; }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { width: 100%; margin-bottom: 12px; font-weight: 600; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--hell-2); border-radius: 999px; cursor: pointer; transition: background-color .2s, color .2s; }
.chip input:checked + span { background: var(--eiche-hell); border-color: var(--eiche-hell); color: var(--nuss-tief); }
.chip input:focus-visible + span { outline: 3px solid var(--eiche-hell); outline-offset: 3px; }
.feld-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feld { display: grid; gap: 8px; font-weight: 600; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid transparent; border-radius: 8px; background: var(--weiss); color: var(--tinte); font: 400 1rem var(--sans); }
.feld textarea { resize: vertical; }
.feld :focus-visible { outline: 3px solid var(--eiche-hell); outline-offset: 2px; }
.anfrage-form .knopf { justify-self: start; background: var(--eiche-hell); color: var(--nuss-tief); }
.anfrage-form .knopf:hover { background: #E8B57E; }
.muster-antwort { margin: 0; padding: 14px 18px; border-radius: 8px; background: rgba(217, 160, 102, .16); border: 1px solid var(--eiche-hell); color: var(--hell); }
@media (max-width: 900px) { .anfrage-satz { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .feld-reihe { grid-template-columns: minmax(0, 1fr); } }

/* Fuß */
.fuss { background: var(--nuss-tief); color: var(--hell-2); padding-top: 72px; font-size: .9875rem; }
.fuss a { color: var(--hell); display: inline-block; padding-block: 3px; }
.fuss-innen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-bottom: 48px; }
.fuss .marke-zeichen { stroke: var(--eiche-hell); }
.fuss .marke-zeichen .kern { fill: var(--eiche-hell); }
.fuss-name { font-family: var(--serif); font-size: 2rem; color: var(--hell); margin: 12px 0 6px; }
.fuss-titel { color: var(--hell); font-weight: 600; margin-bottom: 8px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss-unten { border-top: 1px solid var(--linie-hell); padding-block: 22px 28px; font-size: .875rem; }
.fuss-unten p { margin: 0; }
@media (max-width: 760px) { .fuss-innen { grid-template-columns: minmax(0, 1fr); } }

/* Rechtliches */
.recht { padding-block: clamp(56px, 8vw, 100px); }
.recht-satz { max-width: 760px; }
.recht h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: 28px; }
.recht h2 { font-size: 1.6rem; margin: 36px 0 10px; }
.recht a:not(.knopf) { display: inline-block; padding-block: 2px; color: var(--eiche); }
.recht-hinweis { padding: 18px 22px; border-radius: 8px; background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--eiche); }
.recht-hinweis p { margin: 0; }

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