/* Filter- und Suchpanel (Phase 4). Struktur wird von
   js/filters/filterPanel.js in #filter-panel eingehängt.

   Auf- und Zuklappen läuft über die Klasse .filter-panel--open, die
   js/filters/filterPanel.js setzt - mobil als Bereich oberhalb der Liste,
   auf Desktop (>=1024px) als eigene Spalte rechts (siehe
   css/responsive.css), deren Breite dabei mitgleitet. */

.filter-panel {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* --- Kopfzeile ---------------------------------------------------------
   Bleibt beim Blättern durch die Filter oben stehen, damit der
   Schließen-Knopf immer erreichbar ist. Sie trägt beide Zustände: den
   Öffnen-Knopf (sichtbar, solange zu) sowie Titel und Schließen-Knopf
   (sichtbar, solange offen). */

.filter-panel__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid transparent;
}

.filter-panel--open .filter-panel__bar {
  border-bottom-color: var(--color-border);
}

/* Zugeklappt besteht die Leiste nur aus der Knopfreihe - Titel und
   Schliessen-Knopf sind ausgeblendet, und ohne sie sass die Reihe linksbündig
   in einem sonst leeren Streifen. Mittig gesetzt wirkt sie als das, was sie
   ist: die Bedienung dieser Leiste.

   flex-wrap gehört dazu: Ein langer Planname kann die drei Knöpfe über die
   Breite eines Telefons hinausschieben. Dann lieber eine zweite Zeile als ein
   angeschnittener Hilfe-Knopf am rechten Rand.

   Ab 1024px bleibt beides wirkungslos, und das ist Absicht: Dort steht die
   Leiste als Spalte (flex-direction: column, css/trips.css), ihre Höhe folgt
   dem Inhalt und die Knöpfe füllen die Breite ohnehin aus. */
.filter-panel:not(.filter-panel--open) .filter-panel__bar {
  flex-wrap: wrap;
  justify-content: center;
}

/* Öffnen: bewusst kräftig. Der frühere Pfeil war als Bedienelement kaum zu
   erkennen - hier steht jetzt ein Trichter (das gängige Filtersinnbild) auf
   getönter Fläche in der Primärfarbe. */
.filter-panel__open-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.filter-panel__open-btn:hover,
.filter-panel__open-btn:focus-visible {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-card);
}

.filter-panel__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.filter-panel__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  /* Der Titel gibt nach, nicht die Knöpfe: Auf einem schmalen Telefon stehen
     in der Zeile Plan, Zurücksetzen, Hilfe und Schliessen - dann darf lieber
     "Filter & Suche" abgeschnitten werden als ein Bedienelement. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Zurücksetzen: dauerhaft in der Kopfzeile, solange die Leiste offen ist.
   Aufgebaut wie der Hilfe-Knopf daneben (css/help.css), damit die Zeile eine
   Reihe gleichartiger Knöpfe bleibt. */
.filter-panel__reset {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-panel__reset:hover,
.filter-panel__reset:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.filter-panel__reset-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Zugeklappt gibt es nichts zurückzusetzen, was man sehen könnte - der Knopf
   ist dann auch aus der Tastaturbedienung genommen. */
.filter-panel:not(.filter-panel--open) .filter-panel__reset {
  display: none;
}

/* Ganz schmale Anzeigen: Das Zeichen allein muss reichen. Die Beschriftung
   für Screenreader steckt im title des Knopfes und bleibt unberührt. */
@media (max-width: 420px) {
  .filter-panel__reset-label {
    display: none;
  }
}

.filter-panel__close-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.filter-panel__close-btn:hover,
.filter-panel__close-btn:focus-visible {
  background: var(--color-text-muted);
  color: #fff;
}

/* Im jeweils anderen Zustand nicht nur unsichtbar, sondern auch aus der
   Tastaturbedienung genommen. */
.filter-panel--open .filter-panel__open-btn,
.filter-panel:not(.filter-panel--open) .filter-panel__title,
.filter-panel:not(.filter-panel--open) .filter-panel__close-btn {
  display: none;
}

/* --- Aufgleiten --------------------------------------------------------
   Die Höhe wird über grid-template-rows von 0fr auf 1fr gefahren. Das ist
   der einzige Weg, auf eine INHALTSABHÄNGIGE Höhe zu animieren - mit einer
   festen max-height müsste man eine Höhe raten, und der Filterbereich ist
   je nach Zustand unterschiedlich hoch.

   Genau dafür musste das frühere <details> weichen: dessen Inhalt ist im
   geschlossenen Zustand aus dem Rendering genommen, es gibt nichts zu
   animieren. Das Auf-/Zuklappen kostet damit etwas JavaScript - vertretbar,
   da die Kartenansicht ohnehin nicht ohne läuft. */

.filter-panel__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease;
}

