/* wasserstand.fun -- Pegelkarte: Kuesten-Switcher, Zoom-Buttons, Regions-Hubs. Ausgelagert aus main.py (11.10.2026), Einbindung ueber _KARTE_INHALT_CSS. */
/* Nordsee/Ostsee-Switcher (Ostsee Phase 2, siehe AUFGABE Punkt 2 +
   _kueste_switcher_html()) -- Pill-Tabs analog zu .adm-tabs im Admin-Panel
   (admin.py), eigene Klasse da ausserhalb des Admin-Panels gerendert. */
.kueste-switcher { display: flex; gap: 4px; margin: 4px 0 16px; }
.kueste-tab {
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--neutral-300);
    color: var(--neutral-700);
    text-decoration: none;
    background: #fff;
}
.kueste-tab:hover { border-color: var(--accent-600); color: var(--accent-700); }
.kueste-tab-aktiv, .kueste-tab-aktiv:hover {
    background: var(--accent-200);
    border-color: var(--accent-600);
    color: var(--accent-800);
}
.pegelkarte-wrap {
    background: #fff;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    padding: 12px;
    margin: 18px 0 8px;
    position: relative;
}
.pegelkarte-svg { width: 100%; height: auto; max-height: 420px; display: block; overflow: hidden; }
/* Zoom/Pan-Steuerung (siehe AUFGABE "Zoom & Pan fuer die Karte",
   _KARTE_ZOOM_JS) -- Buttons oben rechts UEBER der Karte, position:relative
   auf .pegelkarte-wrap (oben) macht das moeglich. Rein optisch/Layout hier,
   die Interaktion kommt komplett aus _KARTE_ZOOM_JS. */
.karte-zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.karte-zoom-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 4px rgba(31, 45, 61, 0.14);
    font-size: 18px;
    line-height: 1;
    color: var(--neutral-700);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.karte-zoom-btn:hover { border-color: var(--accent-600); color: var(--accent-600); }
.karte-zoom-btn:active { background: var(--neutral-100); }
.karte-zoom-btn[disabled] { opacity: .4; cursor: default; }
.karte-legende { font-size: 12px; color: var(--neutral-600); margin: 8px 0 4px; }
.karte-legende-stern { color: #2563eb; }
.karte-legende-punkt { color: #2563eb; }
.karte-quelle { font-size: 11px; color: var(--neutral-600); margin: 0 0 28px; }
.karte-quelle a { color: inherit; }
.regionen-liste { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.region-karte {
    display: block;
    background: #fff;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    text-decoration: none;
    color: var(--neutral-900);
}
.region-karte:hover { border-color: var(--accent-600); }
.region-karte h2 { margin: 0 0 4px; }
.region-karte .region-anzahl { color: var(--neutral-600); font-size: 13.5px; }
.pegel-liste {
    padding-left: 0;
    list-style: none;
    margin: 16px 0 0;
}
/* Tages-Tide-Liste je Regions-Hub (siehe AUFGABE "Pegel-Liste wird
   Tages-Tide-Liste"): eine Zeile je Pegel, Name links, heutige HW/NW-
   Ereignisse rechts/im Flow -- Daten aus _region_tide_tage(). */
.pegel-zeile {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--neutral-200);
}
.pegel-zeile:last-child { border-bottom: none; }
.pegel-zeile-name {
    flex: 0 0 auto;
    min-width: 180px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--accent-600);
    text-decoration: none;
}
.pegel-zeile-name:hover { text-decoration: underline; }
.pegel-zeile-tiden {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 14px;
    flex: 1 1 auto;
}
.tide-ev {
    white-space: nowrap;
    font-size: 13.5px;
    color: var(--neutral-800);
}
.tide-ev b {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    margin-right: 3px;
}
.tide-hw b { color: var(--accent-700); background: var(--accent-200); }
.tide-nw b { color: var(--neutral-700); background: var(--neutral-100); }
.tide-vorbei { opacity: .45; }
@media screen and (max-width: 700px) {
    .pegel-zeile { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pegel-zeile-name { min-width: 0; }
    .pegel-zeile-tiden { width: 100%; }
}
/* "Zuletzt besucht"-Chip auf der Landingpage (siehe _pegel_uebersicht_html),
   ueber der Karte, per JS aus localStorage (ws_zuletzt) befuellt -- initial
   per [hidden] unsichtbar, defensiv falls JS/Storage fehlt. */
.ws-zuletzt-chip[hidden] { display: none; }
/* Karten-Seiten: Ueberschrift nicht direkt unter die Navbar kleben */
@media screen and (min-width: 701px) {
    .content-col > h1:first-child { margin-top: 34px; }
}
@media screen and (max-width: 700px) {
    .content-col > h1:first-child { margin-top: 18px; }
}
.ws-zuletzt-chip {
    display: inline-block;
    margin: 4px 0 4px;
    padding: 6px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-600) 12%, transparent);
    color: var(--accent-700);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}
.ws-zuletzt-chip:hover { background: color-mix(in srgb, var(--accent-600) 20%, transparent); }
@media (max-width: 480px) {
    h1 { font-size: 22px; }
}

.ws-widget-teaser { margin: 4px 0 14px; font-size: 13.5px; }
.ws-widget-teaser a { color: var(--accent-700); font-weight: 500; text-decoration: none; }
.ws-widget-teaser a:hover { text-decoration: underline; }

/* Karten-Hover-Tooltip (Teil 1, siehe AUFGABE) -- ein einzelnes,
   wiederverwendetes Element (siehe _KARTE_TOOLTIP_JS), das per JS bei
   mouseenter/mousemove ueber .karte-link positioniert wird. pointer-events:
   none, damit es selbst nie Maus-Events abfaengt (Klick auf den Marker
   darunter bleibt moeglich). Nur Desktop relevant (Touch navigiert per Tap
   ohne Hover), rendert aber auch mobil harmlos [hidden]. */
#wsKarteTip {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 500;
    max-width: 220px;
    background: #fff;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.16);
    padding: 6px 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--neutral-900);
}
#wsKarteTip strong { display: block; font-weight: 600; }

/* Mobil-Layout der Karten-Seiten (Teil 2, siehe AUFGABE) -- NUR Seiten mit
   dem Zusatz-Hook .app-shell--karte (Landingpage + 5 Regions-Hubs, siehe
   _app_shell_seite()); Stations-Seiten (kein Hook) bleiben unveraendert.
   Ist-Zustand mobil war: Sidebar (Pegel-Liste/Buttons/Disclaimer) kommt vor
   dem Inhalt -- Karte liegt weit unter dem Fold. Neu: schlanke Marken-Zeile,
   dann Inhalt (H1/Karte/Regionen), danach die Sidebar. Technik: die
   .app-shell selbst bleibt bei >700px unangetastet (Grid aus
   _app_shell_css()); erst ab hier wird sie fuer .app-shell--karte auf
   flex+order umgestellt -- robuster als das bestehende Markup
   umzusortieren, da .sidebar-bottom bei Desktop absolut positioniert ist
   und Grid-Reihenfolge sonst mit anfassen wuerde. */
.karte-mobile-brand { display: none; }
@media screen and (max-width: 700px) {
    .app-shell--karte {
        display: flex;
        flex-direction: column;
    }
    .app-shell--karte > .karte-mobile-brand {
        display: flex;
        order: 0;
        margin: 2px 4px 10px;
    }
    .app-shell--karte > .content-col { order: 1; }
    .app-shell--karte > .sidebar { order: 2; }
    .app-shell--karte > .sidebar-bottom { order: 3; }
    /* Marken-Zeile steht jetzt oben in .karte-mobile-brand -- die eigene
       Marken-Zeile der Sidebar wuerde sonst mobil doppelt erscheinen. */
    .app-shell--karte > .sidebar .sidebar-brand { display: none; }

    /* Karte mobil greifbarer: Treffer-Kreis der Marker (r ist eine
       stylebare SVG-Praesentations-Eigenschaft) auf Touch-Breiten
       grosszuegiger. Der fruehere horizontale Scroll-Hack (min-width:560px
       + overflow-x:auto) ist entfallen -- Zoom/Pan (siehe _KARTE_ZOOM_JS)
       ersetzt ihn: die Karte fuellt mobil die volle Breite (wird dadurch
       flacher, max-height:420px oben greift hier ohnehin nicht, da die
       natuerliche Hoehe bei Handy-Breiten schon darunter liegt), wer Details
       sehen will zoomt rein. */
    .karte-hit { r: 16; }
}
.karte-wisch-hinweis { display: none; }
@media screen and (max-width: 700px) {
    .karte-wisch-hinweis {
        display: block;
        font-size: 11px;
        color: var(--neutral-600);
        margin: 0 0 6px;
    }
}