:root {
  /* Vollstaendige Farbskalen (Nutzervorgabe 2026-08-15, "zum Hinterlegen",
     ueberarbeitet 2026-08-16 mit neuen OKLCH-basierten Werten) - bewusst
     als eigene, rohe Stufen-Tokens getrennt von den semantischen Tokens
     darunter (--accent, --button-color etc.), die teils auf einzelne
     Stufen hieraus zeigen, teils eigenstaendig bleiben (--accent ist ein
     anderes, kraeftigeres Gruen als die Green-Skala hier - die ist eher
     ein gedaempftes Dunkelgruen, fuer Buttons gedacht). Green-500 und
     Neutral-50 sind laut Nutzervorgabe die "Default"-Stufen der jeweiligen
     Skala - deshalb zeigen --button-color/--bg-surface genau darauf.
     Orange-Skala (unveraendert von 2026-08-15) bekommt mit dem "Pin
     veroeffentlichen"-CTA im Neuer-Pin-Sheet ihren ersten echten
     UI-Einsatz. */
  --blue-50: #f5f8fc;
  --blue-100: #e9edf3;
  --blue-200: #d3dae2;
  --blue-300: #b5beca;
  --blue-400: #8390a0;
  --blue-450: #4f5d71; /* Mitte zwischen 400 und 500 (OKLab-Mischung) */
  --blue-500: #1f2f44;
  --blue-600: #101d2f;
  --blue-700: #09111b;
  --blue-800: #050a10;
  --blue-900: #020305;

  --orange-50: #fef2f3;
  --orange-100: #fcdcdf;
  --orange-200: #f6b9be;
  --orange-300: #ed858e;
  --orange-400: #e45864;
  --orange-500: #d42534;
  --orange-600: #b9202d;
  --orange-700: #961822;
  --orange-800: #701119;
  --orange-900: #4d0d12;

  --neutral-50: #eff0f1;
  --neutral-100: #e5e7e9;
  --neutral-200: #dadbdd;
  --neutral-300: #c6c7c9;
  --neutral-400: #adaeb0;
  --neutral-500: #929394;
  --neutral-600: #77746d;
  --neutral-700: #525355;
  --neutral-800: #363637;
  --neutral-900: #1e1e1f;

  /* Kategorie-Farben fuer Pin-Badges/Kategorie-Auswahl (Nutzervorgabe
     2026-08-16 per Mockup, keine exakten Hex-Werte genannt - Naeherung an
     die dort gezeigten Punktfarben, spaeter bei Bedarf feinjustierbar). */
  --cat-suche: #4b6fa0;
  --cat-verkaufe: #3f628f;
  --cat-gefunden: #a69327;
  --cat-verloren: #c32230;
  --cat-mfg-gesucht: #8b5fa8;
  --cat-mfg-angebot: #2e8b92;
  --cat-soziales: #a8447a;
  --cat-sonstiges: #606367;

  --accent: #2e568b;
  --accent-dark: #254670;
  --accent-light: #e3ebf6;
  --danger: #c0392b;
  --danger-light: #fdecea;
  --text-primary: #1c1c1a;
  /* Nutzeranforderung 2026-08-15: keine graue Schrift mehr - beide zeigen
     jetzt auf --text-primary statt eigene Grautoene zu haben. Als Tokens
     (statt sie ueberall im Stylesheet einzeln zu ersetzen) belassen, damit
     bestehende Stellen, die zwischen "normal" und "gedaempft" unterscheiden
     wollen, spaeter gezielt wieder differenziert werden koennen. */
  --text-secondary: var(--text-primary);
  --text-muted: var(--text-primary);
  /* --border/--bg-subtle zeigten bisher auf eigene, fast identische
     Hex-Werte - mit der ueberarbeiteten Neutral-Skala (2026-08-16) auf die
     naechstliegenden Stufen umgezogen (Neutral-200/-100), statt Werte
     doppelt zu pflegen. */
  --border: var(--neutral-200);
  --bg-surface: var(--neutral-50);
  --bg-subtle: var(--neutral-100);
  /* Nutzeranforderung 2026-08-15: eigene, dunkle Button-Farbe getrennt vom
     gruenen --accent (der bleibt fuer Auswahl-/Aktiv-Zustaende wie Tabs,
     Kategorie-/Icon-Auswahl, Custom-Scrollbar). */
  --button-color: var(--blue-500);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0,.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0,.10), 0 1px 4px rgba(0, 0, 0,.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0,.18), 0 2px 8px rgba(0, 0, 0,.08);
  /* Nutzeranforderung 2026-08-15: einheitlich 25px auf Boxen/Buttons/
     Inputfeldern - alle vier Radius-Tokens zeigen deshalb auf denselben
     Wert (Namen bleiben fuer die vielen bestehenden var(--radius-*)-Stellen
     erhalten, nur der Wert ist jetzt ueberall gleich). Die runden
     Stellplatz-Badges (.pitch-pin .pc) haengen bewusst NICHT an diesen
     Tokens - eigene Kreisform, keine "Box". */
  --radius-sm: 25px;
  --radius-md: 25px;
  --radius-lg: 25px;
  --radius-pill: 25px;
}

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('libs/fonts/maven-pro/maven-pro-latin.woff2') format('woff2');
}

/* Nutzeranforderung 2026-08-15: Baloo 2 fuer Headlines, Maven Pro fuer
   Fliesstext (bleibt body-weit gesetzt) - selbst gehostet wie Maven Pro,
   kein CDN (Projekt-Konvention, siehe CLAUDE.md). Variable Font, ein
   einzelnes woff2 pro Subset deckt den gesamten Schnittbereich 400-800 ab. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('libs/fonts/baloo-2/baloo2-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
  src: url('libs/fonts/baloo-2/baloo2-latin-ext.woff2') format('woff2');
}
h1, h2, h3, .brand {
  font-family: 'Baloo 2', 'Maven Pro', system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ---------- Scrollbar global ausgeblendet (Nutzerwunsch 2026-08-16,
   4. Runde) - loest die vorherige eingefaerbte Custom-Scrollbar ab.
   Bleibt scrollbar (Wischen/Mausrad/Tastatur funktionieren weiter), nur
   ohne sichtbaren Balken. */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  font-family: 'Maven Pro', system-ui, sans-serif;
  color: var(--text-primary);
  background: var(--bg-surface);
  height: 100vh;
  /* dvh: auf Handy/Tablet ist 100vh hoeher als der sichtbare Bereich, die
     untere Browserleiste schneidet sonst den Kartenrand (und den Pin-Knopf) ab. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ---------- Topbar ----------
   Redesign 2026-08-16 per Mockup: loest die reine Icon-Leiste vom Vortag ab.
   Der Header ist jetzt eine schwebende, dunkle Pillen-Karte (Margin auf allen
   Seiten statt randlos+Verlauf) statt einer randlosen, in die Karte
   ausblendenden Flaeche - deshalb entfaellt das vorherige ::after (der
   Verlauf ergab nur bei einem randlosen, hellen Header Sinn). Karte/Termine
   sind jetzt ein beschrifteter Segmented-Switch statt Icon-Tabs, #profileBtn
   ein runder Avatar (siehe .avatar-btn) statt eines weiteren Icon-Tabs. */
.topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  z-index: 10;
}
/* Nutzerkorrektur 2026-08-16 (Folgetag): die dunkle Pillen-Karte vom Vortag
   wieder verworfen - .topbar selbst ist wieder hintergrundlos/schattenlos,
   NUR .tabs sieht wie ein Switch aus. Der Verlauf auf die Karte darunter
   (::after) kehrt damit ebenfalls zurueck (ergab beim randlosen Header
   wieder Sinn, siehe Git-History fuer die kurzzeitig entfernte Version). */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 2.5rem;
  background: linear-gradient(180deg, var(--bg-surface) 0%, transparent 100%);
  pointer-events: none;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--button-color);
  white-space: nowrap;
}
.brand-sub {
  font-family: 'Maven Pro', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-500);
}
.tabs {
  display: flex;
  gap: 0.15rem;
  flex: 1;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 0.2rem;
}
.tab-btn {
  background: transparent;
  border: none;
  flex: 1;
  padding: 0.45rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.tab-btn.active { background: var(--button-color); color: #fff; }
.avatar-btn {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.avatar-btn { position: relative; }
.mod-badge { background: #dc2626; color: #fff; }
.avatar-btn.active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65); }
/* Profilbild oder selbst gewaehlte Avatar-Farbe fuellt den Kreis komplett
   aus (Nutzeranforderung 2026-08-16, 7. Runde) statt des festen
   --accent-Hintergrunds von .avatar-btn - der bleibt nur noch sichtbar,
   wenn niemand eingeloggt ist (Personen-Icon ohne .avatar-btn-face). */
.avatar-btn-face { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* .avatar-img gilt sowohl fuer .avatar-btn-face als auch .avatar-sm (siehe
   avatarHtml() in app.js, das dieselbe Klasse fuer beide Kontexte nutzt). */
.avatar-img { object-fit: cover; }

/* ---------- Buttons ---------- */
.primary-btn {
  background: var(--button-color);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.3rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.primary-btn:hover { filter: brightness(1.3); }
/* Orangener CTA fuer "Pin veroeffentlichen" (Nutzeranforderung 2026-08-16
   per Mockup) - erster echter UI-Einsatz der bislang nur vorbereiteten
   Orange-Skala (siehe --orange-* in :root), bewusst als Modifier statt
   .primary-btn selbst umzufaerben, da andere primaere Buttons (z.B.
   "Speichern" im Profil) weiterhin die dunkelgruene Standardfarbe nutzen. */
.primary-btn.cta-orange { background: var(--orange-500); width: 100%; padding: 0.85rem; font-size: 1.05rem; }
.primary-btn.cta-orange:hover { filter: brightness(1.1); }
.secondary-btn {
  background: none;
  color: var(--button-color);
  border: 1.5px solid var(--button-color);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  font-weight: 600;
}

/* ---------- Map ---------- */
main#mapMain { flex: 1; position: relative; overflow: hidden; }
#map {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Filter/Neuer-Pin schweben als Toolbar direkt auf der Karte statt in einer
   eigenen Leiste darueber - Nutzeranforderung 2026-08-15. pointer-events:none
   auf dem Wrapper lässt Kartenklicks im Zwischenraum durch, die Buttons
   selbst holen sich pointer-events zurueck. z-index 15 (Nutzerkorrektur
   2026-08-16, Folgetag): lag vorher unter dem Header (z-index 10) und
   wirkte dadurch sichtbar "unter" ihm liegend. */
.map-toolbar {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  pointer-events: none;
}
.map-toolbar > button { pointer-events: auto; box-shadow: var(--shadow-sm); }
/* Der Pin-Knopf bleibt auch bei offener Detail-Karte sichtbar (Nutzerwunsch 2026-10-10); ein Klick schliesst die Karte */

/* Zoom-Plus/Minus auf Mobilgeraeten weg (Nutzeranforderung 2026-08-15) -
   Pinch-to-zoom reicht dort, die Buttons kollidieren sonst mit der
   schwebenden Toolbar. */
@media (max-width: 899.98px) {
  .leaflet-control-zoom { display: none; }
}

/* Wiederverwendbarer Slide-Handle (Nutzeranforderung 2026-08-16, auch im
   Neuer-Pin-Sheet verwendet) - der eigentliche Touch/Drag-Bereich ist
   groesser als der sichtbare Balken (mehr Trefferflaeche), die Wisch-Logik
   dazu sitzt in app.js (setupSheetDrag()). */
.sheet-handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6rem 1.4rem;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}
.sheet-handle span {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--neutral-400);
}

/* Detail-Panel als echtes Overlay UEBER der Karte (Nutzerkorrektur
   2026-08-16, Folgetag: die Karte "verformte den Container" statt dass das
   Panel als Layer darueber lag - die alte Loesung liess #map per Klasse auf
   38% Hoehe schrumpfen). Jetzt behaelt #map immer 100% Hoehe, das Panel ist
   fix am unteren Rand verankert und faehrt per CSS-Transition (translateY)
   rein/raus statt des vorherigen rAF-Loops, der Kartenhoehe UND Panel-top
   synchron animierte (dafuer gab es keinen Grund mehr, sobald die Karte
   selbst nicht mehr mitschrumpft) - siehe animateMapPanel() in app.js.
   `overflow:hidden` auf main#mapMain sorgt dafuer, dass das off-screen
   transformierte Panel bei geschlossenem Zustand weder sichtbar noch
   klickbar ist. Hintergrund ist wieder die globale --bg-surface (Nutzerwunsch
   2026-08-16) - der Grund fuer das vorherige feste Weiss (Panel verschmolz
   optisch mit der Luecke zur Karte) entfaellt mit dem Overlay-Layout, da es
   keine solche Luecke mehr gibt. */
.detail-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 12;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: 25px 25px 0 0;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
main#mapMain.detail-open .detail-panel { transform: translateY(0); }

.detail-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1.2rem 0.4rem 1.4rem;
}
.distance-chip {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.75;
  white-space: nowrap;
}
/* margin-left:auto statt justify-content:space-between auf dem Elternteil -
   der Distanz-Chip ist meistens hidden (kein Geolocation-Zugriff), wodurch
   space-between mit nur einem sichtbaren Kind (dem X) dieses faelschlich
   nach LINKS statt rechts geschoben haette. */
/* Kopfzeile nach Mockup (2026-10-02): Kategorie links, rotes
   Schliessen-X rechts. Herz/Merken/"..." sitzen in der Aktionszeile unter
   dem Text (.detail-action-row). */
.detail-head-eyebrow { flex: 1; min-width: 0; }
.detail-head-eyebrow .cat-eyebrow { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Knopf-Farben nach Mockup (2026-10-02): je eine helle Flaeche mit
   gleichfarbig dunklem Umriss-Icon, kein Rand. X neutral sandgrau. */
:root {
  --btn-like-bg: #f7d4d7; --btn-like-fg: #d72635;
  --btn-save-bg: #d8e5eb; --btn-save-fg: #3d6c88;
  --btn-contact-bg: #d5d8dc; --btn-contact-fg: #5a6934;
  --btn-close-bg: #e0e1e2; --btn-close-fg: #2b2a27;
}
#detailPanelCloseBtn {
  width: 2.6rem;
  height: 2.6rem;
  background: var(--btn-close-bg);
  color: var(--btn-close-fg);
  font-size: 1.05rem;
}
#detailPanelCloseBtn:hover { filter: brightness(0.95); }
#postMenuBtn {
  width: 2.4rem;
  height: 2.4rem;
  background: transparent;
  color: var(--text-muted);
  opacity: 0.8;
}
#postMenuBtn:hover { background: var(--bg-subtle); opacity: 1; }
/* Aktionszeile: Hauptaktion (Kontakt bzw. RSVP) fuellt die Breite, daneben
   gleich hohe, abgerundet-quadratische Herz/Merken/"..."-Knoepfe. */
.detail-action-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin: 1.1rem 0 0.4rem;
}
.detail-action-row .like-box { gap: 0.5rem; }
.detail-action-row .rsvp-buttons { flex: 1; min-width: 0; }
.detail-action-row .rsvp-btn { border-radius: 14px; padding: 0 0.5rem; min-width: 0; white-space: nowrap; }
.detail-action-row .like-btn,
.detail-action-row .icon-btn {
  height: 3rem;
  min-width: 3rem;
  justify-content: center;
  padding: 0 0.8rem;
  border-radius: 14px;
  border: none;
  font-size: 1.05rem;
}
.detail-action-row .icon-btn { width: 3rem; padding: 0; }
.detail-action-row .like-btn { background: var(--btn-like-bg); color: var(--btn-like-fg); }
.detail-action-row .like-btn span { color: var(--btn-like-fg); }
.detail-action-row .save-btn { background: var(--btn-save-bg); color: var(--btn-save-fg); }
.detail-action-row .like-btn:hover,
.detail-action-row .icon-btn:hover { filter: brightness(0.96); }
/* Aktiv: Icon gefuellt (fas statt far, siehe renderLikeBox()) + Flaeche
   etwas kraeftiger. */
.detail-action-row .like-btn.active { background: #ec949b; color: #b3202c; }
.detail-action-row .like-btn.active span { color: #b3202c; }
.detail-action-row .save-btn.active { background: #a7c3d1; color: #2c5670; }
#rsvpSummary { justify-content: flex-start; margin: 0.2rem 0 0.6rem; }
#rsvpSummary .rsvp-summary { font-weight: 400; font-size: 0.9rem; color: var(--text-muted); }
#rsvpSummary .rsvp-avatars:empty { display: none; }
.detail-panel-scroll { flex: 1; overflow-y: auto; padding: 0 1.4rem 1.6rem; }
.detail-panel-scroll h3 { margin: 0.2rem 1.6rem 0.3rem 0; font-size: 1.85rem; }
.detail-panel-scroll .pin-meta { color: var(--text-muted); font-size: 1rem; margin-bottom: 0.5rem; }
.detail-panel-scroll p { font-size: 1rem; margin: 0.4rem 0; }
/* Beschreibungstext (Nutzervorgabe 2026-10-02) - nur direkte Absaetze, damit
   Kommentartexte und Fehlermeldungen ihre eigenen Abstaende behalten. */
.detail-panel-scroll > p:not(.form-error) { font-size: 1.1rem; margin: 0; line-height: 1.4; }

/* Handy/Tablet (Nutzerwunsch 2026-10-02): beim Scrollen faehrt erst das
   ganze Panel bis an den oberen Bildschirmrand hoch, erst danach scrollt
   der Inhalt. Umgesetzt als ein einziger nativer Scroll-Container ueber
   den ganzen Viewport (position:fixed entkommt dem overflow:hidden von
   main#mapMain und deckt auch die Topbar ab): ein unsichtbarer Abstandshalter
   (::before, Hoehe --sheet-offset aus animateMapPanel() in app.js) haelt
   das Sheet in Ruhelage an derselben Stelle wie vorher (untere 62% der
   Karte). pointer-events:none auf dem Container laesst Karten-Gesten im
   freien Bereich durch, das Sheet selbst holt sie sich zurueck - Touch-
   Scrollen auf dem Sheet scrollt trotzdem den Container (mit nativem
   Schwung). Handle + X kleben oben (sticky). Desktop: .detail-sheet und
   .detail-panel-top per display:contents neutral, Layout wie gehabt. */
@media (max-width: 899.98px) {
  .detail-panel {
    position: fixed;
    inset: 0;
    /* dvh statt inset:0 allein: auf Handy/Tablet ist die Layout-Hoehe sonst
       groesser als der sichtbare Bereich, die untere Browserleiste verdeckt
       dann den Abstand unter dem Kommentarfeld (Nutzerhinweis 2026-10-03). */
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
  }
  .detail-panel::-webkit-scrollbar { display: none; }
  .detail-panel::before {
    content: '';
    display: block;
    height: var(--sheet-offset, 38%);
  }
  .detail-sheet {
    pointer-events: auto;
    min-height: calc(100% - var(--sheet-offset, 38%));
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.18);
  }
  .detail-panel-top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-surface);
    border-radius: 25px 25px 0 0;
  }
  .detail-panel-scroll { flex: 1 0 auto; overflow: visible; }
}
@media (min-width: 900px) {
  .detail-sheet, .detail-panel-top { display: contents; }
}

/* Rundlicher Text-Button (Kommentar-Vollansicht "← <Post-Titel>" zurueck
   zur Hauptansicht - der Panel-Kopf selbst hat seit der Nutzerkorrektur
   2026-08-16 (Folgetag) nur noch ein X, das immer ganz schliesst). */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-subtle);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 0.8rem;
}

/* Dezenter runder Icon-Button - Detail-Panel-Schliessen-X, Neuer-Pin-
   Schliessen-X (loest das vorherige "..."-Kebab-Menue ab, siehe
   .detail-footer-actions fuer Melden/Loeschen). */
.icon-btn {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 50%;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

/* Melden/Loeschen ganz unten im Panel-Inhalt statt eines Kebab-Menues im
   Kopf (Nutzeranforderung 2026-08-16, Folgetag) - dezente Text-Buttons,
   Loeschen (falls berechtigt) links von Melden. */
.detail-footer-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.footer-action-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.footer-action-btn.danger { color: var(--danger); }

.pin-popup h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.pin-popup .pin-meta { color: var(--text-muted); font-size: 1rem; margin-bottom: 0.4rem; }
.pin-popup p { margin: 0.3rem 0; font-size: 1rem; }
.pin-popup .pin-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.pin-popup button {
  border: none;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  font-size: 1rem;
}
.pin-popup button.danger { color: var(--danger); }
.pin-popup button.info { background: var(--accent-light); color: var(--accent-dark); }

/* ---------- Leaflet-Popup/Tooltip eigenes Design ----------
   Nutzeranforderung 2026-08-15: kein Box-Shadow um Popups/Tooltips,
   dem Copyright-Hinweis (Attribution-Control) ein eigenes Design statt
   Leaflets Standard-Streifen geben. Radius bewusst NICHT der App-weite
   --radius-lg-Token (25px), sondern eigener, kleinerer 17px-Wert
   (Nutzerwunsch). Der Close-Button sitzt bei Leaflet per Default direkt
   in der Ecke (top:0/right:0) - fuer mehr Luft etwas eingerueckt und als
   dezenter runder Button statt nacktem "x"-Zeichen gestaltet; dafuer
   braucht .leaflet-popup-content oben etwas mehr Abstand, damit der
   Titel nicht am Button klebt. */
.leaflet-popup-content-wrapper {
  border-radius: 17px;
  box-shadow: none;
}
.leaflet-popup-content { margin: 20px 24px 13px 20px; }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-container a.leaflet-popup-close-button {
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 24px;
  transition: background 0.15s ease, color 0.15s ease;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
  background: var(--accent);
  color: #fff;
}
.leaflet-tooltip {
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 1rem;
  color: var(--text-primary);
  border: 1px solid var(--border);
}
/* Nutzeranforderung 2026-08-16: dezenter als zuvor - kleinere Schrift,
   durchscheinenderer Hintergrund statt vollem Weiss+Border. Folgetag:
   Sichtbarkeit auf 0.5 + Abstand zur Bildschirmkante (vorher flush in der
   Ecke, per margin auf dem Element selbst statt Leaflets Corner-Container). */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0 0.7rem 0.7rem 0;
}
.leaflet-control-attribution a { color: inherit; opacity: 0.8; }

/* ---------- Events ---------- */
main#eventsMain { flex: 1; overflow-y: auto; padding: 1.2rem 1.5rem; }
.events-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.events-head h2 { margin: 0; }
.events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; max-width: 720px; }
.events-list li {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1.1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.event-source-badge {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-left: 0.5rem;
}

.event-source-badge.umgebung { background: var(--accent-light); color: var(--accent-dark); }
.event-when { color: var(--text-muted); font-size: 1rem; margin-top: 0.2rem; }
.event-desc { font-size: 1rem; margin-top: 0.3rem; }
.reaction-buttons { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }
.reaction-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-secondary);
}
.reaction-btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
.reaction-btn .reaction-count { font-weight: 700; }
.event-actions button {
  border: none;
  background: transparent;
  color: var(--danger);
  font-size: 1rem;
}

/* ---------- Modals ---------- */
.modal-overlay[hidden] { display: none; }
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 19, 19, 0.55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  overflow-y: auto;
}
.modal {
  position: relative;
  background: var(--bg-surface); /* sandig statt Weiss (Nutzerwunsch 2026-10-02) */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}
.modal h2 { margin: 0 0 1rem; font-size: 1.15rem; }
/* Runder grauer Schliessen-Knopf in allen Modals (Nutzerhinweis 2026-10-03,
   vorher nacktes X, das im Login-Dialog die Tabs ueberlappte). */
.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  z-index: 2;
  width: 2.4rem; height: 2.4rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--btn-close-bg);
  font-size: 1.05rem;
  color: var(--btn-close-fg);
  line-height: 1;
}
.modal-close:hover { filter: brightness(0.95); }
/* Login/Registrieren: Tabs beginnen unter dem Schliessen-Knopf. */
#authModal .modal { padding-top: 4.2rem; }

/* ---------- Sheet-Modal ("Neuer Pin", Nutzeranforderung 2026-08-16 per
   Mockup) ----------
   Wie .modal-overlay/.modal, aber am unteren Bildschirmrand verankert
   statt zentriert, mit abgerundeten oberen Ecken + Slide-Handle statt
   des zentrierten Dialog-Looks - eigene Klassen (sheet-overlay/-modal)
   statt die Basis-Klassen umzubauen, damit die anderen, weiterhin
   zentrierten Modals (Login, Profil, Filter, Termin, Cap33) unveraendert
   bleiben. */
.sheet-overlay { align-items: flex-end; padding: 0; }
.sheet-modal {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  border-radius: 25px 25px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  /* Nutzerwunsch 2026-08-16: globale Hintergrundfarbe statt des Modal-
     Standard-Weiss (.modal). Kompakte .sheet-form-Inputs bleiben ueber
     --bg-subtle sichtbar abgesetzt, siehe .sheet-form input/select/textarea. */
  background: var(--bg-surface);
  /* Nutzeranforderung 2026-08-16 (Folgetag): Kopf (Handle+Ueberschrift+X)
     soll nicht mitscrollen - gleiches Kopf/Scroll-Split wie beim
     Detail-Panel (siehe .detail-panel), nur mit Handle+Headline+X statt
     Distanz-Chip+X. */
  display: flex;
  flex-direction: column;
  padding: 0;
}
.sheet-modal-head {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 1.2rem 0.8rem;
}
.sheet-headline { margin: 0; font-size: 1.9rem; }
.sheet-modal-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.4rem 2.8rem;
  /* Nutzerwunsch 2026-08-16: Scrollbar hier ausblenden (bleibt scrollbar,
     nur ohne sichtbaren Balken) - bewusst nur auf diesen Container
     beschraenkt, die globale Custom-Scrollbar (siehe oben im Stylesheet)
     bleibt fuer den Rest der App unveraendert. */
  scrollbar-width: none;
}
.sheet-modal-scroll::-webkit-scrollbar { display: none; }
/* Weichere, gefuellte Felder statt der weissen Outline-Inputs im Rest der
   App - naeher am Mockup, bewusst nur fuer dieses Formular (Klasse statt
   .auth-form direkt zu aendern). */
.sheet-form label {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-muted) 85%, transparent);
}
/* Eigenstaendige "Kategorie"/"Tage sichtbar"-Labels (im Gegensatz zu
   Labels, die ihr Input umschliessen wie <label>Anzeige<input/></label> -
   deren Abstand zum Input steuert .auth-form labels eigenes
   display:flex;gap:0.3rem) sind normale inline-Elemente, bei denen
   margin-bottom auf Folge-Geschwister wirkungslos bleibt. Eigene Klasse
   statt ".sheet-form label" direkt, um deren display:flex fuer die
   Input-umschliessenden Labels nicht zu ueberschreiben (Nutzerwunsch
   2026-08-16, Folgetag: mehr Abstand unter "Kategorie"/"Tage sichtbar"). */
.section-label { display: block; margin-bottom: 0.6rem; }
.sheet-form input, .sheet-form select, .sheet-form textarea {
  background: var(--bg-subtle);
  border-color: transparent;
}
/* Nutzerwunsch 2026-08-16: mehr Luft zwischen den Formular-Abschnitten.
   Compound-Selektor (statt .sheet-form allein) noetig, um .auth-forms
   gap:0.85rem sicher zu schlagen, unabhaengig von der Reihenfolge im
   Stylesheet (gleiche Spezifitaet bei einfachen Klassen-Selektoren). */
.auth-form.sheet-form { gap: 1.4rem; }
/* Nutzerwunsch 2026-08-16, Folgetag: Stellplatz-Feld und Fotos-Button
   jeweils exakt 50% der Zeile statt der Button sich nur an seinem Inhalt
   zu orientieren (.field-row label hat bereits flex:1, hier die passende
   Gegenstelle fuer den Button). */
