/* ==========================================================================
   ZapStation — theme styles
   Loaded after Bootstrap 5.3, so everything here either adds new components
   (.zs-*) or intentionally overrides a Bootstrap default.

   Naming: every class is prefixed `zs-` so nothing collides with Bootstrap.
   Structure:
     1. Design tokens
     2. Base / typography
     3. Header + navigation
     4. Buttons + form controls
     5. Hero + search
     6. Cards (station, article, city, state)
     7. Filters
     8. Station detail
     9. Article / prose
    10. Calculator
    11. Footer + cookie banner
    12. Utilities + responsive
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   Green reads as "electric/clean energy" and is the convention in this
   category; the deep navy keeps large surfaces from looking neon.
   ========================================================================== */
:root {
  --zs-green:        #00a86b;
  --zs-green-dark:   #00875a;
  --zs-green-light:  #e6f7f0;
  --zs-navy:         #0d1b2a;
  --zs-navy-soft:    #1b2b3f;

  --zs-ink:          #16202b;
  --zs-body:         #4a5764;
  --zs-muted:        #6b7885;

  --zs-line:         #e3e8ed;
  --zs-line-soft:    #eef2f5;
  --zs-surface:      #f6f9fb;
  --zs-white:        #ffffff;

  /* Power-class accents — used on badges and the left rule of station cards. */
  --zs-hpc:          #7c3aed;   /* 150 kW+   */
  --zs-fast:         #0284c7;   /* 50–149 kW */
  --zs-ac:           #00a86b;   /* 22–49 kW  */
  --zs-normal:       #64748b;   /* < 22 kW   */

  --zs-radius:       12px;
  --zs-radius-sm:    8px;
  --zs-radius-lg:    18px;

  --zs-shadow-sm:    0 1px 2px rgba(13, 27, 42, .06);
  --zs-shadow:       0 2px 8px rgba(13, 27, 42, .07);
  --zs-shadow-lg:    0 8px 28px rgba(13, 27, 42, .10);

  --zs-header-h:     72px;
}

/* ==========================================================================
   2. BASE / TYPOGRAPHY
   ========================================================================== */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--zs-body);
  background: var(--zs-white);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--zs-ink);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
}

/* German compound nouns get long; allow breaking rather than overflowing. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }

a { color: var(--zs-green-dark); text-decoration: none; }
a:hover { color: var(--zs-green); text-decoration: underline; }

/* Visible focus for keyboard users on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--zs-green);
  outline-offset: 2px;
  border-radius: 4px;
}

.zs-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1080;
  background: var(--zs-green); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--zs-radius-sm) 0; font-weight: 600;
}
.zs-skip-link:focus { left: 0; color: #fff; }

.zs-section       { padding: clamp(2.5rem, 1.5rem + 3vw, 4.25rem) 0; }
.zs-section--tight{ padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) 0; }
.zs-surface       { background: var(--zs-surface); }

.zs-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--zs-green-dark);
}

.zs-section-head { max-width: 46rem; }
.zs-section-head h2 { margin-bottom: .5rem; }
.zs-section-head p  { color: var(--zs-muted); margin-bottom: 0; }

.zs-lead { font-size: 1.08rem; color: var(--zs-body); }

/* ==========================================================================
   3. HEADER + NAVIGATION
   ========================================================================== */
.zs-topbar {
  background: var(--zs-navy); color: #b9c6d4; font-size: .82rem;
}
.zs-topbar a { color: #dbe4ec; }
.zs-topbar a:hover { color: #fff; text-decoration: none; }

.zs-header {
  background: var(--zs-white);
  border-bottom: 1px solid var(--zs-line);
  z-index: 1030;
}

.zs-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.3rem; color: var(--zs-ink);
  letter-spacing: -.02em; text-decoration: none; line-height: 1.1;
}
.zs-brand:hover { color: var(--zs-ink); text-decoration: none; }
.zs-brand__mark {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--zs-green); flex-shrink: 0;
}
/* The mark fills its own 100×100 viewBox edge to edge, so it needs less inset
   than a typical 24×24 icon would. */
.zs-brand__mark svg { width: 24px; height: 24px; fill: #fff; }
.zs-brand__zap { color: var(--zs-green); }
/* Tagline is a legal/brand requirement: "Zapstation" means nothing in German,
   so the German descriptor has to sit with the logo. */
.zs-brand__tag {
  display: block; font-size: .68rem; font-weight: 500;
  color: var(--zs-muted); letter-spacing: .01em; margin-top: 1px;
}

.zs-nav .nav-link {
  color: var(--zs-ink); font-weight: 600; font-size: .95rem;
  padding: .5rem .85rem; border-radius: var(--zs-radius-sm);
}
.zs-nav .nav-link:hover,
.zs-nav .nav-link.active { color: var(--zs-green-dark); background: var(--zs-green-light); }

.zs-dropdown {
  border: 1px solid var(--zs-line); border-radius: var(--zs-radius);
  box-shadow: var(--zs-shadow-lg); padding: .5rem; min-width: 15rem;
}
.zs-dropdown .dropdown-item {
  border-radius: var(--zs-radius-sm); padding: .5rem .75rem;
  font-size: .93rem; color: var(--zs-ink);
}
.zs-dropdown .dropdown-item:hover { background: var(--zs-green-light); color: var(--zs-green-dark); }
/* Two columns: 16 Bundesländer in one list would run off a laptop screen. */
.zs-dropdown--states { min-width: 30rem; }
.zs-dropdown--states .zs-dropdown__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 .25rem;
}
.zs-dropdown__count { color: var(--zs-muted); font-size: .82rem; float: right; }

.zs-search-panel { background: var(--zs-surface); border-top: 1px solid var(--zs-line); }

