/* =========================================================================
   howlonglasts.com — hs-theme.css
   Zweisprachiges Haltbarkeits-/„Wann ersetzen"-Portal. Voll-Custom unter .hs,
   erbt NICHT das Magazin-CSS. Konzept „Prüfstempel / Ablauf-Etikett":
   Signature = Prüfplakette (noch gut / bald prüfen / ersetzen), die grosse
   Haltbarkeits-Zahl ist der Held jeder Gegenstandsseite.
   Fonts lokal (DSGVO): Barlow (Body) + Barlow Condensed (Display/Zahlen).
   ========================================================================= */

/* ------------------------------------------------------------- @font-face */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/css/fonts/barlow-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/css/fonts/barlow-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/css/fonts/barlow-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('/css/fonts/barlow-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/css/fonts/barlow-condensed-v13-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/css/fonts/barlow-condensed-v13-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/css/fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/css/fonts/barlow-condensed-v13-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------- Tokens */
.hs{
  --bg:#F2F4F6; --surface:#FFFFFF; --panel:#EAF0F4;
  --ink:#1F3042; --muted:#5C6B7A; --faint:#8996A3;
  --border:#E1E6EB; --border-2:#C9D2DA;
  --good:#337A54; --check:#BD8A26; --replace:#B0402F;
  --good-tint:rgba(51,122,84,.09); --good-line:rgba(51,122,84,.4);
  --radius:10px; --radius-lg:14px; --pill:99px;
  --wrap:1052px; --read:716px;
  --sans:'Barlow',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:'Barlow Condensed','Barlow',system-ui,sans-serif;
}

/* ----------------------------------------------------------------- Base */
.hs *{box-sizing:border-box}
.hs{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.hs main{flex:1 0 auto;padding-top:14px}
.hs img{max-width:100%;height:auto;display:block}
.hs a{color:inherit;text-decoration:none}
.hs a:hover{text-decoration:none}
.hs strong{font-weight:600}
.hs :focus-visible{outline:3px solid var(--good);outline-offset:2px;border-radius:4px}
.hs .hs-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;width:100%}
.hs .hs-read{max-width:var(--read);margin:0 auto;width:100%}
.hs-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.hs-skip:focus{left:0}

/* ============================================================ HEADER */
.hs-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.hs-header__in{display:flex;align-items:center;gap:14px;max-width:1320px;margin:0 auto;padding:13px 20px}
.hs-logo{display:flex;align-items:center;gap:8px;flex:none}
.hs-logo svg{display:block;flex:none}
.hs-logo__word{font:700 20px/1 var(--disp);text-transform:uppercase;letter-spacing:.04em}
.hs-logo__word span{color:var(--muted)}
.hs-nav{display:none;gap:22px;font:600 13.5px var(--sans)}
.hs-nav a{color:var(--ink);padding-bottom:2px;border-bottom:2px solid transparent;white-space:nowrap}
.hs-nav a:hover{color:var(--good)}
.hs-nav a.is-active{border-bottom-color:var(--ink)}
.hs-header__spacer{flex:1}
.hs-search-box{display:none;align-items:center;gap:10px;background:var(--bg);border:1.5px solid var(--border-2);border-radius:var(--pill);padding:8px 16px;width:260px}
.hs-search-box svg{flex:none;color:var(--muted)}
.hs-search-box input{border:0;background:transparent;font:400 14px var(--sans);color:var(--ink);width:100%;outline:none}
.hs-search-box input::placeholder{color:var(--faint)}
.hs-lang{display:flex;gap:2px;font:600 11px var(--sans);flex:none}
.hs-lang a{padding:5px 8px;border-radius:4px;color:var(--muted)}
.hs-lang a.is-active{background:var(--ink);color:#fff}
.hs-burger{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer;flex:none}
.hs-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}

/* Mobile nav drawer */
.hs-mnav{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.hs-mnav.is-open{visibility:visible;pointer-events:auto}
.hs-mnav__backdrop{position:absolute;inset:0;background:rgba(31,48,66,.5);opacity:0;transition:opacity .2s}
.hs-mnav.is-open .hs-mnav__backdrop{opacity:1}
.hs-mnav__panel{position:absolute;top:0;right:0;height:100%;width:min(320px,84vw);background:var(--surface);box-shadow:-8px 0 30px rgba(31,48,66,.18);transform:translateX(100%);transition:transform .22s ease;padding:18px 20px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.hs-mnav.is-open .hs-mnav__panel{transform:translateX(0)}
.hs-mnav__close{align-self:flex-end;background:none;border:0;font-size:20px;color:var(--muted);cursor:pointer;line-height:1}
.hs-mnav__panel a{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--border);font:600 16px var(--sans)}
.hs-mnav__panel a .n{font:700 13px var(--disp);color:var(--faint)}
.hs-mnav__lang{display:flex;gap:8px;margin-top:14px}
.hs-mnav__lang a{border:1.5px solid var(--border-2);border-radius:var(--pill);padding:6px 16px;font:600 13px var(--sans)}
.hs-mnav__lang a.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================ SECTION-Heads */
.hs-h2{display:flex;align-items:center;gap:9px;font:700 15px var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0}
.hs-h2::before{content:"";width:10px;height:10px;border-radius:50%;border:3px solid var(--ink);flex:none}
.hs-h2--good::before{border-color:var(--good)}
.hs-h2--check::before{border-color:var(--check)}
.hs-h2--replace::before{border-color:var(--replace)}

/* Status dot + label (reused everywhere) */
.hs-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;border:3px solid var(--ink)}
.hs-dot--good{border-color:var(--good)}
.hs-dot--check{border-color:var(--check)}
.hs-dot--replace{border-color:var(--replace)}
.hs-statuslbl{display:inline-flex;align-items:center;gap:5px;font:500 11.5px var(--sans);color:var(--muted)}

/* ============================================================ HOME (C) */
.hs-hero{text-align:center;padding:48px 0 0}
.hs-hero h1{font:700 clamp(44px,10vw,76px)/1 var(--disp);text-transform:uppercase;margin:0}
.hs-hero__sub{margin:12px auto 0;font:400 clamp(15px,4vw,18px)/1.5 var(--sans);color:rgba(31,48,66,.8);max-width:640px}
.hs-hero__search{display:flex;align-items:center;gap:12px;margin:24px auto 0;background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);padding:15px 18px;max-width:640px;box-shadow:0 3px 14px rgba(31,48,66,.09);cursor:text}
.hs-hero__search svg{flex:none;color:var(--ink)}
.hs-hero__search input{border:0;background:transparent;font:400 16px var(--sans);color:var(--ink);width:100%;outline:none}
.hs-hero__search input::placeholder{color:var(--faint)}
.hs-chips{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.hs-chip{font:500 13px var(--sans);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--pill);padding:5px 14px;color:var(--ink)}
.hs-chip:hover{border-color:var(--ink)}

