/* nucknuck.app/app – die App im Browser. Gestaltung nach der App 1.1.1 (Swift-Dateinamen in den Abschnitten). */
/* Schriften der App, selbst gehostet (liegen schon für die Startseite in /assets/fonts, OFL-Lizenzen dort) */
@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: "EB Garamond Greek"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/eb-garamond-greek-500-italic.woff2") format("woff2"); unicode-range: U+0370-03FF,U+1F00-1FFF,U+02BC }
@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 }
/* Farben: jedes Element mit .pal trägt die Serienfarben hell (-l) und dunkel (-d); --m (0 hell, 1 dunkel) mischt.
   <html class="pal"> trägt die ruhigen Seitenfarben der App (folgt nicht mehr der vorderen Karte). Werte aus packs.json/holidays.json (über tools/gen_data.py).
   Maße der Karte im 360er-Satz der App: --u = Kartenbreite / 360. */
:root {
  --m: 0;
  --alert: color-mix(in srgb, #FF6B5E calc(var(--m) * 100%), #A93226);
  /* 02.11. (Benny): Seite in den ruhigen Farben der App (NN.Hex), unabhängig von der vorderen Karte */
  --pa-l: #FBF7EF; --pb-l: #EDE3D1; --p0-l: #F7F1E6; --ink-l: #2B2218; --ink2-l: #64553F; --acc-l: #A4561A; --accT-l: #A4561A; --acc2-l: #2B6F8C;
  --pa-d: #221C16; --pb-d: #1D1813; --p0-d: #16130F; --ink-d: #EFE5D3; --ink2-d: #B3A58F; --acc-d: #E3A15E; --accT-d: #E3A15E; --acc2-d: #8CCBE0;
  --caps: "Barlow Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --serif: "Cormorant Garamond", "New York", ui-serif, Georgia, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shA: calc(.14 + .26 * var(--m));
  --shB: calc(.18 + .27 * var(--m));
  --cardW: min(560px, 80vw, max(150px, calc((100svh - var(--fold, 238px)) * .5625)));
  --stageW: 1320px; --tabH: 60px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m: 1; color-scheme: dark } }
:root[data-theme="dark"] { --m: 1; color-scheme: dark }
@media (min-width: 900px) { :root { --tabH: 66px } }
:root[data-theme="light"] { --m: 0; color-scheme: light }
.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(--accT-d) calc(var(--m) * 100%), var(--accT-l));
  --acc2: color-mix(in srgb, var(--acc2-d) calc(var(--m) * 100%), var(--acc2-l));
  --edge: color-mix(in srgb, var(--pb) calc(78% - 8% * var(--m)), var(--ink));
  --panel: color-mix(in srgb, var(--pa) 72%, var(--p0));
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --ruleStrong: color-mix(in srgb, var(--ink) calc(42% - 4% * var(--m)), transparent);
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; background: var(--p0) }
@supports (overflow: clip) { html { overflow-x: clip } }
body { margin: 0; background: var(--p0); color: var(--ink); font: 17px/1.55 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) }
@supports (overflow: clip) { body { overflow-x: clip } }
html.ready body { transition: background-color .6s ease, color .6s ease }
a { color: inherit }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation }
[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(--p0); padding: 6px 10px; border-radius: 6px }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }

/* ---------------------------------------------------------------- Register (FolderTabView) */
.head { margin: 0 auto; padding-left: 16px; padding-right: 16px; display: flex; justify-content: center; align-items: flex-end; padding-top: max(10px, env(safe-area-inset-top, 0px)); height: calc(var(--tabH) + max(10px, env(safe-area-inset-top, 0px))) }
.reg { display: flex; align-items: flex-end; gap: 3px; flex: 1 1 auto; max-width: var(--stageW); min-width: 0; position: relative; z-index: 2 }
@media (min-width: 621px) {
  .reg { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end }
  .reg .tab-today { justify-self: start; width: min(400px, 100%) } .reg #t-chain { justify-self: center } .reg #t-settings { justify-self: end }
}
@media (max-width: 600px) { .reg .tab-today { flex: 1 1 auto } .reg #t-chain { margin-left: 3px; margin-right: 0 } }
/* Reiter wie FolderTabView: alle gleich hoch, der aktive wächst NICHT – nur Farbe, Schatten, Rand und Deckkraft wechseln */
.tab { position: relative; height: var(--tabH); border: .5px solid color-mix(in srgb, var(--rule) 70%, transparent); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--ink) 5%, var(--p0)); color: var(--ink2); opacity: .7; cursor: pointer; padding: 0 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 1px rgba(0, 0, 0, .03); transition: background-color .25s, color .25s, box-shadow .25s, opacity .25s, border-color .25s }
.tab[aria-selected="true"] { background: var(--panel); color: var(--ink); opacity: 1; z-index: 2; border: 1px solid var(--rule); border-bottom: 0; box-shadow: 0 -3px 6px rgba(0, 0, 0, .08) }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2px; background: var(--panel) }
.tab-today { min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 14px; text-align: center }
.tab-today .logo { height: 25px; width: auto; max-width: min(180px, 100%); color: var(--ink); --lg-coin: #F7931A; opacity: .9; transition: transform .25s cubic-bezier(.3, .7, .3, 1) }
.tab-today:not([aria-selected="true"]) .logo { transform: translateY(7.5px) }
.dateline { font: 500 10px/12px var(--mono); letter-spacing: .08em; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: opacity .16s ease-out }
.tab-today:not([aria-selected="true"]) .dateline { opacity: 0 }
.tab-icon { flex: none; padding: 0 30px 0 26px; gap: 12px; min-width: 52px }
.tab-icon svg { width: 22px; height: 22px; flex: none }
.tab-icon .tlab { font: 600 17px/1 var(--caps); letter-spacing: .03em; white-space: nowrap }
@media (max-width: 620px) { .tab-icon { padding: 0; width: 52px } .tab-icon .tlab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) } }
.tab.opening { transform: translateY(-6px) scale(1.08, 1.18); transform-origin: 50% 100%; box-shadow: 0 0 8px rgba(247, 147, 26, .25); transition: transform .4s cubic-bezier(.3, .8, .3, 1.2), box-shadow .3s }

.app { margin: 0; background: var(--panel); border-top: 1px solid var(--rule); padding: 14px 0 34px;
  position: relative; z-index: 1; outline: none; min-height: calc(100svh - var(--tabH) - 24px) }
html.ready .app { transition: background-color .6s }
.view { padding: 0 20px; max-width: var(--stageW); margin: 0 auto }

/* ---------------------------------------------------------------- Kopf über dem Fächer */
.fanbar { max-width: var(--cardW); margin: 0 auto; min-height: 34px; display: flex; flex-direction: column; justify-content: center }
.preload { position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none }
.preload picture, .preload img { display: block; width: 100%; aspect-ratio: 9 / 16 }
.deck.shuffling figure { transition: transform .17s cubic-bezier(.4, 0, .4, 1), opacity .2s }
.deck.dealing figure { transition: transform .5s cubic-bezier(.25, .9, .3, 1), opacity .3s }
.fanbar .kick { text-align: center; font: 500 10.5px var(--mono); letter-spacing: .22em; color: var(--ink2); text-transform: uppercase }
.sbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2) }
.sbar b { font-weight: 500; color: var(--ink2); display: flex; min-width: 0; gap: .6em; white-space: nowrap }
.sbar b .nm { overflow: hidden; text-overflow: ellipsis } .sbar b .ct { flex: none }
.sbar button { flex: none; border: 0; background: none; padding: 10px 0 10px 12px; cursor: pointer; font: 500 10.5px var(--mono); letter-spacing: .14em; color: var(--ink); text-transform: uppercase }
.sprog { height: 4px; margin-top: 4px; border-radius: 4px; background: var(--rule); position: relative; overflow: hidden }
.sprog i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--acc); transition: width .4s }

/* ---------------------------------------------------------------- Fächer */
.deck-wrap { position: relative; margin: 0 calc(50% - 50vw); overflow: hidden; overflow: clip }
/* Alle Karten absolut übereinander, Lage nur per transform (layoutDeck) */
.deck { position: relative; height: calc(var(--cardW) * 16 / 9 + 50px); outline: none; touch-action: pan-y pinch-zoom; cursor: grab;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform .3s cubic-bezier(.3, .8, .3, 1) }
.deck.landing { transform: scale(1.03); transition: none } .deck.landing.landed { transform: none; transition: transform .3s cubic-bezier(.3, .8, .3, 1.1) }
.deck:active { cursor: grabbing }
.deck figure { position: absolute; left: 50%; top: 16px; width: var(--cardW); margin: 0 0 0 calc(var(--cardW) / -2); transform-origin: 50% 50%; will-change: transform;
  transition: transform .4s cubic-bezier(.42, 0, .58, 1), opacity .3s }