.photos-btn { flex: 1; white-space: nowrap; }

.auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.auth-tab-btn {
  flex: 1;
  background: var(--bg-subtle);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.auth-tab-btn.active { background: var(--accent); color: #fff; }

.auth-form { display: flex; flex-direction: column; gap: 0.85rem; }
.auth-form[hidden] { display: none; }
.auth-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 1rem; font-weight: 600; color: var(--text-secondary); }
.auth-form input, .auth-form select, .auth-form textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font-weight: 400;
  color: var(--text-primary);
  background: #fff;
}
.auth-form textarea { resize: vertical; }
.checkbox-label { flex-direction: row !important; align-items: center; gap: 0.5rem !important; }
.checkbox-label input { width: auto; }

/* Kategorie-Checkboxen im Filter-Modal (#filterModal) - Regression
   2026-08-15 versehentlich beim Karten-Umbau geloescht, hier wieder
   ergaenzt (vertikale Liste statt der frueheren horizontalen Chip-Reihe). */
.pitch-filter-label { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }

/* Schalter (Switch) statt Checkbox: natives <input type="checkbox"> mit
   appearance:none, damit Formular-/Tastaturverhalten erhalten bleibt. */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; color: var(--text-secondary); font-weight: 600; cursor: pointer; }
.switch-row > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.filter-all-row { margin-bottom: 0.8rem; }


/* Icon-Auswahl fuer "Sonstiges" - gleiches Raster-Prinzip wie category-filters,
   aber als anklickbare Buttons statt Checkboxen (nur eine Auswahl moeglich). */
.icon-pool { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.icon-pool-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-secondary);
  font-size: 1rem;
}
.icon-pool-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.icon-pool-btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }

/* Kategorie-Auswahl im "Neuer Pin"-Formular (2-spaltige Liste seit
   2026-08-16 per Mockup, loest das vorherige 3er-Icon-Raster vom
   2026-08-15 ab). Nutzerkorrektur 2026-08-16 (Folgetag): kurzzeitig auf
   reinen Farbpunkt statt Icon umgestellt, auf Wunsch wieder zurueck auf
   Icon - jetzt im selben Stil wie die Kartenpins (Icon traegt die
   Kategoriefarbe direkt, kein Farbkreis-Hintergrund mehr dahinter, siehe
   .pin-badge-icon). Hintergrund der Buttons dafuer auf Weiss (statt
   --bg-subtle) angepasst, damit die farbigen Icons denselben Kontrast wie
   auf den weissen Pin-Pillen haben; aktiver Zustand grenzt sich per
   dunklem Rahmen + --bg-subtle-Fuellung ab statt per Hintergrundwechsel. */
.category-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
/* Nutzerwunsch 2026-08-16 (Folgetag): blasse, zur Icon-Farbe passende
   Hintergrundfarbe im inaktiven Zustand statt reinem Weiss (color-mix()
   gegen die per --cat-color gesetzte Kategoriefarbe, kein zweiter
   JS-Farbwert noetig); im aktiven Zustand die Icon-Farbe vollflaechig als
   Hintergrund (Icon/Text wechseln dafuer auf Weiss). */
.category-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 14%, #fff);
  color: var(--text-primary);
  font-weight: 600;
  text-align: left;
}
.category-option .cat-icon {
  width: 20px;
  flex: none;
  text-align: center;
  font-size: 1.05rem;
  color: var(--cat-color, var(--accent));
}
.category-option span:last-child { font-size: 1rem; line-height: 1.15; }
.category-option:hover { border-color: var(--cat-color, var(--accent)); }
.category-option.active {
  background: var(--cat-color, var(--accent));
  border-color: var(--cat-color, var(--accent));
  color: #fff;
}
.category-option.active .cat-icon { color: #fff; }

/* "Tage sichtbar" als Slider statt Dropdown (Nutzeranforderung 2026-08-16,
   ueberarbeitet: die urspruengliche Punkte-Reihe hatte die Linie nicht
   vertikal mittig zu den Punkten - jetzt ueber CSS-Variablen (--dot-size/
   --track-h) exakt berechnet statt eines geschaetzten Pixelwerts, siehe
   .day-slider-track/.day-slider-thumb top:calc(...). Zusaetzlich ein echter
   draggable Thumb (.day-slider-thumb, Pointer-Events in setupDaySliderDrag()
   in app.js) - Position wird dort relativ zur tatsaechlichen
   getBoundingClientRect() der Track-Linie berechnet, nicht ueber die
   Dot-Layout-Prozente, damit Ziehen exakt dem Cursor folgt. Punkte/Linie
   auf Nutzerwunsch groesser/fetter als zuvor. */
.day-slider {
  --dot-size: 18px;
  --track-h: 5px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Nutzerkorrektur 2026-08-16 (Folgetag): kein padding-top mehr - die
     track/thumb-top-Werte unten gehen von y=0 als Oberkante der Punkte aus,
     ein zusaetzliches Padding verschob die Punkte optisch nach unten OHNE
     dass die Formeln das mitbekamen (Ursache des gemeldeten "paar Pixel zu
     hoch"-Versatzes der Linie). */
  padding-top: 0;
  touch-action: none;
}
.day-slider-track, .day-slider-fill {
  position: absolute;
  top: calc(var(--dot-size) / 2 - var(--track-h) / 2);
  left: calc(100% / 14);
  height: var(--track-h);
  border-radius: var(--radius-pill);
}
.day-slider-track { right: calc(100% / 14); background: var(--border); }
.day-slider-fill { background: var(--button-color); pointer-events: none; }
.day-dot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: none;
  padding: 0;
}
.day-dot-mark {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  /* Nutzerwunsch 2026-08-16 (Folgetag): keine Umrandung mehr - einfache
     gefuellte Flaeche statt Ring. Nicht-aktuelle Punkte zusaetzlich per
     scale() verkleinert (weiterer Nutzerwunsch) - wirkt sich nur auf die
     Darstellung aus, die Box selbst (und damit die Track/Thumb-Zentrierung
     oben, die von --dot-size ausgeht) bleibt unveraendert. */
  background: var(--border);
  transform: scale(0.65);
  transition: transform 0.15s ease, background 0.15s ease;
}
.day-dot-num { font-size: 0.78rem; color: var(--text-muted); opacity: 0.7; font-weight: 600; }
/* active = alle Punkte bis zum gewaehlten Tag (Fortschritts-Strahl,
   Nutzerwunsch 2026-08-16 Folgetag), current = nur der aktuell gewaehlte
   Tag - nur der bekommt die Vergroesserung, sonst wuerden bei z.B. Tag 6
   alle sechs Punkte gleich gross wirken statt den aktuellen erkennbar
   hervorzuheben. */
.day-dot.active .day-dot-mark { background: var(--button-color); }
.day-dot.current .day-dot-mark { transform: scale(1.25); }
.day-dot.active .day-dot-num { opacity: 1; }
.day-slider-thumb {
  position: absolute;
  top: calc(var(--dot-size) / 2);
  width: 26px;
  height: 26px;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 50%;
  background: var(--button-color);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  z-index: 2;
  touch-action: none;
}
.day-slider.dragging .day-slider-thumb { cursor: grabbing; }

/* Datum+Uhrzeit nebeneinander (z.B. "Wann?" bei Soziales-Posts); auch fuer
   die Stellplatz+Fotos-Reihe im Neuer-Pin-Sheet - flex-end statt stretch,
   damit der Fotos-Button (kein Eyebrow-Label darueber) unten buendig mit
   dem Input abschliesst statt in voller Feldhoehe gestreckt zu werden. */
.field-row { display: flex; align-items: flex-end; gap: 0.7rem; }
.field-row label { flex: 1; }

/* Route-Planer fuer Mitfahrgelegenheit (Nutzeranforderung 2026-08-16,
   Folgetag: "so wie man z.B. bei Google Maps die Route plant" - eine
   vertikale Linie mit Punkten links, Start/Zwischenstopps/Ziel-Felder
   rechts). .route-rail wird per align-items:stretch (Flex-Row-Default auf
   .route-planner) auf dieselbe Hoehe wie .route-fields gestreckt, danach
   verteilt justify-content:space-between beide Spalten-Inhalte gleichmaessig
   darueber - dadurch liegen Punkte und Eingabefelder automatisch auf einer
   Hoehe, ohne dass Grid/feste Pixelwerte noetig waeren. */
.route-planner { display: flex; gap: 0.8rem; margin-bottom: 0.8rem; }
.route-rail {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
}
.route-rail::before {
  content: '';
  position: absolute;
  top: 0.65rem;
  bottom: 0.65rem;
  left: 50%;
  width: 2px;
  background: var(--border);
  transform: translateX(-50%);
}
.route-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-surface); }
.route-dot-start { background: var(--button-color); }
.route-dot-stop { width: 7px; height: 7px; border: 2px solid var(--neutral-400); background: #fff; }
.route-dot-end { background: var(--orange-500); }
.route-fields { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem; min-width: 0; }
.address-field { position: relative; }
.address-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 2.4rem 0.55rem 0.7rem;
  font: inherit;
  background: var(--bg-subtle);
}
/* Pro Routen-Feld ein eigener "Auf Karte wählen"-Button (Nutzeranforderung
   2026-08-16, 4. Runde: vorher nur beim Zielort) - als Icon im Feld selbst
   statt eines eigenen Buttons darunter, damit die Rail-Dot/Feld-Zuordnung
   (ein Dot pro .address-field) unangetastet bleibt. */
.map-pick-btn {
  position: absolute;
  top: 50%; right: 0.35rem;
  transform: translateY(-50%);
  width: 1.9rem; height: 1.9rem;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.map-pick-btn:hover, .map-pick-btn.active { background: var(--bg-subtle); color: var(--button-color); }
/* Zwischenstopp-Zeilen (dynamisch, siehe #addStopBtn in app.js) brauchen
   zusaetzlich einen Entfernen-Button links vom Kartenwahl-Icon. */
.route-stop-field input { padding-right: 4.3rem; }
.route-stop-field .remove-stop-btn {
  position: absolute;
  top: 50%; right: 2.15rem;
  transform: translateY(-50%);
  width: 1.9rem; height: 1.9rem;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}
.route-stop-field .remove-stop-btn:hover { background: var(--bg-subtle); color: var(--orange-500); }
.link-btn {
  border: none; background: transparent; color: var(--button-color);
  font: inherit; font-weight: 600; font-size: 0.85rem;
  padding: 0.3rem 0; margin-bottom: 0.8rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
}

/* Adress-Autocomplete-Vorschlagsliste (Nominatim, siehe
   wireAddressAutocomplete() in app.js) - direkt unter dem jeweiligen Feld
   eingeblendet. */
.address-suggestions {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 220px;
  overflow-y: auto;
  padding: 0.3rem;
}
.address-suggestions button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-primary);
}
.address-suggestions button:hover { background: var(--bg-subtle); }

/* Custom-Button fuer Bild-Upload statt des nativen Datei-Inputs
   (Nutzeranforderung 2026-08-15) - Input bleibt im DOM (fuer .click() vom
   Button + damit das Formular es beim submit/reset weiter kennt), aber
   visuell unsichtbar statt display:none/[hidden], falls ein Browser
   programmatische Klicks auf komplett ausgeblendete Inputs blockiert. */
.visually-hidden-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bild-Vorschau beim Erstellen eines Pins (bis zu 5, Nutzeranforderung
   2026-08-15) - Entfernen-Button oben rechts pro Thumbnail. */
.image-preview { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.image-preview-item { position: relative; width: 70px; height: 70px; }
.image-preview-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.image-preview-item button {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--text-primary);
  color: #fff;
  font-size: 0.75rem;
  padding: 0;
}

/* Bild-Galerie im Detail-Panel (nur dort, nicht im Kompakt-Popup) */
.post-images { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.post-images img {
  width: 90px; height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.note { color: var(--text-muted); font-size: 1rem; line-height: 1.4; margin: 0; }
.form-error { color: var(--danger); font-size: 1rem; margin: 0; min-height: 1em; }
.form-success { color: var(--button-color); font-size: 1rem; margin: 0; }
.form-success:empty { display: none; }

/* ---------- Map pin icons ----------
   Nutzeranforderung 2026-08-16 per Mockup: Kartenpins zeigen jetzt ein
   farbiges Icon-Badge (Kategoriefarbe, ersetzt den reinen Farbpunkt aus
   dem Mockup) + Vorschautext (max. 12 Zeichen, siehe truncateLabel() in
   app.js) in einer Pille, mit einem kurzen Stiel als Zeiger auf die
   Koordinate - loest die vorherige Tropfenform ab (Vorgaenger-Design vom
   2026-08-15, samt Rotations-/Ring-Problematik, siehe Git-History).
   .pin-marker-inner zentriert sich per translateX(-50%) ueber dem
   Ankerpunkt, weil die Pillenbreite variabel ist (siehe iconAnchor-Kommentar
   bei pinIcon() in app.js). Nutzerkorrektur 2026-08-16 (Folgetag: "Zentrum
   der Pins scheint links zu sein") - dieses translateX saß urspruenglich
   direkt auf .pin-marker, dem Div, dessen `transform` Leaflet selbst per
   Inline-Style fuer die Positionierung setzt (translate3d) und damit JEDE
   eigene CSS-transform-Regel auf demselben Element stillschweigend
   ueberschreibt - die Zentrierung griff dadurch nie. Jetzt auf einem
   inneren Wrapper-Div (.pin-marker-inner), das Leaflet nicht anfasst. */
/* Nutzerfeedback 2026-10-02 ("Pins springen beim Filtern"): hier stand
   frueher position:relative - das ueberschrieb Leaflets position:absolute
   auf .leaflet-marker-icon, die Marker lagen dadurch im normalen Fluss
   untereinander und jeder Pin verschob alle folgenden um seine Resthoehe
   (~1,4px). Fiel ein Pin per Filter weg, rutschten die anderen. Jetzt:
   Marker-Div absolut und 0x0 genau am Geo-Punkt (iconAnchor [0,0]), die
   Pille haengt mit der Stiel-Spitze unten mittig daran. */
.pin-marker { position: absolute; width: 0; height: 0; overflow: visible; }
.pin-marker-inner {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}
.pin-bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.pin-bubble.icon-only { padding: 0.25rem; }
/* Nutzerkorrektur 2026-08-16 (Folgetag): Icon hatte einen farbigen
   Kreis-Hintergrund mit weissem Icon - stattdessen jetzt kein Hintergrund,
   das Icon-Glyph selbst traegt die Kategoriefarbe. */
.pin-badge-icon {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--cat-color, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.pin-badge-label { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
/* Kleines weisses Dreieck als Zeiger (Nutzerwunsch 2026-08-16, loest die
   duenne Linie ab) - CSS-Border-Dreieck statt Bild/SVG. pinIcon()s
   iconAnchor in app.js ist auf die neue (etwas geringere) Gesamthoehe
   (Bubble 32px + Dreieck 9px = 41px) nachgefuehrt. */
.pin-stem {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
/* Ausgewaehlt (Popup offen): Nutzerkorrektur 2026-08-16 (Folgetag) - der
   vorherige direkt anliegende Rahmen+Halo entsprach nicht dem Mockup
   (dunkler Ring MIT Abstand um die Pille, gleiches Prinzip wie beim
   allerersten Kreis-Pin-Ring vom 2026-08-15). ::before auf .pin-bubble
   statt direkt auf der Bubble, mit inset fuer den Abstand und einem sehr
   grosszuegigen border-radius, damit die Stadion-/Pillenform bei JEDER
   (variablen) Breite sauber rund bleibt statt eckig auszufransen. */
.pin-marker.selected .pin-bubble::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid var(--text-primary);
  border-radius: 999px;
  pointer-events: none;
}


/* ---------- Detail-Panel: Meta-Chips, Autor, Galerie (Nutzeranforderung
   2026-08-16 per Mockup) ---------- Nur fuer Felder mit echtem Datenfeld
   (event_at, dest_label) - siehe postDetailHtml() in app.js. */
.meta-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
}
/* Icon sitzt seit der Nutzerkorrektur 2026-08-16 (Folgetag, strenger am
   Mockup orientiert) hier statt in der Ueberschrift - loest den vorherigen
   reinen Farbpunkt (.cat-eyebrow-dot) ab. */
.cat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cat-color, var(--accent));
  margin-bottom: 0.3rem;
}
.cat-eyebrow i { font-size: 1.15rem; }

.avatar-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex: none;
}
/* Deterministisch per Nutzer-ID gehasht (avatarColorClass() in app.js) -
   feste Palette statt zufaelliger Farben, damit dieselbe Person immer
   dieselbe Avatar-Farbe hat. */
