/* EcsCart storefront – 2026 design system. Dark-first, glass nav, soft depth. */
:root{
  --bg:#f2f4f8;--panel:#ffffff;--panel2:#fafbfd;--text:#14181f;--muted:#5d677b;
  --line:#e6e9f0;
  /* Kontrastreiche Rahmen fuer Bedienelemente in beiden Farbmodi.
     --line bleibt fuer Trennlinien und Container. */
  --line-ctl:color-mix(in srgb,var(--text) 44%,var(--line));
  --acc:#4f46e5;--acc2:#06b6d4;--acc-h:#4338ca;--acc-text:#fff;
  --ok:#15803d;--err:#b91c1c;
  --r:14px;--rs:10px;
  --grad:linear-gradient(120deg,#4f46e5,#06b6d4);
  --grad-btn:linear-gradient(120deg,#4f46e5,#087f96); /* Weisse Schrift: mindestens 4,68:1. */
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.15);
  --shadow-lg:0 12px 40px -12px rgba(16,24,40,.25);
}
[data-theme="dark"]{
  --bg:#0b0e14;--panel:#141923;--panel2:#10151e;--text:#e8ebf2;--muted:#98a2b3;
  --line:#232b3a;--acc:#8b8cf8;--acc2:#22d3ee;--acc-h:#6d6df4;--acc-text:#0b0e14;
  --ok:#75d79b;--err:#ff8a8a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 12px 44px -12px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;scroll-padding-top:var(--header-offset,16px)}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;transition:background .25s,color .25s;
  display:flex;flex-direction:column;min-height:100vh}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:none}
p a:not(.btn):not(.logo),.prose li a,.alert a{text-decoration:underline;text-underline-offset:.15em}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip-link{position:fixed;top:8px;left:16px;z-index:500;padding:10px 16px;border-radius:8px;background:var(--panel);color:var(--text);transform:translateY(-180%)}
.skip-link:focus{transform:none}
#main{scroll-margin-top:16px}
#main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted);font-size:.92em}
.sm{font-size:.82em}
.req-note{margin:14px 0 0;text-align:right}
h1{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin:.3em 0 .5em}
h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:.8em 0 .5em;text-transform:none}
h3{font-size:.95rem;margin:.8em 0 .4em}
code{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.85em}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

/* ---------- header: glass ---------- */
.hd{position:relative;z-index:50;
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.hd-line{padding:4px 20px 0;color:var(--muted);font-size:.74rem;line-height:1.4;overflow-wrap:anywhere}
.hd-line p{margin:0}
.hd-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:14px 20px}
.hd-in .logo{justify-self:start}
.hd-in .hd-nav{justify-self:end}
.logo{font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:8px;flex:0 0 auto}
.logo-mark{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.1em}
.brand-logo{display:block;width:185px}
.brand-logo img{display:block;width:100%;height:auto}
[data-theme="dark"] .brand-logo:not(.brand-logo-custom) img{filter:brightness(2.4) saturate(.75)}
.hd .logo{align-self:flex-start}
.ft-brand .brand-logo{width:min(205px,100%)}
.hd .hd-burger{display:none}
.hd .hd-burger,.hd-search input{height:44px;border:1px solid var(--line-ctl);border-radius:12px;background:var(--panel2)}
@media(max-width:900px){
  .hd-in{grid-template-columns:auto 1fr auto;grid-template-areas:"logo logo nav" "burger search search";column-gap:10px;row-gap:10px}
  .hd .logo{grid-area:logo}
  .hd .brand-logo{width:150px}
  .hd .hd-burger{display:inline-flex;grid-area:burger;width:44px;justify-content:center}
  .hd .hd-nav{grid-area:nav;justify-self:end}
  .hd .hd-search{grid-area:search;width:100%;position:static}
  .hd .suggest{left:12px;right:12px;width:auto;transform:none;top:calc(100% + 8px)}
}
/* search: icon inside input, no separate button; icons block sits at the far right */
.hd-search{position:relative;display:grid;width:min(420px,42vw)}
.hd-field{position:relative;display:block;width:100%}
.hd-search-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.hd-search input{display:block;width:100%;margin:0;padding:8px 16px 8px 42px;
  color:var(--text);font-size:.95rem;transition:border .15s, box-shadow .15s}
.hd-search input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.hd-search input::-webkit-search-cancel-button{display:none}
.hd-nav{display:flex;gap:4px;align-items:center;flex:0 0 auto}
.hd-tools{position:relative}
.hd-tools>summary{display:none;list-style:none}
.hd-tools>summary::-webkit-details-marker{display:none}
.hd-tools-panel{display:flex;align-items:center;gap:4px}
.hd-burger-label{display:none}

/* Same controls in a compact glass bar; the shell preserves the page geometry. */
.hd.hd-compact{position:fixed;top:0;left:0;right:0;margin-inline:auto;width:min(1080px,calc(100% - 32px));
  transform:translateY(0);border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:var(--shadow-lg);
  transition:transform .22s ease,opacity .22s ease}
.hd-compact .hd-line,.hd-compact .cat-nav{display:none}
.hd-compact .hd-in{display:flex;gap:12px;padding:5px 10px;min-height:54px}
.hd-compact .brand-logo{width:110px}
.hd-compact .logo{align-self:center;flex:none}
.js .hd-drawer-nav .hd-burger,.hd-compact .hd-burger{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:.8rem;white-space:nowrap}
.hd-compact .hd-burger-label{display:inline}
@media(min-width:901px){
  .js .hd-drawer-nav:not(.hd-compact) .hd-in,.hd-compact .hd-in{
    display:grid;grid-template-columns:minmax(185px,1fr) auto minmax(0,420px) minmax(185px,1fr);column-gap:10px}
  .js .hd-drawer-nav:not(.hd-compact) .hd-search{width:min(420px,100%);justify-self:center}
  .js .hd-drawer-nav .hd-burger-label{display:inline}
}
.js .hd-drawer-nav .cat-nav{display:none}
.hd-compact .hd-search{width:auto;min-width:0;flex:1}
.hd-compact .hd-nav{margin-left:auto}
.hd-compact .hd-nav>.icobtn,.hd-compact .hd-tools>summary{width:44px;height:44px;justify-content:center;padding:8px}
.hd-compact .hd-tools.hd-grouped>summary{display:flex}
.hd-compact .hd-tools.hd-grouped>.hd-tools-panel{position:absolute;right:0;top:calc(100% + 10px);padding:6px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow-lg)}
.hd-compact .hd-tools.hd-grouped:not([open])>.hd-tools-panel{display:none}
.hd-compact .hd-tools-panel .icobtn{min-width:44px;min-height:44px;justify-content:center}
.hd.hd-away{transform:translateY(calc(-100% - 20px));opacity:0;pointer-events:none}
@media(max-width:900px){
  .hd-burger-label{display:none}
  .hd-compact .hd-in{gap:4px;padding:4px;min-height:54px}
  .hd-compact .logo,.hd-compact .hd-burger-label{display:none}
  .hd-compact .hd-burger{flex:none;width:44px}
  .hd-compact .hd-nav{gap:0}
  .hd.hd-compact{width:calc(100% - 16px);border-radius:0 0 16px 16px}
  .hd-compact .hd-search input{font-size:16px;padding-left:32px}
  .hd-compact .hd-search-ico{left:10px;width:15px}
}

/* search suggestions dropdown */
.suggest{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;z-index:60;
  max-height:min(480px,70vh);display:flex;flex-direction:column}
.suggest[hidden]{display:none}
.suggest .sg-main{overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 30%,transparent) transparent}
.suggest .sg-main::-webkit-scrollbar{width:8px}
.suggest .sg-main::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 28%,transparent);border-radius:8px}
.suggest .sg-main::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text) 45%,transparent)}
.suggest .sg-main::-webkit-scrollbar-track{background:transparent}
.suggest .sg-cols{display:flex;align-items:stretch}
.suggest .sg-col{min-width:0;padding-bottom:4px}
.suggest .sg-art{flex:1 1 auto}
.suggest .sg-cat{flex:0 0 33%;border-left:1px solid var(--line)}
.suggest .sg-cat .sg-row{gap:8px;padding:9px 12px}
@media(max-width:640px){
  .suggest .sg-cols{flex-direction:column}
  .suggest .sg-cat{flex-basis:auto;border-left:0;border-top:1px solid var(--line)}
}
.suggest .sg-label{padding:10px 16px 4px;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.suggest .sg-row{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;color:var(--text)}
.suggest .sg-row:hover,.suggest .sg-row.sel{background:color-mix(in srgb,var(--acc) 9%,var(--panel))}
.suggest .sg-row img{width:38px;height:38px;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex:0 0 auto}
.suggest .sg-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.suggest .sg-m{color:var(--muted);font-size:.8rem}
.suggest .sg-p{font-weight:700;font-size:.9rem}
.suggest mark{background:none;color:var(--acc);font-weight:700}
.suggest .sg-all{color:var(--text)}
.suggest .sg-all:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.suggest .sg-empty{padding:16px;color:var(--muted);font-size:.9rem}
.icobtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--text);
  cursor:pointer;padding:9px 11px;border-radius:10px;font-size:1rem;position:relative;transition:background .15s}
.icobtn:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:99px;background:var(--grad);
  color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center;padding:0 4px}
.badge[hidden]{display:none}
.acc-dot{position:absolute;top:6px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--grad);
  box-shadow:0 0 0 2px var(--bg)}
.th-light{display:none}[data-theme="dark"] .th-light{display:inline}[data-theme="dark"] .th-dark{display:none}
.langsw{position:relative;margin-right:2px}
.langsw-cur{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.langsw.open .langsw-cur{color:var(--text)}
.langsw-dd{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;z-index:60;
  display:none;flex-direction:column;padding:4px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.langsw.open .langsw-dd{display:flex}
.langsw-l{display:block;padding:6px 12px;border-radius:7px;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;color:var(--muted);text-decoration:none;text-align:center;
  transition:background .15s,color .15s}
.langsw-l:hover{color:var(--text);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.cat-nav{display:flex;gap:6px;padding:0 20px 12px}
html:not(.js) .cat-nav{overflow-x:auto;scrollbar-width:none}
html:not(.js) .cat-nav::-webkit-scrollbar{display:none}
.cat-item{position:relative;flex:0 0 auto}
.cat-item>a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 15px;border-radius:99px;
  color:var(--muted);font-size:.92rem;font-weight:500;text-decoration:none;
  border:1px solid var(--line-ctl);background:var(--panel);transition:all .15s}
.cat-item>a>svg{opacity:.55}
.cat-item:hover>a,.cat-item:focus-within>a{background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}

/* glass flyout panels for subcategories (hover/focus, chained to the right) */
.cat-drop{position:absolute;top:100%;left:0;z-index:70;min-width:250px;padding:10px 8px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--text) 14%,var(--line));
  box-shadow:var(--shadow-lg),0 0 44px -16px color-mix(in srgb,var(--acc) 55%,transparent);
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.cat-item:hover>.cat-drop,.cat-item:focus-within>.cat-drop,
.cat-drop-item:hover>.cat-drop,.cat-drop-item:focus-within>.cat-drop{opacity:1;visibility:visible;transform:none}
.cat-drop-item{position:relative}
.cat-drop-item>.cat-drop{top:-10px;left:calc(100% + 6px)}
/* hover bridge: keeps the row hot while the pointer crosses to the flyout */
.cat-drop-item::after{content:"";position:absolute;top:-4px;bottom:-4px;left:100%;width:12px}
.cat-more-drop .cat-drop-item::after{left:auto;right:100%}
.cat-drop a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;color:var(--text);
  font-size:.9rem;font-weight:500;text-decoration:none;white-space:nowrap}
.cat-drop a:hover{background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--acc)}
.cat-drop a img{width:26px;height:26px;object-fit:cover;border-radius:7px;border:1px solid var(--line);flex:none}
.cat-drop a>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cat-drop a>svg{margin-left:auto;opacity:.5;flex:none}
.cat-item:nth-last-child(-n+2)>.cat-drop{left:auto;right:0}
.cat-more-drop .cat-item>.cat-drop{left:auto;right:calc(100% + 6px)}

/* „Mehr"-Pille (overflow) – verschobene Items werden im Drop zu Listenzeilen */
.cat-morebtn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 15px;border-radius:99px;
  color:var(--muted);font-size:.92rem;font-weight:500;cursor:pointer;
  border:1px solid var(--line-ctl);background:var(--panel);transition:all .15s}
.cat-morebtn>svg{opacity:.55}
.cat-more:hover>.cat-morebtn{background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
.cat-more>.cat-drop{left:auto;right:0}
.cat-more-drop .cat-item{display:block;width:100%}
.cat-more-drop .cat-item>a{display:flex;width:100%;border:0;border-radius:10px;background:none;color:var(--text);padding:9px 11px;font-weight:500}
.cat-more-drop .cat-item:hover>a{background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--acc)}
@media(max-width:900px){.cat-nav{display:none}}
@media(max-width:900px){html:not(.js) .cat-nav{display:flex}}