.deck.stackmode figure { transition: transform .42s cubic-bezier(.22, .9, .3, 1), opacity .3s }
.deck.dragging figure { transition: none }
.deck.lock figure.on .card, .deck.dragging figure.on .card, .deck.ptr figure.on .card { outline: none !important }
.deck:focus-visible { outline: none } .deck:focus-visible figure.on .card { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: calc(var(--cardW) * 16.5 / 360) }
.card { position: relative; aspect-ratio: 360 / 640; container-type: inline-size; --u: calc(100cqw / 360); perspective: calc(var(--u) * 1280); border-radius: calc(var(--u) * 16.5) }
.lcard { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .08s linear }
.tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .08s linear }
.flipper { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50%;
  transition: transform .62s cubic-bezier(.45, .05, .2, 1) }
figure.flipped .flipper { transform: rotateY(-180deg) }
.face { position: absolute; inset: 0; border-radius: calc(var(--u) * 16.5); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--pa);
  box-shadow: 0 calc(var(--u) * 2.4) 0 var(--edge), 0 1px 2px rgba(0, 0, 0, var(--shA)), 0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(0, 0, 0, var(--shB)) }
.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.back { transform: rotateY(180deg); box-shadow: 0 1px 2px rgba(0, 0, 0, var(--shA)), 0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(0, 0, 0, var(--shB)) }
.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-select: none; -webkit-user-drag: none; pointer-events: none }
.front .ims img { background: color-mix(in srgb, var(--ink2) 10%, var(--pa)) }
.front canvas.depth { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3 }
/* Sprachwechsel nur im Textfeld (Kopf, Motiv, Autor, Nummer bleiben stehen) */
.f-other { clip-path: inset(43% 0 8.2% 0); opacity: 0; transition: opacity .6s ease-in-out; z-index: 4 }
.front.other .f-other { opacity: 1 }
.f-over { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 52); top: calc(var(--u) * 200); z-index: 5; opacity: 0; pointer-events: none; transform: translateY(calc(var(--u) * 8));
  transition: opacity .5s cubic-bezier(.3, .1, .2, 1), transform .5s cubic-bezier(.3, .1, .2, 1);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pa) 0%, transparent) 0, color-mix(in srgb, var(--pa) 94%, transparent) calc(var(--u) * 56), var(--pa) 40%, color-mix(in srgb, var(--pb) 55%, var(--pa)) 100%);
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - var(--u) * 12), transparent); mask: linear-gradient(to bottom, #000 calc(100% - var(--u) * 12), transparent);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 calc(var(--u) * 26) calc(var(--u) * 12) }
.f-over.on { opacity: 1; transform: none; pointer-events: auto }
.f-over .k { font: 500 calc(var(--u) * 8.5)/1.3 var(--mono); letter-spacing: calc(var(--u) * 1.8); color: var(--accT); text-transform: uppercase; margin-bottom: calc(var(--u) * 8) }
.f-over .n { font: 800 calc(var(--u) * 26)/1 var(--caps); letter-spacing: .02em; color: var(--ink); margin-bottom: calc(var(--u) * 10) }
.f-over .b { font: 600 calc(var(--u) * 20)/1.2 var(--serif); color: var(--ink); margin: 0 }
.f-over .k2 { margin: calc(var(--u) * 14) 0 calc(var(--u) * 5) }
.f-over .c { font: 600 calc(var(--u) * 17)/1.2 var(--serif); color: color-mix(in srgb, var(--ink) 85%, transparent); margin: 0 }
.f-over a { display: inline-flex; align-items: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 10) 0;
  font: 500 calc(var(--u) * 8.5) var(--mono); letter-spacing: calc(var(--u) * .6); color: var(--accT); text-decoration: none; align-self: flex-start }
.f-over a svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9) }
.tally { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 77); height: calc(var(--u) * 8); display: flex; pointer-events: none; z-index: 4 }
.tally svg { height: 100%; overflow: visible }
.ribbon { position: absolute; left: calc(var(--u) * 337); top: 0; width: calc(var(--u) * 11); height: calc(var(--u) * 44); background: color-mix(in srgb, var(--ink) 82%, transparent); z-index: 4; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--u) * 6), 0 100%); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); opacity: 0; transform: translateY(calc(var(--u) * -8)); transition: opacity .3s, transform .3s cubic-bezier(.3, .8, .3, 1) }
figure.saved .ribbon { opacity: 1; transform: none }
.shine { position: absolute; inset: 0; pointer-events: none; display: none; mix-blend-mode: screen; z-index: 3;
  background: linear-gradient(115deg, transparent 32%, rgba(204, 230, 255, .14) 40%, rgba(255, 255, 255, .12) 46%, rgba(255, 235, 204, .14) 52%, transparent 60%) }
figure.shines:not(.on) .shine { display: block }

.nav-btn { position: absolute; top: 50%; translate: 0 -50%; z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: .75px solid var(--ruleStrong); background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--ink); cursor: pointer; padding: 0 }
.nav-btn svg { width: 20px; height: 20px } .nav-btn:disabled { opacity: .3; cursor: default }
.prev { left: 20px } .next { right: 20px }
.under { min-height: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: opacity .3s ease-in-out, transform .3s ease-in-out }
.under.away { opacity: 0; transform: translateY(50px); pointer-events: none }
.note.why { color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px }
.note.why svg { width: 9px; height: 9px; transform: rotate(-90deg) }
.ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; width: min(100%, calc(var(--cardW) + 140px)); min-height: 44px }
.ctrl > .ushare { justify-self: end } .ctrl > .shuf { justify-self: start } .ctrl > .pills { grid-column: 2 }
.ctrl > .ushare[hidden] + .pills { grid-column: 2 }
.shuf { border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; min-height: 40px; font: 500 10.5px var(--mono); letter-spacing: .16em; color: var(--ink); text-transform: uppercase }
.shuf svg { width: 15px; height: 15px; transition: transform .5s cubic-bezier(.3, .8, .3, 1) } .shuf.turning svg { transform: rotate(180deg) }
.pills { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 10px }
.pills[hidden] { display: none }
.pill-dot { width: 10px; height: 10px; padding: 0; border-radius: 5px; border: 0; cursor: pointer; background: color-mix(in srgb, var(--ink) 22%, transparent); position: relative;
  font: 700 7px/10px var(--mono); color: var(--p0); transition: width .4s cubic-bezier(.42, 0, .58, 1), background .3s; overflow: hidden }
.pill-dot::before { content: ""; position: absolute; inset: -12px -4px } /* Trefferfläche */
.pill-dot.on { width: 28px; background: linear-gradient(90deg, var(--acc) 0 50%, color-mix(in srgb, var(--ink) 22%, transparent) 50% 100%); box-shadow: 0 0 4px color-mix(in srgb, var(--acc) 25%, transparent) }
.pill-dot i { position: absolute; left: 0; top: 0; width: 14px; height: 10px; display: grid; place-items: center; font: 700 7.5px/1 var(--sans); font-style: normal; color: var(--p0); transform: rotate(-90deg) }
.handle { border: 0; background: none; cursor: pointer; font: 500 8.5px var(--mono); letter-spacing: .18em; color: color-mix(in srgb, var(--ink2) 75%, transparent); text-transform: uppercase; min-height: 30px; display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 0 10px }
.handle svg { width: 14px; height: 14px; animation: nudge 2.4s ease-in-out 1.5s 3 }
@keyframes nudge { 50% { transform: translateY(3px) } }
#v-cards.series { --cardW: min(560px, 80vw, max(150px, calc((100svh - 300px) * .5625))) }
.panel.why { width: min(420px, 100%) }
.whybox { display: flex; gap: 18px; align-items: flex-start }
.whythumb { flex: none }
.whytext p { margin: 0; font: 500 19px/1.3 var(--serif); color: var(--ink) }
.whylink { margin-top: 12px; border: 0; background: none; padding: 8px 0; cursor: pointer; font: 500 9.5px var(--mono); letter-spacing: .12em; color: var(--ink2) }
.note { min-height: 1.4em; margin: 0; text-align: center; font: 500 10.5px var(--mono); letter-spacing: .16em; color: var(--ink2); padding: 0 8px; text-transform: uppercase }
.under { position: relative }
.under:has(.mhint.on) .note { opacity: 0 }
.note { transition: opacity .3s }
.mhint { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--panel); margin: 0; font: 500 10.5px var(--mono); letter-spacing: .12em; color: var(--ink2); padding: 7px 14px; border-radius: 999px; border: .5px solid var(--ruleStrong);
  opacity: 0; transition: opacity .5s; pointer-events: none; text-transform: uppercase }
