/* Grundstile, Teil 7 von 8: Wetterstationen, Farbwaehler, Rechtsklick-Menue, Platzvermessung, Rechteck-Editor, Anleitungs-Abbildungen.
   Die acht Dateien unter css/base/ werden in dieser Reihenfolge
   eingebunden; bei gleicher Spezifitaet gewinnt die spaetere Regel.
   Neue Regeln an die Datei anhaengen, zu der sie fachlich gehoeren,
   und dabei pruefen, ob eine spaetere Datei sie ueberschreibt. */

/* ============================================================
   openSenseMap-Wetterstationen
   (js/weather-stations.js). Pin-Marker + Popup-Layout. Die
   Gruppen-Kopfzeile im Layer-Control nutzt die vorhandenen
   .geolyser-tileset-group-*-Klassen (gleiche Optik wie die
   Kunden-Tileset-Gruppen). Sensorwert-Chips nutzen .popup-stat.
   ============================================================ */
.weather-station-icon { background: none; border: none; }
.weather-station-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Farben nach Stationstyp — mobil (GPS, fa-rocket)
   blau, fest installiert (fa-cube) gruen. Bewusst fixe Hex-Werte
   keine Theme-Tokens. */
.weather-station-pin--mobile { background: #38A9DB; }
.weather-station-pin--fixed  { background: #71AF26; }
[data-theme="dark"] .weather-station-pin {
    border-color: rgba(255, 255, 255, 0.85);
}
.weather-popup { min-width: 200px; }
.weather-popup-title {
    font-weight: 600;
    margin-bottom: 6px;
}
.weather-popup-sensors {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0;
}
.weather-popup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.weather-popup-sensor {
    color: var(--muted-hi);
    font-size: 0.86em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.weather-popup-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.82em;
}
.weather-popup-error { margin: 4px 0; }
/* 32x32-Icon-Buttons im Stammdaten-Wetterstationen-Editor (Add +
   Entfernen), gleiche Masse wie die Features-Panel-Head-Buttons. */
.weather-icon-btn {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* WICHTIG: Die kompakte Tabellen-Button-Regel
   `#admin-modal .trash-table td .ghost` (padding: 0 12px, s.o.) schlaegt
   die einfache Klasse per Specificity — im 32px-Button blieben dann nur
   ~6px Content-Breite und das SVG (Flex-Item, shrink:1) wurde auf
   Winzig-Groesse gestaucht. Gleiche Specificity (1 Id, 2 Klassen,
   1 Element), aber SPAETER im File -> gewinnt. */
#admin-modal .trash-table td .weather-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
}
.weather-icon-btn svg { flex-shrink: 0; display: block; }
/* Wetterstations-Zeilen im Layer-Control brauchen
   mehr vertikalen Abstand — ohne Opacity-Slider sind sie niedriger als
   Tileset-Zeilen und die Sort-Pfeile (▲▼) benachbarter Eintraege
   beruehrten sich. Klasse setzt der Gruppen-Decorator
   (weather-stations.js decorateGroup). */
.leaflet-control-layers-overlays > label.geolyser-weather-label {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ==== Custom-Color-Picker-Popover ====================
   js/color-picker.js — Popover am <body> mit Basis-Farbfeld, Deckkraft-
   Regler, Zuletzt-verwendet-Reihe, gespeicherten Farben und
   Uebernehmen-Button. Nur definierte Tokens (DESIGN.md §2); Themes:
   alles laeuft ueber --bg-elevated/--border/--fg/--muted. Der Custom-
   Swatch selbst (palette.customColorSwatchHtml) bleibt IMMER der
   Regenbogen; die aktive Farbe liegt als inset-Ring drueber (inline
   box-shadow, weil farb-dynamisch). */
.custom-color-popover {
    position: fixed;
    z-index: 12000; /* ueber Modals + tag-color-popup */
    min-width: 248px;
    max-width: 300px;
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: .88rem;
}
.custom-color-popover .ccp-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.custom-color-popover .ccp-preview {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.custom-color-popover .ccp-native {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.custom-color-popover .ccp-native input[type="color"] {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    cursor: pointer;
}
/* Der Farbcode ist ein Eingabefeld: ablesen UND eintippen. */
.custom-color-popover .ccp-hex {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    color: var(--fg);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .8rem;
    letter-spacing: .02em;
    text-transform: lowercase;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
}
.custom-color-popover .ccp-hex:focus {
    outline: none;
    border-color: var(--c-primary);
}
/* Halb getippt oder Unsinn: der Rahmen sagt es, ohne die Eingabe zu
   verwerfen. Beim Verlassen faellt das Feld auf die gueltige Farbe
   zurueck. */
.custom-color-popover .ccp-hex.ist-fehlerhaft {
    border-color: var(--c-error);
}
.custom-color-popover .ccp-alpha-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.custom-color-popover .ccp-alpha-row input[type="range"] {
    flex: 1;
    accent-color: var(--c-primary);
}
.custom-color-popover .ccp-alpha-out {
    min-width: 42px;
    text-align: right;
    color: var(--muted-hi);
    font-variant-numeric: tabular-nums;
}
.custom-color-popover .ccp-label {
    display: block;
    font-size: .74rem;
    color: var(--muted);
    margin-bottom: 4px;
}
.custom-color-popover .ccp-alpha-row .ccp-label { margin-bottom: 0; }
.custom-color-popover .ccp-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.custom-color-popover .ccp-tile {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 0;
    cursor: pointer;
}
.custom-color-popover .ccp-tile:hover { border-color: var(--border-hi); }
.custom-color-popover .ccp-tile-add {
    background: var(--input-bg);
    color: var(--muted-hi);
    font-size: .9rem;
    line-height: 1;
}
.custom-color-popover .ccp-tile-wrap {
    position: relative;
    display: inline-flex;
}
.custom-color-popover .ccp-tile-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: none;
}
.custom-color-popover .ccp-tile-wrap:hover .ccp-tile-remove { display: block; }
.custom-color-popover .ccp-tile-remove:hover { color: var(--c-error); }
.custom-color-popover .ccp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}
/* Abbrechen als 40x40-Icon-Button (X = ghost-neutral),
   analog Feature-Modal-Footer. */
.custom-color-popover .ccp-icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
}
/* Uebernehmen als BREITER Button (Haken + Text), fuellt
   die restliche Zeile und sitzt damit mittig im Fenster — das alte
   40x40-Icon-Tile sah wie ein weiteres Farbfeld aus (verwirrend). */
.custom-color-popover .ccp-apply-btn {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}
/* Custom-Swatch (Regenbogen-Tile) in allen Picker-Reihen: aktive Farbe
   nur als Ring (inline box-shadow), zusaetzlich dezenter Fokus-Rahmen. */
.color-pick-custom.is-active {
    outline: 2px solid var(--border-hi);
    outline-offset: 1px;
}

/* =====================================================================
   Rechtsklick-Menue + Weg-zu-Punkt
   ===================================================================== */

/* Kontextmenue "Was ist hier?" — fixed am Mauszeiger, ueber allen
   Karten-Controls. Solider Hintergrund (--input-bg, NICHT --bg-card —
   Dark-Mode-Transparenz, siehe line-radius-panel). */
.map-ctx-menu {
    position: fixed;
    z-index: 1200;
    min-width: 200px;
    padding: 4px;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
    font-size: .9em;
}
.map-ctx-head {
    padding: 6px 10px 4px;
    font-size: .85em;
    color: var(--muted);
}
.map-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-radius: calc(var(--radius) - 4px);
    color: var(--fg);
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.map-ctx-item:hover:not(:disabled) { background: var(--bg-card); }
.map-ctx-item:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: .6;
}
.map-ctx-item svg { flex: 0 0 auto; }
.map-ctx-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95em;
}
.map-ctx-danger { color: var(--c-error); }
.map-ctx-danger:hover:not(:disabled) { background: var(--c-error-bg); }

/* Was-ist-hier-Info-Sektion: Adresse + DSM + Kartenebenen. */
.map-ctx-info {
    padding: 4px 4px 2px;
    max-width: 320px;
}
.map-ctx-sub {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 6px;
    font-size: .88em;
}
.map-ctx-sub-ico {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--muted);
    line-height: 0;
}
.map-ctx-sub-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.map-ctx-sub-label {
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}
.map-ctx-sub-val {
    color: var(--fg);
    word-break: break-word;
}
.map-ctx-muted { color: var(--muted); }
.map-ctx-divider {
    height: 1px;
    margin: 3px 8px;
    background: var(--border);
}
/* Adresse: anklickbar zum Kopieren (fürs Navi). */
.map-ctx-addr-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    margin: -2px -2px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.map-ctx-addr-copy:hover { background: var(--bg-card); }
.map-ctx-addr-copy svg { flex: 0 0 auto; color: var(--muted); }

/* Distanz-Label am Ziel des Weg-zu-Punkt (permanenter Tooltip). */
.map-route-tooltip {
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    padding: 3px 8px;
    font-size: .85em;
    white-space: nowrap;
}
.map-route-tooltip::before { display: none; }

/* Confirm-Dialog: Actions als Spalte, wenn ein zweiter Aktions-Button
   (secondaryLabel) im Spiel ist — beide Buttons volle Breite. */
.modal-actions--col {
    flex-direction: column;
    align-items: stretch;
}
.modal-actions--col .primary,
.modal-actions--col .ghost { width: 100%; }

/* GPS-Blickrichtungs-Pfeil (leaflet-locate compass): schmaler als der
   Marker-Kreis, dafuer laenger (compassStyle in map.js). overflow:
   visible, weil die Plugin-viewBox den Stroke sonst seitlich
   abschneidet; round-join/-cap runden die Spitzen des Dreiecks leicht
   ab. */
.leaflet-control-locate-heading svg { overflow: visible; }
.leaflet-control-locate-heading svg path {
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Endpunkt-Popup des Weg-zu-Punkt: Distanz + Beenden-Button. */
.map-route-popup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
}
.map-route-popup-dist {
    font-size: .85em;
    color: var(--muted);
}
.map-route-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--c-error);
}
.map-route-stop:hover { background: var(--c-error-bg); }