/* ---------- mobile category drawer (offcanvas) ---------- */
.dr{position:fixed;inset:0;z-index:250}
.dr[hidden]{display:none}
.dr-scrim{position:absolute;inset:0;background:rgba(5,8,14,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s}
.dr.open .dr-scrim{opacity:1}
.dr-panel{position:absolute;top:0;bottom:0;left:0;width:min(330px,88vw);background:var(--panel);
  border-right:1px solid var(--line);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(-103%);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.dr.open .dr-panel{transform:none}
.dr-head{display:flex;align-items:center;gap:8px;padding:10px 8px 10px 12px;border-bottom:1px solid var(--line)}
.dr-title{flex:1;min-width:0;font-weight:700;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-back{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--acc);
  font-size:.88rem;font-weight:600;padding:6px 8px;border-radius:8px;cursor:pointer}
.dr-back:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.dr-back[hidden]{display:none}
.dr-stage{position:relative;flex:1;overflow:hidden}
.dr-view{position:absolute;inset:0;overflow-y:auto;background:var(--panel);padding:4px 0 24px;
  transform:translateX(100%);transition:transform .26s ease}
.dr-view.act{transform:none}
.dr-view.leave{transform:translateX(-28%)}
.dr-list,.dr-sub{list-style:none;margin:0;padding:0}
.dr-sub{display:none}
.dr-view>.dr-sub,.dr-view>.dr-list{display:block}
.dr-view li{display:flex;align-items:stretch;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.dr-view li>a{flex:1;min-width:0;padding:13px 16px;color:var(--text);font-size:.94rem;font-weight:500;
  display:flex;align-items:center;text-decoration:none}
.dr-view li>a:active{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.dr-drill{flex:0 0 54px;border:0;border-left:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dr-drill:active{background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--acc)}

/* ---------- hero & cards ---------- */
.page-home .home-welcome{max-width:none}
.page-home section.card.home-welcome{padding:10px 20px}
.page-home .home-welcome p{margin:6px 0}
.page-home .home-welcome .hw-label{margin:10px 0 2px;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.page-home .home-welcome .hw-list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.page-home .home-welcome .hw-list li{position:relative;padding-left:18px}
.page-home .home-welcome .hw-list li::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:8px;
  border-radius:99px;background:var(--grad)}
.page-home .home-welcome .hw-actions{margin:16px 0 6px}
.page-home #main>.home-welcome:first-child{margin-top:18px}

/* banner slider */
.page-home .slider{position:relative;border-radius:22px;overflow:hidden;margin:20px 0 22px;
  aspect-ratio:21/6;background:var(--panel2);border:1px solid var(--line)}
.page-home .slider-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.page-home .slide{position:relative;flex:0 0 100%;height:100%}
.page-home .slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-home .slide-cap{position:absolute;inset:0;display:flex;z-index:2;pointer-events:none}
.page-home .slide-cap-in{display:flex;flex-direction:column;align-items:flex-start;flex:1;
  padding:clamp(14px,3vw,28px) clamp(16px,4vw,44px);max-width:80%;color:#fff;pointer-events:auto}
.page-home .slide-sub{display:inline-block;background:rgba(10,12,16,.68);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);color:#fff;padding:7px 14px;border-radius:10px;
  font-size:clamp(.82rem,1.5vw,1.02rem);font-weight:600;letter-spacing:.01em;line-height:1.4;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.page-home .slide-cta{display:inline-block;margin-top:auto;background:rgba(10,12,16,.68);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;
  padding:10px 20px;border-radius:10px;font-size:clamp(.85rem,1.5vw,1rem);font-weight:650;
  line-height:1.3;transition:background .2s}
.page-home .slide-cta:hover{background:rgba(10,12,16,.9);color:#fff}
.page-home .slide-link{position:absolute;inset:0;z-index:1}
.page-home .slider-nav{position:absolute;top:14px;right:16px;z-index:3;display:flex;gap:8px}
.page-home .slider-arrow{width:34px;height:34px;border:0;border-radius:9px;background:transparent;
  color:rgba(255,255,255,.9);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s}
.page-home .slider-arrow svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
.page-home .slider-arrow:hover{color:#fff;background:rgba(10,12,16,.45)}
.page-home .slider-dots{position:absolute;bottom:16px;right:20px;z-index:3;display:flex;gap:8px}
.dot{width:26px;height:4px;border:0;border-radius:99px;background:rgba(255,255,255,.4);cursor:pointer;
  padding:0;transition:background .2s,width .25s}
.dot.on{background:#fff;width:38px}
@media (prefers-reduced-motion: reduce){.page-home .slider-track{transition:none}}
@media (max-width:640px){.page-home .slider{aspect-ratio:4/3}}

/* article row carousel (home action sections) */
.rowcar{position:relative;margin:10px 0 20px}
.rowcar-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:4px 2px 10px;scroll-behavior:smooth}
.rowcar-track::-webkit-scrollbar{display:none}
.rowcar-item{flex:0 0 calc(25% - 12px);scroll-snap-align:start;display:flex;min-width:0}
.rowcar-item .card{width:100%}
.rowcar-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.page-home .rowcar-head h2{margin-bottom:0}
.page-home .rowcar-head+.rowcar{margin-top:4px}
.page-home .rowcar-head+.brows{margin-top:8px}
@media (max-width:900px){.rowcar-item{flex-basis:calc(33.33% - 10.67px)}}
@media (max-width:640px){.rowcar-item{flex-basis:calc(50% - 8px)}}
.artnav.nov{visibility:hidden}

.page-home .brand-track .brand-tile{flex:0 0 208px;scroll-snap-align:start}
@media(min-width:1200px){.page-home .brand-track .brand-tile{flex-basis:calc((100% - 80px)/6)}}
.page-home .brand-tile{height:92px;display:flex;align-items:center;justify-content:center;padding:14px 22px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r);
    transition:transform .18s,border-color .18s,box-shadow .18s}
.page-home .brand-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
.page-home .brand-tile img{max-width:100%;max-height:56px;object-fit:contain}
.page-home .brand-tile .brand-name{color:#1e2433;font-weight:700;font-size:.95rem}
.page-home .cat-track .card.cat{flex:0 0 196px;scroll-snap-align:start}
@media(max-width:640px){.page-home .brand-track .brand-tile{flex-basis:160px;height:78px}.page-home .cat-track .card.cat{flex-basis:152px}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:10px 0 20px}
.page-blog-post .grid.cats{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
a.card{color:var(--text)}
a.card:hover,article.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
.card-img{aspect-ratio:4/3;background:var(--panel2);display:block;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
a.card:hover .card-img img,article.card:hover .card-img img{transform:scale(1.04)}
.card-body{padding:14px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.card-title{color:var(--text);font-weight:650;font-size:.97rem;line-height:1.35}
.card-artnum{font-size:.75rem;color:var(--muted)}
.price-row{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:8px}
.card-mfr{margin-left:auto;height:22px;max-width:90px;width:auto;object-fit:contain;opacity:.9}
.card-mfr-name{margin-left:auto;font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.price{font-weight:750;font-size:1.08rem;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.price sup.star{font-size:.65em;margin-left:1px}
.page-detail .vatnote{font-size:.72rem;color:var(--muted);font-weight:500}
.card.cat{align-items:center;justify-content:center;padding:20px;gap:10px;color:var(--text);font-weight:650;text-align:center}
.card.cat img{aspect-ratio:1;object-fit:cover;width:72px;height:72px;border-radius:18px}

/* ---------- breadcrumb/chips/pager ---------- */
.bc{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 10px;font-size:.86em;color:var(--muted)}
.bc a{color:var(--muted)}.bc a:hover{color:var(--acc)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

/* subcategory preview sections (rendered like a tree branch) */
.page-list .subcats,.category-tree,.category-tree-children{
  --category-branch-indent:clamp(28px,5vw,60px);--category-branch-length:clamp(18px,3.5vw,42px);
  border-left:2px solid color-mix(in srgb,var(--text) 24%,var(--line));
  padding-left:var(--category-branch-indent)}
.page-list .subcats{display:flex;flex-direction:column;gap:26px;margin:20px 0 8px}
.page-list .subcat,.category-tree-node{position:relative}
.page-list .subcat::before,.category-tree-node::before{content:"";position:absolute;top:var(--category-branch-top,24px);
  left:calc(-1 * var(--category-branch-indent));width:var(--category-branch-length);height:2px;
  background:color-mix(in srgb,var(--text) 24%,var(--line));border-radius:2px}
.page-list .subcats-title{margin:22px 0 0;font-size:1.05rem;font-weight:650;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em}
.page-list .subcat-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.page-list .subcat-head h2{margin:0;font-size:1.4rem;line-height:1.25}
.page-list .subcat-head h2 a{color:var(--text);transition:color .15s}
.page-list .subcat-head h2 a:hover{color:var(--acc)}
.page-list .subcat-head .artnav{margin-left:auto}
.page-list .subcat-desc{width:100%;margin:2px 0 0;font-size:.95rem}
.page-list .subcat .rowcar{margin:8px 0 12px}
.page-list .subcat-more{padding:9px 18px;font-size:.88rem;border-radius:10px;
  background:color-mix(in srgb,var(--acc) 7%,var(--panel))}
.chip{padding:7px 16px;border:1px solid var(--line-ctl);border-radius:99px;color:var(--text);background:var(--panel);font-size:.9rem;transition:all .15s}
.chip:hover{border-color:var(--acc);color:var(--acc)}
/* category list head: title + count left, sort right */
.list-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:22px 0 4px}
.list-head h1{margin:0}
.list-count{font-size:.42em;font-weight:550;color:var(--muted);margin-left:8px;white-space:nowrap}
.cat-shortdesc{margin:6px 0 0;max-width:720px}
.page-list .cat-longdesc{margin:28px 0 8px;padding:22px 26px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);font-size:.95rem;line-height:1.65;color:var(--muted)}
.page-list .cat-longdesc p{margin:.4em 0}
.page-list .cat-longdesc.cat-content{padding:0;background:none;border:0;border-radius:0;color:var(--text);margin:16px 0 36px;font-size:1rem}
.list-head-content h1{font-size:.83rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Redaktionelle Highlights-Landingpage (Kategorie-Langbeschreibung). */
.hl{--hl-space:clamp(52px,7vw,96px);overflow:clip}
.hl :where(section,header,footer,div,figure){min-width:0}
.hl :where(section[id]){scroll-margin-top:170px}
.hl .hl-eyebrow{margin:0 0 15px;color:var(--acc);font-size:.72rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.hl h2{font-size:clamp(1.85rem,3.2vw,2.9rem);font-weight:780;line-height:1.15;letter-spacing:-.045em;margin:0 0 22px;text-wrap:balance}
.hl h3{font-size:1.1rem;line-height:1.4;letter-spacing:-.02em;margin:0 0 10px}
.hl p{color:var(--muted)}
.hl .hl-copy>p{margin:0 0 18px}
.hl .hl-intro{font-size:1.1rem;line-height:1.75}
.hl .hl-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.hl .btn{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:46px;padding:12px 20px;font-size:.88rem}
.hl .btn:focus-visible,.hl a:focus-visible,.hl summary:focus-visible{outline:2px solid var(--acc);outline-offset:5px}
.hl .hl-hero{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:clamp(28px,4vw,68px);padding:10px 0 46px}
.hl .hl-hero h2{font-size:clamp(2.6rem,4.5vw,4.3rem);line-height:1.04;margin-bottom:26px}
.hl .hl-hero h2 span{background:var(--grad);background-clip:text;-webkit-background-clip:text;color:transparent}
.hl .hl-hero-copy>p{margin:0 0 20px}
.hl .hl-lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.65;color:var(--text);max-width:50ch}
.hl .hl-hero-notes{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:7px;margin-top:25px;font-size:.75rem;color:var(--muted)}
.hl .hl-hero-notes span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--acc2);margin:0 7px 2px 0}
.hl .hl-hero-visual{position:relative;margin:0;padding:16px 0 30px;isolation:isolate}
.hl .hl-hero-visual::before{content:"";position:absolute;inset:-25px -45px;background:radial-gradient(ellipse at 65% 45%,color-mix(in srgb,var(--acc2) 16%,transparent),transparent 65%);z-index:-1;pointer-events:none}
.hl .hl-browser{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#10151e;box-shadow:var(--shadow-lg);transform:perspective(1400px) rotateY(-7deg) rotateX(3deg)}
.hl .hl-browser-bar{display:flex;align-items:center;gap:5px;height:32px;background:#191f2b;padding:0 12px;color:#aab5c7}
.hl .hl-browser-bar i{width:6px;height:6px;border-radius:50%;background:#647084}
.hl .hl-browser-bar i:first-child{background:#a87684}
.hl .hl-browser-bar span{margin-left:12px;font-size:.6rem;letter-spacing:.04em}
.hl .hl-browser img{width:100%;aspect-ratio:1440/1040;object-fit:cover}
.hl .hl-status{display:inline-block;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--acc2);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc2) 12%,transparent)}
.hl .hl-hero-visual>figcaption{margin-top:24px;font-size:.72rem;color:var(--muted);text-align:center}
.hl .hl-principles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 0;gap:20px}
.hl .hl-principles>div{display:flex;flex-direction:column;gap:4px;padding-left:22px;border-left:1px solid var(--line)}
.hl .hl-principles>div:first-child{padding-left:0;border:0}
.hl .hl-principles strong{font-size:1.18rem;letter-spacing:-.03em}
.hl .hl-principles span{font-size:.78rem;color:var(--muted)}
.hl .hl-jumps{display:flex;flex-wrap:wrap;gap:9px 23px;padding:22px 0 0}
.hl .hl-jumps a{color:var(--muted);font-size:.78rem;padding:3px 0;border-bottom:1px solid transparent}
.hl .hl-jumps a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.hl .hl-section{margin-top:var(--hl-space)}
.hl .hl-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:center}
.hl .hl-list{list-style:none;margin:25px 0;padding:0}
.hl .hl-list li{position:relative;padding:0 0 0 20px;margin:0 0 17px;color:var(--muted);font-size:.9rem;line-height:1.7}
.hl .hl-list li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--acc2)}
.hl .hl-list strong{color:var(--text);font-weight:650}
.hl .hl-text-link{display:inline-flex;align-items:center;gap:12px;font-size:.86rem;font-weight:650}
.hl .hl-text-link:hover{text-decoration:underline;text-underline-offset:4px}
.hl .hl-shot{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.hl .hl-shot img{width:100%;height:auto}
.hl .hl-shot figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding:14px 18px;color:var(--muted);font-size:.73rem;line-height:1.6}
.hl .hl-agent{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:var(--hl-space);padding:clamp(25px,4vw,48px);border:1px solid color-mix(in srgb,var(--acc) 28%,var(--line));border-radius:22px;background:linear-gradient(125deg,color-mix(in srgb,var(--acc) 7%,var(--panel)),var(--panel))}
.hl .hl-agent h2{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.hl .hl-agent .hl-copy>p:not(.hl-eyebrow){font-size:.92rem}
.hl .hl-api{border:1px solid var(--line);border-radius:15px;background:var(--bg);padding:25px}
.hl .hl-api-top{display:flex;align-items:center;gap:12px;font-size:.72rem;color:var(--muted)}
.hl .hl-api ol{list-style:none;padding:0;margin:26px 0 0}
.hl .hl-api li{display:flex;gap:17px;align-items:flex-start;padding:0 0 23px}
.hl .hl-api li>span{font:11px/29px ui-monospace,monospace;color:var(--acc);border:1px solid var(--line);border-radius:50%;width:29px;text-align:center;flex-shrink:0}
.hl .hl-api strong{display:block;font-size:.87rem;font-weight:650;margin:3px 0 6px}
.hl .hl-api code{font-size:.75rem;overflow-wrap:anywhere}
.hl .hl-api>p{font-size:.68rem;border-top:1px solid var(--line);padding-top:15px}
.hl .hl-section-heading{max-width:760px;margin-bottom:35px}
.hl .hl-section-heading>p:not(.hl-eyebrow){font-size:1.05rem;max-width:65ch;line-height:1.75}
.hl .hl-find{margin-top:var(--hl-space)}
.hl .hl-find-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:22px}
.hl .hl-find-grid .hl-shot{margin-bottom:24px}
.hl .hl-find-grid p{font-size:.92rem;line-height:1.75;max-width:64ch}
.hl .hl-desk{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(26px,4.5vw,58px);margin-top:var(--hl-space);border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.hl .hl-desk-flow{padding:clamp(16px,3vw,38px);border-radius:16px;background:var(--panel2);border:1px solid var(--line)}
.hl .hl-desk-brand{display:flex;align-items:center;gap:15px}
.hl .hl-desk-mark{display:grid;place-items:center;flex:0 0 52px;height:52px;border-radius:14px;border:1px solid color-mix(in srgb,var(--acc2) 35%,var(--line));background:color-mix(in srgb,var(--acc2) 8%,var(--panel));color:var(--acc2);font-size:1rem;font-weight:800}
.hl .hl-desk-brand strong{display:block;font-size:1.7rem;font-weight:750;letter-spacing:-.04em;line-height:1.2}
.hl .hl-desk-brand div>span{font-size:.76rem;color:var(--muted)}
.hl .hl-desk-connector{display:flex;align-items:center;gap:17px;margin:17px 0 17px 25px;padding-left:38px;border-left:1px solid var(--line);color:var(--muted);font-size:.72rem;min-height:50px}
.hl .hl-desk-connector span:last-child{font-size:1.6rem;color:var(--acc)}
.hl .hl-desk-tags{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:.7rem;color:var(--muted)}
.hl .hl-themes{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.hl .hl-themes figcaption>span{font-weight:700;color:var(--text)}
.hl .hl-theme-choice{border:0;background:none;padding:0;font:inherit;color:var(--acc);cursor:pointer;text-align:left}
.hl .hl-theme-choice:hover{text-decoration:underline;text-underline-offset:4px}
.hl .hl-theme-choice:focus-visible{outline:2px solid var(--acc);outline-offset:5px}
html:not(.js) .hl .hl-theme-choice{display:none}
.hl .hl-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 44px;margin-top:36px}
.hl .hl-detail-grid p{font-size:.91rem;line-height:1.75}
.hl .hl-feature-rows{border-top:1px solid var(--line)}
.hl .hl-feature-rows>div{display:grid;grid-template-columns:76px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.hl .hl-feature-no{font:500 1.5rem/1.4 ui-monospace,monospace;color:var(--acc)}
.hl .hl-feature-rows p{max-width:95ch;font-size:.94rem;line-height:1.75}
.hl .hl-feature-rows .hl-text-link{margin-top:10px}
.hl .hl-extra{padding:clamp(24px,4vw,44px);margin-top:var(--hl-space);background:var(--panel);border:1px solid var(--line);border-radius:18px}
.hl .hl-extra h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.hl .hl-extra ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 45px;list-style:none;padding:0;margin:25px 0 28px;font-size:.9rem;color:var(--muted)}
.hl .hl-extra li{padding-left:18px;position:relative}
.hl .hl-extra li::before{content:"+";color:var(--acc);position:absolute;left:0;top:0}
.hl .hl-note{font-size:.74rem;border-top:1px solid var(--line);padding-top:20px;max-width:105ch}
.hl .hl-faq{max-width:1000px;margin-left:auto;margin-right:auto}
.hl .hl-faq details{border-bottom:1px solid var(--line);padding:0}
.hl .hl-faq details:first-of-type{border-top:1px solid var(--line)}
.hl .hl-faq summary{display:flex;justify-content:space-between;gap:25px;align-items:center;list-style:none;cursor:pointer;padding:22px 2px;font-size:1rem;font-weight:650}
.hl .hl-faq summary::-webkit-details-marker{display:none}
.hl .hl-faq summary::after{content:"+";font-size:1.5rem;color:var(--acc);font-weight:400}
.hl .hl-faq details[open] summary::after{content:"−"}
.hl .hl-faq details>p{margin:0 0 24px;padding-right:35px;max-width:85ch;font-size:.95rem;line-height:1.8}
.hl .hl-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:var(--hl-space);padding:clamp(26px,4vw,52px);border-radius:22px;border:1px solid color-mix(in srgb,var(--acc2) 25%,var(--line));background:linear-gradient(115deg,color-mix(in srgb,var(--acc) 9%,var(--panel)),color-mix(in srgb,var(--acc2) 8%,var(--panel)))}
.hl .hl-cta h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.hl .hl-cta p{max-width:62ch}
.hl .hl-cta .hl-actions{flex-shrink:0;flex-direction:column;align-items:stretch;margin:0}
@media(max-width:1000px){
  .hl .hl-hero{grid-template-columns:1fr 1fr;gap:24px}
  .hl .hl-hero h2{font-size:clamp(2.3rem,4.8vw,3.3rem)}
  .hl .hl-browser{transform:none}
  .hl .hl-split,.hl .hl-agent,.hl .hl-desk{gap:32px}
  .hl .hl-cta{flex-direction:column;align-items:flex-start}
  .hl .hl-cta .hl-actions{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:720px){
  .hl :where(section[id]){scroll-margin-top:195px}
  .hl .hl-hero,.hl .hl-split,.hl .hl-agent,.hl .hl-desk{grid-template-columns:1fr}
  .hl .hl-hero{gap:24px;padding-bottom:24px}
  .hl .hl-hero h2{font-size:clamp(2.5rem,9vw,3.8rem)}
  .hl .hl-hero-visual{padding-top:0}
  .hl .hl-principles{grid-template-columns:1fr 1fr;gap:24px 16px}
  .hl .hl-principles>div{padding-left:0;border:0}
  .hl .hl-principles strong{font-size:1rem}
  .hl .hl-principles span{font-size:.73rem}
  .hl .hl-jumps{gap:8px 19px}
  .hl .hl-split-reverse .hl-copy{grid-row:1}
  .hl .hl-find-grid,.hl .hl-themes,.hl .hl-detail-grid{grid-template-columns:1fr;gap:30px}
  .hl .hl-find-grid h3{margin-top:18px}
  .hl .hl-api{padding:20px}
  .hl .hl-feature-rows>div{grid-template-columns:32px 1fr;gap:17px}
  .hl .hl-feature-no{font-size:1.05rem}
  .hl .hl-extra ul{grid-template-columns:1fr;gap:15px}
  .hl .hl-faq summary{font-size:.95rem}
  .hl .hl-shot{border-radius:12px}
  .hl .hl-agent,.hl .hl-desk,.hl .hl-cta{border-radius:16px}
  .page-list:has(.hl) .ai-tab{left:auto;right:18px;top:auto;bottom:18px;transform:none;width:48px;height:48px;padding:0;justify-content:center;border:1px solid var(--line-ctl);border-radius:50%}
  .page-list:has(.hl) .ai-tab-text{display:none}
  .page-list:has(.hl) .ai-tab-ico{width:22px;height:22px}
  .page-list:has(.hl) .ai-hint{left:auto;right:18px;top:auto;bottom:80px;transform:none}
}
.page-list .sortbar{margin:0}
.page-list .sortbar label{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);white-space:nowrap}
.page-list .sortbar select{width:auto;display:inline-block;height:38px;padding:0 34px 0 12px;font-size:.86rem}
.pager{display:flex;gap:6px;margin:22px 0}
.pager a,.pager span{padding:8px 14px;border:1px solid var(--line-ctl);border-radius:10px;color:var(--text)}
.pager a:hover{border-color:var(--acc)}
.pager .on{background:var(--grad);color:#fff;border-color:transparent;font-weight:700}

/* ---------- product detail ---------- */
.crumbrow{display:flex;align-items:center;flex-wrap:wrap;column-gap:24px;margin:14px 0 8px}
.crumbrow .bc{flex:0 1 auto;margin:0}
.artnav{margin-left:auto;display:flex;gap:18px;font-size:.86em;white-space:nowrap;padding:4px 0}
.artnav a,.artnav .off{display:inline-flex;align-items:center;gap:5px}
.artnav a{color:var(--muted)}
.artnav a:hover{color:var(--acc)}
.artnav .off{color:var(--muted);opacity:.32}
.artnav button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
  font:inherit;color:var(--muted);cursor:pointer;transition:color .15s}
.artnav button:hover:not(.off){color:var(--acc)}
.artnav button.off{color:var(--muted);opacity:.32;cursor:default}
.artnav svg{flex-shrink:0}
.page-detail .detail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.page-detail .detail-headtext{flex:1;min-width:0}
.page-detail .detail-mfr{flex:0 0 auto;margin-left:auto;line-height:0}
.page-detail .detail-mfr img{display:block;max-height:44px;max-width:150px;width:auto;height:auto;object-fit:contain;object-position:right center}
@media(max-width:900px){.page-detail .detail-head{flex-direction:column;align-items:stretch}.page-detail .detail-mfr{margin-top:2px}}
.page-detail .detail-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap}
.page-detail .detail-title h1{margin:0}
.page-detail .product-copy{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;flex:none;margin-left:auto;
  min-width:148px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:.86em;line-height:inherit;white-space:nowrap;cursor:pointer}
.page-detail .product-copy svg{flex:none}
.page-detail .product-copy:hover:not(:disabled){color:var(--acc)}
.page-detail .product-copy.is-copied{color:var(--ok)}
.page-detail .product-share-fallback{max-width:460px;margin:8px 0 0 auto;font-size:.8rem}
.page-detail .product-share-fallback input{font-size:.8rem}
.page-detail .product-share-fallback[hidden]{display:none}
.page-detail .stars{display:inline-flex;align-items:baseline;gap:7px;font-size:.88rem;color:var(--muted)}
.page-detail .stars:hover{color:var(--acc)}
.page-detail .stars-bg{position:relative;display:inline-block;font-size:1rem;line-height:1;letter-spacing:2px;color:color-mix(in srgb,var(--text) 25%,transparent)}
.page-detail .stars-fg{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:#e8a33d}
.page-detail .detail-leadrow{display:flex;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-top:6px}
.page-detail .detail-leadrow .detail-lead{flex:1;min-width:0;margin:0}
@media(max-width:900px){.page-detail .detail-leadrow .detail-lead{flex-basis:100%}}
.page-detail .detail-title .stars{flex:0 0 auto;margin-left:auto;font-size:.95rem}
.page-detail .detail-title .stars-bg{font-size:1.75rem}
.page-detail .stars-meta{display:inline-flex;align-items:baseline;gap:4px}
.page-detail .stars-val{color:var(--text);font-weight:700}
.page-detail .detail-lead{color:var(--muted);font-size:1.02rem;line-height:1.55;margin:6px 0 0}
.page-detail .detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;margin-top:16px;align-items:start}
@media(max-width:900px){.page-detail .detail{grid-template-columns:minmax(0,1fr)}}
.page-detail .detail-media{position:relative}
.page-detail .detail-media:has(.thumbs-rail){padding-right:82px}
.page-detail .product-image-open{display:flex;align-items:center;justify-content:center;width:100%;padding:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel);cursor:zoom-in}
.page-detail .product-image-open img{display:block;width:auto;height:auto;max-width:100%;max-height:min(600px,70vh);border:0}
.page-detail .thumb-choice{display:block;flex:none;width:68px;height:68px;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer}
.page-detail .thumb-choice[aria-pressed="true"] img{border-color:var(--acc)}
.page-detail .thumbs-rail{position:absolute;top:0;right:0;bottom:0;width:68px;display:flex;flex-direction:column;gap:8px}
.page-detail .thumbs{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-behavior:smooth}
.page-detail .thumbs::-webkit-scrollbar{display:none}
.page-detail .thumbs-nav{flex:0 0 auto;height:26px;padding:0;border:1px solid var(--line-ctl);border-radius:10px;background:var(--panel);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
.page-detail .thumbs-nav:hover:not(.off){border-color:var(--acc);color:var(--acc)}
.page-detail .thumbs-nav.off{opacity:.32;cursor:default}
.page-detail .thumbs-nav[hidden]{display:none}
.page-detail .thumbs img{flex:none;width:68px;height:68px;object-fit:cover;border-radius:12px;border:2px solid var(--line-ctl);cursor:pointer;transition:border .15s}
.page-detail .thumbs img:hover,.page-detail .thumbs img.act{border-color:var(--acc)}
@media(max-width:900px){
  .page-detail .detail-media:has(.thumbs-rail){padding-right:0}
  .page-detail .thumbs-rail{position:static;width:auto;margin-top:12px}
  .page-detail .thumbs{flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .page-detail .thumbs-nav{display:none}
}
.page-detail .detail-side{display:flex;flex-direction:column;gap:18px;min-width:0}

/* buy box card */
.page-detail .buybox{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.page-detail .price-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-detail .price-lg{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.page-detail .price-from{font-size:.65em;font-weight:600}
.page-detail .uvp{color:var(--muted);font-size:1rem}
.price-rrp{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;color:var(--muted);font-size:.85rem;font-weight:400}
.price-row:has(.price-rrp){flex-wrap:wrap}
.page-detail .price-rrp{font-size:1rem}
.page-detail .vatnote{font-size:.8rem;color:var(--muted);margin-top:6px}
.page-detail .vatnote a{color:var(--muted);text-decoration:underline}
.page-detail .vatnote a:hover{color:var(--acc)}
.page-detail .tiers{margin-top:8px;width:auto;max-width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem;line-height:1.4}
.page-detail .tiers caption{text-align:left;color:var(--muted);font-size:.75rem;padding:0 0 4px}
.page-detail .tiers td{padding:3px 6px 3px 0;border:0;color:var(--muted)}
.page-detail .tiers td+td{padding-left:14px}
.page-detail .tiers td.num{color:var(--text);font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.page-detail .tiers tr.is-active td{background:color-mix(in srgb,var(--acc) 10%,var(--panel));color:var(--acc);font-weight:700}
.page-detail .tiers tr.is-active td:first-child{border-radius:5px 0 0 5px}
.page-detail .tiers tr.is-active td:last-child{border-radius:0 5px 5px 0}
.page-cart .cline-was{color:var(--muted);font-weight:400}
.card .price-was{color:var(--muted);font-weight:400;font-size:.85em}
.card .card-img{position:relative}
.offer-badge{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--acc,#d92d20);color:var(--acc-text);font-size:.72rem;font-weight:700;line-height:1.4;letter-spacing:.02em}
.card .offer-badge{position:absolute;top:8px;left:8px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.page-cart .sum-disc{display:flex;justify-content:space-between;color:var(--acc,#d92d20);font-weight:600}
.page-checkout .sum-disc{display:flex;justify-content:space-between;color:var(--acc,#d92d20);font-weight:600}
/* voucher: single field with in-input send button (hd-ai pattern, angular) */
.page-cart .vouch-box{margin-top:12px}
.page-cart .vouch-field{position:relative;display:block;width:100%}
.page-cart .vouch-field input{display:block;width:100%;margin:0;padding:9px 42px 9px 11px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);
  font:inherit;font-size:.88rem;transition:border .15s,box-shadow .15s}
.page-cart .vouch-field input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.page-cart .vouch-send{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;
  transition:color .15s,background .15s}
.page-cart .vouch-send:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.page-cart .vouch-chip{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:5px 9px;border:1px dashed var(--acc);border-radius:6px;font-size:.85rem;font-weight:600;color:var(--acc)}
.page-detail .stockline{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-weight:600;font-size:.9rem;margin-top:14px}
.page-detail .stockdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.page-detail .stockline.ok{color:var(--ok)}.page-detail .stockline.ok .stockdot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.page-detail .stockline.warn{color:#e8a33d}.page-detail .stockline.warn .stockdot{background:#e8a33d;box-shadow:0 0 0 3px rgba(232,163,61,.2)}
.page-detail .stockline.out{color:var(--err)}.page-detail .stockline.out .stockdot{background:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 20%,transparent)}
.page-detail .variant-line{margin-top:20px;font-size:.9rem}
.page-detail .variant-name{display:block;color:var(--muted);font-weight:600;margin-bottom:8px}
.page-detail .var-opts{display:flex;flex-wrap:wrap;gap:8px}
.page-detail .var-opt{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line-ctl);border-radius:12px;background:var(--bg);color:var(--text);font-size:.86rem;transition:border-color .15s,background .15s}
.page-detail .var-opt:hover{border-color:var(--acc);color:var(--text)}
.page-detail .var-opt.act{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--panel));font-weight:600}
.page-detail .var-dot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:1px solid rgba(127,127,127,.35)}
.page-detail .var-hint{margin-top:8px;color:#e8a33d;font-size:.85rem;font-weight:600;text-align:left}
.page-detail .buyline{display:flex;gap:10px;margin-top:22px}
.qty{display:inline-flex;flex-shrink:0;border:1px solid var(--line-ctl);border-radius:12px;overflow:hidden;background:var(--bg)}
.qty input{flex:0 0 54px;width:54px;margin:0;text-align:center;border:0;border-right:1px solid var(--line-ctl);background:transparent;color:var(--text);font-size:1rem;padding:0;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.page-detail .qty-step{display:flex;flex-direction:column}
.page-detail .qty-btn{flex:1;width:28px;min-height:25px;padding:0;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}
.page-detail .qty-btn+.qty-btn{border-top:1px solid var(--line-ctl)}
.page-detail .qty-btn:hover{background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)}
.page-detail .buybtn{flex:1}
.page-detail .buybtn:disabled{opacity:.5;cursor:not-allowed}

/* Beschreibung mit optionaler schmaler Empfehlungsspalte. */
section.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 22px}
section.card>h2{margin:0 0 12px;font-size:1.15rem}
.prose{line-height:1.7}
.page-content .prose{overflow-wrap:anywhere}
.prose img{border-radius:var(--r);max-width:100%}
.prose>:first-child{margin-top:0}
.prose>:last-child{margin-bottom:0}
.page-detail .detail-content{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:28px;align-items:start}
.page-detail .detail-content>*{min-width:0}
.page-detail .detail-desc{margin:0;max-width:none;scroll-margin-top:128px}
.page-detail .detail-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;align-items:start}
@media(min-width:1200px){
  .page-detail .detail-content.has-related{grid-template-columns:minmax(0,1fr) minmax(0,calc(25% - 24px))}
}
.page-detail .detail-reviews{margin-top:24px;scroll-margin-top:128px}
.page-detail .rev-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.page-detail .rev-title h2{margin:0}
.btn.sm{padding:7px 16px;font-size:.85rem}
.page-detail .rev-done{margin-top:14px}
.page-detail .rev{padding:14px 0}
.page-detail .rev+.rev{border-top:1px solid var(--line)}
.page-detail .rev-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-detail .rev-head .stars-bg{font-size:1.5rem}
.page-detail .rev-name{font-weight:600;font-size:.92rem}
.page-detail .rev-date{color:var(--muted);font-size:.82rem;margin-left:auto}
.page-detail .rev-text{margin:7px 0 0;font-size:.94rem;line-height:1.6}
.page-detail .rev-form{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.page-detail .rev-form h3{margin:0 0 2px;font-size:1rem}
.page-detail .star-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:3px;margin:8px 0 2px}
.page-detail .star-input input{position:absolute;width:0;height:0;opacity:0;pointer-events:none;margin:0}
.page-detail .star-input label{font-size:1.7rem;line-height:1;margin:0;padding:0;cursor:pointer;color:color-mix(in srgb,var(--text) 22%,transparent);transition:color .1s}
.page-detail .star-input input:checked~label,.page-detail .star-input label:hover,.page-detail .star-input label:hover~label{color:#e8a33d}
.page-detail .rev-login{margin-top:14px}
.page-detail .rev-login a{color:var(--acc)}

/* ---------- related articles: accessories & also-bought / crossselling ---------- */
.page-detail .rel-box{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 10px 6px}
.page-detail .rel-boxhead{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;user-select:none}
.page-detail .rel-boxhead::-webkit-details-marker{display:none}
.page-detail .rel-boxhead::marker{content:''}
.page-detail .rel-boxtitle{min-width:0;font-size:.95rem;font-weight:700;line-height:1.4}
.page-detail .rel-count{flex:none;font-size:.72rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:1px 6px}
.page-detail .rel-chev{flex:none;margin-left:auto;color:var(--muted);transition:transform .18s}
.page-detail .rel-box:not([open]) .rel-chev{transform:rotate(-90deg)}
.page-detail .rel-boxbody,.page-detail .rel-more-items{display:grid;gap:6px;margin-top:8px}
.page-detail .rel-boxbody .rel-mini{width:100%;padding:6px 8px;border-radius:10px}
.page-detail .rel-boxbody .rel-thumb{width:40px;height:40px}
.page-detail .rel-boxbody .rel-info{line-height:1.35}
.page-detail .rel-more-toggle{display:flex;justify-content:center;cursor:pointer;list-style:none;
  border:1px solid var(--line-ctl);border-radius:6px;padding:0;color:var(--muted);
  background:color-mix(in srgb,var(--text) 4%,var(--panel))}
.page-detail .rel-more-toggle:hover{color:var(--acc);border-color:var(--acc)}
.page-detail .rel-more-label,.page-detail .rel-less-label{width:100%;min-height:22px;display:flex;align-items:center;justify-content:center}
.page-detail .rel-more-toggle::-webkit-details-marker{display:none}
.page-detail .rel-more-toggle::marker{content:''}
.page-detail .rel-less-label,.page-detail .rel-more[open] .rel-more-label{display:none}
.page-detail .rel-more[open] .rel-less-label{display:flex}
.rel-row{display:flex;align-items:center;gap:12px;padding:9px 0;flex-wrap:wrap}
.page-detail .rel-boxbody .rel-row:last-child{padding-bottom:0}
.rel-row+.rel-row{border-top:1px solid var(--line)}
.rel-link{display:flex;align-items:center;gap:12px;flex:1;min-width:160px;color:var(--text);text-decoration:none}
.rel-thumb{width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.rel-thumb img{width:100%;height:100%;object-fit:contain}
.rel-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rel-title{font-size:.92rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel-artnum{font-size:.75rem;color:var(--muted)}
.rel-price{font-weight:700;font-size:.95rem;white-space:nowrap;padding-left:10px}
.rel-buy{flex:none}
@media(max-width:560px){.rel-link{min-width:0}}

.page-detail .rel-cross{margin-top:24px}
.page-detail .rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.page-detail .rel-head h2{margin:0}
.page-detail .rel-cross .rowcar{margin:10px 0 0}
.rel-mini{flex:0 0 calc(25% - 12px);scroll-snap-align:start;display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:12px;padding:8px;min-width:0;background:var(--bg)}
.page-detail .rel-mini-link{flex:1;min-width:0;display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.page-detail .rel-mini-link:hover .rel-title{color:var(--acc)}
.rel-mini .rel-thumb{width:48px;height:48px}
.rel-mini .rel-title{font-size:.85rem;font-weight:400;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-mini .rel-artnum{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-mini .rel-price{font-size:.88rem;padding-left:0}
.rel-mini-cart{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line-ctl);
  background:var(--panel);color:var(--acc);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s}
.rel-mini-cart:hover:not(:disabled){border-color:var(--acc)}
.rel-mini-cart:disabled{opacity:.4;cursor:default}
@media (max-width:900px){.rel-mini{flex-basis:calc(50% - 8px)}}
@media (max-width:560px){.rel-mini{flex-basis:85%}}

/* ---------- image lightbox ---------- */
.lbx{position:fixed;inset:0;z-index:300;background:rgba(7,9,14,.93);display:flex;align-items:center;justify-content:center}
.lbx[hidden]{display:none}
.lbx-stage{width:min(92vw,1500px);height:88vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lbx-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;user-select:none;-webkit-user-drag:none;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lbx.zoomed .lbx-stage img{flex:none;max-width:none;max-height:none;cursor:grab;touch-action:none}
.lbx.zoomed .lbx-stage img.drag{cursor:grabbing}
.lbx-close,.lbx-nav,.page-detail .lbx-zoombtn{position:absolute;z-index:1;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-ctl);background:color-mix(in srgb,var(--panel) 82%,transparent);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s}
.lbx-close:hover,.lbx-nav:hover,.page-detail .lbx-zoombtn:hover{border-color:var(--acc);color:var(--acc)}
.lbx-close{top:16px;right:16px}
.page-detail .lbx-zoombtn{top:16px;right:72px}
.page-detail .lbx .ic-out{display:none}
.page-detail .lbx.zoomed .ic-in{display:none}
.page-detail .lbx.zoomed .ic-out{display:inline}
.lbx-prev{left:14px;top:50%;transform:translateY(-50%)}
.lbx-next{right:14px;top:50%;transform:translateY(-50%)}
.lbx-count{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:.82rem;color:var(--muted);background:color-mix(in srgb,var(--panel) 75%,transparent);border:1px solid var(--line);padding:4px 12px;border-radius:99px}
.lbx-count:empty{display:none}
@media(max-width:700px){
  .lbx-stage{width:96vw;height:78vh}
  .lbx-nav{width:38px;height:38px}
  .lbx-prev{left:6px}.lbx-next{right:6px}
}
.page-detail .detail-attrs{padding:12px 20px}
.page-detail .detail-attrs>h2{margin-bottom:8px}
.page-detail .attr{width:100%;border-collapse:collapse;font-size:.9rem}
.page-detail .attr th,.page-detail .attr td{text-align:left;padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.page-detail .attr th{color:var(--muted);font-weight:500;width:45%;padding-right:14px}
.page-detail .attr td{overflow-wrap:anywhere}
.page-detail .attr tr:last-child th,.page-detail .attr tr:last-child td{border-bottom:0}

/* ---------- buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;
  border:1.5px solid var(--line-ctl);border-radius:12px;background:color-mix(in srgb,var(--text) 4%,var(--panel));color:var(--text);
  cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.4;transition:all .15s}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.primary{background:var(--grad-btn);border-color:transparent;color:#fff;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--acc) 50%,transparent)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px -6px color-mix(in srgb,var(--acc) 55%,transparent);color:#fff}
.btn.primary:disabled{opacity:.5;transform:none;box-shadow:none;cursor:not-allowed}
.btn.block{width:100%;margin-top:16px}
.btn.danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,var(--line))}
.btn.danger:hover{border-color:var(--err);color:var(--err)}
.link{background:none;border:0;color:var(--err);cursor:pointer;padding:4px}
label{display:block;margin:12px 0;font-size:.85rem;font-weight:500;color:var(--muted)}
input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--line-ctl);border-radius:12px;
  background:var(--panel);color:var(--text);font:inherit;margin-top:5px;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
label.chk{display:flex;align-items:center;gap:10px;color:var(--text);font-size:.92rem}
label.chk input{width:auto;margin:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
/* Kompakte Platzhalter-Formulare (Adressen): Label steckt im Feld. */
.frm input,.frm select,.frm textarea{margin:0 0 10px}
.frm .row2{gap:0 12px}
.frm input::placeholder,.frm textarea::placeholder{color:var(--muted);opacity:.85}
.form-field{display:block;min-width:0;margin:0 0 10px;scroll-margin-top:180px}
.float-control{position:relative}
.float-control input,.float-control select,.float-control textarea{display:block;margin:0;min-height:52px;padding:20px 14px 6px;line-height:24px}
.float-control input:placeholder-shown,.float-control textarea:placeholder-shown{padding-top:13px;padding-bottom:13px}
.float-control label{position:absolute;top:4px;left:14px;right:14px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:16px;color:var(--muted);opacity:1;pointer-events:none}
.float-control input:placeholder-shown+label,.float-control textarea:placeholder-shown+label{opacity:0}
.float-control input::placeholder,.float-control textarea::placeholder{opacity:1}
.float-control textarea:not(:placeholder-shown)+label{background:var(--panel)}
.field-error{display:block;margin:5px 0 0;color:var(--err);font-size:.82rem;line-height:1.4}
.field-error[hidden]{display:none}
.form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"],.form-field textarea[aria-invalid="true"]{border-color:var(--err)}
.form-errors{margin:0 0 14px;color:var(--err);font-size:.9rem}
.form-errors:focus{outline:2px solid var(--err);outline-offset:3px}
.pwfield .form-field{margin-bottom:10px}
.pwfield:has(.form-field) .pwico{top:26px}
.pwfield .float-control label{right:74px}
.cap-lab{margin:0}
.slider-pause .slider-play-icon{display:none}
.slider-pause[aria-pressed="true"] .slider-play-icon{display:block}
.slider-pause[aria-pressed="true"] .slider-pause-icon{display:none}
.page-home .slider-arrow{min-width:40px;min-height:40px}
.page-home .slide[inert]{pointer-events:none}
/* Passwortfeld mit Inline-Aktionen (Generieren/Kopieren) */
.pwfield{position:relative}
.pwfield input{padding-right:74px}
.pwfield .pwico{position:absolute;top:50%;transform:translateY(-50%);width:auto;margin:0;padding:6px;
  background:none;border:0;color:var(--muted);cursor:pointer;display:flex;align-items:center;border-radius:8px}
.pwfield .pwico:hover{color:var(--acc)}
.pwfield .pwico:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.pwfield .pwico[data-pwgen]{right:36px}
.pwfield .pwico[data-pwcopy]{right:8px}
.page-checkout .pwfield .pwico-r{right:8px}
.pwfield.one input{padding-right:44px}
/* Kopier-Bestaetigung: kleiner Tooltip ueber dem Button (JS-setzt left/top) */
.pwtip{position:fixed;z-index:400;transform:translate(-50%,-112%);pointer-events:none;
  background:var(--text);color:var(--panel);border-radius:8px;padding:4px 10px;
  font-size:.78rem;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-lg);
  animation:pwtip 1.8s ease forwards}
.pwtip::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--text)}
@keyframes pwtip{0%{opacity:0;transform:translate(-50%,-85%)}10%{opacity:1;transform:translate(-50%,-112%)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-112%)}}
.caprow{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 10px}
.cap-challenge{flex:0 1 auto;max-width:100%;margin:0}
.cap-equation{display:flex;align-items:center;gap:10px}
.cap-lab{flex-basis:100%;color:var(--muted);font-size:.82rem;font-weight:500}
.cap-q{font-weight:600;letter-spacing:.14em;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:var(--panel2);border-radius:10px;padding:8px 14px}
[data-theme="dark"] .cap-q{background:#070a0f}
.cap-q i{font-style:italic;color:var(--acc);font-weight:700}
.cap-x{color:var(--muted);font-weight:600;letter-spacing:.06em;white-space:nowrap}
.cap-x i{font-style:italic;color:var(--acc);font-weight:700}
.caprow .cap-in{flex:none;width:56px;margin:0;padding:8px;text-align:center;font-weight:600}
/* Fehlertext immer auf eigener Zeile hinter der Button-Zeile — sonst bläht
   er die Challenge-Box auf und schiebt den Button nach rechts. */
.caprow>.field-error{flex-basis:100%;order:3}
.caprow .btn{flex:1;min-width:0;white-space:nowrap;align-self:flex-start}
@media (max-width:480px){.caprow .btn{flex-basis:100%}}
/* Kontakt: gleiche Breite wie das dreispaltige Registrier-Panel —
   Formular ~2 Spalten, „So erreichen Sie uns" ~1 Spalte. */
.page-contact .contact-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;align-items:start;margin:20px auto 0;max-width:1060px}
@media (max-width:860px){.page-contact .contact-grid{grid-template-columns:1fr}}
.page-contact .caddr{font-style:normal;line-height:1.75;margin:0 0 4px}
.page-contact .clist{list-style:none;margin:6px 0 0;padding:0}
.page-contact .clist li{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.page-contact .clist .ci-ico{color:var(--acc);flex:none;display:flex}
.page-contact .clist .ci-l{display:block;font-size:.8rem;color:var(--muted)}
.alert{padding:14px 18px;border-radius:12px;margin:12px 0;font-weight:500}
.alert.err{background:color-mix(in srgb,var(--err) 10%,var(--panel));color:var(--err);border:1px solid color-mix(in srgb,var(--err) 40%,transparent)}
.alert.ok{background:color-mix(in srgb,var(--ok) 10%,var(--panel));color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.alert.info{background:color-mix(in srgb,var(--acc) 8%,var(--panel));color:var(--text);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}

/* ---------- panels / checkout ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
/* Nacktes Panel als Seitenstart (ohne Breadcrumb/Auth-/Center-Margin):
   Seitenabstand nach oben, damit es nicht am Header klebt. */
#main>.panel:first-child:not(.auth):not(.center){margin-top:22px}
.panel.center{text-align:center;max-width:620px;margin:44px auto}
.panel.auth{max-width:440px;margin:44px auto}
/* Registrierung: Sektionen auf breiten Viewports nebeneinander (Konto |
   Rechnungsanschrift | Abschluss), mittelbreit 2-spaltig, schmal gestapelt. */
.page-register .panel.auth{max-width:1060px}
.page-register .reg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:4px 22px;align-items:start}
.page-register .reg-sec{min-width:0}
.page-register .reg-sec>h2{margin:0 0 12px;font-size:1rem;letter-spacing:0}
@media(min-width:1101px){.page-register .reg-finish{align-self:stretch;display:flex;flex-direction:column}.page-register .reg-finish .caprow .btn{flex-basis:100%;margin-top:12px}.page-register .reg-finish .req-note{margin-top:auto;margin-bottom:10px}}
@media(max-width:1100px){.page-register .reg-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.page-register .reg-finish{grid-column:1/-1}}
@media(max-width:700px){.page-register .reg-grid{grid-template-columns:1fr}}
/* Split-Formulare (Login, Newsletter): Inhalt links | Pitch rechts
   (Trennlinie), schmal gestapelt. */
.page-login .panel.auth{max-width:880px}
.page-newsletter .panel.auth:has(.split){max-width:880px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 26px;align-items:start}
.split-sec{min-width:0}
.split-sec:not(.split-pitch){padding-right:26px}
.split-sec>h2{margin:0 0 12px;font-size:1rem;letter-spacing:0}
.split-pitch{border-left:1px solid var(--line);padding-left:26px}
.split-benefits{list-style:none;margin:0 0 16px;padding:0}
.split-benefits li{position:relative;padding:4px 0 4px 24px;font-size:.92rem;line-height:1.45}
.split-benefits li::before{content:'\2713';position:absolute;left:0;top:4px;color:var(--acc);font-weight:700}
.nl-unsub{margin:18px 0 36px;color:var(--muted);font-size:.84rem;text-align:right}
.nl-unsub-btn{border:0;background:none;padding:0;color:var(--muted);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nl-unsub-btn:hover{color:var(--acc)}
.nl-unsub-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}
@media(max-width:720px){.split{grid-template-columns:1fr}.split-sec:not(.split-pitch){padding-right:0}.split-pitch{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px;margin-top:10px}}
.page-checkout .co-grid{display:grid;grid-template-columns:1fr 1fr 400px;gap:20px;align-items:start;margin-bottom:40px}
.page-checkout .co-grid>*{min-width:0}
@media(max-width:1020px){.page-checkout .co-grid{grid-template-columns:1fr}}
/* Checkout-Login: einklappbarer Block, kompakte Aktionszeile */
.page-checkout .co-login{margin:0 0 20px}
.page-checkout .co-login>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  padding:4px 0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.page-checkout .co-login>summary::-webkit-details-marker{display:none}
.page-checkout .co-login>summary:hover{color:var(--acc)}
.page-checkout .co-login .co-chev{flex:none;color:var(--muted);transition:transform .15s,color .15s}
.page-checkout .co-login>summary:hover .co-chev{color:var(--acc)}
.page-checkout .co-login[open]>summary .co-chev{transform:rotate(180deg)}
.page-checkout .co-login .frm{margin-top:12px}
.page-checkout .co-login .alert{margin:10px 0}
.page-checkout .co-act{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.page-checkout .co-act .co-forgot{flex:1 1 auto;min-width:0;color:var(--acc);font-size:.85rem;font-weight:600;text-decoration:none}
.page-checkout .co-act .co-forgot:hover{text-decoration:underline}
.page-checkout .co-act .chk{flex:none;margin:0;white-space:nowrap}
.page-checkout .co-btn{text-align:right;margin-bottom:10px}
.page-checkout .co-save{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.page-checkout .co-save .req-note{margin:0}
.co-newsletter{margin:0;padding:13px 16px;border:1px solid var(--line-ctl);border-radius:12px;background:var(--panel);cursor:pointer}
.co-newsletter input{flex:none;accent-color:var(--acc)}
.co-newsletter span{min-width:0;overflow-wrap:anywhere}
.page-register .co-newsletter{margin:2px 0 14px}
.page-checkout .opt{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line-ctl);border-radius:12px;
  margin:8px 0;cursor:pointer;color:var(--text);font-size:.95rem;font-weight:500;transition:all .15s}
.page-checkout .opt:hover{border-color:var(--acc)}
.page-checkout .opt:has(input:checked){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--panel))}
.page-checkout .opt input{width:auto;margin:0;accent-color:var(--acc)}
.page-checkout .opt b{margin-left:auto}
.page-checkout .pay-desc{flex-basis:100%;margin:-4px 0 0 28px;font-weight:400;color:var(--muted);font-size:.83rem;line-height:1.4}
.sum{position:sticky;top:var(--header-offset,16px)}
.sum>div,.sum>#sumLines>div,.sum>#cartSumLines>div,.sum>#cartDed>div{display:flex;justify-content:space-between;padding:7px 0;font-size:.95rem}
.sum>div[hidden],.sum>#sumLines>div[hidden],.sum>#cartSumLines>div[hidden]{display:none}
/* Fragment-Wrapper (/api/totals-Summen, Warenkorb-Abzüge): transparent im
   Layout (keine eigene Box), Zeilen unten verhalten sich wie Direktkinder */
#sumLines,#cartSumLines,#cartDed{display:contents}
.sum .total{font-size:1.25rem;font-weight:800;padding-top:10px}
.sum h2{display:flex;align-items:center;justify-content:space-between}
.page-checkout .sum-edit{color:var(--muted);display:inline-flex;padding:4px;border-radius:8px}
.page-checkout .sum-edit:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
/* Bestellpositionen: voller Titel + Art.-Nr./Variante (wesentliche Merkmale
   i.S.d. § 312j Abs. 2 BGB / Art. 246a § 1 Nr. 1 EGBGB) — kein Abschneiden. */
.page-checkout .sum>.sum-item{display:block;padding:7px 0}
.page-checkout .sum-item .sum-line{display:flex;justify-content:space-between;align-items:baseline}
.page-checkout .sum-it{min-width:0;overflow-wrap:anywhere}
.page-checkout .sum-item .sum-meta{font-size:.78rem;color:var(--muted);margin-top:2px}
.page-checkout .sum-item .sum-ostock{color:#e8a33d}
.page-checkout .sum-pr{white-space:nowrap;margin-left:12px}
.sum hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.sum .sm{font-size:.85rem}

/* ---------- order done ---------- */
.done-top{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin:42px 0 30px}
.done-top>*{min-width:0}
@media(max-width:820px){.done-top{grid-template-columns:1fr;margin-top:24px}}
.done-ok{text-align:center;padding:34px 28px}
.done-check{width:92px;height:92px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);
  box-shadow:0 0 0 9px color-mix(in srgb,var(--ok) 8%,transparent)}
.done-check svg{width:46px;height:46px}
.done-ok h1{margin:0 0 8px}
.done-nr{font-size:1.05rem;margin:0 0 4px}
.done-amount{font-size:1.3rem;margin:8px 0 10px}
.done-meta{display:flex;justify-content:center;gap:8px 20px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin-bottom:14px}
.done-meta b{color:var(--text);font-weight:600}
.done-actions{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.done-side{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:34px 40px;text-align:center}
.bank-rows{display:grid;grid-template-columns:auto auto;gap:10px 28px;margin:14px auto 0;font-size:.95rem;text-align:left;width:fit-content}
.bank-rows dt{color:var(--muted)}
.bank-rows dd{margin:0;font-weight:600;word-break:break-word}
.bank-iban{letter-spacing:.04em}
/* Downloadartikel — geteilte Liste (Konto, Token-Seite, Danke-Seite) */
.dl-group{margin-top:14px}
.dl-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:.92rem}
.dl-list{list-style:none;margin:0;padding:0}
.dl-item{display:flex;gap:14px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line)}
.dl-item:last-child{border-bottom:0}
.dl-item.off .dl-name,.dl-item.off .dl-ico{color:var(--muted)}
.dl-ico{flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-ctl);border-radius:10px;color:var(--acc);background:color-mix(in srgb,var(--acc) 7%,transparent)}
.dl-item.off .dl-ico{border-color:var(--line);background:transparent}
.dl-info{flex:1;min-width:0}
.dl-name{font-weight:600;font-size:.95rem;word-break:break-all}
.dl-size{font-weight:400;font-size:.85rem}
.dl-meta{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:3px;font-size:.82rem;color:var(--muted)}
.dl-art{margin-top:2px;font-size:.82rem}
.dl-act{flex-shrink:0}
.dl-tag{display:inline-block;padding:6px 14px;border-radius:99px;font-size:.8rem;font-weight:600;
  color:var(--muted);border:1px solid var(--line);background:color-mix(in srgb,var(--text) 4%,transparent)}
.dl-tag.pend{color:color-mix(in srgb,var(--acc) 80%,var(--text));border-color:color-mix(in srgb,var(--acc) 35%,var(--line));background:color-mix(in srgb,var(--acc) 8%,transparent)}
.done-side .dl-group{width:100%;margin-top:10px;text-align:left}
.done-side .dl-item{gap:10px;padding:10px 0}
.done-side .dl-ico{width:32px;height:32px}
.done-side .dl-meta{gap:1px 10px;font-size:.78rem}
.done-side .dl-art{font-size:.78rem}
.done-side .dl-act .btn{white-space:nowrap}
@media(max-width:560px){.dl-item{flex-wrap:wrap}.dl-act{width:100%;text-align:right}}
.done-also h2{margin-bottom:8px}
.page-account .tbl{width:100%;border-collapse:collapse;margin:12px 0}
.page-account .tbl th,.page-account .tbl td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line)}
.page-account .tbl th{color:var(--muted);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.page-account .tbl tfoot td{font-weight:650}
.page-account .tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.page-account .tbl td.num{width:1%}
.page-account .tbl .tsub{font-size:.8rem;color:var(--muted);margin-top:2px}

/* ---------- cart ---------- */
.page-cart .cart-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:900px){.page-cart .cart-grid{grid-template-columns:1fr}}
.page-cart .cart-lines{container-type:inline-size;--cart-cols:72px minmax(0,1fr) 112px 104px 104px 24px}
.page-cart .cart-head,.page-cart .cline{display:grid;grid-template-columns:var(--cart-cols);gap:12px;align-items:center}
.page-cart .cart-head{align-items:start;padding:12px 0 14px;border-bottom:1px solid var(--line);font-weight:600;font-size:.85rem}
.page-cart .cart-head small{display:block;color:var(--muted);font-size:.75rem;font-weight:400;margin-top:3px}
.page-cart .cart-head-article{grid-column:1 / 3}
.page-cart .cart-head-article small{display:none}
.page-cart .cart-head-qty{text-align:center}
.page-cart .cart-head .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.page-cart .cline{
  padding:14px 0;border-bottom:1px solid var(--line)}
.page-cart .cline:last-child{border-bottom:0}
.page-cart .cline .ci-img{width:72px;height:72px;object-fit:cover;border-radius:12px}
.page-cart .cline-info{min-width:0;overflow-wrap:anywhere}
.page-cart .cline>.cdel{justify-self:end}
.page-cart .cart-clear{padding-top:6px;margin:0}
.page-cart .cart-clear .btn{padding:5px 10px;font-size:.75rem;font-weight:400;border-radius:8px;color:var(--muted);border-color:var(--line-ctl);background:transparent}
.page-cart .cart-clear .btn:hover{color:var(--err);border-color:var(--err)}
.page-cart .cart-country{margin:16px 0;padding-top:12px;border-top:1px solid var(--line)}
.page-cart .cart-country>label{display:block;margin-bottom:6px;font-size:.85rem;color:var(--muted)}
.page-cart .cart-country-controls{display:flex;gap:8px;align-items:center}
.page-cart .cart-country-controls select{flex:1;min-width:0;font-size:.85rem}
.page-cart .cart-country-controls .btn{flex:none;padding:9px 10px;font-size:.8rem}
.page-cart .cart-country p{margin:6px 0 0}
.page-cart .cline-info a{color:var(--text);font-weight:600}
.page-cart .cline-prices{display:contents}
.page-cart .cline-price{color:var(--muted);font-size:.92rem;text-align:right}
.page-cart .cline-sum{font-weight:700;min-width:90px;text-align:right}
.page-cart .qtyctl{display:flex;align-items:center;border:1px solid var(--line-ctl);border-radius:99px;overflow:hidden}
.page-cart .qtyctl button{width:34px;height:38px;border:0;background:var(--panel2);color:var(--text);cursor:pointer;font-size:1.05rem}
.page-cart .qtyctl button:hover{background:color-mix(in srgb,var(--acc) 12%,var(--panel2))}
.page-cart .qtyctl input{width:52px;text-align:center;border:0;margin:0;padding:8px 0;background:transparent;-moz-appearance:textfield;appearance:textfield}
.page-cart .qtyctl input::-webkit-outer-spin-button,.page-cart .qtyctl input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.page-cart .qtyctl input:focus{box-shadow:none}
.page-cart .cline.updating{opacity:.45;pointer-events:none}
@container(max-width:620px){
  .page-cart .cart-head{grid-template-columns:1fr}
  .page-cart .cart-head-article{grid-column:auto;display:flex;justify-content:space-between;align-items:center}
  .page-cart .cart-head-article small{display:block;margin:0}
  .page-cart .cart-head-qty,.page-cart .cart-head-price,.page-cart .cart-head-total{display:none}
  .page-cart .cline{grid-template-columns:64px 1fr auto;column-gap:12px;row-gap:8px;align-items:start;
    grid-template-areas:"img info del" "qty qty pr"}
  .page-cart .cline>.cdel{grid-area:del}
  .page-cart .cline-image{grid-area:img}
  .page-cart .cline .ci-img{width:64px;height:64px}
  .page-cart .cline-info{grid-area:info;min-width:0}
  .page-cart .cline-prices{grid-area:pr;display:flex;flex-direction:column;align-items:flex-end;gap:2px;align-self:end}
  .page-cart .cline-price{font-size:.82rem}
  .page-cart .cline-price::before,.page-cart .cline-sum::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:400;color:var(--muted);margin-bottom:2px}
  .page-cart .cline-sum{min-width:0}
  .page-cart .qtyctl{grid-area:qty;justify-self:start}
}

/* ---------- account sidebar ---------- */
.page-account .acct{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;margin:26px 0 50px;align-items:start}
@media(max-width:820px){.page-account .acct{grid-template-columns:1fr}.page-account .acct-side{position:static!important}}
.page-account .acct-side{position:sticky;top:var(--header-offset,16px);background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:18px;box-shadow:var(--shadow)}
.page-account .acct-user{display:flex;gap:12px;align-items:center;padding:6px 4px 16px;border-bottom:1px solid var(--line);margin-bottom:10px}
.page-account .avatar{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:1.15rem;flex:0 0 auto}
.page-account .acct-nav{display:flex;flex-direction:column;gap:2px}
.page-account .acct-nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--text);
  font-weight:550;font-size:.95rem;transition:all .15s}
.page-account .acct-nav a:hover{background:color-mix(in srgb,var(--acc) 9%,transparent)}
.page-account .acct-nav a.on{background:color-mix(in srgb,var(--acc) 12%,var(--panel));color:var(--acc);font-weight:700}
.page-account .acct-nav a.out{color:var(--err);margin-top:8px}
.page-account .acct-nav .ico{width:20px;text-align:center;opacity:.8}
.page-account .acct-content{min-width:0}
.page-account .acct-user>div:last-child{min-width:0;overflow-wrap:anywhere}
.page-account .acct-content .panel{margin-top:0}
/* Schmale Content-Spalte im breiten Konto-Panel (z. B. Newsletter) */
.acct-narrow{max-width:440px}
.page-account .acct-stats{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}
.page-account .stat{flex:1;min-width:150px;text-align:center;padding:20px;border:1px solid var(--line);border-radius:14px;color:var(--text);transition:all .15s}
.page-account .stat:hover{border-color:var(--acc);transform:translateY(-2px)}
.page-account .stat b{font-size:1.7rem;display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-account .stat span{color:var(--muted);font-size:.88rem}
/* Dashboard: Abschnittszeilen (letzte Bestellung, Einstellungs-Snapshot) */
.page-account .dash-h{margin:26px 0 10px;font-size:1.02rem}
.page-account .dash-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.page-account .dash-row{display:flex;align-items:center;gap:12px;padding:13px 18px;color:var(--text);border-bottom:1px solid var(--line);transition:background .12s}
.page-account .dash-row:last-child{border-bottom:0}
.page-account .dash-row:hover{background:var(--panel2)}
.page-account .dash-row .lbl{color:var(--muted)}
.page-account .dash-row .val{margin-left:auto;font-weight:600;text-align:right}
.page-account .dash-row .val.ok{color:var(--ok)}
.page-account .dash-row .val.warn{color:var(--warn,#b45309)}
.page-account .dash-pill{font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc);white-space:nowrap}
.page-account .dash-pill.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
/* Bestellliste: Filterzeile + ganze Zeile klickbar */
.page-account .ord-filters{display:flex;gap:10px;align-items:center;margin:14px 0 6px;flex-wrap:wrap}
.page-account .ord-filters select{width:auto;min-width:110px;margin:0}
.page-account .ord-filters>a{align-self:center}
.page-account .ord-q{position:relative;flex:1;min-width:200px;max-width:420px}
.page-account .ord-q input{width:100%;margin:0;padding-right:44px}
.page-account .ord-q button{position:absolute;top:0;right:0;bottom:0;width:44px;border:0;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.page-account .ord-q button:hover{color:var(--acc)}
tr[data-href]{cursor:pointer}
tr[data-href]:hover td{background:color-mix(in srgb,var(--acc) 5%,transparent)}
/* Bestelldetail: Summenblock rechtsbuendig auf halber Breite */
.page-account .od-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-account .od-head h1{margin-right:auto}
.page-account .od-ship{margin:2px 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;font-size:.92em;background:var(--panel2)}
.page-account .od-ship a{color:var(--acc);font-weight:600;text-decoration:none}
.page-account .od-ship a:hover{text-decoration:underline}
.page-account .ord-actions{margin:0}
.page-account .ord-tot{display:flex;justify-content:flex-end;margin:0 0 20px}
.page-account .ord-tot table{width:min(430px,100%);border-collapse:collapse;font-size:.94rem}
.page-account .ord-tot td{padding:9px 12px;border-bottom:1px solid var(--line)}
.page-account .ord-tot td.num{text-align:right;white-space:nowrap}
.page-account .ord-tot tr:last-child td{border-bottom:0}
.page-account .ord-tot tr.tot td{font-size:1.05rem}
.page-account .acct-content.loading{opacity:.4;pointer-events:none;transition:opacity .15s}

/* ---------- toast ---------- */
.toast{position:fixed;right:20px;bottom:20px;transform:translateY(16px);opacity:0;
  background:var(--ok);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;font-size:.92rem;
  box-shadow:var(--shadow-lg);transition:all .25s;pointer-events:none;z-index:120;
  display:flex;align-items:center;gap:8px;max-width:min(440px,calc(100vw - 40px))}
.toast::before{content:'\2713';font-weight:800;flex:none}
.toast.err{background:var(--err)}
.toast.err::before{content:'!'}
.toast.show{opacity:1;transform:translateY(0)}
[data-theme="dark"] .toast{color:var(--bg)}

/* ---------- category directory ---------- */
/* ---------- /categories: schmale Filterzeile + durchgehender Baum ab Shopname ---------- */
.category-overview{padding:0 0 26px}
.category-overview [hidden]{display:none}
.category-overview-head{max-width:760px;margin:22px 0 0}
.category-overview-head h1{margin:0 0 8px}
.category-overview-head>p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.7}
.category-overview-tools{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin:22px 0 12px}
.category-overview-filter{display:flex;align-items:center;gap:8px;flex:0 1 330px;min-width:180px}
.category-filter-field{position:relative;flex:1;min-width:0}
.category-filter-field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.category-overview-filter input{height:38px;padding:6px 12px 6px 34px;font-size:.9rem}
.category-overview-filter input::-webkit-search-cancel-button{display:none}
.category-overview-filter noscript{flex:none}
.category-overview-status{margin:0;color:var(--muted);font-size:.84rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.category-overview-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.category-overview-reset{font-size:.84rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.category-overview-reset:hover{color:var(--acc)}
.category-overview-list{--category-line:color-mix(in srgb,var(--acc) 34%,var(--line));
  --category-branch-indent:clamp(26px,4vw,40px);--category-branch-top:26px}
.category-root{display:flex;align-items:center;gap:12px;margin:0;flex:none}
.category-root-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 15%,transparent)}
.category-root-name{font-weight:750;font-size:1.06rem;letter-spacing:-.01em}
.category-tree-root{list-style:none;margin:0 0 0 5px;padding:0 0 0 var(--category-branch-indent);
  border-left:2px solid var(--category-line)}
.category-group{position:relative;min-width:0;padding:14px 0 12px}
.category-group::before,.category-overview .category-tree-node::before{top:var(--category-branch-top);
  width:calc(var(--category-branch-indent) - 10px);background:var(--category-line)}
.category-group::before{content:"";position:absolute;left:calc(-1 * var(--category-branch-indent));
  height:2px;border-radius:2px}
.category-group:last-child::after,.category-tree-node:last-child::after{content:"";position:absolute;
  top:calc(var(--category-branch-top) + 4px);bottom:-4px;left:calc(-1 * var(--category-branch-indent) - 3px);
  width:6px;background:var(--bg)}
.category-group-heading{display:flex;justify-content:space-between;align-items:baseline;gap:14px;min-height:30px}
.category-group-heading h2{margin:0;min-width:0;font-size:1.2rem;line-height:1.25;overflow-wrap:anywhere}
.category-group-heading h2 a{display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.category-group-heading h2 a::before,.category-tree-link::before{content:"";flex:none;align-self:center;
  width:6px;height:6px;border-radius:50%;background:var(--category-line);transition:background .15s}
.category-group-heading h2 a:hover,.category-tree-link:hover{color:var(--acc)}
.category-group-heading h2 a:hover::before,.category-tree-link:hover::before{background:var(--acc)}
.category-count{flex:none;font-size:.74rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;padding:2px 10px;border:1px solid var(--line);border-radius:99px;
  background:color-mix(in srgb,var(--acc) 7%,var(--panel))}
.category-group-desc{margin:4px 0 0;padding-left:16px;max-width:85ch;color:var(--muted);font-size:.95rem;line-height:1.65;overflow-wrap:anywhere}
.category-tree,.category-tree-children{list-style:none;margin:14px 0 0;--category-branch-top:21px}
.category-tree{display:flex;flex-direction:column;gap:14px}
.category-overview .category-tree,.category-overview .category-tree-children{border-left-color:var(--category-line)}
.category-tree-node{min-width:0}
.category-tree-row{display:flex;align-items:center;gap:8px;min-height:42px}
.category-tree-link{display:flex;align-items:baseline;gap:12px;flex:1;min-width:0;padding:7px 0;color:var(--text);font-size:1rem;font-weight:600}
.category-tree-link .category-count{margin-left:auto}
.category-tree-link::before{transform:translateY(-1px)}
.category-tree-link>span:first-of-type{min-width:0;overflow-wrap:anywhere}
.category-tree-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:1px solid var(--line-ctl);border-radius:8px;background:color-mix(in srgb,var(--text) 4%,var(--panel));color:var(--muted);cursor:pointer}
.category-tree-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.category-tree-desc{margin:0 0 4px;padding-left:18px;max-width:80ch;color:var(--muted);font-size:.9rem;line-height:1.6;overflow-wrap:anywhere}
.category-tree-node:has(> .category-tree-row > .category-tree-toggle:not([hidden]))>.category-tree-desc{padding-left:58px}
.category-tree-children{--category-branch-indent:clamp(20px,3.5vw,38px);margin:8px 0 4px;display:flex;flex-direction:column;gap:10px}
.category-overview-empty{padding:32px;text-align:center}
.category-overview-empty h2{font-size:1.15rem;margin:0 0 8px}
.category-overview-empty p{color:var(--muted);margin:0}
@media(max-width:600px){.category-group{padding:12px 0 10px;--category-branch-top:24px}.category-group-heading{gap:10px}.category-group-heading h2{font-size:1.08rem}.category-overview-tools{gap:10px}.category-overview-filter{flex-basis:100%}.category-overview-actions{margin-left:0}.category-tree-link{font-size:.95rem}}

/* ---------- footer ---------- */
.ft{margin-top:32px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),var(--panel2))}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:22px 20px 44px}
@media(max-width:820px){.ft-grid{grid-template-columns:1fr 1fr}}
.ft-brand .logo{font-size:1.3rem}
.ft-addr{font-style:normal;margin:14px 0 0;line-height:1.6}
.ft-addr a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent)}
.ft-addr a:hover{color:var(--acc)}
.ft-contact{display:block;margin-top:10px}
.ft-col{display:flex;flex-direction:column;gap:9px}
.ft-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 6px}
.ft-col a{color:var(--muted);font-size:.92rem;transition:color .15s}
.ft-col a:hover{color:var(--acc)}
.ft-col .ft-categories-more{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.ft-categories-more>span{font-size:1.05em}
.ft-note{display:flex;justify-content:flex-end;margin:0 auto;padding:8px 20px 0;
  text-align:right;font-size:.74rem;line-height:1.5;color:var(--muted);opacity:.9;white-space:nowrap}
@media(max-width:560px){.ft-note{white-space:normal}}
.ft-note-star{display:inline-block;margin-right:3px;font-weight:700;color:var(--acc)}
.ft-note a{color:var(--muted);text-decoration:underline;font-size:inherit}
.ft-note a:hover{color:var(--acc)}
.ft-standard{border-top:1px solid var(--line);padding:22px 20px;text-align:center;
  color:var(--muted);font-size:.85rem;overflow-wrap:anywhere}
.ft-standard>:first-child{margin-top:0}
.ft-standard>:last-child{margin-bottom:0}
.ft-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:18px 20px;
  border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
#main{flex:1;padding-bottom:20px}

/* misc */
.page-account .addr{border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0;display:flex;justify-content:space-between;align-items:center}

/* ---------- api tokens (account) ---------- */
.row3{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:0 14px}
@media(max-width:640px){.row3{grid-template-columns:1fr}}
.page-account .tok-h{margin:28px 0 10px;font-size:1.05rem}
.page-account .tok-once{border:1px dashed var(--acc);border-radius:14px;padding:14px 16px;margin:16px 0}
.page-account .tok-secret{display:block;font-size:1rem;word-break:break-all;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;user-select:all}
.page-account .tok-row{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.page-account .tok-row.off{opacity:.55}
.page-account .tok-meta{flex:1 1 220px;min-width:0}
.page-account .tok-meta code{font-size:.82rem;color:var(--muted);margin-left:8px}
.page-account .tok-meta .sm{font-size:.82rem}
.page-account .tok-off{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;color:var(--err);
  border:1px solid var(--err);border-radius:999px;padding:1px 8px}
.page-account .tok-limits{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-account .tok-limits input,.page-account .tok-limits select{width:110px;padding:8px 10px;font-size:.85rem}
.page-account .tok-limits input[name=maxorders]{width:64px}
.page-account .tok-actions{display:flex;gap:14px;align-items:center;margin-left:auto}

/* ---------- facet filter drawer (rechts) ---------- */
.page-list .sortbar-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-list .fct-btn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:9px;
  border:1px solid var(--line-ctl);background:var(--panel);
  color:var(--text);font-size:.86rem;font-weight:600;cursor:pointer;transition:border .15s,background .15s}
.page-list .fct-btn:hover{border-color:var(--acc);color:var(--acc)}
.page-list .fct-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:99px;background:var(--acc);color:var(--acc-text);font-size:.72rem;font-weight:700}
.page-list .dr-r .dr-panel{left:auto;right:0;border-right:0;border-left:1px solid var(--line);
  width:min(360px,92vw);transform:translateX(103%)}
.page-list .dr-r.open .dr-panel{transform:none}
.page-list .fct-form{display:flex;flex-direction:column;flex:1;min-height:0}
.page-list .fct-stage{flex:1;overflow-y:auto;padding:6px 14px 14px}
.page-list .fct-grp{border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.page-list .fct-sum{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 2px;font-size:.9rem;font-weight:600;cursor:pointer;list-style:none;color:var(--text)}
.page-list .fct-sum::-webkit-details-marker{display:none}
.page-list .fct-chev{transition:transform .2s;color:var(--muted)}
.page-list .fct-grp[open] .fct-chev{transform:rotate(180deg)}
.page-list .fct-vals{padding:0 2px 10px;display:flex;flex-direction:column;gap:0}
/* Globale Form-Styles (label margin, input padding/width) hier bewusst neutralisieren,
   damit die Optionen kompakt bleiben. */
.page-list .fct-opt{display:flex;align-items:center;gap:9px;margin:0;padding:3px 6px;border-radius:8px;
  font-size:.86rem;font-weight:400;color:var(--text);cursor:pointer;line-height:1.35}
.page-list .fct-opt:hover{background:color-mix(in srgb,var(--acc) 8%,transparent)}
.page-list .fct-opt input{accent-color:var(--acc);width:15px;height:15px;padding:0;margin:0;flex:0 0 auto;
  border-radius:4px}
.page-list .fct-opt.fct-more{display:none}
.page-list .fct-grp.more-open .fct-opt.fct-more{display:flex}
.page-list .fct-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-list .fct-cnt{color:var(--muted);font-size:.78rem;flex:0 0 auto}
.page-list .fct-sw{display:inline-block;width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--text) 30%,var(--line));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.page-list .fct-morebtn{align-self:flex-start;margin-top:4px;border:0;background:none;color:var(--acc);
  font-size:.82rem;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px}
.page-list .fct-morebtn:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.page-list .fct-slider{padding:8px 2px 4px}
/* Rail: Track + beide Range-Inputs absolut uebereinander — so funktioniert der
   Doppelslider stabil (kein Negativ-Margin-Hack, keine globalen input-Styles). */
.page-list .fct-rail{position:relative;height:21px;margin:2px 0 10px}
.page-list .fct-slider-track{position:absolute;left:0;right:0;top:8px;height:5px;border-radius:99px;
  background:color-mix(in srgb,var(--text) 14%,var(--line))}
.page-list .fct-slider-fill{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--acc)}
.page-list .fct-range{position:absolute;inset:0;width:100%;height:21px;margin:0;padding:0;border:0;
  border-radius:0;appearance:none;-webkit-appearance:none;background:transparent;
  pointer-events:none;display:block;box-shadow:none}
.page-list .fct-range:focus{outline:0;box-shadow:none}
.page-list .fct-range::-webkit-slider-runnable-track{height:21px;background:none;border:0}
.page-list .fct-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;pointer-events:auto;
  width:17px;height:17px;margin-top:2px;border-radius:50%;background:var(--panel);
  border:2px solid var(--acc);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.page-list .fct-range::-moz-range-track{height:21px;background:none;border:0}
.page-list .fct-range::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;
  background:var(--panel);border:2px solid var(--acc);cursor:pointer}
