/* ============================================================
   LIVE-FAHRZEUGKARTE (/fahrzeugkarte) – nur auf dieser Seite
   eingebunden (19.09.2026). Farben/Schriften aus stil.css.
   ============================================================ */

.fk-seite [hidden] { display: none !important; }

/* --- Kopf --- */
.fk-hero {
  background: linear-gradient(168deg, #FBF7F2, #F7EFE8 55%, #FBEDE9);
  padding: 52px 0 36px;
}
.fk-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; margin-bottom: 16px; }
.fk-hero h1 .accent { color: var(--red); }
.fk-hero .lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 660px; }

/* --- Karte + Seitenleiste --- */
.fk-block { padding: 34px 0 64px; background: linear-gradient(180deg, #FBEDE9 0, #fff 140px); }
.fk-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.fk-karte-box {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
}
.fk-kopf { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fk-status {
  font-weight: 600; font-size: 0.98rem; color: var(--ink);
  min-height: 1.6em; outline: none;
  display: inline-flex; align-items: flex-start; gap: 8px;
}
/* Punkt an der ERSTEN Zeile (am Handy bricht die Statuszeile um) */
.fk-status::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  margin-top: 0.5em;
  background: #B9B3AA;
}
.fk-status[data-zustand="live"]::before { background: #1f8b4c; box-shadow: 0 0 0 4px rgba(31, 139, 76, 0.16); }
.fk-status[data-zustand="fehler"]::before,
.fk-status[data-zustand="aus"]::before { background: var(--red); }
.fk-status-ohne-js { color: var(--ink-soft); }
.fk-zahlen { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.5; }
.fk-zahlen strong { font-size: 1.3rem; color: var(--ink); font-weight: 800; }
.fk-weiter { margin-top: 6px; padding: 11px 20px; font-size: 0.92rem; }

.fk-karte { position: relative; margin: 14px 0 0; }
.fk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fk-svg path {
  fill: #E8E4DD;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .5s ease, opacity .5s ease;
}
.fk-svg path.fk-an {
  fill: #E0463D;
  filter: drop-shadow(0 0 6px rgba(214, 52, 44, 0.55));
}
/* Ruhe, Not-Aus, Fehler, keine Daten: Karte ruhig und grau */
.fk-karte[data-zustand="ruhe"] .fk-svg path,
.fk-karte[data-zustand="aus"] .fk-svg path,
.fk-karte[data-zustand="fehler"] .fk-svg path,
.fk-karte[data-zustand="keine"] .fk-svg path,
.fk-karte[data-zustand="veraltet"] .fk-svg path,
.fk-karte[data-zustand="laden"] .fk-svg path { fill: #EEECE8; }
.fk-karte[data-zustand="ruhe"] .fk-svg,
.fk-karte[data-zustand="aus"] .fk-svg,
.fk-karte[data-zustand="fehler"] .fk-svg { opacity: .75; }

.fk-plakette .fk-kreis {
  fill: #fff;
  stroke: var(--red);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.fk-plakette .fk-zahl {
  fill: var(--red-deep);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
}
.fk-plakette .fk-puls {
  fill: rgba(255, 255, 255, 0.55);
  transform-box: fill-box;
  transform-origin: center;
  animation: fkPuls 2.6s ease-out infinite;
}
@keyframes fkPuls {
  0%   { transform: scale(1);   opacity: .9; }
  80%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Umland-Plakette UNTER der Karte (nicht darüber gelegt): oben rechts
   verdeckte sie bei 881–1280 px die Nordspitze von Pankow. */
.fk-umland {
  display: inline-block; margin-top: 10px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.86rem; font-weight: 600;
  box-shadow: var(--shadow);
}
.fk-quelle { font-size: 0.74rem; color: var(--ink-soft); opacity: .85; margin-top: 8px; }

.fk-legende {
  list-style: none; margin: 12px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 0.86rem; color: var(--ink-soft);
}
.fk-legende li { display: flex; align-items: center; gap: 8px; }
.fk-farbe { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.fk-farbe-an { background: #E0463D; box-shadow: 0 0 6px rgba(214, 52, 44, 0.55); }
.fk-farbe-aus { background: #E8E4DD; border: 1px solid #D9D3CA; }

/* --- Seitenleiste --- */
.fk-seitenleiste { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.fk-h2 { font-size: 1.35rem; margin: 0; }
.fk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fk-liste a, .fk-liste .fk-liste-umland {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--sand); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font-weight: 600;
}
.fk-liste a { transition: border-color .2s, color .2s; }
.fk-liste a:hover { border-color: var(--red); color: var(--red); }
.fk-liste strong { color: var(--red); white-space: nowrap; }
.fk-leer {
  background: var(--sand); border-radius: 12px; padding: 14px 16px;
  color: var(--ink-soft); font-size: 0.96rem;
}
.fk-hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fk-hinweise li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
.fk-hinweise svg { flex-shrink: 0; margin-top: 1px; }
.fk-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- So funktioniert die Karte --- */
.fk-info { background: var(--sand); }
.fk-info .sec-head { margin-bottom: 32px; }
.fk-info-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fk-info-karte {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 20px;
}
.fk-info-karte h3 { font-size: 1.1rem; margin-bottom: 8px; }
.fk-info-karte p { font-size: 0.95rem; color: var(--ink-soft); }
.fk-info-karte a { color: var(--red); font-weight: 600; }

/* --- Flotte --- */
.fk-flotte-text { max-width: 760px; }
.fk-flotte-text h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 16px; }
.fk-flotte-text p { color: var(--ink-soft); font-size: 1.04rem; margin-bottom: 14px; }
.fk-links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.fk-links a { color: var(--red); font-weight: 600; }
.fk-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Rechner schmal / Tablet --- */
@media (max-width: 1100px) {
  .fk-info-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .fk-raster { grid-template-columns: minmax(0, 1fr); }
}
/* --- Handy --- */
@media (max-width: 560px) {
  .fk-hero { padding: 34px 0 24px; }
  .fk-hero .lead { font-size: 1rem; }
  .fk-block { padding: 18px 0 44px; }
  .fk-karte-box { padding: 16px 14px 14px; border-radius: 14px; }
  .fk-info-raster { grid-template-columns: minmax(0, 1fr); }
  .fk-knoepfe .btn { width: 100%; }
  .fk-legende { gap: 6px; flex-direction: column; }
}

/* Bewegung nur, wenn erwünscht: kein Pulsieren bei „Bewegung reduzieren“ */
@media (prefers-reduced-motion: reduce) {
  .fk-plakette .fk-puls { animation: none; display: none; }
  .fk-svg path { transition: none; }
}

/* ============================================================
   PRÄSENTATIONSMODUS (20.09.2026): Einsatzgebiet statt Live-Daten
   ============================================================ */
/* Bezirke: vier abwechselnde, klar „aktive“ Töne (Nachbarn verschieden) */
.fk-karte[data-zustand="praesenz"] .fk-svg path.fk-an { filter: drop-shadow(0 0 7px rgba(214, 52, 44, 0.42)); }
.fk-karte[data-zustand="praesenz"] .fk-svg path.fk-ton-0 { fill: #E0463D; }
.fk-karte[data-zustand="praesenz"] .fk-svg path.fk-ton-1 { fill: #F27D3C; }
.fk-karte[data-zustand="praesenz"] .fk-svg path.fk-ton-2 { fill: #F0625B; }
.fk-karte[data-zustand="praesenz"] .fk-svg path.fk-ton-3 { fill: #C4302B; }
.fk-status[data-zustand="praesenz"]::before { background: #1f8b4c; box-shadow: 0 0 0 4px rgba(31, 139, 76, 0.16); }

/* Bezirksnamen auf der Karte: weiß mit dunklem Saum, liegen über allem */
.fk-name {
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  fill: #fff;
  paint-order: stroke fill;
  stroke: rgba(92, 16, 10, 0.6);
  stroke-width: 5px;
  stroke-linejoin: round;
  letter-spacing: 0.01em;
  pointer-events: none;
  user-select: none;
}

/* Fahrzeug-Symbole: weiße Plakette mit Sprinter, Farbe je Symbol abwechselnd */
.fk-auto { pointer-events: none; }
.fk-auto .fk-auto-schatten { fill: rgba(17, 24, 39, 0.26); }
.fk-auto .fk-auto-plate { fill: #fff; stroke: rgba(17, 24, 39, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fk-auto .fk-puls { fill: rgba(255, 255, 255, 0.5); transform-box: fill-box; transform-origin: center; animation: fkPuls 3.4s ease-out infinite; }
.fk-auto-0 { color: #D6342C; }
.fk-auto-1 { color: #1F5E66; }
.fk-auto-2 { color: #1A1D24; }
.fk-auto-3 { color: #1f8b4c; }
.fk-auto-4 { color: #E07B2A; }
.fk-auto-fahrt { animation: fkFahrt 6s ease-in-out infinite; }
.fk-auto-pop { transform-box: fill-box; transform-origin: center; animation: fkAuftauchen .55s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes fkFahrt { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
@keyframes fkAuftauchen { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* Legende + Seitenleiste */
.fk-farbe-praesenz { background: linear-gradient(135deg, #E0463D 0 25%, #F27D3C 25% 50%, #F0625B 50% 75%, #C4302B 75%); box-shadow: 0 0 6px rgba(214, 52, 44, 0.45); }
.fk-legende-auto { width: 26px; height: 16px; flex-shrink: 0; color: #1F5E66; }
.fk-liste-praesenz a { flex-direction: column; align-items: flex-start; gap: 3px; }
.fk-liste-praesenz .fk-bz { display: inline-flex; align-items: center; gap: 8px; }
.fk-liste-praesenz .fk-bz::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #1f8b4c; box-shadow: 0 0 0 3px rgba(31, 139, 76, 0.16); }
.fk-liste-praesenz .fk-ot { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); line-height: 1.45; }

/* Bewegung nur, wenn erwünscht (?motion=1 setzt body.force-motion) */
@media (prefers-reduced-motion: reduce) {
  body:not(.force-motion) .fk-auto .fk-puls { animation: none; display: none; }
  body:not(.force-motion) .fk-auto-fahrt,
  body:not(.force-motion) .fk-auto-pop { animation: none; }
}