/* Vinum v8 „Maison" — Kellerdunkel, Goldfolie, Etikettenpapier. Editorial statt Karten-Raster. Token-Quelle: design/tokens.json */
:root {
  --cellar: #0A0807; --cellar-2: #14100E; --cellar-3: #1D1714; --cellar-4: #27201B;
  --paper: #EFE5D2; --paper-2: #E6D9BF; --paper-ink: #1E1512; --paper-ink-60: rgba(30,21,18,0.62); --paper-ink-40: rgba(30,21,18,0.42); --paper-line: rgba(30,21,18,0.18);
  --ivory: #F3ECDD; --ivory-70: rgba(243,236,221,0.72); --ivory-60: rgba(243,236,221,0.60); --ivory-45: rgba(243,236,221,0.45); --ivory-30: rgba(243,236,221,0.30); --ivory-15: rgba(243,236,221,0.15);
  --gold: #C9A24E; --gold-hi: #EBD08E; --gold-lo: #8E6F2E; --gold-foil: linear-gradient(105deg, #8E6F2E 0%, #E2C377 30%, #F5E6B8 48%, #C9A24E 62%, #8E6F2E 100%);
  --burgundy: #6B1F2E; --burgundy-hi: #9C3348; --rose: #D39AA3; --rose-hi: #E8C3C9; --slate: #5E6472; --coral: #E0684F; --violet: #6D5BD0;
  --line: rgba(243,236,221,0.09); --line-2: rgba(243,236,221,0.05); --line-gold: rgba(201,162,78,0.42); --line-gold-2: rgba(201,162,78,0.2);
  --font-ui: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1);
  --r-card: 14px; --r-sm: 8px; --r-pill: 999px;
  --cat-sparkling: #E6C77A; --cat-white: #D9CA84; --cat-rose: #E0A0AA; --cat-red: #B84A5E; --cat-sweet: #E0A84F; --cat-fortified: #B8825C; --cat-orange: #C8783A;
  --ambient: 201,162,78;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--cellar); color: var(--ivory); font-family: var(--font-ui); font-size: 14px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; }
body { min-height: 100dvh; }
#app { position: relative; min-height: 100dvh; overflow-x: hidden; }
/* Ambient: langsame Lichtfelder in der Farbe der Kategorie + Bild-Layer + Vignette + Korn */
#ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#ambient i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .32; mix-blend-mode: screen; will-change: transform; transition: background 1.6s var(--ease); }
#ambient i:nth-child(1) { left: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(var(--ambient),0.55), transparent 62%); animation: drift1 26s ease-in-out infinite alternate; }
#ambient i:nth-child(2) { right: -30vmax; top: 10vh; background: radial-gradient(circle, rgba(107,31,46,0.55), transparent 62%); animation: drift2 31s ease-in-out infinite alternate; }
#ambient i:nth-child(3) { left: 10vw; bottom: -40vmax; background: radial-gradient(circle, rgba(109,91,208,0.28), transparent 62%); animation: drift3 37s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.12) } } @keyframes drift2 { to { transform: translate(-12vw, 12vh) scale(.92) } } @keyframes drift3 { to { transform: translate(8vw, -10vh) scale(1.08) } }
/* Ein bewegtes Element pro Screen (2.6): bringt der Screen etwas Eigenes mit — Print-Siegel,
   Explore-Karte, Rechenschau, Flasche auf der Bühne —, halten die Hintergrundlichter an.
   setScreen setzt data-motion, kein Screen muss daran denken. */
html[data-motion="focus"] #ambient i { animation-play-state: paused; }
#bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center top; opacity: 0; transition: opacity 1.4s var(--ease); transform: scale(1.05); }
#bg.on { opacity: 1; }
#bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,7,0.55) 0%, rgba(10,8,7,0.82) 34%, var(--cellar) 66%); }
#vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 30%, transparent 50%, rgba(0,0,0,0.6) 100%); }
#grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 1; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Das Korn war bis v38 animiert (1,6 s, endlos). Es ist Textur, keine Bewegung — und es lief auf
   JEDEM Screen zusätzlich zu allem anderen. „Ein bewegtes Element pro Screen" (2.6): jetzt steht es. */
#screen { position: relative; z-index: 2; padding: calc(var(--safe-top) + 54px) 22px calc(var(--safe-bottom) + 124px); max-width: 540px; margin: 0 auto; }
#screen.full { padding: 0; max-width: none; }

/* ---------- Typografie ---------- */
.serif { font-family: var(--font-serif); }
.num { font-variant-numeric: tabular-nums; }
.label { font-size: 10px; letter-spacing: 0.22em; color: var(--ivory-45); text-transform: uppercase; font-weight: 600; }
.label.gold { color: var(--gold); }
.meta { font-size: 12.5px; color: var(--ivory-60); line-height: 1.55; }
h1 { font-family: var(--font-serif); font-size: 40px; font-weight: 500; line-height: .98; margin: 0; letter-spacing: -0.01em; }
h1 em, h2 em, .serif em { font-style: italic; font-weight: 500; color: var(--gold-hi); }
h2 { font-family: var(--font-serif); font-size: 30px; font-weight: 500; margin: 0; line-height: 1.02; letter-spacing: -0.005em; }
h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.1; margin: 0; }
p { margin: 0; line-height: 1.6; }
a { color: var(--gold); }
.small { font-size: 12px; } .muted { color: var(--ivory-45); } .center { text-align: center; }
.foil { background: var(--gold-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bignum { font-family: var(--font-serif); font-size: 42px; font-weight: 600; line-height: 1; background: linear-gradient(180deg, #F3E3B0, #C9A24E 65%, #A9853A); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Layout-Bausteine ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
/* Auf dem Telefon quetschten sich Kopfzeile und Aktionen (Export · Import · + Flasche) in eine Reihe — dort rutschen sie jetzt darunter. */
@media (max-width: 470px) { .top > .row { width: 100%; margin-top: 4px; justify-content: flex-start; } }
/* Waagerechte Leisten sagen jetzt, dass rechts noch etwas kommt. */
.kpis, .chips.scrollx { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%); }
.top > div:first-child { flex: 1 1 auto; min-width: 0; }
.top > .btn.ghost.back, .btn.ghost.back { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ivory-70); padding: 0; }
.top > .btn.ghost { width: auto; flex: 0 0 auto; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.row > input, .row > select, .row > textarea { min-width: 0; }   /* sonst drueckt ein Eingabefeld den Knopf daneben aus dem Bild */
.grow { flex-grow: 1; min-width: 0; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .spread > * { min-width: 0; }
/* Sicherheitsnetz gegen echte Daten: ein einzelner sehr langer Name (Erzeuger, Lage, Lagerort) darf keine Zeile
   aus dem Bildschirm schieben. break-word greift nur, wenn es sonst überliefe — im Normalfall unsichtbar. */
#screen, .sheet-in, .cardx { overflow-wrap: break-word; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); margin: 6px 0; }
.rule { display: flex; align-items: center; gap: 12px; color: var(--gold); opacity: .9; margin: 6px 0 2px; }
.rule::before, .rule::after { content: ""; flex-grow: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); }
.rule span { font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; }
.avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-gold); background: radial-gradient(circle at 30% 30%, rgba(201,162,78,0.28), rgba(201,162,78,0.04)); font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--gold-hi); flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 20px -10px rgba(201,162,78,0.5); cursor: pointer; }
.avatar.v { border-color: rgba(211,154,163,0.6); color: var(--rose); background: radial-gradient(circle at 30% 30%, rgba(211,154,163,0.28), rgba(211,154,163,0.04)); }

