/* THE WINE CLUB / Glas-Slider – Linse, die zwischen Tabs gleitet (Tab-Leiste und Kameramodi) */
.glass-seg{position:relative;isolation:isolate}
.glass-seg>button{position:relative;z-index:1}
.glass-lens{position:absolute;z-index:0;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/var(--n));border-radius:999px;pointer-events:none;
 transform:translateX(calc(var(--i)*100%));
 background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.28));
 box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 2px rgba(143,35,56,.12),0 6px 18px rgba(40,24,20,.14);
 backdrop-filter:blur(10px) saturate(1.6);-webkit-backdrop-filter:blur(10px) saturate(1.6);
 border:1px solid rgba(255,255,255,.7);
 animation:glassSlide .42s cubic-bezier(.3,1.35,.5,1) both}
.glass-lens:after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(120deg,rgba(255,120,150,.55),rgba(255,255,255,0) 30%,rgba(120,200,255,.45) 55%,rgba(255,255,255,0) 75%,rgba(255,210,120,.5));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.glass-lens.hidden{opacity:0}
@keyframes glassSlide{0%{transform:translateX(calc(var(--from,var(--i))*100%)) scaleX(1)}45%{transform:translateX(calc((var(--from,var(--i)) + (var(--i) - var(--from,var(--i)))*.6)*100%)) scale(1.18,.92)}100%{transform:translateX(calc(var(--i)*100%)) scale(1)}}
.glass-seg.pressing .glass-lens{animation:none;transform:translateX(calc(var(--i)*100%)) scale(1.12);transition:transform .18s ease}
.glass-seg.dragging .glass-lens{animation:none;transition:transform .1s ease-out;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.15))}
.glass-seg.dragging .glass-lens:after{opacity:1}

/* Tab-Leiste: sieben gleich breite Plätze, damit die Linse exakt sitzt. Namen und Reihenfolge bleiben. */
@media(max-width:800px){
 .mobile-nav.glass-seg{position:fixed!important;left:max(10px,calc(50% - 280px))!important;right:max(10px,calc(50% - 280px))!important;width:auto!important;max-width:none!important;margin:0!important;transform:none!important;translate:none!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;z-index:30!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;padding:6px!important;gap:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:rgba(255,255,255,.78)!important;backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8)}
 .mobile-nav.glass-seg .glass-lens{top:6px;bottom:6px}
 .mobile-nav.glass-seg .nav-item{min-width:0!important;width:100%!important;padding:8px 0!important;background:transparent!important;font-size:10px!important;transition:color .2s ease,transform .2s ease}
 .mobile-nav.glass-seg .nav-item.active{color:var(--wine,#8f2338)!important;font-weight:700}
 .mobile-nav.glass-seg .nav-item.active .ico{transform:scale(1.08)}
 .mobile-nav.glass-seg .nav-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .mobile-nav.glass-seg .mobile-pop{justify-self:center;position:relative;z-index:2}
}

/* ===== Kamera V2 ===== */
.cam2{position:fixed;inset:0;z-index:140;background:#000;display:flex;justify-content:center}
.cam2-screen{width:min(100%,560px);height:100dvh;display:flex;flex-direction:column;background:#000;padding:calc(10px + env(safe-area-inset-top)) 0 calc(14px + env(safe-area-inset-bottom))}
.cam2-stage{position:relative;flex:1;min-height:0;border-radius:26px;overflow:hidden;background:#141110}
.cam2-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam2-stage video.selfie-view{transform:scaleX(-1)}
.cam2-frame{position:absolute;inset:12% 6% 22%;pointer-events:none;transition:inset .3s ease}
.cam2-frame i{position:absolute;width:56px;height:56px;border:3px solid rgba(255,255,255,.95);border-radius:4px}
.cam2-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:28px}
.cam2-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:28px}
.cam2-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:28px}
.cam2-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:28px}
.cam2-frame.scan{inset:16% 18% 26%}
.cam2-frame.scan:after{content:"";position:absolute;left:8%;right:8%;height:2px;top:0;background:linear-gradient(90deg,transparent,#ff7d95,transparent);box-shadow:0 0 12px #ff7d95;animation:camScanLine 2.2s ease-in-out infinite}
@keyframes camScanLine{0%,100%{top:6%}50%{top:94%}}
.cam2-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px}
.cam2-top-right{display:flex;gap:10px}
.cam2-round{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;cursor:pointer;
 background:rgba(40,36,34,.42);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)}