.page-list .fct-price-fields{display:flex;align-items:center;gap:8px;margin:0}
.page-list .fct-num{flex:1;min-width:0;width:auto;padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);color:var(--text);font-size:.86rem;margin:0}
.page-list .fct-num:focus{outline:0;border-color:var(--acc);box-shadow:none}
.page-list .fct-actions{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-top:1px solid var(--line)}
.page-list .fct-apply{flex:1}
.page-list .fct-reset{font-size:.85rem;color:var(--muted)}
.page-list .fct-reset:hover{color:var(--acc)}
.page-list .fct-btn.fct-busy{opacity:.6;pointer-events:none}

/* ---------- KI-Berater (assistant) ---------- */
.hd-ai{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,background .15s}
.hd-ai:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.hd-search input{padding-right:46px}

.ai-tab{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:230;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 9px;
  background:var(--panel);border:1px solid var(--line);border-left:0;
  border-radius:0 14px 14px 0;box-shadow:var(--shadow-lg);color:var(--acc);
  cursor:pointer;transition:opacity .25s,transform .25s}
.ai-tab:hover{color:var(--acc-h)}
.ai-tab-text{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.ai-tab.hidden-tab{opacity:0;pointer-events:none;transform:translate(-8px,-50%)}
.ai-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  background:var(--err);color:#fff;font-size:.68rem;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px var(--bg)}
.ai-badge[hidden]{display:none}

.ai-hint{position:fixed;left:46px;top:50%;transform:translateY(-50%);z-index:235;
  width:min(280px,80vw);padding:14px 16px 14px 14px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  font-size:.86rem;display:flex;flex-direction:column;gap:8px}
.ai-hint[hidden]{display:none}
.ai-hint-x{position:absolute;top:6px;right:6px;border:0;background:none;color:var(--muted);
  cursor:pointer;padding:4px;display:inline-flex}
.ai-hint-x:hover{color:var(--text)}
.ai-hint-text{color:var(--text);padding-right:14px}
.ai-hint-go{align-self:flex-start;border:0;background:var(--grad);color:#fff;border-radius:8px;
  padding:6px 14px;font-size:.82rem;font-weight:700;cursor:pointer}
.ai-hint-go:hover{filter:brightness(1.06)}

.ai-panel{position:fixed;left:0;top:0;bottom:0;z-index:240;width:min(400px,92vw);
  display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);
  box-shadow:var(--shadow-lg);transform:translateX(-105%);
  transition:transform .28s cubic-bezier(.3,.8,.4,1)}
