* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1f2430;
}

#app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

#map {
  flex: 1 1 auto;
  height: 100%;
}

/* Bereichsauswahl-Schaltflaeche direkt auf der Karte (statt zweier Buttons
   in der Sidebar) - Leaflet stapelt eigene Controls in derselben Ecke
   automatisch untereinander, dadurch landet sie von selbst gleich unter
   dem Zeichenwerkzeug. Bewusst rund statt des eckigen Leaflet-Standards. */
.leaflet-bar.bereichsauswahl-control {
  border-radius: 50%;
  border: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.leaflet-bar.bereichsauswahl-control a.bereichsauswahl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  line-height: 1;
  font-size: 16px;
  background: #fff;
  border-radius: 50%;
  border: none;
  text-decoration: none;
}
.leaflet-bar.bereichsauswahl-control a.bereichsauswahl-btn.zeichnet {
  background: #2d6cdf;
}
.leaflet-bar.bereichsauswahl-control a.bereichsauswahl-btn.gefiltert {
  background: #e8a324;
}

#sidebar {
  width: 340px;
  flex: 0 0 340px;
  padding: 16px;
  overflow-y: auto;
  background: #fafafa;
  border-left: 1px solid #ddd;
}

#sidebar h1 {
  font-size: 18px;
  margin: 0 0 8px;
}

.rollen-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rollen-zeile h1 {
  margin: 0;
  flex: 0 0 auto;
}
#rollen-anzeige {
  font-size: 11px;
  color: #666;
  background: #eee;
  border-radius: 999px;
  padding: 2px 9px;
  flex: 1 1 auto;
}
.rollen-zeile #logout-btn {
  flex: 0 0 auto;
}

/* Mitarbeiter sehen keine Admin-Aktionen (Flaeche/Massnahme anlegen,
   loeschen, Termin aendern) - der Server blockt diese Aktionen ohnehin
   serverseitig ab, hier geht es nur darum, sie erst gar nicht anzuzeigen. */
.rolle-mitarbeiter .admin-only {
  display: none !important;
}

/* Listen-/Detailansicht: immer nur eines von beidem gleichzeitig sichtbar,
   damit klar ist, wo man gerade hinschauen soll - entweder man browst die
   Liste aller Flaechen, oder man ist im Fokus auf einer einzelnen Flaeche. */
#detail-ansicht.hidden,
#listen-ansicht.hidden {
  display: none;
}

.zurueck-btn {
  background: none;
  border: none;
  color: #2d6cdf;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  display: block;
}

.hilfe-toggle {
  background: none;
  border: none;
  color: #2d6cdf;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
  display: block;
}

.listen-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.listen-kopf h2 {
  font-size: 13px;
  margin: 0;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.listen-kopf-aktionen {
  display: flex;
  gap: 6px;
}
.icon-btn {
  background: #eee;
  color: #333;
  border: none;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
.icon-btn:hover {
  background: #e2e2e2;
}

/* Export-Format waehlen: ein <select> statt eines eigenen Modals, weil es
   nur zwei Optionen sind - direkt nach der Auswahl startet der Download,
   danach springt es auf den Platzhalter zurueck (so laesst es sich beliebig
   oft erneut oeffnen). */
.icon-select {
  background: #eee;
  color: #333;
  border: none;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}
.icon-select:hover {
  background: #e2e2e2;
}
.export-select-einzeln {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 0 0 2px;
  vertical-align: middle;
  opacity: 0.7;
  color: inherit;
  /* Blendet den nativen Dropdown-Pfeil aus - der Inhalt ist ohnehin nur
     das ⬇️-Symbol, ein zusaetzlicher Browser-Pfeil daneben waere
     verwirrend (sieht aus wie zwei Symbole statt einem Button). */
  -webkit-appearance: none;
  appearance: none;
}
.export-select-einzeln:hover {
  opacity: 1;
}

.import-box {
  width: 420px;
}
#import-liste {
  max-height: 45vh;
  overflow-y: auto;
  margin: 10px 0;
}
.import-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #eee;
  padding: 8px 0;
}
.import-zeile:first-child {
  border-top: none;
}
.import-zeile .import-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.import-zeile .import-name {
  flex: 1 1 auto;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  min-width: 0;
}
.import-zeile .import-groesse {
  flex: 0 0 auto;
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2430;
}
.login-screen.hidden { display: none; }

