/* ==========================================================================
   Elektrogrosshandel.wien – components (requires tokens.css)
   Direction B "Industriell präzise" + grafts from A.

   Conventions
   - BEM-ish: .block, .block__part, .block--variant; state via ARIA
     (aria-pressed, aria-checked, aria-current, aria-selected, aria-expanded) or .is-*.
   - Element defaults are scoped to .egh (put class="egh" on <body>) via :where(),
     so they add no specificity and do not touch pages that still use styles.css.
   - No class here is also defined by the legacy CSS (checked by js/ui/__tests__/
     css-contract.test.js; only the identical .sr-only and .price/.qty, which legacy uses
     inside .volume-row, are shared), so both can be loaded side by side.
   - Site chrome (header, footer, checkout header) lives in partials.css.
   - ONE yellow (.btn--primary) per view: the single next step. Add-to-cart in
     lists is .btn--dark; the product page buy button is the view's primary.
   - Minimum text 12px, targets >= 24px (44px on touch), AA contrast, focus ring 2px.
   ========================================================================== */

/* ---------- Base (scoped) ---------- */
:where(.egh),:where(.egh) *,:where(.egh) *::before,:where(.egh) *::after{box-sizing:border-box}
[hidden]{display:none!important}
html:where(.egh){-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-row-1) + var(--header-row-2) + var(--space-4))}
body:where(.egh){margin:0;font-family:var(--font-sans);font-size:var(--text-14);line-height:var(--leading-body);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
:where(.egh) :is(img,svg,video){display:block;max-width:100%}
:where(.egh) :is(button,input,select,textarea){font:inherit;color:inherit;margin:0}
:where(.egh) button{cursor:pointer}
:where(.egh) :is(h1,h2,h3,h4){margin:0;color:var(--color-ink);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:-0.005em}
:where(.egh) h1{font-size:var(--text-24)}
:where(.egh) h2{font-size:var(--text-20)}
:where(.egh) h3{font-size:var(--text-16);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
:where(.egh) h4{font-size:var(--text-14);font-weight:var(--weight-semibold)}
:where(.egh) :is(p,figure,blockquote,dl,dd){margin:0}
:where(.egh) :is(ul,ol):where([class]){margin:0;padding:0;list-style:none}
:where(.egh) small{font-size:var(--text-12)}
:where(.egh) a{color:inherit}
:where(.egh) table{border-collapse:collapse;width:100%}
:where(.egh) :focus{outline:none}
:where(.egh) :focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
:where(.egh) .on-dark :focus-visible,.on-dark:focus-visible{outline-color:var(--focus-color-on-dark)}
.egh ::selection{background:var(--color-brand-tint);color:var(--color-ink)}

/* ---------- Utilities ---------- */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mono{font-family:var(--font-mono);letter-spacing:0}
.text-muted{color:var(--color-muted)}
.text-ink{color:var(--color-ink)}
.text-small{font-size:var(--text-12)}
.text-strong{font-weight:var(--weight-semibold);color:var(--color-ink)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-to-content{position:absolute;left:var(--space-2);top:-80px;z-index:var(--z-skip);background:var(--color-brand);color:var(--color-on-brand);padding:10px 16px;border-radius:var(--radius-4);font-weight:var(--weight-semibold);text-decoration:none}
.skip-to-content:focus{top:var(--space-2)}
.link{color:var(--color-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.link:hover{text-decoration-thickness:2px}
.link--quiet{text-decoration:none}
.link--quiet:hover{text-decoration:underline}
.rule{border:0;border-top:1px solid var(--color-border);margin:var(--space-4) 0}
.stack>*+*{margin-top:var(--space-3)}
.stack--sm>*+*{margin-top:var(--space-2)}
.stack--lg>*+*{margin-top:var(--space-5)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.grow{flex:1 1 auto;min-width:0}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.page{padding-top:var(--space-4);padding-bottom:var(--space-8)}
.page-head{padding:var(--space-4) 0}
.page-head h1{margin-top:var(--space-3)}
.page-head__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-top:6px;color:var(--color-muted);min-height:22px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.sec-head h2{font-size:var(--text-20)}

/* ---------- Icons (sprite: img/icons.svg) ---------- */
svg.i{width:var(--icon-md);height:var(--icon-md);flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i--16{width:var(--icon-sm);height:var(--icon-sm)}
svg.i--24{width:var(--icon-lg);height:var(--icon-lg)}

/* ---------- Logo (busbar-E mark + wordmark) ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--color-ink);text-decoration:none;font-weight:var(--weight-bold);font-size:var(--text-18);letter-spacing:var(--tracking-tight);white-space:nowrap;flex:none;border-radius:var(--radius-2)}
.logo__mark{width:30px;height:30px;flex:none}
.logo__tld{color:var(--color-muted)}
.logo--on-dark{color:var(--color-on-dark)}
.logo--on-dark .logo__tld{color:var(--color-brand)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-4);border-radius:var(--radius-4);border:1px solid transparent;background:transparent;color:var(--color-ink);font-size:var(--text-14);font-weight:var(--weight-semibold);line-height:1.1;text-decoration:none;white-space:nowrap;transition:background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)}
.btn svg.i{width:18px;height:18px}
.btn--primary{background:var(--color-brand);border-color:var(--color-brand);color:var(--color-on-brand)}
.btn--primary:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover)}
.btn--primary:active{background:var(--color-brand-active)}
.btn--secondary{background:var(--color-surface);border-color:var(--color-border-control)}
.btn--secondary:hover{border-color:var(--color-ink);background:var(--color-surface-hover)}
.btn--dark{background:var(--color-graphite-800);border-color:var(--color-graphite-800);color:var(--color-on-dark)}
.btn--dark:hover{background:var(--color-graphite-950);border-color:var(--color-graphite-950)}
.btn--ghost:hover{background:var(--color-surface-sunken)}
.btn--link{min-height:var(--target-min);padding:0 2px;text-decoration:underline;text-underline-offset:3px}
.btn--link:hover{text-decoration-thickness:2px}
.btn--danger{background:var(--color-danger);border-color:var(--color-danger);color:var(--color-surface)}
.btn--danger:hover{background:var(--color-danger-ink);border-color:var(--color-danger-ink)}
.btn--danger-quiet{color:var(--color-danger-ink)}
.btn--danger-quiet:hover{background:var(--color-danger-tint)}
.btn--on-dark{border-color:var(--color-graphite-600);color:var(--color-on-dark)}
.btn--on-dark:hover{background:var(--color-graphite-700)}
.btn--sm{min-height:var(--control-sm);padding:0 var(--space-3)}
.btn--lg{min-height:var(--control-lg);padding:0 var(--space-5);font-size:var(--text-16)}
.btn--block{width:100%}
.btn--icon{width:var(--control-md);padding:0}
.btn--icon.btn--sm{width:var(--control-sm)}
.btn--icon.btn--lg{width:var(--control-lg)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--color-surface-sunken);border-color:var(--color-border);color:var(--color-muted);cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
@media (pointer:coarse){.btn{min-height:var(--touch-min)}.btn--icon{min-width:var(--touch-min)}}

/* ---------- Form fields ---------- */
.field{display:grid;gap:6px;align-content:start}
.field__label{font-size:var(--text-14);font-weight:var(--weight-semibold);color:var(--color-ink)}
.field__label .optional{font-weight:var(--weight-regular);color:var(--color-muted)}
.field__help{font-size:var(--text-12);color:var(--color-muted)}
.field__error{font-size:var(--text-12);color:var(--color-danger-ink);font-weight:var(--weight-semibold)}
.input,.select,.textarea{width:100%;height:var(--control-md);padding:0 var(--space-3);border:1px solid var(--color-border-control);border-radius:var(--radius-4);background:var(--color-surface);color:var(--color-ink);font-size:var(--text-14);transition:border-color var(--motion-fast)}
.textarea{height:auto;min-height:96px;padding:var(--space-2) var(--space-3);line-height:var(--leading-body);resize:vertical}
.input:hover,.select:hover,.textarea:hover{border-color:var(--color-ink)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:0;border-color:var(--color-ink)}
.input::placeholder,.textarea::placeholder{color:var(--color-muted)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--color-danger);box-shadow:inset 3px 0 0 var(--color-danger)}
.input:read-only{background:var(--color-surface-sunken)}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--color-surface-sunken);color:var(--color-muted);cursor:not-allowed}
.input--lg,.select--lg{height:var(--control-lg);font-size:var(--text-16)}
.input--mono{font-family:var(--font-mono)}
.input--num{text-align:right;font-variant-numeric:tabular-nums}
.select{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231A1A17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.affix{display:flex;align-items:stretch}
.affix .input{border-radius:0 var(--radius-4) var(--radius-4) 0}
.affix__pre,.affix__post{display:flex;align-items:center;white-space:nowrap;padding:0 var(--space-3);border:1px solid var(--color-border-control);background:var(--color-surface-sunken);color:var(--color-muted)}
.affix__pre{border-right:0;border-radius:var(--radius-4) 0 0 var(--radius-4)}
.affix--post .input{border-radius:var(--radius-4) 0 0 var(--radius-4)}
.affix__post{border-left:0;border-radius:0 var(--radius-4) var(--radius-4) 0}
.check{display:flex;align-items:flex-start;gap:var(--space-2);min-height:var(--target-min);padding:2px 0;cursor:pointer;color:var(--color-text)}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--color-ink);flex:none;cursor:pointer}
.check__text small{display:block;color:var(--color-muted)}
.fieldset{border:0;margin:0;padding:0;min-width:0}
.fieldset legend{padding:0;margin-bottom:var(--space-2);font-weight:var(--weight-semibold);color:var(--color-ink)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.form-grid .span-2{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}.input,.select{font-size:var(--text-16);height:var(--control-lg)}.textarea{font-size:var(--text-16)}}

/* Switch: <button role="switch" aria-checked> */
.switch{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--target-min);border:0;background:none;padding:0;text-align:left;color:var(--color-ink);font-weight:var(--weight-semibold)}
.switch__track{position:relative;width:40px;height:24px;border-radius:var(--radius-full);background:var(--color-border-control);flex:none;transition:background-color var(--motion-fast)}
.switch__track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--color-surface);transition:transform var(--motion-fast) var(--ease-standard)}
.switch[aria-checked="true"] .switch__track{background:var(--color-ink)}
.switch[aria-checked="true"] .switch__track::after{transform:translateX(16px)}
.switch__state{font-weight:var(--weight-regular);color:var(--color-muted)}

/* Segmented control: Netto | Brutto, Liste | Raster (buttons with aria-pressed) */
.seg{display:inline-flex;padding:2px;border:1px solid var(--color-border-control);border-radius:var(--radius-4);background:var(--color-surface);flex:none}
.seg button{height:30px;min-width:56px;padding:0 var(--space-3);border:0;border-radius:var(--radius-2);background:transparent;color:var(--color-text);font-size:var(--text-14);font-weight:var(--weight-semibold);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.seg button:hover{background:var(--color-surface-sunken)}
.seg button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-surface)}
.seg--dark{background:transparent;border-color:var(--color-graphite-600)}
.seg--dark button{color:var(--color-on-dark-muted)}
.seg--dark button:hover{background:var(--color-graphite-700);color:var(--color-on-dark)}
.seg--dark button[aria-pressed="true"]{background:var(--color-on-dark);color:var(--color-ink)}
.seg--dark button:focus-visible{outline-color:var(--focus-color-on-dark)}
@media (pointer:coarse){.seg button{height:40px}}

/* Search field with scan button (header on graphite, pages, admin) */
.search{position:relative;min-width:0}
.search__box{display:flex;align-items:center;height:44px;background:var(--color-surface);border:1px solid var(--color-border-control);border-radius:var(--radius-4)}
.search__box:focus-within{border-color:var(--color-ink);box-shadow:0 0 0 1px var(--color-ink)}
.search__icon{margin-left:12px;color:var(--color-muted)}
.search__input{flex:1;min-width:0;width:0;height:100%;border:0;background:transparent;padding:0 var(--space-2) 0 10px;font-size:var(--text-16);color:var(--color-ink)}
.search__input::placeholder{color:var(--color-muted)}
.search__input:focus-visible{outline:none}
.search__input::-webkit-search-cancel-button{cursor:pointer}
.search__scan{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;margin-right:3px;border:0;border-left:1px solid var(--color-border);border-radius:0 var(--radius-2) var(--radius-2) 0;background:transparent;color:var(--color-ink);font-size:var(--text-12);font-weight:var(--weight-semibold)}
.search__scan:hover{background:var(--color-surface-sunken)}
.search__scan:focus-visible{outline-offset:-2px}
.search--on-dark .search__box{border-color:transparent;border-width:2px}
.search--on-dark .search__box:focus-within{border-color:var(--color-brand);box-shadow:none}