.ai-panel[hidden]{display:flex;visibility:hidden}
.ai-panel.open{transform:none;visibility:visible}
.ai-panel.ai-restore,.ai-tab.ai-restore{transition:none}
.ai-head{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;
  border-bottom:1px solid var(--line);background:var(--panel)}
.ai-avatar{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.ai-avatar img{width:40px;height:40px;object-fit:contain}
.ai-head-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ai-title{font-weight:800;font-size:.98rem;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-sub{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted)}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.ai-dot.on{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.ai-dot.grace{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.16)}
.ai-dot.off{background:var(--muted)}

.ai-body{flex:1;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin}
.ai-messages{display:flex;flex:0 0 auto;flex-direction:column;gap:10px}
.ai-privacy{flex:0 0 auto;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);font-size:.8rem;line-height:1.5}
.ai-privacy p{margin:0 0 10px;white-space:pre-line}
.ai-privacy p:last-child{margin-bottom:0}
.ai-privacy-more{margin-bottom:10px}
.ai-privacy-more summary{cursor:pointer;text-decoration:underline}
.ai-privacy-more[open] summary{margin-bottom:10px}
.ai-quality{display:flex;align-items:flex-start;gap:8px;margin:12px 0}
.ai-quality input{flex:0 0 auto;width:auto;margin-top:3px}
.ai-privacy[hidden],.ai-quality[hidden]{display:none}
.ai-form.needs-consent{flex-wrap:wrap}
.ai-form.needs-consent textarea{flex:1 0 100%;min-width:0}
.ai-form.needs-consent .ai-send{width:100%;height:auto;min-height:40px;border-radius:12px;padding:10px;font:inherit;font-size:.85rem}
.ai-form.needs-consent .ai-send svg{display:none}
.ai-msg{display:flex}
.ai-msg.v{justify-content:flex-end}
.ai-msg.b,.ai-msg.s{justify-content:flex-start}
.ai-bubble{max-width:88%;padding:9px 13px;border-radius:16px;font-size:.9rem;line-height:1.5;
  position:relative;word-break:break-word}
.ai-msg.v .ai-bubble{background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.ai-msg.b .ai-bubble{background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:5px}
.ai-msg.s .ai-bubble{background:transparent;border:1px dashed var(--line);color:var(--muted);
  font-size:.84rem;border-radius:12px}
.ai-msg-time{display:block;margin-top:4px;font-size:.66rem;opacity:.65;text-align:right}
.ai-msg-text a{color:inherit;text-decoration:underline}

.ai-cards{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ai-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  transition:border-color .15s,box-shadow .15s;text-decoration:none}
.ai-card:hover{border-color:var(--acc);box-shadow:var(--shadow);text-decoration:none}
.ai-card-img{flex:0 0 auto;width:52px;height:52px;object-fit:contain;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line)}
.ai-card-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ai-card-title{font-size:.84rem;font-weight:600;line-height:1.3;display:-webkit-box;
  -webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ai-card-sku{font-size:.72rem;color:var(--muted)}
.ai-card-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.ai-card-price{font-size:.9rem;font-weight:800;color:var(--acc);white-space:nowrap}
.ai-card-stock{font-size:.68rem;color:var(--muted);max-width:110px;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ai-typing{display:flex;gap:5px;padding:0 14px 8px}
.ai-typing[hidden]{display:none}
.ai-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);
  animation:aiTp 1.2s infinite}
