/* -------------------------------------------------------------
 * Design-Tokens "Nachtwald" (2026-09-13, siehe design-fortschritt).
 * Dunkles, jagdliches Grün als Grundfläche, gedämpftes Antik-Gold
 * ausschließlich als Akzent (Icons, Ränder, aktive Zustände) –
 * bewusst NICHT als Fließtextfarbe, aus Kontrast- und
 * Wiedererkennungsgründen. Alle Kontrastpaare gegen WCAG AA
 * geprüft (Text auf Grund/Fläche ≥ 13:1, gedämpfter Text ≥ 5:1).
 * Mobile-first Grundgerüst bleibt unverändert: Touch-Ziele
 * mind. 44x44px, table-scroll-Wrapper, Checkbox-Hack-Menü.
 * ------------------------------------------------------------- */
:root {
    --tap-min: 44px;

    --hunt-bg: #161f15;
    --hunt-surface: #202b1f;
    --hunt-surface-raised: #29352a;
    --hunt-border: rgba(236,231,218,0.14);
    --hunt-border-strong: rgba(236,231,218,0.4);

    --hunt-text: #ece7da;
    --hunt-text-muted: #9caa96;

    --hunt-gold: #d4af6a;
    --hunt-gold-soft: rgba(212,175,106,0.14);
    --hunt-gold-strong: #e6c88a;
    --hunt-on-gold: #201a0d;

    --hunt-alert: #a8492f;
    --hunt-alert-soft: rgba(168,73,47,0.22);
    --hunt-alert-text: #f0b7a4;
    --hunt-alert-strong: #bb5636;

    --hunt-success: #7a9467;
    --hunt-success-soft: rgba(122,148,103,0.18);
    --hunt-success-text: #b9caa9;

    --hunt-info: #6f96ab;
    --hunt-info-soft: rgba(111,150,171,0.18);
    --hunt-info-text: #cfe0ea;

    --hunt-badge-abschuss-bg: #3c4f30;
    --hunt-badge-abschuss-text: #d7e3c9;
    --hunt-badge-anblick-bg: #2c3d47;

    --hunt-focus: #f4ead0;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-float: 0 10px 28px rgba(0,0,0,0.45);
    --shadow-soft: 0 2px 10px rgba(0,0,0,0.3);

    --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { -webkit-tap-highlight-color: rgba(212,175,106,0.18); }
html { background: var(--hunt-bg); color-scheme: dark; }
body {
    font-family: var(--font-body); max-width: 860px; margin: 1.25rem auto; color: var(--hunt-text);
    background: var(--hunt-bg);
    padding: 0 1rem; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right));
}
h1, h2, h3 { font-weight: 600; letter-spacing: 0.01em; }
h1 { margin: 1rem 0 0.5rem; font-size: 1.55rem; color: var(--hunt-text); }
h2 { margin-top: 2.25rem; border-bottom: 1px solid var(--hunt-border); padding-bottom: 0.35rem; font-size: 1.2rem; }
h3 { margin-bottom: 0.25rem; font-size: 1.05rem; }
a { color: var(--hunt-gold-strong); }
form { margin-bottom: 1.5rem; }
label { display: block; margin-top: 0.75rem; font-size: 0.9rem; color: var(--hunt-text-muted); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], textarea, select {
    width: 100%; padding: 0.6rem; margin-top: 0.25rem; box-sizing: border-box;
    background: var(--hunt-surface); color: var(--hunt-text);
    border: 1px solid var(--hunt-border); border-radius: var(--radius-sm); font: inherit; min-height: var(--tap-min);
}
input::placeholder, textarea::placeholder { color: var(--hunt-text-muted); opacity: 0.8; }
textarea { min-height: 5.5rem; }
/* Eigene Checkbox-Optik im App-Design statt der Browser-Vorgabe -
   app-weit nutzbar ueber .hunt-checkbox-label (Label umschliesst
   Input + Beschriftung), z.B. bei Treiberkoordination/Live-Tracking. */
.hunt-checkbox-label {
    display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 400;
    color: var(--hunt-text); font-size: 0.9rem; cursor: pointer; user-select: none;
    margin-top: 0.75rem;
}
.hunt-checkbox-label input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 20px; height: 20px;
    min-height: 0; margin: 0.1rem 0 0; flex: 0 0 auto; padding: 0;
    border: 1.5px solid var(--hunt-border-strong); border-radius: 5px;
    background: var(--hunt-surface); position: relative; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.hunt-checkbox-label input[type="checkbox"]:checked {
    background: var(--hunt-gold); border-color: var(--hunt-gold);
}
.hunt-checkbox-label input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px;
    border: solid var(--hunt-bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.hunt-checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--hunt-focus); outline-offset: 2px;
}
.hunt-checkbox-label span { padding-top: 0.05rem; }
/* Aufmerksamkeits-Badge fuer nicht gespeicherte Entwuerfe (Treiber-
   Zeichenwerkzeug) - dezent pulsierend, damit man auch beim
   eingeklappten Werkzeuge-Panel nicht vergisst zu speichern. Schwebt
   DIREKT auf den Kartenkacheln (nicht auf dem dunklen Seitenhintergrund
   wie z.B. .error), deshalb bewusst eine deckende dunkle Flaeche statt
   des halbtransparenten --hunt-alert-soft - sonst je nach Kartenausschnitt
   (heller OSM-Untergrund, Satellitenbild, ...) kaum lesbar. Gleiches
   Muster wie die anderen Karten-Overlays (#hud-karte-overlay,
   #hunt-karten-werkzeuge).*/
