/* =====================
   Chogan Partner Nicole & Florian – Styles
   ===================== */

/* Theme */
:root{
  --bg:#0b0c10; --card:#121318; --muted:#8a8f98; --fg:#f5f7fb; --accent:#229e41;
  --border:#414453; --danger:#ff6b6b; --ok:#2ecc71; --shadow:0 10px 30px rgba(0,0,0,.25);
  --btn-secondary: color-mix(in srgb,var(--bg) 86%, #000 0%); --header-h: calc(60px + env(safe-area-inset-top, 0px));
  --cart-thumb: 40px;   /* Bildgröße (anpassen nach Wunsch) */
  --cart-rm: 36px;      /* Größe des Papierkorb-Buttons */
  --cart-rm-pad: 56px;  /* Platz rechts für den fixen Papierkorb */
}

@media (max-width: 420px){
  :root{
    --cart-thumb: 36px;
    --cart-rm: 32px;
    --cart-rm-pad: 48px;
  }
  .item .rm{ right: 8px; top: 8px; }
}

/* Explicit dark variables to ensure reliable toggle */
html[data-theme="dark"]{
  --bg:#0b0c10; --card:#121318; --muted:#8a8f98; --fg:#f5f7fb; --accent:#229e41;
  --border:#414453; --danger:#ff6b6b; --ok:#2ecc71; --shadow:0 10px 30px rgba(0,0,0,.25);
  --btn-secondary: color-mix(in srgb,var(--bg) 86%, #000 0%); --header-h: calc(60px + env(safe-area-inset-top, 0px));
}
html[data-theme="light"]{
  --bg:#ebebeb; --card:#ffffff; --muted:#5f6673; --fg:#0f1117; --accent:#229e41;
  --border:#e6e9ef; --danger:#d9534f; --ok:#2e7d32; --shadow:0 12px 24px rgba(16,24,40,.08);
  --btn-secondary: color-mix(in srgb,#fff 98%, var(--border) 6%); --header-h: calc(60px + env(safe-area-inset-top, 0px));
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;color:var(--fg);background:var(--bg);min-height:100vh;min-height:100dvh;}
a{color:inherit}

.home-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.home-link:hover strong {
  text-decoration: underline;
  cursor: pointer;
}


/* Container */
.container{max-width:2400px;margin:0 auto;padding:20px}

/* Große Monitore: mehr Padding */
@media (min-width:1920px){.container{padding:24px 40px}}
@media (min-width:2560px){.container{padding:28px 60px}}

/* Utilities */
.row{display:flex;gap:12px;align-items:center}
.wrap{flex-wrap:wrap}
.gap8{gap:8px}
.gap10{gap:10px}
.gap14{gap:14px}
.gap16{gap:16px}
.center{align-items:center}
.between{justify-content:space-between}
.spacer{flex:1}
.small{font-size:14px}
.m0{margin:0}
.mb8{margin-bottom:8px}
.inline{display:inline;padding:4px 8px}
.w70{width:70px}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--border);margin:12px 0}

/* Inputs & Buttons */
.input, select, textarea{
  width:100%;background:color-mix(in srgb,var(--bg) 88%,#000 0%);
  border:1px solid var(--border);color:var(--fg);padding:10px 12px;border-radius:12px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--accent);color:#fff;font-weight:600;cursor:pointer;text-decoration:none;height:44px
}
.btn.secondary{background:var(--btn-secondary);color:var(--fg)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.icon{width:40px;height:40px;padding:0;height:40px}
.btn.full{width:100%}
.chip{border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px}

/* === Coupon-Layout: luftig, nie überlappend === */
.couponRow{
  /* override evtl. .row Flex */
  display: grid !important;
  grid-template-columns: 1fr 1fr;              /* 2 gleich breite Buttons */
  grid-template-areas:
    "field field"                               /* Eingabe volle Breite oben */
    "apply clear";                              /* Buttons darunter */
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.couponRow input{
  grid-area: field;
  min-width: 0;           /* verhindert Quetschen/Überlauf */
  height: 44px;
}

.couponRow #applyCoupon,
.couponRow #applyCouponSide{ grid-area: apply; }

.couponRow #clearCoupon,
.couponRow #clearCouponSide{ grid-area: clear; }

.couponRow .btn{
  height: 44px;
  white-space: nowrap;     /* kein Umbruch in Buttons */
}

/* Etwas mehr Luft unter dem Status */
#couponInfo,
#couponInfoSide{
  margin-top: 6px;
  min-height: 18px;        /* Layout bleibt ruhig, auch wenn leer */
}

/* Falls du eine „Karten“-Optik möchtest (optional, aber schick) */
.couponRow,
#couponInfo,
#couponInfoSide{
  /* liegen schon gut – Karte optional separat: */
}



/* Header */
.app-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  padding-top: constant(safe-area-inset-top, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);                 /* voll deckend, kein Parallax-Effekt */
  border-bottom: 1px solid var(--border);
  z-index: 5000;
   transform: none !important;
  will-change: auto !important;
  -webkit-backface-visibility: visible !important;
}



.app-header .container{padding:8px 16px}
body{ padding-top: var(--header-h, 60px); }
.hbar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.app-header #search{width:360px;max-width:40vw;height:44px}
.hsel{width:220px;height:44px}
.app-header.hide{
  transform: none !important;
  opacity: 1 !important;
}

