/* =====================================================================
   Fahrzeiten-Karte – Design-Einstellungen
   Stil wählen über das Attribut am <section class="lseo" data-theme="…">:
     neon   = 80er-Synthwave mit Leuchteffekten (horn media)
     hell   = schlicht, heller Hintergrund, keine Leuchteffekte
     dunkel = schlicht, dunkler Hintergrund, keine Leuchteffekte
   Eigene Farben/Schriften des Projekts NICHT hier ändern, sondern im Projekt-CSS überschreiben:
     #einsatzgebiet { --lk-accent: #2e7d4f; --lk-font-head: "Projektschrift", serif; … }
   (die ID ist stärker als die Stil-Regeln, dadurch greift es in jedem Stil).
   Alle Zwischentöne (Rahmen, Flächen, Raster) werden automatisch abgeleitet.
   ===================================================================== */
.lseo {
  /* Neon (Standard) */
  --lk-bg:        #05000b;              /* Hintergrund des Abschnitts */
  --lk-surface:   #1c0838;              /* Panel, Buttons */
  --lk-map-bg:    #05000b;              /* Kartenfläche */
  --lk-text:      #e9e4ff;              /* Fließtext, Ortsnamen */
  --lk-heading:   #ffffff;              /* Überschriften */
  --lk-muted:     #a59cc9;              /* Nebentexte */
  --lk-dim:       #5e5480;              /* Kleingedrucktes */
  --lk-accent:    #ff2bd6;              /* Hauptfarbe: Route, aktiver Ort, Button */
  --lk-accent-2:  #00f0ff;              /* Zweitfarbe: Straßen, Raster, Hover */
  --lk-accent-3:  #9d4dff;              /* Drittfarbe: Leuchten/Verläufe */
  --lk-time:      #39ff14;              /* Fahrzeit-Ziffern */
  --lk-hub:       #ff2a4d;              /* Startpunkt */
  --lk-on-accent: #ffffff;              /* Schrift auf Hauptfarbe */
  --lk-font-head: 'Orbitron', system-ui, sans-serif;
  --lk-font-body: inherit;
  --lk-case:      uppercase;            /* none = normale Groß-/Kleinschreibung */
  --lk-radius:    6px;
  --lk-ease:      cubic-bezier(0.4, 0, 0.2, 1);
}
.lseo[data-theme="hell"] {
  --lk-bg: #f6f7f9; --lk-surface: #ffffff; --lk-map-bg: #ffffff;
  --lk-text: #1d2433; --lk-heading: #0f1522; --lk-muted: #5b6475; --lk-dim: #7c8597;
  --lk-accent: #e4572e; --lk-accent-2: #2f6fd6; --lk-accent-3: #2f6fd6;
  --lk-time: #1d2433; --lk-hub: #e4572e; --lk-on-accent: #ffffff;
  --lk-font-head: inherit; --lk-case: none; --lk-radius: 10px;
}
.lseo[data-theme="dunkel"] {
  --lk-bg: #12151c; --lk-surface: #1b1f29; --lk-map-bg: #161a22;
  --lk-text: #e6e8ee; --lk-heading: #ffffff; --lk-muted: #9aa3b5; --lk-dim: #6c7486;
  --lk-accent: #f2b544; --lk-accent-2: #6fa8ff; --lk-accent-3: #6fa8ff;
  --lk-time: #ffffff; --lk-hub: #f2b544; --lk-on-accent: #12151c;
  --lk-font-head: inherit; --lk-case: none; --lk-radius: 10px;
}