/* ---------- Pills (status + commercial), attribute chips, filter chips ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:0 var(--space-2);border-radius:var(--radius-2);background:var(--color-surface-sunken);color:var(--color-text);font-size:var(--text-12);font-weight:var(--weight-semibold);line-height:1.2;white-space:nowrap}
.pill--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill--success{background:var(--color-success-tint);color:var(--color-success-ink)}
.pill--warning{background:var(--color-warning-tint);color:var(--color-warning-ink)}
.pill--danger{background:var(--color-danger-tint);color:var(--color-danger-ink)}
.pill--info{background:var(--color-info-tint);color:var(--color-info-ink)}
.pill--brand{background:var(--color-brand);color:var(--color-on-brand)}
.pill--ink{background:var(--color-ink);color:var(--color-surface)}
.pill--outline{background:transparent;box-shadow:inset 0 0 0 1px var(--color-border-strong)}
.attrs{display:flex;flex-wrap:wrap;gap:4px}
.attr{display:inline-flex;align-items:center;min-height:22px;padding:0 6px;border-radius:var(--radius-2);border:1px solid var(--color-border);background:var(--color-surface-sunken);color:var(--color-ink);font-size:var(--text-12);font-weight:var(--weight-semibold);white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 4px 0 var(--space-3);border:1px solid var(--color-border-control);border-radius:var(--radius-4);background:var(--color-surface);color:var(--color-ink);font-size:var(--text-14);font-weight:var(--weight-semibold)}
.chip__remove{display:inline-grid;place-items:center;width:var(--target-min);height:var(--target-min);border:0;border-radius:var(--radius-2);background:transparent;color:var(--color-muted)}
.chip__remove:hover{background:var(--color-surface-sunken);color:var(--color-ink)}
.chip--link{padding:0 var(--space-3);text-decoration:none}
.chip--link:hover{border-color:var(--color-ink)}
.chip--link[aria-current="page"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-surface)}
.chip__count{color:var(--color-muted);font-weight:var(--weight-regular)}
.chip--link[aria-current="page"] .chip__count{color:var(--color-on-dark-muted)}
.kbd{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--color-border-strong);border-bottom-width:2px;border-radius:var(--radius-2);font-family:var(--font-mono);font-size:var(--text-12);color:var(--color-muted);background:var(--color-surface)}
.counter{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-full);background:var(--color-ink);color:var(--color-surface);font-size:var(--text-12);font-weight:var(--weight-bold);line-height:1;font-variant-numeric:tabular-nums}

/* ---------- Stock indicator: dot + text, never colour alone ---------- */
.stock{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-14);font-weight:var(--weight-semibold);line-height:1.3}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}
.stock--in,.stock--pickup{color:var(--color-success)}
.stock--pickup::before{border-radius:var(--radius-2)}
.stock--low{color:var(--color-warning)}
.stock--lead{color:var(--color-text)}
.stock--lead::before{background:transparent;box-shadow:inset 0 0 0 2px var(--color-muted)}
.stock--out{color:var(--color-muted)}
.stock--out::before{background:var(--color-border-control)}
.stock--sm{font-size:var(--text-12)}
.stock__sub{display:block;font-weight:var(--weight-regular);color:var(--color-muted);font-size:var(--text-12)}

/* ---------- PriceBlock (variants: compact | row | full | line | inline) ---------- */
.price{display:grid;gap:2px;font-family:var(--font-num);font-variant-numeric:tabular-nums;line-height:1.2;align-content:start}
.price__line{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price__main{font-size:var(--text-18);font-weight:var(--weight-bold);color:var(--color-ink);white-space:nowrap}
.price__tax,.price__alt,.price__unit,.price__each{font-size:var(--text-12);color:var(--color-muted);white-space:nowrap}
.price__was{font-size:var(--text-12);color:var(--color-muted);text-decoration:line-through}
.price__label{justify-self:start;display:inline-flex;align-items:center;min-height:20px;padding:0 6px;border-radius:var(--radius-2);background:var(--color-ink);color:var(--color-surface);font-size:var(--text-12);font-weight:var(--weight-semibold)}
.price--full .price__main{font-size:var(--text-32);letter-spacing:-0.01em}
.price--full .price__tax,.price--full .price__alt,.price--full .price__unit{font-size:var(--text-14)}
.price--full{gap:4px}
.price--line .price__main,.price--inline .price__main{font-size:var(--text-14)}
.price--line{justify-items:end;text-align:right}
.price--inline{display:inline-flex;gap:4px;align-items:baseline}
.price--row{justify-items:end;text-align:right}
.price--row .price__line{justify-content:flex-end}
.price--consumer .price__main{font-size:var(--text-20)}
.totals{display:grid;gap:var(--space-2);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.totals>div{display:flex;justify-content:space-between;gap:var(--space-3)}
.totals dt{color:var(--color-text)}
.totals dd{margin:0;color:var(--color-ink);font-weight:var(--weight-semibold);white-space:nowrap}
.totals__grand{padding-top:var(--space-3);margin-top:4px;border-top:2px solid var(--color-ink);font-size:var(--text-18)}
.totals__grand dt,.totals__grand dd{color:var(--color-ink);font-weight:var(--weight-bold)}
.totals__sub dt,.totals__sub dd{font-size:var(--text-12);color:var(--color-muted);font-weight:var(--weight-regular)}
.totals__note{font-size:var(--text-12);color:var(--color-muted);text-align:right}

/* ---------- Quantity stepper (+ add = one control) ---------- */
.buy{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--space-2)}
.buy .btn{min-height:var(--control-md)}
.buy__add{flex:1 1 auto;min-width:0}
.qty{display:inline-flex;align-items:stretch;height:var(--control-md);border:1px solid var(--color-border-control);border-radius:var(--radius-4);background:var(--color-surface);flex:none}
.qty:focus-within{border-color:var(--color-ink)}
.qty__btn{width:36px;border:0;background:transparent;color:var(--color-ink);display:grid;place-items:center;padding:0}
.qty__btn svg.i{width:18px;height:18px}
.qty__btn:hover{background:var(--color-surface-sunken)}
.qty__btn:disabled{color:var(--color-border-control);cursor:not-allowed;background:transparent}
.qty__btn:first-child{border-radius:var(--radius-4) 0 0 var(--radius-4)}
.qty__btn:last-child{border-radius:0 var(--radius-4) var(--radius-4) 0}
.qty__btn:focus-visible{outline-offset:-2px}
.qty__input{width:48px;min-width:36px;border:0;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);border-radius:0;text-align:center;font-weight:var(--weight-semibold);color:var(--color-ink);font-variant-numeric:tabular-nums;background:transparent;-moz-appearance:textfield;appearance:textfield}
.qty__input::-webkit-outer-spin-button,.qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty__input:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:-2px}
.qty--lg{height:var(--control-lg)}
.qty--lg .qty__btn{width:44px}
.qty--lg .qty__input{width:64px;font-size:var(--text-16)}
.qty__hint{margin-top:6px;font-size:var(--text-12);color:var(--color-muted)}
.qty__hint.is-adjusted{color:var(--color-warning-ink);font-weight:var(--weight-semibold)}
@media (pointer:coarse){.qty{height:var(--touch-min)}.qty__btn{width:44px}.buy .btn{min-height:var(--touch-min)}}

/* ---------- Cards, definition lists ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);min-height:52px}
.card__head :is(h2,h3){font-size:var(--text-16);font-weight:var(--weight-bold)}
.card__body{padding:var(--space-4)}
.card__foot{padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border);background:var(--color-surface-hover);border-radius:0 0 var(--radius-4) var(--radius-4)}
.card--flush>.card__body{padding:0}
.dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px var(--space-4)}
.dl dt{color:var(--color-muted)}
.dl dd{margin:0;color:var(--color-ink);min-width:0}

/* ---------- ProductCard (grid). --consumer: large image, brand + Art.-Nr., gross price. --b2b: IDs, attributes, net + gross ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.pgrid>li{min-width:0;display:flex}
.pcard{position:relative;display:flex;flex-direction:column;width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4);transition:border-color var(--motion-fast)}
.pcard:hover{border-color:var(--color-border-control)}
.pcard__media{aspect-ratio:1/1;display:grid;place-items:center;padding:var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-4) var(--radius-4) 0 0;overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:contain}
svg.pcard__ph{width:36%;height:36%;color:var(--color-border-strong);stroke-width:1.25}
.pcard__flag{position:absolute;top:var(--space-2);left:var(--space-2);z-index:var(--z-raised)}
.pcard__body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);flex:1}
.pcard__meta{font-size:var(--text-12);color:var(--color-muted)}
.pcard__meta b{color:var(--color-ink);font-weight:var(--weight-semibold)}
.pcard__title{font-size:var(--text-14);font-weight:var(--weight-semibold);line-height:var(--leading-snug);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2em * var(--leading-snug))}
.pcard__link{color:var(--color-ink);text-decoration:none}
.pcard__link::after{content:"";position:absolute;inset:0;border-radius:var(--radius-4)}
.pcard__link:hover{text-decoration:underline}
.pcard__link:focus-visible{outline:none}
.pcard__link:focus-visible::after{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
.pcard__ids{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:var(--text-12);color:var(--color-muted)}
.pcard__ids .num{color:var(--color-ink)}
.pcard__foot{margin-top:auto;display:grid;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border)}
.pcard .buy,.pcard .btn{position:relative;z-index:var(--z-raised)}
.pcard .buy{flex-wrap:nowrap}
.pcard .buy .qty{flex:1 1 auto}
.pcard .buy .qty__input{flex:1 1 0;width:0;min-width:24px}
.pcard .buy .qty__btn{width:32px}
.pcard .buy .btn--icon{width:44px;flex:none}
.pcard--consumer .pcard__media{padding:var(--space-5)}
.pcard--consumer .pcard__title{font-size:var(--text-16)}
.pcard--consumer .pcard__foot{border-top:0;padding-top:0}
@media (max-width:767px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
  .pcard__media,.pcard--consumer .pcard__media{padding:var(--space-2)}
  .pcard__body{padding:var(--space-2)}
  .pcard--consumer .pcard__title{font-size:var(--text-14)}
  .pcard .attrs,.pcard__ids .pcard__ean{display:none}
}
@media (max-width:359px){.pgrid{grid-template-columns:1fr}}

/* ---------- ProductRow (list view, B2B default): header row is visual only, rows are <li> ---------- */
.plist{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.plist__head,.prow{display:grid;grid-template-columns:64px minmax(0,2.6fr) minmax(0,1fr) 136px 120px 172px;gap:var(--space-4);align-items:center;padding:0 var(--space-4)}
.plist__head{height:36px;background:var(--color-surface-sunken);border-bottom:1px solid var(--color-border-strong);font-size:var(--text-12);font-weight:var(--weight-semibold);color:var(--color-muted);position:sticky;top:var(--plist-sticky-top,calc(var(--header-row-1) + var(--header-row-2)));z-index:var(--z-sticky);border-radius:var(--radius-4) var(--radius-4) 0 0}
.plist__head .r{text-align:right}
.plist__rows{margin:0;padding:0;list-style:none}
.prow{position:relative;min-height:80px;padding-top:var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--color-surface-hover)}
.prow__img{width:64px;height:64px;border:1px solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface);padding:4px;display:grid;place-items:center;overflow:hidden}
.prow__img img{width:100%;height:100%;object-fit:contain}
.prow__img svg.pcard__ph{width:60%;height:60%}
.prow__name{font-weight:var(--weight-semibold);color:var(--color-ink);text-decoration:none;line-height:var(--leading-snug);display:block}
.prow__name::after{content:"";position:absolute;inset:0}
.prow__name:hover{text-decoration:underline}
.prow__name:focus-visible{outline:none}
.prow__name:focus-visible::after{outline:var(--focus-width) solid var(--focus-color);outline-offset:-2px}
.prow__ids{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:4px;font-size:var(--text-12);color:var(--color-muted)}
.prow__ids .num{color:var(--color-ink)}
.prow .buy,.prow .btn{position:relative;z-index:var(--z-raised)}
.prow .buy{justify-content:flex-end;flex-wrap:nowrap}
.prow .buy .btn--icon{width:44px}
.site-header.is-condensed~* .plist__head{--plist-sticky-top:var(--header-row-1)}
@media (max-width:1180px){.plist__head,.prow{grid-template-columns:56px minmax(0,2fr) 140px 120px 172px}.prow__attrs,.plist__head .h-attrs{display:none}.prow__img{width:56px;height:56px}}
@media (max-width:767px){
  .plist__head{display:none}
  .prow{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"img main main" "img stock stock" "price price buy";gap:6px var(--space-3);padding:var(--space-3);align-items:start}
  .prow__img{grid-area:img;width:72px;height:72px}
  .prow__main{grid-area:main}
  .prow__stock{grid-area:stock}
  .prow__price{grid-area:price;align-self:center}
  .prow__price.price--row{justify-items:start;text-align:left}
  .prow__price .price__line{justify-content:flex-start}
  .prow .buy{grid-area:buy;align-self:center}
}