.mhint.on { opacity: 1 }

/* ---------------------------------------------------------------- Rückseite (SeriesCardBack + ValueCartouche + Signierzeile), 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-ground { position: absolute; inset: 0; background: linear-gradient(170deg, var(--pa), var(--pb)) }
.bk-ground .yr { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 30); font: 300 calc(var(--u) * 96)/1 var(--serif); color: transparent;
  -webkit-text-stroke: calc(var(--u) * .7) color-mix(in srgb, var(--ink) 30%, transparent) }
.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); letter-spacing: .12em }
.bk-head i { display: block; margin-top: calc(var(--u) * 2); font: 600 calc(var(--u) * 9.5)/calc(var(--u) * 11.5) var(--caps); font-style: normal; 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); 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; transition: opacity .3s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 23.5) }
.cart.set { opacity: 1 }
.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); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s }
.cart-w > span.on { opacity: 1 }
.cart-w > .ph { color: color-mix(in srgb, var(--ink) 62%, transparent); font-size: calc(var(--u) * 18.2); letter-spacing: .18em; align-self: center }
.trk { position: absolute; left: calc(var(--u) * 24); right: calc(var(--u) * 24); top: calc(var(--u) * 398); height: calc(var(--u) * 48); touch-action: none; cursor: pointer; outline: none }
.trk:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px }
.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) 42%, 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; transition: opacity .2s }
.trk.set .knob { opacity: 1 }
.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) 70%, transparent); white-space: nowrap; transition: opacity .2s; pointer-events: none }
.trk.set ~ .ends { opacity: 0 }
.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 button { border: 0; background: none; padding: 0; cursor: pointer }
.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; position: relative }
.fld .mic::after { content: ""; position: absolute; inset: -6px }
.fld .mic svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18) }
.fld .txt { flex: 1; min-width: 0; height: 100%; margin-left: calc(var(--u) * 13.5); text-align: left; display: flex; align-items: center; gap: calc(var(--u) * 6) }
.fld .txt span { min-width: 0; font: 500 calc(var(--u) * 21.4)/1.1 var(--serif); color: color-mix(in srgb, var(--ink) 68%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fld .txt span.v { color: var(--ink); font-size: calc(var(--u) * 19) }
.fld .txt b { flex: none; font: 500 calc(var(--u) * 10)/1 var(--mono); color: var(--ink2) }
.fld .kb { flex: none; width: calc(var(--u) * 54); height: 100%; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 60%, transparent) }
.fld .kb svg { width: calc(var(--u) * 22); height: calc(var(--u) * 16) }
.bk-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: 0; border-radius: calc(var(--u) * 6.5); background: var(--ink); color: var(--p0); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font: 800 calc(var(--u) * 17.1)/1 var(--caps); letter-spacing: calc(var(--u) * 1.93); text-transform: uppercase; overflow: hidden; padding: 0 }
.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) 35%, transparent) }
.sgn .accbg { position: absolute; inset: 0; background: var(--acc); opacity: 0; transition: opacity .25s }
.sgn.armed .accbg { opacity: 1 }
.sgn.armed { color: #17110B } .sgn.armed::after { box-shadow: inset 0 0 0 .5px rgba(23, 17, 11, .35) }
.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; transition: opacity .2s }
.sgn .lab > span.on { 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) }
.spin { display: inline-block; 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: 0; border-radius: calc(var(--u) * 6.5); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0;
  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) }
/* Schalter „Rückseite der Karte“: ohne Frage rückt das Gedankenfeld hoch, ohne beides bleibt nur Signieren */
.back.noq .bk-q, .back.noq .cart, .back.noq .trk, .back.noq .ends { display: none }
.back.not .fld { display: none }
.back.noq:not(.not) .fld { top: calc(var(--u) * 470) }
.back.noq .bk-head2 { display: block }
.bk-head2 { display: none; position: absolute; left: calc(var(--u) * 26); right: calc(var(--u) * 24); top: calc(var(--u) * 150); font: 600 calc(var(--u) * 30)/1.15 var(--serif); color: var(--ink) }
.bk-head2 small { display: block; font: 500 calc(var(--u) * 9.5)/1.4 var(--mono); letter-spacing: .2em; color: var(--ink2); text-transform: uppercase; margin-bottom: calc(var(--u) * 10) }
.back.raised .bk-row { opacity: .35; transition: opacity .3s }

/* ---------------------------------------------------------------- Stempel (SignedSealView) */
.seal { display: block; overflow: visible }
.seal .sc { opacity: calc(.58 - .03 * var(--m)) }
.seal.anim .sc { opacity: 0; transform: scale(.88); transform-origin: 50% 50% }
.seal.anim.press .sc { opacity: calc(.58 - .03 * var(--m)); transform: scale(1); transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.45, .5, 1) }
.seal text.hid { opacity: 0 }

/* ---------------------------------------------------------------- Signierte Karte klein (SignedMiniCard), Entwurf 252 × 252 */
.mini { position: relative; flex: none; width: calc(var(--mu) * 252); height: calc(var(--mu) * 252); perspective: calc(var(--mu) * 1200) }
.mini-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .62s cubic-bezier(.45, .05, .2, 1) }
.mini.flipped .mini-in { transform: rotateY(-180deg) }
.mface { position: absolute; inset: 0; border-radius: calc(var(--mu) * 9.8); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: 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, calc(.14 + .1 * var(--m))) }
.mface::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .75px color-mix(in srgb, var(--ink) 25%, transparent); z-index: 9; pointer-events: none }
.mfront img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block }
.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; text-align: left }
.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)))) }
.mback { transform: rotateY(180deg); padding: calc(var(--mu) * 14) calc(var(--mu) * 16); display: flex; flex-direction: column; text-align: left;
  background: linear-gradient(170deg, var(--pa) 0%, var(--pa) 46%, var(--pb) 100%); color: var(--ink) }
.mframe { position: absolute; inset: calc(var(--mu) * 5.2); border-radius: calc(var(--mu) * 6.3); border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); pointer-events: none }
.mbhead { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--mu) * 8); position: relative }
.mlogo { height: calc(var(--mu) * 6.5); width: auto; color: var(--ink); --lg-coin: var(--acc) }
.mmeta { font: 500 calc(var(--mu) * 7.5) var(--mono); letter-spacing: calc(var(--mu) * .6); color: var(--ink2) }
.mq { margin-top: calc(var(--mu) * 10); position: relative }
.mq .caps { display: block; font: 800 calc(var(--mu) * 14 * var(--mqs, 1))/.95 var(--caps); text-transform: uppercase; color: var(--ink) }
.mq .rest { display: block; font: 600 calc(var(--mu) * 15.5 * var(--mqs, 1))/1.08 var(--serif); color: var(--ink); margin-top: calc(var(--mu) * 2) }
.mq em { color: var(--acc) }
.mlevel { margin-top: calc(var(--mu) * 9); position: relative; display: flex; align-items: center; gap: calc(var(--mu) * 8) }
.mlevel .mv { font: 800 calc(var(--mu) * 13)/1 var(--caps); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding: calc(var(--mu) * 4) calc(var(--mu) * 8);
  border-radius: calc(var(--mu) * 4); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 50%, transparent) }