/* ==========================================================================
   Golfplatz-Vermessung (Platzvermessung nach CRS)
   --------------------------------------------------------------------------
   Zwei Oberflaechen: das In-Karten-Aufnahme-Panel (.golf-hud, analog zum
   Mess-Tool-Panel) und die Modale fuer Stammdaten + Uebersichtstabelle.
   Es werden ausschliesslich die in DESIGN.md par. 2 definierten Tokens
   verwendet — keine neuen Farbnamen.
   ========================================================================== */

/* ----- Sidebar-Button ---------------------------------------------------- */
/* eigener Akzent. Vorher lag der Button auf
   var(--c-signal) — demselben Token wie die Biotoptypenkartierung, die
   beiden Icons daneben waren also farbgleich. Jetzt ein Fairway-Gruen
   (lime-600/700), das sich sowohl vom Signal-Gruen (Biotope) als auch von
   Rose (GCP) und Teal (ArUco) klar unterscheidet. Hartkodierte Hex wie bei
   .sidebar-gcp-accent / .sidebar-aruco-accent. */
.sidebar-golf-accent {
    background: rgba(101, 163, 13, 0.16) !important;
    color: #4D7C0F !important;
    border-color: rgba(101, 163, 13, 0.55) !important;
}
.sidebar-golf-accent:hover {
    background: rgba(101, 163, 13, 0.30) !important;
    border-color: #65A30D !important;
}
[data-theme="dark"] .sidebar-golf-accent { color: #A3E635 !important; }
[data-theme="dark"] .sidebar-golf-accent:hover { color: #BEF264 !important; }

/* ----- Laeuft, ist aber nicht zu sehen ------------------------------------
   Ist eine Kartierung oder Vermessung aktiv, das rechte
   Panel aber eingeklappt oder auf die regulaere Ansicht umgeschaltet, gibt
   es keinen sichtbaren Hinweis mehr darauf. Der Kopfknopf pulsiert dann —
   dieselbe Rueckmeldung wie bei einem minimierten GCP-/ArUco-Vorgang
   (.is-state-pulse). Umgesetzt ueber :has(), damit weder sidebar.js noch
   die beiden Modus-Module dafuer Zustand fuehren muessen; :has() ist in
   dieser Datei bereits in Gebrauch (Geoman-Toolbar). */
body.golf-mode-open[data-golf-view="app"] .sidebar-golf-accent,
body.golf-mode-open:has(#features-panel.features-panel--collapsed) .sidebar-golf-accent,
body.biotope-mode-open[data-bt-view="app"] .sidebar-biotope-accent,
body.biotope-mode-open:has(#features-panel.features-panel--collapsed) .sidebar-biotope-accent {
    position: relative;
    animation: geolyser-accent-pulse 1.8s ease-in-out infinite;
}
/* der Puls traegt die Farbe SEINES Knopfes, nicht das
   pauschale Cyan von .is-state-pulse. Umgesetzt ueber --pulse-rgb, das die
   Keyframes einsetzen — so bleibt es EINE Animation fuer alle vier Modi. */
@keyframes geolyser-accent-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb, 59, 189, 232), 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--pulse-rgb, 59, 189, 232), 0); }
}
.sidebar-golf-accent    { --pulse-rgb: 101, 163, 13; }   /* Fairway-Lime */
.sidebar-biotope-accent { --pulse-rgb: 2, 254, 137; }    /* Signal-Gruen */
.sidebar-gcp-accent     { --pulse-rgb: 236, 72, 153; }   /* Rose */
.sidebar-aruco-accent   { --pulse-rgb: 20, 184, 166; }   /* Teal */
.sidebar-gcp-accent.is-state-pulse,
.sidebar-aruco-accent.is-state-pulse {
    animation: geolyser-accent-pulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0.55);
    border-color: rgba(var(--pulse-rgb), 0.85) !important;
}

/* ----- Aufnahme im Sidepanel --------------------------------------------- */
/* Sie sitzt jetzt — wie die Biotoptypenkartierung — in den beiden
   bestehenden Sidepanels: rechts anstelle der Feature-Suche, links unter
   der Layerliste. Das raeumt die Karte frei und beseitigt zugleich den
   Klick-Durchschlag (siehe Kopfkommentar in js/golf/capture.js). */
.golf-host { display: none; }
body.golf-mode-open .golf-host { display: block; }
/* Rechtes Panel: in der Aufnahme-Ansicht bleibt nur der Panel-Kopf (mit dem
   Umschalter) stehen, alles andere weicht der Aufnahme. */
/* .bt-host bleibt ausgenommen: waeren Golf- und Biotop-Modus gleichzeitig
   offen, wuerden sich die beiden Regeln sonst gegenseitig ausblenden und im
   rechten Panel bliebe nur der Kopf stehen. golf/mode.js schaltet die
   Biotop-Ansicht beim Oeffnen zusaetzlich auf "app". */
body.golf-mode-open[data-golf-view="golf"]
    .features-panel-body > :not(.features-panel-head):not(.golf-host):not(.bt-host):not(.vl-host) {
    display: none !important;
}
/* Der Aufnahme-Host muss die Resthoehe fuellen und selbst scrollen — das
   Panel hat feste Hoehe und overflow:hidden, sonst wird ein langer Schritt
   (Abschlag-Editor) unten abgeschnitten, ohne dass man scrollen koennte. */