/* ==========================================================================
   4. BUTTONS + FORM CONTROLS
   ========================================================================== */
.zs-btn-primary {
  background: var(--zs-green); border: 1px solid var(--zs-green);
  color: #fff; font-weight: 600; border-radius: var(--zs-radius-sm);
  transition: background .15s ease, border-color .15s ease;
}
.zs-btn-primary:hover,
.zs-btn-primary:focus { background: var(--zs-green-dark); border-color: var(--zs-green-dark); color: #fff; }

.zs-btn-outline {
  background: transparent; border: 1px solid var(--zs-line);
  color: var(--zs-ink); font-weight: 600; border-radius: var(--zs-radius-sm);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.zs-btn-outline:hover,
.zs-btn-outline:focus {
  border-color: var(--zs-green); color: var(--zs-green-dark); background: var(--zs-green-light);
}

.zs-btn-ghost { background: transparent; border: 0; color: var(--zs-green-dark); font-weight: 600; }
.zs-btn-ghost:hover { color: var(--zs-green); text-decoration: underline; }

.form-control, .form-select {
  border: 1px solid var(--zs-line); border-radius: var(--zs-radius-sm);
  padding: .6rem .85rem; font-size: .95rem; color: var(--zs-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--zs-green); box-shadow: 0 0 0 .2rem rgba(0, 168, 107, .15);
}
.form-check-input:checked { background-color: var(--zs-green); border-color: var(--zs-green); }
.form-check-input:focus   { border-color: var(--zs-green); box-shadow: 0 0 0 .2rem rgba(0, 168, 107, .15); }
.form-label { font-weight: 600; color: var(--zs-ink); font-size: .9rem; margin-bottom: .35rem; }

/* ==========================================================================
   5. HERO + SEARCH
   ========================================================================== */
.zs-hero {
  background:
    radial-gradient(ellipse 70% 90% at 85% 10%, rgba(0, 168, 107, .16), transparent 62%),
    linear-gradient(160deg, var(--zs-navy) 0%, var(--zs-navy-soft) 100%);
  color: #fff; padding: clamp(2.75rem, 2rem + 4vw, 5rem) 0;
}
.zs-hero h1 { color: #fff; margin-bottom: .9rem; }
.zs-hero__lede { color: #c3d0dc; font-size: 1.08rem; max-width: 40rem; margin-bottom: 1.75rem; }
.zs-hero__lede strong { color: #fff; }

.zs-searchbox {
  background: var(--zs-white); border-radius: var(--zs-radius-lg);
  padding: 1.1rem; box-shadow: var(--zs-shadow-lg);
}
.zs-searchbox .form-control, .zs-searchbox .form-select { border-color: var(--zs-line-soft); }

/* Hero stat row */
.zs-hero-stats { display: flex; flex-wrap: wrap; gap: 1.75rem 2.75rem; margin-top: 2rem; }
.zs-hero-stat__value {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800;
  color: #fff; line-height: 1.1;
  /* Tabular figures stop the numbers jittering between page loads. */
  font-variant-numeric: tabular-nums;
}
.zs-hero-stat__label { font-size: .85rem; color: #9fb0c0; }

/* Stat tiles used on state/city pages */
.zs-stat {
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); padding: 1.1rem 1.25rem; height: 100%;
}
.zs-stat__value {
  font-size: 1.65rem; font-weight: 800; color: var(--zs-ink);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.zs-stat__label { font-size: .84rem; color: var(--zs-muted); }

/* ==========================================================================
   6. CARDS
   ========================================================================== */

/* ---- Station card ---- */
.zs-station {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); padding: 1.15rem 1.25rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zs-station:hover { border-color: var(--zs-green); box-shadow: var(--zs-shadow); transform: translateY(-2px); }

/* Colour-coded left rule: the charging speed is the single most important
   attribute when scanning a list, so it is readable before any text. */
.zs-station::before {
  content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--zs-normal);
}
.zs-station--hpc::before    { background: var(--zs-hpc); }
.zs-station--schnell::before{ background: var(--zs-fast); }
.zs-station--ac::before     { background: var(--zs-ac); }

.zs-station__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .3rem; line-height: 1.35; }
.zs-station__title a { color: var(--zs-ink); }
.zs-station__title a:hover { color: var(--zs-green-dark); text-decoration: none; }
/* Stretched link makes the whole card clickable without nesting <a> tags. */
.zs-station__title a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.zs-station__addr { font-size: .87rem; color: var(--zs-muted); margin-bottom: .75rem; }
.zs-station__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  font-size: .85rem; color: var(--zs-body); margin-bottom: .75rem;
}
.zs-station__meta strong { color: var(--zs-ink); font-variant-numeric: tabular-nums; }
.zs-station__foot {
  margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--zs-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .85rem;
}
/* Avatar + name share the left side; the name truncates rather than wrapping,
   because German operator names ("Shell Recharge Solutions (BE)") are long
   enough to push the score onto a second line. */
.zs-station__operator {
  display: flex; align-items: center; gap: .5rem;
  min-width: 0; flex: 1 1 auto;
}
.zs-station__op {
  color: var(--zs-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zs-station__price { font-weight: 700; color: var(--zs-ink); font-variant-numeric: tabular-nums; }

/* ---- Operator avatar ----
   Generated initials on a hash-derived colour, or a real logo when one has
   been added to assets/img/operators/. See helpers/operator.php. */
.zs-oplogo {
  display: inline-grid; place-items: center; flex-shrink: 0;
  border-radius: 6px; color: #fff; font-weight: 700;
  line-height: 1; letter-spacing: -.02em;
  /* Initials are Latin here, but a fallback stack avoids a metric shift if an
     operator name ever transliterates to something outside the base set. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  user-select: none;
}
.zs-oplogo--sm { width: 24px; height: 24px; font-size: .62rem; border-radius: 5px; }
.zs-oplogo--md { width: 34px; height: 34px; font-size: .8rem; }
.zs-oplogo--lg { width: 52px; height: 52px; font-size: 1.15rem; border-radius: 10px; }

/* Real logo: white plate keeps a transparent PNG legible; contain (not cover)
   because logos are rarely square and must not be cropped. */
.zs-oplogo--img {
  background: #fff; border: 1px solid var(--zs-line); padding: 3px;
}
.zs-oplogo--img img { width: 100%; height: 100%; object-fit: contain; }

/* Unknown operator (~41% of German stations): a neutral plug glyph rather
   than invented initials. Muted so it reads as "no data", not as a brand. */
.zs-oplogo--unknown {
  background: var(--zs-surface); border: 1px dashed var(--zs-line);
  color: var(--zs-muted);
}
.zs-oplogo--unknown svg { width: 58%; height: 58%; }

/* ---- Badges ---- */
.zs-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  padding: .25rem .55rem; border-radius: 999px; white-space: nowrap;
}
.zs-badge--hpc     { background: #f1e9fe; color: #6d28d9; }
.zs-badge--schnell { background: #e0f2fe; color: #0369a1; }
.zs-badge--ac      { background: var(--zs-green-light); color: var(--zs-green-dark); }
.zs-badge--normal  { background: #eef1f4; color: #475569; }
.zs-badge--verified{ background: var(--zs-green-light); color: var(--zs-green-dark); }
.zs-badge--muted   { background: var(--zs-surface); color: var(--zs-muted); }

.zs-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600; color: var(--zs-body);
  background: var(--zs-surface); border: 1px solid var(--zs-line);
  padding: .2rem .55rem; border-radius: 999px;
}

/* ---- Amenity list ---- */
.zs-amenities { display: flex; flex-wrap: wrap; gap: .35rem; }
.zs-amenity {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; color: var(--zs-body);
  background: var(--zs-surface); border: 1px solid var(--zs-line-soft);
  padding: .2rem .5rem; border-radius: 999px;
}
.zs-amenity__icon { flex-shrink: 0; opacity: .7; }

/* ---- State / city tiles ---- */
.zs-tile {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); padding: .9rem 1.1rem; height: 100%;
  color: var(--zs-ink); font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.zs-tile:hover {
  border-color: var(--zs-green); background: var(--zs-green-light);
  color: var(--zs-green-dark); text-decoration: none; transform: translateY(-2px);
}
.zs-tile__count {
  font-size: .82rem; font-weight: 700; color: var(--zs-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zs-tile:hover .zs-tile__count { color: var(--zs-green-dark); }

/* ---- Operator tile (directory index) ---- */
.zs-optile {
  display: flex; align-items: center; gap: .75rem; height: 100%;
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); padding: .8rem .9rem;
  color: var(--zs-ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zs-optile:hover {
  border-color: var(--zs-green); box-shadow: var(--zs-shadow);
  transform: translateY(-2px); text-decoration: none; color: var(--zs-ink);
}
/* min-width:0 lets the long names below actually truncate inside the flex row. */
.zs-optile__body { display: flex; flex-direction: column; min-width: 0; }
.zs-optile__name {
  font-weight: 600; font-size: .92rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zs-optile__count {
  font-size: .8rem; color: var(--zs-muted); font-variant-numeric: tabular-nums;
}

/* ---- Share toolbar ---- */
.zs-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem;
  padding: .9rem 0;
}
.zs-share--compact { padding: 0; }
.zs-share__label {
  font-size: .84rem; font-weight: 600; color: var(--zs-muted);
}
.zs-share__row { display: flex; flex-wrap: wrap; gap: .4rem; }

.zs-share__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 38px; min-width: 38px; padding: 0 .6rem;
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius-sm); cursor: pointer;
  color: var(--zs-body); text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.zs-share__btn svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.zs-share__btn:hover { text-decoration: none; }
.zs-share__btn-text { font-size: .84rem; font-weight: 600; }

/* Brand colours on hover only. Always-on brand colours would make the row look
   like an advert strip and pull attention from the page's own content. */
.zs-share__btn--copy:hover  { border-color: var(--zs-green); background: var(--zs-green-light); color: var(--zs-green-dark); }
.zs-share__btn--wa:hover    { border-color: #25d366; background: #25d366; color: #fff; }
.zs-share__btn--fb:hover    { border-color: #1877f2; background: #1877f2; color: #fff; }
.zs-share__btn--li:hover    { border-color: #0a66c2; background: #0a66c2; color: #fff; }
.zs-share__btn--x:hover     { border-color: #000;    background: #000;    color: #fff; }
.zs-share__btn--mail:hover  { border-color: var(--zs-navy); background: var(--zs-navy); color: #fff; }
.zs-share__btn--print:hover { border-color: var(--zs-ink); background: var(--zs-ink); color: #fff; }

.zs-share__done {
  font-size: .82rem; font-weight: 600; color: var(--zs-green-dark);
  background: var(--zs-green-light); padding: .2rem .55rem; border-radius: 999px;
}

@media (max-width: 575.98px) {
  /* Icons only below the copy button's label — five labelled buttons wrap into
     an untidy block on a narrow screen. */
  .zs-share__btn-text { display: none; }
  .zs-share__btn { padding: 0; }
}

/* ---- Post slider ----
   Native scroll-snap, no carousel library. Every card stays in the DOM and in
   the HTML source, so crawlers see every link. */
.zs-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* don't trigger browser back-swipe */
  scroll-snap-type: x mandatory;
  /* Room for the card hover lift and focus ring, which would otherwise be
     clipped by the overflow container. */
  padding: .35rem .35rem 1rem;
  margin: -.35rem -.35rem 0;
  scrollbar-width: thin;
}
@media (min-width: 768px)  { .zs-slider__track { grid-auto-columns: minmax(300px, 1fr); } }
@media (min-width: 1200px) { .zs-slider__track { grid-auto-columns: minmax(320px, 1fr); } }

.zs-slider__item { scroll-snap-align: start; min-width: 0; }
.zs-slider__item > .zs-card { height: 100%; }

.zs-slider__track:focus-visible { outline: 3px solid var(--zs-green); outline-offset: 2px; }

/* Slim scrollbar — visible enough to signal "this scrolls", not so heavy that
   it competes with the cards. */
.zs-slider__track::-webkit-scrollbar { height: 6px; }
.zs-slider__track::-webkit-scrollbar-track { background: var(--zs-line-soft); border-radius: 3px; }
.zs-slider__track::-webkit-scrollbar-thumb { background: var(--zs-line); border-radius: 3px; }
.zs-slider__track::-webkit-scrollbar-thumb:hover { background: var(--zs-muted); }

.zs-slider__nav { display: flex; gap: .4rem; }
.zs-slider__btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: 50%; cursor: pointer; color: var(--zs-ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.zs-slider__btn svg { width: 20px; height: 20px; fill: currentColor; }
.zs-slider__btn:hover:not(:disabled) {
  border-color: var(--zs-green); background: var(--zs-green-light); color: var(--zs-green-dark);
}
.zs-slider__btn:disabled { opacity: .35; cursor: default; }

/* ---- Article card ---- */
.zs-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zs-card:hover { border-color: var(--zs-green); box-shadow: var(--zs-shadow); transform: translateY(-2px); }
.zs-card__media { display: block; background: var(--zs-surface); aspect-ratio: 16 / 9; }
.zs-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder keeps the grid rhythm while the fixture has no images. */
.zs-card__media--empty {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--zs-green-light), var(--zs-surface));
}
.zs-card__media--empty svg { width: 40px; height: 40px; fill: var(--zs-green); opacity: .45; }
.zs-card__body { padding: 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.zs-card__title { font-size: 1.02rem; font-weight: 700; margin: .35rem 0 .5rem; line-height: 1.4; }
.zs-card__title a { color: var(--zs-ink); }
.zs-card__title a:hover { color: var(--zs-green-dark); text-decoration: none; }
.zs-card__excerpt { font-size: .89rem; color: var(--zs-muted); margin-bottom: .9rem; }
.zs-card__meta {
  margin-top: auto; font-size: .8rem; color: var(--zs-muted);
  display: flex; flex-wrap: wrap; gap: .3rem .75rem;
}
.zs-tag {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--zs-green-dark); background: var(--zs-green-light);
  padding: .2rem .5rem; border-radius: 4px;
}

/* ==========================================================================
   7. FILTERS
   ========================================================================== */
.zs-filters {
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); padding: 1.25rem;
}
.zs-filters__group + .zs-filters__group {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--zs-line-soft);
}
.zs-filters__legend {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--zs-muted); margin-bottom: .6rem;
}
.zs-filters__scroll { max-height: 15rem; overflow-y: auto; }

/* Checkbox rendered as a pill — larger tap target than a bare checkbox and
   easier to scan than a column of boxes. */
.zs-pill { position: relative; }
.zs-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.zs-pill__face {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font-size: .84rem; font-weight: 600; color: var(--zs-body);
  background: var(--zs-white); border: 1px solid var(--zs-line);
  padding: .35rem .7rem; border-radius: 999px;
  transition: all .13s ease;
}
.zs-pill__face:hover { border-color: var(--zs-green); color: var(--zs-green-dark); }
.zs-pill input:checked + .zs-pill__face {
  background: var(--zs-green); border-color: var(--zs-green); color: #fff;
}
.zs-pill input:focus-visible + .zs-pill__face { outline: 3px solid var(--zs-green); outline-offset: 2px; }

.zs-active-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.zs-active-filter {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600;
  background: var(--zs-green-light); color: var(--zs-green-dark);
  padding: .25rem .3rem .25rem .6rem; border-radius: 999px;
}
.zs-active-filter a { color: var(--zs-green-dark); display: grid; place-items: center; line-height: 1; }
.zs-active-filter a:hover { color: var(--zs-ink); text-decoration: none; }

.zs-result-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: 1.25rem;
}
.zs-result-count { font-size: .92rem; color: var(--zs-muted); }
.zs-result-count strong { color: var(--zs-ink); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   8. STATION DETAIL
   ========================================================================== */
.zs-breadcrumb {
  font-size: .84rem; color: var(--zs-muted);
  padding: .85rem 0; border-bottom: 1px solid var(--zs-line-soft);
}
.zs-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.zs-breadcrumb li::after { content: "›"; margin-left: .4rem; color: var(--zs-line); }
.zs-breadcrumb li:last-child::after { content: ""; }
.zs-breadcrumb a { color: var(--zs-muted); }
.zs-breadcrumb a:hover { color: var(--zs-green-dark); }
.zs-breadcrumb [aria-current] { color: var(--zs-ink); font-weight: 600; }

.zs-panel {
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius); padding: 1.35rem;
}
.zs-panel + .zs-panel { margin-top: 1.25rem; }
.zs-panel__title {
  font-size: 1.05rem; font-weight: 700; color: var(--zs-ink);
  margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--zs-line-soft);
}

/* Definition list used for the station spec table */
.zs-speclist { margin: 0; }
.zs-speclist > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--zs-line-soft);
}
.zs-speclist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.zs-speclist dt { color: var(--zs-muted); font-size: .89rem; font-weight: 500; }
.zs-speclist dd {
  margin: 0; text-align: right; font-weight: 600; color: var(--zs-ink);
  font-size: .92rem; font-variant-numeric: tabular-nums;
}

/* Connector rows */
.zs-connector {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--zs-line-soft);
}
.zs-connector:last-child { border-bottom: 0; padding-bottom: 0; }
.zs-connector__name { font-weight: 700; color: var(--zs-ink); }
.zs-connector__spec { font-size: .87rem; color: var(--zs-muted); font-variant-numeric: tabular-nums; }
.zs-connector__power {
  font-weight: 800; color: var(--zs-ink); font-size: 1.05rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.zs-map {
  border: 0; width: 100%; height: 340px;
  border-radius: var(--zs-radius); background: var(--zs-surface);
}
/* Interactive Leaflet container (replaces the iframe once Leaflet loads). */
#zsMap { height: 380px; border-radius: var(--zs-radius); z-index: 0; }
#zsMap.leaflet-container { background: var(--zs-surface); font: inherit; }

/* ---- Map pins ----
   divIcons, not images: no extra requests, they inherit the theme colours and
   stay sharp on high-density displays. */
.zs-pin {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--zs-normal); color: #fff;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(13, 27, 42, .35);
}
.zs-pin svg { width: 14px; height: 14px; }
.zs-pin--lg { width: 34px; height: 34px; }
.zs-pin--lg svg { width: 19px; height: 19px; }

/* Colours match the tier badges used elsewhere, so the legend needs no
   separate explanation. */
.zs-pin--this { background: var(--zs-green); }
.zs-pin--hpc  { background: var(--zs-hpc); }
.zs-pin--dc   { background: var(--zs-fast); }
.zs-pin--ac   { background: var(--zs-ac); }

/* Amenity distance ring: a radius, deliberately not a pin — the API gives no
   coordinates for amenities, only distance. */
.zs-ring {
  stroke: var(--zs-green-dark); stroke-width: 2; stroke-dasharray: 6 4;
  fill: var(--zs-green); fill-opacity: .07;
}
.zs-ring-label {
  display: inline-block; white-space: nowrap;
  background: var(--zs-green-dark); color: #fff;
  font-size: .74rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 4px;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(13, 27, 42, .3);
}

.leaflet-popup-content { font-size: .88rem; line-height: 1.5; margin: .7rem .9rem; }
.leaflet-popup-content strong { color: var(--zs-ink); }
.zs-pop-addr { color: var(--zs-muted); font-size: .82rem; }

/* ---- Map legend ---- */
.zs-maplegend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin-top: .85rem; font-size: .82rem; color: var(--zs-body);
}
.zs-maplegend__item { display: inline-flex; align-items: center; gap: .4rem; }
.zs-maplegend__dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--zs-line);
}
.zs-maplegend__dot--this { background: var(--zs-green); }
.zs-maplegend__dot--hpc  { background: var(--zs-hpc); }
.zs-maplegend__dot--dc   { background: var(--zs-fast); }
.zs-maplegend__dot--ac   { background: var(--zs-ac); }

/* Amenity rows become clickable once the map is interactive. */
.zs-speclist [data-amenity] {
  cursor: pointer; border-radius: var(--zs-radius-sm);
  transition: background .13s ease;
}
.zs-speclist [data-amenity]:hover { background: var(--zs-green-light); }
.zs-speclist [data-amenity].is-active { background: var(--zs-green-light); }
.zs-speclist [data-amenity].is-active dt { color: var(--zs-green-dark); }
.zs-speclist [data-amenity]:focus-visible {
  outline: 3px solid var(--zs-green); outline-offset: -2px;
}

/* ---- Score box + tag list (Sicherheit & Umgebung) ---- */
.zs-scorebox {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--zs-surface); border: 1px solid var(--zs-line-soft);
  border-radius: var(--zs-radius); padding: 1rem 1.15rem;
}
.zs-scorebox__value {
  flex-shrink: 0; font-size: 1.9rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--zs-ink);
}
.zs-scorebox__value--hpc     { color: var(--zs-hpc); }
.zs-scorebox__value--ac      { color: var(--zs-ac); }
.zs-scorebox__value--schnell { color: var(--zs-fast); }
.zs-scorebox__value--normal  { color: var(--zs-muted); }
.zs-scorebox__max  { font-size: .95rem; font-weight: 600; color: var(--zs-muted); }
.zs-scorebox__band { font-weight: 700; color: var(--zs-ink); margin-bottom: .2rem; }
.zs-scorebox__note { font-size: .85rem; color: var(--zs-muted); line-height: 1.55; }

.zs-taglist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 576px) { .zs-taglist { grid-template-columns: 1fr 1fr; } }
.zs-taglist__item {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .89rem; line-height: 1.45;
}
.zs-taglist__mark {
  flex-shrink: 0; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; margin-top: .1rem;
  background: var(--zs-green-light); color: var(--zs-green-dark);
}
.zs-taglist__mark svg { width: 12px; height: 12px; }
/* A caution (remote_area) must not look like a benefit — different colour,
   different icon, so "abgelegen" never reads as a selling point. */
.zs-taglist__item--warn .zs-taglist__mark { background: #fff4e0; color: #b45309; }
/* Unknown tag from a future crawler version: neutral, still legible. */
.zs-taglist__item--info .zs-taglist__mark { background: var(--zs-surface); color: var(--zs-muted); }
.zs-taglist__desc { display: block; color: var(--zs-muted); font-size: .84rem; }

/* ---- FAQ accordion ----
   Built on <details>/<summary>: keyboard-accessible and fully working with
   JavaScript disabled, and the answer stays in the DOM while collapsed so
   crawlers still read it. */
.zs-faq__item { border-bottom: 1px solid var(--zs-line-soft); }
.zs-faq__item:last-child { border-bottom: 0; }
.zs-faq__q {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .85rem 0; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--zs-ink); font-size: .96rem; line-height: 1.45;
}
.zs-faq__q::-webkit-details-marker { display: none; }   /* Safari default arrow */
.zs-faq__q::before {
  content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-top: .35rem;
  border-right: 2px solid var(--zs-green); border-bottom: 2px solid var(--zs-green);
  transform: rotate(45deg); transition: transform .15s ease;
}
.zs-faq__item[open] .zs-faq__q::before { transform: rotate(-135deg); }
.zs-faq__q:hover { color: var(--zs-green-dark); }
.zs-faq__a {
  padding: 0 0 1rem 1.6rem; color: var(--zs-body);
  font-size: .92rem; line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .zs-faq__q::before { transition: none; }
}

/* ==========================================================================
   9. ARTICLE / PROSE
   ========================================================================== */
/* 44rem caps the line length at roughly 75 characters, which is the range that
   stays comfortable to read. The cap is kept even when there is no sidebar —
   full-width body text on a wide monitor is genuinely harder to read, not
   better — but the column is then centred so the page does not look
   lopsided. */
.zs-prose { font-size: 1.03rem; line-height: 1.78; color: var(--zs-body); max-width: 44rem; }
.zs-prose--center { margin-left: auto; margin-right: auto; }
.zs-prose > h2 {
  margin-top: 2.5rem; margin-bottom: .85rem; padding-top: .5rem;
  scroll-margin-top: calc(var(--zs-header-h) + 1rem);
}
.zs-prose > h3 { margin-top: 1.75rem; margin-bottom: .6rem; scroll-margin-top: calc(var(--zs-header-h) + 1rem); }
.zs-prose > p  { margin-bottom: 1.15rem; }
.zs-prose ul, .zs-prose ol { margin-bottom: 1.3rem; padding-left: 1.3rem; }
.zs-prose li { margin-bottom: .5rem; }
.zs-prose strong { color: var(--zs-ink); font-weight: 700; }
.zs-prose img { max-width: 100%; height: auto; border-radius: var(--zs-radius); margin: 1.5rem 0; }
.zs-prose table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.zs-prose th, .zs-prose td { padding: .65rem .8rem; border: 1px solid var(--zs-line); text-align: left; }
.zs-prose th { background: var(--zs-surface); color: var(--zs-ink); font-weight: 700; }
/* Prose inside a panel: no top margin on the first element, tighter rhythm
   than a full article body. */
.zs-prose--tight { font-size: .95rem; line-height: 1.72; max-width: none; }
.zs-prose--tight > p { margin-bottom: .9rem; }
.zs-prose--tight > p:last-child { margin-bottom: 0; }

.zs-prose blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.15rem;
  border-left: 3px solid var(--zs-green); color: var(--zs-ink); font-style: italic;
}

.zs-article-head { border-bottom: 1px solid var(--zs-line); padding-bottom: 1.5rem; margin-bottom: 1.75rem; }
.zs-article-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
  font-size: .87rem; color: var(--zs-muted);
}

/* Sticky table of contents */
/* ---- Table of contents ----
   Designed as a navigation rail, not a bulleted list: a vertical guide line
   with the entries hanging off it makes the hierarchy readable at a glance,
   and gives the active-section marker somewhere to sit. */
.zs-toc {
  background: var(--zs-white);
  border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius);
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: var(--zs-shadow-sm);
}
.zs-toc__title {
  display: flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--zs-muted);
  padding-bottom: .7rem; margin-bottom: .2rem;
  border-bottom: 1px solid var(--zs-line-soft);
  list-style: none;          /* hide the default <details> triangle */
}
.zs-toc__title::-webkit-details-marker { display: none; }   /* Safari */
.zs-toc__title::before {
  content: ""; width: 14px; height: 2px; background: var(--zs-green);
  box-shadow: 0 4px 0 var(--zs-green), 0 -4px 0 var(--zs-green);
  flex-shrink: 0; margin-right: .15rem;
}

