/* VistaMira: an invitation to explore, within the established blue-hour palette. */
.discovery-hero{position:relative;isolation:isolate;min-height:350px;margin:0 0 20px;overflow:hidden;border:1px solid #7893b34d;border-radius:5px;background:#17385d}
.discovery-hero-picture,.discovery-hero-picture img{position:absolute;inset:0;width:100%;height:100%;display:block}
.discovery-hero-picture{z-index:-2}.discovery-hero-picture img{object-fit:cover;object-position:center 56%}
.discovery-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#061426ed 0%,#07172bd9 28%,#0b1c3580 56%,#07172b0d 83%),linear-gradient(0deg,#07172b80,transparent 45%)}
.discovery-hero-content{padding:42px 48px 48px;max-width:700px}
.discovery-hero .eyebrow{font-size:.68rem;letter-spacing:.16em;color:#edc78e}
.discovery-hero h1{font-size:clamp(2rem,3.25vw,3.4rem);line-height:1.12;letter-spacing:-.035em;margin:16px 0 17px;color:#fff5e8;text-wrap:balance}
.discovery-hero-content>p{max-width:420px;font-size:1rem;line-height:1.65;color:#e0e8f6;margin:0 0 23px}
.discovery-hero-link{display:inline-flex;align-items:center;gap:20px;padding:12px 0 8px;border-bottom:1px solid #edbc74;color:#f3cb91;text-decoration:none;font-weight:600;font-size:.92rem;min-height:44px}
.discovery-hero-link:hover{color:#fff0d7;border-color:#fff0d7}.discovery-hero-link span{font-size:1.2rem}
.discovery-hero-caption{position:absolute;bottom:13px;right:18px;padding:4px 8px;background:#07172bb3;color:#d3deed;font-size:.65rem;letter-spacing:.025em;border-radius:3px}
.search-intro{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}
.search-intro h2{font-size:1.65rem;line-height:1.2;margin:7px 0 0;color:#fff0db}.search-intro .eyebrow{font-size:.67rem;letter-spacing:.12em}
.search-intro>p{font-size:.85rem;line-height:1.6;color:var(--muted);margin:0 0 2px}
#search-form{scroll-margin-top:24px}
@media(min-width:1600px){.discovery-hero{min-height:390px}.discovery-hero-content{padding:48px 56px}}
@media(max-width:900px){.discovery-hero-content{padding:34px 30px 42px}.search-intro{display:block}.search-intro>p{margin:10px 0 0}}
@media(max-width:700px){
 .discovery-hero{min-height:320px;margin-bottom:14px}.discovery-hero-content{padding:27px 22px 42px;max-width:100%}
 .discovery-hero .eyebrow{font-size:.59rem;letter-spacing:.1em}.discovery-hero h1{font-size:clamp(1.8rem,7vw,2.4rem);margin:15px 0 12px}
 .discovery-hero-content>p{font-size:.87rem;line-height:1.6;max-width:310px;margin-bottom:12px}
 .discovery-hero::before{background:linear-gradient(90deg,#061426e8,#07172ba6 62%,#07172b33),linear-gradient(0deg,#07172b99,transparent 60%)}
 .discovery-hero-picture img{object-position:62% center}.discovery-hero-link{font-size:.85rem;gap:18px}.discovery-hero-caption{font-size:.55rem;right:10px;bottom:8px}
 .search-intro{margin-bottom:18px}.search-intro h2{font-size:1.5rem}.search-intro>p{font-size:.8rem}.search-intro .eyebrow{font-size:.59rem}
}
/* 2.9.2: put the working search where the hero link used to be. */
.discovery-hero{overflow:visible;min-height:350px}
.discovery-hero-picture{overflow:hidden;border-radius:inherit}.discovery-hero::before{border-radius:inherit}
.discovery-hero-content{max-width:none;padding:25px 32px 34px}
.discovery-hero h1{font-size:clamp(2rem,2.7vw,2.8rem);margin:10px 0;line-height:1.1}
.discovery-hero-content>p{max-width:630px;margin:0 0 16px;font-size:.9rem;line-height:1.5}
.hero-search.search-panel{padding:12px 16px 16px;border:1px solid #9bb6d04d;background:#0a1d35d9;box-shadow:none;max-width:1160px;position:relative;z-index:2}
.hero-search .search-intro{display:block;margin:0 0 9px}.hero-search .search-intro h2{font-size:1.2rem;margin:0;line-height:1.2}
.hero-search form#search-form,.hero-search form#search-form.area-mode{grid-template-columns:minmax(210px,1fr) 180px 85px 110px;gap:12px;align-items:end}
.hero-search form#search-form:not(.area-mode){grid-template-columns:minmax(210px,1fr) 165px 80px 75px 110px}
.hero-search form#search-form label{font-size:.75rem;min-width:0}
.hero-search form#search-form input,.hero-search form#search-form select{height:44px;margin-top:5px;padding:9px 10px}
.hero-search #search-button{grid-column:auto;min-width:0;height:44px;padding:9px 14px;font-size:.9rem}
.hero-search .place-choices{top:100%;max-height:260px}.hero-search .place-choice{min-height:44px}
.discovery-hero-caption{bottom:8px;font-size:.6rem}
.hero-categories{padding:0 4px;margin:0 0 16px}.hero-categories .category-filters{margin:0}.hero-categories .category-filters legend{font-size:.75rem;margin-bottom:7px}.hero-categories .category-options{gap:6px}.hero-categories .category-options span{padding:6px 10px;font-size:.74rem}
@media(min-width:1600px){.discovery-hero{min-height:390px}.discovery-hero-content{padding:34px 42px 40px}.discovery-hero h1{font-size:3rem}.discovery-hero-content>p{margin-bottom:20px}}
@media(max-width:900px){
 .discovery-hero-content{padding:22px 24px 30px}.discovery-hero h1{font-size:2rem}
 .hero-search form#search-form,.hero-search form#search-form.area-mode{grid-template-columns:minmax(150px,1fr) 150px 65px 100px;gap:8px}
 .hero-search form#search-form:not(.area-mode){grid-template-columns:minmax(130px,1fr) 135px 60px 60px 100px}
}
/* Mobilteil von 2.9.2 entfernt in 2.22 – ersetzt durch den Block „Handy zuerst" am Dateiende. */

/* 2.15.1: eigene Schriftgröße und dunkle Fläche für die Ortsvorschläge.
   Ursprünglich nötig, weil Labels auf dem Handy auf font-size:0 standen – das ist seit 2.22
   nicht mehr der Fall. Die Regeln bleiben, weil sie die Darstellung der Liste tragen. */
#place-choices{font-size:14px;line-height:1.45;color:#eef3ff;background:#10213d;text-align:left}
#place-choices .place-choice{display:block;width:100%;font-size:14px;line-height:1.45;font-weight:500;white-space:normal;text-align:left;color:#eef3ff;background:#10213d;min-height:44px;padding:10px 12px}
#place-choices .place-choice:hover,#place-choices .place-choice[aria-selected=true],#place-choices .place-choice:focus-visible{color:#ffe2b3;background:#294c78}
#place-choices .place-choice:focus-visible{outline:2px solid #edbc74;outline-offset:-2px}
#place-choices p{font-size:14px;line-height:1.45;color:#eef3ff;background:#10213d}

/* 2.15.2: uniform, compact category tiles. Native checkboxes retain keyboard support. */
.hero-categories .category-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:54px;gap:8px}
.hero-categories .category-options label{display:block;min-width:0;height:100%}
.hero-categories .category-options span{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:100%;min-height:0;padding:8px 10px;border:1px solid #435570;border-radius:10px;background:#13243d;color:#d9e3f3;font-size:.78rem;line-height:1.25;font-weight:500;text-align:left;transition:background .15s,border-color .15s}
.hero-categories .category-options span::before{content:"";box-sizing:border-box;flex:0 0 16px;width:16px;height:16px;border:1px solid #8191aa;border-radius:4px;background:#0c192e}
.hero-categories .category-options input:checked+span{background:#294362;border-color:#d7b37a;color:#fff1d9}
.hero-categories .category-options input:checked+span::before{content:"✓";display:flex;align-items:center;justify-content:center;border-color:#edbc74;background:#edbc74;color:#12213b;font-size:12px;font-weight:800}
.hero-categories .category-options label:hover span{border-color:#edbc74}
.hero-categories .category-options input:focus-visible+span{outline:3px solid #edbc74;outline-offset:2px}
.hero-categories .category-filters>.text-button{min-height:36px;margin-top:6px;padding:4px 8px}
@media(max-width:1000px) and (min-width:701px){.hero-categories .category-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.hero-categories .category-options{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:52px;gap:6px}.hero-categories .category-options span{font-size:.74rem;padding:6px 8px;gap:7px}}

/* 2.15.3: category actions above the tiles, with matching dimensions. */
.hero-categories .category-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:8px}
.hero-categories .category-actions button{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:100%;height:54px;min-width:0;padding:8px 10px;border:1px solid #435570;border-radius:10px;background:#13243d;color:#d9e3f3;font:inherit;font-size:.78rem;line-height:1.25;font-weight:500;text-align:left;cursor:pointer}
.hero-categories .category-actions button:hover{border-color:#edbc74;background:#294362;color:#fff1d9}
.hero-categories .category-actions button:focus-visible{outline:3px solid #edbc74;outline-offset:2px}
@media(max-width:1000px) and (min-width:701px){.hero-categories .category-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.hero-categories .category-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:6px}.hero-categories .category-actions button{height:52px;font-size:.74rem;padding:6px 8px}}

/* 2.16: sequential search, results with view switch, then route planning. */
body{padding-bottom:0}
.results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 12px}
.results-toolbar h2{font-size:1.2rem;margin:4px 0}
.result-views{display:flex;align-items:center;gap:10px;font-size:.8rem;color:#c1cede}
.view-switch{display:flex;gap:3px;padding:4px;border:1px solid #435570;border-radius:12px;background:#101f35}
.view-switch button{min-height:44px;min-width:80px;border:0;border-radius:8px;background:transparent;color:#d9e3f3;font:inherit;cursor:pointer}
.view-switch button[aria-pressed=true]{background:#edbc74;color:#12213b;font-weight:700}
.view-switch button:focus-visible{outline:3px solid #edbc74;outline-offset:2px}
.workspace{display:block;height:auto;overflow:visible}
.workspace>.results-panel{display:block;height:auto;max-height:none;overflow:visible;border-radius:14px}
.workspace .results{height:auto;max-height:none;overflow:visible}
.workspace>.map-panel{display:block;height:540px;min-height:380px;border-radius:14px;overflow:hidden}
.workspace[data-view=list]>.map-panel{display:none}
.workspace[data-view=map]>.results-panel{display:none}
#tour-panel{display:block;position:static;height:auto;max-height:none;overflow:visible;width:100%;box-sizing:border-box;margin:24px 0;padding:24px;border:1px solid var(--line);border-radius:14px;scroll-margin-top:16px}
#tour-list{max-height:none;overflow:visible}
#tour-panel .route-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#tour-panel .route-settings h3,#tour-panel .route-settings p,#calculate-route,#route-status,#route-summary{grid-column:1/-1}
#tour-panel .route-settings select{width:100%;box-sizing:border-box}
@media(max-width:700px){.results-toolbar{align-items:flex-start;flex-direction:column;gap:8px;margin-top:20px}.results-toolbar h2{font-size:1.05rem}.result-views{width:100%;justify-content:space-between}.view-switch{flex:1;max-width:260px}.view-switch button{flex:1}.workspace>.map-panel{height:65vh;min-height:360px}.workspace>.results-panel{padding:12px 10px}#tour-panel{padding:16px 12px}#tour-panel .route-settings{grid-template-columns:1fr}#tour-panel .tour-actions{display:flex;flex-direction:column}}

/* 2.18: one compact search form and a continuous blue-hour palette. */
.hero-search form#search-form,.hero-search form#search-form.area-mode,.hero-search form#search-form:not(.area-mode){grid-template-columns:minmax(180px,1fr) 160px 80px;gap:10px}
.hero-search form#search-form .hero-categories{grid-column:1/-1;margin:2px 0 0;padding:0}
.hero-search .category-filters legend{font-size:.75rem;line-height:1.3;margin-bottom:6px;color:#c1cede}
.hero-search .hero-categories .category-options{grid-auto-rows:44px;gap:5px}
.hero-search .hero-categories .category-options span{font-size:.72rem;line-height:1.2;padding:5px 7px;gap:6px}
.hero-search .hero-categories .category-actions{gap:5px;margin-bottom:5px}
.hero-search .hero-categories .category-actions button{height:44px;min-height:44px;padding:5px 7px;font-size:.72rem;line-height:1.2}
.hero-search #search-button{grid-column:1/-1;grid-row:auto;width:100%;height:46px;margin-top:3px;font-size:.95rem}
.hero-search #radius-label{grid-column:1/-1}
#step-results,#tour-panel{scroll-margin-top:18px}
#step-results:focus,#tour-panel:focus{outline:none}
#tour-panel{background:linear-gradient(135deg,#10243e,#173557);color:#eef3ff;border-color:#435570;box-shadow:none;z-index:auto}
#tour-panel h2,#tour-panel h3{color:#fff0db}
#tour-panel .eyebrow{color:#edc78e}
#tour-panel p,#tour-panel .muted,#tour-panel .route-status{color:#c1cede}
#tour-panel .route-status.error{color:#ffbcb5}
#tour-panel #tour-list li{background:#132b47;color:#eef3ff;border-color:#435570}
#tour-panel #tour-list small{color:#c1cede}
#tour-panel .route-settings{border-color:#435570}
#tour-panel .route-settings label{color:#dce6f6}
#tour-panel .route-settings select{background:#0e2038;color:#eef3ff;border-color:#526784;color-scheme:dark}
#tour-panel button{background:#203c5c;color:#eef3ff;border:1px solid #526784}
#tour-panel button:hover:not(:disabled){background:#2d5076;border-color:#edbc74}
#tour-panel button.primary{background:#edbc74;color:#12213b;border-color:#edbc74;font-weight:650}
#tour-panel button.primary:hover:not(:disabled){background:#f6ce95}
#tour-panel button:disabled{opacity:.45;cursor:not-allowed}
#tour-panel button:focus-visible{outline:3px solid #edbc74;outline-offset:2px}
#tour-panel .route-metrics{background:#203f60;color:#eef3ff}
#tour-panel input[type=checkbox]{accent-color:#edbc74}
/* Mobilteil von 2.18 entfernt in 2.22 – ersetzt durch den Block „Handy zuerst" am Dateiende. */

/* 2.18.1: fit the initial search into a typical portrait phone viewport. */
#step-results{scroll-margin-top:0}
/* Mobilteil von 2.18.1 entfernt in 2.22. Das Ziel „alles auf einen Bildschirm" wurde dort mit
   unsichtbaren Labels und einer versteckten Überschrift bezahlt. Der neue Block am Dateiende
   gewinnt den Platz stattdessen durch eingeklappte Kategorien zurück. */

/* 2.18.2: original VistaMira logo; cover removes transparent side margins visually. */
.topbar .brand{display:inline-flex;align-items:center;min-width:0;line-height:1}
.topbar .brand-logo{display:block;width:114px;height:76px;max-width:none;object-fit:cover;object-position:center;background:#f6f3ec;border-radius:8px}
.topbar .brand:focus-visible{outline:3px solid #edbc74;outline-offset:4px;border-radius:8px}
@media(max-width:700px){.topbar{padding-top:5px;padding-bottom:5px}.topbar .brand-logo{width:78px;height:52px;border-radius:6px}}

/* 2.18.3: transparent logo with light blue lettering for the navy header. */
.topbar .brand-logo{background:transparent;border:0;border-radius:0;object-fit:contain;box-shadow:none}
@media(max-width:700px){.topbar .brand-logo{border-radius:0}}

/* 2.20: identical dark step panels and typography. */
#step-results,#tour-panel{box-sizing:border-box;background:linear-gradient(135deg,#10243e,#173557);color:#eef3ff;border:1px solid #435570;border-radius:14px;padding:24px;margin:24px 0;box-shadow:none}
#step-results{scroll-margin-top:0}
#step-results>.results-toolbar{margin:0 0 16px}
#step-results .eyebrow,#tour-panel .eyebrow{color:#edc78e;font-size:.72rem;font-weight:650;letter-spacing:.12em;line-height:1.4}
#step-results>.results-toolbar h2,#tour-panel .tour-head h2{font-size:1.4rem;line-height:1.25;font-weight:700;margin:5px 0 0;color:#fff0db}
#step-results .workspace{background:transparent;border:0;border-radius:0}
#step-results .results-panel{background:transparent;color:#eef3ff;padding:0;border:0;border-radius:0}
#step-results h2,#step-results h3,#step-results .point-title{color:#fff0db}
#step-results .muted,#step-results .point-meta,#step-results .point-description,#step-results .interest-meta{color:#c1cede}
#step-results .result{background:transparent;border-color:#435570}
#step-results .all-sights{color:#fff0db;border-color:#435570}
#step-results input[type=checkbox]{accent-color:#edbc74}
#step-results .point-actions button,#step-results .point-actions a,#step-results .map-tools button{background:#203c5c;color:#eef3ff;border:1px solid #526784}
#step-results .point-actions button:hover,#step-results .point-actions a:hover{background:#2d5076;border-color:#edbc74}
#step-results .badge{background:#203f60;color:#fff0db}
#step-results .empty{color:#c1cede;background:transparent}
#step-results .inline-search-progress{background:#173557;border-color:#435570}
/* 2.22: #status, #search-progress-text, #search-progress-count und #route-status sind wieder
   sichtbar. Gestaltung und Sichtbarkeitslogik jetzt in assets/feedback.css. */
@media(max-width:700px){#step-results,#tour-panel{padding:16px 12px;margin:18px 0}#step-results>.results-toolbar h2,#tour-panel .tour-head h2{font-size:1.15rem}#step-results>.results-toolbar{margin-bottom:12px}}

/* 2.21.1: accessible geolocation crosshair inside the search field. */
.hero-search .location-field>label{display:block}
.hero-search .location-input-wrap{position:relative;min-width:0;margin-top:5px}
.hero-search .location-input-wrap #place{display:block;width:100%;box-sizing:border-box;margin-top:0;padding-right:54px}
.hero-search #use-location{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;min-height:44px;padding:10px;border:0;border-left:1px solid #435570;border-radius:0 8px 8px 0;background:transparent;color:#edbc74;cursor:pointer;line-height:1}
.hero-search #use-location svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex-shrink:0}
.hero-search #use-location:hover:not(:disabled){background:#edbc741a;color:#ffe2b3}
.hero-search #use-location:focus-visible{outline:3px solid #edbc74;outline-offset:-3px}
.hero-search #use-location:disabled{opacity:.4;cursor:not-allowed}
.hero-search #use-location.is-locating svg{animation:location-pulse 1s ease-in-out infinite alternate}
.hero-search .location-field>.feature-feedback{margin:6px 0 0;font-size:.75rem;line-height:1.35}
@keyframes location-pulse{from{opacity:.45}to{opacity:1}}
@media(max-width:700px){.hero-search .location-input-wrap{margin-top:0}}
@media(prefers-reduced-motion:reduce){.hero-search #use-location.is-locating svg{animation:none}}

/* 2.22: Handy zuerst. Ersetzt die Mobilblöcke aus 2.9.2, 2.18 und 2.18.1 für Hero und Suche.
   Drei Grundsätze: Bild und Überschrift sind wieder die Bühne, jedes Feld hat ein lesbares
   Label, und die zehn Kategorien sind eingeklappt – das schafft den Platz für die ersten zwei. */

/* 2.22.3: Feldwerte dürfen nicht fett sein. input und select erben über font:inherit das
   font-weight:650 ihres umgebenden <label> – betrifft Suchformular und Routenauswahl,
   am Handy wie am Desktop. */
.hero-search form#search-form input,.hero-search form#search-form select,.route-settings select{font-weight:500}

/* 2.22.3: Die Reiterleiste muss deckend sein. Mit #0b1933f5 schimmerte der Inhalt darunter
   durch und sah wie ein Darstellungsfehler aus. */
.mobile-nav{background:#0b1933;border-top:1px solid var(--vm-line);box-shadow:0 -8px 24px #03091899}

/* Einklappbare Kategorien. Ohne JavaScript bleibt das Element offen, nichts wird unerreichbar. */
.category-collapse{margin:0;padding:0;border:0}
.category-collapse>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--vm-space-2);
 min-height:var(--vm-touch);padding:10px 12px;border:1px solid var(--vm-line);border-radius:var(--vm-radius-sm);
 background:var(--vm-surface-sunken);color:#d9e3f3;font-size:var(--vm-text-sm);font-weight:600;cursor:pointer;list-style:none}
.category-collapse>summary::-webkit-details-marker{display:none}
.category-collapse>summary::after{content:"▾";flex:none;color:var(--vm-accent);font-size:.9rem}
.category-collapse>summary:hover{border-color:var(--vm-accent)}
.category-collapse>summary:focus-visible{outline:3px solid var(--vm-accent);outline-offset:2px}
.category-collapse[open]>summary{margin-bottom:var(--vm-space-2)}
.category-collapse[open]>summary::after{content:"▴"}
@media(min-width:701px){.category-collapse>summary{display:none}}

@media(max-width:700px){
 main#main-content{padding-top:var(--vm-space-2)}

 /* Hero */
 .discovery-hero{min-height:0;margin-bottom:var(--vm-space-3)}
 .discovery-hero-content{padding:var(--vm-space-4) var(--vm-space-3);max-width:none}
 .discovery-hero-content>.eyebrow,.discovery-hero-content>p,.discovery-hero-caption{display:none}
 .discovery-hero h1{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;
  margin:0 0 var(--vm-space-4);padding:0;border:0;font-size:var(--vm-title);line-height:1.15;letter-spacing:-.02em}

 /* Suchkarte */
 .hero-search.search-panel{margin:0;padding:var(--vm-space-3);border-radius:var(--vm-radius)}
 .hero-search .search-intro{margin:0 0 var(--vm-space-3)}
 .hero-search .search-intro h2{margin:0;font-size:var(--vm-text-lg);line-height:1.25}

 /* 2.22.5: Wirklich ein Feld pro Zeile. „Kartenausschnitt“ wurde in der geteilten Zeile
    abgeschnitten – bei eingeschalteter Textvergrößerung des Geräts hilft keine Rechnung
    mit festen Pixelbreiten. Das Zahlenfeld wird stattdessen im Feld selbst begrenzt. */
 .hero-search form#search-form,.hero-search form#search-form.area-mode,.hero-search form#search-form:not(.area-mode){
  grid-template-columns:minmax(0,1fr);gap:var(--vm-space-3);align-items:end}
 .hero-search .location-field,.hero-search .scope-field,.hero-search .count-field,
 .hero-search #radius-label,.hero-search .hero-categories,.hero-search #search-button{grid-column:1/-1}
 .hero-search .count-field input{max-width:140px}
 /* Auswahlfelder lösen keinen iOS-Zoom aus, nur Texteingaben. Das !important aus mobile.css
    muss daher hier übersteuert werden – gleiche Größe wie die Kategorien-Zeile. */
 .hero-search form#search-form select{font-size:var(--vm-text-sm)!important;text-overflow:ellipsis}
 .hero-search form#search-form label{font-size:var(--vm-text-sm);line-height:1.3;font-weight:650;color:#c7d5ed}
 .hero-search form#search-form input,.hero-search form#search-form select{height:var(--vm-touch);margin-top:var(--vm-space-1);padding:10px 12px;line-height:normal}
 .hero-search .location-input-wrap{margin-top:var(--vm-space-1)}
 .hero-search #use-location{width:var(--vm-touch);height:var(--vm-touch)}
 .hero-search #radius-label{display:flex;align-items:center;gap:var(--vm-space-2);min-height:var(--vm-touch)}
 .hero-search #radius-label input{flex:none;width:92px;margin-top:0}
 .hero-search #search-button{height:52px;min-height:52px;margin-top:var(--vm-space-1);font-size:var(--vm-text)}

 /* Kategorien: zweispaltig und lesbar statt dreispaltig und gequetscht. */
 .hero-search .hero-categories{margin:0}
 .hero-search .category-filters legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .hero-search .hero-categories .category-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--vm-space-2);margin-bottom:var(--vm-space-2)}
 .hero-search .hero-categories .category-actions button{height:var(--vm-touch);min-height:var(--vm-touch);padding:8px 10px;font-size:var(--vm-text-sm);line-height:1.25}
 .hero-search .hero-categories .category-options{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:var(--vm-touch);gap:var(--vm-space-2)}
 .hero-search .hero-categories .category-options span{padding:8px 10px;gap:var(--vm-space-2);font-size:var(--vm-text-sm);line-height:1.25}
 .hero-search .hero-categories .category-options span::before{flex-basis:16px;width:16px;height:16px}

 /* aus dem entfernten 2.18-Block übernommen */
 .result-views{justify-content:flex-start}
 .view-switch{max-width:none;flex:0 1 240px}

 /* 2.22.3: Die Bedienhinweise über der Liste sind auf dem Handy eine zweite Textwand
    direkt unter der Zusammenfassung. Die Auswahlkästchen erklären sich selbst. */
 #ranking-info{display:none}

 /* 2.22.3: Tourname zuerst, Knöpfe in die zweite Zeile. Drei 44-px-Flächen plus Nummer
    ließen sonst nur rund ein Drittel der Breite für den Namen übrig. */
 #tour-list li{flex-wrap:wrap}
 #tour-list li .tour-name{flex:1 1 auto;min-width:0}
 #tour-list li .tour-controls{flex:1 1 100%;justify-content:flex-end}
}
.tour-controls{display:flex;gap:8px;flex:none;align-items:center}

/* 2.22.5: Griff zum Verschieben. touch-action:none ist zwingend, sonst scrollt das Gerät
   statt Zeigerereignisse zu senden. order:-1 stellt den Griff vor die Platzziffer, die als
   ::before-Pseudoelement ebenfalls ein Flex-Element ist. */
.tour-handle{display:grid;place-items:center;flex:none;order:-1;width:30px;min-height:44px;
 color:var(--vm-ink-muted);font-size:.95rem;letter-spacing:-2px;line-height:1;
 cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.tour-handle:active{cursor:grabbing;color:var(--vm-accent)}
#tour-list li.vm-dragging{background:#294870;border-radius:var(--vm-radius-sm);box-shadow:0 6px 18px #03091880}

/* 2.22: Ergebniskarten mit Bildvorschau. Die Bilder kommen aus dem freigegebenen
   Datenbankbestand und kosten keine zusätzliche Fremdanfrage. Punkte ohne Foto behalten
   dieselbe Kachelform mit der Platzziffer – so bleibt der Rhythmus der Liste erhalten. */
.results .result{grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;padding:14px 4px}
.result-thumb{position:relative;display:grid;place-items:center;flex:none;width:96px;height:96px;overflow:hidden;
 border:1px solid var(--vm-line);border-radius:var(--vm-radius);background:var(--vm-surface-sunken)}
.result-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.result-thumb .rank-number{position:relative;z-index:1;display:grid;place-items:center;width:auto;height:auto;
 min-width:28px;padding:2px 8px;border-radius:var(--vm-radius-sm);background:transparent;
 color:var(--vm-ink-muted);font-size:1.25rem;font-weight:700;line-height:1.2}
.result-thumb.has-photo .rank-number{position:absolute;left:4px;bottom:4px;min-width:22px;padding:1px 6px;
 background:#07172bd9;color:var(--vm-ink-strong);font-size:.75rem;line-height:1.5}
.result.custom .result-thumb .rank-number{color:var(--vm-accent)}
.photo-credit{margin:2px 0 6px;font-size:.7rem;line-height:1.35;color:var(--vm-ink-muted);overflow-wrap:anywhere}
@media(max-width:700px){
 .results .result{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px 0}
 .result-thumb{width:88px;height:88px}
 .result-thumb .rank-number{font-size:1.15rem}
 .photo-credit{margin:2px 0 4px;font-size:.68rem}
}
@media(max-width:360px){
 .results .result{grid-template-columns:72px minmax(0,1fr);gap:10px}
 .result-thumb{width:72px;height:72px}
}

/* 2.22: Zusammengefasste Nadeln auf der Karte. Runde Form zur Abgrenzung von den
   tropfenförmigen Einzelnadeln; die Zahl nennt die Punkte in der Gruppe. */
.map-cluster{border:0!important;background:transparent!important}
.cluster-inner{display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;
 border:3px solid #eef3ff;border-radius:50%;background:#1f4b7ae6;color:#fff;
 font-size:.8rem;font-weight:750;line-height:1;box-shadow:0 2px 8px #00000059;cursor:pointer}
.map-cluster:focus-visible .cluster-inner{outline:3px solid var(--vm-accent);outline-offset:2px}

/* 2.22: App-Shell. Auf dem Handy zeigt die Seite einen Bereich zur Zeit, gesteuert über
   body[data-screen] und die Leiste am unteren Rand. Ohne JavaScript wird kein data-screen
   gesetzt – dann bleibt alles sichtbar und untereinander erreichbar wie bisher.
   Die Leiste nutzt die seit 2.16 brachliegenden .mobile-nav-Regeln aus mobile.css. */
.mobile-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
 min-height:56px;padding:6px 4px;border:0;border-radius:var(--vm-radius-sm);background:transparent;
 color:var(--vm-ink-muted);font-size:.68rem;font-weight:600;line-height:1.2;letter-spacing:.01em}
.mobile-nav button svg{display:block;width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-nav button[aria-pressed=true]{background:transparent;border:0;color:var(--vm-accent)}
.mobile-nav button[aria-pressed=true] svg{stroke-width:2.1}
.mobile-nav button:focus-visible{outline:3px solid var(--vm-accent);outline-offset:-3px}
.mobile-nav .tab-badge{position:absolute;top:2px;left:50%;margin-left:4px;min-width:18px;padding:1px 5px;
 border-radius:9px;background:var(--vm-accent);color:var(--vm-accent-ink);font-size:.62rem;font-weight:800;line-height:1.5;text-align:center}

/* Verbindung von der Vollbildkarte zurück in die Liste. */
.map-peek{display:none;position:absolute;left:10px;right:10px;bottom:10px;z-index:600}
.map-peek button{width:100%;min-height:var(--vm-touch);padding:10px 14px;border:1px solid var(--vm-line-strong);
 border-radius:var(--vm-radius);background:#0e2038e6;color:var(--vm-ink);font:inherit;font-size:var(--vm-text-sm);font-weight:600}
@supports(backdrop-filter:blur(8px)){.map-peek button{background:#0e2038c4;backdrop-filter:blur(8px)}}
.map-peek strong{color:var(--vm-accent)}
.map-peek button:focus-visible{outline:3px solid var(--vm-accent);outline-offset:2px}

@media(max-width:700px){
 body{padding-bottom:calc(var(--vm-tabbar-h,76px) + 8px)}
 :root{--vm-safe-bottom:var(--vm-tabbar-h,76px)}

 /* Genau ein Bereich sichtbar. Reihenfolge wichtig: zuerst alles aus, dann einer an. */
 body[data-screen] .discovery-hero,
 body[data-screen] #step-results,
 body[data-screen] #tour-panel,
 body[data-screen] .seo-intro{display:none}
 body[data-screen=search] .discovery-hero,
 body[data-screen=search] .seo-intro,
 body[data-screen=list] #step-results,
 body[data-screen=map] #step-results,
 body[data-screen=tour] #tour-panel{display:block}

 /* Die Tab-Leiste ersetzt den Liste/Karte-Umschalter im Seiteninhalt. */
 body[data-screen] .result-views{display:none}

 /* Kartenbereich: Vollbild zwischen Kopfzeile und Leiste. */
 body[data-screen=map]{overflow:hidden}
 body[data-screen=map] #step-results{margin:0;padding:0;border:0;border-radius:0;background:transparent}
 body[data-screen=map] #step-results>.results-toolbar{display:none}
 body[data-screen=map] .map-panel{position:fixed;left:0;right:0;top:var(--vm-header-h,62px);bottom:var(--vm-tabbar-h,76px);
  z-index:1;height:auto;min-height:0;border-radius:0;overflow:hidden}
 body[data-screen=map] .map-peek{display:block}
 body[data-screen=map] .map-tools{top:10px;left:52px;right:10px}
 /* 2.22.3: Auf der Vollbildkarte zählt jeder Quadratzentimeter. Die Legende entfällt –
    die Farbbedeutung erschließt sich beim Antippen, und die Angabe zum Suchgebiet steht
    in der Zusammenfassung über der Liste. */
 body[data-screen=map] .map-legend{display:none}
 /* Die Namensnennung von OpenStreetMap darf die Peek-Leiste nicht verdecken – sie ist
    lizenzrechtlich verlangt und muss sichtbar bleiben. */
 body[data-screen=map] .leaflet-control-attribution{margin-bottom:calc(var(--vm-touch) + 18px)}
}