/* nucknuck.app – Produktseite als Scroll-Erzählung an der Genesis-Karte I-8.
   Hell/Dunkel: eine registrierte Zahl --m (0 = hell, 1 = dunkel) blendet in 400 ms; alle Farben sind Mischungen
   aus ihrem hellen und dunklen Wert, Kartenbilder liegen doppelt und blenden über --m.
   Karten: Maße aus der App (360 × 640-Einheiten, --u = Kartenbreite / 360; signierte Karte 252 Einheiten, --mu).
   Schriften: die drei der Karten (Cormorant Garamond, Barlow Condensed, IBM Plex Mono), selbst gehostet, keine fremden Server. */
/* Schriften der Karten, selbst gehostet (SIL Open Font License, Lizenzen in assets/fonts) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-ext-500-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("assets/fonts/cormorant-garamond-latin-ext-600-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/barlow-condensed-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@property --m { syntax: "<number>"; inherits: true; initial-value: 0 }
@property --lift { syntax: "<number>"; inherits: true; initial-value: 0 }

:root {
  --m: 0;
  --bg:    color-mix(in srgb, #14110E calc(var(--m) * 100%), #F5EFE4);
  --bg2:   color-mix(in srgb, #1A1713 calc(var(--m) * 100%), #EDE6DA);
  --panel: color-mix(in srgb, #1C1915 calc(var(--m) * 100%), #FBF8F2);
  --ink:   color-mix(in srgb, #EEE8DE calc(var(--m) * 100%), #1B1814);
  --ink2:  color-mix(in srgb, #ABA397 calc(var(--m) * 100%), #5E564B);
  --ink3:  color-mix(in srgb, #8A8378 calc(var(--m) * 100%), #6F675B);
  --rule:  color-mix(in srgb, var(--ink) 12%, transparent);
  --rule2: color-mix(in srgb, var(--ink) 24%, transparent);
  --dot: #F7931A;
  --accT:  color-mix(in srgb, #FFAA5C calc(var(--m) * 100%), #A34A00);
  --shA: calc(.14 + .26 * var(--m));
  --shB: calc(.18 + .27 * var(--m));
  --serif: "Cormorant Garamond", "New York", ui-serif, Georgia, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --caps: "Barlow Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --hh: 64px;
  --colW: min(36vw, 520px);
  --gut: max(40px, 5vw);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m: 1 } }
:root[data-theme="dark"] { --m: 1 }
:root[data-theme="light"] { --m: 0 }
:root.ready { transition: none }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hh); overflow-anchor: none }
html, body { overflow-x: hidden }
@supports (overflow: clip) { html, body { overflow-x: clip } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
a { color: inherit }
button { font: inherit; color: inherit }
h1, h2, h3 { margin: 0; font-weight: 600 }
p { margin: 0 }
[hidden] { display: none !important }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99 }
.skip:focus { left: 16px; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px }
:focus-visible { outline: 2px solid var(--dot); outline-offset: 3px; border-radius: 4px }
.logo { --lg-coin: var(--dot); display: block; color: var(--ink) }

/* ---------------------------------------------------------------- Kopfzeile */
.top { position: sticky; top: 0; z-index: 50; height: var(--hh); display: flex; align-items: center; gap: 32px;
  padding: 0 max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid var(--rule) }
.brand { display: block; padding: 6px 0; border-radius: 4px }
.brand .logo { height: 20px; width: auto }
.nav { display: flex; gap: 28px }
.nav a { text-decoration: none; font-size: 15px; color: var(--ink2); padding: 6px 0 }
.nav a:hover { color: var(--ink) }
.tools { margin-left: auto; display: flex; align-items: center; gap: 10px }
.seg { display: flex; padding: 3px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--rule) }
.seg button { border: 0; background: transparent; cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .12em; padding: 8px 11px 8px 12px; border-radius: 999px; color: var(--ink3);
  transition: color .25s, background-color .25s, box-shadow .25s }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, calc(.08 + .3 * var(--m))) }
.seg button:hover { color: var(--ink) }
.themebtn { position: relative; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg2); cursor: pointer; padding: 0 }
.themebtn svg { position: absolute; left: 9px; top: 9px; width: 18px; height: 18px; color: var(--ink); transition: none }
.themebtn .i-sun { opacity: calc(1 - var(--m)); transform: rotate(calc(var(--m) * 90deg)) scale(calc(1 - .3 * var(--m))) }
.themebtn .i-moon { opacity: var(--m); transform: rotate(calc((1 - var(--m)) * -60deg)) scale(calc(.7 + .3 * var(--m))) }
.badge { position: relative; display: inline-block; border-radius: 9px; line-height: 0 }
.badge img { display: block; height: 100%; width: auto }
.badge .b-d { position: absolute; left: 0; top: 0; opacity: var(--m) }
.badge .b-l { opacity: calc(1 - var(--m)) }
.badge-s { height: 40px; margin-left: 6px }
.badge-l { height: 50px }

/* ---------------------------------------------------------------- Erzählung */
.story { position: relative }
.stage { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); z-index: 1; overflow: hidden; pointer-events: none }
.stage-in { position: absolute; inset: 0; overflow: hidden }
.steps { position: relative; z-index: 2; margin-top: calc(var(--hh) - 100vh); margin-top: calc(var(--hh) - 100svh); pointer-events: none }
/* Texte der Schritte liegen fest an einer Stelle und blenden über t ineinander (site.js); die Schritte selbst sind Scrollstrecke */
.step { height: 100vh; height: 100svh }
.step-hero { height: 110vh; height: 110svh }
.step:last-child { height: 130vh; height: 130svh }
.step-in { position: fixed; z-index: 4; left: max(var(--gut), env(safe-area-inset-left)); top: calc(var(--hh) + 26vh); width: var(--colW); pointer-events: auto; opacity: 0; visibility: hidden }
.step-hero .step-in { top: calc(var(--hh) + 14vh); opacity: 1; visibility: visible }
html:not(.js) .step-in { position: static; opacity: 1; visibility: visible; padding: 20vh 0 }
.kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); margin-bottom: 16px }
.kicker .num { color: var(--accT) }
.step h1 { font: 600 clamp(40px, 4.4vw, 64px)/1.02 var(--serif); letter-spacing: -.022em; margin-bottom: 22px; text-wrap: balance }
.step h2 { font: 600 clamp(32px, 3.5vw, 54px)/1.05 var(--serif); letter-spacing: -.018em; margin-bottom: 16px; text-wrap: balance }
.step p:not(.kicker) { color: var(--ink2); font-size: 18px; line-height: 1.55; text-wrap: pretty }
.step .lead { font-size: 19px; max-width: 30em }
.cta-row { display: flex; align-items: center; gap: 18px; margin-top: 30px }
.scrollhint { display: flex; align-items: center; gap: 12px; margin-top: 40px; font: 500 11px/1 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3) !important }
.sh-line { width: 1px; height: 34px; background: linear-gradient(var(--ink3), transparent); animation: sh 2.4s ease-in-out infinite }
@keyframes sh { 0%, 100% { transform: scaleY(.5); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } }
.live { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; font-family: var(--mono) !important; font-size: 13px !important }
.live-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3) }
.live-v { color: var(--ink); letter-spacing: .04em }

/* Bühne: alles absolut, Lage und Größe setzt site.js aus dem Scrollfortschritt */
.stage-in > * { position: absolute; left: 0; top: 0 }
.tap { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; opacity: 0; z-index: 40;
  background: color-mix(in srgb, #fff 10%, transparent); border: 1px solid color-mix(in srgb, #fff 70%, transparent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) }

/* ---------------------------------------------------------------- Karte (gemeinsam) */
.pal {
  --pa: color-mix(in srgb, var(--pa-d) calc(var(--m) * 100%), var(--pa-l));
  --pb: color-mix(in srgb, var(--pb-d) calc(var(--m) * 100%), var(--pb-l));
  --p0: color-mix(in srgb, var(--p0-d) calc(var(--m) * 100%), var(--p0-l));
  --ink: color-mix(in srgb, var(--ink-d) calc(var(--m) * 100%), var(--ink-l));
  --ink2: color-mix(in srgb, var(--ink2-d) calc(var(--m) * 100%), var(--ink2-l));
  --acc: color-mix(in srgb, var(--acc-d) calc(var(--m) * 100%), var(--acc-l));
  --accT: color-mix(in srgb, var(--acc-d) calc(var(--m) * 100%), var(--accT-l));
  --edge: color-mix(in srgb, var(--pb) calc(78% - 8% * var(--m)), var(--ink));
}
.card { width: calc(var(--u) * 360); height: calc(var(--u) * 640) }
.persp { perspective: calc(var(--u) * 1500) }
.flip { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50% calc(var(--u) * -1.3) }
.face { position: absolute; inset: 0; border-radius: calc(var(--u) * 14); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--pa);
  box-shadow: 0 1px 2px rgba(0, 0, 0, var(--shA)), 0 12px 18px rgba(0, 0, 0, var(--shB)) }
.face.front { box-shadow: 0 max(0px, calc(var(--u) * 2.4 * (1 - var(--lift) * 8))) 0 var(--edge), 0 1px 2px rgba(0, 0, 0, var(--shA)), 0 12px 18px rgba(0, 0, 0, var(--shB)) }
.face.back { transform: translateZ(calc(var(--u) * -2.6)) rotateY(180deg) }
.face::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) calc(22% + 8% * var(--m)), transparent); pointer-events: none; z-index: 29 }
.face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, calc(.22 * var(--lift))); pointer-events: none; z-index: 30 }
.slice { position: absolute; inset: 0; border-radius: calc(var(--u) * 14); background: color-mix(in srgb, var(--edge) var(--k, 100%), #000); backface-visibility: visible }
.ims { position: absolute; inset: 0 }
.ims img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none }
.ims img.d { opacity: var(--m) }
/* Schuber-Textur je Design */
:root { --tex-blend: multiply; --tex-op: .22 } :root[data-theme="dark"] { --tex-blend: soft-light; --tex-op: .32 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tex-blend: soft-light; --tex-op: .32 } }

/* Vorderseite: Sprachwechsel nur im Textfeld (Kopf, Motiv, Autor, Nummer bleiben stehen) */
.f-other { clip-path: inset(47.6% 0 7.6% 0); opacity: 0 }
.f-bio { position: absolute; left: 0; right: 0; top: calc(var(--u) * 222); height: calc(var(--u) * 366); opacity: 0; z-index: 5;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pa) 0%, transparent) 0, var(--pa) 14%, var(--pa) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 calc(var(--u) * 26) calc(var(--u) * 10) }
.f-bio .bw { font: 800 calc(var(--u) * 15)/1.1 var(--caps); letter-spacing: .12em; font-stretch: condensed; color: var(--ink); margin-bottom: calc(var(--u) * 8) }
.f-bio .bb { font: 500 calc(var(--u) * 19)/1.28 var(--serif); color: var(--ink) }
.f-bio .bs { margin-top: calc(var(--u) * 12); font: 500 max(9.5px, calc(var(--u) * 9))/1.3 var(--mono); letter-spacing: .14em; color: var(--accT); text-transform: uppercase }

/* Rückseite (SeriesCardBack + BackGraphic/ValueCartouche + Signier-Zeile), 360er-Einheiten */
.bk-veil { position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--pa) calc(42% + 8% * var(--m)), transparent) 0%,
    color-mix(in srgb, var(--pa) calc(48% + 7% * var(--m)), transparent) 9.5%,
    color-mix(in srgb, var(--pa) calc(92% + 1% * var(--m)), transparent) 14%,
    color-mix(in srgb, var(--pa) calc(86% + 4% * var(--m)), transparent) 55%,
    color-mix(in srgb, var(--pb) calc(93% + 2% * var(--m)), transparent) 100%) }
.bk-head { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 39); color: var(--ink); opacity: .9 }
.bk-head b { display: block; font: 800 calc(var(--u) * 15)/calc(var(--u) * 18) var(--caps); font-stretch: condensed; letter-spacing: .12em }
.bk-head i { display: block; margin-top: calc(var(--u) * 2); font: 500 calc(var(--u) * 9.5)/calc(var(--u) * 11.5) var(--caps); font-style: normal; font-stretch: condensed; letter-spacing: .22em; color: var(--ink2) }
.bk-q { position: absolute; left: calc(var(--u) * 26); right: calc(var(--u) * 24); top: calc(var(--u) * 133); --qs: 1 }
.bk-q .caps { display: block; font: 800 calc(var(--u) * 30 * var(--qs))/.92 var(--caps); font-stretch: condensed; letter-spacing: .01em; text-transform: uppercase; color: var(--ink) }
.bk-q .rest { display: block; margin-top: calc(var(--u) * 5.4 * var(--qs)); font: 600 calc(var(--u) * 33.2 * var(--qs))/1.2 var(--serif); color: var(--ink) }
.bk-q em { font-style: italic; color: var(--acc) }
.cart { position: absolute; left: 50%; top: calc(var(--u) * 314); width: calc(var(--u) * 268); height: calc(var(--u) * 80.6); transform: translateX(-50%);
  border-radius: calc(var(--u) * 12.9); background: color-mix(in srgb, var(--pa) 88%, transparent); opacity: .8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3.2); padding: 0 calc(var(--u) * 23.5) }
.cart::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 calc(var(--u) * .64), transparent calc(var(--u) * .64) calc(var(--u) * 3.03));
  box-shadow: inset 0 0 0 calc(var(--u) * 1.29) color-mix(in srgb, var(--ink) 55%, transparent) }