/* Eine Palette fuer alles, was die Avatar-Farbe zeigt (Avatare, @Erwaehnungen): Aenderungen nur hier */
:root { --avatar-1: #365D82; --avatar-2: #263A55; --avatar-3: #BC1421; --avatar-4: #A5111D; --avatar-5: #3F945E; --avatar-6: #C94822; --avatar-7: #992B15; --avatar-8: #DBA833; --avatar-9: #A8741D; --avatar-10: #753894; --avatar-11: #5A2678; --avatar-12: #121212; }
.avatar-1 { background: var(--avatar-1); }
.avatar-2 { background: var(--avatar-2); }
.avatar-3 { background: var(--avatar-3); }
.avatar-4 { background: var(--avatar-4); }
.avatar-5 { background: var(--avatar-5); }
.avatar-6 { background: var(--avatar-6); }
.avatar-7 { background: var(--avatar-7); }
.avatar-8 { background: var(--avatar-8); }
.avatar-9 { background: var(--avatar-9); }
.avatar-10 { background: var(--avatar-10); }
.avatar-11 { background: var(--avatar-11); }
.avatar-12 { background: var(--avatar-12); }

/* ---------- Profil-Modal: Avatar-Bild/-Farbe, Name/E-Mail/Passwort
   (Nutzeranforderung 2026-08-16, 7. Runde) ---------- */
.profile-avatar-row { display: flex; align-items: center; gap: 1rem; }
.profile-avatar-preview { flex: none; }
.profile-avatar-face {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.profile-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
/* Farben und Sprach-Flaggen gleich gross (2.2rem), Farben auch inaktiv in
   voller Deckkraft, damit die Vorschau der echten Farbe entspricht
   (Nutzeranforderung 2026-10-01). */
.avatar-color-picker { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0.5rem 0 0.3rem; }
.avatar-color-swatch {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
/* Ring MIT Abstand statt direkt anliegend (Nutzerwunsch 2026-08-16, 8.
   Runde: "so wie bei den Map Pins", siehe .pin-marker.selected
   .pin-bubble::before weiter oben - dort per inset auf einem eigenen
   Pseudo-Element, hier per gestapeltem box-shadow: die weisse "Luecke"
   liegt naeher am Kreis, der gruene Ring weiter aussen. */
.avatar-color-swatch.active {
  opacity: 1;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--button-color);
}
/* Speichern/Abmelden 50:50 statt untereinander (Nutzerwunsch 2026-08-16,
   7. Runde). */
.profile-actions-row { display: flex; gap: 0.7rem; margin-top: 0.4rem; }
.profile-actions-row button { flex: 1; }

/* Verfasser-Block nach Mockup (2026-10-02): zwischen zwei Trennlinien,
   groesserer Avatar, Name + Flaggen in Zeile 1, "Platz · vor X Std" in
   Zeile 2 (gleich auf allen Breiten). */
.detail-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.9rem 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.detail-author > .avatar-sm,
.detail-author > .avatar-img { width: 46px; height: 46px; font-size: 1rem; flex: none; }
.detail-author-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; }
.detail-author-name .author-lang-flags { gap: 0.25rem; }
.detail-author-name .lang-flag-icon { width: 1.1rem; height: 1.1rem; }
.detail-author-meta { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.1rem; }
.detail-author-share {
  margin-left: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  border: none;
  background: var(--btn-contact-bg);
  color: var(--btn-contact-fg);
}
.detail-author-share:hover { filter: brightness(0.96); }
.detail-author-share .mdi-icon, .comment-share-btn .mdi-icon { width: 1.35em; height: 1.35em; }
.mdi-icon.icon-flip { transform: scaleX(-1); }


.detail-gallery-wrap { position: relative; }
.detail-gallery {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: 0.9rem;
  padding-bottom: 0.3rem;
}
/* Klick-Pfeile ueber der Galerie (Nutzeranforderung 2026-08-16, 5. Runde) -
   Wischen/Mausrad funktionieren weiterhin zusaetzlich. */
.gallery-nav {
  position: absolute;
  top: calc(50% - 0.15rem);
  transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem;
  border: none;
  border-radius: 50%;
  background: rgba(19, 19, 19, 0.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.gallery-nav-prev { left: 0.5rem; }
.gallery-nav-next { right: 0.5rem; }
.detail-gallery .gallery-thumb {
  position: relative;
  flex: none;
  width: 78%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  scroll-snap-align: start;
  display: block;
  border: none;
  padding: 0;
  background: none;
}
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery-dots { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.detail-gallery-dots span { width: 16px; height: 5px; border-radius: var(--radius-pill); background: var(--border); }
.detail-gallery-dots span.active { background: var(--text-primary); }
.gallery-eyebrow { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); opacity: 0.7; margin-top: 1rem; }

/* Sprachen-Checkboxen (Registrierung + Profil, Nutzeranforderung
   2026-08-16, 4. Runde) - renderLanguagePicker() in app.js fuellt beide
   Container (#regLanguagePicker/#profileLanguagePicker) aus LANGUAGE_META,
   damit die Flaggen/Labels nur an einer Stelle im JS gepflegt werden. */
.language-picker { margin: 0.2rem 0 0.6rem; }
/* Nutzerkorrektur 2026-08-16, 7. Runde: kein Rahmen/Pille/sichtbare
   Checkbox mehr um die Flaggen - die Checkbox bleibt technisch vorhanden
   (Klick auf die Flagge togglet sie weiterhin ueber das umschliessende
   <label>), ist aber visuell versteckt (gleiches Prinzip wie
   .visually-hidden-input bei den Post-Fotos). Zustand zeigt sich nur noch
   ueber die Flagge selbst: inaktiv = blass (opacity), aktiv = 100% Deckkraft
   + gruener Ring mit Abstand (gleiches Prinzip wie der Auswahl-Ring bei
   Karten-Pins, siehe .pin-marker.selected .pin-bubble::before). */
.lang-checkboxes { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0.5rem 0 0.5rem; }
.lang-check {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.lang-check input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* SVG-Flaggen statt Unicode-Emoji (Nutzerkorrektur 2026-08-16, 6. Runde) -
   siehe LANGUAGE_META in app.js fuer den Grund. */
/* Kreisrund statt abgerundetes Rechteck (Nutzerwunsch 2026-08-16, 8. Runde)
   - die SVGs selbst croppen jetzt per preserveAspectRatio="xMidYMid slice"
   (SVG-Pendant zu object-fit:cover) auf den Kreis, statt mit Leerraum
   hineingequetscht zu werden, siehe LANGUAGE_META in app.js. */
.lang-flag-icon {
  display: inline-block;
  width: 1.5rem; height: 1.5rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.lang-flag-icon svg { display: block; width: 100%; height: 100%; }
.lang-check .lang-flag-icon { transition: box-shadow 0.15s; }
/* Nutzerkorrektur 2026-08-16, 8. Runde: Ring 1px duenner (3px -> 2px) und
   mit sichtbarem Abstand zur Flagge statt direkt anliegend - gleiches
   Drei-Schichten-Prinzip wie beim Avatar-Farbring: eigene Randlinie der
   Flagge (1px), dann eine Luecke in Hintergrundfarbe, dann der Ring. */
.lang-check input:checked + .lang-flag-icon {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 4px #fff, 0 0 0 6px var(--button-color);
}
/* Muttersprache-Stern (Nutzeranforderung 2026-08-16, 9. Runde: Doppelklick
   auf eine Flagge) - eigene Farbe (--orange-500) statt Gruen, damit er sich
   vom Auswahl-Ring klar unterscheidet ("ausgewaehlt" vs. "Muttersprache"
   sind zwei verschiedene Zustaende). */
.lang-native-badge {
  display: none;
  position: absolute;
  top: -0.3rem; right: -0.3rem;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  box-shadow: 0 0 0 2px #fff;
}
.lang-check.native .lang-native-badge { display: flex; }
/* Hinweistext sitzt seit Nutzerkorrektur 2026-08-16, 10. Runde direkt
   unter der Ueberschrift statt unter dem Freitextfeld - entsprechend mehr
   Abstand NACH UNTEN (zu den Flaggen) statt nach oben. */
.lang-native-hint { font-size: 0.78rem; margin: 0.2rem 0 0.6rem; }
.author-lang-flags { display: inline-flex; gap: 0.3rem; vertical-align: middle; }
/* Etwas mehr Luft vor dem Freitextfeld (Nutzerwunsch 2026-08-16, 10. Runde) -
   die Flaggen-Reihe braucht mehr Abstand nach unten als die
   Standard-Flex-Gap von .auth-form/.lang-checkboxes hergibt. */
.language-picker input[type="text"] {
  width: 100%;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font: inherit;
  background: var(--bg-subtle);
}
/* Deutlicher abgesetzt vom Sprachen-Block darueber (Nutzerwunsch
   2026-08-16, 10. Runde: "etwas mehr Platz ... ebenso bei Passwort
   ändern"), zusaetzlich zur normalen Flex-Gap von .auth-form. */
.profile-password-section { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }

/* Bild-Lightbox (Nutzeranforderung 2026-08-16, 4. Runde) - eigene Ueberlagerung
   statt .modal-overlay/.modal (braucht randlose, dunkle Vollbild-Flaeche
   statt eines zentrierten weissen Dialogs). */
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(9, 9, 9, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay img {
  max-width: min(92vw, 900px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.lightbox-close { top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-counter {
  position: absolute;
  bottom: 2.3rem; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.85;
}
/* Punkte unterhalb des Zaehlers (Nutzeranforderung 2026-08-16, 5. Runde) -
   gleiches Prinzip wie .detail-gallery-dots, nur heller fuer den dunklen
   Lightbox-Hintergrund. */
.lightbox-dots {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
}
.lightbox-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.lightbox-dots span.active { background: #fff; }

/* ---------- Post-RSVP ("Bin dabei"/"Vielleicht", Nutzeranforderung
   2026-08-16 per Mockup, nur bei category='soziales' gerendert) ---------- */
.rsvp-box { background: #fff; border-radius: var(--radius-md); padding: 0.9rem 1rem; margin: 1rem 0; }
.rsvp-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.rsvp-summary { font-weight: 700; font-size: 0.9rem; }
.rsvp-avatars { display: flex; }
.rsvp-avatars .avatar-sm { width: 26px; height: 26px; font-size: 0.62rem; margin-left: -8px; border: 2px solid #fff; }
.rsvp-avatars .avatar-sm:first-child { margin-left: 0; }
.rsvp-avatars .avatar-more { background: var(--bg-subtle); color: var(--text-primary); }
.rsvp-buttons { display: flex; gap: 0.5rem; }
/* Nutzeranforderung 2026-08-16, 4. Runde: ausgewaehlt = --button-color
   vollflaechig, inaktiv = kein Fuellton, nur Rahmen. Folgetag-Korrektur
   (5. Runde): inaktiver Rahmen soll ebenfalls gruen (--button-color) statt
   grau sein, dafuer nur noch 2px statt 3px. */
.rsvp-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 2px solid var(--button-color);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 0.55rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.rsvp-btn.active { background: var(--button-color); border-color: var(--button-color); color: #fff; }

/* ---------- Kommentare (Nutzeranforderung 2026-08-16 per Mockup, inkl.
   Threading + Auto-Hide-Moderation) ---------- */
.comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  width: 100%;
  padding: 0.4rem 0;
  margin-top: 1.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.comment-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.6rem; }
.comment-item { display: flex; gap: 0.6rem; }
.comment-item.reply { margin-left: 2.4rem; }
.comment-body-wrap { flex: 1; min-width: 0; }
.comment-meta-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.comment-author { font-weight: 700; font-size: 0.9rem; }
.comment-time { font-size: 0.8rem; color: var(--text-muted); opacity: 0.75; }
.comment-author-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.5rem;
}
.comment-text { font-size: 0.92rem; margin: 0.15rem 0 0.3rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-actions { display: flex; align-items: center; gap: 0.9rem; }
.comment-actions button { background: transparent; border: none; padding: 0; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.comment-actions button:hover { color: var(--text-primary); }
/* "..."-Kebab statt Inline-"Melden" (Nutzeranforderung 2026-08-16, 4. Runde)
   - oeffnet #commentActionsModal mit Melden/Loeschen. */
.comment-kebab-btn { margin-left: auto; font-size: 1rem; line-height: 1; padding: 0.15rem 0.3rem; }

/* Kleines Aktions-Modal fuer Kommentare (#commentActionsModal) - je ein
   voller Button pro Aktion statt Inline-Links, da es hier (anders als bei
   den Detail-Panel-Footer-Aktionen) keinen umgebenden Text-Fluss gibt. */
.modal-action-list { display: flex; flex-direction: column; gap: 0.5rem; }
.modal-action-btn {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  padding: 0.75rem 0.9rem;
  font: inherit; font-weight: 600;
  color: var(--text-primary);
}
.modal-action-btn.danger { color: var(--danger); }

.comment-hidden-notice {
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.comment-hidden-notice button {
  display: block;
  margin-top: 0.4rem;
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 700;
  color: var(--accent-dark);
  font-size: 0.85rem;
}
.comment-hidden-notice .comment-approve-btn { color: var(--danger); }

.comment-reply-box {
  margin: 0.5rem 0 0 2.4rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
}
.comment-reply-box-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.4rem; }
.comment-reply-box-head button { background: transparent; border: none; color: var(--text-muted); font-size: 1rem; padding: 0; }
.comment-reply-box textarea, .comment-composer textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  font: inherit;
  resize: vertical;
}
.comment-reply-box-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; gap: 0.6rem; }
.comment-reply-box-note { font-size: 0.75rem; color: var(--text-muted); opacity: 0.75; }

.comment-composer {
  position: sticky;
  bottom: 0;
  margin: 1.2rem -1.4rem -1.6rem;
  padding: 0.8rem 1.4rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.comment-composer textarea {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-pill);
  background: #fff;
  resize: none;
  overflow: hidden;
  height: 2.5rem;
  line-height: 1.4;
  padding: 0.55rem 1rem;
}
.comment-composer .comment-send-btn {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--button-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Admin: Nutzerverwaltung ---------- */
.user-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 60vh; overflow-y: auto; }
.user-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); background: var(--bg-subtle); }
.user-list-name { font-weight: 600; font-size: 0.92rem; }
.user-list-email { font-size: 0.78rem; color: var(--text-muted); opacity: 0.75; }
.role-toggle-btn { border: 1.5px solid var(--border); background: #fff; border-radius: var(--radius-pill); padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 700; }
.role-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Kontaktdaten teilen (Nutzeranforderung 2026-10-01) ---------- */
.avatar-btn { position: relative; }
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
}
.header-badge { position: absolute; top: -0.25rem; right: -0.3rem; box-shadow: 0 0 0 2px #fff; }
.profile-tabs .auth-tab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.9rem; }
/* Profil-Tabs als Segmented Control nach Mockup (2026-10-02): graue Schiene,
   aktiver Tab als helle Pille mit Schatten, Zaehler gruen. */
.profile-tabs { gap: 0; background: var(--bg-subtle); border-radius: 16px; padding: 0.3rem; }
.profile-tabs .auth-tab-btn { background: transparent; border-radius: 12px; padding: 0.6rem 0.4rem; color: var(--text-muted); white-space: nowrap; }
.profile-tabs .auth-tab-btn.active { background: #fffdf8; color: var(--text-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.profile-tabs .count-badge { background: var(--accent); }
.profile-tabs .auth-tab-btn[data-tab="moderation"] .count-badge { background: var(--danger); }
#contactCardForm label > span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Unter-Tabs als Text mit Unterstrich (Mockup 2026-10-02) */
.sub-tabs { display: flex; gap: 1.4rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.sub-tab-btn {
  border: none; background: none; border-radius: 0; flex: none;
  padding: 0.55rem 0 0.6rem; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.sub-tab-btn.active { color: var(--text-primary); font-weight: 700; border-bottom-color: var(--accent); }

.person-list { display: flex; flex-direction: column; gap: 0.7rem; }
.person-card { background: var(--bg-subtle); border-radius: 18px; padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.person-card.is-new { box-shadow: inset 0 0 0 2px var(--accent); }
.person-head { display: flex; align-items: center; gap: 0.6rem; }
.person-head-text { min-width: 0; }
.person-name { font-weight: 700; }
.person-sub { font-size: 0.8rem; opacity: 0.8; margin: 0; }
.share-message { margin: 0; background: #fff; border-radius: 14px; padding: 0.5rem 0.75rem; font-size: 0.92rem; white-space: pre-wrap; }
.contact-links { display: flex; flex-direction: column; gap: 0.35rem; }
.contact-link {
  display: flex; align-items: center; gap: 0.6rem; background: #fff; border-radius: 14px;
  padding: 0.5rem 0.75rem; color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.contact-link i { width: 1.1rem; text-align: center; color: var(--button-color); }
.contact-link .fa-whatsapp { color: #3e74ba; }
.person-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.person-actions .pill-btn { margin: 0; background: #fff; font-size: 0.8rem; padding: 0.35rem 0.75rem; }
.pill-btn.danger { color: var(--danger); }
.person-note {
  display: flex; align-items: flex-start; gap: 0.5rem; text-align: left; width: 100%;
  background: #e6ebf2; border: none; border-radius: 14px; padding: 0.55rem 0.8rem; font: inherit; font-size: 0.88rem; color: #1f334d;
}
/* Gruenes Farbschema (Nutzerwunsch 2026-10-02) statt Notizzettel-Gelb */
.person-note i { color: #2f568a; margin-top: 0.15rem; }
.person-note b { color: #2f568a; }
.person-note-edit textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 14px;
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9rem; resize: vertical;
}
.person-note-edit-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.person-note-edit-actions .link-btn { margin: 0; }
.person-note-edit-actions .secondary-btn { padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.interaction-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.interaction-list li { display: flex; gap: 0.5rem; align-items: baseline; }
.interaction-list i { width: 1rem; text-align: center; color: var(--button-color); flex: none; }
.inline-link { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--button-color); text-decoration: underline; }
.blocked-section { margin-top: 1rem; }
.blocked-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.blocked-row span { flex: 1; font-weight: 600; }
.blocked-row .link-btn { margin: 0; }

.share-context { margin-bottom: 0.8rem; }
.share-fields { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-form label.share-field {
  flex-direction: row; align-items: center; gap: 0.6rem; background: var(--bg-subtle);
  border-radius: 14px; padding: 0.5rem 0.75rem; font-size: 0.92rem; font-weight: 400; cursor: pointer;
}
.share-field input { margin: 0; accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
.share-field i { width: 1.1rem; text-align: center; color: var(--button-color); }
.share-field span { overflow-wrap: anywhere; }
.char-count { align-self: flex-end; font-size: 0.78rem; font-weight: 400; opacity: 0.7; }

.like-box { display: flex; align-items: center; gap: 0.35rem; }
.like-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; border: none; background: var(--bg-subtle);
  border-radius: var(--radius-pill); height: 2.1rem; padding: 0 0.75rem; font: inherit; font-weight: 700; color: var(--neutral-400, #a3a3a3);
}
.like-btn span { color: var(--text-primary); }
.like-btn span:empty { display: none; }
.like-btn.active { color: #e11d48; background: #ffe4e6; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 3000;
  background: var(--text-primary); color: #fff; border-radius: var(--radius-pill); padding: 0.65rem 1.2rem;
  font-weight: 600; box-shadow: var(--shadow-lg); transition: opacity 0.4s;
}
.toast.hide { opacity: 0; }
.person-card .meta-chip { background: #fff; }
.person-card .meta-chips { margin: 0; }

/* Handynummer: Ländervorwahl + Nummer in einer Zeile */
.phone-field { display: flex; flex-direction: column; gap: 0.3rem; }
.phone-row { display: flex; gap: 0.5rem; }
.phone-row select { flex: 0 0 auto; max-width: 48%; }
.phone-row input { flex: 1; min-width: 0; }
.phone-preview { font-size: 0.82rem; opacity: 0.8; }
.phone-preview:empty { display: none; }

/* Picker-Flaggen gross wie die Avatar-Farben, die kleinen Flaggen neben dem
   Autor eines Posts bleiben bei 1.5rem. */
.lang-check .lang-flag-icon { width: 2.2rem; height: 2.2rem; }
.lang-add-btn {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1.5px dashed var(--neutral-400); background: transparent; color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; padding: 0;
}
.lang-add-btn.open { border-style: solid; border-color: var(--button-color); color: var(--button-color); }
.lang-add-menu {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.35rem;
  background: var(--bg-subtle); border-radius: 18px; padding: 0.5rem; margin: 0.3rem 0 0.5rem;
}
.lang-add-option {
  display: flex; align-items: center; gap: 0.5rem; border: none; background: #fff; border-radius: 14px;
  padding: 0.35rem 0.6rem; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); text-align: left;
}
.lang-add-option .lang-flag-icon { width: 1.4rem; height: 1.4rem; }

/* ==========================================================================
   Desktop-Layout ab 900px (Nutzer-Mockup 2026-10-01). Mobil bleibt alles
   wie gehabt: die neuen Elemente (.topbar-actions,
   .cat-dot) sind dort ausgeblendet. Breakpoint muss zu desktopQuery in
   app.js passen.
   ========================================================================== */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('libs/fonts/instrument-serif/instrument-serif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('libs/fonts/dm-mono/dm-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('libs/fonts/dm-mono/dm-mono-500-latin.woff2') format('woff2');
}

.topbar-actions, .cat-dot { display: none; }
.cat-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cat-color, var(--accent)); flex: none; }


@media (min-width: 900px) {
  /* ---------- Schwebender Header ---------- */
  .topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 1.3rem 1.4rem;
    gap: 0.8rem;
    z-index: 20;
    pointer-events: none;
  }
  .topbar > * { pointer-events: auto; }
  .topbar::after { display: none; }
  .brand {
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    border-radius: 999px;
    padding: 0.45rem 1.3rem 0.55rem;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    gap: 0.55rem;
  }
  .brand-sub {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    opacity: 0.75;
  }
  .tabs {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex: none;
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    padding: 0.3rem;
  }
  .tab-btn { flex: none; padding: 0.6rem 1.5rem; font-size: 1.02rem; font-weight: 700; }
  .topbar-actions { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; }
  .topbar-filter-btn { width: 3rem; height: 3rem; background: #fff; box-shadow: var(--shadow-md); }
  .cta-pin-btn {
    height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem;
    background: var(--orange-500);
    font-size: 1.05rem;
    box-shadow: var(--shadow-md);
  }
  .cta-pin-btn:hover { filter: brightness(1.08); }
  .avatar-btn { width: 3rem; height: 3rem; font-size: 0.95rem; box-shadow: 0 0 0 3px #fff, var(--shadow-md); }
  .avatar-btn.active { box-shadow: 0 0 0 3px #fff, var(--shadow-md); }

  /* Filter/Neuer Pin sitzen jetzt im Header */
  .map-toolbar { display: none; }
  main#eventsMain { padding-top: 6.5rem; }

  /* ---------- Detail-Panel als Karte links ---------- */
  .detail-panel {
    left: 1.4rem;
    right: auto;
    top: 6rem;
    bottom: 1.4rem;
    height: auto;
    width: min(31rem, 42vw);
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
    transform: translateX(calc(-100% - 2rem));
    overflow: hidden;
  }
  main#mapMain.detail-open .detail-panel { transform: translateX(0); }
  /* Kopf nur noch Entfernung links + Schliessen-X rechts (Nutzerwunsch
     2026-10-01, ersetzt den "Alle Pins"-Knopf). */
  .detail-panel .sheet-handle { display: none; }
  .detail-panel-head { padding: 1.1rem 1.2rem 0 1.6rem; }
  .distance-chip {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 400;
  }
  .detail-panel-scroll { padding: 0.4rem 1.6rem 1.6rem; }
  .cat-eyebrow {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    gap: 0.6rem;
  }
  .cat-eyebrow i, .cat-eyebrow .mdi-icon { display: none; }
  .cat-dot { display: inline-block; }
  .detail-panel-scroll h3 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0.35rem 0 0.4rem;
  }
  /* Autor als eine Textzeile "Name, Platz 212 · vor 20 Min" ohne Avatar */

  .rsvp-box { border: 1px solid var(--border); border-radius: 22px; padding: 1.1rem 1.2rem 1.2rem; margin: 1.6rem 0; }
  .rsvp-summary { font-size: 1rem; }
  .rsvp-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 16px;
    padding: 0.95rem;
    font-size: 1.05rem;
  }
  .rsvp-btn i { display: none; }
  .rsvp-btn.active { background: var(--button-color); border-color: var(--button-color); color: #fff; }

  .comments-head {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    margin-top: 1.6rem;
  }
  .comment-list { gap: 1.1rem; }
  .comment-author { font-size: 1rem; }
  .comment-head .comment-author { font-size: 1.08rem; }
  .comment-time { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.78rem; }
  .comment-text { font-size: 1.02rem; line-height: 1.5; }
  .comment-composer { padding-top: 0.8rem; padding-bottom: 0.8rem; }
  .comment-composer textarea { height: 3.1rem; padding: 0.8rem 1.2rem; font-size: 1.02rem; border-color: var(--border); }
  .comment-composer .comment-send-btn { width: 3.1rem; height: 3.1rem; font-size: 1.05rem; }

  /* ---------- Pins: Pille mit Kategorie-Icon (wie mobil), etwas groesser ---------- */
  .pin-bubble { padding: 0.3rem 0.95rem 0.3rem 0.4rem; gap: 0.45rem; box-shadow: var(--shadow-md); }
  .pin-bubble.icon-only { padding: 0.3rem; }
  .pin-badge-icon { font-size: 0.95rem; }
  .pin-badge-label { font-size: 0.98rem; }

  /* ---------- Zoom + Standort unten rechts als Karte ---------- */
  .leaflet-bottom.leaflet-right .leaflet-control-zoom {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin: 0 1.4rem 1rem 0;
  }
  /* Spezifischer als Leaflets ".leaflet-touch .leaflet-bar a" (30px), sonst
     bleiben +/- schmal und nur der Standort-Knopf wird breit. */
  .leaflet-bottom.leaflet-right .leaflet-control-zoom a {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.3rem;
    color: var(--text-primary);
    border-bottom-color: var(--border);
  }
  .leaflet-control-attribution { margin-right: 1.4rem; }
}

@media (min-width: 900px) {
  /* Kommentarfeld unten im Panel festhalten (Mockup), Melden/Loeschen
     rutscht dafuer davor. */
  .detail-panel-scroll { display: flex; flex-direction: column; }
  .detail-panel-scroll > * { flex: none; }
  #commentError { order: 2; }
  .comment-composer { order: 3; margin-top: auto; }
}

/* MDI-Icons (Pictogrammers) als Inline-SVG: so gross und farbig wie ein
   Font-Awesome-Icon an derselben Stelle. */
.mdi-icon { width: 1.15em; height: 1.15em; fill: currentColor; display: inline-block; vertical-align: -0.2em; flex: none; }
.pin-badge-icon .mdi-icon { width: 1.3em; height: 1.3em; }

/* Merken neben dem Herz */
.save-btn { padding: 0 0.7rem; }
.save-btn.active { color: var(--button-color); background: var(--accent-light); }

/* Roter Schliessen-Knopf oben rechts am aktiven Pin (Nutzeranforderung
   2026-10-01), sitzt auf dem dunklen Auswahl-Ring. */
.pin-close-btn {
  position: absolute;
  top: -11px;
  right: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  box-shadow: 0 0 0 2px #fff, var(--shadow-sm);
  cursor: pointer;
  z-index: 1;
}
.pin-close-btn:hover { filter: brightness(1.1); }

/* Desktop: Filter fest links als Karte statt Modal (Nutzeranforderung
   2026-10-01, erst rechts, gleicher Tag nach links). Macht dem
   Detail-Panel Platz (body.detail-open). Ueberschreibt das globale [hidden]{display:none!important}
   per hoeherer Spezifitaet; Overlay ohne Abdunklung und ohne Klickflaeche,
   nur die Karte selbst ist bedienbar. Nur in der Kartenansicht. */
@media (min-width: 900px) {
  #filterModal.modal-overlay,
  #filterModal.modal-overlay[hidden] {
    display: block !important;
    position: absolute;
    inset: auto;
    top: 6rem;
    left: 1.4rem;
    padding: 0;
    background: none;
    z-index: 15;
    pointer-events: none;
    overflow: visible;
  }
  body[data-view="events"] #filterModal.modal-overlay,
  body.detail-open #filterModal.modal-overlay { display: none !important; }
  #filterModal .modal {
    pointer-events: auto;
    width: 22rem;
    max-height: calc(100vh - 12rem);
    padding: 1.2rem 1.2rem 1.1rem;
    border-radius: 24px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
  }
  #filterModal .modal-close, .topbar-filter-btn { display: none; }
  #filterModal .modal { box-sizing: border-box; overflow-x: hidden; }
  #filterModal .category-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  #filterModal .category-option { min-width: 0; padding: 0.55rem 0.65rem; gap: 0.45rem; font-size: 0.85rem; line-height: 1.2; white-space: nowrap; }
  #filterModal .category-option .cat-icon { width: 16px; font-size: 0.9rem; }
  #filterModal h2 {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.8rem;
  }
}

/* "Pin setzen" links neben dem Karte/Termine-Switch (Nutzerwunsch
   2026-10-01). Mobil ist der Wrapper unsichtbar (display:contents), der
   Knopf dort ausgeblendet - die schwebende Karten-Toolbar bleibt. */
.topbar-center { display: contents; }
.cta-pin-btn { display: none; }
.center-logo { display: none; }
@media (min-width: 900px) {
  .topbar-center {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  /* "Pin setzen" + Switch bilden zusammen eine Gruppe, die als Ganzes mittig
     steht (Nutzerwunsch 2026-10-03; vorher hing der Knopf absolut links
     neben dem exakt zentrierten Switch). */
  .cta-pin-btn { display: inline-flex; white-space: nowrap; margin-right: auto; }
  .topbar > .brand { display: none !important; }
  .center-logo { display: flex; align-items: center; margin-right: 0.6rem; }
  .center-logo img { display: block; height: 2.4rem; width: auto; }
  .topbar-center .tabs { position: static; transform: none; }
}

/* Eigenes Checkbox-Design seitenweit (Nutzerwunsch 2026-10-01): abgerundetes
   Quadrat, ausgewaehlt in --button-color mit weissem Haken (per clip-path,
   kein Icon-Font noetig). Die Sprach-Flaggen nutzen ihre Checkbox nur
   unsichtbar (.lang-check input), dort aendert das nichts. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  border: 2px solid var(--neutral-400);
  border-radius: 6px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
input[type="checkbox"]::before {
  content: '';
  width: 0.7rem;
  height: 0.7rem;
  background: #fff;
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
  transform: scale(0);
  transition: transform 0.12s ease-out;
}
input[type="checkbox"]:checked { background: var(--button-color); border-color: var(--button-color); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover:not(:checked) { border-color: var(--button-color); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
.share-field input { accent-color: unset; }

/* Abstands-Korrekturen Profil (Nutzer-Screenshots 2026-10-01) */
/* Leere Fehlerzeilen nehmen keinen Platz mehr weg - vorher reservierte
   min-height plus Flex-Gap unter den Sprach-Flaggen eine sichtbare Luecke. */
.form-error:empty { display: none; }
.language-picker { margin-bottom: 0; }
.lang-checkboxes { margin-bottom: 0; }
/* Luft zwischen dem letzten Passwortfeld und Speichern/Abmelden */
.profile-actions-row { margin-top: 1.4rem; }
/* Hinweistext ueber den Kontaktdaten nicht direkt am ersten Label */
#contactCardPane > .note { margin-bottom: 1.1rem; }

/* Auswahlfelder seitenweit mit eigenem Pfeil und Abstand zum rechten Rand
   (der native Pfeil klebte am Rand, z. B. bei der Ländervorwahl). Die
   Formular-Selektoren mit aufgefuehrt, weil deren background-Kurzschreibweise
   sonst das Pfeil-Bild zuruecksetzt. */
select, .auth-form select, .sheet-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c1c1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 0.7rem auto;
  cursor: pointer;
}
/* Passwort-Block mit demselben Feldabstand wie der Rest des Formulars */
.profile-password-section { display: flex; flex-direction: column; gap: 0.85rem; padding-top: 1rem; }
.profile-password-section .section-label { margin-bottom: 0; }

/* Mehr Luft ueber dem Speichern-Knopf bei "Meine Daten" */
#contactCardForm button[type="submit"] { margin-top: 0.9rem; }


@media (min-width: 900px) {
  /* Kopf (Entfernung + X) schwebt oben rechts, die Kategorie-Zeile rueckt
     auf dieselbe Hoehe nach oben (Nutzerwunsch 2026-10-01). */
  .detail-panel-head { padding: 1.2rem 1.2rem 0.2rem 1.6rem; }
  .detail-panel-scroll { padding-top: 0.6rem; }
}

/* ---------- Kommentare nach Vorbild Kauf in Bremen (2026-10-01) ----------
   Jede Unterhaltung als weisse Karte, Antworten eingerueckt mit Linie links,
   Werkzeugzeile (Like, Antworten, Menue) unter jedem Kommentar. */
.comments-head { cursor: default; }
.comment-sort {
  font-size: 0.8rem; font-weight: 600; text-transform: none; letter-spacing: 0;
  border: none; border-radius: 999px; background-color: transparent;
  padding: 0.3rem 0.7rem; color: var(--text-primary);
}
.comment-list { gap: 0.9rem; margin-top: 0.6rem; margin-bottom: 0.6rem; }
/* Jede Unterhaltung als halbtransparente weisse Karte (Nutzervorgabe
   2026-10-02) statt Trennlinien - Abstand kommt vom gap der .comment-list. */
.comment-group {
  background-color: rgba(255, 255, 255, 1);
  padding: 15px 15px 5px;
  border-radius: 15px;
  box-shadow: 0px 0px 0px 1px #e8e8e8;
}
.comment-group .comment-item { display: block; }
.comment-group .comment-item.reply {
  margin: 0.75rem 0 0 0.9rem;
  padding-left: 0.8rem;
  box-shadow: inset 2px 0 0 var(--border);
}
.comment-head { display: flex; align-items: center; gap: 0.6rem; }
/* Avatar, Name und Kontakt-Knopf groesser (Nutzerwunsch 2026-10-02) */
.comment-avatar { width: 34px; height: 34px; font-size: 0.78rem; }
.comment-head .comment-author { font-size: 1.02rem; }
.comment-head .comment-time { white-space: nowrap; }
/* Kontaktdaten-Knopf rechtsbuendig, Zeit direkt hinter dem Namen (2026-10-02) */
.comment-head .comment-share-btn { margin-left: auto; }
.comment-group .comment-text { margin: 0.3rem 0 0; }
.comment-tools { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.35rem; }
.comment-tools button {
  background: none; border: none; padding: 0; font: inherit;
  font-size: 0.82rem; font-weight: 700; color: var(--text-muted); opacity: 0.8;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.comment-tools button:hover { opacity: 1; color: var(--text-primary); }
.comment-tools .comment-kebab-btn { margin-left: auto; width: 26px; height: 26px; justify-content: center; border-radius: 50%; }
.comment-tools .comment-kebab-btn:hover { background: var(--bg-subtle); }
.comments-empty { font-size: 0.92rem; }
.comment-group .comment-hidden-notice { margin-top: 0.4rem; }

/* "Antwort an X" ueber dem Eingabefeld */
.comment-composer { flex-wrap: wrap; }
.comment-reply-context {
  flex-basis: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.82rem; background: #fff; border-radius: 999px; padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  box-shadow: 0 0 0 1px var(--border);
}
.comment-reply-context button { border: none; background: none; padding: 0.15rem 0.35rem; color: var(--text-muted); }
.comment-reply-context i.fa-pen { font-size: 0.75rem; margin-right: 0.25rem; color: var(--text-muted); }

/* Kontaktdaten-Knopf direkt neben dem Namen im Kommentar */
.comment-share-btn {
  border: none; background: #e7e9eb; color: #7f8b5b;
  width: 2.3rem; height: 2.3rem; border-radius: 12px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.comment-share-btn:hover { filter: brightness(0.96); }

/* ---------- Restlaufzeit + Zeit-Tooltip (2026-10-02) ----------
   Ablaufendes Kreisdiagramm per conic-gradient: der gefuellte Sektor ist
   die verbleibende Zeit, die abgelaufene wird ab 12 Uhr im Uhrzeigersinn
   leer (Ring bleibt als Umriss), siehe updateExpiryTimer() in app.js. */
.expiry-timer { gap: 0.45rem; --pie-color: var(--accent); }
.expiry-timer--low { --pie-color: var(--orange-500); }
.expiry-pie {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--pie-color);
  background: conic-gradient(transparent calc(100% - var(--p, 0%)), var(--pie-color) 0);
}
.rel-time { cursor: help; text-decoration: underline dotted transparent; }
.rel-time:hover { text-decoration-color: currentColor; }
.time-tooltip {
  position: fixed;
  z-index: 200;
  padding: 0.35rem 0.7rem;
  border-radius: 10px;
  background: var(--text-primary);
  color: #fff;
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* ---------- Kommentar-Vollbild + Emojis (2026-10-02, Vorbild Kauf in Bremen) ---------- */
.comment-composer-btns { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.comment-compose-head { display: none; }
@media (max-width: 899.98px) {
  body.comment-composing main#mapMain.detail-open .detail-panel { transform: none; transition: none; }
  .comment-composer.is-composing {
    position: fixed;
    left: 0;
    right: 0;
    bottom: auto;
    top: var(--compose-top, 0px);
    height: var(--compose-h, 100dvh);
    margin: 0;
    z-index: 90;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: none;
    background: var(--bg-surface);
  }
  .comment-composer.is-composing .comment-compose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    font-weight: 700;
    font-size: 1.05rem;
  }
  .comment-composer.is-composing .comment-compose-close {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .comment-composer.is-composing textarea {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    border-radius: 18px;
    padding: 0.9rem 1rem;
    font-size: 1.05rem;
  }
  .comment-composer.is-composing .comment-composer-btns { justify-content: space-between; }
  .comment-composer.is-composing .emoji-picker-panel { bottom: calc(100% + 0.5rem); left: 0; right: auto; }
}

/* EmojiTwo im Fliesstext etwas groesser (Nutzerfeedback 2026-10-02). */
.emoji-img {
  width: 1.45em;
  height: 1.45em;
  vertical-align: -0.33em;
  object-fit: contain;
  margin: 0 0.05em;
}
.emoji-picker-wrap { position: relative; display: inline-flex; }
.emoji-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 50%;
  border: none;
  background: var(--bg-subtle);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.emoji-picker-btn:hover, .emoji-picker-btn[aria-expanded="true"] { background: var(--accent-light); }
.emoji-picker-btn .emoji-img { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
.emoji-picker-panel {
  position: absolute;
  z-index: 120;
  bottom: calc(100% + 0.5rem);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 2rem);
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.emoji-picker-search {
  border-radius: var(--radius-pill);
  border: none;
  background: var(--bg-subtle);
  padding: 0.45rem 0.8rem;
  font-size: 0.88rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.emoji-picker-tabs { display: flex; gap: 0.15rem; overflow-x: auto; }
.emoji-picker-tab {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-picker-tab .emoji-img { width: 1.15rem; height: 1.15rem; vertical-align: 0; }
.emoji-picker-tab:hover { opacity: 0.85; }
.emoji-picker-tab.is-active { opacity: 1; background: var(--accent-light); }
.emoji-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; max-height: 220px; overflow-y: auto; }
.emoji-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 0.3rem;
}
.emoji-picker-item:hover { background: var(--bg-subtle); }
.emoji-picker-item img { width: 100%; height: 100%; object-fit: contain; }
.emoji-picker-empty { font-size: 0.85rem; color: var(--text-muted); text-align: center; grid-column: 1 / -1; margin: 0.5rem 0; }
.emoji-picker-credit { font-size: 0.68rem; color: var(--text-muted); text-align: right; text-decoration: none; opacity: 0.7; }

/* Emoji-Knopf unten rechts im Beschreibungsfeld des Pin-Formulars */
.emoji-field { position: relative; display: block; }
.emoji-field textarea { width: 100%; padding-right: 3rem; box-sizing: border-box; }
.emoji-field > .emoji-picker-wrap { position: absolute; right: 0.45rem; bottom: 0.5rem; }
.emoji-field .emoji-picker-panel { bottom: calc(100% + 0.4rem); }

/* ---------- Erhaltene Kontaktdaten nach Mockup (2026-10-02) ---------- */
.received-card { background: #fffdf8; border-radius: 22px; padding: 1rem; gap: 0.75rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.received-card.is-new { box-shadow: inset 0 0 0 2px var(--accent); }
.received-head { display: flex; align-items: center; gap: 0.75rem; }
.received-head > .avatar-sm, .received-head > .avatar-img { width: 46px; height: 46px; font-size: 1rem; flex: none; }
.received-head .person-name { font-weight: 700; font-size: 1.08rem; }
.received-head .person-sub { font-size: 0.85rem; color: var(--text-muted); }
.received-head-btns { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; }
.received-icon-btn { border: none; background: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.received-icon-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
.received-menu { position: relative; }
.received-menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 5; min-width: 13rem;
  background: #fffdf8; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 0.4rem;
  display: flex; flex-direction: column;
}
.received-menu-panel button {
  display: flex; align-items: center; gap: 0.7rem; border: none; background: none; text-align: left;
  padding: 0.65rem 0.8rem; border-radius: 10px; font: inherit; font-size: 0.95rem; color: var(--text-primary);
}
.received-menu-panel button i { width: 1rem; text-align: center; color: var(--text-muted); }
.received-menu-panel button:hover { background: var(--bg-subtle); }
.received-menu-panel button.danger, .received-menu-panel button.danger i { color: var(--danger); }
.received-menu-panel hr { border: none; border-top: 1px solid var(--border); margin: 0.3rem 0.6rem; }
.context-pill {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; border: none; text-align: left;
  background: var(--bg-subtle); border-radius: 12px; padding: 0.55rem 0.8rem; font: inherit; font-size: 0.85rem; color: var(--text-muted);
}
.context-pill-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.context-pill-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.context-pill:hover { color: var(--text-primary); }
.received-head { cursor: pointer; }
/* Sprechblasen: erhalten gruen, spitze Ecke oben links; gesendet sandfarben,
   rechtsbuendig, spitze Ecke oben rechts. */
.received-bubble { margin: 0 1.5rem 0 0; background: #e3e9f0; border-radius: 4px 18px 18px 18px; padding: 0.85rem 1rem; font-size: 1rem; line-height: 1.5; }
.received-bubble.outgoing { margin: 0 0 0 1.5rem; background: #dee0e2; border-radius: 18px 4px 18px 18px; }
.sent-status { margin: -0.35rem 0 0; text-align: right; font-size: 0.8rem; color: var(--text-muted); }
.sent-status.seen { color: var(--accent); }
.received-less-btn { align-self: flex-end; margin: -0.3rem 0 0; }
.interaction-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.interaction-rows li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; line-height: 1.35; }
.interaction-row-text { flex: 1; min-width: 0; }
.interaction-row-time { display: block; font-size: 0.78rem; color: var(--text-muted); }
.tone-ia-like { background: #f7d4d7; color: #d72635; }
.tone-ia-comment { background: #dde6f4; color: #3a5a92; }
.tone-ia-going { background: #d8e2ef; color: #2f588d; }
.tone-ia-event { background: #f3ead2; color: #9a6b00; }
.received-tiles { display: flex; align-items: flex-start; gap: 0.5rem; }
.received-tile-list { display: flex; flex-wrap: wrap; gap: 0.45rem; flex: 1; min-width: 0; }
.received-details-btn { flex: none; align-self: center; margin-left: auto; border: none; background: none; font: inherit; font-weight: 700; color: var(--text-primary); padding: 0.4rem 0.2rem; }
.contact-tile {
  width: 2.9rem; height: 2.9rem; border-radius: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; text-decoration: none; cursor: pointer;
}
.contact-tile .mdi-icon { width: 1.05em; height: 1.05em; }
.contact-tile.small { width: 2.3rem; height: 2.3rem; border-radius: 10px; font-size: 1.2rem; }
.tone-phone { background: #e1e4e7; color: #2f3b4a; }
.tone-whatsapp { background: #d8e2ef; color: #2f588d; }
.tone-email { background: #dde6f4; color: #3a5a92; }
.tone-facebook { background: #dfe5f6; color: #1b4fb8; }
.tone-instagram { background: #f5dfe9; color: #c13584; }
.tone-tiktok { background: #e2e3e3; color: #1d1d1b; }
.tone-snapchat { background: #f9f0c2; color: #8a7000; }
.tone-telegram { background: #dbeefa; color: #1c8fc7; }
.tone-signal { background: #dfe6fb; color: #3a76f0; }
.tone-threema { background: #dce4ee; color: #2a2a2a; }
.contact-rows { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: #fffdf8; }
.contact-row { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem 0.55rem 0.7rem; }
/* Trennlinie erst ab dem Text, nicht unter der Kachel (Mockup) */
.contact-row + .contact-row::before { content: ''; position: absolute; top: 0; left: 3.8rem; right: 0; border-top: 1px solid var(--border); }
.contact-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.8rem; color: var(--text-primary); text-decoration: none; cursor: pointer; }
.contact-row-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row-action { font-size: 0.85rem; font-weight: 700; color: var(--accent); }
.contact-row-copy { border: none; background: none; color: var(--text-muted); padding: 0.3rem; font-size: 0.9rem; }
.contact-row-chevron { color: var(--text-muted); font-size: 0.8rem; }
.received-actions { display: flex; gap: 0.5rem; }
.received-actions > button {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  border-radius: 14px; padding: 0.75rem 0.4rem; font-size: 0.9rem; white-space: nowrap; overflow: hidden;
}
/* Schmale Handys: Modals mit etwas weniger Innenabstand, damit Karten wie
   die Kontakte-Liste mehr Breite haben. */
@media (max-width: 480px) {
  .modal { padding: 1.3rem 1rem; }
}

/* Kontakte durchsuchen */
.contacts-search { position: relative; display: block; margin: 0 0 0.9rem; }
.contacts-search i { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; pointer-events: none; }
.contacts-search input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: #fffdf8; padding: 0.65rem 1rem 0.65rem 2.4rem; font: inherit; font-size: 0.95rem;
}
.contacts-search input:focus { outline: none; border-color: var(--accent); }

/* ---------- Kontakte im Chat-Stil (Mockup 2026-10-02, 2. Fassung) ---------- */
#contactsList.person-list { gap: 2rem; }
.cmsg { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 0.75rem; align-items: start; }
/* Avatar-Mitte genau auf der Luecke zwischen Namenszeile und Blase:
   Kopf 1.6rem + halbe Luecke 0.15rem - halbe Avatarhoehe 22px. */
.cmsg-avatar > .avatar-sm, .cmsg-avatar > .avatar-img { width: 44px; height: 44px; font-size: 0.95rem; margin-top: calc(1.75rem - 22px); }
.cmsg-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cmsg-head { display: flex; align-items: center; gap: 0.5rem; height: 1.6rem; }
.cmsg-name { font-weight: 700; font-size: 1.05rem; }
.cmsg-date { font-size: 0.85rem; color: var(--text-muted); }
.cmsg-new { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); align-self: center; }
.cmsg-head .received-menu { margin-left: auto; align-self: center; }
.cmsg-bubble {
  background: #fffdf8; border-radius: 4px 20px 20px 20px; padding: 0.8rem 1rem 0.7rem;
  box-shadow: 0 2px 10px rgba(60, 45, 20, 0.07); display: flex; flex-direction: column; gap: 0.5rem;
}
.cmsg-bubble.outgoing { background: inherit; }
.cmsg-context { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--text-muted); }
.cmsg-context span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmsg-text { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.cmsg-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.15rem; }
.cmsg-way { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; font-size: 1.25rem; background: none !important; text-decoration: none; cursor: pointer; }
.cmsg-way .mdi-icon { width: 1.05em; height: 1.05em; }
.cmsg-details-btn { margin-left: auto; border: none; background: none; padding: 0.2rem 0; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.35rem; }
.cmsg-details-btn i { font-size: 0.7rem; }
.cmsg-details-btn:hover { color: var(--text-primary); }
.cmsg-rows { border-top: 1px solid var(--border); margin-top: 0.15rem; }
.cmsg-rows .contact-row { padding: 0.5rem 0; }
.cmsg-rows .contact-row + .contact-row::before { left: 2.4rem; }
.cmsg-rows .contact-row-main { gap: 0.8rem; }
.cmsg-foot { display: flex; align-items: center; gap: 0.4rem 0.9rem; padding: 0.15rem 0.2rem 0; flex-wrap: wrap; }
.cmsg-link { border: none; background: none; padding: 0; font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.4rem; }
.cmsg-link.primary { color: var(--button-color); }
.cmsg-link:hover { text-decoration: underline; }
.cmsg-meta { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); }
.cmsg-seen { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.cmsg .person-note, .cmsg .person-note-edit { margin: 0; }
.cmsg .interaction-rows li { font-size: 0.95rem; }

.cmsg-expiry { display: inline-flex; align-items: center; gap: 0.3rem; }
.cmsg-expiry .expiry-pie { width: 0.8rem; height: 0.8rem; }
.cmsg-date { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
/* Unter-Tabs mittig (safe: bei Ueberbreite trotzdem von links scrollbar) */
.sub-tabs { justify-content: center; justify-content: safe center; }

/* Kontakte-Knopf im Header neben dem Avatar (2026-10-02) */
.contacts-btn {
  position: relative; flex: none; width: 2.3rem; height: 2.3rem; padding: 0; border: none; border-radius: 50%;
  background: var(--bg-subtle); color: var(--text-primary); font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.contacts-btn[hidden] { display: none; }
.contacts-btn .header-badge { background: var(--accent); }
.contacts-btn .mdi-icon { width: 1.25em; height: 1.25em; vertical-align: 0; }
@media (min-width: 900px) {
  .contacts-btn { width: 3rem; height: 3rem; font-size: 1.2rem; background: #fff; box-shadow: var(--shadow-md); }
}

/* Schalter: hoehere Spezifitaet als die globalen input[type="checkbox"]-
   Regeln (eigene Haekchen-Checkbox weiter oben), die sonst gewinnen. */
input[type="checkbox"].switch {
  position: relative; display: inline-block; width: 2.75rem; height: 1.6rem;
  border: none; border-radius: 999px; background: var(--neutral-300); transition: background 0.2s;
}
input[type="checkbox"].switch::before {
  content: ''; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); clip-path: none; transform: none; transition: transform 0.2s;
}
input[type="checkbox"].switch:checked { background: var(--accent); }
input[type="checkbox"].switch:checked::before { transform: translateX(1.15rem); }
input[type="checkbox"].switch:hover:not(:checked) { background: var(--neutral-400); }

/* "Nur gemerkte Pins" aktiv: Kategorien sind dann wirkungslos -> ausgegraut */
#filterModal.only-saved .filter-all-row,
#filterModal.only-saved #filterCategoryPicker { opacity: 0.4; pointer-events: none; }

/* Kontakte-Unter-Tabs im Stil der Profil-Tabs (Segmented Control); Breite
   nach Inhalt, damit "Kuerzlich interagiert" auf schmalen Handys passt. */
#contactsSubTabs .auth-tab-btn { flex: 1 1 auto; padding: 0.6rem 0.5rem; font-size: 0.88rem; }

/* Kontakte-Fenster mit fester Hoehe (Nutzerwunsch 2026-10-02: beim Wechsel
   Erhalten/Gesendet sprang die Fensterhoehe). Tabs + Suche bleiben oben,
   nur die Liste scrollt. */
#contactsModal .modal { height: min(90vh, 760px); display: flex; flex-direction: column; overflow: hidden; }
#contactsModal .modal > :not(#contactsList) { flex: none; }
#contactsModal #contactsList { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -0.4rem; padding: 0.2rem 0.4rem 1rem; }

/* ---------- Personen-Modal, Zeit rechts, Teilen-Knopf in der Aktionszeile
   (Nutzerwunsch 2026-10-03) ---------- */
/* Name/Avatar als unsichtbare Buttons, die das Personen-Modal oeffnen. */
.person-trigger {
  border: none; background: none; padding: 0; margin: 0;
  font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; text-align: left; cursor: pointer;
}
.person-trigger-avatar { display: inline-flex; flex: none; border-radius: 50%; }
.person-trigger-name:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Kontaktdaten-Knopf aus den Kommentaren ist weg - Zeit sitzt rechts. */
.comment-head .comment-time { margin-left: auto; }
.comment-head .comment-author { text-align: left; }
.comment-head .comment-avatar { flex: none; }
.detail-author > .person-trigger-avatar > .avatar-sm,
.detail-author > .person-trigger-avatar > .avatar-img { width: 46px; height: 46px; font-size: 1rem; }
.detail-author-name .person-trigger-name { font-weight: 700; font-size: 1.05rem; }

/* Teilen-Knopf neben Herz/Merken (gleiche Groesse wie die beiden). */
.detail-action-row .detail-share-btn { background: var(--btn-contact-bg); color: var(--btn-contact-fg); }
.detail-share-btn .mdi-icon { width: 1.35em; height: 1.35em; }

/* Muttersprache/Standardsprache mit Ring - gleiche Drei-Schichten-Optik wie
   der Auswahl-Ring im Sprachen-Picker (Flagge, Luecke, Ring). */
.lang-flag-icon.is-native {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 3px #fff, 0 0 0 5px var(--button-color);
  margin: 0 0.35rem;
}
.lang-flag-icon.is-native:first-child { margin-left: 0; }
.person-modal .lang-flag-icon { width: 1.6rem; height: 1.6rem; }

/* Personen-Modal */
.person-modal { text-align: center; max-width: 340px; }
.person-modal-avatar { display: flex; justify-content: center; margin: 0.4rem 0 0.8rem; }
.person-modal-avatar .avatar-xl { width: 112px; height: 112px; font-size: 2.6rem; }
.person-modal h2 { margin: 0 0 0.6rem; }
.person-modal-langs { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-bottom: 1.1rem; }
.person-modal-langs-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.person-modal .modal-action-list { text-align: left; }
.person-modal .author-lang-flags { gap: 0.45rem; }

/* Sticky-Kopf: Titel statt Kategorie, sobald die Ueberschrift weggescrollt ist. */
.detail-head-eyebrow .head-title {
  display: none;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700; font-size: 1.15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail-panel-head.show-title .cat-eyebrow { display: none; }
.detail-panel-head.show-title .head-title { display: block; }

/* Mehr Luft unter der letzten Antwort / dem letzten Kommentar in der Karte. */
.comment-group { padding-bottom: 14px; }
.comment-group .comment-item.reply { padding-bottom: 0.2rem; }
#rsvpSummary[hidden] { display: none; }

/* ---------- Mobiler Header in zwei Zeilen (Nutzerwunsch 2026-10-03) ----------
   Zeile 1: Wortmarke, Kontakte, Avatar. Zeile 2: Filter-Knopf links, daneben
   der Karte/Termine-Switch. Filter-Knopf im Stil des Switches (helle Pille,
   kein dunkler Rand mehr). Desktop: Filter sitzt in der festen Filter-Karte,
   der Knopf ist dort ausgeblendet. */
.filter-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bg-subtle); color: var(--text-primary);
  border: none; border-radius: var(--radius-pill);
  padding: 0.65rem 1.1rem; min-height: 2.9rem;
  font-size: 0.92rem; font-weight: 700;
}
.filter-pill i { font-size: 0.95rem; color: var(--text-secondary); }
.filter-pill:hover { filter: brightness(0.97); }
.map-toolbar { justify-content: flex-end; }
body[data-view="events"] .filter-pill { display: none; }
@media (max-width: 899.98px) {
  .topbar { flex-wrap: wrap; row-gap: 0.5rem; }
  .brand { margin-right: auto; }
  .topbar-center { display: flex; order: 10; flex: 0 0 100%; align-items: center; gap: 0.6rem; }
  .topbar-center .tabs { flex: 1; padding: 0.25rem; }
  .topbar-center .tab-btn { padding: 0.6rem 0.7rem; }
}
@media (min-width: 900px) {
  .filter-pill { display: none; }
}

/* ---------- Anzeigesprache-Knopf + Menue (2026-10-03) ---------- */
.lang-btn {
  flex: none; width: 2.3rem; height: 2.3rem; padding: 0; border: none; border-radius: 50%;
  background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
}
.lang-btn .lang-flag-icon { width: 1.5rem; height: 1.5rem; }
.lang-btn:hover { filter: brightness(0.96); }
.lang-menu {
  position: fixed; z-index: 60; min-width: 13rem;
  background: var(--bg-surface); border-radius: 18px; padding: 0.5rem;
  box-shadow: var(--shadow-lg);
}
.lang-menu[hidden] { display: none; }
.lang-menu-title {
  padding: 0.4rem 0.7rem 0.5rem; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.lang-menu-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  border: none; background: none; border-radius: 12px; padding: 0.55rem 0.7rem;
  font: inherit; font-weight: 600; color: var(--text-primary); text-align: left;
}
.lang-menu-item:hover { background: var(--bg-subtle); }
.lang-menu-item.active { background: var(--bg-subtle); }
.lang-menu-item .fa-check { margin-left: auto; color: var(--button-color); }
.lang-menu .lang-flag-icon { width: 1.6rem; height: 1.6rem; }
@media (min-width: 900px) {
  .lang-btn { width: 3rem; height: 3rem; background: #fff; box-shadow: var(--shadow-md); }
  .lang-btn .lang-flag-icon { width: 1.7rem; height: 1.7rem; }
}

/* ---------- "Pin setzen" unten rechts auf Handy/Tablet (Nutzerwunsch
   2026-10-03) ---------- Orange wie der Desktop-Knopf im Header; ueber der
   Karten-Attribution, waehrend des Positionswaehlens ausgeblendet. */
@media (max-width: 899.98px) {
  .map-toolbar {
    top: auto; left: auto;
    right: 1rem;
    bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px));
    justify-content: flex-end;
  }
  #newPostBtn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    height: 3rem; padding: 0 1.4rem;
    background: var(--orange-500);
    font-size: 1.02rem;
    box-shadow: var(--shadow-md);
  }
  body.picking:not(.picking-new) .map-toolbar { display: none; }
}

/* ---------- Handy/Tablet: zweite Kopfzeile schwebt AUF der Karte
   (Nutzerwunsch 2026-10-03) ---------- Der beige Header mit Verlauf enthaelt
   nur noch Wortmarke + Knoepfe. Filter und Karte/Termine liegen darunter
   direkt auf der Karte, unterhalb des (verkuerzten) Verlaufs, mit Schatten
   statt Header-Hintergrund. */
@media (max-width: 899.98px) {
  .topbar::after { height: 0.9rem; }
  .topbar-center {
    position: absolute;
    top: calc(100% + 1rem);
    left: 0.8rem; right: 0.8rem;
    z-index: 11;
    flex: none;
  }
  .topbar-center .tabs, .filter-pill { box-shadow: var(--shadow-md); }
  .topbar-center .tabs { background: var(--bg-surface); }
  .filter-pill { background: var(--bg-surface); }
  /* Termine-Ansicht: Inhalt beginnt unterhalb der schwebenden Zeile. */
  main#eventsMain { padding-top: 5.2rem; }
}

/* Handy/Tablet: "Bin dabei"/"Vielleicht" in eigener Zeile UNTER Herz/Merken/
   Kontakt, damit die Knoepfe die volle Breite bekommen (Nutzerwunsch
   2026-10-03). Gilt seit 2026-10-07 auch am Desktop. */
@media all {
  .detail-action-row { flex-wrap: wrap; row-gap: 0.6rem; }
  .detail-action-row .like-box { order: 1; }
  .detail-action-row .detail-share-btn { order: 2; }
  .detail-action-row .rsvp-buttons { order: 3; flex: 1 0 100%; }
  .detail-action-row .rsvp-btn { flex: 1; height: 3rem; }
}

/* "Pin setzen" nur noch als Plus (Nutzerwunsch 2026-10-03): runde Knoepfe,
   Name steht in title/aria-label. */
#newPostBtn, #headerNewPostBtn {
  width: 3.2rem; height: 3.2rem; padding: 0; gap: 0;
  border-radius: 50%; justify-content: center;
  font-size: 1.3rem;
}
@media (min-width: 900px) {
  /* Desktop-Header: Pille mit Text "Pin hinzufuegen" (Nutzerwunsch 2026-10-04) */
  #headerNewPostBtn { width: auto; height: 3rem; padding: 0 1.5rem; gap: 0.5rem; border-radius: 999px; font-size: 1.05rem; }
}

/* Filter-Pille und Karte/Termine-Switch exakt gleich hoch (Handy/Tablet). */
@media (max-width: 899.98px) {
  .topbar-center .tabs, .filter-pill { height: 2.9rem; min-height: 0; box-sizing: border-box; }
  .topbar-center .tabs { align-items: stretch; }
  .topbar-center .tab-btn { padding-top: 0; padding-bottom: 0; }
  .filter-pill { padding-top: 0; padding-bottom: 0; }
}

/* Tablet: Karte/Termine-Switch nicht ueber die ganze Breite ziehen, sondern
   auf eine sinnvolle Maximalbreite begrenzen (Nutzerhinweis 2026-10-03). */
@media (max-width: 899.98px) {
  .topbar-center .tabs { flex: 1 1 auto; max-width: 21rem; }
}

/* ---------- Profil-Modal: fester Kopf/Fuss, scrollender Mittelteil (2026-10-03) ---------- */
.modal-fixed { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: min(90vh, 720px); }
.modal-fixed-head { flex: none; padding: 1.4rem 1.6rem 0.2rem; position: relative; }
.modal-fixed-head h2 { margin-right: 3rem; line-height: 2.6rem; }
.modal-fixed-head .profile-tabs { margin-bottom: 0.6rem; }
.modal-close-round {
  top: 1.1rem; right: 1.2rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--btn-close-bg); color: var(--btn-close-fg); font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.modal-close-round:hover { filter: brightness(0.95); }
.modal-pane, .modal-pane-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal-pane[hidden] { display: none; }
.modal-fixed-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0.6rem 1.6rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-fixed-foot { flex: none; padding: 0.9rem 1.6rem 1.2rem; border-top: 1px solid var(--border); background: var(--bg-surface); display: flex; gap: 0.7rem; margin: 0; }
.modal-fixed-foot button { flex: 1; margin: 0 !important; }
#contactCardPane > .note { margin: 0; }
.cf-rows { display: flex; flex-direction: column; gap: 0.8rem; }
.cf-row { display: flex; align-items: center; gap: 0.7rem; }
.cf-row > input { flex: 1; min-width: 0; }
.cf-icon { flex: none; width: 2rem; display: inline-flex; justify-content: center; font-size: 1.5rem; color: var(--text-muted); }
.cf-icon .mdi-icon { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.phone-field .phone-row { flex: 1; min-width: 0; }
.phone-messengers { margin-top: 0.5rem; gap: 0.9rem; }
.phone-messengers .cf-icon { margin-right: -0.2rem; }
.messenger-check { display: inline-flex !important; align-items: center; gap: 0.4rem; font-size: 1.3rem; cursor: pointer; flex-direction: row !important; }
.phone-field .phone-preview { margin: 0.3rem 0 0 2.3rem; }
.auth-form label.cf-row, .auth-form .cf-row { flex-direction: row; align-items: center; gap: 0.7rem; }
.auth-form .phone-messengers { gap: 0.9rem; }
.auth-form label.messenger-check { flex-direction: row; gap: 0.4rem; }

/* Karte/Termine-Switch: Icon + Text, mobil nur Icon (2026-10-03) */
.tabs .tab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
@media (max-width: 899px) { .tabs .tab-label { display: none; } .tabs .tab-btn i { font-size: 1.15rem; } }
#postMenuBtn i, #postMenuBtn svg { transform: rotate(90deg); }

/* Mobil: Filter nur Icon, Filter-Knopf und Switch schmal (2026-10-03) */
@media (max-width: 899.98px) {
  .filter-label { display: none; }
  .filter-pill { width: 2.9rem; padding: 0; justify-content: center; }
  .filter-pill i { font-size: 1.1rem; }
  .topbar-center .tabs { flex: none; max-width: none; }
  .topbar-center .tab-btn { padding-left: 1rem; padding-right: 1rem; }
}

/* "Bin dabei"/"Vielleicht": gewaehlter Zustand eindeutig vollflaechig, auch
   gegen die Mobil-/Aktionszeilen-Regeln und Fokus/Hover-Reste (2026-10-03). */
.detail-action-row .rsvp-buttons .rsvp-btn.active,
.detail-action-row .rsvp-buttons .rsvp-btn.active:hover,
.detail-action-row .rsvp-buttons .rsvp-btn.active:focus {
  background: var(--button-color) !important;
  border-color: var(--button-color) !important;
  color: #fff !important;
  filter: none;
}
.rsvp-btn { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.rsvp-btn.active i { display: inline-block; }

@media (max-width: 899.98px) {
  .category-option span:last-child { font-size: 0.8rem; line-height: 1.15; }
}

/* Handy/Tablet: Karte/Termine-Switch mittig in der Zeile, Filter bleibt links. */
@media (max-width: 899.98px) {
  .topbar-center { justify-content: center; min-height: 2.9rem; }
  .topbar-center .tabs { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
  .topbar-center .filter-pill { position: relative; z-index: 1; margin-right: auto; }
}

/* Wechsel Karte <-> Termine: sanftes Einblenden (nur opacity - ein transform
   wuerde das position:fixed-Detail-Panel auf dem Handy verschieben). */
@keyframes view-fade-in { from { opacity: 0; } to { opacity: 1; } }
main#mapMain:not([hidden]), main#eventsMain:not([hidden]) { animation: view-fade-in 0.25s ease; }
.tab-btn { transition: background-color 0.2s, color 0.2s; }
@media (prefers-reduced-motion: reduce) {
  main#mapMain:not([hidden]), main#eventsMain:not([hidden]) { animation: none; }
}

/* Filter: Kategorien als Farbkreise mit Beschriftung darunter (Mockup
   2026-10-03). Aktiv = gefuellter Kreis, inaktiv = Umriss + gedaempfte
   Schrift. Drei pro Reihe, damit es kompakt bleibt. Nur #filterModal -
   der "Neuer Pin"-Picker behaelt sein Aussehen. */
#filterModal .category-picker,
#filterModal .category-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 0.4rem; }
#filterModal .category-option,
#filterModal .category-option.active {
  flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;
  gap: 0.45rem; padding: 0.2rem 0; border: none; background: none; color: var(--text-primary);
  white-space: normal; font-size: 0.85rem; line-height: 1.15;
}
#filterModal .category-option .cat-icon { display: none; }
#filterModal .category-option::before {
  content: ''; width: 3rem; height: 3rem; border-radius: 50%; box-sizing: border-box; flex: none;
  border: 2.5px solid color-mix(in srgb, var(--cat-color) 45%, #fff);
  background: transparent; transition: background-color 0.15s, border-color 0.15s;
}
#filterModal .category-option.active::before { background: var(--cat-color); border-color: var(--cat-color); }
#filterModal .category-option:not(.active) { color: var(--text-muted); }
#filterModal .category-option span:last-child { font-size: 0.85rem; line-height: 1.15; }
#filterModal .category-option:hover { border: none; }

/* Filter, Korrektur: Icon im Kreis, zwei pro Reihe, Kreis links / Name rechts, enger. */
#filterModal .category-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 0.6rem; }
#filterModal .category-option,
#filterModal .category-option.active {
  flex-direction: row; justify-content: flex-start; text-align: left; gap: 0.6rem; padding: 0.1rem 0;
}
#filterModal .category-option::before { display: none; }
#filterModal .category-option .cat-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.4rem; height: 2.4rem; box-sizing: border-box; border-radius: 50%; font-size: 1rem;
  border: 2px solid color-mix(in srgb, var(--cat-color) 45%, #fff);
  color: var(--cat-color); background: transparent; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
#filterModal .category-option.active .cat-icon { background: var(--cat-color); border-color: var(--cat-color); color: #fff; }
#filterModal .category-option span:last-child { font-size: 0.88rem; }

/* Filter: Name wieder unter dem Icon-Kreis (2 pro Reihe, eng). */
#filterModal .category-picker { gap: 0.6rem 0.4rem; }
#filterModal .category-option,
#filterModal .category-option.active {
  flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; gap: 0.3rem; padding: 0.1rem 0;
}
#filterModal .modal { width: min(18rem, 100%); }

/* Filter: Icon + Name gemeinsam in einer farbigen Kachel mit runden Ecken
   (Name weiter unter dem Icon). Aktiv = Kategoriefarbe, inaktiv = blasser Ton. */
#filterModal .category-picker { gap: 0.5rem; }
#filterModal .category-option,
#filterModal .category-option.active {
  padding: 0.55rem 0.4rem 0.5rem; gap: 0.3rem; border-radius: 16px; border: 2px solid transparent;
  background: color-mix(in srgb, var(--cat-color) 14%, #fff); color: var(--text-muted);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
#filterModal .category-option.active { background: var(--cat-color); border-color: var(--cat-color); color: #fff; }
#filterModal .category-option:hover { border: 2px solid var(--cat-color); }
#filterModal .category-option .cat-icon,
#filterModal .category-option.active .cat-icon {
  width: auto; height: auto; border: none; background: none; border-radius: 0; font-size: 1.35rem; line-height: 1.2;
}
#filterModal .category-option:not(.active) .cat-icon { color: var(--cat-color); }
#filterModal .category-option.active .cat-icon { color: #fff; }

/* Filter-Kopf mit Icon + Ein-/Ausklappen (Desktop-Karte). Mobil bleibt der Knopf weg. */
.filter-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.filter-head h2 { display: flex; align-items: center; gap: 0.5rem; }
.filter-collapse-btn { display: none; }
@media (min-width: 900px) {
  .filter-collapse-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2rem; height: 2rem; margin: 0 0 0.8rem; border: none; border-radius: 50%;
    background: var(--bg-subtle); color: var(--text-muted); font-size: 0.85rem;
  }
  .filter-collapse-btn:hover { filter: brightness(0.95); }
  .filter-collapse-btn i { transition: transform 0.2s; }
  #filterModal .modal.collapsed .filter-collapse-btn i { transform: rotate(180deg); }
  #filterModal .modal.collapsed .filter-body > * { display: none; }
  #filterModal .modal.collapsed .filter-head h2, #filterModal .modal.collapsed .filter-collapse-btn { margin-bottom: 0; }
  #filterModal .modal.collapsed { padding-bottom: 1.2rem; }
}

/* Schriften: Desktop nutzt dieselben wie Mobil (Baloo 2 fuer Ueberschriften,
   Maven Pro sonst) statt Instrument Serif / DM Mono (Nutzerwunsch 2026-10-03). */
@media (min-width: 900px) {
  .brand, .detail-panel-scroll h3 { font-family: 'Baloo 2', 'Maven Pro', system-ui, sans-serif; letter-spacing: normal; }
  .brand-sub, .distance-chip, .cat-eyebrow, .comments-head, .comment-time, #filterModal h2 {
    font-family: 'Maven Pro', system-ui, sans-serif;
  }
}

/* Filter-Knopf: Pfeil seitlich (um 90 Grad gedreht), weich drehend; Inhalt
   klappt per Transition ein/aus statt hart zu verschwinden. */
@media (min-width: 900px) {
  .filter-collapse-btn i { transform: rotate(-90deg); transition: transform 0.25s ease; }
  #filterModal .modal.collapsed .filter-collapse-btn i { transform: rotate(90deg); }
  #filterModal .modal .filter-body > * {
    max-height: 40rem; overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease, padding 0.3s ease;
  }
  #filterModal .modal.collapsed .filter-body > * {
    display: block !important; max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; pointer-events: none;
  }
  #filterModal .modal { transition: padding 0.3s ease; }
}

/* Karte/Termine: gleitende Pille statt hartem Hintergrundwechsel. */
.tabs { position: relative; }
@media (max-width: 899.98px) { .topbar-center .tabs { position: absolute; } }
.tab-indicator {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  background: var(--button-color); border-radius: var(--radius-pill);
}
.tab-indicator.ready { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.tabs .tab-btn { position: relative; z-index: 1; }
.tabs .tab-btn.active { background: transparent; }

/* Eingeklappt: Filter-Karte auch schmaler (nur Kopf), Breite animiert mit. */
@media (min-width: 900px) {
  #filterModal .modal { transition: padding 0.3s ease, width 0.3s ease; }
  #filterModal .modal.collapsed { width: 10rem; padding-left: 1.1rem; padding-right: 1rem; }
}

/* Profil-/Kontakte-Tabs: gleitende Pille */
.profile-tabs { position: relative; }
.slide-indicator {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  background: #fffdf8; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.slide-indicator.ready { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.profile-tabs .auth-tab-btn { position: relative; z-index: 1; }
.profile-tabs .auth-tab-btn.active { background: transparent; box-shadow: none; }

/* Modals: beim Oeffnen sanft einblenden (Overlay faded, Dialog schiebt leicht
   hoch; "Neuer Pin"-Sheet gleitet von unten). Reine CSS-Animation auf
   :not([hidden]) - greift egal, wie das Modal geoeffnet wird. Die feste
   Desktop-Filterkarte ist ausgenommen. */
@keyframes modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes sheet-slide-in { from { transform: translateY(100%); } to { transform: none; } }
.modal-overlay:not([hidden]) { animation: modal-overlay-in 0.2s ease; }
.modal-overlay:not([hidden]) > .modal { animation: modal-pop-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet-overlay:not([hidden]) > .sheet-modal { animation: sheet-slide-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (min-width: 900px) {
  #filterModal.modal-overlay:not([hidden]), #filterModal.modal-overlay:not([hidden]) > .modal { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay:not([hidden]), .modal-overlay:not([hidden]) > .modal, .sheet-overlay:not([hidden]) > .sheet-modal { animation: none; }
}

/* Kommentarfeld buendig am unteren Rand: kein Scroll-Padding darunter und kein
   negativer unterer Rand mehr - sonst blieb ein Spalt, durch den die Kommentare
   hindurchschienen. Desktop hat 1.6rem seitliches Panel-Padding. */
.detail-panel-scroll:has(> .comment-composer) { padding-bottom: 0; }
.comment-composer { margin-bottom: 0; }
@media (min-width: 900px) {
  .comment-composer { margin-left: -1.6rem; margin-right: -1.6rem; padding-left: 1.6rem; padding-right: 1.6rem; }
}

/* Hover-Zustaende: Toggle-Tabs (Karte/Termine, Profil, Kontakte) und
   Filter-Kategorien. Nur fuer Geraete mit echtem Hover. */
.tabs .tab-btn, .profile-tabs .auth-tab-btn, #filterModal .category-option { transition: background-color 0.15s, color 0.15s, border-color 0.15s, filter 0.15s; }
@media (hover: hover) {
  .tabs .tab-btn:not(.active):hover { background: rgba(0, 0, 0, 0.07); }
  .profile-tabs .auth-tab-btn:not(.active):hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); }
  #filterModal .category-option:not(.active):hover,
  #filterModal .category-option:not(.active):focus-visible { background: color-mix(in srgb, var(--cat-color) 28%, #fff); border-color: transparent; color: var(--text-primary); }
  #filterModal .category-option.active:hover { filter: brightness(0.9); }
}

/* Globale Hover-Transition fuer alles Klickbare. Niedrige Spezifitaet - Elemente
   mit eigener transition-Angabe behalten diese. */
button, a, select, input, textarea, summary, [role="button"], label {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  button, a, select, input, textarea, summary, [role="button"], label { transition: none; }
}

/* Pins: Hover-Ring (nur mit echtem Hover). */
/* Hover = derselbe Ring wie beim aktiven Pin, blendet weich ein (keine Groessen-/Positionsaenderung). */
.pin-bubble::before {
  content: ''; position: absolute; inset: -5px; border: 2px solid var(--text-primary);
  border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease;
}
.pin-marker.selected .pin-bubble::before { opacity: 1; }
@media (hover: hover) {
  .pin-marker:hover .pin-bubble::before { opacity: 1; }
}

/* Filter: Icon-Farbe wechselt weich mit der Kachel. */
#filterModal .category-option .cat-icon { transition: color 0.15s ease; }

/* Bin dabei / Vielleicht: Transition + Hover. */
.rsvp-btn { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, filter 0.18s ease; }
@media (hover: hover) {
  .detail-action-row .rsvp-buttons .rsvp-btn:not(.active):hover { background: color-mix(in srgb, var(--button-color) 12%, transparent); }
}

/* Kurzbeschreibung im Personen-Modal */
.person-modal-bio { margin: 0 0 0.8rem; font-size: 0.95rem; line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }

/* Quellenhinweis steht im Info-Modal (2026-10-03): Leaflet-Feld ausgeblendet,
   stattdessen runder "i"-Knopf unten rechts. */
.leaflet-control-attribution { display: none !important; }
.info-modal { max-width: 30rem; }
.info-heading { margin: 1.1rem 0 0.3rem; font-size: 1rem; }
.info-sources, .info-placeholder { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); }
.info-sources a { color: var(--button-color); }
.info-placeholder { font-style: italic; color: var(--text-muted); }

.phone-messengers { gap: 1.4rem; flex-wrap: wrap; }
.auth-form label.messenger-switch { flex-direction: row; align-items: center; gap: 0.6rem; font-size: 1.5rem; cursor: pointer; }
.phone-field .phone-preview { margin-left: 2.7rem; }
@media (hover: hover) { .secondary-btn:hover { background: color-mix(in srgb, var(--button-color) 8%, transparent); } }
/* Secondary-Button: deutlicher Hover (fuellt sich in der Knopffarbe). */
.secondary-btn { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
@media (hover: hover) {
  button.secondary-btn:hover:not(:disabled), .modal button.secondary-btn:hover:not(:disabled) { background: var(--button-color); color: #fff; }
}

/* "Neuer Pin" am Desktop: zentrierter Dialog statt Bottom-Sheet (kein Handle,
   rundum abgerundet, Pop-in statt Slide-up). */
@media (min-width: 900px) {
  .sheet-overlay { align-items: center; padding: 1.2rem; }
  .sheet-modal { max-width: 34rem; max-height: 90vh; border-radius: 28px; box-shadow: var(--shadow-lg); }
  .sheet-modal .sheet-handle { display: none; }
  .sheet-modal-head { padding: 1.4rem 1.6rem 0.6rem; }
  .sheet-modal-head .icon-btn[data-close] { width: 2.6rem; height: 2.6rem; background: var(--btn-close-bg); color: var(--btn-close-fg); }
  .sheet-modal-scroll { padding: 0 1.6rem 1.8rem; }
  .sheet-overlay:not([hidden]) > .sheet-modal { animation: modal-pop-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
}

/* ---------- Eigene Datum-/Zeit-Picker ---------- */
.picker-wrap { position: relative; display: block; width: 100%; }
.picker-native { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.picker-trigger {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; box-sizing: border-box; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem;
  background: #fff; color: var(--text-primary); font-weight: 400; font-size: 1rem; white-space: nowrap; cursor: pointer;
}
.picker-trigger i { color: var(--text-muted); font-size: 0.95rem; flex: none; }
.picker-trigger span { overflow: hidden; text-overflow: ellipsis; }
.picker-trigger .is-placeholder { color: var(--text-muted); opacity: 0.8; }
.picker-trigger:hover, .picker-trigger.is-open { border-color: var(--button-color); }
.sheet-form .picker-trigger { background: var(--bg-subtle); border-color: transparent; }
.sheet-form .picker-trigger:hover, .sheet-form .picker-trigger.is-open { border-color: var(--button-color); }

.picker-pop {
  position: fixed; z-index: 300; width: 19rem; max-width: calc(100vw - 16px); box-sizing: border-box;
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); padding: 0.9rem;
  animation: modal-pop-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.picker-pop-time { width: 12rem; }
.picker-pop button { font: inherit; border: none; background: none; color: var(--text-primary); cursor: pointer; }
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.picker-title { font-weight: 700; font-size: 1rem; }
.picker-nav { width: 2rem; height: 2rem; border-radius: 50%; background: var(--bg-subtle) !important; color: var(--text-muted) !important; font-size: 0.8rem; }
.picker-nav:hover { filter: brightness(0.94); }
.picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.picker-weekdays { margin-bottom: 2px; }
.picker-weekdays span { text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); padding: 0.25rem 0; }
.picker-day { aspect-ratio: 1; border-radius: 50%; font-size: 0.9rem; padding: 0; }
.picker-day.is-other { color: var(--text-muted) !important; opacity: 0.45; }
.picker-day.is-today { box-shadow: inset 0 0 0 1.5px var(--button-color); }
.picker-day:hover:not(.is-selected) { background: var(--bg-subtle); }
.picker-day.is-selected, .picker-t.is-selected { background: var(--button-color) !important; color: #fff !important; font-weight: 700; }
.picker-time { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.picker-time.with-date { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.picker-colon { font-weight: 700; color: var(--text-muted); }
.picker-col { height: 8.5rem; width: 4.2rem; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 2px; position: relative; }
.picker-col::-webkit-scrollbar { display: none; }
.picker-t { flex: none; height: 2rem; border-radius: 12px; font-size: 0.95rem; }
.picker-t:hover:not(.is-selected) { background: var(--bg-subtle); }
.picker-foot { display: flex; justify-content: space-between; margin-top: 0.7rem; }
.picker-link { padding: 0.35rem 0.6rem; border-radius: 10px; font-size: 0.9rem; color: var(--text-muted) !important; }
.picker-link.strong { color: var(--button-color) !important; font-weight: 700; }
.picker-link:hover { background: var(--bg-subtle) !important; }
@media (prefers-reduced-motion: reduce) { .picker-pop { animation: none; } }

/* "Neuer Pin": Veroeffentlichen-Knopf fest im Footer, Meldung darueber. */
.sheet-modal-foot {
  flex: none; padding: 0.8rem 1.4rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: var(--bg-surface);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.sheet-modal-foot .form-error { margin: 0; }
.sheet-modal-foot .primary-btn { margin: 0; }
.sheet-modal-scroll { padding-bottom: 1.4rem !important; }
@media (min-width: 900px) {
  .sheet-modal-foot { padding: 0.9rem 1.6rem 1.2rem; }
  .sheet-modal-foot { border-radius: 0 0 28px 28px; }
}
/* Fehlerhaftes Pflichtfeld */
.is-invalid, .is-invalid.picker-trigger, .sheet-form .is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.category-picker.is-invalid { border-radius: var(--radius-sm); }
.address-field.is-invalid { border-radius: var(--radius-sm); }

/* Emoji-Panel steckt in einem <label> (Beschreibung): keine geerbte Schrift-
   Formatierung des Labels, volle Deckkraft. */
.emoji-picker-panel { text-transform: none; letter-spacing: normal; font-size: 1rem; font-weight: 400; color: var(--text-primary); opacity: 1; background: #fff; }
.sheet-form .picker-trigger { background: #fff; }
.sheet-modal { overflow: hidden; } .sheet-modal-scroll { position: relative; min-height: 0; }

/* ---------- Header: Karte/Termine-Switch in der obersten Zeile (Nutzerwunsch
   2026-10-03) ---------- Handy/Tablet: Wortmarke, Switch, Sprache, Kontakte,
   Avatar in EINER Zeile (Tablet: Switch mittig + beschriftet, Handy: nur Icons).
   Der Filter-Knopf schwebt allein links oben auf der Karte, in dunklem Gruen
   (andere Hintergrundfarbe als der helle Switch). */
.detail-panel-scroll p { line-height: 1.65; }
.detail-action-row:not(:has(button)) { display: none; }
@media (max-width: 899.98px) {
  .topbar { flex-wrap: nowrap; gap: 0.5rem; }
  .topbar .topbar-center { display: contents; }
  .topbar .topbar-center .filter-pill {
    position: absolute; top: calc(100% + 1rem); left: 0.8rem; margin: 0; z-index: 11;
    background: var(--button-color); color: #fff;
  }
  .topbar .topbar-center .filter-pill i { color: #fff; }
  .topbar .topbar-center .tabs {
    flex: none; max-width: none; height: 2.6rem; padding: 0.2rem;
    position: static; transform: none; box-shadow: none; background: var(--bg-subtle);
  }
  .topbar .topbar-center .tab-btn { padding: 0 0.8rem; }
  main#eventsMain { padding-top: 1rem; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .tabs .tab-label { display: inline; }
  .topbar .topbar-center .tabs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .topbar .topbar-center .tab-btn { padding: 0 1.2rem; }
}
@media (max-width: 420px) {
  .topbar { gap: 0.35rem; padding-left: 0.6rem; padding-right: 0.6rem; }
  .brand { font-size: 1.1rem; gap: 0.25rem; }
  .topbar .topbar-center .tab-btn { padding: 0 0.65rem; }
}

/* Hervorgehobener Platznummer-Pin nach Klick auf "Platz N" (2026-10-03) */


/* ---------- Kalender der Termine nach den Entwuerfen (2026-10-03) ---------- */
.cal-layout { --cal-muted: #7f8286; --cal-line: #e1e3e5; --cal-soft: #ecedee; display: flex; flex-direction: column; gap: 0.9rem; max-width: 1500px; margin: 0 auto; }
.cal-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cal-new-btn { display: inline-flex; align-items: center; gap: 0.5rem; border: 0; border-radius: var(--radius-pill); background: var(--button-color); color: #fff; padding: 0.75rem 1.1rem; font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.cal-new-btn[hidden] { display: none; }
.cal-mini { display: none; }
.cal-cats { display: contents; }
.cal-side-label { margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--cal-muted); }
.cal-cats > .cal-side-label { display: none; }
.cal-cat { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; background: #fff; border: 1px solid var(--cal-line); border-radius: var(--radius-pill); padding: 0.5rem 0.8rem; font-size: 0.9rem; font-weight: 600; }
.cal-cat input { position: absolute; opacity: 0; pointer-events: none; }
.cal-cat-box { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 6px; border: 2px solid var(--c); color: #fff; font-size: 0.6rem; }
.cal-cat-box i { opacity: 0; }
.cal-cat.on .cal-cat-box { background: var(--c); }
.cal-cat.on .cal-cat-box i { opacity: 1; }
.cal-cat-n { display: none; }
.cal-admin { display: contents; }
.cal-admin-btn { border: 1px solid var(--cal-line); background: #fff; border-radius: var(--radius-pill); padding: 0.5rem 0.9rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.cal-admin-btn[hidden] { display: none; }

.cal-main { position: relative; background: #fff; border-radius: 25px; padding: 1.1rem; min-width: 0; }
#calendarView { min-width: 0; }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; margin-bottom: 1rem; }
.cal-title { font-size: 1.55rem; line-height: 1.15; }
.cal-title b { font-weight: 700; }
.cal-title span { color: var(--cal-muted); font-weight: 600; }
.cal-nav { display: inline-flex; align-items: center; margin-left: auto; background: var(--cal-soft); border-radius: var(--radius-pill); padding: 0.2rem; }
.cal-nav button { border: 0; background: transparent; height: 2.3rem; min-width: 2.3rem; border-radius: var(--radius-pill); font: inherit; font-weight: 700; font-size: 0.9rem; padding: 0 0.7rem; cursor: pointer; color: var(--text-primary); }
.cal-modes { order: 3; flex: 1 1 100%; display: flex; background: var(--cal-soft); border-radius: var(--radius-pill); padding: 0.25rem; }
.cal-modes button { flex: 1; border: 0; background: transparent; padding: 0.55rem 0.4rem; border-radius: var(--radius-pill); font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--text-secondary); cursor: pointer; }
.cal-modes button.active { background: var(--button-color); color: #fff; }
.cal-empty { color: var(--cal-muted); margin: 0.6rem 0; }

/* Monat */
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--cal-muted); margin-bottom: 0.3rem; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.15rem; }
.cal-cell { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.35rem 0.1rem; min-height: 3.6rem; border-radius: 14px; cursor: pointer; overflow: hidden; }
.cal-cell.other .cal-daynum { color: #b4b7bb; }
.cal-daynum { display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 1rem; }
.cal-daynum b { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 50%; font-weight: 700; }
.cal-daynum em { display: none; font-style: normal; font-size: 0.72rem; color: var(--text-secondary); }
.cal-cell.today .cal-daynum b { background: var(--button-color); color: #fff; }
.cal-cell.sel:not(.today) .cal-daynum b { box-shadow: inset 0 0 0 2px var(--button-color); background: #eaedf2; }
.cal-dots { display: flex; gap: 3px; min-height: 6px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
.cal-chip, .cal-more { display: none; }

/* Chips, Zeilen */
.cal-chip { width: 100%; align-items: baseline; gap: 0.35rem; border: 0; text-align: left; border-radius: 8px; padding: 0.2rem 0.4rem; font: inherit; font-size: 0.78rem; line-height: 1.25; overflow: hidden; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--text-primary); cursor: pointer; }
.cal-chip-time { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.72rem; color: var(--c); flex: none; }
.cal-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.selected { box-shadow: 0 0 0 2px var(--c); }
.cal-more { font-size: 0.72rem; color: var(--cal-muted); padding-left: 0.3rem; align-self: flex-start; }

.cal-day-h { margin: 1.1rem 0 0.5rem; font-size: 0.95rem; font-weight: 700; }
.cal-day-h small { float: right; font-weight: 600; color: var(--cal-muted); }
.cal-group.today > .cal-group-body > .cal-day-h { color: var(--button-color); }
.cal-day-date { display: none; }
.cal-row { display: flex; align-items: center; gap: 0.9rem; background: var(--cal-soft); border-radius: 18px; padding: 0.75rem 0.9rem; margin-bottom: 0.5rem; }
.cal-row-time { display: flex; flex-direction: column; min-width: 3.3rem; font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.88rem; }
.cal-row-time span { color: var(--cal-muted); }
.cal-row-main { flex: 1; min-width: 0; }
.cal-row-title { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.cal-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c); margin-right: 0.45rem; vertical-align: 0.05em; }
.cal-row-sub { color: var(--text-secondary); font-size: 0.86rem; margin-top: 0.1rem; }
.cal-row-sub i { color: var(--cal-muted); font-size: 0.78rem; margin-right: 0.15rem; }
.cal-pill { display: inline-block; align-self: flex-start; border-radius: var(--radius-pill); padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.cal-pill-inline { display: none; margin-left: 0.5rem; font-weight: 600; }
.cal-rsvp { border: 1px solid var(--cal-line); background: #fff; border-radius: var(--radius-pill); padding: 0.5rem 0.95rem; font: inherit; font-weight: 700; font-size: 0.86rem; white-space: nowrap; cursor: pointer; }
.cal-rsvp.on { background: #e9ecf1; border-color: transparent; color: var(--button-color); }

/* Wochen-/Tagesstreifen (Handy, Tablet) */
.cal-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; margin-bottom: 0.9rem; }
.cal-strip-day { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; border: 0; background: var(--cal-soft); border-radius: 14px; padding: 0.5rem 0; font: inherit; cursor: pointer; }
.cal-strip-day span { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--cal-muted); }
.cal-strip-day b { font-size: 1.05rem; }
.cal-strip-day i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.cal-strip-day i.has { background: var(--orange-500); }
.cal-strip-day.sel { background: var(--button-color); color: #fff; }
.cal-strip-day.sel span { color: rgba(255, 255, 255,.7); }
.cal-strip-day.sel i.has { background: #fff; }

/* Zeitraster (Woche/Tag) */
.cal-tg { --hour: 3.4rem; --gut: 3.6rem; display: none; }
.cal-tg-gutter { width: var(--gut); flex: none; position: relative; }
.cal-tg-head, .cal-tg-allday, .cal-tg-body { display: flex; }
.cal-tg-head { border-bottom: 1px solid var(--cal-line); padding-bottom: 0.4rem; margin-bottom: 0.2rem; }
.cal-tg-dayh { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--cal-muted); }
.cal-tg-dayh b { font-size: 1.15rem; color: var(--text-primary); letter-spacing: 0; display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 50%; }
.cal-tg-dayh.today b { background: var(--button-color); color: #fff; }
.cal-tg-allday { margin-bottom: 0.3rem; font-size: 0.7rem; color: var(--cal-muted); }
.cal-tg-allcell { flex: 1; min-width: 0; padding: 0 2px; }
.cal-tg-body { height: calc(var(--hour) * var(--hours)); }
.cal-tg-gutter span { position: absolute; right: 0.6rem; transform: translateY(-50%); font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.74rem; color: var(--cal-muted); }
.cal-tg-col { flex: 1; min-width: 0; position: relative; border-left: 1px solid var(--cal-line); background-image: repeating-linear-gradient(to bottom, var(--cal-line) 0, var(--cal-line) 1px, transparent 1px, transparent var(--hour)); }
.cal-tg-col.today { background-color: #f6f6f7; }
.cal-ev { position: absolute; display: flex; flex-direction: column; gap: 0.05rem; align-items: flex-start; text-align: left; overflow: hidden; border: 0; border-radius: 12px; padding: 0.3rem 0.5rem; font: inherit; font-size: 0.8rem; line-height: 1.25; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--text-primary); cursor: pointer; }
.cal-ev .t { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.72rem; color: var(--c); }
.cal-ev .p { color: var(--text-secondary); font-size: 0.78rem; }
.cal-ev.selected { box-shadow: inset 0 0 0 2px var(--c); }
.cal-tg.single .cal-ev { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 11%, #fff); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--orange-500); z-index: 2; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange-500); }

/* Detailkarte */
.cal-detail { position: relative; display: flex; flex-direction: column; gap: 0.5rem; background: #fff; border-radius: 22px; padding: 1.1rem; }
.cal-detail h3 { margin: 0.1rem 0 0.2rem; font-size: 1.45rem; line-height: 1.15; }
.cal-meta { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.93rem; color: var(--text-secondary); }
.cal-meta i { width: 1rem; text-align: center; margin-top: 0.2rem; color: var(--text-primary); font-size: 0.85rem; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.cal-btn-primary, .cal-btn-soft, .cal-btn-map { border: 0; border-radius: 14px; padding: 0.75rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer; }
.cal-btn-primary { flex: 1; background: var(--orange-500); color: #fff; }
.cal-btn-primary.on { background: #e9ecf1; color: var(--button-color); }
.cal-btn-soft { flex: 1; background: var(--cal-soft); color: var(--text-primary); }
.cal-btn-soft.on { background: #e9ecf1; color: var(--button-color); }
.cal-btn-map { background: #fff; border: 1px solid var(--cal-line); color: var(--text-primary); }
.cal-btn-del { flex-basis: 100%; background: none; border: 0; color: var(--cal-muted); font: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; padding: 0.2rem 0; }
.cal-detail-x { position: absolute; top: 0.8rem; right: 0.8rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--cal-soft); cursor: pointer; }

/* Monatsansicht unten: gewaehlter Tag + Demnaechst (Handy/Tablet) */
.cal-below { margin-top: 1rem; padding-top: 0.2rem; border-top: 1px solid var(--cal-line); display: grid; gap: 1rem; }
.cal-next .cal-side-label { margin: 0.4rem 0; }


.cal-weeklist { display: block; }
.cal-dayview { display: block; }
.cal-dayview-grid .cal-tg { display: block; }
.cal-dayview-side { margin-top: 1rem; background: var(--cal-soft); border-radius: 22px; padding: 0.6rem; }
.cal-popover { position: absolute; z-index: 20; width: 22rem; max-width: calc(100% - 16px); filter: drop-shadow(0 10px 28px rgba(0, 0, 0,.18)); }

/* Tablet */
@media (min-width: 640px) {
  .cal-main { padding: 1.4rem; }
  .cal-modes { order: 0; flex: 0 0 auto; margin-left: auto; }
  .cal-nav { margin-left: 0; }
  .cal-cell { align-items: stretch; min-height: 6.4rem; padding: 0.4rem; border-radius: 0; border-top: 1px solid var(--cal-line); }
  .cal-daynum { justify-content: flex-start; font-size: 0.92rem; }
  .cal-dots { display: none; }
  .cal-chip { display: flex; }
  .cal-more { display: block; }
  .cal-weeklist { display: none; }
  .cal-tg { display: block; }
  #calMain[data-mode="week"] .cal-strip { display: none; }
  .cal-below { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  .cal-dayview-grid + .cal-dayview-side { margin-top: 0.8rem; }
}

/* Desktop */
@media (min-width: 900px) {
  .cal-layout { flex-direction: row; align-items: flex-start; gap: 1.2rem; }
  .cal-side { flex: 0 0 20rem; flex-direction: column; align-items: stretch; flex-wrap: nowrap; background: #fff; border-radius: 25px; padding: 1.1rem; gap: 1.1rem; position: sticky; top: 0; }
  .cal-new-btn { justify-content: center; border-radius: 16px; padding: 0.85rem 1rem; }
  .cal-mini { display: block; }
  .cal-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
  .cal-mini-head button { border: 0; background: none; width: 1.8rem; height: 1.8rem; cursor: pointer; border-radius: 50%; }
  .cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
  .cal-mini-grid .wd { font-size: 0.68rem; font-weight: 700; color: var(--cal-muted); padding: 0.2rem 0; }
  .cal-mini-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 2.1rem; border: 0; background: none; font: inherit; font-size: 0.85rem; font-weight: 600; border-radius: 10px; cursor: pointer; }
  .cal-mini-day.other { color: #b4b7bb; }
  .cal-mini-day i { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
  .cal-mini-day i.has { background: var(--orange-500); }
  .cal-mini-day.sel { background: #e9ecf1; }
  .cal-mini-day.today { background: var(--button-color); color: #fff; border-radius: 50%; }
  .cal-cats { display: flex; flex-direction: column; gap: 0.2rem; border-top: 1px solid var(--cal-line); padding-top: 1rem; }
  .cal-cats > .cal-side-label { display: block; margin-bottom: 0.3rem; }
  .cal-cat { background: none; border: 0; border-radius: 10px; padding: 0.4rem 0.3rem; font-weight: 500; }
  .cal-cat-n { display: block; margin-left: auto; color: var(--cal-muted); font-size: 0.85rem; }
  .cal-admin { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; }
  .cal-admin-btn { border-radius: 14px; text-align: left; padding: 0.7rem 0.9rem; }
  .cal-main { flex: 1; padding: 1.5rem 1.6rem; min-height: calc(100vh - 8.5rem); }
  .cal-head { flex-wrap: nowrap; margin-bottom: 1.2rem; }
  .cal-title { font-size: 1.9rem; }
  .cal-modes { margin-left: auto; }
  .cal-modes button { padding: 0.5rem 1.1rem; }
  .cal-below { display: none; }
  .cal-weekdays { text-align: left; padding-left: 0.5rem; }
  .cal-cell { min-height: 8.2rem; border-left: 1px solid var(--cal-line); }
  .cal-cell.today { background: #f6f6f7; }
  .cal-cell.sel { outline: 2px solid var(--button-color); outline-offset: -2px; background: #eef1f4; }
  .cal-daynum em { display: inline; }
  .cal-cell.today .cal-daynum b, .cal-cell.sel:not(.today) .cal-daynum b { box-shadow: none; }
  .cal-cell.sel:not(.today) .cal-daynum b { background: none; }
  .cal-dayview { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.4rem; align-items: start; }
  .cal-strip { display: none; }
  .cal-dayview-side { margin-top: 0; background: none; padding: 0; }
  .cal-dayview-side .cal-detail { background: var(--cal-soft); }
  .cal-weeklist { display: none; }
  /* Liste: Datum links, Karten rechts */
  .cal-group { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.2rem; margin-bottom: 1.4rem; }
  .cal-day-date { display: flex; align-items: flex-start; gap: 0.7rem; padding-top: 0.5rem; }
  .cal-day-date b { font-size: 2.2rem; line-height: 1; }
  .cal-day-date div { display: flex; flex-direction: column; font-size: 0.85rem; padding-top: 0.15rem; }
  .cal-day-date span { color: var(--cal-muted); }
  .cal-group > .cal-group-body > .cal-day-h { display: none; }
  .cal-pill-inline { display: inline-block; }
  .cal-row { padding: 1.1rem 1.3rem; }
  .cal-row-time { min-width: 7.5rem; flex-direction: row; gap: 0.5rem; }
  .cal-row-time span::before { content: '– '; }
}


/* Termin-Pins: vollfarbige Pille (Cap33 blau, Umgebung gruen), Cap33 mit "33" (2026-10-03) */
.pin-bubble.pin-event { background: var(--cat-color); }
.pin-bubble.pin-event .pin-badge-icon, .pin-bubble.pin-event .pin-badge-label { color: #fff; }
.pin-bubble.pin-event + .pin-stem { border-top-color: var(--cat-color); }


.term-reactions { margin: 0.8rem 0; }
.term-actions { margin-top: 1rem; }


/* Heute: kleines Dreieck am unteren Rand, Spitze zeigt in die Box */


/* Kalenderansichten aus (CALENDAR_ENABLED in app.js): nur Liste + Knoepfe */
#eventsMain.cal-off .cal-modes, #eventsMain.cal-off .cal-mini, #eventsMain.cal-off .cal-cats { display: none; }

/* Admin-Verwaltung */
.admin-hub { max-width: 40rem; width: 100%; }
.admin-tabs { display: flex; gap: 0.4rem; margin: 0.6rem 0 1rem; flex-wrap: wrap; }
.admin-tabs button { border: 0; background: var(--bg-subtle); border-radius: 999px; padding: 0.5rem 1rem; font: inherit; cursor: pointer; color: var(--text-primary); }
.admin-tabs button.active { background: var(--button-color); color: #fff; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; max-height: 60vh; overflow-y: auto; }
.admin-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.9rem; background: var(--bg-subtle); border-radius: 16px; }
.admin-row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 14rem; }
.admin-row-main small { color: #626467; }
.admin-row-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.admin-h { font-size: 1.1rem; margin: 1.2rem 0 0.5rem; }
.admin-flag { color: #c0392b; font-weight: 700; font-size: 0.85rem; }
.admin-search { width: 100%; margin-bottom: 0.8rem; }
.admin-tag { display: inline-block; margin-left: 0.4rem; font-size: 0.75rem; background: var(--button-color); color: #fff; border-radius: 999px; padding: 0.1rem 0.5rem; }


.info-heading { margin: 1.3rem 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.info-modal h2 + .info-heading { margin-top: 0.6rem; }
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.info-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; padding: 0.65rem 0.85rem; background: var(--bg-subtle); border-radius: 12px; font-size: 0.92rem; }
.info-list a { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.info-list span { color: var(--text-secondary); font-size: 0.85rem; }

/* ---------- Header auf Handy/Tablet wie auf dem Desktop (Nutzerwunsch 2026-10-04) ----------
   Ohne den Karte/Termine-Switch gibt es keinen Grund mehr fuer das beige Kopfband
   mit Grauverlauf: der Header schwebt wie ab 900px direkt auf der Karte (Wortmarke
   als Pille, weisse runde Knoepfe mit Schatten), kein ::after-Verlauf. */
@media (max-width: 899.98px) {
  .topbar {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 0.8rem; gap: 0.5rem;
    z-index: 20; pointer-events: none;
  }
  .topbar > * { pointer-events: auto; }
  .topbar::after { display: none; }
  /* Alles in der Kopfzeile und auf der Karte ist gleich hoch (--map-btn): Logo-Pille,
     Sprache, Kontakte, Profil, Filter, Pin setzen, Satellit, Info (Nutzerwunsch 2026-10-04). */
  .brand {
    display: flex; align-items: center;
    height: var(--map-btn); padding: 0 1.1rem; box-sizing: border-box;
    background: var(--bg-surface); box-shadow: var(--shadow-md);
    border-radius: 999px;
    font-size: 1.35rem; line-height: 1; margin-right: auto;
  }
  .brand-sub { transform: translateY(0.1em); }
  .lang-btn, .contacts-btn { width: var(--map-btn); height: var(--map-btn); background: #fff; box-shadow: var(--shadow-md); }
  /* weisser Rand ueberall gleich dick (3px) und INNEN: Profil mit Border, Flagge fuellt den Rest */
  .lang-btn .lang-flag-icon { width: calc(var(--map-btn) - 6px); height: calc(var(--map-btn) - 6px); }
  .contacts-btn { font-size: 1.2rem; }
  .avatar-btn, .avatar-btn.active {
    width: var(--map-btn); height: var(--map-btn); box-sizing: border-box;
    border: 3px solid #fff; box-shadow: var(--shadow-md);
  }
  /* Filter-Knopf direkt unter der Kopfzeile (der Header ist jetzt durchsichtig) */
  .topbar .topbar-center .filter-pill { top: calc(100% + 0.3rem); }
}
@media (max-width: 380px) {
  .brand { font-size: 1.15rem; padding: 0 0.85rem; }
  .topbar { gap: 0.35rem; }
}

/* Link-Knopf (Pin teilen) in der Aktionszeile neben Herz/Merken/Kontakt: gleiche
   Form und Groesse, eigener Sand-Ton mit dunklem Umriss-Icon */
:root { --btn-link-bg: #ece3c6; --btn-link-fg: #7a6420; }
.detail-action-row .detail-link-btn { background: var(--btn-link-bg); color: var(--btn-link-fg); font-size: 1.05rem; }
.detail-action-row .detail-link-btn:hover { filter: brightness(0.96); }
.detail-action-row .detail-link-btn:active { filter: brightness(0.92); }
/* Zeile nur mit dem Link-Knopf (Veranstaltung, Cap33): etwas Luft nach oben/unten */
.detail-action-row:has(> .detail-link-btn:only-child) { margin: 0.9rem 0 0.6rem; }

/* Pin nur mit Text (Cap33-Ort, kein Icon): links genauso viel Luft wie rechts */
.pin-bubble.pin-text-only { padding-left: 0.75rem; }
@media (min-width: 900px) { .pin-bubble.pin-text-only { padding-left: 0.95rem; } }

/* ---------- Untere Leiste + einheitliche Rundknoepfe (Nutzerwunsch 2026-10-04) ----------
   Filter, "Pin setzen", Satellit und Info sind gleich gross (--map-btn) und haben
   denselben Abstand zum Bildschirmrand (--edge); Impressum/Datenschutz mittig. */
:root { --map-btn: 3rem; --edge: 0.8rem; }
@media (min-width: 900px) { :root { --edge: 1.4rem; } }
@media (max-width: 380px) { :root { --edge: 0.6rem; } }
.map-bar {
  position: absolute; z-index: 15;
  left: var(--edge); right: var(--edge);
  bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  pointer-events: none;
}
.map-bar > * { pointer-events: auto; }
.map-info-btn {
  height: var(--map-btn); border: none; cursor: pointer; padding: 0;
  background: rgba(255, 255, 255, 0.92); color: var(--text-primary); box-shadow: var(--shadow-md);
}


.map-info-btn {
  justify-self: end; width: var(--map-btn); border-radius: 50%;
  font: italic 700 1.2rem/1 Georgia, serif; color: var(--text-secondary);
}
.map-info-btn:hover { background: #fff; color: var(--text-primary); }
.map-legal {
  display: inline-flex; align-items: center; gap: 0.55rem; height: 2.4rem; padding: 0 0.95rem;
  border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-sm);
  font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap;
}
.map-legal button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.map-legal button:hover { color: var(--text-primary); }
.map-legal-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
@media (max-width: 899.98px) {
  
  
  
  
  main#mapMain.detail-open .map-bar { display: none; }
  body.picking .map-bar { display: none; }
  /* "Pin setzen" und Filter: gleiche Groesse, gleicher Randabstand wie die untere Leiste */
  #newPostBtn { width: var(--map-btn); height: var(--map-btn); }
  .map-toolbar { right: var(--edge); bottom: calc(var(--edge) + var(--map-btn) + 0.7rem + env(safe-area-inset-bottom, 0px)); }
  .topbar .topbar-center .filter-pill { left: var(--edge); width: var(--map-btn); height: var(--map-btn); }
  .topbar { padding-left: var(--edge); padding-right: var(--edge); }
}
@media (min-width: 900px) {
  /* Desktop: bei offenem Detail-Panel (links) nur der Info-Knopf rechts */
  main#mapMain.detail-open .map-legal { display: none; }
}

/* Tage ohne Angebote ausgeblichen (der gewaehlte Tag bleibt voll sichtbar) */


/* (nur Hintergrund und Text blass - das Heute-Dreieck bleibt voll sichtbar) */

/* ---------- Handy/Tablet: Knopf-Spalte links, unten nur Legal + Info (Nutzerwunsch 2026-10-04) ----------
   Filter, "Pin setzen" und Satellit stehen untereinander links (gleiche Groesse, gleicher
   Abstand); die untere Leiste hat nur noch Impressum/Datenschutz mittig und den Info-Knopf
   rechts - beide kleiner (--map-btn-sm) und gleich hoch. Die Leiste ist hier nicht mehr
   positioniert (display:contents), ihre Kinder positionieren sich selbst an #mapMain. */
@media (max-width: 899.98px) {
  :root { --col-top: 0.8rem; --col-gap: 0.6rem; --map-btn-sm: 2.3rem; }
  .map-bar { position: static; display: contents; }
  /* Reihenfolge von oben: Pin hinzufuegen, Filter, Satellit */
  .topbar .topbar-center .filter-pill { top: calc(var(--col-top) + var(--map-btn) + var(--col-gap)); }
  .map-toolbar {
    left: var(--edge); right: auto; bottom: auto;
    top: var(--col-top);
  }
  
  .map-legal, .map-info-btn {
    position: absolute; z-index: 15;
    bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px));
    height: var(--map-btn-sm);
  }
  .map-legal { left: 50%; transform: translateX(-50%); padding: 0 0.85rem; font-size: 0.72rem; }
  .map-info-btn { right: var(--edge); width: var(--map-btn-sm); font-size: 1.05rem; }
}


/* ---------- Feinschliff 2026-10-04 (Admin-Schloss, Plus neben Filter, Cap33-Karte) ---------- */
/* Schloss oben links am aktiven Pin (nur Admin): offen = verschiebbar */
.pin-lock-btn {
  position: absolute; top: -11px; left: -11px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; box-shadow: 0 0 0 2px #fff, var(--shadow-sm);
  cursor: pointer; z-index: 1;
}
.pin-lock-btn.open { background: var(--orange-500); color: #fff; }
.pin-lock-btn:hover { filter: brightness(0.95); }
.leaflet-marker-draggable.pin-marker.selected { cursor: grab; }

@media (min-width: 900px) {
  /* Eingeklappter Filter ist genauso hoch wie die Logo-Pille (3rem) */
  #filterModal .modal.collapsed { padding-top: 0.5rem; padding-bottom: 0.5rem; }

  /* Sprach-Knopf: Flagge fuellt den weissen Kreis, nur 3px Rand */
  .lang-btn .lang-flag-icon { width: calc(3rem - 6px); height: calc(3rem - 6px); }

  /* Untere Leiste: Spalten fest, damit Info/Impressum bei offenem Detail-Panel nicht wandern */
  /* Satellit links unten -> Impressum & Co. rechts neben dem Info-Knopf (Nutzerwunsch 2026-10-07) */
  .map-bar { grid-template-columns: auto 1fr auto auto; }
  
  .map-legal { grid-column: 3; margin-right: 0.6rem; }
  .map-info-btn { grid-column: 4; }
  main#mapMain.detail-open .map-legal { display: inline-flex; }
}
@media (min-width: 900px) and (max-width: 1525px) {
  main#mapMain.detail-open .map-legal { display: none; }
}

/* Cap33-/Termin-Karte: Teilen oben rechts neben dem X; Ort als Label mit Punkt oben */
.detail-panel-head.loc-head .cat-dot { display: inline-block; }
.detail-panel-head.loc-head .detail-head-eyebrow { flex: 1; }
.detail-panel-head .detail-link-btn {
  width: 2.6rem; height: 2.6rem; padding: 0; flex: none;
  background: var(--btn-link-bg); color: var(--btn-link-fg); font-size: 1rem;
}
.detail-panel-head .detail-link-btn:hover { filter: brightness(0.96); }


/* ---------- Anmeldung/Registrierung als Sheet (Mockup 2026-10-04) ---------- */
.auth-sheet-head { position: relative; align-items: flex-start; padding: 1.6rem 1.4rem 0.6rem; }
.auth-sheet-titles { flex: 1; min-width: 0; padding-top: 0.6rem; }
.modal.auth-sheet { padding: 0 !important; }
.auth-sheet .sheet-headline { font-size: 1.8rem; margin: 0; }
.auth-sheet-sub { margin: 0.2rem 0 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.35; max-width: 22rem; }
.auth-sheet-close { width: 2.6rem; height: 2.6rem; margin-top: 0.6rem; background: var(--btn-close-bg); color: var(--btn-close-fg); flex: none; }
.auth-sheet .sheet-modal-scroll { padding: 0.4rem 1.4rem 1.8rem; }
.auth-sheet .auth-tabs { margin: 0.8rem 0 1.2rem; }
.auth-sheet-form { gap: 0.9rem; }
.auth-sheet-form label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); display: flex; flex-direction: column; gap: 0.4rem; }
.auth-sheet-form #loginUserFields { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-sheet-form input[type="text"], .auth-sheet-form input[type="email"], .auth-sheet-form input[type="password"] {
  width: 100%; box-sizing: border-box; height: 3.4rem; padding: 0 1rem;
  border: 1px solid var(--border); border-radius: 16px; background: #fff;
  font: inherit; font-size: 1.05rem; font-weight: 500; color: var(--text-primary);
}
.auth-sheet-form input:focus { outline: 2px solid color-mix(in srgb, var(--button-color) 35%, transparent); border-color: var(--button-color); }
.auth-sheet-form input::placeholder { color: var(--text-muted); opacity: 0.6; }
.auth-sheet-form [hidden] { display: none !important; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 3.2rem; }
.pw-eye { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border: 0; background: none; color: var(--text-muted); font-size: 1.05rem; cursor: pointer; }


.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.label-row small { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.auth-hint { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.auth-hint-tight { margin-top: -0.5rem; }
.pw-strength { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.35rem; align-items: center; margin-top: -0.4rem; }
.pw-strength span { height: 4px; border-radius: 2px; background: var(--neutral-200, #dadcdf); }
.pw-strength[data-score="1"] span:nth-child(-n+1), .pw-strength[data-score="2"] span:nth-child(-n+2), .pw-strength[data-score="3"] span:nth-child(-n+3) { background: var(--accent); }
.pw-strength em { font-style: normal; font-size: 0.85rem; color: var(--accent); margin-left: 0.4rem; }
.pw-strength[data-score="0"] em { color: var(--text-muted); }
.auth-submit { width: 100%; height: 3.6rem; border-radius: 18px; font-size: 1.1rem; font-weight: 700; background: var(--button-color); color: #fff; margin-top: 0.4rem; }
.auth-admin-link { align-self: center; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.95rem; cursor: pointer; padding: 0.4rem; }
.auth-admin-link:hover { color: var(--text-primary); }
.auth-sheet .auth-tabs { gap: 0; padding: 0.3rem; background: #dfe1e3; border-radius: 20px; }
.auth-sheet .auth-tab-btn { background: transparent; color: var(--text-secondary); border-radius: 16px; padding: 0.85rem 0.5rem; font-size: 1.02rem; font-weight: 700; cursor: pointer; }
.auth-sheet .auth-tab-btn.active { background: #fff; color: var(--text-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }


/* "Fehler melden" unter Cap33-/Termin-Karten */
.err-report { margin-top: 1.4rem; text-align: center; }
.err-report-open { border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.9rem; cursor: pointer; padding: 0.5rem 0.8rem; border-radius: 999px; }
.err-report-open:hover { color: var(--text-primary); background: rgba(0, 0, 0, 0.04); }
.err-report-form { text-align: left; }
.err-report-text { width: 100%; box-sizing: border-box; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; font: inherit; font-size: 0.95rem; resize: vertical; }
.err-report-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.err-report-actions .primary-btn { flex: 1; }
.err-report-status { margin: 0.4rem 0 0; color: var(--danger); font-size: 0.85rem; }
.err-report-status:empty { display: none; }

/* MDI-Kategorie-Icons (z.B. Hail bei MFG gesucht) in Kategorie-Knoepfen */
.category-option .mdi-icon.cat-icon { width: 1.35rem !important; height: 1.35rem !important; vertical-align: middle; }

/* Icon-Auswahl groesser (Nutzerwunsch 2026-10-04) */
.icon-pool { gap: 0.5rem; }
.icon-pool .icon-pool-btn { width: 3rem; height: 3rem; font-size: 1.35rem; }
.icon-pool .icon-pool-btn .mdi-icon { width: 1.45rem; height: 1.45rem; }

/* Veranstaltung einreichen (Neuer Pin) */
.event-flyer-hint { margin: 0 0 0.6rem; }
.event-flyer-hint i { color: var(--accent); }
#postEventSection { display: flex; flex-direction: column; gap: 0.6rem; }
#postEventSection[hidden] { display: none; }
#postEventSection .note:empty { display: none; }
.cta-pin-btn span { white-space: nowrap; }

/* Overlay mit Spinner waehrend der Flyer ausgewertet wird */
#postForm { position: relative; }
.ev-overlay {
  position: absolute; left: -0.4rem; right: -0.4rem; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent); backdrop-filter: blur(2px);
  border-radius: 18px; font-weight: 600; color: var(--text-secondary);
}
.ev-overlay[hidden] { display: none; }
.ev-spinner { width: 2.4rem; height: 2.4rem; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ev-spin 0.8s linear infinite; }
@keyframes ev-spin { to { transform: rotate(360deg); } }

/* Langer Dateiname im Flyer-Knopf: abschneiden statt ueberlaufen */
#postEvImagesBtn { max-width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
#postEvImagesBtn i { flex: none; }
#postEvImagesBtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-flyer-hint i { margin-right: 0.2rem; }

/* Beschreibung waechst mit dem Text */
#postDescription { resize: none; overflow: hidden; min-height: 5.5rem; }

/* Beschreibung mit Formatierung (Editor + Anzeige) */
#postDescription { resize: none; overflow: visible; min-height: 9rem; }
.rte { border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
.rte:focus-within { border-color: var(--button-color); }
.rte-toolbar { display: flex; align-items: center; gap: 0.15rem; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.rte-toolbar button { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 9px; background: none; color: var(--text-secondary); font-size: 0.95rem; cursor: pointer; }
.rte-toolbar button:hover { background: rgba(0, 0, 0, 0.06); }
.rte-toolbar button.active { background: var(--accent-light); color: var(--accent-dark); }
.rte-sep { width: 1px; height: 1.3rem; background: var(--border); margin: 0 0.25rem; }
.rte-link-row { display: flex; gap: 0.4rem; padding: 0.4rem; border-bottom: 1px solid var(--border); }
.rte-link-row[hidden] { display: none; }
.rte-link-row input { flex: 1; min-width: 0; padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.rte-editor { min-height: 9rem; padding: 0.7rem 0.9rem; outline: none; font: inherit; font-size: 0.97rem; line-height: 1.45; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-primary); word-break: break-word; }
.rte-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); opacity: 0.7; pointer-events: none; }
.rte-editor p, .rich-text p { margin: 0 0 0.6rem; }
.rte-editor p:last-child, .rich-text p:last-child { margin-bottom: 0; }
.rte-editor ul, .rte-editor ol, .rich-text ul, .rich-text ol { margin: 0 0 0.6rem; padding-left: 1.4rem; }
.rte-editor a, .rich-text a { color: var(--accent-dark, var(--accent)); text-decoration: underline; }
.rich-text { margin: 0.6rem 0; line-height: 1.5; }

/* Antworten ab 3 einklappbar, hervorgehobene @Erwaehnung */
.replies-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0.2rem 0.9rem; padding: 0.3rem 0.7rem; border: 0; border-radius: 999px; background: var(--bg-subtle); color: var(--text-secondary); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.replies-toggle:hover { color: var(--text-primary); filter: brightness(0.97); }
.replies-toggle i { font-size: 0.7rem; }
.comment-text .mention { color: var(--accent-dark, var(--accent)); font-weight: 700; }

/* @Name in der Avatar-Farbe der erwaehnten Person */
.comment-text .mention-1 { color: var(--avatar-1); }
.comment-text .mention-2 { color: var(--avatar-2); }
.comment-text .mention-3 { color: var(--avatar-3); }
.comment-text .mention-4 { color: var(--avatar-4); }
.comment-text .mention-5 { color: var(--avatar-5); }
.comment-text .mention-6 { color: var(--avatar-6); }
.comment-text .mention-7 { color: var(--avatar-7); }
.comment-text .mention-8 { color: var(--avatar-8); }
.comment-text .mention-9 { color: var(--avatar-9); }
.comment-text .mention-10 { color: var(--avatar-10); }
.comment-text .mention-11 { color: var(--avatar-11); }
.comment-text .mention-12 { color: var(--avatar-12); }

/* Bearbeiten-Stift neben dem X (eigene Beitraege) */
#postMenuBtn[data-mode="edit"] { width: 2.6rem; height: 2.6rem; background: var(--btn-close-bg); color: var(--btn-close-fg); opacity: 1; font-size: 1rem; }
#postMenuBtn[data-mode="edit"]:hover { background: var(--btn-close-bg); filter: brightness(0.95); }

/* Updates unter dem Beitragstext */
.post-updates:empty { display: none; }
.post-updates { margin: 0.9rem 0 0.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.post-update { background: rgba(255, 255, 255, 0.8); border-left: 3px solid var(--accent); border-radius: 12px; padding: 0.6rem 0.8rem; }
.post-update-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.post-update-head i { margin-right: 0.25rem; color: var(--accent); }
.post-update-del { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: 0.1rem 0.3rem; }
.post-update-del:hover { color: var(--danger); }
.post-update-text { margin: 0.25rem 0 0; white-space: pre-wrap; word-break: break-word; }
.post-update-compose textarea { width: 100%; box-sizing: border-box; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; font: inherit; resize: vertical; }

/* Profil: Beitraege */
.my-post { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; background: #fff; border-radius: 16px; margin-bottom: 0.5rem; }
.my-post-icon { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cat-color); background: color-mix(in srgb, var(--cat-color) 14%, #fff); font-size: 1rem; }
.my-post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.my-post-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-post-main small { color: var(--text-muted); }
.my-post-actions { display: flex; flex-direction: column; gap: 0.3rem; flex: none; }
.my-post-actions .secondary-btn { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

/* Update-Benachrichtigungen */
.update-item { display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; text-align: left; border: 0; background: #fff; border-radius: 16px; padding: 0.7rem 0.8rem; margin-bottom: 0.5rem; font: inherit; cursor: pointer; }
.update-item.unseen { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 8%, #fff); }
.update-item-main { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.update-item-text { color: var(--text-secondary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; }
.update-item small { color: var(--text-muted); }

/* Listenpunkte in formatierten Texten: etwas Abstand nach unten */
.rich-text li, .rte-editor li { margin-bottom: 0.35rem; }
.rich-text li:last-child, .rte-editor li:last-child { margin-bottom: 0; }

/* Automatisch verlinkte URLs ohne Unterstreichung */
.rich-text a.auto-link { text-decoration: none; }


/* ---------- Verwaltung im Profil-Fenster (Admin) ---------- */
.modal-fixed.is-admin { width: min(40rem, 100%); }
.modal-fixed.is-admin .modal-fixed-scroll { gap: 0.8rem; }
.modal-fixed .admin-list { max-height: none; overflow: visible; }
.admin-subtabs { margin: 0 0 0.4rem; flex: none; }
.admin-actions { margin-bottom: 0.2rem; }
.admin-row { background: #fff; border-radius: 16px; }
.admin-row-actions { gap: 0.4rem; }
.admin-row-actions .secondary-btn, .admin-actions .secondary-btn { padding: 0.4rem 0.85rem; font-size: 0.85rem; border-radius: 999px; }
/* Auswahlfelder in Verwaltungs-Zeilen: Pille mit eigenem Pfeil (gilt fuer alle Selects dort) */
.admin-row select, .admin-row-actions select, .admin-actions select {
  appearance: none; -webkit-appearance: none;
  height: 2.6rem; max-width: 12rem; padding: 0 2rem 0 0.9rem !important;
  border: 1px solid var(--border); border-radius: 999px;
  background-color: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c1c1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 0.65rem auto;
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); cursor: pointer;
  text-overflow: ellipsis;
}
.admin-row select:hover, .admin-row-actions select:hover { border-color: var(--button-color); }
.admin-row select:focus-visible, .admin-row-actions select:focus-visible { outline: 2px solid color-mix(in srgb, var(--button-color) 35%, transparent); outline-offset: 1px; }

/* Moderation: Icon-Knoepfe in der Optik der Detailseite (abgerundetes Quadrat, helle Flaeche, Umriss-Icon) */
.admin-row-actions .admin-act { width: 2.6rem; height: 2.6rem; min-width: 0; padding: 0; border: 0; border-radius: 14px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.admin-row-actions .admin-act:hover { filter: brightness(0.95); }
.admin-act-view { background: var(--btn-save-bg); color: var(--btn-save-fg); }
.admin-act-del { background: var(--btn-like-bg); color: var(--btn-like-fg); }
.admin-act-ok { background: var(--btn-contact-bg); color: var(--btn-contact-fg); }
.admin-row-actions .admin-act:disabled { opacity: 0.6; }
.admin-row-actions .admin-act[data-armed] { width: auto; padding: 0 0.8rem; font-size: 0.85rem; gap: 0.35rem; }

/* Verwaltung: gruene Haupt-Tabs, Kategorie in Kategoriefarbe, restliche Schrift schwarz */
#adminHubTabs { background: color-mix(in srgb, var(--button-color) 14%, var(--bg-surface)); }
#adminHubTabs .auth-tab-btn { color: var(--button-color); }
#adminHubTabs .auth-tab-btn.active { color: #fff; }
#adminHubTabs .slide-indicator { background: var(--button-color); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.admin-row-main small { color: var(--text-primary); }
.admin-row-main .admin-cat { font-weight: 700; }

.admin-act-warn { background: #f4e8c8; color: #8a6414; }

/* Verwaltungs-Icon-Knoepfe ueberall (Cap33, Termine, Nutzer, Orte), nicht nur in der Moderation */
.admin-act { width: 2.6rem; height: 2.6rem; min-width: 0; padding: 0; border: 0; border-radius: 14px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.admin-act:hover { filter: brightness(0.95); }
.admin-act[data-armed] { width: auto; padding: 0 0.8rem; font-size: 0.85rem; gap: 0.35rem; }


.file-field { display: flex; flex-direction: column; gap: 0.4rem; }
.file-field-label { font-weight: 600; color: var(--text-secondary); }
.file-field-btn { width: 100%; max-width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.file-field-btn i { flex: none; }
.file-field-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-act-edit { background: var(--btn-close-bg); color: var(--btn-close-fg); }


/* Nutzer-Suche in der Verwaltung: runde Suchleiste mit Lupe und eigenem Leeren-Knopf */
.admin-search-wrap { margin: 0.2rem 0 0.2rem; }
.admin-search-wrap input.admin-search {
  width: 100%; box-sizing: border-box; height: 2.9rem; margin: 0; padding: 0 2.6rem 0 2.5rem;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  font: inherit; font-size: 0.95rem; color: var(--text-primary); -webkit-appearance: none; appearance: none;
}
.admin-search-wrap input.admin-search::-webkit-search-cancel-button, .admin-search-wrap input.admin-search::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.admin-search-wrap input.admin-search:focus { outline: none; border-color: var(--button-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-color) 18%, transparent); }
.admin-search-wrap .admin-search-clear { position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--btn-close-bg); color: var(--btn-close-fg); font-size: 0.8rem; cursor: pointer; }
.admin-search-wrap .admin-search-clear[hidden] { display: none; }
.admin-search-wrap .admin-search-clear i { position: static; transform: none; color: inherit; font-size: inherit; }


/* Wochenplan in der Verwaltung: Tage als Kacheln, nicht stattfindende grau */
.sched { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.4rem; }
.sched-days { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sched-day { min-width: 2rem; padding: 0.25rem 0.4rem; border-radius: 8px; text-align: center; font-size: 0.82rem; font-weight: 600; background: #e5e7eb; color: #9ca3af; }
.sched-day.on { background: var(--button-color); color: #fff; }
.sched-time { margin-top: 0.25rem; font-size: 0.9rem; color: var(--text-secondary); }
.sched-time i { color: var(--text-muted); }

/* Optischer Randausgleich: Elemente mit grosser Rundung (Pillen-Inputs,
   Tabs) wirken am Rand zurueckgesetzt, buendiger Text daneben dagegen
   "ueberstehend". Reiner Text (Hinweise, Ueberschriften, Feld-Beschriftungen)
   bekommt deshalb einen kleinen Einzug, damit er zur Rundung passt. */
:root { --optical-inset: 0.5rem; }
.modal-fixed-head h2,
.modal-fixed-scroll > p,
.modal-fixed-scroll > h3,
.modal-fixed-scroll .note,
.modal-fixed-scroll h3,
.modal-fixed-scroll label > span:first-child,
.modal-fixed-scroll .form-hint,
.modal-fixed-scroll .cal-empty { padding-inline: var(--optical-inset); }

.admin-row .sched-time { margin-top: 5px; }
.admin-row .sched:not(:has(.sched-block)) { gap: 0.3rem; }
.admin-row .sched-time i { width: 1.1rem; text-align: center; }

.admin-row { align-items: flex-start; }

.modal-logout-round { right: 4.3rem; }
.modal-logout-round[hidden] { display: none; }
.modal-fixed.is-admin .modal-fixed-head h2 { margin-right: 6rem; }

/* Inline-Bearbeiten in der Termin-/Angebots-Detailkarte */
.editable { cursor: text; outline: 1.5px dashed #bcbfc2; outline-offset: 3px; border-radius: 6px; }
.editable:hover { outline-color: var(--button-color); }
.editable.edit-empty { color: var(--text-muted); font-style: italic; }
.editable.editing { outline: 2px solid var(--button-color); background: #fff; }

/* Bearbeiten/Loeschen in der Kopfzeile der Termin-/Cap33-Karte */
.detail-panel-head .head-act { width: 2.6rem; height: 2.6rem; padding: 0; flex: none; font-size: 1rem; }
.detail-panel-head .head-act-edit { background: var(--btn-save-bg); color: var(--btn-save-fg); }
.detail-panel-head .head-act-del { background: var(--btn-like-bg); color: var(--btn-like-fg); }
.detail-panel-head .head-act[data-armed] { width: 2.6rem; padding: 0; font-size: 0; gap: 0; background: var(--danger); color: #fff; }
.detail-panel-head .head-act[data-armed] i { font-size: 1rem; }

/* Eigenes Dropdown (Ortsauswahl in der Cap33-Detailkarte) */
.dd { position: relative; margin: 0 0 0.6rem; }
.dd-btn {
  width: 100%; height: 2.8rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0 1rem; box-sizing: border-box; background: #fff; color: var(--text-primary);
  border: 1.5px solid var(--neutral-400); border-radius: 999px;
  font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: left;
}
.dd-btn:hover, .dd-btn[aria-expanded="true"] { border-color: var(--button-color); }
.dd-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--button-color) 35%, transparent); outline-offset: 2px; }
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn i { font-size: 0.75rem; color: var(--text-muted); transition: transform 0.15s; }
.dd-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.dd-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.3rem); z-index: 30; margin: 0; padding: 0.35rem; list-style: none;
  max-height: 14rem; overflow-y: auto; background: #fff; border: 1.5px solid var(--neutral-400); border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.dd-list[hidden] { display: none; }
.dd-opt { padding: 0.55rem 0.8rem; border-radius: 10px; font-size: 0.95rem; cursor: pointer; }
.dd-opt:hover { background: var(--bg-subtle); }
.dd-opt.sel { background: color-mix(in srgb, var(--button-color) 14%, #fff); color: var(--button-color); font-weight: 700; }

/* Admin braucht den Link-/Teilen-Knopf in den Detailkarten nicht */
body.is-admin .detail-share-btn { display: none !important; }
/* "Alle Angebote hier" konsequent links (auch im Flex-Layout des Panels) */


.detail-panel-scroll .editable { margin-top: 0.7rem; margin-bottom: 0.7rem; padding: 0.15rem 0.35rem; }
.detail-panel-scroll .meta-chip.editable { margin: 0; padding: 0.35rem 0.75rem; }

/* Logo (Gurp.app) in der Kopfzeile statt Textmarke */
.brand-logo { display: block; height: 1.9rem; width: auto; }
@media (max-width: 420px) { .brand-logo { height: 1.6rem; } }

body.is-admin #postMenuBtn { display: none !important; }

/* Desktop: "Pin hinzufügen" so breit wie die Filter-Karte darunter */
@media (min-width: 900px) {
  #headerNewPostBtn { width: min(18rem, 100%); justify-content: center; margin-right: auto; }
}

/* Desktop: Filter-Overlay hat sonst Inhaltsbreite (100% = schmaler als 18rem) -> feste Breite,
   damit Filter-Karte und "Pin hinzufügen" exakt gleich breit sind. */
@media (min-width: 900px) {
  #filterModal.modal-overlay[hidden], #filterModal.modal-overlay { width: 18rem; }
}

/* Desktop-Filter: weniger Abstand zum "Pin hinzufügen", eingeklappt gleiche Breite,
   Pfeil dafuer senkrecht (oben = einklappen, unten = ausklappen). */
@media (min-width: 900px) {
  #filterModal.modal-overlay[hidden], #filterModal.modal-overlay { top: 5rem; }
  #filterModal .modal.collapsed { width: min(18rem, 100%); padding-left: 1.2rem; padding-right: 1.2rem; }
  .filter-collapse-btn i { transform: none; }
  #filterModal .modal.collapsed .filter-collapse-btn i { transform: rotate(180deg); }
}

/* Kein Logo: .brand bleibt nur als unsichtbarer Platzhalter (schiebt die Knoepfe nach rechts) */
.topbar > .brand { background: none !important; box-shadow: none !important; padding: 0 !important; min-width: 0; flex: 1 1 auto; }

/* Regeln & Netiquette */
.rules-modal .modal-fixed-head h2 { margin-bottom: 0.6rem; }
.rules-lang { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.4rem; }
.rules-lang button { border: 1.5px solid var(--neutral-400); background: #fff; border-radius: 999px; padding: 0.25rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.rules-lang button.active { background: var(--button-color); border-color: var(--button-color); color: #fff; }
.rules-body { gap: 0.8rem; }
.rules-intro { margin: 0; color: var(--text-secondary); }
.rules-short { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; }
.rules-short li { line-height: 1.45; }
.rules-sec h3 { font-size: 1.15rem; margin: 0.4rem 0 0.3rem; }
.rules-sec p, .rules-sec li { line-height: 1.5; margin: 0.35rem 0; }
.rules-sec ul { margin: 0.3rem 0; padding-left: 1.2rem; }
.rules-accept { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; line-height: 1.4; }
.rules-accept input { margin-top: 0.15rem; flex: none; }
.rules-accept .link-btn { display: inline; padding: 0; text-decoration: underline; font: inherit; color: var(--button-color); background: none; border: 0; cursor: pointer; }
.profile-delete-section { border-top: 1px solid var(--border); padding-top: 0.9rem; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.danger-btn { color: #b91c1c; border-color: #fca5a5; }
.dd.dd-inline { margin: 0; width: 8.5rem; }
.dd.dd-inline .dd-btn { height: 2.6rem; font-size: 0.85rem; padding: 0 0.9rem; }
.dd.dd-inline .dd-list { min-width: 8.5rem; }

/* Regeln bearbeiten (Admin) */
.rules-toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.5rem 1.6rem; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.rules-toolbar[hidden] { display: none; }
.rules-toolbar button { height: 2.2rem; min-width: 2.2rem; padding: 0 0.7rem; border: 1.5px solid var(--neutral-400); background: #fff; border-radius: 999px; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.rules-toolbar button:hover { border-color: var(--button-color); }
.rules-toolbar .rules-save { background: var(--button-color); border-color: var(--button-color); color: #fff; }
.rules-toolbar-sp { flex: 1; }
.rules-sec-edit { border: 1.5px dashed var(--neutral-400); border-radius: 16px; padding: 0.7rem 0.9rem; position: relative; background: #fff; }
.rules-sec-tools { display: flex; gap: 0.3rem; justify-content: flex-end; margin-bottom: 0.2rem; }
.rules-sec-tools button { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--bg-subtle); cursor: pointer; font-size: 0.8rem; }
.rules-sec-tools button[data-act="del"] { color: #b91c1c; }
.rules-edit-t { margin: 0 0 0.4rem; outline: none; border-radius: 6px; font-size: 1.15rem; }
.rules-edit-h { outline: none; border-radius: 6px; min-height: 2rem; line-height: 1.5; }
.rules-edit-t:focus, .rules-edit-h:focus { background: color-mix(in srgb, var(--button-color) 8%, #fff); }
.rules-edit-t:empty::before, .rules-edit-h:empty::before { content: attr(data-ph); color: var(--text-muted); }
.rules-edit-h p { margin: 0.35rem 0; } .rules-edit-h ul { margin: 0.3rem 0; padding-left: 1.2rem; }

.rules-lang button { display: inline-flex; align-items: center; gap: 0.45rem; }
.rules-lang .lang-flag-icon { width: 1.2rem; height: 1.2rem; }
.rules-lang button:disabled:not(.active) { opacity: 0.45; cursor: default; }

/* Touch-Pin-Setzen: Fadenkreuz-Pin in der Kartenmitte + untere Leiste */
.pick-overlay { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.pick-overlay[hidden] { display: none; }
.pick-cross { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); font-size: 2.6rem; line-height: 1; color: var(--orange-500); filter: drop-shadow(0 3px 4px rgba(0, 0, 0,.35)); }
.pick-cross::after { content: ''; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: 0 0 0 -5px; border-radius: 50%; background: rgba(0, 0, 0,.35); transform: translateY(-4px); }
.pick-bar { position: absolute; left: var(--edge); right: var(--edge); bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); pointer-events: auto; background: var(--bg-surface); border-radius: 20px; box-shadow: var(--shadow-md); padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.pick-hint { margin: 0; font-size: 0.9rem; color: var(--text-secondary); text-align: center; }
.pick-actions { display: flex; gap: 0.6rem; }
.pick-actions button { flex: 1; height: 3rem; border-radius: 999px; }

#newPostBtn.is-cancel, #headerNewPostBtn.is-cancel { background: var(--text-primary); }

/* Leerer Platzhalter in der Kopfzeile darf keine Klicks auf die darunterliegende Knopf-Spalte abfangen */
.topbar > .brand { pointer-events: none !important; }

/* Schatten an der Pin-Spitze liegt UNTER dem Pin-Symbol */
.pick-cross::after { z-index: -1; width: 14px; height: 6px; margin-left: -7px; border-radius: 50%; transform: translateY(-5px); }

/* Verwaltungs-Tabs: auf dem Handy nur Icons, ab 640px Icon + Text */
#adminHubTabs .auth-tab-btn i { font-size: 1.05rem; }
@media (max-width: 639.98px) { #adminHubTabs .tab-txt { display: none; } #adminHubTabs .auth-tab-btn { padding-left: 0; padding-right: 0; } }

/* Verwaltungs-Zeilen: Aktionen bleiben beisammen (eine Zeile); auf schmalen Screens in eigener Zeile unter dem Text */
.admin-row-actions { flex-wrap: nowrap; max-width: 100%; }
.admin-row-actions .dd, .admin-row-actions select { min-width: 0; flex: 0 1 auto; }
.admin-row-actions .admin-act { flex: none; }
@media (max-width: 639.98px) {
  /* nur Zeilen mit Auswahlfeld (Cap33-Ort) brauchen eine eigene Zeile */
  .admin-row-actions:has(select, .dd) { flex: 1 0 100%; }
  .admin-row-actions select, .admin-row-actions .dd { flex: 1 1 auto; max-width: none; }
}

/* Unter-Tabs der Verwaltung: Handy nur Icon (+ kleiner Zaehler), ab 640px Icon + Text */
.admin-subtabs .auth-tab-btn i { font-size: 1rem; }
.admin-subtabs .tab-cnt { display: none; font-size: 0.7rem; font-weight: 700; background: var(--accent); color: #fff; border-radius: 999px; padding: 0.05rem 0.4rem; }
@media (max-width: 639.98px) {
  .admin-subtabs .tab-txt { display: none; }
  .admin-subtabs .tab-cnt { display: inline-block; }
}

/* Sperr-Dialog */
.ban-modal { width: min(28rem, 100%); display: flex; flex-direction: column; gap: 0.6rem; }
.ban-days { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ban-day { border: 1.5px solid var(--neutral-400); background: #fff; border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.ban-day.sel { background: var(--button-color); border-color: var(--button-color); color: #fff; }
.ban-modal textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--neutral-400); border-radius: 16px; padding: 0.7rem 0.9rem; font: inherit; resize: vertical; background: #fff; }
.ban-actions { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
.ban-actions button { flex: 1; height: 3rem; border-radius: 999px; }

/* Detail-Karten liegen ueber Kopfzeile (20) und Karten-Knoepfen (11-15), unter Modals */
.detail-panel { z-index: 40; }

/* "Meine Beitraege": gleiche Icon-Buttons wie in der Verwaltung */
.my-post-actions { flex-direction: row; align-items: center; gap: 0.4rem; }
.my-post-actions .admin-act { width: 2.6rem; height: 2.6rem; min-width: 0; padding: 0; border: 0; border-radius: 14px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.my-post-actions .admin-act:hover { filter: brightness(0.95); }
.my-post-actions .admin-act:disabled { opacity: 0.4; cursor: default; }
.my-post-actions .admin-act[data-armed] { width: auto; padding: 0 0.8rem; font-size: 0.85rem; gap: 0.35rem; }
.my-post { flex-wrap: wrap; }
.my-post-main { flex: 1 1 10rem; min-width: 0; }

/* Updates zu Pins: Karte im Stil der uebrigen Flaechen (kein Farbbalken), Chip-Kopf, runder Loeschknopf */
.post-update { background: #fff; border-left: 0; border-radius: 16px; padding: 0.8rem 0.9rem; }
.post-update-head { font-size: 0.85rem; }
.post-update-head .meta-chip { background: var(--bg-subtle); }
.post-update-head .meta-chip i { margin: 0; color: var(--text-secondary); }
.post-update-del { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; background: var(--btn-close-bg); color: var(--btn-close-fg); display: inline-flex; align-items: center; justify-content: center; }
.post-update-del:hover { color: var(--btn-close-fg); filter: brightness(0.95); }
.post-update-text { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.5; }
.post-update-compose #postUpdateOpen { border-radius: 999px; }

.cmsg-sent { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--button-color); }

.cmsg-sent { color: var(--text-muted); font-weight: 600; }
.cmsg-sent i { color: var(--accent); }

/* Kontakte: Unter-Tabs mobil nur Icons; Fuss der Karte in einer Zeile (Status links, Details rechts) */
#contactsSubTabs .auth-tab-btn i { font-size: 1rem; }
@media (max-width: 639.98px) { #contactsSubTabs .tab-txt { display: none; } }
.cmsg-foot { flex-wrap: nowrap; justify-content: space-between; }
.cmsg-foot .cmsg-link, .cmsg-foot .cmsg-sent, .cmsg-foot .cmsg-seen { min-width: 0; white-space: normal; font-size: 0.85rem; }
.cmsg-foot .cmsg-details-btn { margin-left: auto; flex: none; white-space: nowrap; }

/* Updates-Fenster (Redesign): Karten je Beitrag */
.updates-modal { width: min(30rem, 100%); }
.updates-head h2 { display: flex; align-items: center; gap: 0.6rem; }
.updates-new-pill, .upd-new { background: var(--orange-500); color: #fff; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.2rem 0.65rem; line-height: 1.2; }
.updates-new-pill[hidden] { display: none; }
.updates-sub { margin: 0.4rem 0 0.6rem; font-size: 0.9rem; }
.updates-readall { position: absolute; top: 1.4rem; right: 4.8rem; height: 2.6rem; border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); cursor: pointer; }
.updates-readall[hidden] { display: none; }
.updates-list { gap: 0.9rem; }
.upd-card { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-radius: 22px; padding: 0.9rem 1rem 1rem; cursor: pointer; font: inherit; color: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0,.04); }
.upd-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0,.1); }
.upd-card-head { display: flex; align-items: center; gap: 0.75rem; }
.upd-icon { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--cat-color); background: color-mix(in srgb, var(--cat-color) 14%, #fff); }
.upd-card-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.upd-card-title strong { font-size: 1.1rem; }
.upd-card-title small { color: var(--text-muted); font-size: 0.85rem; }
.upd-chev { color: var(--text-muted); font-size: 0.8rem; }
.upd-entries { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.8rem; }
.upd-entry { display: flex; gap: 0.7rem; align-items: flex-start; }
.upd-entry-main { flex: 1; min-width: 0; }
.upd-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; }
.upd-kind { color: var(--text-muted); }
.upd-time { color: var(--text-muted); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.upd-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--orange-500); display: inline-block; }
.upd-text { margin: 0.15rem 0 0; font-size: 1rem; line-height: 1.45; word-break: break-word; }
.upd-update { flex-direction: column; gap: 0; background: #e1e8f0; border-radius: 16px; padding: 0.7rem 0.9rem; }
.upd-update .upd-entry-head { width: 100%; }
.upd-update-label { color: var(--blue-500); font-weight: 700; font-size: 0.9rem; }
.upd-update-label i { margin-right: 0.3rem; }

/* Updates im Pin: gleiche Pfirsich-Karte wie im Updates-Fenster */
.post-update { background: #e1e8f0; border-radius: 16px; padding: 0.7rem 0.9rem; }
.post-update-head { align-items: center; }
.post-update-head .upd-time { gap: 0.5rem; }
.post-update-del { background: rgba(31, 47, 68, 0.12); color: var(--blue-500); width: 1.8rem; height: 1.8rem; }
.post-update-text { margin: 0.25rem 0 0; }

.post-update-head .upd-update-label i { color: inherit; margin-right: 0.3rem; }
.post-update-del i { color: inherit; margin: 0; }

/* Uebersetzung: "Original anzeigen"-Knopf (Platzhalter, siehe applyTranslations in app.js) */
.tr-toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.35rem 0 0; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.8rem; cursor: pointer; }
.tr-toggle:hover { color: var(--accent); text-decoration: underline; }
.comment-text .tr-toggle { display: flex; }

.my-posts-heading { margin: 1.1rem 0 0.3rem; font-size: 1rem; }
.my-post.is-expired { opacity: 0.85; }
.my-post.is-expired .my-post-icon { filter: grayscale(0.6); }

/* Regeln haben keine runden Karten - Ueberschriften bündig mit dem Text, ohne optischen Einzug */
.rules-body .rules-sec h3 { padding-inline: 0; }

/* Pin-Maske: Fehler-/Hinweistext im Footer deutlich hervorgehoben */
#postError { background: color-mix(in srgb, var(--danger) 12%, #fff); border: 1.5px solid color-mix(in srgb, var(--danger) 45%, #fff); border-radius: 12px; padding: 0.6rem 0.8rem; font-weight: 600; line-height: 1.35; }

#postMenuBtn[data-mode="edit"] i { transform: none; }

/* Pin bearbeiten: Speichern in Gruen, Loeschen gleich hoch und breit wie Speichern */
.sheet-modal-foot:has(#postFormDeleteBtn:not([hidden])) #postSubmitBtn { background: var(--button-color); }
#postFormDeleteBtn { width: 100%; padding: 0.85rem; font-size: 1.05rem; font-weight: 700; margin: 0; }

/* Update-Knopf in der Aktionszeile eigener Pins (Megafon, gruen) */
.detail-action-row .detail-update-btn { background: #e1e8f0; color: var(--blue-500); font-size: 1.05rem; }
.detail-action-row .detail-update-btn.active { background: var(--blue-500); color: #fff; }
@media all { .detail-action-row .detail-update-btn { order: 2; } }

/* Ausnahme: Update-Knopf mit Text neben dem Icon */
.detail-action-row .detail-update-btn { width: auto; padding: 0 1rem; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }

/* Eigene Pins: Zaehler statt Knoepfe */
.own-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.6rem; }
.own-stats:empty { display: none; }
.own-stat { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: #fff; color: var(--text-secondary); font-size: 0.9rem; font-weight: 700; }
.own-stat i { color: var(--blue-500); }

.own-stats { width: 100%; margin: 1.1rem 0 0; }
.own-stat { flex: 1 1 0; justify-content: center; white-space: nowrap; }


/* Kein sichtbares Nachspringen beim Laden: Filter-Karte und Konto-Knoepfe erscheinen erst,
   wenn app.js sie befuellt hat (html.app-ready, Fallback-Timer in index.html). Platz bleibt reserviert. */
html:not(.app-ready) #filterModal .modal,
html:not(.app-ready) #langBtn,
html:not(.app-ready) #profileBtn,
html:not(.app-ready) #contactsBtn,
html:not(.app-ready) #updatesBtn { visibility: hidden; }

/* ---------- Handy/Tablet: alle Modals als Bottom-Sheet (Nutzerwunsch 2026-10-07) ----------
   Wie die Detail-Karten: gleiten von unten herein, volle Breite, oben abgerundet, mit Griff
   zum Runterwischen. Desktop (ab 900px) bleibt bei den zentrierten Dialogen. */
.modal > .sheet-handle-auto { display: none; }
@media (max-width: 899.98px) {
  .modal-overlay { align-items: flex-end; justify-content: center; padding: 0; overflow: hidden; }
  .modal-overlay > .modal {
    width: 100% !important; max-width: none !important;
    max-height: 92vh; max-height: 92dvh;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.18);
    padding-bottom: max(1.6rem, env(safe-area-inset-bottom, 0px));
  }
  .modal-overlay > .modal.modal-fixed { height: min(92dvh, 760px); padding-bottom: 0; }
  .modal-overlay > .modal.sheet-modal { padding-bottom: 0; }
  .modal-overlay:not([hidden]) > .modal { animation: sheet-slide-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .modal > .sheet-handle-auto { display: block; z-index: 3; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .modal-overlay:not([hidden]) > .modal { animation: none; }
}

/* Filter-Kategorien nach Breite (Handy/Tablet): ueber 600px 4, 400-600px 3, unter 400px 2 Spalten */
@media (max-width: 899.98px) {
  #filterModal .category-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem 0.6rem; }
}
@media (min-width: 720px) and (max-width: 899.98px) {
  #filterModal .category-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #filterModal .category-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 399.98px) {
  #filterModal .category-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Kontaktdaten (Profil): Icons in den Farben des jeweiligen Dienstes */
.cf-icon[title="Handynummer"] { color: #30598e; }
.cf-row[title="E-Mail"] .cf-icon { color: #3a5a92; }
.cf-row[title="Facebook"] .cf-icon { color: #1877f2; }
.cf-row[title="Instagram"] .cf-icon { color: #e4405f; }
.cf-row[title="TikTok"] .cf-icon { color: #111111; }
.cf-row[title="Snapchat"] .cf-icon { color: #f2c200; }
.cf-row[title="Telegram"] .cf-icon { color: #26a5e4; }
.cf-row[title="Threema"] .cf-icon { color: #2a2a2a; }

/* Filter auf Handy/Tablet: Kopf (Ueberschrift + Schliessen) steht fest, nur .filter-body scrollt.
   Desktop: Wrapper ist unsichtbar (display: contents), die Filter-Karte bleibt wie sie war. */
.filter-body { display: contents; }
@media (max-width: 899.98px) {
  #filterModal .modal { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  #filterModal .filter-head {
    flex: none; margin: 0; padding: 1.6rem 1.6rem 0.8rem;
  }
  #filterModal .filter-head h2 { margin: 0; }
  #filterModal .filter-head .modal-close { position: static; flex: none; }
  #filterModal .filter-body {
    display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: 0 1.6rem max(1.6rem, env(safe-area-inset-bottom, 0px));
  }
}

/* Pin-Maske: Absenden-Knopf immer gruen; Footer mit leicht gebogenem Schatten nach oben */
.sheet-modal-foot #postSubmitBtn { background: var(--button-color); }
.sheet-modal-foot { position: relative; z-index: 2; box-shadow: 0 -9px 14px -9px rgba(0, 0, 0, 0.22); }

/* "Neuer Pin": Kategorie-Auswahl im Layout des Filters (Kachel mit Icon oben, Name darunter,
   aktiv = Kategoriefarbe; Spalten wie beim Filter je nach Breite) */
#categoryPicker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
#categoryPicker .category-option,
#categoryPicker .category-option.active {
  flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;
  padding: 0.55rem 0.4rem 0.5rem; gap: 0.3rem; border-radius: 16px; border: 2px solid transparent;
  background: color-mix(in srgb, var(--cat-color) 14%, #fff); color: var(--text-muted);
  white-space: normal; font-size: 0.85rem; line-height: 1.15;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
#categoryPicker .category-option.active { background: var(--cat-color); border-color: var(--cat-color); color: #fff; }
#categoryPicker .category-option:hover { border: 2px solid var(--cat-color); }
#categoryPicker .category-option .cat-icon,
#categoryPicker .category-option.active .cat-icon {
  width: auto; height: auto; border: none; background: none; border-radius: 0; font-size: 1.35rem; line-height: 1.2;
}
#categoryPicker .category-option:not(.active) .cat-icon { color: var(--cat-color); }
#categoryPicker .category-option.active .cat-icon { color: #fff; }
#categoryPicker .category-option span:last-child { font-size: 0.85rem; line-height: 1.15; }
@media (max-width: 899.98px) { #categoryPicker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem 0.6rem; } }
@media (min-width: 720px) and (max-width: 899.98px) { #categoryPicker { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 600px) { #categoryPicker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 399.98px) { #categoryPicker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Profil: Kurzbeschreibung etwas hoeher */
#profileBio { min-height: 6.5rem; resize: vertical; }

/* Beliebte Pins (Soziales + Veranstaltungen): roter Pulse als weiche Flaeche in 3 versetzten Stufen
   (.hot-pulse > i, siehe pinIcon()): drei Wellen kurz hintereinander, dann Pause bis zum naechsten Schub (Pause 2,5s).
   Keine feste Outline, bewusst geringe Ausdehnung. */
.hot-pulse { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hot-pulse i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(194, 21, 34, 0.55);
  opacity: 0;
  animation: pin-hot-pulse 4.5s ease-out infinite;
}
.hot-pulse i:nth-child(2) { animation-delay: 0.3s; }
.hot-pulse i:nth-child(3) { animation-delay: 0.6s; }
@keyframes pin-hot-pulse {
  0% { transform: scale(1); opacity: 0.85; }
  31% { transform: scale(1.1, 1.5); opacity: 0; }
  100% { transform: scale(1.1, 1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hot-pulse i { animation: none; opacity: 0.3; }
  .hot-pulse i:nth-child(1) { transform: scale(1.06, 1.3); }
  .hot-pulse i:nth-child(2) { transform: scale(1.1, 1.5); }
  .hot-pulse i:nth-child(3) { transform: scale(1.1, 1.5); }
}

/* =====================================================================
   BremenKarte-Theme (Farben aus dem KiB-Design-System, kein Bezug zum Shop):
   Primaer Blau #2F4A6D, Akzent Rot #C21522, Hintergrund #F7F7F7, Text #121212.
   Steht am Dateiende und ueberschreibt die Tokens aus :root weiter oben.
   ===================================================================== */
:root {
  --blue-50: #f5f8fb; --blue-100: #edf2f6; --blue-200: #cbd7e2; --blue-300: #9bb3c8; --blue-400: #6f8fb0; --blue-450: #4e6c8e;
  --blue-500: #2f4a6d; --blue-600: #263a55; --blue-700: #1e2f45; --blue-800: #16243a; --blue-900: #0e1726;
  --orange-50: #fdebec; --orange-100: #f6c6c9; --orange-200: #ee8a90; --orange-300: #e04a53; --orange-400: #d93a43;
  --orange-500: #c21522; --orange-600: #a5111d; --orange-700: #8f0f19; --orange-800: #6e0b13; --orange-900: #4d080e;
  --neutral-50: #f7f7f7; --neutral-100: #efefef; --neutral-200: #e3e3e3; --neutral-300: #cfcfcf; --neutral-400: #b3b3b3;
  --neutral-500: #8f8f8f; --neutral-600: #6b6b6b; --neutral-700: #4d4d4d; --neutral-800: #2e2e2e; --neutral-900: #1a1a1a;
  --accent: #3f6fa3; --accent-dark: #2f4a6d; --accent-light: #edf2f6;
  --button-color: #2f4a6d;
  --text-primary: #121212;
  --bg-surface: #f7f7f7; --bg-subtle: #efefef; --border: #e3e3e3;
}

/* ---------- Karte/Liste-Schalter und Listenansicht (2026-10-10) ---------- */
.view-switch {
  display: flex; gap: 0.3rem; padding: 0.25rem; margin-bottom: 0.7rem;
  background: var(--bg-subtle); border-radius: 999px;
}
.view-switch button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  border: 0; background: transparent; border-radius: 999px; padding: 0.55rem 0.8rem;
  font: inherit; font-weight: 600; color: var(--text-primary); cursor: pointer;
}
.view-switch button.active { background: var(--button-color); color: #fff; }

.list-view {
  position: absolute; inset: 0; z-index: 5; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg-subtle);
}
/* Fester Kopf (scrollt nicht mit): Pin-Zaehler und Sortierung. Statt Schatten ein
   Transparenzverlauf, der unter dem Kopf in die Liste ausblendet. */
.list-head {
  flex: none; position: relative; z-index: 6; background: var(--bg-subtle);
  padding: 0.8rem 1rem 0.3rem calc(var(--edge) + var(--map-btn) + 0.8rem);
}
.list-head::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.4rem;
  background: linear-gradient(180deg, var(--bg-subtle), color-mix(in srgb, var(--bg-subtle) 0%, transparent)); pointer-events: none;
}
.list-head-inner { max-width: 46rem; margin: 0 auto; }
/* Platz fuer den Switch Karte/Liste (Handy/Tablet: Reihe neben dem Plus-Knopf) */
.list-head-inner::before { content: ''; display: block; height: var(--map-btn); }
.list-heading { display: none; }

/* Karte/Liste-Switch (Stil wie zuvor im Filter), immer sichtbar */
.map-view-switch {
  position: absolute; z-index: 15; margin: 0; box-sizing: border-box;
  height: var(--map-btn); width: 17rem;
  top: 1.3rem; left: 50%; transform: translateX(-50%);
  box-shadow: var(--shadow-md);
}
.map-view-switch button { white-space: nowrap; }
body.picking .map-view-switch { display: none; }
@media (max-width: 899.98px) {
  /* neben dem Plus-Knopf, links von den Kopf-Icons */
  .map-view-switch { top: var(--col-top, 0.8rem); left: calc(var(--edge) + var(--map-btn) + 0.8rem); transform: none; width: min(15rem, calc(100vw - 16.4rem)); }
  .map-view-switch button { padding: 0 0.4rem; font-size: 0.85rem; gap: 0.3rem; }
  .list-count, .list-sort span, .sort-dd-btn { white-space: nowrap; }
}
/* Schmale Handys: Switch nur mit Icons, Sortierzeile kompakter */
@media (max-width: 440px) {
  .map-view-switch button { font-size: 0; }
  .map-view-switch button i { font-size: 1rem; }
  .list-bar { gap: 0.4rem; }
  .list-count, .list-sort, .sort-dd-btn { font-size: 0.82rem; }
}
@media (max-width: 440px) {
  .list-sort > span { display: none; } /* "Sortieren nach" faellt weg, damit die Zeile neben Plus/Filter passt */
}
.list-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.list-inner { max-width: 46rem; margin: 0 auto; padding: 0.9rem 1rem 5rem; }
.list-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  height: var(--map-btn); margin-top: 0.6rem;
}
/* 4px nach rechts: optisch buendig mit der Rundung der Karten darunter */
.list-count { font-weight: 600; color: var(--text-primary); padding-left: 4px; }
.list-sort { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.list-sort span { font-weight: 600; }
/* Eigenes Auswahlmenue (kein <select>): Knopf ohne Hintergrund, Menue als Karte */
.sort-dd { position: relative; }
.sort-dd-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: none; border: 0; padding: 0.3rem 0.2rem; margin: 0;
  font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); cursor: pointer;
}
.sort-dd-btn i { font-size: 0.7rem; transition: transform 0.2s ease; }
.sort-dd-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.sort-dd-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20;
  min-width: 13.5rem; margin: 0; padding: 0.35rem; list-style: none;
  background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.sort-dd-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  background: none; border: 0; border-radius: 11px; padding: 0.6rem 0.8rem;
  font: inherit; font-size: 0.92rem; color: var(--text-primary); text-align: left; cursor: pointer;
}
.sort-dd-menu button i { visibility: hidden; font-size: 0.8rem; color: var(--button-color); }
.sort-dd-menu button:hover, .sort-dd-menu button:focus-visible { background: var(--bg-subtle); outline: none; }
.sort-dd-menu button.active { font-weight: 700; }
.sort-dd-menu button.active i { visibility: visible; }
/* Like-/Kommentar-Zaehler als Pillen */
.list-stat {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.65rem; border-radius: 999px;
  background: var(--bg-subtle); color: var(--text-primary); opacity: 1;
}
.list-stat b { font-weight: 700; font-size: 0.82rem; }
.list-meta .list-stat i { margin: 0; font-size: 0.78rem; opacity: 0.55; }
/* Zeit/Entfernung: gleiche Pillenform, aber nur Rahmen und normale Schrift - die Zaehler bleiben die Hingucker */
.list-stat-time, .list-stat-dist { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); color: var(--text-muted); }
.list-stat-time span, .list-stat-dist span { font-size: 0.8rem; font-weight: 600; }
/* Zeit-Pille: Hintergrund nach verbleibender Sichtbarkeitsdauer (gruen > 50 %, gelb, orange, rot < 10 %) */
.list-stat-time.life-ok   { background: #e2f3e5; box-shadow: none; color: #1f6b34; }
.list-stat-time.life-mid  { background: #fbf0c9; box-shadow: none; color: #7a5a00; }
.list-stat-time.life-low  { background: #ffe0c7; box-shadow: none; color: #9a4a0a; }
.list-stat-time.life-crit { background: #fcd9d9; box-shadow: none; color: #a52a2a; }
.list-stat-time[class*="life-"] i { opacity: 0.85; }
.list-stat-like.has { background: #fdecee; }
.list-stat-like.has i { color: #d6364b; opacity: 1; }
.list-stat-comment.has { background: color-mix(in srgb, var(--accent) 12%, #fff); }
.list-stat-comment.has i { color: var(--accent); opacity: 1; }
.list-items { display: flex; flex-direction: column; gap: 0.7rem; }
.list-card {
  background: #fff; border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.list-card-main { display: flex; gap: 0.8rem; align-items: flex-start; cursor: pointer; padding: 0.9rem 1rem 0.7rem; border-radius: 18px 18px 0 0; }
/* Zwei Buttons nebeneinander, immer sichtbar: Karte (klappt die Mini-Karte auf/zu) und Details */
.list-actions { display: flex; gap: 0.5rem; padding: 0 1rem 0.9rem; }
.list-act-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.85rem 0.9rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700;
  background: var(--bg-subtle); color: var(--text-primary);
}
.list-act-btn:hover { filter: brightness(0.96); }
.list-act-btn[data-act="details"] { background: var(--button-color); color: #fff; }
.list-act-btn[aria-pressed="true"] {
  background: var(--orange-300);
  color: #fff;
}
/* Auge: offen = durchgestrichen (klicken blendet die Karte aus), zu = normales Auge */
.list-act-btn[aria-pressed="false"] .eye-hide, .list-act-btn[aria-pressed="true"] .eye-show { display: none; }
/* Aufklappen per Slide (grid-template-rows 0fr -> 1fr) */
.list-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; }
.list-card.open .list-expand { grid-template-rows: 1fr; }
.list-card.no-anim .list-expand { transition: none; }
.list-expand-inner { overflow: hidden; min-height: 0; }
.list-expand-body { padding: 0 1rem 1rem; }
.list-mini-map { height: 15rem; border-radius: 14px; overflow: hidden; background: var(--bg-subtle); }
.list-loc-caption { margin-top: 0.55rem; font-size: 0.88rem; color: var(--text-muted); }
.list-loc-caption i { margin: 0 0.25rem; opacity: 0.7; }
.list-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); }
.list-card-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.list-cat-icon {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cat-color) 14%, #fff); color: var(--cat-color); font-size: 1.1rem;
}
.list-cat-icon .mdi-icon { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.list-body { flex: 1; min-width: 0; }
.list-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cat-color); }
.list-title { margin: 0.1rem 0 0.2rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.list-desc {
  margin: 0 0 0.5rem; font-size: 1rem; color: var(--text-muted); opacity: 0.85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.list-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; margin-top: 0.15rem; font-size: 0.8rem; color: var(--text-muted); }
.list-meta i { margin-right: 0.2rem; }
.list-price { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 999px; font-weight: 700; opacity: 1; color: var(--cat-color); background: color-mix(in srgb, var(--cat-color) 14%, #fff); }
.list-thumb { flex: none; width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: 12px; }
.list-empty { text-align: center; padding: 2rem 0; color: var(--text-muted); }

/* In der Liste gibt es keine Karte: Satellit-Knopf weg */
body.list-mode .map-sat-btn { display: none; }

@media (min-width: 900px) {
  /* Platz links fuer die feste Filter-Karte, Inhalt mittig im Rest */
  .list-head { padding: 1.3rem 1.6rem 0.9rem 24rem; }
  .list-heading { display: flex; align-items: center; height: var(--map-btn); margin: 0; font-size: 1.6rem; }
  .list-head-inner::before { display: none; }
  .list-bar { height: auto; margin-top: 0.7rem; }
  .list-scroll .list-inner { max-width: none; padding: 1rem 1.6rem 5rem 24rem; }
  .list-scroll .list-items { max-width: 46rem; margin-left: auto; margin-right: auto; }
}

/* Desktop: Karte/Liste-Switch direkt unter "Pin hinzufuegen", in den Farben der Filter-Karte darunter */
@media (min-width: 900px) {
  .map-view-switch { top: 4.8rem; left: 1.4rem; transform: none; width: 18rem; background: var(--bg-surface); }
  #filterModal.modal-overlay, #filterModal.modal-overlay[hidden] { top: 8.4rem; }
  #filterModal .modal { max-height: calc(100vh - 14.6rem); }
}

/* Karte/Liste-Switch: dunkel (Buttonfarbe des Projekts), aktiver Eintrag hell */
#viewModeSwitch.map-view-switch { background: var(--button-color); }
#viewModeSwitch.map-view-switch button { color: #fff; }
#viewModeSwitch.map-view-switch button.active { background: var(--bg-surface); color: var(--button-color); }

/* Switch mit gleitender heller Pille (Transition) statt hartem Wechsel */
#viewModeSwitch.map-view-switch::before {
  content: ''; position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0.25rem;
  width: calc((100% - 0.5rem - 0.3rem) / 2); border-radius: 999px;
  background: var(--blue-450); /* gleitende Pille in der Farbe des aktiven Eintrags */
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
#viewModeSwitch.map-view-switch[data-active="list"]::before { transform: translateX(calc(100% + 0.3rem)); }
#viewModeSwitch.map-view-switch button { position: relative; z-index: 1; transition: color 0.25s ease; }
#viewModeSwitch.map-view-switch button.active {
  background: transparent;
  color: white;
}

/* Handy/Tablet: Filter-Knopf weiss mit farbigem Icon (Akzentfarbe) statt dunkel gefuellt */
@media (max-width: 899.98px) {
  .topbar .topbar-center .filter-pill { background: #fff; color: var(--accent); }
  .topbar .topbar-center .filter-pill i { color: var(--accent); }
}

/* "Meine Pins": Stand der Bildpruefung */
.my-post-review { display: block; margin-top: 0.15rem; color: var(--text-muted); }
.my-post-review i { margin-right: 0.3rem; }
.my-post-review.is-rejected { color: #a52a2a; font-weight: 600; }

/* Handy/Tablet, Listenansicht: Die Detail-Karte liegt als Vollbild-Overlay ueber der Liste (samt Kopf, Switch und
   Knoepfen) statt als halbhohes Sheet, durch das die Liste noch durchscheint (Nutzerwunsch 2026-10-10). Das Panel ist
   hier ohnehin position:fixed; der Abstandhalter ::before (zeigt sonst die Karte darueber) faellt weg. */
@media (max-width: 899.98px) {
  body.list-mode main#mapMain .detail-panel { z-index: 60; pointer-events: auto; background: var(--bg-surface); }
  body.list-mode main#mapMain .detail-panel::before { height: 0; }
  body.list-mode main#mapMain .detail-sheet { min-height: 100%; border-radius: 0; box-shadow: none; }
  body.list-mode main#mapMain .detail-panel-top { border-radius: 0; }
  /* Tablet: Inhalt nicht ueber die ganze Breite ziehen */
  body.list-mode main#mapMain .detail-sheet { max-width: 46rem; margin: 0 auto; }
}

/* Leaflet vergibt intern z-Indizes bis 1000: die aufgeklappte Mini-Karte darf nicht ueber den festen Listenkopf
   (Sortier-Menue, Switch) ragen -> eigener Stapelkontext fuer den scrollenden Bereich und die Karte. */
.list-scroll { isolation: isolate; }
.list-mini-map { isolation: isolate; position: relative; z-index: 0; }
.list-head { z-index: 30; }

/* Desktop: Karte/Liste-Switch OBEN, darunter "Pin hinzufuegen", dann die Filter-Karte (Nutzerwunsch 2026-10-10).
   Bei offener Detail-Karte (Switch ausgeblendet) rueckt der Pin-Knopf wieder nach oben. */
@media (min-width: 900px) {
  .map-view-switch { top: 1.3rem; }
  #headerNewPostBtn { position: absolute; top: 4.8rem; left: 1.4rem; width: 18rem; margin: 0; }
}

/* ---------- Handy/Tablet: Karte/Liste-Switch ganz links oben, die Knoepfe darunter (Nutzerwunsch 2026-10-10) ----------
   Spalte von oben: Switch, Pin hinzufuegen, Filter, Satellit. In der Listenansicht (kein Satellit) stehen Plus und Filter
   nebeneinander in der Zeile mit Pin-Zaehler und Sortierung. */
@media (max-width: 899.98px) {
  :root { --col-step: calc(var(--map-btn) + var(--col-gap, 0.6rem)); }
  .map-view-switch {
    top: var(--col-top, 0.8rem); left: var(--edge); transform: none;
    width: min(15rem, calc(100vw - var(--edge) - 11rem));
  }
  .map-toolbar { top: calc(var(--col-top, 0.8rem) + var(--col-step)); }
  .topbar .topbar-center .filter-pill { top: calc(var(--col-top, 0.8rem) + 2 * var(--col-step)); }
  .map-sat-btn { top: calc(var(--col-top, 0.8rem) + 3 * var(--col-step)); }

  /* Liste: Plus links, Filter rechts daneben, beide in der Zeile unter dem Switch */
  body.list-mode .topbar .topbar-center .filter-pill {
    top: calc(var(--col-top, 0.8rem) + var(--col-step));
    left: calc(var(--edge) + var(--col-step));
  }
  .list-head { padding-left: 1rem; }
  .list-bar { margin-left: calc(var(--edge) + 2 * var(--col-step) - 1rem); }
}

/* Desktop: Switch und "Pin hinzufuegen" bleiben bei offener Detail-Karte unveraendert stehen; die Karte beginnt
   darunter, auf Hoehe der Filter-Karte (Nutzerwunsch 2026-10-10). */
@media (min-width: 900px) {
  .detail-panel { top: 8.4rem; }
}

/* Filter-Ueberschrift in der Schrift der Knoepfe (z. B. "Pin hinzufuegen"): Maven Pro, fett, normale Schreibweise */
#filterModal .filter-head h2 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: normal; text-transform: none;
  color: var(--text-primary);
}


/* Desktop, Listenansicht: Die Detail-Karte bleibt links an der Position der Kartenansicht, die Liste dahinter ist abgedunkelt
   (auch der feste Kopf). Switch und "Pin hinzufuegen" liegen darueber und bleiben unveraendert. Klick auf die Abdunklung
   schliesst die Karte (app.js). */
@media (min-width: 900px) {
  body.list-mode.detail-open .list-view::after {
    content: ''; position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.28);
  }
}

/* Die scrollende Liste endet oberhalb der unteren Leiste (Impressum usw.), ohne Verlauf. */
.list-view { padding-bottom: calc(var(--edge, 0.8rem) + var(--map-btn, 3rem) + 0.5rem); }
.list-inner { padding-bottom: 1rem; }

/* Desktop, Listenansicht mit offener Detail-Karte: Die Abdunklung liegt auch ueber der unteren Leiste (Impressum usw.);
   Switch und "Pin hinzufuegen" bleiben darueber. */
@media (min-width: 900px) {
  body.list-mode.detail-open .list-view { z-index: 16; }
  body.list-mode.detail-open .map-view-switch,
  body.list-mode.detail-open #headerNewPostBtn { z-index: 45; }
}

/* Titel-Feld im "Neuer Pin"-Formular: Zeichenzaehler rechts im Feld */
.input-count-wrap { position: relative; display: block; }
.input-count-wrap input { width: 100%; box-sizing: border-box; padding-right: 3.6rem; }
.char-count { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); pointer-events: none; }
.char-count.is-full { color: var(--orange-500, #c2410c); }

/* Abmelden-Knopf im Profil: rotes Farbschema (Nutzerwunsch 2026-10-10) */
.modal-logout-round { background: var(--danger-light); color: var(--danger); }
@media (hover: hover) { .modal-logout-round:hover { background: var(--danger); color: #fff; } }
.modal-logout-round:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

/* Kurzer Hinweis unter dem Beschreibungsfeld; Datenschutzerklaerung im Rechts-Fenster */
.field-hint { display: block; margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); }
.legal-text { font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); }
.legal-text h4 { margin: 1.1rem 0 0.35rem; font-size: 1rem; color: var(--text-primary); }
.legal-text p { margin: 0 0 0.6rem; }
.legal-text ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.legal-text li { margin-bottom: 0.4rem; }
.legal-note { padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--bg-subtle); }
/* E-Mail: Passwort vergessen, Bestaetigungshinweis im Profil (2026-10-11) */
.auth-forgot-link { align-self: center; padding: 0.3rem; border: 0; background: none; font: inherit; font-size: 0.95rem; color: var(--button-color); cursor: pointer; }
.verify-notice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.75rem 0.9rem; border-radius: 12px; background: color-mix(in srgb, var(--orange-500) 12%, #fff); font-size: 0.9rem; line-height: 1.45; }
.verify-notice > i { color: var(--orange-500); font-size: 1.15rem; margin-top: 0.1rem; }
.verify-notice .link-btn { display: inline; padding: 0; margin-left: 0.2rem; border: 0; background: none; font: inherit; color: var(--button-color); text-decoration: underline; cursor: pointer; }
.verify-notice-msg { display: block; margin-top: 0.3rem; color: var(--text-muted); }
.verify-notice-msg:empty { display: none; }
/* Zaehler der Kurzbeschreibung unten rechts im Textfeld (hing vorher am Modal, mittig) */
label:has(> #profileBio) { position: relative; }
#profileBioCount { top: auto; bottom: 0.6rem; transform: none; }

/* Wartungsmodus (2026-10-11) */
.maintenance-screen { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: var(--bg-surface, #f5f2ec); }
.maintenance-card { max-width: 26rem; text-align: center; }
.maintenance-icon { width: 4.2rem; height: 4.2rem; margin: 0 auto 1.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff; background: var(--button-color); }
.maintenance-card h1 { margin: 0 0 0.6rem; font-size: 1.7rem; color: var(--text-primary); }
.maintenance-card p { margin: 0 0 0.8rem; line-height: 1.5; color: var(--text-secondary); }
.maintenance-hint { font-size: 0.9rem; color: var(--text-muted) !important; }
.maintenance-admin-link { margin-top: 1.4rem; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; padding: 0.4rem; }
/* Login-Fenster muss ueber dem Wartungsbildschirm liegen (Admin-Anmeldung) */
body.maintenance-blocking #authModal { z-index: 2600; }
.maintenance-banner { position: fixed; top: 0.6rem; left: 50%; transform: translateX(-50%); z-index: 2400; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--orange-500); color: #fff; font-size: 0.85rem; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; white-space: nowrap; }
.maintenance-admin { margin: 0.2rem 0 0.8rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--bg-subtle); }
.maintenance-admin-msg { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.maintenance-admin-msg textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 0.9rem; padding: 0.55rem 0.7rem; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.maintenance-admin-msg .secondary-btn { align-self: flex-end; }

/* Cookie-/Statistik-Banner (2026-10-11): beide Wahlknoepfe gleich gewichtet */
.consent-banner { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2700; width: min(34rem, calc(100vw - 2rem)); box-sizing: border-box; padding: 1.1rem 1.2rem 1rem; border-radius: 18px; background: #fff; box-shadow: 0 10px 34px rgba(0,0,0,.22); }
.consent-banner h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.consent-banner p { margin: 0 0 0.8rem; font-size: 0.9rem; line-height: 1.45; color: var(--text-secondary); }
.consent-banner .link-btn { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--button-color); text-decoration: underline; cursor: pointer; }
.consent-current { font-weight: 700; color: var(--text-primary) !important; }
.consent-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.consent-btn { flex: 1 1 12rem; padding: 0.75rem 1rem; border-radius: 999px; border: 2px solid var(--button-color); background: var(--button-color); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.consent-off { display: block; margin: 0.7rem auto 0; font-size: 0.85rem !important; color: var(--text-muted) !important; }