/* ══════════════════════════════════════════════════════════════
   GPeptides — zentrales Design-System (gp.css)
   Eine Datei für alle Seiten: Tokens, Layout, Nav, Footer,
   Cart-Drawer, Shop, Produktdetail, Konto, Content-/Rechtsseiten.
   ══════════════════════════════════════════════════════════════ */

:root{
  --cobalt:#2A41E8; --cobalt-deep:#1B2BC4; --cobalt-tint:#eaecff;
  --bone:#F3EEE3; --bone-soft:#E7E0D0; --ink:#14151C; --volt:#CBFF3A;
  --line:rgba(243,238,227,.22);
  --nav-h:64px;
  --ok:#16a34a; --ok-bg:#eafaef; --ok-line:#bfe6c8;
  --warn:#b45309; --err:#a12121; --err-bg:#fdeaea; --err-line:#f0b6b6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,sans-serif;background:var(--bone);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:clip;padding-top:var(--nav-h)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--volt);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--volt);outline-offset:3px;border-radius:8px}
.wrap{max-width:1600px;margin:0 auto;padding:0 clamp(20px,3vw,52px)}
img{max-width:100%}

/* ── Utility ── */
.ser{font-family:"Instrument Serif";font-style:italic;font-weight:400;text-transform:none}
.hide{display:none!important}
/* hidden-Attribut IMMER durchsetzen: Regeln wie .sumrow{display:flex} oder
   .badge{display:grid} schlagen sonst das UA-Stylesheet — dadurch standen
   z. B. die Ersparnis-Zeile („Ersparnis 0,00 €") und das Badge „0" dauerhaft
   im Warenkorb, obwohl gp.js sie per hidden ausblendet. */
[hidden]{display:none!important}
.lnk{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px}
.ph{background:#fff5cc;padding:1px 6px;border-radius:5px;font-size:.92em}

/* ══════════ SHARED NAV (von gp.js injiziert) ══════════ */
/* Header: kobaltblaue Leiste, GP·Peptides-Wortmarke, „Zum Shop"-CTA */
.gpnav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  background:var(--cobalt);color:var(--bone);
  border-bottom:1px solid rgba(243,238,227,.14)}
.gpnav-in{max-width:1280px;margin:0 auto;height:100%;padding:0 clamp(16px,3vw,44px);
  display:flex;align-items:center;gap:22px}
.gpnav .brand{display:flex;align-items:center;gap:10px;flex:none;font-family:"Archivo";font-weight:900;font-size:17px}
.gpnav .brand .mark{background:var(--bone);color:var(--cobalt);border-radius:10px;padding:5px 8px;font-size:13px;line-height:1}
.gpnav .brand b{font-family:"Archivo";font-weight:900;letter-spacing:-.01em}
.gpnav .brand b i{font-family:"Instrument Serif";font-style:italic;font-weight:400;letter-spacing:0}
.gpnav .links{display:flex;gap:20px;font-family:"Archivo";font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-left:4px}
.gpnav .links a{opacity:.85;transition:opacity .2s,color .2s;padding:6px 2px}
.gpnav .links a:hover,.gpnav .links a.active{opacity:1;color:var(--volt)}
.gpnav .right{display:flex;align-items:center;gap:10px;margin-left:auto}
.gpnav .cta{background:var(--bone);color:var(--ink);font-family:"Archivo";font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.02em;padding:11px 18px;border-radius:999px;transition:transform .2s,background .2s;white-space:nowrap}
.gpnav .cta:hover{transform:translateY(-1px);background:#fff}

/* Sprach-Dropdown */
.gplang{position:relative}
.gplang-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--bone);
  border:1.5px solid rgba(243,238,227,.35);border-radius:999px;padding:9px 13px;
  font-family:"Archivo";font-weight:800;font-size:12px;letter-spacing:.04em;transition:border-color .2s}
.gplang-btn:hover{border-color:var(--bone)}
.gplang-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.gplang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:#fff;color:var(--ink);
  border:1.5px solid var(--bone-soft);border-radius:14px;box-shadow:0 18px 40px -18px rgba(20,21,28,.4);
  padding:6px;display:none;z-index:120}
.gplang-menu.open{display:block}
.gplang-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
  padding:10px 12px;border-radius:9px;font-family:"Archivo";font-weight:700;font-size:13px;color:var(--ink);text-align:left}
.gplang-menu button:hover{background:var(--cobalt-tint)}
.gplang-menu button.active{background:var(--ink);color:var(--bone)}
.gplang-menu button .fl{font-size:15px;width:20px;text-align:center}
.gplang-menu button .nm{flex:1}
.gplang-menu button .cd{font-size:10px;opacity:.5;letter-spacing:.08em}

/* Cart-Button — Ghost auf der Kobalt-Leiste (hebt sich vom „Zum Shop"-CTA ab) */
.gpcart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--bone);
  font-family:"Archivo";font-weight:800;font-size:12px;letter-spacing:.02em;text-transform:uppercase;
  padding:9px 13px;border-radius:999px;border:1.5px solid rgba(243,238,227,.35);transition:border-color .2s}
.gpcart-btn:hover{border-color:var(--bone)}
.gpcart-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.gpcart-btn .badge{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--volt);color:var(--ink);
  font-size:10.5px;font-weight:800;display:grid;place-items:center}
.gpcart-btn .badge.pulse{animation:gp-pulse .4s ease}
@keyframes gp-pulse{50%{transform:scale(1.35)}}
/* align-items + justify-content statt place-items: der Knopf ist ein
   Flex-Container (display:flex weiter unten), und dort wird das in
   place-items enthaltene justify-items schlicht ignoriert. Die Striche
   waren dadurch waagerecht mittig, senkrecht aber am oberen Rand — sie
   sassen sichtbar zu hoch im Ring. */
.gpburger{width:42px;height:42px;border-radius:999px;border:1.5px solid rgba(243,238,227,.28);display:none;
  align-items:center;justify-content:center;background:transparent;cursor:pointer;flex-direction:column;gap:4px}
.gpburger span{display:block;width:15px;height:1.6px;background:var(--bone);border-radius:2px}
.gpmob{position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;background:var(--ink);color:var(--bone);
  display:none;flex-direction:column;padding:10px 22px 18px;border-bottom:1px solid rgba(243,238,227,.12)}
.gpmob.open{display:flex}
.gpmob a{padding:13px 4px;font-family:"Archivo";font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid rgba(243,238,227,.08)}
.gpmob a:last-child{border-bottom:none}

/* ══════════ CART DRAWER (von gp.js injiziert, performant) ══════════ */
.gpov{position:fixed;inset:0;background:rgba(13,18,60,.55);opacity:0;visibility:hidden;
  transition:opacity .26s ease,visibility 0s linear .26s;z-index:140}