body.golf-mode-open[data-golf-view="golf"] .golf-host-capture {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
body.golf-mode-open[data-golf-view="app"] .golf-host-capture { display: none; }
/* Links bleibt die Bahnuebersicht in beiden Ansichten sichtbar. */
.golf-host-holes {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 6px;
}

/* Umschalter im Panel-Kopf. Traegt den Golf-Akzent, damit erkennbar bleibt,
   welcher Modus das Panel gerade belegt (analog .bt-view-toggle). */
/* Die drei Panel-Umschalter im rechten Kopf sassen in
   drei Dateien und waren dadurch drei verschiedene Knoepfe geworden -
   unterschiedliche Eckenrundung, unterschiedliche Rahmenstaerke, drei
   verschiedene Pfeil-Symbole. Massgeblich ist bt-view-toggle.

   Form, Groesse und Rahmen stehen deshalb ab hier EINMAL fuer alle
   drei. Was je Modus verschieden bleibt, ist allein die Erkennungsfarbe
   (und die steht weiter bei dem Modus, zu dem sie gehoert). Wer einen
   vierten Modus baut, haengt seine Klasse hier mit an. */
.bt-view-toggle,
.golf-view-toggle,
.vl-view-toggle,
.sn-view-toggle {
    display: none;
    border-radius: var(--radius-sm);
}
body.biotope-mode-open .bt-view-toggle,
body.golf-mode-open .golf-view-toggle,
body.vorlagen-mode-open .vl-view-toggle,
body.schnell-mode-open .sn-view-toggle {
    /* Aus den drei 32er-Quadraten mit Pfeil-Symbol sind beschriftete
       Reiter geworden: Wechsel-Symbol plus Wort. Ein Pfeil allein sagte
       nicht, WOHIN er umschaltet, und bei zwei offenen Modi standen
       zwei gleich aussehende Pfeile nebeneinander. Form und Groesse
       kommen jetzt von .panel-modi-reiter-btn; hier bleibt nur, dass
       sie ueberhaupt sichtbar werden, und der Rahmen, den die
       Farbregeln je Modus einfaerben. */
    display: inline-flex;
    align-items: center;
    border-width: 2px;
    border-style: solid;
}
/* Die aktive Ansicht traegt zusaetzlich einen zweiten Rahmen. Beim
   Golf-Umschalter fehlte er. */
body.biotope-mode-open[data-bt-view="bt"] .bt-view-toggle {
    outline: 2px solid rgba(236, 72, 153, 0.75); outline-offset: 1px;
}
body.golf-mode-open[data-golf-view="golf"] .golf-view-toggle {
    outline: 2px solid rgba(101, 163, 13, 0.75); outline-offset: 1px;
}
body.vorlagen-mode-open[data-vorlagen-view="vorlagen"] .vl-view-toggle {
    outline: 2px solid rgba(79, 70, 229, 0.75); outline-offset: 1px;
}
body.schnell-mode-open[data-schnell-view="schnell"] .sn-view-toggle {
    outline: 2px solid rgba(217, 119, 6, 0.75); outline-offset: 1px;
}
.sn-view-toggle { border-color: rgba(217, 119, 6, 0.55); color: #B45309; }
[data-theme="dark"] .sn-view-toggle { color: #FBBF24; }

/* Farbe des Golf-Umschalters. Form und Groesse stehen oben. */
body.golf-mode-open .golf-view-toggle {
    background: rgba(101, 163, 13, 0.22);
    color: #3F6212;
    border-color: #65A30D;
}
body.golf-mode-open .golf-view-toggle:hover {
    background: rgba(101, 163, 13, 0.30);
    border-color: #65A30D;
}
[data-theme="dark"] body.golf-mode-open .golf-view-toggle { color: #A3E635; }

.golf-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* war 0.94em und damit spuerbar kleiner als der Rest
       der App. */
    font-size: 1em;
    color: var(--fg);
}
.golf-panel-scroll { font-size: 1.02em; }
.golf-panel-scroll .golf-label { font-size: 0.9em; }
.golf-panel-scroll .golf-note { font-size: 0.88em; }
.golf-panel-scroll .golf-side-row,
.golf-panel-scroll .golf-parcheck { font-size: 0.92em; }
.golf-host .icon-btn { line-height: 0; }
.golf-side { display: block; }
/* Form, Groesse und Rahmen des Kopfes kommen aus .modus-kopf
   (js/panel-modi.js) - dieselbe Zeile fuer alle vier Panel-Modi. Hier
   bleibt nur, was die Vermessung zusaetzlich braucht. */
.golf-panel-title { flex: 1 1 auto; min-width: 0; }
.golf-hud-busy {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--c-primary);
    animation: golf-pulse 1s ease-in-out infinite;
    flex: 0 0 auto;
}
@keyframes golf-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .golf-hud-busy { animation: none; opacity: 0.8; }
}
/* Farbe, Groesse und Rundung der Kopfknoepfe (samt hellblauer
   Einrichtung und rotem Beenden) stehen in .modus-kopf, js/panel-modi.js.
   Hier bleibt nur die dunkle Schriftfarbe des Akzents: die Regel dort
   liest sie aus --modus-akzent-fg, und das ist im hellen Thema gesetzt. */
[data-theme="dark"] .golf-panel-head.modus-kopf { --modus-akzent-fg: #A3E635; }

/* mehr Luft zwischen den Elementen — vorher klebten die
   Bloecke aneinander. */
/* Kopf und Fussleiste stehen fest, ALLES dazwischen
   (Schrittinhalt, Bahnuebersicht, Notiz) scrollt gemeinsam. Vorher scrollte
   nur der Schrittinhalt, und die Bahnuebersicht sass als eigener Host unter
   der Leiste. */
.golf-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.golf-panel-body {
    padding: 2px 2px 12px;
    flex: 0 0 auto;
}
.golf-panel-body > * + * { margin-top: 6px; }
.golf-panel-body .golf-field { margin-bottom: 18px; }
.golf-panel-body .golf-hud-step { margin-bottom: 16px; }
.golf-panel-body .golf-row { gap: 8px; }
.golf-panel-body .golf-row + .golf-row { margin-top: 10px; }
.golf-panel-body .golf-row--wrap { row-gap: 8px; margin-top: 10px; }
.golf-panel-body .golf-chips { gap: 7px; }
.golf-panel-body .golf-chip { padding: 5px 13px; }
.golf-panel-body .golf-label { margin-bottom: 6px; }
.golf-panel-body .golf-note { margin-top: 8px; }
.golf-panel-body .golf-radio { gap: 6px; margin-right: 4px; }
.golf-panel-body .golf-substeps { margin-bottom: 8px; }
.golf-panel-body .golf-substep { padding: 3px 0; }

/* Notizfeld: steht in JEDEM Schritt unten im Panel, ueber die volle
   Breite, damit unterwegs jederzeit etwas festgehalten werden kann.
   mit Beschriftung und in der Hoehe ziehbar. */
.golf-panel-note {
    flex: 0 0 auto;
    /* Waagerecht buendig mit .golf-panel-body und .golf-host-holes, damit
       die beiden Klapp-Koepfe exakt untereinander stehen. */
    padding: 8px 2px;
    border-top: 1px solid var(--border);
}

/* Gemeinsamer Klapp-Kopf fuer Bahnuebersicht UND Bemerkung. Beide
   sollen gleich aussehen und buendig untereinander
   stehen — je Pfeil, Symbol und Beschriftung in derselben Groesse. */
.golf-collapse-head {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    margin-bottom: 6px;
    padding: 3px 0;
    background: none;
    border: none;
    color: var(--muted-hi);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.golf-collapse-head:hover { color: var(--fg); }
.golf-collapse-head svg { flex: 0 0 auto; width: 15px; height: 15px; }
.golf-collapse-head .golf-chevron {
    flex: 0 0 auto;
    width: 10px;
    font-size: 0.85em;
    line-height: 1;
    text-align: center;
}
.golf-collapse-head strong {
    flex: 1 1 auto;
    font-size: 0.88em;
    font-weight: 600;
}
.golf-panel-note.is-collapsed .golf-note-input { display: none; }
.golf-panel-note.is-collapsed .golf-collapse-head { margin-bottom: 0; }
.golf-panel-note.is-collapsed .golf-chevron { transform: rotate(-90deg); }
.golf-note-input {
    width: 100%;
    display: block;
    padding: 9px 11px;
    font-size: 1em;
    line-height: 1.35;
    border-radius: var(--radius-sm);
    /* Nur senkrecht ziehbar — waagerecht wuerde das Panel sprengen. */
    resize: vertical;
    min-height: 40px;
    max-height: 40vh;
    font-family: inherit;
}

/* Bahnuebersicht sitzt im scrollenden Teil des Panels, oberhalb der
   Fussleiste. */
.golf-host-holes {
    border-top: 1px solid var(--border);
    margin-top: auto;
    padding: 8px 2px 0;
    flex: 0 0 auto;
}
.golf-host-holes .golf-side-body { max-height: none; }

/* Fussleiste: die Schritt-Aktionen sitzen unten, nicht mehr im Fliesstext.
   Stil bewusst identisch zur .features-panel-actionbar —
   sticky am unteren Rand, gleiche Polsterung, gleicher Hintergrund. */
.golf-panel-foot {
    order: 99;
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    padding: 6px 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 0.85em;
    z-index: 5;
}
.golf-panel-foot:empty { display: none; }

/* Runder Symbol-Knopf. Traegt zusaetzlich eine der App-Klassen
   (.primary/.ghost/.btn-success) und uebernimmt von dort die Farben —
   hier stehen nur Form und Groesse, damit alle gleich aussehen. */
.golf-fbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius);
    line-height: 0;
    flex: 0 0 auto;
}
/* Der frueher hier stehende Einbahn-Knopf "Zurueck zu den Abschlaegen"
   (.golf-fbtn--back-section) ist der Schritt-Leiste
   .golf-stepnav gewichen — Regeln siehe dort. */
.golf-fbtn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Breite Fassung: 52 x 36 statt 36 x 36. Sie steht in den Fusszeilen,
   in denen der Knopf die Hauptaktion IST - Platz-Stammdaten,
   Biotoptypen-Einrichtung, die Einstellfenster von Vorlagen und
   Schnellaufnahme. Ein quadratischer Knopf von 36 sah dort aus wie
   einer von vielen und wurde uebersehen. */
.golf-fbtn--breit { width: 52px; height: 36px; }

/* Taktung der GPS-Spur im Tab "Arbeitsplatz".
   Je Zeile ein Feld, sein Ruecksetz-Pfeil, und in der zweiten Zeile
   zusaetzlich der Haken. Alle drei stehen auf derselben Grundlinie wie
   das Eingabefeld, nicht wie seine Beschriftung - deshalb 'flex-end'. */
.ws-gt-zeile {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 10px;
}
/* Feste, gleiche Breite fuer beide Zeilen: in die Felder gehen
   Sekunden und Meter, also Zahlen mit hoechstens vier Zeichen.
   Ueber die ganze Panelbreite gezogen sahen sie aus, als
   erwarteten sie mehr. Die Breite richtet sich nach der
   laengeren Beschriftung, damit beide Zeilen buendig stehen. */
.ws-gt-feld { flex: 0 0 168px; width: 168px; min-width: 0; margin: 0; }
/* Die Einheit liegt IM Feld und nimmt keine Klicks an - dieselbe
   Loesung wie im Einstellfenster der Schnellaufnahme (.ms-einheit). */
.ws-gt-eingabe { position: relative; display: flex; }
.ws-gt-eingabe > input { flex: 1 1 auto; min-width: 0; padding-right: 2.4em; }
.ws-gt-eingabe > .ws-gt-einheit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.85em;
    pointer-events: none;
    user-select: none;
}
.ws-gt-reset {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
}
.ws-gt-reset:hover {
    color: var(--fg);
    border-color: var(--border-hi);
    background: var(--bg-card);
}
/* Speichern rechts im Feld, Diskette, 40x40 wie alle Knoepfe im
   Fensterinhalt. */
.ws-gt-save {
    flex: 0 0 auto;
    margin-left: auto;
    width: 40px; height: 40px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Schiebt den Knopf an den linken Rand der Fussleiste. */
.golf-fbtn--first { margin-right: auto; }
/* ---- Schritt-Leiste in der Fussleiste ----------------
   Die drei Schritte einer Bahn als Knopfgruppe links in der Leiste.
   Jeder Knopf traegt die Farbe SEINER Punkte auf der Karte (--nav):
   blau der Abschlag, violett der Knickpunkt, rose das Gruen — dieselben
   Werte wie ROLE_STYLE/COLOR_* in js/golf/config.js. Der Schritt, in dem
   man gerade steht, bekommt einen zusaetzlichen Rahmen: ein Ring in der
   Knopffarbe, durch einen Spalt in Panelfarbe vom Knopfrand abgesetzt —
   damit ist er auch bei drei bunten Knoepfen sofort zu finden. */
.golf-stepnav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    /* Wie zuvor .golf-fbtn--first: die Gruppe steht links, der Rest der
       Leiste bleibt rechtsbuendig. */
    margin-right: auto;
}
.golf-stepnav-btn {
    /* Etwas kleiner als die uebrigen Fussleisten-Knoepfe: zu dritt in
       einer schmalen Sidepanel-Leiste ist jeder Pixel einer zu viel. */
    width: 32px;
    height: 32px;
    background: color-mix(in srgb, var(--nav) 16%, transparent);
    color: var(--nav);
    border: 1px solid color-mix(in srgb, var(--nav) 55%, transparent);
}
.golf-stepnav-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--nav) 32%, transparent);
    border-color: var(--nav);
}
/* der aktive Schritt bekommt KEINEN Ring mehr, sondern
   den Knopf VOLL in seiner Farbe; das Zeichen kippt auf die Gegenfarbe
   (--nav-on) und bleibt damit lesbar. Das Symbol ist eine Maske mit
   `background: currentColor` — es folgt der Textfarbe also von selbst. */
.golf-stepnav-btn.is-current {
    background: var(--nav);
    border-color: var(--nav);
    color: var(--nav-on, #ffffff);
}
.golf-stepnav-btn.is-current:hover:not(:disabled) {
    background: var(--nav);
    filter: brightness(1.08);
}
/* der Abschlag-Knopf gruenlich (war Blau). Etwas dunkler als
   ein reines Wiesengruen, damit das weisse Zeichen im ausgefuellten
   Zustand sicher darauf steht (~4:1 statt 3,4:1). */
/* Bahnkopf und Abschluss: bewusst NICHT in einer der drei
   Punktfarben — sie stehen fuer keine Punktart auf der Karte, sondern fuer
   die beiden Enden der Bahn-Maske. Schiefer und Blau sind im Modul sonst
   nicht belegt (Tuerkis = "der naechste Klick setzt", Bernstein =
   Ruecknahme, Rot = Laengen-Abweichung). */
/* Bahn & Par war Schiefergrau und ging in der Leiste
   unter — jetzt Teal. Bewusst das dunkle Teal-700 und nicht das helle
   --c-cyan der "der naechste Klick setzt"-Knoepfe, damit die beiden
   Bedeutungen auseinanderbleiben. Weiss darauf liegt bei ~4,9:1. */
.golf-stepnav-btn--head    { --nav: #0F766E; --nav-on: #ffffff; }
.golf-stepnav-btn--done    { --nav: #0369A1; --nav-on: #ffffff; }
.golf-stepnav-btn--tees    { --nav: #24874D; --nav-on: #ffffff; }
.golf-stepnav-btn--doglegs { --nav: #7C3AED; --nav-on: #ffffff; }  /* COLOR_DOGLEG */
.golf-stepnav-btn--green   { --nav: #E11D48; --nav-on: #ffffff; }  /* COLOR_GREEN_CENTER */
/* Im dunklen Thema die helleren Geschwisterfarben — auf dem dunklen
   Panel sind die satten Toene sonst zu leise. Weil die Flaeche im
   aktiven Zustand dann HELL ist, kippt --nav-on auf dunkel. */
[data-theme="dark"] .golf-stepnav-btn--tees    { --nav: #4ADE80; --nav-on: #0b2417; }
[data-theme="dark"] .golf-stepnav-btn--doglegs { --nav: #A78BFA; --nav-on: #1b1233; }
[data-theme="dark"] .golf-stepnav-btn--green   { --nav: #FB7185; --nav-on: #3b0716; }
[data-theme="dark"] .golf-stepnav-btn--head    { --nav: #2DD4BF; --nav-on: #04302c; }
[data-theme="dark"] .golf-stepnav-btn--done    { --nav: #7DD3FC; --nav-on: #062c42; }
/* Schritt-Symbole (schwarz gezeichnet) als MASKE, damit sie
   `currentColor` annehmen und in beiden Themen — und im aktiven,
   vollflaechigen Knopf — sichtbar bleiben. Muster wie .golf-cloud-icon.
   Die Dateien haben sehr unterschiedliche Seitenverhaeltnisse
   (714x486 / 1200x1200 / 602x579), deshalb `contain` und je Icon eine
   eigene Kastengroesse, damit alle drei optisch gleich gross wirken. */
.golf-step-icon {
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.golf-step-icon--tees {
    /* Das Tee ist hoch und schmal (Seitenverhaeltnis ~0,28) — deshalb ein
       hoher Kasten, sonst wirkt es neben den beiden quadratischen Zeichen
       winzig. */
    width: 20px;
    height: 22px;
    -webkit-mask-image: url(/img/icons/tee.svg);
    mask-image: url(/img/icons/tee.svg);
}
.golf-step-icon--doglegs {
    /* Der Schlaeger fuellt seinen Rahmen komplett aus. */
    width: 18px;
    height: 18px;
    -webkit-mask-image: url(/img/icons/golf_club.svg);
    mask-image: url(/img/icons/golf_club.svg);
}
.golf-step-icon--green {
    /* Die Fahne sitzt mit Rand im Rahmen (~75 %) — Kasten entsprechend
       groesser, damit die Zeichnung selbst wieder ~18 px misst. */
    width: 23px;
    height: 23px;
    -webkit-mask-image: url(/img/icons/golf_flag.svg);
    mask-image: url(/img/icons/golf_flag.svg);
}
/* "Punkt zurueck" und "Neu abstecken": Bernstein/Orange — sie nehmen
   etwas zurueck, sind aber nicht destruktiv. */
.golf-fbtn--undo, .golf-fbtn--reset {
    background: color-mix(in srgb, var(--c-warn) 16%, transparent);
    color: var(--c-warn);
    border: 1px solid color-mix(in srgb, var(--c-warn) 45%, transparent);
}
.golf-fbtn--undo:hover:not(:disabled), .golf-fbtn--reset:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-warn) 30%, transparent);
    border-color: var(--c-warn);
}
.golf-fbtn--reset { width: 34px; height: 34px; }
/* Im Formular sitzt der Knopf NEBEN einem Eingabefeld und darf es nicht
   ueberragen. Tuerkis = "von der Karte holen". */
.golf-row > .golf-fbtn--inline {
    width: 30px;
    height: 30px;
    align-self: center;
    background: color-mix(in srgb, var(--c-cyan) 18%, transparent);
    color: var(--c-primary-dk, #0369A1);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 55%, transparent);
}
.golf-row > .golf-fbtn--inline:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-cyan) 32%, transparent);
    border-color: var(--c-cyan);
}
.golf-row > .golf-fbtn--inline.is-armed {
    background: var(--c-cyan);
    color: #08303d;
    border-color: var(--c-cyan);
}
[data-theme="dark"] .golf-row > .golf-fbtn--inline { color: #7DD3FC; }

/* Par-Kontrolle im Schritt "Bahn vollstaendig". */
/* Raster statt Flex-Zeilen. Die Zeile selbst ist
   `display: contents`, damit ihre Zellen in DIESEM Raster liegen — nur so
   teilen sich Herren- und Damen-Zeile dieselben Spaltenbreiten, obwohl sie
   unterschiedlich viele Farbpunkte tragen und nur eine von beiden den
   Uebernehmen-Knopf zeigt.
   Spalten: Farbpunkte | Beschriftung | Par-Auswahl | Knopf | Laengen. */
.golf-parcheck {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto auto 86px auto 1fr;
    align-items: center;
    gap: 4px 8px;
    font-size: 0.86em;
}
.golf-parcheck-row { display: contents; }
.golf-parcheck-dots { display: inline-flex; align-items: center; gap: 4px; }
.golf-parcheck-act { display: inline-flex; align-items: center; }
.golf-parcheck-info {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-width: 0;
}
.golf-parcheck-row.is-wide { color: var(--c-warn); }
.golf-parcheck-row.is-off { color: var(--c-error); }
/* Abweichendes Par faellt auf: roter Rahmen, rotes Symbol, ruhiger Puls. */
.golf-note--warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--c-error) 50%, transparent);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--c-error-bg);
    color: var(--fg);
    font-size: 0.9em;
    line-height: 1.4;
}
.golf-warn-icon {
    flex: 0 0 auto;
    line-height: 0;
    color: var(--c-error);
    animation: geolyser-accent-pulse 1.8s ease-in-out infinite;
    --pulse-rgb: 220, 38, 38;
    border-radius: 50%;
}
.golf-note--warn svg { flex: 0 0 auto; margin-top: 1px; }

/* Par-Auswahl in der Kontrolle. */
.golf-parcheck-who { white-space: nowrap; }
/* Breite genuegt fuer "Par 5" SAMT nativem Pfeil. */
.golf-par-select { width: 86px; min-width: 86px; flex: 0 0 auto; }
.golf-par-adopt { margin-left: -2px; }
.golf-par-select.is-off {
    border-color: var(--c-error);
    animation: geolyser-accent-pulse 1.8s ease-in-out infinite;
    --pulse-rgb: 220, 38, 38;
}
.golf-par-hint { color: var(--c-error); font-size: 0.9em; }

/* Distanz-Box am Mauszeiger im Knickpunkt-Schritt. */
.golf-move-tip-wrap { background: none; border: none; }
.golf-move-tip {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    background: rgba(17, 20, 24, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.golf-move-tip-row { display: flex; align-items: center; gap: 5px; }
.golf-move-tip-row i {
    width: 8px; height: 8px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.golf-move-tip-row b { margin-left: auto; }

/* ----- Bahnuebersicht ----------------------------------------------------- */
/* Aussehen kommt komplett aus .golf-collapse-head — hier bleibt nur, was
   die Bahnuebersicht zusaetzlich braucht. */
.golf-side-count { color: var(--muted); font-size: 0.82em; }
.golf-chevron { transition: transform 0.15s ease; display: inline-block; }
/* Die Chevron-Regeln zielen auf den JEWEILIGEN Kopf, nicht auf jeden
   Chevron im Abschnitt — sonst dreht der aeussere Kopf den inneren mit. */
.golf-host-holes.is-collapsed .golf-side-body { display: none; }
.golf-host-holes.is-collapsed .golf-side-head .golf-chevron {
    transform: rotate(-90deg);
}
.golf-side-body { max-height: 260px; overflow-y: auto; }

/* Die Bahnliste laesst sich zusaetzlich fuer sich zuklappen,
   damit die Nummernreihe sichtbar bleiben kann, ohne dass die Liste den
   halben Panelplatz frisst. */
.golf-side-listwrap { border-top: 1px solid var(--border); padding-top: 4px; }
.golf-collapse-head--sub {
    margin-bottom: 3px;
    padding: 2px 0;
    font-size: 0.94em;
    color: var(--muted);
}
.golf-collapse-head--sub svg { width: 13px; height: 13px; }
.golf-side-listwrap.is-collapsed .golf-side-list { display: none; }
.golf-side-listwrap.is-collapsed .golf-collapse-head--sub { margin-bottom: 0; }
.golf-side-listwrap.is-collapsed .golf-chevron { transform: rotate(-90deg); }
.golf-hud-holes {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 0 6px;
}
.golf-side-list { list-style: none; margin: 0; padding: 0; }
.golf-side-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 2px;
    border-radius: var(--radius-sm);
    font-size: 0.86em;
}
.golf-side-row:hover { background: var(--bg-elevated); }
.golf-side-row.is-current { background: var(--bg-elevated); font-weight: 600; }
.golf-side-sub { flex: 1 1 auto; color: var(--muted); font-size: 0.92em; }
.golf-side-state.is-done { color: var(--c-signal); }
.golf-side-state.is-part { color: var(--muted); }
.golf-side-empty { color: var(--muted); font-size: 0.85em; padding: 4px 2px; }

.golf-hud-step { margin-bottom: 10px; }
.golf-step-title { font-size: 1.05em; }
.golf-step-of { color: var(--muted); font-size: 0.85em; margin-left: 4px; }
.golf-loop {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    background: var(--c-primary);
    color: #fff;
    font-size: 0.75em;
}
.golf-step-hint {
    margin: 4px 0 0;
    color: var(--muted-hi);
    font-size: 0.9em;
    line-height: 1.35;
}

.golf-field { margin-bottom: 10px; }
.golf-label {
    display: block;
    margin-bottom: 3px;
    color: var(--muted-hi);
    font-size: 0.85em;
}
.golf-label--inline { display: inline; margin: 0 4px 0 0; }
.golf-row { display: flex; align-items: center; gap: 6px; }
.golf-row--wrap { flex-wrap: wrap; margin-top: 4px; }
.golf-input {
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    font: inherit;
    min-width: 0;
    flex: 1 1 auto;
}
.golf-input:disabled { opacity: 0.55; }
.golf-input--sm { flex: 0 0 auto; width: 90px; }
/* 52 px reichten fuer "12,3", nicht fuer einen vierstelligen
   Wert mit Nachkommastelle ("1234,5" = 6 Zeichen). Im Panel-Font sind das
   ~56 px Text, dazu 12 px Innenabstand, 2 px Rahmen und das native
   Zahlen-Pfeilchen (~17 px in Chrome) — im Browser nachgemessen. */
.golf-input--xs { flex: 0 0 auto; width: 92px; }
.golf-unit { color: var(--muted); font-size: 0.85em; }
.golf-src { color: var(--muted); font-size: 0.8em; margin-left: auto; }
.golf-note {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.82em;
    line-height: 1.35;
}
.golf-radio { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85em; }
.golf-radio.is-locked { opacity: 0.55; }

.golf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.golf-chip {
    border: 1px solid var(--border-hi);
    background: transparent;
    color: var(--fg);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.85em;
    cursor: pointer;
}
.golf-chip:hover:not(:disabled) { border-color: var(--chip, var(--c-primary)); }
.golf-chip.is-on {
    background: var(--chip, var(--c-primary));
    color: var(--chip-fg, #fff);
    border-color: var(--chip, var(--c-primary));
}
.golf-chip.is-taken, .golf-chip:disabled { opacity: 0.4; cursor: not-allowed; }

.golf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.golf-btn-sm { padding: 5px 12px; font-size: 0.88em; }
/* Ueberspringen ist die Ausweichaktion — bewusst zurueckhaltend. */
.golf-btn-skip {
    background: transparent;
    color: var(--muted-hi);
    border: 1px dashed var(--border-hi);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.85em;
    cursor: pointer;
}
.golf-btn-skip:hover { color: var(--fg); border-color: var(--c-primary); }

.golf-substeps { margin: 0 0 4px; padding-left: 18px; }
.golf-substep { color: var(--muted); font-size: 0.9em; padding: 1px 0; }
.golf-substep.is-done { color: var(--c-signal); }
.golf-substep.is-current { color: var(--fg); font-weight: 600; }
/* Gruen-Teilschritte tragen je einen "neu setzen"-Knopf —
   Text links, Knopf rechts. */
.golf-substeps--rows .golf-substep {
    display: flex;
    align-items: center;
    gap: 8px;
}
.golf-substeps--rows .golf-substep > span:first-child { flex: 1 1 auto; }

/* Kleiner Aktionsknopf INNERHALB der Maske (neu setzen, neu abstecken).
   Bewusst kleiner als die Fussleisten-Knoepfe — er gehoert zur Zeile,
   nicht zur Leiste. */
.golf-fbtn--mini {
    width: 26px;
    height: 26px;
    border-radius: var(--radius);
    border: 1px solid var(--border-hi);
    background: transparent;
    color: var(--fg);
}
.golf-fbtn--mini svg { width: 15px; height: 15px; }
.golf-fbtn--mini:hover:not(:disabled) { background: var(--bg-elevated); }
/* Steht so ein Knopf in einer Zeile mit Eingabefeldern oder Farb-Chips,
   nimmt er deren Hoehe an — 26 px sassen sichtbar zu tief bzw. zu klein
   daneben (31,42 px). Innerhalb der Unterschritt-
   Listen bleibt es bei 26 px; dort steht der Knopf allein in der Zeile. */
.golf-chips .golf-fbtn--mini,
.golf-parcheck-act .golf-fbtn--mini,
.golf-row > .golf-fbtn--mini {
    width: 31.42px;
    height: 31.42px;
}
/* Scharf: der naechste Kartenklick setzt diesen Punkt. Das muss auffallen. */
.golf-fbtn--mini.is-armed {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 16%, transparent);
    animation: geolyser-accent-pulse 1.8s ease-in-out infinite;
    --pulse-rgb: 0, 160, 210;
}
/* "Abschlag fertig": derselbe Bauplan wie die uebrigen Fussleisten-
   Knoepfe, nur gruen getoent — .btn-success sah als Fremdstil anders aus. */
.golf-fbtn--done {
    border: 1px solid color-mix(in srgb, var(--c-signal) 55%, transparent);
    background: color-mix(in srgb, var(--c-signal) 18%, transparent);
    color: var(--c-signal);
}
.golf-fbtn--done:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-signal) 30%, transparent);
}
/* Zuruecksetzen einer Bahn — zurueckhaltend, bis man darauf zeigt.
   Ein dauerhaft rotes Symbol in jeder Zeile der Bahnliste waere Laerm. */
.golf-fbtn--danger {
    border-color: transparent;
    color: var(--muted);
}
.golf-fbtn--danger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--c-error) 55%, transparent);
    background: color-mix(in srgb, var(--c-error) 16%, transparent);
    color: var(--c-error);
}
/* Mass an den gestrichelten Hilfslinien (Abschlaglaenge, Gruenachsen). */
.golf-len-tip.leaflet-tooltip {
    background: rgba(17, 17, 17, 0.78);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    white-space: nowrap;
    box-shadow: none;
    pointer-events: none;
}
.golf-len-tip.leaflet-tooltip::before { display: none; }