.filter-panel--open .filter-panel__wrap {
  grid-template-rows: 1fr;
}

.filter-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* min-height: 0 ist Pflicht, sonst ignoriert das Grid-Kind die 0fr-Zeile
     und die Leiste klappt ohne Bewegung auf. */
  min-height: 0;
  overflow: hidden;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  /* Getoenter Grund, damit die Kaestchen darauf abheben. Ohne ihn saessen
     weisse Karten auf weissem Untergrund und der Rahmen waere das einzige,
     was sie voneinander trennt. */
  background: var(--color-background);
  opacity: 0;
  visibility: hidden;
  /* visibility erst am Ende umschalten, damit das Ausblenden sichtbar
     bleibt; beim Einblenden sofort. */
  transition: opacity 140ms ease, visibility 0s linear 180ms;
}

.filter-panel--open .filter-panel__body {
  opacity: 1;
  visibility: visible;
  transition: opacity 140ms ease 40ms, visibility 0s;
}

/* Wer Bewegung reduziert haben möchte, bekommt denselben Zustandswechsel
   ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  .filter-panel__wrap,
  .filter-panel__body,
  .filter-panel__open-btn,
  .filter-panel__close-btn {
    transition: none;
  }
}

/* Jeder Bereich ein eigenes Kaestchen - dieselbe Sprache wie die Abschnitte
   auf den Zielseiten (.place__section in css/seo.css): heller Grund, runde
   Ecken, leichter Schatten.
   
   Vorher trennte die Bereiche nur eine duenne Linie. Bei zwoelf Bereichen
   untereinander verschwamm dadurch, wo einer aufhoerte und der naechste
   anfing - besonders bei denen aus mehreren Kaestchenreihen (Kategorie,
   Ausstattung). */
.filter-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  margin: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* Die Beschriftung sitzt als Ueberschrift im Kaestchen, nicht als Legende
   im Rahmen: <legend> haengt in der Rahmenlinie und laesst sich nicht
   zuverlaessig ueber Browser hinweg positionieren. float + width nimmt sie
   aus dem Rahmenfluss heraus und macht sie zu einer normalen Zeile. */
.filter-panel__section-label {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-xs);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.filter-panel__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Nur in der nebeneinander laufenden Zeile (z.B. "Alter ab/bis") teilen sich
   die Felder die Breite. Früher stand die Angabe auf .filter-panel__field
   selbst - dort wirkte flex-basis in den senkrechten Abschnitten aber auf die
   HÖHE, wodurch jedes allein stehende Feld (Suche, Merkliste, Umgebung,
   Aufenthaltsdauer, Bewertung) mindestens 160px hoch wurde und zusätzlich
   wuchs. Das war der Leerraum unter genau diesen fünf Feldern. */
.filter-panel__row > .filter-panel__field {
  flex: 1 1 160px;
}

.filter-panel__label {
  font-size: 0.85rem;
  font-weight: 600;
}

.filter-panel__field input,
.filter-panel__field select,
.filter-panel__distance input,
.filter-panel__distance select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}

.filter-panel__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.filter-panel__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  max-height: 180px;
  overflow-y: auto;
  padding: var(--space-xs) 0;
}

