/* ===== Geteilter Warenkorb-Drawer (auf jeder Seite) — von links, volle Hoehe ===== */
.cart-backdrop{position:fixed;inset:0;z-index:990;background:rgba(19,18,17,.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease;}
.cart-backdrop.open{opacity:1;visibility:visible;}

.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1000;
  height:100vh;height:100dvh;
  width:min(420px,calc(100vw - 46px));display:flex;flex-direction:column;
  border-radius:22px 0 0 22px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,255,255,.10);border-right:none;color:var(--paper);
  background:linear-gradient(160deg,rgba(21,23,26,.72) 0%,rgba(12,13,15,.9) 100%);
  -webkit-backdrop-filter:blur(32px) saturate(1.85);backdrop-filter:blur(32px) saturate(1.85);
  box-shadow:-24px 0 64px rgba(19,18,17,.46),inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.22,1,.36,1),visibility .42s;
}
.cart-drawer.open{transform:none;visibility:visible;}
.cart-drawer::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%);}
.cart-drawer > *{position:relative;z-index:1;}

.cd-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px;border-bottom:1px solid rgba(255,255,255,.08);flex:none;}
.cd-title{font-family:var(--sans);font-size:18px;font-weight:700;color:var(--paper);}
.cd-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:none;background:rgba(255,255,255,.06);color:var(--paper);cursor:pointer;transition:background .2s ease;}
.cd-close:hover{background:rgba(255,255,255,.14);}
.cd-close svg{width:16px;height:16px;}

.cd-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:16px;-webkit-overflow-scrolling:touch;}

.cd-prio{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:14px;background:rgba(31,107,80,.26);border:1px solid rgba(203,232,215,.24);}
.cd-prio-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--azur);color:var(--paper);font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.02em;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
.cd-prio-h{font-size:15px;font-weight:700;color:var(--paper);}
.cd-prio-s{font-size:14px;line-height:1.45;color:rgba(241,239,234,.72);margin-top:3px;}

.cd-item{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.05);}
.cd-thumb{position:relative;width:66px;height:66px;border-radius:12px;background:radial-gradient(circle at 40% 34%,rgba(203,232,215,.35),rgba(255,255,255,.02) 70%);display:flex;align-items:center;justify-content:center;flex:none;}
.cd-thumb img{width:82%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));}
.cd-thumb.pulse{animation:thumbpulse .34s cubic-bezier(.34,1.4,.5,1);}
@keyframes thumbpulse{45%{transform:scale(1.14);}}
.cd-thumb.ring::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:0 0 0 0 rgba(203,232,215,.55);animation:thumbring .55s ease-out;}
@keyframes thumbring{to{box-shadow:0 0 0 18px rgba(203,232,215,0);}}
.cd-it-col{min-width:0;}
.cd-it-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.cd-it-name{font-size:16px;font-weight:700;color:var(--paper);}
.cd-it-sub{font-size:14px;color:var(--azur-soft);margin-top:1px;}
.cd-it-unit{font-size:15px;font-weight:700;color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums;}
.cd-it-row2{display:flex;align-items:center;justify-content:space-between;margin-top:13px;}
.cd-it-line{font-size:16px;font-weight:800;color:var(--paper);font-variant-numeric:tabular-nums;}

.cd-step{display:inline-flex;align-items:center;gap:2px;border-radius:999px;background:rgba(255,255,255,.06);padding:3px;}
.cd-step button{width:34px;height:34px;border:none;background:transparent;color:var(--paper);font-size:19px;line-height:1;border-radius:999px;cursor:pointer;transition:background .18s ease;font-family:var(--sans);}
.cd-step button:hover:not(:disabled){background:rgba(255,255,255,.1);}
.cd-step button:disabled{opacity:.32;cursor:default;}
.cd-step output{min-width:26px;text-align:center;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;display:inline-block;}
.cd-step output.tick{animation:steptick .16s ease;}
@keyframes steptick{50%{transform:scale(1.16);}}

.cd-chips{display:flex;flex-wrap:wrap;gap:8px;}
.cd-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.05);font-size:13px;font-weight:600;color:rgba(241,239,234,.82);}
.cd-chip .ok{color:var(--azur-soft);font-weight:700;}

