/* Goldschmiede Erlwein. Seitenstil. Engine-Klassen (.sc-*) bleiben unangetastet,
   hier stehen Marke, Bühnen, Lupe und Werkstattzettel. */
:root {
  --sc-canvas:     #0D1114;
  --sc-surface:    #151B1F;
  --sc-ink:        #E9ECEC;
  --sc-ink-soft:   #A3AEB2;
  --sc-accent:     #D7B46A;
  --sc-accent-ink: #15130D;
  --sc-font-display: "Italiana", "Times New Roman", serif;
  --sc-font-text:    "Jost", system-ui, sans-serif;
  --sc-font-mono:    "Jost", system-ui, sans-serif;
  --sc-shadow-color: 200 30% 3%;
  --papier: #EEEAE1;
  --papier-tinte: #23262A;
  --papier-weich: #585E62;
  --kopf-h: 76px;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #39434a var(--sc-canvas); }
body { font-family: var(--sc-font-text); font-weight: 400; color: var(--sc-ink); }
input, button { caret-color: var(--sc-accent); }
a { text-underline-offset: 5px; }

/* Der Stein liegt unter allen Abschnitten; die Abschnitte sind durchsichtig. */
.werkstueck { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; }
main > section { position: relative; z-index: 1; }
.slot { pointer-events: none; }

/* Anzeige: Italiana ist dünn. Auf dunklem Grund groß, mit etwas Laufweite. */
.sc-display {
  font-family: var(--sc-font-display); font-weight: 400;
  letter-spacing: 0.005em; line-height: 1.04; text-wrap: balance;
}
.sc-display--lg { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.4rem); }
.sc-display--md { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem); }
.sc-body { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.24rem); line-height: 1.68; letter-spacing: 0.01em; color: var(--sc-ink-soft); font-weight: 400; }
.sc-body b, .messung b { color: var(--sc-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.sc-lede { font-family: var(--sc-font-display); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1.12; margin: 0; color: var(--sc-ink); }

/* Italianas Ziffern lesen sich schlecht (die 4 kippt). Zahlen setzt Jost. */
.ziffer, .messblatt dd { font-family: var(--sc-font-text); font-weight: 300; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; }
.ziffer { font-size: .86em; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--kopf-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 0 var(--sc-gutter);
  background: linear-gradient(color-mix(in oklab, var(--sc-canvas) 88%, transparent) 30%, transparent);
}
.wortmarke { font: 400 30px/1 var(--sc-font-display); letter-spacing: .06em; color: var(--sc-ink); text-decoration: none; justify-self: start; }
.kopf__link {
  justify-self: end; color: var(--sc-ink); font-weight: 500; font-size: .95rem; letter-spacing: .02em;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
  transition: text-decoration-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .kopf__link:hover { text-decoration-color: var(--sc-accent); color: #fff; } }

/* ---------- Werkreihe mit Lupe ---------- */
.werkreihe { position: relative; }
.werkreihe ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.werkreihe a {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--sc-ink-soft); text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.werkreihe svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.werkreihe a.ist-fertig { color: var(--sc-ink); }
.werkreihe a span {
  position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% -4px;
  padding: 5px 9px; border-radius: 4px; background: #1A2126; border: 1px solid var(--sc-hairline);
  font-size: 13px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; color: var(--sc-ink);
  opacity: 0; pointer-events: none; transition: opacity 140ms var(--sc-ease-out), translate 140ms var(--sc-ease-out);
}
.werkreihe a:focus-visible span { opacity: 1; translate: -50% 0; }
@media (hover: hover) and (pointer: fine) {
  .werkreihe a:hover { color: var(--sc-ink); }
  .werkreihe a:hover span { opacity: 1; translate: -50% 0; }
}
.werkreihe a[aria-current="step"] span { opacity: 1; translate: -50% 0; color: var(--sc-accent); border-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); }
/* Die Lupe: Messingfreier Stahlring, darin der Stein live von oben. */
.lupe {
  position: absolute; top: -3px; left: 0; width: 52px; height: 52px; border-radius: 50%;
  pointer-events: none; transform: translateX(var(--lupe-x, -3px));
  transition: transform 120ms var(--sc-ease-out);
  box-shadow: 0 0 0 1.5px var(--sc-accent), 0 6px 16px hsl(var(--sc-shadow-color) / .6), inset 0 1px 0 rgb(255 255 255 / .12);
  background: radial-gradient(circle at 35% 30%, #1c252b, #0B0F12 70%);
  overflow: hidden;
}
.lupe canvas { width: 100%; height: 100%; }
.lupe::after { /* Spiegelung auf dem Glas */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, rgb(255 255 255 / .14), transparent 40%);
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 2px;
  font: 500 1rem/1 var(--sc-font-text); letter-spacing: .04em; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--sc-ink); border: 1px solid color-mix(in oklab, var(--sc-accent) 70%, transparent);
  background: color-mix(in oklab, var(--sc-canvas) 55%, transparent);
  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); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 14%, var(--sc-canvas)); }
}
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent); border-color: #B8954C;
}
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .42) 50%, transparent 62%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(60deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-60deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 7px);
  animation: schliffglanz 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes schliffglanz { 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: #E2C27E; } }

/* ---------- Bühnen ---------- */
.buehne { background: transparent; }
.slot { position: absolute; }
.messung { position: absolute; z-index: 5; margin: 0; font-size: .95rem; letter-spacing: .03em; color: var(--sc-ink-soft); }

/* 1 Rohling */
.slot--held { right: 4vw; top: calc(var(--kopf-h) + 2vh); width: 54vw; bottom: 6vh; }
.held { position: absolute; z-index: 5; left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 8rem); max-width: min(40rem, 46vw); }
.held__titel { font-size: clamp(3rem, 1.6rem + 5.4vw, 7rem); line-height: 1; max-width: 9ch; }
.held__sub { margin-top: var(--sc-5); max-width: 34ch; }
.held .knopf { margin-top: var(--sc-6); }
.messung--held { right: var(--sc-gutter); bottom: clamp(2rem, 6vh, 4rem); }