.cart::after { content: ""; position: absolute; inset: calc(var(--u) * 5.36); border-radius: calc(var(--u) * 8.6); box-shadow: inset 0 0 0 calc(var(--u) * .75) color-mix(in srgb, var(--ink) 28%, transparent) }
.cart-w { position: relative; display: grid; width: 100% }
.cart-w > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; font: 800 calc(var(--u) * 32.1 * var(--cs, 1))/1 var(--caps); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: 0 }
.cart-w > .ph { color: color-mix(in srgb, var(--ink) 40%, transparent); opacity: 1; font-size: calc(var(--u) * 18.2 * var(--cs, 1)); letter-spacing: .18em; align-self: center }
.cart-s { position: relative; display: grid }
.cart-s > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; font: 500 calc(var(--u) * 9.1)/1.2 var(--mono); letter-spacing: .2em; color: var(--ink2) }
.trk { position: absolute; left: calc(var(--u) * 24); right: calc(var(--u) * 24); top: calc(var(--u) * 406); height: calc(var(--u) * 32) }
.trk .rail, .trk .fill { position: absolute; left: calc(var(--u) * 9.6); right: calc(var(--u) * 9.6); top: 50%; height: calc(var(--u) * 1.6); margin-top: calc(var(--u) * -.8); background: color-mix(in srgb, var(--ink) 26%, transparent) }
.trk .fill { right: auto; width: 0; background: color-mix(in srgb, var(--ink) 75%, transparent) }
.trk .dot { position: absolute; top: 50%; width: calc(var(--u) * 8.6); height: calc(var(--u) * 8.6); margin: calc(var(--u) * -4.3) 0 0 calc(var(--u) * -4.3); border-radius: 50%;
  background: var(--pa); box-shadow: inset 0 0 0 calc(var(--u) * 1.29) color-mix(in srgb, var(--ink) 50%, transparent) }
.trk .knob { position: absolute; top: 50%; left: 0; width: calc(var(--u) * 21.4); height: calc(var(--u) * 21.4); margin: calc(var(--u) * -10.7) 0 0 calc(var(--u) * -10.7); border-radius: 50%;
  background: var(--ink); box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 2.2) rgba(0, 0, 0, .25); opacity: 0 }
.ends { position: absolute; left: calc(var(--u) * 24); right: calc(var(--u) * 24); top: calc(var(--u) * 444.5); display: flex; justify-content: space-between; gap: calc(var(--u) * 8);
  font: 500 calc(var(--u) * 9.6)/calc(var(--u) * 15) var(--mono); letter-spacing: calc(var(--u) * .86); text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); white-space: nowrap }
.fld { position: absolute; left: calc(var(--u) * 17.8); right: calc(var(--u) * 17.8); top: calc(var(--u) * 483); height: calc(var(--u) * 64); border-radius: calc(var(--u) * 6.5);
  background: color-mix(in srgb, var(--p0) calc(50% - 18% * var(--m)), transparent); box-shadow: inset 0 0 0 calc(var(--u) * 1.07) color-mix(in srgb, var(--ink) 42%, transparent);
  display: flex; align-items: center }
.fld .mic { flex: none; width: calc(var(--u) * 39.6); height: calc(var(--u) * 39.6); margin-left: calc(var(--u) * 12.4); border-radius: 50%; background: var(--ink); color: var(--pa); display: grid; place-items: center }
.fld .mic svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18) }
.fld .ph { flex: 1; margin-left: calc(var(--u) * 13.5); font: 500 calc(var(--u) * 21.4)/1 var(--serif); color: color-mix(in srgb, var(--ink) 55%, transparent); white-space: nowrap; overflow: hidden }
.fld .kb { flex: none; width: calc(var(--u) * 22); height: calc(var(--u) * 16); margin-right: calc(var(--u) * 17); color: color-mix(in srgb, var(--ink) 60%, transparent) }
.row { position: absolute; left: calc(var(--u) * 17.8); right: calc(var(--u) * 17.8); top: calc(var(--u) * 570); height: calc(var(--u) * 47.1); display: flex; gap: calc(var(--u) * 6.4) }
.sgn { position: relative; flex: none; width: calc((100% - var(--u) * 6.4) * .79); height: 100%; border-radius: calc(var(--u) * 6.5); background: var(--ink); color: var(--p0);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8.6); font: 800 calc(var(--u) * 17.1)/1 var(--caps); font-stretch: condensed; letter-spacing: calc(var(--u) * 1.93); text-transform: uppercase; overflow: hidden }
.sgn::after { content: ""; position: absolute; inset: calc(var(--u) * 3.2); border-radius: calc(var(--u) * 3.3); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--p0) calc(35% + 25% * var(--cf, 0)), transparent) }
.sgn .accbg { position: absolute; inset: 0; background: var(--acc); opacity: var(--cf, 0) }
.sgn > svg, .sgn > b, .sgn > .spin { position: relative }
.sgn .lab { position: relative; display: grid }
.sgn .lab > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8.6); white-space: nowrap; opacity: 0 }
.sgn .lab > span:first-child { opacity: 1 }
.sgn .lab svg { width: calc(var(--u) * 25); height: calc(var(--u) * 18) }
.sgn .lab .i-seal { width: calc(var(--u) * 16); height: calc(var(--u) * 16) }
.sgn .spin { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; border: calc(var(--u) * 1.6) solid color-mix(in srgb, var(--p0) 30%, transparent); border-top-color: var(--p0); animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.bmk { flex: 1; height: 100%; border-radius: calc(var(--u) * 6.5); color: var(--ink); display: grid; place-items: center;
  background: color-mix(in srgb, var(--p0) calc(50% - 18% * var(--m)), transparent); box-shadow: inset 0 0 0 calc(var(--u) * 1.07) color-mix(in srgb, var(--ink) 42%, transparent) }
.bmk svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18) }

/* ---------------------------------------------------------------- Schuber (Slipcase.swift), 384 × 548 */
.case { width: calc(var(--u) * 384); height: calc(var(--u) * 548); z-index: 20 }
.case > svg { display: block; width: 100%; height: 100%; overflow: visible }

/* ---------------------------------------------------------------- Druck (CardPrint.swift) */
.slot { height: calc(var(--k3) * 12); margin-top: calc(var(--k3) * -6); z-index: 34; opacity: 0 }
.slot i { position: absolute; left: 0; right: 0; top: 50%; border-radius: 99px }
.slot .sd0 { height: calc(var(--k3) * 12); margin-top: calc(var(--k3) * -6); background: rgba(255, 255, 255, .07); filter: blur(calc(var(--k3) * 4)); opacity: var(--m) }
.slot .sd1 { height: calc(var(--k3) * 4); margin-top: calc(var(--k3) * -2); background: color-mix(in srgb, #000 calc(var(--m) * 100%), #0B1410);
  box-shadow: 0 calc(var(--k3) * .5) 0 calc(var(--k3) * -.1) rgba(255, 255, 255, calc(.55 * (1 - var(--m)))), 0 0 calc(var(--k3) * 1.5) rgba(0, 0, 0, var(--m)) }
.slot .sd2 { height: calc(var(--k3) * .6); margin-top: calc(var(--k3) * -2.9); background: rgba(255, 255, 255, calc(.16 * var(--m))) }
.slot .sd3 { height: calc(var(--k3) * .9); margin-top: calc(var(--k3) * 2.25); opacity: var(--m);
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .42), rgba(255, 255, 255, .08)) }

/* ---------------------------------------------------------------- Signierte Karte (SignedMiniCard.swift), 252 Einheiten */
.mini { position: absolute; width: calc(var(--mu) * 252); height: calc(var(--mu) * 252); border-radius: calc(var(--mu) * 9.8); overflow: hidden; background: var(--pa);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .16), 0 calc(var(--mu) * 10) calc(var(--mu) * 12) rgba(0, 0, 0, .22) }
.mini .ims img { height: auto; bottom: auto }
.mveil { position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pa) 0%, transparent) 0%, var(--pa) 46%, var(--pa) 100%) }
.minfo { position: absolute; left: calc(var(--mu) * 16); bottom: calc(var(--mu) * 15); display: flex; flex-direction: column; gap: calc(var(--mu) * 3); white-space: nowrap }
.minfo .mnr { font: 500 calc(var(--mu) * 17)/1.15 var(--mono); color: var(--accT) }
.minfo .ml { font: 500 calc(var(--mu) * var(--l78, 7.8))/1.25 var(--mono); letter-spacing: calc(var(--mu) * .5); color: color-mix(in srgb, var(--ink) 85%, transparent) }
.mseal { position: absolute; right: calc(var(--mu) * 6); bottom: calc(var(--mu) * 4); width: calc(var(--mu) * 96); height: calc(var(--mu) * 96); overflow: visible;
  filter: drop-shadow(calc(var(--mu) * -.4) calc(var(--mu) * -.4) 0 rgba(0, 0, 0, calc(.22 + .3 * var(--m))))
          drop-shadow(calc(var(--mu) * .4) calc(var(--mu) * .4) 0 rgba(255, 255, 255, calc(.45 - .35 * var(--m)))) }
.mseal .sc { opacity: calc(.58 - .03 * var(--m)) }
.pshade { position: absolute; left: 0; right: 0; height: calc(var(--mu) * 10); background: linear-gradient(rgba(0, 0, 0, .22), transparent); opacity: 0; z-index: 4 }
.glint { position: absolute; inset: 0; overflow: hidden; z-index: 5; pointer-events: none }
.glint i { position: absolute; top: -30%; bottom: -30%; width: 45%; left: 0; transform: translateX(-140%) rotate(15deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent) }
.belt { z-index: 12 }
.belt .strands { position: absolute; left: 0; top: 0; overflow: visible }

/* ---------------------------------------------------------------- Abschnitte */
.sect { max-width: 1240px; margin: 0 auto; padding: 120px var(--gut) }
.sect-head { max-width: 720px; margin-bottom: 52px }
.sect-head h2 { font: 600 clamp(34px, 4vw, 54px)/1.04 var(--serif); letter-spacing: -.02em; margin-bottom: 18px; text-wrap: balance }
.sect-lead { color: var(--ink2); font-size: 19px; text-wrap: pretty }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 30px }
.gitem { display: flex; flex-direction: column; gap: 16px }
.gcard { position: relative; width: 100%; aspect-ratio: 360 / 640; container-type: inline-size; --u: calc(100cqw / 360); border: 0; padding: 0; background: none; cursor: pointer; border-radius: calc(var(--u) * 14) }
.gcard .flip { transition: transform .62s cubic-bezier(.45, .05, .2, 1) }
.gcard.on .flip { transform: rotateY(-180deg) }
.gcard .persp { position: absolute; inset: 0 }
.gcard.anim .persp { animation: lift .62s cubic-bezier(.45, .05, .2, 1) }
.gcard.anim .flip { animation: liftv .62s cubic-bezier(.45, .05, .2, 1) }
@keyframes lift { 50% { transform: scale(1.05) } }
@keyframes liftv { 50% { --lift: 1 } }
.gname { font: 800 19px/1.15 var(--caps); font-stretch: condensed; letter-spacing: .1em; text-transform: uppercase; display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--rule2) }
.gname .gser { font: 500 11px/1.2 var(--mono); letter-spacing: .16em; color: var(--ink3) }
.gsub { font: italic 400 17px/1.4 var(--serif); color: var(--ink2) }


.faq-list { max-width: 820px; border-top: 1px solid var(--rule2) }
.faq-list details { border-bottom: 1px solid var(--rule2) }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font: 600 20px/1.3 var(--serif) }
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary svg { position: absolute; right: 4px; top: 25px; width: 22px; height: 22px; color: var(--ink3); transition: transform .3s }
.faq-list details[open] summary svg { transform: rotate(180deg) }
.faq-list details p { color: var(--ink2); padding: 0 44px 24px 0; max-width: 46em }

.v4v-box { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; padding: 48px; border-radius: 22px; background: var(--panel); border: 1px solid var(--rule) }
.v4v-text h2 { font: 600 clamp(30px, 3.4vw, 44px)/1.08 var(--serif); letter-spacing: -.018em; margin-bottom: 16px }
.v4v-text p { color: var(--ink2); max-width: 36em }
.addr-row { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap }
.addr { font: 500 14px/1.4 var(--mono); padding: 10px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--rule); word-break: break-all }
.copy { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--rule2); background: transparent; cursor: pointer; font-size: 14px }
.copy svg { width: 16px; height: 16px }
.qr { width: 176px; height: 176px; border-radius: 14px; background: #fff; display: grid; place-items: center; padding: 10px; color: #141311; font: 500 13px var(--mono); border: 1px solid var(--rule) }
.qr svg { width: 100%; height: 100% }

.fb { max-width: 720px; display: grid; gap: 12px }
.fb label { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3) }
.fb textarea { width: 100%; resize: vertical; min-height: 140px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--rule2); background: var(--panel); color: var(--ink); font: 17px/1.5 var(--sans) }
.fb textarea::placeholder { color: var(--ink3) }
.btn { justify-self: start; border: 0; cursor: pointer; padding: 14px 22px; border-radius: 12px; background: var(--ink); color: var(--bg); font: 600 15px/1 var(--sans) }

.outro { text-align: center; padding-top: 80px; padding-bottom: 140px }
.outro h2 { font: 600 clamp(36px, 5vw, 64px)/1.04 var(--serif); letter-spacing: -.022em; margin-bottom: 34px; text-wrap: balance }

.foot { max-width: 1240px; margin: 0 auto; padding: 30px var(--gut) calc(36px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink2) }
.foot .logo { height: 15px; width: auto }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap }
.foot a { text-decoration: none; color: var(--ink2) }
.foot a:hover { color: var(--ink) }
.copy-line { margin-left: auto }

/* Rechtsseiten */
.legal main { max-width: 720px; margin: 0 auto; padding: 72px 28px 96px }
.legal h1 { font: 600 clamp(36px, 5vw, 52px)/1.05 var(--serif); letter-spacing: -.02em; margin-bottom: 18px }
.legal h2 { font: 600 21px/1.25 var(--serif); margin: 36px 0 10px }
.legal p { color: var(--ink2); margin: 0 0 12px }
.legal .stand { margin-top: 40px; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--ink3) }
.legal .mail { color: var(--ink) }

