/* Lagenhaus. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben unangetastet;
   hier stehen Marke, Werkbank, Werkstück, Laufzettel und Zettel. */
:root {
  --sc-canvas:     #36433D;   /* Linoleum der Bank, falls das Bild fehlt */
  --sc-surface:    #F2EFE7;   /* Papier */
  --sc-ink:        #1D2220;   /* Druckerschwarz, steht immer auf Papier */
  --sc-ink-soft:   #48524D;
  --sc-accent:     #B83A26;   /* Stempelrot */
  --sc-accent-ink: #FBF6EE;
  --sc-font-display: "Literata", Georgia, serif;
  --sc-font-text:    "Sora", system-ui, sans-serif;
  --sc-font-mono:    "Sora", system-ui, sans-serif;
  --sc-shadow-color: 150 30% 8%;
  --papier: #F2EFE7;
  --papier-2: #E9E4D8;
  --papier-kante: #D6CFBF;
  --leinen: #1F4031;
  --werk-unten: 60svh;        /* Unterkante des Werkstücks auf dem Handy, setzt werkbank.js */
  --zettel-b: min(30rem, 36vw);
  color-scheme: light;
}
html { background: var(--sc-canvas); scrollbar-color: #7d8c84 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- Schrift ---------- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 620; font-variation-settings: "opsz" 60;
  letter-spacing: -0.018em; line-height: 1.04; color: var(--sc-ink);
}
.sc-display--xl { font-size: clamp(2.3rem, 1.3rem + 2.7vw, 4.1rem); }
.sc-display--lg { font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.7rem); }
.sc-display--md { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); }
.zettel__text { font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); line-height: 1.62; color: var(--sc-ink-soft); margin: 0; max-width: 52ch; text-wrap: pretty; }
.zettel__klein { font-size: 0.84rem; line-height: 1.5; color: var(--sc-ink-soft); margin: 0; }
.notiz__titel { font: 600 1.18rem/1.25 var(--sc-font-display); margin: 0; color: var(--sc-ink); letter-spacing: -0.01em; }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.5rem); }
  .sc-display--lg { font-size: clamp(1.4rem, 1.05rem + 2vw, 1.75rem); }
}

/* ---------- Bank und Werkstück (fest) ---------- */
.bank {
  position: fixed; inset: 0; z-index: 0;
  background: #36433D url(assets/bank.webp) center / cover no-repeat;
}
.bank::after { /* das Licht kommt von links oben durchs Nordfenster */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 18% 0%, rgb(255 255 250 / .07), transparent 60%),
              linear-gradient(rgb(20 30 26 / .16), rgb(20 30 26 / .3));
}
@media (max-width: 860px) { .bank { background-image: url(assets/bank-m.webp); } }

.werk { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.szene { position: absolute; left: 0; top: 0; width: 0; height: 0; perspective: 2200px; perspective-origin: 0 0; }
.welt, .p3 { transform-style: preserve-3d; }
.welt { position: absolute; left: 0; top: 0; }

/* Ein Seitenfeld des Bogens mit Vorder- und Rückseite */
.panel { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.flaeche {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--papier); overflow: hidden;
}
.flaeche--hinten { transform: rotateY(180deg); }
.flaeche::after { /* Licht und Schatten aus der Neigung, setzt werkbank.js */
  content: ""; position: absolute; inset: 0; background: #2a3430; opacity: var(--dunkel, 0); pointer-events: none;
}
.seite { position: absolute; inset: 0; rotate: var(--rot, 0deg); }
.seite__kopf { position: absolute; left: 13%; right: 13%; top: 8%; height: 1px; background: rgb(29 34 32 / .3); }
.seite__satz {
  position: absolute; left: 13%; right: 13%; top: 13%; bottom: 12%;
  background: repeating-linear-gradient(rgb(29 34 32 / .14) 0 var(--zl, 2px), transparent var(--zl, 2px) var(--zs, 7px));
  -webkit-mask: linear-gradient(#000 0 30%, transparent 30% 68%, #000 68%); mask: linear-gradient(#000 0 30%, transparent 30% 68%, #000 68%);
}
.seite__zahl {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -54%; text-align: center;
  font: 600 var(--zahl, 48px)/1 var(--sc-font-display); color: var(--sc-ink); font-variant-numeric: lining-nums;
}
.seite__zahl--strich { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; }
.seite__pagina { position: absolute; bottom: 5%; font: 500 var(--pag, 9px)/1 var(--sc-font-text); color: var(--sc-ink-soft); font-style: normal; }
.seite--recto .seite__pagina { right: 13%; } .seite--verso .seite__pagina { left: 13%; }
.flatter { position: absolute; width: 3px; height: 5%; top: 40%; background: #141716; }
.falzlinien { position: absolute; left: 0; top: 0; pointer-events: none; }
.falzlinien i { position: absolute; border: 0 dashed rgb(184 58 38 / .55); }

.schatten { position: absolute; left: 0; top: 0; background: rgb(14 22 18 / .42); filter: blur(14px); border-radius: 4px; }

/* Lagen von oben, flach */
.lage {
  position: absolute; left: 0; top: 0; background: var(--papier);
  box-shadow: 1px 1px 0 #DDD7C9, 2px 2px 0 #D2CBBB, 3px 3px 0 #DDD7C9, 4px 4px 0 #C9C1AF,
              10px 16px 22px -6px rgb(14 22 18 / .45);
}
/* Der Block als Quader und die Decke */
.block { position: absolute; left: 0; top: 0; }
.block__f { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--papier); }
.block__ruecken { background: #E4DED0; overflow: visible; }
.block__ruecken svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.block__kopf { background: repeating-linear-gradient(90deg, #EFEBE1 0 2px, #D9D2C3 2px 3px); }
.decke__f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.decke__aussen {
  transform: rotateY(180deg);
  background: linear-gradient(rgb(255 255 255 / .05), rgb(0 0 0 / .12)), var(--leinen) url(assets/leinen.webp) center / 220px;
  border-radius: 1px;
}
.decke__innen {
  background:
    linear-gradient(#8F8C84, #8F8C84) padding-box,
    var(--leinen) url(assets/leinen.webp) center / 220px border-box;
  border: var(--einschlag, 10px) solid transparent;
}
.decke__praegung { position: absolute; left: 50%; top: 22%; translate: -50% 0; width: 22%; aspect-ratio: 1; opacity: .9; }
.decke__praegung svg { width: 100%; height: 100%; color: #C9A089; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .45)); }

/* Faden und Werkzeug auf dem Rücken */
.ruecken-lage { fill: #EEEAE0; }
.ruecken-fuge { stroke: #8D8676; stroke-width: 1.4; }
.ruecken-band { fill: #DCD3BD; }
.ruecken-band-web { stroke: rgb(120 108 84 / .35); stroke-width: .8; }
.ruecken-loch { fill: #2B2723; }
.faden-innen { fill: none; stroke: #A89B7E; stroke-width: 1.2; opacity: .5; }
.faden { fill: none; stroke: #F3EBD6; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(1px 1.5px 0 rgb(40 34 26 / .55)); }
.kapital rect:nth-child(odd) { fill: var(--sc-accent); } .kapital rect:nth-child(even) { fill: #F1E8D6; }
.flattermarke { fill: #141716; }
.spitze { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; pointer-events: none; }

/* Werkzeug auf der Bank */
.werk__werkzeug { position: absolute; inset: 0; }
.wz { position: absolute; left: 0; top: 0; width: auto; height: auto; max-width: none; transform-origin: 50% 50%; filter: drop-shadow(6px 10px 8px rgb(14 22 18 / .35)); transition: opacity 240ms var(--sc-ease-out); }
.anlage i { /* Anlegemarken: zwei rote Winkel, an die der Bogen geschoben wird */
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border: 2px solid var(--sc-accent); opacity: .85;
}
.anlage i:first-child { border-right: 0; border-bottom: 0; }
.anlage i:last-child { border-left: 0; border-top: 0; }

/* ---------- Laufzettel ---------- */
.laufzettel {
  position: fixed; z-index: var(--sc-z-chrome); left: var(--sc-gutter); top: 18px;
  width: var(--zettel-b); padding: 12px 16px 12px;
  background: var(--papier); color: var(--sc-ink);
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .6);
  rotate: -0.8deg;
}
.laufzettel::before { /* Klammer, die den Zettel an die Bank hält */
  content: ""; position: absolute; top: -7px; left: 50%; width: 46px; height: 12px; translate: -50% 0;
  background: linear-gradient(#9AA39E, #6E7873); border-radius: 2px; box-shadow: 0 2px 3px rgb(0 0 0 / .3);
}
.laufzettel__kopf { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; border-bottom: 1px solid rgb(29 34 32 / .25); padding-bottom: 9px; }
.wortmarke { font: 650 1.2rem/1 var(--sc-font-display); letter-spacing: -0.01em; text-decoration: none; color: var(--sc-ink); }
.laufzettel__kopf span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.laufzettel__gaenge { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.laufzettel__gaenge a { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--sc-ink-soft); padding: 2px 0 0; border-radius: 2px; }
.feld { width: 44px; height: 44px; border: 1px solid rgb(29 34 32 / .35); display: grid; place-items: center; background: #F7F5EF; }
.stempel { width: 38px; height: 38px; color: var(--sc-accent); opacity: 0; transform: scale(1.35) rotate(var(--dreh, -8deg)); transition: opacity 160ms var(--sc-ease-out), transform 220ms var(--sc-ease-out); }
.ist-erledigt .stempel { opacity: .88; transform: scale(1) rotate(var(--dreh, -8deg)); }
.name { font-size: .72rem; line-height: 1.15; text-align: center; letter-spacing: .01em; }
.ist-hier .name { color: var(--sc-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .laufzettel__gaenge a:hover .feld { border-color: var(--sc-accent); } }

/* ---------- Zettel (alle Texte liegen auf Papier) ---------- */
.zettel, .notiz {
  position: relative; background: var(--papier); color: var(--sc-ink);
  padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.2vw, 32px);
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .55);
  rotate: var(--neig, -0.5deg);
}
.zettel::before, .notiz::before { /* feine Papierfaser, nach unten ausgeblendet */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgb(120 110 90 / .05) 0 1px, transparent 1px 5px);
  -webkit-mask: linear-gradient(#000, transparent 80%); mask: linear-gradient(#000, transparent 80%);
}
.zettel > * + * { margin-top: 14px; }

.akt { position: relative; z-index: 2; }
.buehne { background: transparent; }
.zettelplatz {
  position: absolute; left: var(--sc-gutter); top: 210px; width: var(--zettel-b);
  display: grid; z-index: var(--sc-z-copy);
}
.zettelplatz > .zettel { grid-area: 1 / 1; align-self: start; }
.zettelplatz > .zettel:nth-child(2n) { --neig: 0.6deg; }

/* Held */
.akt--bogen { min-height: 118svh; padding: 210px var(--sc-gutter) 0; }
.zettel--held { width: var(--zettel-b); --neig: -1deg; }
.zettel--held .knopf { margin-top: 22px; }
.schnipsel { position: absolute; z-index: 0; pointer-events: none; }
.schnipsel--a { /* Andruckstreifen mit Farbbalken */
  left: calc(var(--sc-gutter) + var(--zettel-b) - 40px); top: 70svh; width: 150px; height: 34px; rotate: 9deg;
  background: linear-gradient(90deg, #1D2220 0 20%, #B83A26 20% 40%, #3F6B8C 40% 60%, #C9A43A 60% 80%, #E9E4D8 80%), var(--papier);
  background-size: 92% 12px, auto; background-position: 6px 50%, 0 0; background-repeat: no-repeat;
  box-shadow: var(--sc-e1);
}
.schnipsel--b { /* Papierrest vom Beschnitt */
  left: calc(var(--sc-gutter) - 26px); top: 86svh; width: 230px; height: 22px; rotate: -4deg; background: var(--papier-2); box-shadow: var(--sc-e1);
}

/* Reihen-Probe */
.reihe { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-width: 26rem; }
.reihe li { font: 600 .95rem/1 var(--sc-font-display); text-align: center; padding: 7px 0; background: #fff; border: 1px solid rgb(29 34 32 / .2); font-variant-numeric: tabular-nums; }

/* Zusammentragen: Notizen auf einer Leiste unten */
.buehne--lagen .leiste {
  position: absolute; left: 0; bottom: clamp(18px, 4vh, 40px); gap: clamp(20px, 3vw, 44px);
  padding-inline: var(--sc-gutter); align-items: flex-end;
}
.notiz { flex: 0 0 auto; width: clamp(15rem, 22vw, 21rem); }
.notiz > * + * { margin-top: 10px; }
.notiz:nth-child(2) { --neig: 0.8deg; } .notiz:nth-child(3) { --neig: -0.6deg; } .notiz:nth-child(4) { --neig: 1deg; }
.notiz--kopf { width: clamp(17rem, 28vw, 26rem); }
.notiz--schluss { width: auto; background: transparent; box-shadow: none; padding-right: 8vw; }
.notiz--schluss::before { display: none; }
.notiz__satz { font: italic 500 clamp(1.4rem, 1rem + 1.2vw, 2rem)/1.2 var(--sc-font-display); color: var(--papier); margin: 0; max-width: 14ch; text-shadow: 0 1px 2px rgb(10 16 13 / .5); }

/* Warum Faden */
.akt--faden { padding: 30vh var(--sc-gutter) 34vh; }
.zettel--wissen { width: var(--zettel-b); --neig: 0.5deg; }
.aufschlag { margin: 18px 0 4px; }
.aufschlag svg { width: 100%; height: auto; }
.aufschlag__buch path:not([class]) { fill: #FFFDF8; stroke: #6F6A60; stroke-width: 1.2; }
.aufschlag__blatt { fill: none; stroke: #9C968A; stroke-width: 1; }
.aufschlag__faden { fill: none; stroke: var(--sc-accent); stroke-width: 2; }
.aufschlag__leim { fill: #C8B98F; }
.aufschlag figcaption { font-size: .84rem; line-height: 1.45; color: var(--sc-ink-soft); margin-top: 6px; }

/* Schluss */
.akt--schluss { padding: 170px var(--sc-gutter) 6vh; min-height: 100svh; display: grid; align-items: start; }
.schluss { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 84rem; width: 100%; margin-inline: auto; }
.bastel { position: relative; padding: 4% 4% 0 0; }
.bastel__blatt { background: #FBFAF6; box-shadow: var(--sc-e3); }
.bastel__blatt svg { display: block; width: 100%; height: auto; }
.bastel__blatt--schoen { position: relative; rotate: -1.4deg; }
.bastel__blatt--wider { position: absolute; inset: 0 0 auto 4%; rotate: 2.6deg; opacity: .96; }
.zettel--schluss { --neig: 0.4deg; }
.zettel--schluss > * + * { margin-top: 14px; }
.zettel--schluss .sc-stack > * + * { margin-top: 14px; }
.linie { border: 0; border-top: 1px dashed rgb(29 34 32 / .3); margin: 22px 0 !important; }
.fuss { padding-top: 6px; }
.akt--schluss .zettel--schluss { order: -1; max-width: 34rem; }
.zettel--schluss .zettel__text { max-width: 60ch; }
/* Werk-Ebene: in der Schlussszene gibt der Laufzettel nichts mehr vor */

/* Bastelbogen-Zeichnung */
.bb { font-family: var(--sc-font-display); }
.bb-bogen { fill: #FFFFFF; stroke: #1D2220; stroke-width: .35; }
.bb-kt { fill: rgb(29 34 32 / .35); }
.bb-z { fill: rgb(29 34 32 / .14); }
.bb-n { font-size: 26px; font-weight: 600; fill: #1D2220; }
.bb-strich { fill: #1D2220; }
.bb-p { font: 500 3px var(--sc-font-text); fill: #48524D; }
.bb-falz { stroke: #B83A26; stroke-width: .45; stroke-dasharray: 2.4 1.6; }
.bb-falz--drei { stroke-dasharray: .8 1.4; }
.bb-schnitt { fill: none; stroke: #1D2220; stroke-width: .3; }
.bb-l { font: 500 3.1px var(--sc-font-text); fill: #1D2220; }
.bb-flatter { fill: #141716; }

/* ---------- Knopf und Link ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
  border-radius: 3px; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 600 1rem/1 var(--sc-font-text); letter-spacing: .005em;
  transition: transform 140ms var(--sc-ease-out), background-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); box-shadow: 0 2px 0 #8C2A1B, var(--sc-e1); }
.knopf--voll::before { /* feines Rasterbild wie im Druck, ein Lichtstreif läuft darüber */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .28) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    radial-gradient(rgb(0 0 0 / .14) 0.8px, transparent 1.1px) 0 0 / 5px 5px;
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }
@media (hover: hover) and (pointer: fine) { .knopf--voll:hover { background-color: #A83322; } }
.textlink { color: var(--sc-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .textlink:hover { color: var(--sc-accent); } }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  :root { --zettel-b: calc(100vw - 2 * var(--sc-gutter)); }
  .laufzettel { left: 10px; right: 10px; top: 8px; width: auto; padding: 6px 10px; rotate: 0deg; display: flex; align-items: center; gap: 10px; }
  .laufzettel::before { display: none; }
  .laufzettel__kopf { margin: 0; border: 0; padding: 0; }
  .laufzettel__kopf span { display: none; }
  .wortmarke { font-size: 1.05rem; }
  .laufzettel__gaenge { flex: 1; gap: 4px; }
  .laufzettel__gaenge a { min-height: 44px; align-content: center; }
  .feld { width: 30px; height: 30px; }
  .stempel { width: 26px; height: 26px; }
  .name { display: none; }
  .ist-hier .feld { outline: 2px solid var(--sc-accent); outline-offset: 1px; }
  .zettelplatz { top: var(--werk-unten); left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
  .zettel, .notiz { padding: 14px 16px; }
  .zettel > * + * { margin-top: 8px; }
  .akt--bogen { padding-top: var(--werk-unten); min-height: 100svh; }
  .schnipsel { display: none; }
  .reihe { gap: 3px; } .reihe li { padding: 5px 0; font-size: .85rem; }
  .notiz { width: 72vw; } .notiz--kopf { width: 80vw; }
  .akt--faden { padding: 70svh var(--sc-gutter) 30svh; }
  .schluss { grid-template-columns: 1fr; }
  .akt--schluss { padding-top: 76px; }
  .akt--schluss .zettel--schluss { justify-self: stretch; max-width: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .zettel .zettel__klein { display: none; }
  .zettelplatz .zettel__text { font-size: .9rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf--voll::before { animation: none; }
  .stempel { transition: opacity 200ms linear; transform: scale(1) rotate(var(--dreh, -8deg)); }
  .wz { transition: none; }
}

/* ---------- Druck: nur der Bastelbogen, Vorder- und Rückseite ---------- */
@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: #fff; }
  body > :not(main), main > :not(#bastelbogen), .zettel--schluss, [data-sc-progress] { display: none !important; }
  .akt--schluss, .schluss, .bastel { display: block; padding: 0; margin: 0; min-height: 0; }
  .bastel__blatt { position: static !important; rotate: none !important; box-shadow: none; opacity: 1 !important; width: 297mm; height: 209mm; break-after: page; }
  .bastel__blatt svg { width: 297mm; height: 209mm; }
  .bastel { display: flex; flex-direction: column-reverse; opacity: 1 !important; transform: none !important; }
}