/* ==== Style Sportstätten-Karte — angelehnt an LSB Sachsen (sport-fuer-sachsen.de) ==== */

/* Schriften wie sport-fuer-sachsen.de: Roboto (Text) + Roboto Condensed (Überschriften).
   Selbst gehostet (static/assets/fonts, OFL) statt Google Fonts: keine Übermittlung der
   Besucher-IP an Google (DSGVO), und die CSP erlaubt ohnehin nur font-src 'self'.
   Variable Schriften (eine Datei je Teilmenge deckt alle Stärken ab); latin-ext für
   sorbische Ortsnamen wie „Budyšin“. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("/assets/fonts/roboto-condensed-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url("/assets/fonts/roboto-condensed-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --accent: #82bb25;       /* LSB Markengrün */
  --accent-dark: #64901d;  /* LSB Grün dunkel */
  --accent-light: #c7e990;
  --red: #c62828;          /* Rot (neutral, Farbton ~0°; vorher Himbeerrot #c81e4d) */
  --teal: #1496a4;         /* LSB Türkis */
  --orange: #f9b031;       /* LSB Orange */
  --panel-bg: #ffffff;
  --bg: #f4f4f4;           /* LSB Creme */
  --text: #343434;         /* LSB Grau Haupt */
  --muted: #605f5f;        /* LSB Grau (Sekundärtext) — #807f7f erreichte auf Weiß nur 3,9:1 */
  --border: #e2e1e1;
  --focus-ring: var(--accent-dark); /* Fokus-Rahmen (Tastatur) — im HC-Modus schwarz */
  --accent-hover: #a3d158; /* Hover auf grünen Flächen: helleres LSB-Grün (steht so im LSB-CSS), dunkler Text 7,0:1 */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Roboto Condensed", "Roboto", system-ui, sans-serif;

  /* ---- Semantische Flächen/Farben ----
   * Alle Regeln darunter benutzen diese Variablen, damit `html.dark` nur die
   * Variablen tauschen muss (gleiches Prinzip wie html.hc). Werte ohne eigene
   * Variable = helle Basis (unverändertes Erscheinungsbild). */
  --surface: #ffffff;                  /* Karten, Listen, Eingaben */
  --surface-2: #f5f5f5;                /* dezente Flächen */
  --bg-soft: #f5f5f5;                  /* weiche Fläche (Buttons, Hover) */
  --bg2: #f4f6f8;                      /* Footer */
  --hover: #f3f4f6;                    /* Hover neutral */
  --card: #ffffff;                     /* Detail-Boxen */
  --header-bg: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  --header-glass: rgba(255,255,255,.92);   /* Mobile: Header über der Karte */
  --footer-glass: rgba(255,255,255,.9);    /* Mobile: Footer über der Karte */
  --attribution-bg: rgba(255,255,255,.82);
  --marker-bg: #ffffff;                /* Marker-Kreis */
  --marker-ico: #343434;               /* Piktogramm in Marker/Kachel (Kreis bleibt auch dunkel hell) */
  --accent-soft: #eef6e1;              /* zarte grüne Fläche (Chips, Piktogramm-Kacheln) */
  --on-accent: #343434;                /* Text auf grüner/oranger Markenfläche: LSB-Grau, ca. 5,5:1 auf #82bb25
                                          (Weiß käme nur auf 2,3:1). Hoher Kontrast: Weiß auf dunklem Grün. */
  --accent-text: #4e7c10;              /* Markengrün als TEXT: 5,0:1 auf Weiß (das frühere #64901d nur 3,8:1) */
  --red-text: var(--red);              /* LSB-Rot als TEXT */
  --danger-soft: #fde8e8;              /* destruktive Hover-Fläche */
  --scrim: rgba(40,40,40,.45);         /* Overlay-Hintergrund */
  --scroll-thumb: rgba(0,0,0,.25);
  --warn-bg: #fff3d6;                  /* „ungeprüft"-Badge */
  --warn-border: #f0d9a8;
  --warn-text: #7a4d00;
  --map-bg: #e9e6e1;                   /* Kartenfläche (hinter den Kacheln) */
  color-scheme: light;                 /* native Controls/Hilfsmittel hell */
}

/* ==== Hoher-Kontrast-Modus (Footer-Toggle) ====
 * Markenfarben bleiben im Normalmodus; html.hc tauscht nur die Variablen,
 * alle var()-Regeln ziehen automatisch mit. Alle Werte WCAG-AA ≥ 4.5:1
 * (Weiß auf Button-Flächen bzw. Text auf Weiß): accent 4.98, accent-dark 7.24,
 * orange 5.38, muted 7.00, text 17.4, red 5.60 unverändert.
 */
html.hc {
  --accent: #4e7c10;
  --accent-dark: #3b6109;
  --accent-light: #d8eeb8;      /* heller für HC (Flächen bleiben gut unterscheidbar) */
  --orange: #9a5c00;
  --muted: #595959;
  --text: #1a1a1a;
  --border: #8a8a8a;
  --bg: #ffffff;
  --panel-bg: #ffffff;
  --focus-ring: #000000;
  --on-accent: #ffffff;         /* Weiß auf dem dunklen HC-Grün #4e7c10: 4,98:1 */
  --marker-ico: #1a1a1a;
  --accent-soft: #e1edcc;
  --accent-text: #3b6109;       /* 7,2:1 */
  --accent-hover: #3b6109;
}
/* Footer deckend weiß (auch über der Karte), statt halbtransparent */
html.hc .site-footer { background: #ffffff; }

/* ============================================================
 * Hoher-Kontrast-Modus: Karte
 * ============================================================
 * Die Raster-Kacheln kommen als Bilder vom Tile-Server (kein „HC-Stil"
 * verfügbar) — sie werden per CSS-Filter kontrastreicher und satter:
 * Straßen, Gewässer, Flächen und Beschriftung trennen sich deutlicher.
 */
html.hc .leaflet-tile-pane {
  /* NUR Kontrast — keine Sättigung: Farbstiche (v. a. das OSM-Gelb der
     Landflächen) sollen nicht verstärkt werden, nur die Trennung von
     Flächen/Linien/Beschriftung. 1.25: Lesbarkeitsgewinn bei den Labels,
     ohne dass die orangen Hauptstraßen (weiße Schrift) zu stark abdunkeln. */
  filter: contrast(1.25);
}
/* Marker im HC: schmaler schwarzer Außenring (weißer Rand bleibt) —
   hebt die farbigen Punkte klar vom dichteren Kartenhintergrund ab. */
html.hc .smarker {
  box-shadow: 0 0 0 1.5px #000, 0 1px 4px rgba(0,0,0,.6);
  border-color: #fff;
}

/* ============================================================
 * Dunkelmodus (Footer-Toggle „Dunkelmodus", Klasse `dark` auf <html>)
 * ============================================================
 * Gleiches Prinzip wie html.hc: nur Variablen werden getauscht, alle
 * var()-Regeln ziehen automatisch mit. Marken-Grün/Rot bleiben als
 * Flächenfarbe erkennbar; für TEXT auf dunklem Grund gibt es die
 * helleren Varianten --accent-text / --red-text (sonst wären
 * #64901d bzw. #c62828 auf dunklem Grund unlesbar).
 * Kontraste auf --surface #23272b (per QA-Test berechnet):
 * text 13,3:1 · muted 6,8:1 · accent-text 9,1:1 · red-text 5,5:1 ·
 * on-accent auf --accent 8,8:1 · Footer-Link 8,4:1.
 */
html.dark {
  color-scheme: dark;                 /* native Controls/Dropdowns dunkel */
  --accent: #8bc93a;                  /* Markengrün, etwas aufgehellt */
  --accent-dark: #4e7c10;             /* bleibt FLÄCHENfarbe (Button-Hover) */
  --accent-light: #2f4416;            /* gedämpfte grüne Fläche (Hover) */
  --accent-text: #a8d968;             /* Markengrün als TEXT */
  --red: #c62828;                     /* bleibt FLÄCHENfarbe */
  --red-text: #ff7b72;                /* Rot als TEXT */
  --bg: #16181a;
  --bg2: #1b1e21;
  --bg-soft: #2a2e33;
  --panel-bg: #1e2124;
  --surface: #23272b;
  --surface-2: #2a2e33;
  --card: #23272b;
  --hover: #2b3036;
  --text: #e9e9e9;
  --muted: #a8a8a8;
  --border: #3a3f45;
  --focus-ring: #a8d968;
  --header-bg: linear-gradient(180deg, #23272b 0%, #1e2124 100%);
  --header-glass: rgba(30,33,36,.92);
  --footer-glass: rgba(27,30,33,.9);
  --attribution-bg: rgba(30,33,36,.85);
  --marker-bg: #f7f7f7;
  --on-accent: #101c05;               /* dunkler Text auf grüner Markenfläche */
  --accent-hover: #9fd456;
  --accent-soft: #2f4416;
  --danger-soft: #3a1d26;
  --scrim: rgba(0,0,0,.68);
  --scroll-thumb: rgba(255,255,255,.26);
  --warn-bg: #3a2c12;
  --warn-border: #7a5f22;
  --warn-text: #ffcf7a;
  --map-bg: #1b1e21;
}

/* ============================================================
 * Dunkelmodus: Karte
 * ============================================================
 * Die Raster-Kacheln kommen als Bilder vom Tile-Server (Esri/OSM/OpenTopoMap
 * haben keine Dunkel-Variante im key-freien Angebot) — sie werden daher
 * invertiert und der Farbton um 180° gedreht: aus hell wird dunkel, Grün
 * bleibt grün, Beschriftungen werden hell. Nur die Kachelebene, nicht die
 * Marker (die liegen im marker-pane).
 * Die Helligkeit-/Kontrast-Anhebung ist bewusst > 1: ohne sie verschwimmen
 * die Straßennamen (in fünf Varianten im Browser gegenübergestellt und per
 * Sichtprüfung bewertet — invert allein 7,5/10, mit 1.06/1.06 8,5/10;
 * Sättigung zu senken machte die Nebenstraßen schlechter lesbar).
 */
html.dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(1.06) contrast(1.06);
}
/* Veränderungshinweis im Kartenkredit (Pflicht laut basemap.de-Nutzungsbedingungen, sobald die
   Karte verändert dargestellt wird): genau dann sichtbar, wenn ein Kachel-Filter greift —
   Dunkel- (oben) und Kontrastmodus (html.hc .leaflet-tile-pane). */
.attr-mod { display: none; }
html.dark .attr-mod, html.hc .attr-mod { display: inline; }
/* Marker im Dunkelmodus: weiße Kreise bleiben, Ring/Schatten anpassen */
html.dark .smarker {
  background: var(--marker-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.7);
}
/* Kartenfläche hinter den Kacheln (verhindert helles Aufblitzen beim Laden) */
html.dark .leaflet-container { background: var(--map-bg); }
html.dark .leaflet-container a { color: var(--accent-text); }
/* Leaflet-Eigenelemente (leaflet.css ist hell und wird hier überschrieben) */
html.dark .leaflet-bar a,
html.dark .leaflet-touch .leaflet-bar a {
  background: var(--surface);
  color: var(--text);
  border-bottom-color: var(--border);
}
html.dark .leaflet-bar a:hover,
html.dark .leaflet-bar a:focus { background: var(--hover); color: var(--text); }
html.dark .leaflet-bar a.leaflet-disabled { background: var(--surface-2); color: var(--muted); }
html.dark .leaflet-control-layers {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
html.dark .leaflet-control-layers-separator { border-top-color: var(--border); }
html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 3px 14px rgba(0,0,0,.5);
}
html.dark .leaflet-popup-close-button { color: var(--muted); }
html.dark .leaflet-popup-close-button:hover { color: var(--text); }
html.dark .leaflet-control-attribution {
  background: var(--attribution-bg);
  color: var(--muted);
}
html.dark .leaflet-control-attribution a { color: var(--accent-text); }

/* ============================================================
 * Hoher Kontrast + Dunkelmodus gleichzeitig
 * ============================================================
 * HC stellt auf maximale Kontraste auf heller Basis um; in Kombination mit
 * dem Dunkelmodus soll es „dunkel + maximaler Kontrast" heißen. Source order:
 * diese Regeln stehen nach beiden Blöcken und gewinnen daher.
 */
html.hc.dark {
  --accent: #9ede4f;
  --accent-dark: #4e7c10;
  --accent-text: #c3ef8e;
  --orange: #ffc266;
  --muted: #d0d0d0;
  --text: #ffffff;
  --border: #767c83;
  --bg: #101214;
  --bg2: #14171a;
  --panel-bg: #16191c;
  --surface: #1b1f23;
  --surface-2: #22262b;
  --card: #1b1f23;
  --bg-soft: #22262b;
  --hover: #262b31;
  --focus-ring: #ffffff;
}
html.hc.dark .site-footer { background: var(--bg2); }
/* Karte: HC-Kontrast und Dunkel-Invertierung sind BEIDE ein Filter auf
   .leaflet-tile-pane — bei gleicher Spezifität gewinnt sonst die spätere Regel.
   Deshalb hier die Kombination in einer Deklaration (1.06 × 1.25 ≈ 1.32). */
html.hc.dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(1.06) contrast(1.32);
}
/* Marker: im Dunkelmodus ist ein SCHWARZER Außenring wertlos → weiß */
html.hc.dark .smarker {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #000, 0 1px 4px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

/* ==== Barrierefreiheit: Skip-Link + sichtbarer Tastatur-Fokus ==== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
}
.skip-link:focus-visible {
  left: 12px;
  top: 12px;
  background: var(--accent-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  text-decoration: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.leaflet-container:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
}

body { display: flex; flex-direction: column; }
h1, h2, h3 { font-family: var(--font-display); }

header {
  padding: 12px 20px;
  background: var(--header-bg);
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: background .25s ease, border-color .25s ease;
}
/* Angemeldet: Banner in der Farbe der Rolle (Farbschema, siehe ganz unten: Gast/Verwalter grün, Moderator orange,
   Admin rot). Die Knöpfe folgen über --accent/--on-accent von selbst. */
body.admin header {
  border-bottom-color: var(--accent);
  background: var(--header-bg-role, var(--header-bg));
}
body.admin header .badge { background: var(--accent); color: var(--on-accent); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 44px; height: 44px; flex-shrink: 0; display: block; }
.brand-text { min-width: 0; }
.header-left h1 { margin: 0; font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: .005em; }
.header-left .sub { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
.hdr-btn .pic { width: 18px; height: 18px; margin-right: 6px; stroke-width: 2.2; }
.header-right { display: flex; align-items: center; gap: 8px; }

.hdr-btn {
  padding: 8px 14px;
  min-height: 35px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hdr-btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.hdr-btn.ghost:hover { border-color: var(--accent); color: var(--accent-text); }
/* Login-Button: LSB-grüne Umrandung (optisch gleiche Höhe wie "Hinzufügen") */
#login-btn { border-color: var(--accent); color: var(--accent-text); }
#login-btn:hover { border-color: var(--accent-dark); color: var(--accent-text); }
/* "Neue Einträge": nur für Admins sichtbar */
.pending-only { display: none; }
body.admin .pending-only { display: inline-flex; }
/* Nutzerverwaltung: nur über JS-online (Rolle admin) sichtbar, nie default */
.admin-only { display: none; }
.hdr-btn:not(.ghost) {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.hdr-btn:not(.ghost):hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.badge {
  font-size: 11px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 2px 8px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Rolle / Toggle */
.role-toggle { display: flex; align-items: center; gap: 8px; }
.role-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.role-label.admin-col { color: var(--muted); }
.role-toggle.admin .role-label { color: var(--accent-text); }
.role-toggle.admin .role-label.admin-col { color: var(--accent-text); }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border); border-radius: 24px;
  transition: .2s;
}
.slider:before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(20px); }
.role-toggle.has-admin-badge { padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.pending-badge {
  background: var(--orange); color: var(--on-accent); border-radius: 10px;
  font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 6px;
}

main { display: flex; flex: 1; min-height: 0; }

#map { flex: 1; }

#panel {
  width: 300px;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
}
#panel h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 10px;
  padding: 0;
}
/* Umschalt-Knopf fürs Panel — nur auf Mobile sichtbar (Bottom-Sheet) */
.panel-toggle { display: none; }
/* Filter-Umschalter — nur auf Mobile sichtbar (Desktop: Filter immer offen) */
.filter-toggle { display: none; }
#panel label, .radius-label { font-size: 12px; color: var(--muted); }

input[type=range] { width: 100%; margin: 6px 0 2px; accent-color: var(--accent); }
.radius-label { margin-bottom: 12px; font-weight: 600; }

#sport-filter {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: 500 13.5px var(--font-sans);
  margin: 4px 0 10px;
  box-sizing: border-box;
}
#sport-filter:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }

button {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
}
button:hover { background: var(--hover); }

#results { list-style: none; margin: 4px 0 0; padding: 0; }
#load-more {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  min-height: 40px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
#load-more:hover { background: var(--hover); color: var(--text); }
#results li {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  margin-bottom: 4px;
  font-size: 13px;
  background: var(--surface);
}
#results li.hint { color: var(--muted); border-style: dashed; }
/* Treffer als Karte: [Piktogramm] [Name / Typ · Sportarten] [Entfernung / Details] */
#results li.result-item {
  display: flex; align-items: center; gap: 12px;
  border-color: transparent;
  cursor: pointer; transition: background .15s ease;
}
#results li.result-item:hover { background: var(--accent-soft); }
.res-tile {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--text);
}
.res-tile .pic { width: 22px; height: 22px; }
.res-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.res-main strong {
  font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-main .badge-unreviewed { align-self: flex-start; margin: 2px 0 0; }
#results li .type {
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#results li .dist { color: var(--text); font-weight: 700; font-size: 13px; }

/* Sortierzeile über der Ergebnisliste (erscheint nur, wenn es Treffer gibt) */
.result-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.result-tools label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.result-tools select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
}
.result-tools select:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }

/* Textsuche im Panel (nutzt die vorhandenen Theme-Variablen → Dunkelmodus inklusive) */
.text-search { margin: 0 0 12px; }
.text-search-row { position: relative; display: flex; align-items: center; }
.text-search-row input[type=search] {
  width: 100%;
  min-height: 48px;
  padding: 0 40px 0 44px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}
.text-search-row input[type=search]:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
/* eigenes Löschen-Kreuz statt des nativen (sieht überall gleich aus) */
.text-search-row input[type=search]::-webkit-search-cancel-button { display: none; }
.text-search-ico {
  position: absolute; left: 15px;
  width: 20px; height: 20px; color: var(--muted);
  pointer-events: none;
}
.text-search-clear {
  position: absolute; right: 8px;
  width: 32px; height: 32px; min-height: 0;
  padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 12px; line-height: 1; cursor: pointer;
}
.text-search-clear:hover { background: var(--hover); color: var(--red-text); }
.text-search-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Umkreis: feste Stufen als Segmentleiste (Radiogruppe, gewählte Stufe in LSB-Grün) */
.radius-head { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 8px; }
.radius-title { font-size: 13px; font-weight: 700; color: var(--text); }
.radius-head .radius-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.radius-steps {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  border-radius: 12px; background: var(--surface-2);
}
.radius-steps button {
  flex: 1 1 0; width: auto; min-height: 38px; padding: 0;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--muted); font: 600 13px var(--font-sans); cursor: pointer;
}
.radius-steps button:hover { background: var(--hover); color: var(--text); }
.radius-steps button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
/* Filter-Chips: zwei beschriftete Gruppen nebeneinander (Barrierefrei | Lage), je zwei
   gleich breite Umschalter — eine Zeile, kein Umbruch, kein Springen beim Aktivieren
   (Zustand über Fläche + Rahmen, feste Breiten statt Häkchen-Text). */
.filter-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 2px 0 10px; }
.chip-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.chip-group-title { font-size: 12px; font-weight: 700; color: var(--muted); }
.chip-row { display: flex; gap: 6px; }
.filter-chips .chip {
  flex: 1 1 0; min-width: 0; width: auto; min-height: 36px; padding: 0 6px;
  border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: 600 13px var(--font-sans); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filter-chips .chip:hover { border-color: var(--accent); background: var(--surface); }
.filter-chips .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
html.hc .filter-chips .chip[aria-pressed="true"] { border-width: 2.5px; }
/* „Umkreis und Filter zurücksetzen“: sichtbarer Sekundärknopf (Rahmen, Symbol, 40 px) — der
   reine Textlink wurde übersehen. Bewusst nicht grün: die Hauptaktion bleibt die Suche. */
#clear {
  display: inline-flex; align-items: center; gap: 8px;
  width: auto; min-height: 40px; margin: 2px 0 6px; padding: 0 16px 0 12px;
  border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font: 700 13.5px var(--font-sans); cursor: pointer;
}
#clear .pic { width: 17px; height: 17px; stroke-width: 2.2; }
#clear:hover { background: var(--hover); border-color: var(--accent); color: var(--text); }
/* Zeile unter den Filtern: „zurücksetzen“ links, Schalter „Bündeln“ rechts daneben */
.panel-actions { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 2px 0 6px; }
.panel-actions #clear { margin: 0; }
.cluster-toggle { min-height: 40px; color: var(--text); font: 600 13.5px var(--font-sans); }

/* Neue Einträge (pending)-Overlay */
.pending-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.pending-item {
  border: 1px solid var(--border); border-left: 3px solid var(--orange, #f5a623);
  border-radius: 6px; padding: 10px 12px; background: var(--surface);
}
.pending-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.pending-type { font-size: 12px; color: var(--accent-text); margin-top: 2px; }
.pending-addr { font-size: 12px; color: var(--muted); margin-top: 1px; }
.pending-note { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 4px; }
/* Historie: zuletzt übernommene Einträge (ausgegraut, aber anklickbar) */
.recent-title {
  margin: 14px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.recent-list { margin-top: 2px; }
.recent-item {
  border-left-color: var(--accent, #82bb25);
  opacity: .62;
  cursor: pointer;
  transition: opacity .15s ease;
}
.recent-item:hover { opacity: 1; background: var(--accent-light); }
.pbtn {
  margin-top: 8px; margin-right: 6px; width: auto; padding: 5px 12px;
  font-size: 12px; border-radius: 5px; cursor: pointer; border: 1px solid var(--border); background: var(--surface);
}
.pbtn:hover { background: var(--hover); }
.pbtn-ok { border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.pbtn-ok:hover { background: var(--accent-light); }
.pbtn-bad { border-color: var(--red); color: var(--red-text); font-weight: 600; }
.pbtn-bad:hover { background: var(--red); color: #fff; }
.pbtn-edit { color: var(--text); }
.pending-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* Nutzerverwaltung */
.users-add {
  display: grid; grid-template-columns: 1fr 1fr 90px auto; gap: 8px;
  align-items: end; margin-bottom: 6px;
}
.users-add input, .users-add select {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; font-size: 12.5px;
  box-sizing: border-box; font-family: inherit; width: 100%;
}
.users-add button {
  width: auto; padding: 7px 14px; border: none; border-radius: 5px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: pointer;
}
.users-add button:hover { background: var(--accent-hover); }
/* Abbrechen-Button in der Bearbeiten-Zeile (neutral statt Akzentfarbe) */
.users-add button.pbtn-plain {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.users-add button.pbtn-plain:hover { background: var(--hover); }
.role-badge {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 10px; vertical-align: middle; margin-left: 4px; color: #fff;
}
/* Abzeichen in der Farbe der Rolle (Schema aus der Rollenliste des Servers) */
.role-badge.rb-green { background: #82bb25; color: #343434; }
.role-badge.rb-orange { background: #f9b031; color: #343434; }
.role-badge.rb-red { background: #c62828; color: #fff; }

/* Feld-Sichtbarkeit (Admin-Panel) */
.vis-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 12px; line-height: 1.5; }

/* Opt-in „Benachrichtigung bei Freigabe/Ablehnung" (Meine Einreichungen) */
.notify-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 0 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--accent-light, #f2f9e6);
  cursor: pointer; user-select: none;
}
.notify-row input[type=checkbox] { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.notify-row-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text); }
.notify-row-text small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.vis-list { display: flex; flex-direction: column; gap: 4px; max-height: 55vh; overflow-y: auto; }
.vis-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.vis-row:hover { background: var(--accent-light); }
.vis-label { font-size: 13px; color: var(--text); }
.vis-row select { width: 130px; padding: 4px 6px; border-radius: 5px; border: 1px solid var(--border); }
.vis-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.vis-actions button { width: auto; padding: 8px 20px; }
@media (max-width: 560px) { .users-add { grid-template-columns: 1fr; } }

/* Login-Overlay */
.login-box { width: 360px; }
.login-box label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 3px; }
.login-box input[type=text], .login-box input[type=password] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px;
  font-size: 13px; box-sizing: border-box; font-family: inherit;
}
.login-box input:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
.login-box #login-submit {
  margin-top: 16px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}
.login-box #login-submit:hover { background: var(--accent-hover); }

/* Toast-Meldung (oben mittig) */
.toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -80%);
  background: var(--accent-dark);
  color: #fff;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  transition: transform .25s ease, opacity .25s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Hinzufügen-Formular */
#add-form { margin-top: 4px; }
#add-form label { display: block; margin: 8px 0 3px; }
#add-form input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
}
#add-form input:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
/* Auswahlfelder (Barrierefreiheit, Lage) wie die Textfelder — Formulare folgen in Schritt 4 */
#f-access, #f-setting {
  width: 100%; padding: 7px 9px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: 13px var(--font-sans);
}
#f-access:focus, #f-setting:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
#add-form button[type=submit] {
  margin-top: 12px;
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
#add-form button[type=submit]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.msg { margin-top: 8px; font-size: 12.5px; min-height: 16px; }
.msg.ok { color: var(--accent-text); }
.msg.err { color: var(--red-text); }