/* ---------- Aufbau ---------- */
.lseo { padding: 6rem 5vw; color: var(--lk-text); font-family: var(--lk-font-body); background: var(--lk-bg); }
.lseo-inner { max-width: 1200px; margin: 0 auto; }
.lseo .section-label {
  font-family: var(--lk-font-head); font-size: .7rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--lk-accent); margin-bottom: 1rem;
}
.lseo .section-desc { font-size: 1.15rem; color: var(--lk-muted); max-width: 580px; text-wrap: balance; }
.lseo-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: end; }
.lseo-title {
  font-family: var(--lk-font-head); font-weight: 900; text-transform: var(--lk-case);
  font-size: clamp(2.4rem, 6.5vw, 5.2rem); line-height: 1; color: var(--lk-heading);
}
.lseo-title em { font-style: normal; color: var(--lk-accent); }
.lseo-wrap { display: grid; grid-template-columns: minmax(280px, 1fr) 1.5fr; gap: 3rem; align-items: center; margin-top: 3.5rem; }

/* ---------- Linkes Panel ---------- */
.lseo-panel {
  padding: 2.4rem 2.2rem; border-radius: var(--lk-radius);
  border: 1px solid color-mix(in srgb, var(--lk-accent-2) 35%, transparent);
  background: var(--lk-surface);
}
.lseo-kicker { font-family: var(--lk-font-head); font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lk-muted); }
.lseo-kicker span { color: var(--lk-accent); }
.lseo-city {
  min-height: 2.4em; display: flex; align-items: center; margin: 0.6rem 0 1.6rem;
  font-family: var(--lk-font-head); font-weight: 900; text-transform: var(--lk-case);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem); line-height: 1.1; color: var(--lk-heading); overflow-wrap: break-word; hyphens: auto;
  transition: opacity .25s var(--lk-ease), transform .25s var(--lk-ease), filter .25s var(--lk-ease);
}
.lseo-city.is-out { opacity: 0; transform: translateY(12px); filter: blur(6px); }

.lseo-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.readout {
  padding: 1rem 1.1rem; border-radius: var(--lk-radius);
  border: 1px solid color-mix(in srgb, var(--lk-time) 30%, transparent);
  background: color-mix(in srgb, var(--lk-time) 5%, var(--lk-bg));
}
.readout.km {
  border-color: color-mix(in srgb, var(--lk-accent) 35%, transparent);
  background: color-mix(in srgb, var(--lk-accent) 5%, var(--lk-bg));
}
.readout-label, .readout-unit { font-family: var(--lk-font-head); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--lk-muted); }
.digits {
  position: relative; display: inline-block; margin: 0.3rem 0 0.1rem;
  font-family: var(--lk-font-head); font-weight: 900; font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0.05em; color: var(--lk-time);
}
.readout.km .digits { color: var(--lk-accent); }
.digits .ghost { position: absolute; left: 0; top: 0; opacity: 0.08; display: none; }   /* "88"-Geisterziffern nur im Neon-Stil */
.digits .val { position: relative; }
.digits.flash .val { animation: lkBlink .9s steps(1, end); }
@keyframes lkBlink { 0% { opacity: 0; } 12% { opacity: 1; } 24% { opacity: .15; } 36% { opacity: 1; } 48% { opacity: .3; } 60%, 100% { opacity: 1; } }

.lseo-note { margin-top: 1.4rem; color: var(--lk-muted); }
.lseo-note strong { color: var(--lk-text); }
.lseo-link {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem;
  padding: 0.85rem 1.5rem; border: 2px solid var(--lk-accent); border-radius: var(--lk-radius);
  font-family: var(--lk-font-head); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lk-accent); text-decoration: none;
  transition: background .25s, box-shadow .25s, color .25s;
}
.lseo-link span { transition: transform .25s; }
.lseo-link:hover { background: var(--lk-accent); color: var(--lk-on-accent); }
.lseo-link:hover span { transform: translateX(5px); }
.lseo-more {
  display: block; margin-top: 1rem; width: fit-content; color: var(--lk-accent-2); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--lk-accent-2) 50%, transparent);
}
.lseo-more::after { content: " →"; color: var(--lk-accent); }
.lseo-more[hidden] { display: none; }

