/* =========================
   DIE SCHRIFT DER ANWENDUNG

   Liegt im Projekt und wird mit ausgeliefert.
   Vorher stand überall "Arial, sans-serif" — das
   hat auf drei Geräten drei Schriften ergeben:
   Arial auf Windows, Helvetica auf dem iPhone,
   Roboto auf Android, weil Android kein Arial
   kennt und den Namen stillschweigend ersetzt.
   Zeilen brachen dadurch an verschiedenen
   Stellen, und Tabellenspalten passten mal und
   mal nicht.

   Noto Sans, zwei Schnitte, je rund 13 KB. Der
   Zeichensatz ist auf Westeuropa beschnitten —
   Umlaute und ß sind darin, Griechisch und
   Kyrillisch nicht.

   font-display: swap heisst: Erst wird mit der
   Systemschrift gezeichnet, und sobald die Datei
   da ist, wird umgeschaltet. Nie ein leerer
   Bildschirm, nur weil eine Schrift lädt.

   Kein Google-Fonts-Link: Der lüde bei jedem
   Start von fremden Servern, ginge ohne Netz
   nicht und teilte nebenbei mit, wer die App
   wann benutzt.

   Zum Wechseln der Schrift: zwei Dateien in
   schrift/ austauschen und die beiden Namen
   hier ändern. Die Anwendung selbst kennt nur
   noch var(--schrift).
========================= */

@font-face {

    font-family: "Reviermanager";

    src: url("../schrift/notosans-400.woff2") format("woff2");

    font-weight: 400;
    font-style: normal;
    font-display: swap;

}


@font-face {

    font-family: "Reviermanager";

    src: url("../schrift/notosans-700.woff2") format("woff2");

    font-weight: 700;
    font-style: normal;
    font-display: swap;

}


:root {

    /*
        Die Ersatznamen dahinter greifen nur,
        solange die Datei noch lädt oder wenn sie
        fehlt.
    */
    --schrift: "Reviermanager", Arial, Helvetica, sans-serif;

}


/* =========================
   LEAFLET OVERRIDES
========================= */

/*
    Leaflet bringt für Karte, Massstab und
    Quellenangabe eine eigene Schriftangabe mit.
    Ohne diese Zeile stünde dort weiter
    Helvetica/Arial, während der Rest der
    Anwendung die beigelegte Schrift benutzt.
*/
.leaflet-container {

    font-family: var(--schrift);

}


.leaflet-control-attribution a:first-child {
    display: none;
}

/* =========================
   LEAFLET INTERACTIVE CLEANUP
========================= */

.leaflet-pane svg,
.leaflet-pane svg * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.leaflet-interactive {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* =========================
   BASIS LAYOUT
========================= */

html,
body {
    margin: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;

    /*
        Die Grundeinstellung für alles, was keine
        eigene Angabe hat — Eingabefelder und
        Knöpfe erben sie allerdings nicht von
        selbst, die stehen weiter unten.
    */
    font-family: var(--schrift);
}


/*
    Formularelemente nehmen die Schrift des
    Systems, nicht die der Seite. Ohne diese Zeile
    stünden Eingabefelder, Auswahlen und Knöpfe
    weiter in der Schrift des Geräts.
*/
input,
select,
textarea,
button {

    font-family: inherit;

}

#map {
    width: 100%;
    height: 100dvh;
    position: relative;
}

/* =========================
   CURSOR SETZ-MODUS
   (Reviereinrichtung + Wildart)
========================= */

#map.add-marker-mode {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cline x1='16' y1='0' x2='16' y2='32' stroke='%23F28C28' stroke-width='2'/%3E%3Cline x1='0' y1='16' x2='32' y2='16' stroke='%23F28C28' stroke-width='2'/%3E%3C/svg%3E") 16 16,
        crosshair;
}

/*
    Nur im Wildart-Setzmodus: das orangene
    Kreuz bleibt auch über vorhandenen Markern
    (im Reviereinrichtungsmodus wechselt der
    Cursor normal).
*/
#map.add-wildart-mode .leaflet-interactive,
#map.add-wildart-mode .leaflet-marker-icon {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cline x1='16' y1='0' x2='16' y2='32' stroke='%23F28C28' stroke-width='2'/%3E%3Cline x1='0' y1='16' x2='32' y2='16' stroke='%23F28C28' stroke-width='2'/%3E%3C/svg%3E") 16 16,
        crosshair !important;
}

/* =========================
   CURSOR BEARBEITUNGSMODUS
   (Wildmeldungen bearbeiten
    und verschieben)
========================= */

#map.bearbeiten-modus:not(.eingabe-offen) {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23F28C28' stroke-width='2'%3E%3Cline x1='32' y1='0' x2='32' y2='26.5'/%3E%3Cline x1='32' y1='37.5' x2='32' y2='64'/%3E%3Cline x1='0' y1='32' x2='26.5' y2='32'/%3E%3Cline x1='37.5' y1='32' x2='64' y2='32'/%3E%3Ccircle cx='32' cy='32' r='4.5'/%3E%3C/g%3E%3C/svg%3E") 32 32,
        pointer;
}

/*
    Auch über den Markern selbst — sonst
    wechselt der Zeiger dort auf den
    Standardpfeil zurück.
*/
#map.bearbeiten-modus:not(.eingabe-offen) .leaflet-interactive,
#map.bearbeiten-modus:not(.eingabe-offen) .leaflet-marker-icon {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23F28C28' stroke-width='2'%3E%3Cline x1='32' y1='0' x2='32' y2='26.5'/%3E%3Cline x1='32' y1='37.5' x2='32' y2='64'/%3E%3Cline x1='0' y1='32' x2='26.5' y2='32'/%3E%3Cline x1='37.5' y1='32' x2='64' y2='32'/%3E%3Ccircle cx='32' cy='32' r='4.5'/%3E%3C/g%3E%3C/svg%3E") 32 32,
        pointer !important;
}

/*
    Scharf begrenzter roter Umriss um jedes
    bearbeitbare Wildicon. Er ersetzt den weißen
    Umriss vollständig — vier versetzte Schatten
    ohne Weichzeichnung, die sich zu einer
    geschlossenen Kontur ergänzen.
*/
#map.bearbeiten-modus:not(.eingabe-offen)
    .streckeSvgMarker:not(.wild-fremd) .wildIcon {
    filter:
        drop-shadow(1.5px 0 0 #e53935)
        drop-shadow(-1.5px 0 0 #e53935)
        drop-shadow(0 1.5px 0 #e53935)
        drop-shadow(0 -1.5px 0 #e53935);
}

/*
    Meldung eines anderen Mitglieds, ohne das Recht
    "meldungFremd": grau statt rot. Nicht einfach
    ohne Umriss — dann sähe sie aus wie im
    Anzeigemodus, und der Unterschied zwischen "hier
    ist nichts zu ändern" und "der Modus läuft
    nicht" ginge verloren.
*/
#map.bearbeiten-modus:not(.eingabe-offen)
    .streckeSvgMarker.wild-fremd .wildIcon {
    filter:
        drop-shadow(1.5px 0 0 #9e9e9e)
        drop-shadow(-1.5px 0 0 #9e9e9e)
        drop-shadow(0 1.5px 0 #9e9e9e)
        drop-shadow(0 -1.5px 0 #9e9e9e);
}

/*
    Beim Überfahren wechselt nur der Zeiger auf
    Rot — die Umrisse der Kartensymbole bleiben
    unverändert.
*/

#map.bearbeiten-modus:not(.eingabe-offen)
    .streckeSvgMarker.wild-fremd:hover {
    cursor: pointer !important;
}

#map.bearbeiten-modus:not(.eingabe-offen)
    .streckeSvgMarker:not(.wild-fremd):hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23e53935' stroke-width='2'%3E%3Cline x1='32' y1='0' x2='32' y2='26.5'/%3E%3Cline x1='32' y1='37.5' x2='32' y2='64'/%3E%3Cline x1='0' y1='32' x2='26.5' y2='32'/%3E%3Cline x1='37.5' y1='32' x2='64' y2='32'/%3E%3Ccircle cx='32' cy='32' r='4.5'/%3E%3C/g%3E%3C/svg%3E") 32 32, pointer !important;
}

/* =========================
   CURSOR MESS-MODUS
   (Schussdistanzen: Ringe sichtbar)
========================= */

#map.entfernung-messen {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cline x1='16' y1='0' x2='16' y2='32' stroke='%23000' stroke-width='4' stroke-opacity='0.55'/%3E%3Cline x1='0' y1='16' x2='32' y2='16' stroke='%23000' stroke-width='4' stroke-opacity='0.55'/%3E%3Cline x1='16' y1='0' x2='16' y2='32' stroke='%23fff' stroke-width='2'/%3E%3Cline x1='0' y1='16' x2='32' y2='16' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 16 16, crosshair;
}

#map.entfernung-messen .leaflet-interactive,
#map.entfernung-messen .leaflet-marker-icon {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cline x1='16' y1='0' x2='16' y2='32' stroke='%23000' stroke-width='4' stroke-opacity='0.55'/%3E%3Cline x1='0' y1='16' x2='32' y2='16' stroke='%23000' stroke-width='4' stroke-opacity='0.55'/%3E%3Cline x1='16' y1='0' x2='16' y2='32' stroke='%23fff' stroke-width='2'/%3E%3Cline x1='0' y1='16' x2='32' y2='16' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 16 16, crosshair !important;
}

.entfernungs-messwert {
    background: none;
    border: none;
    /* helles Orange, passend zur Messlinie */
    color: #ffc98a;
    font-family: var(--schrift);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 16px;
    white-space: nowrap;
    text-shadow:
        0 0 2px #000,
        0 0 3px #000,
        0 0 4px rgba(0, 0, 0, 0.95),
        0 0 7px rgba(0, 0, 0, 0.8);
}

/* =========================
   SIDEBAR
========================= */

#sidebar {
    position: fixed;
    top: 5px;
    right: -260px;

    /*
        Bis fast an den unteren Rand: Solange das
        Filterfeld offen ist, sind die Knöpfe
        darunter ohnehin ausgeblendet.
    */
    bottom: 5px;
    width: 260px;
    z-index: 2000;
    font-family: var(--schrift);
    /*font-size: 14px;*/
    transition: right 0.25s ease;
}

#sidebar.open {
    right: 0;
}

#sidebar-panel {
    width: 260px;
    height: auto;

    /*
        Der ganzen Fensterhöhe abzüglich der
        Ränder oben und unten — bei Bedarf
        scrollt das Feld innen.
    */
    max-height: calc(100dvh - 10px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px 0 0 12px;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.12);
}

/* dezente Scrollleiste */
#sidebar-panel::-webkit-scrollbar {
    width: 6px;
}

#sidebar-panel::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

#sidebar-tab {
    position: absolute;
    top: 10px;
    left: -37px;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.15s ease;
}

#sidebar-tab:hover {
    background: #f6f6f6;
}

#sidebar-tab svg {
    width: 26px;
    height: 15px;
    stroke: #333;
    fill: none;
    color: #333;
}

/* =========================
   SIDEBAR SCHRIFTEN
========================= */

/* Überschriften im Klappfenster */
.filter-title {
    font-family: var(--schrift);
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin: 0px 0 4px 0;
}


/* Normaler Text / Checkbox-Einträge (Kontrollkästchen) */
#sidebar-panel label {
    font-family: var(--schrift);
    font-size: 11px;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #444;
    line-height: 1.0;
    height: 17px;
    margin: 0;
    padding: 0 4px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s ease;
}

#sidebar-panel label:hover {
    background: #f6f6f6;
}

/* feine Trennlinien */
#sidebar-panel hr {
    border: none;
    border-top: 1px solid #ececec;
    margin: 6px 0;
}

/* =========================
   AUSKLAPPBARE FILTER
========================= */

.toggle-title {
    cursor: pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top: 4px;
    padding: 2px 4px;
    border-radius: 5px;
    transition: background 0.15s ease, color 0.15s ease;
}

.toggle-title:hover {
    background: #f6f6f6;
    color: #f28c28;
}

/* Aufklappdreieck schwarz */
.toggle-title span {
    font-size:10px;
    color:#000;
}


/* weich animiertes Auf-/Zuklappen */
.filter-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}


.filter-content.open {
    max-height: 520px;
}

.filter-content label {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    line-height:1;
}


.filter-wild-icon {
    /*
        Breite/Höhe stehen inline am jeweiligen
        Symbol – dieselben Verhältnisse wie in den
        Wildarten-Buttons, nur kleiner skaliert.
    */
    flex-shrink:0;
}

/*
    Fester Platzhalter, damit die Beschriftungen
    trotz unterschiedlich breiter Symbole bündig
    untereinander stehen.
*/
.filter-icon-slot {
    width:21px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

/* alle/keine-Schnellschalter im Wildarten-Filter */
.filter-alle {
    display: flex;
    gap: 6px;
    margin: 2px 0 4px 4px;
}

.filter-alle button {
    font-size: 10px;
    padding: 2px 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    color: #444;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.filter-alle button:hover {
    border-color: #f28c28;
    background: #f6f6f6;
}

/* =========================
   ICONS
========================= */

.icon {
    width: 14px;
    height: 14px;
    stroke: #333;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================
   FORM ELEMENTE
========================= */

input[type="radio"] {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    background: white;
    display: block;
    margin-bottom: 4px;

}

input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #f28c28;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type="checkbox"] {
    appearance:none;
    -webkit-appearance:none;

    width:13px;
    height:13px;

    border:1px solid #000;
    border-radius:3px;

    background:#fff;

    cursor:pointer;

    position:relative;

    margin-left: 6px;
}


input[type="checkbox"]:checked {
    background:#f28c28;   /* orange Hintergrund */
    border-color:#000;    /* schwarzer Rahmen */
}


input[type="checkbox"]:checked::after {
    content:"✓";

    position:absolute;

    left:2px;
    top:-1px;

    font-size:9px;
    font-weight:bold;

    color:#000000;           /* Farbe Häkchen */
}

.zeit-filter {
    margin-bottom:6px;
}


.zeit-filter label {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    /*line-height:1;*/
}


/*
    Kitzrettung steht etwas abgesetzt unter den
    Wildarten. Die Regel trägt die Kennung des
    Panels, weil dessen label-Regel sonst mit
    margin:0 gewinnt.
*/
#sidebar-panel label.kitz-zeile {
    margin-top: 10px;
}

.filter-hinweis { /*Beschränkung auf GPS*/
    font-style: italic;
    font-size:11px;
    margin: 4px 0 2px;
    color: #666;
}

/* Bereichs-Überschriften mit orangenem Akzent */
/*
    Bereichs-Überschriften als voller Kasten in
    Jagdgrün statt nur mit farbigem Strich links.
*/
.head-karte,
.head-zeitraum,
.head-filter {
    font-weight: bold;
    font-size: 13px;
    color: #fff;
    background: #3b7d2a;
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1.4;
}

.head-karte {
    margin: 0 0 5px;

    /*
        Überschrift links, Knopf rechts — in EINER
        Zeile.

        Die Seitenleiste ist 260 px breit, innen
        bleiben knapp 240. Beides zusammen muss
        also hineinpassen, sonst stünde der Knopf
        wieder über den grünen Kasten hinaus. Der
        Knopf ist dafür klein gehalten (10 px,
        knappe Beschriftung), und die Überschrift
        darf im äußersten Fall kürzen — etwa wenn
        jemand die Systemschrift hochstellt. Lieber
        ein gekürztes Wort als ein Knopf im
        Nirgendwo.
    */
    padding: 3px 10px 3px 8px;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.head-karte .head-text {

    flex: 1 1 auto;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    "als Standard" — Stern plus Beschriftung.

    Vorher stand hier nur der Stern, erklärt durch
    ein title-Attribut. Das ist am Handy nichts
    wert: Ein Finger fährt nicht über etwas, es
    gibt also keinen Hinweis — und 22 px sind zum
    Treffen zu wenig. Empfohlen sind rund 44 px
    Tasthöhe.

    Jetzt eine kleine Schaltfläche mit Text, die
    sich selbst erklärt und getroffen werden kann.
    Sie bleibt in der Zeile der Überschrift und
    kostet damit weiterhin keine eigene.
*/
#kartenStandardBtn {

    flex: 0 0 auto;

    /*
        Rechtsbündig — auch dann, wenn der Knopf
        allein in der zweiten Zeile steht.
    */
    margin-left: auto;

    min-height: 20px;
    padding: 3px 6px;

    display: flex;
    align-items: center;

    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 4px;

    font-family: var(--schrift);
    font-size: 10px;
    font-weight: normal;
    line-height: 1;
    color: #444;

    white-space: nowrap;

    cursor: pointer;

    /*
        Kein blaues Aufblitzen beim Tippen —
        die eigene Rückmeldung steht darunter.
    */
    -webkit-tap-highlight-color: transparent;
}

#kartenStandardBtn:hover {

    border-color: #f28c28;
    color: #f28c28;
}

/*
    Gedrückt: hell hinterlegt. Am Touchscreen ist
    das der einzige Augenblick, in dem der Knopf
    antwortet — die Meldung am unteren Rand kommt
    erst, wenn die Datenbank geantwortet hat.
*/
#kartenStandardBtn:active {

    background: #fdf1e3;
    border-color: #f28c28;
    color: #f28c28;
}

.head-zeitraum {
    margin: 6px 0 5px;
}

.head-filter {
    margin: 6px 0 2px;
}

/* =========================
   BUTTONS
========================= */

#gpsBtn,
#setBtn {
    position: fixed;
    right: 10px;
    width: 42px;
    height: 42px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2000;
}

/* =========================
   POSITION GPS / SET / Meldungen
========================= */

#gpsBtn {
    bottom: 25px;
    position: fixed;
    right: 10px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column; /* Icon über Text */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;

    z-index: 2001;
    transition: background 0.2s ease;
}

#setBtn {
    bottom: 131px;
    position: fixed;
    right: 10px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column; /* Icon über Text */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;

    z-index: 2001;
    transition: background 0.2s ease;
}

/* =========================
   ANSICHT ZENTRIEREN
========================= */

/*
    Solange die Wildarten- oder die Objektauswahl
    ausgeklappt ist, tritt "Übersicht" hinter
    das Feld zurück — sonst lugte der Knopf an
    dessen Rand hervor.
*/
body:has(#expandPanel.open.modus-neu) #zentrierenBtn,
body:has(#revierTypBox.open.modus-neu) #zentrierenBtn {
    display: none;
}

/* Zweite Spalte unten rechts, neben "mein Standort" */
#zentrierenBtn {
    bottom: 25px;
    position: fixed;
    right: 63px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column; /* Icon über Text */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;

    z-index: 2001;
    transition: background 0.2s ease;
}

#zentrierenBtn svg {
    width: 25px;
    height: 25px;
    stroke: #333;
    fill: none;
    stroke-width: 0.16;
    color: #333;
}

/* Kurzer Hinweis, wenn keine Reviergrenze da ist */

#zentrierHinweis {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-family: var(--schrift);
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 3000;
}

#zentrierHinweis.sichtbar {
    opacity: 1;
}

#gpsBtn svg,
#setBtn svg,
#expandBtn svg {
    width: 26px;
    height: 26px;
    stroke: #333;
    fill: none;
    stroke-width: 2;

    /* für gefüllte Teilflächen (z.B. Satellitenkörper) */
    color: #333;
}

/* Satellit ist breiter als hoch — mehr Breite,
   damit die Höhe der übrigen Icons erreicht wird */
#gpsBtn svg {
    width: 30px;
}

#expandBtn.open svg {
    stroke: #fff;
    color: #fff;
}

/*
    Laufende Ortung: der Knopf pulsiert dezent,
    solange auf das Gerät gewartet wird.
*/
#gpsBtn.suchend {
    background: #fbe3cb;
    animation: gpsPuls 1.1s ease-in-out infinite;
}

@keyframes gpsPuls {
    0%, 100% { background: #fbe3cb; }
    50%      { background: #f6c99b; }
}


/*
    Kleines Band am oberen Rand, solange die
    Ortung läuft — sonst wirkt die Wartezeit wie
    ein Aussetzer.
*/
#gpsSuche {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #f28c28;
    color: #fff;
    border-radius: 6px;
    font-family: var(--schrift);
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 3400;
    pointer-events: none;
}

#gpsSuche.open {
    display: flex;
}

.gps-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gpsDreh 0.8s linear infinite;
}

@keyframes gpsDreh {
    to { transform: rotate(360deg); }
}


/* =========================
   GPS-GENAUIGKEIT

   Gleiche Stelle wie das Suchband, aber heller:
   Das Band meldet eine Wartezeit, diese Anzeige
   begleitet die laufende Ortung und soll nicht
   um Aufmerksamkeit rufen.

   Die Zahl ist der Radius, in dem das Gerät den
   eigenen Standort vermutet — derselbe Wert, den
   der blaue Kreis auf der Karte zeichnet.
========================= */
#gpsGenauigkeit {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.94);
    color: #222;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    font-family: var(--schrift);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: 3390;
    pointer-events: none;
    white-space: nowrap;
}

#gpsGenauigkeit.open {
    display: flex;
}

/*
    Solange das Suchband läuft, tritt die
    Genauigkeit zurück — zwei Schilder
    übereinander an derselben Stelle wären
    unlesbar.
*/
body:has(#gpsSuche.open) #gpsGenauigkeit {
    display: none;
}

.gps-guete {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9aa0a6;
    flex: none;
}

#gpsGenauigkeit.gut .gps-guete {
    background: #2f9e44;
}

#gpsGenauigkeit.mittel .gps-guete {
    background: #f28c28;
}

#gpsGenauigkeit.grob .gps-guete {
    background: #d64545;
}


/* Laufende Standortanzeige */
#gpsBtn.active {
    background: #f28c28;
    color: #fff;
}

#gpsBtn.active svg {
    stroke: #fff;
    color: #fff;
}

/* =========================
   ABSCHUSS-BUTTONS
========================= */

#expandBtn {
    position: fixed;
    right: 10px;
    bottom: 78px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column; /* Icon über Text */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;

    z-index: 2001;
    transition: background 0.2s ease;
}

#expandBtn.open {
    background: #f28c28;
    color: #fff;
}

/* =========================
   WILDARTEN PANEL
========================= */

#expandPanel {
    position: fixed;
    right: 65px;
    bottom: 25px;

    z-index: 3000 !important;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;

    /* Karten-Look */
    /*
        Grün wie die Überschrift des Wildmeldungs-
        Popups. Fläche und Rahmen zeichnet ::before,
        nicht das Element selbst — nur so kann das
        Grün das dahinterliegende Fähnchen
        überdecken (siehe .wildartSchliessen).
    */
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: scale(1) translateY(10px);
    transform-origin: bottom right;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

/*
    Grüne Fläche und Rahmen des Panels als eigene
    Ebene. Sie liegt über dem Fähnchen (z-index -1)
    und unter den Wildarten-Buttons (z-index 1) —
    dadurch bleibt die Eckenausrundung sichtbar und
    verdeckt das Weiß des Fähnchens.
*/
#expandPanel::before {
    content: "";
    position: absolute;
    inset: -1px;
    box-sizing: border-box;
    background: #3b7d2a;
    border: 1px solid #2f6522;
    border-radius: 10px;
    z-index: 0;
}

#expandPanel > *:not(.wildartSchliessen) {
    position: relative;
    z-index: 1;
}


#expandPanel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: scale(1) translateY(0);
}

/* =========================
   WILDART-ICON UMRISSLINIE
========================= */

