/* Grundlegendes App-Layout: Header + Karte/Liste. Mobile-first;
   Desktop-Anpassungen (>=1024px) siehe css/responsive.css.

   body ist ein Flex-Container (Header + app-status + app-layout
   untereinander). app-layout bekommt flex:1 und füllt damit immer den
   verbleibenden Platz - unabhängig von der Höhe des Headers.

   Das Aktionen-Menü (.app-menu) liegt als Overlay über der Seite und
   verändert das Layout darunter nicht. Früher war es Teil des Headers und
   schob beim Öffnen die Karte nach unten. */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Schmaler Streifen unter dem Layout, in der Farbe, in der der Verlauf der
   Kopfzeile ausläuft: das Layout wird dadurch oben und unten von derselben
   Fläche gefasst.
   flex-shrink: 0, damit er nicht zusammenfällt, wenn die Karte den Platz
   beansprucht - und bewusst klein gesetzt, weil jede Zeile hier der Karte
   Höhe nimmt.

   Kein border-top: die Farbfläche trennt bereits sichtbar von der Karte
   darüber, eine Linie käme nur als dunkler Strich dazu. */
.app-footer {
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
}

/* Derselbe Verlauf wie auf den oeffentlichen Seiten (.seo-header): Karte und
   Zielseiten sollen als ein Auftritt gelesen werden, nicht als zwei
   Anwendungen. Er endet unten rechts in --color-primary - der Farbe, in der
   der Streifen unter dem Layout weitergeht. */
.app-header {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
  color: #fff;
}

.app-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 48px;
}

/* Die beiden redaktionellen Wege in der Kopfzeile der Kartenansicht.
   Mittig zwischen Logo und Menue - der Platz dort war ungenutzt, und in der
   Fusszeile ganz unten fand sie niemand, der die Karte benutzt.

   Erst ab 900px: Darunter ist die Zeile mit Logo und den beiden Knoepfen
   voll, und beide Wege stehen ohnehin im Menue und in der Fusszeile. */
.app-header__nav {
  display: none;
}

@media (min-width: 900px) {
  .app-header__nav {
    display: flex;
    align-items: center;
    /* Seit dem dritten Weg (Vorschlagen, 2026-08-11) enger: Bei knapp 900px
       teilen sich Logo, Titel, drei Links und die Knopfreihe eine Zeile. Der
       grosse Abstand kommt erst zurueck, wenn Platz dafuer da ist. */
    gap: var(--space-md);
  }
}

@media (min-width: 1200px) {
  .app-header__nav {
    gap: var(--space-lg);
  }
}

/* Grundgewicht 600, damit "fett" beim Darauffahren eine Steigerung sein kann
   (siehe unten). Vorher standen die Links auf 700 und der Zeiger machte sie
   nur unterstrichen. */
.app-header__nav-link {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Fett statt unterstrichen. Der Strich lag als zweite Linie unter einer
   ohnehin schon vollen Zeile; das Gewicht sagt dasselbe ruhiger. */
.app-header__nav-link:hover,
.app-header__nav-link:focus-visible {
  font-weight: 800;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

/* Feste Groesse statt Hoehe aus dem Textblock: der Untertitel wird auf
   schmalen Anzeigen umgebrochen, das Logo wuerde sonst mitwachsen. */
.app-header__logo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.app-header__title {
  font-size: 1.4rem;
  font-weight: 700;
}

.app-header__subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
}

.app-header__menu-toggle {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
}

.app-header__menu-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Aktionen-Leiste breiter Anzeigen (2026-08-11) ----------------------
 *
 * Ab 1150px steht in der Kopfzeile, was darunter hinter dem Hamburger liegt.
 * Der Umschaltpunkt liegt bewusst hoch: Erst dort tragen Logo, Untertitel,
 * drei Links, vier Gruppen UND die beiden Konto-Knoepfe eine Zeile. Darunter
 * bleibt der Hamburger - er ist auf schmalen Anzeigen nicht der schlechtere
 * Weg, sondern der einzige, der passt.
 *
 * Die Abschnitte in den Klappfeldern sind dieselben Elemente wie im Overlay;
 * js/ui/headerNav.js haengt sie hin und her.
 */

.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* Eine Spur kleiner als die Links daneben: In dieser Zeile stehen neun
     Beschriftungen nebeneinander, jeder Millimeter zaehlt. */
  font-size: 0.95rem;
}

