/* ============================================================
   LadeStationGuru / ChargeMap24 — Site-Layer auf CX-UI
   ------------------------------------------------------------
   Diese Site hat 423 eigene Klassen. Statt eines Komplett-Rewrites
   in einem Zug: Token-Bridge. Die alten Variablen werden auf
   CX-UI-Tokens umgebogen, die Layout-Primitives ueberschrieben.
   Damit greifen Farben, Radien, Container, Buttons, Abstaende und
   Breakpoints sofort portfolioweit einheitlich.

   Ladereihenfolge: cx-ui/* -> assets/legacy.css -> assets/site.css
   legacy.css = die frueher eigenstaendige style.css (96 KB).

   OFFEN (Schritt 2 dieser Site): die Spezialklassen aus legacy.css
   nach und nach auf .cx-*-Komponenten ziehen und legacy.css schrumpfen.
   ============================================================ */

/* --- 1. Alte Variablen auf CX-UI-Tokens umbiegen -------------
   Damit erben alle 423 Klassen automatisch die Portfolio-Werte. */

:root {
  --black:    var(--cx-text);
  --gray-900: var(--cx-text);
  --gray-600: var(--cx-text-light);
  --gray-400: var(--cx-text-faint);
  --gray-200: var(--cx-border);
  --gray-100: var(--cx-border-light);
  --gray-50:  var(--cx-bg-alt);
  --white:    var(--cx-white);
  --font:     var(--cx-font);
  --radius:   var(--cx-r);
  --max:      var(--cx-max);
}

/* --- 2. Layout-Primitives ------------------------------------ */

.container {
  width: 100%; max-width: var(--cx-max);
  margin-inline: auto; padding-inline: var(--cx-gutter);
}

.section, .section-gap, .page-section { padding-block: var(--cx-sec); }
.page-header { padding-block: var(--cx-s8) var(--cx-s6); }
.section-title, .section-header h2 { font-size: var(--cx-fs-2xl); margin-bottom: var(--cx-s2); }
.section-header { margin-bottom: var(--cx-s6); }
.section-header p { color: var(--cx-text-light); margin: 0; }

