/* Curvy workspace: quiet dark surfaces, coral actions, one responsive panel. */
/* iOS-Glas (Liquid Glass "regular") für Handy-Sheet, Kartenstil-Knopf und 3D-Player. Füllung passt sich der Karte an
   (body[data-basemap], hack.js showBaseLayer) wie iOS dem Inhalt darunter: dunkel 62 %, Satellit 72 %, hell 80 % → --ui-muted ≥ 4,5:1. */
body { --ui-glass: rgba(23, 25, 28, .62); --ui-glass-blur: blur(28px) saturate(1.5); --ui-glass-edge: rgba(255, 255, 255, .14); --ui-glass-light: inset 0 1px 0 rgba(255, 255, 255, .10); }
body[data-basemap^=satellite] { --ui-glass: rgba(23, 25, 28, .72); }
body[data-basemap=roadsLight] { --ui-glass: rgba(23, 25, 28, .80); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { body, body[data-basemap] { --ui-glass: var(--ui-bg); --ui-glass-blur: none; } }
:root { --ui-bg: #17191c; --ui-surface: #22252a; --ui-line: #363a40; --ui-text: #f5f4f2; --ui-muted: #b6bbc3; --ui-accent: #ff7b64; --panel-width: 384px; --panel-height: 52dvh; --keyboard-inset: 0px; }
body { font-size: 14px; }
/* Eine Button-Schrift für die ganze App, auch in Karten-Popups und Zusatzleisten (ohne !important: eigene Regeln
   setzen nur noch die Grösse, nicht Familie, Gewicht oder Laufweite). */
button, .nav-link, .map-legal-link { font-family: var(--font-ui); font-weight: 600; letter-spacing: normal; }
button { font-size: 13px; }
[hidden] { display: none !important; }
#map { position: relative; left: var(--panel-width); width: calc(100% - var(--panel-width)); height: 100%; }
#app-panel { position: fixed; inset: 0 auto 0 0; width: 384px; z-index: 2000; background: var(--ui-bg); color: var(--ui-text); border-right: 1px solid var(--ui-line); display: flex; flex-direction: column; box-shadow: none; --ink: var(--ui-text); --ink-soft: var(--ui-muted); --accent: var(--ui-accent); --line: var(--ui-line); }
#app-panel.is-collapsed { display: none; }
#app-panel *, .map-style-control * { box-sizing: border-box; }
#app-panel select, #app-panel label, #app-panel .result-stats, #app-panel .settings-hint, #app-panel .unit, #app-panel .saved-item { font-size: 14px; }
#app-panel button, .map-style-control button { font-size: 13px; }
#app-panel button, .map-style-control button, #map-pick-bar button { min-height: 44px; min-width: 44px; font-family: var(--font-ui); cursor: pointer; box-shadow: none; text-shadow: none; }
#app-panel button { border-radius: 8px; }
#app-panel input:not([type=checkbox]):not([type=radio]):not([type=range]), #app-panel textarea, .treff-form input, .treff-form textarea { font-size: 16px !important; min-height: 44px; }
#app-panel button:focus-visible, #app-panel input:focus-visible, #app-panel select:focus-visible, #app-panel textarea:focus-visible, .map-style-control button:focus-visible, .map-legal-link:focus-visible, #map-pick-bar button:focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 2px; }
#app-panel .header-top { flex: 0 0 68px; display: flex; align-items: center; padding: 10px 16px; margin: 0; border: 0; gap: 8px; }
#app-panel h1 { flex: 1; margin: 0; gap: 9px; font-size: 26px; }
#app-panel .brand-mark { color: var(--ui-accent); }
#app-panel .pro-badge { font-size: 27px; color: var(--ui-text); }
#app-panel .header-controls { gap: 4px; }
#app-panel .lang-switch { padding: 0; border: none; background: transparent; }
#app-panel .lang-btn { min-width: 36px; padding: 4px; background: transparent; color: var(--ui-muted); }
#app-panel .lang-btn.active { color: var(--ui-text); background: var(--ui-surface); }
#app-panel .settings-icon-btn, #panel-collapse { background: transparent; color: var(--ui-muted); border: none; }
#panel-collapse { font-size: 25px !important; }
#panel-resizer { display: none; }
#sheet-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 12px; gap: 0; border-radius: 0; border-bottom: 1px solid var(--ui-line); background: transparent; flex-shrink: 0; }
#sheet-tabs button { min-width: 0; padding: 12px 2px; border: none; border-bottom: 3px solid transparent; background: transparent; color: var(--ui-muted); border-radius: 0; box-shadow: none; white-space: nowrap; }
#sheet-tabs button[aria-selected=true] { background: transparent; color: var(--ui-accent); border-bottom-color: var(--ui-accent); box-shadow: none; }
#sheet-tabs button span { font-size: 13px; font-weight: inherit; margin-left: 3px; font-variant-numeric: tabular-nums; }
#sheet-tabs button.glow { animation: none; box-shadow: none; }
#sheet-tabs button.glow::after { content: '•'; margin-left: 3px; color: var(--ui-accent); }
#panel-content { flex: 1; min-height: 0; position: relative; overflow: hidden; }
#app-panel .app-view { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: var(--ui-bg) !important; color: var(--ui-text); opacity: 1 !important; transform: none !important; transition: none !important; flex-direction: column; overflow: auto; padding: 20px; overscroll-behavior: contain; backdrop-filter: none !important; pointer-events: auto !important; }
#app-panel #control-panel { display: flex; padding: 0; }
#app-panel .menu-card { margin: 0; padding: 20px; background: transparent; border: none; border-radius: 0; box-shadow: none; }
#app-panel .menu-group-search { flex: 1; }
.search-intro h2 { font-size: 26px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -.4px; }
.search-intro p { color: var(--ui-muted); font-size: 15px; line-height: 1.5; margin: 0 0 22px; font-weight: 400; }
#app-panel .place-search-container { padding: 0 !important; border: none !important; background: none !important; margin: 0 0 12px !important; }
#app-panel .place-search-container label { color: var(--ui-text) !important; font-size: 14px !important; }
#app-panel #search-mode-switch { margin: 0 0 16px; }
#app-panel #search-mode-switch button { font-size: 14px; padding: 8px 4px; }
#app-panel .place-search-container input#ziel-input,
#app-panel .place-search-container input#place-search-input { padding: 12px 36px 12px 12px !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; font-size: 16px !important; }
#app-panel .autocomplete-item { min-height: 44px; font-size: 14px !important; }
#app-panel .quick-actions { gap: 8px; margin: 0 0 22px; }
#app-panel .quick-actions button { font-size: 13px; padding: 10px 6px; white-space: normal; line-height: 1.2; text-overflow: clip; }
#app-panel .quick-actions #search-ai-btn { flex: 0 0 56px; padding-inline: 4px; }
#app-panel .search-expand { display: none; }
#app-panel .menu-group-search > .location-divider { display: none; }
#app-panel .road-types-section { margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
#app-panel .input-group { margin-bottom: 18px; }
#app-panel .slider-group label { margin-bottom: 17px; }
#app-panel .range-track { margin-bottom: 20px; }
#app-panel input[type=range] { height: 44px; top: -18px; touch-action: pan-y; }
#app-panel .road-types-title { color: var(--ui-muted); font-size: 14px; text-transform: none; letter-spacing: 0; }
#app-panel .road-types-grid { gap: 8px; }
#app-panel .checkbox-row { min-height: 44px; align-items: center; }
#app-panel .checkbox-row input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--ui-accent); }
#app-panel .checkbox-row label { line-height: 1.4; cursor: pointer; }
/* Schalter im Einstellungsmenü (hack.js initToggleInputs, nach codepen.io/aaroniker/pen/ZEpEvdz): an = Rot der App, Knopf schwarz */
#app-panel #settings-overlay .switch { position: relative; display: block; flex-shrink: 0; border-radius: 12px; }
#app-panel #settings-overlay .switch input { appearance: none; -webkit-appearance: none; display: block; margin: 0; padding: 0; border: none; outline: none; width: 38px; height: 24px; border-radius: inherit; background: #d2d6e9; cursor: pointer; transition: background-color .35s ease-out; }
#app-panel #settings-overlay .switch input:not(:checked):hover { background: #c7cbdf; transition-duration: .2s; }
#app-panel #settings-overlay .switch input:checked { background: var(--accent); }
#app-panel #settings-overlay .switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app-panel #settings-overlay .switch .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; right: 18px; border-radius: 8px; background: #000; pointer-events: none; }
#app-panel #settings-overlay .switch input:checked + .knob { left: 18px; right: 4px; }
/* Checkboxen in der Suche (dritte Spalte des Pens): Rand → rot gefüllt, schwarzes Häkchen */
#app-panel .menu-group-search .tick-check { position: relative; display: block; flex-shrink: 0; border-radius: 5px; }
#app-panel .menu-group-search .tick-check input { appearance: none; -webkit-appearance: none; display: block; margin: 0; padding: 0; border: none; outline: none; width: 24px; height: 24px; border-radius: inherit; background: none; cursor: pointer; box-shadow: inset 0 0 0 2px #d2d6e9; transition: box-shadow .25s; }
#app-panel .menu-group-search .tick-check input:not(:checked):hover { box-shadow: inset 0 0 0 3px var(--accent); }
#app-panel .menu-group-search .tick-check input:checked { box-shadow: inset 0 0 0 12px var(--accent); transition-duration: .2s; }
#app-panel .menu-group-search .tick-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app-panel .menu-group-search .tick-check svg { position: absolute; inset: 0; width: 24px; height: 24px; pointer-events: none; fill: #000; }
#app-panel .menu-group-search .tick-check .tick { fill: none; stroke: #000; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px 33px; stroke-dashoffset: 20.5px; }
#app-panel .menu-group-search .tick-check .dot { transform: scale(0); }
#app-panel .menu-group-search .tick-check input:not(:checked) + svg .tick { visibility: hidden; } /* sonst ragt sein Ende oben rechts heraus */
#app-panel .menu-group-search .tick-check input:checked + svg .tick { stroke-dashoffset: 46.5px; stroke-dasharray: 16.5px 33px; }
#app-panel .menu-group-search .tick-check input:checked + svg .dot { transform: none; }
#app-panel .search-actions { padding: 12px 20px 16px; position: sticky; bottom: 0; background: var(--ui-bg); flex-shrink: 0; z-index: 3; }
#app-panel #load-btn { width: 100%; margin: 0; }
#app-panel .primary, #app-panel .nav-primary { background: var(--ui-accent) !important; color: #201512 !important; border: 1px solid var(--ui-accent) !important; box-shadow: none !important; }
#app-panel .secondary, #app-panel .nav-link:not(.nav-primary), #app-panel select { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-line); box-shadow: none; }
#app-panel .secondary.active { color: var(--ui-accent); border-color: var(--ui-accent); }
#panel-footer { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; border-top: 1px solid var(--ui-line); flex-shrink: 0; }
#app-panel #feedback-toggle-btn { width: auto; padding: 6px 4px; background: transparent; border: none; color: var(--ui-muted); box-shadow: none; }
#app-panel .instagram-link { font-size: 14px; color: var(--ui-muted); border: 0; padding: 8px; background: none; min-height: 44px; }
#app-panel .instagram-link:hover { color: var(--ui-accent); background: none; box-shadow: none; border: 0; transform: none; }
#app-panel .results-header { display: flex; margin: 0 0 16px; padding: 0; border: 0; }
#app-panel .results-header h2 { display: block; color: var(--ui-text); font-size: 23px; }
#app-panel .results-header button, #left-panels, #sheet-hint, #panel-grabber, #results-toggle, #link-panel-toggle, #tours-toggle { display: none !important; }
#app-panel .sort-row { margin: 0 0 12px; padding: 0; background: none; flex-shrink: 0; }
#app-panel select { min-height: 44px; padding: 8px; min-width: 0; color-scheme: dark; }
/* Schnellfilter (Länge, Kurven, Kurven/km, Grad/km) in zwei Spalten: lesbar und nur zwei Zeilen hoch */
#app-panel .quick-filters { display: grid; grid-template-columns: 1fr; gap: 0 18px; padding: 10px 0 0; margin: 0 0 8px; border: 0; background: none; flex-shrink: 0; }
#app-panel .quick-filter-head { padding: 0; font-size: 13px; gap: 4px; white-space: nowrap; }
#app-panel .quick-filter-head > span { overflow: hidden; text-overflow: ellipsis; }
#app-panel #results-list, #app-panel #link-panel-list, #app-panel #tours-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; padding: 0; }
#app-panel .result-item { position: relative; display: flex; padding: 16px 0; gap: 10px; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; margin: 0; background: transparent; box-shadow: none; }
/* Letzte Strecke/Tour ohne Trennlinie: darunter kommen direkt die Tabs bzw. die Touraktionen */
#app-panel :is(#results-list, #link-panel-list, #tours-list) > .result-item:last-child { border-bottom: 0; }
#app-panel .result-item.selected { background: #ff7b6410; box-shadow: inset 3px 0 var(--ui-accent); padding-left: 10px; }
#app-panel .result-item.linked .result-name::after { content: ' ✓'; color: var(--ui-accent); }
#app-panel .result-name { font-size: 17px; font-weight: 700; white-space: normal; line-height: 1.3; margin-bottom: 6px; overflow-wrap: anywhere; }
#app-panel .result-rank, #app-panel .link-item-index { flex: 0 0 26px; width: 26px; height: 26px; color: var(--ui-muted); background: var(--ui-surface); border-radius: 6px; font-size: 14px; }
#app-panel .result-stats { color: var(--ui-muted); line-height: 1.6; }
#app-panel .result-nav { align-self: center; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-line); }
.panel-empty { margin: auto 0; padding: 28px 0; }
.panel-empty h3 { font-size: 23px; line-height: 1.3; margin: 0 0 12px; }
.panel-empty p { font-size: 15px; color: var(--ui-muted); line-height: 1.6; font-weight: 400; }
#app-panel #link-mode-switch { display: flex; padding: 0; margin: 0; flex-shrink: 0; }
#app-panel #link-mode-switch button { flex: 1; }
#app-panel #link-mode-switch button:disabled { opacity: .5; cursor: default; }
#app-panel #link-panel-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 0 0; margin: 0; flex-shrink: 0; border-top: 1px solid var(--ui-line); }
#app-panel #link-panel-actions[hidden] { display: none; }
/* Drei Aktionen nebeneinander: bei wenig Platz zweizeilig statt abgeschnitten. */
#app-panel #link-panel-actions .nav-link { padding: 4px 6px; font-size: 12px; line-height: 1.2; white-space: normal; text-overflow: clip; }
/* Strecke | Rundtour | KI | ▾ in einer Reihe (Umschalter 2/3, KI 1/3, ▾ klappt die Streckenanzahl auf). */
#app-panel .ai-tour-controls { flex: none; margin: 0 0 10px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 44px; gap: 8px; align-items: stretch; }
body[data-search-mode="ziel"] #app-panel .ai-tour-controls { grid-template-columns: minmax(0, 1fr); } /* ohne KI-Knopf */
#app-panel .ai-tour-count { grid-column: 1 / -1; min-width: 0; margin: 0; }
#app-panel .ai-tour-count[hidden] { display: none; }
#app-panel #link-ai-more { padding: 0; font-size: 17px; }
#app-panel #link-ai-more[aria-expanded=true] { transform: rotate(180deg); }
#app-panel .ai-tour-controls button { min-height: 44px; }
#app-panel :is(#link-ai-btn, #search-ai-btn) { background: #22c55e; border-color: #22c55e; color: #052e16; opacity: 1; }
#app-panel :is(#link-ai-btn, #search-ai-btn)[aria-busy=true]::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ai-spin .8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.link-content { display: contents; }
.list-scroll { display: contents; }
#app-panel #link-clear-btn { grid-column: 1 / -1; color: var(--ui-muted); background: transparent; }
#app-panel #link-panel-list .result-item { flex-wrap: wrap; }
#app-panel .link-item-controls { display: flex; margin-left: auto; }
#app-panel .link-item-controls button { min-width: 44px; }
#app-panel .settings-overlay { padding: 0; }
#app-panel .settings-overlay-header { position: sticky; top: 0; padding: 10px 16px; background: transparent; gap: 12px; border-bottom: 1px solid var(--ui-line); flex-shrink: 0; }
#app-panel .settings-overlay-header h2 { font-size: 21px; }
#app-panel .settings-header-spacer { display: none; }
#app-panel .settings-overlay-body { padding: 0 20px 20px; overflow-y: auto; }
#app-panel .settings-section { padding: 20px 0; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; box-shadow: none; }
#app-panel .settings-section:last-child { border-bottom: 0; }
#app-panel .settings-section h3 { font-size: 17px; color: var(--ui-text); }
#app-panel .settings-hint { opacity: 1; color: var(--ui-muted); font-weight: 400; }
#app-panel .settings-back-btn { background: rgba(255, 255, 255, .08); border: 1px solid var(--ui-glass-edge); color: var(--ui-text); }
#app-panel .tour-item { flex-wrap: wrap; }
#app-panel .tour-item .result-info { flex: 1; min-width: 0; }
#app-panel .tour-item .result-nav { position: absolute; top: 8px; right: 0; }
#app-panel .tour-item .result-name { padding-right: 44px; }
#app-panel .tour-rate { display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; gap: 4px; margin-top: 12px; }
#app-panel .star-rating { display: flex; gap: 0; padding: 0; touch-action: pan-y; }
#app-panel .star-rating button { min-width: 44px; width: 44px; height: 44px; color: #828a96; font-size: 29px; border: 0; background: transparent; padding: 0; border-radius: 6px; }
#app-panel .star-rating button.on { color: #f6c96b; }
/* Die eigenen Bewertungssterne werden nach der Bewertung ausgeblendet, da der Durchschnitt in den Stats steht. */
.rating-status { font-size: 14px; color: var(--ui-muted); min-height: 22px; }
.rating-status[data-status=error] { color: #ff9a87; }
.rating-status[data-status=saved] { color: #a6d7b4; }
#app-panel #search-status-popup { position: relative; inset: auto; width: 100%; transform: none; margin: 0 0 16px; padding: 12px; border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 8px; box-shadow: none; flex-shrink: 0; z-index: auto; }
#app-panel .popup-title-row, #app-panel .popup-subtext, #app-panel .popup-meta-row { font-size: 14px; }
#app-panel .popup-radar-pulse { display: none; }
#app-panel .popup-cancel-btn { position: static; flex-shrink: 0; }
.map-style-control { color: var(--ui-text); }
#map .leaflet-top.leaflet-right { top: max(12px, env(safe-area-inset-top)); right: 12px; }
#map .map-style-control { margin: 0; }
#map .map-style-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--ui-text); border-radius: 8px;
    background: var(--ui-glass); -webkit-backdrop-filter: var(--ui-glass-blur); backdrop-filter: var(--ui-glass-blur); border: 1px solid var(--ui-glass-edge); box-shadow: var(--ui-glass-light), 0 4px 16px rgba(0, 0, 0, .3); }
/* Kartenauswahl als Glas wie Sheet/Knopf; Flächen/Linien darin als helle Schleier (wie im Glas-Sheet) */
#map .map-style-pop { left: auto; right: 0; top: 54px; width: 300px; max-width: calc(100vw - 24px); max-height: calc(var(--visual-height, 100dvh) - 84px); overflow-y: auto; color: var(--ui-text); padding: 14px;
    --ui-surface: rgba(255, 255, 255, .08); --ui-line: rgba(255, 255, 255, .12);
    background: var(--ui-glass); -webkit-backdrop-filter: var(--ui-glass-blur); backdrop-filter: var(--ui-glass-blur); border: 1px solid var(--ui-glass-edge); box-shadow: var(--ui-glass-light), 0 12px 32px rgba(0, 0, 0, .35); }
#map .map-style-pop h3 { grid-column: 1 / -1; font-size: 16px; margin: 12px 0 0; }
#map .map-style-option { color: var(--ui-text); }
#map .map-style-name { font-size: 13px; }
#map .map-style-3d { min-height: 44px; font-size: 13px; }
#map .menu-group-api { grid-column: 1 / -1; padding: 0; margin: 0; border: none; background: none; box-shadow: none; }
#map .api-grid { gap: 8px; }
#map .api-grid .map-legal-link { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; font-family: var(--font-ui); text-decoration: none; }
/* Ebenen- und 3D-Knopf wie die Knöpfe der App (#app-panel .secondary): an = Akzent-Text und -Rand. !important gegen die alten Farben aus style.css */
#map .api-grid button, #map .api-grid button:hover, #map .api-grid .map-legal-link, #map #map-mode-menu-btn, body.dark #map #map-mode-menu-btn { font-size: 13px; font-weight: 600; padding: 8px 4px; border-radius: 8px;
    color: var(--ui-text) !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; box-shadow: none !important; }
#map .api-grid button.active, #map .api-grid button.active:hover, #map #map-mode-menu-btn.active { color: var(--ui-accent) !important; border-color: var(--ui-accent) !important; background: var(--ui-surface) !important; }
#map .leaflet-control-container:has(.map-style-control.is-open) { z-index: 2400; }
#bottom-floating-container { left: calc(var(--panel-width) + (100% - var(--panel-width)) / 2); bottom: 28px; max-width: calc(100vw - var(--panel-width) - 40px); gap: 8px; }
#bottom-floating-container button { min-width: 44px; min-height: 44px; }
#toast-container { left: calc(var(--panel-width) + (100% - var(--panel-width)) / 2); bottom: 100px; }
.toast { font-size: 14px; background: var(--ui-bg); backdrop-filter: none; border-radius: 8px; }
#map-pick-bar { position: fixed; top: 12px; left: calc(var(--panel-width) + 12px); z-index: 2600; display: flex; gap: 12px; align-items: center; max-width: calc(100vw - var(--panel-width) - 24px); padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-bg); color: var(--ui-text); font-size: 16px; }
#map-pick-bar button { padding: 8px 12px; color: var(--ui-text); border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: 6px; }
#mobile-ui-btn { left: 12px; right: auto; top: 12px; bottom: auto; width: auto; min-height: 44px; padding: 8px 16px; transform: none; border-radius: 8px; background: var(--ui-bg); font-size: 17px; z-index: 2000; }
#map .leaflet-control-attribution.leaflet-control { display: block !important; font-size: 11px; }
#map .leaflet-control-container { height: 100%; }
@media (max-width: 899px) {
    :root { --panel-width: 0px; }
    #app-panel { inset: auto 0 var(--keyboard-inset); width: 100%; height: var(--panel-height); max-height: 100dvh; border: 1px solid var(--ui-line); border-bottom: 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    #panel-resizer { position: relative; display: flex; justify-content: center; flex: 0 0 24px; touch-action: none; }
    #app-panel #panel-size-btn { display: flex; align-items: center; justify-content: center; width: 88px; min-height: 24px; height: 24px; padding: 0; border: none; background: transparent; touch-action: none; }
    #panel-size-btn span { width: 36px; height: 4px; background: #838990; border-radius: 3px; }
    #app-panel .header-top { flex-basis: 52px; padding: 0 16px 8px; }
    #app-panel h1 { font-size: 22px; }
    #app-panel .pro-badge { font-size: 23px; }
    #panel-collapse, #panel-footer .instagram-link { display: none; }
    #app-panel #sheet-tabs { order: 4; padding-bottom: 3px; border-top: 1px solid var(--ui-line); border-bottom: 0; }
    #app-panel #sheet-tabs button { border-top: 3px solid transparent; border-bottom: 0; padding: 10px 2px; }
    #app-panel #sheet-tabs button[aria-selected=true] { border-top-color: var(--ui-accent); }
    #panel-content { order: 2; border-radius: 19px 19px 0 0; }
    #panel-footer { order: 3; position: absolute; right: 12px; top: 28px; border: 0; padding: 0; }
    #panel-footer #feedback-toggle-btn { font-size: 13px; }
    #app-panel .header-controls { margin-right: 0; }
    #app-panel .lang-switch { display: none; }
    #app-panel[data-size=small] .header-top, #app-panel[data-size=small] #panel-content, #app-panel[data-size=small] #panel-footer { display: none; }
    #app-panel[data-size=small] #sheet-tabs { margin-top: auto; }
    /* Kurzzeitig beim Messen der Inhaltshöhe (heights() in ui-controller.js) */
    #app-panel.sheet-measure #panel-content { display: block; }
    #app-panel.sheet-measure[data-view=search] .header-top { display: flex; }
    #app-panel.sheet-measure .app-view.visible { position: static !important; height: auto !important; }
    #app-panel.sheet-measure #results-list, #app-panel.sheet-measure #link-panel-list, #app-panel.sheet-measure #tours-list { flex: none; }
    #app-panel.sheet-measure .link-content, #app-panel.sheet-measure .list-scroll { flex: none; overflow: visible; }
    #app-panel .app-view { padding: 16px; }
    #app-panel .menu-card { padding: 12px 16px 8px; }
    /* Suche passt ab 356×696 ohne Scrollen aufs Handy (vor und nach der Suche). */
    #app-panel #control-panel.app-view { padding-top: 0 !important; }
    #app-panel .menu-group-search { padding-top: 2px; }
    /* Kompakte Suche endet unter den Standort-/Suchgebiet-/KI-Buttons. */
    #app-panel.is-compact-search .menu-group-search { flex: none; }
    #app-panel.is-compact-search #control-panel { overflow: hidden; }
    #app-panel.is-compact-search:not(.sheet-measure) #road-types-section,
    #app-panel.is-compact-search:not(.sheet-measure) .search-actions { display: none; }
    /* Filter-Hinweis im vorhandenen Griff: braucht keine zusätzliche Höhe. */
    #app-panel.is-compact-search .search-expand { position: absolute; top: 0; right: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 24px; height: 24px; padding: 0 4px; background: transparent; border: none; color: var(--ui-muted); font-size: 11px; line-height: 1; }
    #app-panel .search-expand:hover { color: var(--ui-accent); }
    #app-panel .search-expand svg { color: var(--ui-accent); }
    #app-panel .search-intro p { display: none; }
    #app-panel .road-types-section { padding-top: 12px; }
    #app-panel #found_routes_count { margin: 0 0 8px; padding: 8px 0; }
    #app-panel #load-btn { padding-top: 12px; padding-bottom: 12px; }
    /* Nur der Listeninhalt scrollt; Filter und Überschrift sind feste Flex-Geschwister. */
    #app-panel #results-list, #app-panel #link-panel-list, #app-panel #tours-list { flex: none; overflow: visible; overscroll-behavior: auto; }
    #app-panel .list-scroll { display: block; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; }
    #app-panel .results-header { flex: none; position: static; margin: 0 0 6px; padding: 0; }
    #app-panel .results-header h2 { font-size: 18px; line-height: 1.25; margin: 0; }
    #app-panel .sort-row { margin-bottom: 6px; }
    #app-panel .quick-filters { padding: 0; margin: 0 0 4px; }
    #app-panel .quick-filters .range-track { margin-bottom: 12px; }
    #app-panel .result-item { padding: 8px 0; gap: 8px; }
    #app-panel .result-name { font-size: 15px; line-height: 1.25; margin-bottom: 2px; }
    #app-panel .result-stats { line-height: 1.35; }
    #app-panel .tour-item .result-stats { padding-right: 48px; overflow-wrap: anywhere; }
    #app-panel .tour-rate { margin-top: 4px; gap: 0; }
    #app-panel .rating-status:empty { min-height: 0; }
    #app-panel #link-summary { margin: 0 0 8px; padding: 6px 8px; }
    /* Leere Listen-Tabs kompakt: Sheet so klein wie nötig. */
    #app-panel .panel-empty { margin: 0; padding: 0; }
    #app-panel .panel-empty h3 { font-size: 18px; margin: 0 0 6px; }
    #app-panel .panel-empty p { font-size: 14px; line-height: 1.45; margin: 0; }
    #app-panel .search-actions { padding: 10px 16px; }

    /* Glas-Sheet (Tokens oben bei body): nur das Sheet ist Glas, darin keine zweite Glasfläche. Flächen/Linien als helle Schleier statt Grau. */
    #app-panel { --ui-surface: rgba(255, 255, 255, .08); --ui-line: rgba(255, 255, 255, .12);
        background: var(--ui-glass); -webkit-backdrop-filter: var(--ui-glass-blur); backdrop-filter: var(--ui-glass-blur);
        border-color: var(--ui-glass-edge); box-shadow: var(--ui-glass-light), 0 -8px 32px rgba(0, 0, 0, .35); }
    #app-panel .app-view { background: transparent !important; }
    /* Kanteneffekt statt harter Fläche, nur wo Inhalt unter festen Leisten durchscrollt (.overflows: ui-controller.js layout) */
    #app-panel .search-actions { background: transparent; }
    #app-panel #control-panel.overflows .search-actions { background: linear-gradient(to bottom, transparent, var(--ui-glass) 14px); }
    #app-panel .settings-overlay-header { background: transparent; }

    #app-panel .tour-rate { margin-left: -34px; }
    #bottom-floating-container { bottom: calc(var(--panel-height) + var(--keyboard-inset) + 12px); max-width: calc(100vw - 24px); }
    #toast-container { bottom: calc(var(--toast-offset, 60px) + var(--keyboard-inset)); max-width: calc(100vw - var(--panel-width) - 24px); max-height: max(44px, calc(var(--visual-height, 100dvh) - var(--toast-offset, 60px) - max(12px, env(safe-area-inset-top)))); overflow-y: auto; }
    .toast { flex-shrink: 0; }
    #map .leaflet-bottom { bottom: 0; z-index: 900; }
    #map .leaflet-bottom.leaflet-right { left: 0; right: auto; max-width: calc(100% - 180px); }
    #map .leaflet-control-attribution { max-width: 100%; background: transparent; text-shadow: 0 0 2px var(--ui-bg), 0 0 4px var(--ui-bg); }
    #map-pick-bar { top: 66px; font-size: 14px; }
    #selection-info .selection-actions .nav-link { min-height: 44px; font-size: 13px; }
    #selection-info .selection-title-row .selection-ride { min-width: 44px; min-height: 44px; }
    #selection-info .selection-title-row .selection-ride::after { content: none; }
    #map .leaflet-popup-close-button, #map .maplibregl-popup-close-button { min-width: 44px; min-height: 44px; font-size: 23px; line-height: 44px; }
    .leaflet-popup #selection-info, .maplibregl-popup #selection-info { width: min(280px, calc(100vw - var(--panel-width) - 80px)) !important; }
    .leaflet-popup #selection-info .selection-title-row, .maplibregl-popup #selection-info .selection-title-row { padding-right: 34px; }
}
@media (prefers-reduced-motion: reduce) { #app-panel *, #map .map-style-pop { animation: none !important; transition: none !important; } }
#app-panel h2:focus { outline: none; }
#app-panel .result-item { align-items: flex-start; }
#app-panel #live-location-btn { display: flex; }
#app-panel .panel-language { display: flex; gap: 8px; }
#app-panel .panel-language button { flex: 1; background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-line); }
@media (max-width: 899px) {
    label[for="place-search-input"] { display: none; }
    #panel-footer { top: 42px; }
    #app-panel .quick-actions { margin-bottom: 10px; }
    #app-panel #control-panel #found_routes_note { display: none !important; }
    /* Trefferzahl nur am Desktop in der Suche; am Handy steht sie im Reiter „Strecken“ (kompaktes Such-Sheet) */
    #app-panel #control-panel #found_routes_count { display: none !important; }
}
@media (max-width: 360px) {
    #app-panel .quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { #app-panel #results-list, #app-panel #link-panel-list, #app-panel #tours-list { min-height: 140px; flex: 1 0 140px; } }
#app-panel #results-panel, #app-panel #link-panel, #app-panel #tours-panel { overflow-y: auto; }
@media (max-width: 899px) {
    #app-panel #results-panel, #app-panel #tours-panel { padding: 8px 12px; overflow: hidden; }
    #app-panel #link-panel { padding: 0; overflow: hidden; }
    #app-panel .link-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 8px 12px; }
    #app-panel #link-panel-actions { padding: 8px 12px; gap: 6px; }
}
#app-panel #link-clear-btn { min-width: 44px; width: auto; padding: 0 12px; grid-column: auto; margin-left: auto; background: transparent; color: var(--ui-muted); white-space: nowrap; }
#app-panel #link-panel .results-header button { display: block; }
#app-panel #link-panel #link-panel-close-btn { display: none; }
#tours-status { padding: 12px 0; font-size: 14px; color: var(--ui-muted); }
#tours-status button { margin: 8px 0; }
#sheet-tabs .is-loading::after { content: '…'; margin-left: 3px; }
#app-panel .lang-btn { min-width: 44px; }
#map .map-style-pop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app-panel #link-clear-btn:not([hidden]) { display: block !important; }
#app-panel .results-header { align-items: center; }

#app-panel .settings-section, #app-panel .saved-item-meta, #app-panel .saved-item-name, #app-panel #foto-key-status, #app-panel #tomtom-key-status { font-size: 14px; }
#app-panel .settings-overlay-body { display: block; }
#app-panel .settings-section { flex-shrink: 0; }
#app-panel #settings-overlay .saved-actions button.secondary, #app-panel #settings-overlay #save-search-btn { min-height: 44px; font-size: 13px; }

#bottom-floating-container.in-map-menu { position: static; grid-column: 1 / -1; transform: none; width: 100%; max-width: 100%; margin-top: 8px; }
#app-panel .settings-back-btn:focus-visible { outline-offset: 0; }

@media (max-width: 899px) {
    /* Feedback im Footer ausblenden (steckt auf dem Handy in den Einstellungen, ⚙️ bleibt sichtbar) */
    #feedback-toggle-btn {
        display: none !important;
    }

    /* Hide curvy logo / header-top in specific views */
    #app-panel[data-view="results"] .header-top,
    #app-panel[data-view="link"] .header-top,
    #app-panel[data-view="tours"] .header-top {
        display: none !important;
    }

    #app-panel[data-size=large] { padding-top: env(safe-area-inset-top); }
}

/* Kurze, breite Smartphone-Ansicht: volle Listenhöhe neben der Karte. */
@media (min-width: 600px) and (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
    #app-panel { inset: auto auto var(--keyboard-inset) 0; width: var(--side-panel-width); height: var(--visual-height, 100dvh); border-radius: 0; border: 0; border-right: 1px solid var(--ui-line); padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); }
    #panel-resizer { display: none; }
    #app-panel .header-top, #app-panel[data-view] .header-top { display: flex !important; flex-basis: 44px; padding: 0 12px; }
    #app-panel #panel-collapse { display: block; }
    #app-panel[data-size=small] #panel-content { display: block; }
    #app-panel #panel-footer { display: none; }
    #panel-content { border-radius: 0; }
    #app-panel .results-header h2 { font-size: 20px; }
    #app-panel #sheet-tabs { padding-left: 4px; padding-right: 4px; }
    #bottom-floating-container { bottom: calc(var(--keyboard-inset) + 12px); }
    #map .leaflet-bottom { bottom: 0; }
    #map-pick-bar { left: 12px; max-width: calc(100vw - 24px); }
}

@media (min-width: 900px) {
    #app-panel .quick-actions button { white-space: nowrap; min-width: max-content; }
    /* display:contents erhält die bisherige Desktop-Reihenfolge. */
    #app-panel #link-summary { order: 1; }
    #app-panel #link-panel-list, #app-panel #link-empty { order: 3; }
    #app-panel #link-panel-actions { order: 4; }
    /* Only hide the label "Ort oder Pass" above the search field in Desktop view */
    label[for="place-search-input"] {
        display: none !important;
    }
}