/* ==========================================================================
   STIG International — Diamond shop

   A structural copy of the reference shop at desktop width, measured element
   by element: black page (#080808), white type, grey #a8a8a8 labels,
   #262626 tiles, #515151 hairlines; a 4/12 configurator column on the left
   and an 8/12 results column on the right; 94 px result rows with an 80 px
   image and two columns of 12 px label/value pairs.

   Colour is STIG's own site (stiggroup.com/stig-international.php): black,
   white, and the brand blue as the single accent. Under 992 px the left
   column collapses into the "Diamant konfigurieren" toggle, and a floating
   button at the bottom left re-opens it — as the reference does.

   The one addition the brief asked for: the configurator column is sticky,
   so it stays on the left while you scroll the results.

   The diamond canvas is fixed above the page but below the header and
   drawers (z-index 5). Stone slots are empty boxes; never put text in one.
   ========================================================================== */

:root{
  --bg:#080808; --bg2:#0d0d0d; --tile:#262626; --tile2:#222; --line:#515151; --line2:#6a6a6a; --line3:#333;
  --ink:#fff; --dim:#a8a8a8; --dim2:#bfbfbf; --faint:#6e6e6e;
  --stig:#0043B4; --stig-lift:#2E6AD1; --ok:#61c532;
  --sans:aktiv-grotesk,Inter,"Helvetica Neue",Arial,sans-serif;
  --maxw:1370px; --pad:clamp(14px,2.4vw,34px);
  --ease:cubic-bezier(.7,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--stig);color:#fff}
:focus-visible{outline:2px solid var(--stig-lift);outline-offset:2px}
[hidden]{display:none!important}
#stage{position:fixed;left:0;top:0;z-index:5;pointer-events:none}
.page{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.up{text-transform:uppercase;letter-spacing:.06em}
.stone{pointer-events:auto}

/* --- Top bar (40) ------------------------------------------------------ */
#topbar{background:#000;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff}
#topbar .bar{display:flex;align-items:center;justify-content:space-between;height:40px;gap:16px}
#topbar ul{list-style:none;display:flex;gap:26px;align-items:center}
#topbar li{display:inline-flex;align-items:center;gap:7px}
#topbar svg{width:12px;height:12px}
#topbar .right a{display:inline-flex;align-items:center;gap:6px}
@media(max-width:991px){#topbar .left li:not(:last-child){display:none}}

/* --- Header (74) + nav row (40) ---------------------------------------- */
#header{background:#000;position:sticky;top:0;z-index:40;border-bottom:1px solid #fff}
#header .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:74px;gap:20px}
#header .search{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#fff;justify-self:start}
#header .search svg{width:16px;height:16px}
#header .logo img{height:36px;width:auto}
#header .tools{display:flex;gap:24px;justify-self:end;font-size:12px;font-weight:600;letter-spacing:.02em}
#header .tools a{display:inline-flex;align-items:center;gap:7px;position:relative}
#header .tools svg{width:18px;height:18px}
#header .tools b{position:absolute;top:-8px;left:10px;background:var(--stig-lift);color:#fff;font-size:9px;border-radius:999px;min-width:15px;height:15px;display:grid;place-items:center;padding:0 4px}
#header .burger{display:none;background:none;border:0;cursor:pointer;color:#fff;justify-self:start;flex-direction:column;gap:5px;align-items:center;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
#header .burger i{display:block;width:26px;height:2px;background:#fff}
#header nav.main{display:flex;justify-content:center;gap:34px;height:40px;align-items:center;border-top:1px solid #333;font-size:13px;font-weight:600}
#header nav.main a{display:inline-flex;align-items:center;gap:6px;padding:0 2px;opacity:.9}
#header nav.main a:hover,#header nav.main a[aria-current="page"]{opacity:1;box-shadow:inset 0 -2px 0 #fff}
#header nav.main .mark{width:14px;height:14px}
@media(max-width:991px){
  #header .bar{grid-template-columns:auto auto 1fr auto;height:64px;gap:14px}
  #header .logo{justify-self:center}
  #header .tools{gap:16px}
  #header .search span,#header .tools span{display:none}
  #header .burger{display:flex}
  #header nav.main{display:none;flex-direction:column;gap:0;height:auto;align-items:stretch}
  #header nav.main.open{display:flex}
  #header nav.main a{padding:13px var(--pad);border-bottom:1px solid #333}
  #header .logo img{height:30px}
}
.crumbs{font-size:11px;color:#fff;padding:10px 0;opacity:.85}
.crumbs span{margin:0 5px;opacity:.6}

/* --- Hero (image band with copy left) --------------------------------- */
.hero{position:relative;background:radial-gradient(70% 120% at 80% 50%,#202020 0%,#0a0a0a 70%);min-height:340px;overflow:hidden}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:340px;padding-top:38px;padding-bottom:44px}
.hero .eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hero h1{font-size:clamp(28px,3vw,40px);font-weight:300;margin:14px 0 22px;line-height:1.15}
.hero ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hero li{display:inline-flex;align-items:center;gap:9px}
.hero li i{display:inline-grid;place-items:center;width:14px;height:14px;background:#fff;color:#000;border-radius:2px}
.hero li i svg{width:10px;height:10px}
.hero-stone{height:340px}
@media(max-width:991px){.hero .wrap{grid-template-columns:1fr;min-height:0}.hero-stone{height:220px;order:-1}}

/* --- Sub-nav bar (white) --------------------------------------------- */
.subnav{background:#fff;color:#000;border-bottom:1px solid #ddd}
.subnav .wrap{display:flex;align-items:center;gap:28px;height:56px}
.subnav .diamonds{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.subnav .diamonds img{height:20px;width:auto}
.subnav .links{display:flex;gap:26px;font-size:13px;font-weight:600;color:#333}
.subnav .links a:hover{color:#000}
.subnav .adv{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600}
.subnav .adv .photo{width:36px;height:36px;border-radius:50%;background:var(--stig);color:#fff;display:grid;place-items:center;font-weight:700}
.subnav .adv b{font-weight:700}
.subnav .btn-req{border:1px solid #000;padding:9px 14px;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.subnav .btn-req:hover{background:#000;color:#fff}
@media(max-width:991px){.subnav .links{display:none}.subnav .adv span.txt{display:none}}

/* --- Two columns ------------------------------------------------------ */
.shop{display:grid;grid-template-columns:400px minmax(0,1fr);gap:0 40px;padding-top:44px;
  max-width:none;padding-left:var(--pad);padding-right:var(--pad)}   /* the list uses the full page width */
@media(max-width:1200px){.shop{grid-template-columns:340px minmax(0,1fr);gap:0 28px}}
/* the aside stretches to the results' height, which is what gives the sticky configurator room to travel */
.shop > aside{align-self:stretch}
@media(max-width:991px){.shop{grid-template-columns:1fr;padding-top:18px}}

/* Configurator column — sticky, scrolls inside itself when taller than the window */
.config{position:sticky;top:132px;max-height:calc(100vh - 148px);overflow:auto;padding:0 8px 24px 8px;scrollbar-width:thin;scrollbar-color:#444 transparent}
.config::-webkit-scrollbar{width:6px}.config::-webkit-scrollbar-thumb{background:#444}
.config h2{font-size:20px;font-weight:400;margin-bottom:22px}
.quick-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px 13px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 13px;margin-bottom:26px}
.quick button{text-align:left;background:var(--tile2);border:1px solid var(--line2);height:64px;padding:8px 9px;cursor:pointer;color:#fff}
.quick button:hover{border-color:#fff}
.quick button[aria-pressed="true"]{border-color:#fff;background:#000}
.quick b{display:block;font-size:13px;font-weight:700;line-height:16px}
.quick span{display:block;font-size:11px;color:var(--dim2);line-height:13px;margin-top:4px}
.fsec{border-top:1px solid var(--line3)}
.fsec summary{list-style:none;display:flex;align-items:center;justify-content:space-between;height:60px;cursor:pointer;font-size:16px;font-weight:400}
.fsec summary::-webkit-details-marker{display:none}
.fsec summary::after{content:'';width:8px;height:8px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg);margin-right:6px;transition:.2s}
.fsec[open] summary::after{transform:rotate(225deg);margin-top:6px}
.fsec .body{padding:0 0 18px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tiles.three{grid-template-columns:repeat(3,1fr)}
.tile{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 10px;background:var(--tile);border:2px solid var(--tile);font-size:13px;cursor:pointer;color:#fff;text-align:left}
.tile small{color:var(--dim);font-size:11px}
.tile svg{width:30px;height:30px;margin-left:auto;stroke:#fff;fill:none;stroke-width:1.2}
.tile[aria-pressed="true"]{background:#080808;border-color:#fff}
.tile[aria-pressed="true"]::after{content:'';position:absolute;top:-2px;right:-2px;width:14px;height:14px;background:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%);}
.tile[disabled]{color:var(--dim);border-color:#4e4e4e;cursor:not-allowed}
.tile[disabled] svg{stroke:var(--dim)}
.pair{display:grid;grid-template-columns:1fr 39px 1fr;align-items:center}
.pair .sep{text-align:center;color:#fff}
.pair input{height:48px;background:#fff;color:#000;border:0;padding:0 12px;font-size:14px;width:100%}
.pair select{height:32px;background:#fff;color:#000;border:0;padding:0 10px;font-size:14px;width:100%;border-radius:0}
.pair input::placeholder{color:#777}
.grades{display:grid;grid-template-columns:repeat(4,1fr)}
.grades button{background:none;border:0;border-bottom:2px solid var(--line3);padding:12px 2px 10px;font-size:14px;color:#fff;cursor:pointer;text-align:center;line-height:1.2}
.grades button small{display:block;color:var(--dim);font-size:11px}
.grades button[aria-pressed="true"]{border-bottom-color:#fff}
.grades button.zero{color:var(--dim)}
.expert{border-top:1px solid var(--line3);display:flex;align-items:center;justify-content:space-between;height:60px;font-size:18px}
.expert input{appearance:none;width:44px;height:22px;border-radius:999px;border:2px solid #fff;position:relative;cursor:pointer;background:none}
.expert input::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}
.expert input:checked{background:var(--stig)}
.expert input:checked::after{left:24px}
.reset{width:100%;height:30px;background:none;border:2px solid #fff;color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px}
.reset:hover{background:#fff;color:#000}
.config .hideable[hidden]{display:none}

/* Mobile: the configurator becomes a translucent sheet over the lower part of
   the screen, opened from the button at the bottom right. Nothing locks the
   page: the sheet is see-through and the list keeps scrolling behind it, and
   once the sheet's own scroll reaches its end the gesture carries on to the
   page (default overscroll chaining). Filtering while watching the list change
   is the point. */
.config-toggle{display:none}
.float-config{display:none}
.to-top{display:none}
.cfg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.cfg-head h2{margin:0}
.cfg-close{display:none;background:none;border:1px solid #fff;color:#fff;width:34px;height:34px;font-size:22px;line-height:1;cursor:pointer}
@media(max-width:991px){
  .config{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:35;max-height:62vh;overflow:auto;overscroll-behavior:auto;
    background:rgba(8,8,8,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.7);padding:14px var(--pad) 84px;
    transform:translateY(102%);transition:transform .32s var(--ease);display:block}
  .config.open{transform:none}
  .config h2{font-size:17px}
  .cfg-close{display:inline-grid;place-items:center}
  .config .tile,.quick button{background:rgba(38,38,38,.8)}
  .config .pair input,.config .pair select{background:rgba(255,255,255,.92)}
  .config-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border:1px solid #fff;background:none;color:#fff;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:18px}
  .config-toggle svg{width:16px;height:16px}
  .float-config{position:fixed;right:14px;bottom:16px;z-index:36;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#000;border:0;padding:12px 16px;font-size:13px;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.55);cursor:pointer}
  .float-config svg{width:16px;height:16px}
  .float-config.open{background:#000;color:#fff;border:1px solid #fff}
  .to-top{position:fixed;left:14px;bottom:16px;z-index:30;width:40px;height:40px;background:rgba(0,0,0,.7);color:#fff;border:1px solid #fff;display:grid;place-items:center;cursor:pointer}
}

/* --- Results column ---------------------------------------------------- */
.res-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;min-height:32px}
.res-head h2{font-size:20px;font-weight:400}
.res-tools{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:600}
.res-tools .views{display:inline-flex;gap:8px;align-items:center}
.res-tools .views button{background:none;border:0;color:var(--dim);cursor:pointer;display:inline-flex;padding:2px}
.res-tools .views button[aria-pressed="true"]{color:#fff}
.res-tools .views svg{width:15px;height:15px}
.res-tools select{background:none;border:0;color:var(--dim);font-size:13px;cursor:pointer;padding:2px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px}
.chips button{height:36px;padding:0 12px;background:none;border:1px solid #fff;color:#fff;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:14px}
.chips button i{font-style:normal;font-size:12px}
.chips button:hover{background:#fff;color:#000}
.chips .reset-all{font-weight:700}

/* rows — one stone per line, table-like, across the full width */
.rows{border-top:1px solid var(--line)}
.thead,.row{display:grid;align-items:center;
  grid-template-columns:56px minmax(88px,1.1fr) minmax(58px,.65fr) minmax(70px,.65fr) minmax(78px,.8fr) minmax(74px,.9fr) minmax(74px,.9fr) minmax(82px,.95fr) minmax(76px,.85fr) minmax(120px,1.4fr) minmax(90px,1fr)}
.thead{position:sticky;top:114px;z-index:6;   /* above the stone canvas (5): rows scrolling under it must disappear */background:var(--bg);border-bottom:1px solid var(--line);height:34px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.th,.c{padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{text-align:right}
.row{position:relative;height:48px;border-bottom:1px solid var(--line3);font-size:12.5px}
.row:hover{background:#111}
.row .c-img{width:40px;height:40px;margin-left:8px}
.row .c-price{font-weight:700}
.row .m-sum{display:none}
.row a.stretch{position:absolute;inset:0}
a.rep{position:relative;z-index:2;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--stig-lift)}
a.rep:hover{color:var(--stig-lift)}
@media(max-width:991px){
  .thead{display:none}
  .row{grid-template-columns:52px minmax(0,1fr) max-content;height:auto;min-height:56px;padding:8px 0;gap:0 8px}
  .row .c{display:none}
  .row .c-price{display:block;grid-column:3;grid-row:1;padding:0 6px 0 0;font-size:13px;align-self:start;margin-top:2px;overflow:visible;text-overflow:clip}
  .row .c-img{grid-column:1;grid-row:1}
  .row .c-img{width:44px;height:44px;margin-left:4px}
  .row .m-sum{display:block;grid-column:2;grid-row:1;min-width:0;line-height:1.35}
  .row .m-sum b{display:block;font-size:13px;font-weight:600}
  .row .m-sum span{display:block;font-size:11.5px;color:var(--dim);white-space:normal}
}

/* grid view */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{position:relative;background:#111;border:1px solid var(--line3);padding-bottom:14px}
.card:hover{border-color:var(--line2)}
.card .stone{height:170px}
.card .body{padding:0 14px}
.card .title{font-size:14px;font-weight:600}
.card .sub{font-size:12px;color:var(--dim);margin-top:2px}
.card .price{font-size:15px;font-weight:700;margin-top:8px}
.card a.stretch{position:absolute;inset:0}

.pager{display:flex;justify-content:center;gap:4px;padding:30px 0 10px;font-size:14px}
.pager button{background:none;border:1px solid transparent;color:#fff;min-width:34px;height:34px;cursor:pointer}
.pager button:hover{border-color:var(--line2)}
.pager button[aria-current="page"]{border-color:#fff}
.pager span{align-self:center;color:var(--dim);padding:0 6px}
.empty{padding:50px 0;color:var(--dim)}

/* --- USP strip -------------------------------------------------------- */
#usp{margin-top:60px;border-top:1px solid var(--line3);border-bottom:1px solid var(--line3)}
.usp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;padding:30px 0;text-align:center}
.usp-grid svg{width:30px;height:30px;margin:0 auto 10px;stroke:#fff;fill:none;stroke-width:1.2}
.usp-grid b{display:block;font-size:15px;font-weight:700}
.usp-grid span{display:block;font-size:12px;color:var(--dim);margin-top:3px}

/* --- Editorial -------------------------------------------------------- */
.edit{padding:64px 0}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.edit.alt .edit-grid{direction:rtl}.edit.alt .edit-body{direction:ltr}
.edit-stone{height:300px;background:#000;border:1px solid var(--line3)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.edit-body h2{font-size:clamp(26px,2.6vw,34px);font-weight:300;margin:10px 0 16px}
.edit-body p{color:var(--dim2);font-size:15px;line-height:1.6;margin-bottom:12px;max-width:62ch}
.edit-cta{display:flex;gap:14px;align-items:center;margin-top:22px}
.edit-cta svg{width:22px;height:22px}
.edit-cta a{font-size:20px;font-weight:600;display:block}
.edit-cta .tiny{display:block;font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:991px){.edit-grid{grid-template-columns:1fr}.edit.alt .edit-grid{direction:ltr}.edit-stone{height:220px}}

/* --- Request ----------------------------------------------------------- */
#request{border-top:1px solid var(--line3);padding:64px 0}
.req-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px}
@media(max-width:991px){.req-grid{grid-template-columns:1fr}}
.req-grid h2{font-size:clamp(26px,2.6vw,34px);font-weight:300;margin:8px 0 18px}
.req-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req-form label{display:grid;gap:6px;font-size:12px;color:var(--dim)}
.req-form input,.req-form textarea{background:#fff;color:#000;border:0;padding:12px;font-size:14px;width:100%}
.req-form .full{grid-column:1/-1}
.req-form .consent{grid-template-columns:auto 1fr;align-items:start;font-size:12px;color:var(--dim2);line-height:1.5}
.req-form .consent input{width:16px;height:16px;margin-top:2px;accent-color:var(--stig)}
.req-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:2px solid #fff;background:none;color:#fff;
  padding:12px 22px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:.2s var(--ease)}
.btn:hover{background:#fff;color:#000}
.btn-solid{background:#fff;color:#000}
.btn-solid:hover{background:var(--stig-lift);border-color:var(--stig-lift);color:#fff}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.req-aside h3{font-size:18px;font-weight:700;margin-bottom:12px}
.req-aside ul{list-style:none;display:grid;gap:8px;margin-bottom:16px}
.req-aside li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--dim2)}
.req-aside li svg{width:14px;height:14px;color:#fff;flex:none}
.req-aside p{color:var(--dim);font-size:13px}
.tiny{font-size:11px;color:var(--dim)}

/* --- Footer ------------------------------------------------------------ */
#footer{background:#000;border-top:1px solid var(--line3);padding:44px 0 26px;font-size:13px;color:var(--dim2)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;align-items:start}
.foot-logo{height:36px;width:auto;margin-bottom:14px}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end}
.foot-legal a{color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.foot-note{margin-top:26px;padding-top:16px;border-top:1px solid var(--line3);font-size:11.5px;color:var(--faint)}

/* --- Detail ----------------------------------------------------------- */
.back{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:18px 0 10px}
.back svg{width:12px;height:12px;transform:rotate(180deg)}
.d-title{text-align:center;padding:6px 0 26px}
.d-title h1{font-size:clamp(20px,2vw,28px);font-weight:600}
.d-title .cert{color:var(--dim);font-size:13px;font-style:italic;margin-top:6px}
.d-title .cert a{color:#fff;font-style:normal;text-decoration:underline;text-underline-offset:3px}
.d-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:start}
@media(max-width:991px){.d-grid{grid-template-columns:1fr}}
.d-image{position:relative;background:#fff;aspect-ratio:1/1;max-height:600px;overflow:hidden}
.d-image .tag{position:absolute;top:14px;left:18px;z-index:2;display:flex;align-items:center;gap:10px;color:#000;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.d-image .tag img{height:20px;width:auto}
.d-image .fav{position:absolute;top:12px;right:14px;z-index:2;background:none;border:0;cursor:pointer;color:#000}
.d-image .fav svg{width:22px;height:22px}
.d-image .fav.on{color:var(--stig-lift)}
.d-image .stone{position:absolute;inset:0}
.d-image .hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#777}
.d-buy .sku{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.d-buy .avail{background:var(--ok);color:#262626;font-size:12px;font-weight:700;padding:1px 6px}
.d-buy .avail.off{background:#8a2b2b;color:#fff}
.d-buy .price{font-size:25px;font-weight:600;text-align:right;margin-top:14px}
.d-buy .pnote{text-align:right;font-size:11px}
.d-buy .pnote small{display:block;font-size:12px;font-weight:300;color:var(--dim2);margin-top:2px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:26px 0 24px;padding:20px 0;border-top:1px solid var(--line3);border-bottom:1px solid var(--line3)}
.spec div{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:14px;font-weight:300}
.spec dt{color:var(--dim)}
.spec dd a{text-decoration:underline;text-underline-offset:3px}
.spec dd .pending{color:var(--dim);font-style:italic}
.ctas{display:grid;gap:10px}
.ctas .or{text-align:center;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.ctas .btn{flex-direction:column;gap:2px;padding:13px 16px;font-size:12px}
.ctas .btn.wa{flex-direction:row;gap:10px}
.ctas .btn .sub{display:block;font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;opacity:.8}
.ctas .btn svg,.share svg,.back svg,.edit-cta svg{width:18px;height:18px;flex:none}
.d-adviser{display:flex;gap:14px;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--line3)}
.d-adviser .avatar{width:44px;height:44px;border-radius:50%;background:var(--stig);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.d-adviser b{display:block;font-weight:600;font-size:14px}
.d-adviser span{display:block;font-size:12.5px;color:var(--dim)}
.usp-inline{margin-top:40px;border-top:1px solid var(--line3);border-bottom:1px solid var(--line3)}
.share{display:flex;gap:16px;align-items:center;margin-top:26px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.share a{color:#fff;display:inline-flex}.share svg{width:18px;height:18px}
.d-details{padding:48px 0 10px}
.d-details h2{font-size:20px;font-weight:600;margin-bottom:22px}
.dtable{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
@media(max-width:700px){.dtable{grid-template-columns:1fr}}
.dtable div{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line3);font-size:16px}
.dtable dt{color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.dtable dd{font-weight:600}
.scales{margin-top:36px;display:grid;gap:22px}
.scale{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
@media(max-width:600px){.scale{grid-template-columns:1fr}}
.scale h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.scale ol{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px}
.scale li{text-align:center;padding:7px 2px;font-size:12px;font-weight:600;color:var(--dim);border-bottom:2px solid var(--line3);text-transform:uppercase}
.scale li.on{color:#fff;border-bottom-color:#fff}
.d-ctas2{display:flex;gap:12px;flex-wrap:wrap;margin:36px 0 10px}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* While a live query is in flight the list dims a touch; the page never blanks. */
body.loading #list, body.loading #pager { opacity: .55; transition: opacity .15s; }

/* ---------------------------------------------------------------------------
   Selection (auswahl.html) and order confirmation (bestellung.html)
--------------------------------------------------------------------------- */
.cart-page,.order-page{padding-top:28px;padding-bottom:40px;min-height:50vh}
.cart-page h1,.order-page h1{font-size:clamp(24px,3vw,34px);margin:0 0 18px}
.flash{background:rgba(255,255,255,.08);border-left:3px solid var(--stig-lift);padding:10px 14px;font-size:13px;margin:0 0 18px}
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.cart-list{display:grid;gap:1px;background:var(--line3)}
.cart-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto auto;gap:16px;align-items:center;background:var(--bg);padding:14px 0}
.cart-row .stone{width:96px;height:96px}
.cart-row.gone{opacity:.55}
.cart-title{font-weight:600;font-size:15px;color:#fff;text-decoration:none}
.cart-title:hover{text-decoration:underline}
.cart-sub{font-size:12px;color:var(--dim);margin-top:4px}
.cart-sub a.rep{color:#fff;text-decoration:underline}
.cart-warn{font-size:12px;color:#f0a0a0;margin-top:6px}
.cart-price{font-weight:600;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cart-remove{background:none;border:0;color:var(--dim);font-size:20px;line-height:1;cursor:pointer;padding:6px 10px;display:inline-flex;align-items:center;gap:6px}
.cart-remove span{font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.cart-remove:hover{color:#fff}
.cart-sum{position:sticky;top:132px;border:1px solid var(--line3);padding:20px}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:6px 0 10px;border-bottom:1px solid var(--line3)}
.sum-row b{font-size:22px;font-variant-numeric:tabular-nums}
.sum-note{font-size:12px;color:var(--dim);margin:10px 0 16px;line-height:1.5}
#checkout{display:grid;gap:12px}
#checkout .field{display:grid;gap:6px;font-size:12px;color:var(--dim)}
#checkout .field input{background:#fff;color:#000;border:0;padding:12px;font-size:14px;width:100%}
#checkout .field small{font-size:11px;color:var(--dim)}
#checkout .consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:12px;color:var(--dim2,#ccc);line-height:1.5}
#checkout .consent input{width:16px;height:16px;margin-top:2px;accent-color:var(--stig)}
#checkout .consent a{color:#fff}
#checkout .pay{width:100%;padding:14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.pay-msg{font-size:12.5px;color:#f0a0a0;margin:0;line-height:1.5}
.pay-msg:not(.warn){color:var(--dim)}
.secure{font-size:11px;color:var(--dim);margin:0;line-height:1.5}
.quote-link{display:block;margin-top:16px;font-size:12.5px;color:var(--dim);text-decoration:underline}
.quote-link:hover{color:#fff}
.order-no{font-size:15px}
.order-no b{font-size:18px;letter-spacing:.04em}
.order-list{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--line3)}
.order-list li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line3);font-size:14px}
.order-list b{white-space:nowrap;font-variant-numeric:tabular-nums}
.order-page .sum-row{border:0;margin-top:6px}
.order-page p{max-width:720px;line-height:1.6}
.order-contact a{color:#fff}
@media (max-width:991px){
  .cart-grid{grid-template-columns:1fr}
  .cart-sum{position:static}
  .cart-row{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"img body price" "img body remove";row-gap:4px}
  .cart-row .stone{width:72px;height:72px;grid-area:img}
  .cart-body{grid-area:body}.cart-price{grid-area:price}.cart-remove{grid-area:remove;justify-self:end;padding:2px 6px}
  .cart-remove span{display:none}
}

/* ---------------------------------------------------------------------------
   Server-rendered fallbacks and the legal pages
--------------------------------------------------------------------------- */
.ssr-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0 20px}
.ssr-table th,.ssr-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line3);white-space:nowrap}
.ssr-table th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:600}
.ssr-table a{color:#fff}
.legal-page{padding-top:28px;padding-bottom:50px;max-width:980px}
.legal-page h1{font-size:clamp(24px,3vw,34px);margin:14px 0 18px}
.legal-nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line3);padding-bottom:14px}
.legal-nav a{color:var(--dim);text-decoration:none}
.legal-nav a:hover,.legal-nav a[aria-current]{color:#fff}
.legal-body{font-size:15px;line-height:1.7;color:#e6e6e6}
.legal-body h2{font-size:18px;margin:30px 0 8px}
.legal-body h3{font-size:15px;margin:22px 0 6px;color:#fff}
.legal-body p{margin:0 0 14px}
.legal-body ul{padding-left:20px;margin:0 0 14px}
.legal-body li{margin:4px 0}
.legal-body a{color:#fff}
.legal-body .lead{color:var(--dim);font-size:13px}
.draft-note{background:rgba(46,106,209,.18);border-left:3px solid var(--stig-lift);padding:10px 14px;font-size:13px;margin:0 0 20px}
.faq-list{border-top:1px solid var(--line3)}
.faq-item{border-bottom:1px solid var(--line3)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:22px;color:var(--dim);flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item h2{font-size:16px;margin:0;font-weight:600}
.faq-item p{margin:0 0 18px;line-height:1.7;color:#e6e6e6;max-width:760px}
.legal-contact{margin-top:28px;font-size:13px;color:var(--dim)}
.legal-contact a{color:#fff}