.hs-hero-cards{display:flex;justify-content:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.hs-legend{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 18px;display:flex;align-items:center;gap:14px;max-width:560px;text-align:left}
.hs-legend__plaks{display:flex;gap:7px;flex:none}
.hs-plak-mini{width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font:700 7px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;border:4px solid var(--ink);text-align:center;overflow:hidden}
.hs-plak-mini--good{border-color:var(--good);color:var(--good)}
.hs-plak-mini--check{border-color:var(--check);color:var(--check)}
.hs-plak-mini--replace{border-color:var(--replace);color:var(--replace)}
.hs-legend p{margin:0;font:400 13.5px/1.5 var(--sans);color:rgba(31,48,66,.8)}
.hs-waste{background:var(--good-tint);border-radius:var(--radius);padding:15px 18px;display:flex;gap:14px;align-items:center;max-width:460px;text-align:left}
.hs-waste__num{font:700 36px/.9 var(--disp);color:var(--good);flex:none}
.hs-waste p{margin:0;font:400 13px/1.45 var(--sans);color:rgba(31,48,66,.8)}
.hs-waste__src{font:600 10.5px var(--sans);color:var(--good);letter-spacing:.05em;text-transform:uppercase}

.hs-section{padding:40px 0 0}
.hs-topics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.hs-topic{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:block}
.hs-topic:hover{border-color:var(--border-2);box-shadow:0 2px 10px rgba(31,48,66,.06)}
.hs-topic__img{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--panel)}
.hs-topic__img img{width:100%;height:100%;object-fit:cover}
.hs-topic__name{font:600 17px var(--sans);margin-top:12px}
.hs-topic__count{font:500 13px var(--sans);color:var(--muted);margin-top:2px}