/* ---------------------------------------------------------------- Schmal */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .nav { display: none }
}
@media (max-width: 820px) {
  :root { --hh: 56px; --gut: 16px; --stH: 56svh }
  .top { gap: 12px }
  .brand .logo { height: 17px }
  .badge-s { display: none }
  .seg button { padding: 7px 9px 7px 10px; font-size: 11.5px }
  .themebtn { width: 34px; height: 34px }
  .themebtn svg { left: 7px; top: 7px }
  .stage { height: var(--stH); z-index: 3; overflow: visible }
  .stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -18px; background: linear-gradient(to bottom, var(--bg) calc(100% - 18px), color-mix(in srgb, var(--bg) 0%, transparent)) }
  .steps { margin-top: 0 }
  .tail { height: calc(100svh - var(--hh) - var(--stH)) }
  .step-in, .step-hero .step-in { left: 16px; right: 16px; width: auto; top: calc(var(--hh) + var(--stH) + 12px) }
  .step h1 { font-size: 31px; margin-bottom: 12px }
  .step h2 { font-size: 26px; margin-bottom: 10px }
  .kicker { margin-bottom: 10px; font-size: 11px }
  .step p:not(.kicker), .step .lead { font-size: 15.5px; line-height: 1.5 }
  .cta-row { margin-top: 16px }
  .badge-l { height: 44px }
  .scrollhint { display: none }
  .live { margin-top: 12px }
  .sect { padding: 84px 16px }
  .sect-head { margin-bottom: 36px }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px }
  .gname { font-size: 15px; gap: 4px; padding-bottom: 8px }
  .gsub { font-size: 15px }
  .v4v-box { grid-template-columns: 1fr; padding: 26px; gap: 26px }
  .qr { width: 150px; height: 150px }
  .faq-list summary { font-size: 18px }
  .copy-line { margin-left: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .sh-line { animation: none }
  .gcard .flip { transition-duration: .01s }
  .gcard.anim .persp, .gcard.anim .flip { animation: none }
  .sgn .spin { animation: none }
}

/* Datenschutz: Live-Daten selbst wählen */
.livebox{border:1px solid var(--rule,rgba(127,127,127,.3));border-radius:12px;padding:16px 18px;margin:16px 0;display:grid;gap:10px}
.livebox p{margin:0}
.livebox .lrow{display:flex;gap:10px;align-items:center;font-size:15px}
.livebox input[type=url]{font:15px ui-monospace,Menlo,monospace;padding:10px 12px;border-radius:8px;border:1px solid var(--rule,rgba(127,127,127,.35));background:transparent;color:inherit;width:100%;box-sizing:border-box}
.livebox input[type=url]:disabled{opacity:.45}
.livebox .lnote{font:12px ui-monospace,Menlo,monospace;opacity:.75}

/* ===== 28.10.: Hero-Fakten, Katalog mit drei Karten, Ausprobieren, Jahrestage ===== */
.step-hero .cta-row { margin-top: 22px }
.newbie { margin-top: 14px; font: 500 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--accT) }


.gbox { position: relative }
.gctl { display: flex; align-items: center; gap: 6px; margin-top: -4px }
.gnav { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--rule2); background: transparent; color: var(--ink); font: 500 20px/1 var(--serif); cursor: pointer; padding: 0 0 3px }
.gnav:hover, .ginfo-b:hover { background: var(--bg2) }
.gcnt { font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--ink3); min-width: 44px; text-align: center; white-space: nowrap }
.ginfo-b { margin-left: auto; border: 1px solid var(--rule2); background: transparent; color: var(--ink2); border-radius: 999px; padding: 9px 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap }
.gitem.info .ginfo-b { color: var(--accT); border-color: currentColor }
.ginfo { position: absolute; inset: 0; z-index: 5; border-radius: 4%/2.2%; background: color-mix(in srgb, var(--pa) 96%, transparent); color: var(--ink);
  padding: 18% 9% 9%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: auto;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .3s, visibility 0s .3s;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent) }
.gitem.info .ginfo, .fan-mid.info .ginfo { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s }
.gi-k { font: 500 10px/1.2 var(--mono); letter-spacing: .16em; color: var(--accT) }
.gi-k2 { margin-top: 10px }
.gi-n { font: 800 clamp(17px, 1.6vw, 22px)/1.05 var(--caps); font-stretch: condensed; letter-spacing: .04em; text-transform: uppercase }
.gi-p { font: 500 clamp(14px, 1.15vw, 16px)/1.38 var(--serif) }
.gi-s { color: var(--ink2) }
.gi-a { margin-top: 8px; font: 500 11px/1.3 var(--mono); color: var(--ink2); text-decoration: none; align-self: flex-start; padding: 6px 0 }
.gi-a:hover { color: var(--accT) }
.gi-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: transparent; color: var(--ink); font: 400 20px/1 var(--sans); cursor: pointer }
.gback .fld, .gback .row { display: none }
.gback .trk { cursor: pointer }

.pcard { position: relative; width: 100%; aspect-ratio: 360 / 640; container-type: inline-size; --u: calc(100cqw / 360); --lift: 0 }
.pcard .face.back { transform: none }
.pback .trk { cursor: pointer; touch-action: none }
.pback .trk:focus-visible, .pback .sgn:focus-visible { outline: 2px solid var(--accT); outline-offset: 3px; border-radius: 8px }
.pback .sgn { cursor: pointer }
.prow { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap }
.pm-w { position: relative; flex: none }
.pm-w.psmall { width: 150px; height: 150px; opacity: .72 }
.pm-w.pnew { width: 210px; height: 210px }
.pver { border: 1px solid var(--rule2); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; min-width: 0 }
.pver summary { cursor: pointer; font: 600 16px/1.3 var(--serif) }
.pk { font: 500 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-top: 6px }
.pchk { font: 500 12.5px/1.4 var(--mono); color: var(--accT) }

.ann-grid { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 56px; align-items: start }
.ann-card { position: relative; width: 100%; aspect-ratio: 360 / 640; border-radius: 4%/2.2%; overflow: hidden; background: var(--pa); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 14px 22px rgba(0,0,0,.18) }
.ann-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule2) }
.ann-list li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--rule) }
.ann-d { font: 500 14px/1.3 var(--mono); color: var(--accT); grid-row: span 2; font-variant-numeric: tabular-nums }
.ann-t { font: 800 16px/1.2 var(--caps); font-stretch: condensed; letter-spacing: .08em; text-transform: uppercase }
.ann-y { font: italic 400 15px/1.3 var(--serif); color: var(--ink2) }

@media (max-width: 820px) {
  .ann-grid { grid-template-columns: 1fr; gap: 32px }
  .ann-main { max-width: 320px }
  .pm-w.psmall { width: 96px; height: 96px }
  .pm-w.pnew { width: 170px; height: 170px }
  .gnav { width: 38px; height: 38px }
  .gctl { flex-wrap: wrap; row-gap: 8px }
  .gcnt { min-width: 0; flex: 1 }
  .ginfo-b { margin-left: 0; width: 100%; padding: 11px 8px }
  .gi-p { font-size: 13.5px }
}
.ann-cap { margin-top: 12px; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; color: var(--ink3) }
.to-arch { margin-top: 44px } .to-arch .btn { display: inline-block; text-decoration: none }

/* ===== 28.10. Premium: Licht, Bodenschatten, Glanz ===== */
.glow { z-index: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) calc(10% + 6% * var(--m)), transparent), transparent 72%) }
.ground { z-index: 1; border-radius: 50%; pointer-events: none; opacity: 0; 
  background: radial-gradient(closest-side, rgba(0, 0, 0, calc(.5 + .3 * var(--m))), rgba(0, 0, 0, calc(.18 + .1 * var(--m))) 55%, transparent) }
.fc, .hc { z-index: 2 }
.sheen { position: absolute; top: -10%; bottom: -10%; left: 0; width: 70%; z-index: 31; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 0, rgba(255, 255, 255, calc(.12 - .05 * var(--m))) 45%, rgba(255, 255, 255, calc(.2 - .08 * var(--m))) 50%, rgba(255, 255, 255, calc(.12 - .05 * var(--m))) 55%, transparent 100%) }
@media (prefers-reduced-motion: reduce) { .sheen, .glow { display: none } }

.f-wipe { position: absolute; top: 47.6%; bottom: 7.6%; left: 0; width: max(1px, calc(var(--u) * 1.2)); margin-left: calc(var(--u) * -.6); z-index: 6; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--acc) 12%, var(--acc) 88%, transparent); box-shadow: 0 0 calc(var(--u) * 8) color-mix(in srgb, var(--acc) 50%, transparent) }
/* 28.10.: Lärm in Schritt 01: Collage aus Zeitungsausschnitten, Sprechblasen, Eilmeldung, Kurs */
.noise { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0 }
.nzc { position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 50% 50%; will-change: transform, opacity }
.nzc-clip { width: 250px; padding: 12px 16px 14px; color: #171411; background: radial-gradient(120% 90% at 30% 20%, #F6F1E5, #E8E1CF);
  clip-path: polygon(0 3%, 6% 0, 18% 2%, 33% 0, 51% 2.5%, 70% 0, 86% 2%, 100% 0, 99% 30%, 100% 62%, 98.5% 100%, 80% 98%, 61% 100%, 42% 97.5%, 24% 100%, 9% 98%, 0 100%, 1.5% 66%, 0 33%);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)) }