.streckeSvgMarker .wildIcon {
    filter: drop-shadow(0 0 1.5px #ffffff) drop-shadow(0 0 1px #ffffff);
}

.streckeSvgMarker .ereignisIcon {
    filter: none;
}

/* =========================
   ABSCHUSS PANEL
========================= */

/*
    Kopfzeile des Wildarten-Feldes:
    Kitzrettung links, Sonstiges rechts.
*/
.expandKopf {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
}

.expandGrid {
    display: grid;
    grid-template-columns: repeat(4, 56px);
    /*
        Zeilenhöhe aus dem Inhalt: die Knöpfe
        bringen ihre 52 px selbst mit, die
        Trennzeile darf dadurch flacher sein.
    */
    grid-auto-rows: auto;
    gap: 2px;
}

/*
    Trennt Haarwild und Federwild: eine leere
    Zeile über die volle Breite des Rasters.
*/
.gruppenluecke {
    grid-column: 1 / -1;
    height: 4px;
}

.expandItem {
    width: 56px;
    height: 52px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #ececec;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    justify-content: flex-end;
    padding-bottom: 3px;
    box-sizing: border-box;
    font-size: 10px;
    color: #333;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease,
        border-color 0.12s ease;
}

.expandItem:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.expandItem.active {
    background: #f9d6a8;
    border: 2px solid #f28c28;
    color: #333;
}

/*
    Wildart-Icons: hohe Icons (Reh, Reiher …)
    dürfen bis 31px hoch werden, breite
    (Schwarzwild, Dachs …) werden über die
    Breite begrenzt — so wirken alle
    ähnlich groß.
*/
/*
    Breite und Höhe stehen einzeln am Symbol,
    berechnet auf gleiche gezeichnete Fläche.
    Deshalb hier keine gemeinsame Vorgabe mehr.
*/
.expandItem .markerIcon {
    min-height: 0;
    max-width: none;
}

/* =========================
   REVIERGRENZEN-BUTTON
========================= */

/* =========================
   ENTFERNUNGS-BUTTON
========================= */

/* =========================
   ADMIN-BUTTON UND
   SEINE UNTERBUTTONS
========================= */

/*
    Die Untergruppe wächst nach oben aus dem
    Adminbutton heraus.
*/
/*
    Die Untergruppe klappt waagrecht neben dem
    Adminbutton auf: dieser steht ganz unten links
    (10 px vom Rand, 52 px breit), die Reihe setzt
    3 px daneben an.
*/
/*
    Die Unterknöpfe klappen unter dem Admin-Knopf
    nach unten auf — links bündig mit ihm.
*/
#adminGruppe {
    position: fixed;
    left: 10px;

    /*
        Dieselbe Rasterung wie die Hauptknöpfe:
        52 px Knopfhöhe plus 1 px Abstand.
        Beginnt unter dem Adminknopf. Der steht
        an zweiter Stelle der Einstellungsgruppe,
        also zwei Stufen unter dem Hauptknopf.
    */
    top: 169px;

    display: flex;
    flex-direction: column;
    gap: 1px;

    z-index: 2001;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.15s ease;
}

#adminGruppe.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#userBtn,
#logbuchBtn,
#einstellungenBtn,
#profilBtn {
    position: relative;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;
    transition: background 0.2s ease;
}

/*
    "verwaltung" ist bei 9 px breiter als der
    Knopf — eine Stufe kleiner passt es.
*/
#userBtn {
    font-size: 8px;
    line-height: 8px;
}

#userBtn svg,
#logbuchBtn svg {
    width: 24px;
    height: 24px;
    stroke: #333;
    fill: none;
    stroke-width: 0.1;
    color: #333;
}

#adminBtn.open {
    background: #f28c28;
    color: #fff;
}

#adminBtn.open svg {
    stroke: #fff;
    color: #fff;
}



#adminBtn {
    position: fixed;
    left: 10px;

    /* Erste Stufe unter den Einstellungen */
    top: 63px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;
    z-index: 2001;
    transition: background 0.2s ease;
}

/*
    Das Adminsymbol ist nahezu quadratisch und
    hat keine langen Ausläufer — es kann den
    Platz über der Beschriftung voll ausfüllen.
*/
#adminBtn svg {
    width: 32px;
    height: 32px;
    stroke: #333;
    fill: none;
    stroke-width: 0.1;
    color: #333;
}

/* =========================
   WERKZEUGE UND TERMINE
========================= */

#werkzeugBtn,
#termineBtn,
#jagdzeitenBtn,
#ansitzeBtn {
    position: fixed;
    left: 10px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;
    z-index: 2001;
    transition: background 0.2s ease;
}

#werkzeugBtn {
    bottom: 184px;

    /*
        "Reparatur-bedarf" braucht zwei Zeilen.
        Mit 43 px bleibt die längere davon auch
        bei 9 px innerhalb der 50 px des Knopfes —
        damit ist die Beschriftung so groß wie bei
        allen übrigen.
    */
    font-size: 9px;
    line-height: 9px;
}

#termineBtn {
    bottom: 131px;
}


/*
    Unterster Platz der senkrechten Spalte. Den
    genauen Abstand setzt spalten.js — hier steht
    nur, wo der Knopf stünde, wenn es die Datei
    nicht gäbe.

    Er hat mit den Schussdistanzen den Platz
    getauscht: Die stehen jetzt in der unteren
    Reihe, links von Sonne/Mond.
*/
#jagdzeitenBtn {
    bottom: 25px;
}

#jagdzeitenBtn svg {

    /*
        Breit und flach wie die Zeichnung selbst —
        quadratisch eingepasst bliebe von den 28
        Bildpunkten Höhe nur die Hälfte übrig.
    */
    width: 40px;
    height: 24px;
    stroke: #333;
    fill: none;
    color: #333;
}


/*
    Gewehr und Haken der Zeichnung liegen über dem
    Kalender und decken ihn ab. Ihre Füllung ist
    deshalb der Grund des Knopfes selbst — sonst
    stünden die Striche des Kalenders mitten durch
    den Lauf.
*/
#jagdzeitenBtn {
    --knopf-grund: #fff;
}

#jagdzeitenBtn.open {
    background: #f28c28;
    color: #fff;

    --knopf-grund: #f28c28;
}

#jagdzeitenBtn.open svg {
    stroke: #fff;
    color: #fff;
}

/* Über den Terminen */
#ansitzeBtn {
    bottom: 184px;
}

#ansitzeBtn svg {
    width: 24px;
    height: 28px;
    stroke: #333;
    fill: none;
    color: #333;
    stroke-width: 0.84;
}

#ansitzeBtn.open {
    background: #f28c28;
    color: #fff;
}

#ansitzeBtn.open svg {
    stroke: #fff;
    color: #fff;
}

/*
    Beide Symbole sind breiter als hoch und nutzen
    den Platz über der Beschriftung voll aus.
*/
#werkzeugBtn svg,
#termineBtn svg {
    stroke: #333;
    fill: none;
    stroke-width: 0.16;
    color: #333;
}

#werkzeugBtn svg {
    width: 25px;
    height: 24px;
}

#termineBtn svg {
    width: 32px;
    height: 27px;
}

#werkzeugBtn.open {
    background: #f28c28;
    color: #fff;
}

#werkzeugBtn.open svg {
    stroke: #fff;
    color: #fff;
}

/* =========================
   DATENFENSTER
   (Reparaturbedarf, Statistik)
========================= */

.daten-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*
        Seitlich bleiben mindestens 10 px Luft
        zum Kartenrand, in der Höhe füllt das
        Fenster bis zu 85 %.

        Auf dem Handy (360 px CSS-Breite) ist
        jeder Millimeter Spaltenbreite einer
        zu wenig — der Rahmen darf schmal
        sein, das Fenster hebt sich ohnehin
        durch Rand und Schatten ab.
    */
    width: min(560px, calc(100vw - 20px));
    max-height: 85vh;
    background: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    font-family: var(--schrift);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 3200;
}

/*
    DAS AUFFALTEN

    Die Fenster gehen waagerecht aus ihrer Mitte
    auf, wie ein Vorhang, der zur Seite weggezogen
    wird. Kein Zuklappen: Wer ein Fenster schliesst,
    will es weghaben und nicht noch zusehen.

    Der Verschiebeanteil muss in jedem Bild der
    Bewegung mitlaufen — transform kennt nur einen
    Wert, und ohne translate spränge das Fenster
    für die Dauer der Bewegung in die Ecke.

    Nicht ganz bei null anfangen: Ein Strich von
    ein paar Prozent Breite zeigt schon, wo das
    Fenster entsteht.
*/
@keyframes fenster-auffalten {

    from {
        transform: translate(-50%, -50%) scaleX(0.04);
    }

    to {
        transform: translate(-50%, -50%) scaleX(1);
    }
}

.daten-panel.open {
    display: flex;
    animation: fenster-auffalten 170ms ease-out;
}


/*
    Wer im Betriebssystem "Bewegung reduzieren"
    eingestellt hat, hat dafür seine Gründe.
*/
@media (prefers-reduced-motion: reduce) {

    .daten-panel.open {
        animation: none;
    }
}

/*
    Die Nutzerverwaltung kommt mit weniger aus.

    Maßgeblich ist die längste Zeile, die nicht
    umbrechen darf: das Recht "Einmessungsstatus
    GPS-eingemessener Punkte ändern". Bei 12,5 px
    sind das rund 305 px Text, dazu Kästchen und
    Abstand (20 px), die Einrückung des
    Unterrechts (18 px), der Innenabstand des
    Fensters (24 px) und der Rahmen — zusammen
    knapp 370.

    Dicht dahinter die zweispaltige Felderliste:
    "Zustand (Reparatur, Begehung)" neben
    "Bemerkungen" kommt auf rund 360 px.

    Mit etwas Luft für andere
    Schriftauslieferungen: 400.
*/
#nutzerPanel {
    width: min(400px, calc(100vw - 20px));
}

/* Die Statistik braucht mehr Spalten */
#statistikPanel {
    width: min(680px, calc(100vw - 20px));
}

.daten-panel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 8px 14px;
    background: #3b7d2a;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    flex: 0 0 auto;
}

.daten-panel-kopf button {
    background: none;
    border: none;
    color: #fff;
    font: 22px/22px var(--schrift);
    cursor: pointer;
    padding: 0 2px;
}

.daten-panel-inhalt {
    overflow: auto;
    padding: 0;
}

.daten-panel-inhalt table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.daten-panel-inhalt th {
    position: sticky;
    top: 0;
    background: #f2f2f2;
    text-align: left;
    font-size: 12px;
    padding: 6px 10px;
    border-bottom: 1px solid #000;
    white-space: nowrap;
}

/*
    Die Liste der Ansitzeinrichtungen eine Stufe
    kleiner — Zeilen und Spaltenköpfe.

    Nur diese eine Liste: .daten-panel-inhalt
    tragen sechs Fenster (Ansitze, Reparatur,
    Profil, Nutzer, Logbuch, Statistik). Eine
    Änderung an der gemeinsamen Regel hätte alle
    sechs verkleinert.

    Der Fensterkopf und die Filterzeile darüber
    stehen außerhalb von #ansitzeInhalt und
    bleiben davon unberührt.
*/
#ansitzeInhalt table {
    font-size: 11px;
}

/*
    Der Spaltenkopf bleibt, wo er war — er
    steht damit gleich groß wie die Zeilen,
    hebt sich aber weiter durch Fettschrift
    und grauen Grund ab.
*/
#ansitzeInhalt th {
    font-size: 11px;
}

/*
    Hochgestellte Spaltenüberschrift, um 90 Grad
    nach links gedreht — von unten nach oben zu
    lesen.

    "Reparatur/Defekte" ist lang, der Inhalt
    darunter kurz ("ja", "nein", "-"). Waagrecht
    bestimmt die Überschrift die Spaltenbreite und
    nimmt Name und Bemerkungen den Platz weg;
    hochgestellt braucht sie nur noch ihre
    Zeilenhöhe.

    GEDREHT WIRD DER TEXT, NICHT DIE ZELLE

    Zuerst stand die Drehung an der Zelle selbst.
    Das dreht alles mit — auch den Rahmen: Die
    untere Linie der Kopfzeile landete oben, und
    unten fehlte sie. Deshalb liegt die Drehung
    jetzt an einem span darin. Die Zelle behält
    Rahmen, Polsterung und ihr klebendes
    Verhalten, gedreht wird nur die Schrift.

    writing-mode: vertical-rl stellt sie hoch,
    liest sich dabei aber von oben nach unten. Die
    Drehung um 180 Grad kehrt das um — zusammen
    ergibt das die Vierteldrehung nach links, bei
    der der Text unten anfängt.

    Zweizeilig über den Umbruch im Text: Im
    hochgestellten Satz wird aus einer zweiten
    Zeile eine zweite Spalte. white-space muss
    dafür ausdrücklich umbrechen dürfen — die
    Kopfzellen stehen sonst auf nowrap.
*/
.daten-panel-inhalt th.th-hoch {
    padding: 8px 4px;

    text-align: center;
    vertical-align: middle;

    white-space: normal;
}

.daten-panel-inhalt th.th-hoch span {
    display: inline-block;

    writing-mode: vertical-rl;
    transform: rotate(180deg);

    text-align: center;
    line-height: 1.15;
}

.daten-panel-inhalt td {
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}

.daten-panel-inhalt .leer {
    padding: 18px 14px;
    font-size: 13px;
    color: #555;
}

/* --- Liste Reparaturbedarf --- */

#reparaturInhalt tbody tr {
    cursor: pointer;
}

#reparaturInhalt tbody tr:hover {
    background: #fdf0e2;
}

/* Laufende Nummer bleibt schmal */
#reparaturInhalt td.nr,
#reparaturInhalt th.nr {
    width: 26px;
    color: #777;
}

/* =========================
   SONNE/MOND-BUTTON
========================= */

/*
    Zweite Spalte unten links, neben dem
    Schussdistanzen-Knopf — mit demselben Abstand
    wie zwischen den Knöpfen einer Spalte.
*/
#mondBtn {
    position: fixed;

    /*
        Abstand wie die senkrechten Abstände:
        52 px Knopf plus 1 px Fuge. Links davor
        stehen "Schussdistanzen" und die
        Jagdzeiten.
    */
    left: 116px;
    bottom: 25px;
    width: 50px;
    height: 50px;

    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1px;
    line-height: 9px;
    z-index: 2001;
    transition: background 0.2s ease;
}

#mondBtn svg {
    width: 26px;
    height: 26px;
    stroke: #333;
    fill: none;
    color: #333;
}


/* Schriftgröße wie bei "Schussdistanzen" */
#mondBtn span {
    font-size: 9px;
    line-height: 9px;
}


#mondBtn.open svg {
    stroke: #fff;
    color: #fff;
}

#mondBtn.open {
    background: #f28c28;
    color: #fff;
}




/* --- Mondphase --- */

/*
    Ausschnitt aus dem Streifen mit 24 Aufnahmen
    (8 Spalten, 3 Reihen). Die Stelle setzt
    js/mond.js über background-position.
*/
/*
    Schwarzer Kasten mit abgerundeten Ecken. Er ist
    größer als das Bild, damit die Sichel rundum
    Luft hat und sich vom durchscheinenden Feld
    abhebt.
*/
.mond-kasten {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    background: #000;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gezeichnete Sichel für sehr schmale Phasen */
.mond-sichel {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ausschnitt aus dem Streifen, feste Größe */
.mond-bild {
    width: 62px;
    height: 62px;
    background-image: url("../img/mondphasen.jpg");
    background-size: 800% 300%;
    background-repeat: no-repeat;
}

/*
    Kleines Feld auf der Karte, unten mittig
    zwischen den Knopfspalten.
*/
/*
    Unten mittig zwischen den Knopfspalten.

    Aufteilung: Mondbild links oben, die Angaben
    rechts daneben, die Zeitentabelle über die
    ganze Breite darunter.
*/
#mondKarte {
    position: fixed;

    /* Mitte der Seite */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;

    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 8px 12px;
    padding: 10px 14px 12px;

    /* Deutlich undurchsichtiger — die Karte
       darunter soll nicht mehr durchscheinen. */
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    font-family: var(--schrift);
    color: #fff;
    z-index: 2100;
}

#mondKarte.open {
    display: grid;
}

.mond-kasten {
    grid-column: 1;
    grid-row: 1;
}

#mondAngaben {
    grid-column: 2;
    grid-row: 1;
}

/* Tabelle über beide Spalten */
#mondZeiten {
    grid-column: 1 / -1;
}

#mondAngaben {
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
}

.mond-phase {
    /* Gleiche Größe wie die Zeilen darunter */
    font-weight: bold;
    margin-bottom: 2px;
}

.mond-klein {
    color: #cfcfcf;
}

/* Blättern zwischen den Tagen */
#mondTage {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 12px;
    color: #fff;
}

#mondTage button {
    background: none;
    border: none;
    color: #fff;
    font: 20px/20px var(--schrift);
    cursor: pointer;
    padding: 0 6px;
    opacity: 0.75;
}

#mondTage button:hover {
    opacity: 1;
}

#mondTagText {
    min-width: 84px;
    text-align: center;
}

/* Mondlicht über die Nacht */
#mondDiagramm {
    grid-column: 1 / -1;
    margin-top: 2px;
}

.mond-diagramm-titel {
    font-size: 11px;
    color: #cfcfcf;
    margin-bottom: 2px;
}

#mondDiagramm svg {
    width: 100%;
    height: 54px;
    overflow: visible;
}

/*
    Die Fläche bekommt keine Linie — sonst zöge
    sich der orangene Strich auch über die
    Grundlinie und die Ränder.
*/
.mond-flaeche {
    fill: rgba(247, 169, 74, 0.55);
    stroke: none;
}

/* Nur die Kurve selbst wird nachgezogen */
.mond-linie {
    fill: none;
    stroke: #f7a94a;
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
}

.mond-grund {
    stroke: #fff;
    stroke-width: 0.3;
    opacity: 0.8;
    vector-effect: non-scaling-stroke;
}

.mond-raster {
    stroke: #fff;
    stroke-width: 0.5;
    opacity: 0.55;
    vector-effect: non-scaling-stroke;
}

.mond-achse {
    fill: #cfcfcf;
    font-size: 9px;
    font-family: var(--schrift);
    text-anchor: middle;
}

/* Viele Stundenmarken: kleinere Zahlen */
.mond-achse.eng {
    font-size: 7.5px;
}

/* Sonnenuntergang links, Sonnenaufgang rechts */
.mond-achse.anfang {
    text-anchor: start;
}

.mond-achse.ende {
    text-anchor: end;
}

/* Auf- und Untergangszeiten */
.mond-zeiten {
    margin-top: 5px;
    border-collapse: collapse;
    font-size: 12px;
}

.mond-zeiten th {
    font-size: 10px;
    font-weight: normal;
    color: #cfcfcf;
    text-align: right;
    padding: 0 0 1px 14px;
}

/* Etwas Luft vor der zweiten Gruppe */
.mond-zeiten tr.kopf.abstand th {
    padding-top: 5px;
}

.mond-zeiten td {
    padding: 1px 0 1px 14px;
    text-align: right;
}

.mond-zeiten td:first-child,
.mond-zeiten th:first-child {
    padding-left: 0;
    text-align: left;
}

/* Dämmerungszeile hervorgehoben */
.mond-zeiten tr.daemmerung td {
    color: #f7a94a;
}

/* Schließkreuz in der Ecke des Feldes */
#mondSchliessen {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: #cfcfcf;
    font: 18px/18px var(--schrift);
    cursor: pointer;
    padding: 0 2px;
}

#mondSchliessen:hover {
    color: #fff;
}

@media (max-width: 520px) {

    /*
        Auf dem Handy ist unten kein Platz zwischen
        den Knopfspalten — das Feld rückt deshalb
        unter den Admin-Knopf an den oberen Rand.
    */
    /* Auf dem Handy nur enger fassen */
    #mondKarte {
        max-width: 100vw;
        gap: 6px 10px;
        padding: 8px 10px 10px;
    }

    .mond-kasten {
        width: 70px;
        height: 70px;
    }

    .mond-bild {
        width: 52px;
        height: 52px;
    }

    .mond-zeiten,
    #mondAngaben {
        font-size: 11px;
    }

    .mond-zeiten td,
    .mond-zeiten th {
        padding-left: 9px;
    }

    .mond-zeiten .trenner {
        padding-left: 8px;
    }
}


/* --- Hinweisfenster --- */

/*
    Ersetzt die nüchterne alert()-Box: gleiche
    Optik wie die übrigen Datenfenster, aber
    schmal und ohne Tabelle.
*/
#meldungDialog {
    width: min(360px, calc(100vw - 20px));
    z-index: 3600;
}

/* Störungsmeldung: Kopfzeile rot statt grün */
#meldungDialog .daten-panel-kopf {
    background: #b3261e;
}

.meldung-text {
    padding: 16px 16px 4px;
    font-size: 14px;
    line-height: 1.45;
    color: #333;
}

.meldung-fuss {
    padding: 12px 16px 16px;
    text-align: right;
}

.meldung-fuss button {
    min-width: 90px;
    padding: 9px 14px;
    border: none;
    border-radius: 6px;
    background: #3b7d2a;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.meldung-fuss button:hover {
    background: #2f6421;
}

/* --- Statistik --- */

/*
    Ausgewerteter Zeitraum über den Tabellen.
*/
.statistik-zeitraum {
    padding: 8px 14px 2px;
    font-size: 12px;
    font-style: italic;
    color: #666;
}

/*
    Überschrift je Tabelle — dunkler hinterlegt als
    die Kopfzeile der Tabelle darunter, damit die
    Gliederung beim Blättern klar bleibt.
*/
.statistik-titel {
    padding: 7px 14px;
    background: #d5d5d5;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}

/* Die erste Überschrift schließt oben an */
.statistik-zeitraum + .statistik-titel {
    margin-top: 6px;
}

/*
    Alles hinter der ersten Spalte (Wildart bzw.
    Einrichtung) steht mittig.
*/
#statistikInhalt th:not(:first-child),
#statistikInhalt td:not(:first-child) {
    text-align: center;
}

/* Zahlenspalten bleiben so schmal wie nötig */
#statistikInhalt th.zahl,
#statistikInhalt td.zahl {
    white-space: nowrap;
    width: 1%;
}

/* Summe je Wildart hervorgehoben: jagdgrün hinterlegt */
#statistikInhalt td.summe {
    font-weight: bold;
    background: #3b7d2a;
    color: #fff;
}


/*
    Schmale Displays: Schrift und Zellenabstände
    zurücknehmen, damit die Tabellen ohne
    seitliches Schieben lesbar bleiben.
*/
@media (max-width: 520px) {

    .daten-panel-inhalt table {
        font-size: 12px;
    }

    .daten-panel-inhalt th,
    .daten-panel-inhalt td {
        padding: 5px 6px;
    }

    .daten-panel-kopf {
        padding-left: 10px;
    }

    .statistik-zeitraum,
    .statistik-titel {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* =========================
   STATISTIK-BUTTON
========================= */

#statistikBtn {
    position: fixed;
    left: 10px;

    /* Unterste Stufe über den Schussdistanzen */
    bottom: 78px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;
    z-index: 2001;
    transition: background 0.2s ease;
}

#statistikBtn.open {
    background: #f28c28;
    color: #fff;
}

#statistikBtn.open svg {
    stroke: #fff;
    color: #fff;
}

#statistikBtn svg {
    width: 30px;
    height: 27px;
    stroke: #333;
    fill: none;
    stroke-width: 0.14;
    color: #333;
}

#distanceBtn {
    position: fixed;

    /*
        In der unteren Reihe, zwischen den
        Jagdzeiten und Sonne/Mond. Die Spalte
        darüber gehört jetzt den Jagdzeiten —
        deshalb steht dieser Knopf auch nicht
        mehr in der Liste von spalten.js.
    */
    left: 63px;

    /* Abstand nach unten wie nach links */
    bottom: 25px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;
    z-index: 2001;
    transition: background 0.2s ease;
}

#distanceBtn svg {
    width: 34px;
    height: 26px;
    stroke: #333;
    fill: none;
    stroke-width: 2;
    color: #333;
}

#distanceBtn.active {
    background: #f28c28;
    color: #fff;
}

#distanceBtn.active svg {
    stroke: #fff;
    color: #fff;
}

/* Beschriftung der Entfernungsringe */

.entfernungs-label {
    /*
        Kein Kästchen: weiße Schrift, umgeben
        von einem kräftigen schwarzen Schein.
        Mehrfach übereinandergelegt, damit er
        auch über hellem Luftbild trägt.
    */
    background: none;
    border: none;
    color: #fff;
    font-family: var(--schrift);
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 14px;
    text-shadow:
        0 0 2px #000,
        0 0 3px #000,
        0 0 4px rgba(0, 0, 0, 0.95),
        0 0 7px rgba(0, 0, 0, 0.8);
}

#boundaryBtn {
    /* Lage kommt jetzt aus #adminGruppe */
    position: relative;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;
    z-index: 2001;
    transition: background 0.2s ease;
}

#boundaryBtn svg {
    width: 26px;
    height: 26px;
    stroke: #333;
    fill: none;
    stroke-width: 2;
    color: #333;
}

#boundaryBtn.active {
    background: #f28c28;
    color: #fff;
}

#boundaryBtn.active svg {
    stroke: #fff;
    color: #fff;
}

/* =========================
   REVIER CONTROLS
========================= */

#revierControls {
    position: fixed;
    right: 65px;
    bottom: 25px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    z-index: 2000;
    pointer-events: none;
}

#revierControls button {
    pointer-events: auto;
}

/* =========================
   REVIER TYP BOX
========================= */

#revierTypBox {

    position: fixed;
    right: 65px;
    bottom: 25px;

    z-index: 3000 !important;

    display: grid;
    grid-template-columns: repeat(3, 56px);
    grid-auto-rows: 52px;
    gap: 4px;

    /* Karten-Look wie Wildarten-Panel */
    /*
        Blau wie die Überschrift der Reviereinrichtungs-
        Popups. Fläche und Rahmen zeichnet ::before —
        nur so kann das Blau das dahinterliegende
        Fähnchen überdecken.
    */
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(5px);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s ease;
}

/*
    Blaue Fläche und Rahmen als eigene Ebene —
    über dem Fähnchen, unter den Typ-Buttons.
*/
#revierTypBox::before {
    content: "";
    position: absolute;
    inset: -1px;
    box-sizing: border-box;
    background: #2a6f97;
    border: 1px solid #235a7c;
    border-radius: 10px;
    z-index: 0;
}

#revierTypBox > *:not(.revierSchliessen) {
    position: relative;
    z-index: 1;
}

/* Zeile mit der Schaltfläche über die volle Breite */
.revierModus {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

/*
    Grundzustand: nur die Schaltfläche, ohne
    blauen Kasten.
*/
#revierTypBox:not(.modus-neu) {
    display: flex;
    justify-content: flex-end;

    /*
        Auf Höhe des Hauptbuttons "Objekt
        bearbeiten" (bottom 131 px), also direkt
        links daneben.
    */
    bottom: 131px;
    right: 63px;

    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

#revierTypBox:not(.modus-neu)::before {
    display: none;
}

#revierTypBox:not(.modus-neu) .revierTyp,
#revierTypBox:not(.modus-neu) .revierSchliessen {
    display: none;
}

/* Mit der Typenauswahl wird die Schaltfläche nicht gebraucht */
#revierTypBox.modus-neu .revierModus {
    display: none;
}

/* Aussehen exakt wie die Schaltfläche der Wildmeldungen */
.revierModusBtn {

    /* Nur wenig breiter als das Wort "setzen" */
    width: 36px;
    height: 50px;
    box-sizing: content-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    padding: 0;
    font-family: var(--schrift);
    font-size: 9px;
    font-weight: normal;
    line-height: 9px;
    text-align: center;
    color: #333;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Fähnchen zum Schließen, blau gerahmt */
.revierSchliessen {
    position: absolute;
    top: -1px;
    left: -30px;
    z-index: -1;

    box-sizing: border-box;
    width: 36px;
    height: 28px;
    padding: 0 6px 0 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--schrift);
    font-size: 26px;
    line-height: 26px;
    font-weight: normal;
    color: #333;

    background: #fff;
    border: 1px solid #235a7c;
    border-right: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
}

.revierSchliessen:hover {
    color: #f28c28;
}

/* =========================
   BEARBEITUNGSMODUS
   REVIEREINRICHTUNGEN
========================= */

/*
    Alle Einrichtungssymbole sind kreisrund —
    Ringe oder der orangene Punkt der Ansitz-
    einrichtung. Der Umriss ist deshalb kein
    Schlagschatten (der wurde am Markerrand
    beschnitten), sondern ein echter roter Kreis
    als Pseudoelement. Er sitzt exakt mittig,
    kann nicht abgeschnitten werden und gilt
    für jeden Typ.
*/
#map.revier-bearbeiten-modus:not(.eingabe-offen) .revierSvgMarker::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 3px solid #e53935;
    border-radius: 50%;
    pointer-events: none;
}


#map.revier-bearbeiten-modus:not(.eingabe-offen) .revierSvgMarker:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23e53935' stroke-width='2'%3E%3Cline x1='32' y1='0' x2='32' y2='26.5'/%3E%3Cline x1='32' y1='37.5' x2='32' y2='64'/%3E%3Cline x1='0' y1='32' x2='26.5' y2='32'/%3E%3Cline x1='37.5' y1='32' x2='64' y2='32'/%3E%3Ccircle cx='32' cy='32' r='4.5'/%3E%3C/g%3E%3C/svg%3E") 32 32, pointer !important;
}

#map.revier-bearbeiten-modus:not(.eingabe-offen) {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23F28C28' stroke-width='2'%3E%3Cline x1='32' y1='0' x2='32' y2='26.5'/%3E%3Cline x1='32' y1='37.5' x2='32' y2='64'/%3E%3Cline x1='0' y1='32' x2='26.5' y2='32'/%3E%3Cline x1='37.5' y1='32' x2='64' y2='32'/%3E%3Ccircle cx='32' cy='32' r='4.5'/%3E%3C/g%3E%3C/svg%3E") 32 32,
        pointer;
}

#map.revier-bearbeiten-modus:not(.eingabe-offen) .leaflet-interactive,
#map.revier-bearbeiten-modus:not(.eingabe-offen) .leaflet-marker-icon {
    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23F28C28' stroke-width='2'%3E%3Cline x1='32' y1='0' x2='32' y2='26.5'/%3E%3Cline x1='32' y1='37.5' x2='32' y2='64'/%3E%3Cline x1='0' y1='32' x2='26.5' y2='32'/%3E%3Cline x1='37.5' y1='32' x2='64' y2='32'/%3E%3Ccircle cx='32' cy='32' r='4.5'/%3E%3C/g%3E%3C/svg%3E") 32 32,
        pointer !important;
}



#revierTypBox.open {

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}

/* =========================
   REVIER ICONS
========================= */

.revierTyp .markerIcon,
.svgMarker .markerIcon {
    width: 26px;
    height: 26px;

    /*
        Ohne "block" steht die Zeichnung auf einer
        Textgrundlinie. Deren Zeilenhöhe (16 px)
        lässt sich nicht unterschreiten — bei
        kleinen Symbolen rutschte das Bild dadurch
        nach unten, während der Richtungspfeil
        (absolut gesetzt) oben stehen blieb. So
        entstand die Lücke bei geringem Zoom.
    */
    display: block;
}

/* =========================
   REVIER TYP BUTTONS
========================= */

.revierTyp {
    width: 56px;
    height: 52px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #ececec;
    cursor: pointer;
    font-size: 10px;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    padding: 2px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease,
        border-color 0.12s ease;
}

.revierTyp:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.revierTyp.active {
    background: #f9d6a8;
    border: 2px solid #f28c28;
}

/* =========================
   REVIERGRENZEN-MODUS
========================= */

#map.add-boundary-mode {
    cursor: crosshair;
}

/* =========================
   MESSAGE
========================= */

#setMessage {
    position: fixed;

    /* schließt direkt an den roten Rahmen an */
    top: 9px;

    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    background: #ff0000;
    color: #ffffff;
    border: none;

    /* oben bündig, unten abgerundet */
    border-radius: 0 0 8px 8px;

    padding: 7px 16px 8px;
    font-family: var(--schrift);
    font-size: 14px;
    font-weight: bold;
    display: none;
    text-align: center;
}

/*
    Hohlkehlen: weicher Übergang vom
    Meldungsfeld in den roten Rahmen
*/
#setMessage::before,
#setMessage::after {
    content: "";
    position: absolute;
    top: 0;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

#setMessage::before {
    left: -12px;
    background: radial-gradient(
        circle at 0 100%,
        transparent 12px,
        #ff0000 12.5px
    );
}

#setMessage::after {
    right: -12px;
    background: radial-gradient(
        circle at 100% 100%,
        transparent 12px,
        #ff0000 12.5px
    );
}

/*
    Entfernungsmodus: freistehendes
    oranges Feld ohne Hohlkehlen
    (kein roter Kartenrahmen aktiv)
*/
#setMessage.setMessage-entfernung {
    top: 15px;
    background: #f28c28;
    border-radius: 6px;
}

#setMessage.setMessage-entfernung::before,
#setMessage.setMessage-entfernung::after {
    display: none;
}

/* Zweite, kleinere Zeile im Hinweisbanner */
#setMessage .setMessage-sub {
    display: block;
    font-size: 11px;
    font-weight: normal;
    margin-top: 2px;
}

#map.revier-message-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 9px solid #ff0000;
    pointer-events: none;
    z-index: 999999;
    box-sizing: border-box;
}

/* =========================
   WILDMELDUNG POPUP
   (Ergänzungen — Hauptblock
   siehe "POPUP FINAL" unten)
========================= */

.date-time-row label {
    display: block;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 2px;
}

/*
    Zusatz "(optional)" — zwei Punkt kleiner als
    die Beschriftung, kursiv und ohne Fettdruck.
*/
.date-time-row label .optional {
    font-size: 10px;
    font-style: italic;
    font-weight: normal;
}

.category-weight-row label {
    display: block;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.observation-popup textarea {
    resize: vertical;
}

.observation-popup input[type="radio"] {
    margin-right: 5px;
}

.observation-popup label {
    font-size: 12px;
}


.datum-zeile {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}


.datum-zeile input[type="date"] {
    font-size: 11px;
    height: 22px;
    width: 80px;
    padding: 1px 3px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
}

.datum-zeile input[type="date"]:focus {
    outline: none;
    border-color: #f28c28;
}

/* Hover-Akzent auf Auswahl-Elementen */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: #f28c28;
}

/* ==================================================
   WILDMELDUNG POPUP FINAL
================================================== */


/* Eigene UI Elemente unter Popup */

#sidebar,
#gpsBtn,
#setBtn,
#boundaryBtn,
#expandBtn,
#revierControls,
#setMessage {

    z-index:1000 !important;

}


/* Bedienfelder über Leaflet */
#expandPanel,
#revierTypBox {

    z-index:3000 !important;

}

/* Leaflet Popup Ebene */

.leaflet-popup-pane {

    z-index:999999 !important;

}


/* Popup Container */

.leaflet-popup {

    z-index:999999 !important;

}


/* Popup Rahmen */

.leaflet-popup-content-wrapper {

    position:relative !important;

    padding:0 !important;

    border-radius:12px;

    overflow:visible !important;

}


/* Popup Inhalt */

.leaflet-popup-content {

    width:230px !important;

    margin:8px !important;

}


/* Wildmeldung Inhalt */

.observation-popup {

    width:230px;

    padding:8px;

    box-sizing:border-box;

    font-family: var(--schrift);

}



/* Überschrift: farbig hinterlegter Titelbalken.
   Negative Ränder heben das Container-Padding
   auf — oberer und linker Abstand zum Popup-
   Rand sind damit exakt gleich. Rechts bleibt
   Platz für das freistehende Schließen-X. */

.observation-popup h3 {

    /* 5px Abstand zum oberen und linken Popup-Rand */
    margin:-3px 22px 10px -11px;

    padding:6px 10px;

    font-size:15px;

    text-align:left;

    background:#f28c28;

    color:#fff;

    border-radius:6px;

}



/* Reihen */

.popup-row {

    margin-bottom:5px;

}


.popup-row>label:first-child {

    display:block;

    font-weight:bold;

    font-size:12px;

    margin-bottom:2px;

}


/*
    Feststehende Wildart steht in derselben
    Zeile wie die Bezeichnung.
*/
.popup-row.wildart-fest {

    display:flex;

    align-items:baseline;

    gap:5px;

}


.popup-row.wildart-fest>label:first-child {

    display:inline;

    margin-bottom:0;

}


.popup-row.wildart-fest .wildart-name {

    font-size:12px;

}



/* Eingaben */

.observation-popup input[type="text"],
.observation-popup input[type="date"],
.observation-popup input[type="time"],
.observation-popup input[type="number"],
.observation-popup select,
.observation-popup textarea {

    width:100%;

    box-sizing:border-box;

    padding:3px;

    border-radius:5px;

    border:1px solid #aaa;

    font-size:12px;

    font-family: var(--schrift);

}



/* Kategorie Gewicht */

.category-weight-row {

    display:flex;

    gap:8px;

}


.category-field {

    flex:1;

}


/*
    Das Gewichtsfeld ist bewusst schmal
    gehalten, damit links die vollständige
    Beschriftung "Altersklasse / Geschlecht"
    einzeilig Platz findet, ohne dass das
    Popup breiter wird.
*/
.weight-field {

    flex:0 0 58px;

}


.weight-field .gewicht-eingabe {

    display:flex;

    align-items:center;

    gap:3px;

}


.weight-field input {

    width:40px !important;

    padding:3px 2px !important;

}


/* Drehpfeile weglassen — sie würden die
   Ziffern im schmalen Feld verdecken. */
.weight-field input::-webkit-outer-spin-button,
.weight-field input::-webkit-inner-spin-button {

    -webkit-appearance:none;

    margin:0;

}


.weight-field input[type="number"] {

    -moz-appearance:textfield;

}


.weight-field .einheit {

    font-size:12px;

}



/* Datum Zeit */

.date-time-row {

    display:flex;

    gap:8px;

}


.date-field,
.time-field {

    flex:1;

}



/* Buttons */

.observation-popup button {

    width:100%;

    padding:9px;

    border-radius:6px;

    border:none;

    background:#3b7d2a;

    color:white;

    font-size:15px;

    cursor:pointer;

}


.observation-popup button:hover {

    background:#2f6421;

}



/* Bild Button */

.observation-popup button[type="button"] {

    background:#666;

}


.observation-popup button[type="button"]:hover {

    background:#444;

}


/*
    DER BILDTEIL: KNÖPFE LINKS, VORSCHAU RECHTS

    Knöpfe im Popup sind sonst volle Breite. Zwei
    davon übereinander und darunter noch das Bild
    machten das Bearbeiten-Fenster höher als den
    Bildschirm eines Handys.

    Jetzt stehen die Knöpfe schmal untereinander
    und die Vorschau daneben — der ganze Bereich
    ist nur noch so hoch wie die beiden Knöpfe.
*/
.observation-popup .bild-bereich {

    display: flex;

    /*
        Nicht oben ausrichten, sondern auf volle
        Zeilenhöhe ziehen: Die Vorschau schliesst
        damit oben mit dem ersten und unten mit dem
        zweiten Knopf ab, ohne dass irgendwo eine
        Höhe in Pixeln steht, die beim nächsten
        Schriftgrad nicht mehr stimmt.
    */
    align-items: stretch;
    gap: 8px;

}

.observation-popup .bild-knopfzeile {

    display: flex;
    flex-direction: column;
    gap: 6px;

    /* Teilt sich die Breite mit der Vorschau */
    flex: 1 1 0;
    min-width: 0;

}

.observation-popup .bild-knopfzeile button {

    width: 100%;

    padding: 7px 4px;

    font-size: 13px;

}


/*
    Die Vorschau ist eine Vorschau, kein Abzug:
    Sie zeigt, welches Bild an der Meldung hängt.
    Das ganze Foto steht im Infofenster.

    Die Höhe ist die der beiden Knöpfe daneben,
    damit die Zeile eine Kante behält; was breiter
    wäre, wird beschnitten statt verzerrt.
*/
/*
    DER KASTEN DER VORSCHAU

    78 Pixel breit, in der Höhe von der Zeile
    gezogen — und die bestimmen allein die beiden
    Knöpfe daneben.

    Warum der Kasten überhaupt sein muss: Ein Bild
    bringt sein Seitenverhältnis mit. Stand es
    selbst in der Zeile, rechnete der Browser bei
    78 Pixeln Breite die zugehörige Höhe aus — bei
    einem Hochformat gut 100 Pixel — und machte die
    Zeile so hoch. Die Knöpfe daneben wurden
    mitgezogen, und aus der bündigen Kante wurde
    ein Überstand.

    Der Kasten hat kein Seitenverhältnis. Das Bild
    darin liegt absolut und zählt für die Höhe
    nicht mehr mit.
*/
.observation-popup .bild-vorschau {

    position: relative;

    flex: 0 0 78px;

    width: 78px;
    align-self: stretch;

    background: #f0f0f0;

    border-radius: 4px;

    overflow: hidden;

}


/*
    Ein Hochformat soll ganz hineinpassen und
    nicht beschnitten werden: contain legt es
    vollständig in die Fläche, der helle Grund
    füllt, was oben und unten übrig bleibt.
*/
.observation-popup #imagePreview {

    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/* Löschen Buttons (Wildmeldung + Reviereinrichtung) */

.observation-popup #deleteObservationBtn,
.observation-popup button[type="button"].deleteBtn {
    background:#b3261e;
}


/*
    DIE ZWEITE ZEILE AUF DEM KNOPF

    "Löschen" gross, darunter kleiner und nicht
    fett, worum es geht. Der Knopf wird dadurch
    nicht höher: Die Zeilenhöhe rückt zusammen und
    das Polster wird kleiner, was die zweite Zeile
    an Platz braucht.
*/
.observation-popup #deleteObservationBtn {

    padding: 5px 9px;

    line-height: 1.2;

}

.observation-popup .knopf-zusatz {

    display: block;

    font-size: 11.5px;
    font-weight: normal;

    opacity: 0.92;

}


.observation-popup #deleteObservationBtn:hover,
.observation-popup button[type="button"].deleteBtn:hover {
    background:#8c1d17;
}


/* Umbenennen Button in Grün */

.observation-popup button[type="button"].editBtn {
    background:#3b7d2a;
}


.observation-popup button[type="button"].editBtn:hover {
    background:#2f6421;
}


/* Nicht bearbeitbare Felder: kein Rahmen */

.observation-popup input[readonly] {
    border: none;
    background: transparent;
    padding-left: 0;
}


/* Reviereinrichtung: kleinere Namenszeile */

.observation-popup.revier-popup h3 {
    font-size:13px;
}


/* Reviereinrichtung: reine Namensanzeige */

/* Nur-Titel-Popups: Balken schließt kompakt ab */
.observation-popup h3:last-child {
    margin-bottom:-8px;
}


/* Wildmeldungen: grüner Titelbalken */

.observation-popup.wild-popup h3 {
    background:#3b7d2a;
}


/* Reviereinrichtungen: blauer Titelbalken —
   Leiter/Kanzel bleibt orange */

.observation-popup.revier-popup h3 {
    background:#2a6f97;
}

.observation-popup.kanzel-popup h3 {
    background:#f28c28;
}


/* Titelfarben nach den Rahmenfarben
   der jeweiligen Icons */

.observation-popup.kamera-popup h3 {      /* Wildkamera  */
    background:#C77DFF;
}

.observation-popup.kirrung-popup h3 {     /* Kirrung     */
    background:#87CEEB;
    color:#333;
}

.observation-popup.suhle-popup h3 {       /* Suhle       */
    background:#0000FF;
}

.observation-popup.salzlecke-popup h3 {   /* Salzlecke   */
    background:#B0CB1F;
    color:#333;
}

.observation-popup.fuetterung-popup h3 {  /* Fütterung   */
    background:#4CAF50;
}

.observation-popup.bauanlage-popup h3 {   /* Bauanlage   */
    background:#8B5A2B;
}


/* Wildkamera: ja/nein-Optionen */

.observation-popup .funk-optionen {
    display: flex;
    gap: 16px;
    margin-top: 2px;
}

.observation-popup .funk-optionen label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-weight: normal;
}

.observation-popup .funk-optionen input[type="radio"] {
    margin: 0;
    display: inline-block;
}


/* =========================
   INFO-POPUPS
   (einheitliches Layout)
========================= */

.observation-popup .info-tabelle {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 5px;
    margin-top: 8px;
    font-size: 12px;
    align-items: baseline;
}

.observation-popup .info-label {
    color: #888;
    font-size: 11px;
    white-space: nowrap;
}

.observation-popup .info-wert {
    color: #222;
    overflow-wrap: anywhere;
}

/* ja/nein-Plaketten: ja = rot, nein = grün */

.observation-popup .chip {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 9px;
    font-size: 11px;
    background: #d9ead3;
    border: 1px solid #3b7d2a;
    color: #2a5c1e;
}

/*
    Reparatur/Defekte in der Ansitzliste: nur die
    Schrift trägt die Farbe. Rot heißt "da ist
    etwas", Schwarz heißt "da ist nichts" — und der
    Strich heißt "noch nicht nachgesehen", auch
    schwarz, weil er nichts behauptet.

    Ohne Elternauswahl: Die Namen sind eindeutig
    genug, und die Zellen stehen in der
    Ansitzliste, nicht in einem Popup.
*/
/*
    Die Art des Ansitzes, als zweite Zeile unter
    dem Namen: kursiv, eine Stufe kleiner und
    etwas zurückgenommen — sie ordnet den Namen
    ein, statt mit ihm um Aufmerksamkeit zu
    ringen.
*/
.listen-art {
    font-style: italic;
    font-size: 10px;
    color: #555;
}

.wert-defekt {
    color: #b3261e;
    font-weight: bold;
}

.wert-heil {
    color: #333;
}


.observation-popup .chip-ja {
    background: #f4cccc;
    border: 1px solid #b3261e;
    color: #8c1d17;
}



/* Popup Spitze ausblenden */

.leaflet-popup-tip {

    display:none;

}


/*
    Ausnahme: alle Popups der Reviereinrichtungen
    und Wildmeldungen — Eingabe wie Info — bekommen
    eine Spitze, die auf ihr Symbol zeigt.

    Das gedrehte Quadrat wird vom Container
    (überstehende Hälfte ausgeblendet) zum
    Dreieck beschnitten.
*/
.leaflet-popup:has(.observation-popup) .leaflet-popup-tip {

    display: block;

    width: 16px;
    height: 16px;

    margin: -9px auto 0;
    padding: 1px;

    background: #fff;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);

    transform: rotate(45deg);
}



/* ==================================================
   SCHLIESS X
================================================== */


.leaflet-popup-close-button {

    position:absolute !important;

    top:8px !important;

    right:3px !important;


    width:28px !important;

    height:28px !important;


    display:flex !important;

    align-items:center;

    justify-content:center;


    z-index:9999999 !important;


    font-size:26px !important;

    line-height:26px !important;

    font-weight:bold;


    color:#333 !important;

    text-decoration:none !important;

}


.leaflet-popup-close-button:hover {

    color:#000 !important;

}



/* Leaflet Container darf nicht abschneiden */

.leaflet-container {

    overflow:visible !important;

}



.expandItem,
.expandItem * {
    cursor: pointer !important;
}

/* Überlagerung Unfall-Icon */

.streckeSvgMarker {
    background:none !important;
    border:none !important;
}

.svgMarker {
    position:relative;
    width:100%;
    height:100%;
}

.wildIcon{
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

.ereignisIcon{
    position:absolute;
    z-index:9999;
    pointer-events:none;
}

/*
    Drohne im Kitzrettungs-Knopf: nicht stauchen
    und mittig zwischen oberem Rand und Schrift.
*/
.expandItem[data-wildart="Kitzrettung"] .markerIcon {
    flex-shrink: 0;

    /*
        Der freie Platz sammelt sich oben, das
        Symbol rückt dadurch dicht an die Schrift.
    */
    margin-top: auto;
    margin-bottom: 0;
}

/*
    Ansitzeinrichtung steht allein in der
    letzten Zeile — rechtsbündig statt links.
*/
.revierTyp[data-typ="Leiter/Kanzel"] {
    grid-column: 3;
}


/* =========================
   DECKKRAFT-REGLER GELÄNDERELIEF
========================= */

.relief-regler {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 4px 22px;
}

/*
    Solange das Relief aus ist, bleibt der Regler
    sichtbar, tritt aber zurück.
*/
.relief-regler.inaktiv {
    opacity: 0.4;
}

/*
    Dasselbe für eine ganze Ebenenzeile, die
    gerade nicht anwendbar ist — sie bleibt
    stehen, damit die Liste nicht springt, tritt
    aber zurück.
*/
#sidebar-panel label.inaktiv {
    opacity: 0.4;
}

.relief-regler input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 130px;
    height: 3px;
    border-radius: 2px;
    background: #ddd;
    outline: none;
    cursor: pointer;
}