/* Karten: Glas mit Lichtsaum, wenig Rahmen */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--r-card); background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.03)), rgba(20,15,13,0.80); border: 1px solid var(--line); box-shadow: 0 30px 50px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06); }
/* KEIN BLUR UNTER TEXT (2.6). Bis v38 lagen Karte, Ask-Leiste und Entdecken-Kachel als
   durchsichtige Glasflächen über den driftenden Hintergrundlichtern — Text auf wanderndem Grund.
   Apples eigener Liquid-Glass-Rückzug ist der aktuellste Beleg, dass Spektakel Wertigkeit
   zerstört. Jetzt steht Text auf festem Grund; Blur bleibt nur dort, wo kein Fließtext liegt:
   Tab-Leiste und Sheet-Hintergrund. Nebenbei: ein Dutzend backdrop-filter-Ebenen in einer langen
   Liste kostet auf dem iPhone spürbar Scroll-Leistung. */
.card.gold { border-color: var(--line-gold-2); background: linear-gradient(160deg, rgba(201,162,78,0.14), rgba(201,162,78,0.03) 65%), rgba(20,15,13,0.80); }
.card.tap { cursor: pointer; transition: transform .25s var(--ease), border-color .25s; } .card.tap:active { transform: scale(.985); border-color: var(--line-gold); }
.card.prog { gap: 14px; }
.list-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--r-card); background: rgba(255,255,255,0.03); border: 1px solid var(--line); cursor: pointer; transition: transform .22s var(--ease), border-color .22s; }
.list-item:active { transform: scale(.985); border-color: var(--line-gold); }
.option { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-card); background: rgba(255,255,255,0.03); border: 1px solid var(--line); cursor: pointer; transition: all .2s var(--ease); }
.option .t { font-family: var(--font-serif); font-size: 21px; font-weight: 600; }
.option .s { font-size: 12px; color: var(--ivory-45); margin-top: 2px; }
.option.on { border-color: var(--gold); background: rgba(201,162,78,0.10); } .option:active { transform: scale(.985); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 8px 15px; border-radius: var(--r-card); border: 1px solid var(--line-gold-2); background: linear-gradient(180deg, rgba(201,162,78,0.12), rgba(201,162,78,0.02)); cursor: pointer; transition: transform .2s var(--ease), border-color .2s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
.tile:active { transform: scale(.96); border-color: var(--gold); }
.tile svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-hi); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tile span { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); font-weight: 600; }

/* Chips, Buttons, Inputs */
.chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips.scrollx { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips.scrollx .chip { flex: 0 0 auto; }
.chip { padding: 8px 14px; border-radius: var(--r-pill); font-size: 12.5px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--ivory-70); cursor: pointer; user-select: none; min-height: 36px; font-family: inherit; font-weight: 500; transition: all .2s var(--ease); letter-spacing: 0.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.chip:active { transform: scale(.95); }
.chip.on { background: rgba(201,162,78,0.16); border-color: var(--gold); color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 16px -10px rgba(201,162,78,0.8); }
.chip.warn.on { background: rgba(224,104,79,0.12); border-color: var(--coral); color: var(--coral); }
.chip.on .muted { color: var(--gold); }
.btn { white-space: normal; line-height: 1.2; text-align: center; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 54px; height: auto; padding-block: 8px; border-radius: var(--r-pill); border: 1px solid var(--line-gold); background: rgba(201,162,78,0.06); color: var(--gold-hi); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-family: inherit; cursor: pointer; width: 100%; transition: transform .2s var(--ease), background .3s; overflow: hidden; }
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(180deg, #E8CB80, #C9A24E 55%, #A9853A); color: #1E1512; border: none; box-shadow: 0 18px 36px -16px rgba(201,162,78,0.7), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.15); }
/* Der Glanz lief bis v38 endlos über jeden Primärknopf — auf Screens mit Siegel oder Karte war er
   das dritte bewegte Element. „Motion for motion's sake is not usability" (2.6): entfernt. */
.btn.ghost { background: transparent; border-color: transparent; color: var(--ivory-60); height: 44px; letter-spacing: 0.08em; text-transform: none; font-size: 13px; font-weight: 500; }
.btn.burgundy { background: linear-gradient(180deg, #86293B, #5A1A27); border: none; color: var(--ivory); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 18px 36px -18px rgba(107,31,46,0.9); }
.btn:disabled { opacity: 0.5; }
.row > .btn { font-size: 10px; letter-spacing: 0.1em; padding: 0 8px; min-width: 0; }
input, textarea { width: 100%; padding: 15px 18px; border-radius: var(--r-sm); border: 1px solid var(--line); border-bottom-color: var(--line-gold); background: rgba(255,255,255,0.035); color: var(--ivory); font-family: var(--font-serif); font-size: 19px; outline: none; transition: border-color .25s, box-shadow .25s; }
input::placeholder, textarea::placeholder { color: var(--ivory-30); font-family: var(--font-serif); }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,78,0.10); }
textarea { min-height: 84px; resize: vertical; font-size: 16px; }
.ask { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: var(--r-pill); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)), rgba(20,15,13,0.80); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 40px -30px rgba(0,0,0,0.9); }
.ask input { background: transparent; border: none; padding: 6px 0; box-shadow: none; font-size: 17px; } .ask input:focus { box-shadow: none; }
.ask .btn { flex-shrink: 0; letter-spacing: 0.1em; width: auto; height: 40px; padding: 0 16px; font-size: 10.5px; }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.seg button { flex: 1; min-height: 36px; border: none; border-radius: var(--r-pill); background: transparent; color: var(--ivory-60); font-family: inherit; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all .2s var(--ease); }
.seg button.on { background: rgba(201,162,78,0.16); color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
/* Feinschliff: Umschalter, Filterpillen, Passungsring und Nachladen bekommen dieselbe Handschrift
   wie der Rest — ruhige Bewegung, Gold als einziger Akzent. prefers-reduced-motion schaltet alles ab. */
.seg { position: relative; }
.seg button { transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.seg button.on { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px -14px rgba(201,162,78,0.9); }
.seg button:active { transform: scale(.97); }
.chip[data-unset] { animation: chipin .3s var(--ease-out) both; }
@keyframes chipin { from { opacity: 0; transform: translateY(-4px) scale(.94) } to { opacity: 1; transform: none } }
.chip[data-facet].on::after, .chip#matchB.on::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 12px; height: 2px; border-radius: 1px; transform: translateX(-50%); background: var(--gold-hi); animation: bandin .35s var(--ease-out) both; }
.chip[data-facet], .chip#matchB, .chip#sortB, .chip#groupB { position: relative; }
.kpi { transition: transform .22s var(--ease), border-color .22s, box-shadow .22s; }
.kpi:active { transform: scale(.97); }
.ringin { animation: ringin .45s var(--ease-out) both; }
@keyframes ringin { from { opacity: 0; transform: scale(.72) } to { opacity: 1; transform: none } }
#moreN { animation: rise .4s var(--ease-out) both; }
.list-item .chk { transition: color .2s var(--ease), transform .2s var(--ease); }
.list-item.on .chk { transform: scale(1.15); }
.pickic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-hi); border: 1px solid var(--line-gold); background: rgba(201,162,78,0.07); }
.list-item.on .pickic { background: rgba(201,162,78,0.16); }
.sel { padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ivory); font-family: var(--font-ui); font-size: 12.5px; height: 32px; }
select.sel { -webkit-appearance: none; appearance: none; padding-right: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9A24E'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
/* Import-Zeile: Jahrgang, Anzahl, Groesse, Preis. Bricht selbst um, statt aus dem Bild zu laufen. */
.selgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; margin-top: 7px; }
.selgrid > .sel, .selgrid > .selc { width: 100%; min-width: 0; }
.selc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.selc > span { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-45); padding-left: 2px; }
.selc > .sel { width: 100%; min-width: 0; }
.pill { font-size: 8.5px; letter-spacing: 0.2em; padding: 5px 9px; border-radius: 3px; border: 1px solid currentColor; text-transform: uppercase; opacity: .9; white-space: nowrap; font-weight: 700; }
.pill.gold { color: var(--gold-hi); border-color: var(--gold); background: rgba(201,162,78,0.12); } .pill.rose { color: var(--rose); } .pill.ivory { color: var(--ivory-60); } .pill.slate { color: var(--slate); }
.cat-sparkling { color: var(--cat-sparkling) } .cat-white { color: var(--cat-white) } .cat-rose { color: var(--cat-rose) } .cat-red { color: var(--cat-red) } .cat-sweet { color: var(--cat-sweet) } .cat-fortified { color: var(--cat-fortified) } .cat-orange { color: var(--cat-orange) }
.bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.07); overflow: hidden; } .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); border-radius: 2px; transition: width 1s var(--ease-out); }
.steps { display: flex; gap: 6px; } .steps i { width: 26px; height: 2px; border-radius: 1px; background: var(--line); } .steps i.on { background: var(--gold); box-shadow: 0 0 8px rgba(201,162,78,0.7); }
.progress { display: flex; gap: 4px; } .progress i { flex-grow: 1; height: 2px; background: var(--line); transition: background .3s; } .progress i.on { background: var(--gold); }
.skeleton { height: 14px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* ---------- Match-Ring (Siegel) ---------- */
.ring { position: relative; flex-shrink: 0; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.ring .arc { transition: stroke-dashoffset 1.3s var(--ease-out); filter: drop-shadow(0 0 6px rgba(201,162,78,0.45)); }
.ring .conf { transition: stroke-dashoffset 1.6s .2s var(--ease-out); }
.ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .val { font-family: var(--font-serif); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--ivory); }
.ring .who { font-size: 8.5px; letter-spacing: 0.2em; color: var(--ivory-45); margin-top: 3px; font-weight: 700; }
.ring.paper .val { color: var(--paper-ink); } .ring.paper .who { color: var(--paper-ink-40); }

/* ---------- Achsenleiste (Pflicht-Anatomie) ---------- */
.axis { display: flex; align-items: center; gap: 12px; }
.axis .name { width: 84px; font-size: 11px; color: var(--ivory-70); letter-spacing: 0.04em; font-weight: 500; }
.axis .track { position: relative; flex-grow: 1; height: 16px; }
.axis .track .line { position: absolute; left: 0; right: 0; top: 7.5px; height: 1px; background: var(--line); }
.axis .track .band { position: absolute; top: 4px; height: 8px; border-radius: 2px; opacity: 0.3; transform-origin: left; animation: bandin .9s var(--ease-out) both; background-image: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 4px); }
@keyframes bandin { from { transform: scaleX(0); opacity: 0 } to { opacity: .3 } }
.axis .track .dot { position: absolute; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px rgba(201,162,78,0.8), 0 0 0 2px rgba(10,8,7,0.8); animation: dotin .8s .15s var(--ease-out) both; }
@keyframes dotin { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }
.paper .axis .name { color: var(--paper-ink-60); } .paper .axis .track .line { background: var(--paper-line); } .paper .axis .track .dot { background: var(--burgundy); box-shadow: none; }