/* ---------- Karte ---------- */
.lseo-map {
  position: relative; overflow: hidden; border-radius: var(--lk-radius);
  border: 1px solid color-mix(in srgb, var(--lk-accent-2) 30%, transparent);
  background: var(--lk-map-bg);
}
.lseo-map svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lseo-map.zoomed svg { touch-action: none; cursor: grab; }   /* hineingezoomt: Finger verschiebt die Karte statt der Seite */
.lseo-map.dragging svg { cursor: grabbing; }
.map-zoom { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.map-zoom button {
  width: 38px; height: 38px; border-radius: var(--lk-radius); cursor: pointer;
  font-family: var(--lk-font-head); font-size: 1.15rem; font-weight: 700; line-height: 1;
  color: var(--lk-accent-2); background: color-mix(in srgb, var(--lk-map-bg) 85%, transparent); border: 1px solid var(--lk-accent-2);
}
.map-zoom button:hover { background: var(--lk-accent-2); color: var(--lk-map-bg); }
.map-zoom button:disabled { opacity: .35; cursor: default; }
.map-zoom-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; display: none;
  padding: 0.25rem 0.7rem; border-radius: 3px; pointer-events: none; transition: opacity .4s;
  background: color-mix(in srgb, var(--lk-map-bg) 85%, transparent); border: 1px solid color-mix(in srgb, var(--lk-accent) 60%, transparent);
  font-family: var(--lk-font-head); font-size: 0.55rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lk-accent);
}
@media (hover: none) { .map-zoom-hint { display: block; } }
.lseo-map.zoomed .map-zoom-hint { opacity: 0; }
.corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--lk-accent-2); display: none; }   /* Ecken-Rahmen nur im Neon-Stil */
.corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

.m-tick-label, .m-ring-label, .m-road-label, .m-scale-label {
  font-family: var(--lk-font-head); font-size: 10px; letter-spacing: 0.1em; fill: color-mix(in srgb, var(--lk-accent-2) 65%, transparent);
}
.m-gridline { stroke: color-mix(in srgb, var(--lk-accent-2) 10%, transparent); stroke-width: 1; }
.m-tick { stroke: color-mix(in srgb, var(--lk-accent-2) 50%, transparent); stroke-width: 1; }
.m-ring { fill: none; stroke: color-mix(in srgb, var(--lk-accent-2) 25%, transparent); stroke-width: 1; stroke-dasharray: 3 7; }
.m-road { fill: none; stroke: var(--lk-accent-2); stroke-width: 1.6; stroke-linejoin: round; opacity: 0.55; }
.m-road.minor { stroke-width: 1; opacity: 0.3; }
.m-road-label { fill: var(--lk-accent-2); font-size: 9px; }
.m-scale { stroke: var(--lk-accent-2); stroke-width: 2; }

