/* ==========================================================================
   strom-hannover-bernhardt.de — assets/theme.css
   Shared design LANGUAGE (Phase A). Composable primitives every page links
   UNEDITED. Colour/type/spacing values are theme.json presets
   (var(--wp--preset--…)) or the small set of primitive tokens in :root
   below, for the handful of things theme.json cannot hold (shadow, easing,
   radius-0, tap-target floor, callbar height). No bare hex/px colour value
   appears anywhere past this file — see DESIGN-LANGUAGE.md for the full
   token table and the class-by-class usage notes.
   Style lineage: style-library/elektro-volt (deep navy #00254a + electric
   yellow #fed829, square geometry, dark-band rhythm), re-themed with this
   site's own palette (same hue family — elektro-volt's native palette was
   the chosen style, so no re-derivation was needed) and extended with the
   primitives this brief additionally requires (.notice--danger,
   .contrast-pair, .stat-rail, .breadcrumbs, .callbar, 7 hero variants).
   ========================================================================== */

:root{
  --ev-radius: 0px;                                  /* the "square" personality — buttons/cards/badges/bands */
  --ev-shadow-card: 0 0 50px rgba(5,5,5,.08);         /* deep soft card shadow (NOT tight/material) */
  --ev-shadow-card-hover: 0 0 50px rgba(5,5,5,.17);
  --ev-shadow-soft: 0 3px 15px rgba(0,0,0,.10);       /* dropdown / small floating panel */
  --ev-shadow-lift: 0 18px 40px rgba(0,37,74,.20);    /* phone-block / badge lift on brand-navy */
  --ev-ease: cubic-bezier(.22,.61,.36,1);
  --ev-tap-min: 44px;                                 /* WCAG 2.5.5 / A11 floor for every tappable control */
  --ev-callbar-h: 76px;                                /* reserved so the sticky bar never covers content */
}

/* ---------------------------------------------------------------------
   1. RESET + BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
img,svg{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5{ margin:0; text-wrap:balance; }
p,ul,ol{ margin:0; }
h2{ font-size:1.75rem; }
h3{ font-size:var(--wp--preset--font-size--md); }
h4{ font-size:1.125rem; }
h5{ font-size:1rem; }
a{ text-decoration:none; }

/* Base typographic primitives: comfortable measure + heading scale above.
   Body base size/line-height/colour/family are already emitted globally
   by theme.json (styles.typography / styles.color) onto <body> — not
   duplicated here. */
.measure,.prose{ max-width:70ch; }
.lead{ margin-top:.875rem; max-width:62ch; color:var(--wp--preset--color--text); font-size:1.0625rem; }
.lead.on-dark{ color:var(--wp--preset--color--dark-muted); }
.lead.center{ margin-inline:auto; text-align:center; }

/* Site-wide fix (found across the full-site accessibility pass, applies to every
   page at once): an inline link inside running prose must be distinguishable by
   more than colour alone (WCAG 1.4.1 / axe "link-in-text-block"), and the global
   brand-navy link colour fails contrast on any dark/navy surface (same class of
   bug DESIGN-LANGUAGE.md §9a already documents for .callrow). Scoped to prose
   containers only — nav/footer/card/chip/button/breadcrumb links keep their own
   (non-underlined, already-correct) treatment. */
.section p a, .lead a, .icon-list__item p a, .contrast-pair__side p a,
.split p a, .panel-body p a, .legal-body p a, .checks a, .notice__text a{
  text-decoration:underline; text-underline-offset:.15em;
}
/* Only the DARK/navy hero+section surfaces need the link forced to white — the
   light-background variants (split-phone tint bg, local-context white bg) must
   NOT match this or the link becomes invisible (white-on-light). Scoped to the
   specific dark surfaces, never a blanket ".hero a". */
.on-dark a:not(.btn):not(.callrow), .section--dark a:not(.btn):not(.callrow),
.hero--emergency-bar a:not(.btn):not(.callrow), .hero--solid-panel a:not(.btn):not(.callrow),
.hero--compact-4card a:not(.btn):not(.callrow), .hero--compact-3card a:not(.btn):not(.callrow),
.hero--norm-panel a:not(.btn):not(.callrow),
.panel a:not(.btn):not(.callrow), .panelsplit a:not(.btn):not(.callrow){
  color:#fff;
}
.on-dark a:not(.btn):not(.callrow):hover, .section--dark a:not(.btn):not(.callrow):hover{
  color:var(--wp--preset--color--accent);
}
/* Any plain inline tel: mention (e.g. an Impressum contact line) still meets the
   44px tap-target floor even outside a .btn/.callrow treatment. */
a[href^="tel:"]:not(.btn):not(.callrow){
  display:inline-flex; align-items:center; min-height:var(--ev-tap-min);
}
/* White-surface card components (.card, .icon-list__item, .trust-strip__item,
   .faq) carry their own explicit white/light background but previously had no
   explicit text colour, so when one of these sits inside a .section--dark
   wrapper (e.g. home's why-us usp-panel) its paragraph text silently inherited
   the ambient dark-context colour (light-on-dark) onto its own white card —
   real contrast failure, found in the full-site audit. Pin their text colour at
   the component level so it never depends on an ambient dark/light context. */
.card,.icon-list__item,.trust-strip__item,.faq{ color:var(--wp--preset--color--text); }
.icon-list--plain .icon-list__item{ color:inherit; } /* transparent variant: keep inheriting ambient colour */
.hero-cta.center{ justify-content:center; }

/* ---------------------------------------------------------------------
   2. SKIP LINK  (first focusable element on every page)
   --------------------------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--wp--preset--color--brand); color:#fff;
  padding:.9375rem 1.375rem; font-weight:700; font-size:var(--wp--preset--font-size--sm);
}
.skip-link:focus{ left:.5rem; top:.5rem; }

/* ---------------------------------------------------------------------
   3. FOCUS  — one ring for light contexts, one for dark/navy/yellow contexts
   (both ≥3:1 against every background they land on; both distinct from
   --brand and from --accent; never `outline:none` without replacement)
   --------------------------------------------------------------------- */