/* ---------- Tabbar: schwebende Glasleiste ---------- */
#tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 14px); z-index: 5; width: min(calc(100% - 28px), 500px); display: flex; justify-content: space-around; align-items: center; padding: 8px 8px; border-radius: 30px; border: 1px solid rgba(201,162,78,0.22); background: linear-gradient(180deg, rgba(29,23,20,0.72), rgba(14,11,9,0.9)); backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.08); }
#tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; height: 52px; justify-content: center; background: none; border: none; color: rgba(243,236,221,0.42); font-family: inherit; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; cursor: pointer; padding: 0; border-radius: 22px; transition: color .25s var(--ease), transform .2s var(--ease), background .25s; }
#tabs button:active { transform: scale(.92); }
#tabs button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#tabs button.on { color: var(--gold-hi); background: rgba(201,162,78,0.1); }
#tabs button.scan { width: 60px; height: 60px; margin: -26px 2px 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F0D99A, #C9A24E 48%, #8E6F2E); box-shadow: 0 14px 34px rgba(201,162,78,0.4), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 5px var(--cellar); color: #1E1512; justify-content: center; }
#tabs button.scan svg { width: 26px; height: 26px; stroke-width: 1.9; }
#tabs button.scan::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(201,162,78,0.35); animation: pulse 3.2s var(--ease-in-out) infinite; }
@keyframes pulse { 0% { transform: scale(.9); opacity: .9 } 70% { transform: scale(1.35); opacity: 0 } 100% { opacity: 0 } }

/* ---------- Slider ---------- */
.slider { position: relative; height: 48px; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; margin: 0; padding: 0; border: none; box-shadow: none; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #3a3230, var(--gold) 70%, var(--gold-hi)); }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F3E6C6, #C9A24E 70%, #8E6F2E); box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 22px rgba(201,162,78,0.5); border: none; }
.slider input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); border: none; }

/* ---------- Kalibrierung ---------- */
.deck { position: relative; height: 470px; perspective: 1200px; }
.deck .cardx { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; will-change: transform; background: var(--cellar-2) center/cover no-repeat; border: 1px solid rgba(201,162,78,0.28); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.95); transition: transform .38s var(--ease), opacity .3s var(--ease); }
.deck .cardx::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,7,0.05) 0%, rgba(10,8,7,0.15) 45%, rgba(10,8,7,0.88) 100%); }
.deck .cardx .lab { position: relative; margin: 14px; background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: 18px 20px; box-shadow: 0 16px 30px -14px rgba(0,0,0,0.8); }
.deck .cardx .lab::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--paper-line); pointer-events: none; }
.deck .cardx .lab .producer { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-ink-60); font-weight: 700; }
.deck .cardx .lab .name { font-family: var(--font-serif); font-weight: 600; line-height: 1.05; margin-top: 4px; }
.deck .cardx .lab .origin { font-size: 11.5px; color: var(--paper-ink-60); margin-top: 6px; }
.deck .cardx .lab .gline { height: 1px; width: 44px; margin: 10px 0 0; background: linear-gradient(90deg, var(--gold), var(--gold-lo)); }
.deck .cardx.back1 { transform: translateY(14px) scale(0.96); opacity: .6; } .deck .cardx.back2 { transform: translateY(28px) scale(0.92); opacity: .35; }
.deck .cardx.out-l { transform: translateX(-130%) rotate(-10deg); opacity: 0; } .deck .cardx.out-r { transform: translateX(130%) rotate(10deg); opacity: 0; } .deck .cardx.out-d { transform: translateY(70%) scale(.9); opacity: 0; }
.deck .cardx.dragging { transition: none; }
.deck .stamp { position: absolute; top: 18px; padding: 8px 12px; border: 2px solid; border-radius: 4px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; opacity: 0; transform: rotate(-12deg); transition: opacity .15s; z-index: 2; }
/* Stempel folgen den ZWEI Wischrichtungen (2.6): rechts = mag ich (Stempel links), links = nicht
   meins (Stempel rechts). Liebe ich und Kenne nicht erscheinen nur, wenn die Beschleuniger-Gesten
   eingeschaltet sind — als Knopf sind sie immer da. Farbe sagt Nähe, nie Qualität: Gold bis
   Schiefer, kein Rot für „nicht meins". */
.deck .stamp.s-like { left: 18px; color: var(--ivory); border-color: var(--ivory); } .deck .stamp.s-no { right: 18px; color: var(--slate); border-color: var(--slate); transform: rotate(12deg); }

/* ---------- Toast, Sheet, Motion ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 100px); transform: translateX(-50%); z-index: 9; padding: 12px 20px; border-radius: var(--r-pill); background: var(--paper); color: var(--paper-ink); font-family: var(--font-serif); font-size: 16px; font-weight: 600; max-width: 90vw; box-shadow: 0 16px 40px rgba(0,0,0,0.6); animation: toastin .35s var(--ease-out); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px) } }
.sheet { position: fixed; inset: 0; z-index: 20; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.sheet.on { opacity: 1; pointer-events: auto; } .sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sheet-in { position: absolute; left: 0; right: 0; bottom: 0; max-width: 540px; margin: 0 auto; max-height: 84dvh; overflow-y: auto; padding: 14px 22px calc(var(--safe-bottom) + 24px); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, var(--cellar-3), var(--cellar-2)); border-top: 1px solid var(--line-gold); transform: translateY(40px); transition: transform .4s var(--ease-out); box-shadow: 0 -30px 60px rgba(0,0,0,0.6); }
/* Der Griff war bis v49 reine Dekoration (::before) — sichtbar, aber tot. Ein langes Sheet lässt
   kaum Hintergrund zum Antippen übrig, und der Wisch nach unten greift nur ganz oben. Jetzt ist der
   Griff ein Knopf, klebt beim Scrollen am oberen Rand und schließt auf Tipp. */
.sheet-x { display: block; width: calc(100% + 44px); margin: -14px -22px 6px; padding: 20px 0 16px; border: 0; cursor: pointer; position: sticky; top: -14px; z-index: 3;
  background: linear-gradient(180deg, var(--cellar-3) 72%, rgba(0,0,0,0)); -webkit-tap-highlight-color: transparent; }
.sheet-x i { display: block; width: 36px; height: 3px; border-radius: 2px; background: var(--line-gold); transition: background .2s, width .2s; margin: 0 auto; }
.sheet-x:active i { background: var(--gold-hi); width: 48px; }

/* ---------- Herkunftskarte ---------- */
/* Die Landmasse ist Hintergrund, nicht Inhalt: gedämpft, ohne Grenzen, ohne Beschriftung. Was zählt,
   sind die Punkte — und ein Punkt, der nur die Ländermitte meint, sieht anders aus als einer, der
   eine Region kennt. */
.mapbox { margin-top: 4px; border: 1px solid var(--line-gold-2); border-radius: var(--r-card); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, var(--cellar-3), var(--cellar) 75%); }
.mapbox svg { display: block; width: 100%; height: auto; }
.mapbox .land { fill: rgba(243,236,221,0.07); stroke: rgba(201,162,78,0.22); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.orig circle:first-child { fill: var(--gold); fill-opacity: 0.85; stroke: var(--gold-hi); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill-opacity .2s; }
.orig .hit { fill: transparent; cursor: pointer; }
.orig.vague circle:first-child { fill: none; stroke: var(--rose); stroke-dasharray: 3 3; }
.orig:active circle:first-child { fill-opacity: 1; }
.sheet.on .sheet-in { transform: none; }
.fade { animation: fade .5s var(--ease-out) both; }
.fade.slide-l { animation: slidel .42s var(--ease-out) both; } .fade.slide-r { animation: slider .42s var(--ease-out) both; }
@keyframes slidel { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } @keyframes slider { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.fade > * { animation: rise .6s var(--ease-out) both; }
.fade > *:nth-child(1) { animation-delay: .02s } .fade > *:nth-child(2) { animation-delay: .08s } .fade > *:nth-child(3) { animation-delay: .14s } .fade > *:nth-child(4) { animation-delay: .20s } .fade > *:nth-child(5) { animation-delay: .26s }
.stack > * { animation: rise .55s var(--ease-out) both; }
.stack > *:nth-child(1) { animation-delay: .05s } .stack > *:nth-child(2) { animation-delay: .11s } .stack > *:nth-child(3) { animation-delay: .17s } .stack > *:nth-child(4) { animation-delay: .23s } .stack > *:nth-child(5) { animation-delay: .29s } .stack > *:nth-child(6) { animation-delay: .35s }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.reveal { animation: reveal 1.6s var(--ease-out) both; } @keyframes reveal { from { opacity: 0; transform: scale(.7); filter: blur(8px) } to { opacity: 1; transform: none; filter: none } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Taste Print: Siegel mit rotierender Umschrift ---------- */
canvas.print { display: block; margin: 0 auto; }
.seal { position: relative; display: flex; justify-content: center; align-items: center; }
.seal .orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; animation: spin 80s linear infinite; }
.seal .orbit text { font-family: var(--font-ui); font-size: 7.4px; letter-spacing: 0.42em; text-transform: uppercase; font-weight: 700; fill: rgba(201,162,78,0.55); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg) } }
.seal::before { content: ""; position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(var(--ambient),0.18), rgba(var(--ambient),0.04) 45%, transparent 70%); pointer-events: none; }
.hero { position: relative; text-align: center; padding: 6px 0 4px; }
.hero .arch { font-family: var(--font-serif); font-size: 30px; font-style: italic; font-weight: 500; line-height: 1.05; margin-top: 6px; }
.hero .sub { margin-top: 8px; }

/* ---------- Login / Onboarding ---------- */
.hero-bg { position: absolute; inset: -10% -6% auto -6%; height: 76vh; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .92; animation: heroin 2.8s var(--ease-out) both; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,7,0.02) 0%, rgba(10,8,7,0.22) 45%, var(--cellar) 100%); }
@keyframes heroin { from { opacity: 0; transform: scale(1.1) } to { opacity: .92; transform: none } }
.login { position: relative; z-index: 1; padding-top: 44vh; }
.wordmark { font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.5em; color: var(--gold); text-transform: uppercase; font-weight: 600; }

/* ---------- Flaschen ---------- */
.bphoto { display: inline-flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 18px 22px rgba(0,0,0,0.65)); }
.bphoto img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.bphoto:not(.generic) { background: linear-gradient(180deg, #F7F1E5, #E8DDC6); border-radius: 8px; padding: 6px; box-shadow: 0 22px 34px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.65); filter: none; width: auto !important; min-width: 44px; max-width: 200px; }
.bphoto:not(.generic) img { border-radius: 4px; mix-blend-mode: multiply; }
.bphoto.generic img { filter: grayscale(.7) brightness(.5) contrast(.85); opacity: .75; }
/* Freigestellte Flasche (storage cut/…): kein Karton, echter Schatten, Reflex am Boden */
.bphoto.cut { background: none; padding: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 20px rgba(0,0,0,0.6)) drop-shadow(0 2px 3px rgba(0,0,0,0.45)); max-width: none; }
.bphoto.cut img { border-radius: 0; mix-blend-mode: normal; }
.stage-b { position: relative; }
.stage-b .symb { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,238,224,.55); border: 1px solid rgba(245,238,224,.18); border-radius: 999px; padding: 4px 9px; background: rgba(10,8,7,.55); white-space: nowrap; }
.brow { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 10px; border-radius: var(--r-card); background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); border: 1px solid var(--line); cursor: pointer; transition: transform .22s var(--ease), border-color .22s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.brow:active { transform: scale(.985); border-color: var(--line-gold); }
.brow .bthumb { flex-shrink: 0; width: 50px; display: flex; justify-content: center; align-items: flex-end; position: relative; }
.brow .bthumb::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 44px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%); }
.brow .bname { font-size: 19px; font-weight: 600; line-height: 1.12; margin: 2px 0; }
.brow .bright { flex-shrink: 0; display: flex; align-items: center; }
.brow.v-skip { opacity: .55; } .brow.v-buy, .brow.v-value { border-color: rgba(201,162,78,0.5); background: linear-gradient(160deg, rgba(201,162,78,0.12), rgba(201,162,78,0.02)); } .brow.v-discover { border-color: rgba(211,154,163,0.45); }
.brow.imp .chk { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; color: var(--gold-hi); font-size: 13px; }
.brow.imp.on { border-color: rgba(201,162,78,0.5); background: linear-gradient(160deg, rgba(201,162,78,0.10), rgba(201,162,78,0.02)); } .brow.imp.on .chk { background: var(--gold); color: #1E1512; }
.brow.imp:not(.on) { opacity: .55; }
.qty { font-family: var(--font-serif); font-size: 15px; color: var(--ivory-60); }
.unk { opacity: .7; }
.table .brow .bname { font-size: 24px; } .table .brow .meta, .table .brow .small { font-size: 14px; } .table .brow { padding: 16px 14px; }
.disc { display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 12px; border-radius: 18px; border: 1px solid var(--line-gold-2); background: linear-gradient(135deg, rgba(201,162,78,0.12), rgba(255,255,255,0.02) 60%), rgba(20,15,13,0.80); cursor: pointer; transition: transform .22s var(--ease); box-shadow: 0 30px 60px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.07); }
.disc:active { transform: scale(.985); } .disc .bthumb { flex-shrink: 0; width: 64px; display: flex; justify-content: center; }
/* Regal */
.shelf { display: flex; gap: 8px; overflow-x: auto; padding: 16px 8px 26px; margin: 0 -8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; position: relative; }
.shelf::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #3f2d22, #1a120e); box-shadow: 0 6px 14px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08); }
.shelf::-webkit-scrollbar { display: none; }
.shelf-b { flex: 0 0 auto; width: 86px; scroll-snap-align: start; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform .25s var(--ease); position: relative; z-index: 1; }
.shelf-b:active { transform: translateY(-6px); }
.shelf-b.more { justify-content: center; color: var(--gold-hi); border: 1px dashed var(--line-gold); border-radius: 12px; height: 150px; }
/* Bühne */
.stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 30px 0 26px; margin: 0 -22px 16px; overflow: hidden; background: radial-gradient(60% 55% at 50% 42%, #2c2019 0%, #17100e 55%, var(--cellar) 100%); }
.stage-light { position: absolute; left: 50%; top: -30%; width: min(360px, 100vw); height: 440px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 30%, rgba(var(--ambient),0.30), rgba(var(--ambient),0.06) 45%, transparent 70%); pointer-events: none; }
.stage-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55)); pointer-events: none; }
.stage-b { position: relative; animation: floaty 7s ease-in-out infinite; }
.stage-b::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 70%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.75), transparent 70%); }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-0.4deg) } 50% { transform: translateY(-6px) rotate(0.4deg) } }
.stage .hb-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stage-src { position: absolute; right: 22px; bottom: 8px; font-size: 10px; letter-spacing: 0.06em; }
/* Jahrgänge */
.vstrip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .vstrip::-webkit-scrollbar { display: none; }
.vy { flex: 0 0 auto; width: 60px; height: 86px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 4px 6px; cursor: pointer; scroll-snap-align: center; position: relative; transition: all .2s var(--ease); }
.vy .yr { font-size: 15px; font-weight: 600; color: var(--ivory-60); }
.vy .mat { width: 8px; height: 30px; border-radius: 2px; background: rgba(255,255,255,0.06); display: flex; align-items: flex-end; overflow: hidden; }
.vy .mat i { display: block; width: 100%; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); border-radius: 2px; }
.vy .mm { font-size: 10px; color: var(--ivory-45); font-variant-numeric: tabular-nums; }
.vy .dotq { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--paper); color: var(--paper-ink); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.vy.on { border-color: var(--gold); background: rgba(201,162,78,0.12); transform: translateY(-3px); } .vy.on .yr { color: var(--gold-hi); }
.vy.st-late .mat i { background: linear-gradient(180deg, #B8825C, #5a3a25); } .vy.st-peak { border-color: rgba(201,162,78,0.5); } .vy.st-early .mat i, .vy.st-young .mat i { background: linear-gradient(180deg, #D9CA84, #6E6A3A); }
/* Scan */
.camera { display: block; cursor: pointer; }
.cam-in { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 38px 20px; border-radius: 18px; border: 1px dashed var(--line-gold); background: radial-gradient(80% 80% at 50% 0%, rgba(201,162,78,0.14), rgba(201,162,78,0.02)); text-align: center; transition: transform .2s var(--ease); }
.camera:active .cam-in { transform: scale(.98); }
.cam-in svg { width: 44px; height: 44px; fill: none; stroke: var(--gold-hi); stroke-width: 1.2; stroke-linecap: round; }
/* Verkostung Kontext */
.ctx { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: var(--r-card); border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.ctx-row { display: flex; flex-direction: column; gap: 7px; } .ctx-row .chips .chip { min-height: 32px; padding: 6px 12px; font-size: 12px; }
/* Fortschritt */
.sharp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .sh { display: flex; flex-direction: column; gap: 4px; }
/* Abzeichen gab es bis v38 — zehn Stück, plus fünf Ränge und Punkte. Alle drei bedienen Kompetenz
   (g = 0,277), den schwächsten der drei Gamification-Kanäle, und werten bei dieser Zielgruppe ab.
   Ersetzt durch Landkarte, Präzision und Kinship (2.5). Nicht wiederbeleben. */
/* Landkarte: weiße Stellen. Weiß = unbetreten, nicht versäumt — deshalb keine Warnfarbe, kein
   Schloss, kein Ausrufezeichen, sondern die Abwesenheit von Füllung (Regel 2). */
.mapg { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.spot { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ivory); font-family: inherit; text-align: left; cursor: pointer; min-width: 0; transition: transform .18s var(--ease), border-color .18s; }
.spot:active { transform: scale(.96); }
.spot .sl { font-size: 12.5px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.spot .sn { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-45); font-weight: 700; }
.spot.print { border-color: var(--line-gold-2); background: linear-gradient(160deg, rgba(201,162,78,0.14), rgba(201,162,78,0.03)); }
.spot.print .sn, .spot.kennst .sn { color: var(--gold); }
.spot.kennst { border-color: var(--line-gold); }
.spot.begonnen { border-style: dashed; border-color: var(--line-gold); }
.spot.weiss { border-style: dashed; border-color: rgba(243,236,221,0.22); background: transparent; color: var(--ivory-60); }
/* Zwei Gaumen auf einer Achse: Gold = A, Rosé = B. Die Farbe benennt die Person (Regel 9),
   nicht eine Bewertung — höher ist nicht besser. */
.axis.pair .track .dot.b { background: var(--rose); box-shadow: 0 0 12px rgba(211,154,163,0.7), 0 0 0 2px rgba(10,8,7,0.8); }
/* Worturteil (2.7): Stufe der Passung. Gold = nah, Schiefer = fern — nie Rot, nie Grün. */
.vw { display: inline-block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ivory-60); }
.vw i { font-style: normal; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--ivory-45); margin-left: 4px; }
.vw-strong { color: var(--gold-hi); } .vw-likely { color: var(--gold); } .vw-maybe { color: var(--ivory-70); }
.vw-unlikely { color: var(--ivory-45); } .vw-no { color: var(--slate); }
/* Kontext-Karte „Jetzt" */
.now { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 22px 20px; border: 1px solid var(--line-gold-2); background: linear-gradient(135deg, rgba(201,162,78,0.16), rgba(107,31,46,0.12) 55%, rgba(255,255,255,0.02)); box-shadow: 0 34px 60px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.08); cursor: pointer; }
.now::before { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--ambient),0.35), transparent 65%); pointer-events: none; }
.now h3 { font-size: 26px; font-weight: 500; margin-top: 6px; }
.now .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi); font-weight: 700; }
.now .cta::after { content: "→"; font-size: 14px; }
/* Statistik-Zeile */
.stats { display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats > div { flex: 1 1 0; min-width: 0; padding: 14px 6px; text-align: center; border-right: 1px solid var(--line-2); }
.stats > div:last-child { border-right: none; }
.stats .v { font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1; color: var(--gold-hi); }
.stats .k { margin-top: 5px; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-45); font-weight: 700; }
/* Explore-Karte */
.explore { position: fixed; inset: 0; z-index: 3; background: var(--cellar); }
.explore canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.explore .hud { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 14px); padding: 0 20px; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; z-index: 2; }
.explore .hud > * { pointer-events: auto; }
.explore .legend { position: absolute; left: 20px; bottom: calc(var(--safe-bottom) + 100px); display: flex; flex-direction: column; gap: 6px; z-index: 2; pointer-events: none; }
.explore .legend div { display: flex; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory-60); font-weight: 700; }
.explore .legend i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; background: currentColor; }
.explore .axisl { position: absolute; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ivory-30); font-weight: 700; pointer-events: none; z-index: 2; }
.explore .glass { padding: 10px 14px; border-radius: var(--r-pill); background: rgba(14,11,9,0.92); border: 1px solid var(--line); }
.explore .glass.btn { width: auto; height: 40px; padding: 0 16px; font-size: 10.5px; }
.explore .tip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 100px); z-index: 2; pointer-events: none; text-align: center; width: max-content; max-width: 60%; }
.explore .tip .glass { border-radius: 14px; padding: 10px 14px; }
/* Etikett-Karte (Papier) — bleibt für Sonderfälle */
.etikett { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: 16px 18px 14px; box-shadow: 0 24px 40px -22px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.25) inset; cursor: pointer; overflow: hidden; }
.etikett::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--paper-line); border-radius: 2px; pointer-events: none; }
.etikett .producer { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-ink-60); }
.etikett .name { font-family: var(--font-serif); font-size: 21px; font-weight: 600; line-height: 1.1; margin-top: 3px; }
.etikett .origin { font-size: 11.5px; color: var(--paper-ink-60); margin-top: 4px; }
.etikett .gline { height: 1px; width: 44px; margin: 8px 0 0; background: linear-gradient(90deg, var(--gold), var(--gold-lo)); }
.etikett .cat { position: absolute; right: 16px; top: 14px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-ink-40); }
.bottle { display: block; }

/* Aktionsleiste Wein-Detail */
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quick { margin-top: 12px; padding: 12px 12px 10px; border: 1px solid var(--line-gold); border-radius: 16px; background: rgba(201,162,78,0.05); } .quick .chip { min-height: 38px; font-size: 11px; }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 66px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ivory-70); font-family: inherit; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s; }
.act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.act:active { transform: scale(.95); }
.act.primary { background: linear-gradient(180deg, #E8CB80, #C9A24E 55%, #A9853A); color: #1E1512; border: none; box-shadow: 0 16px 30px -16px rgba(201,162,78,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.act.on { border-color: var(--gold); color: var(--gold-hi); background: rgba(201,162,78,0.14); }
/* §5 Aktionsleiste auf Weinkarten + Warum-Zeile */
.wact { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wa { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ivory-70); font-family: inherit; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease), border-color .2s; }
.wa svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wa:active { transform: scale(.96); } .wa.on { border-color: var(--gold); color: var(--gold-hi); background: rgba(201,162,78,0.14); }
.why { margin-top: 5px; color: var(--gold-hi); }
.disc, .brow { flex-wrap: wrap; } .disc .grow, .brow .grow { flex: 1 1 0; } .disc .wact, .brow .wact { flex: 1 1 100%; margin-top: 2px; }
.tile { border-color: var(--line); background: rgba(255,255,255,0.04); }
.tile svg { stroke: var(--ivory-70); } .tile span { color: var(--ivory-60); }

.deck .cardx .cphoto { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); height: 52%; width: 40%; display: flex; align-items: center; justify-content: center; z-index: 1; }
.deck .cardx .cphoto img { max-height: 100%; max-width: 100%; border-radius: 6px; box-shadow: 0 30px 50px -20px rgba(0,0,0,0.9); background: linear-gradient(180deg, #F7F1E5, #E8DDC6); padding: 5px; }

/* Live-Sucher */
.viewfinder { position: relative; border-radius: 18px; overflow: hidden; background: var(--cellar-2); min-height: 120px; }
.viewfinder video { display: block; width: 100%; height: 56vh; max-height: 460px; object-fit: cover; }
.viewfinder .vf-frame { position: absolute; inset: 22px 22px 86px; pointer-events: none; display: none; }
.viewfinder.live .vf-frame { display: block; }
.viewfinder .vf-frame i { position: absolute; width: 28px; height: 28px; border: 2px solid var(--gold-hi); }
.viewfinder .vf-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.viewfinder .vf-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.viewfinder .vf-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.viewfinder .vf-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.viewfinder .vf-frame::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,78,0.7), transparent); animation: scanline 2.6s var(--ease-in-out) infinite alternate; }
@keyframes scanline { from { transform: translateY(-120px) } to { transform: translateY(120px) } }
.viewfinder .vf-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; display: none; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.viewfinder.live .vf-hint { display: block; bottom: 92px; }
.viewfinder.live .cam-in { display: none; }
.shutter { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; border: 3px solid rgba(243,236,221,0.9); background: rgba(0,0,0,0.25); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.shutter i { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F0D99A, #C9A24E 48%, #8E6F2E); box-shadow: 0 8px 20px rgba(201,162,78,0.5); transition: transform .12s; }
.shutter:active i { transform: scale(.88); }
.shutter.flash::after { content: ""; position: fixed; inset: 0; background: #fff; animation: flash .35s var(--ease-out) forwards; pointer-events: none; }
@keyframes flash { from { opacity: .9 } to { opacity: 0 } }

.scanbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--ivory-60); } .scanbar.warn { border-color: rgba(214,140,150,0.35); } .scanbar a { color: var(--gold-hi); text-decoration: none; white-space: nowrap; }
/* Print-Analyse: Verlauf & Stil-Chips */
.spark { width: 100%; height: 64px; display: block; margin: 4px 0 2px; overflow: visible; } .spark polyline { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: .55; vector-effect: non-scaling-stroke; } .spark .mean { stroke: var(--ivory-45); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: .6; }
.cdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
/* Trinkfenster-Zeitleiste: Fenster, Höhepunkt, Heute */
.win { margin-top: 8px; } .win-track { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: visible; }
.win-in { position: absolute; top: 0; height: 100%; border-radius: 4px; background: rgba(201,162,78,0.35); } .win-peak { position: absolute; top: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.win-now { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ivory); border-radius: 1px; box-shadow: 0 0 6px rgba(255,255,255,0.6); transform: translateX(-1px); }
.win .spread { margin-top: 5px; }
/* Keller: Kennzahlen-Streifen, Filterchips, Slot-Zeile */
.kpis { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 6px; scroll-snap-type: x proximity; } .kpis::-webkit-scrollbar { display: none; }
.kpi { flex: 0 0 auto; min-width: 118px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); scroll-snap-align: start; cursor: pointer; } .kpi.on { border-color: var(--gold); background: rgba(201,162,78,0.10); }
.kpi .v { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--gold-hi); line-height: 1.1; } .kpi .l { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-45); margin-top: 4px; }
.qty.tap { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; } .qty.tap:active { border-color: var(--gold); }
.tl { display: flex; align-items: flex-end; gap: 4px; height: 56px; } .tl > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; } .tl i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); min-height: 2px; } .tl span { font-size: 9px; color: var(--ivory-45); }
.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .stepper button { width: 42px; height: 40px; background: none; border: 0; color: var(--ivory); font-size: 20px; cursor: pointer; } .stepper b { min-width: 40px; text-align: center; font-family: var(--font-serif); font-size: 18px; }
/* Die Zahl im Zähler ist ein Feld: 24 Flaschen tippt man, man klickt sie nicht 24-mal. */
.stepper input { width: 52px; min-width: 40px; text-align: center; font-family: var(--font-serif); font-size: 18px; color: var(--ivory); background: none; border: 0; border-radius: 0; padding: 0; margin: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 0; color: var(--gold-hi); }

/* Swipe-Deck: Flasche freigestellt auf Ambient-Verlauf, Ring oben rechts, Stempel für hoch (mag ich) */
.deck .cardx.sw .swb { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 1; display: flex; align-items: flex-end; justify-content: center; height: 52%; }
.deck .cardx.sw .swb .bphoto { filter: drop-shadow(0 26px 24px rgba(0,0,0,0.7)) drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.deck .cardx.sw .swring { position: absolute; right: 14px; top: 14px; z-index: 2; }
.deck .stamp.s-love { left: 50%; top: 18px; transform: translateX(-50%) rotate(-4deg); color: var(--gold-hi); border-color: var(--gold-hi); }
.deck .stamp.s-unknown { left: 50%; top: 72px; transform: translateX(-50%) rotate(4deg); color: var(--ivory-45); border-color: var(--ivory-45); }
.deck .cardx.out-u { transform: translateY(-130%) scale(.95); opacity: 0; }
.deck .cardx.cur { transition: transform .25s var(--ease), opacity .25s; }

/* Swipe-Aktionen: eine Reihe, runde Tasten, Label darunter — immer über der Tab-Leiste sichtbar */
.swacts { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; }
.swacts button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--ivory-60); cursor: pointer; padding: 0; min-width: 0; }
.swacts button i { font-style: normal; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-gold); background: rgba(255,255,255,0.03); font-size: 22px; color: var(--ivory); transition: transform .2s var(--ease), background .2s; }
.swacts button span { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.swacts button.love i { background: var(--gold); border-color: var(--gold); color: var(--cellar-2); }
.swacts button:active i { transform: scale(.9); } .swacts button:disabled { opacity: .35; }

/* Druckliste (Keller-Export) */
.printlist table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0 14px; } .printlist th, .printlist td { text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } .printlist th { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-45); font-weight: 600; }
.printlist h3 { margin: 12px 0 4px; font-size: 16px; } .printlist h3 .muted { font-family: var(--font-ui); font-size: 11px; margin-left: 8px; }
@media print { body { background: #fff !important; color: #111 !important; } #bg, #tabs, #vignette, #grain, .noprint, .btn, #ambient { display: none !important; } #screen { padding: 0; max-width: none; color: #111; } .printlist th, .printlist td { border-color: #ddd; color: #111; } .printlist th { color: #666; } .label, .meta, .muted { color: #666 !important; } h2, h3 { color: #111 !important; } }

/* ---------- Klarheit v24: Kreislauf, Print-Kachel, Toast-Aktion ---------- */
.cycle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-gold-2); background: rgba(201,162,78,0.06); font-size: 12px; color: var(--ivory-60); cursor: pointer; }
.cycle .label { margin-right: 4px; } .cycle i { font-style: normal; color: var(--gold); opacity: .7; font-size: 11px; } .cycle span.on { color: var(--gold-hi); font-weight: 600; }
.ptile { gap: 9px; } .ptile .prow { display: flex; align-items: center; gap: 10px; } .ptile .prow .chip { padding: 5px 10px; font-size: 11px; white-space: nowrap; }
.ptile .bar.ok i { background: var(--gold-hi); }
.link { background: none; border: none; color: var(--gold-hi); font-size: 12px; padding: 0; cursor: pointer; font-family: inherit; }
.toast-act { margin-left: 10px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--paper-ink-60, rgba(0,0,0,.35)); background: transparent; color: inherit; font: inherit; font-size: 14px; }
.list-item.hl { border-color: var(--gold); }
.howg { position: relative; height: 44px; border-radius: 8px; background: rgba(255,255,255,0.04); overflow: hidden; }
.howg i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translate(-50%, 50%); }
.howg b { position: absolute; top: 0; bottom: 0; background: rgba(201,162,78,0.18); border-left: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* MaxDiff & Paarvergleich (Bauliste 2.2). Vier Stilbilder, best/worst in zwei Schritten.
   Kein Blur unter Text, ein bewegtes Element pro Screen, Gold nur für die getroffene Wahl. */
.mdcell { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 10px 12px; border-radius: var(--r-card); background: rgba(255,255,255,0.03); border: 1px solid var(--line); cursor: pointer; font-family: inherit; color: inherit; text-align: center; min-width: 0; transition: transform .2s var(--ease), border-color .2s, background .2s, opacity .25s; }
.mdcell:active { transform: scale(.97); }
.mdcell.on { border-color: var(--gold); background: rgba(201,162,78,0.12); }
.mdcell.dim { opacity: .34; }
.mdcell.gone { opacity: 0; transform: scale(.94); pointer-events: none; }
.mdcell .mdb { height: 128px; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.mdcell .mdb svg, .mdcell .mdb img { max-width: 100%; }
.mdcell .mdk { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--gold-hi); line-height: 1.15; overflow-wrap: anywhere; }
.mdcell .mdp { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-45); line-height: 1.3; overflow-wrap: anywhere; }
.mdcell .mdn { font-size: 11.5px; color: var(--ivory-60); line-height: 1.2; overflow-wrap: anywhere; }
.mdcell.worst.on { border-color: var(--slate); background: rgba(94,100,114,0.16); }

/* Sichtbare Rechenarbeit (Bauliste 2.3). Achse für Achse rastet ein, daneben der Wein, der sie
   gesetzt hat. 10–12 s: darunter wirkt es behauptet, jenseits ~30 s kippt der Effekt.
   Das Einrasten IST das eine bewegte Element dieses Screens — sonst ruht hier alles. */
.trace { display: flex; flex-direction: column; gap: 11px; }
.trow { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.trow.in { opacity: 1; transform: none; }
.trow .tn { flex: 0 0 88px; width: 88px; min-width: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }
.trow .tn span { display: block; font-family: var(--font-ui); font-size: 9.5px; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; color: var(--ivory-45); margin-top: 2px; }
.trow .tb { flex: 1 1 auto; min-width: 24px; height: 3px; border-radius: 2px; background: var(--line); position: relative; }
/* Breite wird beim Einrasten per JS gesetzt (data-w auf .trow) — keine CSS-Variable mit Fallback,
   die still falsch rendern könnte, und der Dead-Token-Check bleibt aussagekräftig. */
.trow .tb i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width .75s var(--ease-out) .15s; }
.trow .tw { flex: 0 0 96px; width: 96px; min-width: 0; text-align: right; font-size: 11px; color: var(--ivory-60); line-height: 1.25; overflow-wrap: anywhere; }
.trow .tw span { color: var(--ivory-45); }

/* Trinkfenster als begründete Bandbreite (Bauliste 2.4). Sechs Phasen, Unsicherheitsband an beiden
   Enden, Herleitung aufklappbar. Farbe transportiert hier Reifezustand, nicht Passung — „Abstieg"
   darf den Warnton tragen, weil Alterungsrisiko laut Regel 2 genau dafür reserviert ist. */
.dw { margin-top: 10px; }
.dw-track { position: relative; height: 16px; border-radius: 8px; background: rgba(255,255,255,0.04); overflow: hidden; }
.dw-track i { position: absolute; top: 0; bottom: 0; display: block; }
.dw-track i.ph-too_young { background: rgba(94,100,114,0.55); }
.dw-track i.ph-approaching { background: rgba(94,100,114,0.85); }
.dw-track i.ph-ready { background: var(--gold-lo); }
.dw-track i.ph-peak { background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }
.dw-track i.ph-past_peak { background: rgba(201,162,78,0.42); }
.dw-track i.ph-decline { background: rgba(224,104,79,0.55); }
.dw-track b.dw-band { position: absolute; top: 0; bottom: 0; display: block; background-image: repeating-linear-gradient(45deg, rgba(10,8,7,0.55) 0 3px, transparent 3px 6px); }
.dw-now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ivory); border-radius: 1px; box-shadow: 0 0 0 2px rgba(10,8,7,0.6); }
.dw-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; }
.dw-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ivory-45); white-space: nowrap; }
.dw-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ivory-30); }
.dw-legend span.on { color: var(--gold-hi); }
.dw-legend span.ph-ready::before { background: var(--gold-lo); }
.dw-legend span.ph-peak::before { background: var(--gold-hi); }
.dw-legend span.ph-decline::before { background: rgba(224,104,79,0.75); }
.dwwhy { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 9px; }
.dwwhy > summary { cursor: pointer; list-style: none; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.dwwhy > summary::-webkit-details-marker { display: none; }
.dwwhy > summary::after { content: " ▾"; }
.dwwhy[open] > summary::after { content: " ▴"; }
.dwrow { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.dwrow:last-child { border-bottom: 0; }
.dwrow .dwl { flex: 1 1 auto; min-width: 0; }
.dwrow .dwv { flex: 0 0 auto; text-align: right; white-space: nowrap; font-size: 11.5px; }
.dwsrc { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.05); margin-top: 5px; }
.dwsrc i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--gold-lo); }
.dwsrc b { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--gold-hi); }

/* ---------- Selbstauskunft ----------
   Eine Achse ist eine Zeile. Ausgegraut heisst „im Katalog nicht unterschieden" — die Zeile bleibt
   trotzdem stehen, weil Abwesenheit von Signal selbst eine Information ist (Regel 5). */
.decl { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.025); }
.decl.flat { opacity: .42; }
.decl .chips { margin: 0; }
.hardsw { display: flex; align-items: center; gap: 9px; margin-top: 2px; color: var(--ivory-60); font-size: 12px; line-height: 1.3; }
.hardsw input[type=checkbox] { -webkit-appearance: auto; appearance: auto; width: 20px; height: 20px; min-width: 20px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; accent-color: #C9A24E; }
/* „Meide ich" ist keine Warnung — nur ein anderer Zustand. Deshalb gestrichelt statt rot (Regel 2). */
.chip.avoid { border-style: dashed; border-color: var(--ivory-30); color: var(--ivory-45); text-decoration: line-through; }
/* Ein Band ohne Weine bleibt sichtbar, aber unwählbar — es sagt etwas über den Katalog aus. */
.chip.dead { opacity: .38; pointer-events: none; border-style: dashed; }

/* Keller: gebuendelte Karte — Wein oben, darunter Jahrgaenge und Posten. */
.bundle { display: flex; flex-direction: column; }
.bundle .chev { color: var(--gold-hi); font-size: 11px; margin-left: 2px; }
.lots { margin: -2px 8px 0 8px; padding: 6px 12px 8px 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); background: rgba(255,255,255,0.02); }
.lotv + .lotv { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.lot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; color: var(--ivory-70); padding: 6px 0 6px 10px; border-left: 1px solid rgba(201,162,78,0.28); cursor: pointer; }
.lot:active { color: var(--gold-hi); }
.lot .num { color: var(--ivory-45); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Geblockte Weine verschwinden nicht, sie treten zurueck: sichtbar, begruendet, eine Stufe leiser. */
.brow.dim { opacity: .52; }
.brow.dim:active { opacity: .72; }

/* Die Karte mit Zahlen (AR, Stufe 1): Badges auf dem eingefrorenen Foto. Kein Live-Tracking —
   bei Kerzenlicht und gewölbtem Papier flackert das mehr, als es nützt. */
.cardshot { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: #0B0A08; }
.cardshot img { display: block; width: 100%; height: auto; }
.ovb { position: absolute; min-width: 26px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: #14110B; background: var(--gold-hi); box-shadow: 0 2px 10px rgba(0,0,0,.55); transform: translateY(-50%); cursor: pointer; text-align: center; }
.ovb.mid { background: #C9A24E; }
.ovb.lo { background: rgba(232,228,217,.78); }
.ovb.no { background: var(--coral, #E08A7A); color: #fff; }
.ovb:active { transform: translateY(-50%) scale(.94); }
/* Unterm-Tisch-Modus: gedämpft, ohne Preisurteile — Wein am Tisch ist ein sozialer Akt */
.untertisch { opacity: .62; filter: saturate(.55); }
.unk.tap { cursor: pointer; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }