/* ==========================================================================
   Elektrogrosshandel.wien – storefront page layer (requires tokens.css,
   components.css, partials.css). Shared by every redesigned storefront page:
   consent bar, page sections, content/legal typography (prose + table of
   contents), fact lists, service strip, info cards, contact blocks, the
   compare bar and the "Artikel nicht dabei?" sourcing box.
   Tokens only: no raw colours, no px font sizes, nothing below 12px.
   Page-specific files: home.css, listing.css, product.css.
   ========================================================================== */

/* ---------- Page scaffolding ---------- */
.egh main{display:block}
.pg{padding-top:var(--space-4);padding-bottom:var(--space-7)}
.pg-head{padding:var(--space-4) 0 var(--space-5)}
.pg-head h1{margin-top:var(--space-3);font-size:var(--text-32);letter-spacing:-0.02em;line-height:var(--leading-tight)}
.pg-head__lead{margin-top:var(--space-2);max-width:64ch;font-size:var(--text-16);color:var(--color-text)}
.pg-head__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-3);color:var(--color-muted)}
.sec{padding:var(--space-7) 0}
.sec--sunken{background:var(--color-surface-sunken);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.sec--surface{background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.sec + .sec--plain{padding-top:0}
.sec-head__link{display:inline-flex;align-items:center;gap:6px;min-height:var(--target-min);font-weight:var(--weight-semibold);color:var(--color-ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sec-head__link:hover{text-decoration-thickness:2px}
.sec-lead{margin-top:4px;color:var(--color-muted)}
@media (max-width:767px){.pg-head h1{font-size:var(--text-24)}.sec{padding:var(--space-6) 0}}

/* ---------- Content & legal pages: table of contents + prose ---------- */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-7);align-items:start}
.doc--single{grid-template-columns:minmax(0,1fr)}
.doc__toc{position:sticky;top:calc(var(--header-row-1) + var(--space-5));display:grid;gap:2px;padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.doc__toc-title{font-size:var(--text-12);font-weight:var(--weight-semibold);color:var(--color-muted);padding:var(--space-1) var(--space-2) var(--space-2)}
.doc__toc a{display:flex;align-items:center;min-height:32px;padding:4px var(--space-2);border-radius:var(--radius-2);color:var(--color-text);text-decoration:none;line-height:var(--leading-snug)}
.doc__toc a:hover{background:var(--color-surface-sunken);color:var(--color-ink)}
.doc__toc a[aria-current="true"]{background:var(--color-surface-sunken);color:var(--color-ink);font-weight:var(--weight-semibold);box-shadow:inset 3px 0 0 var(--color-brand)}
@media (max-width:1023px){.doc{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}.doc__toc{position:static;display:none}}

.prose{max-width:76ch;padding:var(--space-6) var(--space-7);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4);font-size:var(--text-16);line-height:1.65;color:var(--color-text)}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:var(--text-20);margin:var(--space-7) 0 var(--space-3);scroll-margin-top:calc(var(--header-row-1) + var(--space-5));line-height:var(--leading-tight)}
.prose h3{font-size:var(--text-18);margin:var(--space-5) 0 var(--space-2);scroll-margin-top:calc(var(--header-row-1) + var(--space-5))}
.prose h4{font-size:var(--text-16);margin:var(--space-4) 0 var(--space-2)}
.prose p,.prose ul,.prose ol,.prose table,.prose blockquote,.prose dl{margin:0 0 var(--space-4)}
.prose ul,.prose ol{padding-left:var(--space-5)}
.prose li{margin-bottom:var(--space-1)}
.prose li::marker{color:var(--color-muted)}
.prose a{color:var(--color-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose a:hover{text-decoration-thickness:2px}
.prose strong,.prose b{color:var(--color-ink);font-weight:var(--weight-semibold)}
.prose .prose__intro{font-size:var(--text-18);color:var(--color-text);margin-bottom:var(--space-5)}
.prose .prose__note,.prose .prose__meta{font-size:var(--text-14);color:var(--color-muted)}
.prose table{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-4);font-size:var(--text-14);font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.prose th{background:var(--color-surface-sunken);color:var(--color-ink);font-weight:var(--weight-semibold)}
.prose tr:last-child td{border-bottom:0}
.prose .table-scroll{overflow-x:auto;margin:0 0 var(--space-4)}
.prose .table-scroll table{margin:0}
.prose blockquote,.prose .prose__box{padding:var(--space-4) var(--space-5);background:var(--color-surface-sunken);border-left:3px solid var(--color-border-strong);border-radius:0 var(--radius-4) var(--radius-4) 0}
.prose .prose__box--form{background:var(--color-surface);border:1px dashed var(--color-border-strong);border-radius:var(--radius-4)}
.prose hr{border:0;border-top:1px solid var(--color-border);margin:var(--space-6) 0}
.prose details{border:1px solid var(--color-border);border-radius:var(--radius-4);margin:0 0 var(--space-2);background:var(--color-surface)}
.prose details > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:48px;padding:var(--space-2) var(--space-4);cursor:pointer;list-style:none;font-weight:var(--weight-semibold);color:var(--color-ink)}
.prose details > summary::-webkit-details-marker{display:none}
.prose details > summary::after{content:"+";font-size:var(--text-20);color:var(--color-muted);line-height:1}
.prose details[open] > summary::after{content:"–"}
.prose details > *:not(summary){margin:0 var(--space-4) var(--space-3)}
.prose details > p:last-child{margin-bottom:var(--space-4)}
.prose dl.prose__facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-1) var(--space-5)}
.prose dl.prose__facts dt{color:var(--color-muted)}
.prose dl.prose__facts dd{margin:0;color:var(--color-ink)}
.prose .prose__toc ol{margin:0;padding-left:var(--space-5)}
.prose .prose__toc{margin-bottom:var(--space-5)}
.doc:not(.doc--single) .prose .prose__toc{display:none}
.prose .prose__line{height:32px;border-bottom:1px solid var(--color-border-control);margin:0 0 var(--space-3)}
.prose .prose__inline-btn{display:inline;min-height:0;padding:0;border:0;background:none;color:var(--color-ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.prose .prose__inline-btn:hover{text-decoration-thickness:2px}
@media (max-width:1023px){.doc:not(.doc--single) .prose .prose__toc{display:block}}
@media print{.site-header,.site-footer,.crumbs,.doc__toc,.no-print,.skip-to-content{display:none!important}.prose{border:0;padding:0;max-width:none}.doc{display:block}}
@media (max-width:767px){.prose{padding:var(--space-5) var(--space-4);font-size:var(--text-16)}.prose h2{margin-top:var(--space-6)}.prose dl.prose__facts{grid-template-columns:minmax(0,1fr);gap:0}.prose dl.prose__facts dd{margin-bottom:var(--space-2)}}

/* ---------- Service facts strip (home, content pages) ---------- */
.facts-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.facts-strip > li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--space-3);padding:var(--space-4) var(--space-5);border-right:1px solid var(--color-border)}
.facts-strip > li:last-child{border-right:0}
.facts-strip svg.i{color:var(--color-ink);margin-top:2px}
.facts-strip b{display:block;color:var(--color-ink);font-weight:var(--weight-semibold)}
.facts-strip span,.facts-strip a{font-size:var(--text-14);color:var(--color-text)}
.facts-strip a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){.facts-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.facts-strip > li:nth-child(2){border-right:0}.facts-strip > li:nth-child(-n+2){border-bottom:1px solid var(--color-border)}}
@media (max-width:640px){.facts-strip{grid-template-columns:minmax(0,1fr)}.facts-strip > li{border-right:0;border-bottom:1px solid var(--color-border)}.facts-strip > li:last-child{border-bottom:0}}

/* ---------- Info cards (content pages) ---------- */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}
.info-card{display:grid;align-content:start;gap:var(--space-2);padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.info-card > svg.i{width:var(--icon-lg);height:var(--icon-lg);color:var(--color-ink)}
.info-card h2,.info-card h3{font-size:var(--text-16)}
.info-card p{color:var(--color-text)}
.info-card .btn-row{margin-top:var(--space-2)}
.info-card--link{text-decoration:none;color:inherit;transition:border-color var(--motion-fast)}
.info-card--link:hover{border-color:var(--color-ink)}
.check-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.check-list > li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-2);align-items:start}
.check-list svg.i{color:var(--color-success);margin-top:2px}
.steps-list{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none;counter-reset:st}
.steps-list > li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--space-3);align-items:start}
.steps-list > li::before{counter-increment:st;content:counter(st);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-ink);color:var(--color-surface);font-weight:var(--weight-bold);font-size:var(--text-14)}
.steps-list b{display:block;color:var(--color-ink)}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.split > *{min-width:0}
@media (max-width:1023px){.split{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}}

/* ---------- Contact / hours blocks ---------- */
.hours{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4);margin:0;font-variant-numeric:tabular-nums}
.hours dt{color:var(--color-text)}
.hours dd{margin:0;color:var(--color-ink);font-weight:var(--weight-semibold);text-align:right}
.contact-lines{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.contact-lines > li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--space-3);align-items:start}
.contact-lines svg.i{color:var(--color-muted);margin-top:2px}
.contact-lines a{color:var(--color-ink);font-weight:var(--weight-semibold);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

/* ---------- Contact page ---------- */
.contact-form{display:grid;gap:var(--space-4)}
.contact-form__privacy{font-size:var(--text-12);color:var(--color-muted)}
.contact-form .btn--lg{justify-self:start}
.contact-side{display:grid;gap:var(--space-3);align-content:start}
.contact-side__h{font-size:var(--text-16)}
.contact-side .card__body > .link{display:inline-flex;align-items:center;min-height:var(--target-min)}
.contact-done:focus{outline:none}
@media (max-width:640px){.contact-form .btn--lg{justify-self:stretch}}

/* ---------- Content pages: about, visit, business account, jobs, offers ---------- */
.visit-h{font-size:var(--text-20);margin-bottom:var(--space-3)}
.visit-grid,.biz-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.about-cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4);margin-top:var(--space-2)}
.about-cta h2{font-size:var(--text-20)}
.about-cta .btn-row{margin-top:0}
.biz-cta{margin-top:var(--space-5)}
.job-card{max-width:760px}
.job-card h2{font-size:var(--text-20)}
.steps-list span{color:var(--color-text)}
.split > .prose{max-width:none}
.offers-flash{margin-bottom:var(--space-6)}
.offers-flash h2{margin-bottom:var(--space-3)}
.offers-flash__list{display:grid;gap:0;margin:0;padding:0;list-style:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.offers-flash__item{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:var(--space-4);align-items:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}
.offers-flash__item:last-child{border-bottom:0}
.offers-flash__img{display:grid;place-items:center;width:64px;height:64px}
.offers-flash__img img{width:100%;height:100%;object-fit:contain}
.offers-flash__txt{display:grid;gap:2px;justify-items:start;min-width:0}
.offers-flash__name{font-weight:var(--weight-semibold);color:var(--color-ink);text-decoration:none}
.offers-flash__name:hover{text-decoration:underline}
.offers-flash__time{display:inline-flex;align-items:center;gap:6px;color:var(--color-warning-ink);font-weight:var(--weight-semibold);white-space:nowrap}
.offers-promo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:center;margin-bottom:var(--space-6);padding:var(--space-4) var(--space-5);background:var(--color-brand-tint);border:1px solid var(--color-brand-line);border-radius:var(--radius-4)}
.offers-promo h2{font-size:var(--text-18)}
.offers-promo p{margin-top:2px}
.offers-news{margin-top:var(--space-5)}
.offers-news__form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);align-items:center}
.offers-news__form h2{font-size:var(--text-18)}
.offers-news__row{display:flex;gap:var(--space-2)}
.offers-news__row .input{flex:1 1 auto}
.cmp-page__hint{margin-bottom:var(--space-3)}
@media (max-width:767px){
  .about-cta{grid-template-columns:minmax(0,1fr)}
  .offers-flash__item{grid-template-columns:56px minmax(0,1fr);row-gap:var(--space-2)}
  .offers-flash__item .price,.offers-flash__time{grid-column:2}
  .offers-flash__item .price{justify-items:start;text-align:left}
  .offers-promo,.offers-news__form{grid-template-columns:minmax(0,1fr)}
  .offers-news__row{flex-direction:column}
}

/* ---------- Brand tiles (marken.html) ---------- */
.brand-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.brand-tiles > li{display:flex;min-width:0}
.brand-tile{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-4);align-items:center;width:100%;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4);transition:border-color var(--motion-fast)}
.brand-tile:hover{border-color:var(--color-ink)}
.brand-tile--skel:hover{border-color:var(--color-border)}
.brand-tile__mark{display:grid;place-items:center;width:72px;height:72px;border-radius:var(--radius-4);background:var(--color-surface-sunken);border:1px solid var(--color-border);color:var(--color-ink);font-size:var(--text-20);font-weight:var(--weight-bold);letter-spacing:.02em}
.brand-tile__mark--logo{background:var(--color-surface);padding:var(--space-2)}
.brand-tile__mark img{width:100%;height:100%;object-fit:contain}
.brand-tile__name{font-size:var(--text-18);font-weight:var(--weight-bold);color:var(--color-ink);text-decoration:none}
.brand-tile__name::after{content:"";position:absolute;inset:0;border-radius:var(--radius-4)}
.brand-tile__name:hover{text-decoration:underline}
.brand-tile__name:focus-visible{outline:none}
.brand-tile__name:focus-visible::after{outline:var(--focus-width) solid var(--focus-color);outline-offset:2px}
.brand-tile__meta{margin-top:2px;color:var(--color-muted)}
.brand-tile__cats{margin-top:var(--space-1);font-size:var(--text-12);color:var(--color-text)}
.brand-tile__cats:empty{display:none}