.mlevel .md { display: flex; gap: calc(var(--mu) * 3) }
.mlevel .md i { width: calc(var(--mu) * 5); height: calc(var(--mu) * 5); border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent) }
.mlevel .md i.on { background: var(--ink) }
.mlevel.none { font: 500 calc(var(--mu) * 8) var(--mono); letter-spacing: calc(var(--mu) * .8); color: var(--ink2) }
.mthought { font: 500 calc(var(--mu) * 13)/1.18 var(--serif); margin: calc(var(--mu) * 9) 0 0; position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.maudio { margin-top: calc(var(--mu) * 6); font: 500 calc(var(--mu) * 7.5) var(--mono); letter-spacing: calc(var(--mu) * .6); color: var(--ink2); display: flex; align-items: center; gap: calc(var(--mu) * 4); position: relative }
.maudio svg { width: calc(var(--mu) * 9); height: calc(var(--mu) * 9) }
.mfoot { margin-top: auto; padding-top: calc(var(--mu) * 7); border-top: .5px solid color-mix(in srgb, var(--ink) 30%, transparent); display: flex; justify-content: space-between; gap: calc(var(--mu) * 6);
  font: 500 calc(var(--mu) * 7)/1.35 var(--mono); letter-spacing: calc(var(--mu) * .3); color: var(--ink2); position: relative }
.mfoot div { display: flex; flex-direction: column } .mfoot .r { text-align: right }

/* ---------------------------------------------------------------- Druck (CardPrint) */
.print { position: absolute; z-index: 60; pointer-events: none; height: 0 }
.print .slot { position: absolute; left: -5px; right: -5px; top: -2px; height: 4px; border-radius: 4px; transform: scaleX(.02); opacity: 0;
  transition: transform .5s cubic-bezier(.3, .7, .2, 1), opacity .5s; background: color-mix(in srgb, #000 calc(var(--m) * 100%), #0B1410); box-shadow: 0 .5px 0 rgba(255, 255, 255, calc(.55 * (1 - var(--m)))), 0 0 8px 4px rgba(255, 255, 255, calc(.05 * var(--m))) }
.print.slot-open .slot { transform: scaleX(1); opacity: 1 }
.ppile { position: absolute; left: 0; top: 0; width: 100%; z-index: 0 } .print .pclip, .print .slot { z-index: 1 } .ppile .mini { position: absolute; left: 0; transform-origin: 50% 0 }
.pclip { position: absolute; top: 0; left: -60px; right: -60px; height: calc(var(--h) + 60px); overflow: hidden; padding: 0 60px }
.pclip .mini { transform: translateY(-101%) }
.print.printing .pclip .mini { transform: translateY(0); transition: transform 1.9s cubic-bezier(.3, .1, .25, 1) }
.print.still .pclip .mini { transform: none }
.pshade { position: absolute; left: 60px; right: 60px; top: 0; height: 10px; background: linear-gradient(rgba(0, 0, 0, .22), transparent); opacity: 0; transition: opacity .3s }
.print.printing .pshade { opacity: 1 } .print.out .pshade { opacity: 0 }
.glint { position: absolute; top: 0; left: 60px; width: var(--h); height: var(--h); overflow: hidden; border-radius: 10px; pointer-events: none; opacity: 0 }
.glint::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -60%; transform: rotate(15deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent) }
.print.glint .glint { opacity: 1 } .print.glint .glint::before { animation: glint 1s ease-in-out forwards }
@keyframes glint { from { left: -60% } to { left: 120% } }
.print.fly { transform: translate(var(--fx), var(--fy)) scale(.08); opacity: 0; transition: transform .58s cubic-bezier(.5, 0, .3, 1), opacity .58s cubic-bezier(.5, 0, .3, 1) }

/* ---------------------------------------------------------------- Signaturen-Stapel (SignatureStack) */
.stack { max-width: 420px; margin: 4px auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px }
.stk { position: relative; touch-action: pan-y }
.stk .mini { position: absolute; left: 0; transition: transform .45s cubic-bezier(.3, .7, .2, 1), opacity .45s }
.stk .mini.top { cursor: pointer }
.stk-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center }
.stk-bar button, .pill { border: .5px solid var(--ruleStrong); background: none; cursor: pointer; border-radius: 999px; min-height: 40px; padding: 8px 14px;
  font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 6px }
.stk-bar button svg, .pill svg { width: 14px; height: 14px }
.stk-count { font: 500 10px var(--mono); letter-spacing: .14em; color: var(--ink2) }

/* ---------------------------------------------------------------- Sammlung (HomeShelves) */
.shelves { margin-top: 30px; display: flex; flex-direction: column; gap: 34px }
.shead { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 10.5px var(--mono); letter-spacing: .23em; color: var(--ink) }
.shead i { flex: 1; height: .5px; background: var(--rule) } .shead b { font-weight: 500; font-size: 10px; letter-spacing: .14em; color: var(--ink2) }
.strip { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 16px; scroll-snap-type: x proximity; scrollbar-width: thin }
.thumb { flex: none; position: relative; padding: 0; border: 0; background: none; cursor: pointer; scroll-snap-align: start; border-radius: 4.6% / 2.6%; display: block }
.thumb img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 4.6% / 2.6%; box-shadow: 0 1px 1px rgba(0, 0, 0, .16), 0 6px 10px rgba(0, 0, 0, .22); background: var(--pa) }
.tmark { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--p0); color: var(--accT); box-shadow: 0 0 0 1px var(--rule) }
.tmark svg { width: 14px; height: 14px }
.vitrine { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 30px 22px }
.vdeck { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); min-width: 0 }
.vstack { position: relative; width: 100%; aspect-ratio: .634 }
.vstack i, .vcover { position: absolute; top: 0; left: 0; width: 86%; aspect-ratio: 9 / 16; border-radius: 4.6% / 2.6% }
.vstack i { background: var(--pa); border: .5px solid color-mix(in srgb, var(--ink) 25%, transparent); transform-origin: 0 100%; box-shadow: 0 2px 3px rgba(0, 0, 0, .18); transition: transform .4s }
.vstack .sheet2 { transform: translateX(7%) rotate(3.2deg) } .vstack .sheet1 { transform: translateX(3.5%) rotate(1.6deg) }
.vdeck:hover .sheet2 { transform: translateX(10%) rotate(5.2deg) } .vdeck:hover .sheet1 { transform: translateX(5%) rotate(2.6deg) }
.vcover { overflow: hidden; background: var(--pa); box-shadow: 0 1px 1px rgba(0, 0, 0, .16), 0 8px 14px rgba(0, 0, 0, .25); transition: transform .4s }
.vdeck:hover .vcover { transform: translateY(-4px) }
.vcover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.vmeta { padding-top: 12px; width: 86% }
.vname { font: 800 15px/1.15 var(--caps); letter-spacing: .08em; text-transform: uppercase }
.vrule { height: 1px; background: var(--rule); margin: 8px 0 5px; position: relative } .vrule i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc) }
.vcount { font: 500 9.5px var(--mono); letter-spacing: .13em; color: var(--ink2) }

/* ---------------------------------------------------------------- Kette (ProofOfThoughtScreen) */
#v-chain { padding-top: 6px }
.sheet { max-width: 440px; margin: 0 auto; padding: 14px 16px 12px; border-radius: 16px; background: color-mix(in srgb, var(--pa) 62%, var(--panel)); border: .75px solid var(--ruleStrong) }
.stats { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 2px }
.stat { display: flex; align-items: baseline; gap: 6px }
.stat b { font: 800 17px var(--caps); font-variant-numeric: tabular-nums; color: var(--ink) }
.stat span { font: 500 10.5px var(--mono); letter-spacing: .14em; color: var(--ink2) }
.modes { display: flex; justify-content: center; gap: 18px; margin: 10px 0 6px }
.modes button { border: 0; background: none; color: color-mix(in srgb, var(--ink) 45%, transparent); cursor: pointer; width: 44px; height: 32px; display: grid; place-items: center; border-radius: 8px }
.modes button svg { width: 17px; height: 17px }
.modes button[aria-selected="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent) }
.month { display: flex; align-items: center; justify-content: space-between }
.month h2 { margin: 0; font: 800 17px var(--caps); letter-spacing: .12em }
.mnav { width: 44px; height: 36px; border: 0; background: none; color: var(--ink2); cursor: pointer; display: grid; place-items: center }
.mnav svg { width: 16px; height: 16px } .mnav:disabled { opacity: .3; cursor: default }
.cal { display: flex; flex-direction: column; gap: 2px; margin-top: 4px }
.crow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0 6px }
.crow.wd span { text-align: center; font: 500 10px var(--mono); letter-spacing: .1em; color: var(--ink2); padding-bottom: 2px }
.cday { height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; padding: 0;
  border-radius: 8px; font: 500 15px var(--mono); color: color-mix(in srgb, var(--ink) 66%, transparent); position: relative; min-width: 0 }