.relief-regler input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #f28c28;
    border: none;
    cursor: pointer;
}

.relief-regler input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #f28c28;
    border: none;
    cursor: pointer;
}

.relief-regler span {
    font-size: 11px;
    color: #666;
    min-width: 34px;
}

/*
    Gesperrt, solange das Relief aus ist.
*/
.relief-regler input[type="range"]:disabled,
.relief-regler input[type="range"]:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}


/* =========================
   MELDUNG: ARBEITSWEISE
   (Zwischenschritt vor der
    Wildartenauswahl)
========================= */

.meldungModus {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}

/*
    Bei ausgeklappten Wildarten wird die
    Schaltfläche nicht mehr gebraucht — zurück
    geht es über Speichern oder den Hauptbutton.
*/
#expandPanel.modus-neu .meldungModus {
    display: none;
}

/*
    Ohne die Wildarten steht die Schaltfläche
    für sich: kein grüner Kasten drumherum.
*/
#expandPanel:not(.modus-neu) {

    /*
        Auf Höhe des Hauptbuttons "Meldung
        bearbeiten" (bottom 78 px), direkt links
        daneben. Mit ausgeklappten Wildarten sitzt
        das Feld wieder unten.
    */
    bottom: 78px;
    right: 63px;

    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

#expandPanel:not(.modus-neu)::before {
    display: none;
}

/*
    Der Abstand nach unten wird nur gebraucht,
    wenn darunter die Wildarten stehen. Sonst
    wäre der grüne Rand unten doppelt so breit
    wie oben.
*/
#expandPanel.modus-neu .meldungModus {
    margin-bottom: 6px;
}

/*
    Aussehen wie die Hauptbuttons rechts unten:
    weißes Feld, schwarzer Rand, Symbol über
    dem Text.
*/
.meldungModusBtn {

    /* Nur wenig breiter als das Wort "setzen" */
    width: 36px;
    height: 50px;

    /*
        Der Hauptbutton rechnet den Rand außen
        dazu (47 x 52). Ohne diese Zeile bliebe
        die Schaltfläche zwei Pixel kleiner.
    */
    box-sizing: content-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    padding: 0;
    font-family: var(--schrift);
    font-size: 9px;
    font-weight: normal;
    line-height: 9px;
    text-align: center;
    color: #333;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

/*
    Die Symbole folgen der Schriftfarbe und
    kehren sich auf dem orangenen Button
    mit um.
*/
.modusIcon {
    flex-shrink: 0;
    color: inherit;

    /*
        Das Pin-Symbol bringt keine eigene
        Strichfarbe mit — es folgt der Schrift
        und kehrt sich damit auf dem orangenen
        Button mit um.
    */
    stroke: currentColor;
}

.meldungModusBtn:hover {
    border-color: #f28c28;
}

.meldungModusBtn.active {
    background: #f28c28;
    border-color: #f28c28;
    color: #fff;
}

/*
    Solange "neu setzen" nicht gewählt ist, bleibt
    die Wildartenauswahl verborgen — im Zwischen-
    schritt ebenso wie im Bearbeiten-Modus.
*/
#expandPanel:not(.modus-neu) .expandKopf,
#expandPanel:not(.modus-neu) .expandGrid,
#expandPanel:not(.modus-neu) .gruppenluecke {
    display: none;
}


/* =========================
   FÄHNCHEN ZUM SCHLIESSEN
   (Wildartenauswahl)
========================= */

.wildartSchliessen {
    position: absolute;

    /*
        Das Fähnchen schiebt sich mit seiner linken
        Hälfte unter das grüne Feld (z-index: -1).
        Dadurch bleibt dessen Eckenausrundung
        erhalten, und im Bogen schaut Weiß statt
        Hintergrund durch.
    */
    /*
        top/right beziehen sich auf die Innenkante
        des Panelrahmens. Ein Pixel höher gesetzt
        liegt die Oberkante des Fähnchens exakt auf
        der Oberkante des grünen Feldes, die Rahmen
        bilden also eine durchgehende Linie.
    */
    top: -1px;
    left: -30px;
    z-index: -1;

    box-sizing: border-box;
    width: 36px;
    height: 28px;

    /*
        Die rechten 6 px liegen hinter dem grünen
        Feld. Der gleich große Innenabstand rückt
        das Kreuz so weit nach links, dass es
        mittig im sichtbaren Teil steht und
        vollständig frei liegt.
    */
    padding: 0 6px 0 0;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
        Kreuz wie im Bearbeitungspopup. Leaflet
        zeichnet dessen Schließknopf in Tahoma —
        die Zeichenform unterscheidet sich davon
        in Arial deutlich.
    */
    font-family: var(--schrift);
    font-size: 26px;
    line-height: 26px;
    font-weight: normal;
    color: #333;

    background: #fff;
    border: 1px solid #2f6522;
    border-right: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
}



.wildartSchliessen:hover {
    color: #f28c28;
}

/* Nur zusammen mit den Wildarten sichtbar */
#expandPanel:not(.modus-neu) .wildartSchliessen {
    display: none;
}


/* =========================
   "AUF MEINEM STANDORT
    PLATZIEREN"
========================= */

/*
    Höhere Gewichtung als die allgemeine Regel
    für Popup-Knöpfe (grün bzw. grau) — dieser
    hier ist weiß.
*/
.observation-popup button.standortBtn {
    /*
        Die linke Kante fluchtet mit dem Text der
        Optionen darüber, also um die Breite des
        Auswahlknopfes eingerückt. Die Beschriftung
        selbst steht mittig.
    */
    width: calc(100% - 20px);

    /*
        Dicht an die Optionen darüber, dafür mehr
        Luft zum Speichern-Knopf darunter.
    */
    margin: -3px 0 12px 20px;

    padding: 4px 6px;
    text-align: center;

    font-family: var(--schrift);
    font-size: 12px;
    font-weight: normal;
    color: #333;

    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    cursor: pointer;
}

.observation-popup button.standortBtn:hover:enabled {
    background: #fff;
    border-color: #f28c28;
}

/*
    Die drei Knöpfe am Fuß der Wildmeldung etwas
    höher — sie sind die Hauptaktionen und lassen
    sich so auch mit dem Finger sicher treffen.
*/
.observation-popup.wild-popup button {
    padding: 12px 9px;
}

/*
    In den Wildmeldungen gibt es keine Optionsfelder,
    an denen sich die Schaltfläche ausrichten müsste —
    dort ist sie so breit und so hoch wie die Knöpfe
    darunter und hält denselben Abstand.
*/
.observation-popup.wild-popup button.standortBtn {
    width: 100%;

    /*
        Die Zeile darüber bringt schon 5 px mit —
        zusammen mit diesen 3 px steht der Knopf
        also genau 3 px weiter vom Bemerkungsfeld
        entfernt als die Knöpfe untereinander.
    */
    margin: 3px 0 0 0;

    /*
        Ein Pixel Rand oben und unten dazu — mit
        11 statt 12 Pixeln Innenabstand ist der Knopf
        exakt so hoch wie die randlosen darunter.
    */
    padding: 11px 9px;
    font-size: inherit;
}

/* Ohne bekannte GPS-Position gesperrt */
.observation-popup button.standortBtn:disabled {
    background: #fff;
    color: #aaa;
    border-color: #ddd;
    cursor: default;
}


/* Datumsfelder ohne "Anderer Zeitraum" gesperrt */
.datum-zeile input:disabled {
    color: #aaa;
    background: #f5f5f5;
}


/* Optionsfelder "Einmessung" im Einrichtungspopup */
.observation-popup .einmessung-optionen {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
}

.observation-popup .einmessung-optionen label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: normal;
}

.observation-popup .einmessung-optionen input[type="radio"] {
    margin: 0;
}

/*
    "lagegenau mit GPS" ist nicht von Hand wählbar
    und tritt deshalb zurück.
*/
.observation-popup .einmessung-optionen label.gesperrt {
    color: #aaa;
    cursor: default;
}



/* =========================
   POPUPS IMMER GANZ VORNE

   Leaflet verwahrt seine Popups in einer eigenen
   Ebene innerhalb der Kartenfläche. Diese Fläche
   ist verschoben (transform) und besitzt einen
   festen z-index — dadurch bildet sie einen
   eigenen Stapelraum. Ein Popup kann deshalb
   niemals von sich aus über Bedienelemente
   steigen, die außerhalb der Karte liegen.

   Lösung: Solange ein Info- oder Eingabepopup
   geöffnet ist (Klasse "eingabe-offen"), treten
   die Bedienelemente hinter die Karte zurück.
   Nach dem Schließen des Popups kehren sie
   unverändert zurück.

   Ausgenommen bleiben die Hinweisfenster
   (#meldungDialog, #gpsSuche) und der rote
   Rahmen der Bearbeitungsmodi — diese sollen
   auch neben einem Popup sichtbar bleiben.
========================= */