/* ---------- Navigation: tabs, breadcrumbs, pagination ---------- */
.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-border-strong);overflow-x:auto;scrollbar-width:none;margin:0;padding:0}
.tabs::-webkit-scrollbar{display:none}
.tabs__tab{display:inline-flex;align-items:center;gap:var(--space-2);height:44px;padding:0 var(--space-3);border:0;background:none;border-bottom:3px solid transparent;margin-bottom:-1px;color:var(--color-muted);font-weight:var(--weight-semibold);text-decoration:none;white-space:nowrap}
.tabs__tab:hover{color:var(--color-ink)}
.tabs__tab[aria-selected="true"],.tabs__tab[aria-current="page"]{color:var(--color-ink);border-bottom-color:var(--color-ink)}
.tabs__tab:focus-visible{outline-offset:-2px}
.tabs__n{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:var(--radius-full);background:var(--color-surface-sunken);color:var(--color-text);font-size:var(--text-12);font-variant-numeric:tabular-nums}
.tabs__tab[aria-selected="true"] .tabs__n,.tabs__tab[aria-current="page"] .tabs__n{background:var(--color-ink);color:var(--color-surface)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;padding:0;list-style:none;font-size:var(--text-12);color:var(--color-muted)}
.crumbs li{display:inline-flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"›";color:var(--color-border-control)}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--target-min);color:var(--color-muted);text-decoration:none}
.crumbs a:hover{color:var(--color-ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--color-ink)}
.pager{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:36px;height:36px;padding:0 8px;border-radius:var(--radius-4);text-decoration:none;color:var(--color-ink);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.pager a:hover{background:var(--color-surface-sunken)}
.pager [aria-current="page"]{background:var(--color-ink);color:var(--color-surface)}
.pager .pager__gap{color:var(--color-muted);min-width:20px}
.pager [aria-disabled="true"]{color:var(--color-border-control);pointer-events:none}
.list-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:var(--space-4);color:var(--color-muted);flex-wrap:wrap}

/* ---------- Listing: filter panel, toolbar, active filters ---------- */
.listing{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-5);align-items:start}
.listing>*{min-width:0}
.facets{position:sticky;top:calc(var(--header-row-1) + var(--header-row-2) + var(--space-4));max-height:calc(100vh - 140px);overflow:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.facets__head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}
.facets__head h2{font-size:var(--text-16)}
.facet{border-bottom:1px solid var(--color-border)}
.facet:last-child{border-bottom:0}
.facet>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);cursor:pointer;font-weight:var(--weight-semibold);color:var(--color-ink)}
.facet>summary::-webkit-details-marker{display:none}
.facet>summary svg.i{transition:transform var(--motion-fast);color:var(--color-muted)}
.facet[open]>summary svg.i{transform:rotate(180deg)}
.facet__sel{margin-left:auto;font-weight:var(--weight-regular);color:var(--color-muted);font-size:var(--text-12)}
.facet__body{padding:0 var(--space-4) var(--space-3);display:grid;gap:2px}
.facet__opt{display:flex;align-items:center;gap:10px;min-height:32px;cursor:pointer;color:var(--color-text)}
.facet__opt input{width:18px;height:18px;margin:0;accent-color:var(--color-ink);flex:none}
.facet__opt .facet__n{margin-left:auto;color:var(--color-muted);font-size:var(--text-12);font-variant-numeric:tabular-nums}
.facet__opt.is-disabled{color:var(--color-muted);cursor:not-allowed}
.facet__opt input:checked+span{color:var(--color-ink);font-weight:var(--weight-semibold)}
.facet__more{justify-self:start}
.pricerange{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.toolbar__count{font-weight:var(--weight-semibold);color:var(--color-ink)}
.toolbar__field{display:flex;align-items:center;gap:var(--space-2)}
.toolbar__field label{font-size:var(--text-12);color:var(--color-muted)}
.toolbar__field .select{height:36px;width:auto}
.toolbar__filter-btn{display:none}
.active-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}
.active-filters:empty{display:none}
@media (max-width:1023px){.listing{grid-template-columns:minmax(0,1fr)}.listing>.facets{display:none}.toolbar__filter-btn{display:inline-flex}}