/* Die Bahn-Nummern sind Chips wie die Farb-Chips und
   tragen deshalb dieselbe Pillenform — als 6-px-Kaestchen sahen sie im
   selben Panel wie ein Fremdkoerper aus. */
.golf-hole-chip {
    min-width: 24px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    border-radius: 999px;
    font-size: 0.78em;
    cursor: pointer;
}
.golf-hole-chip:hover { border-color: var(--c-primary); color: var(--fg); }
.golf-hole-chip.is-part { color: var(--fg); border-color: var(--border-hi); }
.golf-hole-chip.is-done {
    color: var(--c-signal);
    border-color: color-mix(in srgb, var(--c-signal) 55%, transparent);
}
.golf-hole-chip.is-current {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

.golf-mini-table { width: 100%; border-collapse: collapse; font-size: 0.82em; }
.golf-mini-table th, .golf-mini-table td {
    padding: 2px 4px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.golf-mini-table th { color: var(--muted-hi); font-weight: 600; }
.golf-mini-table .num, .golf-table .num { text-align: right; }

/* ----- Karten-Marker ----------------------------------------------------- */
/* eigene Symbole statt farbiger Punkte. Es sind dieselben
   Zeichen, die als props.marker_icon am gespeicherten Feature haengen — die
   Aufnahme sieht damit genauso aus wie das Ergebnis im Layer. */
.golf-pt { background: none; border: none; }
.golf-pt-svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.golf-pt-svg svg { width: 100%; height: 100%; display: block; }
/* Mehrere Abschlagfarben auf EINEM Messpunkt: Farbstreifen unter dem
   Symbol. Vorne/hinten tragen dagegen nur die hinterste Farbe. */
.golf-pt-swatches {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    margin-top: 1px;
    padding: 1px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.golf-pt-swatches i {
    display: block;
    width: 7px; height: 7px;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
/* Minus-Knopf am ZULETZT gesetzten Punkt — erscheint beim Hovern und
   entfernt ihn, wie "Punkt zurueck". */
.golf-pt-del {
    position: absolute;
    left: 100%;
    top: 0;
    transform: translate(-35%, -45%);
    /* so gross wie der Stuetzpunkt-Entfernen-Knopf bei
       Linien/Flaechen — vorher kaum zu treffen. */
    width: 26px; height: 26px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #fff;
    background: var(--c-error, #DC2626);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
    transition: transform 0.12s ease, background 0.12s ease;
}
/* Grosszuegige Trefferflaeche — der sichtbare Kreis bleibt klein. */
.golf-pt-del::after {
    content: "";
    position: absolute;
    inset: -8px;
}
.golf-pt.is-last .golf-pt-del { display: inline-flex; opacity: 0; }
.golf-pt.is-last:hover .golf-pt-del,
.golf-pt-del:focus-visible { opacity: 1; }
.golf-pt-del:hover { background: #B91C1C; transform: translate(-35%, -45%) scale(1.15); }
/* Hinweisstreifen AUF der Karte: welcher Punkt ist jetzt dran?
   pointer-events:none — der Streifen darf niemals einen Klick abfangen. */
.golf-map-hint {
    position: absolute;
    /* unten statt oben — dort verdeckt der Streifen weder
       die Werkzeugleiste noch den Bereich, in dem gemessen wird. */
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 820;
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: min(520px, calc(100% - 24px));
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(17, 20, 24, 0.88);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: var(--shadow-lift);
    font-size: 1.05em;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.golf-map-hint-dot {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #A3E635;
}
.golf-pt-label {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 2px;
    padding: 0 4px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
    pointer-events: none;
}
.golf-ghost-tip {
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
}
.golf-ghost-tip::before { display: none; }
/* Fadenkreuz solange die Aufnahme laeuft. */
.golf-capture-active .leaflet-container,
.leaflet-container.golf-capture-active { cursor: crosshair; }

/* ----- Modale ------------------------------------------------------------ */
.golf-start-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--bg-card);
}
.golf-start-card > b { display: block; margin-bottom: 2px; }
.golf-start-card .sub { margin: 0 0 8px; color: var(--muted); font-size: 0.88em; }
.golf-start-card .golf-input { margin-bottom: 8px; }
.golf-start-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Vermessung aus einem anderen Projekt: dieselbe Karte, aber in Amber
   abgesetzt. Sie ist kein Fehler, nur ein Hinweis - hier fortzusetzen
   hiesse, dieselbe Vermessung ein zweites Mal anzulegen. Dieselben
   Werte wie .btn-amber, KEINE erfundenen Token (DESIGN.md 11). */
.golf-start-card--fremd {
    border-color: rgba(201, 138, 0, 0.55);
    background: rgba(201, 138, 0, 0.10);
}
/* Startdialog-Fuss: Import ganz links, "Neue Vermessung" ganz rechts. */
.golf-foot-spacer { flex: 1 1 auto; }
.golf-import-btn { order: -1; }
.golf-cloud-icon {
    display: inline-block;
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask: url(/img/icons/cloud-upload-svgrepo-com.svg) center / contain no-repeat;
    mask: url(/img/icons/cloud-upload-svgrepo-com.svg) center / contain no-repeat;
}
/* Fadenkreuz, solange ein Punkt fuer die Hoehe gewaehlt wird. */
.golf-pick-active.leaflet-container,
.golf-pick-active .leaflet-container { cursor: crosshair; }

/* Gespeicherte Vermessungen: je Zeile oeffnen + als .geolyser exportieren. */
.golf-saved-list { list-style: none; margin: 0; padding: 0; }
.golf-saved-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid var(--border);
}
.golf-saved-row:first-child { border-top: 0; }
.golf-saved-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.golf-saved-row .golf-fbtn { width: 34px; height: 34px; }
/* Unveraenderlich (Schloss) und Klonen. Bernstein wie
   alles, was nur der SuperAdmin schaltet. */
.golf-saved-row .golf-fbtn--lock { color: var(--muted-hi, var(--fg)); }
.golf-saved-row .golf-fbtn--lock.is-on {
    background: rgba(201, 138, 0, 0.18);
    border-color: rgba(201, 138, 0, 0.6);
    color: #8a5d00;
}
[data-theme="dark"] .golf-saved-row .golf-fbtn--lock.is-on { color: #e6a627; }
.golf-saved-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    color: var(--c-amber, #c98a00);
}
.golf-saved-row .golf-fbtn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* Hier stand kurzzeitig eine zweite Regel fuer
   `.golf-cloud-icon`. Diese Klasse gehoerte aber laengst dem
   Import-Knopf (Maske mit cloud-UPLOAD, siehe oben) — mein Export-Symbol
   erbte dadurch Maske und Fuellfarbe des Upload-Zeichens, und der
   Dark-Mode-Filter schlug zusaetzlich auf die vorhandenen Import-Knoepfe
   durch. Das Herunterladen hat jetzt eine EIGENE Klasse, gebaut nach
   demselben Muster (Maske + currentColor), damit es sich automatisch
   dem Thema anpasst. */
.golf-cloud-down {
    display: inline-block;
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: url(/img/icons/cloud-download-svgrepo-com.svg) center / contain no-repeat;
    mask: url(/img/icons/cloud-download-svgrepo-com.svg) center / contain no-repeat;
}

.golf-form-grid {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 6px 10px;
    align-items: center;
}
.golf-form-grid .golf-label { margin: 0; }
.golf-subhead { margin: 14px 0 4px; font-size: 1em; }

.golf-tee-list { display: flex; flex-direction: column; gap: 2px; }
.golf-tee-row {
    display: grid;
    /* Farbe | Gespielt-von | Rolle | Hinweis  (die
       Geschlechts-Zuordnung sitzt direkt hinter der Farbe).
       FESTE Spaltenbreiten. Mit `auto` rechnet jede Zeile
       ihre Breiten allein aus — die Rollen und Hinweise standen dadurch
       von Zeile zu Zeile an anderer Stelle. Ein gemeinsames Raster ueber
       alle Zeilen (`display: contents`) waere die andere Loesung, kostet
       aber die Zeilen-Hervorhebung beim Darueberfahren. */
    grid-template-columns: 150px 210px 200px 1fr;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-radius: var(--radius-sm);
}
.golf-tee-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* Je Farbe ein Haken fuer Herren und einen fuer Damen
   (bei Gruen zusaetzlich Kinder). Der Haken waehlt die Farbe UND sagt,
   wer von ihr spielt — eine eigene Auswahl-Checkbox gibt es nicht mehr. */
.golf-tee-who {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: 0.9em;
}
.golf-tee-box {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.golf-tee-box input { cursor: pointer; }
/* Nach den Regeln ausgeschlossen — sichtbar, aber unantastbar. Der Grund
   steht im title-Tooltip. */
.golf-tee-box.is-off {
    color: var(--muted);
    cursor: not-allowed;
}
.golf-tee-box.is-off input { cursor: not-allowed; }
.golf-tee-row:hover { background: var(--bg-elevated); }
.golf-tee-name { font-weight: 600; }
.golf-tee-role, .golf-tee-note { color: var(--muted); font-size: 0.85em; }
.golf-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    border: 1px solid var(--border-hi);
    vertical-align: -2px;
}
.golf-swatch--sm { width: 10px; height: 10px; margin-right: 3px; }

.golf-table-body { max-height: 70vh; overflow: auto; }
.golf-table-wrap { overflow-x: auto; }
.golf-table { width: 100%; border-collapse: collapse; font-size: 0.86em; }
.golf-table th, .golf-table td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.golf-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
    color: var(--muted-hi);
    z-index: 1;
}
.golf-table--sum { width: auto; min-width: 340px; }
.golf-cell-sub { color: var(--muted); font-size: 0.85em; margin-left: 3px; }
.golf-linkbtn {
    background: none;
    border: none;
    color: var(--c-primary);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}
/* In den Listen ist der Link kein Fliesstext-Link, sondern
   ein Eintrag — deshalb dieselbe Chip-Optik wie bei den Farb-Chips
   darueber, statt unterstrichenem Blau. `--tee-hex` traegt die
   Abschlagfarbe (bzw. Violett beim Knickpunkt). */
.golf-side-list .golf-linkbtn {
    text-decoration: none;
    border: 1px solid var(--border-hi);
    border-radius: 999px;
    padding: 2px 10px;
    color: var(--fg);
    line-height: 1.3;
}
/* Der Farbbalken lag als `inset`-Schatten INNEN und
   verdeckte die linke Innenkante — der Text sass dadurch sichtbar aus der
   Mitte nach rechts. Jetzt traegt der Rahmen selbst die Abschlagfarbe und
   ist ringsum gleich stark; die Farbe steht zusaetzlich als Punkt vor der
   Beschriftung, damit sie auch bei sehr hellen Toenen erkennbar bleibt. */
.golf-linkbtn--tee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: color-mix(in srgb, var(--tee-hex, var(--border-hi)) 70%, transparent);
    background: color-mix(in srgb, var(--tee-hex, transparent) 16%, transparent);
}
.golf-linkbtn--tee::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tee-hex, var(--border-hi));
    border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
}
.golf-side-list .golf-linkbtn--tee:hover {
    background: color-mix(in srgb, var(--tee-hex, transparent) 28%, transparent);
}
.golf-side-row.is-current .golf-linkbtn--tee {
    border-color: var(--tee-hex, var(--border-hi));
    font-weight: 600;
}
/* Reiner Anzeige-Chip — sieht aus wie ein Listen-Eintrag, ist aber kein
   Knopf. Die Chip-Optik hing nur an
   `.golf-side-list .golf-linkbtn` und fiel deshalb ausserhalb einer
   Liste auf den unterstrichenen Fliesstext-Link zurueck — genau das
   passierte der Abschlagfarbe ueber dem Auswahlfeld "erste
   Teilstrecke". Die Optik gehoert an den Baustein selbst. */
.golf-linkbtn--static {
    cursor: default;
    text-decoration: none;
    border: 1px solid var(--border-hi);
    border-radius: 999px;
    padding: 2px 10px;
    color: var(--fg);
    line-height: 1.3;
}
.golf-badge {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--border-hi);
    color: var(--muted);
    font-size: 0.8em;
}
.golf-badge.is-ok {
    color: var(--c-signal);
    border-color: color-mix(in srgb, var(--c-signal) 55%, transparent);
}
.golf-legend { color: var(--muted); font-size: 0.82em; margin-top: 8px; }

