/* =====================================================================================================
   Bikedealz.online – Design (einzige Stylesheet-Quelle des Shops), Stand Etappe 1 (docs/DESIGN.md)
   index.php bettet diese Datei inline ein und hängt dahinter die :root-Überschreibungen des Design-CMS
   (Admin → Bikedealz.online → Design) und eine optionale design.local.css an. Klassennamen bleiben stabil
   (Tests/Markup): card, price, dl, hero, tile, side, post, buybox, stickybuy, addform, chips, pager, plogos …
   Aufbau: 1 Tokens · 2 Grundlagen · 3 Kopf/Navigation · 4 Knöpfe/Formulare · 5 Produktkachel · 6 Listen/Filter
   7 Artikelseite · 8 Startseite · 9 Blog · 10 Warenkorb/Kasse/Status · 11 Fußzeile · 12 Bewegung/Kleinkram
   13 Musterseite (Design-Vorschau) · 14 Mobil
   Bewegung: eigene Kurven, alles unter 300 ms, nur transform/opacity (Ausnahme: 3-px-Ladebalken), Hover nur mit Maus.
   ===================================================================================================== */

/* 1 Tokens ----------------------------------------------------------------------------------------- */
:root{
  --ink:#0f172a; --ink-2:#334155; --muted:#5b6675;               /* Text 16:1, 9,7:1, 5,6:1 */
  --line:#e4e8ee; --line-2:#c9d1dc; --bg:#f6f7f9; --bg-2:#eef1f5; --surface:#fff;
  --brand:#0b1f3a; --brand-2:#12305c; --link:#1a4d8f;            /* Navy = Rahmen und Struktur, Links 6,3:1 */
  --accent:#c94d07; --accent-2:#ab4106;                           /* Orange = nur kaufen (4,7:1 zu Weiß) */
  --ok:#12793f; --warn:#b45309; --bad:#b91c1c; --sale:#b91c1c; --sale-bg:#fdecec;
  --on-dark:#c3cfdd; --on-dark-line:rgba(255,255,255,.14);
  --r-s:6px; --r:10px; --r-l:16px;                                /* Radius-Skala: Eingaben/Chips · Karten/Knöpfe · Bühne/Fotos */
  --sh-2:0 8px 24px rgba(11,31,58,.10); --sh-3:0 -6px 20px rgba(11,31,58,.14);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease:cubic-bezier(.4,0,.2,1);
  --d1:120ms; --d2:160ms; --d3:220ms;                             /* Druck · Hover/Erscheinen · Leisten/Modal */
  --fs-base:16px;
  --font:"Bricolage Grotesque","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1360px; --gutter:24px;
}