/* ----- Responsive Brand (Desktop links, Mobile zentriert) ----- */
.app-header .brand{min-width:0; display:flex; align-items:center; gap:8px;}
.app-header .brand .brandName{
  font-weight:800;
  font-size: clamp(18px, 1.2vw + 16px, 28px);
  line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  hyphens:auto; word-break:break-word;     /* lange Worte umbrechen */
}
.app-header .brand .subtitle{
  color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Desktop: voller Button, Mobile: (optional) kompakt */
.shopFull{ display:inline-flex; }
.shopMini{ display:none; }

/* <= 900px: Brand mittig, 3 Zeilen, Buttons darunter mit Abstand */
@media (max-width:900px){
  .app-header .hbar{
    flex-wrap:wrap;
    justify-content:center;          /* Buttons zentrieren */
    align-items:flex-start;
    row-gap:8px;
  }
  .app-header .brand{
    flex:1 1 100%;
    display:grid;
    grid-auto-rows:min-content;
    justify-items:center;            /* Brand zentrieren */
    text-align:center;
    row-gap:2px;
  }
  .app-header .brand .brandName{
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;            /* bis zu 3 Zeilen */
    overflow:hidden;
    max-height:calc(1.15em * 3);     /* Fallback ohne line-clamp */
  }
  .app-header .brand .subtitle{
    font-size:12px;
    margin:0;
  }
  .app-header .hbar .spacer{ display:none; } /* keine harte Rechtsausrichtung */

  /* Buttons eine Zeile tiefer und leicht nach unten versetzt */
  .app-header .hbar > .btn,
  .app-header .hbar > #themeToggle{
    order:2;
    margin-top:6px;                  /* „etwas tiefer“ */
  }

  /* (optional) nur Icon-Shopbutton auf sehr kleinen Screens zeigen */
  .shopFull{ display:inline-flex; }
  .shopMini{ display:none; }
}

/* < 420px: Untertitel ausblenden für mehr Platz */
@media (max-width:420px){
  .app-header .brand .subtitle{ display:none; }
}

/* Index/Mobile: Hamburger auf die gleiche Linie/Höhe wie Theme-Toggle */
@media (max-width:900px){
  .app-header .hbar > #hamburgerBtn{
    order: 2;
    margin-top: 6px;  /* identisch zum Theme-Button */
  }
}
/* Einheitliche Icongrößen (falls noch nicht überall gesetzt) */
@media (max-width:680px){
  .app-header #themeToggle,
  .app-header #hamburgerBtn{
    width: 44px;
    height: 44px;
  }
}

/* Nichts mehr unter den fixen Header scrollen */
html, body, main, .app-content{
  scroll-padding-top: calc(var(--header-h, 60px) + 8px);
}
:where([id], .section-title, details){
  scroll-margin-top: calc(var(--header-h, 60px) + 8px);
}


/* Layout */
.layout{display:grid;grid-template-columns:1fr 360px;gap:16px;position:relative;z-index:1}

/* Sidecart bleibt stehen */
.rightCol .sideCart{
  position: sticky !important;
  top: calc(var(--header-h) + 20px);
  max-height: calc(100vh - (var(--header-h) + 10px)) !important;
  overflow: hidden !important;     /* Box selbst scrollt NIE */
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg) 96%, #000 0%);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  padding: 12px;
}

/* Standard: Liste scrollt NICHT */
#cartScrollSide{ flex:1 1 auto; min-height:0; overflow: visible; }

/* Wenn JS sagt "zu viele Positionen" → scrollen */
#sideCartBox.has-scroll #cartScrollSide{ overflow: auto; }



/* Sticky-Elemente innerhalb der Sidecart bleiben unten kleben */
.rightCol .sideCart .sticky-total{ position: sticky; bottom: 112px; }
.rightCol .sideCart .sticky-check{ position: sticky; bottom: 0; }



.sideCart.glow{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 60%,transparent) inset, var(--shadow)}

.sideCart .cart-list {
  max-height: none;  /* keine eigene Begrenzung mehr */
  overflow: visible; /* kein eigener Scroll mehr */
}

.sideCart .sticky-total {
  flex-shrink: 0;          /* bleibt unten fix */
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
@media (max-width:1200px){.layout{grid-template-columns:1fr}.rightCol{display:none}}

/* Grid – Products (Responsiv für alle Bildschirmgrößen) */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* 2K+ Monitore (2560px+): 6 Spalten */
@media (min-width:2560px){.grid{grid-template-columns:repeat(6,1fr);gap:24px}}

/* WQHD / große Monitore (1920px-2559px): 5 Spalten */
@media (min-width:1920px) and (max-width:2559px){.grid{grid-template-columns:repeat(5,1fr);gap:22px}}

/* Desktop groß (1600px-1919px): 4 Spalten */
@media (min-width:1600px) and (max-width:1919px){.grid{grid-template-columns:repeat(4,1fr);gap:20px}}

/* Desktop normal (1200px-1599px): 4 Spalten */
@media (min-width:1200px) and (max-width:1599px){.grid{grid-template-columns:repeat(4,1fr);gap:18px}}

/* Laptop / kleiner Desktop (1024px-1199px): 3 Spalten */
@media (min-width:1024px) and (max-width:1199px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}

/* Tablet (768px-1023px): 3 Spalten */
@media (min-width:768px) and (max-width:1023px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}

/* Tablet klein / großes Phone (560px-767px): 2 Spalten */
@media (min-width:560px) and (max-width:767px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}}

/* Phone (unter 560px): 1 Spalte */
@media (max-width:559px){.grid{grid-template-columns:1fr;gap:14px}}

@media (max-width:680px){.container{padding:16px}}

/* Card */
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .content{padding:16px;display:flex;flex-direction:column;min-height:260px;height:100%}
.meta{color:var(--muted);font-size:13px;line-height:1.5}

/* Controls */
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:12px;
  margin-bottom: 12px;
}
.controls .input.size{
  flex:1 1 240px;
  min-width:180px;
  height:44px;
}
.qty{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  overflow:visible;
}
.qty button{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;font-size:20px;line-height:1;padding:0;
}
.controls .detailsBtn{
  flex:0 0 auto;height:44px;padding:10px 14px;margin-left:auto;
}