.hunt-entwurf-badge {
    display: none; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600;
    padding: 0.3rem 0.6rem; border-radius: var(--radius-pill); background: rgba(22,31,21,0.92);
    color: var(--hunt-alert-text); border: 1px solid var(--hunt-alert); box-shadow: var(--shadow-float);
    animation: hunt-entwurf-puls 1.6s ease-in-out infinite;
}
@keyframes hunt-entwurf-puls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
button, input[type=submit], a.secondary, a.danger {
    padding: 0.65rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--hunt-gold); color: var(--hunt-on-gold); font-weight: 600;
    cursor: pointer; font: inherit; font-size: 0.95rem; min-height: var(--tap-min); touch-action: manipulation;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box;
}
button:hover, input[type=submit]:hover, a.secondary:hover, a.danger:hover { background: var(--hunt-gold-strong); }
button.secondary, a.secondary { background: var(--hunt-surface-raised); color: var(--hunt-text); border-color: var(--hunt-border-strong); font-weight: 500; }
button.secondary:hover, a.secondary:hover { border-color: var(--hunt-gold); }
button.danger, a.danger { background: var(--hunt-alert); color: var(--hunt-focus); font-weight: 600; }
button.danger:hover, a.danger:hover { background: var(--hunt-alert-strong); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--hunt-focus); outline-offset: 2px;
}
form.inline { display: inline; margin: 0 0.2rem 0 0; }
label + button, label + input[type=submit] { margin-top: 1.25rem; }

/* Tabellen: Basis bleibt wie gehabt, aber IMMER in .table-scroll wrappen,
   damit auf schmalen Screens gescrollt statt gequetscht wird. */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--hunt-border); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hunt-text-muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1rem; }
.table-scroll table { margin-top: 0; min-width: 480px; }
.nachricht { white-space: pre-wrap; max-width: 320px; }
.error { background: var(--hunt-alert-soft); color: var(--hunt-alert-text); padding: 0.75rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid rgba(168,73,47,0.4); }
.notice { background: var(--hunt-success-soft); color: var(--hunt-success-text); padding: 0.75rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid rgba(122,148,103,0.4); }
.jagd-liste { list-style: none; padding: 0; }
.jagd-liste li { padding: 0.6rem 0; border-bottom: 1px solid var(--hunt-border); }

/* Card-Grid fuer "Meine Jagden" (index.php) - ersetzt die reine
   URL-Liste durch Karten mit Avatar, damit man auf einen Blick
   sieht, in welcher Jagd man ist, statt nur Namen lesen zu
   muessen. .jagd-liste bleibt unveraendert fuer andere Stellen
   (z.B. offene Beitrittsanfragen in jagd-einstellungen.php). */
.jagd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; margin-top: 1rem; list-style: none; padding: 0; }
.jagd-card { border: 1px solid var(--hunt-border-strong); border-radius: var(--radius-md); padding: 1rem; background: var(--hunt-surface); display: flex; flex-direction: column; gap: 0.6rem; position: relative; }
.jagd-card:has(.jagd-card-name a):hover { border-color: var(--hunt-gold); }
.jagd-card-kopf { display: flex; align-items: center; gap: 0.75rem; }
.jagd-avatar, .jagd-avatar-fallback { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; }
.jagd-avatar { object-fit: cover; border: 1px solid var(--hunt-border); }
.jagd-avatar-fallback { background: var(--hunt-surface-raised); color: var(--hunt-text-muted); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; }
.jagd-card-name { font-weight: 700; font-size: 1.05rem; }
.jagd-card-name a { color: inherit; text-decoration: none; }
.jagd-card-name a:hover { text-decoration: underline; }
/* "Stretched link" - Rückmeldung: auf der Karte sollte nicht nur der
   Name klickbar sein, sondern die ganze Karteikarte. Der Link bleibt
   semantisch/visuell der Name, sein ::after deckt aber die gesamte
   Karte ab (position:relative auf .jagd-card + inset:0 hier). Echte
   Buttons/Formulare in der Karte (z.B. "Mehrbedarf melden") liegen
   mit position:relative + höherem z-index DARÜBER und bleiben so
   unabhängig anklickbar, ohne dass der Karten-Klick dazwischenfunkt. */
.jagd-card-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.jagd-card-body { font-size: 0.85rem; color: var(--hunt-text-muted); }
.jagd-card-body form { margin-top: 0.4rem; position: relative; z-index: 2; }
.badge { display: inline-block; font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); margin-left: 0.5rem; }
.badge.admin { background: var(--hunt-info-soft); color: var(--hunt-info-text); }
.badge.mitglied { background: var(--hunt-surface-raised); color: var(--hunt-text-muted); }
.badge.angefragt, .badge.offen { background: var(--hunt-gold-soft); color: var(--hunt-gold-strong); }
.badge.erledigt { background: var(--hunt-surface-raised); color: var(--hunt-text-muted); }

/* Topbar + mobiles Menü (reines CSS, kein JS nötig – "Checkbox-Hack"):
   .nav-toggle ist ein unsichtbares Kontrollkästchen, sein <label>
   wird zum Hamburger-Button, der bei Klick per :checked die
   .right-Gruppe ein-/ausklappt. Funktioniert auch ohne JS/bei
   langsamer Verbindung. */