.cday.has { color: var(--ink); cursor: pointer }
.cday.future { opacity: .45 }
.cday.today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent) }
.cday.sel { background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1.25px var(--ink) }
.cday .dots { display: grid; grid-template-columns: repeat(3, 4.5px); gap: 1px 1.5px; justify-content: center; min-height: 4.5px }
.cday .dots i { width: 4.5px; height: 4.5px; border-radius: 50%; box-sizing: border-box }
.cday .dots i.o { background: none !important; border: 1px solid var(--c) }
.cday .ann { position: absolute; top: 3px; right: 4px; width: 5px; height: 5px; transform: rotate(45deg); background: var(--c); opacity: .9 }
.over { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px }
.orow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; font: 500 10px var(--mono); letter-spacing: .08em; color: var(--ink2) }
.orow b { font: 800 12.5px var(--caps); letter-spacing: .08em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase }
.orow .bars { display: flex; gap: 1.5px } .orow .bars i { width: 3.5px; height: 10px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent) }
.orow .n { text-align: right }
.okv { margin: 8px 2px 0; padding-top: 8px; border-top: .5px solid var(--rule); display: flex; flex-direction: column; gap: 4px }
.okv div { display: flex; justify-content: space-between; gap: 10px; font: 500 10px var(--mono); letter-spacing: .1em; color: var(--ink2); text-transform: uppercase }
.okv div span:last-child { color: var(--ink) }
.chain-row { display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 14px -20px 0; padding: 24px 0 30px; outline: none }
.chain-row::-webkit-scrollbar { display: none }
.cpad { flex: none }
.clink { flex: none; display: flex; align-items: center }
.mbtn { padding: 0; border: 0; background: none; cursor: pointer; scroll-snap-align: center; border-radius: 12px; transition: transform .35s, opacity .35s; opacity: .78; display: block }
.clink.sel .mbtn { opacity: 1; transform: translateY(-4px) }
.strands { display: block; flex: none; overflow: visible }
.strands.stub { -webkit-mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 32%, transparent 50%); mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 32%, transparent 50%) }
.strands.pre path { stroke-dasharray: 1 1; stroke-dashoffset: 1 }
.strands.stub.pre path { stroke-dasharray: .42 1; stroke-dashoffset: .42 }
.strands.grow path { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: grow calc(1.6s / var(--dk, 1)) cubic-bezier(.45, .05, .25, 1) calc(var(--d, 0s) / var(--dk, 1)) forwards }
.strands.grow-stub path { stroke-dasharray: .42 1; animation: growStub calc(1.3s / var(--dk, 1)) cubic-bezier(.3, .1, .25, 1) calc(var(--d, 0s) / var(--dk, 1)) both }
.strands.settle path { transition: stroke calc(1.2s / var(--dk, 1)) ease-in-out }
.dkflow { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: calc(var(--cs) * 9.8 / 252); z-index: 20 }
.mbtn { position: relative }
@keyframes grow { to { stroke-dashoffset: 0 } }
@keyframes growStub { from { stroke-dashoffset: .42 } }
.clink.dk0 .mbtn { transform: translate(calc(var(--cs) * .35), calc(var(--cs) * -.12)); opacity: 0; transition: none }
.clink.dk1 .mbtn { transition: transform calc(.55s / var(--dk, 1)) cubic-bezier(.3, .8, .25, 1.05), opacity calc(.4s / var(--dk, 1)) ease-out }
.chain-empty { max-width: 26em; margin: 30px auto 0; text-align: center; font: italic 500 19px/1.35 var(--serif); color: var(--ink2) }
.hint { text-align: center; font-size: 13px; color: var(--ink2); margin: 6px auto 0; max-width: 32em }
/* Kalender als Band (breite Fenster, CalendarTwentyOne): 4 Reihen × 21 Tage, Wochen durch Haarlinie getrennt, Monatskürzel am 1. */
@media (min-width: 820px) {
  #v-chain .sheet { max-width: 900px; padding: 16px 12px 12px }
  .cal.band { gap: 0 }
  .cal.band .crow { grid-template-columns: repeat(7, minmax(0, 1fr)) 6px repeat(7, minmax(0, 1fr)) 6px repeat(7, minmax(0, 1fr)); gap: 0 }
  .cal.band .crow.mb { height: 13px; align-items: end }
  .cal.band .crow.mb .ml { font: 500 9px/1 var(--mono); letter-spacing: .1em; color: var(--ink2); padding-left: 3px; white-space: nowrap; border-left: 1px solid var(--ruleStrong); height: 13px; display: flex; align-items: center }
  .cal.band .crow.mb .ml:not(.first) { border-left: 0 }
  .cal.band .wk { position: relative }
  .cal.band .wk::before { content: ""; position: absolute; left: -3.5px; top: 4px; bottom: 4px; width: .5px; background: var(--rule) }
  .cal.band .crow.wd .wk::before { display: none }
  .cal.band .cday { height: 44px; font-size: 14px; border-radius: 6px }
}
@media (min-width: 820px) and (max-height: 820px) {
  .cal.band .cday { height: 34px; font-size: 13px }
  .cal.band .crow.mb { height: 11px } #v-chain .sheet { padding-top: 10px } #v-chain .modes { margin: 4px 0 2px }
  .cal.band .cday.m1 { box-shadow: inset 1px 0 0 var(--ruleStrong) }
  .cal.band .cday.today { box-shadow: inset 0 0 0 .5px var(--ink) }
  .cal.band .cday.sel { box-shadow: inset 0 0 0 1px var(--ink) }
}
.cday.out .n { opacity: .55 }
.cday .dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 .75px var(--c) }
.cday .dots i.cur { box-shadow: inset 0 0 0 1px var(--c), 0 0 3px color-mix(in srgb, var(--c) calc(55% + 35% * var(--m)), transparent) }
.cday.sel { background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--ink); border-radius: 6px }


/* ---------------------------------------------------------------- Einstellungen (SettingsV11Screen): gedruckte Felder, Typografie der App */
.list { max-width: 720px; margin: 0 auto; padding: 18px 1px 0 }
.glist { display: flex; flex-direction: column; gap: 12px }
.grp { position: relative; border-radius: 9px; background: var(--panel); background: color-mix(in srgb, var(--p0) 55%, var(--panel)); border: 1px solid var(--rule) }
.grp::after { content: ""; position: absolute; inset: 3px; border-radius: 6px; box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--ink) 9%, transparent); pointer-events: none }
.grp.open { border-color: var(--ruleStrong) }
.ghead { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 74px; border: 0; background: none; cursor: pointer; padding: 8px 16px; text-align: left; color: var(--ink) }
.ghead .gi { width: 22px; height: 22px; flex: none; color: var(--ink2) }
.ghead .tw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.ghead .t { font: 800 17px/1.1 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink) }
.ghead .v { font: 500 12px/1.2 var(--mono); letter-spacing: .14em; color: var(--ink2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ghead > svg:last-child { width: 13px; height: 13px; color: var(--ink2); transition: transform .22s ease-out; flex: none }
.ghead[aria-expanded="true"] > svg:last-child { transform: rotate(90deg) }
.gbody { position: relative; z-index: 1; padding: 0 16px 4px; border-top: .5px solid var(--rule); margin: 0 3px; animation: gin .22s ease-out }
@keyframes gin { from { opacity: 0 } }
.gbody > * + * { border-top: .5px solid var(--rule) }
.trow { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 18px 0 }
.trow .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px }
.tl { font: 500 19px/1.2 var(--caps); letter-spacing: .012em; color: var(--ink) }
.th, .foot { margin: 0; font: 600 17px/1.32 var(--serif); color: var(--ink2) }
.foot { padding: 18px 0 }
.prow { display: flex; flex-direction: column; gap: 12px; padding: 18px 0 }
.srange { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 }
.srtop { display: flex; justify-content: space-between; align-items: baseline } .srtop .sv { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--ink2) }
.srange input { width: 100%; accent-color: var(--ink) }
.glist .seg { display: flex; border: 0; border-radius: 0; padding: 0; gap: 4px; flex-wrap: nowrap; box-shadow: inset 0 -.5px 0 var(--rule) }
.glist .seg button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; border-radius: 6px 6px 0 0; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); background: none; transition: background .22s ease-out, color .22s }
.glist .seg button[aria-checked="true"] { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink) }
@media (max-width: 420px) { .glist .seg button { letter-spacing: .06em; font-size: 11px; padding: 0 4px } }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 28px; border-radius: 999px; margin: 0; cursor: pointer; position: relative; background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink2); transition: background .3s, box-shadow .3s }
.switch::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink2); transition: transform .35s cubic-bezier(.3, .9, .3, 1.05), background .3s }
.switch:checked { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) } .switch:checked::after { transform: translateX(22px); background: var(--p0) }
.switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.lnk { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 18px 0; text-decoration: none; color: var(--ink); border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
  font: 500 19px/1.2 var(--caps); letter-spacing: .012em }
