/* Linkissima – Stylesheet */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout unchanged (hero bracelet, steps, charms, bracelets, gifts, workshop, facts, FAQ). Formatting follows the reference shop: white ground, black bars, blush accents, Playfair headings, DM Sans text, square black buttons. */
:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --ink:#1F1A17; --muted:#6B605B; --line:#ECE4E1;
  --blush:#FDF2EF; --blush-2:#F7E3DD; --rose:#C99A92; --rose-ink:#FFFFFF;
  --bar:#3B2B2C; --on-bar:#FFF7F4; --star:#D9A441; --tray:#FBF4F1;
  --velvet:#FDF2EF; --velvet-2:#F7E3DD; --on-velvet:#1F1A17; --gold:#B78A4A;
  --accent:#3B2B2C; --accent-ink:#FFFFFF;
  --f-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body:"DM Sans", "Helvetica Neue", Arial, sans-serif;
  --f-logo:"Great Vibes", "Cormorant Garamond", cursive;
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --shadow:0 6px 24px rgba(59,43,44,.08);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#161312; --surface:#1D1918; --ink:#F4EEEC; --muted:#B3A8A4; --line:#322B29;
  --blush:#2A2120; --blush-2:#352826; --rose:#D3A69E; --rose-ink:#1F1A17;
  --bar:#000000; --on-bar:#FFFFFF; --star:#E2B45A; --tray:#24201F;
  --velvet:#2A2120; --velvet-2:#352826; --on-velvet:#F4EEEC; --gold:#D6B271;
  --accent:#F4EEEC; --accent-ink:#1F1A17; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#161312; --surface:#1D1918; --ink:#F4EEEC; --muted:#B3A8A4; --line:#322B29;
  --blush:#2A2120; --blush-2:#352826; --rose:#D3A69E; --rose-ink:#1F1A17;
  --bar:#000000; --on-bar:#FFFFFF; --star:#E2B45A; --tray:#24201F;
  --velvet:#2A2120; --velvet-2:#352826; --on-velvet:#F4EEEC; --gold:#D6B271;
  --accent:#F4EEEC; --accent-ink:#1F1A17; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;letter-spacing:.02em}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:0}
h2{font-size:clamp(30px,3.6vw,40px);line-height:1.15}
p{margin:0}
.num{font-variant-numeric:tabular-nums lining-nums}
button{font:inherit;cursor:pointer;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
a{color:inherit}

body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bar)}
/* Announcement bar with real offer deadline */
.notice{background:var(--bar);color:var(--on-bar);font-size:15px}
.notice .wrap{padding-block:9px;display:flex;justify-content:center;align-items:center;gap:10px 18px;flex-wrap:wrap;text-align:center}
.notice b{font-weight:700}
.cd{display:flex;align-items:center;gap:6px}
.cd .u{display:grid;justify-items:center;line-height:1}
.cd .u strong{font-size:20px;font-weight:700}
.cd .u small{font-size:10px;opacity:.75;margin-top:2px}
.cd .sep{font-size:18px;font-weight:700;margin-top:-10px}
.preview-tag{font-size:12px;opacity:.7}