.hs-home-cols{display:grid;grid-template-columns:1fr;gap:24px;margin-top:12px}
.hs-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:10px}
.hs-list__row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border)}
.hs-list__row:last-child{border-bottom:0}
.hs-list__row:hover{background:#fafbfc}
.hs-list__name{font:600 15px var(--sans);flex:1;min-width:0}
.hs-list__val{font:700 19px var(--disp);white-space:nowrap}
.hs-fresh{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border)}
.hs-fresh:last-child{border-bottom:0}
.hs-fresh__name{font:600 14.5px var(--sans);flex:1}
.hs-fresh__date{font:600 10px var(--sans);letter-spacing:.06em;color:var(--good);border:1.5px solid var(--good);border-radius:var(--pill);padding:3px 9px;text-transform:uppercase;white-space:nowrap}
.hs-srcbox{border:1.5px solid var(--ink);border-radius:var(--radius);padding:14px 16px;background:var(--surface);margin-top:16px}
.hs-srcbox__t{font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.hs-srcbox__tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.hs-tag{font:500 12px var(--sans);border:1px solid var(--border-2);border-radius:var(--pill);padding:4px 11px;color:var(--muted)}
.hs-home-intro{padding:30px 0 40px;text-align:center}
.hs-home-intro p{margin:0 auto;font:400 14px/1.6 var(--sans);color:rgba(31,48,66,.7);max-width:760px}

/* ============================================================ HUB (B) */
.hs-hubhero{padding:34px 0 0}
.hs-hubhero__crumb{font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hs-hubhero h1{font:700 clamp(36px,8vw,54px)/1 var(--disp);text-transform:uppercase;margin:10px 0 0}
.hs-hubhero__tag{margin:10px 0 0;font:400 16px/1.5 var(--sans);color:rgba(31,48,66,.82);max-width:640px}
.hs-hubhero__intro{margin:16px 0 0;font:400 15px/1.6 var(--sans);color:rgba(31,48,66,.82);max-width:680px}
.hs-itemgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:22px 0 0}
.hs-itemgrid__ad{grid-column:1/-1}
.hs-itemcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.hs-itemcard:hover{border-color:var(--border-2);box-shadow:0 2px 10px rgba(31,48,66,.06)}
.hs-itemcard__img{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--panel);margin-bottom:10px}
.hs-itemcard__img img,.hs-itemcard__img .hs-thumb-ph{width:100%;height:100%;object-fit:cover}
.hs-itemcard__name{font:600 15.5px var(--sans)}
.hs-cluspill{font:600 10.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border-2);border-radius:var(--pill);padding:2px 9px}
.hs-badge{display:inline-flex;align-items:center;gap:6px;background:var(--good-tint);border:1px solid var(--good);border-radius:var(--pill);padding:4px 11px;font:600 11.5px var(--sans);color:var(--good)}
.hs-itemcard__val{font:700 24px/1.05 var(--disp);margin-top:2px}
.hs-itemcard__status{display:inline-flex;align-items:center;gap:6px;margin-top:5px}
.hs-itemcard__ql{font:500 12px var(--sans);color:var(--muted)}
.hs-itemcard__badge{margin-top:8px;align-self:flex-start}