.grid-2 { display: grid; gap: var(--cx-s5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { display: grid; gap: var(--cx-s5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { display: grid; gap: var(--cx-s4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- 3. Buttons ---------------------------------------------- */

.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .nl-btn, .vid-cta-w, .vid-cta-o {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cx-s2);
  padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--cx-r);
  font-family: inherit; font-size: var(--cx-fs-base); font-weight: 500; line-height: 1.2;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--cx-t), color var(--cx-t), border-color var(--cx-t);
  background: var(--cx-text); color: var(--cx-white);
}
.btn:hover, .nl-btn:hover { background: #333; color: var(--cx-white); }
.btn-primary, .vid-cta-w { background: var(--cx-accent); color: var(--cx-white); }
.btn-primary:hover, .vid-cta-w:hover { background: var(--cx-accent-hover); color: var(--cx-white); }
.btn-outline, .btn-ghost, .btn-secondary, .vid-cta-o {
  background: transparent; color: var(--cx-text); border-color: var(--cx-border);
}
.btn-outline:hover, .btn-ghost:hover, .btn-secondary:hover, .vid-cta-o:hover {
  background: var(--cx-bg-alt); color: var(--cx-text); border-color: var(--cx-border-dark);
}
.btn-sm { padding: 6px 14px; font-size: var(--cx-fs-sm); }
.btn-lg { padding: 14px 28px; font-size: var(--cx-fs-md); }
.btn-block { display: flex; width: 100%; }

/* --- 4. Karten ------------------------------------------------ */

.card, .sidebar-box, .network-card, .net-stat-box, .fc, .hc {
  background: var(--cx-white);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg);
  padding: var(--cx-s5);
  transition: box-shadow var(--cx-t), border-color var(--cx-t);
}
a.card:hover, .network-card:hover, .fc:hover, .hc:hover {
  box-shadow: var(--cx-sh-lg); border-color: var(--cx-border-dark);
}
.card-title, .network-name { font-size: var(--cx-fs-md); font-weight: 600; margin-bottom: var(--cx-s2); }
.card-meta, .network-count { font-size: var(--cx-fs-sm); color: var(--cx-text-light); }

/* --- 5. Kennzahlen -------------------------------------------- */

.stat-item, .st-stat {
  background: var(--cx-bg-alt); border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg); padding: var(--cx-s4) var(--cx-s5); text-align: center;
}
.stat-item-num, .st-stat-num, .num, .val {
  display: block; font-size: var(--cx-fs-2xl); font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat-item-label, .st-stat-lbl {
  display: block; margin-top: var(--cx-s1); font-size: var(--cx-fs-xs); font-weight: 500;
  color: var(--cx-text-light); text-transform: uppercase; letter-spacing: .04em;
}

/* --- 6. USP / Tags / Badges ----------------------------------- */

.usp-item { display: flex; gap: var(--cx-s3); align-items: flex-start; }
.st-tag, .legend-row, .post-card-cat {
  display: inline-flex; align-items: center; gap: var(--cx-s1);
  padding: 3px 10px; border-radius: var(--cx-r-full);
  font-size: var(--cx-fs-xs); font-weight: 600; line-height: 1.5;
  background: var(--cx-bg-alt); color: var(--cx-text-mid);
  border: 1px solid var(--cx-border);
}
.legend-dot { width: 10px; height: 10px; border-radius: var(--cx-r-full); flex: 0 0 auto; }
.sep-dot { color: var(--cx-border-dark); }

/* --- 7. Breadcrumb -------------------------------------------- */

.breadcrumb {
  padding-block: var(--cx-s4);
  font-size: var(--cx-fs-sm); color: var(--cx-text-light);
  display: flex; flex-wrap: wrap; gap: var(--cx-s2); align-items: center;
}
.breadcrumb a { color: var(--cx-text-light); }
.breadcrumb a:hover { color: var(--cx-accent); }

/* --- 8. Links ------------------------------------------------- */

.text-link, .guide-link, .city-seo-link, .station-intlink, .tools-link, .sidebar-filter-link {
  color: var(--cx-accent);
}
.text-link:hover, .guide-link:hover, .city-seo-link:hover,
.station-intlink:hover, .tools-link:hover, .sidebar-filter-link:hover { color: var(--cx-accent-hover); }

/* --- 9. Blog / Artikel ---------------------------------------- */

.post-card {
  display: flex; flex-direction: column;
  background: var(--cx-white); border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg); overflow: hidden; color: inherit;
  transition: box-shadow var(--cx-t), border-color var(--cx-t);
}
.post-card:hover { box-shadow: var(--cx-sh-lg); border-color: var(--cx-border-dark); }
.post-card-img { width: 100%; aspect-ratio: 2/1; object-fit: cover; }
.post-card-body { padding: var(--cx-s4) var(--cx-s5) var(--cx-s5); display: flex; flex-direction: column; gap: var(--cx-s2); flex: 1; }
.post-card-title { font-size: var(--cx-fs-md); font-weight: 600; margin: 0; line-height: 1.35; }
.post-body { max-width: 72ch; font-size: var(--cx-fs-md); color: var(--cx-text-mid); }
.post-body h2 { margin-top: var(--cx-s8); color: var(--cx-text); }
.post-body h3 { margin-top: var(--cx-s6); color: var(--cx-text); }
.post-body > :first-child { margin-top: 0; }
.post-body img { border-radius: var(--cx-r-lg); margin-block: var(--cx-s5); }

/* --- 10. Newsletter-Strip ------------------------------------- */

.nl-strip { background: var(--cx-bg-alt); border-block: 1px solid var(--cx-border); padding-block: var(--cx-s7); }
.nl-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--cx-s6); flex-wrap: wrap; }
/* Farben explizit setzen: der Strip war in legacy.css dunkel mit weisser Schrift.
   Auf dem jetzt hellen CX-Hintergrund waere der Text sonst weiss auf weiss. */
.nl-label { font-size: var(--cx-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cx-accent); }
.nl-title { font-size: var(--cx-fs-xl); font-weight: 700; margin-block: var(--cx-s1); color: var(--cx-text); }
.nl-sub   { font-size: var(--cx-fs-base); color: var(--cx-text-light); }
.nl-text  { color: var(--cx-text); }
.nl-strip-inner, .nl-strip-inner * { border-color: var(--cx-border); }
.nl-strip-inner { color: var(--cx-text); }
.nl-form  { display: flex; gap: var(--cx-s2); flex: 1 1 320px; max-width: 460px; }
/* ID-Selektor, weil legacy.css das Feld ueber #nl-email stylt (weiss auf dunkel).
   Eine Klassenregel wuerde davon ueberschrieben — Spezifitaet. */