.topbar {
    position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 0.5rem 0.75rem; border-bottom: 1px solid var(--hunt-border); padding-bottom: 1rem; margin-bottom: 1.5rem;
}
.topbar .right { display: flex; align-items: center; gap: 0.5rem 0.9rem; font-size: 0.9rem; flex-wrap: wrap; }
.topbar .right a { padding: 0.4rem 0.2rem; display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--hunt-text-muted); text-decoration: none; }
.topbar .right a strong { margin-left: 0.3em; color: var(--hunt-text); }
.topbar .right a:hover, .topbar .right a:focus-visible { color: var(--hunt-gold-strong); }
.topbar form { margin: 0; }
.topbar .right button { padding: 0.5rem 1rem; font-size: 0.85rem; }
.topbar a.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.01em; color: var(--hunt-gold-strong); text-decoration: none; }
.topbar a.brand svg { flex: 0 0 auto; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label { display: none; color: var(--hunt-text); }

@media (max-width: 640px) {
    body { margin: 1rem auto; }
    h1 { font-size: 1.3rem; }
    .nav-toggle-label {
        display: inline-flex; align-items: center; justify-content: center;
        width: var(--tap-min); height: var(--tap-min); font-size: 1.4rem; cursor: pointer;
        border-radius: var(--radius-sm); line-height: 1;
    }
    .nav-toggle-label:hover { background: var(--hunt-surface-raised); }
    .topbar .right {
        display: none; flex-direction: column; align-items: stretch; width: 100%;
        order: 3; gap: 0.35rem; padding-top: 0.5rem; border-top: 1px solid var(--hunt-border);
    }
    .topbar .right a { padding: 0.6rem 0.2rem; }
    .nav-toggle:checked ~ .right { display: flex; }
    .topbar .right form { width: 100%; }
    .topbar .right button { width: 100%; }
}

details.meldung { margin-top: 3rem; }
details.meldung summary { cursor: pointer; color: var(--hunt-text-muted); font-size: 0.9rem; padding: 0.5rem 0; min-height: var(--tap-min); display: flex; align-items: center; }
details.meldung .meldung-form { margin-top: 0.75rem; max-width: 420px; }

footer.hunt-footer {
    margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hunt-border);
    font-size: 0.8rem; color: var(--hunt-text-muted);
}
footer.hunt-footer a { color: var(--hunt-text-muted); display: inline-block; padding: 0.4rem 0.2rem; }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--hunt-border); margin-bottom: 1.5rem; flex-wrap: wrap; }
.tabs a {
    padding: 0.65rem 0.9rem; text-decoration: none; color: var(--hunt-text-muted); font-size: 0.9rem;
    border-bottom: 2px solid transparent; min-height: var(--tap-min); display: inline-flex; align-items: center;
}
.tabs a.aktiv { color: var(--hunt-gold-strong); border-bottom-color: var(--hunt-gold); font-weight: 600; }
.matrix { border-collapse: collapse; margin-top: 1rem; }
.matrix th, .matrix td { border: 1px solid var(--hunt-border); padding: 0.5rem 0.6rem; text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--hunt-gold); }

/* Rollen-Karteikarten (jagd-einstellungen.php, Tab "Rollen verwalten")
   – Rückmeldung: die Rollen standen "einfach untereinander", auf
   Wunsch stattdessen Excel-artige Reiter je Rolle, auf Mobile ein
   kompaktes Kebab-Menü statt einer Reiterleiste, die umbrechen
   würde. Reiter/Menüpunkte und Panels sind rein clientseitig
   (kein Page-Reload) über data-rolle-tab/data-rolle-panel
   verknüpft, siehe Skript am Ende des Rollen-Tabs. */