/* ============================================================ ITEM (A) */
.hs-item{padding:22px 0 0}
.hs-item__layout{display:flex;gap:36px;align-items:flex-start}
.hs-item__main{flex:1;min-width:0;max-width:var(--read)}
.hs-item__side{display:none}
.hs-crumb{font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hs-crumb a:hover{color:var(--ink)}
.hs-item__title{font:700 clamp(38px,9vw,54px)/1 var(--disp);text-transform:uppercase;margin:0}
.hs-item__top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-top:10px}
.hs-item__answer{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.hs-item__num{font:700 clamp(58px,16vw,128px)/.85 var(--disp);white-space:nowrap}
.hs-item__unit{font:600 clamp(15px,4.4vw,26px) var(--disp);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
/* Figur rechts: Bild (falls vorhanden) mit Plakette-Overlay, sonst Plakette solo */
.hs-item__figure{flex:none;position:relative;display:flex;align-items:flex-start;justify-content:center;margin-top:4px}
.hs-item__fig-img{width:132px;height:132px;border-radius:16px;overflow:hidden;background:var(--panel)}
.hs-item__fig-img img,.hs-item__fig-img .hs-thumb-ph{width:100%;height:100%;object-fit:cover}
.hs-item__figure.has-img .hs-plak{position:absolute;bottom:-14px;left:-24px}
.hs-item__qual{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 15px var(--sans);color:var(--muted)}

/* Prüfplakette (Signature) */
.hs-plak{position:relative;width:104px;height:104px;border-radius:50%;background:var(--surface);border:8px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(31,48,66,.14);flex:none}
.hs-plak::before{content:"";position:absolute;inset:5px;border:2px dashed rgba(31,48,66,.35);border-radius:50%}
.hs-plak--good{border-color:var(--good)}
.hs-plak--good::before{border-color:rgba(51,122,84,.45)}
.hs-plak--check{border-color:var(--check)}
.hs-plak--check::before{border-color:rgba(189,138,38,.45)}
.hs-plak--replace{border-color:var(--replace)}
.hs-plak--replace::before{border-color:rgba(176,64,47,.45)}
.hs-plak__lbl{font:600 8px var(--sans);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.hs-plak__word{font:700 22px/1 var(--disp);text-transform:uppercase}
.hs-plak--good .hs-plak__word{color:var(--good)}
.hs-plak--check .hs-plak__word{color:var(--check)}
.hs-plak--replace .hs-plak__word{color:var(--replace)}
.hs-plak__note{font:500 8px var(--sans);color:var(--muted)}

.hs-shortanswer{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px}
.hs-shortanswer p{margin:0;font:500 17px/1.55 var(--sans)}

/* Zeitstrahl / Haltbarkeits-Balken */
.hs-bar{margin-top:20px;display:flex;gap:4px}
.hs-bar__seg{}
.hs-bar__fill{height:12px;border-radius:2px;background:var(--muted)}
.hs-bar__seg--good .hs-bar__fill{background:var(--good);border-radius:6px 2px 2px 6px}
.hs-bar__seg--check .hs-bar__fill{background:var(--check)}
.hs-bar__seg--replace .hs-bar__fill{background:var(--replace);border-radius:2px 6px 6px 2px}
.hs-bar__lbl{font:600 12px var(--sans);color:var(--muted);margin-top:6px}

/* TOC-Chips */
.hs-toc{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hs-toc__lbl{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hs-toc a{font:500 12.5px var(--sans);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--pill);padding:4px 12px;color:var(--ink)}
.hs-toc a:hover{border-color:var(--ink)}

/* Redaktionskörper (body_html) — Sektionen */
.hs-body{margin-top:8px}
.hs-body>section{margin-top:24px;scroll-margin-top:80px}
.hs-body p{margin:9px 0 0;font:400 15px/1.6 var(--sans);color:rgba(31,48,66,.85)}
.hs-body p:first-child{margin-top:0}
.hs-body .lead{font:400 15px/1.55 var(--sans);color:rgba(31,48,66,.85);margin-top:9px}
.hs-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:10px}
.hs-steps .hs-step{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border)}
.hs-steps .hs-step:last-child{border-bottom:0}
.hs-step__n{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:700 13px var(--disp)}
.hs-step__t{font:600 15px var(--sans)}
.hs-step p{margin:2px 0 0;font:400 14px/1.5 var(--sans);color:rgba(31,48,66,.75)}
/* Selbst-prüfen 3-Spalten (Schwimmtest) */
.hs-check3{display:flex;flex-direction:column}
.hs-check3 .c{display:flex;gap:12px;padding:14px 18px;align-items:flex-start;border-top:1px solid var(--border)}
.hs-check3 .c:first-child{border-top:0}
.hs-check3 .c__t{font:600 15px var(--sans)}
.hs-check3 .c p{margin:2px 0 0;font:400 13.5px/1.5 var(--sans);color:rgba(31,48,66,.75)}
/* Tabelle */
.hs-table{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:10px;width:100%;border-collapse:collapse}
.hs-table caption{text-align:left;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 0 8px}
.hs-table thead th{background:var(--ink);color:#fff;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:10px 18px}
.hs-table td{padding:11px 18px;border-top:1px solid var(--border);font:400 14.5px var(--sans);vertical-align:top}
.hs-table td:last-child{font-weight:600}
/* Lager-Grid */
.hs-store{margin-top:10px;display:grid;grid-template-columns:1fr;gap:10px 24px}
.hs-store .s{display:flex;gap:10px;align-items:flex-start}
.hs-store .s::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:2.5px solid var(--good);margin-top:5px}
.hs-store .s p{margin:0;font:400 14.5px/1.5 var(--sans);color:rgba(31,48,66,.85)}
/* Irrtümer */
.hs-myth{padding:14px 18px;border-top:1px solid var(--border)}
.hs-myth:first-child{border-top:0}
.hs-myth__q{font:600 15px var(--sans);color:var(--replace)}
.hs-myth p{margin:3px 0 0;font:400 14px/1.5 var(--sans);color:rgba(31,48,66,.75)}
/* Infobox „Übrigens" */
.hs-info{margin-top:24px;background:var(--panel);border-radius:var(--radius);padding:16px 18px;display:flex;gap:13px}
.hs-info::before{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:6px solid var(--ink);margin-top:2px}
.hs-info__t{font:700 13px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.hs-info p{margin:3px 0 0;font:400 14.5px/1.55 var(--sans);color:rgba(31,48,66,.8)}
/* Grüne „Zu gut für die Tonne"-Box */
.hs-green{margin-top:24px;background:var(--good-tint);border-radius:var(--radius);padding:18px 20px}
.hs-green__big{display:flex;align-items:baseline;gap:12px;margin-top:8px}
.hs-green__num{font:700 54px/.9 var(--disp);color:var(--good)}
.hs-green__unit{font:600 15px var(--sans);color:var(--good)}
.hs-green p{margin:6px 0 0;font:400 14.5px/1.55 var(--sans);color:rgba(31,48,66,.8)}
.hs-srcpill{display:inline-block;font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--good-line);border-radius:var(--pill);padding:3px 10px;color:var(--good);margin-top:10px}

/* Quellen-Karte */
.hs-sources{margin-top:24px;border:1.5px solid var(--ink);border-radius:var(--radius);padding:16px 18px;background:var(--surface)}
.hs-sources__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hs-sources__t{font:700 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.hs-sources__stand{font:600 10px var(--sans);letter-spacing:.08em;color:var(--good);border:1.5px solid var(--good);border-radius:var(--pill);padding:3px 10px;text-transform:uppercase}
.hs-sources__tags{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.hs-sources__meta{font:400 12px var(--sans);color:var(--faint);margin-top:10px}

/* FAQ — statisch offen (nicht klappbar), wie in der Designvorlage */
.hs-faq{margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.hs-faq__item{padding:15px 18px;border-top:1px solid var(--border)}
.hs-faq__item:first-child{border-top:0}
.hs-faq__q{font:600 15.5px var(--sans);margin-bottom:5px}
.hs-faq__a{font:400 14px/1.55 var(--sans);color:rgba(31,48,66,.75)}

/* Verwandte */
.hs-related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.hs-relcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.hs-relcard:hover{border-color:var(--border-2)}
.hs-relcard__name{font:600 14.5px var(--sans)}
.hs-relcard__val{font:700 22px var(--disp)}
.hs-related__more{margin-top:12px;font:600 14px var(--sans)}
.hs-related__more a:hover{color:var(--good)}

/* ============================================================ AD-Slots */
.hs-ad{margin:26px 0 0}
.hs-ad__box{position:relative;border:1px dashed var(--border-2);border-radius:var(--radius);background:repeating-linear-gradient(45deg,#fff 0 10px,var(--bg) 10px 20px);display:flex;align-items:center;justify-content:center;min-height:90px}
.hs-ad--leaderboard .hs-ad__box{min-height:90px}
.hs-ad--mpu .hs-ad__box{min-height:250px}
.hs-ad--halfpage .hs-ad__box{min-height:600px}
.hs-ad__lab{position:absolute;top:5px;right:8px;font:600 9px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.hs-ad__siz{font:500 11px ui-monospace,monospace;color:var(--faint)}

/* ============================================================ Suggest / Suche / 404 */
.hs-suggest{margin-top:22px;background:var(--panel);border-radius:var(--radius);padding:16px 18px}
.hs-suggest__t{font:600 15px var(--sans)}
.hs-suggest p{margin:3px 0 0;font:400 13.5px/1.5 var(--sans);color:rgba(31,48,66,.75)}
.hs-btn{display:inline-block;font:600 14px var(--sans);background:var(--ink);color:#fff;border-radius:var(--pill);padding:10px 20px;margin-top:12px}
.hs-btn:hover{background:#16263d}
.hs-searchpage{padding:34px 0 40px}
.hs-searchpage h1{font:700 clamp(34px,8vw,44px)/1 var(--disp);text-transform:uppercase;margin:0}
.hs-searchpage__meta{margin-top:8px;font:400 15px var(--sans);color:var(--muted)}
.hs-404{padding:60px 0;text-align:center}
.hs-404 .big{font:700 96px/1 var(--disp);color:var(--border-2)}
.hs-404 h1{font:700 30px var(--disp);text-transform:uppercase;margin:8px 0 0}
.hs-404 p{margin:10px auto 0;max-width:440px;color:var(--muted)}

/* ============================================================ Static/Legal */
.hs-legal{padding:34px 0 48px}
.hs-legal h1{font:700 clamp(34px,8vw,44px)/1 var(--disp);text-transform:uppercase;margin:0}
.hs-legal h2{font:700 15px var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:24px 0 8px}
.hs-legal p{font:400 15px/1.7 var(--sans);color:rgba(31,48,66,.85);margin:8px 0 0}
.hs-legal a{color:var(--good);text-decoration:underline}
.hs-legal ul{margin:8px 0 0;padding-left:20px}
.hs-legal li{font:400 15px/1.7 var(--sans);color:rgba(31,48,66,.85)}
.hs-note{display:inline-block;font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--check);border-radius:var(--pill);padding:3px 10px;color:var(--check);margin-top:12px}
/* Kontaktformular */
.hs-form{margin-top:22px}
.hs-form label{display:block;font:600 13px var(--sans);margin:16px 0 6px}
.hs-form input,.hs-form select,.hs-form textarea{width:100%;background:var(--surface);border:1.5px solid var(--border-2);border-radius:var(--radius);padding:12px 16px;font:400 14.5px var(--sans);color:var(--ink)}
.hs-form textarea{min-height:140px;resize:vertical}
.hs-form__consent{display:flex;gap:10px;margin-top:16px;align-items:flex-start;font:400 13px/1.5 var(--sans);color:rgba(31,48,66,.75)}
.hs-form__row{display:flex;gap:16px;flex-wrap:wrap}
.hs-form__row>div{flex:1;min-width:200px}

/* ============================================================ FOOTER */
.hs-footer{background:var(--ink);color:#fff;margin-top:40px}
.hs-footer__in{max-width:1320px;margin:0 auto;padding:20px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hs-footer__claim{font:600 15px var(--sans)}
.hs-footer__links{display:flex;gap:16px;font:500 12px var(--sans);flex-wrap:wrap}
.hs-footer__links a,.hs-footer__links span{color:rgba(255,255,255,.65)}
.hs-footer__links a:hover{color:#fff}

/* JS-Search-Dropdown (Autocomplete) */
.hs-ac{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(31,48,66,.14);overflow:hidden;z-index:50;display:none}
.hs-ac.is-open{display:block}
.hs-ac a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border)}
.hs-ac a:first-child{border-top:0}
.hs-ac a:hover,.hs-ac a.is-active{background:var(--panel)}
.hs-ac__name{flex:1;font:600 14px var(--sans)}
.hs-ac__val{font:700 15px var(--disp);color:var(--muted)}
.hs-header__searchwrap{position:relative;display:none}

/* ============================================================ Responsive */
@media(min-width:781px){
  .hs-nav{display:flex}
  .hs-header__searchwrap{display:block}
  .hs-itemgrid{grid-template-columns:repeat(3,1fr);gap:16px}
  .hs-search-box{display:flex}
  .hs-burger{display:none}
  .hs-topics{grid-template-columns:repeat(4,1fr)}
  .hs-home-cols{grid-template-columns:1.4fr 1fr}
  .hs-store{grid-template-columns:1fr 1fr}
  .hs-item__side{display:flex;flex-direction:column;gap:16px;width:300px;flex:none}
  .hs-check3{flex-direction:row}
  .hs-check3 .c{border-top:0;border-left:1px solid var(--border);flex:1}
  .hs-check3 .c:first-child{border-left:0}
  .hs-item__fig-img{width:230px;height:230px;border-radius:20px}
  .hs-item__figure.has-img .hs-plak{bottom:-16px;left:-40px}
  .hs-item__answer{flex-direction:row;align-items:flex-end;gap:12px}
  .hs-item__num{font-size:clamp(78px,9vw,128px)}
  .hs-item__unit{padding-bottom:8px}
}
@media(min-width:1100px){
  .hs-header__in{padding:18px 40px}
  .hs-itemgrid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:780px){
  .hs-item__side{display:none}
  .hs-related{grid-template-columns:1fr 1fr}
  .hs-plak{width:88px;height:88px;border-width:7px}
  .hs-plak__word{font-size:19px}
  .hs-footer__in{flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .hs *{transition:none!important;animation:none!important}
}

/* ---- CMP-Consent-Banner (liegt AUSSERHALB .hs) auf hs-Look bringen ----
   Barlow-Schrift + barrierefreie Buttons (WCAG-AA: weiß auf Grün/Navy statt
   amber-auf-navy). Nur literale Hex (Banner sieht keine --tenant-Vars). */
body.hs-page .cmp-banner,
body.hs-page .cmp-modal{font-family:'Barlow',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body.hs-page .cmp-btn{font-weight:600;letter-spacing:.03em;border-radius:99px}
/* Sekundär/Ghost: Navy-Text auf Weiß, klare Kontur */
body.hs-page .cmp-btn{background:#fff;color:#1F3042;border:1.5px solid #C9D2DA}
body.hs-page .cmp-btn:hover{background:#F2F4F6}
/* Primär + Equal-Choice: Weiß auf Grün (Kontrast > 4.5:1) */
body.hs-page .cmp-btn--primary,
body.hs-page .cmp-btn--equal{background:#2A6344;color:#fff;border-color:#2A6344}
body.hs-page .cmp-btn--primary:hover,
body.hs-page .cmp-btn--equal:hover{background:#215037;color:#fff}
body.hs-page .cmp-banner__title,
body.hs-page .cmp-modal__title{color:#1F3042}
body.hs-page .cmp-tab.is-active{color:#1F3042;border-bottom-color:#337A54}
body.hs-page .cmp-banner__links a,
body.hs-page .cmp-modal__links a{color:#2A6344}