/* Header: menu left, logo centred, icons right */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:14px;gap:16px}
.burger{justify-self:start;background:none;border:0;padding:6px;display:grid;gap:5px}
.burger i{display:block;width:22px;height:2px;background:var(--ink)}
.logo{font-family:var(--f-display);font-size:28px;font-weight:500;text-decoration:none;text-align:center;line-height:1}
.logo small{display:block;font-family:var(--f-body);font-size:9px;letter-spacing:.3em;margin-top:4px;color:var(--muted)}
.icons{justify-self:end;display:flex;gap:16px;align-items:center}
.bag{position:relative;background:none;border:0;padding:4px;display:grid;place-items:center}
.bag svg{width:24px;height:24px}
.bag .n{position:absolute;top:-6px;right:-8px;background:var(--rose);color:var(--rose-ink);border-radius:999px;min-width:18px;height:18px;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.top nav{display:none}
.menu{background:var(--paper);border-bottom:1px solid var(--line)}
.menu .wrap{display:flex;flex-wrap:wrap;gap:4px 22px;padding-block:12px;font-size:15px}
.menu a{text-decoration:none}

/* Scrolling promo strip */
.ticker{background:var(--bar);color:var(--on-bar);overflow:hidden;white-space:nowrap;font-size:16px}
.ticker .run{display:inline-flex;gap:64px;padding-block:10px;padding-left:64px;animation:run 32s linear infinite}
@keyframes run{to{transform:translateX(-50%)}}

/* Category pills */
.pills{display:flex;gap:10px;overflow-x:auto;padding-block:26px 6px;scrollbar-width:none}
.pills a{flex:none;background:var(--blush);padding:10px 16px;text-decoration:none;font-size:15px;white-space:nowrap}
.pills a:hover{background:var(--blush-2)}

/* Hero: blush tray, same layout */
.hero{background:var(--blush);color:var(--ink);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1;padding-block:48px 34px;display:grid;gap:26px}
.hero h1{font-size:clamp(40px,6.4vw,76px);line-height:1.05;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--rose)}
.hero .lede{max-width:46ch;font-size:18px;color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:end}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:0;padding:14px 26px;font-weight:600;text-decoration:none;background:var(--accent);color:var(--accent-ink);font-size:16px}
.btn.light{background:var(--accent);color:var(--accent-ink)}
.btn.line{background:none;border:1px solid var(--ink);color:var(--ink)}
.btn.rose{background:var(--rose);color:var(--rose-ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tray{position:relative;margin-top:4px;overflow-x:auto;padding:16px 4px 54px;scrollbar-width:thin}
.bracelet{display:flex;width:max-content;margin:0 auto;filter:drop-shadow(0 12px 14px rgba(60,30,25,.25))}
.bracelet .lk{flex:none;margin-right:-1px}
.bracelet .lk svg{display:block;overflow:visible}
.hero .bracelet .lk svg{width:64px;height:70px}
.hero-caption{font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Sections */
.sec .wrap{padding-block:64px}
.head{display:grid;justify-items:center;text-align:center;gap:10px;margin-bottom:34px}
.head p{color:var(--muted);max-width:52ch}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:s}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:22px}}
.step{display:grid;justify-items:center;text-align:center;gap:8px;background:var(--blush);padding:26px 20px}
.step::before{counter-increment:s;content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--rose);color:var(--rose-ink);display:grid;place-items:center;font-weight:700}
.step h3{font-size:22px}
.step p{color:var(--muted);max-width:30ch}

/* Product grid in the reference style */
.charms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 20px}
@media (max-width:1000px){.charms{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.charms{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}}
.ch{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:6px;min-width:0;text-align:center;position:relative}
.ch .pad{background:var(--tray);aspect-ratio:1/1;max-width:100%;display:grid;justify-items:center;align-items:center;margin-bottom:10px;position:relative}
.ch .pad svg{width:62%;height:auto;overflow:visible;filter:drop-shadow(0 8px 8px rgba(40,20,15,.18));margin-top:-8%}
.badge{position:absolute;left:10px;top:10px;background:var(--rose);color:var(--rose-ink);font-size:12px;font-weight:700;letter-spacing:1px;padding:4px 8px;border-radius:4px}
.ch h3{font-family:var(--f-display);font-weight:500;font-size:18px;line-height:1.3}
.ch .kind{font-size:13px;color:var(--muted)}
.price{font-weight:700;font-size:15px;letter-spacing:1px}
.letter{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.letter select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:3px 6px}
.ch .cta{margin-top:8px;width:100%;background:var(--accent);color:var(--accent-ink);border:0;padding:12px 8px;font-weight:600;font-size:15px}
.ch .cta:hover{opacity:.88}
.plus{display:none}

/* Bracelets */
.bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.bands{grid-template-columns:1fr}}
.band{display:grid;gap:8px;text-align:center;min-width:0}
.band .strip{background:var(--tray);aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;overflow:hidden;margin-bottom:8px}
.band .strip .bracelet{margin:0;filter:drop-shadow(0 6px 8px rgba(40,20,15,.18))}
.band .strip .lk svg{width:36px;height:40px}
.band h3{font-size:20px}
.band p{color:var(--muted);font-size:14px}
.band .buy{display:grid;gap:10px}
.band .buy .cta{width:100%;background:var(--accent);color:var(--accent-ink);border:0;padding:12px 8px;font-weight:600}

