/* Hutmacherei Fahlberg. Seitenstil. Die Engine-Klassen bleiben unberührt;
   hier stehen Marke, Etikett, Werkbank-Bühnen und die Kopfkarte. */
:root {
  --sc-canvas:     #0C1117;
  --sc-surface:    #151C24;
  --sc-ink:        #EEE7DA;
  --sc-ink-soft:   #AEB5BC;
  --sc-accent:     #DD7A54;
  --sc-accent-ink: #1B0F0A;
  --sc-font-display: "Prata", Georgia, serif;
  --sc-font-text:    "Commissioner", system-ui, sans-serif;
  --sc-font-mono:    "Commissioner", system-ui, sans-serif;
  --sc-shadow-color: 210 40% 3%;
  --filz: #8E3B26;
  --papier: #EDE5D5;
  --papier-tinte: #2A211C;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #33404c var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); font-weight: 400; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
input, select { caret-color: var(--sc-accent); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Prata hat nur einen Schnitt. Heller Text auf dunkel: etwas mehr Luft. */
.sc-display {
  font-family: var(--sc-font-display); font-weight: 400;
  letter-spacing: -0.008em; line-height: 1.06; text-wrap: balance;
}
.sc-display--xl { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.6rem); }
.sc-display--lg { font-size: clamp(1.95rem, 1.2rem + 2.5vw, 3.5rem); line-height: 1.1; }
.sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.62; letter-spacing: .006em; }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.1rem, 1.2rem + 5vw, 2.9rem); }
  .sc-display--lg { font-size: clamp(1.6rem, 1.1rem + 2.8vw, 2.15rem); }
  .sc-body { font-size: 1.02rem; line-height: 1.55; }
}

/* ---------- Etikett (Navigation) ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: center; padding-top: 14px; pointer-events: none;
}
.etikett { position: relative; pointer-events: auto; }
.etikett__knopf {
  position: relative; display: grid; justify-items: center; gap: 3px;
  min-width: 200px; padding: 9px 26px 10px; cursor: pointer;
  background: #EDE5D5; color: var(--papier-tinte);
  border: 0; border-radius: 999px / 70%;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / .35), 0 10px 22px -8px hsl(var(--sc-shadow-color) / .6);
  transition: transform 140ms var(--sc-ease-out);
}
/* Die Steppnaht des Etiketts */
.etikett__knopf::before {
  content: ""; position: absolute; inset: 4px; border-radius: inherit;
  border: 1.2px dashed rgb(42 33 28 / .42); pointer-events: none;
}
.etikett__knopf:active { transform: translateY(1px); }
.etikett__marke { font: 400 1.3rem/1 var(--sc-font-display); letter-spacing: .02em; }
.etikett__gang { font: 600 .74rem/1.2 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase; color: #6B3420; }
.etikett__stiche { display: flex; gap: 5px; margin-top: 2px; }
.etikett__stiche i { width: 9px; height: 2px; border-radius: 1px; background: rgb(42 33 28 / .2); transition: background-color 200ms var(--sc-ease-out); }
.etikett__stiche i.ist-genaeht { background: #8E3B26; }
.etikett__liste {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  min-width: 230px; margin: 0; padding: 8px; list-style: none;
  background: #EDE5D5; border-radius: 14px; color: var(--papier-tinte);
  box-shadow: 0 4px 8px hsl(var(--sc-shadow-color) / .3), 0 22px 44px -12px hsl(var(--sc-shadow-color) / .7);
}
.etikett__liste a {
  display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none;
  font-weight: 500; font-size: .95rem;
  transition: background-color 140ms var(--sc-ease-out);
}
.etikett__liste a.ist-hier { color: #8E3B26; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .etikett__knopf:hover { transform: translateY(-1px); }
  .etikett__liste a:hover { background: rgb(142 59 38 / .1); }
}
@media (max-width: 700px) {
  .kopf { padding-top: 10px; }
  .etikett__knopf { min-width: 168px; padding: 7px 20px 8px; }
  .etikett__marke { font-size: 1.1rem; }
  .etikett__gang { font-size: .72rem; }
}

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--sc-ink); border: 1.5px solid color-mix(in oklab, var(--sc-ink) 50%, transparent); background: transparent;
  cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent);
}
/* Mosaik aus feinem Fadenraster, darüber ein langsamer Lichtstreif */
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 240 225 / .34) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(45deg, rgb(60 20 10 / .08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgb(60 20 10 / .08) 0 1px, transparent 1px 5px);
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
@media (hover: hover) and (pointer: fine) {
  .knopf--voll:hover { background: #E68C68; transform: translateY(-2px); }
}

/* ---------- Held ---------- */
.held { background: var(--sc-canvas); }
.held__bild { position: absolute; inset: -60px 0; }
.held__bild img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; }
.dampf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* Der Schleier lässt die Textspalte frei, damit Dampf nie die Schrift auswäscht. */
.dampf--schleier {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 48%, rgb(0 0 0 / .5) 60%, #000 72%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 48%, rgb(0 0 0 / .5) 60%, #000 72%);
}
.held__scrim { z-index: 3; }
@media (min-width: 701px) {
  .held__scrim {
    background:
      linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 30%, transparent 52%),
      linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, transparent 55%);
  }
}
.held__copy { z-index: var(--sc-z-copy); bottom: clamp(3rem, 14vh, 9rem); max-width: min(38rem, 46vw); }
.held h1 { max-width: 11ch; }
.held__sub { margin-top: var(--sc-5); max-width: 34ch; }
.held .knopf { margin-top: var(--sc-6); }
@media (max-width: 700px) {
  .held__bild img { object-position: 50% 30%; }
  .held__scrim { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 40%, color-mix(in oklab, var(--sc-canvas) 20%, transparent) 64%, transparent 78%); }
  .dampf--schleier {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgb(0 0 0 / .08) 58%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 34%, rgb(0 0 0 / .08) 58%);
  }
  .held__copy { bottom: clamp(2rem, 7vh, 4rem); max-width: none; }
  .held h1 { max-width: 12ch; }
  .held .knopf { margin-top: var(--sc-5); }
}