.lnk svg { width: 15px; height: 15px; color: var(--ink2); flex: none }
.lnk small { display: block; margin-top: 4px; font: 600 17px/1.32 var(--serif); letter-spacing: 0; color: var(--ink2) }
.lnk.alert { color: var(--alert) } .lnk.alert svg { color: var(--alert) }
.gbody .rnote { margin: 0; padding: 14px 0; font: 600 17px/1.32 var(--serif); color: var(--ink2) }
.rnote { margin: -6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink2) }
.rnote.status { min-height: 0; margin-top: 0 } .gbody .rnote.status:empty { display: none }
.rnote.bad { color: var(--alert) }
.how { padding: 18px 0; font: 600 17px/1.35 var(--serif); color: var(--ink2) }
.how b, .keys b { display: block; font: 500 19px/1.2 var(--caps); color: var(--ink); margin-bottom: 8px }
.how ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px } .how p { margin: 10px 0 0 }
.keys { padding: 18px 0; display: flex; flex-direction: column; gap: 8px; font: 600 17px var(--serif); color: var(--ink2) }
.keys div { display: flex; align-items: center; gap: 12px }
.keys kbd { min-width: 84px; font: 500 12px var(--mono); letter-spacing: .1em; color: var(--ink); padding: 5px 8px; border-radius: 6px; box-shadow: inset 0 0 0 .75px var(--ruleStrong); text-align: center }
.glist.wide { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start }
.list:has(.glist.wide) { max-width: 1120px }
.gtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.ghead.gtile { position: relative; aspect-ratio: 6 / 5; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 0; padding: 16px; border-radius: 9px; border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--p0) 55%, var(--panel)); transition: border-color .2s, background .2s }
.ghead.gtile::after { content: ""; position: absolute; inset: 3px; border-radius: 6px; box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--ink) 9%, transparent); pointer-events: none }
.ghead.gtile .gi { width: 26px; height: 26px }
.ghead.gtile .tw { flex: none; width: 100% } .ghead.gtile .t { font-size: 15.5px; line-height: 1.15 } .ghead.gtile .v { font-size: 10.5px; white-space: normal }
.ghead.gtile > svg:last-child { position: absolute; top: 16px; right: 14px }
.ghead.gtile[aria-expanded="true"] { border-color: color-mix(in srgb, var(--acc) 70%, transparent); background: var(--panel) } .ghead.gtile[aria-expanded="true"] .gi, .ghead.gtile[aria-expanded="true"] > svg:last-child { color: var(--acc); transform: none }
.ghead.gtile:hover { border-color: var(--ruleStrong) }
.gdetail .grp { position: sticky; top: 16px }
.gdh { margin: 0; padding: 22px 16px 14px; font: 800 17px/1.1 var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); position: relative; z-index: 1 }
.gdetail .gbody { animation: none }
.sfoot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 0 16px; text-align: center }
.sfoot svg.logo { height: 14px; width: auto; color: color-mix(in srgb, var(--ink) 70%, transparent); --lg-coin: #F7931A; margin-bottom: 8px }
.sfoot span { font: 500 10px var(--mono); letter-spacing: .2em; color: var(--ink2); text-transform: uppercase }
.seg { display: inline-flex; border: .5px solid var(--ruleStrong); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap }
.seg button { border: 0; background: none; cursor: pointer; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; padding: 9px 12px; border-radius: 999px; color: var(--ink2); min-height: 34px }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--p0) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--p0); font: 800 15px/1 var(--caps); letter-spacing: .14em; text-transform: uppercase; text-decoration: none }
.btn.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 .75px var(--ruleStrong) }
.btn.alert { background: none; color: var(--alert); box-shadow: inset 0 0 0 .75px color-mix(in srgb, var(--alert) 60%, transparent) }
.btn svg { width: 16px; height: 16px }

/* ---------------------------------------------------------------- Ebenen (Onboarding, Editor, Lesen, Teilen, V4V) */
.layer { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, #000 calc(38% + 20% * var(--m)), transparent);
  animation: fadeIn .25s ease; padding: max(12px, env(safe-area-inset-top, 0px)) 0 0 }
@keyframes fadeIn { from { opacity: 0 } }
.panel { width: min(560px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; background: var(--panel); color: var(--ink); border-radius: 20px 20px 0 0; padding: 18px 20px max(22px, env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); animation: up .35s cubic-bezier(.3, .7, .2, 1) }
@keyframes up { from { transform: translateY(30px); opacity: 0 } }
@media (min-width: 700px) { .layer { align-items: center } .panel { border-radius: 20px } }
.ptop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px }
.ptop h2 { margin: 0; font: 800 17px var(--caps); letter-spacing: .14em; text-transform: uppercase }
.x { width: 40px; height: 40px; border-radius: 50%; border: .5px solid var(--ruleStrong); background: none; cursor: pointer; display: grid; place-items: center; color: var(--ink); flex: none; padding: 0 }
.x svg { width: 16px; height: 16px }
.thoughts { display: flex; flex-direction: column; gap: 10px }
.thoughts textarea { width: 100%; min-height: 84px; resize: vertical; border-radius: 12px; border: .75px solid var(--ruleStrong); background: color-mix(in srgb, var(--p0) 60%, transparent); color: var(--ink);
  padding: 12px 14px; font: 500 20px/1.3 var(--serif) }
.thoughts textarea::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent); font-style: italic }
.trow { position: relative }
.trow .del { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; background: none; color: var(--ink2); cursor: pointer; display: grid; place-items: center; padding: 0 }
.trow .del svg { width: 16px; height: 16px }
.pfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap }
.pfoot .cnt { font: 500 10px var(--mono); letter-spacing: .12em; color: var(--ink2) }
/* Onboarding */
.onb { position: fixed; inset: 0; z-index: 90; background: var(--p0); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: max(24px, env(safe-area-inset-top, 0px)) 26px max(28px, env(safe-area-inset-bottom, 0px)); animation: fadeIn .35s }
.onb .logo { height: 30px; width: auto; color: var(--ink); --lg-coin: #F7931A }
.onb .kick { font: 500 10.5px var(--mono); letter-spacing: .22em; color: var(--ink2); margin-top: 12px }
.onb h1 { font: 600 clamp(38px, 10vw, 54px)/1.02 var(--serif); margin: 34px 0 16px; white-space: pre-line; letter-spacing: -.01em }
.onb p { max-width: 26em; margin: 0 auto; color: var(--ink2); font-size: 17px }
.onb .small { font: 500 11px var(--mono); letter-spacing: .12em; color: var(--ink2); margin-top: 22px; text-transform: uppercase }
.onb .steps { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 18px; max-width: 26em; text-align: left }
.onb .steps li { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px }
.onb .steps b { font: 800 15px var(--caps); letter-spacing: .14em; grid-column: 2 }
.onb .steps i { grid-row: 1 / 3; font: 300 30px/1 var(--serif); font-style: normal; color: var(--acc) }
.onb .steps span { grid-column: 2; color: var(--ink2); font-size: 16px; line-height: 1.45 }
.onb .go { margin-top: 36px; min-width: 240px }
.onb .dots { display: flex; gap: 6px; margin-top: 20px } .onb .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule) } .onb .dots i.on { background: var(--ink) }
/* Ganz lesen */
/* V4V */
.v4v .qrbox { width: min(240px, 70vw); aspect-ratio: 1; margin: 6px auto 0; border-radius: 16px; overflow: hidden; background: #fff; display: grid; place-items: center }
.v4v .qrbox img { width: 100%; height: 100%; display: block }
.v4v .addr { margin: 12px auto 0; font: 13px/1.45 var(--mono); word-break: break-all; text-align: center; max-width: 30em; user-select: all }
.v4v p { color: var(--ink2); margin: 0 0 14px; font-size: 15.5px }
.v4v .row2 { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap }
.v4v .seg { display: flex; width: max-content; margin: 0 auto 14px }

.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--p0);
  padding: 10px 16px; border-radius: 999px; font: 600 14px var(--sans); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 99; max-width: calc(100vw - 32px); text-align: center }
.toast.on { opacity: 1; transform: translate(-50%, 0) }