.app-nav[hidden] {
  display: none;
}

.app-nav__item {
  position: relative;
}

.app-nav__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-xs) 0;
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.app-nav__trigger:hover,
.app-nav__trigger:focus-visible,
.app-nav__item--open .app-nav__trigger {
  font-weight: 800;
}

.app-nav__caret {
  font-size: 0.7em;
  transition: transform 0.15s ease;
}

.app-nav__item:hover .app-nav__caret,
.app-nav__item--open .app-nav__caret {
  transform: rotate(180deg);
}

/* Das Klappfeld. Es haengt direkt unter dem Knopf ohne Luecke dazwischen -
   eine Luecke waere die haeufigste Ursache dafuer, dass ein Menue beim
   Hinuebergehen der Maus wieder zuklappt. */
.app-nav__dropdown {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-md));
  z-index: 1000;
  min-width: 280px;
  max-width: 340px;
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  /* Geschlossen: aus dem Weg, aber nicht aus dem Dokument. visibility statt
     display, damit der Uebergang laeuft; pointer-events verhindert, dass das
     unsichtbare Feld Klicks auf die Karte abfaengt. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

/* Der unsichtbare Streifen zwischen Knopf und Feld: Ohne ihn liegt zwischen
   beiden echte Kopfzeile, und die Maus verliert das Menue auf dem Weg
   dorthin. */
.app-nav__dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--space-xs) - 2px);
  height: calc(var(--space-xs) + 2px);
}

.app-nav__item:hover .app-nav__dropdown,
.app-nav__item:focus-within .app-nav__dropdown,
.app-nav__item--open .app-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .app-nav__dropdown,
  .app-nav__caret {
    transition: none;
  }
}

/* Die Ueberschrift des Abschnitts steht im Klappfeld schon auf dem Knopf
   darueber - zweimal dasselbe Wort waere nur Fuellung. */
.app-nav__dropdown .app-menu__group-title {
  display: none;
}

/* Im Klappfeld ist das Feld selbst schon das Kaestchen - ein zweiter Rahmen
   darin waere eine Dose in der Dose. */
.app-nav__dropdown .app-menu__group {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

/* Die beiden Konto-Knoepfe. Rund und gefuellt heben sie sich von den Wegen
   daneben ab: Das eine ist Navigation, das andere eine Handlung. */
.app-nav__auth {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.app-nav__pill {
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 100px;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.app-nav__pill:hover,
.app-nav__pill:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

.app-nav__pill--primary {
  border-color: #fff;
  background: #fff;
  color: var(--color-primary-dark);
}

.app-nav__pill--primary:hover,
.app-nav__pill--primary:focus-visible {
  background: rgba(255, 255, 255, 0.85);
}

/* "Konto" gibt es nur mit Konto. Ohne Anmeldung stehen an dieser Stelle die
   beiden Knoepfe, und ein leeres Klappfeld waere ein Weg ins Nichts
   (js/ui/headerNav.js setzt die Klasse). */
body:not(.is-signed-in) .app-nav__item--account {
  display: none;
}

/* Traegt die Leiste alles, hat der Hamburger keine Aufgabe mehr. Er bleibt
   im Dokument, nur unsichtbar: Wird das Fenster wieder schmaler, wandern die
   Abschnitte zurueck ins Overlay und er wird wieder gebraucht.

   Die Klasse setzt js/ui/headerNav.js und nicht eine Media-Query allein -
   sonst waere auf einer breiten Anzeige GAR kein Menue da, falls die Skripte
   nicht laden: die Leiste kommt von JavaScript, der Hamburger nicht. */
body.has-header-nav .app-header__menu-toggle[aria-controls="app-menu"] {
  display: none;
}

/* --- Aktionen-Menü als Overlay --- */

/* Seit 2026-08-11 ein Vollbild-Overlay statt eines Feldes in der Mitte: Das
   Menü ist auf dem Handy die Hauptnavigation, und ein halbdurchsichtiger
   Blick auf die Karte dahinter half beim Auswählen nie - er machte die Zeilen
   nur unruhiger. Ohne Rand gibt es dafür kein "Danebenklicken" mehr; das X
   und die Escape-Taste bleiben (js/main.js). */
.app-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  /* Heller Grund, damit die weissen Kaestchen der Gruppen darauf stehen -
     dieselbe Schichtung wie auf den oeffentlichen Seiten. */
  background: var(--color-background);
  overflow-y: auto;
  /* Sanftes Aufblenden. Ohne Bewegung wirkt der Wechsel auf die ganze Fläche
     wie ein Seitensprung - man weiss nicht, ob man noch in der App ist. */
  animation: app-menu-in 0.18s ease-out;
}

@keyframes app-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Wer angibt, Bewegung nicht zu vertragen, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
  .app-menu {
    animation: none;
  }
}

.app-menu[hidden] {
  display: none;
}

/* Verhindert, dass die Seite hinter dem Overlay mitscrollt. */
body.app-menu-open {
  overflow: hidden;
}

.app-menu__panel {
  width: 100%;
  max-width: 720px;
  /* Zentriert, mit Luft nach unten: Die letzte Zeile soll nicht am unteren
     Rand kleben. */
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: grid;
  gap: var(--space-xl);
  color: var(--color-text);
}

/* Der Kopf trägt dieselbe Farbe wie die Kopfzeile der App und geht über die
   ganze Breite - beim Öffnen bleibt damit sichtbar, wo man ist. Er bleibt
   beim Blättern stehen, sonst ist das X in einem langen Menü weg. */
.app-menu__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-primary);
  color: #fff;
}