.rollen-kartei-nav { display: flex; align-items: flex-end; gap: 0.2rem; border-bottom: 1px solid var(--hunt-border); margin-bottom: 0; }
.rollen-tabs-desktop { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.rollen-tab-btn {
    font: inherit; cursor: pointer; background: var(--hunt-surface-raised); color: var(--hunt-text-muted);
    border: 1px solid var(--hunt-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 0.55rem 0.9rem; font-size: 0.88rem; min-height: var(--tap-min); display: inline-flex; align-items: center; gap: 0.4rem;
    margin-bottom: -1px;
}
.rollen-tab-btn.aktiv { background: var(--hunt-surface); color: var(--hunt-gold-strong); font-weight: 600; border-color: var(--hunt-border); position: relative; z-index: 1; }
.rollen-tab-btn.rollen-tab-neu { color: var(--hunt-gold-strong); border-style: dashed; }
.rollen-panel {
    border: 1px solid var(--hunt-border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--hunt-surface); padding: 1rem 1.1rem 1.2rem;
}
.rollen-kebab { position: relative; display: none; margin-left: auto; margin-bottom: 0.4rem; }
.rollen-kebab-btn {
    font: inherit; cursor: pointer; background: var(--hunt-surface-raised); color: var(--hunt-text);
    border: 1px solid var(--hunt-border); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem;
    min-height: var(--tap-min); display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem;
}
.rollen-kebab-menu {
    position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 5; min-width: 200px;
    background: var(--hunt-surface); border: 1px solid var(--hunt-border-strong); border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18); overflow: hidden;
}
.rollen-kebab-menu button {
    display: flex; width: 100%; align-items: center; gap: 0.4rem; text-align: left; font: inherit;
    background: none; border: none; padding: 0.7rem 0.9rem; min-height: var(--tap-min); cursor: pointer; color: var(--hunt-text);
}
.rollen-kebab-menu button.aktiv { color: var(--hunt-gold-strong); font-weight: 600; background: var(--hunt-surface-raised); }
.rollen-kebab-menu button + button { border-top: 1px solid var(--hunt-border); }
@media (max-width: 640px) {
    .rollen-tabs-desktop { display: none; }
    .rollen-kebab { display: block; }
    .rollen-kartei-nav { border-bottom: none; margin-bottom: 0.6rem; }
    .rollen-panel { border-top: 1px solid var(--hunt-border); border-radius: var(--radius-md); }
}

/* Gemeinsame Karten-Bausteine (Gebiet-Tab heute, Modul 1 Live-Karte
   künftig) – zentral hier, damit beide Stellen gleich aussehen. */
.hunt-locate-btn {
    width: 44px; height: 44px; background: var(--hunt-surface); border: 2px solid var(--hunt-border-strong);
    color: var(--hunt-text); border-radius: var(--radius-sm); font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.hunt-locate-btn.laedt { opacity: 0.5; }
.hunt-karte-touch-hinweis { border-radius: var(--radius-sm); }
/* Gemeinsame "Vollbild-Overlay"-Grundlage - Karten-Vollbild UND
   Foto-Lightbox sperren beide den Hintergrund-Scroll auf dieselbe
   Art, damit man beim Schließen nicht plötzlich verschoben landet. */
body.hunt-vollbild-aktiv { overflow: hidden; }
/* Karten-Vollbild (HuntMap.addFullscreenControl) - am Laptop sind
   die Karten im normalen Seitenfluss oft lang und schmal (schmale
   Spalte, aber viel Höhe) und dadurch unübersichtlich. Statt die
   Seite umzubauen: auf Wunsch bildschirmfüllend darstellen, mit
   Escape/eigenem Schließen-Button wieder zurück. */
.hunt-karte-vollbild {
    /* Bewusst KEIN festes width:100vw/height:100vh - mobile Browser
       (Safari) rechnen 100vh inkl. der Fläche hinter der ein-/aus-
       blendbaren Adressleiste, wodurch am unteren Rand positionierte
       Elemente (z.B. der "Werkzeuge"-Knopf) aus dem tatsächlich
       sichtbaren Bereich rutschen. Mit allen vier Insets auf 0 und
       ohne eigene Breite/Höhe füllt die Box automatisch immer den
       gerade sichtbaren Viewport, auch wenn sich die Adressleiste
       ein-/ausblendet. */
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important; z-index: 3500; border-radius: 0 !important; margin: 0 !important;
}
/* Foto-Lightbox - siehe globales Script oben im <body>. */
.hunt-lightbox {
    display: none; position: fixed; inset: 0; background: rgba(10, 15, 9, 0.92);
    align-items: center; justify-content: center; padding: 2.5rem 1rem; z-index: 4000;
}
.hunt-lightbox.sichtbar { display: flex; }
.hunt-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.hunt-lightbox-close {
    position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; min-height: 0; padding: 0;
    background: var(--hunt-surface); border: 2px solid var(--hunt-border-strong); color: var(--hunt-text);
    border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.hunt-lightbox-close:hover { border-color: var(--hunt-gold); color: var(--hunt-gold-strong); background: var(--hunt-surface); }
/* Umschalter OSM-Karte/Satellit (HuntMap.addBaseLayers) - bewusst als
   eigener Text-Button statt Leaflets Standard-Ebenen-Control (graue
   Box, passt nicht zur Nachtwald-Optik). Gleiche Bauhöhe wie
   .hunt-locate-btn, aber Pill-Form mit Text statt Icon-Quadrat, da
   "Satellit"/"Karte" klarer ist als ein Symbol. */
button.hunt-layer-toggle-btn {
    min-height: 36px; padding: 0.4rem 0.85rem; background: var(--hunt-surface);
    border: 2px solid var(--hunt-border-strong); color: var(--hunt-text);
    border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
button.hunt-layer-toggle-btn:hover {
    background: var(--hunt-surface-raised); border-color: var(--hunt-gold); color: var(--hunt-gold-strong);
}
/* Kurzer, nicht-blockierender Hinweis beim Scrollen über einer Karte
   ohne Strg/Cmd (siehe globales Wheel-Script oben im <body>) - fadet
   von selbst wieder aus, erfordert keinen Klick wie der
   Touch-Hinweis, da die Seite ja normal weiterscrollt. */
.hunt-karte-zoom-hinweis {
    position: absolute; top: 0.6rem; left: 50%; transform: translate(-50%, -6px);
    background: rgba(22,31,21,0.88); color: var(--hunt-text); border: 1px solid var(--hunt-border-strong);
    border-radius: var(--radius-pill); padding: 0.35rem 0.85rem; font-size: 0.78rem; font-weight: 600;
    pointer-events: none; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 1000;
}
.hunt-karte-zoom-hinweis.sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* POI-Karten mit Notizen-Verlauf – genutzt vom Gebiet-Tab
   (jagd-einstellungen.php, Vollzugriff) UND von orte.php
   (Mitglieder-Ansicht, nur Notizen). Zentral hier, damit beide
   Seiten identisch aussehen. */
.poi-liste { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.poi-card { border: 1px solid var(--hunt-border-strong); border-radius: var(--radius-md); padding: 0.9rem 1rem; background: var(--hunt-surface); }
.poi-card-kopf { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.poi-card-kopf form { margin: 0; }
.poi-card-kopf button { padding: 0.4rem 0.8rem; font-size: 0.8rem; min-height: 36px; }
.poi-notiz-kurz { margin: 0.5rem 0 0; color: var(--hunt-text-muted); font-size: 0.9rem; }
.poi-verlauf { margin-top: 0.6rem; }
.poi-verlauf summary { cursor: pointer; color: var(--hunt-gold-strong); font-weight: 600; font-size: 0.9rem; padding: 0.4rem 0; min-height: 40px; display: flex; align-items: center; }
.poi-notiz-liste { list-style: none; padding: 0; margin: 0.25rem 0 0.75rem; }
.poi-notiz-liste li { padding: 0.5rem 0; border-bottom: 1px solid var(--hunt-border); }
.poi-notiz-text { font-size: 0.92rem; white-space: pre-wrap; }
.poi-notiz-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.75rem; color: var(--hunt-text-muted); }
.poi-notiz-leer { font-size: 0.85rem; color: var(--hunt-text-muted); margin: 0.25rem 0 0.75rem; }
.poi-notiz-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.poi-notiz-form label { flex: 1 1 220px; margin-top: 0; }
.poi-notiz-form button { flex: 0 0 auto; }
.poi-verlauf-leeren { font-size: 0.8rem; padding: 0.45rem 0.9rem; min-height: 36px; margin-bottom: 0.75rem; }
.link-btn {
    background: none; color: var(--hunt-text-muted); padding: 0; border: none; font-size: 1.1rem; line-height: 1;
    min-height: 36px; min-width: 36px; border-radius: var(--radius-sm);
}
.link-btn:hover { color: var(--hunt-alert-text); background: var(--hunt-alert-soft); }
.badge.neu { background: var(--hunt-alert); color: var(--hunt-focus); font-weight: 700; }

/* Jagdtagebuch (Modul) - Foto-Thumbnails mit kleinem Loesch-Button,
   sowie die Checkbox-Liste im "Teilen"-Formular. Kartenkarten und
   Listen-Layout selbst nutzen bewusst die vorhandenen .poi-liste/
   .poi-card-Klassen (gleiches Card-Pattern), damit kein zweites
   Karten-CSS gepflegt werden muss. */
.tagebuch-fotos { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.tagebuch-foto-wrapper { position: relative; display: inline-block; }
.tagebuch-foto-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--hunt-border); display: block; }
.tagebuch-foto-wrapper form { position: absolute; top: -6px; right: -6px; margin: 0; }
.tagebuch-foto-wrapper .link-btn { background: var(--hunt-surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-soft); min-height: 28px; min-width: 28px; font-size: 0.9rem; }
.tagebuch-mitglieder-liste { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0 0.75rem; max-height: 220px; overflow-y: auto; }
.tagebuch-mitglieder-liste label { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.9rem; color: var(--hunt-text); }
.tagebuch-mitglieder-liste input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--hunt-gold); }

/* Teilen: Such-/Autovervollständigungsfeld statt langer Checkbox-Liste
   (relevant, sobald eine Jagd viele Mitglieder hat). Die Checkbox-
   Liste bleibt im DOM als eigentliche Datenquelle, wird per JS aber
   versteckt (siehe tagebuch/index.php). */
.tagebuch-mitglieder-sucher { position: relative; margin-top: 0.4rem; }
.tagebuch-mitglieder-suche { width: 100%; min-height: 44px; padding: 0.5rem 0.75rem; border: 1px solid var(--hunt-border); border-radius: var(--radius-md); font-size: 1rem; box-sizing: border-box; }
.tagebuch-mitglieder-vorschlaege { position: absolute; z-index: 20; left: 0; right: 0; background: var(--hunt-surface-raised); border: 1px solid var(--hunt-border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); max-height: 280px; overflow-y: auto; box-shadow: var(--shadow-float); }
/* Wichtig: color explizit setzen – ein globales button{color}
   würde sonst hier "geerbt" und den Text unsichtbar machen.
   Deutliche Trennlinien + Hover/Fokus/Tastatur-Hervorhebung
   sorgen für gut sichtbare, prominente Vorschläge (vgl. TV-Suchen). */
.tagebuch-vorschlag { display: block; width: 100%; text-align: left; background: transparent; color: var(--hunt-text); border: none; border-bottom: 1px solid var(--hunt-border); padding: 0.75rem 0.9rem; min-height: 44px; font-size: 1rem; cursor: pointer; }
.tagebuch-vorschlag:last-child { border-bottom: none; }
.tagebuch-vorschlag:hover, .tagebuch-vorschlag:focus, .tagebuch-vorschlag.hervorgehoben { background: var(--hunt-gold-soft); color: var(--hunt-gold-strong); outline: none; }
.tagebuch-mitglieder-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.tagebuch-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--hunt-gold-soft); color: var(--hunt-gold-strong); border-radius: var(--radius-pill); padding: 0.3rem 0.4rem 0.3rem 0.75rem; font-size: 0.85rem; }
.tagebuch-chip-entfernen { background: none; border: none; color: var(--hunt-gold-strong); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.35rem; min-width: 28px; min-height: 28px; }
.tagebuch-vorschlag-hinweis { margin: 0; padding: 0.65rem 0.75rem; font-size: 0.85rem; color: var(--hunt-text-muted); }