@media (max-width: 760px) {
  .nav-btn { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0 }
  .view { padding: 0 14px }
  .chain-row { margin-left: -14px; margin-right: -14px }
}
@media (max-width: 430px) {
  .tab-today { padding: 0 10px } .tab-today .logo { height: 21px }
  .dateline { font-size: 9px; letter-spacing: .05em }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important }
}
/* Treffer nur auf der sichtbaren Seite (backface-visibility verdeckt, nimmt aber keine Tipps weg) */
figure.flipped .front, figure.flipped .front * { pointer-events: none !important }
figure:not(.flipped) .back { pointer-events: none }
.iosteps { margin: 12px 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px }
.iosteps li::marker { font: 500 13px var(--mono); color: var(--accT) }
/* Sprachnachricht im Gedankenfeld (InlineRecordingView, ThoughtAudioPlayer) */
.fld.has-aud .txt span { font-size: calc(var(--u) * 16) }
.fld.recording .mic { background: #D0342C; color: #fff; animation: recpulse 1.4s ease-in-out infinite }
@keyframes recpulse { 50% { box-shadow: 0 0 0 calc(var(--u) * 5) color-mix(in srgb, #D0342C 25%, transparent) } }
.fld.recording .txt { display: none }
.rinfo { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * 8); margin-left: calc(var(--u) * 12); font: 500 calc(var(--u) * 12) var(--mono); color: var(--ink); min-width: 0 }
.rdot { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: #D0342C; flex: none }
.rlv { flex: 1; height: calc(var(--u) * 4); border-radius: 4px; background: color-mix(in srgb, var(--ink) 15%, transparent); overflow: hidden; min-width: calc(var(--u) * 30) }
.rlvl { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.08); transition: transform .15s }
.aud { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 6); margin-left: calc(var(--u) * 8) }
.aud button { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; display: grid; place-items: center; color: var(--ink); padding: 0; position: relative }
.aud button::after { content: ""; position: absolute; inset: -6px }
.aud .ap { box-shadow: inset 0 0 0 calc(var(--u) * 1.2) color-mix(in srgb, var(--ink) 55%, transparent) }
.aud button svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13) }
.aud .atr { width: calc(var(--u) * 34); height: calc(var(--u) * 3); border-radius: 3px; background: color-mix(in srgb, var(--ink) 18%, transparent); overflow: hidden }
.aud .atr i { display: block; height: 100%; width: 0; background: var(--ink) }
.aud .adur { font: 500 calc(var(--u) * 11) var(--mono); color: var(--ink2) }
.aud .adel { color: var(--ink2) }
.rplay { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 .75px var(--ruleStrong); --u: 1.25px }
.rplay > svg { width: 16px; height: 16px; color: var(--ink2) } .rplay .rpl { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2) }
.rplay .aud { margin-left: auto } .rplay .aud .atr { width: 90px }
/* Feiertagskarten (HolidayLibrary): Deckblatt, Plätze, Marke auf der Minikarte */
.hcover { background: linear-gradient(165deg, var(--pa), var(--pb)) }
.hcover .hnum { position: absolute; right: 8%; bottom: 6%; font: 300 clamp(48px, 16vw, 90px)/1 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--acc) }
.hlab { position: absolute; left: 8%; right: 8%; top: 7%; display: flex; flex-direction: column; gap: 4px; color: var(--ink) }
.hlab .hlogo { height: 9px; width: 66px; align-self: flex-start; color: var(--ink); --lg-coin: var(--acc) }
.hlab b { font: 800 clamp(12px, 3.6vw, 17px)/1.05 var(--caps); letter-spacing: .1em; margin-top: 4px }
.hlab span { font: 500 8.5px/1.4 var(--mono); letter-spacing: .14em; color: var(--ink2) }
.slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; margin-top: 6px }
.slotgrid .slot { aspect-ratio: 9 / 16; border-radius: 8px; border: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 .75px var(--rule); color: color-mix(in srgb, var(--ink) 55%, transparent) }
.slotgrid .slot b { font: 800 13px/1 var(--caps); letter-spacing: .08em }
.slotgrid .slot span { font: 500 9px var(--mono); letter-spacing: .1em }
.slotgrid .slot.ok { cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .2) }
.slotgrid .slot.ok img { width: 100%; height: 100%; object-fit: cover; display: block }
.mann { position: absolute; left: calc(var(--mu) * 14); top: calc(var(--mu) * 14); padding: calc(var(--mu) * 3) calc(var(--mu) * 6); border-radius: calc(var(--mu) * 4);
  font: 500 calc(var(--mu) * 8) var(--mono); letter-spacing: calc(var(--mu) * .8); background: var(--acc); color: var(--p0); z-index: 3 }
/* Teilen (CardShareSheet) */
.ushare { border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; min-height: 40px;
  font: 500 10.5px var(--mono); letter-spacing: .16em; color: var(--ink2) }
.ushare svg { width: 14px; height: 14px }
.srow2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chipb { font: 600 13px/1 var(--caps); letter-spacing: .06em; text-transform: uppercase; padding: 9px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; color: var(--ink2); cursor: pointer; transition: background .15s, color .15s, border-color .15s }
.chipb[aria-pressed="true"] { background: var(--ink); color: var(--p0); border-color: var(--ink) }
.sprev { display: grid; place-items: center; min-height: 240px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 10px; transition: opacity .2s }
.sprev.busy { opacity: .45 }
.sprev img { max-width: 100%; max-height: min(58svh, 560px); display: block; border-radius: 6px }
.share .row2 { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap }
.shint { text-align: center; margin-top: 10px }
.sharebtn { margin-top: 16px }
.mann { top: auto; bottom: calc(var(--mu) * 66) }

/* Bedienknöpfe für Tastatur und Screenreader: unsichtbar, bis sie den Fokus haben */
.actl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center }
.srf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0 }
.srf:focus-visible { position: static; width: auto; height: auto; clip: auto; overflow: visible; padding: 8px 14px; border-radius: 999px; border: .75px solid var(--ruleStrong);
  background: var(--panel); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); min-height: 40px }
.chain-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: .5px solid var(--rule); flex-wrap: wrap }
.chain-acts:empty { display: none }
.chain-acts .ca-sel { flex: 1 1 auto; min-width: 0; font: 500 10px/1.3 var(--mono); letter-spacing: .12em; color: var(--ink2); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chain-acts .pill { min-height: 34px; padding: 6px 12px }
#v-chain .chain-row { padding: 18px 0 22px }
body[data-view="chain"] .app { padding-bottom: 0 }
@media (min-width: 820px) { #v-chain .chain-acts { grid-column: 1 / -1 } }
.tab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none }

/* Audit 01.11. (Optik) */
.deck figure.reading .tilt { transform: none !important; transition: none }
.deck.lock figure:not(.on) { opacity: .3 }
figure:not(.flipped) .back { visibility: hidden; transition: visibility 0s .62s }
figure.flipped .back { visibility: visible }
.face::before { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) calc(15% + 13% * var(--m)), transparent) }
.bk-head .bk-logo { display: block; height: calc(var(--u) * 9); width: auto; color: var(--ink); --lg-coin: var(--acc); margin-bottom: calc(var(--u) * 6) }
.bk-head { top: calc(var(--u) * 28) }
.vitrine { align-items: start }
.vname { min-height: 2.3em; text-wrap: balance }
.orow { grid-template-columns: 28px minmax(0, 1fr) auto 38px; gap: 6px }
.orow b { font-size: 11.5px; letter-spacing: .05em }
.orow .bars { gap: 1px } .orow .bars i { width: 3px }
body.printing #shelves { opacity: 0; transition: opacity .3s }
.under.flipped .ushare { visibility: hidden }
#stack { margin-top: 18px } .stack .stk-bar + .stk, .stack .stk + .stk-bar { margin-top: 6px }
.share .seg button { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px }
.onb .small, .onb p { text-wrap: balance }
@media (min-width: 900px) {
  .note, .ushare, .mhint, .sbar, .sbar button, .fanbar .kick, .stk-count, .pill, .stk-bar button { font-size: 12px }
  .dateline { font-size: 10px }
  .hint { font-size: 14px }

/* Original im Satzbild (CardFitter.originalLayout) */
.ob-measure { position: absolute; left: -9999px; top: 0; width: 360px; --u: 1px; visibility: hidden; pointer-events: none }
.ob-box { width: calc(var(--u) * 286) }
.ob-row { display: flex; align-items: baseline; flex-wrap: nowrap }
.ob-col { display: flex; flex-direction: column }
.f-orig { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 64); height: calc(var(--u) * (var(--ch) + 26)); z-index: 5; opacity: 0; pointer-events: none;
  transition: opacity .55s ease-in-out;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--pa) 0%, transparent) 0, var(--pa) calc(var(--u) * 26), var(--pa) 100%) }
.f-orig.on { opacity: 1; pointer-events: auto }
.f-orig .ob-box { position: absolute; left: calc(var(--u) * 26); bottom: 0 }
.front.orig-on .f-other { opacity: 0 }