/* ---------- "Artikel nicht dabei?" sourcing box ---------- */
.sourcing{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-4);align-items:center;margin-top:var(--space-5);padding:var(--space-4) var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-4)}
.sourcing > svg.i{color:var(--color-ink)}
.sourcing b{display:block;color:var(--color-ink)}
@media (max-width:640px){.sourcing{grid-template-columns:minmax(0,1fr)}.sourcing > svg.i{display:none}}

/* ---------- Product rows: price, tax label and the other amount on their own lines (B) ---------- */
.prow__price .price__line{flex-direction:column;align-items:flex-end;gap:0}
@media (max-width:767px){.prow__price .price__line{flex-direction:row;align-items:baseline;gap:6px}}

/* ---------- Compare bar (listing + product, <body data-egh-compare>) ---------- */
.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);background:var(--color-surface);border-top:1px solid var(--color-border-strong);box-shadow:var(--shadow-sticky);padding-bottom:env(safe-area-inset-bottom)}
.cmp-bar__inner{display:flex;align-items:center;gap:var(--space-3);min-height:56px;flex-wrap:wrap;padding-top:var(--space-2);padding-bottom:var(--space-2)}
.cmp-bar__title{font-weight:var(--weight-semibold);color:var(--color-ink)}
.cmp-bar__items{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none;flex:1 1 auto;min-width:0}
.cmp-bar__name{max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-bar__actions{display:flex;gap:var(--space-2);margin-left:auto}
body[data-egh-compare] .site-footer{padding-bottom:0}
@media (max-width:767px){.cmp-bar__items{display:none}}

/* ---------- Consent bar (CookieConsent in js/cart.js) ---------- */
.egh .cookie-banner{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:var(--z-toast);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3) var(--space-5);align-items:center;max-width:1080px;margin:0 auto;padding:var(--space-4) var(--space-5);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border-strong);border-radius:var(--radius-8);box-shadow:var(--shadow-overlay);font-size:var(--text-14);line-height:var(--leading-body);opacity:0;transform:translateY(8px);transition:opacity var(--motion-panel) var(--ease-standard),transform var(--motion-panel) var(--ease-standard)}
.egh .cookie-banner.show{opacity:1;transform:none}
.egh .cookie-text{max-width:72ch}
.egh .cookie-text p{margin:0}
.egh .cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.egh .cookie-accept,.egh .cookie-reject{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-md);padding:0 var(--space-4);border:1px solid var(--color-graphite-800);border-radius:var(--radius-4);background:var(--color-graphite-800);color:var(--color-on-dark);font:inherit;font-weight:var(--weight-semibold);cursor:pointer;white-space:nowrap}
.egh .cookie-accept:hover,.egh .cookie-reject:hover{background:var(--color-graphite-950);border-color:var(--color-graphite-950)}
.egh .cookie-more{display:inline-flex;align-items:center;min-height:var(--target-min);color:var(--color-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){
  .egh .cookie-banner{left:0;right:0;bottom:0;grid-template-columns:minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));border-radius:var(--radius-8) var(--radius-8) 0 0;border-width:1px 0 0;font-size:var(--text-12)}
  .egh .cookie-text{line-height:1.4}
  .egh .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
  .egh .cookie-accept,.egh .cookie-reject{min-height:var(--touch-min);width:100%;padding:0 var(--space-2)}
  .egh .cookie-more{grid-column:1/-1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.egh .cookie-banner{transition:none}}
@media print{.egh .cookie-banner,.cmp-bar{display:none}}