/* ---------- Skeletons (layout-true, never fake data) ---------- */
.skel{display:block;height:12px;border-radius:var(--radius-2);background:linear-gradient(90deg,var(--color-surface-sunken) 25%,var(--color-surface-hover) 37%,var(--color-surface-sunken) 63%);background-size:400% 100%;animation:egh-skel var(--motion-skeleton) ease infinite}
.skel--img{height:auto;aspect-ratio:1/1;width:100%}
.skel--t{height:14px}.skel--h{height:20px}.skel--btn{height:var(--control-md);border-radius:var(--radius-4)}.skel--pill{height:22px;width:44px;display:inline-block}
.skel--w30{width:30%}.skel--w40{width:40%}.skel--w50{width:50%}.skel--w60{width:60%}.skel--w70{width:70%}.skel--w80{width:80%}.skel--w90{width:90%}
.skel-stack{display:grid;gap:var(--space-2)}
@keyframes egh-skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- Feedback: callout, empty state, snackbar, dialog, drawer ---------- */
.callout{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-4);border:1px solid var(--color-border);background:var(--color-surface)}
.callout>svg.i{margin-top:1px;color:var(--color-muted)}
.callout strong,.callout b{color:var(--color-ink)}
.callout__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.callout--info{background:var(--color-info-tint);border-color:color-mix(in srgb,var(--color-info) 28%,var(--color-surface))}.callout--info>svg.i{color:var(--color-info)}
.callout--success{background:var(--color-success-tint);border-color:color-mix(in srgb,var(--color-success) 28%,var(--color-surface))}.callout--success>svg.i{color:var(--color-success)}
.callout--warning{background:var(--color-warning-tint);border-color:color-mix(in srgb,var(--color-warning) 28%,var(--color-surface))}.callout--warning>svg.i{color:var(--color-warning)}
.callout--danger{background:var(--color-danger-tint);border-color:color-mix(in srgb,var(--color-danger) 28%,var(--color-surface))}.callout--danger>svg.i{color:var(--color-danger)}
.callout--next{box-shadow:inset 4px 0 0 var(--color-brand)}
.empty{display:grid;gap:var(--space-2);justify-items:start;padding:var(--space-6) var(--space-5);border:1px dashed var(--color-border-strong);border-radius:var(--radius-4);background:var(--color-surface)}
.empty>svg.i{width:32px;height:32px;color:var(--color-muted)}
.empty h2,.empty h3{font-size:var(--text-16)}
.empty p{max-width:60ch}
.empty .btn-row{margin-top:var(--space-2)}
.snack-region{position:fixed;left:50%;bottom:var(--space-5);transform:translateX(-50%);z-index:var(--z-toast);display:grid;gap:var(--space-2);width:min(480px,calc(100% - 32px));pointer-events:none}
.snack{display:flex;align-items:center;gap:var(--space-3);min-height:48px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-8);background:var(--color-graphite-900);color:var(--color-on-dark);box-shadow:var(--shadow-overlay);pointer-events:auto;animation:egh-rise var(--motion-panel) var(--ease-standard)}
.snack>svg.i{color:var(--color-brand)}
.snack__msg{flex:1;min-width:0}
.snack__action{min-height:36px;border:0;background:none;color:var(--color-brand);font-weight:var(--weight-bold);padding:0 10px;border-radius:var(--radius-4);text-decoration:underline;text-underline-offset:3px}
.snack__action:hover{background:var(--color-graphite-700)}
.snack__close{display:inline-grid;place-items:center;width:36px;height:36px;border:0;border-radius:var(--radius-4);background:none;color:var(--color-on-dark-muted)}
.snack__close:hover{background:var(--color-graphite-700);color:var(--color-on-dark)}
.snack :focus-visible{outline-color:var(--focus-color-on-dark)}
@keyframes egh-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dialog{border:0;padding:0;border-radius:var(--radius-8);box-shadow:var(--shadow-overlay);width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);color:var(--color-text);background:var(--color-surface)}
.dialog::backdrop{background:var(--color-scrim)}
.dialog[open]{animation:egh-rise var(--motion-panel) var(--ease-standard)}
.dialog__head{padding:var(--space-5) var(--space-5) var(--space-2)}
.dialog__head h2{font-size:var(--text-20)}
.dialog__head p{margin-top:6px}
.dialog__body{padding:var(--space-3) var(--space-5) var(--space-4);display:grid;gap:var(--space-4)}
.dialog__foot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);background:var(--color-surface-hover);border-radius:0 0 var(--radius-8) var(--radius-8)}
.consequence{display:grid;gap:6px;margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-4);background:var(--color-surface-sunken);list-style:none}
.consequence li{display:flex;gap:var(--space-2)}
.consequence li::before{content:"→";color:var(--color-muted)}
@media (max-width:480px){.dialog__foot .btn{flex:1 1 auto}}
.drawer{position:fixed;inset:0 0 0 auto;margin:0;border:0;padding:0;width:min(420px,100%);max-width:100%;height:100%;max-height:none;background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-overlay);display:flex;flex-direction:column;z-index:var(--z-drawer)}
.drawer:not([open]){display:none}
.drawer[open]{animation:egh-slide-r var(--motion-panel) var(--ease-standard)}
.drawer::backdrop{background:var(--color-scrim)}
.drawer--left{inset:0 auto 0 0;width:min(360px,88%)}
.drawer--left[open]{animation-name:egh-slide-l}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0 var(--space-2) 0 var(--space-4);min-height:56px;border-bottom:1px solid var(--color-border);flex:none}
.drawer__head h2{font-size:var(--text-16)}
.drawer__body{flex:1;overflow:auto;padding:var(--space-4)}
.drawer__foot{padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2);flex:none}
@keyframes egh-slide-r{from{transform:translateX(100%)}to{transform:none}}
@keyframes egh-slide-l{from{transform:translateX(-100%)}to{transform:none}}
@keyframes egh-slide-u{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:640px){.drawer--sheet{inset:auto 0 0 0;width:100%;height:auto;max-height:88vh;border-radius:var(--radius-8) var(--radius-8) 0 0}.drawer--sheet[open]{animation-name:egh-slide-u}.drawer--sheet .drawer__foot{padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom))}}