.input.q::-webkit-outer-spin-button,
.input.q::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.input.q[type="number"]{ -moz-appearance:textfield; width:64px; text-align:center; }

/* Actions */
.actions{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap;justify-content:center}

@media (max-width:680px){
  .controls{gap:8px}
  .qty{justify-content:space-between}
}

/* Produktbilder: einheitlich für split & single */
.card .img{
  position:relative;
  width:100%;
  padding-top:50%;          /* gleiche Höhe für alle (weniger Zoom) */
  overflow:hidden;
}

/* Bild selbst: nie beschneiden, immer zentrieren */
.card .img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;       /* zeigt das ganze Bild */
  object-position:center;
  z-index:1;
  background: color-mix(in srgb, var(--bg) 94%, #000 0%); /* dezenter Rand */
}

/* Split-Layout: zwei Hälften nebeneinander */
.card .img.split .half{position:absolute; top:0; bottom:0; width:50%; overflow:hidden}
.card .img.split .left{left:0}
.card .img.split .right{right:0}

/* Mittlerer Separator nur bei split */
.card .img.split::after{
  content:"";
  position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  width:2px;
  background:rgba(12,1,1,.56);
  z-index:2; pointer-events:none;
}

/* Badge bleibt wie gehabt */
.badge{
  position:absolute; left:12px; top:12px;
  background:color-mix(in srgb,var(--bg) 85%,#000 0%);
  color:#ffd782; border:1px solid var(--border);
  border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; z-index:3;
}
html[data-theme="light"] .badge{ background:#111; color:#ffda7a; border-color:#00000022; }

/* OPTIONAL: wenn du die Höhe leicht anders willst, z.B. 56.25% (=16:9) */
/* .card .img{ padding-top:56.25%; } */


/* Sheet */
.sheet{position:fixed;inset:0;display:none;z-index:8000}
.sheet.open{display:block}
.sheet .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sheet .panel{position:absolute;right:0;top:0;bottom:0;width:520px;max-width:100%;background:color-mix(in srgb,var(--bg) 96%,#000 0%);border-left:1px solid var(--border);padding:18px;overflow:auto}
@media (max-width:680px){
  .sheet .panel{
    width:100%;
    border-left:none;
    top:0; bottom:0; height:100%;
    border-radius:0; border-top:none;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
  }
}

/* Cart lists */
.cart-list{margin-top:14px;display:grid;gap:12px}
.item{display:flex;gap:10px;border:1px solid var(--border);border-radius:14px;padding:10px;background:var(--card)}
.item img{
  width: var(--cart-thumb);
  height: var(--cart-thumb);
  object-fit: cover;
}
/* 2) Papierkorb immer fix rechts oben */
.item{ position: relative; }
.item .rm{
  position: absolute;
  right: 12px;
  top: 12px;
  width: var(--cart-rm);
  height: var(--cart-rm);
  z-index: 1;
}
/* Platz schaffen, damit nichts unter den Papierkorb läuft */
.item > :nth-child(2){ /* = der Content-Block rechts vom Bild */
  padding-right: var(--cart-rm-pad);
}

/* 3) Abstand zwischen Name und "ml • Preis • Code" kleiner */
.item .row + .muted{
  margin-top: 2px !important;   /* enger */
  line-height: 1.35;            /* kompakter */
  font-size: 12px;              /* bleibt klein/gleich */
}
.item .btn.icon{height:36px;width:36px}
.item .btn.secondary.icon{background:var(--btn-secondary);color:var(--fg)}
.promoList{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.promoLine{font-size:13px;color:var(--muted)}
.promoLine.active{color:var(--fg);font-weight:600}
.sticky-total{position:sticky;bottom:0;background:color-mix(in srgb,var(--bg) 96%,#000 0%);padding-top:8px;border-top:1px solid var(--border)}
@media (max-width:680px){.sticky-actions{position:sticky;bottom:0;background:color-mix(in srgb,var(--bg) 96%,#000 0%);padding:8px;border-top:1px solid var(--border)}#checkout{font-size:16px;padding:14px}}

/* ---------- Admin ---------- */
.table{width:100%}
#prodTable{width:100%;border-collapse:separate;border-spacing:0 12px}
#prodTable thead th{position:sticky; top:0; background:var(--bg); z-index:2; padding:8px 10px}
#prodTable tbody tr{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
#prodTable tbody tr td{padding:8px 10px;border-right:1px solid var(--border);vertical-align:top}
#prodTable tbody tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
#prodTable tbody tr td:last-child{border-right:none;border-top-right-radius:14px;border-bottom-right-radius:14px}
.saveBadge{opacity:0;transition:opacity .2s ease}
.saveBadge.show{opacity:1}

#adminApp .section{margin-top:20px;padding-top:12px;border-top:1px solid var(--border)}

.rulesGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.rulesGrid .chip{display:grid;grid-template-columns:auto auto 70px auto 70px auto;align-items:center;gap:8px}

.couponGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.couponGrid .row{gap:8px}
.couponCard{border:1px solid var(--border);border-radius:12px;padding:10px;background:color-mix(in srgb,var(--bg) 94%,#000 0%)}

.couponMsg{ margin-top:6px; }
.couponMsg.ok{ color: var(--ok); font-weight: 700; }     /* grün + fett */
.couponMsg.warn{ color:#f2c94c; font-weight:700; }
.couponMsg.err{ color: var(--danger); font-weight:700; }
/* Desktop-Feld (#couponInfoSide) ebenfalls grün + fett */
#couponInfoSide.ok,
.hint.ok,
.couponMsg.ok {
  color: var(--ok);
  font-weight: 700;
}



.modal{position:fixed;inset:0;display:none;z-index:9000}
.modal.open{display:block}
.modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:9000}
.modal .panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1100px;max-width:96vw;max-height:92vh;overflow:auto;background:color-mix(in srgb,var(--bg) 96%,#000 0%);border:1px solid var(--border);border-radius:16px;padding:16px;z-index:9001}

/* Admin „Top“-Button – sichtbar und über Panel */
#adminGoTop{
  position:fixed; right:26px; bottom:26px; z-index:9102;
  width:44px; height:44px; border-radius:999px; border:1px solid var(--border);
  background:var(--accent); color:#fff; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer;
}

/* Footer */
.app-footer{border-top:1px solid var(--border);margin-top:40px}

/* Public GoTop */
#goTop{position:fixed;right:16px;bottom:16px;background:var(--accent);color:#fff;border:none;border-radius:999px;width:44px;height:44px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:6000}
#goTop.show{opacity:1;pointer-events:auto}

/* Bump */
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(0.96)}100%{transform:scale(1)}}
.bump{animation:bump .45s ease}


/* ==== nur SHOP: Desktop/Standard ==== */
body.page-shop #filterUnifiedBtn { display: none; }  /* Icon nur mobil */
body.page-shop #filterUnified{
  position: static; opacity: 1; width: auto; height: auto;
  z-index: auto; appearance: auto;
}

/* ==== nur SHOP: Mobile Header-Layout (<= 680px) ==== */
@media (max-width: 680px){

  body.page-shop .app-header .container{ padding: 10px 12px; }

  body.page-shop .app-header .hbar{
    display: grid !important;
    grid-template-columns: 44px 1fr 44px 44px;
    grid-template-rows: 44px 44px;
    grid-template-areas:
      "menu brand brand cart"
      "search search filter theme";
    gap: 8px; align-items: center;
  }

  /* Bereiche */
  body.page-shop #hamburgerBtn{ grid-area: menu; }

  body.page-shop .app-header .brand{
    grid-area: brand; min-width:0; display:flex; justify-content:center; text-align:center;
  }
  body.page-shop .app-header .brand strong{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    overflow:hidden; white-space:normal; line-height:1.15; font-size:18px;
  }
  body.page-shop .app-header .brand .muted{ display:none; }  /* nur im Shop ausblenden */

  body.page-shop .cartIcon--mobile{ grid-area: cart; display:inline-flex !important; }
  body.page-shop .cartText{ display:none !important; }

  body.page-shop #search{
    grid-area: search;
    width: 100% !important; max-width:none !important; min-width:0 !important;
    height: 44px;
  }

  /* Filter: Button + transparentes Select in derselben Zelle */
  body.page-shop #filterUnifiedBtn{
    grid-area: filter; display:flex !important;
    position: relative; z-index: 2;
    align-items:center; justify-content:center;
    width:44px; height:44px; border:1px solid var(--border);
    border-radius:12px; background: var(--btn-secondary); color:var(--fg);
  }
  body.page-shop #filterUnifiedBtn svg{ pointer-events:none; fill:currentColor; }

  body.page-shop #filterUnified{
    grid-area: filter; position: relative; z-index: 3;
    width:100%; height:100%; margin:0; padding:0; opacity:0; appearance:none;
  }

  body.page-shop #themeToggle{ grid-area: theme; }

  /* einheitliche Icongrößen */
  body.page-shop .app-header .btn.icon,
  body.page-shop .btn.cartIcon.cartIcon--mobile,
  body.page-shop #themeToggle,
  body.page-shop #hamburgerBtn{ width:44px; height:44px; }

  /* alte order-Styles neutralisieren */
  body.page-shop #search,
  body.page-shop #filterUnifiedBtn,
  body.page-shop #openCart,
  body.page-shop #openCartMobile,
  body.page-shop #themeToggle,
  body.page-shop #hamburgerBtn{
    order: initial !important;
  }
}



/* ===== Mobile-Header-Optimierung ===== */
@media (max-width:680px){
  .app-header .container{ padding:10px 12px; }
  .app-header .hbar{ flex-wrap:wrap; gap:8px; align-items:center; }

  .app-header .brand{ min-width:0; flex:1 1 auto; height:44px; display:flex; align-items:center; gap:8px; }
  .app-header .brand strong{ display:block; max-width:100%; font-size:18px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .app-header .brand .muted{ display:none; }

  /* Reihenfolge auch mobil gleich wie Desktop */
  #search {
  order: 1 !important;
  flex: 1 1 auto;     /* wächst flexibel */
  min-width: 205px;   /* niemals kleiner */
  max-width: 210px;   /* optional: nicht zu groß */
}
  #filterUnified {
  position: absolute;
  opacity: 0;          /* unsichtbar */
  z-index: 9999;       /* ganz oben */
  width: 44px;
  height: 44px;        /* exakt wie der Button */
}

#filterUnifiedBtn {
  order: 2 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--btn-secondary);
  color: var(--fg);          /* Text/Icon passt sich an */
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s, color .2s;
}

#filterUnifiedBtn:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--btn-secondary) 85%);
  border-color: var(--accent);
  color: var(--fg);
}

#filterUnifiedBtn svg {
  pointer-events: none; /* Klicks gehen durch aufs Select */
  fill: currentColor;   /* nutzt Button-Farbe (dark/light) */
}

  #openCart      { order:3 !important; }
  #hamburgerBtn  { order:5 !important; }
  #themeToggle   { order:4 !important; }
}
/* Standard: Icon ausblenden */
#filterUnifiedBtn {
  display: none;
}