.nzc-k { margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid #171411; font: 600 9px/1 var(--mono); letter-spacing: .2em }
.nzc-h { margin: 0 0 9px; font: 800 23px/1.06 "New York", "Iowan Old Style", Charter, Georgia, serif; letter-spacing: -.015em; text-wrap: balance }
.nzc-txt { display: block; height: 30px; background: repeating-linear-gradient(to bottom, rgba(23,20,17,.22) 0 2px, transparent 2px 7px); clip-path: polygon(0 0, 100% 0, 100% 72%, 62% 72%, 62% 100%, 0 100%) }
.nzc-bubble { padding: 12px 16px; border-radius: 20px; background: #FBF8F2; color: #171411; font: 600 17px/1.2 var(--sans); white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) }
.nzc-bubble::after { content: ""; position: absolute; left: 22px; bottom: -8px; width: 18px; height: 14px; background: inherit; clip-path: polygon(0 0, 100% 0, 10% 100%) }
.nzc-bubble.tail-r::after { left: auto; right: 22px; clip-path: polygon(0 0, 100% 0, 90% 100%) }
.nzc-bubble.dark { background: #1C1A17; color: #F3EEE4 }
.nzc-push { display: flex; gap: 11px; align-items: center; width: 290px; padding: 11px 13px; border-radius: 18px; background: rgba(246, 242, 235, .94); color: #171411;
  box-shadow: 0 12px 30px rgba(0,0,0,.3) }
.nzc-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #C62828; color: #fff; display: grid; place-items: center; font: 800 19px/1 var(--sans) }
.nzc-b { display: grid; gap: 3px; min-width: 0 }
.nzc-b b { font: 700 11px/1 var(--sans); letter-spacing: .08em; color: #C62828 }
.nzc-b span { font: 600 15px/1.25 var(--sans) }
.nzc-price { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 12px; padding: 12px 14px; border-radius: 14px; background: #111010; color: #EDE7DC; box-shadow: 0 12px 26px rgba(0,0,0,.35) }
.nzc-pk { font: 700 13px/1 var(--mono); letter-spacing: .1em } .nzc-pv { font: 700 22px/1 var(--mono); color: #E5534B; justify-self: end }
.nzc-price svg { grid-column: 1 / -1; margin-top: 6px; width: 120px; height: 36px }
@media (max-width: 820px) {
  .nzc-clip { width: 150px; padding: 8px 10px 9px } .nzc-k { font-size: 7px; margin-bottom: 5px; padding-bottom: 4px } .nzc-h { font-size: 14px; margin-bottom: 6px } .nzc-txt { height: 18px }
  .nzc-bubble { font-size: 12px; padding: 8px 11px; border-radius: 14px } .nzc-bubble::after { left: 14px; bottom: -6px; width: 12px; height: 10px }
  .nzc-push { width: 200px; padding: 8px 9px; gap: 8px; border-radius: 13px } .nzc-ic { width: 24px; height: 24px; border-radius: 6px; font-size: 13px } .nzc-b b { font-size: 8px } .nzc-b span { font-size: 11px }
  .nzc-price { padding: 8px 10px } .nzc-pk { font-size: 10px } .nzc-pv { font-size: 15px } .nzc-price svg { width: 84px; height: 26px }
}
.f-src { position: absolute; left: calc(var(--u) * 16); width: calc(var(--u) * 232); top: calc(var(--u) * 586); height: calc(var(--u) * 36); z-index: 7; opacity: 0; pointer-events: none;
  border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 calc(var(--u) * 1.3) var(--acc), 0 0 calc(var(--u) * 18) color-mix(in srgb, var(--acc) 45%, transparent) }


@media (max-width: 820px) { .ann-q { font: 400 15px/1.4 var(--sans); color: var(--ink) }
.ann-list li { grid-template-rows: auto auto auto } .ann-d { grid-row: span 3 } }

/* ===================================================================== Runde 4 (28.10.): Editorial in der Sprache der Karten
   Überschriften wie auf den Karten: eine kursive Zeile aus der Cormorant, darunter die Versalzeile aus der Barlow Condensed.
   Fließtext in der Cormorant, Daten (Hashes, Blockhöhe, Datum) in der Plex Mono, Bedienung in der Barlow.
   Laut ist nur eine Stelle: das Regal mit den acht Schubern, dessen Band die Farbe der gewählten Serie annimmt. */
body { font: 500 19px/1.55 var(--serif); font-feature-settings: "kern", "liga", "onum" }
.nav a { font: 600 16px/1 var(--caps); letter-spacing: .03em }
.btn { font: 600 17px/1 var(--caps); letter-spacing: .03em; padding: 15px 24px; border-radius: 10px }
.btn-q { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor }
.btn-q:hover { background: color-mix(in srgb, var(--ink) 8%, transparent) }
.kicker { font: 600 15px/1.3 var(--caps); letter-spacing: .05em; text-transform: none; color: var(--ink2) }
.kicker .num { font: 500 13px/1 var(--mono); margin-right: 6px }
.step h1 { font: 600 clamp(46px, 5vw, 76px)/.98 var(--serif); letter-spacing: -.012em }
.step h2 { font: 600 clamp(36px, 3.9vw, 60px)/1.02 var(--serif); letter-spacing: -.01em }
.step p:not(.kicker) { font-size: 21px; line-height: 1.5 }
.step .lead { font-size: 22px }
.sect { padding: 168px var(--gut) }
.sect-lead { font: 500 22px/1.5 var(--serif); color: var(--ink2); max-width: 34em; text-wrap: pretty }

/* Überschrift */
.hl { display: block; margin: 0; text-wrap: balance }
.hl-i { display: block; font: italic 500 clamp(28px, 3vw, 46px)/1.1 var(--serif); color: var(--ink2); margin-bottom: .12em }
.hl-k { display: block; font: 800 clamp(48px, 6vw, 92px)/.9 var(--caps); text-transform: uppercase; letter-spacing: .004em; color: var(--ink) }
.hl-c { text-align: center }

/* Die Details: Musterblatt */
.details .hl { margin-bottom: 80px }
.spec { --mk: var(--accT); --cw: 340px; position: relative; margin: 0 auto; width: min(100%, 1080px); height: calc(var(--cw) * 16 / 9) }
.spec-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 3 }
.spec-lines .sl { fill: none; stroke: color-mix(in srgb, var(--ink) 34%, transparent); stroke-width: 1; transition: stroke .3s }
.spec-lines circle.sl { fill: color-mix(in srgb, var(--ink) 34%, transparent); stroke: none }
.spec[data-lit="1"] .sl1, .spec[data-lit="2"] .sl2, .spec[data-lit="3"] .sl3 { stroke: var(--mk) } .spec[data-lit="1"] circle.sl1, .spec[data-lit="2"] circle.sl2, .spec[data-lit="3"] circle.sl3 { fill: var(--mk) }
.spec-card { position: absolute; left: 50%; top: 0; width: var(--cw); aspect-ratio: 9 / 16; transform: translateX(-50%); border-radius: 4.4% / 2.5%; overflow: hidden; background: var(--pa);
  box-shadow: 0 1px 1px rgba(0,0,0,var(--shA)), 0 30px 60px -12px rgba(0,0,0,calc(var(--shB) * 1.5)) }
.spec-card .ims, .spec-card .ims img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
/* 29.10.: Lichtfeld als Rechteck genau über dem gemeinten Bereich (Text, Name, ganze Karte), der Rest wird abgedunkelt */
.spec-spot { position: absolute; left: 2.5%; top: 1.5%; width: 95%; height: 97%; z-index: 1; border-radius: 10px; opacity: 0;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mk) 70%, transparent), 0 0 0 200vmax rgba(10, 8, 6, .62);
  transition: opacity .35s ease, left .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1) }
.spec-hz { position: absolute; z-index: 4 }
.spec.lit .spec-spot { opacity: 1 }
.spec-mk, .spec-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 500 13px/1 var(--mono); background: var(--mk); color: #14110E }
.spec-mk { position: absolute; z-index: 2; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mk) 26%, transparent), 0 2px 8px rgba(0,0,0,.4) }
.spec-n { position: absolute; width: calc((100% - var(--cw)) / 2 - 96px); top: calc(var(--y) - 14px); outline: none; transition: opacity .3s; cursor: default }
.spec-n h3 { font: 800 26px/1 var(--caps); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 8px }
.spec-n p { font-size: 19px; line-height: 1.45; color: var(--ink2); margin: 0; text-wrap: pretty }
.spec-n:focus-visible h3 { text-decoration: underline 2px var(--mk); text-underline-offset: 5px }
.spec.lit .spec-n:not([data-on]) { opacity: .4 }
.spec-no { position: absolute; top: -2px }
.spec-n1, .spec-n3 { left: 0; text-align: right; padding-right: 44px } .spec-n1 .spec-no, .spec-n3 .spec-no { right: 0 }
.spec-n2 { right: 0; padding-left: 44px } .spec-n2 .spec-no { left: 0 }
.spec-w { position: absolute; right: 0; top: 4%; width: calc((100% - var(--cw)) / 2 - 96px); padding-left: 44px }
.spec-w h3 { font: italic 600 22px/1.2 var(--serif); margin: 0 0 6px } .spec-w p { font-size: 17px; line-height: 1.45; color: var(--ink2); margin: 0 }
@media (max-width: 980px) {
  .details .hl { margin-bottom: 44px }
  .spec { --cw: min(64vw, 300px); height: auto; display: grid; gap: 28px; width: 100%; max-width: 560px }
  .spec-card { position: relative; left: auto; transform: none; justify-self: center; margin-bottom: 10px }
  .spec-n, .spec-w { position: relative; width: auto; top: auto; left: auto; right: auto; text-align: left; padding: 0 0 0 44px }
  .spec-n .spec-no { left: 0; right: auto }
  .spec-n h3 { font-size: 23px }
}

/* Was ist nuck nuck.? Text links, Kolophon rechts wie die letzte Seite eines Buchs */
.about-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 96px; align-items: center }
.about-text .hl { margin-bottom: 36px }
.about-lead { font: 500 clamp(23px, 2.1vw, 30px)/1.42 var(--serif); color: var(--ink); max-width: 24em; text-wrap: pretty }
.colophon { text-align: center; padding: 8px 0 }
.colophon::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 18px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 6px color-mix(in srgb, var(--dot) 18%, transparent) }
.colophon h3 { font: italic 500 24px/1.2 var(--serif); color: var(--ink2); margin: 0 0 22px }
.colophon dl { margin: 0; display: grid; gap: 16px }
.col-r dt { font: 600 14px/1.2 var(--caps); letter-spacing: .06em; color: var(--ink3); margin-bottom: 3px }
.col-r dd { margin: 0; font: 500 19px/1.4 var(--serif); color: var(--ink) }
.col-sig { margin-top: 26px; font: italic 500 17px/1.4 var(--serif); color: var(--ink3) }
@media (max-width: 820px) { .about-in { grid-template-columns: 1fr; gap: 64px } }

/* Sammlung: das Regal */
.shelf-sec { position: relative; background: var(--bg); color: var(--ink); transition: background-color .6s ease, color .6s ease }
.shelf-sec.pal { background: var(--pa) }
.shelf-sec.pal .hl-i, .shelf-sec.pal .shelf-lead, .shelf-sec.pal .ds-sub, .shelf-sec.pal .ds-no { color: var(--ink2) }
.shelf-in { padding-top: 150px; padding-bottom: 140px }
.shelf-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; margin-bottom: 72px }
.shelf-lead { font: 500 21px/1.5 var(--serif); max-width: 28em; text-wrap: pretty; margin: 0 }
.shelf { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 18px; align-items: end; padding: 40px 6px 0 }
.shelf::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: 58px; height: 12px; border-radius: 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 22%, transparent), color-mix(in srgb, var(--ink) 6%, transparent)); box-shadow: 0 14px 22px -10px rgba(0,0,0,.5) }
.case-tab { position: relative; border: 0; padding: 0; background: none; cursor: pointer; display: grid; gap: 22px; justify-items: center; color: inherit; z-index: 1 }
.case-tab .case { width: 100%; transition: transform .45s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 100%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.28)) }
.case-tab .case svg { display: block; width: 100%; height: auto }
.case-tab:hover .case { transform: translateY(-6px) }
.case-tab[aria-selected="true"] .case { transform: translateY(-26px) scale(1.04); filter: drop-shadow(0 26px 26px rgba(0,0,0,.42)) }
.case-tab[aria-selected="false"] .case { filter: drop-shadow(0 8px 10px rgba(0,0,0,.28)) saturate(.82) }
.case-cap { display: grid; gap: 2px; justify-items: center; text-align: center; min-height: 36px }
.case-cap b { font: 500 13px/1 var(--mono); color: var(--ink2) }
.case-cap span { font: 600 14px/1.15 var(--caps); letter-spacing: .03em }
.case-tab[aria-selected="true"] .case-cap span { text-decoration: underline 2px; text-underline-offset: 4px }
.case-for { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 13px/1 var(--caps); letter-spacing: .03em; padding: 6px 9px; border-radius: 6px; background: var(--ink); color: var(--bg) }
.case-tab:focus-visible { outline: none } .case-tab:focus-visible .case-cap span { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px }
.desk { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 88px }
.desk.swap .fan3 { animation: deal .55s cubic-bezier(.2, .7, .2, 1) } .desk.swap .desk-side { animation: fadein .55s ease }
@keyframes deal { from { opacity: 0; transform: translateY(26px) scale(.97) } }
@keyframes fadein { from { opacity: 0 } }
.fan3 { position: relative; height: calc(var(--fw, 310px) * 16 / 9 + 20px); --fw: 310px }
.fan-mid { position: absolute; left: 50%; top: 0; width: var(--fw); transform: translateX(-50%); z-index: 3 }
.fan-side { position: absolute; top: 28px; width: calc(var(--fw) * .82); aspect-ratio: 9 / 16; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 4.4% / 2.5%; transition: transform .45s cubic-bezier(.2, .7, .2, 1) }
.fan-side .face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; box-shadow: 0 18px 34px -10px rgba(0,0,0,.5) }
.fan-side .ims, .fan-side .ims img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.fan-s1 { left: calc(50% - var(--fw) * .5 - var(--fw) * .5); transform: rotate(-8deg); z-index: 1 }
.fan-s2 { left: calc(50% + var(--fw) * .5 - var(--fw) * .32); transform: rotate(8deg); z-index: 2 }
.fan-s1:hover { transform: rotate(-9.5deg) translateX(-10px) } .fan-s2:hover { transform: rotate(9.5deg) translateX(10px) }
.fan3.bump .fan-mid { animation: deal .45s cubic-bezier(.2, .7, .2, 1) }
.fan-mid .gcard { box-shadow: 0 30px 60px -16px rgba(0,0,0,.55); border-radius: 4.4% / 2.5% }
.desk-side { display: grid; gap: 18px; align-content: center; max-width: 30em }
.ds-name { display: grid; gap: 10px; margin: 0 }
.ds-no { font: 600 16px/1 var(--caps); letter-spacing: .05em }
.ds-t { font: 800 clamp(42px, 4.6vw, 72px)/.9 var(--caps); text-transform: uppercase }
.ds-sub { font: italic 500 26px/1.35 var(--serif); margin: 0; text-wrap: pretty }
.ds-new { font: 600 17px/1.35 var(--caps); letter-spacing: .02em; margin: 0; padding-left: 14px; box-shadow: inset 3px 0 0 currentColor }
.ds-whol { margin: 6px 0 0; font: 500 18px/1.4 var(--serif) } .ds-whol b { font-weight: 600 }
.ds-info { justify-self: start; margin-top: 4px }
.shelf-sec .to-arch { margin-top: 96px; text-align: center }
@media (max-width: 1100px) { .shelf { gap: 0 10px } .case-cap span { font-size: 12.5px } }
@media (max-width: 820px) {
  .shelf-in { padding-top: 96px; padding-bottom: 96px }
  .shelf-head { grid-template-columns: 1fr; margin-bottom: 36px }
  .shelf { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -16px; padding: 46px 16px 4px; scrollbar-width: none }
  .shelf::-webkit-scrollbar { display: none }
  .shelf::after { display: none }
  .case-tab { flex: 0 0 86px; scroll-snap-align: center; gap: 14px }
  .case-tab[aria-selected="true"] .case { transform: translateY(-16px) scale(1.04) }
  .case-cap span { font-size: 12.5px }
  .desk { grid-template-columns: 1fr; gap: 40px; margin-top: 44px }
  .fan3 { --fw: min(58vw, 260px) }
  .fan-s1 { left: calc(50% - var(--fw) * .5 - var(--fw) * .34) } .fan-s2 { left: calc(50% + var(--fw) * .5 - var(--fw) * .48) }
  .ds-sub { font-size: 22px }
  .shelf-sec .to-arch { margin-top: 56px }
}

/* Signier eine Karte */

/* Jahrestage: Kalenderblatt */
.ann-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, 320px) minmax(0, 1fr); gap: 64px; align-items: start }
.ann-sheet { display: grid; gap: 28px; align-content: start }
.ann-cal { display: flex; align-items: flex-end; gap: 18px; background: none; color: var(--ink) }
.ann-day { font: 800 clamp(150px, 15vw, 230px)/.74 var(--caps); color: var(--accT); letter-spacing: -.02em }
.ann-mo { display: grid; gap: 4px; padding-bottom: 6px }
.ann-mo i { font: italic 500 34px/1 var(--serif) } .ann-mo b { font: 600 22px/1 var(--caps); letter-spacing: .04em } .ann-mo em { font: italic 500 18px/1.2 var(--serif); color: var(--ink2) }
.ann-lead { font: 500 19px/1.5 var(--serif); color: var(--ink2); max-width: 26em }
.ann-card { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 4.4% / 2.5%; overflow: hidden; background: var(--pa); box-shadow: 0 30px 60px -16px rgba(0,0,0,.55); transform: rotate(1.5deg) }
.ann-card .ims, .ann-card .ims img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.ann-next h3 { font: italic 500 26px/1.2 var(--serif); color: var(--ink2); margin: 0 0 14px }
.ann-list { list-style: none; margin: 0; padding: 0; border-top: 0 }
.ann-list li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border-bottom: 0; border-top: 1px solid var(--rule) }
.ann-d { font: 500 14px/1.5 var(--mono); color: var(--ink2); grid-row: span 3 }
.ann-t { font: 800 19px/1.1 var(--caps); text-transform: uppercase; letter-spacing: .02em }
.ann-q { font: 500 17px/1.4 var(--serif); color: var(--ink) }
.ann-y { font: italic 500 15px/1.3 var(--serif); color: var(--ink3) }
@media (max-width: 1100px) { .ann-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) } .ann-next { grid-column: 1 / -1 } }
@media (max-width: 820px) { .ann-grid { grid-template-columns: 1fr; gap: 48px } .ann-card { width: min(70vw, 300px); justify-self: center } .ann-day { font-size: 150px } }

