/* =====================================================================================
   Vorlage 33 Tischlerei · Gestaltung
   Bautyp Werkbank: Abschnitte sind liegende Bretter (section.brett), Fugen dazwischen, Werkstattzettel
   als Karten darauf, Werkzeugleiste als Navigation, Knöpfe wie Holzklötze, Überschriften als Brandstempel.
   Aufbau: Grundlagen · Brett · Brandstempel · Zettel · Werkzeugleiste · Knöpfe · Das Brett (Hobel) ·
   Vom Stamm zum Tisch (klebend) · Werkstücke · Holzarten · Ablauf · Preise · Stimmen · Fragen · Anfrage · Fuß ·
   Auftritte · Schmal
   Bewegung: nur transform, opacity, clip-path, stroke-dashoffset. Kein Filter über großen Flächen.
   ===================================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 16px); background: var(--bank); }
body { margin: 0; background: var(--bank); color: var(--bank-text); font-family: var(--schrift); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
svg { height: auto; }
h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--brett-link, var(--brand)); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #ffb347; outline-offset: 3px; }
.behaelter { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius); background: var(--papier); color: var(--papier-text); font-weight: 700; }
.sprung:focus { top: 12px; }
.leise { color: var(--brett-leise, var(--papier-leise)); }
.klein { font-size: 14px; }
h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.02; font-weight: 820; font-stretch: 106%; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.3vw, 42px); line-height: 1.06; font-weight: 800; font-stretch: 106%; letter-spacing: -.012em; text-wrap: balance; }
h3 { font-size: 21px; line-height: 1.22; font-weight: 740; letter-spacing: -.005em; }
.mass { color: var(--stift); font-stretch: 90%; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* =====================================================================================
   Brett: ein Abschnitt ist eine liegende Bohle, voll breit, mit Maserung, Kante oben hell, Kante unten dunkel.
   Zwischen zwei Brettern eine Fuge, durch die das Gestell (--bank) zu sehen ist.
   ===================================================================================== */
.brett { position: relative; margin-top: var(--fuge); padding: var(--abstand) 0; background-color: var(--brett); background-image: var(--brett-muster); background-size: var(--brett-groesse, 600px) auto; color: var(--brett-text); box-shadow: inset 0 3px 0 var(--brett-hell), inset 0 -4px 0 var(--brett-dunkel), inset 0 14px 30px -14px rgba(255, 255, 255, .22), inset 0 -16px 30px -14px rgba(0, 0, 0, .22); }
main > .brett:first-child { margin-top: 0; }
.brett:nth-of-type(2n) { background-position: 37% 61%; }
.brett:nth-of-type(3n) { background-position: 71% 23%; }
.brett h2 { color: var(--titel); }
.brett .leise { color: var(--brett-leise); }
.abschnitt-kopf { max-width: 44rem; margin-bottom: 44px; }
.abschnitt-kopf .leise { margin-top: 14px; }

/* ---------- Brandstempel: kleine Marke mit Rahmen, leicht schräg, in das Holz gebrannt ---------- */
.stempel { display: inline-block; margin-bottom: 18px; padding: 6px 12px 5px; border: 2px solid currentColor; border-radius: 4px; color: var(--titel, var(--brand)); font-size: 13px; font-weight: 800; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; transform: rotate(-1.6deg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .08); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.zettel .stempel { color: var(--brand); }
.brett h1, .brett h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 0 rgba(0, 0, 0, .28); }
[data-holz="nuss"] h2 { text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 -1px 0 rgba(255, 255, 255, .12); }
.zettel h1, .zettel h2, .zettel h3 { color: var(--brand); text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .18); }

/* ---------- Werkstattzettel: Papier, das auf dem Brett liegt ---------- */
.zettel { position: relative; padding: 26px 28px; border-radius: 3px; background: var(--papier); color: var(--papier-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 3px rgba(20, 12, 4, .22), 0 14px 30px -8px rgba(20, 12, 4, .4); transform: rotate(var(--dreh, 0deg)); }
.zettel .leise { color: var(--papier-leise); }
.zettel a { color: var(--brand); }
.zettel-reihe > :nth-child(3n + 1) { --dreh: -1.1deg; }
.zettel-reihe > :nth-child(3n + 2) { --dreh: .7deg; }
.zettel-reihe > :nth-child(3n + 3) { --dreh: -.4deg; }

/* =====================================================================================
   Werkzeugleiste: Navigation. Hobel, Winkel, Zwinge, Maßstab, Stift hängen an einer Leiste (klebt oben).
   Am Handy wandert die Leiste nach unten (siehe Schmal).
   ===================================================================================== */
.kopf { position: sticky; top: 0; z-index: 30; height: var(--kopf); background: var(--bank); color: var(--bank-text); box-shadow: inset 0 -6px 0 var(--bank-hell), 0 8px 24px rgba(0, 0, 0, .35); }
.kopf-innen { height: 100%; display: flex; align-items: center; gap: 22px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 21px; font-stretch: 110%; letter-spacing: .005em; }
.logo-zeichen { width: 34px; height: 34px; fill: none; stroke: #e4b27a; stroke-width: 1.5; }
.werkzeuge { display: flex; gap: 4px; margin-left: 10px; }
.werkzeug { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 8px 10px 7px; border-radius: 6px; color: var(--bank-leise); text-decoration: none; font-size: 12px; font-weight: 650; letter-spacing: .02em; transition: color .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.werkzeug svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.werkzeug:hover, .werkzeug.ist-aktiv { color: #fff; transform: translateY(-3px); }
.werkzeug::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 26px; height: 3px; border-radius: 2px; background: #e4b27a; transform: translateX(-50%) scaleX(0); transition: transform .25s; }
.werkzeug.ist-aktiv::after { transform: translateX(-50%) scaleX(1); }
.kopf-tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--bank-text); text-decoration: none; font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; }
.kopf-tel svg { width: 20px; height: 20px; fill: none; stroke: #e4b27a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kopf .knopf-klein { flex: none; }

/* =====================================================================================
   Knöpfe: Holzklötze. Eckig, Maserung, Kante unten als Schatten. Beim Drücken sinkt der Klotz.
   ===================================================================================== */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 0; border-radius: 4px; background-color: var(--klotz); color: var(--klotz-text); font: inherit; font-weight: 720; font-size: 17px; letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 5px 0 var(--klotz-kante), 0 10px 16px rgba(0, 0, 0, .28); transition: background-color .2s, transform .12s, box-shadow .12s; }
.zettel a.knopf, .brett a.knopf { color: var(--klotz-text); }
.zettel a.knopf-leise, .brett a.knopf-leise { color: var(--papier-text); }
.knopf:hover { background-color: var(--klotz-hell); }
.knopf:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 0 var(--klotz-kante), 0 3px 8px rgba(0, 0, 0, .25); }
.knopf-klein { min-height: 42px; padding: 0 16px; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 0 var(--klotz-kante), 0 8px 12px rgba(0, 0, 0, .28); }
.knopf-klein:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 0 var(--klotz-kante), 0 3px 8px rgba(0, 0, 0, .25); transform: translateY(3px); }
.knopf-leise { background-color: var(--klotz-leise); color: var(--papier-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 5px 0 var(--klotz-leise-kante), 0 10px 16px rgba(0, 0, 0, .2); }
.knopf-leise:hover { background-color: #f2e4c7; }
.knopf-leise:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 var(--klotz-leise-kante), 0 3px 8px rgba(0, 0, 0, .2); }

/* =====================================================================================
   Das Brett (erster Bildschirm, js/hobel.js)
   Links ein Zettel mit Titel, rechts das sägeraue Werkstück in der Zwinge. Die Maus ist der Hobel:
   Wo sie entlangfährt, öffnet eine SVG-Maske die glatte Ebene. Ohne JavaScript und in „starr" liegt das
   Brett fertig gehobelt da (die raue Ebene ist dann ausgeblendet).
   ===================================================================================== */
.held { padding-top: calc(var(--abstand) * .55); }
.held-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px 44px; align-items: start; }
.held-zettel { --dreh: -1deg; margin-top: 18px; padding: 34px 34px 32px; }
.held-zettel .einleitung { margin-top: 18px; font-size: 19px; color: var(--papier-leise); }
.held-knoepfe { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 12px; }
.held-hinweis { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; font-weight: 600; color: var(--papier-leise); }
.held-hinweis span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 9px; border-radius: 2px; background: var(--klotz); vertical-align: -1px; }
.nur-finger { display: none; }
@media (hover: none) { .nur-maus { display: none; } .nur-finger { display: inline; } }
html:not(.js) .held-hinweis, html.brett-ruhig .held-hinweis { display: none; }

.werkstueck { position: relative; }
.brett-rahmen { position: relative; border-radius: 4px; box-shadow: 0 3px 4px rgba(20, 12, 4, .3), 0 22px 40px -10px rgba(20, 12, 4, .55); touch-action: pan-y; }
.brett-svg { width: 100%; height: auto; border-radius: 4px; display: block; }
/* Maserung: die Zeichnungen liegen in <defs> und werden mit <use> zweimal gezeigt. Chromium gibt den Kopien keine
   Klassenregeln, darum stehen fill und Breite als Attribute an den Pfaden; Farben kommen vererbt vom <use>. */