.gpov.open{opacity:1;visibility:visible;transition:opacity .26s ease}
.gpdrawer{position:fixed;top:0;right:0;height:100dvh;width:min(430px,93vw);background:var(--bone);color:var(--ink);
  z-index:150;transform:translateX(102%);transition:transform .3s cubic-bezier(.32,.72,.28,1);
  display:flex;flex-direction:column;box-shadow:-18px 0 50px -22px rgba(13,18,60,.45);
  will-change:transform;contain:layout style}
.gpdrawer.open{transform:translateX(0)}
.gpdrawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px;border-bottom:1px solid var(--bone-soft);flex:none}
.gpdrawer .dhead h2{font-family:"Archivo";font-weight:900;font-size:19px;text-transform:uppercase;letter-spacing:-.01em}
.gpdrawer .dhead h2 i{font-family:"Instrument Serif";font-style:italic;font-weight:400;text-transform:none;color:var(--cobalt)}
.gpdrawer .close{width:36px;height:36px;border-radius:999px;border:1.5px solid var(--bone-soft);background:none;color:var(--ink);display:grid;place-items:center;font-size:18px}
.gpdrawer .ditems{flex:1;overflow-y:auto;padding:12px 22px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.gpdrawer .dempty{text-align:center;color:#8a8578;font-size:14px;padding:46px 0}
.gpdrawer .dempty a{display:inline-block;margin-top:12px;color:var(--cobalt);font-weight:700}
.ditem{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--bone-soft);border-radius:14px;padding:10px}
.ditem .ip{width:48px;height:48px;border-radius:9px;background:linear-gradient(160deg,#3550ee,#1f2fbf);display:grid;place-items:center;flex:none;overflow:hidden}
.ditem .ip svg{width:24px}
.ditem .ip img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.ditem .info{flex:1;min-width:0}
.ditem .info h4{font-family:"Archivo";font-weight:800;font-size:13px}
.ditem .info span{font-size:11px;color:#8a8578;display:block}
.ditem .info b{display:block;font-family:"Archivo";font-weight:900;font-size:14px;margin-top:2px;color:var(--cobalt)}
.ditem .qty{display:flex;align-items:center;gap:8px}
.ditem .qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--bone-soft);background:#fff;color:var(--ink);font-weight:800;font-size:14px;line-height:1}
.ditem .qty span{font-family:"Archivo";font-weight:800;font-size:13px;min-width:16px;text-align:center}
.ditem .rm{background:none;border:none;color:#b9b3a5;font-size:11px;text-decoration:underline;padding:4px 0 0}
/* BAC-Water-Hinweis im Warenkorb (nur wenn keins im Korb liegt) */
.gpbac{display:flex;align-items:center;gap:11px;background:var(--cobalt-tint);border:1.5px solid rgba(42,65,232,.25);
  border-radius:14px;padding:11px 13px;margin-top:2px;animation:gpbac-in .35s cubic-bezier(.22,.8,.28,1) both}
@keyframes gpbac-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gpbac .ico{width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:18px;flex:none}
.gpbac .tx{flex:1;min-width:0;line-height:1.3}
.gpbac .tx b{display:block;font-family:"Archivo";font-weight:800;font-size:12.5px;color:var(--cobalt-deep)}
.gpbac .tx span{font-size:11px;color:#5a5f7a}
.gpbac button{flex:none;background:var(--cobalt);color:#fff;font-family:"Archivo";font-weight:800;font-size:11.5px;
  letter-spacing:.02em;padding:9px 13px;border-radius:10px;border:none;white-space:nowrap;transition:background .2s,transform .2s}
.gpbac button:hover{background:var(--cobalt-deep);transform:translateY(-1px)}

.gpdrawer .dfoot{padding:16px 22px 20px;border-top:1px solid var(--bone-soft);flex:none;background:var(--bone)}
.zonesel{width:100%;padding:11px 36px 11px 14px;border:1.5px solid var(--bone-soft);border-radius:10px;font-size:13px;
  font-family:"Archivo";font-weight:700;color:var(--ink);background:#fff;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;margin-bottom:12px}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:13px;color:#666}
.sumrow.save{color:var(--ok);font-weight:700}
.sumrow .cnt{font-weight:600;color:#a09a8c;font-size:12px}
/* Stueckzahl + durchgestrichener Originalpreis in der Warenkorb-Position */
.ditem .info h4 em{font-style:normal;font-weight:700;color:#8a8578;font-size:12px}
.ditem .info b s{color:#a09a8c;font-weight:600;font-size:11.5px;margin-left:5px}
.sumrow.total{font-family:"Archivo";font-weight:900;font-size:22px;color:var(--ink);margin:8px 0 14px}
.sumrow.total b{color:var(--cobalt)}
.rconfirm{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:#555;margin:2px 0 12px;cursor:pointer}
.rconfirm input{margin-top:1px;accent-color:var(--cobalt);width:16px;height:16px;flex:none}
.rconfirm span{flex:1}.rconfirm b{color:var(--ink);font-weight:700}
.gpcheckout{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:var(--bone);
  font-family:"Archivo";font-weight:900;font-size:14px;letter-spacing:.02em;text-transform:uppercase;padding:15px;border-radius:14px;border:none;transition:transform .2s,box-shadow .2s}
.gpcheckout:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(20,30,120,.45)}
.gpcheckout:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.gpcheckout .c{width:28px;height:28px;border-radius:999px;background:var(--volt);color:var(--ink);display:grid;place-items:center}
.dnote{font-size:10.5px;color:#999;text-align:center;margin-top:10px;line-height:1.4}
.gptoast{position:fixed;bottom:24px;left:50%;transform:translate3d(-50%,16px,0);background:var(--ink);color:var(--bone);
  font-family:"Archivo";font-weight:700;font-size:13px;padding:12px 20px;border-radius:999px;z-index:160;opacity:0;
  transition:opacity .22s,transform .22s;pointer-events:none;max-width:92vw}
.gptoast .vd{color:var(--volt)}
.gptoast.show{opacity:1;transform:translate3d(-50%,0,0)}

/* ══════════ FOOTER (von gp.js injiziert) ══════════ */
.gpfooter{padding:46px 0 34px;margin-top:56px}
.gpfooter .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--bone-soft);padding-top:28px}
.gpfooter .fb{font-family:"Archivo";font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:-.01em}
.gpfooter .fb i{font-family:"Instrument Serif";font-style:italic;font-weight:400;text-transform:none;color:var(--cobalt)}
.gpfooter .fb small{display:block;font-size:11px;font-weight:600;color:#8a8578;text-transform:none;letter-spacing:.02em;margin-top:4px}
.gpfooter nav{display:flex;gap:8px 26px;flex-wrap:wrap;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#555;max-width:560px}
.gpfooter nav a:hover{color:var(--ink)}
.gpfooter .disclaimer{margin-top:24px;font-size:11px;color:#888;line-height:1.5;max-width:660px}
.gpfooter .disclaimer b{color:var(--ink);font-family:"Archivo";font-weight:800;letter-spacing:.04em}
.gpfooter .copy{margin-top:14px;font-size:11px;color:#a09a8c}

/* ══════════ CONTENT-/RECHTSSEITEN ══════════ */
.top{background:var(--cobalt);color:var(--bone);position:relative;overflow:hidden}
.top::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(120% 130% at 82% 0%,#000 34%,transparent 80%);
          mask-image:radial-gradient(120% 130% at 82% 0%,#000 34%,transparent 80%)}
.phero{position:relative;z-index:2;max-width:1600px;margin:0 auto;padding:clamp(30px,4.5vw,54px) clamp(20px,3vw,52px)}
.phero h1{font-family:"Archivo";font-weight:900;text-transform:uppercase;font-size:clamp(38px,6vw,72px);line-height:.88;letter-spacing:-.03em}
.phero h1 i{font-family:"Instrument Serif";font-style:italic;font-weight:400;text-transform:none;color:var(--volt)}
.phero p{margin-top:14px;max-width:560px;font-size:15px;line-height:1.55;opacity:.9}
/* Typografisches Label statt Pille-mit-Punkt: ruhiger und weniger Baukasten. */
.eyebrow{display:inline-flex;align-items:center;gap:13px;font-family:"Archivo";font-weight:800;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--bone);opacity:.78;margin-bottom:18px}
.eyebrow .dot{width:28px;height:1.5px;background:var(--volt);flex:none}
.content{max-width:860px;margin:0 auto;padding:clamp(28px,4vw,44px) clamp(20px,3vw,52px) 30px}
.content h2{font-family:"Archivo";font-weight:900;font-size:21px;letter-spacing:-.01em;margin:26px 0 10px}
.content h2 i{font-family:"Instrument Serif";font-style:italic;font-weight:400;color:var(--cobalt)}
.content h3{font-family:"Archivo";font-weight:800;font-size:15.5px;margin:18px 0 6px}
.content p,.content li{font-size:14.5px;line-height:1.65;color:#3a3b42}
.content ul{margin:6px 0 10px 20px}
.content table.ck{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
.content table.ck th,.content table.ck td{border:1px solid var(--bone-soft);padding:8px 10px;text-align:left}
.content table.ck th{background:#efe9dc;font-family:"Archivo";font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.cinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 26px}
.cinfo .ci{background:#fff;border:1.5px solid var(--bone-soft);border-radius:14px;padding:18px}
.cinfo .ci b{display:block;font-family:"Archivo";font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#6a665c;margin-bottom:5px}
.cinfo .ci span{font-size:14px;font-weight:600}
.cform>div{margin-bottom:14px}
.cform label{display:block;font-family:"Archivo";font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#666;margin-bottom:6px}
.cform input,.cform textarea,.cform select{width:100%;border:1.5px solid var(--bone-soft);border-radius:10px;padding:12px 14px;font-size:14.5px;font-family:inherit;background:#fff;outline:none}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--cobalt)}
.cform textarea{min-height:110px;resize:vertical}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bone);
  font-family:"Archivo";font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:uppercase;
  padding:14px 24px;border-radius:12px;border:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.5)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn .c{width:26px;height:26px;border-radius:999px;background:var(--volt);color:var(--ink);display:grid;place-items:center;font-size:15px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.msg{display:none;padding:15px 17px;border-radius:12px;font-size:14px;font-weight:600;margin-top:12px}
.msg.ok{display:block;background:var(--ok-bg);border:1.5px solid var(--ok-line);color:#2c6e1f}
.msg.err{display:block;background:var(--err-bg);border:1.5px solid var(--err-line);color:var(--err)}

/* ══════════ SHOP ══════════ */
.shopbar{position:sticky;top:var(--nav-h);z-index:30;background:rgba(243,238,227,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bone-soft)}
.shopbar-in{max-width:1600px;margin:0 auto;padding:12px clamp(18px,3vw,52px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--bone-soft);border-radius:999px;
  padding:10px 16px;flex:1 1 220px;min-width:180px;max-width:340px}
.search svg{width:16px;height:16px;stroke:#8a8578;fill:none;stroke-width:2;flex:none}
.search input{background:none;border:none;outline:none;color:var(--ink);font-size:14px;width:100%}
.search input::placeholder{color:#a09a8c}
.search .clr{background:none;border:none;color:#a09a8c;font-size:15px;line-height:1;padding:0 2px;display:none}
.search.has .clr{display:block}
.sortwrap{display:flex;align-items:center;gap:8px;margin-left:auto}
.sortwrap label{font-family:"Archivo";font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a8578}
.sortsel{padding:10px 32px 10px 13px;border:1.5px solid var(--bone-soft);border-radius:10px;background:#fff;
  font-family:"Archivo";font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232A41E8" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.sortsel:focus{outline:none;border-color:var(--cobalt)}
/* Kategorien: sichtbare, umbrechende Chips mit Zähler – alles klickbar */
.catrow{max-width:1600px;margin:0 auto;padding:4px clamp(18px,3vw,52px) 12px;display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:"Archivo";font-weight:700;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;
  background:#fff;border:1.5px solid var(--bone-soft);color:var(--ink);padding:9px 13px;border-radius:999px;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;cursor:pointer}
.chip:hover{border-color:var(--cobalt)}
.chip.active{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.chip .n{font-size:10px;background:var(--cobalt-tint);color:var(--cobalt-deep);border-radius:999px;min-width:20px;height:18px;
  display:inline-grid;place-items:center;padding:0 5px;font-weight:800}
.chip.active .n{background:rgba(243,238,227,.2);color:var(--bone)}
.count{font-family:"Archivo";font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8a8578;padding:20px 0 0}
.grid{padding:14px 0 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{position:relative;background:#fff;border:1.5px solid var(--bone-soft);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-5px);border-color:var(--cobalt);box-shadow:0 26px 50px -24px rgba(42,65,232,.5)}
.vstage{position:relative;aspect-ratio:1/.92;background:linear-gradient(165deg,#3550ee,#1f2fbf);overflow:hidden;display:grid;place-items:center}
.vstage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(243,238,227,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(243,238,227,.14) 1px,transparent 1px);background-size:34px 34px;opacity:.5}
.vstage .bb{position:absolute;font-family:"Bagel Fat One";color:#fff;opacity:.1;font-size:150px;line-height:.8;right:-6%;bottom:-22%;pointer-events:none}
.vstage .vm{position:relative;z-index:2;width:46%;transform:rotate(-7deg);filter:drop-shadow(0 16px 18px rgba(8,12,60,.5))}
.vstage .prodimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.card:hover .prodimg{transform:scale(1.05);transition:transform .5s}
@media(prefers-reduced-motion:no-preference){
  .card:hover .vm{animation:rockcard 2.4s ease-in-out infinite}
  @keyframes rockcard{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-7px)}}
}
.badges{position:absolute;z-index:3;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bdg{font-family:"Archivo";font-weight:800;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 9px;border-radius:8px;box-shadow:0 8px 16px -8px rgba(8,12,60,.5)}
/* Akzente auf den Karten: Kobalt statt Neongruen/Schwarz — das vertraegt sich
   mit den hellen Studio-Produktfotos deutlich besser. */
.bdg.best{background:var(--cobalt);color:#fff}
.bdg.pre{background:#fff;color:var(--cobalt);border:1.5px solid var(--cobalt);box-shadow:0 8px 16px -10px rgba(8,12,60,.4)}
.bdg.low{background:#fff;color:var(--warn);border:1px solid #f3d19a}
.bdg.save{background:var(--cobalt-tint);color:var(--cobalt-deep);border:1px solid #ccd3fb}
.bdg.cat{background:var(--bone);color:var(--ink)}
.purbadge{position:absolute;z-index:3;top:12px;right:12px;font-family:"Archivo";font-weight:800;font-size:9.5px;
  letter-spacing:.04em;background:rgba(255,255,255,.9);color:var(--cobalt-deep);border:1px solid rgba(42,65,232,.22);
  padding:5px 9px;border-radius:8px;backdrop-filter:blur(6px)}
.card .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .body h3{font-family:"Archivo";font-weight:800;font-size:17px;letter-spacing:-.01em}
.card .body h3 a{color:inherit}
.card .body .sub{font-size:12px;color:#8a8578;margin-top:-6px}
.hplcmini{display:flex;align-items:center;gap:8px;background:#f4f3ff;border:1px solid #e4e6ff;border-radius:10px;padding:7px 10px}
.hplcmini svg{height:20px;flex:1}
.hplcmini .trace{fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linejoin:round}
.hplcmini b{font-family:"Archivo";font-weight:800;font-size:11px;color:var(--cobalt);letter-spacing:.02em}
.vsel{width:100%;padding:9px 30px 9px 11px;border:1.5px solid #ddd6c6;border-radius:10px;background:#fff;
  font-family:"Archivo";font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232A41E8" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px}
.vsel:focus{outline:none;border-color:var(--cobalt)}
.crow{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.price-wrap{display:flex;flex-direction:column;line-height:1.1}
.price{font-family:"Archivo";font-weight:900;font-size:21px}
.price-old{text-decoration:line-through;font-size:12.5px;color:#a09a8c}
.price-from{font-size:10px;color:#8a8578;font-family:"Archivo";font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.add{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--bone);font-family:"Archivo";
  font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:12px 15px;border-radius:11px;border:none;transition:background .2s,transform .2s}
.add:hover{background:var(--cobalt);transform:translateY(-1px)}
.add .p{width:18px;height:18px;border-radius:6px;background:rgba(243,238,227,.18);color:var(--bone);display:grid;place-items:center;font-size:13px;line-height:1}
.add.big{font-size:13px;padding:0 26px;min-height:48px;border-radius:12px}
.soldout{position:absolute;inset:0;background:rgba(20,21,28,.55);display:grid;place-items:center;z-index:4;
  font-family:"Archivo";font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;backdrop-filter:grayscale(1)}
.empty{grid-column:1/-1;text-align:center;color:#8a8578;padding:60px 0;font-size:14px}

/* ══════════ PRODUKT-DETAIL ══════════ */
.pcrumb{display:flex;align-items:center;gap:9px;padding:16px clamp(20px,3vw,52px);font-family:"Archivo";font-size:12px;font-weight:700;color:var(--bone);opacity:.95;position:relative;z-index:2;max-width:1600px;margin:0 auto}
.pcrumb a{opacity:.7;transition:opacity .2s}.pcrumb a:hover{opacity:1}
.pcrumb span{opacity:.4}.pcrumb b{color:var(--volt)}
.ploading,.pnf{text-align:center;padding:80px 20px;color:#8a8578;font-family:"Archivo";font-weight:700}
.pnf h2{font-size:24px;color:var(--ink);margin-bottom:8px}.pnf p{font-weight:400;margin-bottom:18px}
.phero-p{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,60px);align-items:start;margin-bottom:48px}
.pvis{position:relative;aspect-ratio:1/1;background:linear-gradient(165deg,#3550ee,#1f2fbf);border-radius:24px;display:grid;place-items:center;overflow:hidden;box-shadow:0 30px 70px -30px rgba(20,30,120,.6)}
.pvis .vm{width:42%;transform:rotate(-6deg);filter:drop-shadow(0 20px 24px rgba(8,12,60,.5))}
.pvis .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ppur{position:absolute;top:16px;right:16px;z-index:3;font-family:"Archivo";font-weight:800;font-size:11px;
  background:rgba(255,255,255,.92);color:var(--cobalt-deep);border:1px solid rgba(42,65,232,.22);
  padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.psold{position:absolute;top:16px;left:16px;z-index:3;background:#dc2626;color:#fff;font-family:"Archivo";font-weight:800;font-size:11px;padding:6px 12px;border-radius:999px}
.pinfo{padding-top:6px}
.ptag{font-family:"Archivo";font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin-bottom:10px}
.pname{font-family:"Archivo";font-weight:900;font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;line-height:1.02;margin-bottom:8px}
.psub{font-size:15px;color:#6a665c;margin-bottom:20px}.psub .ppre{color:var(--cobalt)}
.pblurb{font-size:15.5px;line-height:1.65;color:#3a3b42;margin-bottom:26px;max-width:52ch}
.ppricerow{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}
.pprice{font-family:"Archivo";font-weight:900;font-size:34px;letter-spacing:-.02em;color:var(--ink)}
.pprice-old{font-size:18px;color:#aaa;text-decoration:line-through}
.punit{font-size:13px;color:#8a8578;font-weight:600}
.pfield{margin-bottom:20px}
.pfield label{display:block;font-family:"Archivo";font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6a665c;margin-bottom:8px}
.pfield .vsel{width:100%;max-width:320px}
.pbuy{display:flex;gap:12px;align-items:stretch;margin-bottom:22px;flex-wrap:wrap}
.pqty{display:inline-flex;align-items:center;border:1.5px solid var(--bone-soft);border-radius:12px;overflow:hidden;background:#fff}
.pqty button{width:42px;min-height:48px;background:none;border:none;font-size:20px;font-weight:700;color:var(--ink)}
.pqty button:hover{background:var(--cobalt-tint)}
.pqty input{width:46px;text-align:center;border:none;outline:none;font-family:"Archivo";font-weight:800;font-size:16px;background:none}
/* Vertrauensleiste: saubere Icon-Chips statt Emojis */
.ptrust{display:flex;gap:9px;flex-wrap:wrap;font-family:"Archivo";font-weight:700;font-size:11.5px;color:#4a4740}
.ptrust span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--bone-soft);
  border-radius:999px;padding:9px 14px}
.ptrust svg{width:15px;height:15px;flex:none;stroke:var(--cobalt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.psections{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.psec{background:#fff;border:1.5px solid var(--bone-soft);border-radius:18px;padding:26px 28px}
.psec.full{grid-column:1/-1}
.psec h2{font-family:"Archivo";font-weight:900;font-size:18px;letter-spacing:-.01em;margin-bottom:14px}
.psec p{font-size:14.5px;line-height:1.65;color:#3a3b42}
.pnotes{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px}
.pnotes li{position:relative;padding-left:24px;font-size:14px;color:#3a3b42;line-height:1.5}
.pnotes li::before{content:"✓";position:absolute;left:0;top:0;color:var(--cobalt);font-weight:900;font-family:"Archivo"}
.pspecs{width:100%;border-collapse:collapse}
.pspecs td{padding:10px 0;border-bottom:1px solid #efe9dc;font-size:14px}
.pspecs td:first-child{font-family:"Archivo";font-weight:700;color:#6a665c;width:42%}
.pspecs td:last-child{font-weight:600;color:var(--ink)}
.pspecs tr:last-child td{border-bottom:none}
.pfaq details{border-bottom:1px solid #efe9dc;padding:12px 0}.pfaq details:last-child{border-bottom:none}
.pfaq summary{font-family:"Archivo";font-weight:700;font-size:14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"+";font-size:18px;color:var(--cobalt);flex:none}
.pfaq details[open] summary::after{content:"−"}
.pfaq details p{margin-top:10px;font-size:13.5px;color:#3a3b42;line-height:1.6}
.pdisc{grid-column:1/-1;display:flex;align-items:flex-start;gap:11px;background:var(--cobalt-tint);border:1.5px solid #c7cdf5;border-radius:14px;padding:16px 20px;font-size:13px;font-weight:600;color:var(--cobalt-deep);line-height:1.55}
.pdisc svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* COA-Karte im Produktdetail */
.pcoa{display:flex;gap:16px;align-items:center;background:#f7f9ee;border:1.5px solid #dfe8c2;border-radius:14px;padding:14px 16px;margin-top:14px;flex-wrap:wrap}
.pcoa .sig{flex:1;min-width:180px}
.pcoa .sig svg{width:100%;height:44px;display:block}
.pcoa .sig .ctr{fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linejoin:round}
.pcoa .kv{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:#4b5320;line-height:1.7}
.pcoa .kv b{color:var(--ink)}
.pcoa .go{font-family:"Archivo";font-weight:800;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--cobalt);white-space:nowrap}
.reltitle{font-family:"Archivo";font-weight:900;font-size:22px;letter-spacing:-.02em;margin:54px 0 20px}
.relgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.relcard{background:#fff;border:1.5px solid var(--bone-soft);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:block}
.relcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(20,21,28,.3)}
.relvis{aspect-ratio:1/.82;background:linear-gradient(165deg,#3550ee,#1f2fbf);display:grid;place-items:center;overflow:hidden}
.relvis .vm{width:42%;transform:rotate(-6deg)}.relvis img{width:100%;height:100%;object-fit:cover}
.relbody{padding:13px 15px 15px}
.relbody h4{font-family:"Archivo";font-weight:800;font-size:14px;margin-bottom:3px}
.relbody span{font-size:11.5px;color:#8a8578;display:block;margin-bottom:7px}
.relbody b{font-family:"Archivo";font-weight:900;font-size:15px}

/* ══════════ KONTO ══════════ */
.acct{max-width:1200px;margin:0 auto;padding:clamp(26px,4vw,42px) clamp(20px,3vw,52px) 30px}
.acct-login{max-width:520px;margin:0 auto}
.acct-card{background:#fff;border:1.5px solid var(--bone-soft);border-radius:20px;padding:clamp(22px,3vw,32px)}
.acct-card h2{font-family:"Archivo";font-weight:900;font-size:20px;margin-bottom:6px}
.acct-card .hint{font-size:13.5px;color:#6a665c;line-height:1.55;margin-bottom:18px}
.acct-grid{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
.acct-rail{position:sticky;top:calc(var(--nav-h) + 18px);display:flex;flex-direction:column;gap:6px}
.acct-rail button{display:flex;align-items:center;gap:11px;width:100%;background:#fff;border:1.5px solid var(--bone-soft);
  border-radius:13px;padding:13px 15px;font-family:"Archivo";font-weight:800;font-size:12.5px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);text-align:left;transition:border-color .15s,background .15s}
.acct-rail button:hover{border-color:var(--cobalt)}
.acct-rail button.active{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.acct-rail button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.acct-rail button .n{margin-left:auto;font-size:10px;background:var(--cobalt-tint);color:var(--cobalt-deep);border-radius:999px;min-width:20px;height:18px;display:inline-grid;place-items:center;padding:0 5px}
.acct-rail button.active .n{background:var(--volt);color:var(--ink)}
.acct-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.acct-head h2{font-family:"Archivo";font-weight:900;font-size:24px;letter-spacing:-.01em}
.acct-head h2 i{font-family:"Instrument Serif";font-style:italic;font-weight:400;color:var(--cobalt)}
.acct-head .who{font-size:13px;color:#6a665c}
.acct-head .who b{color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.tile-s{background:#fff;border:1.5px solid var(--bone-soft);border-radius:16px;padding:18px}
.tile-s b{font-family:"Archivo";font-weight:900;font-size:26px;display:block;color:var(--cobalt);letter-spacing:-.02em}
.tile-s span{font-size:11.5px;font-family:"Archivo";font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#8a8578}
.order{background:#fff;border:1.5px solid var(--bone-soft);border-radius:18px;padding:20px 22px;margin-bottom:14px}
.order .ohead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.order .ohead .oid{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:#8a8578}
.order .ohead .odate{font-family:"Archivo";font-weight:800;font-size:14px}
.order .ohead .osum{font-family:"Archivo";font-weight:900;font-size:17px;color:var(--cobalt)}
.ostatus{display:inline-flex;align-items:center;gap:7px;font-family:"Archivo";font-weight:800;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.ostatus .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.ost-received{background:#eef0ff;color:#4338ca}.ost-preparing{background:#fef3c7;color:#92400e}
.ost-shipped{background:#dbeafe;color:#1d4ed8}.ost-delivered{background:#dcfce7;color:#15803d}
.ost-cancelled{background:#fee2e2;color:#b91c1c}
.otimeline{display:flex;gap:0;margin:14px 0 8px}
.otl{flex:1;position:relative;text-align:center}
.otl::before{content:"";position:absolute;top:8px;left:0;right:0;height:2.5px;background:var(--bone-soft)}
.otl:first-child::before{left:50%}.otl:last-child::before{right:50%}
.otl .pt{position:relative;z-index:1;width:17px;height:17px;margin:0 auto;border-radius:50%;background:#fff;border:2.5px solid var(--bone-soft)}
.otl.done .pt{background:var(--cobalt);border-color:var(--cobalt)}
.otl.done::before{background:var(--cobalt)}
.otl.now .pt{background:var(--volt);border-color:var(--ink)}
.otl small{display:block;margin-top:6px;font-family:"Archivo";font-weight:700;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:#8a8578}
.otl.done small,.otl.now small{color:var(--ink)}
.oitems{border-top:1px solid #efe9dc;margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:7px}
.oitems .oi{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.oitems .oi span{color:#3a3b42}.oitems .oi b{font-family:"Archivo";font-weight:700}
.oact{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.oact .obtn{display:inline-flex;align-items:center;gap:7px;font-family:"Archivo";font-weight:800;font-size:11.5px;
  letter-spacing:.03em;text-transform:uppercase;padding:10px 15px;border-radius:10px;border:1.5px solid var(--bone-soft);
  background:#fff;color:var(--ink);transition:border-color .15s,background .15s}
.oact .obtn:hover{border-color:var(--cobalt)}
.oact .obtn.pri{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.oact .obtn.pri:hover{background:var(--cobalt)}
.addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.addr{background:#fff;border:1.5px solid var(--bone-soft);border-radius:16px;padding:18px}
.addr b{font-family:"Archivo";font-weight:800;font-size:13px;display:block;margin-bottom:8px}
.addr p{font-size:13.5px;line-height:1.6;color:#3a3b42}
.addr .tagd{display:inline-block;font-size:9.5px;font-family:"Archivo";font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--cobalt-tint);color:var(--cobalt-deep);border-radius:6px;padding:3px 7px;margin-bottom:8px}
.coalib{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.coalib .cc{background:#fff;border:1.5px solid var(--bone-soft);border-radius:16px;padding:18px;transition:border-color .15s,transform .15s}
.coalib .cc:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.coalib .cc h4{font-family:"Archivo";font-weight:800;font-size:15px;margin-bottom:2px}
.coalib .cc .bt{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#a09a8c}
.coalib .cc .pu{font-family:"Archivo";font-weight:900;font-size:20px;color:var(--cobalt);margin:8px 0 2px}
.coalib .cc a{font-family:"Archivo";font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--cobalt)}
.emptybox{background:#fff;border:1.5px dashed var(--bone-soft);border-radius:16px;padding:36px 24px;text-align:center;color:#8a8578;font-size:14px}
.emptybox a{color:var(--cobalt);font-weight:700}

/* ══════════ LABOR (COA-Bereich) ══════════ */
.lab-hero .stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px}
.lab-hero .stats .s b{font-family:"Archivo";font-weight:900;font-size:26px;letter-spacing:-.02em;color:var(--volt)}
.lab-hero .stats .s span{display:block;font-size:12px;color:rgba(243,238,227,.78);font-family:"Archivo";font-weight:700;text-transform:uppercase;letter-spacing:.05em}
/* auto-fit: vertraegt 3, 4 oder 5 Kacheln ohne Layout-Bruch */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin:14px 0 46px}
.how .tile{background:#fff;border:1.5px solid var(--bone-soft);border-radius:16px;padding:24px}
.how .tile .ic{width:44px;height:44px;border-radius:12px;background:var(--cobalt-tint);display:grid;place-items:center;margin-bottom:14px}
.how .tile .ic svg{width:22px;height:22px;fill:none;stroke:var(--cobalt);stroke-width:1.7}
.how .tile h3{font-family:"Archivo";font-weight:800;font-size:16px;margin-bottom:7px}
.how .tile p{font-size:13.5px;line-height:1.55;color:#555}
/* Komposita wie „Hochleistungsfluessigkeitschromatographie" sonst ueber den Rand */
.how .tile h3,.how .tile p{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
.coa-bar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.coa-search{border:1.5px solid var(--bone-soft);border-radius:999px;padding:11px 18px;font-size:14px;font-family:inherit;background:#fff;outline:none;min-width:230px}
.coa-search:focus{border-color:var(--cobalt)}
.coa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.coa-card{background:#fff;border:1.5px solid var(--bone-soft);border-radius:16px;padding:20px;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
.coa-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(20,21,28,.4);border-color:var(--cobalt)}
.coa-card .vt{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.coa-card .vial{width:34px;height:52px;background:linear-gradient(180deg,#eef0ff,#c9d0ff);border-radius:5px 5px 9px 9px;position:relative}
.coa-card .vial::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:16px;height:7px;background:#c7cdf0;border-radius:3px 3px 0 0}
.coa-card .vial::after{content:"";position:absolute;bottom:2px;left:2px;right:2px;height:24px;background:linear-gradient(180deg,rgba(42,65,232,.5),rgba(27,43,196,.85));border-radius:0 0 7px 7px}
.coa-card .vbadge{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:6px;padding:3px 8px}
.coa-card h3{font-family:"Archivo";font-weight:800;font-size:17px;margin-bottom:3px}
.coa-card .cat{font-size:12px;color:#8a8578;margin-bottom:14px}
.coa-card .pur{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.coa-card .pur b{font-family:"Archivo";font-weight:900;font-size:22px;color:var(--cobalt);letter-spacing:-.02em}
.coa-card .pur span{font-family:"JetBrains Mono",monospace;font-size:11px;color:#8a8578}
.coa-card .bt{font-family:"JetBrains Mono",monospace;font-size:11px;color:#a09a8c;margin-top:10px;padding-top:12px;border-top:1px solid #f0ece2;display:flex;justify-content:space-between;align-items:center}
.coa-card .bt .view{font-family:"Archivo";font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--cobalt)}
.coa-empty{grid-column:1/-1;text-align:center;color:#8a8578;padding:30px;font-size:14px}
/* ── Zertifikat noch nicht hinterlegt (im Panel ausgeschaltet) ── */
.coa-card.pending{background:#fffdf7;border-color:#f3e3a0}
.coa-card.pending:hover{border-color:var(--warn)}
.coa-card.pending .vial{background:linear-gradient(180deg,#f7f2e4,#e2d7b8);opacity:.75}
.coa-card.pending .vial::after{background:linear-gradient(180deg,rgba(180,83,9,.28),rgba(180,83,9,.5))}
.coa-card .vbadge.pend{color:var(--warn);background:#fff6e5;border-color:#f3d19a}
.coa-card .pur b.soon{font-family:"Archivo";font-weight:800;font-size:15px;color:var(--warn);letter-spacing:0}
.coa-card.pending .bt .view{color:var(--warn)}
.ov-pend{background:#fff6e5;border:1px solid #f3d19a;border-radius:10px;padding:11px 13px;
  font-size:12.5px;line-height:1.55;color:#7a5a00;margin-top:16px}
/* Produktseite: Zertifikatsbox im Wartezustand */
.pcoa.pend{background:#fffdf7;border-color:#f3e3a0}
.pcoa.pend .kv b{color:var(--warn);font-family:"Archivo";font-weight:800;font-size:13px}
.pcoa.pend .sig .ctr{stroke:#d9c48a}
.coa-ov{position:fixed;inset:0;z-index:200;background:rgba(20,21,28,.5);display:none;align-items:center;justify-content:center;padding:20px}
.coa-ov.open{display:flex}
.ov-panel{background:#fff;border:1.5px solid var(--bone-soft);border-radius:22px;max-width:440px;width:100%;padding:30px;position:relative;animation:gp-pop .28s cubic-bezier(.2,.9,.2,1)}
@keyframes gp-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ov-panel .close{position:absolute;top:16px;right:20px;background:none;border:none;color:#a09a8c;font-size:26px;line-height:1}
.ov-panel .ptop{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ov-panel .pv{width:38px;height:54px;flex:none;background:linear-gradient(180deg,#eef0ff,#1f2fbf);border-radius:5px 5px 9px 9px;position:relative}
.ov-panel .pv::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:17px;height:7px;background:#c7cdf0;border-radius:3px}
.ov-panel h3{font-family:"Archivo";font-weight:900;font-size:23px;letter-spacing:-.02em}
.ov-panel .vf{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ok);margin-top:2px}
.ov-row{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #f0ece2;font-size:14px}
.ov-row span{color:#8a8578}.ov-row b{font-family:"JetBrains Mono",monospace;font-weight:600;color:var(--ink)}
.ov-dl{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;background:var(--ink);color:var(--bone);font-family:"Archivo";font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:14px;border-radius:12px;transition:background .2s}
.ov-dl:hover{background:var(--cobalt);color:#fff}

/* ══════════ Widerruf-Box ══════════ */
.wr-cta{background:#fff;border:2px solid var(--cobalt);border-radius:18px;padding:26px 30px;margin:24px 0;text-align:center}
.wr-cta h3{font-family:"Archivo";font-weight:900;font-size:20px;margin-bottom:6px}
.wr-cta>p{color:#555;font-size:14px;margin-bottom:18px;max-width:520px;margin-left:auto;margin-right:auto}
.wr-btn{display:inline-block;background:var(--cobalt);color:#fff;font-family:"Archivo",Arial,sans-serif;font-weight:800;font-size:17px;letter-spacing:.01em;padding:16px 34px;border-radius:12px;border:none;transition:background .2s}
.wr-btn:hover{background:var(--cobalt-deep)}
.wr-form{margin-top:22px;display:none;text-align:left}
.wr-form.show{display:block}
.wr-form label{display:block;font-family:"Archivo";font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#666;margin:14px 0 6px}
.wr-form input{width:100%;border:1.5px solid var(--bone-soft);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;outline:none}
.wr-form input:focus{border-color:var(--cobalt)}
.wr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wr-confirm{background:var(--ink);color:#fff;font-family:"Archivo";font-weight:800;font-size:15px;padding:15px 30px;border-radius:12px;border:none;margin-top:20px;transition:background .2s}
.wr-confirm:hover{background:var(--cobalt)}
.wr-confirm:disabled{opacity:.5;cursor:not-allowed}
.wr-note{font-size:12.5px;color:#8a8578;margin-top:12px;line-height:1.5}
.wr-ok{display:none;background:var(--ok-bg);border:1.5px solid var(--ok-line);border-radius:14px;padding:22px 24px;margin-top:20px;text-align:left}
.wr-ok.show{display:block}
.wr-ok h4{font-family:"Archivo";font-weight:900;font-size:17px;color:#166534;margin-bottom:6px}
.wr-ok p{font-size:14px;color:#166534;line-height:1.55;margin:0}
.wr-ok .stamp{font-family:monospace;font-weight:700}
.wr-err{color:var(--err);font-size:13.5px;margin-top:10px;display:none}
.wr-err.show{display:block}

/* ══════════ Affiliate ══════════ */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 30px}
.ben{background:#fff;border:1.5px solid var(--bone-soft);border-radius:16px;padding:22px}
.ben .bn{font-family:"Archivo";font-weight:900;font-size:26px;color:var(--cobalt);letter-spacing:-.02em}
.ben h3{font-family:"Archivo";font-weight:800;font-size:15px;margin:6px 0 5px}
.ben p{font-size:13px;color:#555;line-height:1.5}
.steps-aff{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 26px;font-size:13px;color:#555}
.steps-aff span{background:var(--cobalt-tint);color:var(--cobalt-deep);font-family:"Archivo";font-weight:700;font-size:12px;padding:7px 13px;border-radius:999px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aff-agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:#555;margin:6px 0 18px;cursor:pointer}
.aff-agree input{margin-top:2px;accent-color:var(--cobalt);width:16px;height:16px;flex:none}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}.relgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:940px){
  .gpnav .links{display:none}
  .gpburger{display:flex}
  .acct-grid{grid-template-columns:1fr}
  .acct-rail{position:static;flex-direction:row;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .acct-rail button{white-space:nowrap;width:auto}
  .phero-p{grid-template-columns:1fr;gap:24px}
  .psections{grid-template-columns:1fr}
  .pvis{max-width:380px;margin:0 auto;width:100%}
  .how{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .cinfo{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .search{max-width:none}
  .fg2,.wr-grid,.addr-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .gpnav .cta{display:none}        /* Shop steckt im Burger-Menü */
  .gpnav-in{gap:12px}
}
@media(max-width:460px){.grid{grid-template-columns:1fr}.relgrid{grid-template-columns:1fr}.tiles{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ══ Handy-Feinschliff: Kopfleiste und Filterreihe ═══════════════════
   Zwei Dinge sassen auf 375 px sichtbar schief:

   1. Die drei Bedienelemente rechts hatten DREI verschiedene Hoehen —
      Sprachwahl 34, Warenkorb 36, Burger 42. Ursache: die ersten beiden
      werden von ihrem Innenabstand plus Icon-Groesse aufgespannt (14 px
      gegen 16 px), der Burger hat eine feste Groesse. Jetzt bekommen alle
      drei dieselbe feste Hoehe, damit sie auf einer Linie stehen.

   2. Die Filter-Chips brachen auf zwei Zeilen um (flex-wrap:wrap) und
      machten den Balken 100 px hoch. Zusammen brauchen sie 467 px, es
      sind aber nur 339 nutzbar — sie passen also nie in eine Zeile.
      Statt Umbruch jetzt eine seitlich schiebbare Reihe, wie man es vom
      Handy kennt; die Scrollleiste bleibt unsichtbar.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:680px){
  .gpnav-in{gap:8px}
  .gplang-btn,.gpcart-btn{height:38px;padding:0 12px}
  .gpburger{width:38px;height:38px}

  .catrow{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .catrow::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}

  /* Suche ueber die volle Breite. "Sortieren" darunter mit Beschriftung
     links und Auswahl rechts — vorher klebte der Block rechts und liess
     121 px Leerraum daneben. */
  .shopbar-in{gap:8px}
  .sortwrap{width:100%;margin-left:0;justify-content:space-between}
}

/* ══ Rabatt deutlich sichtbar machen ═══════════════════════════════════
   Vorher: neuer Preis 21 px in Fast-Schwarz, alter Preis 12,5 px in einem
   blassen Beige (#a09a8c) darunter. Der Unterschied war da, aber niemand
   sah ihn — der Betreiber hat es selbst als "nicht eindeutig genug"
   bemaengelt.

   Jetzt stehen Preis, Streichpreis und Ersparnis in EINER Zeile, der
   Streichpreis ist groesser und dunkler, und der Prozentwert sitzt als
   farbige Marke daneben. Die Zeile bricht um, statt die Karte zu sprengen.
   ══════════════════════════════════════════════════════════════════════ */
.price-wrap{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 7px;
}
.price-old{
  font-size:14px;
  color:#6f6a5e;                     /* vorher #a09a8c — zu blass */
  text-decoration-thickness:1.5px;
  text-underline-offset:0;
}
.pprice-old{ font-size:19px; color:#6f6a5e; text-decoration-thickness:2px; }

/* Ersparnis in Prozent. Cobalt wie die uebrigen Akzente der Seite —
   keine neue Farbe erfunden. */
.price-off{
  display:inline-flex;
  align-items:center;
  background:var(--cobalt);
  color:#fff;
  font-family:"Archivo",Arial,sans-serif;
  font-weight:800;
  font-size:11px;
  letter-spacing:.02em;
  line-height:1;
  padding:4px 7px;
  border-radius:7px;
  white-space:nowrap;
}
.ppricerow .price-off{ font-size:13px; padding:5px 9px; border-radius:8px; }

@media(max-width:680px){
  .price-off{font-size:10px;padding:3px 6px}
  .price-old{font-size:13px}
}

/* ══ Handy: Menü und Suchbereich neu geordnet ══════════════════════════
   Zwei Beanstandungen des Betreibers, beide berechtigt:

   1. Das Menü lag randlos über der Seite — 375 px breit, Ecken 0, kein
      Rahmen, kein Schatten. Neben lauter gerundeten Karten sah es aus wie
      ein Fremdkörper. Jetzt haengt es als abgesetzte Karte unter der
      Leiste, mit denselben Rundungen wie der Rest.

   2. Der Suchbereich stand in DREI Reihen mit drei Formsprachen:
      Suchfeld als Pille, "Sortieren" als nackter Text, Filter als Pillen.
      Jetzt zwei Reihen: Suche und Sortierung nebeneinander in einer Zeile,
      die Filter darunter. Die Sortierung bekommt dieselbe Pillenform wie
      die Suche, damit die Zeile als Einheit liest.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:680px){

  /* ── Menü als Karte ── */
  .gpmob{
    left:10px; right:10px; width:auto;
    top:calc(var(--nav-h) + 8px);
    border-radius:16px;
    padding:8px 10px 10px;
    box-shadow:0 18px 44px rgba(20,21,28,.34);
    border:1px solid rgba(243,238,227,.10);
    overflow:hidden;
  }
  .gpmob a{
    border-radius:10px;
    padding-left:12px; padding-right:12px;
  }
  .gpmob a:active{ background:rgba(243,238,227,.09) }

  /* ── Suche und Sortierung in EINE Zeile ── */
  .shopbar-in{
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
  }
  .search{ flex:1 1 auto; min-width:0 }
  .sortwrap{
    flex:0 0 auto;
    width:auto;
    margin-left:0;
    gap:0;
  }
  /* Das Wort "Sortieren" kostet auf 375 px zu viel Platz — die Auswahl
     erklaert sich selbst. Fuer Screenreader bleibt es bestehen. */
  .sortwrap label{
    position:absolute;
    width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .sortsel{
    border-radius:999px;
    padding:10px 30px 10px 14px;
    max-width:150px;
  }

  /* ── Filterzeile buendig zur Suche darueber ── */
  .catrow{ padding-top:0 }
}

/* ══ MINIMAL-SKIN WARENKORB (16.08.) ══════════════════════════
   Der Drawer wirkte vollgepackt: jede Artikelzeile eine eigene
   umrandete Box, dazu zwei laut eingefärbte Upsell-Kacheln.
   Jetzt: ruhige Liste mit Trennlinien statt Boxen, Upsells als
   dezente weiße Karten. Reines Styling — Markup/JS unverändert. */
.ditem{background:transparent;border:none;border-bottom:1px solid var(--bone-soft);border-radius:0;padding:12px 2px}
.ditem:last-of-type{border-bottom:none}
.gpbac{background:#fff;border:1px solid var(--bone-soft)}
.gpbac .ico{width:28px;height:28px;border-radius:8px;background:var(--bone);font-size:14px}
.gpbac .tx b{color:var(--ink)}
.zonesel{border-width:1px;font-size:12.5px}
.dnote{margin-top:8px}