/* Adresssuche + Pin */
.loc-row { display: flex; gap: 6px; margin-top: 4px; }
.loc-row input { flex: 1; }
.loc-row button {
  width: auto;
  padding: 7px 12px;
  white-space: nowrap;
  background: var(--surface-2);
}
.addr-results { margin-top: 6px; }
.addr-item {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 12.5px;
  cursor: pointer;
  background: var(--surface);
}
.addr-item:hover { background: var(--accent-light); border-color: var(--accent); }
.addr-loading, .addr-none { font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.loc-hint { font-size: 11.5px; color: var(--muted); margin: 6px 0 4px; }
.pin-info {
  font-size: 12px;
  padding: 6px 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  margin-bottom: 4px;
}
.pin-info.set { border-style: solid; border-color: var(--accent); color: var(--text); background: var(--accent-light); }
/* Position aus dem Umkreis-Pin + „Adresse in der Nähe“ */
.pin-box { margin: 4px 0 8px; }
.pin-box .pin-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pin-drop {
  width: auto; padding: 2px 8px; font-size: 12px;
  background: transparent; color: var(--accent-text); border-color: transparent; text-decoration: underline;
}
.pin-sub { font-size: 12px; font-weight: 600; margin: 8px 0 2px; }
button.addr-item { display: flex; width: 100%; justify-content: space-between; gap: 8px; text-align: left; color: var(--text); }
.addr-item .addr-dist { color: var(--muted); white-space: nowrap; }
.addr-item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-light); font-weight: 600; }
.addpin { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* Piktogramme (Sprite in index.html): Linien-Ikonen, Farbe = currentColor */
.pic {
  width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Leaflet-Marker (Redesign 2026): weißer Kreis mit Piktogramm, Ring in LSB-Grün — auf
   allen Kartenebenen gut sichtbar (vorher nur auf basemap.de verstärkt). Im Umkreis
   dickerer Ring; ungeprüft/abgelehnt (nur Redaktion) orange/rot. Der gewählte Marker
   (Vorschau offen) ist größer und grün gefüllt. */
.smarker {
  width: 34px; height: 34px; box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--marker-bg);
  color: var(--marker-ico);
  box-shadow: 0 3px 10px rgba(52,52,52,.28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.smarker .pic { width: 18px; height: 18px; }
.smarker.in { border-width: 3px; }
/* wartend gestrichelt, abgelehnt gepunktet: im orangen/roten Rollenschema sind die normalen Ringe selbst orange/rot */
.smarker.pending { border-color: var(--orange); border-style: dashed; }
.smarker.rejected { border-color: var(--red); border-style: dotted; }
.smarker.sel {
  transform: scale(1.3);
  background: var(--accent); color: var(--on-accent);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 6px 16px rgba(52,52,52,.35);
}
html.hc .smarker.sel { box-shadow: 0 0 0 1.5px #000, 0 6px 16px rgba(0,0,0,.4); }
/* Die Modus-Regeln oben (html.dark .smarker, html.hc.dark .smarker) setzen den hellen
   Kreis mit höherer Spezifität — der gewählte Marker braucht deshalb eigene Varianten. */
html.dark .smarker.sel, html.hc.dark .smarker.sel { background: var(--accent); color: var(--on-accent); }
html.dark .smarker.sel { box-shadow: 0 0 0 4px rgba(139,201,58,.3), 0 6px 16px rgba(0,0,0,.6); }
html.hc.dark .smarker.sel { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #000, 0 6px 16px rgba(0,0,0,.7); }

/* Typ-Piktogramm in Listen/Detail (vor dem Namen) */
.type-ico { display: inline-flex; margin-right: 6px; color: var(--text); font-size: 15px; line-height: 1; vertical-align: -0.15em; }

/* Vorschau-Karte: Aktionen. „Details“ = Hauptaktion (LSB-Grün), „Route“ = externer Link,
   Moderation in eigener Zeile darunter. Mindesthöhe 44 px (Touch). */
.pop-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pop-actions button, .pop-route {
  flex: 1 1 0; min-height: 44px; box-sizing: border-box; padding: 4px 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 13.5px/1.15 var(--font-sans); text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
}
.pop-actions .details { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pop-actions .details:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pop-route { color: var(--text) !important; }   /* Leaflet färbt Links sonst blau */
.pop-route:hover { border-color: var(--accent); }
.pop-route .pic { width: 16px; height: 16px; }
.pop-route .route-chevron { font-size: 11px; color: var(--muted); transition: transform .15s ease; }
.pop-route[aria-expanded="true"] { border-color: var(--accent); }
.pop-route[aria-expanded="true"] .route-chevron { transform: rotate(180deg); }
/* Ausgeklappte Auswahl unter den Knöpfen: zwei gleich breite Links zu den Routenplanern */
.pop-route-menu { display: flex; gap: 8px; margin-top: -4px; }
.pop-route-menu[hidden] { display: none; }
.pop-route-menu a {
  flex: 1 1 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2);
  font: 600 13px var(--font-sans); color: var(--text) !important; text-decoration: none;
}
.pop-route-menu a:hover { border-color: var(--accent); background: var(--accent-light); }
.pop-route-menu a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.pop-route-menu .ext { font-size: 12px; color: var(--muted); }
.pop-mod button { min-height: 38px; font-size: 12.5px; }
.pop-actions .approve { color: var(--accent-text); border-color: var(--accent); }
.pop-actions .approve:hover { background: var(--accent-light); }
.pop-actions .reject { color: var(--red-text); border-color: var(--red); }
.pop-actions .reject:hover { background: var(--danger-soft); }
.pop-status { font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.pop-status.pending { color: var(--orange); }
.pop-status.rejected { color: var(--red); }
.pop-status.draft { color: var(--muted); }
.pop-actions .edit { color: var(--text); }
.pop-actions .details { color: var(--text); }

/* Leaflet Layer-Switcher an LSB anpassen */
.leaflet-control-layers,
.leaflet-bar, .leaflet-control-attribution {
  font-family: inherit !important;
}
.leaflet-control-layers-toggle {
  background-color: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Hinzufügen-Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  z-index: 2000;
}
.overlay.hidden { display: none; }
.overlay-box {
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--panel-bg);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  border-top: 4px solid var(--accent);
  padding: 20px 22px 22px;
  /* Scrollbar nicht über die abgerundeten Ecken laufen lassen: Track oben/unten
     einrücken (mehr als der 10px-Radius), runder Daumen. Sonst „quadriert" der
     volllange native Scrollbalken die rechten Ecken (links rund, rechts eckig). */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
.overlay-box::-webkit-scrollbar { width: 10px; }
.overlay-box::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.overlay-box::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.overlay-head h2 {
  margin: 0;
  font-size: 17px;
  color: var(--text);
}
.overlay-close-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 5px;
  margin-left: auto;
  flex-shrink: 0;
  width: auto;
}
.overlay-close-btn:hover {
  background: var(--bg-soft);
  color: var(--red-text);
}
.overlay-close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.overlay-close:hover { color: var(--red-text); }

/* Destruktive Aktion (z.B. Sportstätte löschen) */
.danger-btn {
  border: 1px solid var(--red);
  background: var(--surface);
  color: var(--red-text);
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}
.danger-btn:hover {
  background: var(--red);
  color: #fff;
}

/* Breites Edit-Overlay mit mehreren Spalten */
.overlay-wide { width: 90vw; max-width: 1500px; }

/* Aktionszeile im Detail-Overlay (neben #edit-form-Aktionen) */
.overlay-wide > .edit-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.overlay-wide > .edit-actions button {
  width: auto;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.overlay-wide > .edit-actions button:hover { background: var(--bg); }
.overlay-wide > .edit-actions #detail-map { color: var(--accent-text); border-color: var(--accent); }
.overlay-wide > .edit-actions #detail-map:hover { background: var(--accent-light); }
.overlay-wide > .edit-actions #detail-copy:hover { border-color: var(--accent); color: var(--accent-text); }
.overlay-wide > .edit-actions #detail-edit {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}
.overlay-wide > .edit-actions #detail-edit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Gast-Hinzufügen-Formular: 2-Spalten-Grid */
.add-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.add-form-grid .add-col { min-width: 0; }
.add-form-grid .add-col.span-2 { grid-column: 1 / -1; }
.add-form-grid label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 3px; }
#add-form label.check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); margin-top: 16px; }
#add-form label.check input { width: auto; height: auto; padding: 0; accent-color: var(--accent); }
.add-form-grid input[type=text] {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px;
  font-size: 13px; box-sizing: border-box; font-family: inherit;
}
.add-form-grid input[type=text]:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
@media (max-width: 700px) { .add-form-grid { grid-template-columns: 1fr; } }
.edit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px; }
.edit-col { min-width: 0; }
.edit-col.span-full { grid-column: 1 / -1; }
.sports-field { position: relative; }
.hidden { display: none !important; }

/* Strukturierter Öffnungszeiten-Editor (7 Zeilen) */
.hours-editor { width: 100%; }
.hours-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.hours-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  border: 1px solid var(--border); border-radius: 5px;
  padding: 3px 8px;
}
.hours-row .hours-day { width: 84px; font-size: 11.5px; color: var(--muted); flex: 0 1 auto; }
.hours-row input[type=time] {
  border: none; background: transparent; font-size: 12.5px; padding: 3px 0;
  font-family: inherit; flex: 1 1 60px; min-width: 52px; color: var(--text);
}
.hours-row .hours-dash { color: var(--muted); flex-shrink: 0; }
.hours-row .hours-off {
  display: inline-flex; align-items: center; flex-direction: column; gap: 1px;
  font-size: 10px; color: var(--muted); flex-shrink: 0; margin-left: auto;
  line-height: 1.1;
  text-align: center;
}
.hours-row .hours-off input[type=checkbox] { accent-color: var(--accent); margin: 0; padding: 0; height: auto; }
.hours-row input[type=time]:disabled { color: var(--muted); }
.hours-row.invalid { border-color: var(--red); background: rgba(198, 40, 40, .06); }
.hours-row.invalid .hours-day { color: var(--red); }
@media (max-width: 560px) { .hours-grid { grid-template-columns: 1fr; } }
.sports-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.sports-suggest-item {
  padding: 7px 10px;
  font-size: 12.5px;
  cursor: pointer;
}
.sports-suggest-item:hover,
.sports-suggest-item.active { background: var(--accent-light, #eaf3d4); color: var(--text); }
.edit-col label { display: block; font-size: 11px; color: var(--muted); margin: 8px 0 2px; }
.edit-col input, .edit-col select, .edit-col textarea {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px;
  font-size: 12.5px; box-sizing: border-box; font-family: inherit;
}
.edit-col input:focus, .edit-col select:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
.edit-col.check { display: flex; align-items: center; gap: 8px; padding-top: 18px; }
.edit-col.check label { margin: 0; font-size: 12.5px; color: var(--text); }
.edit-col.check input[type=checkbox] { width: auto; height: auto; padding: 0; accent-color: var(--accent); }
.edit-grid label.check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); margin: 14px 0 2px; }
.edit-grid label.check input { width: auto; height: auto; padding: 0; accent-color: var(--accent); }
#edit-form > .edit-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 10px; }
#edit-form > .edit-actions button { position: static; font-size: 13px; padding: 8px 18px; border-radius: 5px; cursor: pointer; }
#edit-form > .edit-actions #edit-btn { border: none; background: var(--accent); color: var(--on-accent); font-weight: 600; }
#edit-form > .edit-actions #edit-btn:hover { opacity: .9; }
#edit-form > .edit-actions #close-edit-bottom { border: 1px solid var(--border); background: transparent; color: var(--text); }
#edit-form > .edit-actions #close-edit-bottom:hover { background: var(--bg-soft); color: var(--red-text); }

@media (max-width: 900px) { .edit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .edit-grid { grid-template-columns: 1fr; } }

/* Hinzufügen-Checkbox */
label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  margin: 12px 0 4px;
  cursor: pointer;
}
label.check input { width: auto; accent-color: var(--accent); }
.req { color: var(--red-text); }

/* Info-Popup auf der Karte */
.pop { font-family: inherit; min-width: 210px; }

/* Footer mit Impressum/Datenschutz — volle Breite wie der Header */
.site-footer { border-top: 1px solid var(--border); background: var(--bg2); padding: 10px 20px; }
/* 3-Spalten-Aufbau: [Toggle] [Titel zentriert] [Links rechts] — Grid mit
   symmetrischen Außenspalten (1fr), damit die Mitte (auto) wirklich in der
   Bildschirmmitte steht. */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.footer-hc {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 16px;          /* Abstand zwischen Kontrast- und Dunkel-Schalter */
  flex-wrap: wrap;
}
.footer-copy { justify-self: center; text-align: center; }
.footer-links {
  justify-self: end;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex-wrap: wrap;   /* Luft zwischen Links/Trennern */
}
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.hc-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  vertical-align: middle;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; line-height: inherit; color: var(--muted);
  cursor: pointer; text-align: left;
  width: auto;   /* globales `button { width:100% }` aushebeln */
}
.hc-switch {
  order: 1;   /* Schalter rechts neben dem Label */
  position: relative; flex: none;
  width: 30px; height: 17px;
  background: #9a9a9a;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 9px;
  transition: background .15s ease;
}
.hc-knob {
  position: absolute; top: 1px; left: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: left .15s ease;
}
.hc-toggle:hover .hc-knob { box-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* Schalter im Dunkelmodus: Bahn heller als der Grund, Knopf bleibt weiß */
html.dark .hc-switch { background: #5f656b; border-color: rgba(255,255,255,.22); }
html.dark .hc-knob { box-shadow: 0 1px 3px rgba(0,0,0,.8); }
.hc-toggle[aria-checked="true"] .hc-switch {
  background: var(--accent);
  border-color: var(--accent-dark);
}
.hc-toggle[aria-checked="true"] .hc-knob { left: 14px; }
.hc-short { display: none; }   /* kompaktes Label nur auf sehr schmalen Screens */
@media (max-width: 480px) {
  .hc-full { display: none; }
  .hc-short { display: inline; }
}

/* Ausklappbarer Bereich "Zusätzliche Angaben" im Hinzufügen-Formular */
.extra-toggle { background: none; border: 1.5px dashed var(--accent); border-radius: 12px; color: var(--text); min-height: 44px; font-size: 13px; font-weight: 600; padding: 8px 12px; cursor: pointer; width: 100%; text-align: left; }
.extra-toggle:hover { background: var(--bg2); }
.hours-toggle { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.hours-toggle .hours-summary { font-weight: 400; color: var(--muted); font-size: 12.5px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.hours-editor.hidden { display: none; }
.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.extra-grid .add-col.check { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.extra-grid .add-col.check label { margin: 0; }
.extra-grid .add-col.check input { width: auto; height: auto; padding: 0; accent-color: var(--accent); }
.extra-grid select { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; box-sizing: border-box; font-family: inherit; background: var(--bg); }
@media (max-width: 700px) { .extra-grid { grid-template-columns: 1fr; } }

/* Zusatzangaben-Zeile in der Moderations-Ansicht */
.pending-extra { margin: 4px 0 2px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.pop { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; color: var(--text); }
.pop-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 30px; }
.pop-tile {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--text);   /* im Dunkelmodus hell auf dunklem Grün */
}
.pop-tile .pic { width: 22px; height: 22px; }
.pop-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--text); }
.pop-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.pop-lines { display: flex; flex-direction: column; gap: 6px; }
.pop-line { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.pop-line .pic { width: 16px; height: 16px; margin-top: 1px; color: var(--muted); }
.pop-group { display: flex; flex-direction: column; gap: 5px; }
.pop-label-sm { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-chip, .pop-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--accent-soft); color: var(--text);
}
.pop-badge { background: var(--surface-2); }
.pop-badge .pic { width: 12px; height: 12px; stroke-width: 3; }
.pop-badge.warn { background: var(--warn-bg); color: var(--warn-text); }
.pop-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  margin: 2px 0;
}
.pop-label { color: var(--muted); white-space: nowrap; }
.pop-row > span:last-child { text-align: right; }
.pop-yes { color: var(--accent-text); font-weight: 600; }
.pop-no { color: var(--red-text); font-weight: 600; }
.pop-warn { color: var(--orange); font-weight: 600; }
.pop-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; }
.pop-dist { font-weight: 600; color: var(--orange); }
.leaflet-popup-content-wrapper {
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(52,52,52,.2), 0 2px 6px rgba(52,52,52,.08);
}
.leaflet-popup-content { margin: 16px; }
.leaflet-container a.leaflet-popup-close-button {
  top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 10px;
  font: 22px/30px var(--font-sans); color: var(--muted); background: var(--surface-2);
}
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--text); }
html.dark .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }   /* sonst Link-Grün */
html.dark .leaflet-container a.leaflet-popup-close-button:hover { color: var(--text); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Detail-Overlay */
.detail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.detail-group { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--card); }
.detail-group h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.detail-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin: 3px 0; }
.detail-label { color: var(--muted); white-space: nowrap; }
.detail-val { text-align: right; word-break: break-word; }
.detail-val a { color: var(--accent-text); }
/* Mehrwertige Zeilen (z. B. viele Sportarten): eine Zeile pro Eintrag statt
   eines überlangen Umbruchs — Label bleibt links, Liste rechtsbündig darunter. */
.detail-val-list { text-align: right; }
.detail-list { list-style: none; margin: 0; padding: 0; display: inline-block; text-align: right; }
.detail-list li { line-height: 1.5; }
.detail-list li + li { margin-top: 2px; }

/* Startansicht: gebündelte Sportstätten (weit herausgezoomt) und Mengenhinweis.
   Bündel = Zähler-Kreis in Markengrün, Größe nach Anzahl (per Inline-Style gesetzt);
   `flagged` (nur für Redaktion: enthält ungeprüfte/abgelehnte) bekommt roten Rand. */
.scluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; box-sizing: border-box;
  background: var(--accent); color: var(--on-accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent), 0 3px 10px rgba(52,52,52,.25);
  font-weight: 700; font-size: 14px; line-height: 1; cursor: pointer;
}
.scluster:hover { background: var(--accent-hover); }
.scluster.flagged { border-color: var(--red); }
html.hc .scluster { background: #000; color: #fff; border-color: #fff; box-shadow: 0 0 0 1.5px #000; }
html.hc.dark .scluster { background: #fff; color: #000; border-color: #000; box-shadow: 0 0 0 1.5px #fff; }
/* Hinweis „N von M Sportstätten im Ausschnitt" — mittig über der Karte, unter dem Header.
   z-index 820: über den Karten-Controls (800), unter Footer (850) und Panel (900). */
.marker-note {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--header-h, 63px) + 10px);
  z-index: 820; max-width: min(560px, calc(100vw - 190px));
  padding: 6px 12px; border-radius: 16px;
  background: var(--surface); color: var(--text, inherit);
  border: 1px solid var(--border); box-shadow: 0 1px 6px rgba(0,0,0,.25);
  font-size: 13px; text-align: center; pointer-events: none;
}
@media (max-width: 700px) { .marker-note { font-size: 12px; padding: 5px 10px; } }

/* "Details"-Button in der Ergebnisliste */
.result-detail {
  display: inline-flex; align-items: center; gap: 4px;
  width: auto; min-height: 30px; margin: 0;
  padding: 0 9px;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.result-detail .pic { width: 14px; height: 14px; }
.result-detail:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-light); }

/* Kennzeichnung ungeprüfter Gäste-Einträge */
.badge-unreviewed {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 999px;
  vertical-align: middle;
}

/* Meine Einreichungen (eigene, ungeprüfte Einträge) */
.pending-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mine-status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.mine-status.ok { color: #fff; background: #2e7d32; }
.mine-status.pending { color: #fff; background: #b26a00; }
.mine-status.err { color: #fff; background: var(--red); }
#mine-overlay .pending-note { margin-top: 6px; }

/* ================= Mobile (< 721 px) — Redesign 2026 =================
   Karten-App wie im Entwurf: die Karte füllt den Schirm. Oben schwebt die Suchleiste
   (Header als weiße Karte: LSB-Logo, Suchfeld, Login; Redaktions-Knöpfe als zweite
   Zeile). Darunter der Kartenkredit, vollständig sichtbar (Lizenzpflicht). Unten das
   Bottom-Sheet mit Ergebnissen, Filtern und am Ende Darstellung + Impressum/Datenschutz
   (app.js hängt Suchfeld und Footer mobil um: placeMobileParts). Über dem Sheet links
   „Sportstätte melden“, rechts „Mein Standort“ + Zoom; beides blendet sich bei offenem
   Sheet aus, damit der freie Kartenstreifen antippbar bleibt.
   Maße: Rand 12 px; --header-h misst app.js (Höhe der Suchleiste), --sheet-h die Höhe
   des Sheets (ResizeObserver); die Werte hier sind nur der Fallback. */
@media (max-width: 720px) {
  :root {
    --header-h: 56px;
    --sheet-h: 64px;
    --m-top: max(10px, env(safe-area-inset-top));
  }
  body.app { height: 100dvh; overflow: hidden; }
  main { position: fixed; inset: 0; display: block; }
  #map { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ---- Suchleiste oben (Header) ---- */
  header, body.admin header {
    position: fixed; top: var(--m-top); left: 12px; right: 12px; z-index: 1000;
    padding: 6px; border: 0; border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(52,52,52,.18);
  }
  body.admin header { box-shadow: inset 0 3px 0 var(--accent), 0 8px 24px rgba(52,52,52,.18); }  /* Redaktion: Farbe der Rolle */
  html.dark header { box-shadow: 0 8px 24px rgba(0,0,0,.55); }
  .header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; }
  /* Zeilenumbruch vor den Redaktions-Knöpfen (die folgen mit order: 4) */
  .header-inner::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .header-left { order: 0; flex: none; gap: 0; }
  .brand-logo { width: 40px; height: 40px; }
  /* Titel bleibt für Screenreader im Header, sichtbar steht das Logo */
  .brand-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  header .text-search { order: 1; flex: 1 1 0; min-width: 0; margin: 0; }
  header .text-search-row input[type=search] { min-height: 44px; border: 0; background: var(--surface-2); border-radius: 12px; font-size: 15px; }
  header .text-search-hint { display: none; }
  .header-right { display: contents; }   /* Knöpfe werden Teil der Suchleiste */
  .role-toggle { display: none; }
  #login-btn {
    order: 2; width: auto; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text);
    font-size: 13px; font-weight: 700;
  }
  #open-pending, #admin-menu-btn, #account-menu-btn, #open-mine {
    order: 4; width: auto; min-height: 36px; padding: 0 12px;
    align-items: center; justify-content: center;
    border: 1.5px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600;
  }
  /* „Sportstätte melden“: schwebt links über dem Sheet */
  #open-add {
    position: fixed; left: 12px; bottom: calc(var(--sheet-h) + 12px); z-index: 950;
    width: auto; min-height: 50px; padding: 0 18px 0 14px;
    display: inline-flex; align-items: center; border-radius: 16px;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 8px 20px rgba(52,52,52,.25);
  }
  .lbl-long { display: inline; }
  body.sheet-open #open-add { display: none; }

  /* ---- Karten-Bedienung ---- */
  /* Kredit oben links, direkt unter der Suchleiste: vollständig sichtbar */
  .leaflet-top.leaflet-left { top: calc(var(--m-top) + var(--header-h) + 8px); }
  .leaflet-top .leaflet-control-attribution {
    margin: 0 0 0 12px; padding: 3px 8px; border-radius: 7px;
    max-width: calc(100vw - 24px); font-size: 10.5px; line-height: 1.35;
    background: var(--attribution-bg);
  }
  /* Zoom + „Mein Standort“ rechts über dem Sheet */
  .leaflet-bottom.leaflet-right { bottom: var(--sheet-h); }
  .leaflet-right .leaflet-control { margin-right: 12px; }
  .leaflet-bottom .leaflet-control { margin-bottom: 8px; }
  .leaflet-bottom.leaflet-right .leaflet-control:first-child { margin-bottom: 12px; }
  body.sheet-open .leaflet-bottom.leaflet-right { display: none; }
  /* Hinweis „N von M im Ausschnitt“ unter dem Kredit */
  .marker-note { top: calc(var(--m-top) + var(--header-h) + 40px); }

  /* ---- Bottom-Sheet ---- */
  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    width: auto; padding: 0; border: 0; border-radius: 24px 24px 0 0;
    background: var(--surface);
    box-shadow: 0 -8px 30px rgba(52,52,52,.16);
    overflow: hidden; display: flex; flex-direction: column;
    /* Offen bleibt über dem Sheet ein Kartenstreifen frei (Karte antippen klappt es ein) */
    max-height: calc(100dvh - var(--m-top) - var(--header-h) - 120px);
  }
  html.dark #panel { box-shadow: 0 -8px 30px rgba(0,0,0,.6); }
  #panel.collapsed { max-height: none; }
  #panel.collapsed #panel-body { display: none; }

  /* Griff: Zug-Leiste oben, darunter Titel + Zusammenfassung */
  .panel-toggle {
    position: relative; flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 64px; padding: 22px 20px 12px;
    border: 0; border-radius: 24px 24px 0 0; background: var(--surface);
    color: var(--text); text-align: left; cursor: pointer;
    font: 700 17px var(--font-display);
  }
  .panel-toggle::before {
    content: ""; position: absolute; top: 9px; left: 50%;
    width: 40px; height: 5px; margin-left: -20px;
    border-radius: 999px; background: var(--border);
  }
  .panel-toggle:hover { background: var(--surface); }
  .panel-toggle .panel-toggle-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel-toggle .panel-toggle-summary {
    flex: 1 1 auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 500 13px var(--font-sans); color: var(--muted);
  }
  .panel-toggle .panel-chevron { color: var(--text); font-size: 15px; transition: transform .18s ease; }
  #panel.collapsed .panel-toggle .panel-chevron { transform: rotate(180deg); }
  .panel-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }

  #panel-body {
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 16px max(16px, env(safe-area-inset-bottom));
  }

  /* Filter-Bereich im Sheet auf-/zuklappbar */
  .filter-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; min-height: 44px; padding: 0 14px; margin: 0 0 8px;
    border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface);
    color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .filter-toggle .filter-chevron { color: var(--text); font-size: 12px; transition: transform .18s ease; }
  body.filters-collapsed .filter-toggle .filter-chevron { transform: rotate(180deg); }
  body.filters-collapsed #search-filters { display: none; }
  .filter-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
  #search-filters > h2 { display: none; }

  /* Footer ans Ende des Sheets (app.js hängt ihn um) */
  .site-footer, html.hc .site-footer, html.hc.dark .site-footer {
    position: static; margin: 16px -16px 0; padding: 14px 16px 4px;
    background: transparent; border-top: 1px solid var(--border);
  }
  .footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12.5px; }
  .footer-copy { display: none; }
  .footer-links { justify-content: flex-start; }

  /* Detail-Ansicht: Boxen untereinander (2 Spalten sind auf schmalen Screens zu eng) */
  .detail-body { grid-template-columns: 1fr; }

  /* ---- Overlays: Bottom-Sheets (fast volle Höhe, von unten) ---- */
  .overlay { padding: 0; align-items: flex-end; }
  .overlay-box {
    width: 100%;
    max-width: 100vw;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    padding: 16px 18px max(18px, env(safe-area-inset-bottom));
  }
  .overlay-wide { width: 100%; }
  .login-box { width: 100%; }

  /* Leaflet-Popup nicht zu schmal */
  .leaflet-popup-content { min-width: 0; }
}

/* ================= Desktop (≥ 721 px) — Redesign 2026 =================
   Die Karte füllt das Fenster. Links schwebt EINE Karte aus drei Teilen, die im DOM
   getrennt bleiben (mobil haben sie eigene Rollen): oben die Marke (.header-left),
   darunter das Such-/Ergebnis-Panel, unten der Footer (Darstellung + Links).
   Hintergrund und Schatten zeichnet main::before einmal für alle drei; die Teile
   selbst sind durchsichtig. Aktionen (melden, anmelden, Moderation) schweben oben
   rechts, Zoom + „Mein Standort“ unten rechts.
   Maße: Rand 24 px, Kartenbreite 408 px, grüner Kopfstreifen 5 px, Marke 56 px hoch
   mit 18 px Innenabstand → Panel beginnt bei 24 + 5 + 18 + 56 + 18 = 121 px. */
@media (min-width: 721px) {
  html:has(body.app), body.app { overflow: hidden; }
  main { position: fixed; inset: 0; }
  #map { position: absolute; inset: 0; }
  main::before {
    content: ""; position: absolute; left: 24px; top: 24px; bottom: 24px; width: 408px;
    box-sizing: border-box; z-index: 890; pointer-events: none;
    background: var(--panel-bg); border-radius: 22px; border-top: 5px solid var(--accent);
    box-shadow: 0 16px 48px rgba(52,52,52,.16), 0 2px 6px rgba(52,52,52,.06);
  }
  /* Redaktionsmodus erkennbar: der Kopfstreifen folgt dem Farbschema der Rolle (--accent) */
  html.dark main::before { box-shadow: 0 16px 48px rgba(0,0,0,.55); }

  header, body.admin header {
    position: fixed; top: 0; left: 0; right: 0; height: 0; padding: 0; z-index: 1000;
    background: none; border: 0; box-shadow: none; pointer-events: none;
  }
  .header-inner { display: block; }
  .header-left { position: fixed; left: 44px; top: 47px; width: 368px; gap: 14px; pointer-events: auto; }
  .brand-logo { width: 56px; height: 56px; }
  .header-left h1 { font-size: 22px; }
  .header-right {
    position: fixed; top: 24px; right: 24px; max-width: calc(100vw - 480px);
    gap: 10px; flex-wrap: wrap; justify-content: flex-end; pointer-events: auto;
  }
  .hdr-btn {
    width: auto; min-height: 46px; padding: 0 18px; border-radius: 14px;
    display: inline-flex; align-items: center;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 6px 18px rgba(52,52,52,.16);
  }
  /* die display-Regel oben darf rollenabhängige Knöpfe nicht sichtbar machen (die Rolle
     schaltet sie per Inline-Stil bzw. body.admin frei) */
  .hdr-btn.pending-only, .hdr-btn.admin-only { display: none; }
  .hdr-btn.ghost, #login-btn { background: var(--surface); border-color: transparent; color: var(--text); }
  .hdr-btn.ghost:hover, #login-btn:hover { border-color: var(--accent); color: var(--text); }
  html.dark .hdr-btn { box-shadow: 0 6px 18px rgba(0,0,0,.5); }
  /* Rolle nur im angemeldeten Zustand, als Pille zwischen den Aktionen */
  .role-toggle { display: none; }
  body.admin .role-toggle {
    display: inline-flex; min-height: 46px; padding: 0 16px; box-sizing: border-box;
    border-radius: 14px; background: var(--surface); box-shadow: 0 6px 18px rgba(52,52,52,.16);
  }

  #panel {
    position: absolute; left: 24px; top: 121px; bottom: calc(24px + var(--footer-h, 80px));
    width: 408px; box-sizing: border-box; z-index: 900;
    padding: 4px 20px 12px; overflow-y: auto;
    background: transparent; border: 0;
  }
  #search-filters > h2 { display: none; }   /* „Umkreis“ steht über den Stufen */

  .site-footer, html.hc .site-footer, html.hc.dark .site-footer {
    position: fixed; left: 24px; bottom: 24px; width: 408px; box-sizing: border-box; z-index: 900;
    padding: 10px 20px 14px; border-top: 1px solid var(--border);
    background: var(--panel-bg); border-radius: 0 0 22px 22px;   /* deckt sich mit main::before */
  }
  .footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-copy { display: none; }   /* steht schon oben neben dem Logo */
  .footer-links { justify-content: flex-start; }

  /* „N von M im Ausschnitt“ mittig über dem freien Kartenbereich rechts der Karte */
  .marker-note {
    top: 24px; left: calc(456px + (100vw - 456px) / 2);
    max-width: min(560px, calc(100vw - 520px));
  }

  /* Karten-Bedienung unten rechts: weiße Kacheln mit weichem Schatten */
  .leaflet-right .leaflet-control { margin-right: 24px; }
  .leaflet-bottom .leaflet-control { margin-bottom: 10px; }
  .leaflet-bottom .leaflet-control-attribution { margin-bottom: 18px; border-radius: 8px; padding: 3px 10px; }
}

/* Karten-Bedienung (Zoom, „Mein Standort“) auf allen Breiten: weiße 46-px-Kacheln */
.leaflet-bar { border: 0 !important; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(52,52,52,.16) !important; }
/* .leaflet-container davor: Leaflets eigene Regel (.leaflet-touch .leaflet-bar a, 30 px)
   ist sonst spezifischer */
.leaflet-container .leaflet-bar a, .leaflet-container .leaflet-bar a:hover {
  width: 46px; height: 46px; line-height: 46px; font-size: 20px;
  background: var(--surface); color: var(--text); border-bottom-color: var(--border);
}
.leaflet-container .leaflet-bar a:hover { background: var(--hover); }
.locate-control a { display: flex; align-items: center; justify-content: center; }
.locate-control .pic { width: 20px; height: 20px; }

/* ================= Rechtsseiten (Impressum, Datenschutz) — Redesign 2026 =================
   Eigene Seite ohne Karten-Layout (kein <header>/<main>: deren App-Regeln greifen hier nicht).
   Obere Leiste mit Logo + „Zurück zur Karte“, darunter der Text in einer ruhigen Spalte. */
body.legal { height: auto; min-height: 100%; display: block; background: var(--bg); }
.legal-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, calc((100% - 820px) / 2));
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(52,52,52,.06);
}
.legal-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; min-width: 0; }
.legal-brand img { width: 44px; height: 44px; flex-shrink: 0; }
.legal-brand span { display: flex; flex-direction: column; min-width: 0; }
.legal-brand strong { font: 700 20px var(--font-display); }
.legal-brand small { font-size: 12.5px; color: var(--muted); }
.legal-back {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none;
}
.legal-back:hover { border-color: var(--accent); }
.legal-page {
  display: block; box-sizing: border-box; max-width: 820px; margin: 24px auto 60px; padding: 8px 28px 28px;
  background: var(--surface); border-radius: 18px; box-shadow: 0 6px 24px rgba(52,52,52,.08);
}
.legal-page h1 { font-size: 28px; margin: 18px 0 8px; }
.legal-page h2 { font-size: 20px; margin: 32px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text); }
.legal-page h3 { font-size: 16px; margin: 22px 0 6px; color: var(--text); }
.legal-page p, .legal-page li { font-size: 15px; line-height: 1.6; color: var(--text); }
.legal-page p { margin: 8px 0; }
.legal-page ul { margin: 8px 0; padding-left: 22px; }
.legal-page a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal-page a:hover { background: var(--accent-soft); }
.legal-page hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; }
.legal-page .original { display: inline-block; font-size: 14px; }
.legal-page .app-note {
  margin: 18px 0 8px; padding: 14px 18px; border-radius: 14px;
  background: var(--accent-soft); border: 1.5px solid var(--accent);
}
.legal-page .app-note p:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .legal-brand small { display: none; }
  .legal-page { margin: 12px 12px 40px; padding: 4px 18px 22px; border-radius: 16px; }
}

/* ================= Dialoge (Redesign 2026) =================
   Hinzufügen, Bearbeiten, Login, Moderation, Nutzer, Felder, Details, Meine Einreichungen.
   Gleiche Sprache wie Panel und Vorschau-Karte: große Rundungen, 44-px-Felder und -Knöpfe,
   LSB-Grün nur für die Hauptaktion. Steht ABSICHTLICH am Dateiende (überschreibt die älteren
   Einzelregeln bei gleicher Spezifität); mobil bleibt das Bottom-Sheet. */
.overlay { padding-top: 5vh; }
.overlay-box {
  border-top: 0;
  padding: 22px 26px 26px;
  box-shadow: 0 24px 60px rgba(52,52,52,.28);
}
html.dark .overlay-box { box-shadow: 0 24px 60px rgba(0,0,0,.6); }
@media (min-width: 721px) {
  .overlay-box { border-radius: 22px; max-height: calc(100vh - 10vh); }
}
@media (max-width: 720px) {
  .overlay-box { border-radius: 24px 24px 0 0; padding: 20px 18px max(20px, env(safe-area-inset-bottom)); }
}
.overlay-head { margin-bottom: 16px; gap: 12px; }
.overlay-head h2 { font-size: 24px; font-weight: 700; }

/* Schließen + sekundäre Knöpfe */
.overlay-close-btn, .overlay-close {
  min-height: 44px; padding: 0 18px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font: 700 14px var(--font-sans); cursor: pointer;
}
.overlay-close-btn:hover, .overlay-close:hover { background: var(--hover); color: var(--text); border-color: var(--accent); }