/* 2 Grundlagen ------------------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs-base);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;font-size:1rem;-webkit-font-smoothing:antialiased;font-variation-settings:"opsz" 14,"wdth" 100}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.018em;font-weight:800;font-variation-settings:"opsz" 72,"wdth" 90;text-wrap:balance;color:var(--ink)}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.125rem;font-variation-settings:"opsz" 24,"wdth" 96}
img{max-width:100%;height:auto}
strong,b{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
main{padding:1.25rem 0 3.5rem}
.num,.price,.meta .val,table td.num{font-variant-numeric:tabular-nums}
/* Barrierefreiheit: Sprungmarke, Fokusring auch auf dunklen Flächen, reduzierte Bewegung */
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--brand);color:#fff;padding:10px 16px;border-radius:var(--r-s);font-weight:700}
.skip:focus{left:16px;outline:3px solid var(--accent);outline-offset:2px;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--link);outline-offset:2px}
nav.cats a:focus-visible,footer a:focus-visible,.hero a:focus-visible,.tile:focus-visible,.banner a:focus-visible,.btn-o:focus-visible,.btn-w:focus-visible{outline-color:#fff}
main:focus{outline:none}
main p a,main li a,main small a,main td a,main dd a,main .meta a,main .notice a,main .empty a,main .flash a,main label a,main .sub a,.crumbs a,footer .bottom a{text-decoration:underline}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;transform:none !important}}
/* Weiche Überblendung beim Seitenwechsel (native View Transitions; nur unterstützende Browser wie Chrome/Edge, sonst normaler Wechsel; bei „Bewegung reduzieren“ aus) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .24s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .3s var(--ease-out) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
.ic{vertical-align:-5px;flex:none}
.crumbs{font-size:.8125rem;color:var(--muted);margin-bottom:.875rem;font-variation-settings:"opsz" 12}.crumbs a{color:var(--muted)}
.h-sec{font-size:1.5rem;margin:0 0 .25rem}.sub{color:var(--muted);margin-bottom:1rem}
.lead{font-size:1.125rem;color:var(--ink-2);max-width:65ch}
.pagetitle{margin-bottom:.5rem}.pageintro{color:var(--muted);margin-bottom:1.25rem;max-width:70ch}
.readcol{max-width:760px}.readcol h1{margin-bottom:1rem}.readcol h2{font-size:1.375rem;margin:1.75rem 0 .5rem}.readcol p{margin:0 0 .875rem;line-height:1.7}.readcol ul,.readcol ol{margin:0 0 .875rem 1.375rem;line-height:1.7}
.section{margin-top:4rem}.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}.section-h h2{margin:0}.section-h .sub{margin:0;flex-basis:100%}.section-h .more{margin:0}
.more{margin-top:.75rem;font-weight:600}.more a{white-space:nowrap}

/* 3 Kopf und Navigation ---------------------------------------------------------------------------- */
.topline{background:var(--surface);border-bottom:1px solid var(--line);color:var(--muted);font-size:.8125rem;font-variation-settings:"opsz" 12}
.topline .wrap{display:flex;justify-content:space-between;align-items:center;height:30px;gap:16px}
.topline .usps-inline{display:flex;gap:22px;overflow:hidden;white-space:nowrap;flex:1;min-width:0;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.topline .usps-inline span{display:inline-flex;align-items:center;gap:6px}.topline .usps-inline .ic{color:var(--ok);width:15px;height:15px}
.topline .links{flex:none;white-space:nowrap}.topline .links a{color:var(--muted);margin-left:18px}.topline .links a:hover{color:var(--ink)}
header.top{background:var(--surface);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--line)}
.topbar{display:flex;align-items:center;gap:1.75rem;height:72px}
.logo{white-space:nowrap;display:flex;align-items:center;font-weight:800;font-size:1.625rem;color:var(--brand);letter-spacing:-.03em;font-variation-settings:"opsz" 48,"wdth" 88}
.logo span{color:var(--accent)}.logo img{height:44px;width:auto;display:block}.logo:hover{text-decoration:none}
.search{flex:1;display:flex;position:relative;max-width:720px}
.search input{flex:1;height:46px;padding:0 1.125rem;border:1px solid var(--line-2);border-right:none;border-radius:var(--r) 0 0 var(--r);font-size:1rem;font-family:inherit;background:var(--surface);min-width:0;color:var(--ink)}
.search input::placeholder{color:#6b7684}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.search button{height:46px;padding:0 1.25rem;border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:0 var(--r) var(--r) 0;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:8px;font-size:.9375rem;transition:background var(--d2) var(--ease),transform var(--d1) var(--ease-out)}
.search button:hover{background:var(--brand-2)}.search button:active{transform:scale(.98)}
.sugg{position:absolute;top:52px;left:0;right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);z-index:40;box-shadow:var(--sh-2);overflow:hidden;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--d2) var(--ease-out),transform var(--d2) var(--ease-out);transform-origin:top left}
.sugg.open{opacity:1;transform:none;pointer-events:auto}
.sugg a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:.625rem 1rem;color:var(--ink);border-bottom:1px solid var(--line)}.sugg a:last-child{border-bottom:none}.sugg a:hover{background:var(--bg-2);text-decoration:none}
.sugg a small{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin-right:6px}.sugg a strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:2px}
.hdr-actions a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);font-size:.6875rem;font-weight:600;letter-spacing:.02em;padding:6px 10px;border-radius:var(--r-s);position:relative;min-width:68px;transition:background var(--d2) var(--ease)}
.hdr-actions a:hover{background:var(--bg-2);text-decoration:none}.hdr-actions .ic{width:24px;height:24px}
.hdr-actions a.cartlink b{position:absolute;top:0;right:8px;background:var(--accent);color:#fff;border-radius:999px;padding:0 6px;font-size:.6875rem;line-height:18px;min-width:18px;text-align:center}
nav.cats{background:var(--brand);color:#fff}
nav.cats .wrap{display:flex;gap:0;align-items:center;height:44px;position:relative}
nav.cats a{padding:0 .875rem;height:44px;display:flex;align-items:center;color:#fff;white-space:nowrap;font-size:.875rem;font-weight:600;border-bottom:3px solid transparent;transition:background var(--d2) var(--ease)}
nav.cats a:hover{background:var(--brand-2);text-decoration:none}nav.cats a.on{border-bottom-color:var(--accent)}
nav.cats a.all{background:var(--brand-2);font-weight:700;gap:8px;margin-right:4px}nav.cats a.promo{color:#ffd0b5;margin-left:auto;font-weight:700}
nav.cats .scroll{display:flex;overflow:auto;scrollbar-width:none;flex:1}
nav.cats .mega{position:absolute;left:0;right:0;top:44px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-2);border-radius:0 0 var(--r) var(--r);padding:1.375rem 1.625rem;z-index:35;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--d2) var(--ease-out),transform var(--d2) var(--ease-out);transform-origin:top left}
nav.cats .mega-flat{columns:4;column-gap:24px}
nav.cats .allbox:hover .mega,nav.cats .allbox:focus-within .mega{opacity:1;transform:none;pointer-events:auto}
nav.cats .mega a{display:flex;align-items:center;gap:8px;height:auto;padding:5px 0;color:var(--ink);font-weight:500;border:none;font-size:.875rem;break-inside:avoid}
nav.cats .mega a .ic{width:18px;height:18px;color:var(--muted)}
nav.cats .mega a:hover{background:none;color:var(--link);text-decoration:underline}nav.cats .mega a small{color:var(--muted);font-weight:400;margin-left:2px;font-variant-numeric:tabular-nums}
nav.cats .mega a strong{font-weight:700}

/* 4 Knöpfe und Formulare --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 1.375rem;border:1px solid transparent;border-radius:var(--r);font-weight:700;font-size:.9375rem;cursor:pointer;text-decoration:none!important;line-height:1.2;font-family:inherit;white-space:nowrap;transition:background var(--d2) var(--ease),border-color var(--d2) var(--ease),color var(--d2) var(--ease),transform var(--d1) var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}.btn-p:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-b{background:var(--brand);border-color:var(--brand);color:#fff}.btn-b:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-s{background:var(--surface);color:var(--ink);border-color:var(--line-2)}.btn-s:hover{border-color:var(--ink)}
.btn-w{background:#fff;color:var(--brand);border-color:#fff}.btn-w:hover{background:#f1f4f8}
.btn-o{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.7)}.btn-o:hover{background:rgba(255,255,255,.18)}
.btn-sm{min-height:40px;padding:0 1rem;font-size:.875rem}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn .ic{width:20px;height:20px}
.flash{padding:.75rem 1rem .75rem .875rem;border-left:4px solid;margin:.875rem 0;background:var(--surface);border-radius:0 var(--r-s) var(--r-s) 0;font-weight:500}.flash.ok{border-color:var(--ok);color:#14532d}.flash.error{border-color:var(--bad);color:#7f1d1d}.flash.info{border-color:var(--link);color:#1e3a8a}
.notice{background:#fff7ed;border-left:4px solid var(--accent);color:#7c3a00;padding:.6875rem .875rem;margin:0 0 .875rem;font-size:.875rem;border-radius:0 var(--r-s) var(--r-s) 0}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:600;background:var(--bg-2);color:#475569;white-space:nowrap}
.badge.ok{background:#e3f4ea;color:#14532d}.badge.warn{background:#fff3e0;color:#7c3a00}.badge.bad{background:var(--sale-bg);color:#7f1d1d}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.375rem}
.box h2{font-size:1.25rem;margin-bottom:.25rem}.box h2+p,.box .hint{color:var(--muted);font-size:.875rem;margin-bottom:.5rem}
.box label,.field label{display:block;font-weight:600;font-size:.875rem;margin:.75rem 0 .25rem}
.box input,.box textarea,.box select,.field input,.field textarea,.field select{width:100%;min-height:44px;padding:.5rem .75rem;border:1px solid var(--line-2);border-radius:var(--r-s);font:inherit;font-size:1rem;background:var(--surface);color:var(--ink)}
.box textarea{min-height:0}
.box input:focus,.box textarea:focus,.box select:focus{outline:2px solid var(--link);outline-offset:0;border-color:var(--link)}
.box input[type=checkbox],.box input[type=radio]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--link);margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.grid2.zip{grid-template-columns:1fr 2fr}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin-top:.75rem;font-size:.9375rem}.check input{margin-top:3px}.check.strong{font-weight:600}
.empty{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);padding:2.75rem 1.5rem;text-align:center;color:var(--muted)}
.empty h1{font-size:1.5rem;margin-bottom:.5rem;color:var(--ink)}
.formfoot{margin-top:1rem}.formnote{font-size:.8125rem;color:var(--muted);margin-top:.5rem}
.actions{margin-top:1rem;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.actions .right{margin-left:auto}

/* 5 Produktkachel ---------------------------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:box-shadow .34s var(--ease-out),border-color .34s var(--ease-out),transform .34s var(--ease-out)}
.card .img{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--bg-2);overflow:hidden}
.card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:1rem;box-sizing:border-box;mix-blend-mode:multiply;transition:transform .9s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .card:hover{box-shadow:var(--sh-2);border-color:var(--line-2);transform:translateY(-4px)}
  .card:hover .img img{transform:scale(1.06)}
  .card:hover .name{color:var(--link)}
}
.card .noimg{color:#6b7684;font-size:.75rem}
.card .body{padding:.75rem 1rem 1rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.card .brand{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.card .name{font-weight:600;font-size:.9375rem;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;transition:color .34s var(--ease)}
.card .name:hover{text-decoration:underline}
.card .foot{margin-top:auto;padding-top:.625rem;display:flex;flex-direction:column;gap:.625rem}
.card .addform .btn{width:100%}
.price{font-weight:800;font-size:1.3125rem;line-height:1;color:var(--ink);letter-spacing:-.01em;font-variation-settings:"opsz" 24,"wdth" 96}.price.promo{color:var(--sale)}
.price small{font-weight:400;color:var(--muted);font-size:.75rem;display:block;margin-top:4px;letter-spacing:0;font-variation-settings:"opsz" 12,"wdth" 100}
.price small.unitprice{margin-top:2px}
.was{color:var(--muted);font-size:.8125rem;text-decoration:line-through;font-variant-numeric:tabular-nums}
.save{background:var(--sale);color:#fff;font-size:.75rem;font-weight:800;padding:4px 8px;border-radius:var(--r-s);position:absolute;top:10px;left:10px;z-index:1;font-variant-numeric:tabular-nums}
.tag{background:var(--brand);color:#fff;font-size:.6875rem;font-weight:700;padding:3px 8px;border-radius:var(--r-s);display:inline-block}
.card .brand .tag{margin-left:6px;font-size:.625rem;padding:2px 6px;letter-spacing:0;text-transform:none;vertical-align:1px}
.dl{font-size:.8125rem;color:var(--ok);font-weight:600;display:flex;align-items:center;gap:6px}
.dl::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--ok);flex:none}
.addform{display:flex;gap:0}
.row-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:1rem;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.row-scroll .card{scroll-snap-align:start}

/* 6 Listen und Filter ------------------------------------------------------------------------------ */
.layout{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:start}
.listhead{margin-bottom:1rem}.listhead h1{margin-bottom:.25rem}.listhead .count{color:var(--muted);font-size:.9375rem}
.pagehead{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--brand-2);color:#fff;min-height:200px;display:flex;align-items:flex-end;margin-bottom:1.25rem}
.pagehead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,44,.05),rgba(6,22,44,.85))}
.pagehead div{position:relative;z-index:1;padding:1.5rem 1.75rem}.pagehead h1{color:#fff;font-size:2rem;margin:0}.pagehead p{color:var(--on-dark);margin-top:.25rem;max-width:60ch}
.sizechips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 1rem}.sizechips span{align-self:center;font-size:.8125rem;color:var(--muted);margin-right:4px}
.sizechips a{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:6px 12px;border-radius:999px;font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease)}
.sizechips a:hover{border-color:var(--ink);text-decoration:none}.sizechips a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.filtertoggle{display:none}
.side{align-self:start;font-size:.875rem}
.side h2,.side h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);padding:1rem 0 .5rem;border-top:1px solid var(--line);font-weight:700;font-variation-settings:"opsz" 12,"wdth" 100;letter-spacing:.08em}
.side h2:first-child,.side h3:first-child{border-top:none;padding-top:0}
.side ul{list-style:none;max-height:260px;overflow:auto;margin-bottom:.5rem}.side li{display:flex;justify-content:space-between;padding:4px 0;gap:6px}
.side li .n{color:var(--muted);font-size:.75rem;min-width:32px;text-align:right;font-variant-numeric:tabular-nums}
.side label.ck{display:flex;gap:9px;align-items:center;cursor:pointer;flex:1;min-width:0}.side label.ck input{margin:0;accent-color:var(--link);width:18px;height:18px;flex:none}
.side label.ck span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.side li.on label.ck span{font-weight:700;color:var(--link)}
.side .facsearch{width:100%;min-height:36px;padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r-s);margin:2px 0 6px;font:inherit;font-size:.875rem}
.side details.fac{border-top:1px solid var(--line);padding:.5rem 0}.side details.fac summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;padding:4px 0}
.side details.fac summary::-webkit-details-marker{display:none}
.side details.fac summary::after{content:"+";color:var(--muted);font-weight:400}.side details.fac[open] summary::after{content:"−"}
.side .price-row{display:flex;gap:6px;align-items:center;margin-bottom:.5rem}.side .price-row input{width:100%;min-height:36px;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--r-s);font:inherit;font-size:.875rem}.side .price-row .btn{min-height:36px;padding:0 .75rem;font-size:.8125rem}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.toolbar .count{font-size:.9375rem;color:var(--muted)}.toolbar .count strong{font-size:1.125rem;color:var(--ink);font-variant-numeric:tabular-nums}.toolbar .count .relaxed{display:block;font-size:.8125rem}
.toolbar form{display:flex;gap:8px;align-items:center}
.toolbar select{min-height:40px;padding:0 .75rem;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);font:inherit;font-size:.875rem;color:var(--ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 1rem;align-items:center}
.chip{background:var(--surface);border:1px solid var(--line-2);padding:5px 6px 5px 12px;border-radius:999px;font-size:.8125rem;display:inline-flex;align-items:center;gap:4px}
.chip a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;font-size:1rem;line-height:1;transition:background var(--d2) var(--ease),color var(--d2) var(--ease)}.chip a:hover{background:var(--bg-2);color:var(--ink);text-decoration:none}
.chips a.clear{border:0;background:none;color:var(--link);font-size:.8125rem;text-decoration:underline;padding:0 4px}
.pager{display:flex;gap:6px;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;transition:border-color var(--d2) var(--ease)}
.pager a:hover{border-color:var(--ink);text-decoration:none}.pager span.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.seotext{margin-top:2.5rem;font-size:.9375rem;color:var(--ink-2);max-width:900px}.seotext h2{font-size:1.25rem;color:var(--ink);margin-bottom:.5rem}
.seotext.box{padding:1.375rem 1.5rem}

/* 7 Artikelseite ----------------------------------------------------------------------------------- */
.detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);grid-template-areas:"gallery head" "gallery side";grid-template-rows:auto 1fr;gap:0 3rem;align-items:start}
main.pdp{padding-top:.875rem}.pdp .crumbs{margin-bottom:.625rem}
.detail .head{grid-area:head}.detail .gallery{grid-area:gallery}.detail .buycol{grid-area:side}
.detail .brandline{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:.75rem;font-weight:700}
.detail .brandline a{color:var(--muted)}
.detail h1{font-size:2rem;margin:.25rem 0 .5rem}
.meta{color:var(--muted);font-size:.8125rem;display:flex;gap:6px 16px;flex-wrap:wrap;margin-bottom:.875rem;align-items:center}
.meta .val{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.meta .copy{border:1px solid var(--line-2);background:var(--surface);color:var(--muted);border-radius:999px;padding:2px 10px;font:inherit;font-size:.6875rem;font-weight:600;cursor:pointer;line-height:1.5;margin-left:2px;transition:border-color var(--d2) var(--ease),color var(--d2) var(--ease)}
.meta .copy:hover{border-color:var(--link);color:var(--link)}.meta .copy.ok{border-color:var(--ok);color:var(--ok)}
.gallery .main{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-l);background:var(--bg-2);overflow:hidden}
.gallery .main .zoom{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:zoom-in}
.gallery .main .zoom.nozoom{cursor:default}
.gallery .main .zoom:focus-visible{outline:3px solid var(--link);outline-offset:-3px;border-radius:var(--r-l)}
.gallery .main img{max-width:92%;max-height:92%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.gallery .main .noimg{color:#6b7684;font-size:.8125rem}
.gallery .thumbs{display:flex;gap:8px;margin-top:.75rem;flex-wrap:wrap}
.gallery .thumb{width:64px;height:64px;padding:4px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--d2) var(--ease)}
.gallery .thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gallery .thumb:hover{border-color:var(--link)}.gallery .thumb.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.gallery .thumb:focus-visible{outline:3px solid var(--link);outline-offset:2px}
/* Lightbox: natives dialog, Escape/Pfeile; erscheint aus scale(.97) (Modal: Ursprung Mitte) */
.lightbox{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;display:none;align-items:center;justify-content:center}
.lightbox[open]{display:flex;animation:lb-in var(--d3) var(--ease-out)}.lightbox::backdrop{background:rgba(11,31,58,.9)}
@keyframes lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lightbox img{max-width:min(96vw,1400px);max-height:92vh;width:auto;height:auto;object-fit:contain;background:#fff;border-radius:var(--r);padding:12px}
.lightbox button{position:absolute;border:0;background:rgba(255,255,255,.92);color:var(--brand);width:48px;height:48px;border-radius:999px;font-size:1.875rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--d1) var(--ease-out),background var(--d2) var(--ease)}
.lightbox button:hover{background:#fff}.lightbox button:active{transform:scale(.96)}.lightbox button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lightbox .lb-close{top:16px;right:16px}.lightbox .lb-nav{top:50%;transform:translateY(-50%)}.lightbox .lb-nav:active{transform:translateY(-50%) scale(.96)}.lightbox .prev{left:16px}.lightbox .next{right:16px}
/* Das Wichtigste auf einen Blick: Datenblatt-Zeilen */
.glance{margin:0 0 .875rem}
.glance .glance-h{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.375rem}
.glance ul{list-style:none;margin:0;padding:0;display:grid;gap:0 1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.glance li{display:flex;align-items:flex-start;gap:8px;font-size:.9375rem;line-height:1.4;padding:5px 0;border-bottom:1px solid var(--line)}
.glance li .ic{width:16px;height:16px;color:var(--ok);margin-top:3px;flex:none}
.glance li .k{color:var(--muted)}
/* Kaufbox */
.buybox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.375rem;margin:0 0 .875rem}
.buybox .pricebox{margin-bottom:.5rem}
.buybox .wasline{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.buybox .wasline .was{font-size:.875rem}.buybox .wasline .tag{position:static}
.buybox .price{font-size:2.125rem;line-height:1.05;letter-spacing:-.02em}
.buybox .price small{font-size:.8125rem;margin-top:6px;font-weight:400}
.buybox .unitprice{margin-top:.5rem;font-size:.8125rem;color:var(--muted)}
.buybox .saveline{display:inline-block;margin-top:.5rem;color:var(--sale);font-weight:700;font-size:.875rem;background:var(--sale-bg);padding:3px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.buybox .avail{display:flex;flex-direction:column;gap:2px;padding:.75rem 0;border-top:1px solid var(--line);margin-bottom:.75rem}
.buybox .avail .dl{font-size:.9375rem}
.buybox .avail .sub{font-size:.8125rem;color:var(--muted);margin:0}
.buybox .addform{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.buybox .addform .qty{display:flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--surface);height:52px;flex:none}
.buybox .addform .qty button{width:44px;border:0;background:var(--surface);color:var(--brand);font-size:1.375rem;font-weight:600;cursor:pointer;line-height:1;transition:background var(--d2) var(--ease)}
.buybox .addform .qty button:hover{background:var(--bg-2)}.buybox .addform .qty button:active{background:var(--line)}.buybox .addform .qty button:focus-visible{outline:3px solid var(--link);outline-offset:-3px}
.buybox .addform .qty input{width:54px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;padding:0;text-align:center;font:inherit;font-weight:700;font-size:1rem;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.buybox .addform .qty input::-webkit-outer-spin-button,.buybox .addform .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buybox .addform .btn-cta{flex:1;min-width:200px;min-height:52px;font-size:1.0625rem;font-weight:800;letter-spacing:.005em}
.trust{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8125rem;color:var(--muted);margin-top:.875rem}
.trust span{display:inline-flex;align-items:center;gap:6px}.trust .ic{width:16px;height:16px;color:var(--ok)}
.unavailable{margin:0 0 .75rem;display:block}
/* Inhalt unter dem Kaufbereich: Varianten, Beschreibung, Datenblatt, Hersteller, Ratgeber */
.detail-body{max-width:900px;margin-top:1.5rem}
h2.sec{font-size:1.375rem;margin:2.5rem 0 .625rem}
.detail-body>h2.sec:first-child{margin-top:1.25rem}
table.attrs{width:100%;border-collapse:collapse;font-size:.9375rem;margin-top:.25rem}
table.attrs th,table.attrs td{text-align:left;padding:.5625rem .25rem;border-bottom:1px solid var(--line);vertical-align:top}table.attrs th{width:38%;color:var(--muted);font-weight:500;padding-right:1rem}
table.attrs td{font-variant-numeric:tabular-nums}
table.attrs tbody.grp tr.grp-h th{color:var(--ink);font-weight:700;padding-top:1.125rem;border-bottom-color:var(--line-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
table.attrs td .muted{color:var(--muted)}
.variantbox{margin:0 0 .875rem}.variantbox .glance-h{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.375rem}
.variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:.25rem}
.variants>a,.variants>span{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:var(--r-s);padding:.5rem .75rem;font-size:.875rem;color:var(--ink);background:var(--surface);transition:border-color var(--d2) var(--ease)}
.variants>a:hover{border-color:var(--ink);text-decoration:none}.variants>a strong{white-space:nowrap;font-variant-numeric:tabular-nums}.variants>span{color:var(--muted);border-style:dashed}.variants>span em{font-style:normal;font-size:.75rem;white-space:nowrap}
/* Varianten wie im Modehandel: Farbkacheln (Bild) und Größen-Chips */
.variantbox .vgroup{margin:0 0 .625rem}.variantbox .vlabel{display:block;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.375rem}.variantbox .vlabel strong{color:var(--ink);text-transform:none;letter-spacing:0;font-weight:700}
.vswatches{display:flex;flex-wrap:wrap;gap:8px}
.vswatches .vsw{display:block;width:60px;height:60px;padding:2px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);overflow:hidden;transition:border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease)}
.vswatches a.vsw:hover{border-color:var(--ink);text-decoration:none}
.vswatches .vsw.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.vswatches .vsw img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.vswatches .vsw .noimg{display:block;width:100%;height:100%;background:var(--surface-2, #f2f2f2)}
.vswatches .vsw.off{opacity:.45}
.vsizes{display:flex;flex-wrap:wrap;gap:8px}
.vsizes .vchip{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:999px;font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease)}
.vsizes a.vchip:hover{border-color:var(--ink);text-decoration:none}
.vsizes .vchip.on{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.vsizes .vchip.off{color:var(--muted);border-style:dashed;text-decoration:line-through;cursor:not-allowed}
.desc{margin-top:.5rem;color:var(--ink-2);line-height:1.7;font-size:1rem;max-width:720px}
.desc p{margin:0 0 .75rem}
.mfr{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:.9375rem;margin-top:.5rem}
.mfr dt{color:var(--muted)}.mfr dd{margin:0}
.related{margin-top:3.5rem}.related h2{font-size:1.5rem;margin-bottom:1rem}
.pfaq{margin-top:3rem;max-width:900px}.pfaq h2{font-size:1.5rem;margin-bottom:.75rem}
/* Sticky-Kaufleiste (Smartphone): von unten, 220 ms */
.stickybuy{display:none}

/* 8 Startseite ------------------------------------------------------------------------------------- */
.hero-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:1rem;margin-top:1rem;min-height:520px}
.hero{position:relative;color:#fff;background:var(--brand-2);overflow:hidden;border-radius:var(--r-l);grid-row:1/3;display:flex;align-items:flex-end}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,44,0) 30%,rgba(6,22,44,.88) 100%)}
.hero .inner{position:relative;z-index:1;padding:2.5rem 2.75rem;max-width:760px}
.hero h1{font-size:2.875rem;line-height:1.02;margin-bottom:.75rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25);font-variation-settings:"opsz" 96,"wdth" 85;letter-spacing:-.025em}
.hero p{color:#dbe6f2;font-size:1.0625rem;max-width:560px}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.25rem}
.tile{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--brand-2);color:#fff;display:flex;align-items:flex-end;min-height:200px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d3) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tile:hover img{transform:scale(1.03)}}
.tile:hover{text-decoration:none}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,44,0) 35%,rgba(6,22,44,.85))}
.tile div{position:relative;z-index:1;padding:1.25rem 1.375rem}.tile strong{display:block;font-size:1.375rem;font-variation-settings:"opsz" 32,"wdth" 90;letter-spacing:-.015em}.tile span{font-size:.8125rem;color:#dbe6f2}
.uspbar{margin-top:1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.uspbar .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5rem 1.5rem;padding:.875rem 0;font-size:.875rem}
.uspbar .in>span{display:flex;gap:10px;align-items:center;font-weight:600}.uspbar .in>span>span{display:block}.uspbar .ic{color:var(--ok);width:22px;height:22px}.uspbar small{display:block;color:var(--muted);font-weight:400;font-size:.75rem}
.start section{margin-top:3.5rem}.start section:first-of-type{margin-top:3rem}
/* Stimmungskacheln: Bento, eine große und drei kleine */
.moods{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(180px,1fr));gap:1rem}
.moods .mood:first-child{grid-column:1/3;grid-row:1/3}.moods .mood:first-child strong{font-size:1.75rem}
.mood{min-height:180px}
/* Kategorien: Kacheln mit Symbol (Foto hat Vorrang) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}
.tiles a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem;color:var(--ink);font-weight:700;position:relative;overflow:hidden;min-height:112px;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;transition:box-shadow .34s var(--ease-out),border-color .34s var(--ease-out),transform .34s var(--ease-out)}
.tiles a .ic{width:28px;height:28px;color:var(--brand);stroke-width:1.75;transition:transform .34s var(--ease-out),color .34s var(--ease)}
.tiles a small{display:block;color:var(--muted);font-weight:400;font-size:.75rem;font-variant-numeric:tabular-nums}
.tiles a:not(.pic)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .34s var(--ease-out)}
.tiles a.pic{min-height:160px;color:#fff;background-size:cover;background-position:center;justify-content:flex-end;transition:box-shadow .34s var(--ease-out),border-color .34s var(--ease-out),transform .8s var(--ease-out)}
.tiles a.pic::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(6,22,44,.85));transition:background .5s var(--ease-out)}
.tiles a.pic span{position:relative;z-index:3;transition:transform .4s var(--ease-out)}
.tiles a.pic small{color:#dbe6f2}.tiles a.pic .ic{display:none}
@media (hover:hover) and (pointer:fine){
  .tiles a:hover{box-shadow:var(--sh-2);border-color:var(--line-2);transform:translateY(-3px);text-decoration:none}
  .tiles a:not(.pic):hover::before{transform:scaleY(1)}
  .tiles a:not(.pic):hover .ic{transform:scale(1.1) translateY(-1px);color:var(--accent)}
  .tiles a.pic:hover{transform:translateY(-3px) scale(1.02)}
  .tiles a.pic:hover::before{background:linear-gradient(180deg,rgba(6,22,44,.12) 0%,rgba(6,22,44,.92) 92%)}
  .tiles a.pic:hover span{transform:translateY(-4px)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tiles a.pic::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s var(--ease-out);pointer-events:none}
  .tiles a.pic:hover::after{transform:translateX(130%)}
}
/* Marken: Textzeile ohne Kästen */
.brands{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center}
.brands a{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:.5rem 1.125rem;font-weight:700;font-size:.9375rem;color:var(--brand);letter-spacing:-.01em;transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease)}
.brands a:hover{border-color:var(--brand);text-decoration:none}
/* Neu im Shop: drei große Teaser */
.newrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.newrow .card .img{aspect-ratio:4/3}
.banner{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--brand-2);color:#fff;min-height:220px;display:flex;align-items:center}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,22,44,.92),rgba(6,22,44,.4))}
.banner div{position:relative;z-index:1;padding:1.875rem 2rem;max-width:640px}.banner h2{font-size:1.5rem;margin-bottom:.375rem;color:#fff}.banner p{color:#dbe6f2;margin-bottom:.875rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* So funktioniert es: nummerierte Zeile ohne Karten */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;color:var(--ink-2);font-size:.9375rem;padding-top:.75rem;border-top:2px solid var(--brand)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-size:.8125rem;font-weight:800;color:var(--accent);letter-spacing:.06em;margin-bottom:.375rem;font-variant-numeric:tabular-nums}
.steps li strong{display:block;color:var(--ink);font-size:1.125rem;margin-bottom:.25rem}
.faq details{border-top:1px solid var(--line);padding:.875rem 0}.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--muted);font-weight:400;font-size:1.25rem;flex:none}.faq details[open] summary::after{content:"−"}
.faq p{color:var(--ink-2);margin-top:.5rem;max-width:70ch;line-height:1.6}
.faq.box{padding:0 1.5rem}
section.faq h2,.pfaq .faq h2{margin-bottom:.5rem}

/* 9 Blog ------------------------------------------------------------------------------------------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.posts.feature{grid-template-columns:1.4fr 1fr 1fr}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--d2) var(--ease),border-color var(--d2) var(--ease),transform var(--d2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.post:hover{box-shadow:var(--sh-2);border-color:var(--line-2);transform:translateY(-2px)}}
.post .pic{aspect-ratio:2/1;background:var(--bg-2);overflow:hidden;display:block;position:relative}.post .pic img{width:100%;height:100%;object-fit:cover;display:block}
.post .pic.noimg{display:flex;align-items:center;justify-content:center;color:var(--brand)}.post .pic.noimg .ic{width:40px;height:40px;stroke-width:1.5}
.post .body{padding:.875rem 1.125rem 1.125rem;display:flex;flex-direction:column;gap:.375rem;flex:1}.post .kick{font-size:.75rem;color:var(--muted)}
.post h2,.post h3{font-size:1.0625rem;font-variation-settings:"opsz" 24,"wdth" 96}.post h2 a,.post h3 a{color:var(--ink)}.post p{color:var(--muted);font-size:.875rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.posts.feature .post:first-child h2{font-size:1.375rem}
.post .tags{margin-top:auto;padding-top:.5rem;display:flex;gap:6px;flex-wrap:wrap}
.post .tags a,.tagchips a{font-size:.75rem;background:var(--bg-2);color:var(--link);padding:4px 10px;border-radius:999px;font-weight:600}
.tagchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem;align-items:center}.tagchips a.on{background:var(--brand);color:#fff}.tagchips strong{margin-right:6px;font-size:.875rem}
.article{max-width:760px}
.article .pic{border-radius:var(--r-l);overflow:hidden;background:var(--bg-2);max-height:460px}.article .pic img{width:100%;height:100%;object-fit:cover;display:block}
.article .inner{padding:1.5rem 0 0}.article h1{font-size:2.125rem;margin:.5rem 0 .625rem}
.article .kick{font-size:.8125rem;color:var(--muted)}.article .teaser{font-size:1.125rem;color:var(--ink-2);margin-bottom:1.125rem;line-height:1.55}
.prose{font-size:1.0625rem;line-height:1.75}.prose p{margin:0 0 1rem}.prose h2{font-size:1.5rem;margin:1.75rem 0 .5rem}.prose h3{font-size:1.1875rem;margin:1.25rem 0 .375rem}
.prose ul,.prose ol{margin:0 0 1rem 1.5rem}.prose img{border-radius:var(--r-s);margin:.5rem 0}.prose blockquote{border-left:4px solid var(--accent);padding:.375rem 1rem;color:var(--muted);margin:0 0 1rem}.prose a{text-decoration:underline}
.article .foot{margin-top:1.25rem;display:flex;gap:10px;flex-wrap:wrap}
.blogtop{margin:0 0 1.25rem}.blogtop h1{margin-bottom:.25rem}

/* 10 Warenkorb, Kasse, Bestellstatus --------------------------------------------------------------- */
table.cart{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.cart th,table.cart td{padding:.875rem .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.cart th{background:var(--bg-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
table.cart td.num,table.cart th.num{text-align:right;font-variant-numeric:tabular-nums}
table.cart input.q{width:64px;min-height:40px;padding:6px;border:1px solid var(--line-2);border-radius:var(--r-s);text-align:center;font:inherit;font-variant-numeric:tabular-nums}
table.cart img{width:64px;height:64px;object-fit:contain;border-radius:var(--r-s);background:var(--bg-2);padding:4px}
table.cart .ean{color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}table.cart .up{color:var(--muted);font-size:.75rem;white-space:nowrap}
table.cart tfoot td{font-size:1rem}table.cart .rm{min-height:36px;min-width:36px;padding:0 .625rem}
.checkout .grid2{grid-template-columns:3fr 2fr;align-items:start;gap:1.25rem}
.checkout .box+.box{margin-top:1rem}
.checkout .sticky{position:sticky;top:88px}
.costeps{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.8125rem;color:var(--muted);margin:0 0 1.25rem}
.costeps span{display:inline-flex;align-items:center;gap:6px}.costeps b{display:inline-flex;width:22px;height:22px;border-radius:999px;background:var(--bg-2);color:var(--ink);align-items:center;justify-content:center;font-size:.6875rem}.costeps .on{color:var(--ink);font-weight:600}.costeps .on b{background:var(--brand);color:#fff}.costeps .sep{color:var(--line-2)}
.payopt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-2);border-radius:var(--r);padding:.875rem 1rem;margin-top:.625rem;cursor:pointer;transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease)}
.payopt:hover{border-color:var(--ink)}.payopt:has(input:checked){border-color:var(--brand);background:#f8fafc;box-shadow:0 0 0 1px var(--brand) inset}
.payopt input{margin-top:3px;flex:none}.payopt .t{flex:1;min-width:0}.payopt .t strong{display:block}.payopt .t span{color:var(--muted);font-size:.875rem;font-weight:400;display:block}
.paylogos{display:inline-flex;gap:4px;flex-wrap:wrap;flex:none}.paylogos .plogo{height:26px;padding:0 5px}.paylogos svg,.paylogos img{height:18px}
.payopt .paylogos{margin-left:auto}
.leasingbox{margin:.5rem 0 0 2rem}
.pkg{border:1px solid var(--line);border-radius:var(--r-s);padding:.75rem .875rem;margin-top:.75rem}
.pkg .pkg-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}.pkg .pkg-m{font-size:.8125rem;color:var(--muted);margin-bottom:.375rem}
.pkg .line{display:flex;justify-content:space-between;gap:10px;font-size:.9375rem;padding:4px 0}.pkg .line .amt{white-space:nowrap;font-variant-numeric:tabular-nums}
.pkg .pkg-s{font-size:.8125rem;color:var(--muted);margin-top:.375rem}.pkg .pkg-s.bad{color:var(--bad)}
.sum{width:100%;font-size:.9375rem;margin-top:.5rem;border-collapse:collapse}.sum td{padding:3px 0}.sum td.r{text-align:right;font-variant-numeric:tabular-nums}.sum tr.total td{font-weight:800;font-size:1.25rem;padding-top:.5rem}.sum tr.vat td{color:var(--muted);font-size:.75rem}
.orderline{color:var(--muted);font-size:.875rem}
.timeline{display:flex;gap:0;margin:.75rem 0 .25rem;list-style:none;counter-reset:t}
.timeline li{flex:1;position:relative;padding-top:1.25rem;font-size:.75rem;color:var(--muted);text-align:center}
.timeline li::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line-2)}.timeline li::after{content:"";position:absolute;left:50%;top:1px;width:12px;height:12px;margin-left:-6px;border-radius:999px;background:var(--surface);border:2px solid var(--line-2)}
.timeline li.done{color:var(--ink);font-weight:600}.timeline li.done::before{background:var(--ok)}.timeline li.done::after{background:var(--ok);border-color:var(--ok)}.timeline li.now::after{border-color:var(--brand);background:var(--brand)}
.timeline li:first-child::before{left:50%}.timeline li:last-child::before{right:50%}
.addr{font-size:.9375rem;margin-top:.75rem}.addr strong{display:block;margin-bottom:2px}
.legal{max-width:760px;line-height:1.7}
.legal h1{font-size:2rem;margin-bottom:1rem}.legal h2,.legal h3{font-size:1.375rem;margin:1.75rem 0 .5rem}.legal p{margin:0 0 .875rem}.legal ul,.legal ol{margin:0 0 .875rem 1.375rem}
.legal.box{padding:2rem 2.25rem}.legal .related-links{font-size:.875rem;color:var(--muted);margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line)}

/* 11 Fußzeile -------------------------------------------------------------------------------------- */
footer{color:var(--on-dark);font-size:.875rem;margin-top:4rem;background:var(--brand)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.75rem;max-width:var(--wrap);margin:0 auto;padding:2.5rem var(--gutter) 1.5rem}
footer h2,footer h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem;color:#fff;font-variation-settings:"opsz" 12,"wdth" 100}
footer a{display:block;color:var(--on-dark);padding:3px 0}footer a:hover{color:#fff}
footer .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}footer .pills span{background:#fff;color:var(--brand);font-weight:800;font-size:.75rem;padding:5px 10px;border-radius:var(--r-s)}
.plogos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.plogo{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s)}.plogo svg,.plogo img{height:22px;width:auto;display:block}
footer .plogo{border-color:transparent}footer .fnote{font-size:.75rem;color:var(--on-dark);margin-top:.5rem}
.notice.bikebox{margin-top:.625rem}
footer .bottom{max-width:var(--wrap);margin:0 auto;padding:.875rem var(--gutter) 1.375rem;border-top:1px solid var(--on-dark-line);font-size:.75rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer .bottom .ver{opacity:.6}

/* 12 Bewegung und Kleinkram ------------------------------------------------------------------------ */
.previewbar{background:#fff7ed;color:#7c3a00;font-size:.8125rem;text-align:center;padding:6px 16px;border-bottom:1px solid #fed7aa}.previewbar a{color:#7c3a00;text-decoration:underline;margin-left:4px}
.layout.two{grid-template-columns:1.1fr 1fr;max-width:1100px}.steps.stack{grid-template-columns:1fr;gap:1.25rem}
#pbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:100;opacity:0;transition:width .4s linear,opacity var(--d3) var(--ease)}#pbar.on{opacity:1}
.infolinks{font-size:.875rem;color:var(--muted);margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.notfound{max-width:640px;margin:2rem auto;text-align:center}.notfound h1{font-size:2rem;margin-bottom:.5rem}.notfound p{color:var(--muted);margin-bottom:1rem}.notfound .ways{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.notfound form{display:flex;max-width:460px;margin:1.25rem auto}

/* 13 Musterseite (Design-Vorschau, /design-vorschau) ----------------------------------------------- */
.styleguide{display:grid;gap:2.5rem}.styleguide h2{border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:1rem}
.styleguide .swatches{display:flex;flex-wrap:wrap;gap:10px}.styleguide .sw{width:120px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:.75rem;background:var(--surface)}.styleguide .sw i{display:block;height:56px}.styleguide .sw span{display:block;padding:6px 8px;font-variant-numeric:tabular-nums}
.styleguide .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.styleguide .typ p{margin:.25rem 0}.styleguide .typ .display{font-size:2.875rem;font-weight:800;font-variation-settings:"opsz" 96,"wdth" 85;letter-spacing:-.025em;line-height:1.02}
.previewnote{background:#fff7ed;border:1px solid #fed7aa;border-radius:var(--r);padding:.75rem 1rem;font-size:.875rem;color:#7c3a00;margin-bottom:1.5rem}.previewnote a{color:#7c3a00;text-decoration:underline}

/* 14 Mobil ----------------------------------------------------------------------------------------- */
@media (max-width:1000px){
  .layout{grid-template-columns:1fr;gap:1rem}
  .filtertoggle{display:block;margin-bottom:.75rem}.filtertoggle summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 1.125rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);font-weight:700}.filtertoggle summary::-webkit-details-marker{display:none}
  .filtertoggle[open] summary{border-color:var(--ink)}.side.wrapped{display:none}.filtertoggle[open]+.side.wrapped{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.25rem 1rem 1rem}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}.hero{grid-row:auto;min-height:420px}
  .detail{grid-template-columns:1fr;grid-template-areas:"head" "gallery" "side";grid-template-rows:auto;gap:1rem}.detail h1{font-size:1.625rem}
  .moods{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.moods .mood:first-child{grid-column:1/3;grid-row:auto;min-height:260px}
  .two{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:1.25rem}.newrow{grid-template-columns:1fr 1fr}.posts.feature{grid-template-columns:1fr 1fr}.posts.feature .post:first-child{grid-column:1/3}
  .topbar{flex-wrap:wrap;height:auto;padding:.625rem 0;gap:.75rem}.search{order:3;width:100%;max-width:none}.hdr-actions a{min-width:0;padding:6px 8px}
  nav.cats .mega-flat{columns:2}.topline .links{display:none}
  .jumpbar{position:static}.pairings .grid.rel{grid-template-columns:repeat(2,1fr)}
  .checkout .sticky{position:static}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .hero{min-height:0;display:block;background:var(--surface);color:var(--ink);border:1px solid var(--line)}.hero .bg{position:static;aspect-ratio:4/3;height:auto;display:block}.hero::after{display:none}
  .hero .inner{padding:1.125rem 1.125rem 1.375rem;max-width:none}.hero h1{font-size:1.875rem;color:var(--ink);text-shadow:none}.hero p{color:var(--ink-2)}.hero .btn-o{color:var(--ink);border-color:var(--line-2);background:var(--surface)}
  .grid2{grid-template-columns:1fr}.grid2.zip{grid-template-columns:1fr 2fr}.checkout .grid2{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr);gap:.625rem}.card .body{padding:.625rem .75rem .75rem}.card .name{font-size:.875rem}
  .detail h1{font-size:1.5rem}.buybox{padding:1rem}.buybox .price{font-size:2rem}.buybox .addform .btn-cta{flex:1 1 100%;min-width:0}
  .gallery .thumb{width:56px;height:56px}
  .grid.rel{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}.grid.rel .card{scroll-snap-align:start}
  .moods{gap:.625rem}.moods .mood:first-child{min-height:220px}.mood{min-height:150px}.tile strong{font-size:1.125rem}.moods .mood:first-child strong{font-size:1.5rem}
  .newrow{grid-template-columns:1fr}.posts.feature{grid-template-columns:1fr}.posts.feature .post:first-child{grid-column:auto}
  .start section{margin-top:2.5rem}.section{margin-top:2.5rem}
  .article h1{font-size:1.625rem}.legal.box{padding:1.25rem 1rem}.pagehead h1{font-size:1.5rem}.pagehead div{padding:1rem 1.125rem}
  table.cart thead{display:none}table.cart tr{display:grid;grid-template-columns:64px 1fr auto;gap:2px 12px;padding:.75rem;border-bottom:1px solid var(--line)}table.cart td{border:0;padding:0}
  table.cart td.c-img{grid-row:1/4}table.cart td.c-name{grid-column:2/4}table.cart td.c-dl{grid-column:2/4;font-size:.75rem}table.cart td.c-price{grid-column:2;text-align:left;font-size:.875rem}table.cart td.c-qty{grid-column:3;grid-row:3}table.cart td.c-sum{grid-column:2;grid-row:4;text-align:left}table.cart td.c-rm{grid-column:3;grid-row:4;text-align:right}
  table.cart tfoot tr{display:flex;justify-content:space-between}table.cart tfoot td.empty-cell{display:none}
  .timeline li{font-size:.6875rem}
  footer .cols{padding-top:2rem}
}
@media (max-width:800px){
  .stickybuy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;gap:12px;background:var(--surface);border-top:1px solid var(--line-2);box-shadow:var(--sh-3);padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform var(--d3) var(--ease-out);visibility:hidden}
  .stickybuy.show{transform:none;visibility:visible}
  .stickybuy .sprice{font-weight:800;font-size:1.25rem;line-height:1.05;flex:none;font-variant-numeric:tabular-nums}.stickybuy .sprice small{display:block;font-weight:400;font-size:.6875rem;color:var(--muted)}
  .stickybuy .btn{flex:1;min-height:48px;font-size:.9375rem;font-weight:800}
  body.has-sticky main{padding-bottom:96px}
}
@media (max-width:480px){
  table.attrs tr,table.attrs th,table.attrs td{display:block;width:auto}
  table.attrs th{border-bottom:0;padding-bottom:0;font-size:.75rem}table.attrs td{padding-top:2px}
  table.attrs tbody.grp tr.grp-h th{border-bottom:1px solid var(--line-2);padding-bottom:.375rem}
  .mfr{grid-template-columns:1fr;gap:2px 0}.mfr dd{margin-bottom:.5rem}
}

/* 15 SEO-Bausteine: Einleitung, Kaufberatung, FAQ, Linkzeilen, Inhaltsverzeichnis, Eigenschaften ---- */
.intro{max-width:70ch;margin:0 0 1rem;color:var(--ink-2);font-size:1rem;line-height:1.6}
.intro p{margin:0 0 .5rem}
.guide h3{font-size:1.0625rem;margin:.875rem 0 .375rem}
.guide p,.guide li{font-size:.9375rem;line-height:1.6}
.guide ul{padding-left:1.25rem;margin:0 0 .625rem}
.linkrow{margin-top:2rem}
.linkrow h2{font-size:1.125rem;margin-bottom:.5rem}
.linkrow .tagchips a small{font-size:.75rem;color:var(--brand-2)}
.toc{border-left:3px solid var(--brand);padding:.25rem 0 .25rem 1rem;margin:0 0 1.25rem;font-size:.875rem}
.toc ol{margin:.375rem 0 0;padding-left:1.25rem}
.toc li{margin:3px 0}
.features{padding-left:1.25rem;margin:0 0 .875rem;font-size:.9375rem;line-height:1.6}
.features li{margin:2px 0}
footer .wdlink{font-weight:700}

/* 16 Etappe 1b: Sofortsuche, Kategoriebaum, Kachel/Artikelseite (docs/design/ANALYSE_1B_2026-09-20.md) ------------- */
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Suchschicht: drei Bereiche (Kategorien/Marken, Produkte, alle Ergebnisse), 160 ms ease-out aus dem Suchfeld */
.sugg{right:auto;min-width:100%;width:820px;max-width:calc(100vw - 2 * var(--gutter));max-height:min(70vh,640px);overflow:auto;padding:0}
.sugg .cols{display:grid;grid-template-columns:1fr}.sugg .cols.two{grid-template-columns:230px 1fr}.sugg .sp{min-width:0}   /* Seitenspalte nur bei Kategorie- oder Markentreffern */
.sugg .side{border-right:1px solid var(--line);background:var(--bg);padding:.375rem 0}
.sugg .sg-h{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:.625rem 1rem .25rem}
.sugg .sg a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:.4375rem 1rem;border:0;font-size:.9375rem}
.sugg .sg a em{font-style:normal;color:var(--muted);font-size:.75rem;margin-left:4px;flex:1}.sugg .sg a small{color:var(--muted);font-size:.75rem;text-transform:none;letter-spacing:0;margin:0;font-variant-numeric:tabular-nums}
.sugg .sp{padding:.375rem 0}
.sugg .sp a{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:.5rem 1rem;border:0}
.sugg .sp .pi{width:64px;height:64px;background:var(--bg-2);border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;overflow:hidden}.sugg .sp .pi img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.sugg .sp .pt{min-width:0;display:flex;flex-direction:column;gap:2px}.sugg .sp .pt small{text-transform:uppercase;letter-spacing:.08em;font-size:.6875rem;color:var(--muted);font-weight:700;margin:0}.sugg .sp .pt small .tag{margin-left:6px;font-size:.625rem;padding:1px 6px;letter-spacing:0;text-transform:none}
.sugg .sp .tt{font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sugg .sp .pm{font-size:.75rem;color:var(--ok);font-weight:600}
.sugg .sp strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1rem;text-align:right}.sugg .sp strong s{display:block;color:var(--muted);font-weight:400;font-size:.75rem}
.sugg mark{background:none;color:var(--link);font-weight:700}
.sugg a.act,.sugg a:hover{background:var(--bg-2);text-decoration:none}.sugg a.act{box-shadow:inset 3px 0 0 var(--brand)}
.sugg .all{display:block;padding:.75rem 1rem;border-top:1px solid var(--line);font-weight:700;color:var(--brand);background:var(--surface)}
.sugg .corr{padding:.625rem 1rem;font-size:.875rem;background:#fff7ed;color:#7c3a00;border-bottom:1px solid #fed7aa}.sugg .none{padding:1rem;color:var(--muted);font-size:.9375rem}
.sugg .closer{display:none}
.corrected{margin:0 0 1rem;font-size:1.0625rem}.corrected a{font-weight:700}
/* Mega-Menü in Spalten je Obergruppe */
nav.cats .mega-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1rem 1.5rem}
nav.cats .mega .col a{padding:3px 0;height:auto;font-size:.875rem}nav.cats .mega .col-h{font-weight:800;color:var(--brand);padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line)}nav.cats .mega .col-h .ic{color:var(--brand)}
nav.cats .mega .col .more{color:var(--link);font-weight:600;font-size:.8125rem}
nav.cats .mega-foot{display:flex;gap:1.5rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--line)}nav.cats .mega-foot a{height:auto;padding:0;color:var(--ink)}
/* Reiter-Flyouts: je Obergruppe ein Menü unter dem Reiter (links Untergruppen, rechts die Gruppen der überfahrenen Untergruppe); Maus nur auf Geräten mit Zeiger, Tastatur über Pfeil nach unten (.open) und Fokus im Menü */
nav.cats .tab{display:flex}
nav.cats .fly{position:absolute;left:0;right:0;top:44px;display:none;max-height:calc(100vh - 170px);overflow:auto;min-height:240px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-2);border-radius:0 0 var(--r) var(--r);z-index:36;visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity var(--d2) var(--ease-out),transform var(--d2) var(--ease-out),visibility 0s var(--d2);transform-origin:top left}
nav.cats .tab.open .fly,nav.cats .fly:focus-within{display:flex;visibility:visible;opacity:1;transform:none;transition-delay:0s}   /* geschlossen display:none: unsichtbare Flyouts (bis 14.000 px hoch) verlängerten sonst die Seite unter der Fußzeile (Befund 21.09.2026) */
@media (hover:hover) and (pointer:fine){nav.cats .tab:hover .fly{display:flex;visibility:visible;opacity:1;transform:none;transition-delay:0s}}
nav.cats .fly-subs{flex:0 0 300px;padding:.625rem 0;border-right:1px solid var(--line)}
nav.cats .fly a{height:auto;color:var(--ink);font-weight:500;font-size:.875rem;border:0;padding:.5rem 1.25rem;display:flex;align-items:center;gap:8px;white-space:normal}
nav.cats .fly a small{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums;margin-left:auto}
nav.cats .fly a:hover{background:var(--bg-2);color:var(--link);text-decoration:none}
nav.cats .fly .fly-h{font-weight:800;color:var(--brand)}nav.cats .fly .fly-h .ic{width:18px;height:18px;color:var(--brand);margin-right:4px}
nav.cats .sub.has>a::after{content:"›";color:var(--muted)}
nav.cats .sub:hover>a,nav.cats .sub:focus-within>a{background:var(--bg-2);color:var(--link)}
nav.cats .leaves{display:none;position:absolute;left:300px;right:0;top:0;bottom:0;padding:.625rem .75rem;overflow:auto}
nav.cats .sub:hover .leaves,nav.cats .sub:focus-within .leaves,nav.cats .fly-subs:not(:hover):not(:focus-within) div.sub:first-of-type .leaves{display:block}
nav.cats .leaf-list{columns:3;column-gap:1rem}nav.cats .leaf-list a{break-inside:avoid;padding:.375rem 1.25rem}
nav.cats .leaves .more{color:var(--link);font-weight:600;font-size:.8125rem}
nav.cats .fly.fly-only{right:auto;min-width:300px;min-height:0}nav.cats .fly.fly-only .fly-subs{flex:1 1 auto}nav.cats .fly.fly-only .fly-subs{border-right:0}   /* Obergruppe ohne dritte Ebene: nur die Untergruppen-Spalte */
@media (max-width:1000px){nav.cats .fly{display:none}}
nav.cats .mobnav{display:none;color:#fff;font-size:.875rem;font-weight:700}nav.cats .mobnav>summary{list-style:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 .875rem;background:var(--brand-2);cursor:pointer}nav.cats .mobnav>summary::-webkit-details-marker{display:none}
nav.cats .mobnav-in{position:absolute;left:0;right:0;top:44px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-2);z-index:35;padding:.5rem 1rem 1rem;max-height:70vh;overflow:auto}
nav.cats .mobnav-in details{border-bottom:1px solid var(--line)}nav.cats .mobnav-in summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:700}nav.cats .mobnav-in summary::-webkit-details-marker{display:none}nav.cats .mobnav-in summary .ic{color:var(--brand)}nav.cats .mobnav-in summary small{color:var(--muted);font-weight:400}
nav.cats .mobnav-in a{display:flex;justify-content:space-between;height:auto;padding:8px 0 8px 30px;color:var(--ink);font-weight:500;border:0}nav.cats .mobnav-in a small{color:var(--muted)}nav.cats .mobnav-in>a{padding-left:0;font-weight:700}
@media (max-width:1000px){nav.cats .allbox{display:none}nav.cats .mobnav{display:block}}   /* nach der Grundregel, damit die Mobilregel in der Kaskade gewinnt */
/* Obergruppen-Seite: Kacheln der Untergruppen; Baum-Ausschnitt in der Filterleiste */
.subcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.625rem;margin:0 0 1.25rem}
.subcats a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.75rem .875rem;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:10px;min-height:64px;transition:box-shadow var(--d2) var(--ease),border-color var(--d2) var(--ease),transform var(--d2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.subcats a:hover{box-shadow:var(--sh-2);border-color:var(--line-2);transform:translateY(-2px);text-decoration:none}}
.subcats a .ic{width:26px;height:26px;color:var(--brand);stroke-width:1.75;flex:none}.subcats a small{display:block;color:var(--muted);font-weight:400;font-size:.75rem;font-variant-numeric:tabular-nums}
.subcats a.pic{background-size:cover;background-position:center;color:#fff;position:relative;overflow:hidden;min-height:96px;align-items:flex-end}.subcats a.pic::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(6,22,44,.85))}.subcats a.pic span{position:relative;z-index:1}.subcats a.pic small{color:#dbe6f2}.subcats a.pic .ic{display:none}
.treenav{list-style:none;margin:0 0 .75rem;padding:0;max-height:none}.treenav li{display:flex;justify-content:space-between;gap:6px;padding:3px 0;font-size:.875rem}
.treenav li.lvl2{padding-left:.75rem}.treenav li.lvl3{padding-left:1.5rem}.treenav li.cur{font-weight:700;color:var(--brand)}.treenav li.cur.lvl2{padding-left:.75rem}.treenav li.cur.lvl3{padding-left:1.5rem}
.treenav li.kid,.treenav li.sib{padding-left:1.5rem}.treenav li.sib a{color:var(--ink-2)}.treenav .n{color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}
/* Kategorienübersicht gegliedert */
.catgroup{margin-top:2rem}.catgroup h2{display:flex;align-items:center;gap:8px;margin-bottom:.75rem;font-size:1.375rem}.catgroup h2 a{color:var(--ink)}.catgroup h2 .ic{color:var(--brand)}.catgroup h2 small{font-size:.8125rem;color:var(--muted);font-weight:400}
.tiles a .leaves{display:block;color:var(--muted);font-weight:400;font-size:.75rem;line-height:1.4;margin-top:2px}.tiles a .leaves em{font-style:normal}.tiles a .leaves em+em::before{content:" · "}
.leaflinks{margin-top:.75rem;font-size:.875rem;line-height:1.9}.leaflinks a{margin-right:1rem;white-space:nowrap}.leaflinks a small{color:var(--muted)}
/* Kachel: Varianten-Hinweis; Kaufbox: Lieferfenster, Leasing-Hinweis; Sprungleiste; Passend dazu; Herstellerangaben */
.card .vars{font-size:.75rem;color:var(--muted);font-weight:500}
.buybox .avail .win{color:var(--ink-2)}
.leasehint{margin-top:.75rem;font-size:.8125rem;color:var(--muted);display:flex;gap:6px;align-items:center}.leasehint .ic{width:16px;height:16px;color:var(--brand)}
.jumpbar{position:sticky;top:72px;z-index:20;display:flex;gap:6px;overflow:auto;scrollbar-width:none;margin:1.5rem 0 0;padding:.5rem 0;background:var(--bg);border-bottom:1px solid var(--line)}
.jumpbar a{white-space:nowrap;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:.875rem;font-weight:600;transition:border-color var(--d2) var(--ease),background var(--d2) var(--ease),color var(--d2) var(--ease)}
.jumpbar a:hover{border-color:var(--ink);text-decoration:none}.jumpbar a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pairings{margin-top:2rem}.pairings h2{font-size:1.5rem;margin-bottom:.25rem}.pairings .sub{margin-bottom:.875rem}.pairings .grid.rel{grid-template-columns:repeat(4,1fr)}
.gpsr{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);max-width:720px}.gpsr h3{font-size:1rem;margin-bottom:.5rem}.gpsr p{font-size:.9375rem;color:var(--ink-2);line-height:1.6}
table.cart .c-dl small{display:block;color:var(--muted);font-weight:400;font-size:.75rem}
@media (max-width:640px){
  .sugg{width:auto;left:0;right:0;max-height:calc(100vh - 150px);top:50px}.sugg .cols{grid-template-columns:1fr}.sugg .side{border-right:0;border-bottom:1px solid var(--line)}
  .sugg .closer{display:flex;position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;border-radius:999px;background:var(--bg-2);color:var(--ink);font-size:1.25rem;align-items:center;justify-content:center;cursor:pointer}
  .subcats{grid-template-columns:repeat(2,1fr)}.pairings .grid.rel{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,72%);overflow-x:auto}
}