/* Mobile-only Header Tweaks */
.cartIcon--mobile{ display:none; }
.cartText{ display:inline-flex; }
@media (max-width:680px){
  .cartText{ display:none; }
  .cartIcon--mobile{ display:inline-flex; }

  .app-header .btn.icon, .btn.cartIcon.cartIcon--mobile{ width:44px; height:44px; }
  .app-header .btn svg{ display:block; }
}

/* WhatsApp Icon + Badge */
.btn.cartIcon{ position:relative; width:48px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background: var(--accent);}
.btn.cartIcon svg{ width:22px; height:22px; fill:#fff; }
.badge-dot{ position:absolute; top:-6px; right:-6px; background:#fff; color:#111; min-width:18px; height:18px; padding:0 5px; border-radius:999px; font-size:12px; font-weight:700; display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.25);}
.btn.cartIcon.has-items .badge-dot{ display:flex; }
.btn.cartIcon.cartIcon--mobile{ display:none !important; }
@media (max-width:680px){
  .btn.cartIcon.cartIcon--mobile{ display:inline-flex !important; }
  .cartText{ display:none !important; }
}
.app-header .hbar{ align-items:center; }
.app-header .brand{ display:flex; align-items:center; min-width:0; gap:8px; }
.app-header .brand strong{ display:block; line-height:1; }


/* Extra Abstand unter dem fixen Header – nur mobil */
@media (max-width:680px){
  /* +12px unter dem Header; bei Bedarf auf 16/20 erhöhen */
  body { padding-top: calc(var(--header-h) + 8px); }

  /* optional: noch ein Hauch Abstand vor dem Grid */
  .layout { margin-top: 8px; }      /* oder 8/10px nach Geschmack */
  /* falls du ganz gezielt nur das Grid schieben willst:
  #centerCol, .grid { margin-top: 8px; }
  */
}

/* ===== Hamburger-Menü (rechts einfahrend) ===== */
.hamburger{
  width:44px;height:44px;border:1px solid var(--border);
  border-radius:12px;background:var(--btn-secondary);color:var(--fg);
  display:inline-flex;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;cursor:pointer;position:relative;box-shadow:var(--shadow);
}
.hamburger .bar{width:20px;height:2px;background:currentColor;border-radius:2px}
.hamburger:focus{outline:2px solid color-mix(in srgb,var(--accent) 60%, transparent); outline-offset:2px}

/* Offcanvas Sheet */
.menu-sheet{position:fixed;inset:0;display:none;z-index:9500}
.menu-sheet.open{display:block}
.menu-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}

/* Panel fährt von rechts ein */
.menu-panel{
  position:absolute;right:0;top:0;bottom:0;width:360px;max-width:92vw;
  background:color-mix(in srgb,var(--bg) 96%,#000 0%);
  border-left:1px solid var(--border);
  box-shadow:var(--shadow);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column
}
.menu-sheet.open .menu-panel{ transform:translateX(0); }

.menu-head{padding:14px 16px;border-bottom:1px solid var(--border)}
.menu-dot{width:10px;height:10px;border-radius:999px;background:var(--accent)}
.menu-list{display:flex;flex-direction:column;padding:10px 12px;gap:8px}
.menu-item{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card);
  transition:all .15s ease;
}
.menu-item:hover{ 
  background:color-mix(in oklab, var(--accent), transparent 88%);
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
}
.menu-item:active{ transform:translateX(0); }
.menu-item.active{ 
  background:color-mix(in oklab, var(--accent), transparent 82%); 
  color:var(--accent); 
  font-weight:600;
  border-color:color-mix(in srgb, var(--accent) 40%, var(--border));
}
.menu-foot{padding:12px 16px;border-top:1px solid var(--border)}

/* Badge am mobilen Korb-Icon */
.badge-dot{
  position:absolute; top:-6px; right:-6px;
  background:#fff; color:#111; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; font-size:12px; font-weight:700; display:none;
  align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.btn.cartIcon.has-items .badge-dot{ display:flex; }

/* ===== Sizes as Chips (Light & Dark) ===== */
.sizeChips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sizeChip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--border);border-radius:999px;
  background:color-mix(in srgb,var(--bg) 86%, #000 0%); color:var(--fg);
  font-size:14px; line-height:1; cursor:pointer; user-select:none;
  transition:transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sizeChip .vol{font-weight:700}
.sizeChip .dot{opacity:.55}
.sizeChip .p{opacity:.95;font-weight:600}
.sizeChip:hover{transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sizeChip.selected{
  background: color-mix(in srgb, var(--accent) 18%, var(--bg) 82%);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
html[data-theme="light"] .sizeChip{
  background:color-mix(in srgb,#fff 94%, var(--border) 6%); color:var(--fg);
}
.sizeChips.shake{animation:sc-shake .4s ease}
@keyframes sc-shake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-3px)}100%{transform:translateX(0)}}

/* ===== Modernes Details-Modal (Light/Dark) ===== */
.infoModal{position:fixed;inset:0;display:none;z-index:9100;align-items:center;justify-content:center;padding:20px}
.infoModal.open{display:flex}
.infoModal .im-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}

.infoModal .im-card{
  position:relative;
  width:min(500px,94vw);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.4);
  display:grid;gap:16px;padding:0;color:var(--fg);
}