/* Felder wie das Suchfeld: 44 px, Radius 12, sanfte Fläche */
.overlay-box input:not([type=checkbox]):not([type=radio]):not([type=range]),
.overlay-box select, .overlay-box textarea {
  min-height: 44px; padding: 0 14px; box-sizing: border-box;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text); font: 15px var(--font-sans);
}
.overlay-box textarea { padding: 10px 14px; min-height: 88px; }
.overlay-box input:not([type=checkbox]):not([type=radio]):focus,
.overlay-box select:focus, .overlay-box textarea:focus {
  outline: 3px solid var(--accent-soft); border-color: var(--accent); background: var(--surface);
}
.overlay-box input:focus-visible, .overlay-box select:focus-visible, .overlay-box textarea:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 1px;
}
.overlay-box label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 12px 0 5px; display: block; }
.overlay-box label.check, .overlay-box .hours-closed, .overlay-box .notify-row { font-weight: 500; }
#f-access, #f-setting { width: 100%; }

/* Hauptaktionen: LSB-Grün, 48 px */
.overlay-box #add-btn, .overlay-box #login-submit, .overlay-box #edit-btn,
.overlay-box #u-create, .overlay-box #vis-save, .overlay-wide > .edit-actions #detail-edit {
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); font: 700 15px var(--font-sans); cursor: pointer;
}
.overlay-box #add-btn:hover, .overlay-box #login-submit:hover, .overlay-box #edit-btn:hover,
.overlay-box #u-create:hover, .overlay-box #vis-save:hover, .overlay-wide > .edit-actions #detail-edit:hover {
  background: var(--accent-hover); color: var(--on-accent);
}
.overlay-box #add-btn, .overlay-box #login-submit { width: 100%; margin-top: 16px; }
.overlay-box #f-geocode {
  min-height: 44px; padding: 0 16px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font: 700 14px var(--font-sans); cursor: pointer;
}
.overlay-box #f-geocode:hover { border-color: var(--accent); }
.danger-btn { min-height: 44px; border-radius: 12px; padding: 0 18px; font-weight: 700; }
.overlay-wide > .edit-actions button {
  min-height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 14px;
}
.overlay-wide > .edit-actions #detail-map { background: var(--surface); }

/* Listen in Dialogen (Moderation, Nutzer, Einreichungen): Karten mit Statusstreifen */
.pending-item {
  border: 1.5px solid var(--border); border-left: 5px solid var(--orange, #f9b031);
  border-radius: 14px; padding: 12px 14px;
}
.pending-name { font-size: 15px; font-weight: 700; }
.pending-addr, .pending-note, .pending-extra { font-size: 13px; }
.pbtn { min-height: 38px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 13px; }
.recent-title { font: 700 15px var(--font-display); text-transform: none; letter-spacing: 0; color: var(--text); }
.users-add { gap: 8px; }
.notify-row { border-radius: 14px; }

/* Details: ruhige Gruppen statt Großbuchstaben-Köpfen */
.detail-group { border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.detail-group h3 { font: 700 15px var(--font-display); text-transform: none; letter-spacing: 0; color: var(--text); margin: 0 0 8px; }
.detail-row { font-size: 14px; margin: 5px 0; }
.detail-val a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vis-hint { font-size: 14px; color: var(--muted); }
.msg { font-size: 14px; }

/* Dialoge: Lesbarkeit (Ergänzung zu 4c) */
.pending-type { color: var(--text); font-weight: 500; }
/* „Zuletzt übernommen“ war per Deckkraft .62 ausgegraut — der Text fiel unter 4,5:1.
   Jetzt volle Deckkraft, die Abstufung übernimmt der Hintergrund. */
.recent-item { opacity: 1; background: var(--surface-2); border-left-color: var(--accent); }
.recent-item:hover { background: var(--accent-soft); }
.overlay-wide > .edit-actions #detail-map { color: var(--text); border-color: var(--accent); }
.overlay-wide > .edit-actions #detail-map:hover { background: var(--accent-soft); }
.detail-val a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Footer-Bedienung: Schalter und Links als größere Ziele (WCAG 2.5.8: mind. 24 px) */
.hc-toggle { min-height: 32px; }
.footer-links a { display: inline-block; padding: 7px 2px; }

/* Fußzeile im linken Menü (Desktop) niedriger: zwei enge Zeilen statt 93 px (Ziele bleiben ≥ 24 px) */
@media (min-width: 721px) {
  .site-footer, html.hc .site-footer, html.hc.dark .site-footer { padding: 6px 20px 8px; }
  .footer-inner { gap: 0; }
  .hc-toggle { min-height: 26px; }
  .footer-links a { padding: 5px 2px; }
}

/* Bearbeiten-Dialog: Felder in Gruppenkarten, fester Kopf und feste Aktionsleiste */
#edit-fields { display: flex; flex-direction: column; gap: 14px; }
.edit-section { border: 1.5px solid var(--border); border-radius: 16px; padding: 14px 18px 18px; background: var(--surface); }
.edit-section > h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
  font: 700 16px var(--font-display); color: var(--text);
}
.edit-section > h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }
.edit-section .edit-grid { gap: 2px 18px; }
.edit-col.check { padding-top: 34px; }
#edit-form > .edit-actions {
  position: sticky; bottom: -26px; margin: 16px -26px -26px; padding: 14px 26px;
  background: var(--surface); border-top: 1.5px solid var(--border); border-radius: 0 0 22px 22px;
  justify-content: flex-start;
}
#edit-form > .edit-actions #edit-btn { min-height: 48px; border-radius: 12px; font-size: 15px; font-weight: 700; padding: 0 26px; }
#edit-form > .edit-actions #close-edit-bottom { min-height: 44px; border-radius: 12px; }
#edit-form > .edit-actions #edit-delete { margin-left: auto; }
#edit-msg { margin-top: 10px; }
@media (max-width: 720px) {
  #edit-form > .edit-actions { bottom: -20px; margin: 16px -18px -20px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-radius: 0; flex-wrap: wrap; }
}

/* Detailfenster: gleiche Sprache wie der Bearbeiten-Dialog (Gruppenkarten mit grünem Balken) */
.detail-body { max-height: calc(100vh - 300px); align-content: start; gap: 14px; padding: 2px 4px 2px 0; }
.detail-group { border-radius: 16px; padding: 14px 18px 16px; background: var(--surface); }
.detail-group h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 6px; }
.detail-group h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }
.detail-row { padding: 6px 0; margin: 0; border-top: 1px solid var(--border); align-items: flex-start; }
.detail-group h3 + .detail-row { border-top: 0; }
.detail-label { font-size: 13px; }
.detail-badge {
  display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-text); border: 1.5px solid var(--accent);
}
.detail-badge.part { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.detail-badge.no { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
#detail-title { display: flex; align-items: center; gap: 12px; }
#detail-title .type-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--accent-soft); flex: none;
}
#detail-title .type-ico .pic, #detail-title .type-ico svg { width: 24px; height: 24px; }
.overlay-wide > .edit-actions {
  margin: 16px -26px -26px; padding: 14px 26px; border-top: 1.5px solid var(--border);
  background: var(--surface); border-radius: 0 0 22px 22px; display: flex; flex-wrap: wrap; gap: 10px;
}
.overlay-wide > .edit-actions button { display: inline-flex; align-items: center; gap: 8px; }
.overlay-wide > .edit-actions .pic { width: 18px; height: 18px; stroke-width: 2.2; }
#detail-edit { margin-left: auto; }
@media (max-width: 720px) {
  .detail-body { max-height: calc(100vh - 340px); max-height: calc(100dvh - 340px); }
  .overlay-wide > .edit-actions button { flex: 1 1 auto; justify-content: center; }
  #detail-edit { margin-left: 0; }
  .overlay-wide > .edit-actions { margin: 16px -18px -20px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-radius: 0; }
}


/* Änderungsprotokoll, Verlauf im Detailfenster, Passwort-Dialog */
.audit-filter { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.audit-filter label { margin: 0; }
.audit-filter select { min-width: 280px; max-width: 100%; }
.audit-list { max-height: calc(100vh - 340px); overflow-y: auto; padding-right: 4px; }
.audit-list-ul { list-style: none; margin: 0; padding: 0; }
.audit-item { padding: 10px 0 10px 14px; border-left: 4px solid var(--border); margin: 0 0 2px; position: relative; }
.audit-item + .audit-item { border-top: 1px solid var(--border); }
.audit-item.good { border-left-color: var(--accent); }
.audit-item.bad { border-left-color: var(--red); }
.audit-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; }
.audit-who { font-weight: 700; }
.audit-target { font-weight: 700; }
.audit-time { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.audit-changes { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; }
.audit-changes li { padding: 2px 0; }
.audit-field { color: var(--muted); margin-right: 6px; }
.audit-old { background: var(--danger-soft); padding: 1px 8px; border-radius: 8px; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); overflow-wrap: anywhere; }
.audit-new { background: var(--accent-soft); padding: 1px 8px; border-radius: 8px; font-weight: 600; overflow-wrap: anywhere; }
.audit-arrow { margin: 0 6px; color: var(--muted); }
.audit-note { font-size: 13px; color: var(--muted); margin-top: 4px; }
.audit-empty { color: var(--muted); font-size: 14px; margin: 8px 0; }
.audit-more { margin-top: 12px; text-align: center; }
.detail-history { grid-column: 1 / -1; }
.detail-history .audit-item { padding-left: 12px; }
#pw-save { min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); font: 700 15px var(--font-sans); cursor: pointer; width: 100%; margin-top: 8px; }
#pw-save:hover { background: var(--accent-hover); }
@media (max-width: 720px) {
  .audit-filter { flex-direction: column; align-items: stretch; }
  .audit-filter select { min-width: 0; }
  .audit-time { margin-left: 0; width: 100%; }
}

/* Nutzerverwaltung: auf dem Desktop breit wie „Alle Sportstätten“ (Filter in einer Zeile, Knöpfe neben den Angaben) */
@media (min-width: 721px) {
  #users-overlay .overlay-box { width: 90vw; max-width: 1400px; }
  #users-overlay .users-add { grid-template-columns: 1fr 1.4fr 200px auto; }
  #users-overlay #users-new-box .users-add { grid-template-columns: 1fr 1.4fr 200px auto auto; }
}

/* „Öffentlich einsehbar“-Hinweis unter Kontakt; Bestätigung im Hinzufügen-Formular */
.detail-note, .edit-section-note {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 12px;
  border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 13px; font-weight: 500;
}
.detail-note::before, .edit-section-note::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--accent-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
#consent-row .consent-row {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-2);
  font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer;
}
#consent-row input[type=checkbox] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#consent-row .consent-row:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }


/* Fokus auf dem scrollbaren Detailbereich (Tastatur): dezent, innen, mit den Rundungen der Karten */
.detail-body:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 16px; }

/* Feld-Sichtbarkeit: Gruppenkarten in zwei Spalten, je Feld ein Umschalter statt Auswahlliste */
.vis-legend {
  list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.vis-legend li { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--muted); line-height: 1.35; }