.brett-svg use.maser-a, .brett-svg use.maser-b, .brett-svg use.maser-c { fill: none; stroke: var(--h-maser); color: var(--h-zone); }
.brett-svg use.ast { color: var(--h-maser); }
.brett-svg use.maser-b, .brett-svg use.maser-c, .brett-svg .dicht { display: none; }
.brett-svg[data-holz="ahorn"] use.maser-a, .brett-svg[data-holz="laerche"] use.maser-a, .brett-svg[data-holz="nuss"] use.maser-a { display: none; }
.brett-svg[data-holz="ahorn"] use.maser-b, .brett-svg[data-holz="laerche"] use.maser-b { display: inline; }
.brett-svg[data-holz="nuss"] use.maser-c { display: inline; }
.brett-svg[data-holz="laerche"] .dicht { display: block; }
.brett-svg .grund { fill: url(#h-verlauf); }
.brett-svg .verlauf-a { stop-color: var(--h-grund); }
.brett-svg .verlauf-b { stop-color: var(--h-grund2); }
.brett-svg .dicht-linie { fill: none; stroke: var(--h-maser); }
.brett-svg .rau-schleier { fill: var(--h-rau); }
.brett-svg .saege { fill: url(#saege-muster); opacity: .55; }
.brett-svg .glanz { fill: url(#h-glanz); }
.brett-svg .heiss { fill: transparent; cursor: help; }
.brett-svg .heiss:focus-visible { stroke: #ffb347; stroke-width: 3; }
.brett-svg .kante-oben { fill: rgba(255, 255, 255, .28); }
.brett-svg .kante-unten { fill: rgba(0, 0, 0, .3); }
/* Hobel und Späne erst mit JavaScript */
.brett-svg .hobel, .brett-svg .spaene { display: none; }
html.hobel-an .brett-svg .hobel, html.hobel-an .brett-svg .spaene { display: block; }
.hobel { will-change: transform; pointer-events: none; }
.hobel .koerper { fill: url(#hobel-holz); stroke: #5b3a1a; stroke-width: 2; stroke-linejoin: round; }
.hobel .eisen { fill: #9aa0a6; stroke: #4a4f54; stroke-width: 1.5; }
.hobel .keil { fill: #b8873f; stroke: #5b3a1a; stroke-width: 1.5; }
.hobel .maul { fill: #2a1a0e; }
.hobel .linie { fill: none; stroke: #5b3a1a; stroke-width: 1.5; opacity: .7; }
.hobel .schatten { fill: rgba(20, 12, 4, .28); }
.hobel.hebt .koerper, .hobel.hebt .eisen, .hobel.hebt .keil, .hobel.hebt .maul, .hobel.hebt .linie { transform: translateY(-16px); }
.hobel.hebt .schatten { transform: scaleX(.92); opacity: .5; }
.hobel .koerper, .hobel .eisen, .hobel .keil, .hobel .maul, .hobel .linie, .hobel .schatten { transition: transform .25s, opacity .25s; transform-box: fill-box; transform-origin: center; }
/* Späne: höchstens zehn, jeder fliegt einmal, dann zurück in den Vorrat */
.span path { fill: var(--h-grund); stroke: var(--h-maser); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.span.fliegt path { animation: span-flug .75s cubic-bezier(.2, .7, .3, 1) forwards; }
.span.fliegt.b path { animation-name: span-flug-b; animation-duration: .85s; }
.span.fliegt.c path { animation-name: span-flug-c; animation-duration: .65s; }
@keyframes span-flug { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.6); } 30% { opacity: 1; transform: translate(-26px, -34px) rotate(-70deg) scale(1); } 100% { opacity: 0; transform: translate(-70px, -22px) rotate(-200deg) scale(1.05); } }
@keyframes span-flug-b { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.6); } 35% { opacity: 1; transform: translate(-18px, -48px) rotate(60deg) scale(1); } 100% { opacity: 0; transform: translate(-52px, -10px) rotate(230deg) scale(1); } }
@keyframes span-flug-c { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.5); } 30% { opacity: 1; transform: translate(-34px, -26px) rotate(-120deg) scale(.95); } 100% { opacity: 0; transform: translate(-86px, -38px) rotate(-320deg) scale(1); } }
/* Schilder über dem Brett: Ast, Riss, „glatt" */
.brett-schilder { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.schild { position: absolute; width: max-content; max-width: min(280px, 80%); padding: 10px 14px; border-radius: 3px; background: var(--papier); color: var(--papier-text); font-size: 14px; line-height: 1.4; box-shadow: 0 2px 3px rgba(20, 12, 4, .25), 0 12px 24px -6px rgba(20, 12, 4, .45); opacity: 0; transform: translateY(8px) rotate(-1deg); transition: opacity .25s, transform .25s; }
.schild b { display: block; color: var(--brand); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.schild.an { opacity: 1; transform: translateY(0) rotate(-1deg); }
.schild-ast { left: 50%; top: 44%; }
.schild-riss { left: 4%; top: 54%; }
.stempel-glatt { position: absolute; left: 50%; top: 50%; margin: 0; padding: 12px 20px 11px; border-width: 3px; font-size: clamp(15px, 1.6vw, 20px); color: #fff8ea; border-color: #fff8ea; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .25); background: rgba(42, 26, 14, .78); opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(1.6); transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1.3); pointer-events: none; }
html.brett-fertig .stempel-glatt { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
html.brett-fertig .hobel { opacity: 0; transition: opacity .4s; }
/* Zwinge am linken Rand des Werkstücks */
.zwinge { position: absolute; left: -26px; top: 50%; width: 54px; height: 190px; margin-top: -95px; z-index: 2; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(20, 12, 4, .35)); }
.zwinge .schiene { fill: #4a4f54; stroke: #23272b; stroke-width: 1.2; }
.zwinge .backe { fill: #d9532b; stroke: #7a2a12; stroke-width: 1.2; }
.zwinge .griff { fill: #a0522d; stroke: #4a2d12; stroke-width: 1.2; }
.zwinge .gewinde { fill: none; stroke: #6c7278; stroke-width: 1.4; }

/* Holzart wählen und Schild */
.holzwahl { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.holzwahl-titel { margin-right: 8px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.klotz { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 3px; background-color: var(--klotz-leise); color: var(--papier-text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--klotz-leise-kante), 0 7px 10px rgba(0, 0, 0, .2); transition: transform .12s, box-shadow .12s; }
.klotz i { width: 22px; height: 22px; border-radius: 2px; background-color: var(--brett); background-image: var(--brett-muster); background-size: 120px auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.klotz:active, .klotz[aria-pressed="true"] { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 var(--klotz-leise-kante), 0 2px 4px rgba(0, 0, 0, .2); }
.klotz[aria-pressed="true"] { background-color: #fff; }
.holz-schild { --dreh: .8deg; margin-top: 26px; padding: 20px 24px; }
.hs-name { margin-bottom: 8px; font-size: 24px; font-weight: 800; font-stretch: 106%; color: var(--brand); text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .18); }
.holz-schild dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: baseline; }
.holz-schild dt { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--papier-leise); }
.holz-schild dd { font-size: 16px; }
.holz-schild .klein { margin-top: 10px; }
.neu-rau { margin-top: 16px; display: none; }
html.brett-fertig .neu-rau { display: inline-flex; }
.fachblick { margin-top: 24px; display: grid; gap: 10px; }
.fachblick li { padding: 12px 16px; border-left: 3px solid var(--brand); background: rgba(255, 255, 255, .28); font-size: 15px; }
.fachblick b { color: var(--brand); }

/* =====================================================================================
   Vom Stamm zum Tisch (klebend, js/stamm-zum-tisch.js)
   Links sechs Schritte als Zettel, rechts die Szene auf einem Zettel. Mit .weg-an klebt die Szene,
   die Schritte scrollen vorbei und bestimmen den Stand. Ohne JavaScript: Szene zeigt Schritt 6,
   Schritte untereinander.
   ===================================================================================== */
.weg-kopf { margin-bottom: 44px; }
.weg-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 48px; align-items: start; }
.schritte { display: grid; gap: 22px; }
.schritt { padding: 26px 28px 28px; }
.schritt-nr { margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--papier-leise); }
.schritt-nr b { color: var(--brand); }
.schritt h3 { margin-bottom: 10px; font-size: 24px; }
.schritt p { color: var(--papier-leise); font-size: 17px; }
.schritt-wert { margin-top: 14px !important; font-size: 18px !important; }
.schritt .knopf { margin-top: 18px; }
.weg-buehne { --dreh: .6deg; padding: 20px 22px 18px; }
.szene-rahmen { position: relative; }
.szene { width: 100%; height: auto; }
.szene .s { opacity: 0; transition: opacity .3s; }
.szene[data-schritt="1"] #s1, .szene[data-schritt="2"] #s2, .szene[data-schritt="3"] #s2, .szene[data-schritt="4"] #s4, .szene[data-schritt="5"] #s5, .szene[data-schritt="6"] #s6 { opacity: 1; }
.szene .stift { fill: none; stroke: var(--stift); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.szene .stift-fein { fill: none; stroke: var(--stift); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.szene .mass { fill: none; stroke: var(--stift); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.szene .saege { fill: none; stroke: #3b3430; stroke-width: 2.2; stroke-dasharray: 1; }
.szene .leiste { fill: #a8834e; stroke: #5b3a1a; stroke-width: 1; }
.szene .trocken { fill: #fff; opacity: 0; }
.szene .dach { fill: #7a5428; stroke: #4a2d12; stroke-width: 1.5; }
.szene .pfosten { fill: none; stroke: #4a2d12; stroke-width: 3; stroke-linecap: round; }
.szene .platte { fill: #d2a86a; stroke: #5b3a1a; stroke-width: 1.8; stroke-linejoin: round; }
.szene .platte-maser { fill: none; stroke: #9a6a34; stroke-width: 1.3; opacity: .7; }
.szene .abschnitt { transition: none; }
.szene .schnitt { fill: none; stroke: #2a1a0e; stroke-width: 2; stroke-dasharray: 1; }
.szene .saegeblatt { fill: #c9ced3; stroke: #4a4f54; stroke-width: 1.4; stroke-linejoin: round; }
.szene .saegegriff { fill: #a0522d; stroke: #4a2d12; stroke-width: 1.4; }
.szene .bein { fill: #c9a46a; stroke: #5b3a1a; stroke-width: 1.8; stroke-linejoin: round; }
.szene .loch { fill: #3b2614; stroke: #2a1a0e; stroke-width: 1; }
.szene .zarge { fill: #d2a86a; stroke: #5b3a1a; stroke-width: 1.8; stroke-linejoin: round; }
.szene .zapfen { fill: #e3c28a; stroke: #5b3a1a; stroke-width: 1.8; stroke-linejoin: round; }
.szene .leim { fill: #f3e2a8; stroke: #c9a24a; stroke-width: 1; transition: opacity .3s; }
.szene .wand { fill: #efe6d6; }
.szene .boden { fill: #d8c6a3; }
.szene .boden-fuge { fill: none; stroke: #b99f74; stroke-width: 1; }
.szene .fenster { fill: #dfe9ee; stroke: #8a8f94; stroke-width: 1.5; }
.szene .fenster-kreuz { fill: none; stroke: #8a8f94; stroke-width: 1.5; }
.szene .sessel { fill: none; stroke: #5b3a1a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.szene .tisch { fill: #d2a86a; stroke: #5b3a1a; stroke-width: 1.8; stroke-linejoin: round; }
.szene .oel-ton { fill: #8a5a2b; }
.szene .oel-glanz { fill: url(#glanz); }
.szene .lappen { fill: #f4efe3; stroke: #8a8f94; stroke-width: 1.2; }
.szene .flasche { fill: #6b4a2f; stroke: #2a1a0e; stroke-width: 1.2; }
.szene .flasche-etikett { fill: #f7f0e1; }
.b-schilder { position: absolute; inset: 0; pointer-events: none; }
.b-schild { position: absolute; padding: 3px 8px; border-radius: 2px; background: rgba(247, 240, 225, .96); color: var(--stift); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.b-schild.an { opacity: 1; transform: none; }
.anzeige { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; padding: 14px 18px 16px; border-radius: 3px; background: var(--bank); color: var(--bank-text); }
.anzeige-name { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bank-leise); }
.anzeige-wert { font-size: 34px; line-height: 1; font-weight: 760; font-variant-numeric: tabular-nums; color: #ffd48a; text-align: right; }
.anzeige-wert span { margin-left: 6px; font-size: 15px; font-weight: 600; color: var(--bank-leise); }
.anzeige-balken { display: block; grid-column: 1 / -1; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.anzeige-balken i { display: block; height: 100%; width: 100%; background: #e4b27a; transform-origin: left; transform: scaleX(1); }
.weg-hinweis { margin-top: 10px; font-size: 13px; color: var(--papier-leise); }
/* klebend */
html.weg-an .weg-raster { align-items: stretch; }
html.weg-an .schritte { gap: 0; padding: 2vh 0 30vh; }
html.weg-an .schritt { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 0 0 0 28px; background: transparent; box-shadow: none; border-left: 3px solid rgba(42, 26, 14, .18); border-radius: 0; transform: none; opacity: .38; transition: opacity .4s, border-color .4s; }
html.weg-an .schritt.ist-aktiv { opacity: 1; border-left-color: var(--brand); }
html.weg-an .schritt h3, html.weg-an .schritt p { color: var(--brett-text); }
html.weg-an .schritt .schritt-nr b { color: var(--brand); }
html.weg-an .schritt h3 { color: var(--brand); text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 0 rgba(0, 0, 0, .2); }
html.weg-an .weg-buehne { position: sticky; top: calc(var(--kopf) + 16px); height: calc(100vh - var(--kopf) - 32px); height: calc(100svh - var(--kopf) - 32px); display: flex; flex-direction: column; justify-content: center; }
html.weg-an .szene-rahmen { width: min(100%, calc((100vh - var(--kopf) - 190px) * 1.23)); margin-inline: auto; }
html.weg-an .anzeige { margin-top: 10px; }
/* klebend und schmal: Szene oben, Schritte scrollen darunter */
html.weg-an.weg-schmal .weg-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
html.weg-an.weg-schmal .weg-buehne { order: -1; top: calc(var(--kopf) + 8px); height: auto; max-height: 52vh; padding: 12px 14px 12px; }
html.weg-an.weg-schmal .szene-rahmen { width: min(100%, calc(52vh * .9)); }
html.weg-an.weg-schmal .anzeige { margin-top: 8px; padding: 10px 14px; }
html.weg-an.weg-schmal .anzeige-wert { font-size: 26px; }
html.weg-an.weg-schmal .schritte { padding: 4vh 0 22vh; }
html.weg-an.weg-schmal .schritt { min-height: 78vh; justify-content: flex-start; padding: 28px 0 0 18px; }

/* =====================================================================================
   Werkstücke: fünf Zettel mit Zeichnung auf dem Nussbrett
   ===================================================================================== */
.werke { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 22px; }
.werk { grid-column: span 2; padding: 22px 24px 24px; }
.werk:nth-child(4), .werk:nth-child(5) { grid-column: span 3; }
.werk-bild { width: 100%; height: auto; margin-bottom: 14px; }
.werk-bild .holz { fill: #d9b47f; stroke: #5b3a1a; stroke-width: 1.8; stroke-linejoin: round; }
.werk-bild .holz-dunkel { fill: #b88a4c; stroke: #5b3a1a; stroke-width: 1.8; stroke-linejoin: round; }
.werk-bild .stift { fill: none; stroke: var(--stift); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.werk-bild .glas { fill: #dfe9ee; stroke: #8a8f94; stroke-width: 1.2; }
.werk-bild .griff { fill: #4a4f54; }
.werk h3 { margin-bottom: 8px; }
.werk p { color: var(--papier-leise); font-size: 16px; }
.werk .mass { display: block; margin-top: 14px; font-size: 18px; }

/* =====================================================================================
   Holzarten: fünf Musterklötze auf dem Eschenbrett
   ===================================================================================== */
.kloetze { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.muster-klotz { position: relative; padding: 0 0 20px; border-radius: 4px; background: var(--papier); color: var(--papier-text); box-shadow: 0 2px 3px rgba(20, 12, 4, .22), 0 14px 30px -8px rgba(20, 12, 4, .4); }
.muster-klotz .flaeche { height: 120px; border-radius: 4px 4px 0 0; background-color: var(--brett); background-image: var(--brett-muster); background-size: 300px auto; box-shadow: inset 0 3px 0 var(--brett-hell), inset 0 -10px 0 var(--brett-dunkel), inset 0 -11px 0 rgba(0, 0, 0, .25); }
.muster-klotz h3 { margin: 16px 18px 10px; font-size: 20px; color: var(--brand); }
.muster-klotz dl { margin: 0 18px; display: grid; gap: 6px; font-size: 15px; }
.muster-klotz dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--papier-leise); }
.muster-klotz dd { margin-bottom: 4px; }
.muster-klotz dd .mass { font-size: 16px; }
.masslinie { display: block; width: 100%; height: auto; margin-top: 30px; }
.masslinie path, .masslinie line { fill: none; stroke: var(--stift); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.holz-hinweis { margin-top: 10px; font-size: 14px; }

/* =====================================================================================
   Ablauf und Zahlen auf dem Lärchenbrett
   ===================================================================================== */
.zollstock { display: block; width: 100%; height: auto; margin-bottom: -6px; }
.zollstock .gelb { fill: #f2d57a; stroke: #7a5f1e; stroke-width: 1; }
.zollstock .strich { fill: none; stroke: #3b3430; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.zollstock .gelenk { fill: #9aa0a6; stroke: #4a4f54; stroke-width: 1; }
.ablauf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.ablauf li { padding: 18px 20px 20px; }
.ablauf-nr { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 3px; background: var(--brand); color: #fff; font-weight: 800; font-size: 17px; }
.ablauf h3 { margin-bottom: 6px; font-size: 19px; }
.ablauf p { font-size: 15px; color: var(--papier-leise); }
.ablauf .mass { display: block; margin-top: 10px; font-size: 15px; }
.werkstatt-raster { margin-top: calc(var(--abstand) * .7); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; align-items: center; }
.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
.zahlen li { padding: 10px 0 0; border-top: 2px solid rgba(42, 26, 14, .35); }
.zahlen b { display: block; font-size: clamp(38px, 4.2vw, 54px); line-height: 1; font-weight: 800; font-stretch: 94%; color: var(--brand); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 0 rgba(0, 0, 0, .25); }
.zahlen b small { font-size: .5em; font-weight: 700; margin-left: 4px; }
.zahlen span { display: block; margin-top: 8px; font-size: 15px; color: var(--brett-leise); }

/* =====================================================================================
   Preise auf dem Eichenbrett: ein großer Zettel, Preise als Stempel
   ===================================================================================== */
.preise-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px 56px; align-items: start; }
.preis-zettel { --dreh: .5deg; padding: 14px 30px 18px; }
.preis-zettel dl > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px dashed var(--papier-rand); }
.preis-zettel dl > div:last-child { border-bottom: 0; }
.preis-zettel dt small { display: block; font-size: 14px; color: var(--papier-leise); font-weight: 500; }
.preis-marke { display: inline-block; padding: 4px 10px; border: 2px solid var(--brand); border-radius: 3px; color: var(--brand); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; transform: rotate(-3deg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.preis-fuss { margin-top: 18px; font-size: 15px; }

/* =====================================================================================
   Stimmen auf dem Ahornbrett
   ===================================================================================== */
.stimmen-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stimme { padding: 30px 32px 28px; }
.stimme blockquote p { font-size: 22px; line-height: 1.38; font-weight: 600; color: var(--papier-text); }
.stimme figcaption { margin-top: 16px; font-size: 15px; color: var(--papier-leise); }

/* =====================================================================================
   Fragen auf dem Eschenbrett
   ===================================================================================== */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 36px 48px; }
.fragen-liste { padding: 6px 28px; }
.fragen-liste details { border-bottom: 1px dashed var(--papier-rand); }
.fragen-liste details:last-child { border-bottom: 0; }
.fragen-liste summary { position: relative; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; font-size: 18px; list-style: none; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 26px; font-weight: 400; color: var(--brand); }
.fragen-liste details[open] summary::after { content: "−"; }
.fragen-liste details p { padding: 0 0 20px; color: var(--papier-leise); max-width: 40rem; font-size: 17px; }

/* =====================================================================================
   Anfrage und Kontakt auf dem Nussbrett
   ===================================================================================== */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px 56px; align-items: start; }
.kontakt-text p { margin-top: 16px; color: var(--brett-leise); }
.kontakt-text address { margin-top: 22px; font-style: normal; line-height: 1.7; }
.portraets { margin-top: 28px; display: flex; gap: 18px; }
.portraets figure { width: 150px; flex: none; }
.zeiten { --dreh: -1.4deg; margin-top: 28px; padding: 18px 22px; transform-origin: top center; }
.zeiten h3 { margin-bottom: 10px; font-size: 18px; }
.zeiten table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zeiten td { padding: 5px 0; border-bottom: 1px dashed var(--papier-rand); }
.zeiten td:last-child { text-align: right; }
.zeiten tr:last-child td { border-bottom: 0; }
.formular { --dreh: .6deg; padding: 28px 30px 26px; }
.formular h3 { margin-bottom: 18px; }
.feld { margin-bottom: 16px; }
.feld label { display: block; margin-bottom: 6px; font-weight: 650; font-size: 15px; }
.feld input, .feld select, .feld textarea { width: 100%; padding: 12px 14px; border: 1px solid #c9bda4; border-radius: 3px; background: #fff; color: var(--papier-text); font: inherit; font-size: 17px; }
.feld-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feld-reihe .feld { margin-bottom: 16px; }
.feld-reihe input { font-variant-numeric: tabular-nums; }
.formular .knopf { width: 100%; margin-top: 6px; }
.formular-meldung { margin-top: 12px; font-weight: 600; min-height: 1.5em; }
.formular .leise { margin-top: 12px; }

/* ---------- Bildplatzhalter: gewollt, Papierton mit feiner Diagonale, wird im Kundenprojekt durch <img> ersetzt ---------- */
.bild-platzhalter { position: relative; display: flex; align-items: flex-end; margin: 0; overflow: hidden; aspect-ratio: var(--format, 3 / 2); border-radius: 4px; background: radial-gradient(110% 80% at 85% 12%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(135deg, rgba(90, 36, 8, .09) 0 1px, transparent 1px 13px), #e9dcc3; box-shadow: 0 2px 3px rgba(20, 12, 4, .22), 0 14px 30px -8px rgba(20, 12, 4, .4); }
.bild-platzhalter figcaption { margin: 16px; padding: 8px 12px; border-radius: 3px; max-width: calc(100% - 32px); background: rgba(247, 240, 225, .95); color: var(--papier-text); font-size: 14px; font-weight: 700; line-height: 1.35; }
.bild-portrait { border-radius: 50%; justify-content: center; align-items: center; }
.bild-portrait figcaption { margin: 0; max-width: 74%; text-align: center; font-size: 12px; padding: 6px 8px; }

/* =====================================================================================
   Fuß: das Gestell der Werkbank
   ===================================================================================== */
.fuss { margin-top: var(--fuge); padding: 56px 0 0; background: var(--bank); color: var(--bank-leise); font-size: 15px; }
.fuss-raster { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.fuss address { font-style: normal; }
.fuss a { color: var(--bank-text); }
.fuss-logo { margin-bottom: 6px; color: #fff; font-weight: 800; font-size: 20px; font-stretch: 110%; }
.fuss-links a { margin-right: 16px; }
.fuss-demo { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px 20px 26px; text-align: center; font-size: 13px; color: #8f7d68; }
.fuss-zeile a { color: #b9a58c; }

/* =====================================================================================
   Auftritte beim Hereinscrollen (mittel, dynamisch): eine kleine Bewegung je Abschnitt, einmal, höchstens 600 ms
   data-auftritt           sanft von unten
   data-auftritt="kippen"  Zettel kippt herein (Werkstücke)
   data-auftritt="setzen"  Klotz wird abgesetzt (Holzarten)
   data-auftritt="stempel" Stempel drückt auf (Preise)
   data-auftritt="klappen" Schild klappt auf (Zeiten)
   data-linie              Bleistiftlinie zeichnet sich (SVG mit pathLength="1")
   ===================================================================================== */
html.js[data-bewegung="mittel"] [data-auftritt], html.js[data-bewegung="dynamisch"] [data-auftritt] { opacity: 0; transform: translateY(22px); transition: opacity .55s, transform .55s cubic-bezier(.2, .8, .2, 1); }
html.js[data-bewegung="mittel"] [data-auftritt="kippen"], html.js[data-bewegung="dynamisch"] [data-auftritt="kippen"] { transform: perspective(900px) rotateX(16deg) translateY(30px) rotate(var(--dreh, 0deg)); transition-duration: .6s; }
html.js[data-bewegung="mittel"] [data-auftritt="setzen"], html.js[data-bewegung="dynamisch"] [data-auftritt="setzen"] { transform: translateY(-28px) scale(1.04); transition-duration: .5s; }
html.js[data-bewegung="mittel"] [data-auftritt="stempel"], html.js[data-bewegung="dynamisch"] [data-auftritt="stempel"] { transform: rotate(-9deg) scale(1.5); transition: opacity .3s, transform .45s cubic-bezier(.2, .9, .3, 1.25); }
html.js[data-bewegung="mittel"] [data-auftritt="klappen"], html.js[data-bewegung="dynamisch"] [data-auftritt="klappen"] { transform: perspective(900px) rotateX(-70deg) rotate(var(--dreh, 0deg)); transition-duration: .6s; }
html.js [data-auftritt].ist-da { opacity: 1 !important; transform: rotate(var(--dreh, 0deg)) !important; }
html.js [data-auftritt="stempel"].ist-da { transform: rotate(-3deg) !important; }
html.js[data-bewegung="mittel"] [data-linie] [pathLength], html.js[data-bewegung="dynamisch"] [data-linie] [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease-out; }
html.js [data-linie].ist-da [pathLength] { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-auftritt] { opacity: 1 !important; transform: rotate(var(--dreh, 0deg)) !important; transition: none !important; }
  html.js [data-linie] [pathLength] { stroke-dashoffset: 0 !important; transition: none !important; }
  .span.fliegt path { animation: none !important; }
}

/* ---------- Ohne JavaScript: alles steht fertig da, reine Skript-Zustände sind weg ---------- */
html:not(.js) .schild, html:not(.js) .b-schild, html:not(.js) .stempel-glatt, html:not(.js) #lappen { display: none; opacity: 1; }
html:not(.js) .szene .s { display: none; opacity: 1; }
html:not(.js) .szene #s6 { display: inline; }
html:not(.js) .span path, html:not(.js) #leisten, html:not(.js) #dach, html:not(.js) .trocken { opacity: 1; }

/* =====================================================================================
   Schmal
   ===================================================================================== */
@media (max-width: 1100px) {
  .werkzeug { min-width: 64px; padding-inline: 6px; }
  .kloetze { grid-template-columns: repeat(3, 1fr); }
  .ablauf { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .held-raster, .weg-raster, .preise-raster, .fragen-raster, .anfrage-raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .zwinge { left: -14px; }
  .held-zettel { margin-top: 0; }
  .werke { grid-template-columns: 1fr 1fr; }
  .werk, .werk:nth-child(4), .werk:nth-child(5) { grid-column: span 1; }
  .werk:nth-child(5) { grid-column: span 2; }
  .werkstatt-raster { grid-template-columns: minmax(0, 1fr); }
  .kopf-tel span { display: none; }
}
@media (max-width: 760px) {
  :root { --kopf: 60px; }
  body { font-size: 17px; padding-bottom: 72px; }
  .kopf-innen { gap: 14px; }
  .kopf .knopf-klein { display: none; }
  .kopf-tel { margin-left: auto; }
  /* Werkzeugleiste wandert nach unten */
  .werkzeuge { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; background: var(--bank); box-shadow: inset 0 3px 0 var(--bank-hell), 0 -8px 24px rgba(0, 0, 0, .35); }
  .werkzeug { min-width: 0; flex: 1; padding: 6px 4px 8px; font-size: 11px; }
  .werkzeug svg { width: 26px; height: 26px; }
  .werkzeug:hover, .werkzeug.ist-aktiv { transform: translateY(-2px); }
  .werkzeug::after { bottom: 2px; }
  .held-zettel { padding: 26px 24px 24px; }
  .zwinge { left: -16px; width: 40px; height: 140px; margin-top: -70px; }
  .zollstock { width: 100%; height: 34px; margin-bottom: 4px; }
  .holz-schild { grid-template-columns: 1fr; gap: 2px; }
  .holz-schild dd { margin-bottom: 6px; }
  .schild { font-size: 13px; padding: 8px 10px; }
  .schild-ast { left: auto; right: 4%; top: 6%; }
  .schild-riss { top: 64%; }
  .werke { grid-template-columns: 1fr; }
  .werk:nth-child(5) { grid-column: span 1; }
  .kloetze { grid-template-columns: 1fr 1fr; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .stimmen-raster { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr; }
  .feld-reihe { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .fuss { padding-bottom: 8px; }
  html.weg-an.weg-schmal .weg-buehne { top: calc(var(--kopf) + 6px); }
}
@media (max-width: 480px) {
  .kloetze { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .zahlen { grid-template-columns: 1fr 1fr; gap: 16px; }
  .preis-zettel { padding-inline: 20px; }
  .preis-zettel dl > div { flex-direction: column; align-items: flex-start; gap: 8px; }
  .holzwahl .klotz { padding: 0 10px 0 8px; font-size: 14px; }
  .held-knoepfe .knopf { width: 100%; }
}