/* ---------------------------------------------------------------- Karte aus der Kette (ProofCardOverlay) */
.lift { position: fixed; inset: 0; z-index: 80 }
.lift-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, calc(.2 + .45 * var(--m))); opacity: 0; transition: opacity .2s ease-out }
.lift.on .lift-dim { opacity: 1 }
.lift-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 24px }
.lift-hold { position: relative; flex: none; transition: transform .45s cubic-bezier(.3, .8, .3, 1), opacity .2s; touch-action: pan-y; will-change: transform }
.lcard { width: 100%; height: 100%; aspect-ratio: auto; cursor: pointer; outline: none }
.lcard .flipper { transition: transform .5s cubic-bezier(.35, .1, .25, 1) }
.lcard.flipped .flipper { transform: rotateY(-180deg) }
.lcard:focus-visible { outline: 2px solid #fff; outline-offset: 4px }
.lift-handle { position: absolute; top: 14px; left: 50%; width: 88px; height: 44px; margin-left: -44px; border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .2s }
.lift-handle::before { content: ""; position: absolute; left: 26px; right: 26px; top: 20px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, calc(.35 + .0 * var(--m))) }
.lift.on .lift-handle { opacity: 1 }
.lift-nav { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .25); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .2s }
.lift-nav svg { width: 18px; height: 18px } .lift-nav.l { left: max(16px, calc(50% - 360px)) } .lift-nav.r { right: max(16px, calc(50% - 360px)) }
.lift.on .lift-nav { opacity: .85 }
@media (pointer: coarse), (max-width: 700px) { .lift-nav { display: none } }
.rob-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 92) calc(var(--u) * 18) calc(var(--u) * 8) }
.rob-q { padding: 0 calc(var(--u) * 6) }
.rob-q .caps { display: block; font: 800 calc(var(--u) * 28)/.94 var(--caps); letter-spacing: .01em; text-transform: uppercase; color: var(--ink) }
.rob-q .rest { display: block; margin-top: calc(var(--u) * 5); font: 600 calc(var(--u) * 31)/1.18 var(--serif); color: var(--ink) }
.rob-q em { font-style: italic; color: var(--acc) }
.rob-sp { flex: 1 1 calc(var(--u) * 10); min-height: calc(var(--u) * 8) }
.rob-val { align-self: center; width: calc(var(--u) * 268); height: calc(var(--u) * 56); border-radius: calc(var(--u) * 12); display: grid; place-items: center; position: relative;
  background: color-mix(in srgb, var(--pa) 88%, transparent); box-shadow: inset 0 0 0 calc(var(--u) * 1.2) color-mix(in srgb, var(--ink) 55%, transparent) }
.rob-val::after { content: ""; position: absolute; inset: calc(var(--u) * 5); border-radius: calc(var(--u) * 8); box-shadow: inset 0 0 0 calc(var(--u) * .7) color-mix(in srgb, var(--ink) 28%, transparent) }
.rob-val span { font: 800 calc(var(--u) * 26)/1 var(--caps); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis }
.rob-val.none { opacity: .7 } .rob-val.none span { font-size: calc(var(--u) * 15); letter-spacing: .18em; color: color-mix(in srgb, var(--ink) 62%, transparent) }
.rob-trk { position: relative; height: calc(var(--u) * 30); margin: calc(var(--u) * 8) calc(var(--u) * 6) 0 }
.rob-trk .rail, .rob-trk .fill { position: absolute; left: calc(var(--u) * 9); right: calc(var(--u) * 9); top: 50%; height: calc(var(--u) * 1.5); margin-top: calc(var(--u) * -.75); background: color-mix(in srgb, var(--ink) 26%, transparent) }
.rob-trk .fill { right: auto; width: 0; background: color-mix(in srgb, var(--ink) 75%, transparent) } .rob-trk.set .fill { width: calc((100% - var(--u) * 18) * var(--v)) }
.rob-trk .dot { position: absolute; top: 50%; left: calc(var(--u) * 9 + (100% - var(--u) * 18) * var(--k)); width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin: calc(var(--u) * -4) 0 0 calc(var(--u) * -4); border-radius: 50%; background: var(--pa); box-shadow: inset 0 0 0 calc(var(--u) * 1.2) color-mix(in srgb, var(--ink) 50%, transparent) }
.rob-trk .knob { position: absolute; top: 50%; left: calc(var(--u) * 9 + (100% - var(--u) * 18) * var(--v)); width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin: calc(var(--u) * -10) 0 0 calc(var(--u) * -10); border-radius: 50%; background: var(--ink); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 2) rgba(0, 0, 0, .25); opacity: .3 }
.rob-trk.set .knob { opacity: 1 }
.rob-th { margin: calc(var(--u) * 14) 0 0; padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); min-height: calc(var(--u) * 52);
  background: color-mix(in srgb, var(--p0) calc(72% - 17% * var(--m)), transparent); box-shadow: inset 0 0 0 calc(var(--u) * .75) color-mix(in srgb, var(--ink) 22%, transparent) }
.rob-tx { max-height: calc(var(--u) * 124); overflow: auto } .rob-th.aud .rob-tx { max-height: calc(var(--u) * 88) }
.rob-tx p, .rob-vo { margin: 0 0 calc(var(--u) * 4); font: 500 calc(var(--u) * 18)/1.28 var(--serif); color: var(--ink); white-space: pre-wrap } .rob-vo { color: color-mix(in srgb, var(--ink) 62%, transparent) }
.rob .rplay { --u: inherit; margin-top: calc(var(--u) * 8); padding: 0; box-shadow: none; gap: calc(var(--u) * 8) } .rob .rplay > svg, .rob .rplay .rpl { display: none }
.rob-slip { margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 15) calc(var(--u) * 14) calc(var(--u) * 11); position: relative; color: var(--ink);
  background: linear-gradient(rgba(255, 255, 255, calc(.32 - .275 * var(--m))), rgba(255, 255, 255, calc(.32 - .275 * var(--m)))), repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px calc(var(--u) * 3)), var(--pa);
  border-radius: 0 0 calc(var(--u) * 4) calc(var(--u) * 4);
  -webkit-mask: radial-gradient(circle at calc(var(--u) * 4.5) 0, transparent calc(var(--u) * 2.4), #000 calc(var(--u) * 2.5)) 0 0 / calc(var(--u) * 9) 100% repeat-x;
  mask: radial-gradient(circle at calc(var(--u) * 4.5) 0, transparent calc(var(--u) * 2.4), #000 calc(var(--u) * 2.5)) 0 0 / calc(var(--u) * 9) 100% repeat-x;
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, calc(.12 + .23 * var(--m)))) }
.rs-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 6) }
.rs-head b { font: 800 calc(var(--u) * 13.5)/1 var(--caps); letter-spacing: .12em }
.rs-logo { height: calc(var(--u) * 7); width: auto; color: color-mix(in srgb, var(--ink) 75%, transparent); --lg-coin: color-mix(in srgb, var(--ink) 75%, transparent) }
.rs-rule { margin: calc(var(--u) * 6) 0; height: calc(var(--u) * 3); border-top: max(.5px, calc(var(--u) * .8)) solid color-mix(in srgb, var(--ink) 45%, transparent); border-bottom: max(.5px, calc(var(--u) * .5)) solid color-mix(in srgb, var(--ink) 25%, transparent) }
.rs-row { display: flex; align-items: baseline; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 4) }
.rs-row .rk { font: 500 calc(var(--u) * 7)/1 var(--mono); letter-spacing: .18em; color: var(--ink2) }
.rs-row i { flex: 1; border-bottom: calc(var(--u) * 1) dotted color-mix(in srgb, var(--ink) 32%, transparent); transform: translateY(calc(var(--u) * -2)) }
.rs-row .rv { font: 500 calc(var(--u) * 10)/1 var(--mono); color: color-mix(in srgb, var(--ink) 92%, transparent); white-space: nowrap }
.rs-hash { display: block; margin-top: calc(var(--u) * 7); border: 0; background: none; padding: 0; font: 400 calc(var(--u) * 6.8)/1.4 var(--mono); letter-spacing: .14em; color: var(--ink2); cursor: pointer; text-align: left; word-break: break-all }
.rob-again { align-self: flex-end; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: calc(var(--u) * 4); height: calc(var(--u) * 30); padding: 0 0 0 calc(var(--u) * 12); font: 500 calc(var(--u) * 9)/1 var(--mono); letter-spacing: .15em; color: var(--ink) }
.rob-again svg { width: calc(var(--u) * 8); height: calc(var(--u) * 8) }
.mbtn.lifted { opacity: 0 !important; transition: none }
.clink { position: relative }
canvas.pulse { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 20; border-radius: calc(var(--cs) * 11.55 / 252) }
.chain-row { -webkit-mask: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%) }
.chain-row.drag { scroll-snap-type: none; cursor: grabbing } .chain-row { cursor: grab }

/* 02.11. (Benny: „viel Leerraum, alles gequetscht“): Überblick breit in zwei Spalten, Balken füllen ihren Platz */
@media (min-width: 820px) {
  .over { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 4), auto); grid-auto-flow: column; column-gap: 56px; row-gap: 12px; padding: 6px 4px 4px }
  .orow { grid-template-columns: 38px 158px minmax(80px, 1fr) 48px; gap: 14px; font-size: 11.5px }
  .orow b { font-size: 15px; letter-spacing: .07em }
  .orow .bars { display: grid; grid-template-columns: repeat(21, 1fr); gap: 2px }
  .orow .bars i { width: auto; height: 15px; border-radius: 1.5px }
  .okv { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 8px; margin-top: 18px; padding-top: 16px }
  .okv div { font-size: 11px }
}