.vis-legend b { display: block; color: var(--text); font-size: 14px; margin-bottom: 1px; }
.vis-legend li:first-child { background: var(--accent-soft); }
.vis-groups {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start;
  max-height: calc(100vh - 400px); min-height: 180px; overflow-y: auto; padding: 2px 4px 2px 0;
}
.vis-group { border: 1.5px solid var(--border); border-radius: 16px; padding: 12px 16px 14px; background: var(--surface); min-width: 0; }
.vis-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vis-group-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 16px var(--font-display); color: var(--text); }
.vis-group-head h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }
.vis-group-count { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; }
.vis-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; font-size: 12.5px; color: var(--muted); }
.vis-quick-btn { width: auto; min-height: 28px; padding: 0 10px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 12.5px var(--font-sans); cursor: pointer; }
.vis-quick-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.vis-rows { display: flex; flex-direction: column; }
.vis-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap;
  padding: 8px 0 8px 10px; border: 0; border-top: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 0; background: none;
}
.vis-row:first-child { border-top: 0; }
.vis-row:hover { background: none; }
.vis-row.changed { border-left-color: var(--orange, #f9b031); }
.vis-label { font-size: 14px; font-weight: 500; }
.vis-seg { position: relative; display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid var(--border); gap: 2px; }
.vis-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vis-seg label {
  display: block; margin: 0; padding: 0 10px; min-height: 30px; line-height: 30px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.vis-seg label:hover { color: var(--text); background: var(--hover); }
.vis-seg input:checked + label[data-role="gast"] { background: var(--accent); color: var(--on-accent); }
.vis-seg input:checked + label:not([data-role="gast"]) { background: var(--text); color: var(--surface); }
.vis-seg input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.vis-bar { position: sticky; bottom: -26px; margin: 14px -26px -26px; padding: 12px 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border-top: 1.5px solid var(--border); border-radius: 0 0 22px 22px; }
.vis-count { font-size: 14px; font-weight: 600; color: var(--text); }
.vis-bar .msg { margin: 0; }
.vis-bar #vis-save { margin-left: auto; }
.overlay-box #vis-save:disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
@media (max-width: 900px) { .vis-groups { grid-template-columns: 1fr; max-height: calc(100vh - 460px); } }
@media (max-width: 720px) { .vis-bar { bottom: -20px; margin: 14px -18px -20px; padding: 12px 18px; border-radius: 0; } .vis-bar #vis-save { margin-left: 0; width: 100%; } }
.vis-groups:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 16px; }
@media (max-width: 720px) {
  .vis-legend { grid-template-columns: 1fr 1fr; gap: 6px; }
  .vis-legend li { padding: 6px 10px; font-size: 12px; }
  .vis-legend b { font-size: 13px; }
}

/* Feld-Sichtbarkeit: Dialog nutzt die volle Fensterhöhe, die Liste füllt den Platz zwischen Kopf und Leiste */
@media (min-width: 721px) {
  #visibility-overlay .overlay-box { display: flex; flex-direction: column; height: calc(100vh - 10vh); overflow: hidden; }
  #visibility-overlay .vis-groups { flex: 1 1 auto; min-height: 0; max-height: none; }
  #visibility-overlay .vis-bar { position: static; flex: none; margin-top: 14px; }
}
@media (max-width: 720px) {
  #visibility-overlay .overlay-box { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); overflow: hidden; }
  #visibility-overlay .vis-groups { flex: 1 1 auto; min-height: 0; max-height: none; }
  #visibility-overlay .vis-bar { position: static; flex: none; }
}

/* Prüf-Arbeitsplatz: links die Warteschlange, rechts der gewählte Eintrag */
.review-count { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 2px 12px; border-radius: 999px; font: 700 14px var(--font-sans); background: var(--accent-soft); color: var(--accent-text); }
.review-box { display: flex; flex-direction: column; }
@media (min-width: 721px) { .review-box { height: calc(100vh - 10vh); overflow: hidden; } }
.review-work { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 12px; }
.review-toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); }
.review-all { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.review-all input, .review-check input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.review-selcount { font-size: 14px; color: var(--muted); margin-right: auto; }
.review-toolbar .pbtn { min-height: 38px; }
.pbtn.armed { box-shadow: 0 0 0 3px var(--focus-ring); }
.pbtn:disabled { opacity: .45; cursor: default; }
.review-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; flex: 1 1 auto; min-height: 0; }
.review-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 2px 6px 2px 2px; }
.review-card { display: flex; align-items: stretch; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.review-card.active { border-color: var(--accent); background: var(--accent-soft); }
.review-check { display: flex; align-items: center; padding: 0 4px 0 12px; margin: 0; cursor: pointer; }
.review-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 6px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.review-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-main strong { font-size: 15px; overflow-wrap: anywhere; }
.review-main .type { font-size: 13px; color: var(--muted); }
.review-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.rv-badge { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.rv-badge.warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.rv-badge.info { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.review-pane { min-width: 0; overflow-y: auto; padding: 2px 6px 2px 2px; display: flex; flex-direction: column; gap: 12px; }
.review-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 20px var(--font-display); overflow-wrap: anywhere; }
.review-head .type-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); flex: none; }
.review-head .type-ico .pic { width: 22px; height: 22px; }
.review-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.review-ts { white-space: nowrap; }
.review-hints { display: flex; flex-direction: column; gap: 8px; }
.rv-hint { padding: 10px 14px; border-radius: 12px; font-size: 14px; border: 1.5px solid var(--border); }
.rv-hint ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rv-hint.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.rv-hint.info { background: var(--surface-2); }
.rv-hint.ok { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.rv-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 10px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--border); font-weight: 600; }
.rv-link { border: 0; background: none; padding: 0; font: 700 14px var(--font-sans); color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.review-mapbox { border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border); }
.review-map { height: 240px; background: var(--map-bg); }
.review-facts .detail-group { grid-column: auto; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: sticky; bottom: 0; padding: 10px 0 2px; background: var(--surface); border-top: 1.5px solid var(--border); }
.review-actions .pbtn { min-height: 44px; padding: 0 20px; font-size: 15px; }
.review-next { font-size: 13px; color: var(--muted); }
.review-recent { margin-top: 12px; border-top: 1.5px solid var(--border); padding-top: 8px; flex: none; }
.review-recent > summary { cursor: pointer; font: 700 15px var(--font-display); padding: 6px 0; }
.review-recent .recent-list { max-height: 26vh; overflow-y: auto; margin-top: 6px; }
/* Aufgeklappt nutzt die Liste den freien Platz der Box: ohne Warteschlange die ganze Resthöhe, mit Warteschlange bis zu 40 %
   (die Warteschlange bleibt die Hauptsache). Der Inhalt eines <details> liegt in ::details-content — der muss mitwachsen. */
@media (min-width: 721px) {
  .review-recent[open] { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  .review-work:not(.hidden) ~ .review-recent[open] { flex: 0 1 40%; }
  .review-recent[open]::details-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .review-recent[open] .recent-list { flex: 1 1 auto; min-height: 0; max-height: none; }
}
.review-count[hidden] { display: none; }   /* sonst stand ohne Zähler eine leere Pille neben dem Titel */
.pending-empty { padding: 40px 16px; text-align: center; font: 700 18px var(--font-display); color: var(--muted); }
.reject-reasons { border: 0; padding: 0; margin: 0 0 8px; }
.reject-reasons legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 8px; }
.reject-presets { display: flex; flex-direction: column; gap: 6px; }
.reject-presets input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reject-presets label { display: block; margin: 0; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.reject-presets label:hover { border-color: var(--accent); }
.reject-presets input:checked + label { border-color: var(--text); background: var(--text); color: var(--surface); font-weight: 700; }
.reject-presets input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.reject-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
.reject-actions .pbtn { min-height: 46px; padding: 0 22px; font-size: 15px; }
@media (max-width: 900px) {
  .review-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .review-list { max-height: 34vh; flex: none; }
  .review-pane { overflow: visible; flex: none; }
  .review-actions { position: static; }
}

/* Prüf-Arbeitsplatz: Feinschliff (globale Regeln für label/button im Dialog überstimmen) */
.review-pane > * { flex: none; }
.review-box label.review-all { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.review-box label.review-check { display: flex; align-items: center; margin: 0; padding: 0 4px 0 12px; }
.rv-hint li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rv-link { width: auto; display: inline; min-height: 0; }
#reject-text { width: 100%; box-sizing: border-box; }
.reject-reasons { min-width: 0; }
@media (max-width: 900px) {
  .review-grid { grid-auto-rows: max-content; }
  .review-list { min-height: min(200px, 34vh); }
}
.rv-badge.hist { background: var(--surface-2); color: var(--text); border-color: var(--text); }
.rv-hint.hist { background: var(--surface-2); border-color: var(--text); }

/* Verwaltungsmenü in der Kopfzeile */
.admin-menu { position: relative; }
@media (max-width: 720px) { .admin-menu { order: 4; } }
.menu-chevron { margin-left: 8px; font-size: 12px; }
.admin-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; z-index: 1300; padding: 6px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; box-shadow: 0 14px 34px rgba(52,52,52,.22);
}
html.dark .admin-menu-list { box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.admin-menu-list[hidden] { display: none; }
.admin-menu-list [role="menuitem"] {
  width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; text-align: left;
  font: 600 14px var(--font-sans); color: var(--text); cursor: pointer; white-space: nowrap;
}
.admin-menu-list [role="menuitem"]:hover, .admin-menu-list [role="menuitem"]:focus-visible { background: var(--accent-soft); }
.admin-menu-list [role="menuitem"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -2px; }
#export-go { margin-top: 14px; min-height: 46px; padding: 0 22px; font-size: 15px; }
#export-status { width: 100%; }

@media (max-width: 720px) {
  .admin-menu-list { left: 0; right: auto; max-width: calc(100vw - 32px); }
}

/* Konto-Menü (Name, Passwort ändern, Abmelden) */
#account-menu-btn .pic { margin-right: 8px; }
#account-menu-btn #role-label { font-size: inherit; font-weight: inherit; color: inherit; }
.account-menu .admin-menu-list { min-width: 220px; }
.menu-head { padding: 8px 14px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.menu-head strong { font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 720px) { #account-menu-btn { order: 3; } .account-menu { order: 3; } .account-menu .admin-menu-list { left: auto; right: 0; } }

/* ============================================================
 * Farbschema je Rolle (Attribut data-scheme auf <html>, gesetzt von panel.js applyScheme)
 * ============================================================
 * Gast und Verwalter: LSB-Grün (Standard, keine eigenen Regeln nötig). Moderator: LSB-Orange. Admin: LSB-Rot.
 * Es werden nur die Akzent-Variablen getauscht, alle var()-Regeln (Knöpfe, Chips, Marker, Ringe, Fokus, Abzeichen)
 * ziehen mit. Je Darstellung (hell, dunkel, hoher Kontrast, beides) eigene Werte, damit Text und Flächen
 * die Kontraste (AA) halten: Orange trägt dunklen Text, Rot und die HC-Varianten weißen bzw. sehr dunklen Text.
 * Reihenfolge und Spezifität: html.hc.dark[…] > html.hc[…]/html.dark[…] > html[…]. */
html[data-scheme="orange"] {
  --accent: #f9b031; --accent-dark: #c98210; --accent-light: #fde2a8; --accent-soft: #fff3dc;
  --accent-text: #8a5200; --accent-hover: #fbc55c; --on-accent: #343434; --focus-ring: #c98210;
  --header-bg-role: linear-gradient(180deg, #fffaf0 0%, #fff3dc 100%);
}
html[data-scheme="red"] {
  --accent: #c62828; --accent-dark: #a11c1c; --accent-light: #f6c9c4; --accent-soft: #fdecea;
  --accent-text: #c62828; --accent-hover: #ab2020; --on-accent: #ffffff; --focus-ring: #a11c1c;
  --header-bg-role: linear-gradient(180deg, #fdf4f3 0%, #fbeae8 100%);
}
html.dark[data-scheme="orange"] {
  --accent: #f9b031; --accent-dark: #a86a00; --accent-light: #4a3611; --accent-soft: #3a2d14;
  --accent-text: #ffc966; --accent-hover: #fbc55c; --on-accent: #1f1600; --focus-ring: #ffc966;
  --header-bg-role: linear-gradient(180deg, #2e2719 0%, #262016 100%);
}
html.dark[data-scheme="red"] {
  --accent: #d32f2f; --accent-dark: #a11c1c; --accent-light: #4a201d; --accent-soft: #3a1f1d;
  --accent-text: #ff8a80; --accent-hover: #b71c1c; --on-accent: #ffffff; --focus-ring: #ff8a80;
  --header-bg-role: linear-gradient(180deg, #2c1e1c 0%, #241b1a 100%);
}
html.hc[data-scheme="orange"] {
  --accent: #9a5c00; --accent-dark: #7a4900; --accent-light: #ffe5b8; --accent-soft: #ffefd0;
  --accent-text: #7a4900; --accent-hover: #7a4900; --on-accent: #ffffff; --focus-ring: #000000;
}
html.hc[data-scheme="red"] {
  --accent: #b71c1c; --accent-dark: #8e1414; --accent-light: #f6cbc7; --accent-soft: #fbe3e0;
  --accent-text: #8e1414; --accent-hover: #8e1414; --on-accent: #ffffff; --focus-ring: #000000;
}
html.hc.dark[data-scheme="orange"] {
  --accent: #ffc266; --accent-dark: #cc8a1e; --accent-light: #4a3611; --accent-soft: #3a2d14;
  --accent-text: #ffd38a; --accent-hover: #ffd38a; --on-accent: #1a1a1a; --focus-ring: #ffffff;
}
html.hc.dark[data-scheme="red"] {
  --accent: #ff6e66; --accent-dark: #cc4a43; --accent-light: #4a201d; --accent-soft: #3a1f1d;
  --accent-text: #ffa49e; --accent-hover: #ff8a80; --on-accent: #1a1a1a; --focus-ring: #ffffff;
}

/* Änderung melden: Knopf im Detailfenster, Hinweise im Formular */
#detail-change { color: var(--text); }
.overlay-wide > .edit-actions #detail-change { background: var(--surface); border: 1.5px solid var(--border); }
.overlay-wide > .edit-actions #detail-change:hover { border-color: var(--accent); }
#change-note-row textarea { width: 100%; box-sizing: border-box; }

/* Prüf-Arbeitsplatz: Änderungsmeldungen */
.rv-badge.chg { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.review-check-none { display: block; width: 32px; flex: none; }
.rv-diff { width: 100%; border-collapse: collapse; font-size: 14px; }
.rv-diff th, .rv-diff td { padding: 8px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.rv-diff thead th { border-top: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rv-diff tbody th { font-weight: 600; color: var(--text); }
.rv-diff tr.conflict td, .rv-diff tr.conflict th { background: var(--warn-bg); }
.rv-diff input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.review-facts .rv-diff { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; }
/* Änderungsmeldung: die Gegenüberstellung (Entscheidung) steht vor der Karte */
.review-pane.kind-change > .review-head { order: 1; }
.review-pane.kind-change > .review-hints { order: 2; }
.review-pane.kind-change > .review-facts { order: 3; }
.review-pane.kind-change > .review-mapbox { order: 4; }
.review-pane.kind-change > .review-actions { order: 5; }
.review-pane.kind-change .review-map { height: 200px; }



/* Limits (Admin): Gruppen als Karten, je Einstellung Beschriftung + Beschreibung links, Zahlenfeld rechts */
.lim-groups { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 330px); min-height: 180px; overflow-y: auto; padding: 2px 4px 2px 0; }
.lim-group { border: 1.5px solid var(--border); border-radius: 16px; padding: 12px 16px 6px; background: var(--surface); min-width: 0; }
.lim-group h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font: 700 16px var(--font-display); color: var(--text); }
.lim-group h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }
.lim-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, auto); gap: 6px 24px; align-items: center; padding: 10px 0 10px 10px; border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.lim-row.changed { border-left-color: var(--accent); background: var(--accent-light); }
.lim-row.invalid { border-left-color: var(--red); }
.lim-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lim-text label { font-weight: 700; font-size: 14px; margin: 0; }
.lim-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.lim-ctrl { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; }
.lim-field { display: inline-flex; align-items: center; gap: 8px; }
.lim-field input { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.lim-row.invalid .lim-field input { border-color: var(--red); }
.lim-unit { font-size: 12.5px; color: var(--muted); width: 84px; }
.lim-range { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; width: 150px; text-align: right; }
.lim-reset { width: auto; min-height: 28px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 12.5px var(--font-sans); cursor: pointer; }
.lim-reset:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.lim-reset:disabled { opacity: .45; cursor: default; }
.lim-problem { flex-basis: 100%; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--red); }
.lim-problem:empty { display: none; }
.lim-groups:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: 16px; }
@media (max-width: 720px) {
  .lim-row { grid-template-columns: 1fr; }
  .lim-ctrl { justify-content: flex-start; }
  .lim-range { width: auto; text-align: left; }
  .lim-unit { width: auto; min-width: 60px; }
  .lim-problem { text-align: left; }
}

/* Meine Sportstätten (Verwalter): Leiste mit „Neue Sportstätte“ und Filter, Karten mit grünem Streifen */
.managed-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.overlay-box .add-pill {
  display: inline-flex; align-items: center; gap: 6px; width: auto;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); font: 700 14px var(--font-sans); cursor: pointer;
}
.overlay-box .add-pill:hover { background: var(--accent-hover); color: var(--on-accent); }
.overlay-box #managed-filter { flex: 1 1 220px; min-width: 0; }
.overlay-box #managed-sort { flex: 0 1 190px; min-width: 0; }
.overlay-box #managed-export { width: auto; flex: 0 0 auto; }
.overlay-box #managed-export:disabled { opacity: .45; cursor: default; }
#managed-list .pending-item { border-left-color: var(--accent, #82bb25); }
#managed-list .pending-item.st-pending { border-left-color: var(--orange, #f9b031); }
#managed-list .pending-item.st-rejected { border-left-color: var(--red); }
#managed-list .pending-actions .pbtn { margin: 0; }
#managed-list .pending-item.st-draft { border-left-color: var(--border); border-left-style: dashed; }
#managed-list .pending-name { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
#managed-list .pub-toggle { font-size: 13px; font-weight: 600; color: var(--text); min-height: 32px; }

/* Hinzufügen: „Als Entwurf speichern“ (ruhig) neben „Speichern und veröffentlichen“ (Akzent) */
.add-buttons { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
/* Beide sind Absende-Knöpfe: „#add-form button[type=submit]“ (weiter oben) gab dem Entwurf-Knopf sonst 12 px Abstand
   oben und die Akzentfläche — deshalb hier mit #add-form gleich hoch gewichtet und beide ohne eigenen Außenabstand. */
#add-form .add-buttons #add-btn { margin-top: 0; flex: 2 1 220px; width: auto; }
#add-form #add-draft-btn {
  margin-top: 0; flex: 1 1 180px; width: auto; min-height: 48px; padding: 0 18px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font: 700 15px var(--font-sans); cursor: pointer;
}
#add-form #add-draft-btn:hover { background: var(--hover); border-color: var(--accent); color: var(--text); }

/* Alle Sportstätten (Redaktion): Status-Chips, Suche, Verwalter, Sortierung */
.ov-status-wrap { display: block; margin: 0 0 10px; }
.ov-status-wrap .chip-row { flex-wrap: wrap; }
.ov-status-wrap .chip { flex: 0 1 auto; padding: 0 14px; }
.ov-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.overlay-box .ov-filters #ov-q { flex: 2 1 240px; min-width: 0; }
.overlay-box .ov-filters select { flex: 1 1 160px; min-width: 0; }
#ov-list .pending-item { border-left-color: var(--accent, #82bb25); }
#ov-list .pending-item.st-pending { border-left-color: var(--orange, #f9b031); }
#ov-list .pending-item.st-rejected { border-left-color: var(--red); }
#ov-list .pending-item.st-draft { border-left-color: var(--border); border-left-style: dashed; }
#ov-list .pending-name { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
#ov-list .pending-actions .pbtn { margin: 0; }

/* Nutzerverwaltung: zugeordnete Sportstätten eines Verwalters (aufklappbar) */
.user-facs { margin-top: 8px; font-size: 13px; color: var(--muted); max-height: 240px; overflow-y: auto; }
.user-facs ul { margin: 0; padding-left: 18px; }
.user-facs li { margin: 3px 0; }
.user-fac-link {
  width: auto; padding: 0; border: 0; background: none; color: var(--text); font: 600 13px var(--font-sans);
  text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; cursor: pointer;
}
.user-fac-link:hover { background: none; color: var(--accent-text); }

/* Nutzerverwaltung: Rollen-Chips links, Suche und Sortierung rechts — bei wenig Platz untereinander */
.users-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 14px 0 4px; }
.users-toolbar .ov-status-wrap { flex: 0 1 auto; margin: 0; }
.users-toolbar .ov-filters { flex: 1 1 420px; margin: 0; justify-content: flex-end; }
.overlay-box .ov-filters #users-q { flex: 2 1 220px; min-width: 0; max-width: 480px; }
.overlay-box .users-toolbar .ov-filters select { flex: 0 1 200px; }
.users-new-box { margin-top: 10px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.users-new-box[hidden] { display: none; }
#users-new-box .users-add { grid-template-columns: 1fr 1fr 110px auto auto; }
@media (max-width: 560px) { #users-new-box .users-add { grid-template-columns: 1fr; } }
#users-overlay .add-pill[hidden] { display: none; }
/* Nutzerzeilen: Streifen in der Farbe der Rolle DIESES Nutzers, wie sein Abzeichen (Verwalter grün, Moderator orange,
   Admin rot) — unabhängig davon, wer angemeldet ist. */
#users-list .user-row.rb-green { border-left-color: #82bb25; }
#users-list .user-row.rb-orange { border-left-color: #f9b031; }
#users-list .user-row.rb-red { border-left-color: #c62828; }
/* Zeile: Angaben links, Knöpfe rechts */
.user-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.user-main { flex: 1 1 260px; min-width: 0; }
#users-list .user-actions { margin-top: 0; justify-content: flex-end; }
#users-list .user-actions .pbtn { margin: 0; }

/* Merkmale je Sportstättentyp (static/merkmale.js) */
.merkmale-form { display: flex; flex-direction: column; gap: 14px; grid-column: 1 / -1; }
.merkmale-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; }
.merkmale-group h4 { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--text); }
.merkmal fieldset { border: 1px solid var(--border); border-radius: 5px; margin: 0; padding: 6px 10px 8px; min-width: 0; }
.merkmal legend { font-size: 12.5px; font-weight: 600; padding: 0 4px; }
.merkmal > label { display: block; font-size: 12.5px; }
.merkmal select { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; font-family: inherit; background: var(--bg); box-sizing: border-box; }
#add-form .merkmal-opt, #edit-form .merkmal-opt, .merkmal label.merkmal-opt { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 2px 0; margin: 0; font-size: 12.5px; font-weight: 400; }
#add-form .merkmal-opt input, #edit-form .merkmal-opt input, .merkmal label.merkmal-opt input { width: auto; height: auto; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.merkmal-hint { display: block; color: var(--muted); font-size: 11.5px; font-style: italic; margin: 2px 0 4px; }

/* Standort: Chip mit Zähler und Kachelansicht (siehe updateStandortGroups in app.js) */
.smarker.group { position: relative; }
.sgroup-n {
  position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box;
  border-radius: 10px; background: var(--accent-dark); color: #fff; border: 2px solid var(--marker-bg);
  font: 700 11px/15px var(--font-sans); text-align: center; font-variant-numeric: tabular-nums;
}
html.hc .sgroup-n { background: #000; color: #fff; border-color: #fff; }
.standort-sub { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.standort-tiles { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(200px, 240px)); justify-content: center; gap: 12px; padding: 2px 2px 10px; }
.standort-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; cursor: pointer;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font: inherit;
}
.standort-tile:hover { background: var(--hover); border-color: var(--accent); }
.standort-tile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.standort-tile strong { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.standort-tile .st-type { font-size: 12.5px; font-weight: 600; color: var(--accent-text); text-transform: none; }
.standort-tile .st-extra { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* Ausstattung mit Barrierestufe (siehe createAmenityForm in merkmale.js) */
.amenity-form { display: flex; flex-direction: column; gap: 12px; grid-column: 1 / -1; }
.amenity-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.amenity-help { font-size: 12.5px; color: var(--muted); }
.amenity-help summary { cursor: pointer; }
.amenity-help p { margin: 6px 0 0; max-width: 70ch; }
.amenity-area { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.amenity-area h4 { margin: 0; font-size: 13px; }
.amenity-none { margin: 0; font-size: 12.5px; color: var(--muted); }
.amenity-rows { display: flex; flex-direction: column; gap: 6px; }
.amenity-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.amenity-row select, .amenity-row input[type=text] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; font: inherit; font-size: 13px; background: var(--bg); min-width: 0; width: auto; }
.amenity-row .amenity-teil { flex: 1 1 160px; }
#add-form .amenity-sex, #edit-form .amenity-sex { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 400; }
.amenity-sex input { width: auto; height: auto; padding: 0; margin: 0; accent-color: var(--accent); }
.amenity-add, .amenity-del { font: inherit; font-size: 12.5px; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text); padding: 4px 10px; }
.amenity-add { align-self: flex-start; }
.amenity-add:hover, .amenity-del:hover { border-color: var(--accent); background: var(--hover); }
/* Die Overlay-Regeln (volle Breite, große Eingaben) gelten sonst auch hier */
.overlay-box .amenity-add, .overlay-box .amenity-del { width: auto; min-width: 0; margin: 0; padding: 4px 10px; height: auto; }
.overlay-box .amenity-row select, .overlay-box .amenity-row input[type=text] { width: auto; height: auto; min-height: 0; padding: 6px 8px; margin: 0; }
.overlay-box .amenity-row .amenity-teil { flex: 1 1 160px; }
.overlay-box .amenity-area h4 { margin: 0; }

/* Standort-Fenster: mittig auf dem Bildschirm, so groß wie seine Kacheln (Spaltenzahl setzt fitStandortCols in app.js) */
#standort-overlay { align-items: center; padding-top: 0; }
.standort-box { width: fit-content; min-width: min(360px, 100%); max-width: 94vw; }
@media (max-width: 720px) {
  #standort-overlay { align-items: flex-end; }
  .standort-box { width: 100%; max-width: 100%; }
  .standort-tiles { grid-template-columns: 1fr; }
}