.cd-sum{display:flex;flex-direction:column;gap:9px;}
.cd-sum-row{display:flex;justify-content:space-between;font-size:15px;}
.cd-sum-row .lbl{color:var(--azur-soft);}
.cd-sum-row .val{color:var(--paper);font-variant-numeric:tabular-nums;}
.cd-sum-hr{height:1px;background:rgba(255,255,255,.08);margin:2px 0;}
.cd-sum-total{display:flex;justify-content:space-between;font-size:18px;font-weight:800;color:var(--paper);}
.cd-sum-total .val{font-variant-numeric:tabular-nums;}

.cd-foot{flex:none;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));}
.cd-cta{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:999px;background:var(--paper);color:var(--ink);border:1px solid var(--paper);font-family:var(--sans);font-weight:800;font-size:16px;letter-spacing:.005em;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.34);transition:transform .12s ease,background .2s ease;}
.cd-cta:hover{transform:translateY(-1px);background:#fff;}
.cd-cta:active{transform:translateY(1px);}
.cd-cta[disabled]{opacity:.7;cursor:default;}
.cd-qty-badge{position:absolute;top:-11px;right:18px;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--azur);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;border:2px solid var(--paper);box-shadow:0 3px 9px rgba(0,0,0,.4);}
.cd-ship{text-align:center;font-size:14px;color:var(--azur-soft);margin-top:11px;}
.cd-escape{display:block;text-align:center;font-size:14px;color:rgba(241,239,234,.55);text-decoration:underline;text-underline-offset:3px;margin-top:13px;background:none;border:none;width:100%;cursor:pointer;font-family:var(--sans);}
.cd-escape:hover{color:var(--paper);}

.fly-key{position:fixed;z-index:1100;pointer-events:none;will-change:transform;filter:drop-shadow(0 12px 20px rgba(0,0,0,.4));}
.cart-btn.bump{animation:cartbump .4s cubic-bezier(.34,1.4,.5,1);}
@keyframes cartbump{40%{transform:scale(1.18);}}

/* ===== Navbar-Zustand im offenen dunklen Menue (mnav) — sitewide ===== */
/* Navbar oben fixieren, damit die Announcement-Leiste sie im offenen Menue nicht */
/* nach unten schiebt und das Logo den ersten Menue-Link ("Der Key") ueberlappt. */
body.mnav-open .topbar{position:fixed;top:12px;left:50%;transform:translateX(-50%);margin-top:0;}
/* Warenkorb-Icon + Zaehler-Badge muessen auf dunklem graphite-Grund sichtbar sein: */
/* Icon hell (paper), Badge in hellerem Akzent (azur-soft) statt dunklem azur. */
body.mnav-open .cart-btn{color:var(--paper);}
body.mnav-open .cart-btn:hover{background:rgba(255,255,255,.12);}
body.mnav-open .cart-count{background:var(--azur-soft,#CBE8D7);color:var(--ink);}

@media (max-width:600px){
  .cart-drawer{width:min(400px,92vw);border-radius:20px 0 0 20px;}
  .cd-head{padding:15px 18px 11px;}
  .cd-body{gap:11px;padding:13px 18px;justify-content:center;}
  .cd-prio{padding:10px 12px;gap:10px;}
  .cd-prio-ic{width:30px;height:30px;font-size:12px;border-radius:9px;}
  .cd-prio-h{font-size:14px;}
  .cd-prio-s{font-size:12.5px;line-height:1.35;}
  .cd-item{padding:11px 12px;gap:12px;}
  .cd-thumb{width:54px;height:54px;}
  .cd-it-row2{margin-top:10px;}
  .cd-chips{gap:6px;}
  .cd-chip{font-size:11.5px;padding:5px 9px;}
  .cd-sum{gap:6px;}
  .cd-sum-total{font-size:17px;}
  .cd-foot{padding:13px 18px calc(11px + env(safe-area-inset-bottom,0px));}
  .cd-ship{font-size:12.5px;margin-top:9px;}
  .cd-escape{font-size:12.5px;margin-top:10px;}
}
@media (max-width:600px) and (max-height:720px){
  .cd-chips{display:none;}
  .cd-prio-s{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .cart-drawer{transition:opacity .25s ease,visibility .25s;transform:none;opacity:0;}
  .cart-drawer.open{opacity:1;}
  .cd-thumb.pulse,.cd-thumb.ring::after,.cd-step output.tick,.cart-btn.bump{animation:none;}
  .fly-key{display:none !important;}
}