/* ============================================================
   New York zu Fuß – dunkles Design, Karten-zentriertes Layout
   Vorbild: Apple-Maps-Wandern (Vollbild-Karte, Bottom Sheet,
   Filter-Pills, Routen-Thumbnails) – übersetzt in die
   Nacht/Subway-Farbwelt. Schrift: IBM Plex Sans.
   ============================================================ */

:root {
    --grund:      #24272c;   /* Anthrazit statt Nacht-Schwarz */
    --flaeche:    #2c3037;
    --flaeche-2:  #353a42;
    --linie:      #474d57;
    --text:       #f0f1f3;
    --text-2:     #a8afb9;
    --akzent:     #cfa64b;   /* gedämpftes Messing statt MTA-Gelb */
    --akzent-text:#141414;
    --radius:     12px;
    --schatten:   0 12px 36px rgba(0,0,0,.35);
    --schrift:    "IBM Plex Sans", system-ui, sans-serif;
    --mono:       "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.5;
    overflow: hidden;
}

a { color: var(--text-2); }

/* ---------- Vollbild-Karte ---------- */
#karte {
    position: fixed;
    inset: 0;
    background: #24272c;
    z-index: 1;
}

/* Die CARTO-Dark-Kacheln sind fast schwarz – hier heben wir sie
   auf Dunkelgrau. Nur an dieser Zeile drehen, wenn's heller oder
   dunkler sein soll (z. B. brightness(1.4) oder (1.9)). */
#karte .leaflet-tile {
    filter: brightness(1.65) contrast(0.95) saturate(0.85);
}

/* ---------- Standort-Knopf (schwebend) ---------- */
.hier-knopf {
    position: fixed;
    right: 16px;
    z-index: 1200;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--linie);
    border-radius: 50%;
    background: var(--flaeche);
    color: var(--akzent);
    cursor: pointer;
    box-shadow: var(--schatten);
    transition: bottom .25s ease;
}
.hier-knopf:hover { background: var(--flaeche-2); }
.hier-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.hier-knopf.sucht svg { animation: drehen 1.2s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hier-knopf.sucht svg { animation: none; } }

/* ---------- Panel: Bottom Sheet / Desktop-Karte ---------- */
.panel {
    position: fixed;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    background: rgba(44, 48, 55, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--linie);
    box-shadow: var(--schatten);
}

/* Mobil: Sheet unten, per Griff in drei Stufen ziehbar */
@media (max-width: 819px) {
    .panel {
        left: 0; right: 0; bottom: 0;
        height: 92dvh;
        border-radius: 16px 16px 0 0;
        border-bottom: 0;
        transform: translateY(var(--sheet-y, 45dvh));
        transition: transform .28s cubic-bezier(.25,.8,.35,1);
        touch-action: none;
    }
    .panel.zieht { transition: none; }
    .hier-knopf { bottom: calc(92dvh - var(--sheet-y, 45dvh) + 16px); }
}

/* Desktop: schwebende Spalte links, Karte bleibt sichtbar */
@media (min-width: 820px) {
    .panel {
        top: 16px; left: 16px; bottom: 16px;
        width: 400px;
        border-radius: var(--radius);
    }
    .griff-zone { display: none; }
    .hier-knopf { bottom: 24px; }
}

.griff-zone {
    padding: 10px 0 4px;
    cursor: grab;
    flex-shrink: 0;
}
.griff {
    display: block;
    width: 40px; height: 4px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--linie);
}

/* ---------- Suche ---------- */
.such-zeile {
    position: relative;
    display: flex;
    align-items: center;
    margin: 8px 14px 0;
    flex-shrink: 0;
}
.such-symbol {
    position: absolute;
    left: 12px;
    color: var(--text-2);
    pointer-events: none;
}
#suche {
    width: 100%;
    padding: 11px 40px 11px 40px;
    border: 1px solid var(--linie);
    border-radius: 10px;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 15px;
}
#suche::placeholder { color: var(--text-2); }
#suche:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.suche-leeren {
    position: absolute;
    right: 6px;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-2);
    font-size: 20px;
    cursor: pointer;
}
.suche-leeren:hover { color: var(--text); }

/* ---------- Filter-Pills mit Dropdowns ---------- */
.pill-zeile {
    display: flex;
    gap: 10px;
    margin: 12px 14px 0;
    flex-shrink: 0;
}
.dropdown { position: relative; }
.pill {
    padding: 8px 14px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--flaeche-2);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.pill:hover { border-color: var(--text-2); }
.pill.aktiv {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--akzent-text);
    font-weight: 600;
}
.pill:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.dropdown-menue {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche);
    box-shadow: var(--schatten);
}
.option {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-family: var(--schrift);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.option:hover { background: var(--flaeche-2); }
.option.aktiv { color: var(--akzent); font-weight: 600; }
.option.aktiv::after { content: " ✓"; }

/* ---------- Vorschlag ---------- */
.vorschlag {
    margin: 12px 14px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--flaeche-2);
    border: 1px solid var(--akzent);
    color: var(--text-2);
    font-size: 14px;
    flex-shrink: 0;
}
.vorschlag strong { color: var(--text); }

/* ---------- Routenliste mit Thumbnails ---------- */
.routenliste {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overscroll-behavior: contain;
}
.routen-karte {
    display: grid;
    grid-template-columns: 1fr 64px;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-family: inherit;
}
.routen-karte:hover { background: var(--flaeche-2); }
.routen-karte.aktiv { border-color: var(--routenfarbe, var(--akzent)); }
.routen-karte:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.routen-karte h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.routen-karte .stadtteil {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
}
.routen-karte .meta {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
}
.routen-karte .beschreibung {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--text-2);
    display: none;
}
.routen-karte.aktiv .beschreibung { display: block; }

/* Mini-Vorschau der Strecke, wie bei Apple */
.thumb {
    width: 64px; height: 64px;
    border-radius: 10px;
    background: var(--grund);
    border: 1px solid var(--linie);
}

.leer-hinweis { color: var(--text-2); font-size: 14px; }

.fuss {
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
    font-size: 12px;
    color: var(--text-2);
    flex-shrink: 0;
    border-top: 1px solid var(--linie);
}

/* ---------- Leaflet dunkel ---------- */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--flaeche);
    color: var(--text);
    box-shadow: var(--schatten);
}
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
.leaflet-popup-content {
    margin: 14px 16px;
    font-family: var(--schrift);
    font-size: 14px;
    line-height: 1.5;
}
.leaflet-container a.leaflet-popup-close-button { color: var(--text-2); }
.leaflet-control-zoom a {
    background: var(--flaeche);
    color: var(--text);
    border-color: var(--linie);
}
.leaflet-control-zoom a:hover { background: var(--flaeche-2); }
.leaflet-control-attribution {
    background: rgba(36,39,44,.75);
    color: var(--text-2);
}
.leaflet-control-attribution a { color: var(--text-2); }

/* ---------- Fotospot-Popup + Marker ---------- */
.spot-popup h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.spot-popup p { margin: 0; color: var(--text-2); }
.spot-popup img {
    display: block;
    width: 100%;
    max-width: 280px;
    border-radius: 8px;
    margin-bottom: 10px;
}
.spot-bullet {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.6);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}