/* Jahrring Möbelwerkstatt, Beispielseite von Hebel.
   Rollen statt Farben: Blau ist alles, was man wählen, messen oder drücken kann; nie Fläche. */

@font-face { font-family: 'Erode'; src: url('/fonts/erode-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Erode'; src: url('/fonts/erode-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Erode'; src: url('/fonts/erode-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Erode'; src: url('/fonts/erode-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Erode'; src: url('/fonts/erode-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Erode'; src: url('/fonts/erode-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --blau: #1a4be0;
  --tinte: #111111;
  --grau: #6b6b6b;
  --feld: #f4f4f4;
  --papier: #ffffff;
  --grund: #1d1915;

  --step-small: clamp(14px, 13.6px + 0.1vw, 15px);
  --step-body: clamp(17px, 16.3px + 0.18vw, 19px);
  --step-lead: clamp(20px, 17.8px + 0.6vw, 26px);
  --step-head: clamp(32px, 20px + 3.2vw, 64px);
  --step-name: clamp(28px, 23.5px + 1.2vw, 40px);

  --rand: 16px;
  --blatt-innen: 18px;
  --abschnitt: 80px;
  --foto-radius: 14px;
  --knopf-hoehe: 52px;
}
@media (min-width: 768px) {
  :root { --rand: 40px; --blatt-innen: 30px; --abschnitt: 120px; --knopf-hoehe: 54px; }
}
@media (min-width: 1200px) {
  :root { --rand: 56px; --blatt-innen: 34px; --abschnitt: 152px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Erode', Georgia, 'Times New Roman', serif;
  font-size: var(--step-body);
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: 'kern' 1;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
::selection { background: var(--blau); color: var(--papier); }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: var(--rand); top: -100px; z-index: 50; background: var(--papier); color: var(--blau); padding: 12px 16px; }
.sprung:focus { top: 8px; }

/* Zahlen setzen wie in einer Tabelle, damit der Preis beim Zählen nicht springt. */
.ziffern, .wert, .preis, .quittung { font-variant-numeric: tabular-nums lining-nums; }

/* Werte: was der Besucher gewählt hat, steht blau und kursiv auf dem Blatt. */
.wert { color: var(--blau); font-weight: 600; font-style: italic; }

/* Hinweisleiste über allem. */
.hinweis {
  background: var(--tinte);
  color: var(--papier);
  font-size: var(--step-small);
  line-height: 1.4;
  padding: 10px var(--rand);
  text-align: center;
}
.hinweis a { color: var(--papier); }

/* Knöpfe. */
.knopf {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: var(--knopf-hoehe);
  padding: 0 10px 0 26px;
  border: 0; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: var(--step-body); line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: transform 150ms ease;
}
.knopf:active { transform: scale(0.97); }
.knopf-primaer { background: var(--blau); color: var(--papier); }
.knopf-primaer .pfeil {
  width: 32px; height: 32px; border-radius: 50%; background: var(--papier); color: var(--blau);
  display: grid; place-items: center; flex: none;
}
.knopf-primaer .pfeil svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.knopf-primaer:hover .pfeil svg { transform: translateX(4px); }
.knopf-zweit { background: var(--feld); color: var(--tinte); padding: 0 26px; }
.knopf-zweit:hover { color: var(--blau); }

/* Unterseiten: Impressum, Datenschutz, Fehlerseite. */
.unterseite-kopf { padding: 20px var(--rand); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.wortmarke { font-size: var(--step-name); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tinte); text-decoration: none; line-height: 1; }
.unterseite { max-width: 760px; padding: 48px var(--rand) var(--abschnitt); }
.unterseite h1 { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.025em; font-weight: 600; margin-bottom: 24px; }
.unterseite h2 { font-size: var(--step-lead); line-height: 1.25; font-weight: 600; margin: 48px 0 12px; }
.unterseite p, .unterseite ul { margin-bottom: 16px; }
.unterseite .lead { font-size: var(--step-lead); line-height: 1.4; }
.unterseite li { margin-bottom: 8px; }
.unterseite .knopf { margin-top: 16px; }

/* Fuss: Tinte ist die einzige dunkle Vollfläche der Seite. */
.fuss { background: var(--tinte); color: var(--papier); padding: 64px var(--rand) 40px; }
.fuss a { color: var(--papier); }
.fuss-innen { max-width: 1240px; margin: 0 auto; display: grid; gap: 40px; }
.fuss-name { font-size: var(--step-name); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; line-height: 1; }
.fuss-spalten { display: grid; gap: 32px; grid-template-columns: 1fr; }
.fuss h2 { font-size: var(--step-small); font-weight: 600; margin-bottom: 8px; }
.fuss p, .fuss li { font-size: var(--step-small); line-height: 1.55; }
.fuss li { margin-bottom: 4px; }
.fuss-kennung { font-size: var(--step-small); border-top: 1px solid rgba(255, 255, 255, 0.28); padding-top: 20px; }
@media (min-width: 768px) {
  .fuss-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Nebenzeilen: das einzige Grau der Seite. */
.neben { color: var(--grau); font-size: var(--step-small); line-height: 1.45; font-style: normal; font-weight: 400; }

/* Fremde Fotos tragen unten rechts klein "Beispielbild". */
.bild-fremd { position: relative; }
.bild-fremd::after {
  content: 'Beispielbild';
  position: absolute; right: 10px; bottom: 8px;
  font-size: var(--step-small); line-height: 1.2; color: var(--papier);
  background: rgba(17, 17, 17, 0.62); padding: 3px 8px; border-radius: 4px;
  pointer-events: none;
}

/* Held: der abgedunkelte Werkstattraum, darauf das Auftragsblatt. Auf dem Blatt stehen genau
   drei Grössen: Name und Preis (step-name), Text und Werte (step-body), Nebenzeilen (step-small). */
.held {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grund);
  padding: 12px var(--rand) 40px;
  display: grid; justify-items: center; align-items: center;
}
.held-foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.held-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(0.5); transform-origin: 50% 40%; }

.blatt {
  width: 100%; max-width: 1040px;
  background: var(--papier);
  padding: var(--blatt-innen);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "fakten" "satz" "zeichnung" "felder" "preis" "unten";
  gap: 12px;
}
.blatt-kopf {
  grid-area: kopf;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c"; row-gap: 2px;
  font-size: var(--step-name); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1;
}
.k-a { grid-area: a; } .k-b { grid-area: b; justify-self: center; } .k-c { grid-area: c; justify-self: end; }

.blatt-fakten { grid-area: fakten; display: grid; gap: 2px; font-size: var(--step-body); line-height: 1.3; }
.blatt-fakten div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.blatt-fakten dt { font-size: var(--step-small); color: var(--grau); }
.blatt-satz { grid-area: satz; font-size: var(--step-body); line-height: 1.45; max-width: 34ch; }

.blatt-felder { grid-area: felder; display: grid; align-content: start; }
.feld { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; }
.feld label, .feld-name { font-size: var(--step-small); color: var(--grau); line-height: 1.3; }
.feld select {
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 0; background: transparent; cursor: pointer;
  min-height: 48px; width: 100%; padding: 0 28px 0 0;
  font-size: var(--step-body);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%231a4be0' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px 12px;
}
.feld select:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.feld-stamm-wert { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0; }
.feld-stamm-wert .wert { font-size: var(--step-body); }

.zeichnung { grid-area: zeichnung; display: grid; gap: 6px; }
.zeichnung-flaeche { position: relative; aspect-ratio: 3 / 2; }
.standbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mass { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  color: var(--blau); background: var(--papier); padding: 0 5px;
  font-size: var(--step-small); font-weight: 600; font-style: italic; line-height: 1.25; font-variant-numeric: tabular-nums; }
.mass-fest { transform: translate(-50%, -50%); }
.mass-fest-l { left: 34.7%; top: 42.8%; }
.mass-fest-b { left: 83.5%; top: 47.4%; }
.buehne3d { position: absolute; inset: 0; }
.buehne3d canvas { width: 100% !important; height: 100% !important; }

/* Mit Bewegung kommt der Tisch aus dem 3D; das Standbild bleibt für ohne WebGL und reduzierte Bewegung. */
.bewegt .standbild, .bewegt .mass-fest { opacity: 0; }
.bewegt[data-3d="aus"] .standbild, .bewegt[data-3d="aus"] .mass-fest,
.bewegt[data-3d="spaet"] .standbild, .bewegt[data-3d="spaet"] .mass-fest { opacity: 1; transition: opacity 300ms ease; }
[data-3d="an"] .standbild, [data-3d="an"] .mass-fest { visibility: hidden; }
.buehne3d { transition: opacity 400ms ease; }
[data-3d="spaet"] .buehne3d { opacity: 0; }

.blatt-preis { grid-area: preis; display: grid; gap: 2px; align-content: start; }
.preis { font-size: var(--step-name); line-height: 1; }
.preis .wert { font-weight: 600; }

.blatt-unten { grid-area: unten; }
.blatt-klein { grid-area: klein; margin: 0; }
.blatt-knopf { grid-area: knopf; justify-content: space-between; }
.blatt-link { grid-area: link; font-size: var(--step-body); line-height: 1.3; }

/* Handy: das ganze Blatt samt Unterkante steht im ersten Bildschirm. Breite, Kante, Oberfläche
   und Stamm wählt man unten im Konfigurator; hier bleiben Holz und Länge. */
@media (max-width: 899px) {
  .nur-weit { display: none; }
  .zeichnung { margin: 0 -6px; }
  .zeichnung figcaption { display: none; }
  .blatt-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .blatt-felder .feld { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .blatt-felder select { background-color: var(--feld); padding: 0 32px 0 12px; background-position: right 12px center; }
  .blatt-preis { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .blatt-preis .preis { justify-self: end; }
  .blatt-preis .neben { display: none; }
  .blatt-unten { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "klein link" "knopf knopf"; gap: 8px 16px; align-items: end; padding-top: 4px; }
  .blatt-link { justify-self: end; text-align: right; max-width: 9em; display: inline-flex; align-items: flex-end; min-height: 48px; }
  .blatt-knopf { width: 100%; }
}

@media (min-width: 900px) {
  .held { padding: 24px var(--rand) 48px; min-height: calc(100svh - 40px); }
  .blatt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "kopf kopf" "fakten zeichnung" "satz zeichnung" "felder zeichnung" "felder preis" "unten unten";
    grid-template-rows: auto auto auto 1fr auto auto;
    column-gap: 48px; row-gap: 20px;
  }
  .blatt-kopf { grid-template-columns: 1fr auto 1fr; grid-template-areas: "a b c"; margin-bottom: 8px; }
  .zeichnung { align-self: start; }
  .blatt-unten { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "klein knopf link"; align-items: center; gap: 24px; padding-top: 8px; }
  .blatt-link { justify-self: end; padding: 12px 0; }
}
.buehne3d .mass { transition: opacity 350ms ease; }
.buehne3d.zeichnet .mass { opacity: 0; }

/* Wo der 3D-Tisch gerade nicht steht, zeigt die Fläche ihr Standbild. */
[data-3d="an"] .zeichnung-flaeche:not(:has(.buehne3d)) :is(.standbild, .mass-fest) { visibility: visible; opacity: 1; }

/* ---- Abschnitte nach dem Blatt ---- */
.abschnitt { padding: var(--abschnitt) var(--rand); }
.titel { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.025em; font-weight: 600; max-width: 16ch; text-wrap: balance; }
.lead { font-size: var(--step-lead); line-height: 1.4; max-width: 36ch; }
.foto { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--foto-radius); }
figure.bild-fremd { position: relative; border-radius: var(--foto-radius); }

/* Hölzer: die Holzkarte als Blatt im Werkstattraum, daneben ein Baum. */
.hoelzer { background: var(--grund); }
.hoelzer-innen { max-width: 1240px; margin: 0 auto; display: grid; gap: 24px; }
.hoelzer-foto { aspect-ratio: 4 / 3; }
.hoelzer-karte { background: var(--papier); padding: var(--blatt-innen); display: grid; gap: 20px; align-content: start; }
.karte { display: grid; margin-top: 8px; }
.karte-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name preis" "herkunft herkunft" "satz satz";
  column-gap: 16px; padding: 16px 0; color: var(--tinte); text-decoration: none; min-height: 48px;
}
.karte-name { grid-area: name; font-size: var(--step-name); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; transition: color 200ms ease; }
.karte-preis { grid-area: preis; align-self: baseline; font-size: var(--step-body); font-weight: 600; white-space: nowrap; }
.karte-herkunft { grid-area: herkunft; color: var(--grau); font-size: var(--step-small); margin-top: 2px; }
.karte-satz { grid-area: satz; margin-top: 6px; max-width: 44ch; }
.karte-zeile:hover .karte-name, .karte-zeile[aria-current] .karte-name { color: var(--blau); }
.karte-zeile[aria-current] .karte-name { font-style: italic; }
.karte-zeile[aria-current] .karte-preis { color: var(--blau); }

/* Konfigurator: Blätter auf Feld, links die Zeichnung, rechts Wahl, Quittung, Anfrage. */
.konfig-abschnitt { background: var(--feld); }
.konfig-kopf, .konfig { max-width: 1240px; margin: 0 auto; }
.konfig-kopf { display: grid; gap: 20px; margin-bottom: 32px; }
.fortschritt { display: grid; gap: 8px; }
.fortschritt-balken { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: min(100%, 240px); }
.fortschritt-balken span { height: 4px; background: #d6d6d6; transition: background-color 250ms ease; }
.fortschritt-balken span.voll { background: var(--blau); }
.konfig { display: grid; gap: 24px; }
.konfig-bild { background: var(--papier); padding: 12px var(--blatt-innen) 16px; }
.konfig-kurz { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.konfig-kurz .wert { font-size: var(--step-lead); }
.konfig-wahl { background: var(--papier); padding: var(--blatt-innen); display: grid; gap: 24px; }
.gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.gruppe-titel { padding: 0; margin-bottom: 10px; font-size: var(--step-small); font-weight: 600; }
.pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.pille { position: relative; display: inline-flex; }
.pille input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pille span, .pille-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--feld); color: var(--tinte); font: inherit; font-size: var(--step-body); line-height: 1.2; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 150ms ease;
}
.pille:hover span, .pille-knopf:hover { color: var(--blau); }
.pille input:checked + span { background: var(--blau); color: var(--papier); font-weight: 600; }
.pille input:focus-visible + span { outline: 3px solid var(--blau); outline-offset: 3px; }
.pille-knopf { min-width: 48px; padding: 0 14px; font-size: var(--step-lead); }
.pille-knopf:active, .pille:active span { transform: scale(0.97); }
.regler { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px 12px; }
.regler .wert { grid-column: 1 / -1; grid-row: 1; font-size: var(--step-lead); }
.regler input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; cursor: pointer; margin: 0; }
.regler input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #dcdcdc; border-radius: 2px; }
.regler input[type="range"]::-moz-range-track { height: 4px; background: #dcdcdc; border-radius: 2px; }
.regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -13px; border-radius: 50%; background: var(--blau); border: 0; }
.regler input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--blau); border: 0; }
.regler input[type="range"]:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }

/* Quittung: Positionen mit Linien, unten Zickzack. */
.konfig-unten { display: grid; gap: 24px; align-content: start; }
.quittung {
  --zacke: 16px;
  position: relative; background: var(--papier); padding: 28px var(--blatt-innen) calc(28px + var(--zacke) / 2);
  display: grid; gap: 14px; font-size: var(--step-small); line-height: 1.45;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zacke) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zacke) 100%;
}
.quittung-kopf { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; }
.quittung-kopf .neben { text-transform: none; letter-spacing: 0; font-weight: 400; }
.quittung-stamm { padding-bottom: 12px; border-bottom: 1px dashed #b8b8b8; }
.quittung-posten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.quittung-posten th { text-align: left; font-weight: 400; padding: 7px 12px 7px 0; vertical-align: baseline; }
.quittung-posten td { text-align: right; padding: 7px 0; white-space: nowrap; vertical-align: baseline; }
.quittung-posten tbody tr + tr :is(th, td) { border-top: 1px solid #e6e6e6; }
.quittung-posten tfoot :is(th, td) { border-top: 2px solid var(--tinte); padding-top: 12px; font-size: var(--step-lead); font-weight: 600; }
.quittung-posten tfoot td { color: var(--blau); font-style: italic; }
.stempel {
  position: absolute; top: 22px; right: 22px; transform: rotate(-8deg) scale(1.3);
  color: var(--blau); border: 2px solid var(--blau); border-radius: 6px; padding: 2px 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0;
  transition: opacity 250ms ease, transform 250ms cubic-bezier(.3, 1.6, .5, 1);
}
.quittung.erfasst .stempel { opacity: 1; transform: rotate(-8deg) scale(1); }

/* Anfrage: Eingabefelder in Feld, Linie unten im Fokus. */
.anfrage, .anfrage-danke { position: relative; background: var(--papier); padding: var(--blatt-innen); display: grid; gap: 16px; }
.anfrage-titel { font-size: var(--step-lead); line-height: 1.2; font-weight: 600; }
.anfrage-satz { margin-top: -8px; }
.eingabe { display: grid; gap: 6px; }
.eingabe label { font-size: var(--step-small); font-weight: 600; }
.eingabe input, .eingabe textarea {
  width: 100%; min-height: 52px; border: 0; border-radius: 0; background: var(--feld); color: var(--tinte);
  padding: 12px 14px; font: inherit; font-size: var(--step-body); line-height: 1.45; box-shadow: inset 0 -2px 0 transparent;
}
.eingabe textarea { resize: vertical; min-height: 128px; }
.eingabe :is(input, textarea):focus { outline: none; box-shadow: inset 0 -3px 0 var(--blau); }
.eingabe :is(input, textarea)[aria-invalid="true"] { box-shadow: inset 4px 0 0 var(--tinte); }
.fehler { font-size: var(--step-small); font-weight: 600; line-height: 1.4; }
.fehler:empty { display: none; }
.eingabe-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anfrage .knopf { justify-self: stretch; justify-content: space-between; }
.anfrage-danke:focus { outline: none; }
.anfrage-danke .knopf { justify-self: start; }

/* Ablauf: Momente in einer Reihe, ziehbar und mit Pfeiltasten. */
.ablauf { padding-left: 0; padding-right: 0; }
.ablauf-kopf { padding: 0 var(--rand); max-width: calc(1240px + 2 * var(--rand)); margin: 0 auto 32px; display: grid; gap: 16px; }
.ablauf-steuer { display: flex; align-items: center; gap: 8px; }
.ablauf-steuer .neben { margin-right: auto; }
.ablauf-reihe {
  display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px var(--rand) 16px; scroll-padding-inline: var(--rand); scrollbar-width: thin; cursor: grab;
}
.ablauf-reihe.zieht { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ablauf-reihe:focus-visible { outline: 3px solid var(--blau); outline-offset: -3px; }
.moment { flex: 0 0 auto; width: min(80vw, 380px); scroll-snap-align: start; display: grid; align-content: start; gap: 10px; }
.moment h3 { font-size: var(--step-lead); line-height: 1.2; font-weight: 600; }
.moment-nr { font-size: var(--step-head); line-height: 1; font-weight: 600; color: var(--blau); font-style: italic; }
.moment-text { width: min(72vw, 300px); padding-top: 8px; }
.moment-foto figure { aspect-ratio: 4 / 3; }
.moment-foto-hoch { width: min(66vw, 300px); }
.moment-foto-hoch figure { aspect-ratio: 3 / 4; }
.moment img { -webkit-user-drag: none; user-select: none; }
.plan { display: block; width: 100%; height: auto; color: var(--blau); background: var(--feld); border-radius: var(--foto-radius); padding: 12px; }
.plan text { fill: var(--blau); font-family: inherit; font-size: 13px; font-style: italic; font-weight: 600; }

/* Lager: Stämme wie Buchrücken, Höhe nach Stammlänge, Breite nach Jahrringen. */
.lager { background: var(--grund); color: #eeeeea; }
.lager-innen { max-width: 1240px; margin: 0 auto; display: grid; gap: 24px; }
.lager .lead { color: #eeeeea; }
.regal { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 6px; padding-top: 16px; }
.regal li { display: flex; align-items: flex-end; }
.ruecken {
  --h-min: 215px; --h-max: 300px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  height: calc(var(--h-min) + (var(--h-max) - var(--h-min)) * var(--hoch));
  width: calc(48px + 20px * var(--breit));
  background: var(--papier); color: var(--tinte); text-decoration: none; padding: 10px 0; overflow: hidden;
  transition: transform 220ms ease, color 200ms ease;
}
.ruecken-nr { font-size: var(--step-body); font-weight: 600; line-height: 1; }
.ruecken-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--step-small); line-height: 1; white-space: nowrap; }
.ruecken:hover { color: var(--blau); transform: translateY(-6px); }
.ruecken[aria-current] { color: var(--blau); transform: translateY(-14px); }
.ruecken[aria-current] .ruecken-nr { font-style: italic; }
.stamm-karte { background: var(--papier); color: var(--tinte); padding: var(--blatt-innen); display: grid; gap: 12px; max-width: 560px; }
.stamm-karte-nr { font-size: var(--step-lead); font-weight: 600; }
.stamm-daten { display: grid; gap: 4px; }
.stamm-daten div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 8px; }
.stamm-daten dt { font-size: var(--step-small); font-weight: 600; padding-top: 0.2em; }

/* Besuch: Karte auf dem Foto aus Altstetten. */
.besuch { position: relative; isolation: isolate; padding: var(--abschnitt) var(--rand); display: grid; }
.besuch .besuch-foto { position: absolute; inset: 0; z-index: -1; border-radius: 0; overflow: hidden; }
.besuch .besuch-foto .foto { border-radius: 0; }
.besuch-karte { background: var(--papier); padding: var(--blatt-innen); display: grid; gap: 16px; max-width: 520px; justify-self: start; }
.besuch-daten { display: grid; gap: 8px; }
.besuch-daten div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 8px; }
.besuch-daten dt { font-size: var(--step-small); font-weight: 600; padding-top: 0.2em; }
.besuch-karte .knopf { justify-self: start; }

@media (max-width: 899px) {
  /* Am Handy bleibt der Tisch beim Wählen oben stehen. */
  .konfig-bild { position: sticky; top: 0; z-index: 3; margin: 0 calc(-1 * var(--rand)); padding: 8px var(--rand) 10px; }
  .konfig-bild .zeichnung-flaeche { aspect-ratio: auto; height: min(30svh, calc((100vw - 2 * var(--rand)) * 2 / 3)); }
  .hoelzer-foto { aspect-ratio: 16 / 10; }
  .besuch { padding-top: 240px; }
}
@media (min-width: 900px) {
  .hoelzer-innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
  .hoelzer-foto { aspect-ratio: 3 / 4; position: sticky; top: 40px; }
  .konfig-kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .fortschritt { justify-items: end; text-align: right; }
  .konfig { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; align-items: start; }
  .konfig-oben { display: contents; }
  .konfig-bild { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 32px; padding: 24px var(--blatt-innen); }
  .konfig-wahl { grid-column: 2; grid-row: 1; }
  .konfig-unten { grid-column: 2; grid-row: 2; }
  .ablauf-kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .ablauf-reihe { padding-left: max(var(--rand), calc((100vw - 1240px) / 2)); scroll-padding-inline: max(var(--rand), calc((100vw - 1240px) / 2)); }
  .regal { gap: 8px; flex-wrap: nowrap; }
  .ruecken { --h-min: 220px; --h-max: 380px; width: calc(44px + 24px * var(--breit)); max-width: 100%; }
  .regal li { flex: 0 1 auto; min-width: 0; }
  .lager-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: 48px; align-items: end; }
  .lager-innen > .titel, .lager-innen > .lead { grid-column: 1 / -1; }
  .besuch { min-height: 720px; align-content: center; }
  .besuch-karte { margin-left: max(0px, calc((100vw - 1240px) / 2 - var(--rand))); }
}
@media (prefers-reduced-motion: reduce) {
  .ruecken, .pille span, .stempel, .karte-name, .fortschritt-balken span { transition: none; }
}