.zs-toc ol { list-style: none; margin: 0; padding: 0; }

/* The guide line. Sits inside the padding so nested levels can indent
   against it without the line moving. */
.zs-toc > ol {
  position: relative;
  padding-left: .95rem;
  margin-top: .55rem;
}
.zs-toc > ol::before {
  content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem;
  width: 2px; background: var(--zs-line); border-radius: 2px;
}

.zs-toc li { position: relative; }

/* ── Level 1 (h2): the main sections ──
   Weighted clearly heavier and darker than level 2. The two levels have to be
   distinguishable at a glance, without reading the words — a flat list where
   every entry looks identical gives the reader no map of the page. */
.zs-toc a {
  display: block;
  padding: .38rem 0 .38rem .95rem;
  margin-left: -.95rem;
  font-size: .89rem; font-weight: 600; line-height: 1.4;
  color: var(--zs-ink); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .13s ease, border-color .13s ease, background .13s ease;
}
.zs-toc a:hover {
  color: var(--zs-green-dark);
  border-left-color: var(--zs-green);
  text-decoration: none;
}

/* ── Level 2 (h3): sub-points ──
   Lighter weight, muted colour, smaller, further indented, and marked with a
   dash. Four signals rather than one, so the difference reads instantly. */
.zs-toc ol ol { margin: .05rem 0 .3rem 0; }
.zs-toc ol ol a {
  font-size: .82rem;
  font-weight: 400;
  color: var(--zs-muted);
  padding-left: 2rem;
  padding-top: .26rem;
  padding-bottom: .26rem;
  position: relative;
}
/* The dash sits where the text would otherwise start, marking the entry as
   subordinate without relying on indentation alone. */
.zs-toc ol ol a::before {
  content: ""; position: absolute;
  left: 1.25rem; top: 50%;
  width: 6px; height: 1px;
  background: var(--zs-line);
  transition: background .13s ease;
}
.zs-toc ol ol a:hover {
  color: var(--zs-green-dark);
  font-weight: 500;
}
.zs-toc ol ol a:hover::before { background: var(--zs-green); }

/* Active section, set by JS as the reader scrolls. Without it a long list of
   links gives no sense of position in the document.
   Level 1 is already 600, so the marker is the rule and tint, not extra
   weight — bumping it to 700 would make the list jump as the reader scrolls. */
.zs-toc a.is-active {
  color: var(--zs-green-dark);
  border-left-color: var(--zs-green);
  background: linear-gradient(90deg, var(--zs-green-light), transparent 70%);
}
/* Level 2 does gain weight when active, because 400 → 500 is what makes it
   visible without turning it into a level-1 entry. */
.zs-toc ol ol a.is-active {
  color: var(--zs-green-dark);
  font-weight: 500;
}
.zs-toc ol ol a.is-active::before { background: var(--zs-green); }

/* Desktop: always expanded. The <details> element only exists for the mobile
   collapse, so the list is forced visible here regardless of its open state —
   otherwise a reader who collapsed it on a phone would find it collapsed on
   their desktop too. */
@media (min-width: 992px) {
  .zs-toc > ol { display: block !important; }
  .zs-toc__title { cursor: default; pointer-events: none; }
}

/* Mobile: the rail would push the article far down, so it collapses into a
   tappable summary with a chevron. */
@media (max-width: 991.98px) {
  .zs-toc { padding: 0; }
  .zs-toc__title {
    padding: .9rem 1.1rem; margin: 0; border-bottom: 0; cursor: pointer;
    justify-content: flex-start;
  }
  .zs-toc__title::after {
    content: ""; margin-left: auto; flex-shrink: 0;
    width: 8px; height: 8px;
    border-right: 2px solid var(--zs-muted);
    border-bottom: 2px solid var(--zs-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
  }
  .zs-toc[open] .zs-toc__title {
    border-bottom: 1px solid var(--zs-line-soft);
  }
  .zs-toc[open] .zs-toc__title::after {
    transform: rotate(-135deg) translateY(-2px);
  }
  .zs-toc > ol { padding: .6rem 1.1rem .9rem 2rem; margin-top: 0; }
  .zs-toc > ol::before { left: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zs-toc__title::after { transition: none; }
}
@media (min-width: 992px) {
  .zs-sticky { position: sticky; top: calc(var(--zs-header-h) + 1.25rem); }
}

/* ==========================================================================
   10. CALCULATOR
   ========================================================================== */
.zs-calc {
  background: var(--zs-white); border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius-lg); padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--zs-shadow);
}
.zs-calc__result {
  background: linear-gradient(135deg, var(--zs-green-light), #f2fbf7);
  border: 1px solid rgba(0, 168, 107, .25);
  border-radius: var(--zs-radius); padding: 1.5rem; text-align: center;
}
.zs-calc__value {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); font-weight: 800;
  color: var(--zs-green-dark); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.zs-calc__unit  { font-size: .9rem; color: var(--zs-muted); margin-top: .3rem; }
.zs-calc__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--zs-line-soft); font-size: .92rem;
}
.zs-calc__row:last-child { border-bottom: 0; }
.zs-calc__row dt { color: var(--zs-muted); }
.zs-calc__row dd { margin: 0; font-weight: 700; color: var(--zs-ink); font-variant-numeric: tabular-nums; }

.zs-range { accent-color: var(--zs-green); width: 100%; }