.cam2-round.on{background:#fff;color:#1f1a17}
.cam2-status{align-self:center;max-width:52%;padding:8px 13px;border-radius:999px;background:rgba(40,36,34,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font:600 12px/1.3 'DM Sans',sans-serif;text-align:center}
.cam2-bar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 26px 22px;background:linear-gradient(transparent,rgba(0,0,0,.35))}
.cam2-gallery{justify-self:start;width:60px;height:60px}
.cam2-shutter{width:92px;height:92px;border-radius:50%;border:4px solid rgba(255,255,255,.9);background:transparent;padding:5px;cursor:pointer;display:grid;place-items:center}
.cam2-shutter span{display:block;width:100%;height:100%;border-radius:50%;background:#fff;transition:transform .12s ease,background .12s ease}
.cam2-shutter:active span{transform:scale(.88)}
.cam2-shutter.flash span{background:#ffe7ec}
.cam2-thumb{justify-self:end;position:relative;width:62px;height:82px;border-radius:12px;border:2px solid #fff;background:rgba(255,255,255,.18);overflow:hidden;padding:0;cursor:pointer}
.cam2-thumb.empty{opacity:.55}
.cam2-thumb img{width:100%;height:100%;object-fit:cover}
.cam2-thumb b{position:absolute;right:4px;bottom:4px;min-width:20px;height:20px;border-radius:99px;background:var(--wine,#8f2338);color:#fff;font:700 11px/20px 'DM Sans',sans-serif;text-align:center}
.cam2-thumb.pop{animation:thumbPop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes thumbPop{from{transform:scale(.6)}to{transform:scale(1)}}
.cam2-modes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:14px auto 0;width:min(calc(100% - 40px),440px);padding:6px;border-radius:999px;
 background:rgba(28,26,25,.9);border:1px solid rgba(255,255,255,.12);touch-action:pan-y}
.cam2-modes .glass-lens{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.35)}
.cam2-modes button{border:0;background:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0;font:600 12px/1.1 'DM Sans',sans-serif;cursor:pointer;min-width:0}
.cam2-modes button.on{color:#ff8fa3}
@media(max-height:680px){.cam2-shutter{width:76px;height:76px}.cam2-thumb{width:52px;height:68px}.cam2-round{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.glass-lens{animation:none}.cam2-frame.scan:after{animation:none}.cam2-thumb.pop{animation:none}}

/* Kein Markieren, kein Kontextmenü und kein Scrollen beim Halten/Ziehen auf den Glas-Leisten */
.glass-seg,.glass-seg *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.glass-seg>button{touch-action:none}
.cam2-modes{touch-action:none}

/* ===== Entdecken: runde Kategorie-Buttons ===== */
.cat-entry{margin:18px 0 26px}
.cat-entry h2{margin:0 0 6px;font:700 clamp(24px,5.6vw,30px)/1.15 'DM Sans',sans-serif!important;letter-spacing:-.03em!important}
.cat-entry p{margin:0 0 18px;font-size:15px;line-height:1.45;color:var(--muted,#6d625a)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:18px 10px}
.cat-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--ink,#1f1a17);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cat-orb{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(0,0,0,.04);box-shadow:0 6px 16px rgba(40,24,20,.07);transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .18s ease}
.cat-btn:hover .cat-orb{transform:translateY(-2px);box-shadow:0 10px 22px rgba(40,24,20,.1)}
.cat-btn:active .cat-orb{transform:scale(.92)}
.cat-btn:focus-visible{outline:none}
.cat-btn:focus-visible .cat-orb{outline:3px solid #e2a9b4;outline-offset:3px}
.cat-name{font:600 13px/1.2 'DM Sans',sans-serif;text-align:center}
.cat-champ{background:#f6ecd4;color:#a57c28}
.cat-white{background:#f7f2d9;color:#9c7a2b}
.cat-red{background:#f8e4e8;color:#8f2338}
.cat-rose{background:#fbe7ea;color:#c4546b}
.cat-wine{background:#f1e9e3;color:#6e1728}
.cat-whisky{background:#f5e6d3;color:#99602a}
.cat-gin{background:#e6f1ec;color:#2f6f57}
.cat-rum{background:#efe2d8;color:#7a4527}
.cat-vodka{background:#e8eef5;color:#40607f}
@media(min-width:801px){.cat-grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.cat-orb{transition:none}}

/* Tab-Leiste wie die Kamera-Modi: breite Glas-Kapsel um Symbol und Beschriftung, schimmernder Rand.
   Die Kapsel ist 1,34 × so breit wie ein Platz; am Rand bleibt sie in der Leiste (clamp). */
@media(max-width:800px){
 .mobile-nav.glass-seg .nav-item:before{display:none!important}
 .mobile-nav.glass-seg .glass-lens{
  top:5px;bottom:5px;width:calc((100% - 12px)/7*1.34);left:calc(6px - (100% - 12px)/7*.17);
  transform:translateX(clamp(calc(12.69% - 3px),calc(var(--i)*100%/1.34),calc(600%/1.34 - 12.69% + 3px)));
  animation:glassSlideNav .45s cubic-bezier(.3,1.35,.5,1) both;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.45));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 6px rgba(143,35,56,.08),0 8px 20px rgba(60,30,24,.16)}
 .mobile-nav.glass-seg .glass-lens:after{padding:1.5px;opacity:1;
  background:linear-gradient(115deg,rgba(255,110,145,.75),rgba(255,255,255,.1) 28%,rgba(120,190,255,.6) 52%,rgba(255,255,255,.1) 72%,rgba(255,200,110,.7))}
 .mobile-nav.glass-seg.pressing .glass-lens{animation:none;transform:translateX(clamp(calc(12.69% - 3px),calc(var(--i)*100%/1.34),calc(600%/1.34 - 12.69% + 3px))) scale(1.06);transition:transform .18s ease}
 .mobile-nav.glass-seg.dragging .glass-lens{animation:none}
 .mobile-nav.glass-seg .nav-item.active .ico{transform:none}
}
@keyframes glassSlideNav{
 0%{transform:translateX(clamp(calc(12.69% - 3px),calc(var(--from,var(--i))*100%/1.34),calc(600%/1.34 - 12.69% + 3px))) scale(1)}
 45%{transform:translateX(clamp(calc(12.69% - 3px),calc((var(--from,var(--i)) + (var(--i) - var(--from,var(--i)))*.6)*100%/1.34),calc(600%/1.34 - 12.69% + 3px))) scale(1.12,.94)}
 100%{transform:translateX(clamp(calc(12.69% - 3px),calc(var(--i)*100%/1.34),calc(600%/1.34 - 12.69% + 3px))) scale(1)}
}
@media(prefers-reduced-motion:reduce){.mobile-nav.glass-seg .glass-lens{animation:none}}