@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/inter-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/inter-latin-600-normal.woff2') format('woff2');}
/* ============================================================
   N4B Design System  ·  n4b.css  ·  v3
   Old Money trifft Apple UI. Eine Sans, gedaempfte Naturtoene,
   viel Ruhe, keine Effekthascherei.
   ============================================================ */
:root{
  color-scheme: light dark; /* Heller Standard, eigener gestalteter Dunkelmodus per Media Query unten */
  /* Untergrund */
  --bone:#f4f1ea; --bone-2:#ebe6da; --paper:#faf8f2;
  /* Tinte und Grau */
  --ink:#23241f; --ink-soft:#6c6a61; --ink-mute:#706c62;
  /* dunkles Feld */
  --dark:#1c1d18; --dark-2:#26271f;
  /* einziger Akzent: gedaempftes Moosgruen (Nature) */
  --moss:#55604c; --moss-2:#46513f;
  /* Schrift: nur Sans, kein Serif */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:var(--sans);
  --ease:cubic-bezier(.22,1,.3,1);
  /* Theme-Tokens (von JS umgeschaltet) */
  --pg:#f4f1ea; --fg:#23241f; --fg-soft:#6c6a61; --hair:rgba(35,36,31,.12); --edge:#857f74;
  /* Kompat-Aliasse fuer bestehende Seiten */
  --ivory:#f4f1ea; --ivory-2:#ebe6da; --raised:#faf8f2;
  --slate:#2a2c25; --slate-2:#23241f; --abyss:#1c1d18;
  --soft:#6c6a61; --soft-2:#706c62;
  --glacier:#6e7a66; --glacier-2:#55604c; --gold:#7d7459;
}

/* ---------- Gestalteter Dunkelmodus ---------- */
/* Untergrund wird warmes Dunkel, dunkle Sektionen werden angehobene Panels,
   Akzente aufgehellt. Alle Textkontraste gegen die Untergruende sind >= 4.5:1
   (bzw. >= 3:1 fuer Raender), geprueft nach WCAG. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bone:#181914; --bone-2:#20211a; --paper:#21221b;
    --ink:#eae7dc; --ink-soft:#a8a69c; --ink-mute:#9a988e;
    --dark:#262720; --dark-2:#2e2f25;
    --moss:#93a37d; --moss-2:#84956c;
    --pg:#181914; --fg:#eae7dc; --fg-soft:#a8a69c; --hair:rgba(234,231,220,.13); --edge:#928d81;
    --ivory:#181914; --ivory-2:#20211a; --raised:#21221b;
    --slate:#d9d6ca; --slate-2:#eae7dc; --abyss:#262720;
    --soft:#a8a69c; --soft-2:#9a988e;
    --glacier:#9aa787; --glacier-2:#93a37d; --gold:#b6a67f;
  }
  ::selection{background:var(--moss);color:#12130e;}
  /* Fotos: dezenter heller Schimmer statt dunklem Schlagschatten */
  .stage img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));}
  .btn:hover{background:#d8d5c9;}
  .btn--ivory{background:#eae7dc;color:#181914;}
  .btn--ivory:hover{background:#fff;}
  .dr-err{color:#e6857f;}
  .drawer{box-shadow:-1px 0 0 rgba(234,231,220,.1),-30px 0 80px rgba(0,0,0,.55);}
}
/* Logo-Farben robust ueber Klassen (kein currentColor, kein var-Attribut, damit auch Safari korrekt faerbt) */
.bi{fill:#23241f;}
.bk{fill:#f4f1ea;}
.bo{stroke:#23241f;fill:none;}
@media (prefers-color-scheme: dark){
  .bi{fill:#eae7dc;}
  .bk{fill:#181914;}
  .bo{stroke:#eae7dc;}
}
.ch-opt{display:block;width:100%;margin-top:10px;padding:8px 6px;background:none;border:none;color:var(--ink-mute);font-size:12.5px;font-family:inherit;letter-spacing:.01em;cursor:pointer;text-align:center;text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease);}
.ch-opt:hover{color:var(--fg);}
.cur-tog{display:inline-flex;align-items:center;border:1px solid var(--edge);border-radius:4px;overflow:hidden;}
.cur-btn{background:transparent;border:0;cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:500;letter-spacing:.03em;padding:4px 8px;color:var(--fg-soft);line-height:1.5;transition:background .25s,color .25s;}
.cur-btn.on{background:var(--fg);color:var(--pg);}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--pg); color:var(--fg);
  font-family:var(--sans); font-weight:400; line-height:1.55; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; text-align:center;
  transition:background-color 1s var(--ease), color 1s var(--ease);
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--ink);color:var(--bone);}
:focus-visible{outline:1.5px solid var(--moss);outline-offset:4px;}
.wrap{padding:0 clamp(24px,5vw,72px);max-width:1280px;margin:0 auto;}

/* reading progress */
.prog{position:fixed;top:0;left:0;height:1.5px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--moss);opacity:.5;z-index:300;pointer-events:none;}

/* loader */
.load{position:fixed;inset:0;background:var(--bone);z-index:400;display:flex;align-items:center;justify-content:center;transition:opacity 1s var(--ease),visibility 1s;}
.load.gone{opacity:0;visibility:hidden;}
.load{animation:loadfail .6s linear 9s forwards;}
@keyframes loadfail{to{opacity:0;visibility:hidden;}}
.load-in{display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3.2vw,34px);}
.load-badge{width:clamp(190px,44vw,290px);height:auto;color:var(--ink);opacity:.92;animation:loadbadge 1s var(--ease) both;}
.load-pct{font-size:12px;font-weight:500;letter-spacing:.28em;color:var(--ink-mute);font-variant-numeric:tabular-nums;padding-left:.28em;}
@keyframes loadbadge{from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:.92;transform:none;}}
html.loaded .load{display:none;}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;}
.nav::before{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--pg) 80%,transparent);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);border-bottom:1px solid transparent;opacity:0;transition:opacity .5s var(--ease),border-color .5s;}
.nav.shrink::before{opacity:1;border-bottom-color:var(--hair);}
.nav.hide{transform:translateY(-100%);transition:transform .55s var(--ease);}
.nav-in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px clamp(24px,5vw,72px);transition:padding .5s var(--ease);}
.nav.shrink .nav-in{padding:14px clamp(24px,5vw,72px);}
.nav-l,.nav-r{display:flex;gap:clamp(18px,2.4vw,34px);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft);align-items:center;}
.nav-r{justify-content:flex-end;}
.nav-l a,.nav-r a{position:relative;transition:color .3s;}
.nav-l a:hover,.nav-r a:hover,.nav-l a.on,.nav-r a.on{color:var(--fg);}
.nav-l a.on::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--moss);}
.brand{display:flex;align-items:center;justify-content:center;color:var(--fg);}
.logo{height:auto;width:auto;display:block;aspect-ratio:348.51/125.97;}
.brand .logo{height:20px;}
.nav.shrink .brand .logo{height:18px;}
.nav-cart{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:uppercase;padding:0;}
.nav-cart .dot{min-width:17px;height:17px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--moss);color:var(--bone);border-radius:9px;font-size:10px;font-weight:500;letter-spacing:0;}
@media(max-width:820px){.nav-l{display:none;}.nav-r{font-size:10px;gap:18px;}.brand .logo{height:18px;}}