:focus-visible{
  outline:3px solid var(--wp--preset--color--focus);
  outline-offset:2px;
}
.hero :focus-visible,
.section--dark :focus-visible,
.panel :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.nav-drawer :focus-visible{
  outline-color:#fff;
}

/* ---------------------------------------------------------------------
   4. CONTAINER + SECTION BANDS
   --------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--wp--style--global--content-size, 85rem);
  margin-inline:auto;
  padding-inline:1.5rem;
}
.container--narrow{ max-width:52rem; }

.section{ padding-block:var(--wp--preset--spacing--section); }
.section--tint{ background:var(--wp--preset--color--tint); }
.section--tint2{ background:var(--wp--preset--color--tint2); }
.section--dark{ background:var(--wp--preset--color--dark); color:var(--wp--preset--color--dark-muted); }
.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; }

.section-head{ margin-bottom:2.75rem; }
.section-head.center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.section-head.center .section-title{ max-width:24ch; }
.section-head.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:2.125rem; align-items:end; }

.section-title{
  font-size:var(--wp--preset--font-size--title); line-height:1.16; letter-spacing:-.01em;
  color:var(--wp--preset--color--ink); font-weight:800; max-width:20ch;
}
.section-title.on-dark{ color:#fff; }

/* ---------------------------------------------------------------------
   5. EYEBROW  — alternate the two variants so sections don't open identically
   --------------------------------------------------------------------- */
.eyebrow{
  display:inline-block; position:relative;
  font-size:var(--wp--preset--font-size--xs); font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--wp--preset--color--brand); border:3px solid var(--wp--preset--color--line);
  padding:.1875rem 1.375rem; line-height:1.625rem; margin-bottom:1rem; background:var(--wp--preset--color--white);
}
.eyebrow .bolt{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; background:var(--wp--preset--color--white); padding:0 2px;
}
.eyebrow.left{ padding-left:3.5rem; border:0; background:transparent; line-height:1.5; }
.eyebrow.left::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:43px; height:5px; border-radius:5px; background:var(--wp--preset--color--brand);
}
.eyebrow.on-dark{ color:#fff; border-color:var(--wp--preset--color--dark-line); background:transparent; }
.eyebrow.on-dark .bolt{ background:transparent; }
.eyebrow.left.on-dark::before{ background:var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------------
   6. DISPLAY  — the giant two-tone hero headline (the strongest style signal)
   --------------------------------------------------------------------- */
.display{
  font-size:var(--wp--preset--font-size--display); line-height:.94; font-weight:900;
  letter-spacing:-.025em; text-transform:uppercase; color:#fff; margin-top:.375rem;
}
.display .line2{ display:block; color:var(--wp--preset--color--accent); overflow-wrap:break-word; }
.display--long{ font-size:clamp(1.875rem,4.9vw,4.25rem); } /* city/service names over ~12 chars */

/* ---------------------------------------------------------------------
   7. BUTTONS  — sharp, radius:0, colour-wipe hover. Never round these.
   --------------------------------------------------------------------- */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.625rem;
  border:0; border-radius:var(--ev-radius); padding:1.1875rem 2.75rem;
  font-family:inherit; font-size:var(--wp--preset--font-size--sm); font-weight:700;
  letter-spacing:.7px; text-transform:uppercase; cursor:pointer; text-decoration:none;
  transition:color .4s var(--ev-ease), box-shadow .4s var(--ev-ease); z-index:0;
  min-height:var(--ev-tap-min);
}
.btn>span{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.625rem; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ev-ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:scaleX(1); transform-origin:left; }
.btn svg{ width:17px; height:17px; flex:none; }

.btn--cta{ background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent); }
.btn--cta::before{ background:var(--wp--preset--color--brand); }
.btn--cta:hover,.btn--cta:focus-visible{ color:#fff; box-shadow:var(--ev-shadow-lift); }

.btn--brand{ background:var(--wp--preset--color--brand); color:#fff; }
.btn--brand::before{ background:var(--wp--preset--color--accent); }
.btn--brand:hover,.btn--brand:focus-visible{ color:var(--wp--preset--color--on-accent); }

.btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); } /* dark contexts only */
.btn--ghost::before{ background:#fff; }
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--wp--preset--color--brand); }

.btn--sm{ padding:.8125rem 1.75rem; font-size:.8125rem; }
.btn--block{ width:100%; justify-content:center; }

/* ---------------------------------------------------------------------
   8. ICON BADGES  — square by default; --round is a deliberate accent
   --------------------------------------------------------------------- */
.ibadge{
  display:grid; place-items:center; width:75px; height:75px; flex:none;
  transition:.35s var(--ev-ease); color:var(--wp--preset--color--brand);
}
.ibadge svg{ width:34px; height:34px; }
.ibadge--bordered{ border:3px solid var(--wp--preset--color--line); }
.ibadge--round{ border-radius:50%; }
.ibadge--fill{ background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent); }
.ibadge--navy{ background:var(--wp--preset--color--brand); color:var(--wp--preset--color--accent); }
.ibadge--sm{ width:50px; height:50px; } .ibadge--sm svg{ width:22px; height:22px; }
.ibadge--lg{ width:90px; height:90px; } .ibadge--lg svg{ width:44px; height:44px; }

/* ---------------------------------------------------------------------
   9. TRUST STRIP
   --------------------------------------------------------------------- */
.trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; }
.trust-strip--3{ grid-template-columns:repeat(3,1fr); }
.trust-strip__item{ display:flex; gap:1rem; align-items:flex-start; }
.trust-strip__item h3{ font-size:1.0625rem; margin-bottom:.25rem; }
.trust-strip__item p{ font-size:.96875rem; line-height:1.7; color:var(--wp--preset--color--muted); margin:0; }