.app-menu__head-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.app-menu__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.app-menu__logo {
  flex: none;
  width: 32px;
  height: 32px;
}

.app-menu__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.app-menu__close {
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

.app-menu__close:hover,
.app-menu__close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.app-menu__groups {
  display: grid;
  gap: var(--space-lg);
}

/* Jede Gruppe ein eigenes Kaestchen - dieselbe Form wie "Worum geht es?" auf
   /vorschlagen (.suggest__fieldset in css/seo.css). Der Rahmen fasst
   zusammen, was zusammengehoert; ohne ihn lief das Menue als eine einzige
   lange Liste durch, in der die Ueberschriften untergingen.

   Im Klappfeld breiter Anzeigen wird der Rahmen wieder abgeraeumt: Dort ist
   das Feld selbst schon das Kaestchen (siehe .app-nav__dropdown weiter
   oben). */
.app-menu__group {
  display: flex;
  flex-direction: column;
  align-content: start;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.app-menu__group-title {
  margin-bottom: var(--space-xs);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Die Einträge sind seit 2026-08-11 Zeilen und keine Knöpfe mehr.
 *
 * Der Grund ist nicht Geschmack: Ein Menü aus zwölf randvollen Knöpfen liest
 * sich als zwölf gleich wichtige Angebote - man sucht darin, statt zu finden.
 * Als Zeilen mit Trennlinie tritt die Fläche zurück und die Beschriftung nach
 * vorn. Die Regel greift bewusst über .btn, weil der Konto-Bereich seine
 * Einträge zur Laufzeit erzeugt (js/ui/auth.js) - sonst müsste jede neue
 * Zeile dort eine eigene Klasse mitbringen.
 */
.app-menu .btn,
.app-nav__dropdown .btn,
.app-menu__pages a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-sm) 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

/* Die Bewegung ist Zierde - wer sie abbestellt hat, bekommt sie nicht. Die
   Farbe bleibt, sonst waere die Zeile unter dem Zeiger gar nicht markiert. */
@media (prefers-reduced-motion: reduce) {
  .app-menu .btn,
  .app-nav__dropdown .btn,
  .app-menu__pages a {
    transition: none;
  }

  .app-menu .btn:hover,
  .app-nav__dropdown .btn:hover,
  .app-menu__pages a:hover {
    transform: none;
  }
}

/* Beim Darauffahren rückt die Zeile sanft nach rechts - mehr passiert nicht.
   Kein Streifen an der Kante und keine aufleuchtende Fläche: Die Bewegung
   allein sagt schon, welche Zeile gemeint ist, und sie tut es auf einer
   ganzen Seite voller Zeilen ruhiger als jede Farbe. */
.app-menu .btn:hover,
.app-menu .btn:focus-visible,
.app-nav__dropdown .btn:hover,
.app-nav__dropdown .btn:focus-visible,
.app-menu__pages a:hover,
.app-menu__pages a:focus-visible {
  color: var(--color-primary-dark);
  transform: translateX(8px);
}

/* Die eine Hauptsache des Menüs bleibt hervorgehoben - aber als Wort, nicht
   als Fläche. Mehr als eine hervorgehobene Zeile wäre keine. */
.app-menu .btn--primary,
.app-nav__dropdown .btn--primary {
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* Ein aktiver Zustand (z. B. "Standort auf Karte wählen" läuft gerade) muss
   sichtbar bleiben, sonst weiss niemand, warum die Karte auf Klicks wartet.
   Er zeigt sich als Schrift, nicht als Balken - der käme dem Rücken beim
   Darauffahren in die Quere. */
.app-menu .btn--active,
.app-nav__dropdown .btn--active {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.app-menu .btn:disabled,
.app-nav__dropdown .btn:disabled {
  color: var(--color-text-muted);
  cursor: default;
}

/* Im Klappfeld etwas kompakter als im Overlay: Dort füllt eine Zeile die
   Anzeige, hier steht sie in einem Feld von 300px über der Karte. */
.app-nav__dropdown .btn {
  min-height: 44px;
  font-size: 0.98rem;
}

.app-nav__dropdown .btn:last-child {
  border-bottom: none;
}

/* Die letzte Zeile eines Kaestchens braucht keine Trennlinie - darunter kommt
   schon der Rand. */
.app-menu__group > .btn:last-child,
.app-menu__account > .btn:last-child {
  border-bottom: none;
}

/* Die redaktionellen Seiten am Fuss des Menüs: kleiner als die Aktionen
   darüber und ohne eigenes Kaestchen - sie sind der Nachsatz, nicht das
   Angebot. */
.app-menu__pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  padding: 0 var(--space-md);
}

.app-menu__pages a {
  width: auto;
  min-height: 40px;
  border-bottom: none;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.app-menu__language {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.app-menu__language-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.app-menu__language-select {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  font-family: inherit;
}

/* flex-basis auto statt 0: mobil stehen Karte, Filter und Liste
   untereinander und dürfen zusammen höher werden als der Bildschirm - die
   Seite blättert dann ganz normal. Mit der früheren Angabe `flex: 1`
   (Basis 0) war die Höhe dagegen auf den Viewport festgenagelt: ein
   aufgeklappter Filterbereich lief unten aus dem Kasten heraus, während die
   Fußzeile an ihrer Stelle stehen blieb - sie erschien dadurch mitten im
   Inhalt. flex-grow: 1 bleibt, damit die Fußzeile bei wenig Inhalt trotzdem
   unten sitzt.

   Auf Desktop (>=1024px) gilt weiterhin `flex: 1`, dort füllt das Raster
   genau den Bildschirm und die Spalten blättern für sich (css/responsive.css). */
.app-layout {
  flex: 1 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* flex: 0 0 auto - die Karte behält ihre Höhe, egal wie lang die Liste
   darunter wird. Ohne das schrumpfte sie als Flex-Kind, sobald der übrige
   Inhalt nicht mehr passte, und das führte in eine Schleife: kleinere Karte
   -> anderer Ausschnitt (moveend) -> weniger Ziele in der Liste -> kürzere
   Liste -> Karte wächst wieder. Bei ein bis zwei Zielen lag der Umschlagpunkt
   genau dazwischen, die Karte sprang dann dauerhaft auf und ab. */
.map-panel {
  position: relative;
  flex: 0 0 auto;
  height: 50vh;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.map-panel__map {
  flex: 1;
  width: 100%;
  height: 100%;
  background: var(--color-border);
}

.map-panel__map--picking {
  cursor: crosshair;
}

/* Die Stil-Umschaltung (L.control.layers, js/map/mapController.js) sitzt
   direkt unter dem Zoom-Regler und soll wie dessen Fortsetzung wirken.
   Leaflet gibt ihr von Haus aus einen anderen Radius (5px statt 4px) und
   einen schwächeren Schatten - hier die Werte von .leaflet-bar. Auf
   Touch-Geräten setzt Leaflet für beide dieselben Ränder, dort ist nichts
   zu tun. */
.leaflet-control-layers {
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

/* Das Symbol als SVG statt aus einer Bilddatei: vendor/leaflet/images
   enthält nur die Marker-Grafiken, layers.png und layers-2x.png wurden beim
   Einpflegen nicht mitkopiert - der Knopf blieb deshalb leer. Inline bleibt
   es auf allen Auflösungen scharf und braucht keine zweite Fassung für
   Retina.

   Der Retina-Selektor steht mit dabei, weil Leaflet dort ein eigenes
   background-image setzt, das den Eintrag oben sonst überstimmt. */
.leaflet-control-layers-toggle,
.leaflet-retina .leaflet-control-layers-toggle {
  /* Genau die Maße der Zoom-Knöpfe darüber (.leaflet-bar a). */
  width: 26px;
  height: 26px;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 2.6 7.6 12 12.4l9.4-4.8z'/%3E%3Cpath d='M2.6 12.2 12 17l9.4-4.8'/%3E%3Cpath d='M2.6 16.8 12 21.6l9.4-4.8'/%3E%3C/svg%3E");
}

/* Auf Touch-Geräten wachsen auch die Zoom-Knöpfe auf 30 Pixel. Muss nach
   der Retina-Regel stehen: beide sind gleich spezifisch, und auf einem
   Touch-Gerät mit hoher Auflösung greifen beide. */
.leaflet-touch .leaflet-control-layers-toggle {
  width: 30px;
  height: 30px;
  background-size: 18px 18px;
}

/* Dieselbe Rückmeldung wie bei den Zoom-Knöpfen (.leaflet-bar a:hover),
   die Leaflet für diesen Knopf nicht vorsieht. */
.leaflet-control-layers-toggle:hover,
.leaflet-control-layers-toggle:focus {
  background-color: #f4f4f4;
}

.leaflet-control-layers-expanded {
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
}

/* Leaflet setzt die Beschriftung eines Eintrags neben das Radio, ohne beide
   aneinander auszurichten - bei mehrzeiligen Namen rutschte der Text sonst
   nach unten weg. */
.leaflet-control-layers label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-xs) 0;
  cursor: pointer;
}

.leaflet-control-layers label > span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.leaflet-control-layers-selector {
  margin: 0;
  flex-shrink: 0;
}

.map-picking-hint {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-surface);
  color: var(--color-primary-dark);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-size: 0.85rem;
}

.map-picking-hint[hidden] {
  display: none;
}

.map-picking-hint__cancel {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.list-panel {
  padding: var(--space-md);
  overflow-y: auto;
}

.list-panel__title {
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
}

/* Die Reihenfolge der Ergebnisliste (js/ui/listSort.js). Steht zwischen
   Ueberschrift und Liste - dort, wo man sie sucht, und ohne die Liste beim
   Neuzeichnen mitzunehmen. */
.list-sort {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.list-sort__label {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.list-sort__select {
  /* Nimmt den Rest der Zeile: Auf schmalen Geraeten stuende sonst ein
     halbleeres Feld neben viel Weissraum. */
  flex: 1;
  min-width: 0;
  padding: 6px var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.list-sort__select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Die beiden Knöpfe rechts in der Kopfleiste (Ausrüstung, Menü). Der
   Ausrüstungs-Knopf ist ausgeblendet, solange keine Partnerkennung
   hinterlegt ist (js/config/affiliate.js) - dann steht dort wie bisher nur
   das Menü. */
.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.app-header__menu-toggle[hidden] {
  display: none;
}

/* Pflichtlinks in der Fusszeile der App. Unterstrichen, damit sie als Links
   erkennbar bleiben - die Fusszeile ist einfarbig, Farbe allein trägt hier
   nicht. */
.app-footer__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}