/* Route vom Startpunkt zum Ziel (entlang der Straßen) */
.m-route { fill: none; stroke: var(--lk-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-route.draw { animation: lkDraw .7s var(--lk-ease) forwards; }
@keyframes lkDraw { to { stroke-dashoffset: 0; } }
.m-route-dash { fill: none; stroke: var(--lk-map-bg); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 2 10; opacity: 0; animation: lkRun 0.8s linear infinite; }
.m-route-dash.on { opacity: .9; transition: opacity .3s .6s; }
@keyframes lkRun { to { stroke-dashoffset: -12; } }

/* Orte */
.m-city { cursor: pointer; outline: none; }
.m-city .hit { fill: transparent; }
.m-city .dot { fill: var(--lk-accent); transition: fill .2s; }
.m-city .ring { fill: none; stroke: var(--lk-accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes cityPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.m-city .label {
  font-family: var(--lk-font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  fill: var(--lk-text); paint-order: stroke; stroke: var(--lk-map-bg); stroke-width: 4px; transition: fill .2s;
}
.m-city:hover .label, .m-city:focus-visible .label { fill: var(--lk-accent-2); }
.m-city:focus-visible .dot { stroke: var(--lk-accent-2); stroke-width: 2; }
.m-city.active .dot { fill: var(--lk-accent); }
.m-city.active .ring { stroke: var(--lk-accent); stroke-width: 2.5; opacity: 1; animation: cityPulse 1.4s ease-out infinite; }
.m-city.active .label { fill: var(--lk-accent); font-size: 14px; }
.m-city.flash .dot { animation: dotFlash .8s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes dotFlash { 0% { transform: scale(1); } 20% { transform: scale(2.6); } 40% { transform: scale(1.3); } 60% { transform: scale(2); } 100% { transform: scale(1); } }

/* Startpunkt: Fadenkreuz */
.m-hub .cross { stroke: var(--lk-hub); stroke-width: 2; }
.m-hub .core { fill: var(--lk-hub); }
.m-hub .spin { fill: none; stroke: var(--lk-hub); stroke-width: 1.5; stroke-dasharray: 8 6; transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.m-hub .label {
  font-family: var(--lk-font-head); font-size: 12px; font-weight: 900; letter-spacing: 0.08em;
  fill: var(--lk-hub); paint-order: stroke; stroke: var(--lk-map-bg); stroke-width: 4px;
}

/* ---------- Orts-Leiste unten ---------- */
.lseo-bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.5rem; padding: 0.8rem; border-radius: var(--lk-radius);
  border: 1px solid color-mix(in srgb, var(--lk-accent-3) 25%, transparent);
  background: color-mix(in srgb, var(--lk-surface) 60%, transparent);
}
.lseo-btn {
  flex: 1 1 auto; white-space: nowrap; padding: 0.85rem 1.1rem; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--lk-accent-2) 35%, transparent); border-radius: var(--lk-radius);
  background: var(--lk-surface); color: var(--lk-text);
  font-family: var(--lk-font-head); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color .2s, box-shadow .2s, color .2s, background .2s;
}
.lseo-btn small { margin-left: 0.4rem; font-size: 0.6rem; color: var(--lk-muted); letter-spacing: 0.1em; }
.lseo-btn:hover, .lseo-btn:focus-visible { outline: none; border-color: var(--lk-accent-2); color: var(--lk-accent-2); }
.lseo-btn[aria-pressed="true"] { border-color: var(--lk-accent); background: var(--lk-accent); color: var(--lk-on-accent); }
.lseo-btn[aria-pressed="true"] small { color: inherit; opacity: .8; }
.lseo-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.lseo-disclaimer { font-size: 0.95rem; color: var(--lk-dim); }
.lseo-missing { color: var(--lk-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--lk-accent-2); }
.lseo-missing span { color: var(--lk-accent); }
.lseo-missing:hover { color: var(--lk-accent-2); }

/* =====================================================================
   Nur Neon-Stil: Leuchteffekte, Raster-Hintergrund, Ecken, Geisterziffern
   ===================================================================== */
.lseo[data-theme="neon"] {
  background:
    radial-gradient(ellipse at 70% 45%, color-mix(in srgb, var(--lk-accent-3) 18%, transparent), transparent 60%),
    linear-gradient(color-mix(in srgb, var(--lk-accent-2) 5%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, color-mix(in srgb, var(--lk-accent-2) 5%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--lk-bg);
  border-block: 1px solid color-mix(in srgb, var(--lk-accent-3) 25%, transparent);
}
.lseo[data-theme="neon"] .lseo-title { text-shadow: 0 0 6px #fff, 0 0 20px var(--lk-accent-3), 0 0 45px var(--lk-accent-3); }
.lseo[data-theme="neon"] .lseo-title em { text-shadow: 0 0 6px #fff, 0 0 18px var(--lk-accent), 0 0 45px var(--lk-accent); }
.lseo[data-theme="neon"] .lseo-panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--lk-surface) 85%, transparent), color-mix(in srgb, var(--lk-bg) 90%, transparent));
  box-shadow: 0 0 25px color-mix(in srgb, var(--lk-accent-2) 12%, transparent), inset 0 0 30px color-mix(in srgb, var(--lk-accent-3) 12%, transparent);
}
.lseo[data-theme="neon"] .lseo-city { text-shadow: 0 0 6px #fff, 0 0 18px var(--lk-accent-2), 0 0 40px var(--lk-accent-2); }
.lseo[data-theme="neon"] .readout { background: rgba(0,0,0,.55); }
.lseo[data-theme="neon"] .digits { text-shadow: 0 0 6px var(--lk-time), 0 0 22px var(--lk-time); }
.lseo[data-theme="neon"] .readout.km .digits { text-shadow: 0 0 6px var(--lk-accent), 0 0 22px var(--lk-accent); }
.lseo[data-theme="neon"] .digits .ghost { display: block; text-shadow: none; }
.lseo[data-theme="neon"] .lseo-link { color: #fff; text-shadow: 0 0 6px var(--lk-accent); box-shadow: 0 0 10px var(--lk-accent), inset 0 0 10px color-mix(in srgb, var(--lk-accent) 50%, transparent); }
.lseo[data-theme="neon"] .lseo-link:hover { box-shadow: 0 0 25px var(--lk-accent), 0 0 60px var(--lk-accent); }
.lseo[data-theme="neon"] .lseo-map { box-shadow: 0 0 30px color-mix(in srgb, var(--lk-accent-2) 10%, transparent); }
.lseo[data-theme="neon"] .map-zoom button { box-shadow: 0 0 8px color-mix(in srgb, var(--lk-accent-2) 40%, transparent); }
.lseo[data-theme="neon"] .corner { display: block; filter: drop-shadow(0 0 4px var(--lk-accent-2)); }
.lseo[data-theme="neon"] .m-route { filter: url(#glowP); }
.lseo[data-theme="neon"] .m-route-dash { stroke: #fff; }
.lseo[data-theme="neon"] .m-city .dot { filter: url(#glowC); }
.lseo[data-theme="neon"] .m-city.active .dot { fill: #fff; filter: url(#glowP); }
.lseo[data-theme="neon"] .m-city.active .ring { stroke: #fff; }
.lseo[data-theme="neon"] .m-hub .cross, .lseo[data-theme="neon"] .m-hub .core { filter: url(#glowP); }
.lseo[data-theme="neon"] .lseo-btn { background: color-mix(in srgb, var(--lk-surface) 70%, transparent); }
.lseo[data-theme="neon"] .lseo-btn:hover, .lseo[data-theme="neon"] .lseo-btn:focus-visible { box-shadow: 0 0 12px color-mix(in srgb, var(--lk-accent-2) 50%, transparent); }
.lseo[data-theme="neon"] .lseo-btn[aria-pressed="true"] {
  color: #fff; background: color-mix(in srgb, var(--lk-accent) 18%, transparent); text-shadow: 0 0 6px var(--lk-accent);
  box-shadow: 0 0 14px var(--lk-accent), inset 0 0 12px color-mix(in srgb, var(--lk-accent) 40%, transparent);
}
.lseo[data-theme="neon"] .lseo-btn[aria-pressed="true"] small { color: var(--lk-time); opacity: 1; }
.lseo[data-theme="neon"] .lseo-missing:hover { text-shadow: 0 0 8px var(--lk-accent-2); }

/* ---------- Responsive & Bewegung ---------- */
@media (max-width: 1024px) {
  .lseo-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .lseo-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .lseo-map { order: -1; }
}
@media (max-width: 640px) {
  .lseo-panel { padding: 1.6rem 1.2rem; }
  .lseo-btn { padding: 0.75rem 0.7rem; font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .m-city .ring, .m-hub .spin, .m-route-dash, .digits.flash .val, .m-city.flash .dot, .m-route.draw { animation: none; }
  .m-route { stroke-dashoffset: 0; }
}

/* Große Karte: Beschriftung naher Orte erst beim Zoomen oder Auswählen */
.lseo-map:not(.zoomed) .m-city.nah:not(.active):not(:hover):not(:focus-visible) .label { opacity: 0; }
.m-city .label { transition: opacity .25s; }