/* Jagdtagebuch: Feed-Ansicht (wie in sozialen Netzwerken) – Standardansicht
   beider Tabs. Ein Eintrag antippen öffnet die Detailansicht
   (.tagebuch-detail); neue Einträge entstehen über den schwebenden
   (+)-Button (.tagebuch-fab). */
.tagebuch-leer { color: var(--hunt-text-muted); }
.tagebuch-feed { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.tagebuch-post {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.75rem;
    border: 1px solid var(--hunt-border-strong); border-radius: var(--radius-md); text-decoration: none; color: inherit;
    background: var(--hunt-surface); transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    animation: tagebuch-post-einblenden 0.25s ease both;
}
.tagebuch-post:hover, .tagebuch-post:focus-visible { border-color: var(--hunt-gold); background: var(--hunt-surface-raised); }
.tagebuch-post:active { transform: scale(0.98); }
@keyframes tagebuch-post-einblenden { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.tagebuch-post-avatar { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--hunt-surface-raised); display: flex; align-items: center; justify-content: center; }
.tagebuch-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tagebuch-post-avatar-platzhalter { font-size: 1.6rem; }
.tagebuch-post-info { flex: 1 1 auto; min-width: 0; font-size: 0.95rem; }
.tagebuch-post-info small { color: var(--hunt-text-muted); }
.tagebuch-post-pfeil { flex: 0 0 auto; color: var(--hunt-text-muted); font-size: 1.4rem; }

/* .hunt-fab: gemeinsame Basis für die schwebenden (+)-Buttons von
   Tagebuch und Schwarzem Brett (identisch bis auf Tag/Reset). */
.tagebuch-fab, .brett-fab {
    position: fixed; right: 1.25rem; bottom: max(1.25rem, env(safe-area-inset-bottom));
    width: 58px; height: 58px; border-radius: 50%; background: var(--hunt-gold); color: var(--hunt-on-gold);
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem; line-height: 1;
    text-decoration: none; box-shadow: var(--shadow-float); transition: transform 0.12s ease, background 0.15s ease;
    z-index: 20;
}
.tagebuch-fab:hover, .brett-fab:hover { background: var(--hunt-gold-strong); }
.tagebuch-fab:active, .brett-fab:active { transform: scale(0.92); }

/* Detailansicht (Klick auf einen Feed-Eintrag) */
.tagebuch-detail-fotos { display: flex; gap: 0.5rem; }
.tagebuch-detail-fotos > a { min-width: 0; flex: 1 1 0; }
.tagebuch-detail-foto { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius-md); flex: 1 1 0; }
.tagebuch-detail-platzhalter { font-size: 3rem; text-align: center; padding: 2rem 0; background: var(--hunt-surface); border-radius: var(--radius-md); color: var(--hunt-text-muted); }