/* Fragen */
.faq .hl-k { font-size: clamp(44px, 4.6vw, 72px) }
.faq-list summary { font: 600 24px/1.25 var(--serif); padding: 24px 48px 24px 0 }
.faq-list details p { font-size: 19.5px; line-height: 1.55; color: var(--ink2) }
.faq-list details.faq-tech > summary { font: 600 17px/1.3 var(--caps); letter-spacing: .04em; text-transform: none; color: var(--ink2) }
.faq-list details.faq-tech > details { margin-left: 22px }
.faq-list details.faq-tech > details:last-child { border-bottom: 0 }
@media (min-width: 981px) {
  .faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 80px; align-items: start }
  .faq .hl { position: sticky; top: calc(var(--hh) + 40px) }
  .faq-list { max-width: none }
}
@media (max-width: 980px) { .faq .hl { margin-bottom: 36px } .faq-list summary { font-size: 21px } }

/* Value for Value */
.v4v-box { background: none; border: 0; border-radius: 0; padding: 0; gap: 80px }
.v4v-text .hl { margin-bottom: 26px }
.v4v-text p { font-size: 21px; line-height: 1.5; max-width: 30em }
.qr { width: 200px; height: 200px; border-radius: 4px; transform: rotate(-2deg); box-shadow: 0 20px 40px -14px rgba(0,0,0,.5) }

/* Feedback als Brief */
.fb-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center }
.fb-head .hl { margin-bottom: 26px }
.fb-hello { margin: 0; font: italic 500 30px/1.2 var(--serif) }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@media (max-width: 820px) { .fb-in { grid-template-columns: 1fr; gap: 36px } }

/* Schluss */
.outro .hl { margin-bottom: 44px } .outro .hl-k { font-size: clamp(56px, 8vw, 128px) }

@media (max-width: 820px) {
  .sect { padding: 104px 16px }
  .step p:not(.kicker), .step .lead { font-size: 18px; line-height: 1.45 }
  .step h1 { font-size: 36px } .step h2 { font-size: 30px }
  .sect-lead, .shelf-lead { font-size: 19.5px }
  .hl-i { font-size: 25px } .hl-k { font-size: 46px }
  .about-lead { font-size: 22px }
}
@media (prefers-reduced-motion: reduce) { .desk.swap .fan3, .desk.swap .desk-side, .fan3.bump .fan-mid { animation: none } .case-tab .case, .shelf-sec { transition: none } }
.colophon::before { content: none }
.col-mark { height: 22px; width: auto; margin: 0 auto 16px }
.case-for { position: static; transform: none; margin-top: -12px; justify-self: center }
.v4v-box { max-width: 1040px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) auto }
.scrollhint { font: 600 15px/1.3 var(--caps) !important; letter-spacing: .04em !important; text-transform: none !important }
.live-k { font: 600 15px/1.3 var(--caps); letter-spacing: .04em; text-transform: none }
@media (max-width: 820px) { .case-for { margin-top: -8px; font-size: 12px; padding: 5px 7px } }
.pk { font: 600 14px/1.2 var(--caps); letter-spacing: .04em; text-transform: none; color: var(--ink2) }
.pchk { font: 600 15px/1.4 var(--caps); letter-spacing: .03em }
.pver summary { font: 600 19px/1.3 var(--serif) }

/* ===== Runde 5 (28.10.) */
/* Andocken: Lichtfäden und Schimmer in der kleinen Karte */
.flow { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 6 }
.flow-l { position: absolute; left: 0; height: calc(var(--mu) * 1.6); border-radius: calc(var(--mu) * .8); transform-origin: 0 50%; visibility: hidden;
  background: linear-gradient(to right, var(--fc), color-mix(in srgb, var(--fc) 0%, transparent)); box-shadow: 0 0 calc(var(--mu) * 3) color-mix(in srgb, var(--fc) 60%, transparent) }
.flow-s { position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; opacity: 0;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,calc(.32 - .16 * var(--m))), rgba(255,255,255,0)) }
/* Kürzere Story am Handy: weniger Scrollweg je Schritt */
@media (max-width: 820px) {
  .step, .step-hero { height: 72vh; height: 72svh }
  .step:last-child { height: 46vh; height: 46svh }
}
@media (min-width: 821px) { .step-hero { height: 100vh; height: 100svh } .step:last-child { height: 100vh; height: 100svh } }
/* Details: Anmerkungen; am Handy als Wischleiste direkt unter der Karte, die aktive beleuchtet ihre Stelle */
.spec-notes { display: contents }
.spec-dots { display: none }
@media (max-width: 980px) {
  .spec { gap: 18px }
  .spec-notes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 6px; scrollbar-width: none; scroll-padding: 0 16px }
  .spec-notes::-webkit-scrollbar { display: none }
  .spec-notes .spec-n { flex: 0 0 82%; scroll-snap-align: center; padding: 18px 18px 18px 58px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); opacity: 1 !important; transition: box-shadow .3s }
  .spec-notes .spec-n[data-on] { box-shadow: inset 0 0 0 1.5px var(--mk) }
  .spec-notes .spec-n .spec-no { left: 18px; top: 18px }
  .spec-notes .spec-n h3 { font-size: 21px }
  .spec-notes .spec-n p { font-size: 17.5px }
  .spec-dots { display: flex; justify-content: center; gap: 8px; margin-top: -4px }
  .spec-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule2); transition: background .3s, width .3s }
  .spec[data-lit="1"] .spec-dots i:nth-child(1), .spec[data-lit="2"] .spec-dots i:nth-child(2), .spec[data-lit="3"] .spec-dots i:nth-child(3) { background: var(--mk); width: 18px; border-radius: 3px }
  .spec-w { margin-top: 8px }
}
/* Schluss: die Fakten stehen einmal, direkt am Laden-Knopf */
.outro-facts { margin: -18px auto 34px; max-width: 30em; font: italic 500 21px/1.45 var(--serif); color: var(--ink2); text-wrap: balance }
@media (max-width: 820px) {
  .v4v-box { grid-template-columns: 1fr; gap: 36px }
  .v4v-box .qr { justify-self: start; width: 170px; height: 170px }
}
  background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--ink) 4%, transparent) 9px 10px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 26%, transparent) }
@media (max-width: 820px) { .pslot { width: 170px; height: 170px } .pm-w.psmall { width: 96px; height: 96px } }
@media (max-width: 820px) { .pwait { flex-wrap: nowrap; gap: 10px; justify-content: center } .pwait .pm-w.psmall { width: 84px; height: 84px } .pslot { width: 132px; height: 132px; padding: 10px } .pslot i { font-size: 15.5px } }

/* ===== Runde 5b: Audit-Punkte */
/* Story-Überschriften in derselben Kartensprache wie alle Abschnitte */
.step .hl { margin-bottom: 18px }
.step .hl-i { font-size: clamp(26px, 2.4vw, 38px); margin-bottom: .08em }
.step .hl-k { font-size: clamp(44px, 4.6vw, 76px); line-height: .9 }
.step h1.hl .hl-k { font-size: clamp(56px, 6vw, 96px) }
@media (max-width: 820px) {
  .step .hl { margin-bottom: 10px }
  .step .hl-i { font-size: 20px } .step .hl-k { font-size: 34px } .step h1.hl .hl-k { font-size: 44px }
  .step p:not(.kicker), .step .lead { font-size: 17px; line-height: 1.42 }
  .scrollhint { display: flex !important; margin-top: 18px }
}
/* Bedienelemente überall in den Schriften der Seite */
input, select, textarea { font-family: var(--serif) } button { font-family: var(--caps) }
/* Probe: gleich große Glieder vor und nach dem Signieren */
.pm-w.psmall, .pm-w.pnew, .pslot { width: 150px !important; height: 150px !important }
.pm-w.psmall { opacity: .8 }
.prow { justify-content: flex-start; flex-wrap: nowrap; gap: 14px }
@media (max-width: 820px) {
  .pm-w.psmall, .pm-w.pnew, .pslot { width: 100px !important; height: 100px !important }
  .prow { justify-content: center; gap: 10px } .pslot { padding: 8px } .pslot span { font-size: 13px } .pslot i { font-size: 15px }
}
/* Sammlung am Handy: alle acht Schuber auf einen Blick, 4 × 2, gleiche Höhen und Grundlinien */
@media (max-width: 820px) {
  .shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 12px; overflow: visible; margin: 0; padding: 26px 4px 0 }
  .case-tab { flex: none; gap: 10px; align-self: start }
  .case-tab[aria-selected="true"] .case { transform: translateY(-10px) scale(1.04) }
  .case-cap { min-height: 30px } .case-cap span { font-size: 11.5px }
}
.case-for { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); margin: 0 }
.case-cap { min-height: 40px; align-content: start }
.shelf-sec.pal .shelf-lead { color: color-mix(in srgb, var(--ink) 78%, transparent) }
.shelf-sec.pal .hl-i { color: color-mix(in srgb, var(--ink) 70%, transparent) }
.shelf-sec .to-arch .btn { box-shadow: none; padding: 0; background: none; text-decoration: underline 1.5px; text-underline-offset: 6px; font-size: 19px }
/* Fragen: Pfeil nur nach dem eigenen Zustand; Technik-Gruppe wie eine Frage */
.faq-list details[open] summary svg { transform: none }
.faq-list details[open] > summary svg { transform: rotate(180deg) }
.faq-list details.faq-tech > summary { font: italic 600 23px/1.25 var(--serif); letter-spacing: 0; color: var(--ink2) }
/* Ruhe: keine schrägen Einzelkarten, keine schräge QR-Fläche */
.ann-card, .qr { transform: none }
/* Details: Widgets wie die übrigen Anmerkungen, nur ohne Marke */
.spec-w h3 { font: 800 22px/1 var(--caps); text-transform: uppercase; letter-spacing: .01em }
@media (max-width: 980px) { .spec-w { padding: 16px 0 0 0; margin: 4px 0 0; box-shadow: inset 0 1px 0 var(--rule) } .details .hl { text-align: left } }
/* Rhythmus am Handy: engere Abschnitte */
@media (max-width: 820px) {
  .sect { padding: 76px 16px }
  .shelf-in { padding-top: 76px; padding-bottom: 76px }
  .outro { padding-top: 56px; padding-bottom: 96px }
  .badge-s { display: block; height: 32px; margin-left: 2px }
  .top { gap: 8px } .tools { gap: 6px }
}

/* Flüssigkeit (28.10.): bewegte Teile der Bühne bekommen eigene Ebenen, damit beim Zoomen und Fliegen
   nicht jedes Bild alles neu gezeichnet wird (Siegel-Schatten, Stränge, Karten) */
.stage-in, .hc, .fc, .pm, .belt, .belt .mini, .slot, .glow, .ground, .tap { will-change: transform }
.stage-in > .pm { z-index: 33 }
.slice, .sheen, .spec-spot, .flow, .glint { pointer-events: none }
/* Fächer am Handy: beide hinteren Karten ganz im Bild und gut antippbar */
@media (max-width: 820px) {
  .fan3 { --fw: min(54vw, 240px) }
  .fan-s1 { left: calc(50% - var(--fw) * .5 - var(--fw) * .3) } .fan-s2 { left: calc(50% + var(--fw) * .5 - var(--fw) * .52) }
}

/* Hell/Dunkel: Wechsel als Überblendung (View Transition); ohne sie springt das Design sofort um */
:root.vt, :root.vt * { transition: none !important }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s }
/* Regal: Schatten als eigene Ebene statt Filter auf dem bewegten Schuber (Filter zwingen bei jeder Bewegung zum Neuzeichnen) */
.case-tab .case, .case-tab[aria-selected="true"] .case, .case-tab[aria-selected="false"] .case { filter: none; will-change: transform }
.case-tab::before { content: ""; position: absolute; left: 10%; right: 10%; top: 62%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); pointer-events: none; z-index: -1; transition: opacity .45s, transform .45s }
.case-tab[aria-selected="true"]::before { opacity: .9; transform: translateY(14px) scaleX(1.12) }
.case-tab[aria-selected="false"] .case { opacity: .92 }
/* Serienfarbe wechselt ohne 600-ms-Farbübergang: der kostet bei jedem Bild ein Neuzeichnen des ganzen Bands */
.shelf-sec { transition: none !important }
@media (max-width: 820px) { .case-for { top: -24px; font-size: 11px; padding: 4px 6px; z-index: 3 } .shelf { row-gap: 40px; padding-top: 30px } }
@media (max-width: 820px) { .case-tab[aria-selected="true"] .case-for { transform: translate(-50%, -12px) } .case-for { transition: transform .45s cubic-bezier(.2, .7, .2, 1) } }