/* ---------------------------------------------------------------------
   10. CARD + GRID  — deep soft shadow, 6px lift on hover (never a tight
   material shadow)
   --------------------------------------------------------------------- */
/* Flexbox, not CSS Grid, deliberately: an incomplete last row (e.g. 5 cards
   in a 4-column grid) must CENTRE itself, not sit flush-left with empty
   track space beside it. `justify-content:center` gives that for free on
   every page, present and future, with zero per-page markup changes —
   a fixed `repeat(N,1fr)` grid can't do this without fragile nth-child
   math. Full rows render identically either way. */
.grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.875rem; }
.grid > *{ flex:1 1 100%; max-width:100%; }
.grid--2 > *{ flex-basis:calc(50% - .9375rem); max-width:calc(50% - .9375rem); }
.grid--3 > *{ flex-basis:calc(33.333% - 1.25rem); max-width:calc(33.333% - 1.25rem); }
.grid--4 > *{ flex-basis:calc(25% - 1.40625rem); max-width:calc(25% - 1.40625rem); }

.card{
  background:var(--wp--preset--color--white); box-shadow:var(--ev-shadow-card);
  transition:box-shadow .4s var(--ev-ease), transform .4s var(--ev-ease); position:relative;
}
.card:hover{ box-shadow:var(--ev-shadow-card-hover); transform:translateY(-6px); }
.card__media{ position:relative; overflow:hidden; }
.card__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s var(--ev-ease); }
.card:hover .card__media img{ transform:scale(1.09); }
.card__number{
  position:absolute; right:0; top:0; background:var(--wp--preset--color--brand); color:#fff;
  font-size:var(--wp--preset--font-size--xs); font-weight:800; letter-spacing:.16em; padding:.5rem 1rem;
}
.card__body{ padding:1.75rem 1.75rem 1.875rem; }
.card__badge{ margin:-3.875rem 0 .875rem; background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent); position:relative; }
.card__body h3{ font-size:var(--wp--preset--font-size--md); margin-bottom:.5625rem; }
.card__body p{ font-size:1rem; line-height:1.75; }
.card__more{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-size:.8125rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--wp--preset--color--brand);
}
.card__more svg{ width:15px; height:15px; transition:transform .3s var(--ev-ease); }
.card:hover .card__more svg{ transform:translateX(5px); }

/* ---------------------------------------------------------------------
   11. PROCESS STEPS  — numbered, dashed connector (row layout). A vertical
   timeline is a LAYOUT-ONLY per-page override (grid-template-columns:1fr +
   connector repositioned) — never a new colour/shadow value.
   --------------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.875rem; position:relative; }
.steps--3{ grid-template-columns:repeat(3,1fr); }
.steps::before{
  content:""; position:absolute; top:37px; left:11%; right:11%; height:3px;
  background:repeating-linear-gradient(90deg, var(--wp--preset--color--line2) 0 14px, transparent 14px 26px);
}
.step{ position:relative; text-align:center; }
.step__no{
  position:relative; display:grid; place-items:center; width:74px; height:74px; margin:0 auto 1.25rem;
  background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent);
  font-size:1.5625rem; font-weight:900; box-shadow:0 0 0 10px var(--wp--preset--color--white);
  transition:.35s var(--ev-ease);
}
.step:hover .step__no{ background:var(--wp--preset--color--brand); color:var(--wp--preset--color--accent); }
.step h3{ font-size:var(--wp--preset--font-size--md); margin-bottom:.5rem; }
.step p{ font-size:1rem; line-height:1.72; }

/* ---------------------------------------------------------------------
   12. ICON LIST  — replaces every bullet list of factors/benefits/why-us
   points. `--plain` is the compact checkmark form (no card/shadow).
   --------------------------------------------------------------------- */
/* Flexbox for the same reason as .grid above (§10): an odd item count in
   --2col must centre its orphan last row, not leave it flush-left with a
   blank gap beside it. */