.ai-typing span:nth-child(2){animation-delay:.15s}
.ai-typing span:nth-child(3){animation-delay:.3s}
.ai-typing i{font-style:normal;font-size:12px;color:var(--muted);margin-left:3px;
  align-self:center}
@keyframes aiTp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.ai-closed{padding:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ai-closed[hidden]{display:none}
.ai-closed p{margin:0;font-size:.86rem;color:var(--muted)}
.ai-closed .btn{padding:9px 18px;font-size:.86rem}

.ai-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 6px;border-top:1px solid var(--line)}
.ai-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ai-form textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:14px;
  background:var(--panel2);color:var(--text);padding:9px 12px;font:inherit;font-size:.9rem;
  line-height:1.4;max-height:110px}
.ai-form textarea:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}
.ai-send{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .15s,box-shadow .15s}
.ai-send:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--acc) 60%,transparent)}
.ai-send:disabled{opacity:.5;transform:none;cursor:not-allowed}

.ai-legal{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:6px 14px 10px;font-size:.68rem;color:var(--muted)}
.ai-legal-links{display:flex;align-items:baseline;gap:8px}
.ai-legal a,.ai-legal button{padding:0;border:0;background:none;color:inherit;font:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left}
.ai-legal a:hover,.ai-legal button:hover{color:var(--text)}
.ai-legal a:focus-visible,.ai-legal button:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