.nl-form input, #nl-email {
  flex: 1; padding: 10px var(--cx-s3);
  font-size: var(--cx-fs-md); color: var(--cx-text);
  background: var(--cx-white);
  border: 1px solid var(--cx-border); border-radius: var(--cx-r);
}
#nl-email::placeholder { color: var(--cx-text-faint); }
.nl-form input:focus, #nl-email:focus {
  outline: none; border-color: var(--cx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 15%, transparent);
}
.nl-success { font-size: var(--cx-fs-base); color: var(--cx-success); }

/* --- 11. Footer-SEO-Grid (Site-Block im CX-Footer) ------------- */

.footer-seo { padding-block: var(--cx-s8) var(--cx-s6); }
.footer-seo-grid { display: grid; gap: var(--cx-s6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-seo-col { display: flex; flex-direction: column; gap: var(--cx-s2); }
.footer-seo-head {
  font-size: var(--cx-fs-sm); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cx-text-light); margin-bottom: var(--cx-s1);
}
.footer-seo-col a { font-size: var(--cx-fs-base); color: var(--cx-text-mid); }
.footer-seo-col a:hover { color: var(--cx-accent); }
.footer-links { display: flex; gap: var(--cx-s4); flex-wrap: wrap; }
.footer-links a { color: var(--cx-text-light); font-size: var(--cx-fs-sm); }
.footer-links a:hover { color: var(--cx-accent); }

/* --- 12. Nav-Suche (sitzt via nav_extra im CX-Header) ---------- */

.nav-search {
  position: relative; display: flex; align-items: center; gap: var(--cx-s2);
  flex: 1 1 220px; max-width: 340px;
  padding: 0 var(--cx-s3);
  background: var(--cx-bg-alt);
  border: 1px solid var(--cx-border); border-radius: var(--cx-r-full);
  color: var(--cx-text-light);
}
.nav-search:focus-within { border-color: var(--cx-accent); background: var(--cx-white); }
.nav-search input {
  flex: 1; min-width: 0;
  padding: 7px 0; border: 0; background: none; outline: none;
  font-size: var(--cx-fs-base); color: var(--cx-text);
}
.nav-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1100;
  background: var(--cx-white); border: 1px solid var(--cx-border);
  border-radius: var(--cx-r-lg); box-shadow: var(--cx-sh-lg);
  overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.nav-suggest:empty { display: none; }
.nav-suggest a { display: block; padding: var(--cx-s2) var(--cx-s4); font-size: var(--cx-fs-base); color: var(--cx-text); }
.nav-suggest a:hover { background: var(--cx-bg-alt); }

/* --- 13. Alt-Header/-Footer stilllegen ------------------------- */
/* Markup kommt jetzt aus cx-ui/partials — die Alt-Regeln aus legacy.css
   duerfen den CX-Header nicht mehr beeinflussen. */

.nav, .nav-inner, .nav-links, .nav-logo, .nav-item, .nav-drop,
.nav-burger, .nav-search-btn, .nav-right-btns, .nav-mobile,
.footer, .footer-inner, .footer-copy, .skip-link { all: unset; }
.nav, .footer { display: none !important; }

/* --- 14. Karte (Typ-Modul map.css) ----------------------------- */

.leaflet-container { font-family: var(--cx-font) !important; }

/* Filter-Chips auf der Karte: horizontal scrollen statt rechts abschneiden */
.hero-chips, .sb-filters {
  display: flex; gap: var(--cx-s2); flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.hero-chips::-webkit-scrollbar, .sb-filters::-webkit-scrollbar { display: none; }
.hero-chips > *, .sb-filters > * { flex: 0 0 auto; }

/* --- Responsive: nur die drei CX-Breakpoints ------------------- */

@media (max-width: 1024px) {
  /* Suche bleibt auf Mobile im Header erreichbar. Die Alt-Version hatte dafuer
     ein zweites Feld (#drawer-search) im Burger-Drawer — das entfaellt, deshalb
     darf dieses hier NICHT ausgeblendet werden, sonst gibt es mobil keine Suche. */
  .nav-search { flex: 1 1 90px; min-width: 0; max-width: none; margin-inline: var(--cx-s2); }
  .nav-search input { min-width: 0; }
}
@media (max-width: 480px) {
  .nav-search { padding-inline: var(--cx-s2); }
  .nav-search input { font-size: var(--cx-fs-sm); }
}
@media (max-width: 768px) {
  .nl-strip-inner { flex-direction: column; align-items: stretch; gap: var(--cx-s4); }
  .nl-form { max-width: none; }
}
@media (max-width: 480px) {
  .card, .sidebar-box, .network-card, .fc, .hc { padding: var(--cx-s4); }
  .footer-seo-grid { grid-template-columns: 1fr 1fr; }
}