.infoModal .im-head{display:flex;align-items:center;gap:12px;padding:20px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.infoModal .im-title{margin:0;font-size:24px;font-weight:700;line-height:1.3;word-break:break-word}
.infoModal .im-code{
  border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:12px;
  background:color-mix(in srgb,var(--bg) 92%, #000 0%);color:var(--muted);white-space:nowrap
}

.infoModal .im-grid.onecol{
  display: block;
}
.infoModal .im-grid{display:block;padding:20px}
@media (max-width:860px){ .infoModal .im-grid{padding:16px} }

.infoModal .im-sizes{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.infoModal .im-size {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb,var(--bg) 60%, transparent);
}
.infoModal .im-size .vol { grid-column: 1; font-weight: 700; font-size: 15px; }
.infoModal .im-size .code { grid-column: 1; font-size: 12px; color: var(--muted); }
.infoModal .im-size .price { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 16px; text-align: right; color: var(--accent); }
.infoModal .im-size .stock { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--muted); text-align: right; }

.infoModal .im-freetext{
  font-size:14px;
  line-height:1.5;
  color:var(--fg);
  margin-top:8px;
  text-align:left;
}

.infoModal .im-sep{height:1px;background:var(--border);margin:6px 0}

.infoModal .im-meta{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:10px 14px;
  font-size:14px;
  line-height:1.55;
  padding:16px;
  background:color-mix(in srgb,var(--bg) 50%, transparent);
  border-radius:12px;
  border:1px solid var(--border);
}

.infoModal .im-meta .k{
  color:var(--muted);
}

.infoModal .im-meta b{
  color:var(--fg);
}


.infoModal .im-img{
  border:1px solid var(--border);border-radius:12px;
  background:color-mix(in srgb,var(--bg) 94%, #000 0%);
  display:flex;align-items:center;justify-content:center;min-height:240px;overflow:hidden;gap:6px;
}
.infoModal .im-img.one{justify-content:center}
.infoModal .im-img img{max-width:100%;max-height:380px;object-fit:contain}
.infoModal .im-img img.im-left{max-width:48%}
.infoModal .im-img img.im-right{max-width:52%}

.infoModal .im-foot{
  position:sticky;bottom:0;display:flex;justify-content:center;gap:10px;
  background:var(--card);
  padding:16px 20px;border-top:1px solid var(--border)
}
.infoModal .im-close{margin-left:auto}

/* Neue Layouts fürs Detailmodal */
.infoModal .im-grid{
  display:block;
  padding:20px;
}

.infoModal .im-leftcol{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.infoModal .im-imgrow{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.infoModal .im-imgrow .im-small{
  max-height:140px;
  max-width:140px;
  object-fit:contain;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--bg) 94%, #000 0%);
  padding:8px;
}

.infoModal .im-rightcol{
  border-left:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:16px;
}

.infoModal .im-text{
  font-size:15px;
  line-height:1.6;
  text-align:center;
  white-space:pre-line;
}

.infoModal .im-code{ display:none !important; }

.input.invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--danger) 35%, transparent);
}

.cart-list.shake { animation: sc-shake .4s ease; }

/* ===== Name + Checkout kompakt & sticky ===== */

/* gemeinsamer Wrapper unten im Sheet */
.sticky-actions{
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-top: 1px solid var(--border);
  padding: 10px 0 0;
}

/* mehr Luft um das Feld "Dein Name" */
#custName, #custNameSide{
  height: 48px;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 6px;
  margin-bottom: 10px; /* Abstand vor dem Button */
  font-size: 16px;
}

/* Label/Zeile optisch als Block */
label[for="custName"], label[for="custNameSide"]{
  display: block;
  margin-top: 8px;
  margin-bottom: 4px;
  font-weight: 600;
}

/* Pflichtstern dezenter Abstand */
label[for="custName"] span, label[for="custNameSide"] span{
  margin-left: 4px;
}

/* größere, komfortable Touch-Ziele für den Button */
#checkout, #checkoutSide{
  height: 50px;
  font-size: 16px;
  border-radius: 14px;
}

/* ---- Mobile Feinschliff ---- */
@media (max-width: 680px){
  .sticky-actions{
    padding: 10px 0 env(safe-area-inset-bottom, 10px);
  }
  #custName{
    margin-bottom: 10px;
  }
}

/* Invalid-State deutlicher */
.input.invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 35%, transparent);
}

.totop {
  --p: 0%; /* Scroll-Progress (wird per JS gesetzt) */
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
  z-index: 10000;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  background: #2e7d32; /* kräftiges Grün */
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .2s ease;
}

/* Progress-Ring */
.totop::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(#2e7d32 var(--p), rgba(46, 125, 50, .18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 65%, #000 66%);
          mask: radial-gradient(farthest-side, transparent 65%, #000 66%);
}

.totop.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.totop:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.totop:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


.mini-list{margin:6px 0 12px 0; padding:0; display:grid; gap:6px}
.mini-list li{list-style:none; display:flex; gap:8px; align-items:flex-start}
.mini-list li::before{content:"✓"; color:var(--ok); font-weight:800; margin-top:1px}
.btn.sm{height:36px; padding:0 10px; font-size:14px}
.btn.ghost{background:transparent}


#faqList details{border:1px solid var(--border);border-radius:12px;padding:10px;background:color-mix(in srgb,var(--bg) 92%, transparent)}
#faqList details+details{margin-top:8px}
#faqList summary{cursor:pointer;list-style:none}
#faqList summary::-webkit-details-marker{display:none}
#faqList summary::before{content:"▸";display:inline-block;margin-right:8px;transition:transform .15s ease}
#faqList details[open] summary::before{transform:rotate(90deg)}


/* dezentes Hover für die drei Spalten */
.card .content > .row > div{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card .content > .row > div:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}



/* Basis (falls noch nicht gesetzt) */
.badgebar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;            /* Abstand zwischen Chips */
  align-items:center;
  margin-top:10px;
}

/* deine Optik bleibt – nur Mobile-Tuning */
@media (max-width: 680px){
  .badgebar{ gap:8px; row-gap:6px; }            /* etwas enger */
  .badgebar .hbadge{
    font-size:12px;                             /* kompakter Text */
    padding:6px 10px;                           /* kleinere Chips */
  }
  /* Hover-Effekt auf Touch-Geräten neutralisieren */
  .badgebar .hbadge:hover{
    transform:none;
    box-shadow:none;
  }
}

/* Sehr kleine Screens: horizontales Scrollen statt mehrere Zeilen */
@media (max-width: 420px){
  .badgebar{
    flex-wrap: nowrap;                           /* in einer Zeile */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom:4px;                          /* Platz fürs (ausgeblendete) Scrollbar */
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  .badgebar::-webkit-scrollbar{ display:none; }  /* Scrollbar ausblenden (mobil) */
  .badgebar .hbadge{ flex: 0 0 auto; }           /* Chips nicht schrumpfen lassen */
}

/* (optional) wenn die Badge-Leiste innerhalb einer .row liegt → volle Breite */
.row.wrap.gap16 > .badgebar{ flex:1 1 100%; }






/* === Drei-Spalten-Block (Partner/Hersteller/Präsenz) =================== */
/* Desktop/Tablet: wie Mini-Karten mit klarer Abgrenzung */
.card .content > .row.wrap.gap16 > div{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 96%, #000 0%);
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;           /* für "Button am unteren Rand" */
  flex-direction: column;  /* wie in deinem Inline-Style */
  min-height: 240px;       /* gleichmäßige Höhe (anpassen) */
}

/* Überschrift + Abstände konsistenter */
.card .content > .row.wrap.gap16 > div h2{
  margin: 0 0 10px 0;
}
.card .content > .row.wrap.gap16 > div p{
  margin-top: 0;
}

/* dezenter Hover (passt zu deinem Stil weiter oben) */
.card .content > .row.wrap.gap16 > div{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card .content > .row.wrap.gap16 > div:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* ===== Mobile-Optimierung ===== */
@media (max-width: 680px){
  /* spürbarere Trennung: jede Spalte wie eigenständige Karte */
  .card .content > .row.wrap.gap16{ gap: 12px; }
  .card .content > .row.wrap.gap16 > div{
    padding: 14px;
    background: color-mix(in srgb, var(--bg) 94%, #000 0%);
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,.16);
  }

  /* CTAs unten: Hauptbutton volle Breite, Kopier-Icon daneben/Zeile drunter */
  .card .content > .row.wrap.gap16 > div .row.gap10{
    flex-wrap: wrap;
    gap: 8px;
  }
  .card .content > .row.wrap.gap16 > div .btn{
    width: 100%;
  }
  .card .content > .row.wrap.gap16 > div .btn.sm{
    width: auto;              /* kleines Kopier-Icon bleibt kompakt */
    margin-left: auto;        /* rutscht nach rechts */
  }

  /* Liste etwas kompakter */
  .card .content > .row.wrap.gap16 > div .mini-list{
    gap: 4px;
    margin-bottom: 10px;
  }

  /* (optional) Trennlinie unter jedem Kärtchen außer dem letzten */
  .card .content > .row.wrap.gap16 > div:not(:last-child){
    position: relative;
  }
  .card .content > .row.wrap.gap16 > div:not(:last-child)::after{
    content: "";
    display: block;
    height: 1px;
    background: var(--border);
    opacity: .6;
    margin-top: 10px;
    border-radius: 1px;
  }
}







/* WhatsApp-Shop Steps */
.steps{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  list-style:none;
  padding:0;
  margin-top:12px;
}
.steps li{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:10px;
  align-items:start;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--bg) 92%, transparent);
  padding:10px 12px;
}
.steps .n{
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  font-weight:800; color:#fff; background:var(--accent);
  margin-top:2px;
}
.steps .b{display:grid; gap:2px;}
.steps .t{font-weight:800}

/* 2 Spalten ab Tablet */
@media (min-width: 820px){
  .steps{ grid-template-columns:1fr 1fr; }
}

/* dezenter Hinweisabstand */
.hint-note{ margin-top:8px; }


/* Kopf der Vorschau-Auswertung */
.ps-head{ display:flex; align-items:center; gap:8px; margin:6px 0 8px; }
#previewSumToggle{ width:32px; height:32px; padding:0; border-radius:10px; font-weight:700; }


/* SHOP mobile: Theme oben links, Hamburger unten rechts */
@media (max-width:680px){
  body.page-shop .app-header .hbar{
    display:grid !important;
    grid-template-columns:44px 1fr 44px 44px;
    grid-template-rows:44px 44px;
    grid-template-areas:
      "theme brand brand cart"
      "search search filter menu" !important;
    gap:8px; align-items:center;
  }

  body.page-shop #themeToggle{  grid-area: theme !important; }
  body.page-shop #hamburgerBtn{ grid-area: menu  !important; }

  /* falls irgendwo per Flex-Order umsortiert wird → neutralisieren */
  body.page-shop #search,
  body.page-shop #filterUnifiedBtn,
  body.page-shop #openCart,
  body.page-shop #openCartMobile,
  body.page-shop #themeToggle,
  body.page-shop #hamburgerBtn{
    order: initial !important;
  }
}


/* Nur Impressum/Datenschutz: Start unter dem fixen Header */
body.page-legal{
  padding-top: calc(var(--header-h) + 8px);
  /* Falls zu knapp/zu viel: 8px nach Geschmack ändern */
}

/* Anker/„nach oben“-Sprünge berücksichtigen */
body.page-legal main,
body.page-legal :where([id]){
  scroll-padding-top: calc(var(--header-h) + 8px);
  scroll-margin-top:  calc(var(--header-h) + 8px);
}

/* ===== Mobile: Body ist der Scroller (inkl. Footer), Header sticky ===== */
@media (max-width:680px){
  html{
    height:100%;
    overflow:hidden; /* Window scrollt nicht */
  }
  body{
    height:100dvh;
    overflow:auto;                 /* <-- Body ist Scroller */
    display:flex;
    flex-direction:column;
    padding-top:0 !important;      /* kein Fix-Polster */
  }

  /* Header klebt innerhalb des Body-Scrollers */
  .app-header{
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 5000;

    /* Jitter-Fixes */
    transform:none !important;
    will-change:auto !important;
    -webkit-backface-visibility:visible !important;
  }

  /* main scrollt NICHT mehr selbst – Platz für Content */
  main.container{
    flex: 1 0 auto;
    min-height: 0;
    overflow: visible !important;  /* Body übernimmt scrollen */
    height: auto !important;       /* override früheres calc(...) */
  }

  /* Footer ist Teil des Scrollinhalts, erscheint erst unten */
  .app-footer{
    flex: 0 0 auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}



/* ==== Scrubber unten – kompakt + Prozent auf der Linie ==== */
.scroll-scrubber{
  position: fixed;
  left: clamp(8px, 2vw, 16px);
  right: clamp(8px, 2vw, 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 10050;
  display: grid;
  gap: 4px;
  padding: 6px 10px;            /* kompakter */
  background: color-mix(in srgb, var(--bg) 92%, #000 0%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: saturate(160%) blur(8px);
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0; transform: translateY(8px);
  pointer-events: auto;
}
.scroll-scrubber.is-visible{ opacity: 1; transform: translateY(0); }

.scroll-scrubber .ss-row{
  position: relative;
  display: grid;
  align-items: center;
  height: 24px;                 /* kompakte Zeilenhöhe */
}

/* Die Prozent-Bubble sitzt direkt auf der Linie/Thumb */
.ss-label-ontrack{
  position: absolute;
  left: var(--ss-x, 0%);        /* wird per JS gesetzt */
  top: 50%;
  transform: translate(-50%, -50%);  /* exakt mittig auf der Linie */
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 85%, #000 0%);
  color: var(--fg);
  border: 1px solid var(--border);
  pointer-events: none;         /* nicht anklickbar */
  white-space: nowrap;
}

/* Range schlank */
#ssRange{
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 20px;                 /* kompakter */
  background: transparent;
  cursor: pointer;
}

/* Track schlanker */
#ssRange::-webkit-slider-runnable-track{
  height: 6px;                  /* vorher 8px */
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 35%, var(--bg)) 0,
    color-mix(in srgb, var(--accent) 18%, var(--bg)) 100%);
  outline: 1px solid var(--border);
}
#ssRange::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 35%, var(--bg)) 0,
    color-mix(in srgb, var(--accent) 18%, var(--bg)) 100%);
  outline: 1px solid var(--border);
}

/* Thumb kleiner */
#ssRange::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;   /* vorher 18px */
  margin-top: -4px;            /* für 6px Track zentrieren */
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
#ssRange::-moz-range-thumb{
  width: 14px; height: 14px; border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Marker etwas dezenter/kleiner */
.ss-markers{ pointer-events: none; position: absolute; inset: 0; }
.ss-marker{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 10px; border-radius: 1px;
  background: color-mix(in srgb, var(--fg) 70%, transparent); opacity: .65;
}
.ss-marker.hot{ height: 14px; background: var(--accent); opacity: 1; }

/* „Nach oben“-Button nicht vom Scrubber überdecken */
.totop{
  bottom: calc(clamp(12px, 2vw, 24px) + var(--scrubber-offset, 0px) + env(safe-area-inset-bottom, 0px));
}


/* ==== Scrubber unten – kompakt, % IM Punkt, dezente Pfeile ==== */

/* Track + Container bleiben wie zuvor (dein .scroll-scrubber) */

/* Range schmal, echter Thumb unsichtbar (wir zeigen eigene Bubble) */
#ssRange{
  -webkit-appearance:none; appearance:none;
  width:100%; height:20px; background:transparent; cursor:pointer;
}
#ssRange::-webkit-slider-runnable-track,
#ssRange::-moz-range-track{
  height:6px; border-radius:999px;
  background: linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 35%, var(--bg)) 0%,
    color-mix(in srgb,var(--accent) 18%, var(--bg)) 100%);
  outline:1px solid var(--border);
}
/* Thumb unsichtbar – wir zeigen die Bubble */
#ssRange::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; margin-top:-4px; background:transparent; border:0; box-shadow:none; }
#ssRange::-moz-range-thumb{ width:14px; height:14px; background:transparent; border:0; box-shadow:none; }

/* Unsere „Thumb“-Bubble mit Prozentzahl */
.ss-bubble{
  position:absolute; left:var(--ss-x,0%); top:50%;
  transform:translate(-50%, -50%);
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  font-size:11px; font-weight:800; line-height:1;
  color:var(--fg);
  background: color-mix(in srgb, var(--bg) 90%, #000 0%);
  border:1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  pointer-events:none; /* Tippen/Drag bleibt auf dem Range */
}
#ssRange:focus-visible ~ .ss-bubble{
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 35%, transparent), 0 2px 10px rgba(0,0,0,.18);
}

/* Dezente Pfeile (Affordance), verschwinden nach erster Interaktion */
.ss-hint{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--muted); opacity:.35;
  user-select:none; pointer-events:none; transition:opacity .3s ease;
}
.ss-hint.left{ left:-4px; }
.ss-hint.right{ right:-4px; }
.scroll-scrubber.ss-seen .ss-hint{ opacity:0; }

/* Marker auf dem Track (wie gehabt, etwas dezenter) */
.ss-markers{ pointer-events:none; position:absolute; inset:0; }
.ss-marker{
  position:absolute; top:50%; transform:translate(-50%, -50%);
  width:2px; height:10px; border-radius:1px;
  background: color-mix(in srgb, var(--fg) 70%, transparent); opacity:.65;
}
.ss-marker.hot{ height:14px; background:var(--accent); opacity:1; }

/* „Nach oben“-Button nicht verdecken */
.totop{
  bottom: calc(clamp(12px, 2vw, 24px) + var(--scrubber-offset, 0px) + env(safe-area-inset-bottom, 0px));
}