/* ---------- Filz ---------- */
.filz { padding-block: clamp(5rem, 11vw, 11rem) clamp(6rem, 12vw, 12rem); }
.filz__raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.filz__bild { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: var(--sc-e3); }
.filz__bild img { width: 100%; height: auto; }
.vorzeile { font: 600 var(--sc-t-xs)/1.2 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); margin: 0; }
.filz__text .sc-display { margin-top: var(--sc-4); }
.filz__text .sc-body { max-width: 46ch; }
.daten { margin: var(--sc-7) 0 0; display: grid; gap: 0; border-top: 1px solid var(--sc-hairline); }
.daten div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sc-5); padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); }
.daten dt { font-family: var(--sc-font-display); font-size: 1.15rem; color: var(--sc-ink); }
.daten dd { margin: 0; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .filz__raster { grid-template-columns: 1fr; }
  .filz__bild { max-width: 26rem; }
  .daten div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Werkbank-Bühnen (Ziehen, Krempe) ---------- */
.werkbank { background: radial-gradient(90% 70% at 66% 30%, #142029, var(--sc-canvas) 70%); }
.werkbank__licht {
  position: absolute; left: 50%; top: -30%; width: 80vw; height: 110%;
  background: radial-gradient(closest-side, rgb(255 214 170 / .085), transparent);
  animation: lampe 12s var(--sc-ease-in-out) infinite alternate;
}
@keyframes lampe { to { translate: -6% 3%; } }
.hut {
  position: absolute; z-index: 1;
  right: 2vw; bottom: 0; width: min(64vw, 128vh); height: 94%;
  overflow: visible;
}
.werkbank .dampf { z-index: 2; }
.werkbank__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: clamp(7rem, 22vh, 13rem);
  width: min(30rem, 34vw); display: grid;
}
.werkbank__text > * { grid-area: 1 / 1; }
.werkbank__text .sc-body { margin-top: var(--sc-4); max-width: 34ch; }
@media (max-width: 860px) {
  .hut { left: 50%; right: auto; translate: -50% 0; width: 118vw; height: 62%; bottom: auto; top: 9%; }
  .werkbank__text {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    padding: 2.4rem var(--sc-gutter) clamp(1.6rem, 5vh, 2.6rem);
    background: linear-gradient(to top, var(--sc-canvas) 62%, color-mix(in oklab, var(--sc-canvas) 0%, transparent));
  }
  .werkbank__text .sc-body { margin-top: var(--sc-3); }
}

/* SVG-Teile, die werkstueck.js baut */
.hut .bank { fill: #1A1410; }
.hut .bank-kante { fill: #2B211A; }
.hut .holz { fill: url(#holz); }
.hut .holz-schatten { fill: #000; opacity: .28; }
.hut .filz-innen, .hut .filz-krone { stroke: none; }
.hut .filz-rand { fill: none; stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; }
.hut .filz-faser { fill: url(#faser); opacity: .7; }
.hut .filz-faser-rand { fill: none; stroke: url(#faser); stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; opacity: .6; }
.hut .filz-licht { fill: url(#licht); }
.hut .schnur { fill: none; stroke: #E9DCC3; stroke-width: 2.6; stroke-linecap: round; }
.hut .eisen-sohle { fill: #2E3338; }
.hut .eisen-koerper { fill: #4A5057; }
.hut .eisen-kante { fill: #7C848C; }
.hut .eisen-griff { fill: #6E4A2E; }

/* ---------- Formen (pan) ---------- */
.formen { background: var(--sc-canvas); display: flex; align-items: center; }
.formen__schiene { align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-inline: var(--sc-gutter); }
.formen__schiene > * { flex: none; }
.formen__kopf { width: min(30rem, 80vw); }
.formen__kopf .sc-body { margin-top: var(--sc-4); max-width: 32ch; }
.form { margin: 0; width: clamp(17rem, 30vw, 26rem); }
.form svg { width: 100%; height: auto; overflow: visible; }
.form .hutform path { fill: var(--filz); }
.form .hutform path:not(.band) { stroke: rgb(255 220 190 / .14); stroke-width: 1.2; }
.form .hutform .band { fill: #1C1410; opacity: .82; }
.form figcaption { margin-top: var(--sc-5); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.form h3 { margin: 0; font: 400 1.7rem/1.1 var(--sc-font-display); color: var(--sc-ink); }
.form p { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); max-width: 30ch; }
.formen__notiz { width: min(22rem, 76vw); margin: 0; font: 400 1.35rem/1.4 var(--sc-font-display); color: var(--sc-ink); }
@media (prefers-reduced-motion: no-preference) {
  .formen .form, .formen .formen__notiz {
    opacity: clamp(.55, calc((var(--sc-p, 0) * 6.2 - var(--i) + 1.6) * 1), 1);
    translate: 0 clamp(0px, calc((var(--i) - var(--sc-p, 0) * 6.2 - 0.6) * 18px), 22px);
    transition: opacity 120ms linear;
  }
}
@media (max-width: 700px) {
  .form { width: 78vw; }
  .form h3 { font-size: 1.45rem; }
}

/* ---------- Garnitur ---------- */
.garnitur { padding-block: clamp(5rem, 10vw, 10rem); }
.garnitur__raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto;
  column-gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.garnitur__text { grid-column: 1; grid-row: 1; padding-top: clamp(2rem, 8vw, 7rem); }
.garnitur__text .sc-body { margin-top: var(--sc-5); max-width: 40ch; }
.garnitur__bild { grid-column: 2; grid-row: 1 / span 2; margin: 0; border-radius: 4px; overflow: hidden; box-shadow: var(--sc-e3); }
.garnitur__bild img { width: 100%; height: auto; }
.zettel {
  grid-column: 1; grid-row: 2; justify-self: end; align-self: start;
  width: min(23rem, 100%); margin-top: var(--sc-7); margin-right: calc(-1 * clamp(1rem, 4vw, 4rem));
  position: relative; z-index: 2;
  padding: 1.4rem 1.5rem 1.2rem; background: var(--papier); color: var(--papier-tinte);
  border-radius: 3px; rotate: -1.6deg;
  background-image:
    radial-gradient(rgb(42 33 28 / .07) 1px, transparent 1.2px),
    linear-gradient(transparent 0 calc(100% - 1px), rgb(42 33 28 / .1) 0);
  background-size: 14px 14px, 100% 2.1rem;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / .3), 0 18px 34px -10px hsl(var(--sc-shadow-color) / .7);
}
.zettel::before { /* Stecknadel */
  content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E9A385, #8E3B26 70%);
  box-shadow: 0 3px 5px rgb(0 0 0 / .35);
}
.zettel__kopf { margin: 0 0 .6rem; font: 400 1.35rem/1.2 var(--sc-font-display); }
.zettel ul { margin: 0; padding: 0; list-style: none; }
.zettel li { display: grid; grid-template-columns: 4.4rem 1fr; gap: .6rem; padding: .42rem 0; font-size: .95rem; line-height: 1.4; }
.zettel li span { font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #6B3420; padding-top: .14rem; }
@media (max-width: 860px) {
  .garnitur__raster { grid-template-columns: 1fr; }
  .garnitur__text { grid-row: 1; padding-top: 0; }
  .garnitur__bild { grid-column: 1; grid-row: 2; margin-top: var(--sc-7); max-width: 30rem; }
  .zettel { grid-row: 3; justify-self: start; margin: calc(-1 * var(--sc-8)) 0 0 var(--sc-4); width: min(21rem, calc(100% - 1rem)); }
}

/* ---------- Schluss: Kopfkarte ---------- */
.schluss {
  background: radial-gradient(80% 70% at 72% 40%, #16202A, var(--sc-canvas) 70%);
  display: flex; flex-direction: column;
}
.schluss__inhalt {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(2rem, 6vw, 6rem); padding: 6.5rem var(--sc-gutter) 1rem; max-width: 82rem; width: 100%; margin-inline: auto;
}
.schluss__lead { margin-top: var(--sc-4); max-width: 40ch; }
.regler { margin-top: var(--sc-6); display: grid; gap: var(--sc-5); max-width: 30rem; }
.regler__feld { display: grid; gap: .5rem; }
.regler label, .regler legend { font-weight: 600; font-size: .95rem; color: var(--sc-ink); }
.regler__feld > label { display: flex; justify-content: space-between; }
.regler output { font-variant-numeric: tabular-nums; color: var(--sc-accent); }
.regler small { color: var(--sc-ink-soft); font-size: .86rem; line-height: 1.45; }
.regler input[type="range"] { width: 100%; height: 28px; accent-color: var(--sc-accent); cursor: pointer; }
.regler__form { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.regler__form legend { float: left; width: 100%; margin-bottom: .5rem; }
.regler__form label {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem;
  border-radius: 999px; border: 1.5px solid var(--sc-hairline-strong); font-weight: 500; cursor: pointer;
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.regler__form label:has(input:checked) { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 14%, transparent); }
.regler__form input { accent-color: var(--sc-accent); margin: 0; }
.regler .knopf { justify-self: start; }
.regler__hinweis { margin: 0; font-size: .88rem; color: var(--sc-ink-soft); min-height: 1.3em; }

.karte {
  position: relative; justify-self: center; margin: 0;
  width: min(25rem, 100%); padding: 1.3rem 1.5rem 1.2rem;
  background: var(--papier); color: var(--papier-tinte); border-radius: 4px; rotate: 1.4deg;
  background-image: radial-gradient(rgb(42 33 28 / .06) 1px, transparent 1.2px);
  background-size: 12px 12px;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / .3), 0 26px 50px -14px hsl(var(--sc-shadow-color) / .75);
}
.karte__loch { position: absolute; top: 14px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--sc-canvas); box-shadow: inset 0 1px 2px rgb(0 0 0 / .6); }
.karte__kopf { margin: 0; text-align: center; font: 400 1.1rem/1.2 var(--sc-font-display); letter-spacing: .02em; }
.karte__bild { width: 100%; height: auto; margin: .6rem 0 .4rem; }
.karte__vorn { font: 600 9px var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; fill: #6B3420; }
.karte__bild circle { fill: var(--papier-tinte); }
.karte__werte { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .4rem; }
.karte__werte div { display: grid; gap: 2px; }
.karte__werte dt { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B3420; }
.karte__werte dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .98rem; }
.karte figcaption { margin-top: .7rem; font-size: .8rem; color: #5B4D44; }
.karte.ist-vorgemerkt::after {
  content: "vorgemerkt"; position: absolute; right: 18px; top: 46px; rotate: -12deg;
  padding: .2rem .6rem; border: 2px solid #8E3B26; border-radius: 4px; color: #8E3B26;
  font: 700 .82rem/1.2 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; opacity: .85;
}
.fuss {
  display: flex; gap: 1.5rem; align-items: baseline; flex-wrap: wrap;
  padding: .9rem var(--sc-gutter) 1.1rem; font-size: .84rem; color: var(--sc-ink-soft);
  border-top: 1px solid var(--sc-hairline);
}
.fuss__marke { font: 400 1rem/1 var(--sc-font-display); color: var(--sc-ink); }

@media (max-width: 860px) {
  .schluss__inhalt { grid-template-columns: 1fr; align-content: start; gap: 1rem; padding: 4.6rem var(--sc-gutter) .5rem; }
  .schluss .sc-display--lg { font-size: 1.6rem; }
  .schluss__lead { display: none; }
  .regler { margin-top: .8rem; gap: .7rem; }
  .regler small { display: none; }
  .regler__form label { min-height: 40px; padding: 0 .9rem; }
  .regler .knopf { min-height: 46px; }
  .karte { order: -1; width: 100%; padding: .7rem .9rem .7rem; rotate: .8deg; display: grid; grid-template-columns: 38% 1fr; column-gap: .8rem; align-items: center; }
  .karte__kopf { grid-column: 1 / -1; font-size: .95rem; }
  .karte__bild { grid-row: 2 / span 2; margin: .2rem 0 0; }
  .karte__werte { grid-template-columns: 1fr 1fr; border-top: 0; padding-top: 0; gap: .35rem .6rem; }
  .karte__werte dd { font-size: .9rem; }
  .karte figcaption { margin-top: .3rem; font-size: .74rem; }
  .karte.ist-vorgemerkt::after { top: auto; bottom: 10px; right: 10px; font-size: .7rem; }
  .fuss { font-size: .74rem; gap: .5rem; padding-block: .6rem .8rem; }
}
@media (max-width: 380px) and (max-height: 700px) {
  .schluss__inhalt { padding-top: 4.2rem; }
  .regler__feld > label { font-size: .88rem; }
  .fuss__marke { display: none; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .werkbank__licht, .knopf--voll::before { animation: none; }
  .formen__schiene { padding-block: 2rem; }
}