body:has(#map.eingabe-offen) #werkzeugPfeil,
body:has(#map.eingabe-offen) #windBtn,
body:has(#map.eingabe-offen) #objektPfeil,
body:has(#map.eingabe-offen) #sidebar,
body:has(#map.eingabe-offen) #setMessage,
body:has(#map.eingabe-offen) #adminBtn,
body:has(#map.eingabe-offen) #einstellungenBtn,
body:has(#map.eingabe-offen) #adminGruppe,
body:has(#map.eingabe-offen) #einstellungenGruppe,
body:has(#map.eingabe-offen) #boundaryBtn,
body:has(#map.eingabe-offen) #userBtn,
body:has(#map.eingabe-offen) #logbuchBtn,
body:has(#map.eingabe-offen) #werkzeugBtn,
body:has(#map.eingabe-offen) #termineBtn,
body:has(#map.eingabe-offen) #ansitzeBtn,
body:has(#map.eingabe-offen) #statistikBtn,
body:has(#map.eingabe-offen) #distanceBtn,
body:has(#map.eingabe-offen) #mondBtn,
body:has(#map.eingabe-offen) #mondKarte,
body:has(#map.eingabe-offen) #gpsBtn,
body:has(#map.eingabe-offen) #setBtn,
body:has(#map.eingabe-offen) #expandBtn,
body:has(#map.eingabe-offen) #zentrierenBtn,
body:has(#map.eingabe-offen) #expandPanel,
body:has(#map.eingabe-offen) #revierControls,
body:has(#map.eingabe-offen) #revierTypBox {

    z-index: 300 !important;

}


/* =========================
   REPARATURBEDARF UND STATISTIK
   EBENFALLS GANZ VORNE

   Beide Fenster sind keine Karten-Popups,
   sondern eigene Bedienfelder. Sie dürfen
   deshalb nicht mit hinter die Karte treten,
   wenn nebenbei noch ein Info- oder
   Eingabepopup geöffnet ist — sonst
   verschwinden sie beim Öffnen.

   Statt dessen treten sie ihrerseits nach vorn
   und schieben die übrigen Bedienelemente
   zurück, sobald sie geöffnet sind.
========================= */

body:has(#reparaturPanel.open) #werkzeugPfeil,
body:has(#reparaturPanel.open) #windBtn,
body:has(#reparaturPanel.open) #objektPfeil,
body:has(#reparaturPanel.open) #sidebar,
body:has(#reparaturPanel.open) #setMessage,
body:has(#reparaturPanel.open) #adminBtn,
body:has(#reparaturPanel.open) #einstellungenBtn,
body:has(#reparaturPanel.open) #adminGruppe,
body:has(#reparaturPanel.open) #einstellungenGruppe,
body:has(#reparaturPanel.open) #boundaryBtn,
body:has(#reparaturPanel.open) #userBtn,
body:has(#reparaturPanel.open) #logbuchBtn,
body:has(#reparaturPanel.open) #werkzeugBtn,
body:has(#reparaturPanel.open) #termineBtn,
body:has(#reparaturPanel.open) #jagdzeitenBtn,
body:has(#reparaturPanel.open) #ansitzeBtn,
body:has(#reparaturPanel.open) #statistikBtn,
body:has(#reparaturPanel.open) #distanceBtn,
body:has(#reparaturPanel.open) #mondBtn,
body:has(#reparaturPanel.open) #mondKarte,
body:has(#reparaturPanel.open) #gpsBtn,
body:has(#reparaturPanel.open) #setBtn,
body:has(#reparaturPanel.open) #expandBtn,
body:has(#reparaturPanel.open) #zentrierenBtn,
body:has(#reparaturPanel.open) #expandPanel,
body:has(#reparaturPanel.open) #revierControls,
body:has(#reparaturPanel.open) #revierTypBox,
body:has(#terminePanel.open) #werkzeugPfeil,
body:has(#terminePanel.open) #windBtn,
body:has(#terminePanel.open) #objektPfeil,
body:has(#terminePanel.open) #sidebar,
body:has(#terminePanel.open) #setMessage,
body:has(#terminePanel.open) #adminBtn,
body:has(#terminePanel.open) #einstellungenBtn,
body:has(#terminePanel.open) #adminGruppe,
body:has(#terminePanel.open) #einstellungenGruppe,
body:has(#terminePanel.open) #boundaryBtn,
body:has(#terminePanel.open) #userBtn,
body:has(#terminePanel.open) #logbuchBtn,
body:has(#terminePanel.open) #werkzeugBtn,
body:has(#terminePanel.open) #termineBtn,
body:has(#terminePanel.open) #jagdzeitenBtn,
body:has(#terminePanel.open) #ansitzeBtn,
body:has(#terminePanel.open) #statistikBtn,
body:has(#terminePanel.open) #distanceBtn,
body:has(#terminePanel.open) #mondBtn,
body:has(#terminePanel.open) #mondKarte,
body:has(#terminePanel.open) #gpsBtn,
body:has(#terminePanel.open) #setBtn,
body:has(#terminePanel.open) #expandBtn,
body:has(#terminePanel.open) #zentrierenBtn,
body:has(#terminePanel.open) #expandPanel,
body:has(#terminePanel.open) #revierControls,
body:has(#terminePanel.open) #revierTypBox,
body:has(#jagdzeitenPanel.open) #werkzeugPfeil,
body:has(#jagdzeitenPanel.open) #windBtn,
body:has(#jagdzeitenPanel.open) #objektPfeil,
body:has(#jagdzeitenPanel.open) #sidebar,
body:has(#jagdzeitenPanel.open) #setMessage,
body:has(#jagdzeitenPanel.open) #adminBtn,
body:has(#jagdzeitenPanel.open) #einstellungenBtn,
body:has(#jagdzeitenPanel.open) #adminGruppe,
body:has(#jagdzeitenPanel.open) #einstellungenGruppe,
body:has(#jagdzeitenPanel.open) #boundaryBtn,
body:has(#jagdzeitenPanel.open) #userBtn,
body:has(#jagdzeitenPanel.open) #logbuchBtn,
body:has(#jagdzeitenPanel.open) #werkzeugBtn,
body:has(#jagdzeitenPanel.open) #termineBtn,
body:has(#jagdzeitenPanel.open) #jagdzeitenBtn,
body:has(#jagdzeitenPanel.open) #ansitzeBtn,
body:has(#jagdzeitenPanel.open) #statistikBtn,
body:has(#jagdzeitenPanel.open) #distanceBtn,
body:has(#jagdzeitenPanel.open) #mondBtn,
body:has(#jagdzeitenPanel.open) #mondKarte,
body:has(#jagdzeitenPanel.open) #gpsBtn,
body:has(#jagdzeitenPanel.open) #setBtn,
body:has(#jagdzeitenPanel.open) #expandBtn,
body:has(#jagdzeitenPanel.open) #zentrierenBtn,
body:has(#jagdzeitenPanel.open) #expandPanel,
body:has(#jagdzeitenPanel.open) #revierControls,
body:has(#jagdzeitenPanel.open) #revierTypBox,
body:has(#ansitzePanel.open) #werkzeugPfeil,
body:has(#ansitzePanel.open) #windBtn,
body:has(#ansitzePanel.open) #objektPfeil,
body:has(#ansitzePanel.open) #sidebar,
body:has(#ansitzePanel.open) #setMessage,
body:has(#ansitzePanel.open) #adminBtn,
body:has(#ansitzePanel.open) #einstellungenBtn,
body:has(#ansitzePanel.open) #adminGruppe,
body:has(#ansitzePanel.open) #einstellungenGruppe,
body:has(#ansitzePanel.open) #boundaryBtn,
body:has(#ansitzePanel.open) #userBtn,
body:has(#ansitzePanel.open) #logbuchBtn,
body:has(#ansitzePanel.open) #werkzeugBtn,
body:has(#ansitzePanel.open) #termineBtn,
body:has(#ansitzePanel.open) #jagdzeitenBtn,
body:has(#ansitzePanel.open) #ansitzeBtn,
body:has(#ansitzePanel.open) #statistikBtn,
body:has(#ansitzePanel.open) #distanceBtn,
body:has(#ansitzePanel.open) #mondBtn,
body:has(#ansitzePanel.open) #mondKarte,
body:has(#ansitzePanel.open) #gpsBtn,
body:has(#ansitzePanel.open) #setBtn,
body:has(#ansitzePanel.open) #expandBtn,
body:has(#ansitzePanel.open) #zentrierenBtn,
body:has(#ansitzePanel.open) #expandPanel,
body:has(#ansitzePanel.open) #revierControls,
body:has(#ansitzePanel.open) #revierTypBox,
body:has(#statistikPanel.open) #werkzeugPfeil,
body:has(#statistikPanel.open) #windBtn,
body:has(#statistikPanel.open) #objektPfeil,
body:has(#statistikPanel.open) #sidebar,
body:has(#statistikPanel.open) #setMessage,
body:has(#statistikPanel.open) #adminBtn,
body:has(#statistikPanel.open) #einstellungenBtn,
body:has(#statistikPanel.open) #adminGruppe,
body:has(#statistikPanel.open) #einstellungenGruppe,
body:has(#statistikPanel.open) #boundaryBtn,
body:has(#statistikPanel.open) #userBtn,
body:has(#statistikPanel.open) #logbuchBtn,
body:has(#statistikPanel.open) #werkzeugBtn,
body:has(#statistikPanel.open) #termineBtn,
body:has(#statistikPanel.open) #jagdzeitenBtn,
body:has(#statistikPanel.open) #ansitzeBtn,
body:has(#statistikPanel.open) #statistikBtn,
body:has(#statistikPanel.open) #distanceBtn,
body:has(#statistikPanel.open) #mondBtn,
body:has(#statistikPanel.open) #mondKarte,
body:has(#statistikPanel.open) #gpsBtn,
body:has(#statistikPanel.open) #setBtn,
body:has(#statistikPanel.open) #expandBtn,
body:has(#statistikPanel.open) #zentrierenBtn,
body:has(#statistikPanel.open) #expandPanel,
body:has(#statistikPanel.open) #revierControls,
body:has(#statistikPanel.open) #revierTypBox {

    z-index: 300 !important;

}


/*
    Die beiden Fenster selbst liegen immer über
    der Karte — auch dann, wenn gleichzeitig ein
    Popup geöffnet ist.
*/
#reparaturPanel.open,
#statistikPanel.open {

    z-index: 3300 !important;

}


/* =========================
   FILTERFELD AUFGEKLAPPT

   Sobald die Filterleiste aufklappt, treten
   sämtliche Schaltflächen ab — sie würden sonst
   während der Bewegung unter dem Feld
   hindurchscheinen. Das Augen-Register der
   Leiste bleibt sichtbar, es gehört zur Leiste
   selbst.
========================= */

body:has(#sidebar.open) #werkzeugPfeil,
body:has(#sidebar.open) #windBtn,
body:has(#sidebar.open) #objektPfeil,
body:has(#sidebar.open) #adminBtn,
body:has(#sidebar.open) #einstellungenBtn,
body:has(#sidebar.open) #adminGruppe,
body:has(#sidebar.open) #einstellungenGruppe,
body:has(#sidebar.open) #werkzeugBtn,
body:has(#sidebar.open) #termineBtn,
body:has(#sidebar.open) #jagdzeitenBtn,
body:has(#sidebar.open) #ansitzeBtn,
body:has(#sidebar.open) #statistikBtn,
body:has(#sidebar.open) #distanceBtn,
body:has(#sidebar.open) #mondBtn,
body:has(#sidebar.open) #gpsBtn,
body:has(#sidebar.open) #setBtn,
body:has(#sidebar.open) #expandBtn,
body:has(#sidebar.open) #zentrierenBtn,
body:has(#sidebar.open) #expandPanel,
body:has(#sidebar.open) #revierControls,
body:has(#sidebar.open) #revierTypBox {

    display: none !important;

}


/* =========================
   MONDFELD GEÖFFNET

   Auch das Mondfeld steht für sich — alle
   Schaltflächen treten ab, solange es zu sehen
   ist. Geschlossen wird über das × im Feld.
========================= */

body:has(#mondKarte.open) #werkzeugPfeil,
body:has(#mondKarte.open) #windBtn,
body:has(#mondKarte.open) #objektPfeil,
body:has(#mondKarte.open) #sidebar,
body:has(#mondKarte.open) #adminBtn,
body:has(#mondKarte.open) #einstellungenBtn,
body:has(#mondKarte.open) #adminGruppe,
body:has(#mondKarte.open) #einstellungenGruppe,
body:has(#mondKarte.open) #werkzeugBtn,
body:has(#mondKarte.open) #termineBtn,
body:has(#mondKarte.open) #jagdzeitenBtn,
body:has(#mondKarte.open) #ansitzeBtn,
body:has(#mondKarte.open) #statistikBtn,
body:has(#mondKarte.open) #distanceBtn,
body:has(#mondKarte.open) #mondBtn,
body:has(#mondKarte.open) #gpsBtn,
body:has(#mondKarte.open) #setBtn,
body:has(#mondKarte.open) #expandBtn,
body:has(#mondKarte.open) #zentrierenBtn,
body:has(#mondKarte.open) #expandPanel,
body:has(#mondKarte.open) #revierControls,
body:has(#mondKarte.open) #revierTypBox {

    display: none !important;

}


/* =========================
   SCHUSSDISTANZEN AKTIV

   Während die Schussdistanzen angezeigt werden,
   soll die Karte frei liegen — alle übrigen
   Schaltflächen treten ab. Der Knopf
   "Schussdistanzen" selbst bleibt stehen, er ist
   der Weg zurück aus dem Modus.
========================= */

body:has(#distanceBtn.active) #werkzeugPfeil,
body:has(#distanceBtn.active) #windBtn,
body:has(#distanceBtn.active) #objektPfeil,
body:has(#distanceBtn.active) #sidebar,
body:has(#distanceBtn.active) #adminBtn,
body:has(#distanceBtn.active) #einstellungenBtn,
body:has(#distanceBtn.active) #adminGruppe,
body:has(#distanceBtn.active) #einstellungenGruppe,
body:has(#distanceBtn.active) #werkzeugBtn,
body:has(#distanceBtn.active) #termineBtn,
body:has(#distanceBtn.active) #ansitzeBtn,
body:has(#distanceBtn.active) #statistikBtn,
body:has(#distanceBtn.active) #mondBtn,
body:has(#distanceBtn.active) #gpsBtn,
body:has(#distanceBtn.active) #setBtn,
body:has(#distanceBtn.active) #expandBtn,
body:has(#distanceBtn.active) #zentrierenBtn,
body:has(#distanceBtn.active) #expandPanel,
body:has(#distanceBtn.active) #revierControls,
body:has(#distanceBtn.active) #revierTypBox {

    display: none !important;

}


/* =========================
   OBJEKT BEARBEITEN /
   MELDUNG BEARBEITEN

   In beiden Modi bleibt nur die zugehörige
   Schaltfläche samt ihrem Unterfeld stehen —
   alles andere tritt ab. Die verbleibende
   Schaltfläche rückt dabei in die unterste
   Reihe, damit die Karte frei bleibt.

   Das Hinweisbanner und der rote Rahmen bleiben
   sichtbar; sie zeigen ja an, in welchem Modus
   gearbeitet wird.
========================= */


/* --- Objekt bearbeiten --- */

body:has(#revierTypBox.open) #werkzeugPfeil,
body:has(#revierTypBox.open) #windBtn,
body:has(#revierTypBox.open) #objektPfeil,
body:has(#revierTypBox.open) #sidebar,
body:has(#revierTypBox.open) #adminBtn,
body:has(#revierTypBox.open) #einstellungenBtn,
body:has(#revierTypBox.open) #adminGruppe,
body:has(#revierTypBox.open) #einstellungenGruppe,
body:has(#revierTypBox.open) #werkzeugBtn,
body:has(#revierTypBox.open) #termineBtn,
body:has(#revierTypBox.open) #jagdzeitenBtn,
body:has(#revierTypBox.open) #ansitzeBtn,
body:has(#revierTypBox.open) #statistikBtn,
body:has(#revierTypBox.open) #distanceBtn,
body:has(#revierTypBox.open) #mondBtn,
body:has(#revierTypBox.open) #gpsBtn,
body:has(#revierTypBox.open) #zentrierenBtn,
body:has(#revierTypBox.open) #expandBtn,
body:has(#revierTypBox.open) #expandPanel {

    display: none !important;

}


/* "Objekt bearbeiten" in die unterste Reihe */
body:has(#revierTypBox.open) #setBtn {

    bottom: 25px !important;

}

body:has(#revierTypBox.open) #revierTypBox:not(.modus-neu) {

    bottom: 25px !important;

}


/* --- Meldung bearbeiten --- */

body:has(#expandPanel.open) #werkzeugPfeil,
body:has(#expandPanel.open) #windBtn,
body:has(#expandPanel.open) #objektPfeil,
body:has(#expandPanel.open) #sidebar,
body:has(#expandPanel.open) #adminBtn,
body:has(#expandPanel.open) #einstellungenBtn,
body:has(#expandPanel.open) #adminGruppe,
body:has(#expandPanel.open) #einstellungenGruppe,
body:has(#expandPanel.open) #werkzeugBtn,
body:has(#expandPanel.open) #termineBtn,
body:has(#expandPanel.open) #jagdzeitenBtn,
body:has(#expandPanel.open) #ansitzeBtn,
body:has(#expandPanel.open) #statistikBtn,
body:has(#expandPanel.open) #distanceBtn,
body:has(#expandPanel.open) #mondBtn,
body:has(#expandPanel.open) #gpsBtn,
body:has(#expandPanel.open) #zentrierenBtn,
body:has(#expandPanel.open) #setBtn,
body:has(#expandPanel.open) #revierControls {

    display: none !important;

}


/* "Meldung bearbeiten" in die unterste Reihe */
body:has(#expandPanel.open) #expandBtn {

    bottom: 25px !important;

}

body:has(#expandPanel.open) #expandPanel:not(.modus-neu) {

    bottom: 25px !important;

}


/* =========================
   GETROFFENE AUSWAHL —
   FELD SCHRUMPFT ZUSAMMEN

   Ist eine Wildart bzw. ein Einrichtungstyp
   gewählt, zeigt das Feld nur noch diese eine
   Schaltfläche. Ein weiterer Druck darauf hebt
   die Wahl auf und klappt das Feld wieder
   vollständig auf.
========================= */


/* --- Wildarten --- */

#expandPanel.auswahl-aktiv .expandItem:not(.active),
#expandPanel.auswahl-aktiv .gruppenluecke {

    display: none;

}


/*
    Die Gruppe ohne gewählte Wildart wird
    gar nicht erst gezeigt — sonst bliebe
    ihr Abstand als Lücke stehen.
*/
#expandPanel.auswahl-aktiv .expandKopf:not(:has(.expandItem.active)),
#expandPanel.auswahl-aktiv .expandGrid:not(:has(.expandItem.active)) {

    display: none;

}


#expandPanel.auswahl-aktiv .expandKopf {

    margin-bottom: 0;

}


#expandPanel.auswahl-aktiv .expandGrid {

    grid-template-columns: 56px;

}


/* --- Reviereinrichtungen --- */

#revierTypBox.auswahl-aktiv .revierTyp:not(.active) {

    display: none;

}


#revierTypBox.auswahl-aktiv {

    grid-template-columns: 56px;

}


/*
    Die Ansitzeinrichtung steht sonst fest in
    der dritten Spalte. Im geschrumpften Feld
    gibt es nur noch eine — ohne diese Regel
    legte das Raster zwei leere Spalten davor
    an und der Kasten wäre doppelt so breit.
*/
#revierTypBox.auswahl-aktiv .revierTyp[data-typ="Leiter/Kanzel"] {

    grid-column: auto;

}


/* =========================
   IMPRESSUM ZUR KARTE

   Die Quellenangabe unten rechts tritt etwas
   zurück: eine Stufe kleiner als Leaflets
   Vorgabe (11 px) und kursiv.
========================= */

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-attribution a {

    font-size: 10px;

    font-style: italic;

}


/* =========================
   REVIERGRENZE IN BEARBEITUNG

   Beim Bearbeiten der Grenze bleibt nur der
   Knopf "Grenze bearbeiten" stehen — er ist der
   Weg zurück. Alle übrigen Schaltflächen und
   die Filterleiste samt Fähnchen treten ab,
   damit die Karte frei liegt.
========================= */

body:has(#boundaryBtn.active) #werkzeugPfeil,
body:has(#boundaryBtn.active) #windBtn,
body:has(#boundaryBtn.active) #objektPfeil,
body:has(#boundaryBtn.active) #sidebar,
body:has(#boundaryBtn.active) #adminBtn,
body:has(#boundaryBtn.active) #einstellungenBtn,
body:has(#boundaryBtn.active) #profilBtn,
body:has(#boundaryBtn.active) #userBtn,
body:has(#boundaryBtn.active) #logbuchBtn,
body:has(#boundaryBtn.active) #werkzeugBtn,
body:has(#boundaryBtn.active) #termineBtn,
body:has(#boundaryBtn.active) #ansitzeBtn,
body:has(#boundaryBtn.active) #statistikBtn,
body:has(#boundaryBtn.active) #distanceBtn,
body:has(#boundaryBtn.active) #mondBtn,
body:has(#boundaryBtn.active) #gpsBtn,
body:has(#boundaryBtn.active) #setBtn,
body:has(#boundaryBtn.active) #expandBtn,
body:has(#boundaryBtn.active) #zentrierenBtn,
body:has(#boundaryBtn.active) #expandPanel,
body:has(#boundaryBtn.active) #revierControls,
body:has(#boundaryBtn.active) #revierTypBox {

    display: none !important;

}


/*
    Ohne den Admin-Hauptknopf darüber rückt der
    Grenzen-Knopf an dessen Platz nach oben.
*/
body:has(#boundaryBtn.active) #adminGruppe {

    top: 10px !important;

}

/*
    Die Einstellungsgruppe selbst wird nicht
    gebraucht — der Weg zurück führt über
    "Grenze bearbeiten".
*/
body:has(#boundaryBtn.active) #einstellungenGruppe {

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

}


/* =========================
   ADMINBEREICH AUFGEKLAPPT

   Solange die administrative Verwaltung offen
   ist, bleiben nur der Admin-Knopf und seine
   Untertasten stehen. Alle übrigen
   Schaltflächen und die Filterleiste samt
   Fähnchen treten ab.
========================= */

body:has(#adminBtn.open) #werkzeugPfeil,
body:has(#adminBtn.open) #windBtn,
body:has(#adminBtn.open) #objektPfeil,
body:has(#adminBtn.open) #sidebar,
body:has(#adminBtn.open) #werkzeugBtn,
body:has(#adminBtn.open) #termineBtn,
body:has(#adminBtn.open) #jagdzeitenBtn,
body:has(#adminBtn.open) #ansitzeBtn,
body:has(#adminBtn.open) #statistikBtn,
body:has(#adminBtn.open) #distanceBtn,
body:has(#adminBtn.open) #mondBtn,
body:has(#adminBtn.open) #gpsBtn,
body:has(#adminBtn.open) #setBtn,
body:has(#adminBtn.open) #expandBtn,
body:has(#adminBtn.open) #zentrierenBtn,
body:has(#adminBtn.open) #expandPanel,
body:has(#adminBtn.open) #revierControls,
body:has(#adminBtn.open) #revierTypBox {

    display: none !important;

}


/* =========================
   PFEILSPITZE ÜBER DEM
   OBJEKTBUTTON

   Ein breit gezogenes "V" über "Objekt
   bearbeiten". Ein Druck klappt Objekt- und
   Meldungsbutton weg, der nächste holt sie
   zurück. Eingeklappt zeigt die Spitze nach
   oben und rückt an den Platz der Knöpfe.
========================= */

#objektPfeil,
#werkzeugPfeil {
    position: fixed;

    /*
        Kein eigener Kasten — das V steht frei
        auf der Karte. Die Fläche dient nur als
        Trefferfeld für den Finger.
    */
    width: 52px;
    height: 24px;

    background: none;
    border: none;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 2001;
}


#objektPfeil svg,
#werkzeugPfeil svg {
    /*
        Doppelspitze: zwei V mit geringem
        Abstand. Seitenverhältnis wie im
        viewBox, damit nichts verzerrt.
    */
    width: 22px;
    height: 18.3px;

    fill: none;
    stroke: #fff;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;

    /*
        Feiner dunkler Saum — sonst verschwände
        das Weiß über hellen Luftbildern.
    */
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.75));
}


/* Über dem Objektbutton (131 + 52) */
#objektPfeil {

    right: 10px;

    bottom: 184px;

}


/* Über den Ansitzen (184 + 52) */
#werkzeugPfeil {

    left: 10px;

    bottom: 236px;

}


/*
    Eingeklappt: die beiden Felder unter der
    Spitze — Termine und Info — treten ab.
    Schussdistanzen bleibt stehen, die Spitze
    rückt darüber.
*/
body:has(#werkzeugPfeil.zu) #ansitzeBtn,
body:has(#werkzeugPfeil.zu) #termineBtn,
body:has(#werkzeugPfeil.zu) #statistikBtn {

    display: none !important;

}


#werkzeugPfeil.zu {

    bottom: 78px;

}


#werkzeugPfeil.zu svg {

    transform: rotate(180deg);

}


/*
    Eingeklappt: die beiden Knöpfe treten ab,
    die Spitze dreht sich um und rückt auf
    deren Platz nach unten.
*/
body:has(#objektPfeil.zu) #setBtn,
body:has(#objektPfeil.zu) #expandBtn {

    display: none !important;

}


#objektPfeil.zu {

    /* Über der untersten Reihe (25 + 52 + 1) */
    bottom: 78px;

}


#objektPfeil.zu svg {

    transform: rotate(180deg);

}


/* =========================
   SPEICHERN UND LÖSCHEN
   IN EINER ZEILE

   Beide Knöpfe teilen sich die Breite. Ist die
   Meldung noch nicht gespeichert, steht
   "Speichern" allein und nimmt die ganze Zeile
   ein.
========================= */

/*
    DIE UNTERE KNOPFZEILE

    Dieselbe Aufteilung wie der Bildbereich
    darüber: links der breite Knopf, rechts der
    schmale von 78 Pixeln, dazwischen 8 Pixel.
    Damit stehen Speichern und "Bild hochladen"
    untereinander gleich breit, und die
    Vorschau hat den Löschen-Knopf genau unter
    sich.

    Die Breite ist hier auch eine Gewichtung: Das
    Speichern trifft man, das Löschen sucht man.
*/
.observation-popup .popup-row.aktionen {

    display: flex;

    gap: 8px;

}


.observation-popup .popup-row.aktionen #saveObservationBtn {

    flex: 1 1 0;
    min-width: 0;

    width: auto;

}


.observation-popup .popup-row.aktionen #deleteObservationBtn {

    flex: 0 0 78px;

    width: 78px;

    padding: 5px 4px;

    font-size: 13px;

}


.observation-popup .popup-row.aktionen #deleteObservationBtn
.knopf-zusatz {

    font-size: 10.5px;

}


/* =========================
   BLICKRICHTUNG DER WILDKAMERA

   Der Pfeil liegt in einer eigenen, größeren
   Ablage über dem Symbol und darf über dessen
   Rand hinausragen.
========================= */

.svgMarker {

    overflow: visible;

}


.svgMarker .kameraPfeil {

    position: absolute;

    left: -25%;
    top: -25%;

    width: 150%;
    height: 150%;

    overflow: visible;

    pointer-events: none;
}


/* =========================
   BLICKRICHTUNG BLÄTTERN

   Eine Zeile: zwei Pfeiltasten und dazwischen
   die aktuelle Richtung mit Gradzahl.
========================= */

.richtung-schritt {

    display: flex;

    align-items: center;

    gap: 4px;

}


/*
    Höhere Gewichtung als die allgemeine Regel
    für graue Popup-Knöpfe (button[type="button"]).
*/
.observation-popup .richtung-schritt button[type="button"] {

    width: 26px;

    height: 26px;

    flex: 0 0 26px;

    padding: 0;

    font-size: 15px;

    line-height: 1;

    border: 1px solid #c4c4c4;

    border-radius: 5px;

    background: #f5f5f5;

    color: #333;

}


.observation-popup .richtung-schritt button[type="button"]:hover {

    background: #e8e8e8;

}


.richtung-schritt .richtung-wert {

    flex: 1;

    text-align: center;

    font-size: 12px;

    padding: 3px;

    border: 1px solid #aaa;

    border-radius: 5px;

    background: #fff;

}


/* =========================
   WIND

   Knopf in der zweiten Spalte über dem
   Mondknopf; Feld in der Kartenmitte, im
   Aufbau wie das Mondfeld.
========================= */

#windBtn {
    position: fixed;

    /* Rechts neben dem Mondknopf, gleiche Fuge */
    left: 169px;
    bottom: 25px;

    width: 50px;
    height: 50px;

    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;

    font-family: var(--schrift);
    font-size: 9px;
    color: #333;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1px;
    line-height: 9px;

    z-index: 2001;
    transition: background 0.2s ease;
}

#windBtn svg {
    width: 26px;
    height: 26px;
    stroke: #333;
    fill: none;

    /*
        Gleiche Strichstärke wie beim
        Sonne-Mond-Symbol: 0,92 bei 26 px
        Darstellung ergibt 1,0 px.
    */
    stroke-width: 0.92;
    color: #333;
}

#windBtn.open {
    background: #f28c28;
    color: #fff;
}

#windBtn.open svg {
    stroke: #fff;
    color: #fff;
}


/* --- Feld --- */

#windKarte {
    position: fixed;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;

    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 8px 12px;
    padding: 10px 14px 12px;

    background: rgba(0, 0, 0, 0.82);
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    font-family: var(--schrift);
    color: #fff;
    z-index: 2100;
}

#windKarte.open {
    display: grid;
}

.wind-scheibe {
    grid-column: 1;
    grid-row: 1;
    width: 84px;
    height: 84px;
}

.wind-scheibe-bild {
    width: 84px;
    height: 84px;
    display: block;
}

.wind-rose {
    fill: #fff;
    font-size: 11px;
    font-family: var(--schrift);
    text-anchor: middle;
    opacity: 0.8;
}

#windAngaben {
    grid-column: 2;
    grid-row: 1;
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
}

.wind-lage {
    font-weight: bold;
    margin-bottom: 2px;
}

.wind-klein {
    color: #cfcfcf;
}


/* Blättern zwischen den Tagen */
#windTage {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 12px;
    color: #fff;
}

#windTage button {
    background: none;
    border: none;
    color: #fff;
    font: 20px/20px var(--schrift);
    cursor: pointer;
    padding: 0 6px;
    opacity: 0.75;
}

#windTage button:hover {
    opacity: 1;
}


/* Stundenliste */
#windStunden {
    grid-column: 1 / -1;
}

table.wind-stunden {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: #fff;
}

table.wind-stunden th {
    font-weight: normal;
    color: #cfcfcf;
    font-size: 11px;
    padding: 0 6px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

table.wind-stunden td {
    padding: 1px 6px;
    text-align: center;
}

table.wind-stunden td:first-child,
table.wind-stunden th:first-child {
    text-align: right;
}

table.wind-stunden tr.jetzt td {
    color: #f7a94a;
    font-weight: bold;
}

td.pfeil {
    width: 1%;
    padding: 0 2px;
}

.wind-pfeil {
    width: 15px;
    height: 15px;
    display: block;
}

.wind-hinweis {
    font-size: 11px;
    color: #cfcfcf;
    padding: 4px 2px;
    max-width: 240px;
    white-space: normal;
}

#windQuelle {
    grid-column: 1 / -1;
    font-size: 9.5px;
    line-height: 12px;
    color: #a8a8a8;
    max-width: 250px;
    white-space: normal;
    margin-top: 2px;
}

#windSchliessen {
    position: absolute;
    top: 2px;
    right: 6px;
    background: none;
    border: none;
    color: #fff;
    font: 17px/17px var(--schrift);
    cursor: pointer;
    opacity: 0.75;
    padding: 0;
}

#windSchliessen:hover {
    opacity: 1;
}


/* =========================
   WINDFELD GEÖFFNET

   Wie beim Mondfeld: alle Schaltflächen und die
   Filterleiste treten ab, geschlossen wird über
   das × im Feld.
========================= */

body:has(#windKarte.open) #sidebar,
body:has(#windKarte.open) #objektPfeil,
body:has(#windKarte.open) #werkzeugPfeil,
body:has(#windKarte.open) #adminBtn,
body:has(#windKarte.open) #einstellungenBtn,
body:has(#windKarte.open) #adminGruppe,
body:has(#windKarte.open) #einstellungenGruppe,
body:has(#windKarte.open) #werkzeugBtn,
body:has(#windKarte.open) #termineBtn,
body:has(#windKarte.open) #jagdzeitenBtn,
body:has(#windKarte.open) #ansitzeBtn,
body:has(#windKarte.open) #statistikBtn,
body:has(#windKarte.open) #distanceBtn,
body:has(#windKarte.open) #mondBtn,
body:has(#windKarte.open) #windBtn,
body:has(#windKarte.open) #gpsBtn,
body:has(#windKarte.open) #setBtn,
body:has(#windKarte.open) #expandBtn,
body:has(#windKarte.open) #zentrierenBtn,
body:has(#windKarte.open) #expandPanel,
body:has(#windKarte.open) #revierControls,
body:has(#windKarte.open) #revierTypBox {

    display: none !important;

}


/* Schaltfläche für den Windkegel */
/*
    Die drei Schaltflächen: oben nebeneinander
    Kegel und Strömung, darunter über die volle
    Breite "beides".
*/
#windZeigen {

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;

    margin-top: 4px;

}

#windBeidesBtn {

    grid-column: 1 / -1;

}

#windZeigen button {

    width: 100%;

    padding: 8px;

    border: none;

    border-radius: 6px;

    background: #3b7d2a;

    color: #fff;

    font-family: var(--schrift);

    font-size: 13px;

    cursor: pointer;

    transition: background 0.2s ease;

}


#windZeigen button:hover {

    background: #326b24;

}


/* Stunde wählbar */
table.wind-stunden tr[data-stunde] {

    cursor: pointer;

}


table.wind-stunden tr[data-stunde]:hover td {

    background: rgba(255, 255, 255, 0.09);

}


table.wind-stunden tr.gewaehlt td {

    background: rgba(247, 169, 74, 0.22);

    font-weight: bold;

}


/* =========================
   ZEITREGLER FÜR DEN WIND

   Unten in der Kartenmitte. Er erscheint
   zusammen mit dem Witterungskegel; solange er
   steht, treten die Schaltflächen ab — sonst
   bliebe in der Breite kein Platz.
========================= */

#windRegler {
    position: fixed;

    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;

    width: min(460px, calc(100vw - 20px));

    display: none;
    align-items: center;
    gap: 8px;

    padding: 7px 10px 8px;

    background: rgba(0, 0, 0, 0.82);
    border: 1px solid #000;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);

    font-family: var(--schrift);
    font-size: 12px;
    color: #fff;

    z-index: 2100;
}

#windRegler.open {
    display: flex;
    flex-wrap: wrap;
}

/* Kopfzeile: Beschreibung und Schließen-Kreuz */
#windReglerKopf {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

#windReglerText {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#windReglerFeld {
    flex: 1;
    margin: 0;
    accent-color: #f7a94a;
    cursor: pointer;
}

/*
    Das Kreuz oben rechts. Gleiche Sprache wie
    die Zeitangabe daneben: dunkles Feld,
    schwarzer Rand, oranger Inhalt.
*/
#windReglerZu {

    position: fixed;

    top: 10px;
    right: 10px;

    display: none;

    width: 28px;
    height: 28px;

    padding: 0;

    background: rgba(0, 0, 0, 0.82);
    border: 1px solid #000;
    border-radius: 8px;

    font: 18px/1 var(--schrift);
    color: #f7a94a;

    cursor: pointer;

    align-items: center;
    justify-content: center;

    z-index: 2100;

}

#windReglerZu.open {

    display: flex;

}

#windReglerZu:hover {

    background: rgba(0, 0, 0, 0.95);

}


/*
    Solange der Regler steht, treten die
    Schaltflächen und die Filterleiste ab.
*/
body:has(#windRegler.open) #sidebar,
body:has(#windRegler.open) #objektPfeil,
body:has(#windRegler.open) #werkzeugPfeil,
body:has(#windRegler.open) #adminBtn,
body:has(#windRegler.open) #einstellungenBtn,
body:has(#windRegler.open) #adminGruppe,
body:has(#windRegler.open) #einstellungenGruppe,
body:has(#windRegler.open) #werkzeugBtn,
body:has(#windRegler.open) #termineBtn,
body:has(#windRegler.open) #jagdzeitenBtn,
body:has(#windRegler.open) #ansitzeBtn,
body:has(#windRegler.open) #statistikBtn,
body:has(#windRegler.open) #distanceBtn,
body:has(#windRegler.open) #mondBtn,
body:has(#windRegler.open) #windBtn,
body:has(#windRegler.open) #gpsBtn,
body:has(#windRegler.open) #setBtn,
body:has(#windRegler.open) #expandBtn,
body:has(#windRegler.open) #zentrierenBtn,
body:has(#windRegler.open) #expandPanel,
body:has(#windRegler.open) #revierControls,
body:has(#windRegler.open) #revierTypBox {

    display: none !important;

}


/* Pfeiltasten und Stundenskala am Zeitregler */

#windReglerZurueck,
#windReglerVor {

    flex: 0 0 auto;

    background: none;

    border: none;

    color: #fff;

    font: 19px/19px var(--schrift);

    cursor: pointer;

    padding: 0 4px;

    opacity: 0.75;

}


#windReglerZurueck:hover,
#windReglerVor:hover {

    opacity: 1;

}


/*
    Regler und Skala teilen sich eine Bahn —
    dadurch stimmt die Breite überein und die
    Marken stehen über der Stelle, die sie
    meinen.
*/
#windReglerBahn {

    flex: 1;

    position: relative;

}


#windReglerBahn #windReglerFeld {

    width: 100%;

    display: block;

}


#windReglerSkala {

    position: relative;

    height: 11px;

    margin-top: 1px;

    font-size: 8.5px;

    line-height: 11px;

    color: #b9b9b9;

}


#windReglerSkala span {

    position: absolute;

    transform: translateX(-50%);

    white-space: nowrap;

}


/* =========================
   ZEIT DES WITTERUNGSKEGELS

   Steht in der Karte, nicht im Feld — so ist
   auch bei geschlossenem Windfeld ablesbar, für
   welche Stunde die Keile gelten.
========================= */

#witterungZeit {

    position: fixed;

    top: 10px;
    left: 50%;
    transform: translateX(-50%);

    display: none;

    padding: 4px 10px;

    background: rgba(0, 0, 0, 0.82);
    border: 1px solid #000;
    border-radius: 8px;

    font-family: var(--schrift);
    font-size: 12px;
    color: #f7a94a;
    white-space: nowrap;
    text-align: center;

    pointer-events: none;

    z-index: 2100;

}


#witterungZeit.open {

    display: block;

}


/*
    Die Uhrzeit hebt sich von der Überschrift ab —
    sie ist die Angabe, auf die es ankommt.
*/
/*
    Tag und Stunde stehen in einer eigenen Zeile
    unter der Bezeichnung. "Windkegel und
    Windströmung heute 14 Uhr" in einer Zeile ist
    auf dem Handy breiter als der Bildschirm —
    und da das Feld nicht umbrechen darf
    (white-space: nowrap, sonst tanzte es bei
    jedem Stundenwechsel in der Breite), lief es
    an beiden Seiten hinaus.
*/
.witterung-zeit-wert {

    display: block;

    margin-left: 0;
    margin-top: 1px;

    text-align: center;

    font-size: 15px;
    font-weight: bold;

}


/*
    Mitternacht des Folgetages in der
    Stundenliste — hochgestelltes Kreuz.
*/
.wind-plus {

    font-size: 9px;

    vertical-align: super;

    color: #cfcfcf;

}


/*
    Zusatz hinter einer Einmessungs-Auswahl —
    steht kleiner in der Zeile darunter, weil
    "nicht erforderlich (im Luftbild sichtbar)"
    zusammen breiter wäre als das Popup.
*/
.observation-popup .einmessung-text {

    display: block;

}


.observation-popup .einmessung-zusatz {

    display: block;

    font-size: 10px;

    color: #777;

    line-height: 12px;

}


/*
    Windfahne in der Karte, oben links —
    dieselbe Zeichnung wie im Windfeld, nur
    kleiner. Sie steht mit den Kegeln.
*/
#witterungScheibe {

    position: fixed;

    top: 10px;
    left: 10px;

    display: none;

    width: 72px;
    height: 72px;

    padding: 4px;

    background: rgba(0, 0, 0, 0.82);
    border: 1px solid #000;
    border-radius: 10px;

    box-sizing: border-box;

    pointer-events: none;

    z-index: 2100;

}


#witterungScheibe.open {

    display: block;

}


#witterungScheibe .wind-scheibe-bild {

    width: 100%;

    height: 100%;

}


/*
    Stundenwahl neben der Windfahne — Pfeile
    beidseits der Zeitangabe.
*/
.wind-stunde-wahl {

    display: flex;

    align-items: center;

    gap: 6px;

}


.wind-stunde-wahl button {

    background: none;

    border: none;

    color: #fff;

    font: 16px/16px var(--schrift);

    cursor: pointer;

    padding: 0 3px;

    opacity: 0.75;

}


.wind-stunde-wahl button:hover {

    opacity: 1;

}


/* =========================
   NUTZERVERWALTUNG
========================= */

/* Zeilen der Liste */
.nutzer-zeile {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 6px;

    border-bottom: 1px solid #e2e2e2;

    cursor: pointer;

}


.nutzer-zeile:hover {

    background: #f4f4f4;

}


.nutzer-wer {

    flex: 1;

    min-width: 0;

}


.nutzer-name {

    font-size: 13px;

    font-weight: bold;

}


.nutzer-status {

    font-size: 10px;

    font-weight: normal;

    color: #fff;

    background: #f28c28;

    border-radius: 4px;

    padding: 1px 5px;

    vertical-align: 1px;

}


.nutzer-kennung {

    font-size: 11px;

    color: #777;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.nutzer-rolle {

    text-align: right;

    white-space: nowrap;

}


.nutzer-marke {

    display: inline-block;

    font-size: 11px;

    color: #fff;

    background: #3b7d2a;

    border-radius: 4px;

    padding: 2px 7px;

}


.nutzer-anzahl {

    display: block;

    font-size: 10px;

    color: #777;

    margin-top: 2px;

}


.nutzer-pfeil {

    color: #999;

    font-size: 16px;

}


.nutzer-leer {

    padding: 14px 6px;

    font-size: 12px;

    color: #777;

}


/* Fuß mit Hinzufügen-Knopf */
.nutzer-fuss {

    padding-top: 10px;

}


#nutzerNeuBtn {

    width: 100%;

    padding: 9px;

    border: none;

    border-radius: 6px;

    background: #3b7d2a;

    color: #fff;

    font-family: var(--schrift);

    font-size: 14px;

    cursor: pointer;

}


#nutzerNeuBtn:hover {

    background: #326b24;

}


.nutzer-hinweis {

    font-size: 10.5px;

    line-height: 13px;

    color: #888;

    margin-top: 8px;

}


/* Formular */
.nutzer-formular .popup-row > label:first-child {

    display: block;

    font-weight: bold;

    font-size: 12px;

    margin-bottom: 2px;

}


.nutzer-formular input[type="text"],
.nutzer-formular input[type="email"],
.nutzer-formular select {

    width: 100%;

    box-sizing: border-box;

    padding: 5px;

    border-radius: 5px;

    border: 1px solid #aaa;

    font-size: 13px;

    font-family: var(--schrift);

}


.nutzer-formular .popup-row {

    margin-bottom: 9px;

}


.nutzer-rechte {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.nutzer-rechte label {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 12.5px;

    font-weight: normal;

    cursor: pointer;

}


/*
    Hier stand nur "checkbox" — die Optionsfelder
    beim Umfang sind aber radio, und die behielten
    damit ihren Standardabstand von rund 3 px oben
    und unten. Das war der Platz zwischen den
    beiden Zeilen, den kein gap und kein margin
    wegbrachte: Er saß im Eingabefeld selbst.
*/
.nutzer-rechte input[type="checkbox"],
.nutzer-rechte input[type="radio"] {

    margin: 0;

}


/* Speichern / Abbrechen / Löschen in einer Zeile */
.nutzer-knoepfe {

    display: flex;

    gap: 6px;

}


.nutzer-knoepfe button {

    flex: 1;

    padding: 9px 4px;

    border: none;

    border-radius: 6px;

    font-family: var(--schrift);

    font-size: 13px;

    color: #fff;

    cursor: pointer;

}


#nutzerSpeichern {

    background: #3b7d2a;

}


#nutzerSpeichern:hover {

    background: #326b24;

}


/*
    SPERREN — DER MILDERE DER BEIDEN EINGRIFFE

    Bernstein, nicht rot: Gesperrt ist umkehrbar,
    entfernt nicht. Die Farbe soll den Unterschied
    schon vor dem Lesen sagen, damit die beiden
    Knöpfe nebeneinander nicht gleich gefährlich
    aussehen.
*/
#nutzerSperren.sperrBtn {

    background: #b8791b;

}


#nutzerSperren.sperrBtn:hover {

    background: #99640f;

}


/* Zurückholen ist keine Warnung, sondern Alltag */
#nutzerSperren.entsperrBtn {

    background: #666;

}


#nutzerSperren.entsperrBtn:hover {

    background: #444;

}


#nutzerLoeschen {

    background: #b3261e;

}


#nutzerLoeschen:hover {

    background: #8c1d17;

}


/*
    Der zweite Druck steht an. Dunkler und fett —
    ein Knopf, der sich sichtbar geändert hat, wird
    nicht aus Gewohnheit ein zweites Mal getroffen.
*/
#nutzerLoeschen.scharf {

    background: #7a1611;

    font-weight: bold;

}


#nutzerLoeschen:disabled {

    background: #999;

    cursor: default;

}


/*
    Der Rückwegpfeil im Balken. Sieht aus wie das
    Kreuz daneben — beides sind Wege aus dem
    Fenster, nur verschieden weit.
*/
#nutzerZurueckKopf {

    background: none;

    border: none;

    color: #fff;

    font: 22px/22px var(--schrift);

    cursor: pointer;

    padding: 0 6px 0 0;

}


/*
    Gesperrt: Die Auskunft steht neben dem Namen und
    soll sich vom sachlichen "ohne Zugang" abheben —
    das eine ist ein Zustand auf dem Weg, das andere
    eine Entscheidung.
*/
.nutzer-status.gesperrt {

    color: #b3261e;

    font-weight: bold;

}


/* Marke des Besitzers — dunkler als die Rollen */
.nutzer-marke.besitzer {

    background: #1f4517;

}


/*
    Innenrand des Nutzerfensters. Die Tabellen
    von Reparaturbedarf und Statistik laufen
    bewusst bis an den Rand — deshalb nur hier,
    nicht am gemeinsamen Inhaltsbereich.
*/
#nutzerInhalt {

    padding: 10px 12px 12px;

}


/* =========================
   DREI ZONEN IM NUTZERFORMULAR

   Bisher rollte das ganze Formular. Bei den
   Rechten unten war dann weder zu sehen, an wem
   man gerade arbeitet, noch wo gespeichert wird —
   man rollte hoch, sah nach, rollte zurück und
   hatte die Stelle verloren.

   Jetzt stehen Name, E-Mail und Rolle oben fest,
   Zugang und Knöpfe unten fest, und gerollt wird
   nur die Mitte.

   WARUM min-height: 0

   Ein Flex-Kind ist von Haus aus mindestens so
   hoch wie sein Inhalt und schrumpft nicht
   darunter. Ohne diese Zeile wüchse die Mitte über
   das Fenster hinaus, statt zu rollen — und die
   Fusszeile stünde ausserhalb.
========================= */

#nutzerInhalt.formular {

    display: flex;
    flex-direction: column;

    /* Das Rollen übernimmt die Mitte */
    overflow: hidden;

    min-height: 0;

    /* Der Innenabstand wandert in die drei Zonen */
    padding: 0;

}


#nutzerInhalt.formular .nutzer-formular {

    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    min-height: 0;

}


#nutzerInhalt.formular .nutzer-formular-kopf {

    flex: 0 0 auto;

    /*
        Unten etwas Luft: Der Aussenabstand der
        letzten Zeile ist weggenommen (Regel weiter
        unten), sonst stiesse das Rollenfeld
        unmittelbar an die Trennlinie.
    */
    padding: 10px 12px 8px;

}


#nutzerInhalt.formular .nutzer-formular-mitte {

    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    /*
        Etwas Luft oben und unten, damit die
        gerollten Zeilen nicht an den festen Zonen
        kleben.
    */
    padding: 6px 12px;

    /*
        Zwei Haarlinien sagen, wo das Feste aufhört
        und das Rollende anfängt. Ohne sie wirkt das
        Stehenbleiben der oberen Felder wie ein
        Fehler im Rollen.
    */
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;

}


#nutzerInhalt.formular .nutzer-formular-fuss {

    flex: 0 0 auto;

    padding: 9px 12px 12px;

}


/*
    Der Zugangsblock bringt seinen eigenen
    Trennstrich mit — der stammt aus der Zeit, als
    das ganze Formular am Stück rollte und die
    Abschnitte sich selbst voneinander absetzen
    mussten.

    In der festen Fusszone steht darüber schon die
    Linie, die das Rollende vom Festen trennt. Zwei
    Striche mit ein paar Pixeln dazwischen sehen
    aus wie ein Versehen, nicht wie eine
    Gliederung.
*/
#nutzerInhalt.formular
    .nutzer-formular-fuss .nutzer-zugang {

    margin-top: 0;
    padding-top: 0;

    border-top: none;

}


/*
    Die letzte Zeile jeder festen Zone braucht
    ihren Aussenabstand nicht mehr — die Zone
    selbst hat ihren Innenabstand.
*/
#nutzerInhalt.formular
    .nutzer-formular-kopf .popup-row:last-child,
#nutzerInhalt.formular
    .nutzer-formular-mitte .popup-row:last-child,
#nutzerInhalt.formular
    .nutzer-formular-fuss .popup-row:last-child {

    margin-bottom: 0;

}


/* Zeile, die der Bediener nicht anfassen darf */
.nutzer-zeile.gesperrt {

    cursor: default;

}


.nutzer-zeile.gesperrt:hover {

    background: none;

}


/* Kennzeichnung der Administratoren-Rechte */
.nutzer-nur-admin {

    font-size: 10px;

    color: #999;

}


.nutzer-rechte label.gesperrt {

    color: #aaa;

    cursor: default;

}


/*
    Vor- und Nachname nebeneinander.

    Zwei kurze Felder untereinander verschenken
    eine Zeile — und die beiden gehören ohnehin
    zusammen. Gleiche Breite, damit die Zeile
    ruhig steht.
*/
.nutzer-formular .popup-row.nutzer-name-zeile {

    display: flex;
    gap: 8px;

}

.nutzer-formular .nutzer-name-teil {

    flex: 1 1 0;
    min-width: 0;

}

/*
    Die Beschriftung steht jetzt eine Ebene tiefer
    und wird von ".popup-row > label:first-child"
    nicht mehr erwischt — dort hängen fett, Größe
    und Abstand. Ohne diese Zeilen fiele sie auf
    die Grundschrift zurück und wäre plötzlich
    größer als alle anderen Überschriften im
    Formular.
*/
.nutzer-formular .nutzer-name-teil > label:first-child {

    display: block;

    font-weight: bold;
    font-size: 12px;

    margin-bottom: 2px;

}

.nutzer-formular .nutzer-name-teil input {

    width: 100%;
    box-sizing: border-box;

}


/* Unterrechte rücken unter ihr Hauptrecht ein */
.nutzer-rechte label.eingerueckt {

    margin-left: 18px;

}


/*
    Die Artenauswahl unter "Reviereinrichtungen
    erfassen und bearbeiten".

    Zwei Spalten statt einer langen Reihe: sechs
    Arten untereinander wären eine halbe Seite,
    und die Namen sind kurz. Etwas kleiner als die
    Rechte darüber — sie zählen auf, was ein Recht
    umfasst, und sind ihm damit untergeordnet.
*/
/*
    Überschrift über einer der beiden
    Unterlisten. Ohne sie stünden elf Häkchen
    untereinander, und keiner wüsste, welche
    wozu gehören.
*/
.nutzer-rechte .nutzer-unterliste-kopf {

    /*
        NEGATIVER ABSTAND — WARUM

        .nutzer-rechte ist ein Flex-Kasten mit
        "gap: 4px". Dieser Abstand steht zwischen
        ALLEN seinen Kindern, also auch zwischen
        diesen Zwischenüberschriften und den Listen.
        Ein eigener Aussenabstand kam bisher obendrauf
        — deshalb blieb es weit, egal wie klein ich
        ihn machte. Margins fallen im Flex-Kasten
        auch nicht zusammen.

        Also wird der Abstand hier abgezogen statt
        hinzugefügt.
    */
    /*
        Eingerückt wie die Unterrechte darüber
        ("Einmessungsstatus …"): dieselben 18 px,
        kein zusätzlicher Einzug und kein
        senkrechter Strich. Alles, was zum Recht
        auf Reviereinrichtungen gehört, steht damit
        auf einer Linie.
    */
    margin: -2px 0 0 18px;

    font-size: 11px;
    font-style: italic;
    line-height: 1.3;
    color: #777;

}

.nutzer-rechte .nutzer-arten {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;

    margin: -3px 0 0 18px;

}

.nutzer-rechte .nutzer-arten label.art {

    margin: 0;

    font-size: 12px;
    color: #444;

}

/*
    Der Umfang steht einspaltig: Zwei Zeilen
    untereinander lesen sich als Entweder-oder,
    nebeneinander als zwei Haken, die man beide
    setzen könnte.
*/
.nutzer-rechte .nutzer-arten.nutzer-modus {

    grid-template-columns: 1fr;

    /*
        Enger als die zweispaltigen Listen: Zwei
        Zeilen, die einander ausschließen, gehören
        dicht beieinander — mit dem Abstand der
        übrigen Listen sähen sie aus wie zwei
        unabhängige Angaben.

        Auch die Zeilenhöhe wird zurückgenommen:
        Zwischen dem Umfang und den Feldern darunter
        besteht ein Zusammenhang, kein Schnitt.

        3 px Luft zwischen den beiden Zeilen — ganz
        auf null gesetzt klebten sie aneinander.

        Nach aussen dagegen etwas mehr: Der Umfang
        ist eine Entscheidung, die Listen darüber
        und darunter sind Aufzählungen. Ein wenig
        Luft davor und danach trennt das eine vom
        anderen, ohne den Zusammenhang zu
        zerschneiden.
    */
    gap: 3px;

    margin-top: 2px;
    margin-bottom: 4px;

}

.nutzer-rechte .nutzer-arten.nutzer-modus label.art {

    line-height: 1.15;

}

/*
    DIE BEIDEN UMFANGSÜBERSCHRIFTEN

    "setzen und bearbeiten von
    Reviereinrichtungen:" und ihre Schwester sind
    keine Beschriftung einer Aufzählung, sondern
    die Fortsetzung des Rechts darüber — sie sagen,
    in welchem Umfang es gilt. Deshalb tragen sie
    dieselbe Schriftgröße wie die Rechtezeilen und
    nicht die kleinere der Zwischenüberschriften.

    Aufrecht und schwarz: Kursiv und grau lesen
    sich als Nebenbemerkung. Diese beiden Zeilen
    sind aber keine Nebenbemerkung, sondern die
    Ansage, unter der die Arten darunter stehen.

    Die kleineren Zwischenüberschriften ("änderbare
    Felder") bleiben davon unberührt — die
    beschriften nur eine Aufzählung.
*/
.nutzer-rechte .nutzer-unterliste-kopf.umfang {

    font-size: 12.5px;
    font-style: normal;
    color: #000;

    /*
        Etwas Luft davor: Hier fängt ein neuer
        Abschnitt an. Die allgemeine Regel oben
        zieht 2 px ab, um den Flex-Abstand
        auszugleichen — für diese beiden Zeilen
        wird stattdessen etwas draufgelegt.
    */
    margin-top: 5px;

}


/*
    Eine Stufe tiefer: Die Listen, die zu einer
    der beiden Umfangs-Möglichkeiten gehören,
    rücken unter ihr ein.
*/
.nutzer-rechte .nutzer-unterliste-kopf.tief,
.nutzer-rechte .nutzer-arten.tief {

    margin-left: 34px;

}

.nutzer-rechte .nutzer-arten label.art.gesperrt {

    color: #aaa;
    cursor: default;

}


/*
    Ein Feld, das der Bediener nicht ändern darf:
    grau, aber lesbar. Der Wert gehört zur
    Einrichtung — er soll ihn sehen, nur nicht
    überschreiben.
*/
.observation-popup .popup-row.feld-gesperrt > label {

    color: #aaa;

}

.observation-popup .popup-row.feld-gesperrt input,
.observation-popup .popup-row.feld-gesperrt select,
.observation-popup .popup-row.feld-gesperrt textarea {

    background: #f4f4f4;
    color: #777;

    cursor: default;

}

.observation-popup .popup-row.feld-gesperrt .funk-optionen label {

    color: #aaa;

}


/* =========================
   LOGBUCH
========================= */

#logbuchInhalt {

    padding: 10px 12px 12px;

}


table.logbuch-tabelle {

    width: 100%;

    border-collapse: collapse;

    font-size: 12px;

}


table.logbuch-tabelle th {

    text-align: left;

    font-size: 11px;

    color: #666;

    border-bottom: 1px solid #ddd;

    padding: 2px 6px 4px;

}


table.logbuch-tabelle td {

    padding: 4px 6px;

    border-bottom: 1px solid #eee;

    vertical-align: top;

}


td.logbuch-zeit {

    white-space: nowrap;

    color: #666;

}


.logbuch-klein {

    font-size: 11px;

    color: #888;

}


.logbuch-hinweis {

    font-size: 12px;

    color: #777;

    line-height: 16px;

}


/* =========================
   LOGBUCH VORZEITIG KÜRZEN

   Steht unter der Frist und nur beim Besitzer.
   Bewusst am Fuss und nicht im Kopf: Es ist kein
   Filter, mit dem man arbeitet, sondern ein
   Eingriff, den man selten tut.
========================= */

.logbuch-kuerzen {

    margin: 10px 12px 12px;

    padding-top: 9px;

    border-top: 1px solid #e2e2e2;

}


.logbuch-kuerzen > label {

    display: block;

    font-size: 12px;

    font-weight: bold;

    color: #444;

    margin-bottom: 4px;

}


.logbuch-kuerzen-zeile {

    display: flex;

    align-items: center;

    gap: 6px;

}


.logbuch-kuerzen input[type="date"] {

    flex: 1 1 auto;

    min-width: 0;

    padding: 4px 5px;

    border: 1px solid #aaa;

    border-radius: 5px;

    font-size: 13px;

    font-family: var(--schrift);

}


.logbuch-kuerzen button {

    flex: 0 0 auto;

    padding: 5px 10px;

    border: 1px solid #a33;

    border-radius: 5px;

    background: #fff;

    color: #a33;

    font-size: 12.5px;

    font-family: var(--schrift);

    cursor: pointer;

}


/*
    Zweiter Druck steht an: Der Knopf färbt sich,
    statt dass ein Fenster aufspringt. Wer ihn so
    sieht, weiss, dass der nächste Druck wirkt.
*/
.logbuch-kuerzen button.scharf {

    background: #a33;

    color: #fff;

    font-weight: bold;

}


.logbuch-kuerzen button:disabled {

    border-color: #bbb;

    background: #eee;

    color: #888;

    cursor: default;

}


.logbuch-kuerzen-hinweis {

    margin-top: 4px;

    font-size: 11px;

    color: #888;

}


/* =========================
   NUTZERVERWALTUNG / LOGBUCH
   GEÖFFNET

   Beide Fenster stehen für sich: Sämtliche
   Schaltflächen treten ab, und der rote Rahmen
   des Adminbereichs verschwindet — er umrandet
   ja die Karte, die hier gar nicht gebraucht
   wird.

   Das rote Hinweisfenster geht mit dem Rahmen
   zusammen ab und kommt mit ihm zurück.
========================= */

body:has(#nutzerPanel.open) #setMessage,
body:has(#profilPanel.open) #setMessage,
body:has(#einstellungenPanel.open) #setMessage,
body:has(#nutzerPanel.open) #sidebar,
body:has(#profilPanel.open) #sidebar,
body:has(#einstellungenPanel.open) #sidebar,
body:has(#nutzerPanel.open) #objektPfeil,
body:has(#profilPanel.open) #objektPfeil,
body:has(#einstellungenPanel.open) #objektPfeil,
body:has(#nutzerPanel.open) #werkzeugPfeil,
body:has(#profilPanel.open) #werkzeugPfeil,
body:has(#einstellungenPanel.open) #werkzeugPfeil,
body:has(#nutzerPanel.open) #adminBtn,
body:has(#nutzerPanel.open) #einstellungenBtn,
body:has(#profilPanel.open) #adminBtn,
body:has(#profilPanel.open) #einstellungenBtn,
body:has(#einstellungenPanel.open) #adminBtn,
body:has(#einstellungenPanel.open) #einstellungenBtn,
body:has(#nutzerPanel.open) #adminGruppe,
body:has(#nutzerPanel.open) #einstellungenGruppe,
body:has(#profilPanel.open) #adminGruppe,
body:has(#profilPanel.open) #einstellungenGruppe,
body:has(#einstellungenPanel.open) #adminGruppe,
body:has(#einstellungenPanel.open) #einstellungenGruppe,
body:has(#nutzerPanel.open) #werkzeugBtn,
body:has(#profilPanel.open) #werkzeugBtn,
body:has(#einstellungenPanel.open) #werkzeugBtn,
body:has(#nutzerPanel.open) #termineBtn,
body:has(#nutzerPanel.open) #jagdzeitenBtn,
body:has(#profilPanel.open) #termineBtn,
body:has(#profilPanel.open) #jagdzeitenBtn,
body:has(#einstellungenPanel.open) #termineBtn,
body:has(#einstellungenPanel.open) #jagdzeitenBtn,
body:has(#nutzerPanel.open) #ansitzeBtn,
body:has(#profilPanel.open) #ansitzeBtn,
body:has(#einstellungenPanel.open) #ansitzeBtn,
body:has(#nutzerPanel.open) #statistikBtn,
body:has(#profilPanel.open) #statistikBtn,
body:has(#einstellungenPanel.open) #statistikBtn,
body:has(#nutzerPanel.open) #distanceBtn,
body:has(#profilPanel.open) #distanceBtn,
body:has(#einstellungenPanel.open) #distanceBtn,
body:has(#nutzerPanel.open) #mondBtn,
body:has(#profilPanel.open) #mondBtn,
body:has(#einstellungenPanel.open) #mondBtn,
body:has(#nutzerPanel.open) #windBtn,
body:has(#profilPanel.open) #windBtn,
body:has(#einstellungenPanel.open) #windBtn,
body:has(#nutzerPanel.open) #mondKarte,
body:has(#profilPanel.open) #mondKarte,
body:has(#einstellungenPanel.open) #mondKarte,
body:has(#nutzerPanel.open) #gpsBtn,
body:has(#profilPanel.open) #gpsBtn,
body:has(#einstellungenPanel.open) #gpsBtn,
body:has(#nutzerPanel.open) #setBtn,
body:has(#profilPanel.open) #setBtn,
body:has(#einstellungenPanel.open) #setBtn,
body:has(#nutzerPanel.open) #expandBtn,
body:has(#profilPanel.open) #expandBtn,
body:has(#einstellungenPanel.open) #expandBtn,
body:has(#nutzerPanel.open) #zentrierenBtn,
body:has(#profilPanel.open) #zentrierenBtn,
body:has(#einstellungenPanel.open) #zentrierenBtn,
body:has(#nutzerPanel.open) #expandPanel,
body:has(#profilPanel.open) #expandPanel,
body:has(#einstellungenPanel.open) #expandPanel,
body:has(#nutzerPanel.open) #revierControls,
body:has(#profilPanel.open) #revierControls,
body:has(#einstellungenPanel.open) #revierControls,
body:has(#nutzerPanel.open) #revierTypBox,
body:has(#profilPanel.open) #revierTypBox,
body:has(#einstellungenPanel.open) #revierTypBox,

body:has(#logbuchPanel.open) #setMessage,
body:has(#logbuchPanel.open) #sidebar,
body:has(#logbuchPanel.open) #objektPfeil,
body:has(#logbuchPanel.open) #werkzeugPfeil,
body:has(#logbuchPanel.open) #adminBtn,
body:has(#logbuchPanel.open) #einstellungenBtn,
body:has(#logbuchPanel.open) #adminGruppe,
body:has(#logbuchPanel.open) #einstellungenGruppe,
body:has(#logbuchPanel.open) #werkzeugBtn,
body:has(#logbuchPanel.open) #termineBtn,
body:has(#logbuchPanel.open) #jagdzeitenBtn,
body:has(#logbuchPanel.open) #ansitzeBtn,
body:has(#logbuchPanel.open) #statistikBtn,
body:has(#logbuchPanel.open) #distanceBtn,
body:has(#logbuchPanel.open) #mondBtn,
body:has(#logbuchPanel.open) #windBtn,
body:has(#logbuchPanel.open) #mondKarte,
body:has(#logbuchPanel.open) #gpsBtn,
body:has(#logbuchPanel.open) #setBtn,
body:has(#logbuchPanel.open) #expandBtn,
body:has(#logbuchPanel.open) #zentrierenBtn,
body:has(#logbuchPanel.open) #expandPanel,
body:has(#logbuchPanel.open) #revierControls,
body:has(#logbuchPanel.open) #revierTypBox {

    display: none !important;

}


/* Roter Rahmen weicht ebenfalls */
body:has(#nutzerPanel.open) #map.revier-message-active::after,
body:has(#profilPanel.open) #map.revier-message-active::after,
body:has(#einstellungenPanel.open) #map.revier-message-active::after,
body:has(#logbuchPanel.open) #map.revier-message-active::after {

    display: none;

}


/* =========================
   WINDSTRÖMUNG

   Die Zeichenfläche der ziehenden Striche. Sie
   liegt in einer eigenen Kartenebene und nimmt
   keine Klicks an — Marker darunter bleiben
   erreichbar.
========================= */

.stroemung-flaeche {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
}


/* =========================
   ANMELDUNG

   Liegt über allem, solange niemand angemeldet
   ist. Bewusst schlicht: eine Karte auf dunklem
   Grund, sonst nichts.
========================= */

#anmeldung {

    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    /*
        Statt einer flachen Farbe ein Verlauf: oben
        etwas heller, als stünde dort Licht über dem
        Wald, nach unten und zu den Rändern hin
        dunkler. Das hebt die Karte in der Mitte
        heraus, ohne dass sie einen Rahmen bräuchte.
    */
    background: radial-gradient(
        120% 80% at 50% 8%,
        #2f3b28 0%,
        #1b2117 55%,
        #0f1310 100%
    );

    /* Der Waldrand darf nicht über den Rand hinaus */
    overflow: hidden;

    z-index: 9000;

}


/*
    DER WALDRAND

    Zwei Reihen Nadelbäume am unteren Rand, die
    hintere heller und niedriger — so entsteht Tiefe
    ohne Farbe.

    Die Höhe wächst mit dem Fenster (clamp), bleibt
    aber in Grenzen: Auf dem Handy nähme ein Viertel
    Bildhöhe der Karte den Platz, auf einem breiten
    Bildschirm sähe ein schmaler Streifen verloren
    aus.

    pointer-events: none — die Bäume liegen unter der
    Karte, sollen aber nichts abfangen, was daneben
    getippt wird.
*/
.anmelde-wald {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: clamp(120px, 24vh, 230px);

    pointer-events: none;

}


.anmelde-wald .wald-hinten {

    fill: #1a2418;

}


.anmelde-wald .wald-vorne {

    fill: #0b110a;

}

/* Angemeldet: weg damit */
/*
    Drei Masken in einem Fenster: anmelden, Konto
    anlegen, Code einlösen. Sichtbar ist die, deren
    Klasse auf #anmeldung steht — ohne Klasse die
    Anmeldung.
*/
#registrierFeld,
#codeFeld {

    display: none;

}

#anmeldung.zeigt-registrieren #anmeldeFeld,
#anmeldung.zeigt-code #anmeldeFeld {

    display: none;

}

#anmeldung.zeigt-registrieren #registrierFeld,
#anmeldung.zeigt-code #codeFeld {

    display: flex;

}

/* Erklärung unter einer Beschriftung, kleiner und blasser */
.anmelde-hinweis {

    display: block;

    margin-top: 2px;

    font-size: 11px;
    line-height: 14px;
    font-weight: normal;
    color: #999;

}

/* Der Code wird abgetippt — Ziffern und Buchstaben gleich breit */
#registrierCode,
#codeEingabe {

    font-family: "Courier New", monospace;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;

}


#anmeldung.zu {

    display: none;

}


.anmelde-karte {

    /*
        Über den Waldrand gelegt — ohne position
        stünde sie im selben Stapel wie er und
        könnte darunter geraten.
    */
    position: relative;

    width: min(340px, 100%);

    display: flex;
    flex-direction: column;

    padding: 26px 24px 22px;

    background: #fff;
    border-radius: 14px;

    /*
        Zwei Schatten: ein tiefer, weicher nach
        unten, der die Karte vom Wald abhebt, und
        eine hauchdünne helle Linie oben innen. Die
        gibt der Kante Griff — ohne sie sieht eine
        weisse Fläche auf dunklem Grund flach aus.
    */
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.35) inset;

    font-family: var(--schrift);

    box-sizing: border-box;

}


/*
    DER REHBOCK ÜBER DER ÜBERSCHRIFT

    Die nachgezeichnete Silhouette, als Zeichnung
    (SVG) im Dokument abgelegt und hier nur noch
    in Grösse und Farbe eingestellt.

    Eine Zeichnung und kein Bild: Sie bleibt auf
    jedem Bildschirm scharf, egal wie fein er ist,
    und sie lässt sich über das Stylesheet
    einfärben. Die Farbe kommt aus 'color' — im
    Dokument steht 'fill: currentColor', die
    Zeichnung nimmt also genau den Ton an, der
    hier steht.

    Die Grösse wächst mit dem Fenster, bleibt aber
    in Grenzen: Auf dem Handy nähme ein zu grosses
    Bild den Feldern den Platz.
*/
.anmelde-bild {

    display: block;

    width: clamp(88px, 28vw, 112px);
    height: auto;

    /*
        Das Seitenverhältnis der Zeichnung
        (305 × 495). Es hält den Platz frei, bevor
        etwas gezeichnet ist, damit beim Aufbau
        nichts springt.
    */
    aspect-ratio: 305 / 495;

    /* Das Grün des Reviers. */
    color: #2f6421;

    margin: 0 auto 2px;

}


/*
    In den beiden Nebenmasken kleiner: Dort stehen
    mehr Felder, und das Bild ist Beiwerk, nicht
    Titelseite.
*/
#registrierFeld .anmelde-bild,
#codeFeld .anmelde-bild {

    width: clamp(64px, 20vw, 80px);

}


.anmelde-karte h2 {

    margin: 0;

    text-align: center;

    font-size: 21px;
    letter-spacing: 0.3px;
    color: #23291f;

}

/*
    DER REVIERNAME IN DER ZWEITEN ZEILE

    "Reviermanager Hechlingen II" in einer Zeile
    bricht auf dem Handy an einer beliebigen Stelle
    um — mal nach "Hechlingen", mal mittendrin. Als
    eigener Block bricht es dort, wo es gemeint ist:
    der Name der Anwendung oben, das Revier darunter.

    Etwas kleiner und in einem ruhigeren Grün, damit
    die Zeile eine Unterzeile bleibt und nicht mit
    der Überschrift um die Aufmerksamkeit streitet.
*/
.anmelde-revier {

    display: block;

    margin-top: 2px;

    font-size: 17px;
    font-weight: normal;
    letter-spacing: 0.2px;
    color: #4a6b3a;

}


.anmelde-karte .anmelde-unter {

    margin: 5px 0 20px;

    text-align: center;

    font-size: 12px;
    color: #7b8478;

}

.anmelde-karte label {

    margin-bottom: 4px;

    font-size: 12px;
    font-weight: bold;
    color: #4a5246;

}

.anmelde-karte input[type="email"],
.anmelde-karte input[type="password"],
.anmelde-karte input[type="text"] {

    margin-bottom: 14px;
    padding: 10px 11px;

    border: 1px solid #c9cec6;
    border-radius: 8px;

    background: #fbfcfa;

    font-family: var(--schrift);
    font-size: 14px;

    box-sizing: border-box;

    outline: none;

}


/*
    Das angefasste Feld hebt sich ab: grüner Rand
    und ein weicher Ring darum.

    Der eigene Fokusring des Browsers ist
    abgeschaltet (outline: none) — deshalb MUSS hier
    einer stehen. Ein Formular ohne sichtbaren Fokus
    ist mit der Tastatur nicht zu bedienen.
*/
.anmelde-karte input:focus {

    border-color: #3b7d2a;

    background: #fff;

    box-shadow: 0 0 0 3px rgba(59, 125, 42, 0.18);

}

.anmelde-karte input[type="email"]:focus,
.anmelde-karte input[type="password"]:focus {

    outline: none;
    border-color: #3b7d2a;

}

/* Kästchen und Text in einer Zeile */
/*
    "angemeldet bleiben" ist ein Haken, keine
    Feldbeschriftung — die allgemeine label-Regel
    darüber setzt sie fett, hier gehört sie in
    normaler Schrift daneben.
*/
.anmelde-karte .anmelde-merken {

    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 4px;

    font-weight: normal;
    font-size: 12.5px;

    cursor: pointer;

}


/*
    DER HAKEN, SELBST GEZEICHNET

    appearance: none nimmt dem Kästchen die
    Darstellung des Systems — erst dann greifen
    Grösse, Rahmen und Farbe. Das kostet den
    eingebauten Haken, der deshalb weiter unten
    als gedrehtes Winkelstück nachgebaut wird.

    22 Pixel statt der üblichen 13: Das Kästchen
    steht allein in seiner Zeile und wird auf dem
    Handy mit dem Daumen getroffen, nicht mit
    einem Mauszeiger.
*/
.anmelde-karte .anmelde-merken input {

    appearance: none;
    -webkit-appearance: none;

    position: relative;

    /* Kein Schrumpfen, wenn der Text umbricht */
    flex: none;

    width: 22px;
    height: 22px;
    margin: 0;

    background: #fff;
    border: 1px solid #000;
    border-radius: 4px;

    cursor: pointer;

}


/*
    Der Haken: zwei Kanten eines Kästchens — rechts
    und unten — um 45 Grad gedreht. Das ergibt den
    kurzen und den langen Schenkel in einem Stück,
    ohne Bild und ohne zweites Element.
*/
.anmelde-karte .anmelde-merken input:checked::after {

    content: "";

    /*
        Mittig über den Mittelpunkt und nicht über
        feste Abstände: Der Haken ist ein gedrehtes
        Winkelstück, seine Kanten liegen schräg —
        left/top aus dem Augenmaß trifft die Mitte
        nur bei einer bestimmten Kästchengrösse.
        Der Zug nach oben (-58 statt -50 Prozent)
        gleicht aus, dass der lange Schenkel nach
        unten hängt.
    */
    position: absolute;
    left: 50%;
    top: 50%;

    box-sizing: content-box;
    width: 4px;
    height: 10px;

    border: solid #3b7d2a;
    border-width: 0 3px 3px 0;

    transform: translate(-46%, -58%) rotate(45deg);

}


.anmelde-karte .anmelde-merken input:focus-visible {

    outline: 2px solid #3b7d2a;
    outline-offset: 2px;

}


.anmelde-fehler {

    display: none;

    margin: 10px 0 2px;
    padding: 8px 10px;

    background: #fdecea;
    border-left: 3px solid #c0392b;
    border-radius: 4px;

    font-size: 12px;
    line-height: 15px;
    color: #7d241a;

}

.anmelde-fehler.offen {

    display: block;

}


.anmelde-haupt {

    margin-top: 18px;
    padding: 11px;

    border: none;
    border-radius: 8px;

    background: #3b7d2a;
    color: #fff;

    font-family: var(--schrift);
    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition: background 0.2s ease;

}

.anmelde-haupt:hover {

    background: #326b24;

}

.anmelde-haupt:disabled {

    background: #9ab894;
    cursor: default;

}


/*
    "neu hier?" zwischen zwei waagerechten Strichen
    — die Trennlinie zwischen Anmelden und
    Kontoanlegen. Zwei Knöpfe gleicher Art
    untereinander sehen sonst aus wie zwei Wege zum
    selben Ziel.
*/
.anmelde-trenner {

    display: flex;
    align-items: center;
    gap: 10px;

    margin: 18px 0 2px;

    font-size: 11px;
    color: #a8b0a4;

}


.anmelde-trenner::before,
.anmelde-trenner::after {

    content: "";

    flex: 1;
    height: 1px;

    background: #e3e7e0;

}


#anmeldeVergessen,
.anmelde-neben {

    margin-top: 12px;
    padding: 0;

    background: none;
    border: none;

    font-family: var(--schrift);
    font-size: 12px;
    color: #3b7d2a;

    cursor: pointer;

}

#anmeldeVergessen:hover,
.anmelde-neben:hover {

    text-decoration: underline;

}


/*
    Nur während der Entwicklung. Absichtlich
    unscheinbar — es ist keine Anmeldung.
*/
#anmeldeUeberspringen {

    margin-top: 18px;
    padding-top: 12px;

    background: none;
    border: none;
    border-top: 1px solid #eee;

    font-family: var(--schrift);
    font-size: 11px;
    color: #aaa;

    cursor: pointer;

}

#anmeldeUeberspringen:hover {

    color: #777;

}


/* =========================
   FILTERZEILE IN DEN DATENFENSTERN

   Sitzt zwischen Kopf und Tabelle und scrollt
   nicht mit — beim langen Blättern soll der
   Schalter erreichbar bleiben.
========================= */

.daten-panel-filter {

    flex: 0 0 auto;

    padding: 7px 14px;

    background: #f4f4f4;
    border-bottom: 1px solid #e2e2e2;

    font-family: var(--schrift);
    font-size: 12px;
    color: #444;

    /*
        Links die Haken, rechts die Anmerkung.
        Beide sitzen oben bündig, damit die
        Anmerkung neben dem ersten Haken beginnt
        und nicht mittig zwischen beiden hängt.
    */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;

}

/*
    Mehrere Haken stehen untereinander, nicht
    nebeneinander: Auf 340 px Fensterbreite
    blieben zwei Beschriftungen in einer Zeile
    nicht lesbar.
*/
.daten-panel-filter .filter-haken {

    display: flex;
    flex-direction: column;
    gap: 5px;

}

/*
    Die Anmerkung am rechten Rand — kleiner,
    kursiv und zurückgenommen. Sie erklärt, was
    ein Klick auf eine Zeile bewirkt, und soll
    dabei nicht mit den Haken um Aufmerksamkeit
    ringen.
*/
.daten-panel-filter .filter-anmerkung {

    flex: 0 1 auto;
    min-width: 0;

    text-align: right;

    font-size: 10px;
    font-style: italic;
    line-height: 1.25;
    color: #666;

}

.daten-panel-filter label {

    display: flex;
    align-items: center;
    gap: 7px;

    cursor: pointer;

}

.daten-panel-filter input {

    margin: 0;

}


/* =========================
   BEARBEITEN IN DER INFO-ANSICHT

   Zurückhaltend: Die Info-Ansicht ist zum Lesen
   da, der Knopf soll den Blick nicht auf sich
   ziehen. Deutlicher Abstand nach oben trennt
   ihn von den Angaben darüber.
========================= */

.observation-popup .popup-row.aktionen .bearbeitenBtn,
.observation-popup .popup-row.aktionen .verschiebenBtn {

    /*
        Die Zeile "aktionen" streckt ihre Knöpfe
        sonst über die volle Breite (flex: 1) —
        hier soll er nur so breit sein wie seine
        Beschriftung.
    */
    flex: 0 0 auto;

    width: auto;

    margin: 14px auto 2px;

    padding: 5px 16px;

    background: transparent;
    border: 1px solid #b4b4b4;
    border-radius: 5px;

    color: #555;
    font-size: 12px;

}

.observation-popup .popup-row.aktionen .bearbeitenBtn:hover,
.observation-popup .popup-row.aktionen .verschiebenBtn:hover {

    background: #f2f2f2;
    border-color: #8f8f8f;
    color: #333;

}

/* Die Zeile trägt die Knöpfe mittig, nebeneinander */
.observation-popup .popup-row.aktionen:has(.bearbeitenBtn),
.observation-popup .popup-row.aktionen:has(.verschiebenBtn) {

    display: flex;
    justify-content: center;
    gap: 8px;

}


.observation-popup .popup-row.aktionen .bearbeitenBtn:active,
.observation-popup .popup-row.aktionen .verschiebenBtn:active {

    background: #fdf1e3;
    border-color: #f28c28;
    color: #f28c28;

}


/* =========================
   ZUGANG IN DER NUTZERVERWALTUNG
========================= */

.nutzer-zugang {

    display: block;

    margin-top: 6px;
    padding-top: 12px;

    border-top: 1px solid #e2e2e2;

}

.nutzer-zugang-kopf {

    margin-bottom: 4px;

    font-family: var(--schrift);
    font-size: 12px;
    font-weight: bold;
    color: #3b7d2a;

}

.nutzer-zugang-text {

    margin-bottom: 8px;

    font-family: var(--schrift);
    font-size: 11px;
    line-height: 15px;
    color: #777;

}

#nutzerCodeBtn {

    width: 100%;

    padding: 8px 6px;

    background: #fff;
    border: 1px solid #bbb;
    border-radius: 5px;

    font-family: var(--schrift);
    font-size: 12px;
    color: #333;

    cursor: pointer;

}

#nutzerCodeBtn:hover {

    background: #f3f7f1;
    border-color: #3b7d2a;
    color: #2f6522;

}

#nutzerCodeBtn:disabled {

    background: #f0f0f0;
    border-color: #ddd;
    color: #999;

    cursor: default;

}

/* Erst da, wenn ein Code erzeugt wurde */
.nutzer-code {

    display: none;

}

.nutzer-code.offen {

    display: block;

    margin-top: 10px;

    font-family: var(--schrift);
    font-size: 11px;
    color: #777;

}

.nutzer-code.fehler {

    color: #a04a4a;

}

/*
    Der Code wird vorgelesen und abgetippt —
    gleich breite Zeichen und viel Luft dazwischen
    machen aus einer Kette eine Folge.
*/
.nutzer-code-wert {

    padding: 10px;

    background: #f3f7f1;
    border: 1px solid #cfe0c8;
    border-radius: 5px;

    font-family: "Courier New", monospace;
    font-size: 20px;
    letter-spacing: 3px;
    text-align: center;
    color: #2f6522;

    user-select: all;

}

.nutzer-code-hinweis {

    margin: 6px 0 8px;

    line-height: 15px;

}

.nutzer-code-wege {

    display: flex;
    gap: 6px;

}

.nutzer-code-wege button {

    flex: 1 1 0;

    padding: 7px 4px;

    background: #fff;
    border: 1px solid #bbb;
    border-radius: 5px;

    font-family: var(--schrift);
    font-size: 11px;
    color: #333;

    cursor: pointer;

}

.nutzer-code-wege button:hover {

    background: #f3f7f1;
    border-color: #3b7d2a;
    color: #2f6522;

}


/* =========================
   MEIN PROFIL
========================= */

#profilInhalt {

    padding: 12px 14px 14px;

}

#profilInhalt table {

    margin-bottom: 4px;

}

#profilInhalt td:first-child {

    width: 62%;

}

/*
    Daten und Passwort ändern — zwei Knöpfe
    nebeneinander, gleich breit, ruhiger als der
    Abmeldeknopf darunter.
*/
.profil-aktionen {

    display: flex;
    gap: 8px;

    margin-top: 16px;

}

.profil-aktionen button {

    flex: 1 1 0;

    padding: 8px 6px;

    background: #fff;
    border: 1px solid #bbb;
    border-radius: 5px;

    font-family: var(--schrift);
    font-size: 12px;
    color: #333;

    cursor: pointer;

    transition: background 0.15s ease,
                border-color 0.15s ease;

}

.profil-aktionen button:hover {

    background: #f3f7f1;
    border-color: #3b7d2a;
    color: #2f6522;

}

/* Rückmeldung unter den Knöpfen, erst wenn es eine gibt */
.profil-meldung {

    display: none;

    margin-top: 10px;

    font-family: var(--schrift);
    font-size: 11px;
    line-height: 15px;
    color: #777;

}

.profil-meldung.offen {

    display: block;

}

.profil-meldung.fehler {

    color: #a04a4a;

}


/*
    Die beiden Formulare — Daten ändern und
    Passwort ändern. Sie sitzen an derselben
    Stelle wie die Übersicht und übernehmen deren
    Knopfleiste, damit das Fenster beim Umschalten
    nicht springt.
*/
.profil-formular-kopf {

    margin-bottom: 12px;

    font-family: var(--schrift);
    font-size: 13px;
    font-weight: bold;
    color: #3b7d2a;

}

.profil-feld {

    margin-bottom: 10px;

}

.profil-feld label {

    display: block;

    margin-bottom: 3px;

    font-family: var(--schrift);
    font-size: 11px;
    color: #777;

}

.profil-feld input {

    width: 100%;

    padding: 6px 7px;

    box-sizing: border-box;

    background: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;

    font-family: var(--schrift);
    font-size: 13px;
    color: #333;

}

.profil-feld input:focus {

    outline: none;
    border-color: #3b7d2a;

}

/* Speichern trägt die Handlung, Abbrechen nicht */
.profil-formular #profilSpeichern {

    background: #3b7d2a;
    border-color: #3b7d2a;
    color: #fff;

}

.profil-formular #profilSpeichern:hover {

    background: #2f6522;
    border-color: #2f6522;
    color: #fff;

}

.profil-aktionen button:disabled {

    background: #f0f0f0;
    border-color: #ddd;
    color: #999;

    cursor: default;

}

.profil-formular #profilSpeichern:disabled {

    background: #a8c6a0;
    border-color: #a8c6a0;
    color: #fff;

}


/* =========================
   EINSTELLUNGEN
========================= */

/* Wie der Adminknopf: 32 px, damit die Figur trägt */
#profilBtn svg {

    width: 32px;
    height: 32px;
    stroke: #333;
    fill: none;
    color: #333;

}

#einstellungenBtn.open svg,
#profilBtn.open svg {

    stroke: #fff;
    color: #fff;

}

#einstellungenBtn.open,
#profilBtn.open {

    background: #f28c28;
    color: #fff;

}


.einstellung-gruppe {

    margin: 4px 0 10px;

    font-family: var(--schrift);
    font-size: 13px;
    font-weight: bold;
    color: #3b7d2a;

}

.einstellung {

    margin-bottom: 16px;

}

.einstellung-kopf {

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 5px;

    font-family: var(--schrift);
    font-size: 12px;
    color: #333;

}

.einstellung-wert {

    flex: 0 0 auto;

    font-size: 11px;
    color: #888;
    white-space: nowrap;

}

.einstellung-bahn {

    display: flex;
    align-items: center;
    gap: 8px;

    font-family: var(--schrift);
    font-size: 10px;
    color: #999;

}

.einstellung-bahn input {

    flex: 1;
    margin: 0;
    accent-color: #f28c28;

}


.einstellung-fuss {

    margin-top: 18px;
    padding-top: 12px;

    border-top: 1px solid #eee;

}

#einstellungenZurueck {

    padding: 6px 14px;

    background: transparent;
    border: 1px solid #b4b4b4;
    border-radius: 5px;

    font-family: var(--schrift);
    font-size: 12px;
    color: #555;

    cursor: pointer;

}

#einstellungenZurueck:hover {

    background: #f2f2f2;
    color: #333;

}

.einstellung-hinweis {

    margin-top: 10px;

    font-family: var(--schrift);
    font-size: 11px;
    color: #888;

}


/* Abmelden am Fuß des Profils */
.profil-fuss {

    margin-top: 16px;
    padding-top: 12px;

    border-top: 1px solid #eee;

}

#profilAbmelden {

    padding: 7px 18px;

    background: transparent;
    border: 1px solid #c08a8a;
    border-radius: 5px;

    font-family: var(--schrift);
    font-size: 12px;
    color: #a04a4a;

    cursor: pointer;

}

#profilAbmelden:hover {

    background: #fdf2f2;
    border-color: #a04a4a;
    color: #7d241a;

}


/* =========================
   EINSTELLUNGEN

   Der Hauptknopf oben links. Darunter klappen
   Admin und "mein Profil" auf.
========================= */

#einstellungenBtn {
    position: fixed;
    left: 10px;
    top: 10px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--schrift);
    font-size: 9px;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    line-height: 9px;
    z-index: 2001;
    transition: background 0.2s ease;
}

#einstellungenBtn svg {
    width: 24px;
    height: 24px;
    stroke: #333;
    fill: none;
    color: #333;
}

#einstellungenBtn.open {
    background: #f28c28;
    color: #fff;
}

#einstellungenBtn.open svg {
    stroke: #fff;
    color: #fff;
}


#einstellungenGruppe {
    position: fixed;
    left: 10px;
    top: 63px;

    display: flex;
    flex-direction: column;
    gap: 1px;

    z-index: 2001;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.15s ease;
}

#einstellungenGruppe.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/*
    Admin und "mein Profil" sitzen in der Gruppe
    und richten sich nach ihr, nicht mehr nach
    dem Fenster.
*/
#einstellungenGruppe #adminBtn {
    position: relative;
    left: auto;
    top: auto;
}



/*
    Ist der Adminbereich aufgeklappt, tritt
    "mein Profil" zurück. Der Adminknopf rückt
    damit direkt unter die Einstellungen — und
    seine eigene Gruppe eine Stufe mit nach oben.

    Raster wie überall: 52 px Knopfhöhe plus
    1 px Abstand, also 53 px je Stufe.
    Einstellungen 10, Admin 63, Gruppe 116.
*/
body:has(#adminBtn.open) #profilBtn {

    display: none !important;

}

body:has(#adminBtn.open) #adminGruppe {

    top: 116px;

}


/* =========================
   RECHTE IN DER OBERFLÄCHE
   (js/rechte.js)
========================= */

/*
    Was der Bediener nicht darf, ist nicht da.
    !important, weil die Knöpfe an anderer Stelle
    per display: flex gesetzt werden.
*/
.ohne-recht {

    display: none !important;

}

/*
    Eine gesperrte Einrichtung im Bearbeiten-
    Modus: roter Ring wie alle anderen.

    Der Ring sagt "diese Einrichtung ist im
    Bearbeitungsmodus", nicht "zieh mich". Wer es
    trotzdem versucht, bekommt die Meldung aus
    rechteHinweisFest() — das ist die verlässliche
    Auskunft. Ein fehlender Ring wäre nur ein
    Rätsel gewesen: nichts zu sehen, und keiner
    weiß warum.

    Kein Fadenkreuz beim Überfahren: der Zeiger
    bleibt der einzige stille Unterschied.
*/
#map.revier-bearbeiten-modus:not(.eingabe-offen)
    .revierSvgMarker.revier-gesperrt:hover {

    cursor: pointer !important;

}


/*
    Eine Einrichtung, für die der Bediener gar
    nicht zuständig ist: kein roter Ring, kein
    Fadenkreuz.

    Der Ring heißt "die gehört in diesen Modus".
    An einer Art, die für dieses Mitglied nicht
    freigegeben ist, wäre er eine Einladung, die
    beim Antippen zurückgenommen wird.
*/
#map.revier-bearbeiten-modus:not(.eingabe-offen)
    .revierSvgMarker.revier-ohne-recht::after {

    display: none;

}

#map.revier-bearbeiten-modus:not(.eingabe-offen)
    .revierSvgMarker.revier-ohne-recht:hover {

    cursor: pointer !important;

}


/* =========================
   EINZELNES SYMBOL VERSETZEN
   (js/verschieben.js)

   Der Modus ist derselbe wie sonst — nur das Ziel
   ist ein einziges Symbol. Deshalb wird hier
   nichts neu gebaut, sondern die vorhandene
   Kennzeichnung an allen anderen zurückgenommen.
========================= */

/*
   Reviereinrichtungen: der rote Ring nur am Ziel.
*/
body.einzel-verschieben
    #map.revier-bearbeiten-modus:not(.eingabe-offen)
    .revierSvgMarker:not(.verschiebe-ziel)::after {

    display: none;

}

/*
   Wildmeldungen: der rote Umriss nur am Ziel.
   Auch der graue der fremden Meldungen fällt weg —
   im Einzelverschieben geht es um genau eines,
   alles andere ist nicht zu unterscheiden nötig.
*/
body.einzel-verschieben
    #map.bearbeiten-modus:not(.eingabe-offen)
    .streckeSvgMarker:not(.verschiebe-ziel) .wildIcon {

    filter: none;

}

/*
   "neu setzen" hat im Einzelverschieben nichts zu
   suchen: Wer versetzen will, will nichts anlegen
   — und ein Kartenklick daneben soll keine zweite
   Einrichtung erzeugen.
*/
body.einzel-verschieben .revierModusBtn[data-modus="neu"],
body.einzel-verschieben .meldungModusBtn[data-modus="neu"] {

    display: none !important;

}


/* =========================
   KURZHINWEIS
   (js/hinweis.js)

   Wie der Zentrierhinweis, nur unten — dort
   verdeckt er nichts, was man gerade anfasst.
========================= */

#kurzHinweis {

    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);

    max-width: min(88vw, 420px);

    padding: 9px 16px;

    background: rgba(0, 0, 0, 0.78);
    border-radius: 6px;

    font-family: var(--schrift);
    font-size: 13px;
    line-height: 17px;
    color: #fff;
    text-align: center;

    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;

    z-index: 3000;

}

#kurzHinweis.sichtbar {

    opacity: 1;

}

#kurzHinweis.warnung {

    background: rgba(160, 96, 20, 0.92);

}

#kurzHinweis.fehler {

    background: rgba(160, 42, 30, 0.92);

}


/* =========================
   ALLE GRENZPUNKTE LÖSCHEN

   Sitzt rechts neben "Grenze bearbeiten" und
   erscheint nur mit ihm. Die Lage kommt aus
   #adminGruppe, das fest steht — 53 px nach
   rechts ist genau eine Rasterbreite.
========================= */

#grenzeLeerenBtn {

    position: absolute;
    left: 53px;
    top: 0;

    width: 50px;
    height: 50px;

    background: #fff;
    border: 1px solid #000;
    border-radius: 8px;

    cursor: pointer;

    font-family: var(--schrift);
    font-size: 9px;
    line-height: 9px;
    color: #a04a4a;
    text-align: center;

    /* Erst mit dem Grenzmodus */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    transition: background 0.2s ease;

}

body:has(#boundaryBtn.active) #grenzeLeerenBtn {

    display: flex;

}

#grenzeLeerenBtn svg {

    width: 26px;
    height: 26px;

    stroke: #a04a4a;
    fill: none;
    color: #a04a4a;

}

#grenzeLeerenBtn:hover {

    background: #fdf2f2;

}


/* =========================
   RÜCKFRAGE

   Dasselbe Fenster wie der Hinweis, nur mit
   einem zweiten Knopf. Er steht links vom OK,
   damit die zerstörerische Antwort nicht dort
   liegt, wo der Finger ohnehin hinfährt.
========================= */

#meldungAbbrechenBtn {

    display: none;

    margin-right: 8px;

    background: #eee !important;
    color: #333 !important;

}

#meldungAbbrechenBtn:hover {

    background: #ddd !important;

}

#meldungDialog.rueckfrage #meldungAbbrechenBtn {

    display: inline-block;

}

/* Bei einer Rückfrage ist das OK die Zustimmung zum Löschen */
#meldungDialog.rueckfrage.warnung #meldungOkBtn {

    background: #a04a4a;

}

#meldungDialog.rueckfrage.warnung #meldungOkBtn:hover {

    background: #7d241a;

}


/* =========================
   TERMINE

   Ein eigenes Datenfenster mit zwei Ansichten:
   Liste und Monatsblatt. Die Liste beantwortet
   "was kommt als Nächstes", das Monatsblatt "wie
   voll ist der November".

   Maßgeblich für die Breite ist das Monatsraster:
   sieben Spalten, die eine zweistellige Tageszahl
   und drei Punkte darunter tragen müssen. Unter
   rund 40 px je Spalte wird das Gekrümel —
   zusammen mit dem Innenabstand also gut 320.
   420 gibt der Liste zusätzlich Luft für lange
   Bezeichnungen.
========================= */

#terminePanel {
    width: min(420px, calc(100vw - 20px));
}


#termineZurueckKopf {

    background: none;

    border: none;

    color: #fff;

    font: 22px/22px var(--schrift);

    cursor: pointer;

    padding: 0 6px 0 0;

}


#termineInhalt {

    padding: 0;

}


/* --- Die Liste --- */

.termine-liste {

    padding: 6px 0 0;

}


.termin-zeile {

    display: flex;

    align-items: stretch;

    gap: 8px;

    padding: 7px 12px 7px 0;

    border-bottom: 1px solid #eee;

    cursor: pointer;

}


.termin-zeile:hover {

    background: #f6f6f6;

}


/*
    Der Farbstrich am linken Rand trägt die Art.
    Wer die Liste überfliegt, soll die Drückjagd
    finden, ohne zu lesen.
*/
.termin-strich {

    flex: 0 0 4px;

    border-radius: 0 2px 2px 0;

}


.termin-mitte {

    flex: 1 1 auto;

    min-width: 0;

}


.termin-titel {

    font-family: var(--schrift);

    font-size: 13.5px;

    font-weight: bold;

    color: #222;

}


/* Zeichen für "hat einen Treffpunkt in der Karte" */
.termin-ort {

    font-size: 12px;

    color: #888;

}


.termin-wann {

    margin-top: 1px;

    font-size: 12px;

    color: #555;

}


.termin-art {

    margin-top: 1px;

    font-size: 11.5px;

    font-style: italic;

}


/*
    "Treffpunkt" in der Listenzeile. Kein Symbol,
    sondern ein Wort: Ein Kreis oder eine Nadel
    neben dem Namen sagt "hier ist etwas", aber
    nicht "hier lässt sich drücken" — und auf dem
    Touchscreen gibt es keinen Mauszeiger, der es
    verrät.
*/
.termin-karte-knopf {

    flex: 0 0 auto;

    align-self: center;

    padding: 4px 8px;

    border: 1px solid #c4c4c4;

    border-radius: 5px;

    background: #fff;

    color: #444;

    font-family: var(--schrift);

    font-size: 11.5px;

    cursor: pointer;

}


.termin-karte-knopf:hover {

    background: #eee;

}


/*
    Die Bemerkung unter der Art. Etwas kleiner und
    grauer als der Rest der Zeile: Sie gehört dazu,
    trägt die Zeile aber nicht.

    Zeilenumbrüche bleiben erhalten (pre-wrap) —
    wer drei Punkte untereinander eingetippt hat,
    soll sie untereinander wiederfinden.
*/
.termin-bemerkung {

    margin-top: 1px;

    font-size: 11.5px;

    line-height: 15px;

    color: #666;

    white-space: pre-wrap;

}


.termin-pfeil {

    flex: 0 0 auto;

    align-self: center;

    color: #bbb;

    font-size: 17px;

}


.termine-leer {

    padding: 16px 12px;

    font-size: 12.5px;

    color: #777;

    line-height: 17px;

}


.termine-fuss {

    padding: 10px 12px 12px;

    border-top: 1px solid #e2e2e2;

}


.termine-fuss button {

    width: 100%;

    padding: 9px 4px;

    border: none;

    border-radius: 6px;

    background: #3b7d2a;

    color: #fff;

    font-family: var(--schrift);

    font-size: 13px;

    cursor: pointer;

}


.termine-fuss button:hover {

    background: #326b24;

}


.termine-hinweis {

    font-size: 12px;

    color: #777;

    line-height: 16px;

}


/* --- Das Formular --- */

.termin-formular {

    padding: 10px 12px 12px;

}


.termin-formular .popup-row {

    margin-bottom: 9px;

}


.termin-formular .popup-row > label:first-child {

    display: block;

    font-weight: bold;

    font-size: 12px;

    margin-bottom: 2px;

}


.termin-formular input[type="text"],
.termin-formular input[type="date"],
.termin-formular input[type="time"],
.termin-formular select,
.termin-formular textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 5px;

    border-radius: 5px;

    border: 1px solid #aaa;

    font-size: 13px;

    font-family: var(--schrift);

}


/* Datum und Treffpunktzeit in einer Zeile */
.termin-wann-zeile {

    display: flex;

    gap: 8px;

}


.termin-wann-teil {

    flex: 1 1 0;

    min-width: 0;

}


/*
    Das Datum trägt acht Stellen, die Uhrzeit fünf
    — entsprechend wird der Platz geteilt. Ohne das
    bricht bei kleiner Fensterbreite die
    Datumsanzeige um oder wird beschnitten.
*/
.termin-wann-teil.breit {

    flex: 1.4 1 0;

}


.termin-wann-teil > label {

    display: block;

    font-size: 12px;

    font-weight: bold;

    margin-bottom: 2px;

}


.termin-punkt-zeile {

    display: flex;

    align-items: center;

    gap: 6px;

}


.termin-punkt-text {

    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    color: #555;

}


.termin-punkt-zeile button {

    flex: 0 0 auto;

    padding: 5px 9px;

    border: 1px solid #c4c4c4;

    border-radius: 5px;

    background: #fff;

    color: #444;

    font-family: var(--schrift);

    font-size: 12px;

    cursor: pointer;

}


.termine-knoepfe {

    display: flex;

    gap: 6px;

}


.termine-knoepfe button {

    flex: 1;

    padding: 9px 4px;

    border: none;

    border-radius: 6px;

    background: #3b7d2a;

    color: #fff;

    font-family: var(--schrift);

    font-size: 13px;

    cursor: pointer;

}


#terminLoeschen {

    background: #b3261e;

}


#terminLoeschen.scharf {

    background: #7a1611;

    font-weight: bold;

}


#terminLoeschen:disabled {

    background: #999;

    cursor: default;

}


/* --- Der Treffpunkt in der Karte --- */

/*
    DAS KREUZ AM TREFFPUNKT

    Es steht nur, solange jemand es sehen will: Es
    kommt mit dem Knopf "Treffpunkt" und geht mit dem
    Popup wieder. Deshalb darf es kräftig sein — es
    liegt niemandem dauerhaft im Weg.

    Zwei Striche übereinander: der dunkle breiter
    als der rote, so dass er ringsum als schmaler
    Saum stehen bleibt. Über Laub und Acker
    verschwände ein reines Rot, über Schnee ein
    reines Schwarz.
*/
.termin-kreuz {

    width: 30px;

    height: 30px;

    overflow: visible;

}


.termin-kreuz-rand {

    stroke: #1a1a1a;

    stroke-width: 6;

    stroke-linecap: round;

    fill: none;

}


.termin-kreuz-strich {

    stroke: #e01b0c;

    stroke-width: 3.4;

    stroke-linecap: round;

    fill: none;

}


.termin-popup-zeile {

    font-size: 12.5px;

    color: #333;

}


.termin-popup-art {

    margin-top: 2px;

    font-size: 12px;

    font-style: italic;

}


.termin-popup-bemerkung {

    margin-top: 5px;

    font-size: 12px;

    color: #555;

}


/*
    Solange auf den Treffpunkt gewartet wird,
    bekommt die Karte ein Fadenkreuz — sonst wäre
    nicht zu sehen, dass sie gerade auf einen Klick
    wartet.
*/
body.termin-punkt #map {

    cursor: crosshair;

}


/*
    Eine Zeile ohne Recht ist keine Schaltfläche:
    kein Handzeiger, keine Unterlegung beim
    Überfahren. Nur der Knopf "Treffpunkt" darin
    bleibt ansprechbar.
*/
.termin-zeile.nur-ansicht {

    cursor: default;

}


.termin-zeile.nur-ansicht:hover {

    background: none;

}


/*
    Kleiner Zusatz an einer Auswahlzeile — heute nur
    an den Flurstücken: "(zoomabhängige Anzeige)".

    Kleiner und grauer als die Zeile selbst: Er
    gehört zur Beschriftung, ist aber nicht die
    Beschriftung. Wer die Zeile liest, liest den
    Namen; wer sich wundert, findet die Erklärung
    daneben.
*/
.zeile-zusatz {

    font-size: 10px;

    color: #999;

    white-space: nowrap;

}


/* =========================
   KARTENFENSTER FALTEN AUF

   Dieselbe Bewegung wie bei den grossen Fenstern,
   nur an den Popups der Karte: Infofenster,
   Bearbeiten-Fenster, Treffpunkt.

   Angefasst wird nicht .leaflet-popup selbst —
   auf diesem Element sitzt Leaflets eigenes
   transform für die Lage über dem Punkt, und ein
   zweites transform daneben gibt es nicht. Also
   bewegen sich die Teile darin: der Inhalt, der
   Zipfel darunter und das Schließkreuz.
========================= */

@keyframes kartenfenster-auffalten {

    from {
        transform: scaleX(0.04);
    }

    to {
        transform: scaleX(1);
    }
}


@keyframes kartenfenster-einblenden {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.leaflet-popup-content-wrapper,
.leaflet-popup-tip-container {

    animation: kartenfenster-auffalten 170ms ease-out;

}


/*
    Das Kreuz steht ausserhalb des Inhalts und
    bliebe sonst allein in der Luft, während sich
    das Fenster noch öffnet.
*/
.leaflet-popup-close-button {

    animation: kartenfenster-einblenden 170ms ease-out;

}


@media (prefers-reduced-motion: reduce) {

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip-container,
    .leaflet-popup-close-button {
        animation: none;
    }
}

/* =========================
   DAS FOTO IM INFOFENSTER

   Volle Breite des Fensters, in der Höhe
   begrenzt — ein Hochformatbild soll das
   Infofenster nicht zur Litfaßsäule machen.
   Der Zeigefinger sagt, dass es mehr zu sehen
   gibt.
========================= */

.observation-popup .wild-bild {

    display: block;

    /*
        Nichts beschneiden: Das Bild wird so weit
        verkleinert, bis es entweder in der Breite
        oder in der Höhe hineinpasst. Ein
        Hochformat steht dann schmal und mittig,
        ein Querformat füllt die Breite.

        Deshalb hier auch kein object-fit: Das
        griffe erst, wenn dem Bild eine Fläche
        vorgegeben wäre, die nicht zu ihm passt.
        Ohne feste Fläche rechnet der Browser die
        fehlende Seite selbst aus.
    */
    max-width: 100%;
    max-height: 190px;

    width: auto;
    height: auto;

    margin: 10px auto 0;

    border-radius: 6px;

    cursor: pointer;

}


/* =========================
   DIE GROSSE ANSICHT

   Liegt über allem: über den Fenstern der Karte
   und über den grossen Fenstern (z-index 3200).
   Der Hintergrund ist fast schwarz, damit das
   Bild und nicht die Anwendung zu sehen ist.
========================= */

#bildSchirm {

    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 12px;

    background: rgba(0, 0, 0, 0.88);

    z-index: 4000;

    /* Auf dem Handy nicht an der Seite kleben */
    box-sizing: border-box;

}

#bildSchirm.offen {

    display: flex;

    animation: kartenfenster-einblenden 160ms ease-out;

}

#bildSchirm img {

    max-width: 100%;
    max-height: 100%;

    /*
        Das ganze Bild, nichts beschnitten — hier
        geht es ums Ansehen, nicht ums Anreissen.
    */
    object-fit: contain;

    border-radius: 4px;

}


/*
    Das Kreuz. Ein Tippen irgendwohin schliesst
    ebenfalls, aber darauf kommt nicht jeder von
    selbst.
*/
#bildSchirm .bild-schirm-zu {

    position: absolute;
    top: 10px;
    right: 12px;

    width: 40px;
    height: 40px;

    padding: 0;

    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 20px;

    color: #fff;
    font-size: 19px;
    line-height: 1;

    cursor: pointer;

}


@media (prefers-reduced-motion: reduce) {

    #bildSchirm.offen {
        animation: none;
    }
}

/* =========================
   SONNE/MOND UND WIND FALTEN AUCH AUF

   Dieselbe Bewegung wie bei den grossen Fenstern.
   Die beiden liegen nicht in .daten-panel, sind
   aber genauso gebaut: fest in der Mitte, über
   translate(-50%, -50%) gesetzt — deshalb passt
   dasselbe Bild der Bewegung, das den
   Verschiebeanteil mitführt.
========================= */

#mondKarte.open,
#windKarte.open {

    animation: fenster-auffalten 170ms ease-out;

}


@media (prefers-reduced-motion: reduce) {

    #mondKarte.open,
    #windKarte.open {
        animation: none;
    }
}

/* =========================
   TAFEL DER JAGDZEITEN

   Drei Spalten: Punkt, Wildart, Zeitraum. Der
   Punkt trägt die Auskunft, nach der man
   überhaupt nachsieht — grün heisst, die Art ist
   heute jagdbar.

   Die Gruppenzeilen sind keine Überschriften im
   Sinne des Dokuments, sondern Trennstriche mit
   Beschriftung: Sie ordnen die Tafel, ohne sich
   vorzudrängen.
========================= */

.jagdzeit-tafel {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

}

.jagdzeit-tafel td {

    padding: 5px 6px;

    border-bottom: 1px solid #eee;

    vertical-align: top;

}


.jagdzeit-tafel tr.jagdzeit-gruppe td {

    padding-top: 14px;

    border-bottom: 1px solid #333;

    font-weight: bold;
    font-size: 12px;

    color: #333;

}

.jagdzeit-tafel tr.jagdzeit-gruppe:first-child td {

    padding-top: 2px;

}


/* Die Ampel */
.jagdzeit-punkt {

    width: 16px;

    padding-right: 0;

}

.jagdzeit-punkt span {

    display: block;

    width: 9px;
    height: 9px;

    margin-top: 3px;

    border-radius: 5px;

    background: #c8c8c8;

}

tr.jagdzeit-offen .jagdzeit-punkt span {

    background: #3b7d2a;

}


/*
    Was ruht, steht blasser da — die Tafel soll
    auf einen Blick zeigen, was gerade geht.
*/
tr.jagdzeit-zu td {

    color: #8a8a8a;

}


.jagdzeit-spanne {

    width: 108px;

    text-align: right;

    white-space: nowrap;

}


/* Der Zusatz unter dem Namen, etwa bei den Bachen */
.jagdzeit-hinweis {

    display: block;

    margin-top: 1px;

    font-size: 11px;
    font-style: italic;

    color: #8a8a8a;

}


/*
    Der Fuss mit Stand und Vorbehalt. Klein, aber
    nicht versteckt: Eine Tafel mit Rechtsangaben
    ohne den Hinweis, woher sie stammt und was
    gilt, wäre fahrlässig.
*/
.jagdzeit-fuss {

    /*
        Der Inhaltsbereich der Fenster hat kein
        eigenes Polster — die Tabellenzellen
        bringen ihres mit. Der Fusstext ist keine
        Zelle, also steht sein Abstand hier: zu
        den Seiten wie die Zellen, nach oben ein
        deutlicher Absatz und nach unten so viel,
        dass er nicht an der Fensterkante klebt.
    */
    margin: 18px 0 0;
    padding: 0 12px 16px;

    font-size: 11px;
    line-height: 15px;

    color: #7b7b7b;

}