/* Anblick/Abschuss-Auswahl im Anlege-/Bearbeiten-Formular */
.tagebuch-ereignis-auswahl { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.tagebuch-ereignis-option {
    flex: 1 1 0; display: flex !important; align-items: center; justify-content: center; gap: 0.4rem;
    margin: 0 !important; padding: 0.6rem 0.5rem; min-height: 44px; border: 1px solid var(--hunt-border); border-radius: var(--radius-md);
    font-size: 0.95rem; cursor: pointer; text-align: center; transition: border-color 0.12s ease, background 0.12s ease; color: var(--hunt-text);
    background: var(--hunt-surface);
}
.tagebuch-ereignis-option input { width: auto !important; margin: 0; }
.tagebuch-ereignis-option.ausgewaehlt,
.tagebuch-ereignis-option:has(input:checked) { border-color: var(--hunt-gold); background: var(--hunt-gold-soft); color: var(--hunt-gold-strong); font-weight: 600; }

.badge.abschuss { background: var(--hunt-badge-abschuss-bg); color: var(--hunt-badge-abschuss-text); }
.badge.anblick { background: var(--hunt-badge-anblick-bg); color: var(--hunt-info-text); }

/* Feed-Filterleiste (Suche/Ereignis/Monat/Sortierung) */
/* Filter/Sortierung: nur ein Symbol sichtbar (sauberes, aufgeräumtes
   Design), das Formular öffnet sich als schwebendes Panel darunter.
   Natives <details>/<summary> => barrierefrei per Tastatur/Screen-
   reader bedienbar, ganz ohne zusätzliches JS. */
.tagebuch-feed-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
/* .hunt-filter-*: gemeinsame Basis fuer die Filter-Panels von Tagebuch
   und Hochsitzliste (identisch bis auf die Tagebuch-Einblend-Animation) -
   zusammengefuehrt beim CSS-Umzug in diese Datei (2026-09-15). */
.tagebuch-filter-details, .hochsitz-filter-details { position: relative; }
.tagebuch-filter-details summary, .hochsitz-filter-details summary { list-style: none; }
.tagebuch-filter-details summary::-webkit-details-marker, .hochsitz-filter-details summary::-webkit-details-marker { display: none; }
.tagebuch-filter-toggle, .hochsitz-filter-toggle {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 44px; height: 44px; border: 1px solid var(--hunt-border); border-radius: var(--radius-md);
    background: var(--hunt-surface); color: var(--hunt-text-muted); cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.tagebuch-filter-toggle:hover, .hochsitz-filter-toggle:hover { border-color: var(--hunt-border-strong); color: var(--hunt-text); }
.tagebuch-filter-toggle.aktiv, .hochsitz-filter-toggle.aktiv { border-color: var(--hunt-gold); color: var(--hunt-gold-strong); background: var(--hunt-gold-soft); }
.tagebuch-filter-toggle.aktiv::after, .hochsitz-filter-toggle.aktiv::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--hunt-alert); border: 2px solid var(--hunt-bg);
}
.tagebuch-filter, .hochsitz-filter {
    display: flex; flex-direction: column; gap: 0.6rem;
    position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 15;
    width: min(340px, calc(100vw - 2rem)); margin: 0;
    padding: 0.9rem; background: var(--hunt-surface-raised); border: 1px solid var(--hunt-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
}
.tagebuch-filter { animation: tagebuch-post-einblenden 0.15s ease both; }
.tagebuch-filter input[type=search], .hochsitz-filter input[type=search] { margin-top: 0; }
.tagebuch-filter-auswahl, .hochsitz-filter-auswahl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tagebuch-filter-auswahl select, .hochsitz-filter-auswahl select { flex: 1 1 140px; min-height: 44px; padding: 0.4rem 0.5rem; border: 1px solid var(--hunt-border); border-radius: var(--radius-sm); font: inherit; }
.tagebuch-filter-aktionen, .hochsitz-filter-aktionen { display: flex; align-items: center; gap: 0.75rem; }
.tagebuch-filter-aktionen button, .hochsitz-filter-aktionen button { padding: 0.5rem 1rem; }
@media (max-width: 480px) {
    .tagebuch-filter, .hochsitz-filter { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* Hochsitz-Verwaltung (Modul 2): Kachel-Liste unter der Karte,
   schwebender (+)-Button (analog .tagebuch-fab) zum Setzen eines
   neuen Hochsitzes, Marker-Punkte auf der Karte farblich nach
   Reparatur-Status. Kommentar-Verlauf/Fotos nutzen bewusst die
   bestehenden .poi-verlauf/.tagebuch-foto-*-Klassen weiter (siehe
   claude/hochsitzverwaltung-fortschritt.md) statt sie zu duplizieren. */
.badge.reparatur { background: var(--hunt-alert-soft); color: var(--hunt-alert-text); font-weight: 700; }
/* "Besetzt von ..." – bewusst auffälliger als Reparatur (Gold statt
   gedämpft), weil dieser Status laut Wunsch ausdrücklich auf oberster
   Ebene sichtbar sein soll (Liste UND Kopf der Detailansicht), nicht
   nur dezent wie die Reparatur-Meldung. */
.badge.besetzt { background: var(--hunt-gold-soft); color: var(--hunt-gold-strong); font-weight: 700; }

.hochsitz-marker-icon {
    width: 28px; height: 28px; border-radius: 50%; background: var(--hunt-gold); color: var(--hunt-on-gold);
    border: 2px solid var(--hunt-bg); box-shadow: var(--shadow-soft);
    display: flex; align-items: center; justify-content: center;
}
.hochsitz-marker-icon.reparatur { background: var(--hunt-alert); color: var(--hunt-focus); }

.hochsitz-fab {
    position: absolute; left: 0.75rem; bottom: 0.75rem;
    width: 52px; height: 52px; border-radius: 50%; background: var(--hunt-gold); color: var(--hunt-on-gold);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1;
    border: none; cursor: pointer; box-shadow: var(--shadow-float); transition: transform 0.12s ease, background 0.15s ease;
    z-index: 1010;
}
.hochsitz-fab:hover { background: var(--hunt-gold-strong); }
.hochsitz-fab:active { transform: scale(0.92); }
.hochsitz-fab.aktiv { background: var(--hunt-alert); color: var(--hunt-focus); }
/* Deutlicher Hinweis, sobald der (+)-Button aktiv ist: bisher änderte
   sich nur die Fab-Farbe (rot statt gold), das wurde leicht übersehen
   - man wusste nicht, dass jetzt ein Klick/Tap auf die Karte nötig
   ist, um den Hochsitz zu platzieren. Banner bleibt sichtbar, bis
   getippt oder abgebrochen wird (kein Auto-Fade), pointer-events:none
   damit der Klick trotzdem direkt bei der Karte ankommt. */
#hochsitz-uebersicht-karte.setzen-modus { cursor: crosshair; }
.hochsitz-setzen-hinweis {
    position: absolute; top: 0.6rem; left: 50%; transform: translate(-50%, -8px);
    background: var(--hunt-gold); color: var(--hunt-on-gold); border-radius: var(--radius-pill);
    padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 700; text-align: center;
    box-shadow: var(--shadow-float); pointer-events: none; opacity: 0; z-index: 1005;
    transition: opacity 0.15s ease, transform 0.15s ease; max-width: calc(100% - 1.5rem);
}
.hochsitz-setzen-hinweis.sichtbar { opacity: 1; transform: translate(-50%, 0); }

.hochsitz-liste-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

/* Kompakte einspaltige Zeilenliste statt Kachel-Grid (analog
   .tagebuch-post/.tagebuch-feed) - bei perspektivisch ~40 Hochsitzen
   muss die Liste dicht und schnell scannbar bleiben. Reparatur-
   Schnellaktion bewusst NICHT auf jeder Zeile (nur Karte/Detail),
   sonst wird die Liste bei vielen Einträgen unruhig; Status bleibt
   trotzdem über das kleine Badge sichtbar. */
.hochsitz-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
/* .hochsitz-reihe ist jetzt ein <div> (nicht mehr ein einzelnes <a>),
   weil seit dem "besetzt"-Schnellschalter ein eigenständiges <form>
   mit <button> als Geschwister neben dem Navigations-Link steht -
   ein <form>/<button> innerhalb eines <a> wäre ungültiges HTML. */
.hochsitz-reihe {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem 0.4rem 0.7rem;
    border: 1px solid var(--hunt-border); border-radius: var(--radius-md);
    background: var(--hunt-surface); transition: border-color 0.12s ease, background 0.12s ease;
}
.hochsitz-reihe:has(.hochsitz-reihe-link:hover) { border-color: var(--hunt-gold); background: var(--hunt-surface-raised); }
.hochsitz-reihe-link {
    display: flex; align-items: center; gap: 0.75rem; flex: 1 1 auto; min-width: 0;
    text-decoration: none; color: inherit;
}
.hochsitz-reihe-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--hunt-surface-raised); color: var(--hunt-text-muted); display: flex; align-items: center; justify-content: center; }
.hochsitz-reihe-icon img { width: 100%; height: 100%; object-fit: cover; }
.hochsitz-reihe-icon svg { width: 17px; height: 17px; }
.hochsitz-reihe-info { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.hochsitz-reihe-info small { color: var(--hunt-text-muted); }
/* Ein-Klick "besetzt"-Schalter direkt in der Liste – bewusst als
   eigenständiger, gut greifbarer Icon-Button (Wunsch: "zum an und
   abklicken" direkt auf dieser Ebene), nicht als Text-Link wie bei
   Reparatur, da er öfter benutzt wird als die Reparatur-Meldung. */
.hochsitz-reihe-toggle { flex: 0 0 auto; }
.hochsitz-reihe-toggle button {
    min-height: 30px; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill);
    border: 1px solid var(--hunt-border); background: var(--hunt-surface-raised); color: var(--hunt-text-muted);
    font-size: 0.75rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: all 0.12s ease;
}
.hochsitz-reihe-toggle button:hover { border-color: var(--hunt-gold); color: var(--hunt-gold-strong); }
.hochsitz-reihe-toggle button.aktiv { background: var(--hunt-gold-soft); border-color: var(--hunt-gold); color: var(--hunt-gold-strong); }

.hochsitz-toggle-link { padding-left: 0; }

/* Treiberkoordination (Modul 1) – einfache Terminliste, analog
   .hochsitz-liste/.hochsitz-reihe aber ohne Icon-Spalte (Phase 1
   hat noch keine Fotos/Karten-Vorschau je Termin). */
.treiber-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.treiber-reihe {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem;
    border: 1px solid var(--hunt-border); border-radius: var(--radius-md);
    background: var(--hunt-surface); text-decoration: none; color: inherit;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.treiber-reihe:hover { border-color: var(--hunt-gold); background: var(--hunt-surface-raised); }
.treiber-reihe.vergangen { opacity: 0.65; }
.treiber-reihe-info { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.treiber-reihe-info small { color: var(--hunt-text-muted); }

.treiber-detail-hero { margin-top: 0.75rem; }

/* Detailansicht-"Hero": macht auf den ersten Blick klar "das hier
   ist EIN einzelner Hochsitz", statt nahtlos in den Listenfluss
   überzugehen (Rückmeldung: man erkennt nicht, dass man in einer
   Detailansicht ist / was man jetzt tun soll). Eyebrow-Label +
   abgesetzte Karte + Hinweiszeile ("nichts weiter tun nötig")
   orientieren direkt nach dem Anlegen genauso wie bei jedem
   späteren Aufruf der Seite. */
.hochsitz-detail-hero { margin-top: 0.75rem; }
.tagebuch-detail-hero { margin-top: 1rem; }
.hochsitz-detail-eyebrow {
    margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--hunt-gold-strong);
}
.hochsitz-detail-hinweis { color: var(--hunt-text-muted); font-size: 0.85rem; margin: 0.6rem 0 0.75rem; }

/* Leaflet-Popups im Nachtwald-Look statt Standard-Weiß (wirkt sonst
   wie ein Fremdkörper) - gilt bewusst global für alle Karten der App,
   nicht nur Hochsitze, für ein einheitliches Bild. */
.leaflet-popup-content-wrapper { background: var(--hunt-surface-raised); color: var(--hunt-text); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.leaflet-popup-tip { background: var(--hunt-surface-raised); }
.leaflet-popup-content { margin: 0.7rem 0.9rem; font: inherit; }
.leaflet-popup-close-button { color: var(--hunt-text-muted) !important; }
.hochsitz-popup { font-size: 0.85rem; line-height: 1.4; }
.hochsitz-popup strong { font-size: 0.95rem; }
.hochsitz-popup-link { color: var(--hunt-gold-strong); text-decoration: underline; font-size: 0.85rem; }

/* Primäre In-App-Navigation (Modul-Kacheln, Breadcrumbs, "zur Karte"-
   Verweise) bekommt mehr visuelles Gewicht als ein reiner Text-Link -
   begründet durch Nielsen-Norman-Group-Forschung zu Link- vs. Button-
   Affordanz: gleich aussehende Text-Links lassen Hierarchie zwischen
   Haupt- und Nebenwegen verschwinden. Sekundäre/rechtliche Links
   (Passwort vergessen, Impressum, Datenschutz, Inline-Hinweise)
   bleiben bewusst normale <a> - kein Chip-Overkill. */
.nav-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem; min-height: var(--tap-min); box-sizing: border-box;
    background: var(--hunt-surface); border: 1px solid var(--hunt-border);
    border-radius: var(--radius-md); color: var(--hunt-text); text-decoration: none;
    font-size: 0.9rem; transition: border-color 0.12s ease, background 0.12s ease;
}
.nav-chip:hover, .nav-chip:focus-visible { border-color: var(--hunt-gold); background: var(--hunt-surface-raised); }
.nav-chip.breadcrumb { color: var(--hunt-text-muted); font-size: 0.85rem; padding: 0.45rem 0.9rem; background: transparent; border-color: transparent; }
.nav-chip.breadcrumb:hover, .nav-chip.breadcrumb:focus-visible { border-color: var(--hunt-border); background: var(--hunt-surface); color: var(--hunt-text); }

.modul-liste { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.modul-kachel {
    flex: 1 1 180px; padding: 1.1rem; border: 1px solid var(--hunt-border-strong); border-radius: var(--radius-md);
    text-decoration: none; color: var(--hunt-text); position: relative; background: var(--hunt-surface);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.modul-kachel:hover, .modul-kachel:focus-visible { border-color: var(--hunt-gold); background: var(--hunt-surface-raised); }
.modul-kachel strong { font-size: 1rem; }
.modul-kachel small { color: var(--hunt-text-muted); display: block; margin-top: 0.2rem; }
.modul-kachel.geplant { border-style: dashed; color: var(--hunt-text-muted); }
.modul-kachel.geplant:hover { border-color: var(--hunt-border); background: var(--hunt-surface); }

/* Schwarzes Brett (Modul): Themen als Karten (analog .jagd-card/
   .poi-card), schwebender (+)-Button fuer ein neues Thema (analog
   .tagebuch-fab), Antworten als chronologischer Feed/Chat-Verlauf
   in der Detailansicht (analog Tagebuch-Feed). Siehe
   claude/schwarzes-brett-buildprompt.md (Projekt-Doc). */
.brett-liste { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.brett-leer { color: var(--hunt-text-muted); }
.brett-card {
    display: block; padding: 0.75rem 0.9rem; border: 1px solid var(--hunt-border-strong); border-radius: var(--radius-md);
    background: var(--hunt-surface); text-decoration: none; color: inherit;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.brett-card:hover, .brett-card:focus-visible { border-color: var(--hunt-gold); background: var(--hunt-surface-raised); }
.brett-card-titel { font-weight: 600; }
.brett-card-meta { color: var(--hunt-text-muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* .brett-fab ist ein <button> statt eines <a> wie .tagebuch-fab -
   gemeinsame Optik kommt aus der .tagebuch-fab, .brett-fab-Regel
   weiter oben, hier nur der Button-Reset. */
.brett-fab { border: none; cursor: pointer; }

.brett-feed { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.brett-beitrag { padding: 0.65rem 0.85rem; border: 1px solid var(--hunt-border-strong); border-radius: var(--radius-md); background: var(--hunt-surface); }
.brett-beitrag.eroeffnung { border-color: var(--hunt-gold); background: var(--hunt-gold-soft); }
.brett-beitrag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; color: var(--hunt-text-muted); flex-wrap: wrap; }
.brett-beitrag-text { margin: 0.4rem 0 0; white-space: pre-wrap; word-break: break-word; }
.brett-beitrag-text a { color: var(--hunt-gold-strong); }
.brett-beitrag-foto { max-width: 100%; max-height: 320px; border-radius: var(--radius-md); margin-top: 0.5rem; display: block; }
.brett-beitrag-aktionen { margin-top: 0.4rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: nowrap; }
.brett-beitrag-aktionen form { margin: 0; }
.brett-beitrag-aktionen button, .brett-beitrag-aktionen a { background: none; border: none; color: var(--hunt-text-muted); font-size: 0.8rem; padding: 0.2rem 0; cursor: pointer; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }