@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/young-serif-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/figtree-500.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/figtree-600.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/figtree-700.woff2) format("woff2")}

/* Layout: eine App-Spalte (max. 560px), Tab-Leiste fest unten, Zahnrad oben rechts. Hell = Weißwein, Dunkel = Rotwein (VinoMe-CI) */
:root{
  --bg:#FAF7EE; --surface:#FFFFFF; --sunk:#F1ECDD; --accent:#7A1F3D; --grape:#C9C46E; --grape-stroke:#9C9640;
  --text:#2A2418; --muted:#6E6553; --line:#E4DCC6; --band:#EBD7DD; --pressed:#F6E9EA;
  --primary-bg:#7A1F3D; --primary-text:#FFFFFF; --secondary-bg:#FFFFFF; --secondary-border:#7A1F3D; --secondary-text:#7A1F3D; --chip-on-text:#FFFFFF;
  --good:#2F7A4B; --mid:#9A6B0E; --bad:#B3362F; --heart:#B3364F; --vine-op:.35;
  --gutter:clamp(14px,5vw,28px);
  --fs-body:clamp(15px,3.9vw,17px); --fs-small:clamp(13px,3.5vw,15px); --fs-eyebrow:clamp(11px,3vw,12.5px);
  --fs-h1:clamp(23px,7vw,34px); --fs-h2:clamp(19px,5.6vw,26px); --fs-h3:clamp(17px,4.6vw,20px); --fs-big:clamp(40px,13vw,60px);
  --btn-h:clamp(48px,13.5vw,58px); --radius:clamp(12px,3.6vw,16px);
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#2A0F18; --surface:#3A1622; --sunk:#4A1E2C; --accent:#E8A3B6; --grape:#5B2C6F; --grape-stroke:#A57BBA;
  --text:#F6EAE6; --muted:#CDB0B8; --line:#5C2A39; --band:#6A3446; --pressed:#4E1F30;
  --primary-bg:#F6EAE6; --primary-text:#2A0F18; --secondary-bg:#3A1622; --secondary-border:#E8A3B6; --secondary-text:#E8A3B6; --chip-on-text:#2A0F18;
  --good:#7FD19C; --mid:#E8BF62; --bad:#F2877E; --heart:#F28BA3; --vine-op:.55; color-scheme:dark}}
:root[data-theme="dark"],:root.t-dark{
  --bg:#2A0F18; --surface:#3A1622; --sunk:#4A1E2C; --accent:#E8A3B6; --grape:#5B2C6F; --grape-stroke:#A57BBA;
  --text:#F6EAE6; --muted:#CDB0B8; --line:#5C2A39; --band:#6A3446; --pressed:#4E1F30;
  --primary-bg:#F6EAE6; --primary-text:#2A0F18; --secondary-bg:#3A1622; --secondary-border:#E8A3B6; --secondary-text:#E8A3B6; --chip-on-text:#2A0F18;
  --good:#7FD19C; --mid:#E8BF62; --bad:#F2877E; --heart:#F28BA3; --vine-op:.55; color-scheme:dark}
:root.t-light{
  --bg:#FAF7EE; --surface:#FFFFFF; --sunk:#F1ECDD; --accent:#7A1F3D; --grape:#C9C46E; --grape-stroke:#9C9640;
  --text:#2A2418; --muted:#6E6553; --line:#E4DCC6; --band:#EBD7DD; --pressed:#F6E9EA;
  --primary-bg:#7A1F3D; --primary-text:#FFFFFF; --secondary-bg:#FFFFFF; --secondary-border:#7A1F3D; --secondary-text:#7A1F3D; --chip-on-text:#FFFFFF;
  --good:#2F7A4B; --mid:#9A6B0E; --bad:#B3362F; --heart:#B3364F; --vine-op:.35; color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;background:var(--bg);color:var(--text);font-family:var(--body);font-size:var(--fs-body);line-height:1.45;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}
.app{position:relative;width:100%;max-width:560px;margin:0 auto;padding-inline:var(--gutter);padding-block:calc(10px + env(safe-area-inset-top,0px)) calc(110px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:clamp(14px,4.4vw,20px);min-height:100%;overflow:hidden;overflow:clip}
.app.full{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.18} h2{font-size:var(--fs-h2);line-height:1.25} h3{font-size:var(--fs-h3);line-height:1.3}
h1,h2,h3,p,dd,.t,li{overflow-wrap:anywhere}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:var(--fs-small);line-height:1.4} b,.b{font-weight:600}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stack{display:flex;flex-direction:column;gap:12px}
.stack.s4{gap:4px}.stack.s8{gap:8px}.stack.s16{gap:16px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row>.btn{flex:1 1 120px;width:auto}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0}
.between>*{min-width:0}
.wordmark{font-family:var(--display);color:var(--text)} .wordmark b{font-weight:400;color:var(--accent)}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(13px,4vw,20px);display:flex;flex-direction:column;gap:12px;min-width:0}
.card.hl{border:2px solid var(--accent)}
.btn{font:inherit;font-weight:600;font-size:var(--fs-body);line-height:1.25;min-height:var(--btn-h);border-radius:14px;border:2px solid var(--secondary-border);background:var(--secondary-bg);color:var(--secondary-text);padding:8px clamp(12px,4vw,18px);cursor:pointer;width:100%;max-width:100%;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none}
.btn:active{background:var(--pressed)}
.btn.primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-text)}
.btn.primary:active{opacity:.85}
.btn.quiet{background:transparent;border-color:transparent;color:var(--muted)}
.btn.sm{min-height:44px;font-size:var(--fs-small)}
.btn:disabled{opacity:.4;cursor:not-allowed}
:is(.btn,.opt,.chip,.tab,.berrybtn,.step,.wrow,.pick,.iconbtn,.qbtn,.linkish,.textbtn,summary,input,textarea,.seg button):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pill{display:inline-block;border:1px solid var(--muted);color:var(--muted);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.good{border-color:var(--good);color:var(--good)}.pill.mid{border-color:var(--mid);color:var(--mid)}.pill.bad{border-color:var(--bad);color:var(--bad)}
.pill.fill{background:var(--accent);border-color:var(--accent);color:var(--chip-on-text)}
.chip{font:inherit;font-size:var(--fs-small);font-weight:500;border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--chip-on-text)}
.chip .n{opacity:.75;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (min-width:440px){.wgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wgrid .chip{justify-content:center;padding:7px 4px}
.dot{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid var(--line);display:inline-block}
.opt{font:inherit;color:var(--text);text-align:left;min-height:var(--btn-h);width:100%;gap:10px;border-radius:14px;border:2px solid var(--line);background:var(--surface);padding:10px clamp(14px,4vw,18px);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.opt:active{background:var(--pressed)} .opt.on{border-color:var(--accent)}
.wrow{font:inherit;color:inherit;text-align:left;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;width:100%}
.wrow:active{background:var(--pressed)}
.wrow .t{font-weight:600}
.wrow .meta{flex:1;min-width:0}
.between>.wrow{flex:1 1 auto;width:auto}
.kv{display:grid;grid-template-columns:minmax(76px,auto) 1fr;gap:4px 12px;font-size:var(--fs-small);margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.progress{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}.progress i{display:block;height:100%;background:var(--accent)}
.banner{background:var(--pressed);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.input,textarea.input{font:inherit;font-size:max(16px,var(--fs-body));color:var(--text);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;min-height:50px;padding:10px 14px;width:100%}
textarea.input{min-height:84px;resize:vertical;line-height:1.4}
label.lab{font-size:var(--fs-small);color:var(--muted);font-weight:600}
.err{color:var(--bad);font-size:var(--fs-small)}
.okmsg{color:var(--good);font-size:var(--fs-small)}
/* Skalen */
.track{position:relative;height:24px}
.rail{position:absolute;inset:0;border-radius:12px;background:var(--sunk);overflow:hidden}
.inset{position:absolute;top:0;bottom:0;left:10px;right:10px}
.band{position:absolute;top:0;bottom:0;background:var(--band);border-radius:12px;min-width:8px}
.ideal{position:absolute;top:4px;bottom:4px;width:2px;margin-left:-1px;background:var(--accent)}
.wdot{position:absolute;width:12px;height:12px;border-radius:50%;margin-left:-6px;border:2px solid var(--surface)}
.marker{position:absolute;top:3px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--text);border:3px solid var(--surface)}
.ends{display:flex;justify-content:space-between;gap:6px;font-size:var(--fs-small);color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-small);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%}
.sw.band{position:static;width:16px;border-radius:3px;background:var(--band)}
.dimhead{display:flex;align-items:center;gap:8px;justify-content:space-between}
.dimhead .nm{display:flex;align-items:center;gap:6px;font-weight:600}
.qbtn{font:inherit;font-size:12px;font-weight:700;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;line-height:1}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,44px));gap:clamp(4px,1.6vw,8px)}
.step{font:inherit;font-weight:600;font-size:var(--fs-small);width:100%;aspect-ratio:1;max-height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
.step.below{background:var(--band)} .step.on{background:var(--accent);border-color:var(--accent);color:var(--chip-on-text)}
.linkish{font:inherit;font-weight:600;font-size:var(--fs-small);color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-align:left;text-decoration:none}
.textbtn{font:inherit;font-size:var(--fs-small);color:var(--muted);background:none;border:0;padding:4px;cursor:pointer}
/* Beeren */
.berries{display:flex;gap:4px;flex-wrap:nowrap}
.berries.big{display:grid;grid-template-columns:repeat(5,minmax(0,52px));gap:clamp(4px,2.4vw,12px);width:100%}
.berries.big .berrybtn svg{width:100%;height:auto}
.berrybtn{background:none;border:0;padding:2px;cursor:pointer;line-height:0;border-radius:12px;min-width:0}
.score{display:flex;align-items:center;gap:clamp(10px,4vw,18px);flex-wrap:wrap}
.big{font-family:var(--display);font-size:var(--fs-big);line-height:1;color:var(--accent);flex:none}
.reasons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small)}
.reasons li{display:grid;grid-template-columns:16px 1fr;gap:8px}
.ok{color:var(--good);font-weight:700}.warn{color:var(--mid);font-weight:700}.no{color:var(--bad);font-weight:700}
.spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--sunk);border-top-color:var(--accent);animation:sp 1s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}
.vine{position:absolute;pointer-events:none;opacity:var(--vine-op);color:var(--accent)}
:root.t-dark .vine{color:var(--grape-stroke)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not(.t-light) .vine{color:var(--grape-stroke)}}
:root[data-theme="dark"]:not(.t-light) .vine{color:var(--grape-stroke)}
.welcome{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(18px,6vw,32px);min-height:calc(100svh - 60px)}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.top .right{display:flex;align-items:center;gap:8px;min-width:0}
.iconbtn{font:inherit;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.iconbtn.on{color:var(--accent);border-color:var(--accent)}
.iconbtn svg{width:22px;height:22px}
.heart{font:inherit;background:none;border:0;padding:6px;cursor:pointer;color:var(--muted);line-height:0;border-radius:50%;flex:none}
.heart.on{color:var(--heart)}
.heart svg{width:22px;height:22px}
/* Segmente */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--sunk);border-radius:14px;padding:4px}
.seg button{font:inherit;font-weight:600;font-size:var(--fs-small);min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 4px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button svg{width:18px;height:18px;flex:none}
@media (max-width:370px){.seg button svg{display:none}}
.seg button.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* Weinkarte */
.top3{display:flex;flex-direction:column;gap:10px}
.pick{font:inherit;color:inherit;text-align:left;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(12px,3.8vw,18px);cursor:pointer}
.pick:active{background:var(--pressed)}
.pick>*{min-width:0;overflow-wrap:anywhere}
.pick .price{white-space:normal}
.card.hl .pick{padding:clamp(10px,3vw,18px);gap:4px clamp(8px,3vw,14px)}
.pick.first{border:2px solid var(--accent)}
.rank{font-family:var(--display);font-size:clamp(30px,9vw,40px);line-height:1;color:var(--accent);grid-column:1;grid-row:1 / span 6;min-width:1.1ch;text-align:center}
.pick>*:not(.rank){grid-column:2}
.pick .nm{font-weight:600;font-size:var(--fs-body);line-height:1.3;overflow-wrap:anywhere}
.pick .sc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pick .sc b{font-family:var(--display);font-weight:400;font-size:var(--fs-h3);color:var(--accent)}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.price{font-variant-numeric:tabular-nums;white-space:nowrap}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.who{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--fs-small);color:var(--muted)}
.who span{font-variant-numeric:tabular-nums}
.qr{background:#fff;border-radius:12px;padding:10px;width:min(220px,70vw);align-self:center;line-height:0}
.qr svg{width:100%;height:auto}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(22px,7vw,30px);letter-spacing:.18em;text-align:center;font-weight:700;color:var(--text)}
/* Flasche */
.bottle{flex:none;line-height:0}
.winehead{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
/* Wissen */
details.acc{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
details.acc>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:600}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"+";font-size:20px;color:var(--muted);font-weight:400}
details.acc[open]>summary::after{content:"–"}
details.acc .body{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-small)}
details.acc .body h4{margin:0;font-size:var(--fs-eyebrow);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lex{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.lex dt{font-weight:600}
.lex dd{margin:0 0 4px;color:var(--muted);font-size:var(--fs-small)}
.temps{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:var(--fs-small)}
.temps span:nth-child(even){font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
/* Tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:6px max(var(--gutter),env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:clamp(2px,1.4vw,6px);z-index:5}
.tab{font:inherit;font-size:clamp(10px,2.9vw,12.5px);font-weight:600;background:none;border:0;color:var(--muted);padding:7px 2px;border-radius:12px;cursor:pointer;flex:1 1 0;min-width:0;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab svg{width:clamp(20px,6vw,24px);height:clamp(20px,6vw,24px);flex:none}
.tab.on{color:var(--accent);background:var(--pressed)}

/* vinome.tech: Anmeldung */
.tabs[hidden]{display:none}
.checkrow{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-small);line-height:1.4}
.checkrow input{width:22px;height:22px;accent-color:var(--accent);flex:none;margin:1px 0 0}
.checkrow a,.legal a{color:var(--accent)}
.legal{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:var(--fs-small)}
.authwrap{max-width:440px;margin:0 auto;width:100%}
.hint{font-size:var(--fs-small);color:var(--muted)}