/* Suggest-Dropdown: fixe Fußzeile mit gleichwertigen Buttons (KI links, Treffer rechts) */
.suggest .sg-foot{flex:0 0 auto;display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid var(--line);background:var(--panel)}
.suggest .sg-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  gap:7px;padding:9px 10px;border:1px solid var(--line-ctl);border-radius:10px;
  background:var(--panel2);color:var(--text);font-size:.84rem;font-weight:600;
  cursor:pointer;text-align:center;transition:background .15s,border-color .15s}
.suggest .sg-btn .sg-bt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .sg-btn svg{flex:0 0 auto}
.suggest .sg-btn.sg-ai{border-color:color-mix(in srgb,var(--acc) 40%,var(--line));
  background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--acc)}
.suggest .sg-btn.sg-ai:hover{background:color-mix(in srgb,var(--acc) 16%,transparent);
  border-color:color-mix(in srgb,var(--acc) 55%,var(--line))}
@media(max-width:640px){.suggest .sg-foot{flex-direction:column}}

/* Ergebnis-Banner auf /search */
.page-list .ai-banner{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 18px;
  border-radius:var(--r);border:1px solid color-mix(in srgb,var(--acc) 28%,var(--line));
  background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 7%,var(--panel)),var(--panel))}
.page-list .ai-banner-ico{flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;color:#fff}
.page-list .ai-banner-t{flex:1;min-width:0}
.page-list .ai-banner-title{font-weight:700;font-size:.95rem}
.page-list .ai-banner-sub{font-size:.82rem;color:var(--muted)}
.page-list .ai-banner-go{flex:0 0 auto}

/* Detailseite: Kontext-Button */
.page-detail .ai-ctx{display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:center;
  margin-top:14px;padding:9px 14px;border:1px solid var(--line-ctl);border-radius:12px;
  background:color-mix(in srgb,var(--text) 4%,var(--panel));color:var(--acc);font-size:.86rem;font-weight:600;cursor:pointer;
  transition:border-color .15s,background .15s}
.page-detail .ai-ctx:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 7%,transparent)}

/* Detailseite: Merkliste + KI-Frage in einer Zeile */
.page-detail .detail-actions{display:flex;gap:10px;margin-top:14px}
.page-detail .detail-actions .wish-form{flex:1;min-width:0;display:flex}
.page-detail .wish-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;
  border:1px solid var(--line-ctl);border-radius:12px;background:color-mix(in srgb,var(--text) 4%,var(--panel));
  color:var(--text);font-size:.86rem;font-weight:600;cursor:pointer;text-decoration:none;
  transition:border-color .15s,background .15s,color .15s}
.page-detail .wish-btn:hover{border-color:var(--acc);color:var(--acc)}
.page-detail .wish-btn.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--panel));color:var(--acc)}
.page-detail .wish-btn.on .w-ico path{fill:currentColor}
.page-detail .wish-btn:disabled{opacity:.45;cursor:default}
.page-detail .wish-btn:disabled:hover{border-color:var(--line-ctl);color:var(--text)}
.page-detail .detail-actions .ai-ctx{flex:1;width:auto;margin-top:0}
.pwtip.wish-tip{max-width:min(280px,calc(100vw - 24px));white-space:normal;text-align:center}

/* Merkliste (Kundenkonto) */
.page-account .wl-allbar{display:flex;justify-content:flex-end;margin:2px 0 6px}
.page-account .wl-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto;gap:16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line)}
.page-account .wl-line:last-child{border-bottom:0}
.page-account .wl-img{display:block;width:64px;height:64px}
.page-account .wl-img img{width:64px;height:64px;object-fit:contain}
.page-account .wl-noimg{border:1px dashed var(--line-ctl);border-radius:10px}
.page-account .wl-info{min-width:0}
.page-account .wl-info>a{display:block;font-weight:600}
.page-account .wl-avail{font-size:.85rem;white-space:nowrap}
.page-account .wl-avail.ok{color:var(--ok)}
.page-account .wl-avail.warn{color:#e8a33d}
.page-account .wl-price{font-weight:700;white-space:nowrap;text-align:right}
.page-account .wl-acts{display:flex;gap:10px;align-items:center}
.page-account .wl-acts form{display:flex}
.page-account .wl-dead{opacity:.55}
@media(max-width:640px){
  .page-account .wl-line{grid-template-columns:56px 1fr auto;row-gap:8px}
  .page-account .wl-img,.page-account .wl-img img{width:56px;height:56px}
  .page-account .wl-avail{grid-column:2;font-size:.8rem}
  .page-account .wl-price{grid-column:3;grid-row:1;align-self:start}
  .page-account .wl-acts{grid-column:2/4;justify-content:flex-end}
}

@media (max-width:980px){
  .ai-panel{width:min(400px,96vw)}
  .ai-hint{left:44px;width:min(250px,78vw)}
}
form.confirming [type="submit"],form.confirming button:not([type]){
  animation:cfPulse 1.1s ease-in-out infinite}
@keyframes cfPulse{0%,100%{opacity:1}50%{opacity:.5}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
  .ai-panel{transition:none}
  .ai-typing span{animation:none}
  form.confirming [type="submit"],form.confirming button:not([type]){animation:none;opacity:.75}
}

/* ============================ blog (EcsDesk „Nachrichten") ============================ */
/* Liste + Sidebar */
.page-blog-list .blog-wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start;margin-bottom:14px}
.page-blog-list .blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.page-blog-list .blog-empty{grid-column:1/-1;padding:34px 0}

.bcard-link{display:flex;flex-direction:column;height:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--text);text-decoration:none;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.bcard-link:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 42%,var(--line));
  box-shadow:0 16px 34px -18px color-mix(in srgb,var(--acc) 45%,transparent)}