/* 2 Sägen */
.saegen { padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 8rem); }
.saegen__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto; column-gap: clamp(2rem, 5vw, 6rem); row-gap: 3rem; }
.saegen__text { grid-column: 1; grid-row: 1; max-width: 36rem; align-self: start; }
.saegen__text .sc-body { max-width: 52ch; }
.slot--saegen { position: sticky; top: calc(var(--kopf-h) + 4vh); grid-column: 2; grid-row: 1 / span 2; height: min(76vh, 46rem); align-self: start; }
.saegen__bild { grid-column: 1; grid-row: 2; margin: 0; max-width: 30rem; }
.saegen__bild img, .fassen__bild img { width: 100%; height: auto; border-radius: 2px; box-shadow: var(--sc-e2); }
figcaption { margin-top: .9rem; font-size: .95rem; line-height: 1.55; color: var(--sc-ink-soft); max-width: 44ch; }

/* 3 Krone (pan) */
.buehne--krone { display: grid; grid-template-rows: 1fr auto; }
.slot--krone { left: 0; right: 0; top: calc(var(--kopf-h) + 1vh); height: 48vh; }
.schiene { position: absolute; left: 0; bottom: clamp(1.5rem, 5vh, 3.5rem); gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.glied {
  position: relative; flex: 0 0 clamp(15rem, 22vw, 19rem); padding: 1.3rem 1.3rem 1.4rem;
  border-radius: 2px; background: color-mix(in oklab, var(--sc-surface) 86%, transparent);
  border: 1px solid var(--sc-hairline); box-shadow: var(--sc-edge), var(--sc-e1);
  overflow: hidden; isolation: isolate;
}
/* Schliffraster im Grund jeder Karte, nach außen ausgeblendet */
.glied::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background:
    repeating-linear-gradient(60deg, rgb(233 236 236 / .05) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-60deg, rgb(233 236 236 / .05) 0 1px, transparent 1px 18px);
  mask-image: radial-gradient(120% 90% at 80% 0%, #000 20%, transparent 75%);
}
.glied h3 { margin: .8rem 0 .4rem; font: 400 1.7rem/1.1 var(--sc-font-display); color: var(--sc-ink); }
.glied p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--sc-ink-soft); }
.aufsicht { width: 100%; max-width: 8.5rem; height: auto; aspect-ratio: 1; }
.aufsicht .f { fill: rgb(233 236 236 / .04); stroke: rgb(233 236 236 / .32); stroke-width: 1.2; }
.aufsicht .f.an { fill: color-mix(in oklab, var(--sc-accent) 34%, transparent); stroke: var(--sc-accent); }
.glied--kopf { flex-basis: clamp(18rem, 30vw, 26rem); background: transparent; border: 0; box-shadow: none; padding-left: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.glied--kopf::before { display: none; }
.glied--kopf h2 { margin: 0 0 1rem; }
.glied--schluss { flex-basis: clamp(16rem, 24vw, 22rem); background: transparent; border: 0; box-shadow: none; display: flex; align-items: flex-end; }
.glied--schluss::before { display: none; }
.glied--schluss .sc-lede { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1.12; color: var(--sc-ink); }

/* 4 Stille */
.stille { padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 9rem); }
.stille__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; min-height: 92vh; }
.slot--stille { position: relative; height: min(80vh, 44rem); }
.stille__text { max-width: 34rem; }
.stille__text h2 { margin: 0 0 1.4rem; }