/* ---- Kundenkonto (Anmelden, Registrieren, Konto-Seiten) ---- */
.acct{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:start}
.acct-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}.acct-nav a{display:block;padding:.5rem .75rem;border-radius:var(--r-s);color:var(--ink);font-weight:600}.acct-nav a:hover,.acct-nav a.on{background:var(--bg-2);text-decoration:none}.acct-nav a.on{color:var(--brand)}
.acct-nav form{margin-top:.75rem;padding:0 .75rem}
table.orders{width:100%;border-collapse:collapse;font-size:.9375rem}table.orders th,table.orders td{padding:.5rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}table.orders th.r,table.orders td.r{text-align:right;white-space:nowrap}table.orders th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
input[readonly]{background:var(--bg-2);color:var(--muted)}
@media (max-width:760px){.acct{grid-template-columns:1fr}.acct-nav ul{display:flex;flex-wrap:wrap;gap:4px}.acct-nav form{margin-top:.5rem;padding:0}table.orders{font-size:.875rem}table.orders th:nth-child(3),table.orders td:nth-child(3){display:none}}
/* Platzhalter für Artikel ohne Produktbild (lokale SVG bilder/produkt.svg) */
.card .img img.ph,.gallery .main img.ph{mix-blend-mode:normal;width:auto;height:auto;max-width:70%;max-height:70%;opacity:.9}.card .img img.ph{inset:0;margin:auto;padding:0}.sugg .sp .pi img.ph{opacity:.8}table.cart td.c-img img.ph{opacity:.8}
/* Kategorie-Kacheln: Grafik als runde Bildmarke (Symbol je Warengruppe, Farbton je Symbolfamilie, keine Produktfotos); Namen brechen um statt abzuschneiden */
.subcats{grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}.subcats a{padding:.625rem .75rem;gap:12px}.subcats a>span:last-child{min-width:0;overflow-wrap:anywhere;font-size:.9375rem;line-height:1.2}
.subcats a .ico{width:48px;height:48px;flex:none;border-radius:999px;background:var(--bg-2);color:var(--brand);display:flex;align-items:center;justify-content:center;transition:transform var(--d2) var(--ease)}
.subcats a .ico .ic{width:26px;height:26px;color:inherit;stroke-width:1.75}
.subcats a .ico.t-blue{background:#e3ecf8;color:#1a4d8f}.subcats a .ico.t-amber{background:#fdf1dc;color:#8a4b00}.subcats a .ico.t-green{background:#e3f4ea;color:#14532d}.subcats a .ico.t-orange{background:#fbe9dd;color:#ab4106}
.subcats a .ico.t-teal{background:#dff3f1;color:#0f5e5a}.subcats a .ico.t-navy{background:#dfe6f3;color:#0b1f3a}.subcats a .ico.t-slate{background:#e9edf3;color:#334155}
@media (hover:hover) and (pointer:fine){.subcats a:hover .ico{transform:scale(1.06)}}

/* Gesetzliche Gewährleistung (harmonisierter Hinweis) und Haltbarkeits-Etikett des Herstellers: Kaufbox, Warenkorb, Kasse */
.warranty{margin-top:.875rem;padding:.75rem .875rem;border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r);background:var(--bg-2);font-size:.8125rem;color:var(--ink)}
.warranty .warranty-lead{margin:0;display:flex;gap:10px;align-items:center}
.warranty .w-ic .ic{width:20px;height:20px;color:var(--ok);flex:0 0 auto}.warranty strong{color:var(--ink)}.warranty p{margin:0;color:var(--muted)}
.warranty-det{margin-top:.5rem}
.warranty-det>summary{cursor:pointer;color:var(--brand);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:8px}
.warranty-det>summary::-webkit-details-marker{display:none}
.warranty-det>summary::before{content:"+";display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:4px;font-weight:700;line-height:1;flex:0 0 auto}
.warranty-det[open]>summary::before{content:"\2013"}
.warranty-body{margin-top:.625rem}
.warranty-body img{display:block;width:auto;max-width:min(100%,560px);height:auto;border-radius:var(--r-s)}
.warranty.label{border-left-color:var(--brand)}.warranty.label .w-ic .ic{color:var(--brand)}
.gpsr-contact{margin-top:.5rem;font-size:.875rem}
.gpsr-gap{margin-top:.5rem;padding:.5rem .75rem;border-left:3px solid var(--warn);background:rgba(180,83,9,.08);font-size:.875rem}

/* Harmonisiertes Etikett der Herstellergarantie (geschachtelt): Streifen unter dem Produktbild, Dialog mit vollem Etikett */
.garan-wrap{margin-top:.625rem;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.garan{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;max-width:300px}.garan svg{width:100%;height:auto;display:block}.garan:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:6px}
.garan-cap{font-size:.8125rem;color:var(--muted)}
.garan-dialog{border:0;border-radius:var(--r-l);padding:1.5rem 1.25rem 1.25rem;max-width:460px;width:calc(100vw - 32px);box-shadow:var(--sh-2);background:var(--surface);color:var(--ink)}
.garan-dialog::backdrop{background:rgba(0,0,0,.55)}.garan-dialog svg{width:100%;height:auto;display:block}.garan-dialog p{font-size:.875rem;margin:.75rem 0 0}
.garan-close{position:absolute;top:4px;right:10px;background:none;border:0;font-size:1.75rem;line-height:1;cursor:pointer;color:var(--muted)}.garan-close:hover{color:var(--ink)}

/* Datenschutz-Hinweis (USP-Balken unten, „Verstanden“ setzt das Cookie bd_privacy) und Fußzeilen-Hinweis */
.privacy-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--brand);color:#fff;font-size:.875rem;box-shadow:0 -4px 16px rgba(0,0,0,.18)}
.privacy-bar .wrap{display:flex;align-items:center;gap:12px;padding:.625rem 16px}.privacy-bar .ic{width:24px;height:24px;flex:0 0 auto;color:#fff}.privacy-bar p{margin:0;flex:1;line-height:1.4}.privacy-bar a{color:#fff;text-decoration:underline}
.privacy-bar .btn{flex:0 0 auto;background:#fff;color:var(--brand);border-color:#fff}.privacy-bar .btn:hover{background:var(--bg-2)}
body.has-privacy{padding-bottom:72px}
@media (max-width:640px){.privacy-bar .wrap{flex-wrap:wrap}.privacy-bar .btn{width:100%}body.has-privacy{padding-bottom:120px}}
.fpriv{display:inline-flex;gap:6px;align-items:flex-start;margin-top:6px}.fpriv .ic{width:16px;height:16px;flex:0 0 auto;color:var(--ok)}
/* Retail Media (v2.35): gekennzeichnete Anzeigen – dezent, aber eindeutig als bezahlte Platzierung erkennbar (UWG) */
.splabel{display:inline-block;font-size:.6875rem;font-weight:700;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-s);padding:2px 7px;line-height:1.3;text-decoration:none}
.splabel:hover{text-decoration:underline;color:var(--link)}
.card.sp{border-color:var(--line-2)}
.card.sp .splabel{position:absolute;top:10px;right:10px;z-index:1}
.rmbanner{position:relative;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);padding:1rem;margin:0 0 1.25rem}
.rmbanner>.splabel{position:absolute;top:10px;right:10px;z-index:1}
.rmhead{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.rmhead img{width:38%;max-width:360px;height:auto;border-radius:var(--r-s);object-fit:cover;aspect-ratio:3/1}
.rmhead h2{margin:.125rem 0 .375rem;font-size:1.25rem}.rmhead p{margin:0 0 .5rem;color:var(--ink-2)}
.rmhead .rmbrand{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin:0}
.rmgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
@media (max-width:640px){.rmhead{flex-direction:column;align-items:flex-start}.rmhead img{width:100%;max-width:none}}
/* Preisvergleich-Logos in der Fußzeile („Gelistet bei“): gleiche Höhe, linksbündig, Abstand wie die Zahlungslogos; bei wenig Platz untereinander */
.pvlogos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.ghlogo,.bblogo{display:block;line-height:0}
.ghlogo img{width:120px;height:60px;max-width:none;display:block}   /* Geizhals-Vertrag: Logo unverändert 120×60 */
.bblogo img{width:auto;height:60px;max-width:160px;display:block}.bblogo.round img{height:64px}   /* billiger.de: Höhe wie Geizhals, Seitenverhältnis aus der Grafik */