.bcard-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 15%,var(--panel2)),color-mix(in srgb,var(--acc2) 12%,var(--panel2)))}
.bcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.bcard-link:hover .bcard-img img{transform:scale(1.045)}
.bcard-img-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:color-mix(in srgb,var(--acc) 65%,var(--muted))}
.bcard-new{position:absolute;top:10px;left:10px;z-index:1;background:var(--grad);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 11px;border-radius:99px;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--acc) 65%,transparent)}
.bcard-body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 18px;flex:1}
.bcard-meta{display:flex;gap:10px;align-items:baseline;font-size:.72rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.bcard-meta time{color:var(--acc)}
.bcard-author{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcard-title{font-size:1.03rem;font-weight:700;line-height:1.35}
.bcard-tags{display:flex;gap:6px;flex-wrap:wrap}
.btag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:.72rem;
  font-weight:600;color:var(--acc);text-decoration:none;
  background:color-mix(in srgb,var(--acc) 9%,transparent);border:1px solid color-mix(in srgb,var(--acc) 20%,transparent)}
a.btag:hover{background:color-mix(in srgb,var(--acc) 17%,transparent)}
.bcard .btag{pointer-events:none}
.bcard-excerpt{font-size:.86rem;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bcard-more{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:6px;
  font-size:.83rem;font-weight:700;color:var(--acc)}

/* Redaktionelle Listenansicht, gemeinsam fuer Startseite und Blog. */
.brows{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.brow+.brow{border-top:1px solid var(--line)}
.brow-link{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);
  align-items:center;gap:20px;padding:22px 24px;color:var(--text);transition:background .18s}
.brow.has-image .brow-link{grid-template-columns:96px minmax(0,1fr) 120px}
.brow-link:hover,.brow-link:focus-visible{color:var(--text);background:color-mix(in srgb,var(--acc) 4%,var(--panel))}
.brow-link:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
.brow.is-latest .brow-link:before{content:"";position:absolute;left:0;top:50%;width:3px;height:36px;
  transform:translateY(-50%);background:var(--grad);border-radius:0 3px 3px 0}
.brow-stamp{display:flex;flex-direction:column;align-items:flex-start;align-self:start;gap:6px}
.brow-date{align-self:start;padding-top:3px;color:var(--muted);font-size:.74rem;font-weight:500;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.brow-copy{min-width:0}
.brow-meta{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:5px;line-height:1.4}
.brow-category{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-size:.65rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.brow-new{flex:none;border-radius:99px;padding:2px 7px;color:var(--acc);
  background:color-mix(in srgb,var(--acc) 10%,var(--panel));font-size:.61rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.brow-title{margin:0;font-size:1.04rem;font-weight:700;line-height:1.4;overflow-wrap:anywhere;transition:color .18s}
.brow-link:hover .brow-title,.brow-link:focus-visible .brow-title{color:var(--acc)}
.brow-excerpt{margin:5px 0 0;color:var(--muted);font-size:.86rem;line-height:1.55;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;overflow-wrap:anywhere}
.brow-image{display:block;width:120px;aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:var(--panel2)}
.brow-image img{width:100%;height:100%;object-fit:cover}
.brows .blog-empty{padding:24px;margin:0}
@media(max-width:640px){
  .brow-link{grid-template-columns:minmax(0,1fr);gap:8px 12px;padding:16px}
  .brow.has-image .brow-link{grid-template-columns:minmax(0,1fr) 80px}
  .brow-stamp{grid-column:1/-1}
  .brow-date{padding:0;font-size:.69rem}
  .brow-title{font-size:.96rem}
  .brow-excerpt{-webkit-line-clamp:2;line-clamp:2;font-size:.81rem}
  .brow-image{width:80px;align-self:start;margin-top:3px}
  .brow-meta{gap:7px}
  .brow-category{font-size:.59rem;letter-spacing:.04em}
}
@media(prefers-reduced-motion:reduce){.brow-link,.brow-title{transition:none}}

/* Teaser auf der Startseite */
.page-home .blog-teaser{margin:26px 0 6px}
.page-home .blog-teaser .rowcar-head{align-items:flex-end}
.page-home .blog-teaser-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.page-home .blog-teaser-head h2{margin:0}
.page-home .blog-teaser-h{color:var(--text);text-decoration:none}
.page-home .blog-teaser-h:hover{color:var(--acc)}
.page-home .blog-teaser-ctl{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.page-home .blog-teaser-ctl .artnav{margin-left:0}
.page-home .blog-teaser-ctl .artnav.nov{display:none}
.page-home .blog-teaser-all{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;
  color:var(--acc);text-decoration:none;white-space:nowrap}
.page-home .blog-teaser-all:hover{text-decoration:underline}
.page-home .blog-track .bcard{width:100%;min-width:0}
.page-home .blog-track .bcard-link{height:100%}
@media (max-width:640px){.page-home .blog-teaser-ctl .blog-teaser-all{display:none}}
.page-home .blog-teaser.is-list .blog-teaser-all{display:inline-flex}
@media(max-width:480px){
  .page-home .blog-teaser.is-list .rowcar-head{align-items:flex-start;gap:12px}
  .page-home .blog-teaser.is-list .blog-teaser-all{font-size:.76rem}
}

/* Sidebar */
.page-blog-list .blog-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:var(--header-offset,16px)}
.page-blog-list .bside{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px}
.page-blog-list .bside-h{margin:0 0 8px;font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.page-blog-list .bside-h span{color:var(--acc)}
.page-blog-list .bside-link{display:block;padding:7px 0;border-bottom:1px solid var(--line);
  color:var(--text);font-size:.9rem;text-decoration:none;line-height:1.4}
.page-blog-list .bside-link:last-child{border-bottom:0;padding-bottom:0}
.page-blog-list .bside-link:hover{color:var(--acc)}
.page-blog-list .bside-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.page-blog-list .bside-count{font-size:.74rem;color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.page-blog-list .bside-post-t{display:block;font-weight:600}
.page-blog-list .bside-post-d{font-size:.76rem;color:var(--muted)}
.page-blog-list .bside-tags{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}

/* Beitrag-Detail */
.page-blog-post .bpost-wrap{max-width:840px;margin:0 auto}
.page-blog-post .bpost{max-width:840px;margin:0 auto}
.page-blog-post .bpost-head{margin-bottom:22px}
.page-blog-post .bpost-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.page-blog-post .bpost-title{font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.2;margin:0}
.page-blog-post .bpost-title::after{content:"";display:block;width:64px;height:3px;border-radius:3px;
  background:var(--grad);margin-top:16px}
.page-blog-post .bpost-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.84rem;color:var(--muted)}
.page-blog-post .bpost-meta-it{display:inline-flex;align-items:center;gap:7px}
.page-blog-post .bpost-meta-it svg{color:var(--acc);flex:0 0 auto}
.page-blog-post .bpost-hero{margin:0 0 26px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.4)}
.page-blog-post .bpost-hero img{width:100%;display:block;aspect-ratio:21/9;object-fit:cover}
.page-blog-post .bpost-body{font-size:1rem}
.page-blog-post .bpost-body::after{content:"";display:table;clear:both}
.page-blog-post .bpost-body img{max-width:100%;border-radius:var(--rs)}
.page-blog-post .has-right-img .bpost-right-img{float:right;width:38%;margin:2px 0 18px 24px;border-radius:var(--rs);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.35)}
.page-blog-post .bpost-body h2,.page-blog-post .bpost-body h3{margin-top:1.6em}
.page-blog-post .bpost-body blockquote{margin:1.4em 0;padding:12px 18px;color:var(--muted);
  border-left:3px solid var(--acc);background:color-mix(in srgb,var(--acc) 6%,var(--panel));
  border-radius:0 var(--rs) var(--rs) 0}
.page-blog-post .bpost-body pre{background:var(--panel2);border:1px solid var(--line);border-radius:var(--rs);
  padding:14px 16px;overflow:auto;font-size:.85rem}
.page-blog-post .bpost-body code{background:color-mix(in srgb,var(--acc) 9%,var(--panel2));
  padding:2px 6px;border-radius:6px;font-size:.86em}
.page-blog-post .bpost-body pre code{background:none;padding:0}
.page-blog-post .bpost-body table{width:100%;border-collapse:collapse;font-size:.9rem;margin:1.2em 0}
.page-blog-post .bpost-body th,.page-blog-post .bpost-body td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.page-blog-post .bpost-body th{background:var(--panel2)}
/* vom Editor eingebettete Artikel-Widgets ans Theme anpassen (Inline-Styles überschreiben) */
.page-blog-post .bpost-body .blog-article-widget{background:var(--panel)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;color:var(--text)!important}
.page-blog-post .bpost-body .blog-article-widget a{color:var(--acc)!important}
.page-blog-post .bpost-body .blog-article-widget .baw-price{color:var(--acc)!important}
.page-blog-post .bpost-body .blog-article-widget .baw-title{color:var(--text)!important}
.page-blog-post .bpost-body .blog-article-widget .baw-desc,.page-blog-post .bpost-body .blog-article-widget .baw-num{color:var(--muted)!important}

.page-blog-post .bpost-foot{display:flex;margin-top:26px}
.page-blog-post .bpost-tags{display:flex;gap:6px;flex-wrap:wrap}
.page-blog-post .bpost-nav{display:flex;justify-content:center;align-items:stretch;gap:3px;margin:38px 0 6px}
.page-blog-post .bpost-nav-it{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:var(--panel);
  border:1px solid var(--line);font-size:.84rem;font-weight:600;color:var(--muted);
  text-decoration:none;transition:.18s}
.page-blog-post .bpost-nav-it:first-child{border-radius:99px 0 0 99px;padding-left:22px}
.page-blog-post .bpost-nav-it:last-child{border-radius:0 99px 99px 0;padding-right:22px}
.page-blog-post .bpost-nav-it:only-child{border-radius:99px}
.page-blog-post a.bpost-nav-it:hover{border-color:color-mix(in srgb,var(--acc) 42%,var(--line));color:var(--acc);
  background:color-mix(in srgb,var(--acc) 7%,var(--panel))}
.page-blog-post .bpost-nav-it svg{color:var(--acc);flex:0 0 auto}
.page-blog-post .bpost-nav-it.off{opacity:.42}

@media (max-width:980px){
  .page-blog-list .blog-wrap{grid-template-columns:1fr}
  .page-blog-list .blog-side{position:static;flex-direction:row;flex-wrap:wrap}
  .page-blog-list .bside{flex:1 1 240px}
}
@media (max-width:640px){
  .page-blog-list .blog-grid{grid-template-columns:1fr}
  .page-blog-post .has-right-img .bpost-right-img{float:none;width:100%;margin:0 0 18px}
}

/* Bot-Protection-Honeypot: unsichtbarer Link (nur für Crawler auffindbar) */
.bp-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Rechtstext-Hinweis + CMS-Modal an der Kasse: Link öffnet nur den CMS-Inhalt
   (Titel + OXCONTENT) ohne Seiten-Header/-Footer; href bleibt Fallback. */
.page-checkout .legal{font-size:.8rem;text-align:center;margin:12px 0 0;line-height:1.5}
.page-checkout .legal a{text-decoration:underline}
.page-checkout .cmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,#000 55%,transparent);padding:18px}
.page-checkout .cmodal[hidden]{display:none}
.page-checkout .cmodal-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  width:min(720px,100%);max-height:min(80vh,900px);display:flex;flex-direction:column;overflow:hidden}
.page-checkout .cmodal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.page-checkout .cmodal-head h2{margin:0;font-size:1.05rem}
.page-checkout .cmodal-x{background:none;border:0;color:var(--muted);font-size:1.6rem;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px}
.page-checkout .cmodal-x:hover{color:var(--text);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.page-checkout .cmodal-body{padding:8px 18px 18px;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--text) 30%,transparent) transparent}

/* Artikelbezogene Versandkosten, kleines Dialogfenster mit scrollbarer Matrix. */
.page-detail .vatnote:has(>.shipping-matrix-open){margin-top:1px}
.shipping-matrix-open{background:none;border:0;color:var(--muted);padding:2px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.shipping-matrix-open:hover{color:var(--acc)}
.shipping-matrix{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 55%,transparent);padding:16px}
.shipping-matrix[hidden],.shipping-matrix [hidden]{display:none}
.shipping-matrix-box{width:min(680px,100%);max-height:85dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg)}
.shipping-matrix-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.shipping-matrix-head h2{font-size:1.05rem;margin:0}
.shipping-matrix-head .btn{font-size:1.3rem;padding:4px 12px;flex-shrink:0}
.shipping-matrix-body{padding:12px 18px 16px;overflow-y:auto;min-height:0;font-size:.88rem}
.shipping-matrix-qty{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.shipping-matrix-qty input{width:74px;flex-shrink:0;margin-top:0;padding:5px 10px;border-radius:8px}
.shipping-matrix-view{position:relative;min-height:min(45dvh,calc((var(--sm-rows,0) + 1) * 2.6rem + 2px))}
.shipping-matrix-scroll{overflow:auto;max-height:45dvh;border:1px solid var(--line);border-radius:8px;overscroll-behavior:contain}
.shipping-matrix-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;background:color-mix(in srgb,var(--panel) 78%,transparent);border-radius:8px}
.shipping-matrix-state p{margin:0}
.shipping-matrix table{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem}
.shipping-matrix caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.shipping-matrix th,.shipping-matrix td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.shipping-matrix th:first-child{text-align:left;position:sticky;left:0;background:var(--panel);z-index:1}
.shipping-matrix thead th{position:sticky;top:0;z-index:2;background:var(--panel)}
.shipping-matrix thead th:first-child{z-index:3}
.shipping-matrix tbody tr:last-child>*{border-bottom:0}
.shipping-matrix .muted{font-size:.76rem;line-height:1.5;margin:12px 0 0}
.shipping-matrix :focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media(max-width:480px){.shipping-matrix{padding:10px}.shipping-matrix-head,.shipping-matrix-body{padding:12px}.shipping-matrix-head h2{font-size:.95rem}.shipping-matrix th,.shipping-matrix td{padding:9px}}

/* Einheitliche, begrenzte Seitennavigation. */
.pager{flex-wrap:wrap;align-items:center;gap:5px}
.pager>a,.pager>span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:6px 9px;border-radius:var(--rs);font-variant-numeric:tabular-nums}
.pager>.disabled{color:var(--muted);opacity:.5}
.pager>.gap{min-width:20px;padding-inline:2px;border-color:transparent}
.pager>.on{background:var(--grad-btn)}
.panel.auth.auth-wide{max-width:900px}
.auth-inner{max-width:560px;margin-inline:auto}

.page-detail .buyline{flex-wrap:wrap}
.page-detail .buyline .personalization{flex:0 0 100%;min-width:0;margin:0 0 8px}
.personalization-value{overflow-wrap:anywhere;white-space:pre-wrap}

/* Gesamtwertung im Footer */
.ft-rating{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;padding-top:18px;padding-bottom:24px;text-align:center;font-size:.8rem;color:var(--muted)}
.ft-rating-stars{position:relative;display:inline-block;white-space:nowrap;font-size:20px;line-height:1.2;letter-spacing:3px;color:var(--muted)}
.ft-rating-fill{position:absolute;inset:0 auto 0 0;overflow:hidden;color:#d99a16}