.login-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  width: 260px;
  max-width: 85vw;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.login-box h1 {
  margin: 0 0 4px;
  font-size: 22px;
  color: #2d6cdf;
}
.login-box p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #666;
}
.login-box input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
}
.login-box .btn {
  width: 100%;
  padding: 10px;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 36, 48, 0.55);
  padding: 16px;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 320px;
  max-width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.modal-box h2 {
  margin: 0 0 6px;
  font-size: 16px;
}
.modal-box input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  margin: 8px 0 14px;
}
.warteschlange-box {
  width: 360px;
}
#warteschlange-liste {
  max-height: 50vh;
  overflow-y: auto;
  margin: 10px 0;
}
.warteschlange-eintrag {
  border-top: 1px solid #eee;
  padding: 8px 0;
  font-size: 13px;
}
.warteschlange-eintrag:first-child {
  border-top: none;
}
.warteschlange-fehler {
  color: #d94b4b;
  font-size: 12px;
  margin: 2px 0 6px;
}

#offline-badge {
  cursor: pointer;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.login-error {
  color: #d94b4b;
  font-size: 12px;
  margin: 10px 0 0;
}

.hint {
  font-size: 12px;
  color: #666;
  margin: 0 0 12px;
}

.auswahl-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.legend {
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 14px;
  color: #444;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
}
.legend-item:hover {
  background: #f0f0f0;
}
.legend-item.aktiv {
  background: #eef2f9;
  border-color: #2d6cdf;
  color: #2d6cdf;
  font-weight: 600;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}
.dot.ok { background: #3aa657; }
.dot.bald { background: #e8a324; }
.dot.faellig { background: #d94b4b; }
.dot.keine { background: #9aa0a6; }

.flaeche-suche {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #ccc;
  border-radius: 999px;
  font-size: 13px;
  margin-bottom: 10px;
  background: #fff;
}

.flaeche-list-wrapper {
  display: flex;
  gap: 4px;
}
#flaeche-list {
  flex: 1 1 auto;
  min-width: 0;
}

/* A-Z-Sprungleiste: schmale Spalte mit allen Buchstaben, bei denen es
   mindestens eine Fläche gibt (nicht vorhandene Buchstaben sind
   ausgegraut/nicht antippbar). Bleibt beim Scrollen der Liste stehen,
   damit man sie nicht erst wieder nach oben scrollen muss, um sie zu
   benutzen. Erscheint erst ab einer gewissen Flaechenanzahl (siehe
   renderList) - bei wenigen Flaechen waere sie nur unnoetiger Ballast. */
.az-index {
  flex: 0 0 auto;
  width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 70vh;
  overflow-y: auto;
}
.az-buchstabe {
  background: none;
  border: none;
  color: #2d6cdf;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 0;
  cursor: pointer;
  line-height: 1.5;
}
.az-buchstabe.leer {
  color: #ccc;
  cursor: default;
}

.az-gruppe {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 10px 0 4px;
}
.az-gruppe:first-child {
  margin-top: 0;
}

.flaeche-card {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.flaeche-card:hover { border-color: #b9b9b9; }
.flaeche-card.mehrfachauswahl {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.flaeche-card .flaeche-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.flaeche-card-inhalt {
  flex: 1 1 auto;
  min-width: 0;
}
.flaeche-card .name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flaeche-card .meta {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
.flaeche-card .groesse {
  font-weight: 400;
  color: #888;
  font-size: 12px;
}
.massnahmen-anzahl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #eef2f9;
  color: #2d6cdf;
  font-weight: 600;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

/* Auswahl-Leiste fuer die Sammelaktion "Maßnahme zu mehreren Flaechen
   hinzufuegen" - deutlich sichtbar (eigener Hintergrund), solange der
   Modus aktiv ist, damit klar bleibt, dass Klicks gerade Flaechen
   markieren statt die Detailansicht zu oeffnen. */
.mehrfachauswahl-leiste {
  background: #eaf1fc;
  border: 1px solid #cddcf5;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.mehrfachauswahl-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mehrfachauswahl-leiste #mehrfachauswahl-anzahl {
  font-weight: 600;
  font-size: 13px;
}
.mehrfachauswahl-alle-link {
  background: none;
  border: none;
  color: #2d6cdf;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
}
.mehrfachauswahl-hinweis {
  font-size: 11px;
  color: #555;
  margin: 4px 0 8px;
}
.mehrfachauswahl-aktionen {
  display: flex;
  gap: 8px;
}
.mehrfachauswahl-aktionen .btn {
  flex: 1 1 0;
  text-align: center;
}
.mehrfachauswahl-aktionen .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hidden { display: none; }

.panel {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}
.panel.hidden { display: none; }

.monat-checkboxen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sofort-faellig-zeile {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #444;
  margin: 4px 0 10px;
  cursor: pointer;
}
.sofort-faellig-zeile input {
  margin-top: 2px;
  flex: 0 0 auto;
}
/* Der Beschreibungstext braucht flex:1 + min-width:0, sonst behandelt
   Safari ihn als einzelnen, nicht umbrechenden Flex-Kindknoten und der
   Text läuft rechts über den Rand des Modals hinaus, statt in mehreren
   Zeilen innerhalb der Box umzubrechen. */
.sofort-faellig-zeile span {
  flex: 1 1 auto;
  min-width: 0;
}
.monat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.monat-chip input {
  margin: 0;
}

.panel h2 {
  font-size: 16px;
  margin: 0 0 4px;
}

.rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 0 0 2px;
  vertical-align: middle;
  opacity: 0.7;
}
.rename-btn:hover {
  opacity: 1;
}

.flaeche-info {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px;
}

.panel .close-btn {
  float: right;
  cursor: pointer;
  color: #888;
  font-size: 13px;
}

.nav-buttons {
  margin: 6px 0 12px;
  display: flex;
  gap: 8px;
}

.massnahme-row {
  border-top: 1px solid #eee;
  padding: 8px 0;
}
.massnahme-row .m-name {
  font-weight: 600;
  font-size: 13px;
}
.massnahme-row .m-meta {
  font-size: 12px;
  color: #666;
  margin: 2px 0 6px;
}
.erledigung-indikator {
  font-size: 12px;
  margin-left: 2px;
  opacity: 0.85;
}

button, input, select {
  font-family: inherit;
  font-size: 13px;
}

.btn {
  background: #2d6cdf;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}
.btn.small { padding: 4px 8px; font-size: 12px; }
.btn.secondary { background: #eee; color: #333; }
.btn.danger { background: #d94b4b; }
.btn + .btn { margin-left: 6px; }
.btn.block {
  display: block;
  width: 100%;
  text-align: center;
  margin: 8px 0 0;
}

/* Primaeraktion einer Maßnahme ("Als erledigt melden") - bewusst gross
   und alleinstehend, das ist mit Abstand die haeufigste Aktion im Feld
   und soll auch mit dicken/rauhen Fingern sicher zu treffen sein. */
.btn.primaer {
  display: block;
  width: 100%;
  padding: 12px;
  margin: 8px 0 10px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
}

/* Zweitrangige Aktionen (Historie, Bearbeiten) gleichwertig nebeneinander,
   deutlich kleiner/unauffaelliger als die Primaeraktion. */
.aktionen-sekundaer {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.aktionen-sekundaer .btn {
  flex: 1 1 0;
  text-align: center;
}

/* Loeschen ist unumkehrbar und soll deshalb NICHT wie ein normaler
   gleichwertiger Button danebenstehen (Verwechslungsgefahr bei schnellem/
   ungenauem Tippen) - stattdessen ein kleiner, dezenter Text-Link mit
   spuerbarem Abstand nach oben. */
.loeschen-dezent {
  display: block;
  background: none;
  border: none;
  color: #d94b4b;
  font-size: 12px;
  text-decoration: underline;
  padding: 10px 0 4px;
  margin-top: 4px;
  cursor: pointer;
}

/* Abbrechen ist ungefaehrlich (nichts geht verloren, das Formular bleibt
   offen), soll aber trotzdem klar hinter der Primaeraktion zuruecktreten -
   neutral statt rot, aber mit derselben grosszuegigen Tipp-Flaeche. */
.abbrechen-dezent {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #666;
  font-size: 13px;
  text-decoration: underline;
  padding: 6px 0 4px;
  cursor: pointer;
  text-align: center;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.form-row label { font-size: 12px; color: #444; }
.form-row input, .form-row textarea, .form-row select {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.historie-item {
  border-top: 1px dashed #eee;
  padding: 6px 0;
  font-size: 12px;
}
.historie-item img {
  max-width: 100%;
  border-radius: 6px;
  margin-top: 4px;
}
.historie-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.historie-bearbeiten-link {
  background: none;
  border: none;
  color: #2d6cdf;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  flex: 0 0 auto;
}
.historie-bearbeiten-form {
  margin-top: 6px;
}
.historie-bearbeiten-form:empty {
  margin-top: 0;
}
.he-foto-vorhanden {
  margin-bottom: 6px;
}
.he-foto-vorhanden img {
  max-width: 100%;
  border-radius: 6px;
  display: block;
  margin-bottom: 4px;
}
.he-foto-loeschen-zeile {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
}
.he-foto-loeschen-zeile span {
  flex: 1 1 auto;
  min-width: 0;
}

.empty {
  font-size: 12px;
  color: #999;
}

.leaflet-popup-content { font-size: 13px; }

#offline-badge {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2d2d2d;
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  z-index: 2000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  max-width: 90vw;
  text-align: center;
}

#auswahl-hinweis {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2d6cdf;
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  z-index: 2000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  max-width: 90vw;
  text-align: center;
  pointer-events: none;
}

.drag-handle {
  display: none; /* nur mobil sichtbar, siehe Media Query unten */
  width: 40px;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
  margin: 0 auto 10px;
}

.sheet-handle {
  display: none; /* nur mobil sichtbar, siehe Media Query unten */
}

/* Handy-Ansicht: Karte im Vollbild, Bedienpanel als Bottom-Sheet darueber */
@media (max-width: 700px) {
  #app {
    display: block;
  }

  .legend-item {
    padding: 6px 10px;
    font-size: 13px;
    min-height: 32px;
  }

  #map {
    position: fixed;
    inset: 0;
  }

  #sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 55vh;
    border-left: none;
    border-top: 1px solid #ddd;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
    z-index: 1000;
    padding-top: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    transition: max-height 0.2s ease;
  }

  /* Eingeklappter Zustand: nur noch der Griff ist sichtbar, Rest der Karte
     ist frei. Durch Antippen oder Hochwischen des Griffs wieder aufklappen. */
  #sidebar.eingeklappt {
    max-height: 64px;
    overflow: hidden;
  }

  #sidebar h1 {
    font-size: 15px;
  }

  .hint {
    display: none;
  }

  .panel {
    max-height: 50vh;
    overflow-y: auto;
  }

  .drag-handle {
    display: block;
  }

  /* Grosser, gut treffbarer Wisch-/Tipp-Griff fuer die ganze Leiste */
  .sheet-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    margin: 0 -16px 4px;
    touch-action: none;
    cursor: grab;
  }
  .sheet-handle-bar {
    width: 48px;
    height: 5px;
    border-radius: 3px;
    background: #ccc;
  }

  /* Groessere Tipp-Flaechen fuer Finger (bzw. Arbeitshandschuhe) - Apples
     eigene Empfehlung fuer Touch-Ziele ist ca. 44px Hoehe, das nehmen wir
     hier als Richtwert fuer alle Buttons auf dem Handy. */
  .btn {
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn.small {
    padding: 9px 12px;
    min-height: 40px;
  }
  .btn.primaer {
    min-height: 50px;
    font-size: 15px;
  }
  .aktionen-sekundaer {
    gap: 10px;
  }
  .loeschen-dezent {
    padding: 14px 0 6px;
    font-size: 13px;
  }

  /* Navigations-Links (Google/Apple Maps) als grosse, gleich breite
     Kacheln statt schmaler nebeneinanderstehender Buttons. */
  .nav-buttons {
    gap: 10px;
  }
  .nav-buttons a {
    flex: 1 1 0;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Eingabefelder in Formularen (Mitarbeiter, Kommentar, Datum, Intervall,
     Auswahlfelder) grosszuegiger fuer Arbeiterhaende - die Standard-6px-
     Polsterung ist am Handy zu knapp zum praezisen Antippen/Fokussieren. */
  .form-row input,
  .form-row textarea,
  .form-row select {
    padding: 11px 10px;
    min-height: 44px;
    font-size: 15px;
  }
  .form-row input[type="file"] {
    padding: 10px 6px;
  }
  .form-row input[type="checkbox"] {
    min-height: auto;
    width: 20px;
    height: 20px;
    accent-color: #2d6cdf;
  }

  /* Monats-Chips (Mai, Juni, ...) und die Sofort-faellig-Checkbox sind
     kleine wiederkehrende Tippziele - beide vergroessern. accent-color
     faerbt die native Checkbox im App-Blau ein, statt dem grauen
     Browser-Standard - wirkt dadurch runder/bewusster gestaltet, ohne eine
     komplett eigene Checkbox-Grafik bauen zu muessen. */
  .monat-chip {
    padding: 9px 15px;
    font-size: 13px;
    border-radius: 999px;
  }
  .monat-chip input {
    width: 20px;
    height: 20px;
    accent-color: #2d6cdf;
  }
  .monat-checkboxen {
    gap: 8px;
  }
  .sofort-faellig-zeile {
    padding: 6px 0;
    font-size: 13px;
  }
  .sofort-faellig-zeile input {
    width: 22px;
    height: 22px;
    accent-color: #2d6cdf;
  }

  /* Kleine Text-Buttons (Zurueck, Hilfe, Abbrechen) bekommen mehr
     Innenabstand, damit die Tipp-Flaeche trotz kleiner Schrift
     ausreichend gross bleibt. */
  .zurueck-btn,
  .hilfe-toggle {
    padding: 8px 0;
    font-size: 14px;
  }
  .abbrechen-dezent {
    padding: 12px 0 8px;
    font-size: 14px;
  }

  /* Reine Icon-Schaltflaechen (Umbenennen, Export-einzeln, Schliessen) als
     runde Knoepfe mit eigenem Hintergrund statt frei schwebendem Emoji -
     lesen sich dadurch klar als Schaltflaeche und sind leichter zu
     treffen. */
  .rename-btn,
  .export-select-einzeln,
  .panel .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 16px;
    background: #f0f0f0;
    border-radius: 50%;
    float: none;
  }

  /* Modal-Buttons (Name-Dialog, Warteschlange) untereinander statt
     nebeneinander - bei zwei schmalen Buttons nebeneinander vertippt man
     sich am Handy leicht, gestapelt und volle Breite ist sicherer. */
  .modal-buttons {
    flex-direction: column-reverse;
  }
  .modal-buttons .btn {
    width: 100%;
  }

  /* Import/Export sind die haeufigsten Verwaltungsaktionen oben in der
     Liste - als volle Pillen (statt leicht abgerundeter Rechtecke) und
     mit ausreichend Hoehe fuer Arbeiterhaende. */
  .icon-btn,
  .icon-select {
    padding: 10px 16px;
    min-height: 44px;
    font-size: 13px;
    border-radius: 999px;
  }

  .flaeche-card .flaeche-check {
    width: 24px;
    height: 24px;
    margin-top: 0;
    accent-color: #2d6cdf;
  }
  .mehrfachauswahl-leiste {
    padding: 12px;
  }
  .mehrfachauswahl-alle-link {
    padding: 8px 0;
    font-size: 13px;
  }
  .import-box {
    width: 100%;
  }
  .import-zeile .import-check {
    width: 24px;
    height: 24px;
    accent-color: #2d6cdf;
  }
  .import-zeile .import-name {
    padding: 10px 8px;
    min-height: 40px;
    font-size: 14px;
  }

  .flaeche-suche {
    padding: 11px 12px;
    font-size: 15px;
  }
  .az-index {
    width: 20px;
  }
  .az-buchstabe {
    font-size: 10px;
    padding: 2.5px 0;
  }

  /* Grosszuegigere Tipp-Flaeche fuer die runde Kartenschaltflaeche */
  .leaflet-bar.bereichsauswahl-control a.bereichsauswahl-btn {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }
}