/* 5 Pavillon (Höhepunkt) */
.slot--pavillon { left: 0; width: 60vw; top: calc(var(--kopf-h) - 1vh); bottom: 2vh; }
.pavillon__text { position: absolute; z-index: 5; right: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(32rem, 34vw); display: grid; }
.pavillon__text > div { grid-area: 1 / 1; }
.pavillon__text h2 { margin: 0 0 1rem; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.8rem); }
.messblatt {
  position: absolute; z-index: 5; left: var(--sc-gutter); bottom: clamp(1.5rem, 5vh, 3rem); margin: 0;
  display: grid; grid-template-columns: auto auto; column-gap: 2.2rem; row-gap: .5rem; align-items: end;
}
.messblatt div { display: grid; gap: 2px; }
.messblatt dt { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.messblatt dd { margin: 0; font-size: 1.9rem; line-height: 1; color: var(--sc-ink); }
.messblatt dd b { font-weight: 300; }
.messblatt__balken { grid-column: 1 / -1; height: 3px; background: rgb(233 236 236 / .12); position: relative; overflow: hidden; }
.messblatt__balken i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--anteil, 0)); background: var(--sc-accent); }
.messblatt p { grid-column: 1 / -1; margin: .3rem 0 0; font-size: .85rem; color: var(--sc-ink-soft); max-width: 40ch; }

/* 6 Fassen */
.fassen { padding-block: clamp(4rem, 8vw, 8rem) clamp(6rem, 12vw, 11rem); }
.fassen__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); grid-template-rows: auto auto; column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 2rem; }
.fassen__text { grid-column: 1; grid-row: 1; max-width: 34rem; }
.slot--fassen { position: sticky; top: calc(var(--kopf-h) + 2vh); grid-column: 1; grid-row: 2; height: min(64vh, 36rem); }
.fassen__bild { margin: 0; }
.fassen__bild--a { grid-column: 2; grid-row: 1 / span 2; margin-top: 10vh; }
.fassen__bild--b { grid-column: 3; grid-row: 1 / span 2; margin-top: 32vh; }

