* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', sans-serif; background: #f0f4f0; color: #1a2e1a; height: 100vh; display: flex; flex-direction: column; }

  header {
    background: #2d5a1b;
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1000;
  }
  header h1 { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.5px; }
  header .subtitle { font-size: 0.75rem; opacity: 0.8; }

  .toolbar {
    background: #fff;
    padding: 10px 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #dde8d0;
    z-index: 999;
  }

  .toolbar select, .toolbar button,
  .filterbar select, .filterbar button {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #b8d4a0;
    font-size: 0.85rem;
    cursor: pointer;
    background: white;
    color: #1a2e1a;
  }
  .toolbar select:focus,
  .filterbar select:focus { border-color: #2d5a1b; }
  .toolbar select:focus:not(:focus-visible),
  .filterbar select:focus:not(:focus-visible) { outline: none; }

  /* Suchbare Filterfelder (Region/Gemeinde/Art) */
  .filterbar input.filter-search {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #b8d4a0;
    font-size: 0.85rem;
    background: white;
    color: #1a2e1a;
    width: 150px;
    max-width: 42vw;
  }
  .filterbar input.filter-search:focus { border-color: #2d5a1b; }
  .filterbar input.filter-search:focus:not(:focus-visible) { outline: none; }

  /* Ausklappbare Filterzeile */
  .filterbar {
    background: #eef4e8;
    padding: 8px 16px;
    display: none;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #dde8d0;
    z-index: 998;
  }
  .filterbar.open { display: flex; }

  /* ── Mehrfachfilter ────────────────────────────────────────────────────
     Ein Knopf mit ausklappbarer Liste. Frueher standen hier Eingabefelder
     mit Vorschlagsliste: sobald etwas drinstand, kam man an die uebrigen
     Auswahlmoeglichkeiten nur heran, indem man das Feld leerte. Und mehr
     als ein Wert je Filter ging gar nicht. */
  .mfilter { position: relative; }

  .mfilter-knopf {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 230px;
    padding: 7px 11px;
    font-size: 0.82rem;
    background: #fff;
    color: #2d5a1b;
    border: 1px solid #c4d8b4;
    border-radius: 6px;
    cursor: pointer;
  }
  .mfilter-knopf:hover { border-color: #8ab27a; }
  .mfilter-knopf.aktiv {
    background: #2d5a1b;
    color: #fff;
    border-color: #2d5a1b;
    font-weight: 600;
  }
  .mfilter-knopf.gesperrt { opacity: 0.65; cursor: not-allowed; }
  .mfilter-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mfilter-pfeil { font-size: 0.7rem; opacity: 0.75; flex: none; }
  .mfilter.offen .mfilter-pfeil { transform: rotate(180deg); }

  .mfilter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 300px;
    background: #fff;
    border: 1px solid #c4d8b4;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    z-index: 1200;
    padding: 6px;
  }
  .mfilter.offen .mfilter-panel { display: block; }

  .mfilter-suche {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 5px;
    font-size: 0.8rem;
    border: 1px solid #dde8d0;
    border-radius: 5px;
  }
  .mfilter-liste { max-height: 260px; overflow-y: auto; }
  .mfilter-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    font-size: 0.82rem;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
  }
  .mfilter-zeile:hover { background: #eef4e8; }
  .mfilter-zeile input { flex: none; margin: 0; cursor: pointer; }
  .mfilter-zeile.verborgen { display: none; }
  .mfilter-leer { padding: 10px 8px; font-size: 0.8rem; color: #8a9a80; font-style: italic; }

  .mfilter-fuss {
    display: flex;
    gap: 6px;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #eef4e8;
  }
  .mfilter-fuss button {
    flex: 1;
    padding: 6px;
    font-size: 0.76rem;
    background: #f4f8f0;
    color: #4a6a3a;
    border: 1px solid #dde8d0;
    border-radius: 5px;
    cursor: pointer;
  }
  .mfilter-fuss button:hover { background: #e6efdd; }

  @media (max-width: 600px) {
    .mfilter-knopf { max-width: 46vw; }
    .mfilter-panel { max-width: 84vw; }
    /* Zugeklappte Legende: nur so gross wie noetig */
    .legend { font-size: 0.78rem; }
    .legend-head { padding: 7px 10px; }
  }
  .filterbar-label { font-weight: 700; font-size: 0.75rem; color: #4a6a3a; text-transform: uppercase; letter-spacing: 0.5px; }
  .btn-reset { background: #fff !important; color: #c0392b !important; border-color: #e0b4ae !important; }
  .btn-reset:hover { background: #fde8e6 !important; }
  .filter-badge {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 6px;
    margin-left: 4px;
  }
  .toolbar-spacer { margin-left: auto; }

  /* Export-Fenster */
  .export-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 360px; max-width: calc(100% - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 2100;
    display: none;
    overflow: hidden;
  }
  .export-modal.open { display: block; }
  .export-body { padding: 20px; }
  .export-count { color: #6a8a5a; font-weight: 400; }
  .btn-format {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .btn-format small { font-weight: 400; opacity: 0.85; }
  .btn-format.xlsx { background: #1d6f42; }
  .btn-format.xlsx:hover { background: #248a52; }
  .btn-format.pdf { background: #a23b32; }
  .btn-format.pdf:hover { background: #c0392b; }
  .btn-format.csv { background: #555; }
  .btn-format.csv:hover { background: #6a6a6a; }

  .btn-primary {
    background: #2d5a1b !important;
    color: white !important;
    border-color: #2d5a1b !important;
    font-weight: 600;
  }
  .btn-primary:hover { background: #3d7a28 !important; }
  .btn-gps {
    background: #1b4a8a !important;
    color: white !important;
    border-color: #1b4a8a !important;
  }
  .btn-gps:hover { background: #2560b0 !important; }
  .btn-export {
    background: #5a3d1b !important;
    color: white !important;
    border-color: #5a3d1b !important;
  }

  /* ── Kopfzahlen ────────────────────────────────────────────────────────
     Sitzen auf dem dunkelgruenen Kopf. Deshalb helle Schrift und ein
     farbiger Punkt je Status - die frueheren dunklen Farben (#2d5a1b,
     #1a1a1a) waren auf diesem Grund nicht zu erkennen. */
  .stats {
    display: flex;
    gap: 7px;
    margin-left: auto;
    font-size: 0.8rem;
    align-items: center;
  }
  .stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    line-height: 1;
    white-space: nowrap;
    transition: background 0.25s ease;
  }
  /* Farbpunkt je Status; "Gesamt" bekommt keinen, sondern kraeftigeren Grund */
  .stat::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
  }
  .stat-gesamt::before { display: none; }
  .stat-gesamt {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.34);
  }
  .stat-offen { color: #ff8272; }
  .stat-ok    { color: #6ede9a; }
  .stat-weg   { color: #cbcbcb; }

  .stat-num {
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
    font-variant-numeric: tabular-nums;   /* Ziffern springen beim Zaehlen nicht */
  }
  .stat-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.82); }

  /* Kurz aufleuchten, wenn sich eine Zahl aendert - nach einem Abgleich sieht
     man sonst nicht, dass etwas passiert ist. */
  .stat.stat-neu { background: rgba(255, 255, 255, 0.34); }

  #map { flex: 1; }

  /* Sidebar */
  .sidebar {
    position: fixed;
    top: 0; right: -380px;
    width: 380px;
    height: 100%;
    background: white;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 2000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sidebar.open { right: 0; }

  .sidebar-header {
    background: #2d5a1b;
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sidebar-header h2 { font-size: 1rem; }
  .btn-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }

  .sidebar-body { padding: 20px; overflow-y: auto; flex: 1; }

  .form-group { margin-bottom: 16px; }
  .form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a6a3a;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #c8dab8;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #1a2e1a;
    background: #f8fbf5;
    transition: border-color 0.2s;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: #2d5a1b;
    background: white;
  }
  .form-group input:focus:not(:focus-visible),
  .form-group select:focus:not(:focus-visible),
  .form-group textarea:focus:not(:focus-visible) { outline: none; }
  .form-group textarea { resize: vertical; min-height: 70px; }

  .coords-display {
    font-size: 0.8rem;
    color: #5a7a4a;
    background: #f0f7e8;
    border: 1px solid #c8dab8;
    border-radius: 6px;
    padding: 8px 12px;
    font-family: monospace;
  }

  .radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
  .radio-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px;
    border: 2px solid #c8dab8;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
    user-select: none;
  }
  .radio-btn:hover { border-color: #2d5a1b; background: #f0f7e8; }
  .radio-btn.selected { border-color: #2d5a1b; background: #2d5a1b; color: white; font-weight: 600; }
  .radio-btn.dring-sehr.selected { background: #c0392b; border-color: #c0392b; }
  .radio-btn.dring-massig.selected { background: #e67e22; border-color: #e67e22; }
  .radio-btn.dring-wenig.selected { background: #27ae60; border-color: #27ae60; }
  .radio-btn.status-nicht.selected { background: #c0392b; border-color: #c0392b; }
  .radio-btn.status-behandelt.selected { background: #27ae60; border-color: #27ae60; }
  .radio-btn.status-entfernt.selected { background: #1a1a1a; border-color: #1a1a1a; }

  .btn-save {
    width: 100%;
    padding: 12px;
    background: #2d5a1b;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s;
  }
  .btn-save:hover { background: #3d7a28; }

  .btn-delete {
    width: 100%;
    padding: 10px;
    background: none;
    color: #c0392b;
    border: 1px solid #c0392b;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s;
  }
  .btn-delete:hover { background: #c0392b; color: white; }

  /* List panel */
  .list-panel {
    position: fixed;
    bottom: -100%;
    left: 0; right: 0;
    height: 60vh;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    z-index: 1500;
    transition: bottom 0.3s ease;
    display: flex;
    flex-direction: column;
  }
  .list-panel.open { bottom: 0; }

  .list-header {
    background: #2d5a1b;
    color: white;
    padding: 16px 20px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .list-header h2 { font-size: 1rem; }

  .plant-list { overflow-y: auto; flex: 1; }

  .plant-item {
    padding: 14px 20px;
    border-bottom: 1px solid #eef4e8;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .plant-item:hover { background: #f5faf0; }

  .plant-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(0,0,0,0.15);
  }
  .plant-info { flex: 1; }
  .plant-name { font-weight: 600; font-size: 0.9rem; }
  .plant-meta { font-size: 0.75rem; color: #6a8a5a; margin-top: 2px; }
  .plant-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
  .badge {
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
  }
  .badge-sehr { background: #fde8e6; color: #c0392b; }
  .badge-massig { background: #fef3e2; color: #d35400; }
  .badge-wenig { background: #e8f8ee; color: #27ae60; }
  .badge-privat { background: #e8eef8; color: #2c5282; }
  .badge-oeff { background: #f0e8f8; color: #6b21a8; }
  .badge-nicht { background: #fde8e6; color: #c0392b; }
  .badge-behandelt { background: #d4edda; color: #155724; }
  .badge-entfernt { background: #d6d6d6; color: #1a1a1a; }
  .badge-neutral { background: #eceff1; color: #607d8b; }
  .badge-inat { background: #e0f2ee; color: #1b7a6a; }

  /* Overlay */
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1400;
    display: none;
  }
  .overlay.show { display: block; }

  /* ── Kurzeinführung ────────────────────────────────────────────────────
     Der Schleier IST das Loch: das Element selbst bleibt durchsichtig, ein
     sehr weiter Schlagschatten deckt alles ausserhalb ab.

     Vorher stand hier ein 3000px breiter Rahmen zusammen mit
     box-sizing:border-box - dabei rechnet der Browser die Rahmenbreite in die
     gesetzte Breite hinein. Das Loch wurde damit auf null gestaucht und sass
     3000px daneben: es gab gar keinen Ausschnitt, nur eine gleichmaessig
     dunkle Flaeche. Mit dem Schlagschatten entfaellt diese Falle, und die
     Ecken des Lochs lassen sich runden. */
  .tt-schleier {
    position: fixed;
    display: none;
    border-radius: 10px;
    box-shadow: 0 0 0 4000px rgba(18, 32, 12, 0.62),
                0 0 0 2px rgba(255, 255, 255, 0.55) inset;
    z-index: 3000;
    pointer-events: none;
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .tt-schleier.an { display: block; }
  /* Beim Nachmessen springen statt gleiten: das Aufgeklappte steht dann
     bereits, und ein Gleiten von der alten Stelle wirkt, als zeige der
     Scheinwerfer daneben. */
  .tt-schleier.tt-sofort, .tt-blase.tt-sofort { transition: none !important; }
  /* Ohne Ziel (z.B. Begruessung): kein heller Rand um das Nichts */
  .tt-schleier.ohne-ziel { box-shadow: 0 0 0 4000px rgba(18, 32, 12, 0.62); }

  .tt-blase {
    position: fixed;
    display: none;
    width: 330px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.34);
    padding: 16px 18px 14px;
    z-index: 3010;
    transition: top 0.28s ease, left 0.28s ease;
  }
  .tt-blase.an { display: block; }

  .tt-zaehler {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #7a9a6a;
    font-weight: 700;
  }
  .tt-titel { font-size: 1rem; color: #2d5a1b; margin: 3px 0 7px; }
  .tt-text { font-size: 0.86rem; line-height: 1.6; color: #3a4a33; }
  .tt-text b { color: #2d5a1b; }
  .tt-text code {
    background: #eef4e8; padding: 1px 5px; border-radius: 3px; font-size: 0.92em;
  }
  .tt-text ul { margin: 6px 0 0 18px; }
  .tt-text li { margin-bottom: 3px; }

  .tt-punkte { display: flex; gap: 5px; margin: 12px 0 10px; flex-wrap: wrap; }
  .tt-punkt { width: 7px; height: 7px; border-radius: 50%; background: #d4e2c8; }
  .tt-punkt.jetzt { background: #2d5a1b; transform: scale(1.25); }
  .tt-punkt.erledigt { background: #8ab27a; }

  .tt-knoepfe {
    display: flex;
    align-items: center;
    gap: 7px;
    position: sticky;      /* bleibt sichtbar, wenn der Text scrollen muss */
    bottom: 0;
    background: #fff;
    padding-top: 4px;
  }
  .tt-luecke { flex: 1; }
  .tt-knoepfe button {
    padding: 7px 14px;
    font-size: 0.82rem;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .tt-weiter { background: #2d5a1b; color: #fff; font-weight: 600; }
  .tt-weiter:hover { background: #3a6f24; }
  .tt-zurueck { background: #fff; color: #4a6a3a; border-color: #c4d8b4 !important; }
  .tt-zurueck:hover { background: #eef4e8; }
  .tt-zurueck[disabled] { opacity: 0.4; cursor: default; }
  .tt-weg { background: transparent; color: #8a9a80; font-size: 0.76rem !important; padding: 7px 4px !important; }
  .tt-weg:hover { color: #c0392b; text-decoration: underline; }

  /* Das erklaerte Element soll anklickbar wirken, aber nichts ausloesen */
  body.tt-laeuft { overflow: hidden; }

  @media (max-width: 600px) {
    .tt-blase { width: calc(100vw - 24px); }
  }

  /* Crosshair mode */
  body.picking-mode #map { cursor: crosshair; }
  .picking-banner {
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: #1b4a8a;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 1200;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .picking-banner.show { display: flex; align-items: center; gap: 12px; }
  /* Abbrechen muss anklickbar sein - ESC gibt es auf dem Handy nicht,
     und der Eintrage-Modus liess sich dort sonst nicht mehr verlassen. */
  .picking-ab {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .picking-ab:hover { background: rgba(255, 255, 255, 0.3); }

  /* Schmale Geraete: ueber die ganze Breite statt mittig zentriert - sonst
     bleibt das Banner schmal und wird dadurch sehr hoch.
     Diese Regel MUSS nach der Grundregel stehen: bei gleicher Spezifitaet
     gewinnt die spaetere. Stand sie davor, blieben left:50% und top:120px. */
  @media (max-width: 600px) {
    .picking-banner {
      top: 104px;
      left: 8px;
      right: 8px;
      transform: none;
      justify-content: space-between;
      padding: 8px 12px;
      font-size: 0.8rem;
    }
  }

  /* S/W-Umschalter unten links (bei der Legende) */
  .map-toggle-bw {
    position: fixed;
    left: 12px;
    bottom: 24px;
    z-index: 800;
    background: rgba(255,255,255,0.92);
    border: 1px solid #d0ddc4;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a2e1a;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .map-toggle-bw:hover { background: #fff; }
  .map-toggle-bw.active { background: #1b4a8a; color: #fff; border-color: #1b4a8a; }

  /* Cluster-Umschalter: rechts neben dem S/W-Knopf */
  .map-toggle-cluster {
    position: fixed;
    left: 92px;
    bottom: 24px;
    z-index: 800;
    background: rgba(255,255,255,0.92);
    border: 1px solid #d0ddc4;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a2e1a;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .map-toggle-cluster:hover { background: #fff; }
  .map-toggle-cluster.active { background: #1b4a8a; color: #fff; border-color: #1b4a8a; }

  /* Legende - rechts unten, damit sie den Schaltern links unten nicht im Weg
     steht und mehr Karte frei bleibt. Etwas hoeher als der Rand, damit der
     Kartenhinweis von OpenStreetMap darunter lesbar bleibt. */
  .legend {
    position: fixed;
    bottom: 26px;
    right: 12px;
    left: auto;
    background: rgba(255,255,255,0.92);
    border: 1px solid #d0ddc4;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
    z-index: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    line-height: 1.7;
  }
  .legend-title { font-weight: 700; color: #2d5a1b; margin-bottom: 3px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; }
  .legend-row { display: flex; align-items: center; gap: 7px; }
  .legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); flex-shrink: 0; }

  /* Ausklappbare Legende: zugeklappt nur die Kopfzeile, damit am Handy
     die Karte frei bleibt. Auf breiten Schirmen startet sie offen. */
  .legend { padding: 0; overflow: hidden; }
  .legend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;              /* bequem mit dem Finger zu treffen */
    padding: 8px 12px;
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    color: #2d5a1b;
    cursor: pointer;
    text-align: left;
  }
  .legend-head:hover { background: #f0f7e8; }
  .legend-pfeil { transition: transform 0.2s; opacity: 0.7; }
  .legend.offen .legend-pfeil { transform: rotate(90deg); }
  .legend-body { display: none; padding: 0 12px 10px; max-height: 45vh; overflow-y: auto; }
  .legend.offen .legend-body { display: block; }
  .legend-art { display: flex; align-items: center; gap: 7px; }
  .legend-art svg { flex-shrink: 0; }
  .legend-art-zahl { margin-left: auto; color: #6a8a5a; font-size: 0.72rem; padding-left: 8px; }
  .legend-leer { color: #6a8a5a; font-style: italic; }
  @media (max-width: 600px) {
    .legend { max-width: calc(100vw - 24px); }
    .legend-body { max-height: 40vh; }
  }

  /* Gemeinde-Labels */
  .gemeinde-label {
    background: rgba(255,255,255,0.75);
    border: none;
    box-shadow: none;
    color: #1b4a8a;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .gemeinde-label::before { display: none; }
  .toolbar button.active {
    background: #1b4a8a !important;
    color: white !important;
    border-color: #1b4a8a !important;
  }
  .btn-inat {
    background: #1b7a6a !important;
    color: white !important;
    border-color: #1b7a6a !important;
    font-weight: 600;
  }
  .btn-inat:hover { background: #229988 !important; }
  .inat-status { font-size: 0.72rem; color: #6a8a5a; align-self: center; }

  /* Passwortregeln: standen bisher nirgends, obwohl der Server sie durchsetzt */
  .pw-regeln {
    font-size: 0.72rem;
    color: #6a8a5a;
    line-height: 1.5;
    margin-top: 4px;
    padding: 7px 9px;
    background: #f2f7ee;
    border-left: 3px solid #8ab27a;
    border-radius: 0 4px 4px 0;
  }
  .pw-regeln code { background: #e4ecdd; padding: 1px 4px; border-radius: 3px; }

  /* Mobile */
  @media (max-width: 600px) {
    /* Die Kopfzahlen bleiben sichtbar, nur ohne Beschriftung - die Farbe sagt,
       worum es geht (rot = nicht behandelt, gruen = behandelt, schwarz = entfernt).
       Vorher verschwanden sie ganz, und man wusste im Feld nicht, wie viel offen ist. */
    .stats { gap: 5px; margin-left: auto; }
    .stats .stat-label { display: none; }      /* Beschriftung weg, Punkt bleibt */
    .stats .stat { padding: 4px 9px; gap: 5px; }
    .stat-num { font-size: 0.95rem; }
    .sidebar { width: 100%; right: -100%; }
    header h1 { font-size: 1rem; }
    header .subtitle { display: none; }
    /* Kopfzeile passt in einer Reihe nicht auf ein Handy (sie ragte um rund
       60 px hinaus und die Seite liess sich seitlich schieben). Deshalb bekommen
       die Bedienelemente eine eigene zweite Reihe - so bleibt alles erreichbar. */
    header { flex-wrap: wrap; row-gap: 4px; padding: 7px 12px; }
    header > div:first-child { flex: 1 1 auto; min-width: 0; }
    header h1 { font-size: 0.95rem; }
    .user-controls { order: 3; width: 100%; margin-left: 0; justify-content: flex-end; gap: 6px; }
    .user-badge { margin-right: auto; font-size: 0.68rem; padding: 3px 7px; }
    /* Datenschutz steht auch im Fusszeilen-Link der Wissensplattform und im
       Anmeldebildschirm - auf dem Handy nimmt er hier nur Platz weg. */
    .user-controls .header-link { display: none; }
    .btn-admin, .btn-logout { padding: 5px 9px; font-size: 0.72rem; }
  }
  @media (max-width: 420px) {
    /* Ganz schmal: nur noch offen/gesamt, das ist die Zahl, die im Feld zaehlt */
    .stats .stat:nth-child(3), .stats .stat:nth-child(4) { display: none; }
  }

  /* Marker custom */
  .custom-marker {
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }

  /* Schwarz-Weiß-Karte: nur die Basiskarte wird entfärbt, Pins & Grenzen bleiben farbig */
  body.map-bw .leaflet-tile-pane { filter: grayscale(1) contrast(0.92) brightness(1.05); }

  /* Eigener Standort: blauer Punkt + Blickrichtungs-Kegel */
  .me-icon { pointer-events: none; }
  .me-rotor {
    position: absolute; left: 0; top: 0; width: 60px; height: 60px;
    transform-origin: 30px 30px; z-index: 1;
    transition: transform 0.15s linear;
  }
  .me-cone {
    position: absolute; left: 10px; top: 0; width: 40px; height: 30px;
    background: linear-gradient(to top, rgba(27,74,138,0.55) 0%, rgba(27,74,138,0) 100%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }
  .me-dot {
    position: absolute; left: 22px; top: 22px; width: 16px; height: 16px;
    background: #1b4a8a; border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.45); z-index: 2;
  }

  /* Anzahl-Marke bei zusammengeführten Funden */
  .dup-badge {
    position: absolute; top: -6px; right: -8px;
    background: #1b4a8a; color: #fff; font-size: 0.62rem; font-weight: 700;
    min-width: 15px; height: 15px; line-height: 15px; text-align: center;
    border-radius: 8px; padding: 0 3px; border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  /* Auswahl-Ring im Zusammenführen-Modus */
  .merge-ring {
    position: absolute; left: -5px; top: -5px; width: 32px; height: 32px;
    border: 3px solid #1b4a8a; border-radius: 50%; box-shadow: 0 0 6px rgba(27,74,138,0.7);
    pointer-events: none;
  }
  body.merge-mode #map { cursor: pointer; }
  /* Banner für den Zusammenführen-Modus */
  .merge-banner {
    position: fixed; top: 120px; left: 50%; transform: translateX(-50%);
    background: #1b4a8a; color: #fff; padding: 10px 16px; border-radius: 10px;
    font-size: 0.88rem; z-index: 1300; display: none; align-items: center; gap: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35); max-width: calc(100% - 24px); flex-wrap: wrap;
  }
  .merge-banner.show { display: flex; }
  .merge-banner button {
    border: none; border-radius: 6px; padding: 7px 12px; font-weight: 700; cursor: pointer;
    background: #eaf3e0; color: #2d5a1b;
  }
  .merge-banner button:disabled { opacity: 0.5; cursor: not-allowed; }
  .merge-banner button.merge-cancel { background: rgba(255,255,255,0.2); color: #fff; }

  /* Regions-Label auf der Karte (Übersicht) */
  .region-label {
    background: rgba(255,255,255,0.9); border: 1px solid #c8d2bd; color: #1a2e1a;
    font-weight: 700; font-size: 0.82rem; padding: 3px 9px; border-radius: 7px;
    white-space: nowrap; box-shadow: 0 1px 5px rgba(0,0,0,0.25);
  }
  .region-label::before { display: none; }

  /* Ortssuche */
  /* Suchfeld passt sich an: nimmt freien Platz, schrumpft wenn eng */
  .ort-search { display: flex; align-items: center; gap: 4px; flex: 1 1 150px; min-width: 110px; max-width: 260px; }
  .ort-search input {
    padding: 6px 10px; border: 1px solid #b8d4a0; border-radius: 6px; font-size: 0.85rem;
    width: 100%; color: #1a2e1a; background: #fff;
  }

  /* Generisches mittiges Fenster (Statistik / Papierkorb / Datenschutz) */
  .modal-box {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 560px; max-width: calc(100% - 32px); max-height: 86vh; overflow-y: auto;
    background: #fff; border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.32);
    z-index: 2200; display: none;
  }
  .modal-box.open { display: block; }
  .modal-body { padding: 20px; }

  /* Statistik */
  .stat-block { margin-bottom: 18px; }
  .stat-block h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: #4a6a3a; margin-bottom: 8px; }
  .stat-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 0.85rem; }
  .stat-bar-label { width: 150px; flex-shrink: 0; text-align: right; color: #33502a; }
  .stat-bar-track { flex: 1; background: #eef4e8; border-radius: 5px; height: 16px; overflow: hidden; }
  .stat-bar-fill { height: 100%; background: #2d5a1b; border-radius: 5px; }
  .stat-bar-val { width: 42px; flex-shrink: 0; font-weight: 700; color: #2d5a1b; }
  .stat-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
  .stat-card { flex: 1; min-width: 90px; background: #f0f7e8; border: 1px solid #dce8cf; border-radius: 8px; padding: 10px; text-align: center; }
  .stat-card .n { font-size: 1.5rem; font-weight: 800; }
  .stat-card .l { font-size: 0.72rem; color: #6a8a5a; }

  /* Papierkorb */
  .trash-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #eef4e8; border-radius: 8px; margin-bottom: 8px; }
  .trash-item .ti-name { font-weight: 600; font-size: 0.9rem; }
  .trash-item .ti-meta { font-size: 0.74rem; color: #6a8a5a; }
  .trash-actions button { border: 1px solid #c8dab8; background: #f8fbf5; border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 0.82rem; }
  .trash-actions button.del { border-color: #e0b4ae; color: #c0392b; }
  .trash-actions button.restore { border-color: #a9cf9a; color: #2d5a1b; }

  /* Arten-Zuweisung (Verwaltung) */
  .art-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .art-row .art-name { flex: 1; font-size: 0.88rem; }
  .art-row select { padding: 5px 8px; border: 1px solid #c8dab8; border-radius: 6px; font-size: 0.85rem; }
  .art-shape-swatch { width: 20px; height: 20px; flex-shrink: 0; }

  /* Datenschutz-Text */
  .ds-text h4 { color: #2d5a1b; margin: 14px 0 4px; font-size: 0.95rem; }
  .ds-text p { font-size: 0.86rem; line-height: 1.55; margin-bottom: 6px; color: #2a3a24; }
  .login-links { margin-top: 14px; }
  .login-links a { color: #eaf3e0; font-size: 0.75rem; text-decoration: underline; cursor: pointer; }
  .header-link { color: #eaf3e0; font-size: 0.8rem; text-decoration: underline; cursor: pointer; opacity: 0.85; }
  .header-link:hover { opacity: 1; }

  /* Datei-Auswahl im Import-Fenster */
  #import-file {
    width: 100%; padding: 9px 12px; border: 1px dashed #b8d4a0; border-radius: 6px;
    background: #f8fbf5; font-size: 0.85rem; cursor: pointer;
  }
  #import-preview table th { position: sticky; top: 0; }

  /* ── Kopf-Bereich: Nutzer/Verwaltung ── */
  .user-controls { display: flex; align-items: center; gap: 10px; margin-left: 18px; }
  .user-badge { font-size: 0.82rem; color: #eaf3e0; white-space: nowrap; }
  .btn-admin, .btn-logout {
    padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); color: #fff;
  }
  .btn-admin:hover, .btn-logout:hover { background: rgba(255,255,255,0.25); }
  /* Im Feld muss erkennbar bleiben, als wer man angemeldet ist - besonders bei
     gemeinsam genutzten Gemeindezugaengen. Statt auszublenden wird gekuerzt:
     das Symbol bleibt, der Text wird bei Platzmangel abgeschnitten. */
  @media (max-width: 700px) {
    .user-badge {
      font-size: 0.72rem;
      max-width: 34vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-controls { gap: 6px; margin-left: 8px; }
  }
  @media (max-width: 420px) {
    .user-badge { max-width: 26vw; }
  }

  /* ── Login-Seite ── */
  .login-screen {
    position: fixed; inset: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2d5a1b 0%, #4a7c2a 55%, #6b9b3f 100%);
    padding: 20px;
  }
  .login-card {
    background: #fff; border-radius: 18px; padding: 34px 30px 26px;
    width: 380px; max-width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    text-align: center; animation: loginIn 0.35s ease;
  }
  @keyframes loginIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .login-logo { font-size: 3rem; line-height: 1; }
  .login-title { font-size: 1.5rem; color: #2d5a1b; margin: 6px 0 2px; font-weight: 700; }
  .login-sub { font-size: 0.82rem; color: #6a8a5a; margin-bottom: 22px; }
  .login-form { text-align: left; }
  .login-form label { display: block; font-size: 0.75rem; font-weight: 700; color: #4a6a3a;
    text-transform: uppercase; letter-spacing: 0.5px; margin: 12px 0 5px; }
  .login-form input {
    width: 100%; padding: 12px 14px; border: 1.5px solid #c8dab8; border-radius: 9px;
    font-size: 0.95rem; background: #f8fbf5; color: #1a2e1a;
  }
  .login-form input:focus { border-color: #2d5a1b; background: #fff; }
  .login-form input:focus:not(:focus-visible) { outline: none; }
  .login-error { color: #c0392b; font-size: 0.82rem; min-height: 18px; margin-top: 8px; }
  .login-btn {
    width: 100%; padding: 13px; margin-top: 6px; border: none; border-radius: 9px;
    background: #2d5a1b; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
  }
  .login-btn:hover { background: #3d7a28; }
  .login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: #9bb389; font-size: 0.78rem; }
  .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: #dde8d0; }
  .login-guest {
    width: 100%; padding: 12px; border: 1.5px solid #c8dab8; border-radius: 9px;
    background: #fff; color: #4a6a3a; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  }
  .login-guest small { font-weight: 400; opacity: 0.75; }
  .login-guest:hover { background: #f0f7e8; }
  .login-wissen {
    display: block; margin-top: 16px; padding: 12px 14px; border-radius: 9px;
    background: #eef4e8; border: 1.5px solid #c8dab8; color: #2d5a1b;
    font-size: 0.9rem; font-weight: 600; text-decoration: none; text-align: center; line-height: 1.35;
  }
  .login-wissen:hover { background: #e2eed6; }
  .login-foot { font-size: 0.72rem; color: #9bb389; margin-top: 20px; }

  /* ── Admin-Konsole (Seitenpanel) ── */
  .admin-panel {
    position: fixed; top: 0; right: -420px; width: 420px; max-width: 100%; height: 100%;
    background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.15); z-index: 2200;
    transition: right 0.3s ease; display: flex; flex-direction: column; overflow: hidden;
  }
  .admin-panel.open { right: 0; }
  .admin-body { padding: 20px; overflow-y: auto; flex: 1; }
  .admin-new { background: #f0f7e8; border: 1px solid #c8dab8; border-radius: 10px; padding: 16px; margin-bottom: 20px; }
  .admin-new-title { font-weight: 700; color: #2d5a1b; margin-bottom: 10px; }
  .admin-new label { display: block; font-size: 0.72rem; font-weight: 700; color: #4a6a3a; text-transform: uppercase; letter-spacing: 0.5px; margin: 8px 0 4px; }
  .admin-new select, .admin-new input, .admin-new textarea {
    width: 100%; padding: 9px 12px; border: 1px solid #c8dab8; border-radius: 6px; font-size: 0.9rem; background: #fff; color: #1a2e1a;
  }
  .admin-new textarea { resize: vertical; min-height: 62px; font-family: inherit; }
  .admin-new input[type=file] { padding: 8px; border-style: dashed; background: #f8fbf5; cursor: pointer; }
  .admin-add {
    width: 100%; margin-top: 12px; padding: 11px; border: none; border-radius: 8px;
    background: #2d5a1b; color: #fff; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  }
  .admin-add:hover { background: #3d7a28; }
  .admin-list-title { font-weight: 700; color: #4a6a3a; margin-bottom: 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
  .admin-user-wrap { border: 1px solid #eef4e8; border-radius: 8px; margin-bottom: 8px; }
  .admin-user-wrap .admin-user { border: none; margin-bottom: 0; }
  .admin-user {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border: 1px solid #eef4e8; border-radius: 8px; margin-bottom: 8px;
  }
  .admin-actions { display: flex; gap: 6px; align-items: center; }
  .admin-actions button { border: 1px solid #c8dab8; background: #f8fbf5; border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 0.85rem; }
  .admin-actions button.del { border-color: #e0b4ae; color: #c0392b; }
  .admin-actions button:hover { background: #eef4e8; }
  .admin-user small { color: #6a8a5a; font-size: 0.72rem; }
  .pw-row { display: flex; gap: 6px; align-items: center; padding: 0 12px 10px; }
  .pw-row input[type=password] { flex: 1; padding: 7px 10px; border: 1px solid #c8dab8; border-radius: 6px; font-size: 0.85rem; }
  .pw-row button { border: 1px solid #c8dab8; background: #2d5a1b; color: #fff; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; }
  .pw-row button:hover { background: #3d7a28; }
  .pw-row button.pw-cancel { background: #f8fbf5; color: #4a6a3a; }
  .pw-row button.pw-cancel:hover { background: #eef4e8; }
  /* Tabs + Regionen + Gemeinde-Suche */
  .admin-tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 10px 16px 0; border-bottom: 1px solid #eef4e8; }
  .admin-tab { border: none; background: none; padding: 8px 12px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: #6a8a5a; border-bottom: 3px solid transparent; white-space: nowrap; }
  .admin-tab.active { color: #2d5a1b; border-bottom-color: #2d5a1b; }
  .admin-back { background: none; border: none; color: #1b4a8a; cursor: pointer; font-size: 0.85rem; padding: 0 0 10px; }
  #admin-gem-search { width: 100%; padding: 10px 12px; border: 1.5px solid #c8dab8; border-radius: 8px; font-size: 0.92rem; margin-bottom: 8px; }
  .admin-gem-results { max-height: 220px; overflow-y: auto; border: 1px solid #eef4e8; border-radius: 8px; margin-bottom: 14px; }
  .gem-result { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f4f8ef; font-size: 0.88rem; color: #2d5a1b; }
  .gem-result:hover { background: #f0f7e8; }
  .gem-result small { color: #b0863a; }
  .admin-gem-assigned { display: flex; flex-wrap: wrap; gap: 6px; }
  .gem-chip { background: #eef4e8; border: 1px solid #c8dab8; border-radius: 14px; padding: 4px 10px; font-size: 0.82rem; }
  .gem-chip b { color: #c0392b; cursor: pointer; margin-left: 4px; }

  /* ── Aufklappbares „Mehr"-Menue in der Werkzeugleiste ── */
  .more-wrap { position: relative; display: inline-block; }
  .more-menu {
    position: absolute; left: 0; right: auto; top: calc(100% + 8px);
    background: #fff; border: 1px solid #dde8d0; border-radius: 10px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.18); padding: 6px; z-index: 1200;
    display: none; min-width: 230px;
  }
  .more-menu.open { display: block; }
  .more-menu button {
    display: block; width: 100%; text-align: left; margin: 2px 0; border: none;
    background: none; padding: 9px 12px; border-radius: 7px; font-size: 0.88rem;
  }
  .more-menu button:hover { background: #eef4e8; }
  /* Verweis auf die Wissensplattform - sieht aus wie die Knoepfe daneben */
  .more-menu .more-link {
    display: block; width: 100%; text-align: left; margin: 2px 0;
    padding: 9px 12px; border-radius: 7px; font-size: 0.88rem;
    color: #2d5a1b; text-decoration: none;
  }
  .more-menu .more-link:hover { background: #eef4e8; }
  .more-menu .btn-inat { background: none !important; color: #1b7a6a !important; border: none !important; }
  .more-menu .btn-inat:hover { background: #e0f2ee !important; }
  .more-menu .inat-status { display: block; padding: 2px 12px 6px; font-size: 0.72rem; }
  #btn-more.active { background: #1b4a8a !important; color: #fff !important; border-color: #1b4a8a !important; }

  @media (max-width: 700px) {
    /* Die Ortssuche hatte eine feste Breite von 150px. Zusammen mit den fuenf
       Knoepfen brach die Leiste dadurch auf drei Zeilen um - 113px, die der
       Karte fehlten. Jetzt teilt sich die Suche den Rest und schrumpft mit. */
    .toolbar { gap: 6px; padding: 6px 10px; }
    .ort-search { flex: 1 1 70px; min-width: 0; transition: flex-basis 0.2s ease; }
    /* Beim Tippen aufgehen: schmal genuegt als Hinweis, zum Eingeben nicht.
       Die Leiste darf dabei kurz umbrechen - das stoert nur waehrend der
       Eingabe und ist besser als ein dauerhaft breites Feld. */
    .ort-search:focus-within { flex: 1 1 100%; }
    .ort-search input { width: 100%; min-width: 0; font-size: 0.82rem; }
    .toolbar button { padding: 9px 11px; }
  }

  @media (max-width: 700px) {
    .more-menu {
      position: fixed; left: 8px; right: 8px; top: auto; min-width: 0;
      max-height: 60vh; overflow-y: auto;
    }
  }

  /* Beschriftungen: lang auf breiten, kurz auf schmalen Bildschirmen */
  .nur-schmal { display: none; }
  @media (max-width: 700px) {
    .nur-breit { display: none; }
    .nur-schmal { display: inline; }
  }

  /* ── Sichtbarer Tastatur-Fokus (Barrierefreiheit) ──────────────────────────
     Vorher wurde der Fokusrahmen mit outline:none entfernt – wer per Tabulator
     bedient, sah dann nicht mehr, wo er sich befindet. :focus-visible zeigt den
     Rahmen nur bei Tastaturbedienung, nicht bei Mausklick. */
  :focus-visible {
    outline: 2px solid #2d5a1b;
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* Auf dunklem Grund (Kopfzeile, Banner) heller Rahmen für ausreichenden Kontrast */
  header :focus-visible,
  .merge-banner :focus-visible,
  .picking-banner :focus-visible,
  .sidebar-header :focus-visible {
    outline-color: #eaf3e0;
  }

  /* Noch zu ergänzende Pflichtangaben (Datenschutz/Impressum) deutlich hervorheben.
     Bewusst rot statt gelb: die Angaben sind rechtlich verpflichtend und dürfen
     beim Testen nicht übersehen werden. Nach dem Eintragen beides entfernen. */
  .todo-platzhalter {
    background: #fdecea;
    color: #9b2c1f;
    border: 1px dashed #c0392b;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: italic;
    font-weight: 600;
  }
  .platzhalter-warnung {
    background: #fdecea;
    color: #8a2b20;
    border: 2px solid #c0392b;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  /* Dezenter Hinweis, wenn im Hintergrund ein technischer Fehler aufgetreten ist */
  .fehler-hinweis {
    position: fixed;
    left: 12px; bottom: 12px;
    max-width: 340px;
    background: #fdf0ee;
    color: #8a2b20;
    border: 1px solid #e0b4ae;
    border-left: 4px solid #c0392b;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.78rem;
    line-height: 1.4;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 3000;
    display: none;
  }

  /* Hinweis im Bearbeitungsfenster, wenn der Fund einer fremden Region gehört.
     Vorher verschwanden Speichern und Löschen einfach - ohne Erklärung. */
  .fremde-region {
    background: #eef4f8;
    color: #1b4a8a;
    border: 1px solid #b8cfe0;
    border-left: 4px solid #1b4a8a;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-top: 8px;
  }

  /* Erklärt, was der Löschknopf im jeweiligen Fall tatsächlich tut */
  .loesch-hinweis {
    margin-top: 6px;
    font-size: 0.76rem;
    color: #6a8a5a;
    line-height: 1.45;
  }

  /* Bearbeiten-Knopf im Karten-Popup. Vorher sprang bei jedem Pin-Klick sofort
     das ganze Formular auf - das war unruhig und schwer rückgängig zu machen. */
  .popup-edit {
    display: block;
    width: 100%;
    margin-top: 10px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #2d5a1b;
    border-radius: 6px;
    background: #f0f7e8;
    color: #2d5a1b;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
  }
  .popup-edit:hover { background: #2d5a1b; color: #fff; }

  /* Fingerfreundliche Bedienung im Feld: Richtwert 44 px Höhe. Die Werkzeugleiste
     war 29-32 px hoch, was am Handy zu Fehlgriffen führt. Nur auf Touch-Geräten
     vergrößert - mit der Maus wäre es unnötig wuchtig. */
  @media (hover: none) and (pointer: coarse) {
    .toolbar button, .toolbar select,
    .filterbar button, .filterbar select, .filterbar input.filter-search,
    .more-menu button,
    .trash-actions button,
    .admin-actions button {
      min-height: 44px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .ort-search input { min-height: 44px; }
    .btn-close { min-width: 44px; min-height: 44px; }
    .radio-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .map-toggle-bw, .map-toggle-cluster { min-height: 44px; padding: 10px 14px; }
    .legend-head { min-height: 48px; }
  }

  /* ── Eigener Dialog (Ersatz für alert und confirm) ────────────────────────
     Die Systemdialoge des Browsers halten die ganze Seite an, sehen auf dem
     Handy fremd aus und lassen keine Gestaltung zu. */
  .dialog-box {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: 420px; max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.32);
    z-index: 7000;
    display: none;
    opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
  }
  .dialog-box.open { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  @media (prefers-reduced-motion: reduce) {
    .dialog-box { transition: none; }
  }

  .dialog-kopf {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px 0;
  }
  .dialog-kopf h2 { font-size: 1.05rem; color: #1a2e1a; margin: 0; }
  .dialog-symbol {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 700; font-size: 0.95rem;
    background: #e6f0dc; color: #2d5a1b;
  }
  .dialog-box.frage    .dialog-symbol { background: #eef4f8; color: #1b4a8a; }
  .dialog-box.warnung  .dialog-symbol { background: #fdecea; color: #a8342a; }
  .dialog-box.erfolg   .dialog-symbol { background: #e6f0dc; color: #2d5a1b; }

  .dialog-text {
    padding: 12px 22px 4px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #33452f;
    white-space: pre-wrap;      /* Zeilenumbrüche aus den Meldungen erhalten */
    max-height: 55vh;
    overflow-y: auto;
    overflow-wrap: break-word;
  }

  .dialog-knoepfe {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 22px 20px;
  }
  .dialog-knoepfe button {
    min-height: 40px;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
  }
  .dialog-ok { background: #2d5a1b; color: #fff; }
  .dialog-ok:hover { background: #3d7a28; }
  .dialog-box.warnung .dialog-ok { background: #a8342a; }
  .dialog-box.warnung .dialog-ok:hover { background: #c0392b; }
  .dialog-abbruch { background: #fff; color: #4a6a3a; border-color: #c8dab8; }
  .dialog-abbruch:hover { background: #f0f7e8; }

  @media (hover: none) and (pointer: coarse) {
    .dialog-knoepfe button { min-height: 44px; flex: 1; }
  }

  /* Bericht über übersprungene Import-Zeilen herunterladen */
  .btn-bericht {
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px solid #d9b48a;
    border-radius: 6px;
    background: #fff;
    color: #8a5a1b;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
  }
  .btn-bericht:hover { background: #fdf4e8; }
  @media (hover: none) and (pointer: coarse) { .btn-bericht { min-height: 44px; } }

  /* Hinweis oben im Datenquellen-Reiter */
  .quelle-erklaerung {
    background: #eef4f8;
    border: 1px solid #b8cfe0;
    border-left: 4px solid #1b4a8a;
    border-radius: 0 8px 8px 0;
    padding: 11px 14px;
    margin-bottom: 12px;
    font-size: 0.83rem;
    line-height: 1.55;
    color: #1b4a8a;
  }

  /* ── Mehrfachauswahl ──────────────────────────────────────────────────────
     Gleiches Muster wie das Zusammenführen, andere Farbe, damit die beiden
     Modi nicht verwechselt werden. */
  body.mehrfach-modus #map { cursor: pointer; }
  .mehrfach-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #5a3d8a;
    color: #fff;
    padding: 10px 16px;
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 2500;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    font-size: 0.86rem;
  }
  .mehrfach-banner.show { display: flex; }
  .mehrfach-text { margin-right: auto; }
  .mehrfach-banner button {
    background: #fff;
    color: #5a3d8a;
    border: none;
    border-radius: 6px;
    padding: 7px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
  }
  .mehrfach-banner button:disabled { opacity: 0.5; cursor: not-allowed; }
  .mehrfach-banner button.mehrfach-abbruch { background: rgba(255,255,255,0.2); color: #fff; }
  .mehrfach-ring {
    position: absolute;
    left: -6px; top: -6px;
    width: 34px; height: 34px;
    border: 3px solid #5a3d8a;
    border-radius: 50%;
    background: rgba(90,61,138,0.18);
    pointer-events: none;
  }
  .mf-warnung {
    background: #fdecea;
    color: #8a2b20;
    border: 1px solid #e0b4ae;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  @media (hover: none) and (pointer: coarse) {
    .mehrfach-banner button { min-height: 44px; }
  }

  /* Art in einer Region, die (noch) nicht im Wissenskatalog steht */
  .art-fremd {
    display: inline-block;
    background: #fff3cd;
    color: #7a5b00;
    border: 1px solid #e0cc7a;
    border-radius: 4px;
    padding: 0 6px;
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
  }

  /* ── Testumgebung ─────────────────────────────────────────────────────────
     Unuebersehbar, damit niemand die Kopie fuer das Livesystem haelt. */
  .test-banner {
    background: repeating-linear-gradient(135deg, #8a5a1b, #8a5a1b 14px, #a06a22 14px, #a06a22 28px);
    color: #fff;
    padding: 9px 16px;
    font-size: 0.84rem;
    line-height: 1.45;
    text-align: center;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    position: relative;
    z-index: 1500;
  }
  /* Kopfzeile bekommt in der Testkopie eine andere Farbe - auf einen Blick erkennbar */
  body.testumgebung header { background: #8a5a1b; }
  body.testumgebung .btn-primary { background: #8a5a1b !important; border-color: #8a5a1b !important; }
  body.testumgebung .btn-primary:hover { background: #a06a22 !important; }

  /* Ankreuzliste der Arten je Region */
  .art-wahl {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border: 1px solid #eef4e8; border-radius: 8px;
    margin-bottom: 6px; cursor: pointer; background: #fff;
  }
  .art-wahl:hover { background: #f8fbf5; }
  .art-wahl.gewaehlt { background: #f0f7e8; border-color: #c8dab8; }
  .art-wahl input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
  .art-wahl .art-form { flex-shrink: 0; display: flex; }
  .art-wahl .art-text { flex: 1; font-size: 0.88rem; }
  .art-wahl .art-text small { color: #8aa07a; font-style: italic; }
  @media (hover: none) and (pointer: coarse) { .art-wahl { min-height: 44px; } }

  /* Trefferliste der iNaturalist-Suche im Katalogformular */
  .taxon-treffer {
    background: #fff; border: 1px solid #c8dab8; border-radius: 6px;
    padding: 7px 10px; margin-top: 5px; cursor: pointer; font-size: 0.82rem; color: #1a2e1a;
  }
  .taxon-treffer:hover { background: #f0f7e8; border-color: #2d5a1b; }
  .taxon-treffer small { color: #8aa07a; margin-left: 6px; }
  @media (hover: none) and (pointer: coarse) { .taxon-treffer { min-height: 44px; } }