/* type helpers */
.eye{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--moss);display:inline-block;}
.display{font-family:var(--sans);font-weight:500;line-height:1.04;letter-spacing:-.022em;}
.display .it{font-weight:300;color:var(--fg-soft);}
.lede{font-weight:300;color:var(--fg-soft);line-height:1.6;}

/* buttons (ruhig) */
.btn{position:relative;display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:16px 30px;border:none;cursor:pointer;border-radius:1px;transition:background .4s var(--ease),opacity .3s;white-space:nowrap;}
.btn:hover{background:#33342c;}
.btn .ar{display:inline-block;transition:transform .4s var(--ease);}
.btn:hover .ar{transform:translateX(4px);}
.btn:disabled{opacity:.5;cursor:default;}
.btn--line{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--edge);}
.btn--line:hover{background:var(--fg);color:var(--pg);box-shadow:inset 0 0 0 1px var(--fg);}
.btn--ivory{background:var(--bone);color:var(--ink);}
.btn--ivory:hover{background:#fff;}

/* matte bottle stage (kein Glow, kein Glanz) */
.stage{position:relative;}
.stage picture{display:block;width:100%;}
.stage img{display:block;width:100%;height:auto;border-radius:2px;filter:drop-shadow(0 20px 26px rgba(28,29,24,.12));}
.bottle{filter:drop-shadow(0 20px 26px rgba(28,29,24,.14));}
.stage .floor{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:54%;height:14px;background:radial-gradient(ellipse,rgba(28,29,24,.12),transparent 72%);z-index:-1;}

/* footer */
.foot{background:var(--dark);color:#ece7da;padding:clamp(64px,8vh,112px) 24px clamp(40px,5vh,60px);position:relative;overflow:hidden;--pg:#1c1d18;--edge:#767c6e;}
.foot-in{position:relative;z-index:1;max-width:1000px;margin:0 auto;}
.foot-logo{height:clamp(34px,5vw,52px);width:auto;aspect-ratio:348.51/125.97;color:#cfd2c6;opacity:.9;margin:0 auto clamp(20px,2.6vw,30px);}
.foot .bi{fill:#ece7da;}
.foot .bk{fill:#1c1d18;}
.foot-tag{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#8f968a;margin-bottom:clamp(30px,4vw,46px);}
.nlf{display:flex;gap:10px;max-width:430px;margin:0 auto clamp(30px,4vw,44px);flex-wrap:wrap;justify-content:center;}
.nlf input{flex:1;min-width:220px;background:transparent;box-shadow:inset 0 0 0 1px var(--edge);color:#ece7da;font-family:var(--sans);font-size:13px;padding:14px 18px;border:none;border-radius:1px;}
.nlf input::placeholder{color:#8f968a;}
.nlf input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--moss);}
.nlf #nlMsg{flex-basis:100%;font-size:11px;letter-spacing:.04em;color:#8f968a;min-height:1em;margin-top:4px;}
.foot-nav{display:flex;gap:clamp(18px,2.6vw,32px);justify-content:center;flex-wrap:wrap;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#8f968a;margin-bottom:clamp(18px,2.4vw,28px);}
.foot-nav a:hover{color:#ece7da;}
.foot-legal{display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap;font-size:10px;letter-spacing:.04em;color:#7a8074;margin-bottom:clamp(22px,2.8vw,30px);}
.foot-legal a:hover{color:#ece7da;}
.foot-fine{font-size:10.5px;line-height:1.8;color:#868c7f;max-width:64ch;margin:0 auto;padding-top:clamp(22px,2.8vw,30px);border-top:1px solid rgba(236,231,218,.12);}

/* cart drawer + toast */
.scrim{position:fixed;inset:0;background:rgba(28,29,24,.4);opacity:0;visibility:hidden;transition:opacity .45s;z-index:320;}
.scrim.open{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,93vw);background:var(--bone);color:var(--ink);z-index:330;transform:translateX(100%);transition:transform .55s var(--ease);display:flex;flex-direction:column;text-align:left;box-shadow:-30px 0 80px rgba(28,29,24,.16);}
.drawer.open{transform:none;}
.dr-top{display:flex;align-items:center;justify-content:space-between;padding:26px clamp(24px,4vw,32px);border-bottom:1px solid var(--hair);}
.dr-top h3{font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;}
.dr-x{background:none;border:none;cursor:pointer;font-size:24px;color:var(--ink-soft);line-height:1;}
.dr-x:hover{color:var(--ink);}
.dr-body{flex:1;overflow-y:auto;padding:6px clamp(24px,4vw,32px);}
.dr-empty{padding:56px 0;text-align:center;color:var(--ink-soft);font-weight:300;font-size:15px;letter-spacing:.02em;}
.dr-item{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:24px 0;border-bottom:1px solid var(--hair);}
.dr-item .nm{font-weight:500;font-size:15px;letter-spacing:-.01em;}
.dr-item .sz{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:3px;}
.dr-item .pr{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;align-self:start;}
.qty{display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px var(--edge);margin-top:10px;border-radius:1px;}
.qty button{width:32px;height:32px;background:none;border:none;cursor:pointer;font-size:15px;color:var(--ink);}
.qty button:hover{background:var(--bone-2);}
.qty span{min-width:30px;text-align:center;font-size:13px;font-weight:500;}
.dr-rm{grid-column:1/-1;justify-self:start;background:none;border:none;cursor:pointer;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);padding:2px 0;}
.dr-rm:hover{color:var(--ink);}
.dr-foot{padding:24px clamp(24px,4vw,32px);border-top:1px solid var(--hair);}
.dr-sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:18px;font-weight:500;}
.dr-sum .lbl{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.dr-note{font-size:11px;color:var(--ink-mute);margin-bottom:16px;letter-spacing:.03em;}
.dr-foot .btn{width:100%;justify-content:center;}
.dr-empty{padding:56px 0;text-align:center;}
.dr-empty p{color:var(--ink-soft);font-weight:300;font-size:15px;letter-spacing:.02em;margin-bottom:20px;}
.dr-trust{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-bottom:14px;}
.dr-trust span{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);}
.dr-trust span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--moss);flex-shrink:0;}
.dr-foot-links{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:10.5px;letter-spacing:.02em;}
.dr-foot-links a{color:var(--moss);text-decoration:underline;text-underline-offset:2px;}
.dr-foot-links span{color:var(--ink-mute);}
.dr-cross{margin-top:8px;padding-top:18px;border-top:1px solid var(--hair);}
.dr-cross-t{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;}
.dr-sug{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;}
.dr-sug .nm{font-weight:500;font-size:13px;letter-spacing:-.01em;}
.dr-sug .sz{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:2px;}
.dr-sug-add{width:32px;height:32px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--edge);background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--ink);transition:background .2s,color .2s;}
.dr-sug-add:hover{background:var(--ink);color:var(--pg);}
.dr-err{font-size:12px;color:#9a4b3b;margin-top:10px;text-align:center;min-height:1em;}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(160%);z-index:340;background:var(--ink);color:#ece7da;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:15px 24px;display:flex;align-items:center;gap:12px;border-radius:1px;transition:transform .55s var(--ease);max-width:90vw;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* reveal */
.rv{opacity:1;}
body.cine .rv{opacity:0;}

@media (prefers-reduced-motion:reduce){ *{animation:none!important;} }