/* Jahrestage: lange Versalzeilen (EN „IT’S AN ANNIVERSARY.“) dürfen nicht in die Kartenspalte laufen */
.ann-sheet .hl-k { font-size: clamp(40px, 4.4vw, 68px); overflow-wrap: anywhere }
/* Jahrestage: nur die nächsten drei, der Rest hinter einem Schalter */
.ann-more { margin-top: 18px }
.ann-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.2 var(--caps); letter-spacing: .03em; color: var(--accT); padding: 10px 0 }
.ann-more summary::-webkit-details-marker { display: none }
.ann-more summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s }
.ann-more[open] summary::after { transform: translateY(2px) rotate(-135deg) }
.ann-more .am-c, .ann-more[open] .am-o { display: none } .ann-more[open] .am-c { display: inline }
.ann-more summary:focus-visible { outline: 2px solid var(--accT); outline-offset: 4px; border-radius: 3px }
.ann-more .ann-list { margin-top: 6px }
/* Die Details ohne Nummern: Marken und Anmerkungen tragen nur noch Punkte */
.spec-mk { width: 16px; height: 16px; font-size: 0 }
.spec-no { width: 10px; height: 10px; font-size: 0; top: 9px }
.spec-n1 .spec-no, .spec-n3 .spec-no { right: 14px } .spec-n2 .spec-no { left: 14px }
@media (max-width: 980px) { .spec-n .spec-no { left: 14px; top: 10px } .spec-notes .spec-n { padding-left: 40px } .spec-notes .spec-n .spec-no { left: 18px; top: 26px } }
/* Widgets: eigener Block unter dem Musterblatt */
.wdg { margin: 72px auto 0; width: min(100%, 1080px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px clamp(22px, 4vw, 56px); border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule) }
.wdg.has-shots { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center }
.wdg-t { max-width: 34em }
.wdg:not(.has-shots) .wdg-t { margin: 0 auto; text-align: center }
.wdg-k { font: 600 14px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--accT); margin: 0 0 12px }
.wdg h3 { font: 600 clamp(26px, 3vw, 36px)/1.12 var(--serif); letter-spacing: -.01em; margin: 0 0 12px; text-wrap: balance }
.wdg-t p:last-child { font-size: 18px; line-height: 1.5; color: var(--ink2); margin: 0; text-wrap: pretty }
.wdg-s { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap }
.wdg-s img { display: block; height: auto; max-width: 100%; max-height: 360px; border-radius: 22px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45) }
@media (max-width: 820px) { .wdg { margin-top: 44px; padding: 28px 20px } .wdg.has-shots { grid-template-columns: 1fr } .wdg-t p:last-child { font-size: 17px } }
/* Serienfarbe läuft weich in die Nachbarabschnitte aus */
.shelf-sec::before, .shelf-sec::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(90px, 14vw, 200px); pointer-events: none; z-index: 0 }
.shelf-sec::before { top: 0; background: linear-gradient(var(--bg), color-mix(in srgb, var(--bg) 0%, transparent)) }
.shelf-sec::after { bottom: 0; background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), var(--bg)) }
.shelf-sec > * { position: relative; z-index: 1 }
/* QR-Code aus der App: helle und dunkle Fassung übereinander */
.qr { position: relative; padding: 12px; background: #FBF8F2; border-color: var(--rule) }
.qr img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); display: block }
/* Feedback als Postkarte: links die Nachricht, rechts Briefmarke, Stempel, Anschrift und der Knopf */
.fb-in { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px }
.postcard { --paper: color-mix(in srgb, #FBF6EA calc((1 - var(--m)) * 100%), #26211B); position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); max-width: none;
  gap: 0; padding: 30px 30px 26px 36px; aspect-ratio: 3 / 2; border-radius: 3px; background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 1px rgba(0,0,0,var(--shA)), 0 30px 60px -18px rgba(0,0,0,calc(var(--shB) * 1.4)); transform: rotate(-1deg) }
.postcard:focus-within { box-shadow: 0 0 0 2px var(--accT), 0 30px 60px -18px rgba(0,0,0,calc(var(--shB) * 1.4)) }
.pc-msg { display: grid; grid-template-rows: auto 1fr; gap: 10px; padding-right: 26px; border-right: 1px solid var(--rule2); min-width: 0 }
.fb-hello { margin: 0; font: italic 500 30px/1.2 var(--serif) }
.postcard textarea { width: 100%; height: 100%; min-height: 190px; border: 0; border-radius: 0; resize: none; padding: 0; color: var(--ink); font: 500 21px/36px var(--serif);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--rule2) 35px, var(--rule2) 36px) }
.postcard textarea::placeholder { color: var(--ink3); font-style: italic }
.postcard textarea:focus-visible { outline: none }
.pc-side { position: relative; display: grid; grid-template-rows: auto 1fr auto; padding-left: 26px; min-width: 0 }
.pc-stamp { justify-self: end; width: 100px; height: 120px; padding: 6px; transform: rotate(2.5deg);
  background: radial-gradient(circle, transparent 3.2px, #F3ECDD 3.6px) -5px -5px / 10px 10px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)) }
.pc-st-in { height: 100%; display: grid; place-items: center; align-content: center; gap: 7px; padding: 8px 6px; background: var(--acc, #C8772A); color: #FBF6EA; text-align: center }
.pc-st-in svg { width: 70px; height: 10px; color: #FBF6EA; --lg-coin: #FBF6EA }
.pc-st-in span { font: 500 7.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .9 }
.pc-st-in b { font: 800 30px/1 var(--caps); letter-spacing: .02em }
.pc-mark { position: absolute; right: 64px; top: 70px; width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 42%, transparent); display: grid; place-items: center; transform: rotate(-14deg); pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 14px, color-mix(in srgb, var(--ink) 24%, transparent) 14px 15.5px) -40px 0 / 200% 100% no-repeat }
.pc-mark span { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: color-mix(in srgb, var(--ink) 60%, transparent); background: var(--paper); padding: 3px 4px }
.pc-to { align-self: end; margin: 0 0 18px; display: grid; gap: 0 }
.pc-to span, .pc-to b { display: block; padding: 6px 0; border-bottom: 1px solid var(--rule2); font: italic 500 20px/1.3 var(--serif) }
.pc-to b { font: 500 15px/1.3 var(--mono); font-style: normal; letter-spacing: .02em; word-break: break-all }
.pc-send { justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px }
.pc-send .ico { width: 16px; height: 16px; transform: rotate(-90deg) }
@media (max-width: 1100px) { .fb-in { grid-template-columns: 1fr; gap: 36px } .postcard { max-width: 760px } }
@media (max-width: 640px) {
  .postcard { grid-template-columns: 1fr; aspect-ratio: auto; padding: 22px 20px 20px; transform: none }
  .pc-msg { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--rule2) }
  .pc-side { padding: 18px 0 0; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 16px }
  .pc-stamp { grid-column: 2; grid-row: 1; width: 80px; height: 100px }
  .pc-st-in svg { width: 56px } .pc-st-in b { font-size: 24px }
  .pc-mark { right: 60px; top: 30px; width: 72px; height: 72px }
  .pc-to { grid-column: 1 / -1; grid-row: 2; margin: 14px 0 0 }
  .pc-send { grid-column: 1 / -1; margin-top: 18px }
  .fb-hello { font-size: 25px } .postcard textarea { font-size: 19px; min-height: 180px }
}
@media (min-width: 981px) { .wdg { margin-top: 150px } }

/* 29.10.: Widgets als Nachbau (WidgetPaper.swift): Papier hell/dunkel wie WidgetInk, Gravur der Serie leise oben */
.wg-set { display: grid; gap: 16px; justify-items: center }
.wg { --wp1: color-mix(in srgb, #16130F calc(var(--m) * 100%), #F7F1E6); --wp2: color-mix(in srgb, #1D1813 calc(var(--m) * 100%), #EDE3D1);
  --wi: color-mix(in srgb, #EFE5D3 calc(var(--m) * 100%), #2B2218); --wi2: color-mix(in srgb, #B3A58F calc(var(--m) * 100%), #64553F);
  position: relative; overflow: hidden; width: min(100%, 352px); aspect-ratio: 338 / 158; border-radius: 22px; padding: 16px 16px 13px; box-sizing: border-box;
  display: flex; flex-direction: column; container-type: inline-size; background: linear-gradient(var(--wp1) 0 40%, var(--wp2)); color: var(--wi);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -18px rgba(0,0,0,.45) }
.wg-art { position: absolute; inset: 0; z-index: 0; opacity: calc(.2 + .06 * var(--m)); pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0 30%, transparent 78%); mask-image: linear-gradient(#000 0 30%, transparent 78%) }
.wg-art img { width: 136%; height: 300%; object-fit: cover; object-position: 50% 22%; display: block; margin: -32% 0 0 -18% }
.wg > :not(.wg-art) { position: relative; z-index: 1 }
.wg-hd { display: flex; align-items: center; gap: 6px; font: 500 8.5px/1 var(--mono); letter-spacing: .1em; color: var(--wi2); white-space: nowrap }
.wg-hd span:first-of-type { overflow: hidden; text-overflow: ellipsis }
.wg-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); flex: none }
.wg-lb { margin-left: auto; opacity: .8 } .wg-bm { margin-left: auto; width: 11px; height: 11px; color: color-mix(in srgb, var(--acc) 80%, transparent); flex: none }
.wg-rule { display: block; height: 1px; margin-top: 6px; background: color-mix(in srgb, var(--acc) 55%, transparent) }
.wg-q { margin: auto 0 0; padding-top: 6px; font: italic 500 min(17px, 6.1cqw)/1.2 ui-serif, "New York", Georgia, serif; color: var(--wi); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty }
.wg-a { margin: 4px 0 0; font: 800 12px/1 var(--caps); letter-spacing: .07em; color: var(--wi2) }
.wg-n { margin: auto 0 0; padding-top: 6px; font: 500 8px/1 var(--mono); letter-spacing: .1em; color: color-mix(in srgb, var(--wi) 55%, transparent) }
.wg-lock { display: grid; justify-items: center; gap: 8px; margin-top: 4px }
.wg-r { width: 172px; padding: 9px 12px; border-radius: 16px; background: color-mix(in srgb, rgba(74, 70, 82, .9) calc(var(--m) * 100%), rgba(28, 26, 32, .72)); color: #F3F1F6;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
.wg-rk { margin: 0 0 2px; font: 500 9px/1.2 var(--mono); letter-spacing: .06em; color: rgba(243,241,246,.62) }
.wg-rq { margin: 0; font: 500 15px/1.12 var(--caps); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.wg-cap { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2) }

/* 29.10.: Postkarte am Handy: Briefmarke oben rechts in der Ecke, Poststempel leicht darüber, keine eigene Zeile mehr */
@media (max-width: 640px) {
  .pc-side { position: static; display: grid; grid-template-columns: 1fr; padding-top: 16px }
  .pc-stamp { position: absolute; right: 14px; top: 14px; width: 62px; height: 76px; padding: 4px }
  .pc-st-in { gap: 4px; padding: 5px 3px } .pc-st-in svg { width: 44px; height: 7px } .pc-st-in span { font-size: 5.5px; letter-spacing: .08em } .pc-st-in b { font-size: 18px }
  .pc-mark { right: 50px; top: 50px; width: 56px; height: 56px } .pc-mark span { font-size: 7px; padding: 2px 3px }
  .fb-hello { padding-right: 92px; min-height: 64px }
  .pc-to { margin: 0; grid-row: 1 } .pc-send { grid-row: 2; margin-top: 16px }
  .pc-mark { right: 62px; top: 52px }
}
.fb-alt { grid-column: 1 / -1; margin: 14px 0 0; font: 400 16px/1.5 var(--sans); color: var(--ink2) }
.fb-alt .linkbtn { font: inherit; color: var(--accT); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer }

/* 29.10.: Fußzeile auf allen Seiten gleich (Rechtsseiten setzten Absatzabstände) */
.foot .copy-line { margin: 0 0 0 auto }
@media (max-width: 820px) { .foot .copy-line { margin-left: 0 } }

.wg-home { display: grid; gap: 14px; justify-items: center; width: min(100%, 400px); padding: 22px 20px; box-sizing: border-box; border-radius: 34px;
  background: radial-gradient(120% 90% at 20% 0%, #6E8FB8 0, transparent 60%), radial-gradient(110% 90% at 100% 100%, #C98A5B 0, transparent 55%), linear-gradient(160deg, #3D5577, #2A2F45 60%, #4A3A3A);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08) }
.wg-home .wg { width: 100%; box-shadow: 0 10px 26px -14px rgba(0,0,0,.55) }

/* 29.10.: Details – was die App zeigt, direkt auf der Karte (für alle drei Vorschläge) */
.fxc { container-type: inline-size }
.fx { position: absolute; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1) }
.fx p { margin: 0 }
.fx-orig { left: 5%; right: 5%; top: 57.5%; bottom: 8.6%; background: var(--pa); box-shadow: 0 0 14px 10px var(--pa); transform: translateY(1.5%) }
.fx-tag { position: absolute; right: 0; top: -7cqw; font: 500 2.3cqw/1 var(--mono) !important; letter-spacing: .12em; color: var(--ink2); padding: 1cqw 1.6cqw; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--ink2) 45%, transparent); background: var(--pa) }
.fx-l { color: var(--ink) } .fx-I { font: italic 500 7cqw/1.12 var(--serif); color: var(--ink2) } .fx-acc { color: var(--acc) }
.fx-C { font: 800 12cqw/.95 var(--caps); text-transform: uppercase; margin-top: .8cqw !important } .fx-R { font: 500 5cqw/1.28 var(--serif); margin-top: 2.4cqw !important }
.fx-bio { left: 0; right: 0; bottom: 0; top: 50%; padding: 6.5cqw 7cqw; border-radius: 6cqw 6cqw 0 0; background: var(--p0); color: var(--ink); opacity: 1; transform: translateY(102%); box-shadow: 0 -12px 30px -10px rgba(0,0,0,.25); overflow: hidden }
.fx-k { font: 500 2.4cqw/1 var(--mono); letter-spacing: .14em; color: var(--ink2); margin-bottom: 1.8cqw !important }
.fx-nm { font: 800 6.4cqw/1 var(--caps); margin-bottom: 2.4cqw !important } .fx-tx { font: 500 3.9cqw/1.36 var(--serif); margin-bottom: 4.4cqw !important }
.fx-mark { left: 6%; right: 6%; bottom: 4.5%; display: grid; gap: 3cqw; justify-items: center; transform: translateY(8%) }
.fx-cap { font: 500 2.5cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding: 2cqw 3.4cqw; border-radius: 99px; background: color-mix(in srgb, var(--p0) 86%, transparent); border: .5px solid color-mix(in srgb, var(--ink) 25%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.fx-row { width: 100%; display: grid; grid-template-columns: 79fr 21fr; gap: 1.8cqw; padding: 2.4cqw; border-radius: 4cqw; background: color-mix(in srgb, var(--p0) 92%, transparent); box-shadow: 0 8px 20px -10px rgba(0,0,0,.35) }
.fx-sign { display: grid; place-items: center; height: 11cqw; border-radius: 2.6cqw; background: var(--ink); color: var(--p0); font: 800 4cqw/1 var(--caps); letter-spacing: .08em }
.fx-bm { display: grid; place-items: center; height: 11cqw; border-radius: 2.6cqw; background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink) }
.fx-bm svg { width: 4.6cqw; height: 4.6cqw } .fx-bm path { fill: currentColor }
.fxc[data-fx="0"] .fx-mark, .fxc[data-fx="1"] .fx-orig { opacity: 1; transform: none }
.fxc[data-fx="2"] .fx-bio { transform: none }
.fxc[data-fx="0"] .fx-bm { animation: fxpop .5s .25s cubic-bezier(.3,1.6,.5,1) both }
@keyframes fxpop { from { transform: scale(.6) } to { transform: none } }
@media (prefers-reduced-motion: reduce) { .fx { transition: opacity .2s } .fxc[data-fx="0"] .fx-bm { animation: none } }
/* Vorschlag B: Musterblatt ohne Abdunkeln und ohne dicke Punkte – feine Ringe und ein Haarstrich um den Bereich */
.v-b .spec-spot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mk) 85%, transparent); border-radius: 8px; z-index: 4 }
.v-b .spec-mk { width: 9px; height: 9px; background: var(--bg, transparent); box-shadow: 0 0 0 1px var(--mk); font-size: 0 }
.v-b .spec-no { width: 8px; height: 8px; background: transparent; box-shadow: 0 0 0 1px var(--mk) }
.v-b.lit .spec-n:not([data-on]) { opacity: .5 }
/* Vorschlag A: Karte zum Antippen, Liste daneben */
.v-a { height: auto }
.da { display: grid; grid-template-columns: var(--cw) minmax(0, 420px); gap: 64px; justify-content: center; align-items: center }
.da .spec-card { position: relative; left: auto; top: auto; transform: none; cursor: pointer }
.da .spec-hz { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 8px }
.da .spec-hz:focus-visible { outline: 2px solid var(--mk); outline-offset: 2px }
.da-list { display: grid; gap: 6px }
.da-row { display: grid; grid-template-columns: 34px 1fr; gap: 14px; text-align: left; padding: 18px 20px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: background .3s, box-shadow .3s }
.da-row:hover { background: color-mix(in srgb, var(--panel) 60%, transparent) }
.da-row[data-on] { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule) }
.da-no { font: 500 13px/1.9 var(--mono); color: var(--ink3) } .da-row[data-on] .da-no { color: var(--mk) }
.da-tx b { display: block; font: 800 24px/1 var(--caps); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px }
.da-tx span { display: block; font-size: 18px; line-height: 1.45; color: var(--ink2) }
.da-row:focus-visible { outline: 2px solid var(--mk); outline-offset: 2px }
@media (max-width: 980px) { .da { grid-template-columns: 1fr; gap: 26px; justify-items: center } .da-list { width: 100% } .da-row { padding: 14px 16px } .da-tx b { font-size: 21px } .da-tx span { font-size: 17px } }
/* Vorschlag C: drei Karten nebeneinander */
.v-c { height: auto; width: min(100%, 1180px) }
.dc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px }
.dc-i { margin: 0 }
.dc .spec-card { position: relative; left: auto; transform: none; width: 100% }
.dc figcaption { display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; margin-top: 22px }
.dc figcaption b { font: 800 22px/1 var(--caps); text-transform: uppercase } .dc figcaption span:last-child { grid-column: 2; font-size: 17px; line-height: 1.45; color: var(--ink2) }
@media (max-width: 980px) { .dc { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none } .dc::-webkit-scrollbar { display: none } .dc-i { flex: 0 0 72%; scroll-snap-align: center } }
.fx-mark .fx-cap { position: absolute; left: 50%; bottom: calc(100% + 76cqw); transform: translateX(-50%); white-space: nowrap }
.v-b .spec-card[data-fx="2"] .spec-spot { opacity: 0 }
@media (max-width: 980px) { .da-row:not([data-on]) .da-tx span { display: none } .da-row:not([data-on]) .da-tx b { margin: 0 } .da-list { gap: 2px } }

/* 29.10.: Lärm lauter – Megafon und Ausrufezeichen */
.nzc-mega svg { display: block; width: 92px; height: 84px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.22)) }
.nzc-sym { font: 800 46px/1 var(--caps); color: #C62828; letter-spacing: -.02em; text-shadow: 0 6px 14px rgba(0,0,0,.18) }
@media (max-width: 820px) { .nzc-mega svg { width: 55px; height: 50px } .nzc-sym { font-size: 28px } }

/* 29.10.: Papier und Sicherheitsstreifen (Umdrehen) */
.grain { position: absolute; inset: 0; z-index: 28; pointer-events: none; opacity: .18; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,calc(.035 + .02 * var(--m))) 0 1px, transparent 1px 3.2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply }
:root[data-theme="dark"] .grain { mix-blend-mode: soft-light }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grain { mix-blend-mode: soft-light } }
.holo { position: absolute; left: 89.63%; width: 2.78%; top: 0; bottom: 0; z-index: 32; pointer-events: none; opacity: 0; -webkit-mask: var(--hm) 0 0 / 100% 100% no-repeat; mask: var(--hm) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(180deg, #ff8ad8, #8affd6 16%, #8ab8ff 32%, #fff38a 48%, #ff8ad8 64%, #8affd6 80%, #8ab8ff) 0 0 / 100% 300%;
  mix-blend-mode: color }
@media (prefers-reduced-motion: reduce) { .holo { display: none } }

/* 29.10.: großes Widget (systemLarge) */
.wg-l { aspect-ratio: 338 / 354; padding: 18px 18px 15px }
.wg-l .wg-q { margin-top: 12px; padding-top: 0; font-size: min(22px, 7.4cqw); line-height: 1.24; -webkit-line-clamp: 7 }
.wg-l .wg-a { font-size: 14px; margin-top: 8px }
.wg-l .wg-art img { height: 200%; margin-top: -30% }
.wg-qb { margin-top: 14px; padding-left: 10px; box-shadow: inset 1.5px 0 0 color-mix(in srgb, var(--acc) 35%, transparent) }
.wg-qk { margin: 0 0 4px; font: 500 8px/1 var(--mono); letter-spacing: .1em; color: var(--wi2) }
.wg-qq { margin: 0; font: 500 min(17px, 5.6cqw)/1.25 ui-serif, "New York", Georgia, serif; color: var(--wi) }
.wg-l .wg-n { margin-top: auto }
.only-wdg .wdg { margin-top: 0 }

/* 29.10.: Kopieren mit Rückmeldung, QR größer, Links in den Fragen */
.copy.done { color: var(--accT); border-color: currentColor }
.copy svg { transition: transform .25s } .copy.done svg { transform: scale(1.15) }
.copy-ok { min-height: 1.5em; margin: 10px 0 0 !important; font: 400 16px/1.5 var(--sans) !important; color: var(--accT) !important }
.qr { width: 240px; height: 240px }
@media (max-width: 1100px) { .v4v-box .qr { width: 210px; height: 210px } }
.faq-list p a { color: var(--accT); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px }
/* 29.10.: kein Poststempel mehr; nucknuck.app steht klein unter der Briefmarke */
.pc-mark { position: static; width: auto; height: auto; border: 0; border-radius: 0; background: none; transform: none; justify-self: end; margin-top: 10px; display: block }
.pc-mark span { background: none; padding: 0; font-size: 10px; letter-spacing: .14em }
@media (max-width: 640px) { .pc-mark { position: absolute; right: 10px; top: 98px; width: 70px; margin: 0; text-align: center } .pc-mark span { font-size: 7.5px; letter-spacing: .06em } }


/* 29.10. (Abend): Holzbrett mit Naturkante und Schildern (nur breite Ansicht; am Handy ohne Brett) */
.board { display: none }
@media (min-width: 821px) {
  .shelf.sv-a { padding-bottom: 18px }
  .shelf.sv-a::after { display: none }
  .shelf.sv-a .board { display: block; position: absolute; left: -34px; right: -34px; bottom: 0; height: 84px; z-index: 0; pointer-events: none;
    filter: drop-shadow(0 22px 18px rgba(0,0,0,.32)) drop-shadow(0 3px 3px rgba(0,0,0,.2)) }
  .board svg { display: block; width: 100%; height: 100% }
  .board .w1 { stop-color: color-mix(in srgb, #E9CFA2 calc((1 - var(--m)) * 100%), #7A5634) }
  .board .w2 { stop-color: color-mix(in srgb, #D7B583 calc((1 - var(--m)) * 100%), #6A4A2C) }
  .board .w3 { stop-color: color-mix(in srgb, #B98A56 calc((1 - var(--m)) * 100%), #5A3D24) }
  .board .w4 { stop-color: color-mix(in srgb, #94683A calc((1 - var(--m)) * 100%), #3E2A18) }
  .board .wtop { stroke: rgba(255,255,255,.35); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none }
  .shelf.sv-a .case-tab { gap: 0 }
  .shelf.sv-a .case-cap { position: relative; margin-top: 22px; min-height: 0; padding: 5px 10px 6px; border-radius: 2px; gap: 1px; color: #3A2A18;
    background: linear-gradient(#F6EFDF, #E6D9BE); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(80,55,25,.28), 0 2px 3px rgba(0,0,0,.35) }
  .shelf.sv-a .case-cap::before, .shelf.sv-a .case-cap::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #F3DFA8, #9C7A3C); box-shadow: 0 .5px 1px rgba(0,0,0,.5) }
  .shelf.sv-a .case-cap::before { left: 4px } .shelf.sv-a .case-cap::after { right: 4px }
  .shelf.sv-a .case-cap b { font-size: 10px; color: #6A5132 }
  .shelf.sv-a .case-cap span { font-size: 11.5px; letter-spacing: .04em; white-space: nowrap }
  .shelf.sv-a .case-tab[aria-selected="true"] .case-cap { background: linear-gradient(#FFF9EC, #F0E4C9) }
  .shelf.sv-a .case-tab[aria-selected="true"] .case-cap span { text-decoration: underline 1.5px; text-underline-offset: 3px }
}

/* 29.10. (Abend): Widget-Gravur aus dem Kartenbild (Ausschnitt per JS), leise wie in der App */
.wg-art { background-image: var(--wbl); background-repeat: no-repeat; opacity: calc(.2 + .04 * var(--m)) }
.wg-art img { display: none }
:root[data-theme="dark"] .wg-art { background-image: var(--wbd) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wg-art { background-image: var(--wbd) } }

/* 29.10. (Abend): Briefmarken – kein Poststempel, kein „nucknuck.app“ darunter */
.pc-mark { display: none !important }
.pc-stamp .pc-st-in { position: relative; overflow: hidden }
.pc-stamp .pc-st-in > * { position: relative; z-index: 1 }
/* A: Gravur aus Satoshis Postfach, Wert und Marke darauf */
.st-a .pc-st-in { background: var(--pa); color: var(--ink); justify-content: space-between; align-content: space-between; padding: 7px 6px 6px }
.st-a .st-art { position: absolute !important; inset: 0; z-index: 0 !important; background: var(--sbl) 58% 15% / 330% auto no-repeat }
:root[data-theme="dark"] .st-a .st-art { background-image: var(--sbd) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-a .st-art { background-image: var(--sbd) } }
.st-a .pc-st-in svg { color: var(--ink); --lg-coin: var(--acc); width: 62px }
.st-a .pc-st-in b { font-size: 26px; color: var(--ink); text-shadow: 0 1px 0 color-mix(in srgb, var(--pa) 80%, transparent) }
.st-a .pc-st-in span { color: var(--ink2); background: color-mix(in srgb, var(--pa) 85%, transparent); padding: 2px 3px }
/* B: das Siegel der Kette als Marke */
.st-b .pc-st-in { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pa) 70%, #fff), var(--pa) 70%); gap: 4px }
.st-b .mseal { width: 70px; height: 70px }
.st-b .pc-st-in span { color: var(--ink2); font-size: 6.5px }
/* C: Guilloche wie auf einer Banknote */
.st-c .pc-st-in { background: var(--acc); color: #FBF6EA; gap: 5px }
.st-c .st-gl { position: absolute !important; inset: 0; z-index: 0 !important; opacity: .5;
  background: repeating-radial-gradient(circle at 50% 46%, transparent 0 3px, rgba(255,255,255,.35) 3px 3.6px), repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,255,255,.18) 0 4deg, transparent 4deg 9deg) }
.st-c .pc-st-in b { font-size: 24px }
@media (max-width: 640px) { .st-a .pc-st-in b { font-size: 17px } .st-a .pc-st-in svg { width: 42px } .st-b .mseal { width: 46px; height: 46px } .st-c .pc-st-in b { font-size: 16px } }

.st-a .pc-st-in { padding: 0; display: block }
.st-a .pc-st-in > svg { position: absolute; left: 6px; top: 6px; width: 46px; height: 7px; padding: 3px 4px; box-sizing: content-box; background: color-mix(in srgb, var(--pa) 88%, transparent) }
.st-a .st-band { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: var(--pa); box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 30%, transparent) }
.st-a .st-band b { font: 800 22px/1 var(--caps); color: var(--ink); text-shadow: none }
.st-a .st-band em { font: 500 6px/1.15 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ink2); background: none; padding: 0 }
@media (max-width: 640px) { .st-a .pc-st-in > svg { width: 32px; height: 5px; left: 4px; top: 4px } .st-a .st-band { padding: 3px 4px; gap: 4px } .st-a .st-band b { font-size: 15px } .st-a .st-band em { font-size: 4.5px } }
.st-a .st-band { opacity: 1 }
.st-a .pc-st-in .st-band { background: var(--pa); padding: 5px 6px }

/* 29.10. (Abend): Briefmarke C – Gravur der Karte im Orange, Porto in sats */
.st-c .pc-st-in { background: #D9792B; color: #FFF7EA; gap: 2px; padding: 9px 6px 8px; align-content: space-between }
.st-c .st-gl { display: none }
.st-c .st-eng { position: absolute !important; inset: 0; z-index: 0 !important; background: var(--sbl) 58% 14% / 330% auto no-repeat; filter: grayscale(1) contrast(1.5); mix-blend-mode: multiply; opacity: .55 }
.st-c .st-frame { position: absolute !important; inset: 4px; z-index: 0 !important; border: 1px solid rgba(255,247,234,.7); box-shadow: inset 0 0 0 2px rgba(217,121,43,.6), inset 0 0 0 3px rgba(255,247,234,.35) }
.st-c .pc-st-in svg { width: 60px; height: 9px; color: #FFF7EA; --lg-coin: #FFF7EA }
.st-c .st-val { display: grid; justify-items: center; line-height: 1; opacity: 1 }
.st-c .st-val b { font: 800 24px/1 var(--caps); letter-spacing: .01em; text-shadow: 0 1px 2px rgba(80,30,0,.35) }
.st-c .st-val em { font: 600 8px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; font-style: normal; margin-top: 2px }
.st-c .st-fiat { font: 500 5.6px/1 var(--mono) !important; letter-spacing: .08em !important; opacity: .9 }
.st-c .st-pot { font: 500 6.4px/1.1 var(--mono) !important; letter-spacing: .14em !important }
@media (max-width: 640px) { .st-c .pc-st-in { padding: 6px 4px 5px } .st-c .pc-st-in svg { width: 40px; height: 6px } .st-c .st-val b { font-size: 15px } .st-c .st-val em { font-size: 5.5px } .st-c .st-fiat, .st-c .st-pot { font-size: 4.2px !important } }

/* 29.10. (Abend): Bohle mit Rinde; Schild nur mit der Ziffer (der Name steht schon auf dem Schuber) */
@media (min-width: 821px) {
  .shelf.sv-a .board { height: 86px; left: -40px; right: -40px }
  .board .t1 { stop-color: color-mix(in srgb, #C79A66 calc((1 - var(--m)) * 100%), #6E4C2E) }
  .board .t2 { stop-color: color-mix(in srgb, #A97A49 calc((1 - var(--m)) * 100%), #5A3C22) }
  .board .b1 { stop-color: #5B3D26 } .board .b2 { stop-color: #3E2919 } .board .b3 { stop-color: #2A1B10 }
  .board .sap { fill: color-mix(in srgb, #E7CFA0 calc((1 - var(--m)) * 100%), #8E6B45) }
  .board .wtop { stroke: rgba(255,240,215,.35) }
  .shelf.sv-a .case-cap { margin-top: 34px; padding: 4px 9px 5px; background: linear-gradient(#F3EAD5, #DCCBA6) }
  .shelf.sv-a .case-cap span { display: none }
  .shelf.sv-a .case-cap b { font: 600 12px/1 var(--caps); letter-spacing: .14em; color: #4A3520 }
  .shelf.sv-a .case-cap::before { left: 3px } .shelf.sv-a .case-cap::after { right: 3px }
  .shelf.sv-a .case-cap { padding-left: 12px; padding-right: 12px }
}

/* 29.10. (Abend, 2): schlankes Brett aus heller Eiche, Schilder mittig auf der Kante */
@media (min-width: 821px) {
  .shelf.sv-a { padding-bottom: 0 }
  .shelf.sv-a .board { left: -26px; right: -26px; bottom: -4px; height: 34px; filter: drop-shadow(0 14px 12px rgba(0,0,0,.22)) drop-shadow(0 2px 2px rgba(0,0,0,.14)) }
  .board .t1 { stop-color: color-mix(in srgb, #F0DDBC calc((1 - var(--m)) * 100%), #9C7A55) }
  .board .t2 { stop-color: color-mix(in srgb, #E2C9A0 calc((1 - var(--m)) * 100%), #8A6A47) }
  .board .f1 { stop-color: color-mix(in srgb, #D8B88B calc((1 - var(--m)) * 100%), #7E5F3E) }
  .board .f2 { stop-color: color-mix(in srgb, #C4A072 calc((1 - var(--m)) * 100%), #6B4F33) }
  .board .wedge { stroke: rgba(255,248,232,.55); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none }
  .shelf.sv-a .case-cap { margin-top: 11px; padding: 2px 9px 3px; border-radius: 2px; background: linear-gradient(#F7F0E0, #E8DCC2); box-shadow: inset 0 0 0 1px rgba(90,65,35,.25), 0 1px 1.5px rgba(0,0,0,.25) }
  .shelf.sv-a .case-cap b { font: 600 10px/1.2 var(--caps); letter-spacing: .16em; color: #5A4228 }
  .shelf.sv-a .case-cap::before, .shelf.sv-a .case-cap::after { width: 3px; height: 3px; margin-top: -1.5px }
}
.wg-l .wg-art { -webkit-mask-image: linear-gradient(#000 0 22%, transparent 52%); mask-image: linear-gradient(#000 0 22%, transparent 52%) }

/* 29.10. (Abend): Widgets wie auf dem iPhone – Maße in pt × --s (Breite / 338), Kartenschriften, verteilte Abstände */
.wg { padding: calc(var(--s, 1) * 17px) calc(var(--s, 1) * 17px) calc(var(--s, 1) * 15px); container-type: normal }
.wg-hd { font-size: calc(var(--s, 1) * 8.5px); letter-spacing: .12em }
.wg-sn { margin-left: auto; opacity: .85 }
.wg-rule { margin-top: calc(var(--s, 1) * 6px) }
.wg-sp { display: block; flex: 1 1 0; min-height: calc(var(--s, 1) * 6px) } .wg-sp2 { flex-grow: 1.35 } .wg-sp3 { flex-grow: 1.2 }
.wg .wg-q, .wg-l .wg-q { margin: 0; padding: 0; font-family: var(--serif); font-style: italic; font-weight: 500; line-height: 1.22; -webkit-line-clamp: 6 }
.wg .wg-a, .wg-l .wg-a { margin: calc(var(--s, 1) * 5px) 0 0; font: 800 calc(var(--s, 1) * 12px)/1 var(--caps); letter-spacing: .06em }
.wg-l .wg-a { font-size: calc(var(--s, 1) * 14px); margin-top: calc(var(--s, 1) * 8px) }
.wg-qb { margin-top: 0 }
.wg-qk { font-size: calc(var(--s, 1) * 8px) }
.wg-qq { font: 500 calc(var(--s, 1) * 17px)/1.25 var(--serif) }
.wg-n { display: none }
.wg .wg-art, .wg-l .wg-art { -webkit-mask-image: linear-gradient(#000 0 24%, transparent 56%); mask-image: linear-gradient(#000 0 24%, transparent 56%) }
.faq-list details p + p { margin-top: .8em }
/* 29.10.: Textauswahl in der Akzentfarbe statt Systemblau */
::selection { background: color-mix(in srgb, var(--accT, #A34A00) 26%, transparent); color: inherit }

/* 29.10. (spät): Brett als Bild (hell/dunkel), Sicherheitsstreifen-Schimmer entfernt, Fächer weiter eingerückt */
.holo { display: none }
@media (min-width: 821px) {
  .board img { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
  .board .bd-d { opacity: var(--m) } .board .bd-l { opacity: calc(1 - var(--m)) }
  .shelf.sv-a .board { filter: none; box-shadow: 0 16px 18px -14px rgba(0,0,0,.4) }
  .fan3 { --fw: min(310px, 23vw) }
  .fan-s1 { left: calc(50% - var(--fw) * .5 - var(--fw) * .4) }
  .fan-s2 { left: calc(50% + var(--fw) * .5 - var(--fw) * .42) }
}
@media (max-width: 820px) {
  .fan3 { --fw: min(52vw, 240px) }
  .fan-s1 { left: calc(50% - var(--fw) * .5 - var(--fw) * .18) } .fan-s2 { left: calc(50% + var(--fw) * .5 - var(--fw) * .64) }
}

/* 29.10. (spät): Hinweis unter dem App-Store-Button und Sprung an der Story vorbei */
.cta-row { flex-wrap: wrap }
.cta-facts { margin: 0 !important; font: 500 12px/1.3 var(--mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2) !important }
@media (max-width: 820px) { .cta-facts { font-size: 10.5px !important; flex-basis: 100% } }
/* 29.10. (spät): Scroll-Hinweis unten mittig am Bildschirmrand, eine Zeile (der Sprung zu den Serien steht schon in der Navigation) */
.step-hero { position: relative }
.step-hero .scrollhint { position: fixed; left: max(var(--gut), env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); margin: 0 !important; white-space: nowrap; flex-direction: row; gap: 12px }
.step-hero .sh-line { height: 22px }
@media (max-width: 820px) { .step-hero .scrollhint { display: none !important } }

/* 30.10.: Value for Value – Umschalter Lightning / on-chain (Silent Payment) */
.v4v-seg { display: inline-flex; margin-top: 26px }
.v4v-seg + .addr-row { margin-top: 14px }
.addr.long { font-size: 12.5px; max-width: 34em }
.v4v-note { margin: 12px 0 0 !important; font: 400 15px/1.5 var(--sans) !important; color: var(--ink3) !important; max-width: 34em }
.v4v-note:empty { display: none }

/* 31.10.: Fächer aus acht Karten über dem Schluss (Serie I–VIII), untere Hälfte ausgeblendet, fächert sich beim Scrollen auf */
.outro { position: relative; isolation: isolate; overflow: hidden; padding-top: 340px; padding-bottom: 56px }
.outro-fan { position: absolute; left: 0; right: 0; top: 30px; height: 340px; z-index: -1; pointer-events: none;
  /* obere Hälfte voll sichtbar, untere Hälfte läuft weich ins Papier aus – über den ganzen Fächer, damit keine Karte
     durch die nächste durchscheint */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 42%, rgba(0,0,0,.35) 68%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0, #000 42%, rgba(0,0,0,.35) 68%, transparent 92%) }
.outro-fan .of-c { position: absolute; left: calc(50% - 80px); right: auto; bottom: auto; top: 0; width: 160px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden;
  transform-origin: 50% 1000px; transform: rotate(calc(var(--k) * 6.6deg * (.2 + .8 * var(--s, 1)))) translateY(calc(var(--a) * 4px * var(--s, 1)));
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 14px 30px -14px rgba(0,0,0,.45) }
.outro-fan .of-c picture, .outro-fan .of-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.outro > :not(.outro-fan) { position: relative }
@media (max-width: 640px) {
  .outro { padding-top: 258px; padding-bottom: 44px }
  .outro-fan { top: 24px; height: 240px }
  .outro-fan .of-c { left: calc(50% - 60px); width: 120px; border-radius: 7px; transform-origin: 50% 900px; display: none }
  /* Handy: nur drei Karten, Serie I–III in Reihenfolge */
  .outro-fan .of-c.of-m { display: block; transform: rotate(calc(var(--km) * 8deg * (.2 + .8 * var(--s, 1)))) translateY(calc(var(--am) * 6px * var(--s, 1))) }
}
/* 31.10.: niedrige Fenster – Fächer kleiner, damit beim ganz Herunterscrollen die Karten unter der Kopfleiste sichtbar bleiben */
@media (min-width: 641px) and (max-height: 860px) {
  .outro { padding-top: 290px }
  .outro-fan { top: 22px }
  .outro-fan .of-c { left: calc(50% - 68px); width: 136px; transform-origin: 50% 860px }
}
@media (max-width: 640px) and (max-height: 720px) {
  .outro { padding-top: 186px; padding-bottom: 32px }
  .outro-fan { top: 14px }
  .outro-fan .of-c { left: calc(50% - 46px); width: 92px; transform-origin: 50% 700px }
}
/* 01.11. (Benedikt: mit Mausrad musste man sehr lange scrollen): kürzere Story am Desktop. Ein Rad-Klick scrollt je
   nach System etwa 100–120 px; mit 62 % Bildschirmhöhe je Schritt reichen rund 5 Klicks statt 8. Die Animation hängt an
   den Schrittgrenzen und läuft entsprechend schneller durch. Kein Eingriff ins Scrollen selbst (Trackpad bleibt natürlich). */
@media (min-width: 821px) {
  .step { height: 62vh; height: 62svh }
  .step-hero { height: 80vh; height: 80svh }
  .step:last-child { height: 75vh; height: 75svh }
}
/* 01.11.: Versionsnummer der Webseite in der Fußzeile (1.1.0 = neue Seite 29.10., 1.1.1 Update 29.10. abends, 1.1.2 Spenden 30.10., 1.1.3 Fächer/Briefmarke 31.10., 1.1.4 kürzere Story 01.11.). Bei jedem Update in index, impressum, privacy, terms, archiv hochzählen; die Kennung ?v=11x dahinter ist nur für den Browser-Zwischenspeicher. */
.web-ver { font-variant-numeric: tabular-nums; letter-spacing: .02em }