/* Stammdaten-Maske: breite Karte, damit Beschriftung und Feld nebeneinander
   passen und die Abschlagliste nicht umbricht. */
.golf-setup-card .modal-body { max-height: 72vh; overflow-y: auto; }
.golf-loop-field { display: inline-flex; align-items: center; gap: 4px; }
.golf-loop-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.72em;
}
/* Die beiden Kurzwege im Panel (Par aendern, Par-Kontrolle oeffnen)
   tragen dieselbe Farbe wie ihr Knopf in der Schritt-Leiste — so ist auf
   einen Blick klar, wohin sie fuehren. Als graue
   .ghost-Knoepfe gingen sie unter. */
.golf-fbtn--jump {
    background: color-mix(in srgb, var(--nav) 16%, transparent);
    color: var(--nav);
    border: 1px solid color-mix(in srgb, var(--nav) 55%, transparent);
}
.golf-fbtn--jump:hover:not(:disabled) {
    background: color-mix(in srgb, var(--nav) 32%, transparent);
    border-color: var(--nav);
}
.golf-fbtn--jump--head { --nav: #0F766E; }
.golf-fbtn--jump--done { --nav: #0369A1; }
[data-theme="dark"] .golf-fbtn--jump--head { --nav: #2DD4BF; }
[data-theme="dark"] .golf-fbtn--jump--done { --nav: #7DD3FC; }

/* Zeile mit dem Par bzw. dem Sprung in die Par-Kontrolle.
   Der Knopf steht rechts, der Text davor — wie in "Gesetzte Messpunkte". */
.golf-row--par {
    gap: 8px;
    align-items: center;
}
.golf-row--par .golf-side-sub { margin-right: auto; }

/* Live-Hinweis waehrend eines laufenden Klick-Schritts. */
.golf-note--live {
    color: var(--fg);
    font-weight: 600;
    border-left: 2px solid #65A30D;
    padding-left: 6px;
}
/* Mitlaufende Abschlaglaenge waehrend des Absteckens.
   Tabellenziffern, damit die Zahl beim Ziehen nicht zappelt. */
.golf-box-live {
    font-variant-numeric: tabular-nums;
    font-size: 1.05em;
    color: var(--fg);
    min-width: 68px;
}

/* ----- Mobil ------------------------------------------------------------- */
@media (max-width: 720px) {
    .golf-side-body { max-height: 180px; }
    .golf-form-grid { grid-template-columns: 1fr; }
    .golf-tee-row { grid-template-columns: 1fr auto; }
    .golf-tee-role, .golf-tee-note { display: none; }
}

/* =========================================================================
 * Rechteck-Editor — js/rect-editor.js
 * -------------------------------------------------------------------------
 * Zwischen dem Aufziehen eines Rechtecks und dem "Neues Feature"-Modal
 * laeuft jetzt ein On-Map-Feinjustier-Schritt. Optik/Verhalten folgen
 * dem Kurven-/Korridor-Editor (§5.11): schwebende .line-radius-panel als
 * Basis (Flaeche --input-bg, NICHT --bg-card), Handles im gleichen
 * Vokabular (Ecken = volle .line-vertex-handle-box, Kantenmitten = die
 * halbtransparente .line-vertex-mid-box). Neu ist nur der runde
 * Verschiebe-Handle in der Mitte.
 * ===================================================================== */
.rect-edit-panel .rect-dim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.rect-edit-panel .rect-dim input[type="number"] {
    width: 82px;
    background: var(--input-bg);
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
/* Zeiger-Feedback pro Handle-Rolle. Muss NACH .line-vertex-handle /
   .line-curve-handle stehen (beide setzen cursor:grab). */
.rect-edit-handle--nw,
.rect-edit-handle--se { cursor: nwse-resize; }
.rect-edit-handle--ne,
.rect-edit-handle--sw { cursor: nesw-resize; }
.rect-edit-handle--n,
.rect-edit-handle--s  { cursor: ns-resize; }
.rect-edit-handle--e,
.rect-edit-handle--w  { cursor: ew-resize; }
.rect-edit-handle--move { cursor: move; }
/* Verschiebe-Handle: blauer Kreis mit weissem Vierrichtungs-Pfeil.
   box-shadow statt filter:drop-shadow — CSS-Filter auf per Drag
   bewegten Elementen erzwingen teure Repaints pro Frame (Erfahrung
   aus dem Kurven-Editor). */
.rect-move-dot {
    /* `display` ist PFLICHT: das Element ist ein <span> im HTML des
       divIcon, also von Haus aus inline - und auf einem nicht-ersetzten
       Inline-Kasten wirken `width` und `height` nicht (CSS 2.1 10.3.1).
       Solange das SVG darin im Fluss lag, gab es dem Span seine Groesse;
       seit es absolut sitzt, faellt der Kasten ohne diese Zeile auf
       5 px zusammen (nur noch die beiden Border). `position:relative`
       blockifiziert NICHT. Dieselbe Zeile steht aus demselben Grund an
       .line-vertex-handle-box und .line-curve-handle-dot. */
    display: block;
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #007FB4;
    border: 2.5px solid #ffffff;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
/* Das Vierwege-Kreuz sass
   knapp einen halben Pixel rechts unter der Mitte - der Griff ist
   26 x 26 mit Mitte bei 13,0, das Kreuz lag bei 13,4.
   
   Ursache war die Zentrierung per Flexbox INNERHALB der Border. Deren
   Breite ist 2,5px, und wie ein Browser halbe Pixel rundet, ist ihm
   ueberlassen; der Innenraum wurde damit mal 21, mal 22 px breit, und
   ein 15px-Symbol darin landete auf einer halben Position.
   
   Jetzt absolut positioniert. `top/left: 50%` bezieht sich auf die
   Padding-Box, und deren Mitte liegt IMMER bei 13, egal wie die Border
   gerundet wird: (26 - 2b)/2 + b = 13. Das Symbol ist dazu auf 16px
   gerade gemacht, damit auch der halbe Versatz (-8px) aufgeht. Wer hier
   etwas aendert: beide Zahlen muessen gerade bleiben. */
.rect-move-dot svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
}
/* Auf schmalen Viewports darf die Leiste umbrechen, sonst laeuft sie
   mit zwei Zahlenfeldern + Flaeche aus dem Bild. */
@media (max-width: 620px) {
    .rect-edit-panel {
        flex-wrap: wrap;
        justify-content: center;
        max-width: calc(100vw - 24px);
        row-gap: 6px;
    }
    .rect-edit-panel .rect-dim input[type="number"] { width: 68px; }
}

/* =========================================================================
 * Platzvermessung: "Setzen"-Knoepfe in Tuerkis
 * -------------------------------------------------------------------------
 * .golf-fbtn--pick tragen alle Knoepfe, nach deren Druck der NAECHSTE
 * KARTENKLICK etwas setzt: "Messpunkt setzen" / "Neu setzen" (arm-tee,
 * arm-dogleg, arm-green) und "Enden abstecken" (box-measure). Als reine
 * Umriss-Knoepfe gingen sie zwischen Farb-Chips und Eingabefeldern unter.
 * Tuerkis ist im Modul schon die Farbe fuer "von der Karte holen"
 * (.golf-fbtn--inline) — dieselbe Bedeutung, deshalb dieselbe Familie.
 * Steht am Dateiende, damit es die aeltere .golf-fbtn--mini.is-armed-Regel
 * (Primaerblau) sicher ueberlaeuft.
 * ===================================================================== */
.golf-fbtn--pick {
    background: color-mix(in srgb, var(--c-cyan) 18%, transparent);
    color: var(--c-primary-dk, #0369A1);
    border: 1px solid color-mix(in srgb, var(--c-cyan) 55%, transparent);
}
.golf-fbtn--pick:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-cyan) 34%, transparent);
    border-color: var(--c-cyan);
}
[data-theme="dark"] .golf-fbtn--pick { color: #7DD3FC; }
/* Scharf = volle Flaeche statt Umriss, gleiche Sprache wie beim aktiven
   Schritt-Knopf. Der Puls aus .golf-fbtn--mini.is-armed bleibt, nur in
   Tuerkis statt Primaerblau. */
.golf-fbtn--pick.is-armed {
    background: var(--c-cyan);
    color: #08303d;
    border-color: var(--c-cyan);
    --pulse-rgb: 59, 189, 232;
}

/* =========================================================================
 * Platzvermessung: abweichendes Par je Abschlagfarbe
 * -------------------------------------------------------------------------
 * Unter der Herren-/Damen-Zeile der Par-Kontrolle steht je Abschlagfarbe
 * eine Unterzeile — aber nur, wenn dort etwas zu entscheiden ist. Sie ist
 * bewusst leiser als die Zeile darueber (kleiner, eingerueckt): das Par der
 * BAHN ist die Regel, die Farbe die Ausnahme.
 * ===================================================================== */
.golf-parcheck-row--tee .golf-parcheck-tee {
    font-size: 0.92em;
    color: var(--muted-hi);
    white-space: nowrap;
    /* Einrueckung zeigt: gehoert unter die Zeile darueber. */
    padding-left: 8px;
}
.golf-parcheck-row--tee .golf-par-select {
    /* Etwas schmaler als das Bahn-Par — es ist die untergeordnete Angabe. */
    width: 78px;
    min-width: 78px;
}
/* Eingetragene Abweichung: der Wert steht bewusst NICHT auf dem Bahn-Par,
   das darf man sehen. Tuerkis (nicht rot) — es ist eine Entscheidung, kein
   Fehler; Rot bleibt der Laengen-Abweichung vorbehalten. */
.golf-par-select.is-override {
    border-color: var(--c-cyan);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-cyan) 45%, transparent);
}
.golf-par-mark {
    font-size: 0.82em;
    color: var(--c-cyan);
    white-space: nowrap;
}
[data-theme="light"] .golf-par-mark { color: var(--c-primary-dk, #0369A1); }

/* ---------------------------------------------------------------------
   Das Fragezeichen bleibt rund
   ---------------------------------------------------------------------
   Auf dem Telefon wurden die Kreise oval. Ursache ist nicht EINE Regel,
   sondern die Lage: `.i2i-hint` steht bei (0,1,0), und mehrere
   Mobil-Regeln fassen Knoepfe allgemeiner an (`.modal-actions button`
   bei (0,1,1), Touch-Mindesthoehen von 44 px). Sie stehen spaeter in
   der Datei und gewinnen damit bei gleicher oder hoeherer
   Spezifitaet - die Hoehe wuchs, die Breite blieb, und aus dem Kreis
   wurde ein Ei.

   Deshalb hier am ENDE der Datei und mit zwei Klassen: Breite und
   Hoehe werden zusaetzlich als min und max festgeschrieben,
   `aspect-ratio` haelt das Verhaeltnis auch dann, wenn doch einmal
   etwas durchkommt, und `align-self: center` verhindert das Strecken
   in einer Flex-Zeile. */
.i2i-hint.i2i-hint {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    aspect-ratio: 1 / 1;
    flex: 0 0 16px;
    align-self: center;
    padding: 0;
    border-radius: 50%;
}

/* === Anleitung: Symbole, Kaesten, Schaubilder, Fotos ======
   Die Kapiteltexte tragen nur Platzhalter; js/help/abbildungen.js macht
   daraus Symbole, Schaubilder und Fotos (hilfeAnreichern). Aufbau und
   Regeln: docs/DESIGN.md §5.14.
   Einzige feste Farbe ist das Signalgruen der Nummern (#02FE89 auf
   #0b1a12): es muss genau zu den Nummern passen, die tools/hilfe-bilder.mjs
   in die Fotos zeichnet, und die sind in beiden Themen gleich. */

/* Inhaltsverzeichnis und Kapitelkopf mit Symbol */
.help-toc-item {
    display: flex;
    align-items: center;
    gap: 9px;
}
/* Sicherheitsnetz: ein Titel, der auch in 232 px nicht passt, bricht
   um, statt die Spalte waagerecht scrollen zu lassen. */
.help-toc-text {
    min-width: 0;
    overflow-wrap: anywhere;
}
.help-toc-ico {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    display: inline-flex;
    color: var(--muted);
}
.help-toc-item:hover .help-toc-ico { color: var(--muted-hi); }
.help-toc-item.is-active .help-toc-ico { color: var(--c-cyan); }
[data-theme="light"] .help-toc-item.is-active .help-toc-ico { color: var(--c-primary); }
.help-toc-ico svg,
.help-chapter-ico svg {
    width: 100%;
    height: 100%;
    display: block;
}
.help-toc-ico .hi-maske,
.help-chapter-ico .hi-maske,
.help-toc-ico .hi-pm,
.help-chapter-ico .hi-pm {
    display: block;
    width: 100%;
    height: 100%;
}
.help-content .help-chapter-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 1.15em;
}
.help-chapter-ico {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 6px;
    display: inline-flex;
    border-radius: var(--radius-sm);
    background: rgba(59, 189, 232, 0.12);
    color: var(--c-cyan);
}
[data-theme="light"] .help-chapter-ico { color: var(--c-primary); }
.help-toc-ico:empty,
.help-chapter-ico:empty { display: none; }

/* Symbol im Fliesstext: sieht aus wie ein kleiner Knopf */
.help-content i.hi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    padding: 0.18em;
    margin: 0 0.12em;
    vertical-align: -0.38em;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--muted-hi);
    font-style: normal;
    line-height: 0;
}
.help-content i.hi svg { width: 100%; height: 100%; display: block; }
.help-content i.hi .hi-maske,
.help-content i.hi .hi-pm {
    display: block;
    width: 100%;
    height: 100%;
}
.hi-maske {
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.hi-pm {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* Die Farben, die dieselben Knoepfe in der Oberflaeche tragen */
.help-content i.hi[data-hi="muss"],
.help-content i.hi[data-hi="plus"],
.help-content i.hi[data-hi="laden"] { color: var(--c-signal-dk); }
.help-content i.hi[data-hi="kann"],
.help-content i.hi[data-hi="ziel"],
.help-content i.hi[data-hi="auge"],
.help-content i.hi[data-hi="stift"] { color: var(--c-primary-hi); }
.help-content i.hi[data-hi="nicht"],
.help-content i.hi[data-hi="loeschen"] { color: var(--c-error); }
.help-content i.hi[data-hi="papierkorb"],
.help-content i.hi[data-hi="widerrufen"],
.help-content i.hi[data-hi="aus-ansicht"] { color: #c98a00; }
[data-theme="dark"] .help-content i.hi[data-hi="papierkorb"],
[data-theme="dark"] .help-content i.hi[data-hi="widerrufen"],
[data-theme="dark"] .help-content i.hi[data-hi="aus-ansicht"] { color: var(--c-warn); }

/* Farbfelder fuer die Knopffarben (Kapitel "Layer und Features") */
.help-content .hilfe-farbe {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.35em;
    vertical-align: -0.05em;
    border-radius: 3px;
    background: var(--muted);
}
.help-content .hilfe-farbe[data-farbe="blau"] { background: var(--c-primary); }
.help-content .hilfe-farbe[data-farbe="gruen"] { background: var(--c-signal-dk); }
.help-content .hilfe-farbe[data-farbe="amber"] { background: #c98a00; }
.help-content .hilfe-farbe[data-farbe="rot"] { background: var(--c-error); }
.help-content .hilfe-farbe[data-farbe="violett"] { background: #9b59b6; }
.help-content .hilfe-farbe[data-farbe="grau"] { background: var(--muted); }

/* Rollen-Hinweis (Admin, SuperAdmin, Admin · Editor · Contributor) */
.help-content .role-tag {
    display: inline-block;
    padding: 0.05em 0.55em;
    margin-right: 0.3em;
    border: 1px solid var(--c-primary);
    border-radius: 999px;
    color: var(--c-primary);
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 0.05em;
    white-space: nowrap;
}
.help-content .role-tag--superadmin { border-color: #9b59b6; color: #9b59b6; }
[data-theme="dark"] .help-content .role-tag { border-color: var(--c-primary-hi); color: var(--c-primary-hi); }
[data-theme="dark"] .help-content .role-tag--superadmin { border-color: #c08ad8; color: #c08ad8; }

/* Tasten */
.help-content kbd {
    display: inline-block;
    padding: 0.12em 0.45em;
    border: 1px solid var(--border-hi);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--fg);
    font: 600 0.84em/1.3 var(--font-ui);
    white-space: nowrap;
}

/* "Auf einen Blick" am Kapitelanfang */
.help-content .hilfe-kurz {
    margin: 2px 0 18px;
    padding: 12px 14px 10px;
    border: 1px solid var(--border-hi);
    border-radius: var(--radius);
    background: var(--bg-card);
}
.help-content .hilfe-kurz-titel {
    margin: 0 0 6px;
    font: 600 0.74em/1.2 var(--font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-cyan);
}
[data-theme="light"] .help-content .hilfe-kurz-titel { color: var(--c-primary); }
.help-content .hilfe-kurz ul {
    margin: 0;
    padding-left: 1.15em;
}
.help-content .hilfe-kurz li { margin: 3px 0; }

/* Tipp / Achtung / Info */
.help-content .hilfe-box {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 10px;
    margin: 12px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: rgba(59, 189, 232, 0.07);
    border-left-color: var(--c-cyan);
}
.help-content .hilfe-box > * { grid-column: 2; margin: 0; }
.help-content .hilfe-box > * + * { margin-top: 6px; }
.help-content .hilfe-box > .hilfe-box-ico {
    grid-column: 1;
    grid-row: 1 / span 20;
    width: 20px;
    height: 20px;
    margin: 0;
    color: var(--c-cyan);
}
.help-content .hilfe-box > .hilfe-box-ico svg { width: 100%; height: 100%; display: block; }
.help-content .hilfe-box ul { padding-left: 1.1em; }
.help-content .hilfe-box[data-art="tipp"] {
    background: var(--c-signal-dim);
    border-left-color: var(--c-signal-dk);
}
.help-content .hilfe-box[data-art="tipp"] > .hilfe-box-ico { color: var(--c-signal-dk); }
.help-content .hilfe-box[data-art="achtung"] {
    background: rgba(201, 138, 0, 0.1);
    border-left-color: #c98a00;
}
.help-content .hilfe-box[data-art="achtung"] > .hilfe-box-ico { color: #a06e00; }
[data-theme="dark"] .help-content .hilfe-box[data-art="achtung"] > .hilfe-box-ico { color: var(--c-warn); }
[data-theme="light"] .help-content .hilfe-box[data-art="info"] > .hilfe-box-ico { color: var(--c-primary); }

/* Schritte (blau) und Legende zu Fotos (gruen wie die Nummern im Bild) */
.help-content ol.hilfe-schritte,
.help-content ol.hilfe-legende {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 14px;
}
.help-content ol.hilfe-schritte { counter-reset: hilfe-schritt; }
.help-content ol.hilfe-legende { counter-reset: hilfe-nummer; }
.help-content ol.hilfe-schritte > li,
.help-content ol.hilfe-legende > li {
    position: relative;
    padding-left: 34px;
    margin: 7px 0;
    min-height: 24px;
}
.help-content ol.hilfe-schritte > li { counter-increment: hilfe-schritt; }
.help-content ol.hilfe-legende > li { counter-increment: hilfe-nummer; padding-left: 32px; min-height: 22px; }
.help-content ol.hilfe-schritte > li::before,
.help-content ol.hilfe-legende > li::before {
    position: absolute;
    left: 0;
    top: -1px;
    text-align: center;
    border-radius: 50%;
}
.help-content ol.hilfe-schritte > li::before {
    content: counter(hilfe-schritt);
    width: 24px;
    height: 24px;
    background: var(--c-primary);
    color: var(--c-light);
    font: 600 12px/24px var(--font-ui);
}
.help-content ol.hilfe-legende > li::before {
    content: counter(hilfe-nummer);
    width: 22px;
    height: 22px;
    background: #02FE89;
    color: #0b1a12;
    font: 700 12px/22px var(--font-ui);
    box-shadow: 0 0 0 2px #181B1D;
}

/* Schaubilder */
.help-content figure.hilfe-abb,
.help-content figure.hilfe-bild {
    margin: 14px 0 16px;
}
.help-content .hilfe-abb-l { display: none; }
/* Knoepfe unter einem Schaubild (Legende herunterladen). Nur am
   Bildschirm; das PDF der Anleitung laesst den Block aus. */
.help-content .hilfe-abb-download {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 14px;
}
.help-content .hilfe-abb-svg {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}
.help-content .hilfe-abb-svg svg {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
}
.help-content figure.hilfe-abb figcaption,
.help-content figure.hilfe-bild figcaption {
    margin-top: 6px;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--muted);
}

/* Fotos */
.help-content figure.hilfe-bild img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    cursor: zoom-in;
}
.help-content figure.hilfe-bild img:not([src]) { display: none; }
/* Hohe, schmale Fotos neben ihre Legende stellen */
.help-content .hilfe-paar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    margin: 14px 0 16px;
}
.help-content .hilfe-paar > figure.hilfe-bild { margin: 0; }
.help-content .hilfe-paar > ol.hilfe-legende { margin-top: 0; }
@media (max-width: 620px) {
    .help-content .hilfe-paar { grid-template-columns: minmax(0, 1fr); }
    .help-content .hilfe-paar > ol.hilfe-legende { margin-top: 12px; }
}
/* Vergroesserung beim Klick */
.hilfe-zoom {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.78);
    cursor: zoom-out;
}
.hilfe-zoom img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* Rollentabelle: Zeichen vor dem Wort, damit man es ohne Farbe liest */
.help-content .perm-yes::before { content: "\2713\00a0"; }
.help-content .perm-no::before { content: "\2715\00a0"; }
.help-content .perm-partial::before { content: "\25D0\00a0"; font-style: normal; }