/* ---------- Tables (admin + account) ---------- */
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-4);background:var(--color-surface)}
.table{font-variant-numeric:tabular-nums}
.table th{position:sticky;top:0;z-index:var(--z-raised);background:var(--color-surface-sunken);text-align:left;font-size:var(--text-12);font-weight:var(--weight-semibold);color:var(--color-muted);padding:0 var(--space-3);height:36px;border-bottom:1px solid var(--color-border-strong);white-space:nowrap}
.table td{padding:var(--space-2) var(--space-3);height:48px;border-bottom:1px solid var(--color-border);vertical-align:middle;color:var(--color-text)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--color-surface-hover)}
.table tr[aria-selected="true"] td{background:var(--color-brand-tint)}
.table .r{text-align:right}
.table .c{text-align:center}
.table .w-check{width:44px}
.table--compact td{height:40px;padding-top:4px;padding-bottom:4px}
.table .strong{color:var(--color-ink);font-weight:var(--weight-semibold)}
.th-sort{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0;border:0;background:none;color:inherit;font:inherit}
.th-sort:hover{color:var(--color-ink)}
.t-sub{display:block;font-size:var(--text-12);color:var(--color-muted);margin-top:2px}

/* ---------- Stepper (orders, checkout, import wizard) ---------- */
.steps{display:flex;align-items:flex-start;counter-reset:step;margin:0;padding:0;list-style:none}
.steps>li{flex:1 1 0;position:relative;display:grid;justify-items:center;gap:6px;text-align:center;font-size:var(--text-12);color:var(--color-muted);font-weight:var(--weight-semibold);min-width:0}
.steps>li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--color-border-control);background:var(--color-surface);color:var(--color-muted);font-size:var(--text-12);font-weight:var(--weight-bold);position:relative;z-index:1}
.steps>li::after{content:"";position:absolute;top:13px;left:calc(-50% + 18px);right:calc(50% + 18px);height:2px;background:var(--color-border-strong)}
.steps>li:first-child::after{display:none}
.steps>li.is-done{color:var(--color-text)}
.steps>li.is-done::before{content:"✓";background:var(--color-ink);border-color:var(--color-ink);color:var(--color-surface)}
.steps>li.is-done::after,.steps>li.is-current::after{background:var(--color-ink)}
.steps>li.is-current{color:var(--color-ink)}
.steps>li.is-current::before{background:var(--color-brand);border-color:var(--color-ink);color:var(--color-on-brand)}
.steps__sub{display:block;font-weight:var(--weight-regular);color:var(--color-muted)}
@media (max-width:640px){.steps>li:not(.is-current) .steps__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.steps>li:not(.is-current) .steps__sub{display:none}}
.wizard-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding-top:var(--space-4);border-top:1px solid var(--color-border)}
.calc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-4);background:var(--color-surface-hover);font-variant-numeric:tabular-nums}
.calc__cell{display:grid;gap:2px}
.calc__cell small{color:var(--color-muted)}
.calc__cell b{font-size:var(--text-18);color:var(--color-ink)}
.calc__op{font-size:var(--text-18);color:var(--color-muted)}
.progress{height:6px;border-radius:3px;background:var(--color-surface-sunken);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--color-ink);border-radius:3px}

/* ---------- Home: quick-order box (A graft) ---------- */
.qo-box{min-width:0;padding:var(--space-5);border-radius:var(--radius-4);background:var(--color-surface);border:1px solid var(--color-border)}
.qo-box h2{font-size:var(--text-20)}
.qo-box__lead{margin-top:4px;color:var(--color-muted)}
.qo-box__lines{display:grid;gap:var(--space-2);margin:var(--space-4) 0}
.qo-box__line{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--space-2)}
.qo-box__line .input{height:var(--touch-min);min-width:0}
.qo-box__resolved{display:flex;align-items:center;gap:6px;font-size:var(--text-12);color:var(--color-success-ink)}
.qo-box__resolved.is-error{color:var(--color-danger-ink)}
.qo-box__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2) var(--space-3);margin-top:var(--space-3)}
@media (max-width:767px){.qo-box{padding:var(--space-4)}}