/* ---- Form feedback ---- */
.zs-alert {
  border-radius: var(--zs-radius-sm); padding: .85rem 1.1rem;
  margin-bottom: 1.25rem; font-size: .92rem; line-height: 1.6;
  border: 1px solid transparent;
}
.zs-alert--ok   { background: var(--zs-green-light); border-color: rgba(0,168,107,.3); color: var(--zs-green-dark); }
.zs-alert--warn { background: #fff8e6; border-color: #f5d78a; color: #7a5c11; }

.zs-field-error { color: #9f1239; font-size: .84rem; margin-top: .3rem; }
.form-control.is-invalid, .form-check-input.is-invalid { border-color: #9f1239; }

/* Honeypot: hidden from people without display:none, which some bots detect
   and skip. Off-screen instead, and removed from the tab order. */
.zs-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.zs-noscript {
  background: #fff8e6; border: 1px solid #f5d78a; color: #7a5c11;
  border-radius: var(--zs-radius-sm); padding: .8rem 1rem; font-size: .9rem;
}

/* ==========================================================================
   11. FOOTER + COOKIE BANNER
   ========================================================================== */
.zs-footer { background: var(--zs-navy); color: #a9b8c7; font-size: .92rem; }
.zs-footer h4 {
  color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: .9rem;
}
.zs-footer a { color: #c3d0dc; }
.zs-footer a:hover { color: #fff; text-decoration: none; }
.zs-footer .zs-brand { color: #fff; }
.zs-footer .zs-brand:hover { color: #fff; }
.zs-footer__list { list-style: none; margin: 0; padding: 0; }
.zs-footer__list li { margin-bottom: .55rem; }
.zs-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem; color: #8697a7;
}
/* Data licence attribution — CC BY 4.0 and ODbL both require visible credit. */
.zs-attribution {
  font-size: .78rem; color: #7e8fa0; line-height: 1.6;
  background: rgba(255, 255, 255, .04);
  border-radius: var(--zs-radius-sm); padding: .7rem .9rem;
}

.zs-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1060;
  background: var(--zs-white); border-top: 1px solid var(--zs-line);
  box-shadow: 0 -4px 24px rgba(13, 27, 42, .12); padding: 1.1rem 0;
}
.zs-cookie__text { font-size: .87rem; color: var(--zs-muted); margin: 0; }

.zs-totop {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 1040;
  width: 44px; height: 44px; display: none; place-items: center;
  background: var(--zs-green); border: 0; border-radius: 50%;
  box-shadow: var(--zs-shadow-lg); cursor: pointer;
}
.zs-totop svg { width: 20px; height: 20px; fill: #fff; }
.zs-totop.is-visible { display: grid; }

/* ==========================================================================
   12. UTILITIES + RESPONSIVE
   ========================================================================== */
.zs-pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; list-style: none; padding: 0; }
.zs-pagination a, .zs-pagination span {
  display: grid; place-items: center; min-width: 40px; height: 40px;
  padding: 0 .6rem; border: 1px solid var(--zs-line);
  border-radius: var(--zs-radius-sm); font-size: .9rem; font-weight: 600;
  color: var(--zs-ink); font-variant-numeric: tabular-nums;
}
.zs-pagination a:hover { border-color: var(--zs-green); background: var(--zs-green-light); color: var(--zs-green-dark); text-decoration: none; }
.zs-pagination .is-current { background: var(--zs-green); border-color: var(--zs-green); color: #fff; }
.zs-pagination .is-disabled { color: var(--zs-line); }

.zs-empty {
  text-align: center; padding: 3rem 1.5rem;
  background: var(--zs-surface); border: 1px dashed var(--zs-line);
  border-radius: var(--zs-radius); color: var(--zs-muted);
}

/* Comma-separated inline list of sub-threshold cities on the state page. */
.zs-citylist { font-size: .92rem; line-height: 2; color: var(--zs-muted); }
.zs-citylist a { color: var(--zs-body); }

/* Dev-only data-source notice, rendered at the end of the document.
   Only ever visible when APP_DEBUG is on. */
.zs-devnote {
  background: #fff8e6; border-top: 1px solid #f5d78a;
  color: #7a5c11; font-size: .82rem; text-align: center; padding: .5rem 1rem;
}
.zs-devnote code {
  background: rgba(0, 0, 0, .06); padding: .1rem .3rem;
  border-radius: 3px; color: inherit;
}

@media (max-width: 991.98px) {
  .zs-dropdown--states { min-width: auto; }
  .zs-dropdown--states .zs-dropdown__grid { grid-template-columns: 1fr; }
  .zs-nav .nav-link { padding: .6rem .5rem; }
  .zs-hero-stats { gap: 1.25rem 2rem; }
}

@media (max-width: 575.98px) {
  .zs-station { padding: 1rem; }
  .zs-panel   { padding: 1.1rem; }
  .zs-hero-stat__value { font-size: 1.35rem; }
  .zs-speclist > div { flex-direction: column; gap: .15rem; }
  .zs-speclist dd { text-align: left; }
}

/* ==========================================================================
   PRINT
   People print a calculator result to discuss it at home or hand it to an
   electrician quoting for a wallbox, and a station page to take in the car.
   Both cases want the FACTS on paper and nothing else.
   ========================================================================== */
@media print {
  /* Navigation, controls and decoration are useless on paper. */
  .zs-header, .zs-topbar, .zs-footer, .zs-cookie, .zs-totop,
  .zs-filters, .zs-share, .zs-slider, .zs-devnote, .zs-skip-link,
  .zs-breadcrumb, .zs-maplegend, .navbar-toggler, .zs-search-panel,
  #zsMap, #zsMapFallback,
  .zs-noscript, [data-slider], .zs-pagination {
    display: none !important;
  }

  /* Ink-friendly: white background, black text. Printing the navy hero at full
     bleed wastes a cartridge and makes the text unreadable on paper. */
  body, .zs-hero, .zs-surface, .zs-panel, .zs-calc, .zs-stat, .zs-scorebox {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .zs-hero h1, .zs-hero__lede, .zs-hero-stat__value, .zs-hero-stat__label {
    color: #000 !important;
  }

  /* Flatten containers: borders and radii cost ink and add nothing on paper. */
  .zs-panel, .zs-calc, .zs-stat, .zs-scorebox, .zs-station, .zs-card {
    border: 1px solid #999 !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Keep a heading with the content it introduces. */
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; color: #000 !important; }
  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; }

  body { font-size: 11pt; line-height: 1.4; }
  .container { max-width: none !important; padding: 0 !important; }
  .zs-section, .zs-section--tight { padding: .5rem 0 !important; }

  /* Print the destination of a link — a bare underline is meaningless on
     paper. Only for real http(s) links: printing "#faq" or a mailto twice
     adds noise. */
  .zs-prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  /* Form values must be legible: inputs render as empty boxes in some browsers
     unless the text colour is forced. */
  input, select, textarea {
    border: 1px solid #999 !important;
    color: #000 !important;
    background: #fff !important;
  }

  /* Sliders carry no meaning printed — the <output> next to them shows the
     value as text. */
  .zs-range { display: none !important; }

  a { text-decoration: none !important; color: #000 !important; }

  @page { margin: 1.5cm; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .zs-station:hover, .zs-card:hover, .zs-tile:hover { transform: none; }
}