* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

#layout { display: flex; height: 100vh; height: 100dvh; }

/* Griff der Mobil-Schublade – auf dem Desktop ausgeblendet */
#sheet-handle { display: none; }

#sidebar {
    width: 340px;
    flex: 0 0 340px;
    background: #f7f8fa;
    border-right: 1px solid #e2e5ea;
    overflow-y: auto;
    padding: 16px;
}
.all-parks-link { display: inline-block; color: #2563eb; text-decoration: none; font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
.all-parks-link:hover { text-decoration: underline; }
#sidebar header h1 { font-size: 1.2rem; margin: 0 0 8px; }
.head-row { display: flex; gap: 8px; margin-bottom: 8px; }
#park-switch { flex: 1; padding: 6px; }
#lang-switch { padding: 6px; }

#map { flex: 1; }

.panel {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
}
.hint { color: #6b7280; font-size: .8rem; margin: 4px 0; }

#recent-panel .recent-list { list-style: none; margin: 8px 0 0; padding: 0; }
#recent-panel .recent-list li { border-top: 1px solid #f0f1f3; }
#recent-panel .recent-list li:first-child { border-top: none; }
#recent-panel .recent-list a { display: block; padding: 8px 0; text-decoration: none; color: #111827; }
#recent-panel .recent-list a:hover { background: #f9fafb; }
.recent-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.recent-house { font-weight: 600; font-size: .9rem; }
.recent-stars { color: #f59e0b; font-size: .8rem; white-space: nowrap; }
.recent-comment { display: block; font-size: .82rem; color: #374151; margin: 2px 0; line-height: 1.35; }
.recent-by { display: block; font-size: .72rem; color: #9ca3af; }
textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .9rem; padding: 8px; border: 1px solid #cbd2dc; border-radius: 8px; resize: vertical; }

.row { display: flex; gap: 8px; margin-top: 8px; }
button {
    flex: 1; padding: 8px 10px; border: none; border-radius: 8px;
    background: #2563eb; color: #fff; font-weight: 600; cursor: pointer;
}
button.ghost { background: #e5e7eb; color: #374151; }
button:hover { filter: brightness(.95); }

#poi-list { list-style: none; padding: 0; margin: 8px 0 0; max-height: 320px; overflow-y: auto; }
#poi-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: .9rem;
}
#poi-list li:hover { background: #eef2ff; }
#poi-list .dist { color: #6b7280; font-size: .8rem; white-space: nowrap; margin-left: 8px; }
#poi-list li.fav { background: #fffbeb; font-weight: 600; }
#poi-list li.fav:hover { background: #fef3c7; }

#route-result { margin: 8px 0; }
#route-result .big { font-size: 1.4rem; font-weight: 700; }
#route-result .sub { color: #6b7280; }

/* Marker */
.house-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #9ca3af; border: 1px solid #fff;
}
.house-dot.found { background: #16a34a; width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(22,163,74,.25); }
.house-dot.selected { background: #2563eb; width: 16px; height: 16px; box-shadow: 0 0 0 4px rgba(37,99,235,.3); }

.poi-marker {
    background: #9aa1ad; color: #fff; border: 2px solid #fff;
    border-radius: 50%; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.poi-marker.fav {
    background: #f59e0b; width: 24px; height: 24px; font-size: 14px;
    box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
.poi-label { font-size: .75rem; font-weight: 600; }

#admin-link {
    position: absolute; right: 14px; bottom: 14px; z-index: 1000;
    width: 38px; height: 38px; border-radius: 50%;
    background: #111827; color: #fff; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.3); opacity: .8;
}
#admin-link:hover { opacity: 1; }

/* Kategorie-Einfärbung + Legende */
#cat-panel .toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
#cat-panel .toggle input { width: 16px; height: 16px; }
#cat-legend { list-style: none; padding: 0; margin: 8px 0 0; max-height: 260px; overflow-y: auto; }
#cat-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: .85rem; }
#cat-legend .cat-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); flex: 0 0 auto; }
#cat-legend .cat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cat-legend .cat-count { color: #6b7280; font-variant-numeric: tabular-nums; }

/* Swatch in der Layer-Control + Control-Höhe begrenzen */
.cat-swatch { display:inline-block; width:12px; height:12px; border-radius:2px; border:1px solid rgba(0,0,0,.25); vertical-align:middle; }
.leaflet-control-layers { max-height: 82vh; overflow-y: auto; }
.leaflet-control-layers-group-name { margin-top: 4px; }

/* Auf-/zuklappbare Layer-Gruppen */
.leaflet-control-layers-group-label { cursor: pointer; user-select: none; }
.grp-caret { font-size: .8em; color: #555; }
.leaflet-control-layers-group.collapsed > label:not(.leaflet-control-layers-group-label) { display: none; }
.grp-master { margin-right: 6px; vertical-align: middle; cursor: pointer; }

/* POI-Liste als Kategorie-Baum (Routenberechnung) */
#poi-list .poi-group { border-bottom: 1px solid #eef0f3; }
#poi-list summary { cursor: pointer; padding: 6px 2px; font-weight: 600; outline: none; }
#poi-list summary .g-count { float: right; color: #6b7280; font-weight: 400; font-size: .8rem; }
#poi-list .poi-group ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 16px; }

/* ======================================================================
   Responsive: Tablet & Handy
   Karte vollflächig, Sidebar wird zur Bottom-Sheet-Schublade.
   ====================================================================== */
@media (max-width: 860px) {
    :root { --sheet-peek: 124px; }   /* sichtbare Höhe der eingeklappten Schublade */

    html, body { overflow-x: hidden; }
    #layout { display: block; }

    /* Karte füllt den ganzen Bildschirm, Schublade liegt darüber */
    #map {
        position: fixed; inset: 0;
        width: 100vw; height: 100vh; height: 100dvh;
        z-index: 0;
    }

    #sidebar {
        position: fixed; left: 0; right: 0; bottom: 0;
        width: auto; flex: none;
        height: 85vh; height: 85dvh;
        padding: 0 14px 16px;
        border-right: none;
        border-top: 1px solid #e2e5ea;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
        transform: translateY(calc(100% - var(--sheet-peek)));
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 1100;
    }
    #sidebar.expanded { transform: translateY(0); }

    /* Griff bleibt beim Scrollen oben kleben */
    #sheet-handle {
        display: block; position: sticky; top: 0; z-index: 2;
        width: 100%; margin: 0; padding: 10px 0 8px;
        background: #f7f8fa; border: none; border-radius: 16px 16px 0 0;
        cursor: pointer;
    }
    #sheet-handle .grip {
        display: block; width: 44px; height: 5px; margin: 0 auto;
        background: #cbd2dc; border-radius: 3px;
    }

    #sidebar header { padding-top: 2px; }
    #sidebar header h1 { font-size: 1.15rem; }

    /* Touch-freundliche Bedienelemente, kein iOS-Auto-Zoom (>= 16px) */
    #park-switch, #lang-switch, textarea, button {
        font-size: 16px; min-height: 44px;
    }
    .panel { padding: 14px; }

    /* Rechtstexte-Links als Footer in die Schublade einbetten */
    #legal-links.in-sheet {
        position: static; transform: none;
        left: auto; right: auto; top: auto; bottom: auto;
        margin-top: 16px; padding-top: 14px;
        border-top: 1px solid #e2e5ea;
        flex-wrap: wrap; justify-content: center; gap: 8px;
    }
    #legal-links.in-sheet a { box-shadow: none; }
    #admin-link { bottom: calc(var(--sheet-peek) + 14px); z-index: 1090; }

    /* Karten-Attribution über die eingeklappte Schublade heben */
    .leaflet-bottom.leaflet-right { margin-bottom: var(--sheet-peek); }

    /* Ebenen-Control eingeklappt (Tippen zum Öffnen), Touch-Größe */
    .leaflet-control-layers-toggle { width: 44px; height: 44px; background-size: 22px 22px; }
    .leaflet-control-layers-expanded { max-width: 78vw; max-height: 60vh; overflow-y: auto; }
}

@media (max-width: 860px) and (orientation: landscape) {
    :root { --sheet-peek: 96px; }
    #sidebar { height: 92vh; height: 92dvh; }
}