/* ══ sc-karte.css — Karte Berlin + Umland (SCKarte, sc-karte.js), Betreiber 12.10.2026 ═══
   Rechner Schritt 1, Buchungswidget, Schichtfenster der Mitarbeitenden. Dunkel/transparent:
   Strassen als weisse Linien, Details in StaffConnect-Farben (Wasser + U-Bahn blau #4eb4d7,
   S-Bahn gruen #48bf91, Landesgrenze als Verlauf). Erst mit bestaetigter Adresse (.is-ort)
   die Flaechen, dezent: gruen = keine Anfahrtspauschale, gruen mit gelben Streifen = nur
   bei Schichtende nach der letzten Bahn, rot = Pauschale. Marker/Beschriftung sind HTML
   ueber dem SVG, Linien skalieren nicht (vector-effect). Eigenstaendig: keine Tailwind-
   Klassen, gleiche Darstellung auf allen drei Seiten. */
.sc-karte { position: relative; margin: 0 0 1.25rem; border: 1px solid rgba(255,255,255,0.09);
    border-radius: 0.9rem; overflow: hidden; color: #e5e7eb;
    background: radial-gradient(120% 90% at 50% 40%, rgba(78,180,215,0.05), rgba(0,0,0,0) 70%), #0e1113; }
.sc-karte[hidden] { display: none !important; }
.sc-karte__flaeche { position: relative; width: 100%; aspect-ratio: 1 / 0.86; overflow: hidden; outline: none; }
.sc-karte__flaeche:focus-visible { box-shadow: inset 0 0 0 2px rgba(78,180,215,0.7); }
.sc-karte.is-interaktiv .sc-karte__flaeche { cursor: grab; touch-action: pan-x pan-y; }
.sc-karte.is-interaktiv.is-ziehen .sc-karte__flaeche { cursor: grabbing; }
.sc-karte.is-klickbar .sc-karte__flaeche { cursor: zoom-in; }
.sc-karte__flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.sc-karte__berlin { fill: rgba(255,255,255,0.025); }
.sc-karte__zonen { opacity: 0; transition: opacity 0.6s ease 0.15s; }
.sc-karte.is-ort .sc-karte__zonen { opacity: 1; }
/* Dezent (Betreiber 12.10.2026: „farbliche Markierungen etwas dezenter“) */
.sc-karte__zone-rot { fill: rgba(239,68,68,0.1); }
.sc-karte__zone-gruen { fill: rgba(72,191,145,0.15); }
.sc-karte__zone-gelb { fill: url(#scKarteNacht); }
.sc-karte__wasser { fill: rgba(78,180,215,0.16); }
.sc-karte__fluss { fill: none; stroke: rgba(78,180,215,0.32); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sc-karte__bezirk { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-karte__strasse { fill: none; stroke: rgba(255,255,255,0.34); stroke-width: 0.8; vector-effect: non-scaling-stroke;
    stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.4s; }
.sc-karte__detail { opacity: 0; transition: opacity 0.4s; }
.sc-karte.is-nah .sc-karte__detail { opacity: 1; }
/* Nah: Detailkacheln statt Uebersicht — ausser dort, wo es keine Kacheln gibt (Umland). */
.sc-karte.is-nah:not(.ohne-kacheln) .sc-karte__strasse { opacity: 0; }
.sc-karte__strasse-neben { fill: none; stroke: rgba(255,255,255,0.32); stroke-width: 0.8; vector-effect: non-scaling-stroke;
    stroke-linecap: round; stroke-linejoin: round; }
.sc-karte__strasse-haupt { fill: none; stroke: rgba(255,255,255,0.62); stroke-width: 1.5; vector-effect: non-scaling-stroke;
    stroke-linecap: round; stroke-linejoin: round; }
.sc-karte__tram { fill: none; stroke: rgba(78,180,215,0.42); stroke-width: 0.9; stroke-dasharray: 1 3;
    vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sc-karte__ubahn { fill: none; stroke: rgba(78,180,215,0.55); stroke-width: 1.1; stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sc-karte__sbahn { fill: none; stroke: rgba(72,191,145,0.75); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sc-karte__grenze { fill: none; stroke: url(#scKarteVerlauf); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0.85; }
.sc-karte__weg { fill: none; stroke: #ffffff; stroke-width: 2.6; stroke-dasharray: 0.5 5.5; stroke-linecap: round;
    stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-karte__weg.is-luftlinie { stroke-dasharray: 3 5; opacity: 0.7; }
.sc-karte__oben { position: absolute; inset: 0; pointer-events: none; }
.sc-karte__pin { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: linear-gradient(135deg, #4eb4d7, #48bf91); border: 2px solid #ffffff; box-shadow: 0 0 0 6px rgba(78,180,215,0.25); }
.is-frei .sc-karte__pin { box-shadow: 0 0 0 6px rgba(72,191,145,0.32); }
.is-nacht .sc-karte__pin { box-shadow: 0 0 0 6px rgba(245,165,36,0.32); }
.is-pauschale .sc-karte__pin, .is-aussen .sc-karte__pin { box-shadow: 0 0 0 6px rgba(239,68,68,0.32); }
.ohne-zonen .sc-karte__pin { box-shadow: 0 0 0 6px rgba(78,180,215,0.28) !important; }
@media (prefers-reduced-motion: no-preference) {
    .sc-karte__pin { animation: scKartePin 0.45s cubic-bezier(.2,.9,.3,1.3) both; }
}
@keyframes scKartePin { from { transform: translateY(-14px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.sc-karte__station { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: #ffffff; border: 2px solid #0e1113; }
.sc-karte__halt { position: absolute; min-width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; padding: 0 3px; border-radius: 4px;
    font: 700 9px/15px system-ui, sans-serif; text-align: center; color: #0e1113; background: #e5e7eb; box-shadow: 0 0 0 1.5px rgba(14,17,19,0.9); }
.sc-karte__halt.is-s { background: #48bf91; }
.sc-karte__halt.is-u { background: #4eb4d7; }
.sc-karte__halt.is-fern { opacity: 0.55; }
.sc-karte__halt.is-gestoert { box-shadow: 0 0 0 2px #0e1113, 0 0 0 4px #f5a524; }
.sc-karte__label { position: absolute; transform: translate(10px, -50%); max-width: calc(100% - 16px); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 1.3; color: #e5e7eb;
    background: rgba(14,17,19,0.88); border: 1px solid rgba(255,255,255,0.1); padding: 2px 7px; border-radius: 6px; }
.sc-karte__label.is-links { transform: translate(calc(-100% - 10px), -50%); }
.sc-karte__label.is-oben { transform: translate(0, calc(-100% - 10px)); }
.sc-karte__label.is-unten { transform: translate(0, 10px); }
.sc-karte__label.is-warnung { border-color: rgba(245,165,36,0.55); }
.sc-karte__label-zeile { display: block; color: #fcd34d; font-size: 11px; }
.sc-karte__chips { position: absolute; left: 10px; top: 10px; right: 54px; display: flex; flex-wrap: wrap; gap: 6px; }
.ohne-zonen .sc-karte__chips { right: 10px; }
.sc-karte.is-vollbild .sc-karte__chips { right: 62px; }
.sc-karte__chip { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
    background: rgba(14,17,19,0.9); color: #e5e7eb; border: 1px solid rgba(255,255,255,0.12); }
.is-frei .sc-karte__chip { color: #6ee7b7; border-color: rgba(72,191,145,0.5); }
.is-pauschale .sc-karte__chip, .is-aussen .sc-karte__chip { color: #fca5a5; border-color: rgba(239,68,68,0.5); }
.sc-karte__chip.is-nacht { color: #fcd34d !important; border-color: rgba(245,165,36,0.5) !important; }
.sc-karte__hinweis { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; font-size: 12px; line-height: 1.4;
    color: #d1d5db; background: rgba(14,17,19,0.85); border-radius: 8px; padding: 6px 9px; }
.sc-karte__hinweis[hidden] { display: none; }
/* Legende: groesser als zuerst (Betreiber 12.10.2026) */
.sc-karte__fuss { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.35rem 0.75rem; flex-wrap: wrap;
    padding: 8px 11px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,0.72); border-top: 1px solid rgba(255,255,255,0.06); }
.sc-karte__legende { display: none; margin: 0; padding: 0; list-style: none; flex: 1 1 100%; gap: 0.3rem 0.9rem; flex-wrap: wrap; }
.sc-karte.is-ort .sc-karte__legende, .sc-karte.ohne-zonen .sc-karte__legende { display: flex; }
.sc-karte__legende li { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sc-karte__legende li > span { flex: 0 1 auto; min-width: 0; }
.sc-karte__legende i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.sc-karte__legende .is-frei i { background: rgba(72,191,145,0.35); border: 1px solid rgba(72,191,145,0.7); }
.sc-karte__legende .is-nacht i { background: repeating-linear-gradient(45deg, rgba(245,165,36,0.7) 0 2px, rgba(72,191,145,0.35) 2px 5px);
    border: 1px solid rgba(245,165,36,0.7); }
.sc-karte__legende .is-pauschale i { background: rgba(239,68,68,0.3); border: 1px solid rgba(239,68,68,0.65); }
.sc-karte__legende .is-s i { background: #48bf91; }
.sc-karte__legende .is-u i { background: #4eb4d7; }
.sc-karte__legende .is-t i { background: #e5e7eb; }
.sc-karte__legende .is-weg i { height: 3px; width: 16px; border-radius: 2px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px); }
/* Letzte Bahn am Ort (nur mit Nachtvorbehalt) */
.sc-karte__letzte { flex: 1 1 100%; font-style: normal; color: #fcd34d; padding-left: calc(11px + 0.4rem); }
.sc-karte__letzte[hidden] { display: none; }
.sc-karte__quelle { color: rgba(255,255,255,0.4); font-size: 11px; }
/* Kurzform der Legende (nur wo die Seite es will, z. B. Rechner am Handy) */
.sc-karte__kurz { display: none; }
/* Knoepfe: zoomen, zentrieren, vergroessern */
.sc-karte__knoepfe { position: absolute; right: 10px; top: 10px; z-index: 7; display: flex; flex-direction: column; gap: 6px; }
.sc-karte__knopf { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; cursor: pointer;
    color: #e5e7eb; background: rgba(14,17,19,0.88); border: 1px solid rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 0.15s, color 0.15s, background 0.15s; }
.sc-karte__knopf svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-karte__knopf:hover, .sc-karte__knopf:focus-visible { color: #ffffff; border-color: rgba(78,180,215,0.7); outline: none; }
.sc-karte.is-verschoben .sc-karte__knopf.is-mitte { color: #0e1113; background: #4eb4d7; border-color: #4eb4d7; }
/* Gesten-Hinweis (zwei Finger / Strg + Mausrad) */
.sc-karte__tipp { position: absolute; left: 50%; top: 50%; z-index: 8; transform: translate(-50%, -50%); pointer-events: none;
    max-width: 80%; padding: 8px 14px; border-radius: 10px; font-size: 13px; line-height: 1.35; text-align: center;
    color: #fff; background: rgba(14,17,19,0.86); opacity: 0; transition: opacity 0.25s; }
.sc-karte__tipp.is-an { opacity: 1; }
.sc-karte__halt { z-index: 1; } .sc-karte__station { z-index: 2; } .sc-karte__label { z-index: 3; } .sc-karte__pin { z-index: 4; } .sc-karte__chips { z-index: 5; }
/* Vollbild (⤢ oder Klick auf die kleine Karte) */
.sc-karte-vollbild { position: fixed; inset: 0; z-index: 2147483000; display: flex; padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
    background: rgba(0,0,0,0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sc-karte-vollbild__karte { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
.sc-karte.is-vollbild { flex: 1 1 auto; margin: 0; display: flex; flex-direction: column; min-height: 0; }
.sc-karte.is-vollbild .sc-karte__flaeche { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; touch-action: none; }
.sc-karte.is-vollbild .sc-karte__knopf { width: 40px; height: 40px; }
/* Ladeanzeige, bis die Kartendaten da sind (Betreiber 12.10.2026) */
.sc-karte__lader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 12.5px; color: rgba(255,255,255,0.6); }
.sc-karte__kreis { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(78,180,215,0.25); border-top-color: #4eb4d7;
    animation: scKarteDreh 0.9s linear infinite; }
@keyframes scKarteDreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-karte__kreis { animation-duration: 2.5s; } }
/* Kleine Karte: deutlich klickbar (Knopf mit Text, Rand beim Ueberfahren) */
.sc-karte__knopf.has-text { width: auto; padding: 0 11px 0 9px; gap: 6px; display: inline-flex; font-size: 12px; font-weight: 600; }
.sc-karte.is-klickbar { transition: border-color 0.15s; }
.sc-karte.is-klickbar:hover, .sc-karte.is-klickbar:focus-within { border-color: rgba(78,180,215,0.55); }