/* 7 Werkstattzettel */
.buehne--zettel { display: grid; }
.slot--zettel { left: 0; width: 34vw; top: calc(var(--kopf-h) + 18vh); bottom: 14vh; }
.zettel__kopf { position: absolute; z-index: 5; left: var(--sc-gutter); top: calc(var(--kopf-h) + 2vh); max-width: 30rem; }
.zettel__kopf h2 { margin: 0 0 .8rem; }
.zettel__kopf .sc-body { max-width: 40ch; }
.zettel {
  position: absolute; z-index: 5; right: var(--sc-gutter); top: calc(var(--kopf-h) + 1vh); bottom: 3.6rem;
  width: min(38rem, 46vw); padding: 1.3rem 1.5rem 1.2rem;
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto auto auto auto; column-gap: 1rem;
  background: var(--papier); color: var(--papier-tinte); border-radius: 2px; rotate: -0.8deg;
  box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 18px 40px hsl(var(--sc-shadow-color) / .55), 0 3px 8px hsl(var(--sc-shadow-color) / .4);
  isolation: isolate;
}
.zettel::before { /* Karopapier, nach unten auslaufend */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(rgb(35 38 42 / .06) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgb(35 38 42 / .06) 1px, transparent 1px) 0 0 / 14px 14px;
  mask-image: linear-gradient(#000 40%, transparent 95%);
}
.zettel ::selection { background: #23262A; color: var(--papier); }
.zettel__zeichnung { grid-column: 1 / -1; min-height: 0; }
.zettel__zeichnung svg { width: 100%; height: 100%; }
.wahl { border: 0; margin: .7rem 0 0; padding: 0; min-width: 0; }
.wahl legend { padding: 0; margin-bottom: .35rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--papier-weich); }
.wahl label { display: flex; align-items: center; gap: .5rem; min-height: 32px; cursor: pointer; font-size: 1rem; }
.wahl input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1.3px solid var(--papier-tinte); border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer; }
.wahl input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--papier-tinte); scale: 0; transition: scale 140ms var(--sc-ease-out); }
.wahl input:checked::after { scale: 1; }
.wahl input:focus-visible { outline: 2px solid #8A6A26; outline-offset: 2px; }
.wahl input:checked + span { text-decoration: underline; text-decoration-color: #A07E36; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.zettel__notiz { grid-column: 1 / -1; margin: .8rem 0 .7rem; font-size: .95rem; color: var(--papier-weich); }
.zettel .knopf--voll { grid-column: 1 / -1; justify-self: start; }
.zettel__hinweis { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .88rem; color: var(--papier-weich); }
.fuss {
  position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter); bottom: .9rem;
  display: flex; gap: 1.5rem; font-size: .85rem; color: var(--sc-ink-soft);
}
.fuss span:first-child { font: 400 1rem/1.2 var(--sc-font-display); letter-spacing: .06em; color: var(--sc-ink); }

@media (prefers-reduced-motion: reduce) {
  .knopf--voll::before { animation: none; }
  .lupe { transition: none; }
}

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1100px) {
  .kopf__link { font-size: .88rem; }
  .werkreihe ol { gap: 0; }
}
@media (max-width: 860px) {
  :root { --kopf-h: 104px; }
  .kopf { background: linear-gradient(color-mix(in oklab, var(--sc-canvas) 96%, transparent) 72%, transparent); }
  .kopf { grid-template-columns: 1fr auto; grid-template-rows: 48px 50px; row-gap: 0; padding-top: 4px; }
  .wortmarke { font-size: 26px; }
  .werkreihe { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .werkreihe a { width: 44px; height: 44px; }
  .werkreihe a span { display: none; }
  .lupe { width: 50px; height: 50px; }
  .kopf__link { grid-column: 2; grid-row: 1; }

  .slot--held { left: 0; right: 0; width: auto; top: calc(var(--kopf-h) + 1vh); bottom: auto; height: 44svh; }
  .held { left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; bottom: clamp(3.4rem, 9svh, 5rem); }
  .held__titel { font-size: clamp(2.7rem, 1.6rem + 6vw, 3.6rem); max-width: none; }
  .held__sub { font-size: 1.04rem; }
  .messung--held { left: var(--sc-gutter); right: auto; bottom: 1rem; font-size: .85rem; }

  .saegen__raster { grid-template-columns: 1fr; row-gap: 2rem; }
  .saegen__text, .saegen__bild { grid-column: 1; }
  .slot--saegen { position: relative; top: auto; grid-column: 1; grid-row: 2; height: 52svh; }
  .saegen__bild { grid-row: 3; }

  .slot--krone { height: 34svh; }
  .glied { flex-basis: 15.5rem; padding: 1rem; }
  .glied h3 { font-size: 1.45rem; }
  .aufsicht { max-width: 5.5rem; }
  .glied--kopf { flex-basis: 17rem; }
  .glied--schluss { flex-basis: 13rem; }
  .glied--schluss .sc-lede { font-size: 1.7rem; }

  .stille__raster { grid-template-columns: 1fr; min-height: 0; gap: 1rem; }
  .slot--stille { height: 48svh; grid-row: 2; }

  .slot--pavillon { left: 0; right: 0; width: auto; top: calc(var(--kopf-h) + 4.4rem); bottom: 33svh; }
  .pavillon__text { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: 1.2rem; translate: none; }
  .pavillon__text h2 { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.3rem); }
  .pavillon__text .sc-body { font-size: 1rem; line-height: 1.55; }
  .messblatt { top: calc(var(--kopf-h) + .4rem); bottom: auto; left: var(--sc-gutter); right: var(--sc-gutter); grid-template-columns: auto auto 1fr; column-gap: 1.2rem; }
  .messblatt dd { font-size: 1.4rem; }
  .messblatt__balken { grid-column: 3; grid-row: 1; align-self: center; }
  .messblatt p { display: none; }

  .fassen__raster { grid-template-columns: 1fr 1fr; }
  .fassen__text { grid-column: 1 / -1; }
  .slot--fassen { position: relative; top: auto; grid-column: 1 / -1; grid-row: 2; height: 46svh; }
  .fassen__bild--a { grid-column: 1; grid-row: 3; margin-top: 0; }
  .fassen__bild--b { grid-column: 2; grid-row: 3; margin-top: 4rem; }

  .slot--zettel { display: none; }
  .zettel__kopf { top: calc(var(--kopf-h) + .2rem); right: var(--sc-gutter); }
  .zettel__kopf h2 { font-size: 2rem; margin-bottom: .3rem; }
  .zettel__kopf .sc-body { font-size: .95rem; line-height: 1.5; }
  .zettel { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: calc(var(--kopf-h) + 7.6rem); bottom: 2.4rem; padding: .9rem 1rem .9rem; rotate: -0.4deg; column-gap: .6rem; }
  .wahl { margin-top: .4rem; }
  .wahl label { font-size: .92rem; min-height: 30px; gap: .4rem; }
  .zettel__notiz { margin: .5rem 0; font-size: .86rem; }
  .zettel__hinweis { font-size: .8rem; margin-top: .4rem; }
  .fuss { bottom: .5rem; font-size: .72rem; }
  .fuss span:first-child { display: none; }
}
@media (max-width: 380px) {
  .zettel__kopf .sc-body { display: none; }
  .zettel { top: calc(var(--kopf-h) + 3.4rem); }
  .wahl label { font-size: .84rem; }
  .wahl input { width: 14px; height: 14px; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .held__sub { display: none; }
}