.icon-list{ display:flex; flex-direction:column; gap:1.5rem; }
.icon-list--2col{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
.icon-list--2col > .icon-list__item{ flex:1 1 calc(50% - .75rem); max-width:calc(50% - .75rem); }
.icon-list__item{
  display:flex; gap:1.25rem; align-items:flex-start; background:var(--wp--preset--color--white);
  padding:1.625rem 1.75rem; box-shadow:var(--ev-shadow-card); transition:.35s var(--ev-ease);
}
.icon-list__item:hover{ box-shadow:var(--ev-shadow-card-hover); transform:translateX(6px); }
.icon-list__item:hover .ibadge{ background:var(--wp--preset--color--brand); color:var(--wp--preset--color--accent); border-color:var(--wp--preset--color--brand); }
.icon-list__item h3{ font-size:var(--wp--preset--font-size--md); margin-bottom:.375rem; }
.icon-list__item p{ font-size:1rem; line-height:1.72; margin:0; }

.icon-list--plain{ gap:.875rem; }
.icon-list--plain .icon-list__item{ background:transparent; box-shadow:none; padding:0; }
.icon-list--plain .icon-list__item:hover{ transform:none; box-shadow:none; }
.icon-list--plain .icon-list__item:hover .ibadge{ background:none; color:var(--wp--preset--color--brand); border-color:var(--wp--preset--color--line); }
.icon-list--plain svg.check{ width:1.375rem; height:1.375rem; flex:none; color:var(--wp--preset--color--brand); margin-top:.1875rem; }

/* ---------------------------------------------------------------------
   13. NOTICE  — the reserved, non-decorative yellow band (call-to-action
   safety prompts) — and NOTICE--DANGER, the serious bordered variant for
   genuine hazard warnings (electrical/fire), never a paragraph.
   --------------------------------------------------------------------- */
.notice{ background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent); }
.notice__inner{ display:flex; gap:1.875rem; align-items:center; justify-content:space-between; padding:2.375rem 1.125rem; flex-wrap:wrap; }
.notice__text{ display:flex; gap:1.25rem; align-items:center; max-width:70ch; }
.notice__icon{ width:46px; height:46px; flex:none; }
.notice h2,.notice h3{ font-size:clamp(1.3125rem,2.6vw,1.8125rem); color:var(--wp--preset--color--on-accent); line-height:1.28; }
.notice p{ font-size:.9375rem; color:#2a2409; margin-top:.3125rem; }
.notice .btn--brand::before{ background:#fff; }
.notice .btn--brand:hover{ color:var(--wp--preset--color--brand); }

.notice--danger{
  background:var(--wp--preset--color--white); color:var(--wp--preset--color--ink);
  border:2px solid var(--wp--preset--color--danger); border-left-width:8px;
}
.notice--danger .notice__inner{ padding:1.75rem; justify-content:flex-start; }
.notice--danger .notice__icon{ color:var(--wp--preset--color--danger); }
.notice--danger h2,.notice--danger h3{ color:var(--wp--preset--color--ink); }
.notice--danger p{ color:var(--wp--preset--color--text); }
.notice--danger .btn--brand{ background:var(--wp--preset--color--danger); }
.notice--danger .btn--brand::before{ background:var(--wp--preset--color--ink); }
.notice--danger .btn--brand:hover{ color:#fff; }

/* ---------------------------------------------------------------------
   14. CHIPS
   --------------------------------------------------------------------- */
.chip-cluster{ display:flex; flex-wrap:wrap; gap:.6875rem; margin-top:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5625rem 1.125rem; min-height:var(--ev-tap-min);
  background:var(--wp--preset--color--white); border:1px solid var(--wp--preset--color--line);
  font-size:.875rem; color:var(--wp--preset--color--ink); transition:.3s var(--ev-ease);
}
.chip::before{ content:""; width:7px; height:7px; background:var(--wp--preset--color--accent); flex:none; }
.chip:hover,.chip:focus-visible{ background:var(--wp--preset--color--brand); color:#fff; border-color:var(--wp--preset--color--brand); }

/* ---------------------------------------------------------------------
   15. FAQ ACCORDION  — <details>/<summary>, works with JS off. Uses the
   arrow-rotate convention (→ closed / ↓ open) plus a numbered marker.
   --------------------------------------------------------------------- */
.faq-list{ display:grid; gap:.875rem; }
.faq{ background:var(--wp--preset--color--white); border:1px solid var(--wp--preset--color--line); transition:.3s var(--ev-ease); }
.faq[open]{ box-shadow:var(--ev-shadow-card); border-color:transparent; }
.faq summary{
  list-style:none; cursor:pointer; display:flex; gap:1rem; align-items:center;
  padding:1.25rem 1.375rem; font-weight:700; font-size:1.03125rem; color:var(--wp--preset--color--ink); line-height:1.45;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq__qn{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  background:var(--wp--preset--color--tint); color:var(--wp--preset--color--brand); font-size:.8125rem; font-weight:900;
}
.faq[open] .faq__qn{ background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent); }
.faq__arrow{ margin-left:auto; flex:none; width:22px; height:22px; color:var(--wp--preset--color--muted); transition:transform .3s var(--ev-ease), color .3s; }
.faq[open] .faq__arrow{ transform:rotate(90deg); color:var(--wp--preset--color--brand); }
.faq__answer{ padding:0 1.375rem 1.375rem; font-size:1rem; line-height:1.8; }

/* ---------------------------------------------------------------------
   16. STAT RAIL  — ghost numeral behind a REAL, non-invented figure only.
   Designed for use on `.section--dark`.
   --------------------------------------------------------------------- */
.stat-rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.875rem; text-align:center; }
.stat-rail--3{ grid-template-columns:repeat(3,1fr); }
.stat-rail__item{ position:relative; padding-top:2.125rem; }
.stat-rail__ghost{
  position:absolute; top:0; left:0; right:0; font-size:6rem; line-height:.8; font-weight:900;
  color:rgba(255,255,255,.06); letter-spacing:-.04em; pointer-events:none; user-select:none;
}
.stat-rail__value{ position:relative; display:block; font-size:2.875rem; font-weight:900; color:var(--wp--preset--color--accent); line-height:1.05; letter-spacing:-.02em; }
.stat-rail__label{ position:relative; display:block; margin-top:.5rem; font-size:.875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; }
.stat-rail__note{ position:relative; display:block; margin-top:.375rem; font-size:.84375rem; color:var(--wp--preset--color--dark-muted); font-weight:400; }

/* ---------------------------------------------------------------------
   17. BREADCRUMBS
   --------------------------------------------------------------------- */
.breadcrumbs{ display:flex; gap:.625rem; flex-wrap:wrap; font-size:.84375rem; margin:0 0 1rem; list-style:none; padding:0; color:var(--wp--preset--color--muted); }
.breadcrumbs a{ display:inline-flex; align-items:center; min-height:var(--ev-tap-min); color:var(--wp--preset--color--brand); text-decoration:underline; }
.breadcrumbs li{ display:inline-flex; align-items:center; }
.breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:.625rem; opacity:.45; }
.breadcrumbs li[aria-current]{ color:var(--wp--preset--color--ink); }
.breadcrumbs.on-dark{ color:var(--wp--preset--color--dark-muted); }
.breadcrumbs.on-dark a{ color:#fff; }

/* ---------------------------------------------------------------------
   18. CONTRAST PAIR  — "this vs. that" boundary block (e.g. Netzbetreiber
   vs. Elektriker zuständig; Leistungsumfang enthalten vs. nicht enthalten).
   No new colour introduced — reuses --brand (yes side) and --danger (no
   side), exactly like the existing do/dont convention in this style.
   --------------------------------------------------------------------- */
.contrast-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--wp--preset--color--line); }
.contrast-pair__side{ background:var(--wp--preset--color--white); padding:2rem 1.875rem; border-top:5px solid transparent; }
.contrast-pair__side--no{ border-top-color:var(--wp--preset--color--danger); }
.contrast-pair__side--yes{ border-top-color:var(--wp--preset--color--brand); }
.contrast-pair__label{ display:flex; align-items:center; gap:.625rem; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.contrast-pair__side--no .contrast-pair__label{ color:var(--wp--preset--color--danger); }
.contrast-pair__side--yes .contrast-pair__label{ color:var(--wp--preset--color--brand); }
.contrast-pair__label svg{ width:18px; height:18px; flex:none; }
.contrast-pair ul{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.contrast-pair li{ display:flex; gap:.625rem; align-items:flex-start; font-size:.96875rem; color:var(--wp--preset--color--text); }
.contrast-pair li svg{ width:18px; height:18px; flex:none; margin-top:.1875rem; }
.contrast-pair__side--no li svg{ color:var(--wp--preset--color--danger); }
.contrast-pair__side--yes li svg{ color:var(--wp--preset--color--brand); }

/* ---------------------------------------------------------------------
   19. CALLROW  — circular accent icon + phone block; the WHOLE row is
   one tel: link.
   --------------------------------------------------------------------- */
.callrow{ display:flex; align-items:center; gap:1.125rem; margin-top:2.125rem; }
.callrow__ic{
  display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent); flex:none; transition:.35s var(--ev-ease);
}
.callrow:hover .callrow__ic,.callrow:focus-visible .callrow__ic{ background:var(--wp--preset--color--brand); color:var(--wp--preset--color--accent); }
.callrow__ic svg{ width:26px; height:26px; }
.callrow span.k{ display:block; font-size:.90625rem; color:var(--wp--preset--color--muted); }
.callrow b{ display:block; font-size:clamp(1.25rem,2.3vw,1.75rem); color:var(--wp--preset--color--ink); letter-spacing:-.01em; line-height:1.25; }
.callrow.on-dark span.k{ color:var(--wp--preset--color--dark-muted); }
.callrow.on-dark b{ color:#fff; }

/* ---------------------------------------------------------------------
   20. PANELSPLIT / PANEL / PROW  — edge-to-edge feature split. The panel
   bleeds to the viewport edge (no .container inside it). Also the generic
   .split for a text+media feature-split (photo either side via --rev).
   --------------------------------------------------------------------- */
.panelsplit{ display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.panel{
  background:var(--wp--preset--color--brand); color:var(--wp--preset--color--dark-muted);
  padding:clamp(2.375rem,5vw,4.25rem); position:relative; overflow:hidden;
  align-self:stretch; display:flex; flex-direction:column; justify-content:center;
}
.panel h2{ color:#fff; font-size:clamp(1.5625rem,3.3vw,2.625rem); line-height:1.18; margin-bottom:1.5rem; }
.prow{ display:flex; gap:1.125rem; align-items:flex-start; padding:1.25rem 0; border-top:1px solid rgba(255,255,255,.13); }
.prow svg{ width:36px; height:36px; color:var(--wp--preset--color--accent); flex:none; }
.prow h3{ color:#fff; font-size:1.125rem; margin-bottom:.3125rem; }
.prow p{ color:var(--wp--preset--color--dark-muted); font-size:.9375rem; line-height:1.7; margin:0; }
.panel-body{ padding:clamp(2.125rem,4vw,3.875rem); }

.split{ display:grid; grid-template-columns:.95fr 1.05fr; gap:3.5rem; align-items:center; }
.split--rev{ grid-template-columns:1.05fr .95fr; }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; }
.split__badge{
  position:absolute; right:-22px; bottom:-22px; background:var(--wp--preset--color--brand); color:#fff;
  padding:1.625rem 1.875rem; max-width:15rem; box-shadow:var(--ev-shadow-lift);
}
.split__badge b{ display:block; font-size:2.125rem; font-weight:900; color:var(--wp--preset--color--accent); line-height:1; }
.split__badge span{ display:block; font-size:.8125rem; margin-top:.375rem; color:var(--wp--preset--color--dark-muted); line-height:1.5; }

.checks{ list-style:none; padding:0; margin:1.625rem 0 0; display:grid; gap:.875rem; }
.checks li{ display:flex; gap:.8125rem; align-items:flex-start; font-size:.96875rem; color:var(--wp--preset--color--text); }
.checks svg{ width:22px; height:22px; flex:none; color:var(--wp--preset--color--brand); margin-top:.1875rem; }
.checks b{ color:var(--wp--preset--color--ink); }

/* ---------------------------------------------------------------------
   21. SITE HEADER + NAV  (structure lives in parts/header.html)
   --------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:120; background:var(--wp--preset--color--white);
  border-bottom:1px solid var(--wp--preset--color--line); transition:box-shadow .3s var(--ev-ease);
}
.site-header.is-stuck{ box-shadow:0 10px 30px rgba(5,5,5,.09); }
.site-nav{ display:flex; align-items:center; gap:1.375rem; min-height:5.125rem; }
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:800; font-size:1.1875rem; color:var(--wp--preset--color--ink); line-height:1.15; }
.brand__mark{ display:grid; place-items:center; width:44px; height:44px; background:var(--wp--preset--color--brand); color:var(--wp--preset--color--accent); flex:none; }
.brand small{ display:block; font-size:.71875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--muted); }

.menu{ display:flex; gap:1.75rem; list-style:none; padding:0; margin:0 0 0 auto; align-items:center; }
.menu>li{ position:relative; }
.menu a{
  font-size:var(--wp--preset--font-size--sm); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--wp--preset--color--ink); position:relative; padding:.5rem 0; display:inline-block;
}
.menu a::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--wp--preset--color--accent); transition:width .3s var(--ev-ease); }
.menu a:hover::after,.menu a[aria-current="page"]::after{ width:100%; }
.menu a[aria-current="page"]{ color:var(--wp--preset--color--brand); }

.nav-trigger{
  display:inline-flex; align-items:center; gap:.375rem; background:none; border:0; font:inherit;
  font-size:var(--wp--preset--font-size--sm); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--wp--preset--color--ink); cursor:pointer; padding:.5rem 0;
}
.nav-trigger .car{ width:11px; height:11px; transition:transform .25s var(--ev-ease); }
.nav-trigger[aria-expanded="true"] .car{ transform:rotate(180deg); }
.nav-trigger.is-active-parent{ color:var(--wp--preset--color--brand); }

.dropdown{ position:relative; }
.dropdown-panel{
  position:absolute; top:100%; left:0; min-width:23rem; background:var(--wp--preset--color--white);
  border:1px solid var(--wp--preset--color--line); box-shadow:var(--ev-shadow-soft); padding:1.25rem; z-index:130;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s var(--ev-ease), transform .2s var(--ev-ease), visibility .2s;
}
.dropdown-panel.is-open,
.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:none; }
.dropdown-panel--wide{ min-width:36rem; }
.dropdown-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:.125rem 1.5rem; }
.dropdown-cols--3{ grid-template-columns:repeat(3,1fr); }
.dropdown-panel a{
  display:block; padding:.5rem .5rem; font-size:.9375rem; font-weight:500; text-transform:none;
  letter-spacing:0; color:var(--wp--preset--color--text);
}
.dropdown-panel a:hover,.dropdown-panel a:focus-visible{ color:var(--wp--preset--color--brand); background:var(--wp--preset--color--tint); }
.dropdown-panel .dropdown-all{
  grid-column:1/-1; margin-top:.5rem; padding-top:.75rem; border-top:1px solid var(--wp--preset--color--line);
  font-weight:800; text-transform:uppercase; font-size:.8125rem; letter-spacing:.08em; color:var(--wp--preset--color--brand);
}

.nav-phone{ display:flex; align-items:center; gap:.75rem; min-height:var(--ev-tap-min); }
.nav-phone__ic{ display:grid; place-items:center; width:46px; height:46px; background:var(--wp--preset--color--tint); color:var(--wp--preset--color--brand); flex:none; }
.nav-phone b{ display:block; font-size:1.125rem; color:var(--wp--preset--color--ink); letter-spacing:-.01em; line-height:1.25; }
.nav-phone span.k{ display:block; font-size:.71875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--wp--preset--color--muted); }

.nav-burger{
  display:none; place-items:center; width:46px; height:46px; background:var(--wp--preset--color--brand);
  color:#fff; border:0; cursor:pointer; flex:none;
}

/* mobile drawer */
.nav-drawer{ display:none; position:fixed; inset:0; z-index:200; background:rgba(11,18,32,.55); }
.nav-drawer.is-open{ display:block; }
.nav-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(88vw,23.75rem); background:var(--wp--preset--color--white);
  overflow-y:auto; padding:1.5rem; box-shadow:var(--ev-shadow-lift); display:flex; flex-direction:column; gap:1.25rem;
}
.nav-drawer__close{ margin-left:auto; display:flex; width:44px; height:44px; align-items:center; justify-content:center; background:var(--wp--preset--color--tint); border:0; cursor:pointer; }
.nav-drawer ul{ list-style:none; padding:0; margin:0; }
.nav-drawer > .nav-drawer__panel > ul > li{ border-bottom:1px solid var(--wp--preset--color--line); }
.nav-drawer a{ display:block; padding:.875rem .25rem; font-weight:600; text-transform:uppercase; font-size:.9375rem; color:var(--wp--preset--color--ink); }
.nav-accordion-trigger{
  display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0; font:inherit;
  padding:.875rem .25rem; font-weight:600; text-transform:uppercase; font-size:.9375rem; color:var(--wp--preset--color--ink); cursor:pointer;
}
.nav-accordion-trigger .car{ width:12px; height:12px; transition:transform .25s var(--ev-ease); }
.nav-accordion-trigger[aria-expanded="true"] .car{ transform:rotate(180deg); }
.nav-accordion-panel{ display:none; padding:0 0 .75rem 1rem; }
.nav-accordion-panel.is-open{ display:block; }
.nav-accordion-panel a{ padding:.625rem .25rem; font-weight:500; text-transform:none; font-size:.9375rem; }
.nav-drawer__call{ margin-top:auto; }

/* ---------------------------------------------------------------------
   22. CALLBAR  (sticky mobile bottom bar) + SCROLL-TO-TOP
   --------------------------------------------------------------------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--wp--preset--color--white);
  border-top:1px solid var(--wp--preset--color--line); box-shadow:0 -6px 22px rgba(5,5,5,.13);
  padding:.625rem .875rem; display:none;
}
.callbar .btn{ width:100%; justify-content:center; }

.to-top{
  position:fixed; right:1.25rem; bottom:1.375rem; z-index:120; width:50px; height:50px; border:0; cursor:pointer;
  background:var(--wp--preset--color--brand); color:var(--wp--preset--color--accent); display:grid; place-items:center;
  box-shadow:0 7px 30px rgba(0,0,0,.3); opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s var(--ev-ease), transform .3s var(--ev-ease), background .3s;
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent); }

/* ---------------------------------------------------------------------
   23. SITE FOOTER
   --------------------------------------------------------------------- */
.site-footer{ background:var(--wp--preset--color--dark); color:var(--wp--preset--color--dark-muted); font-size:1rem; }
.footer-intro{ padding-block-start:var(--wp--preset--spacing--section); max-width:52ch; }
.footer-intro p{ margin-top:.75rem; line-height:1.75; }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; padding-block:2.5rem 2.875rem; }
.footer-grid h3{ font-size:1rem; color:#fff; margin-bottom:1.25rem; position:relative; padding-bottom:.875rem; }
.footer-grid h3::after{ content:""; position:absolute; left:0; bottom:0; width:38px; height:3px; background:var(--wp--preset--color--accent); }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6875rem; }
.footer-grid a{ color:var(--wp--preset--color--dark-muted); }
.footer-grid a:hover{ color:var(--wp--preset--color--accent); }
.footer-brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.125rem; color:#fff; font-weight:800; font-size:1.1875rem; }
.footer-contact li{ display:flex; gap:.75rem; align-items:flex-start; }
.footer-contact svg{ width:17px; height:17px; color:var(--wp--preset--color--accent); flex:none; margin-top:.3125rem; }
.footer-contact b{ display:block; color:#fff; font-size:1.0625rem; }
.footer-contact a{ color:#fff; display:inline-flex; align-items:center; min-height:var(--ev-tap-min); }
.footer-bar{ border-top:1px solid var(--wp--preset--color--dark-line); padding-block:1.375rem; display:flex; gap:1.125rem; justify-content:space-between; flex-wrap:wrap; font-size:.84375rem; }
.footer-legal{ display:flex; gap:1.25rem; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.footer-legal a{ min-height:var(--ev-tap-min); display:inline-flex; align-items:center; color:var(--wp--preset--color--dark-muted); }
.footer-legal a:hover{ color:var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------------
   24. HERO  — base + the 7 named variants. See DESIGN-LANGUAGE.md for the
   exact recipe of each. Vary hero per page; never repeat on siblings.
   --------------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; background:var(--wp--preset--color--brand); color:var(--wp--preset--color--dark-muted); }
.hero .container{ padding-block-start:clamp(3.25rem,6.5vw,5.75rem); padding-block-end:0; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:3.25rem; align-items:center; }
.hero-cta{ display:flex; gap:.875rem; flex-wrap:wrap; margin-top:2rem; align-items:center; }
.hero-note{ display:flex; align-items:center; gap:.5625rem; font-size:.84375rem; color:var(--wp--preset--color--dark-muted); margin-top:1rem; }
.hero-note svg{ width:16px; height:16px; color:var(--wp--preset--color--accent); flex:none; }

.hero-rail{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--wp--preset--color--dark-line); margin-top:clamp(2.5rem,5vw,4.375rem); }
.hero-rail--3{ grid-template-columns:repeat(3,1fr); }
.hero-rail>div{ background:var(--wp--preset--color--brand-hover); padding:1.625rem 1.5rem; display:flex; gap:.875rem; align-items:center; }
.hero-rail svg{ width:26px; height:26px; color:var(--wp--preset--color--accent); flex:none; }
.hero-rail b{ display:block; color:#fff; font-size:.9375rem; line-height:1.35; }
.hero-rail span{ display:block; font-size:.8125rem; color:var(--wp--preset--color--dark-muted); }

.hero-media{ position:relative; }
.hero-media img{ width:100%; aspect-ratio:9/10; object-fit:cover; }
.hero-media__tag{ position:absolute; left:-26px; bottom:2.375rem; background:var(--wp--preset--color--accent); color:var(--wp--preset--color--on-accent); padding:1.125rem 1.625rem; max-width:14.375rem; box-shadow:var(--ev-shadow-lift); }

/* 24a — solid-panel: navy colour panel, no photo, compact trust strip below */
.hero--solid-panel .hero-grid{ grid-template-columns:1fr; max-width:44rem; }

/* 24b — emergency-bar: near-black full-bleed, single centred display, no photo */
.hero--emergency-bar{ background:var(--wp--preset--color--dark); }
.hero--emergency-bar .hero-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.hero--emergency-bar .display{ font-size:clamp(2.0625rem,5.4vw,4.5rem); }
.hero--emergency-bar .hero-cta{ justify-content:center; }
.hero--emergency-bar .lead{ margin-inline:auto; }
.hero--emergency-bar .hero-note{ justify-content:center; }
.hero--emergency-bar .hero-rail{ max-width:56rem; margin-inline:auto; }

/* 24c — split-phone: calmer tint bg, sentence-case h1, .callrow phone block right */
.hero--split-phone{ background:var(--wp--preset--color--tint); color:var(--wp--preset--color--text); }
.hero--split-phone .container{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.hero--split-phone h1{ font-size:clamp(1.8125rem,4.3vw,3.25rem); color:var(--wp--preset--color--ink); font-weight:800; letter-spacing:-.01em; line-height:1.15; text-transform:none; }
.hero--split-phone .hero-note{ color:var(--wp--preset--color--muted); }
.hero--split-phone .hero-note svg{ color:var(--wp--preset--color--brand); }
.hero--split-phone .btn--ghost{ color:var(--wp--preset--color--ink); box-shadow:inset 0 0 0 2px var(--wp--preset--color--line2); }
.hero--split-phone .btn--ghost::before{ background:var(--wp--preset--color--brand); }
.hero--split-phone .btn--ghost:hover{ color:#fff; }
.hero-phoneblock{ background:var(--wp--preset--color--brand); color:var(--wp--preset--color--dark-muted); padding:1.875rem; box-shadow:var(--ev-shadow-lift); text-align:center; }
.hero-phoneblock>span.k{ display:block; font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--wp--preset--color--accent); margin-bottom:.625rem; }
.hero-phoneblock .callrow{ justify-content:center; margin-top:0; }

/* 24d — compact-4card / compact-3card: shorter hero, icon-card row directly under it */
.hero--compact-4card .container,.hero--compact-3card .container{ padding-block:clamp(2.75rem,5.5vw,4.25rem) 0; }
.hero-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--wp--preset--color--dark-line); margin-top:clamp(2rem,4vw,3rem); }
.hero-cards--3{ grid-template-columns:repeat(3,1fr); }
.hero-cards>a,.hero-cards>div{ background:var(--wp--preset--color--brand-hover); padding:1.5rem 1.375rem; display:flex; flex-direction:column; gap:.75rem; transition:background .3s var(--ev-ease); }
.hero-cards>a:hover,.hero-cards>a:focus-visible{ background:var(--wp--preset--color--brand); }
.hero-cards .ibadge{ color:var(--wp--preset--color--accent); }
.hero-cards b{ color:#fff; font-size:1rem; }
.hero-cards span{ color:var(--wp--preset--color--dark-muted); font-size:.84375rem; }

/* 24e — norm-panel: solid panel + a plain-text norm rail (never a badge) */
.hero-normrail{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--wp--preset--color--dark-line); font-size:.84375rem; color:var(--wp--preset--color--dark-muted); }
.hero-normrail strong{ color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; }
.hero-normrail code{ font-family:ui-monospace,Consolas,monospace; color:var(--wp--preset--color--accent); background:none; font-size:.84375rem; }

/* 24f — local-context: calm, place-first, no giant display; for the 12 Stadtteil pages */
.hero--local-context{ background:var(--wp--preset--color--white); color:var(--wp--preset--color--text); }
.hero--local-context .container{ padding-block:clamp(2.75rem,5vw,4.5rem); }
.hero--local-context h1{ font-size:var(--wp--preset--font-size--title); color:var(--wp--preset--color--ink); font-weight:800; line-height:1.16; letter-spacing:-.01em; text-transform:none; max-width:20ch; }
.hero--local-context .hero-note{ color:var(--wp--preset--color--muted); }
.hero--local-context .hero-note svg{ color:var(--wp--preset--color--brand); }
.hero--local-context .chip-cluster{ margin-top:1.75rem; }

/* ---------------------------------------------------------------------
   25. REVEAL (scroll-in) + REDUCED MOTION
   --------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ev-ease), transform .7s var(--ev-ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.09s; }
.reveal.d2{ transition-delay:.18s; }
.reveal.d3{ transition-delay:.27s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .card:hover,.card:hover .card__media img,.icon-list__item:hover,.hero-cards>a:hover{ transform:none !important; }
}

/* ---------------------------------------------------------------------
   26. RESPONSIVE

   Nav breakpoint note: the header nav carries 9 top-level items (Start,
   Leistungen▾, Stadtteile▾, Notdienst, Preise, Ratgeber, Über uns, FAQ,
   Kontakt) plus the brand mark and the phone block. That genuinely needs
   ≈1300px of clear width — it does NOT fit at "tablet" widths, only on an
   actual desktop-class viewport. The mobile drawer nav is switched in at
   1240px (not the old 760px) for exactly that reason: below it, the
   desktop menu would wrap or overflow rather than just "look a bit tight".
   --------------------------------------------------------------------- */
.dropdown-panel{ max-width:calc(100vw - 3rem); } /* defense-in-depth: never overflow the viewport edge even above the nav breakpoint */

@media (max-width:1240px){
  /* the header's phone CTA hands off to the sticky callbar at this width —
     the number is never hidden, only relocated; see DESIGN-LANGUAGE.md */
  .menu,.nav-phone,.dropdown{ display:none; }
  .nav-burger{ display:grid; margin-left:auto; }
  .callbar{ display:block; }
  body{ padding-bottom:var(--ev-callbar-h); }
  .to-top{ bottom:calc(var(--ev-callbar-h) + 12px); right:.875rem; }
}

@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:2.375rem; }
  .hero-media{ max-width:32.5rem; }
  .hero-media__tag{ left:auto; right:1.125rem; }
  .hero-rail,.hero-cards,.trust-strip,.stat-rail{ grid-template-columns:1fr 1fr; }
  .grid--3 > *,.grid--4 > *{ flex-basis:calc(50% - .9375rem); max-width:calc(50% - .9375rem); }
  .panelsplit{ grid-template-columns:1fr; }
  .split,.split--rev{ grid-template-columns:1fr; gap:2.5rem; }
  .split__badge{ right:.875rem; bottom:-1rem; }
  .section-head.split{ grid-template-columns:1fr; align-items:start; }
  .steps,.steps--3{ grid-template-columns:1fr 1fr; }
  .steps::before{ display:none; }
  .icon-list--2col > .icon-list__item{ flex-basis:100%; max-width:100%; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contrast-pair{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .grid--2 > *,.grid--3 > *,.grid--4 > *{ flex-basis:100%; max-width:100%; }
  .trust-strip,.trust-strip--3,.hero-rail,.hero-rail--3,.hero-cards,.hero-cards--3,
  .steps,.steps--3,.footer-grid,.stat-rail,.stat-rail--3{ grid-template-columns:1fr; }
  .display{ letter-spacing:-.015em; }
  .btn{ width:100%; justify-content:center; padding:1.0625rem 1.625rem; }
  .hero-cta{ gap:.6875rem; }
  .notice__inner{ flex-direction:column; align-items:flex-start; }
  .split__badge{ position:static; max-width:none; margin-top:-.25rem; }
}

@media (max-width:460px){
  /* small phones (iPhone SE/mini and similar, ≤~390-430px CSS px): tighten
     spacing without ever dropping below the 18px/44px legibility floor. */
  .container{ padding-inline:1.125rem; }
  .section{ padding-block:clamp(2.75rem,10vw,var(--wp--preset--spacing--section)); }
  .card__body,.panel,.panel-body{ padding-left:1.375rem; padding-right:1.375rem; }
  .hero-cards > a,.hero-rail > div{ padding:1.375rem 1.125rem; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .nav-drawer__panel{ width:100vw; }
  .callrow{ flex-wrap:wrap; }
  .callrow b{ font-size:1.375rem; }
}