/* ---------- Admin shell: light top bar (A graft) + light sidebar with 7 areas ---------- */
.adm{display:grid;grid-template-columns:var(--admin-sidebar-width) minmax(0,1fr);grid-template-rows:var(--admin-topbar-height) 1fr;min-height:100vh;background:var(--color-bg)}
.adm-top{grid-column:1/-1;position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:var(--space-4);height:var(--admin-topbar-height);padding:0 var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.adm-top .logo{font-size:var(--text-14);min-width:calc(var(--admin-sidebar-width) - 32px)}
.adm-top .logo__mark{width:26px;height:26px}
.adm-top__area{margin-left:6px;padding-left:10px;border-left:1px solid var(--color-border-strong);color:var(--color-muted);font-weight:var(--weight-semibold)}
.adm-top .search{flex:1 1 auto;max-width:640px}
.adm-top .search .kbd{margin-right:var(--space-2)}
.adm-top .search__box{height:40px;background:var(--color-surface-sunken);border-color:transparent}
.adm-top .search__box:focus-within{background:var(--color-surface);border-color:var(--color-ink)}
.adm-top__actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-1)}
.adm-icon{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--radius-4);background:none;color:var(--color-ink)}
.adm-icon:hover{background:var(--color-surface-sunken)}
.adm-icon__dot{position:absolute;top:3px;right:3px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--radius-full);background:var(--color-ink);color:var(--color-surface);font-size:var(--text-12);font-weight:var(--weight-bold);display:grid;place-items:center;line-height:1}
.adm-user{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 4px;border:0;border-radius:var(--radius-4);background:none;color:var(--color-ink);text-align:left;line-height:1.2}
.adm-user:hover{background:var(--color-surface-sunken)}
.adm-user small{display:block;color:var(--color-muted)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-graphite-800);color:var(--color-on-dark);font-size:var(--text-12);font-weight:var(--weight-bold);flex:none}
.adm-side{position:sticky;top:var(--admin-topbar-height);height:calc(100vh - var(--admin-topbar-height));overflow:auto;background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-3) var(--space-2);display:flex;flex-direction:column;gap:var(--space-2)}
.adm-nav{display:grid;gap:2px}
.adm-nav a{display:flex;align-items:center;gap:var(--space-3);min-height:40px;padding:0 var(--space-3);border-radius:var(--radius-4);text-decoration:none;color:var(--color-text);font-weight:var(--weight-semibold)}
.adm-nav a svg.i{color:var(--color-muted)}
.adm-nav a:hover{background:var(--color-surface-sunken);color:var(--color-ink)}
.adm-nav a[aria-current="page"]{background:var(--color-surface-sunken);color:var(--color-ink);box-shadow:inset 3px 0 0 var(--color-brand)}
.adm-nav a[aria-current="page"] svg.i{color:var(--color-ink)}
.adm-nav .counter{margin-left:auto}
.adm-sub{display:grid;margin:2px 0 6px}
.adm-sub a{min-height:34px;padding-left:44px;font-weight:var(--weight-regular);color:var(--color-muted)}
.adm-sub a[aria-current="page"]{box-shadow:none;background:none;font-weight:var(--weight-semibold)}
.adm-side__foot{margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--color-border);display:grid;gap:2px}
.adm-adv{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-3);align-items:start;padding:10px var(--space-3);border:0;border-radius:var(--radius-4);background:none;text-decoration:none;color:var(--color-text);text-align:left;width:100%}
.adm-adv:hover{background:var(--color-surface-sunken)}
.adm-adv svg.i{color:var(--color-muted);margin-top:1px}
.adm-adv b{display:block;color:var(--color-ink);font-weight:var(--weight-semibold)}
.adm-adv small{display:block;color:var(--color-muted)}
.adm-main{padding:var(--space-5) var(--space-6) var(--space-8);min-width:0}
.adm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}
.adm-head p{margin-top:4px}
.adm-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-5);align-items:start}
.adm-cols>*{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);min-width:0}
.adm-main{container-type:inline-size}
@container (max-width:880px){.adm-cols{grid-template-columns:minmax(0,1fr)}}
.adm-bottom{display:none}
@media (max-width:1023px){
  .adm{grid-template-columns:minmax(0,1fr)}
  .adm-side{display:none}
  .adm-top .logo{min-width:0}
  .adm-top__area,.adm-top .kbd,.adm-user__txt{display:none}
  .adm-main{padding:var(--space-4) var(--space-4) calc(var(--admin-bottomnav-height) + var(--space-6))}
  .adm-cols{grid-template-columns:minmax(0,1fr)}
  .adm-bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--z-header);height:calc(var(--admin-bottomnav-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--color-surface);border-top:1px solid var(--color-border)}
  .adm-bottom a,.adm-bottom button{display:grid;justify-items:center;align-content:center;gap:2px;border:0;background:none;color:var(--color-muted);text-decoration:none;font-size:var(--text-12);font-weight:var(--weight-semibold);position:relative}
  .adm-bottom [aria-current="page"]{color:var(--color-ink);box-shadow:inset 0 3px 0 var(--color-brand)}
}
@media (max-width:640px){.adm-top{gap:var(--space-2);padding:0 var(--space-2)}.adm-top .logo span,.adm-top__help{display:none}.adm-new__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}

/* Attention list: one action button per row (+ optional snooze icon button) */
.attn>li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}
.attn>li:last-child{border-bottom:0}
.attn__n{font-size:var(--text-24);font-weight:var(--weight-bold);color:var(--color-ink);font-variant-numeric:tabular-nums;text-align:right;line-height:1}
.attn__label{display:block;color:var(--color-ink);font-weight:var(--weight-semibold)}
.attn__meta{display:block;font-size:var(--text-12);color:var(--color-muted);margin-top:2px}
.attn>li.is-urgent .attn__n{color:var(--color-danger)}
.attn__actions{display:flex;gap:var(--space-1);align-items:center}
@media (max-width:640px){.attn>li{grid-template-columns:36px minmax(0,1fr)}.attn__actions{grid-column:2}}

/* Stat tiles (max. 3 per view, server-computed figures) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0}
.stat{padding:var(--space-4);border-right:1px solid var(--color-border)}
.stat:last-child{border-right:0}
.stat dt{font-size:var(--text-12);color:var(--color-muted);font-weight:var(--weight-semibold)}
.stat dd{margin:4px 0 0;font-size:var(--text-24);font-weight:var(--weight-bold);color:var(--color-ink);font-variant-numeric:tabular-nums;line-height:1.1}
.stat__note{display:block;font-size:var(--text-12);font-weight:var(--weight-regular);color:var(--color-muted);margin-top:4px}
@media (max-width:640px){.stat{border-right:0;border-bottom:1px solid var(--color-border)}.stat:last-child{border-bottom:0}}

/* Setup checklist */
.checklist>li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:10px 0;border-bottom:1px solid var(--color-border)}
.checklist>li:last-child{border-bottom:0}
.checklist__mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--color-border-control);display:grid;place-items:center}
.checklist__mark svg.i{width:14px;height:14px;stroke-width:3}
.checklist li.is-done .checklist__mark{background:var(--color-success);border-color:var(--color-success);color:var(--color-surface)}
.checklist li.is-done .checklist__title{color:var(--color-muted);font-weight:var(--weight-regular)}
.checklist li.is-next .checklist__mark{border-color:var(--color-ink);box-shadow:inset 0 0 0 4px var(--color-brand)}
.checklist__title{color:var(--color-ink);font-weight:var(--weight-semibold)}
.checklist__desc{display:block;font-size:var(--text-12);color:var(--color-muted);font-weight:var(--weight-regular)}

/* "Erweitert · Funktionen": feature switches with "Wer braucht das?" (A graft) */
.features>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-4);align-items:start;padding:var(--space-4) 0;border-top:1px solid var(--color-border)}
.features>li:first-child{border-top:0;padding-top:0}
.features b{display:block;color:var(--color-ink)}
.features p{color:var(--color-text)}
.features small{display:block;margin-top:4px;color:var(--color-muted)}

/* Bulk action bar */
.bulkbar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-radius:var(--radius-4);background:var(--color-graphite-900);color:var(--color-on-dark);box-shadow:var(--shadow-overlay);flex-wrap:wrap}
.bulkbar__n{font-weight:var(--weight-bold);margin-right:var(--space-2)}
.bulkbar :focus-visible{outline-color:var(--focus-color-on-dark)}

@media (prefers-reduced-motion:reduce){.skel,.snack,.dialog[open],.drawer[open]{animation:none}.pcard,.btn,.switch__track,.switch__track::after{transition:none}}
@media print{.site-header,.site-footer,.snack-region,.adm-side,.adm-top,.adm-bottom{display:none}}