/* Gifts */
.gifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.gifts{grid-template-columns:1fr}}
.gift{background:var(--blush);padding:24px;display:grid;gap:12px;justify-items:center;text-align:center}
.gift h3{font-size:24px}
.gift p{color:var(--muted)}
.gift .mini{display:flex;flex-wrap:wrap;justify-content:center}
.gift .mini svg{width:42px;height:46px;overflow:visible}
.gift button{background:var(--accent);color:var(--accent-ink);border:0;padding:12px 20px;font-weight:600}

/* Workshop */
.studio{background:var(--blush)}
.build{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:28px;align-items:start}
@media (max-width:900px){.build{grid-template-columns:1fr}}
.metal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.metal button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);padding:8px 16px 8px 8px}
.metal button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.dot{width:22px;height:22px;border-radius:50%}
.box{display:grid;gap:18px;min-width:0}
.box .tray{background:var(--surface);padding:26px 14px 54px}
.box .bracelet .lk svg{width:50px;height:55px}
.box .bracelet .lk.on{cursor:pointer}
.pick{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
@media (max-width:700px){.pick{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pick button{background:var(--surface);border:1px solid var(--line);padding:8px 2px 22px;display:grid;justify-items:center}
.pick button:hover{border-color:var(--ink)}
.pick svg{width:38px;height:42px;overflow:visible}
.hint{font-size:14px;color:var(--muted);text-align:center}
.receipt{background:var(--surface);color:var(--ink);padding:22px;display:grid;gap:12px;border:1px solid var(--line)}
.receipt h3{font-size:26px}
.lines{display:grid;gap:8px;font-size:15px}
.lines div{display:flex;justify-content:space-between;gap:12px}
.lines .tot{border-top:1px solid var(--line);padding-top:10px;font-size:18px;font-weight:700}
.save{color:var(--rose);font-weight:700;font-size:15px}
.small{font-size:14px;color:var(--muted)}

/* Promises */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fact{text-align:center;display:grid;gap:4px;justify-items:center}
.fact h3{font-size:20px}
.fact p{color:var(--muted);font-size:14px}

/* FAQ */
.faq{display:grid;border-top:1px solid var(--line);max-width:52rem;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:8px;max-width:62ch}

footer{background:var(--bar);color:var(--on-bar);font-size:14px}
footer .wrap{padding-block:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer .logo{font-size:24px;margin:0;color:var(--on-bar)}

/* Drawer */
.scrim{position:fixed;inset:0;background:rgba(20,14,12,.5);z-index:19}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);z-index:20;display:flex;flex-direction:column;gap:14px;
 padding:calc(20px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 20px;
 transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:-20px 0 40px rgba(20,14,12,.18)}
.drawer.open{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center}
.drawer h2{font-size:28px}
.close{background:none;border:0;font-size:28px;line-height:1}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:12px;text-align:center}
.perks span{background:var(--blush);padding:8px 4px}
.perks span.on{background:var(--rose);color:var(--rose-ink);font-weight:700}
.items{flex:1;overflow:auto;display:grid;gap:12px;align-content:start}
.it{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:15px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.it svg{width:40px;height:44px;overflow:hidden}
.it .rm{background:none;border:0;padding:0;color:var(--muted);font-size:13px;text-decoration:underline}
.ship{font-size:14px;color:var(--muted)}
.bar{height:6px;background:var(--blush-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--rose);transition:width .3s}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--bar);color:var(--on-bar);padding:11px 18px;font-size:15px;z-index:30}

/* Filters + sort */
.tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;border-block:1px solid var(--line);padding-block:12px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{background:var(--blush);border:1px solid transparent;padding:8px 14px;font-size:14px}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.sort select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:6px 8px}
.count{font-size:14px;color:var(--muted)}
.ch .open{background:none;border:0;padding:0;display:block;width:100%;text-align:inherit}
.ch .open:hover h3{text-decoration:underline;text-underline-offset:3px}
/* Quick view */
.qv{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.qv .bg{position:absolute;inset:0;background:rgba(20,14,12,.55)}
.qv .card{position:relative;background:var(--surface);width:min(920px,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){.qv .card{grid-template-columns:1fr}}
.qv .img{background:var(--tray);display:grid;place-items:center;padding:40px 20px 80px;min-height:320px}
.qv .img svg{width:min(220px,60%);height:auto;overflow:visible;filter:drop-shadow(0 14px 14px rgba(40,20,15,.22))}
.qv .info{padding:28px;display:grid;gap:14px;align-content:start}
.qv h2{font-size:30px}
.qv .x{position:absolute;top:10px;right:12px;background:var(--surface);border:0;font-size:28px;line-height:1;width:40px;height:40px}
.metals{display:flex;gap:8px;flex-wrap:wrap}
.metals button{border:1px solid var(--line);background:var(--surface);padding:6px 12px 6px 6px;display:flex;align-items:center;gap:8px;font-size:14px}
.metals button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.qty{display:inline-flex;border:1px solid var(--line)}
.qty button{background:none;border:0;width:40px;height:44px;font-size:18px}
.qty output{width:40px;display:grid;place-items:center;font-weight:700}
.buyrow{display:flex;gap:10px}
.buyrow .btn{flex:1}
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;border-top:1px solid var(--line);padding-top:14px}
.specs dt{color:var(--muted)}
.specs dd{margin:0}
.match{display:flex;gap:8px}
.match button{background:var(--tray);border:1px solid transparent;padding:6px 6px 18px}
.match button:hover{border-color:var(--ink)}
.match svg{width:40px;height:44px;overflow:visible}
/* Season */
.season{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.season{grid-template-columns:1fr}}
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--blush);min-width:0}
@media (max-width:560px){.offer{grid-template-columns:1fr}}
.offer .pic{background:var(--blush-2);display:grid;place-items:center;padding:24px;min-height:220px}
.offer .txt{padding:24px;display:grid;gap:10px;align-content:start}
.offer h3{font-size:26px}
.offer p{color:var(--muted);font-size:15px}
.offer ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.cal{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:100%;max-width:240px}
.cal span{aspect-ratio:1;background:var(--surface);display:grid;place-items:center;font-family:var(--f-display);font-size:15px;border:1px solid var(--line)}
.cal span.gold{background:var(--rose);color:var(--rose-ink);border-color:var(--rose)}
.mbox{width:150px;max-width:100%}
/* Newsletter */
.news{background:var(--bar);color:var(--on-bar)}
.news .wrap{padding-block:52px;display:grid;justify-items:center;text-align:center;gap:14px}
.news h2{font-size:clamp(28px,3.4vw,38px)}
.news p{opacity:.8;max-width:46ch}
.news form{display:flex;gap:0;width:min(480px,100%)}
.news input{flex:1;min-width:0;font:inherit;padding:14px 16px;border:1px solid var(--on-bar);background:transparent;color:var(--on-bar)}
.news input::placeholder{color:var(--on-bar);opacity:.6}
.news button{background:var(--rose);color:var(--rose-ink);border:0;padding:0 22px;font-weight:700}
.news .ok{font-size:15px}
.news .err{color:#F2B8AE;font-size:14px}
/* Cart extras */
.upsell{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.upsell .row{display:flex;gap:8px;overflow-x:auto}
.upsell button{flex:none;background:var(--tray);border:1px solid transparent;padding:6px 6px 16px;display:grid;justify-items:center;gap:2px;font-size:12px}
.upsell button:hover{border-color:var(--ink)}
.upsell svg{width:36px;height:40px;overflow:visible}
/* Footer */
footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-block:44px 24px}
@media (max-width:760px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer h4{margin:0 0 10px;font-family:var(--f-display);font-weight:500;font-size:18px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;opacity:.85}
footer .base{border-top:1px solid rgba(255,255,255,.15);padding-block:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;opacity:.75}
.pay{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;margin:0;padding:0;list-style:none}
.pay li{display:flex}
.pay img{width:38px;height:24px;display:block}
.social{display:flex;gap:10px;margin-top:14px}
.social a{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.35);padding:8px 12px;text-decoration:none;font-size:14px}
.social a:hover{background:rgba(255,255,255,.1)}
.social a{padding:0;border:0}
.social a:hover{background:none;opacity:.85}
.social img{width:32px;height:32px;display:block;border-radius:50%}
.foot-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid rgba(255,255,255,.15);padding-block:22px}
@media (max-width:760px){.foot-trust{grid-template-columns:1fr}}
.foot-trust div{display:flex;gap:12px;align-items:center;font-size:14px}
.foot-trust svg{width:28px;height:28px;flex:none}
footer .base{flex-direction:column-reverse;align-items:center;text-align:center;gap:16px}
footer .base{opacity:1}
footer .base > span:first-child{opacity:.75}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.lk.new svg{animation:drop .35s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.drawer,.bar i{transition:none}.lk.new svg{animation:none}.ticker .run{animation:none}}

/* Feinschliff: ein ruhiges, durchgängiges Erscheinungsbild */
body{letter-spacing:0}
::selection{background:var(--blush-2);color:var(--ink)}

/* Schrift: Schriftzug, Überschriften im Editorial-Stil */
.logo{font-family:var(--f-logo);font-size:44px;font-weight:400;letter-spacing:0}
.logo small{font-family:var(--f-body);margin-top:2px}
footer .logo{font-size:38px}
h2{font-size:clamp(36px,4.4vw,54px);line-height:1.02;font-weight:500}
.hero h1{font-size:clamp(46px,7vw,88px);line-height:.98}
.step h3,.fact h3,.band h3,.gift h3{font-size:26px}
.ch h3{font-size:21px}

/* Abschnittsköpfe: links ausgerichtet, Text rechts, feine Linie */
.head{grid-template-columns:minmax(0,1fr) minmax(0,25rem);justify-items:start;align-items:start;text-align:left;gap:12px 48px;margin-bottom:40px}
.head p{max-width:none;padding-top:.5em}
@media (max-width:760px){.head{grid-template-columns:1fr}}

/* Kategorien als ruhige Textlinks statt Pillen */
.pills{gap:4px 26px;padding-block:18px 4px}
.pills a{background:none;padding:12px 0;border-bottom:1px solid transparent;color:var(--muted);font-size:15px}
.pills a:hover{background:none;color:var(--ink);border-color:var(--ink)}

/* Laufband ruhiger: nur noch ein dunkles Band oben */
.ticker{background:var(--blush-2);color:var(--ink);font-size:14px}

/* Buttons: eine Hauptaktion pro Bereich, sonst Kontur */
.btn,.ch .cta,.band .buy .cta,.gift button,.news button,.filters button,
.metal button,.metals button,.qty,.sort select,.letter select,.news input,.toast{border-radius:var(--r-pill)}
.btn,.ch .cta,.band .buy .cta,.gift button,.filters button,.pills a{transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}
.ch .cta,.band .buy .cta,.gift button{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.ch .cta:hover,.band .buy .cta:hover,.gift button:hover{background:var(--ink);color:var(--paper);opacity:1}
.btn:hover{opacity:.9}
.news button{padding:0 26px}
.filters button{min-height:44px;padding:8px 18px}

/* Produktkarten: Fläche ohne Schatten, Charm hängt frei */
.ch .pad,.band .strip,.qv .img{border-radius:var(--r-md)}
.ch .pad{align-items:start;padding-top:9%}
.ch .pad svg{width:48%;margin-top:0;transition:transform .3s ease-out}
.ch .open:hover .pad svg{transform:translateY(-4px) rotate(-2deg)}
.badge{left:12px;top:12px;background:var(--paper);color:var(--ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}

/* Schritte: große kursive Ziffern statt runder Punkte */
.step{background:none;padding:18px 0 0;border-top:1px solid var(--ink);justify-items:start;text-align:left}
.step::before{content:counter(s,decimal-leading-zero);width:auto;height:auto;background:none;border-radius:0;color:var(--rose);font-family:var(--f-display);font-style:italic;font-size:48px;font-weight:500;line-height:1;display:block}
.step p{max-width:34ch}

/* Versprechen: Spalten mit feinen Trennlinien */
.facts{gap:0}
.fact{justify-items:start;text-align:left;padding:4px 24px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
@media (max-width:860px){.fact{padding:16px 16px 16px 0;border-left:0;border-top:1px solid var(--line)}}

/* Flächen mit weichen Ecken */
.gift,.receipt,.box .tray,.offer,.qv .card,.offer .pic{border-radius:var(--r-lg)}
.offer,.qv .card{overflow:hidden}
.gift{justify-items:start;text-align:left}
.gift .mini{justify-content:flex-start;margin-bottom:18px}
.faq{margin:0;max-width:52rem}
.pick button,.match button,.upsell button,.cal span,.perks span,.qv .x{border-radius:var(--r-sm)}
.bar,.bar i{border-radius:var(--r-pill)}

/* Große Bereiche mit geschwungenen Kanten */
.hero{border-radius:0 0 var(--r-lg) var(--r-lg)}
.studio,.news{border-radius:var(--r-lg);margin-inline:max(8px,1vw)}
.news{margin-bottom:32px}
footer{border-radius:var(--r-lg) var(--r-lg) 0 0}
footer .base{width:100%}

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Produktfotos aus Shopify (freigestellt in assets/photos) */
.ph{display:block;max-width:none;object-fit:contain}
.ch .pad{align-items:center;padding-top:0}
.ch .pad .ph{width:82%;height:82%;transition:transform .3s ease-out}
.ch .open:hover .pad .ph{transform:scale(1.04)}
.qv .img .ph{width:min(320px,80%);height:auto}
.pick .ph{width:56px;height:56px}
.gift .mini .ph{width:46px;height:46px}
.it .ph{width:44px;height:44px}
.match .ph,.upsell .ph{width:48px;height:48px}
.lk.new .ph{animation:drop .35s cubic-bezier(.2,.7,.2,1)}
/* Fotos im Armband: das Glied im Foto sitzt genau im Feld, Anhänger hängen darunter */
.bracelet{filter:none}
.bracelet .lk svg{filter:drop-shadow(0 10px 8px rgba(60,30,25,.22))}
.hero .bracelet{--s:64px} .box .bracelet{--s:50px}
.lk .crop{display:block;position:relative;width:var(--s);height:calc(var(--s)*1.09)}
.lk .crop .ph{position:absolute;max-width:none;width:calc(var(--s)/var(--w));height:auto;
  left:calc(var(--s)*var(--x)/var(--w)*-1);top:calc(var(--s)*((1.09 - var(--h)/var(--w))/2 - var(--y)/var(--w)))}

/* Einführungspreis-Hinweis unter dem Preis */
.was{display:block;font-size:12px;line-height:1.35;color:#8F574D;font-weight:600}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .was{color:var(--rose)}}
:root[data-theme="dark"] .was{color:var(--rose)}

/* Startbild: Foto füllt den Kopfbereich, Text links auf der freien Fläche */
.hero{min-height:clamp(480px,46vw,700px);display:grid;align-items:center}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;max-width:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--blush) 0%,color-mix(in srgb,var(--blush) 75%,transparent) 30%,transparent 58%)}
.hero .wrap{z-index:2;width:100%}
.hero-grid{grid-template-columns:1fr;max-width:36rem;gap:22px}
.hero .lede{color:var(--ink)}
@media (max-width:760px){
  .hero{display:block;min-height:0}
  .hero-img{position:relative;height:auto;aspect-ratio:4/3;object-position:80% 50%}
  .hero::after{display:none}
  .hero .wrap{padding-block:28px 34px}
}

/* Cookie-Einwilligung: unten, nicht blockierend; beide Hauptknöpfe gleich gewichtet */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;justify-content:center;pointer-events:none}
.consent-in{pointer-events:auto;width:min(640px,100%);max-height:80dvh;overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(40,25,25,.22);padding:22px;display:grid;gap:12px}
.consent h2{font-size:26px}
.consent p{font-size:14px;color:var(--muted)}
.consent a{color:var(--ink)}
.consent-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.consent-btns button{min-height:44px;border-radius:var(--r-pill);font-weight:600;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.consent-btns [data-c="more"],.consent-btns [data-c="save"]{background:transparent;color:var(--ink);border-color:var(--line)}
.consent-btns [data-c="more"]{grid-column:1/-1}
.consent-btns [data-c="save"]{grid-column:1/-1;border-color:var(--ink)}
.consent-groups{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.cg{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.cg input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink);flex:none}
.cg small{color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:420px){.consent-btns{grid-template-columns:1fr}}

/* Rechtstexte */
.legal-page .top .wrap{grid-template-columns:1fr auto 1fr}
.back{justify-self:start;font-size:14px;text-decoration:none;color:var(--muted)}
.legal{max-width:46rem;padding-block:40px 64px;display:grid;gap:14px}
.legal h1{font-size:clamp(36px,5vw,52px);margin-bottom:6px}
.legal h2{font-size:24px;margin-top:18px}
.legal p,.legal td,.legal th{color:var(--ink)}
.legal .small{color:var(--muted)}
.draft{background:#FFF6D6;color:#5C4A00;border-radius:var(--r-sm);padding:10px 14px;font-size:14px}
mark.todo{background:#FFE58A;color:#3A2E00;padding:0 3px;border-radius:3px}
.formbox{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;display:grid;gap:10px}
.tbl{border-collapse:collapse;width:100%;max-width:28rem}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.legal-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:22px;font-size:14px}
.legal-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.legal-foot a{color:inherit}
.tax{font-size:13px;color:var(--muted)}
/* Warenkorb: Set zeigt die gewählten Charms, Mystery-Box ihr Geschenk */
.it .mini-set{display:flex;width:44px;height:44px;align-items:center}
.it .mini-set .ph{width:26px;height:26px;margin-right:-11px;flex:none}
.it .mbox{width:44px;height:40px}

/* Ankündigungsleiste: klickbar, wechselnde Botschaften, Countdown im Sekundentakt */
.offer-link{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;color:inherit;text-decoration:none}
.rot{display:inline-block;min-width:min(27em,100%);transition:opacity .25s ease-out,transform .25s ease-out}
.rot.out{opacity:0;transform:translateY(-6px)}
.offer-link .go{font-weight:700;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:1px}
.offer-link .go span{display:inline-block;transition:transform .2s ease-out}
.offer-link:hover .go span,.offer-link:focus-visible .go span{transform:translateX(4px)}
.cd .u strong{display:inline-block}
.cd .u strong.flip{animation:cdflip .35s ease-out}
@keyframes cdflip{from{opacity:0;transform:translateY(-45%)}to{opacity:1;transform:none}}
/* Zeile über dem Produktraster: Anzahl links, Preishinweis rechts */
.meta-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin:16px 0 20px}
.meta-row .count{margin:0;font-size:14px;color:var(--muted)}
.meta-row .tax a{color:inherit}

/* Werkstatt: das ganze Armband (18 Glieder) passt in den Rahmen; auf dem Handy bleibt es wischbar */
.box .tray{container-type:inline-size}
.box .bracelet{--s:max(30px,min(50px,calc((100cqw - 28px) / 18)))}
.box .bracelet .lk svg{width:var(--s);height:calc(var(--s)*1.1)}
.metal{justify-content:flex-start}
/* Fußzeile: Vertrauensleiste über die ganze Breite wie die anderen Linien */
.foot-trust{width:100%}

/* Großer Schriftzug am Ende der Fußzeile: erscheint beim Scrollen, Goldglanz läuft durch, Licht folgt der Maus */
footer{overflow:hidden}
.footer-mark{--mx:50%;--my:50%;display:flex;justify-content:center;padding:0 16px;margin-top:-6px;line-height:1.05;user-select:none}
.footer-mark span{display:block;font-family:var(--f-logo);font-size:clamp(84px,19vw,280px);padding:.06em .18em .22em;
  background:
    radial-gradient(240px circle at var(--mx) var(--my),rgba(255,247,234,.95),transparent 70%),
    linear-gradient(105deg,#C99A92 0%,#E8C7BC 22%,#FFF3E6 32%,#D6B271 42%,#C99A92 58%,#E8C7BC 78%,#C99A92 100%);
  background-size:100% 100%,250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(28%);transition:opacity 1s ease-out,transform 1s cubic-bezier(.2,.7,.2,1);
  animation:markshine 7s linear infinite}
.footer-mark.in span{opacity:.95;transform:none}
@keyframes markshine{from{background-position:0 0,100% 0}to{background-position:0 0,-150% 0}}
@media (prefers-reduced-motion:reduce){.footer-mark span{opacity:.95;transform:none;animation:none}}

/* Seitennavigation unter dem Charm-Raster: höchstens 12 Charms pro Seite */
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:36px}
.pager button{min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;transition:background-color .2s ease-out,border-color .2s ease-out}
.pager button:hover:not(:disabled){border-color:var(--ink)}
.pager button[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager button:disabled{opacity:.35;cursor:default}