.filter-panel__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  cursor: pointer;
}

/* Kategorie mit drei Stellungen: nicht gefiltert, nur diese, ohne diese
   (js/filters/filterPanel.js). Ein Knopf statt eines Kaestchens, weil ein
   Kaestchen nur zwei Zustaende kennt. */
.filter-panel__category-option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.filter-panel__category-option:hover {
  background: var(--color-surface);
}

.filter-panel__category-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Feste Breite, damit die Namen darunter in einer Flucht stehen - auch bei
   leerem Zeichen im neutralen Zustand. */
.filter-panel__category-state {
  flex-shrink: 0;
  width: 1em;
  font-weight: 700;
  text-align: center;
}

.filter-panel__category-option[data-state='nur'] {
  border-color: var(--color-primary);
  background: rgba(46, 125, 50, 0.08);
  font-weight: 600;
}

.filter-panel__category-option[data-state='nur'] .filter-panel__category-state {
  color: var(--color-primary-dark);
}

/* Ausgeschlossen: durchgestrichen und blass - dieselbe Sprache wie bei einer
   fehlenden Ausstattung in der Detailansicht (css/detail.css). */
.filter-panel__category-option[data-state='ohne'] {
  border-color: var(--color-danger);
  background: rgba(198, 40, 40, 0.06);
}

.filter-panel__category-option[data-state='ohne'] .filter-panel__category-state {
  color: var(--color-danger);
}

.filter-panel__category-option[data-state='ohne'] .filter-panel__category-name {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.filter-panel__category-option[data-state='ohne'] .filter-panel__category-swatch {
  opacity: 0.4;
}

.filter-panel__category-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-panel__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.filter-panel__distance {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 220px;
}

.filter-panel__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.filter-panel__hint[hidden] {
  display: none;
}

.filter-panel__location-btn[hidden] {
  display: none;
}

/* Die Fusszeile mit Trefferzahl und den beiden Knoepfen. Wie die Bereiche
   darueber ein Kaestchen, aber ohne Ueberschrift - sie schliesst die Liste
   ab, statt einen weiteren Filter zu tragen. */
.filter-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.filter-panel__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: auto;
}

@media (min-width: 1024px) {
  .filter-panel {
    border-bottom: none;
  }

  /* Die Huelle um die drei Knoepfe (js/filters/filterPanel.js) reicht ihre
     Kinder hier unveraendert durch. Sie ist fuer die schmale Ansicht da, wo
     die Knoepfe als Reiter in der Karte stehen; in der Spalte muessen sie
     dagegen direkte Kinder der Kopfzeile bleiben.
     
     Ohne das lief nach dem Umbau der mobilen Ansicht die halbe
     Spaltengestaltung ins Leere: "flex-direction: column" fuer die
     zugeklappte 56px-Spalte griff auf die Huelle statt auf die Knoepfe, und
     "order" (Plan-Knopf in die zweite Zeile) wirkte gar nicht mehr, weil
     order einen Flex-Elternteil braucht. */
  .filter-panel__tools {
    display: contents;
  }

  /* Stellt die Reihenfolge von vor dem Umbau wieder her: Titel, Zuruecksetzen,
     Hilfe, Schliessen. Im Dokument steht die Hilfe jetzt bei den beiden
     anderen Knoepfen, weil sie mobil mit ihnen in die Karte wandert. */
  .filter-panel--open .help-btn {
    order: 1;
  }

  .filter-panel--open .filter-panel__close-btn {
    order: 2;
  }

  /* Geschlossen bleibt nur eine schmale Spalte übrig (Breite siehe
     css/responsive.css). Der Öffnen-Knopf füllt sie aus und stellt Trichter
     und Beschriftung untereinander - so ist auch auf 56px erkennbar, was
     sich dahinter verbirgt. */
  .filter-panel:not(.filter-panel--open) .filter-panel__bar {
    padding: var(--space-sm) var(--space-xs);
  }

  .filter-panel:not(.filter-panel--open) .filter-panel__open-btn {
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm) var(--space-xs);
  }

  .filter-panel:not(.filter-panel--open) .filter-panel__icon {
    width: 22px;
    height: 22px;
  }

  .filter-panel:not(.filter-panel--open) .filter-panel__open-label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
  }

  /* In der Spalte trägt die Höhe der Inhalt, nicht die Animation: dort
     gleitet die Spaltenbreite (css/responsive.css), und beides gleichzeitig
     sähe unruhig aus. */
  .filter-panel__wrap,
  .filter-panel--open .filter-panel__wrap {
    grid-template-rows: 1fr;
    transition: none;
  }
}

/* --- Schmale Geräte: Reiter in der Karte, Filter als Fenster -------------
 *
 * Bis 2026-08-06 stand die Filterleiste als Streifen UNTER der Karte: Sie
 * kostete dort Höhe, ohne mehr zu zeigen als drei Knöpfe, und beim Öffnen
 * schob sie die Ergebnisliste aus dem Bild.
 *
 * Jetzt liegen die drei Knöpfe als Reiter am linken Rand der Karte (dorthin
 * gehängt von js/filters/filterPanel.js), und die Filter selbst blenden sich
 * als Fenster über der ganzen Seite ein - dasselbe Muster wie beim Menü, das
 * an dieser Stelle bereits vertraut ist.
 */

@media (max-width: 1023px) {
  /* Der Behälter in der Karte. Nur so breit wie die Reiter und ohne eigene
     Fläche, damit die Karte daneben bedienbar bleibt.

     Unter Leaflets Bedienelementen (zoom: 1000) wäre die Leiste teils
     verdeckt; darüber und zugleich unter dem Menü-Overlay (1100) ist der
     Platz, an den sie gehört. */
  .map-tools {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1010;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    /* pointer-events am Behälter aus, an den Knöpfen wieder an: Die Karte
       lässt sich sonst in der ganzen Spalte nicht mehr verschieben. */
    pointer-events: none;
  }

  .map-tools .filter-panel__tools {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    pointer-events: auto;
  }

  /* Die eigentliche Drehung: Der Text läuft von oben nach unten, der Knopf
     wird schmal und hoch. writing-mode statt transform: rotate() - bei
     letzterem behielte der Knopf seine waagerechte Ausdehnung im Layout,
     ragte also in die Karte hinein und liesse darunter eine Lücke.

     sideways-lr gäbe die andere Leserichtung; vertical-rl ist die um 90 Grad
     nach rechts gedrehte und wird überall unterstützt. */
  .map-tools .filter-panel__open-btn,
  .map-tools .trip-filter__btn,
  .map-tools .help-btn {
    writing-mode: vertical-rl;
    padding: var(--space-md) 6px;
    /* Rechts abgerundet, links bündig am Bildrand: Der Reiter kommt aus der
       Kante heraus, statt frei zu schweben. */
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: none;
    box-shadow: var(--shadow-card);
  }

  /* Die Symbole stehen im gedrehten Knopf auf dem Kopf, wenn sie mitdrehen -
     sie bleiben deshalb aufrecht. */
  .map-tools .filter-panel__icon,
  .map-tools .trip-filter__icon,
  .map-tools .help-btn__icon {
    writing-mode: horizontal-tb;
  }

  /* --- Das Fenster ---
   *
   * Aufgebaut wie das Menue (.app-menu in css/layout.css): abgedunkelter
   * Hintergrund, darauf eine Karte mit runden Ecken und Schatten. So ist auf
   * einen Blick zu sehen, dass hier etwas ueber der Seite liegt und nicht
   * die Seite selbst gewechselt hat. */

  /* Zugeklappt ist die Leiste im Fluss nicht mehr vorhanden: Ihre Knoepfe
     stehen in der Karte, alles andere wartet auf das Oeffnen. */
  .filter-panel:not(.filter-panel--open) {
    display: none;
  }

  .filter-panel--open {
    position: fixed;
    inset: 0;
    /* Ueber der Karte und der Detailansicht, unter dem Menue-Overlay (1100):
       Wer aus dem Menue heraus etwas anstoesst, soll dessen Fenster nicht
       hinter den Filtern verlieren. */
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.45);
    /* Der Rahmen von .filter-panel gehoert zum Streifen im Fluss - als
       Fenster stoert er. */
    border-bottom: none;
  }

  /* Die Karte selbst. max-height statt fester Hoehe: Ein kurzer Filtersatz
     soll kein halbleeres Fenster ergeben. */
  .filter-panel--open .filter-panel__sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    min-height: 0;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  /* Die Kopfzeile bleibt stehen, geblaettert wird nur der Inhalt darunter. */
  .filter-panel--open .filter-panel__bar {
    flex-shrink: 0;
    border-bottom-color: var(--color-border);
  }

  /* HIER wird geblaettert - und nur hier.
   *
   * Der Aufgleit-Mechanismus (grid 0fr -> 1fr mit overflow: hidden am Inhalt)
   * ist genau das, was das Blaettern zuvor verhindert hat: Der Inhalt wurde
   * auf die Fensterhoehe gestaucht und der Rest abgeschnitten, es gab also
   * gar nichts zu scrollen - das Mausrad ging an die Seite dahinter. Im
   * Fenster braucht es die Animation nicht, deshalb steht das Raster hier
   * still und der Inhalt flieszt normal. */
  .filter-panel--open .filter-panel__wrap {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Das Rad soll nicht an die Seite dahinter durchschlagen, wenn das Ende
       erreicht ist. */
    overscroll-behavior: contain;
  }

  .filter-panel--open .filter-panel__body {
    overflow: visible;
    opacity: 1;
    visibility: visible;
    /* Luft am unteren Ende: Auf Telefonen mit Gestensteuerung liegt sonst
       der letzte Filter unter dem Balken zum Wechseln der Anwendung. */
    padding-bottom: var(--space-xl);
  }

  /* Im Fenster hat die Knopfreihe nichts zu suchen - sie steht in der Karte,
     und der Weg zurueck fuehrt ueber Schliessen. Sollte sie durch einen
     Groessenwechsel doch einmal hier landen, bleibt sie unsichtbar. */
  .filter-panel--open .filter-panel__bar .filter-panel__tools {
    display: none;
  }
}

/* --- Kategorienliste: Erklärung und ein sichtbares Ende ------------------
 *
 * Die Liste ist höher als ihr Platz und blättert deshalb. Ohne Hinweis
 * darauf endete sie für den Leser einfach - dass darunter noch acht weitere
 * Kategorien warten, war nicht zu ahnen.
 */
.filter-panel__category-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Der Verlauf am unteren Rand: Die letzte sichtbare Zeile läuft ins Weiße
   aus und zeigt damit, dass sie nicht die letzte ist. Er liegt über der
   Liste, nimmt aber keine Klicks an - sonst wäre die unterste Kategorie
   nicht mehr zu treffen.
   
   Nur ein Hinweis, kein Ersatz für eine Bildlaufleiste: Wer am Ende
   angekommen ist, sieht ihn weiterhin. Das in Kauf zu nehmen ist billiger
   als ein Scroll-Listener, der bei jeder Bewegung eine Klasse umschaltet. */
.filter-panel__category-group::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    var(--color-surface)
  );
}

/* Die Liste bekommt eine eigene Umrandung: So ist zu sehen, wo sie anfängt
   und aufhört - der Verlauf allein liesse offen, ob er zum Kästchen gehört
   oder zur Liste. */
.filter-panel__categories {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  /* Immer sichtbare Bildlaufleiste, wo der Browser es zulässt: Auf dem Mac
     blendet sie sich sonst aus, bis jemand scrollt - und genau dann fehlt
     der Hinweis, dass es etwas zu scrollen gibt. */
  scrollbar-width: thin;
}