/* Grundstile, Teil 8 von 8: Feuchtigkeitskarte, Ansichten im Layer-Panel, Zeichen-Fenster, Spaltenbreiten, Knopfmasse, Einstellungen.
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. */
/* ==========================================================================
Feuchtigkeitskarte und Mehrfachauswahl
========================================================================== */
/* ----- Sidebar-Knopf der Feuchtigkeitskarte -------------------------------
Wasserblau (Tailwind blue-600), weil Rose, Teal, Signal-Gruen, Lime,
Indigo und Amber schon vergeben sind. Aufbau Zeile fuer Zeile wie
.sidebar-schnell-accent. Die Farbe steht auch in js/feuchte/ui.js
(AKZENT) und in der Tabelle in docs/DESIGN.md. */
.sidebar-feuchte-accent {
background: rgba(37, 99, 235, 0.16) !important;
color: #1D4ED8 !important;
border-color: rgba(37, 99, 235, 0.55) !important;
--pulse-rgb: 37, 99, 235;
}
.sidebar-feuchte-accent:hover {
background: rgba(37, 99, 235, 0.30) !important;
border-color: #2563EB !important;
}
[data-theme="dark"] .sidebar-feuchte-accent { color: #93C5FD !important; }
[data-theme="dark"] .sidebar-feuchte-accent:hover { color: #BFDBFE !important; }
/* Laeuft, ist aber nicht zu sehen: derselbe Puls wie bei den anderen. */
body.feuchte-mode-open[data-feuchte-view="app"] .sidebar-feuchte-accent,
body.feuchte-mode-open:has(#features-panel.features-panel--collapsed)
.sidebar-feuchte-accent {
position: relative;
animation: geolyser-accent-pulse 1.8s ease-in-out infinite;
}
/* ----- Mehrfachauswahl: Layer-Liste --------------------------------------
Eine ausgewaehlte Zeile traegt einen Haken vor dem Namen und die
Auswahlfarbe #00A0D2 (dieselbe wie der Ring auf der Karte,
js/karten-auswahl.js). Hartkodiert wie die Modus-Akzente: es ist eine
Erkennungsfarbe, die auf der Karte UND in der Liste gleich sein muss. */
.layer-feature.is-ausgewaehlt .layer-feature-name {
background: rgba(0, 160, 210, 0.16);
color: var(--fg);
box-shadow: inset 3px 0 0 #00A0D2;
}
.layer-feature.is-ausgewaehlt .layer-feature-name::before {
content: "\2713";
display: inline-block;
width: 1.1em;
margin-right: 2px;
font-weight: 700;
color: #0086B0;
}
[data-theme="dark"] .layer-feature.is-ausgewaehlt .layer-feature-name::before {
color: #5CCBF0;
}
/* Waehrend des Haltens fuellt sich die Zeile von links: so sieht man,
dass gleich ein Haken kommt. Die Klasse setzt sidebar.js erst nach
500 ms Halten (ANZEIGE_AB_MS), die Fuellung dauert dann noch 400 ms
bis zur Auswahl (HALTEN_MS 900). */
.layer-feature.wird-gehalten .layer-feature-name {
background-image: linear-gradient(90deg, rgba(0, 160, 210, 0.28), rgba(0, 160, 210, 0.28));
background-repeat: no-repeat;
background-size: 0 100%;
animation: geolyser-auswahl-fuellen 400ms linear forwards;
}
@keyframes geolyser-auswahl-fuellen { to { background-size: 100% 100%; } }
/* Solange eine Auswahl steht, markiert Tippen statt zu oeffnen: der
Text laesst sich dabei nicht versehentlich markieren. */
.layer-feature { -webkit-touch-callout: none; }
.layer-feature .layer-feature-name { user-select: none; -webkit-user-select: none; }
/* Fusszeile der Liste: Zahl links, drei Knoepfe rechts. [hidden] muss
gegen das display:flex von .sidebar-foot-row gewinnen. */
.sidebar-auswahl[hidden] { display: none !important; }
.sidebar-auswahl {
padding: 4px 6px;
border-radius: var(--radius-sm);
border: 1px solid rgba(0, 160, 210, 0.55);
background: rgba(0, 160, 210, 0.10);
}
.sidebar-auswahl-zahl {
flex: 1 1 auto;
min-width: 0;
font-size: 0.85em;
font-weight: 600;
color: var(--fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-auswahl .icon-btn {
width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ----- Mehrfachauswahl: Karte ------------------------------------------- */
/* Leiste unten mittig. Eine Zeile hoeher als der Zeichenziel-Streifen
(bottom 22px), damit beide nebeneinander lesbar bleiben. */
.geolyser-auswahl-leiste {
position: absolute;
left: 50%;
bottom: 56px;
transform: translateX(-50%);
z-index: 1040;
display: inline-flex;
align-items: center;
gap: 10px;
max-width: calc(100% - 24px);
padding: 5px 6px 5px 14px;
border-radius: 999px;
border: 1px solid rgba(0, 160, 210, 0.65);
background: var(--bg-panel);
color: var(--fg);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
font-size: 0.85rem;
}
.geolyser-auswahl-leiste[hidden] { display: none; }
.geolyser-auswahl-zahl { font-weight: 600; white-space: nowrap; }
.geolyser-auswahl-leeren {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
border-radius: 999px;
font: inherit;
cursor: pointer;
white-space: nowrap;
}
.geolyser-auswahl-leeren svg { width: 12px; height: 12px; flex: 0 0 auto; }
/* Haken an einem ausgewaehlten Feature. Leaflet gibt dem divIcon einen
weissen Kasten, den nimmt background:none weg. */
/* Ring um das Symbol eines ausgewaehlten Punkts (js/karten-auswahl.js
rechnet Groesse und Lage aus dem Symbol). Weisser Aussenrand, damit er
auf dem Luftbild steht. */
.leaflet-marker-icon.geolyser-auswahl-ring {
background: none;
border: 0;
}
.geolyser-auswahl-ring > span {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
border: 2.5px solid #00A0D2;
background: rgba(0, 160, 210, 0.12);
box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.9);
}
.leaflet-marker-icon.geolyser-auswahl-haken {
background: none;
border: 0;
}
.geolyser-auswahl-haken-kreis {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #00A0D2;
color: #ffffff;
border: 2px solid #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
box-sizing: border-box;
}
.geolyser-auswahl-haken-kreis svg { width: 12px; height: 12px; }
/* Strg + Ziehen: das Auswahl-Rechteck. */
.geolyser-auswahl-rechteck {
position: absolute;
z-index: 1030;
pointer-events: none;
border: 1.5px dashed #00A0D2;
background: rgba(0, 160, 210, 0.12);
}
/* Halten: ein Ring, der sich schliesst. Er erscheint erst nach 500 ms
Halten, seine Dauer (400 ms) setzt js/karten-auswahl.js. */
.geolyser-auswahl-halten {
position: absolute;
z-index: 1030;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border-radius: 50%;
pointer-events: none;
border: 3px solid rgba(0, 160, 210, 0.25);
border-top-color: #00A0D2;
animation: geolyser-auswahl-ring 400ms linear forwards;
}
@keyframes geolyser-auswahl-ring {
from { transform: rotate(0deg) scale(0.6); opacity: 0.4; }
to { transform: rotate(360deg) scale(1); opacity: 1; }
}
/* Solange eine Auswahl steht, ist ein Klick ein Umschalten: das zeigt
der Zeiger. */
.leaflet-container.geolyser-auswahl-an .leaflet-interactive { cursor: copy; }
/* ----- Auswahl editieren: Beschreibung und Loeschen ---------------------- */
.bulk-edit-footer-spacer { flex: 1 1 auto; }
/* Beschreibung im Sammelfenster: siehe "Sammelfenster wie das
Feature-Fenster" weiter unten. */
/* ----- Breiten-Griff der grossen Fenster (js/modal-vollbild.js) --------
Unten rechts in der Ecke der Karte, sechs Punkte als Dreieck. Nur im
Fenstermodus ab 1025 px; im Vollbild und darunter fuellen die Fenster
den Bildschirm ohnehin. */
.modal-breite-griff {
position: absolute;
/* Die Karte hat --radius-lg (16 px) als Eckenrundung. Mit 3 px
Abstand sass der Griff in der Rundung und wurde angeschnitten
8 px halten ihn innerhalb der Ecke. */
right: 8px;
bottom: 8px;
width: 16px;
height: 16px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
color: var(--muted);
cursor: ew-resize;
touch-action: none;
z-index: 5;
border-radius: 3px;
opacity: 0.8;
}
.modal-breite-griff:hover { color: var(--fg); opacity: 1; }
.modal.is-vollbild .modal-breite-griff { display: none; }
@media (max-width: 1024px) {
.modal-breite-griff { display: none; }
}
/* Waehrend des Ziehens: kein Markieren von Text, Zeiger bleibt. */
body.modal-breite-zieht,
body.modal-breite-zieht * {
cursor: ew-resize !important;
user-select: none !important;
}
/* ----- Einstellungen / Admin-Einstellungen breiter ---------
Einstellungen und Admin-Einstellungen sind dasselbe Fenster
(#admin-modal, Nicht-Admins sehen weniger Reiter). Mit 980 px (.modal-card--wider) brachen im Kopf Titel und Reiter in
zwei Zeilen ("Layer anderer / Nutzer", "Audit- / Log"). Die Fenster
bekommen deshalb von Haus aus 1200 px, gedeckelt auf den Bildschirm,
und die Reiter brechen nicht mehr um. Reicht der Platz trotzdem nicht
(kleiner Desktop, lange Uebersetzung), laeuft die Reiterzeile
waagerecht, statt Titel und Knoepfe zu quetschen. Die gezogene Breite
des Griffs (js/modal-vollbild.js) steht inline und gewinnt. */
@media (min-width: 1025px) {
#admin-modal > .modal-card {
max-width: min(1200px, calc(100vw - 48px));
}
#admin-modal .modal-header .modal-title {
white-space: nowrap;
flex: 0 0 auto;
}
#admin-modal .modal-header-tabs {
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
scrollbar-width: thin;
}
#admin-modal .modal-header-tab {
white-space: nowrap;
flex: 0 0 auto;
}
}
/* ----- "Auswahl aufheben" in Rose ---------------------
Alle drei Knoepfe, die die Mehrfachauswahl leeren, tragen dieselbe
Farbe: die Leiste unten auf der Karte, die Fusszeile der Layer-Liste
und die Aktionsleiste der Schnellsuche. Rose mit denselben Werten wie
.sidebar-gcp-accent (Palette-Slug "rose", #EC4899), damit kein neuer
Farbton entsteht. */
.geolyser-auswahl-leeren,
.sidebar-auswahl [data-action="auswahl-leeren"],
#features-panel [data-action="clear-selection"] {
background: rgba(236, 72, 153, 0.16) !important;
color: #be185d !important;
border: 1px solid rgba(236, 72, 153, 0.45) !important;
}
.geolyser-auswahl-leeren:hover,
.sidebar-auswahl [data-action="auswahl-leeren"]:hover,
#features-panel [data-action="clear-selection"]:hover:not([disabled]) {
background: rgba(236, 72, 153, 0.28) !important;
color: #9d174d !important;
}
[data-theme="dark"] .geolyser-auswahl-leeren,
[data-theme="dark"] .sidebar-auswahl [data-action="auswahl-leeren"],
[data-theme="dark"] #features-panel [data-action="clear-selection"] {
color: #f9a8d4 !important;
}
[data-theme="dark"] .geolyser-auswahl-leeren:hover,
[data-theme="dark"] .sidebar-auswahl [data-action="auswahl-leeren"]:hover,
[data-theme="dark"] #features-panel [data-action="clear-selection"]:hover:not([disabled]) {
color: #fbcfe8 !important;
}
/* Zwischenzeile in der Schnellsuche: "Ausgewählt (n)" ueber den
markierten Features, die der Filter nicht trifft, "Treffer (n)" ueber
dem Rest (js/features-panel.js, zeichneZeilen). */
.features-panel-trenner {
list-style: none;
padding: 6px 8px 2px;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--muted);
}
/* ----- Sammelfenster wie das Feature-Fenster ----------
Vorher: Beschriftung links neben kleinen 32-px-Feldern, eigene
Rahmen und Schriftgroessen. Jetzt steht die Beschriftung klein ueber
dem Feld wie bei .field-label, und alle Eingaben tragen dieselben
Masse wie .field input im Feature-Fenster. Die Regeln haengen an
#bulk-edit-modal, damit die aelteren .bulk-edit-*-Regeln oben (auch
fuer andere Fenster) unberuehrt bleiben. */
#bulk-edit-modal .bulk-edit-toolbar {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 14px;
padding: 4px 0 14px;
border-bottom: 1px solid var(--border);
}
#bulk-edit-modal .bulk-edit-row {
display: grid;
grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
align-items: start;
align-content: start;
flex: 0 0 auto;
gap: 6px 8px;
min-height: 0;
}
#bulk-edit-modal .bulk-edit-row > * { min-width: 0; }
#bulk-edit-modal .bulk-edit-row-label {
grid-column: 1 / -1;
min-width: 0;
font-size: .8em;
font-weight: normal;
color: var(--muted);
}
/* Tags, Farbe und Symbol laufen ueber die ganze Breite. */
#bulk-edit-modal .bulk-edit-tag-block > :not(.bulk-edit-row-label),
#bulk-edit-modal .bulk-edit-color-block > :not(.bulk-edit-row-label),
#bulk-edit-modal .bulk-edit-marker-block > :not(.bulk-edit-row-label) {
grid-column: 1 / -1;
}
/* Name: Art der Aenderung links, dann ein oder zwei Felder. */
#bulk-edit-modal .bulk-edit-name-block {
grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) minmax(0, 1fr);
}
#bulk-edit-modal .bulk-edit-name-block [data-role="bulk-name-replace-from"][hidden] + [data-role="bulk-name-value"] {
grid-column: 2 / -1;
}
#bulk-edit-modal .bulk-edit-name-input--compact {
max-width: none;
min-width: 0;
}
#bulk-edit-modal .bulk-edit-name-mode {
min-width: 0;
max-width: none;
}
/* Beschreibung: Art links, der Text direkt dahinter wie beim Namen
Beide Felder stehen immer da und sind bei
"- nicht aendern -" ausgegraut (db-modal.js, bulkFelderSperren). */
#bulk-edit-modal .bulk-edit-desc-block [data-role="bulk-desc-value"] {
grid-column: 2 / -1;
min-height: 40px;
height: 40px;
resize: vertical;
line-height: 1.4;
}
#bulk-edit-modal .bulk-edit-toolbar input[type="text"]:disabled,
#bulk-edit-modal .bulk-edit-toolbar textarea:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Eingaben: dieselben Masse wie .field input im Feature-Fenster. */
#bulk-edit-modal .bulk-edit-toolbar input[type="text"],
#bulk-edit-modal .bulk-edit-toolbar select,
#bulk-edit-modal .bulk-edit-toolbar textarea {
height: auto;
min-width: 0;
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
font: inherit;
font-size: inherit;
background: var(--input-bg);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
#bulk-edit-modal .bulk-edit-toolbar input[type="text"]:focus,
#bulk-edit-modal .bulk-edit-toolbar select:focus,
#bulk-edit-modal .bulk-edit-toolbar textarea:focus {
outline: none;
border-color: var(--border-hi);
box-shadow: 0 0 0 3px rgba(0, 127, 180, 0.18);
}
/* Der Tag-Waehler darf wachsen wie im Feature-Fenster. */
#bulk-edit-modal .bulk-edit-tag-picker {
max-height: none;
overflow: visible;
padding: 6px 8px;
}
#bulk-edit-modal .bulk-edit-tag-picker .tag-picker-chips {
max-height: 72px;
}
/* Symbole als gleich breite Kacheln wie im Feature-Fenster. */
#bulk-edit-modal .bulk-edit-marker-tiles {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
gap: 6px;
}
#bulk-edit-modal .bulk-edit-marker-tiles .marker-icon-pick {
width: auto;
height: 40px;
}
/* Unveraenderlich im Fuss, links neben dem Abstandhalter. */
.bulk-edit-immortal {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 12px;
color: var(--muted-hi);
font-size: .9em;
cursor: pointer;
user-select: none;
}
.bulk-edit-immortal[hidden] { display: none; }
.bulk-edit-immortal input { width: 16px; height: 16px; margin: 0; }
@media (max-width: 600px) {
#bulk-edit-modal .bulk-edit-row,
#bulk-edit-modal .bulk-edit-name-block {
grid-template-columns: minmax(0, 1fr);
}
#bulk-edit-modal .bulk-edit-name-block [data-role="bulk-name-replace-from"][hidden] + [data-role="bulk-name-value"],
#bulk-edit-modal .bulk-edit-desc-block [data-role="bulk-desc-value"] {
grid-column: auto;
}
}
/* Waehrend einer Mehrfachauswahl sind die Wetterstationen keine
Features und lassen sich nicht auswaehlen. Sie treten zurueck
(grau, blass) und nehmen keine Klicks mehr an, damit ein Tippen auf
ein Feature darunter nicht an ihnen haengen bleibt.
Die Klasse setzt js/karten-auswahl.js am Kartenbehaelter. */
.leaflet-container.geolyser-auswahl-an .leaflet-marker-icon.weather-station-icon {
filter: grayscale(1);
opacity: 0.35 !important;
pointer-events: none !important;
}
/* ---- Kopf und Fuss aller Fenster ----
Der Breiten-Griff sitzt 8 bis 24 px vor der rechten unteren Ecke.
Mit 18 px Innenabstand standen die rechten Knoepfe des Fusses direkt
daneben. Kopf und Fuss ruecken deshalb links und rechts auf 32 px
ein, damit alle vier Seiten gleich weit vom Rand stehen. Der Fuss
hat immer die regulaere Hoehe (65 px = 40 px Knopf, 2 x 12 px, 1 px
Linie), auch wenn er leer ist wie in den Einstellungen und in
Mein Konto - so springt beim Wechsel zwischen Fenstern nichts.
Nur ab 1025 px: darunter sind die Fenster Vollbild mit eigenen
Abstaenden, dort gibt es auch keinen Griff. */
@media (min-width: 1025px) {
.modal-card > .modal-header,
.modal-card > .modal-footer {
padding-left: 32px;
padding-right: 32px;
}
.modal-card > .modal-footer {
min-height: 65px;
box-sizing: border-box;
align-items: center;
}
/* Der Kopf ebenso: mit Reitern (Einstellungen, Papierkorb) war er
65 px hoch, sonst 61 px (32-px-Kreuz statt 36-px-Reiter). Jetzt
immer 65 px, der Inhalt mittig. */
.modal-card > .modal-header {
min-height: 65px;
box-sizing: border-box;
}
/* Kleine Fenster ohne Fussleiste, deren Knoepfe als letzte Reihe im
Karte oder ihres Formulars stehen (Rueckfragen, Formatwahl beim
Export, Umbenennen, Nutzer anlegen):
die Reihe rueckt links und rechts um 8 px ein und steht damit so
weit vom Rand wie die Knoepfe eines Fusses (33 px), auch neben
einem Breiten-Griff. */
.modal-card > .modal-actions:not(.modal-footer),
.modal-card > form > .modal-actions:not(.modal-footer),
.modal-card > .modal-form > .modal-actions:not(.modal-footer) {
margin-left: 8px;
margin-right: 8px;
}
}
/* "Nachschlagen" im Fenster "Neue Quelle" der Feuchtigkeitskarte
(js/feuchte/quelle-dialog.js): nur das Neu-laden-Zeichen, gruen wie
.btn-success, quadratisch so hoch wie das Feld daneben (36 px); waehrend der
Suche dreht sich das Zeichen. */
.ms-feld-zeile > .fq-nachschlagen.icon-btn {
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.fq-nachschlagen.ist-am-suchen > svg { animation: spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.fq-nachschlagen.ist-am-suchen > svg { animation: none; }
}
/* Zauberstab: Griffe am Eckpunkt. Der Behaelter sitzt genau auf dem
Punkt und hat keine eigene Flaeche; die beiden Kreise sind dieselben wie
beim normalen Zeichnen (.geolyser-vertex-drag-hot / -remove-hot, 36 px):
Verschieben mittig auf dem Punkt, Loeschen rechts daneben. */
.wand-vertex-menu {
position: absolute;
z-index: 1100;
width: 0;
height: 0;
}
.wand-vertex-menu[hidden] { display: none; }
/* Die Kreise sind 36 px gross (box-sizing der App), halbe Breite 18.
Loeschen beginnt 8 px rechts vom blauen Kreis. */
.wand-vertex-menu .wand-vertex-move { left: -18px; top: -18px; }
.wand-vertex-menu .wand-vertex-del { left: 26px; top: -18px; }
.wand-move-handle {
background: #fff;
border: 2px solid var(--c-accent, #007FB4);
border-radius: 3px;
box-sizing: border-box;
}
.leaflet-container.wand-moving,
.leaflet-container.wand-moving .leaflet-interactive { cursor: move; }
/* ============================================================
Tabs im Layer-Panel (js/layer-tabs.js)
Eine Zeile unter dem Modus-Kopf: die Reiter (waagerecht
scrollbar), "+" fuer einen neuen, rechts Speichern, Tour und
Einrichten.
============================================================ */
/* Reiter wie im Browser. Sie sitzen oben auf einem
Rahmen, der die Layer des vorderen Reiters umschliesst; der vordere
Reiter geht ohne Linie in den Rahmen ueber. Das Kreuz steht immer da
(feste Breite, nichts verschiebt sich), "+" direkt rechts vom letzten
Reiter. Speichern, Hilfe und Einrichten stehen im Modus-Kopf. */
.sidebar-tabs, .sidebar-rahmen {
--lt-rand: color-mix(in srgb, var(--fg) 22%, var(--bg-elevated));
}
.sidebar-tabs {
display: flex;
align-items: flex-end;
margin: 0 var(--panel-rand, 10px);
position: relative;
z-index: 1;
min-width: 0;
}
.sidebar-tabs:empty { display: none; }
.lt-leiste {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: flex-end;
gap: 4px;
}
.lt-reiter {
flex: 0 1 auto;
min-width: 0;
display: flex;
align-items: flex-end;
gap: 2px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.lt-reiter::-webkit-scrollbar { display: none; }
.lt-tab {
/* Wie im Browser: erst schrumpfen (Name mit "..."), dann scrollen. */
flex: 0 1 auto;
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 64px;
max-width: 150px;
height: 30px;
padding: 0 4px 0 10px;
border: 1px solid var(--lt-rand);
border-bottom: 0;
/* Eckig: der Farbbalken oben soll nicht abgerundet
sein, und ein runder Reiter mit geradem Balken saehe angeschnitten
aus. */
border-radius: 0;
background: var(--bg-card);
color: var(--muted-hi, var(--fg));
font-size: 0.84rem;
cursor: pointer;
user-select: none;
touch-action: pan-y;
transition: transform .16s ease;
}
.lt-tab:hover { color: var(--fg); background: var(--bg-elevated-hover, var(--bg-card)); }
.lt-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.lt-tab.is-active {
z-index: 2;
height: 33px;
margin-bottom: -1px; /* deckt die obere Rahmenlinie ab */
background: var(--bg-elevated);
color: var(--fg);
font-weight: 600;
}
/* Farbbalken oben, gerade Kanten, in der Farbe der Ansicht (Name-und-
Farbe-Fenster, Doppelklick). */
.lt-tab.is-active::before {
content: "";
position: absolute;
left: -1px; right: -1px; top: -1px;
height: 3px;
background: var(--lt-farbe, var(--c-primary));
}
.lt-tab:not(.is-active)::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: var(--lt-farbe, transparent);
opacity: .55;
}
/* Ziehen: der gezogene Reiter folgt dem Zeiger ohne Verzoegerung, die
anderen gleiten (transition oben). */
.lt-tab.is-dragging { z-index: 5; transition: none; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: grabbing; }
.lt-reiter.is-sortieren { overflow: visible; }
.lt-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
/* "*" = gespeicherter Reiter mit Aenderungen. visibility statt display,
damit die Breite gleich bleibt. */
.lt-tab-stern { flex: 0 0 auto; visibility: hidden; color: var(--c-warning, #F59E0B); font-weight: 700; margin-left: -3px; }
.lt-tab.is-dirty .lt-tab-stern { visibility: visible; }
/* Punkt vor dem Namen: der Reiter ist gespeichert. */
.lt-tab-gesp {
flex: 0 0 auto;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--lt-farbe, var(--c-primary));
}
.lt-tab-zu {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--muted);
cursor: pointer;
}
.lt-tab-zu:hover:not(:disabled) { background: rgba(224, 60, 49, 0.16); color: #E03C31; }
.lt-tab-zu:disabled { opacity: 0.3; cursor: default; }
.lt-plus {
flex: 0 0 auto;
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
min-width: 26px; min-height: 26px;
aspect-ratio: 1;
box-sizing: border-box;
margin-bottom: 2px;
padding: 0;
border: 1px dashed var(--border-hi);
border-radius: 50%;
background: transparent;
color: var(--muted-hi, var(--fg));
cursor: pointer;
}
.lt-plus svg { display: block; flex: 0 0 auto; }
.lt-plus:hover { border-style: solid; border-color: var(--c-primary); color: var(--c-primary); }
/* Touch: die allgemeine Regel "button { min-height: 40px }" zog den
Kreis bei 26 px Breite zum Oval. Groesser und in beiden Richtungen
gleich, damit er rund bleibt und sich gut treffen laesst. */
@media (hover: none) and (pointer: coarse) {
.lt-plus {
width: 32px; height: 32px;
min-width: 32px; min-height: 32px;
}
}
/* Rahmen um die Layer des vorderen Reiters */
.sidebar-rahmen {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
margin: 0 var(--panel-rand, 10px);
/* Nur grau, ohne Akzentfarbe; --border-hi hat im
dunklen Thema einen Blaustich. */
border: 1px solid var(--lt-rand);
border-radius: 0 8px 8px 8px;
background: var(--bg-elevated);
overflow: hidden;
}
/* Name-und-Farbe-Fenster einer Ansicht (layer-tabs.js ansichtDialog) */
.lt-dialog .modal-card { max-width: 380px; }
.lt-dialog-body { display: flex; flex-direction: column; gap: 14px; }
.lt-dialog-body .field { display: flex; flex-direction: column; gap: 6px; }
.lt-dialog-farben { display: grid; grid-template-columns: repeat(7, 32px); gap: 8px; }
.lt-dialog-farbe {
width: 32px; height: 32px; padding: 0;
border-radius: 6px;
border: 2px solid transparent;
background: var(--f);
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.lt-dialog-farbe:hover { transform: scale(1.06); }
.lt-dialog-farbe.is-active { border-color: var(--fg); box-shadow: inset 0 0 0 2px var(--bg-elevated); }
.lt-dialog-fuss { justify-content: flex-end; }
/* Knopfgruppe rechts im Modus-Kopf */
.modus-kopf-aktionen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.modus-kopf-aktionen:empty { display: none; }
/* Lade-Fenster, Ansicht "Ansichten": eine Tabelle (ziehbare Spalten
ueber js/spalten-breite.js, Knopf-Spalte fest rechts). */
.lm-tabs-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 12px; }
.lm-tabs-wrap[hidden] { display: none; }
.lm-ansichten-table td { vertical-align: middle; }
.lm-ansichten-table .lm-ans-check { width: 32px; }
.lm-ansichten-table .lm-ans-name { cursor: text; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-ansichten-table .lm-ans-name .lm-ans-offen {
display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
font-size: .72rem; font-weight: 600; color: #fff; background: var(--c-primary);
}
.lm-ansichten-table .lm-ans-name input { width: 100%; font: inherit; }
.lm-ansichten-table .load-modal-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }
.lm-tab-frei { text-align: center; opacity: 0.8; }
#load-layer-modal [data-nur="tabs"] { display: none !important; }
#load-layer-modal[data-ansicht="tabs"] [data-nur="tabs"] { display: inline-flex !important; }
/* Was in beiden Ansichten steht (Alle / Keine, Zaehler), traegt
data-nur="beide"; alles andere im Fuss gehoert den Layern. */
#load-layer-modal[data-ansicht="tabs"] .modal-footer > :not([data-nur="tabs"]):not([data-nur="beide"]) {
display: none !important;
}
#load-layer-modal .modal-header-tabs { margin-left: 12px; }
/* Bis 768 px blendet die Kapitel-Regel (".modal-card .modal-header-tabs",
gedacht fuer das Admin-Fenster) jede Reiterzeile im Kopf aus. Das
Ladefenster hat keine Kapitel-Liste als Ersatz, ohne die beiden
Reiter kam man auf dem Smartphone nicht an die Ansichten. */
@media (max-width: 768px) {
/* Reiter in eine eigene zweite Zeile, damit Titel, Fragezeichen
und Kreuz oben in einer Reihe bleiben. Die Zahl neben dem Titel
entfaellt, die Liste nennt sie unter dem Suchfeld noch einmal. */
#load-layer-modal .modal-header {
flex-wrap: wrap;
row-gap: 8px;
}
#load-layer-modal .modal-card .modal-header-tabs {
display: flex !important;
order: 10;
flex: 1 0 100%;
margin-left: 0;
}
#load-layer-modal .modal-header > .sub {
display: none;
}
/* Neun Knoepfe passen auf 390 px nicht in eine Reihe. Ohne Umbruch
schob "flex-end" Einlesen und Export links aus dem Bild
(gemessen: -89 px). Jetzt bricht die Reihe um; die Massenaktionen
stehen dann rechts in der zweiten Zeile. */
#load-layer-modal .modal-footer {
flex-wrap: wrap;
row-gap: 8px;
}
}
/* ============================================================
Zeichen-Fenster (js/zeichen-panel.js)
Alle Leisten der Zeichenwerkzeuge im Stil des Mess-Fensters:
Kopf (Griff, Zeichen, Titel, Minimieren, X), Inhalt, Fuss
(Verwerfen links, Rueckgaengig + Speichern rechts). Sie sitzen in
der Kartenbox und lassen sich dort verschieben; minimiert steht
unten ein Knopf, der sie zurueckholt.
Die !important stehen gegen die alten Lageregeln der Leisten
(.line-radius-panel als fixed am body, .panel-in-map mit
left/right/margin, .geolyser-polyops-picker fixed).
============================================================ */
.zf-fenster {
position: absolute !important;
left: 50% !important;
right: auto !important;
top: auto !important;
/* ueber dem Zeichenziel-Streifen und dem Massstab */
bottom: 52px !important;
transform: translateX(-50%) !important;
margin: 0 !important;
width: max-content !important;
min-width: 280px;
max-width: calc(100% - 24px) !important;
max-height: calc(100% - 24px);
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 0 !important;
padding: 0 !important;
z-index: 900 !important;
background: var(--bg-elevated);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 10px !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
font-size: .9rem;
text-align: left;
overflow: hidden;
}
[data-theme="dark"] .zf-fenster {
background: var(--surface-elevated, #1f2024);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.zf-fenster--breit { width: min(720px, calc(100% - 24px)) !important; }
.zf-fenster.zf-frei {
bottom: auto !important;
transform: none !important;
}
.zf-fenster.zf-minimiert,
.zf-fenster[hidden] { display: none !important; }
/* Die eigenen Knoepfe des Werkzeugs stehen jetzt im Fuss. */
.zf-fenster .zf-ersetzt { display: none !important; }
.zf-fenster.zf-zieht { user-select: none; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.zf-kopf {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 6px;
background: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid var(--border);
cursor: grab;
touch-action: none;
}
[data-theme="dark"] .zf-kopf {
background: rgba(255, 255, 255, 0.05);
border-bottom-color: rgba(255, 255, 255, 0.10);
}
.zf-fenster.zf-zieht .zf-kopf { cursor: grabbing; }
.zf-kopf-griff { color: var(--muted); display: inline-flex; line-height: 0; }
.zf-kopf-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
color: var(--c-primary);
background-size: 20px 20px;
background-position: center;
background-repeat: no-repeat;
}
.zf-kopf-icon svg { width: 18px; height: 18px; }
.zf-kopf-titel {
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: .98rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Kopfknoepfe 32x32 (Regel fuer alle Fensterkoepfe, DESIGN.md) */
.zf-kopf .icon-btn {
flex: 0 0 auto;
width: 32px; height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
}
.zf-kopf .zf-zu { color: var(--c-error); }
.zf-kopf .zf-zu:hover { background: var(--c-error-bg); border-color: var(--c-error); }
.zf-inhalt {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 10px 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
/* Die Inhalte, die schon einen eigenen Aufbau haben, nehmen die
ganze Breite. */
.zf-inhalt > .wand-head,
.zf-inhalt > .wand-grid,
.zf-inhalt > .wand-status,
.zf-inhalt > .gpop-row,
.zf-inhalt > .gpop-hint { flex: 1 1 100%; }
/* Der Titel steht jetzt im Kopf. */
.zf-inhalt .line-radius-title,
.zf-inhalt .wand-title,
.zf-inhalt .gpop-title-text { display: none !important; }
.zf-inhalt .wand-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; flex-wrap: wrap; }
.zf-inhalt .wand-status { margin-top: 0; }
.zf-fuss {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid var(--border);
}
[data-theme="dark"] .zf-fuss { border-top-color: rgba(255, 255, 255, 0.10); }
.zf-fuss-rechts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
/* Fussknoepfe: nur Zeichen 48x34, mit Text 34 hoch (DESIGN.md) */
.zf-fuss .icon-btn {
width: 48px; height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.zf-fuss .btn-with-icon {
height: 34px;
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.zf-fuss .zf-verwerfen { color: var(--c-error); border-color: color-mix(in srgb, var(--c-error) 45%, transparent); }
.zf-fuss .zf-verwerfen:hover { background: var(--c-error-bg); border-color: var(--c-error); }
/* Minimiert: Knopf unten mittig in der Kartenbox */
.zf-max-knopf {
position: absolute;
left: 50%;
bottom: 52px;
transform: translateX(-50%);
z-index: 900;
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 12px;
border: 1px solid var(--border-hi);
border-radius: 999px;
background: var(--bg-elevated);
color: var(--fg);
font-weight: 600;
font-size: .88rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
[data-theme="dark"] .zf-max-knopf { background: var(--surface-elevated, #1f2024); }
.zf-max-knopf:hover { border-color: var(--c-primary); color: var(--c-primary); }
.zf-max-icon, .zf-max-pfeil { display: inline-flex; line-height: 0; color: var(--c-primary); }
.zf-max-icon svg { width: 16px; height: 16px; }
.zf-max-pfeil { color: var(--muted-hi); }
@media (max-width: 640px) {
.zf-fenster { min-width: 0; bottom: 72px !important; }
.zf-max-knopf { bottom: 72px; }
}
/* ---- Angedockte Zeichen-Fenster (js/zeichen-dock.js) ----
Hochformat: Leiste #zf-dock unter der Karte, fest am unteren Rand;
alles darueber wird um ihre Hoehe niedriger (--zf-dock-h).
Querformat: im rechten Panel, das alles andere solange ausblendet.
Die !important stehen gegen die Schwebe-Regel .zf-fenster oben. */
.zf-dock {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1150;
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border-top: 1px solid var(--border-hi);
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.zf-dock:empty { display: none; }
body.zf-dock-an .map-shell {
height: calc(100vh - var(--topbar-h) - var(--zf-dock-h, 0px));
height: calc(100dvh - var(--topbar-h) - var(--zf-dock-h, 0px));
}
.zf-angedockt {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.zf-dock > .zf-angedockt {
border: 0 !important;
/* Hoechstens gut die Haelfte des Bildschirms; der Inhalt rollt. */
max-height: 55dvh;
}
.zf-dock > .zf-angedockt + .zf-angedockt { border-top: 1px solid var(--border) !important; }
.zf-angedockt .zf-inhalt {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* Schmale Geraete: die Fussknoepfe brechen um, statt rechts aus dem
Bild zu laufen (390 px: Verwerfen, Auswahl loeschen, Rueckgaengig,
Speichern passten nicht in eine Reihe). */
.zf-angedockt .zf-fuss { flex-wrap: wrap; row-gap: 8px; }
.zf-angedockt .zf-fuss-rechts { flex-wrap: wrap; justify-content: flex-end; }
.zf-angedockt .zf-fuss button { white-space: nowrap; }
/* Kein Ziehgriff und kein Pin, wo nichts zu verschieben ist. */
.zf-angedockt .zf-kopf { cursor: default; }
.zf-angedockt .zf-kopf-griff,
.zf-angedockt .zf-pin { display: none !important; }
/* Eingeklappt: nur der Kopf. Der Minimieren-Strich ist angedockt ein
Pfeil (js/zeichen-dock.js), eingeklappt zeigt er nach oben. */
.zf-angedockt.zf-dock-zu > :not(.zf-kopf) { display: none !important; }
.zf-dock .zf-angedockt :is([data-zf="min"], .zf-min) svg { transition: transform .15s ease; }
.zf-dock .zf-angedockt.zf-dock-zu :is([data-zf="min"], .zf-min) svg { transform: rotate(180deg); }
/* Im rechten Panel: das Fenster fuellt den Koerper, der Rest des Panels
ruht solange. :has statt einer Klasse, damit ein vom Werkzeug
versteckt gesetztes Fenster ([hidden]) das Panel nicht leer laesst. */
#features-panel .features-panel-body > .zf-angedockt.zf-im-panel {
border: 0 !important;
flex: 1 1 auto;
min-height: 0;
}
#features-panel:has(> .features-panel-body > .zf-angedockt.zf-im-panel:not([hidden]))
.features-panel-body > :not(.zf-angedockt) {
display: none !important;
}
#features-panel:has(> .features-panel-body > .zf-angedockt.zf-im-panel:not([hidden]))
.features-panel-body > .zf-angedockt.zf-im-panel:not([hidden]) {
display: flex !important;
}
/* Mess-Fenster angedockt: seine eigenen Regeln fuer
Smartphone (Bottom-Sheet, Vollbild ueber .is-maximized, beide mit
!important) gelten dann nicht. Drei Klassen, damit es sicher vor
".geolyser-measure-panel.is-maximized" liegt. */
.geolyser-measure-panel.geolyser-measure-panel--in-map.zf-angedockt {
position: relative !important;
inset: auto !important;
width: auto !important;
max-width: none !important;
height: auto !important;
z-index: auto !important;
border-radius: 0 !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column;
overflow-y: auto;
}
.zf-dock > .geolyser-measure-panel.zf-angedockt { max-height: 55dvh !important; }
.geolyser-measure-panel.zf-angedockt.zf-dock-zu { overflow: hidden; }
.geolyser-measure-panel.zf-angedockt > .geolyser-measure-head {
position: sticky;
top: 0;
z-index: 1;
background: var(--bg-elevated);
}
/* Angedockt steht das Fenster immer da, "Vollbild" neben "Beenden"
braucht es dann nicht. */
body:has(.geolyser-measure-panel.zf-angedockt) .geolyser-measure-maximize-action {
display: none !important;
}
/* Polygon-Sitzung (js/zauberstab.js): die Werkzeugleiste bleibt bedienbar
fuer den aktiven Polygon-Knopf und seine Aktionen (Beenden, Letzten
Vertex loeschen, Abbrechen); gesperrt sind nur die anderen Werkzeuge.
Vorher graute die Kurven-Sperre (geolyser-curve-lock) auch diese aus
, Fehler). */
body.geolyser-wand-active .leaflet-pm-toolbar.leaflet-control {
/* !important: die Sperrregel oben ist mit ihren :not() staerker
(0,4,0 gegen 0,3,1); ohne blieb die ganze Leiste blass, auch die
klickbaren Aktionen. */
pointer-events: auto !important;
opacity: 1 !important;
filter: none !important;
}
body.geolyser-wand-active .leaflet-pm-toolbar .button-container:not(.active) {
pointer-events: none;
opacity: .35;
filter: grayscale(1);
}
body.geolyser-wand-active .leaflet-pm-toolbar .button-container.active,
body.geolyser-wand-active .leaflet-pm-toolbar .button-container.active .leaflet-pm-action {
pointer-events: auto;
}
/* ============================================================
Ziehbare Spaltenbreiten (js/spalten-breite.js)
Griff am rechten Rand jeder Kopfzelle; die Knopf-Spalte rechts
bleibt fest und klebt am rechten Rand.
============================================================ */
.sb-tab th.sb-th { position: relative; }
/* Gesetzte Breiten: Inhalte kuerzen statt die Spalte aufzuweiten. */
.sb-tab.sb-fix { min-width: 100%; }
.sb-tab.sb-fix td,
.sb-tab.sb-fix th { overflow: hidden; text-overflow: ellipsis; }
.sb-griff {
position: absolute;
top: 0; bottom: 0;
right: -3px;
width: 7px;
cursor: col-resize;
z-index: 2;
touch-action: none;
}
.sb-griff::after {
content: "";
position: absolute;
top: 25%; bottom: 25%;
left: 3px;
width: 1px;
background: var(--border-hi);
opacity: 0;
transition: opacity .12s;
}
.sb-tab th:hover .sb-griff::after,
.sb-griff.is-dragging::after { opacity: 1; }
.sb-griff.is-dragging::after { background: var(--c-primary); width: 2px; }
/* Feste Knopf-Spalte. Ihr Hintergrund folgt der Zeile (Ueberfahren,
markiert), sonst stuende hinter den Knoepfen ein anders gefaerbter
Kasten. */
.sb-tab .sb-fest {
position: sticky;
right: 0;
z-index: 1;
background: var(--bg-elevated);
box-shadow: inset 1px 0 0 var(--border);
white-space: nowrap;
width: 1%;
}
/* Kopfzelle wie die anderen Kopfzellen der Tabelle */
.sb-tab th.sb-fest { background: var(--input-bg); z-index: 3; }
.sb-tab tbody tr:hover td.sb-fest { background: var(--input-bg); }
.sb-tab tbody tr.is-selected td.sb-fest {
background: linear-gradient(rgba(0, 204, 255, 0.10), rgba(0, 204, 255, 0.10)), var(--bg-elevated);
}
.lm-ansichten-table tbody tr.is-selected td { background: rgba(0, 204, 255, 0.10); }
.lm-ansichten-table { table-layout: fixed; width: 100%; }
.lm-ansichten-table:not(.sb-fix) .lm-ans-check { width: 36px; }
.lm-ansichten-table:not(.sb-fix) .lm-ans-w-creator { width: 110px; }
.lm-ansichten-table:not(.sb-fix) .lm-ans-w-n { width: 64px; }
.lm-ansichten-table:not(.sb-fix) .lm-ans-w-date { width: 136px; }
.lm-ansichten-table:not(.sb-fix) .lm-ans-w-frei { width: 56px; }
.lm-ansichten-table .lm-ans-w-akt { width: 128px; }
/* Layer-Liste: Kopf der Knopf-Spalte und gleicher Hintergrund wie die Zeile */
.load-modal-actions-kopf { font-size: inherit; color: inherit; font-weight: 600; justify-content: flex-end; }
.load-modal-row--header .load-modal-actions { background: var(--input-bg); }
.load-modal-row:not(.load-modal-row--header):hover .load-modal-actions { background: var(--input-bg); }
.load-modal-row.is-checked .load-modal-actions {
background: linear-gradient(rgba(0, 204, 255, 0.10), rgba(0, 204, 255, 0.10)), var(--bg-elevated);
}
#load-layer-modal .lm-kopf-setup { margin-left: auto; }
#load-layer-modal .lm-kopf-setup + .modal-close-btn { margin-left: 4px; }
/* ============================================================
REGEL Knopfmasse , DESIGN.md par. 4.5)
"im header finde ich 32x32 am besten, im footer sofern es nur ein
icon und keinen text hat bitte 48x34, bei text auch breiter".
Die Regeln stehen absichtlich am Ende der Datei und tragen die
Fensterklasse mit, damit sie die gewachsenen Einzelregeln einzelner
Fenster (40x40, 36 hoch, 44 hoch) ueberstimmen.
Kopf eines Fensters Zeichen-Knopf 32 x 32
Fuss eines Fensters Zeichen-Knopf 48 x 34, Text-Knopf 34 hoch
Knoepfe im Inhalt 40 x 40 (i2i, Speichern im Feld, Uebernehmen)
Fuss der Seitenleisten 32 x 32 (Rueckgaengig, Inkognito, rechte
Fussleiste)
============================================================ */
.modal .modal-header .icon-btn,
.modal .modal-header .modal-close-btn,
.modal .modal-header .modal-minimize-btn,
.modal .modal-header [data-modus-tour],
.zf-kopf .icon-btn {
width: 32px; height: 32px; min-width: 32px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
.modal .modal-footer .icon-btn,
.modal .modal-footer label.icon-btn,
.modal .modal-footer .pattern-icon-btn,
.modal .modal-footer .ms-fuss-ok,
.modal .modal-footer .stil-zahnrad,
.modal .modal-footer .feature-modal-icon-btn,
.zf-fuss .icon-btn {
width: 48px !important; height: 34px !important; min-width: 48px;
padding: 0 !important;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
.modal .modal-footer button:not(.icon-btn):not(.pattern-icon-btn):not(.ms-fuss-ok):not(.stil-zahnrad):not(.feature-modal-icon-btn):not([hidden]),
/* Kleine Dialoge tragen ihren Fuss als .modal-actions am Ende der Karte
(oder am Ende des einzigen Formulars darin). Die Aktionsreihen in
den Abschnitten eines Fensters (Mein Konto) sind Inhalt, nicht Fuss. */
.modal .modal-card > .modal-actions:last-child button:not([hidden]),
.modal .modal-card > form:last-child > .modal-actions:last-child button:not([hidden]),
.zf-fuss .btn-with-icon {
height: 34px !important;
min-height: 34px;
padding-top: 0 !important; padding-bottom: 0 !important;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.modal .modal-footer .icon-btn[hidden],
.modal .modal-footer button[hidden] { display: none !important; }
/* Seitenleisten-Fuss: 32 x 32 */
.sidebar-undo-btn,
#incognito-btn-presence,
.incognito-btn-presence,
.sidebar-foot .icon-btn,
.features-panel-actionbar .icon-btn,
.features-panel-actionbar > button {
width: 32px !important; height: 32px !important; min-width: 32px;
padding: 0 !important;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
/* Knoepfe in Tabellenzeilen 32 x 32 (Text-Knopf 32 hoch), sonst im
Inhalt 40 x 40. Gilt fuer die Einstellungen (.adm-btn) und alle
Tabellen mit fester Knopf-Spalte (js/spalten-breite.js). */
.adm-btn {
width: 40px; height: 40px; min-width: 40px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.adm-btn-text { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.trash-table .adm-btn,
.sb-tab td.sb-fest .icon-btn { width: 32px; height: 32px; min-width: 32px; padding: 0; }
.trash-table .adm-btn-text { height: 32px; padding: 0 10px; }
.trash-table td .adm-btn + .adm-btn,
.trash-table td .adm-btn-text + .adm-btn { margin-left: 4px; }
/* Symbol-Fenster: Einrichten links, Hochladen und Gestalten rechts */
.modal-footer.icon-menu-fuss { justify-content: space-between; align-items: center; }
.icon-menu-fuss-rechts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-menu-fuss .icon-menu-hochladen { cursor: pointer; }
/* Generator: Einrichten links, Status, Speichern rechts */
.mgen-modal .modal-footer { justify-content: flex-start; }
.mgen-modal .modal-footer .mgen-status { margin-left: auto; }
/* ============================================================
Einstellungen, Stammdaten, Mein Konto
============================================================ */
/* Zeichen-Knoepfe in Tabellen: kein Innenabstand, das Icon schrumpft
nicht. Eine aeltere Regel gab ihnen 12 px links und rechts, bei 32 px
Breite blieben fuer das Icon 6 px (Externe Tile-Layer, Karten-Layer,
Tilesets). */
.trash-table td .icon-btn,
.trash-table td button.adm-btn {
width: 32px !important; height: 32px !important; min-width: 32px !important;
padding: 0 !important;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
.icon-btn > svg, .icon-btn > img { flex: 0 0 auto; }
.trash-table td .icon-btn > svg,
.trash-table td .icon-btn > img { width: 16px; height: 16px; }
.trash-table td .icon-btn + .icon-btn { margin-left: 4px; }
/* Text-Knoepfe im Inhalt der Fenster: 40 hoch (DESIGN.md 4.5) */
.modal button.adm-btn-text {
height: 40px !important; min-height: 40px;
padding: 0 14px !important;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.modal .trash-table button.adm-btn-text { height: 32px !important; min-height: 32px; padding: 0 10px !important; }
.modal button.adm-btn { width: 40px; height: 40px; min-width: 40px; padding: 0; }
.modal button.adm-btn > svg { width: 18px; height: 18px; }
.modal .trash-table button.adm-btn > svg { width: 16px; height: 16px; }
/* Ueberschriften der Abschnitte in den Stammdaten */
.adm-abschnitt { font-size: 1.05rem; font-weight: 700; margin: 24px 0 6px; color: var(--fg); }
.adm-unter-tabelle { display: flex; justify-content: flex-start; margin-top: 10px; }
/* Audit-Log: Filter wie die anderen Auswahlfelder */
.audit-toolbar { align-items: flex-end; gap: 8px; }
.audit-toolbar select {
height: 40px; min-width: 240px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background-color: var(--input-bg);
color: var(--fg);
font: inherit;
}
.audit-toolbar select:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
/* Mein Konto: Knoepfe rechts neben dem Text, nur Zeichen . */
.profile-zeile { display: flex; align-items: flex-start; gap: 14px; }
.profile-zeile > p { flex: 1 1 auto; margin: 0; min-width: 0; }
.profile-knoepfe { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.profile-zeile + .profile-zeile { margin-top: 12px; }
.profile-feld-zeile { display: flex; align-items: center; gap: 8px; }
.profile-feld-zeile > input, .profile-feld-zeile > select { flex: 1 1 auto; min-width: 0; height: 40px; }
.avatar-actions .profile-knoepfe { margin-bottom: 4px; }
.profile-aktionen { display: flex; gap: 8px; align-items: center; justify-content: center; }
.profile-modal-body .pw-gen-btn { width: 40px !important; height: 40px !important; }
@media (max-width: 520px) {
.profile-zeile { flex-direction: column; }
}
.avatar-actions .profile-knoepfe button,
.avatar-actions .profile-knoepfe .adm-btn { width: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; padding: 0 !important; }
/* Pin im Kopf der Zeichen-Fenster (js/zeichen-panel.js) */
.zf-kopf .zf-pin { margin-left: auto; }
.zf-kopf .zf-pin + .zf-min,
.zf-kopf .zf-pin + .modal-minimize-btn { margin-left: 4px !important; }
.zf-kopf .zf-pin.is-on { color: var(--c-primary); border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, transparent); }
.zf-kopf .zf-pin.is-on svg { fill: currentColor; }
/* Messfenster wie die anderen Zeichen-Fenster: Werkzeugknoepfe 40 hoch */
.geolyser-measure-panel .measure-tool-btn { height: 40px; min-height: 40px; }
.geolyser-measure-panel .geolyser-measure-head.zf-kopf { padding: 8px 10px; }
.geolyser-measure-panel .geolyser-measure-actions.zf-fuss { display: flex; align-items: center; gap: 8px; }
/* Umschalter Zeichnen | Kurven im Linien- und Kurven-Fenster */
.zf-umschalter { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.zf-umschalter > button { height: 32px; border: 0 !important; border-radius: 0 !important; padding: 0 12px; background: transparent; color: var(--fg); }
.zf-umschalter > button + button { border-left: 1px solid var(--border) !important; }
.zf-umschalter > button.is-active { background: var(--c-primary); color: #fff; opacity: 1; }
.zf-umschalter > button:disabled:not(.is-active) { opacity: .45; }
.linie-zeichnen-panel .zf-inhalt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Auswahl loeschen im Polygon-Fenster */
.zf-fuss .zf-leeren { margin-left: 8px; }
/* Groesse und Drehung des Symbols eines Punkts. */
.geolyser-pin-form { position: relative; }
.geolyser-pin-form > svg,
.geolyser-pin-form > img {
width: 100% !important;
height: 100% !important;
display: block;
}
.feature-symbol-form {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 8px 14px;
align-items: center;
margin-top: 8px;
}
.feature-symbol-form-feld {
display: grid;
grid-template-columns: auto 1fr 3.6em;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--fg-muted, var(--fg));
}
.feature-symbol-form-feld input[type="range"] { width: 100%; min-width: 0; accent-color: var(--c-primary); }
.feature-symbol-form-feld output { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.feature-symbol-form .icon-btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 560px) {
.feature-symbol-form { grid-template-columns: 1fr auto; }
.feature-symbol-form-feld:nth-child(2) { grid-column: 1; }
.feature-symbol-form .icon-btn { grid-column: 2; grid-row: 1 / span 2; }
}
/* Popup-Geometrie-Knoepfe mit den Bildern der Werkzeugleiste
. Geomans Bilder sind dunkle Grafiken; im Dunkel-
modus kehrt die allgemeine Regel oben sie um. */
.feature-popup-geo .icon-btn .control-icon {
display: block;
width: 20px;
height: 20px;
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: center;
}
.feature-popup-geo .icon-btn:hover:not(:disabled) .control-icon {
filter: brightness(0) saturate(100%) invert(54%) sepia(80%) saturate(2240%) hue-rotate(170deg) brightness(95%) contrast(101%) !important;
}
.feature-popup-geo .icon-btn.danger .control-icon {
filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(3200%) hue-rotate(345deg) brightness(92%) !important;
}
.feature-popup-geo .icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.feature-popup-geo .icon-btn:disabled:hover { background: transparent; border-color: var(--border); }
/* Griffe am Symbol (js/symbol-griffe.js) */
.symbol-griffe {
position: absolute;
inset: 0;
z-index: 650;
pointer-events: none;
}
.symbol-griffe-rahmen {
position: absolute;
border: 1.5px dashed var(--c-primary-hi, var(--c-primary));
border-radius: 2px;
box-sizing: border-box;
}
.symbol-griffe-stiel {
position: absolute;
width: 0;
height: 22px;
margin-top: -22px;
border-left: 1.5px solid var(--c-primary-hi, var(--c-primary));
transform-origin: 0 22px;
}
.symbol-griff {
position: absolute;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
padding: 0;
min-height: 0;
pointer-events: auto;
background: #fff;
border: 2px solid var(--c-primary-hi, var(--c-primary));
box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
touch-action: none;
}
.symbol-griff--groesse { border-radius: 2px; cursor: nesw-resize; }
.symbol-griff--dreh { border-radius: 50%; cursor: grab; }
.symbol-griffe.is-zug .symbol-griff--dreh { cursor: grabbing; }
[data-theme="dark"] .symbol-griff { background: #d8dee5; }
.symbol-griffe-panel .symbol-griffe-hinweis { display: block; margin-top: 4px; font-size: 12px; opacity: .8; }
/* Bilder der Werkzeugleiste fuer die Popup-Knoepfe (Geoman bindet sie
an .leaflet-pm-toolbar; hier dieselben Grafiken, aus
vendor/geoman/leaflet-geoman.css uebernommen). */
.feature-popup-geo .leaflet-pm-icon-drag { background-image: url('data:image/svg+xml,%0A'); }
.feature-popup-geo .leaflet-pm-icon-edit { background-image: url('data:image/svg+xml,%0A'); }
.feature-popup-geo .leaflet-pm-icon-rotate { background-image: url('data:image/svg+xml,%0A'); }
.feature-popup-geo .leaflet-pm-icon-delete { background-image: url('data:image/svg+xml,%0A'); }
/* Symbolreihe im Feature-Fenster: Standardsymbol und
die letzten 3, dann "…" und der Generator, alle gleich gross in einer
Reihe; die Breite folgt dem Fenster. */
#feature-marker-icon-picker {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
#feature-marker-icon-picker > .marker-icon-pick {
height: 42px;
min-height: 42px;
min-width: 0;
}
/* Zahnrad "Einrichten" im Kopf der Stil-, Muster- und Symbolfenster
: direkt vor dem Kreuz, 32 x 32 wie alle Kopf-
knoepfe. */
.modal-header .modal-kopf-zahnrad { display: contents; }
.modal .modal-header .stil-zahnrad,
.modal .modal-header .modus-setup-btn {
width: 32px !important; height: 32px !important; min-width: 32px;
padding: 0 !important;
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
/* Hochladen-Wolke in Textfarbe (auch im Dunkelmodus sichtbar). */
.ic-cloud-up {
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;
}
/* Zahnrad rechts beim Kreuz, nicht am Titel. */
.modal-header .stil-zahnrad,
.modal-header [data-action="icon-setup"],
.modal-header [data-action="mgen-setup"] { margin-left: auto; }
.modal-header:has(.stil-zahnrad, [data-action="icon-setup"], [data-action="mgen-setup"]) .modal-close-btn { margin-left: 6px; }
/* ============================================================
Einheitliche Icons und Farben. Rueckgaengig und Zuruecksetzen sind
amber, auch dort, wo eine allgemeinere Regel den Knopf neutral faerbt.
============================================================ */
.ws-gt-reset.btn-amber,
.zf-fuss .zf-zurueck.btn-amber {
background: rgba(201, 138, 0, 0.15);
color: var(--c-amber, #c98a00);
border-color: rgba(201, 138, 0, 0.55);
}
.ws-gt-reset.btn-amber:hover:not(:disabled),
.zf-fuss .zf-zurueck.btn-amber:hover:not(:disabled) {
background: rgba(201, 138, 0, 0.28);
border-color: rgba(201, 138, 0, 0.80);
color: #e6a627;
}
/* Wolken (Sichern/Einlesen) sind jetzt eingebettete Zeichen in
Textfarbe statt Bilddateien; die alte Dunkelmodus-Umkehr der Bilder
darf sie nicht treffen. */
svg.ic-wolke { filter: none !important; display: block; }
/* Sonderfall Loeschen: Konto loeschen und Nutzer loeschen tragen
denselben Totenkopf, in Textfarbe (rot im danger-Knopf). */
.ic-totenkopf {
display: inline-block;
width: 18px; height: 18px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url(/img/icons/skull-and-bones-svgrepo-com.svg) center / contain no-repeat;
mask: url(/img/icons/skull-and-bones-svgrepo-com.svg) center / contain no-repeat;
}
/* E-Mail-Spalte der Nutzerliste: Text, rechts daneben der Stift. */
.adm-email-zelle { display: inline-flex; align-items: center; gap: 8px; }
/* Abbrechen im Feature-Fenster: rot umrandet wie "Verwerfen" der
Zeichenfenster, nicht voll gefuellt. */
.modal .modal-footer .feature-modal-icon-btn.ghost.danger {
background: color-mix(in srgb, var(--c-error, #dc3545) 10%, transparent) !important;
color: var(--c-error, #dc3545) !important;
border: 1px solid color-mix(in srgb, var(--c-error, #dc3545) 60%, transparent) !important;
}
.modal .modal-footer .feature-modal-icon-btn.ghost.danger:hover {
background: color-mix(in srgb, var(--c-error, #dc3545) 20%, transparent) !important;
}
/* Rahmen der Ansichten im Dunkelmodus wie die anderen Boxen der Leiste. */
[data-theme="dark"] .sidebar-tabs,
[data-theme="dark"] .sidebar-rahmen { --lt-rand: var(--border); }
/* "Layerliste leeren": roter Knopf mit dem Zeichen aus der Leiste. */
.ic-layerliste-leeren {
display: inline-block; width: 18px; height: 18px; flex: 0 0 auto;
background: currentColor;
-webkit-mask: url(/img/icons/clear-layers.svg) center / contain no-repeat;
mask: url(/img/icons/clear-layers.svg) center / contain no-repeat;
}
.modal .modal-footer button.primary.danger.btn-layerliste-leeren {
background: var(--c-error, #dc3545) !important;
border-color: var(--c-error, #dc3545) !important;
color: #fff !important;
}
.modal .modal-footer button.primary.danger.btn-layerliste-leeren:hover {
filter: brightness(1.08);
}
/* Fenster "Versionen": Felder wie im Rest der App
(40 hoch, Eingabefarben aus den Tokens, auch im Dunkelmodus), Zeilen
als Karten mit Knoepfen rechts. */
.snap-card .snap-create-form,
.snap-card .snap-filter-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 12px;
}
.snap-card .snap-feld-titel {
flex: 0 0 100%;
font-size: 0.85em; font-weight: 600; color: var(--muted-hi, var(--fg));
}
.snap-card .snap-create-form input[type="text"],
.snap-card .snap-filter-row input[type="date"],
[data-theme="dark"] .snap-card .snap-create-form input[type="text"],
[data-theme="dark"] .snap-card .snap-filter-row input[type="date"] {
height: 40px; box-sizing: border-box;
padding: 0 10px;
background: var(--input-bg) !important;
color: var(--fg) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-sm);
}
[data-theme="dark"] .snap-card input[type="date"] { color-scheme: dark; }
.snap-card .snap-create-form input[type="text"] { flex: 1 1 auto; min-width: 0; }
.snap-card .snap-filter-row label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.85em; color: var(--muted-hi, var(--fg));
}
.snap-card .snap-create-form .icon-btn,
.snap-card .snap-filter-row .icon-btn {
width: 40px; height: 40px; min-width: 40px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.snap-card .snap-filter-row .icon-btn { margin-left: auto; }
.snap-card .snap-row {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 10px;
gap: 6px;
}
.snap-card .snap-head { flex-wrap: nowrap; gap: 10px; }
.snap-card .snap-titel { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.snap-card .snap-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-card .snap-actions { flex: 0 0 auto; gap: 6px; flex-wrap: nowrap; }
.snap-card .snap-actions button {
width: 32px; height: 32px; min-width: 32px; padding: 0;
display: inline-flex; align-items: center; justify-content: center; font-size: inherit;
}
.snap-card .snap-note {
background: var(--input-bg);
border-left-color: var(--c-primary);
border-radius: var(--radius-sm);
}
.snap-card .snap-loadmore-row .btn-with-icon { height: 34px; }
/* Kopfknoepfe gleich: Zahnrad mit derselben Rundung und demselben
Abstand zum Kreuz wie Hilfe/Vollbild/Kreuz der anderen Fenster
(16 px), Pin im Zeichenfenster mit dem Abstand wie Minimieren/Kreuz. */
.modal .modal-header .stil-zahnrad,
.modal .modal-header [data-action="icon-setup"],
.modal .modal-header [data-action="mgen-setup"] { border-radius: 6px !important; }
.modal-header:has(.stil-zahnrad, [data-action="icon-setup"], [data-action="mgen-setup"]) .modal-close-btn { margin-left: 4px !important; }
.zf-kopf .zf-pin + .zf-min,
.zf-kopf .zf-pin + .modal-minimize-btn { margin-left: 0 !important; }
/* Kein Muster / Kein Fuelleffekt: die alte min-height 40 hob die
Fussregel 48 x 34 aus. */
.modal .modal-footer .pattern-icon-btn,
.modal .modal-footer .filleffect-save-btn,
.modal .modal-footer [data-role="clear-fill"],
.modal .modal-footer [data-role="clear-pattern"] {
min-height: 0 !important;
width: 48px !important; height: 34px !important; min-width: 48px !important;
}
/* Aktionsspalte aller Tabellen: Knoepfe 32 x 32,
immer 4 px Abstand wie in Layers und Ansichten: Layer, rechtsbuendig,
nie umbrechen. Der Zwischenraum aus dem Markup zaehlt nicht mit
(font-size 0 in der Zelle, die Knoepfe bekommen ihre Schrift zurueck). */
.sb-tab td.sb-fest,
.trash-table td.sb-fest {
white-space: nowrap;
text-align: right;
font-size: 0;
}
.sb-tab td.sb-fest > *,
.trash-table td.sb-fest > * { font-size: 0.9rem; }
.sb-tab td.sb-fest button,
.trash-table td.sb-fest button { margin: 0 !important; vertical-align: middle; }
.sb-tab td.sb-fest > button + button,
.trash-table td.sb-fest > button + button,
.sb-tab td.sb-fest > * + button { margin-left: 4px !important; }
.sb-tab td.sb-fest .load-modal-actions { display: inline-flex; gap: 4px; }
/* Ansichten-Tabelle und Layers-Fenster nie so schmal, dass die
Aktionen verschwinden: das Fenster hat eine Mindestbreite, die Tabelle
scrollt sonst seitlich und die Aktionsspalte klebt rechts. */
#load-layer-modal .modal-card { min-width: min(720px, calc(100vw - 32px)); }
.lm-ansichten-table { min-width: 620px; }
.lm-tabs-wrap { overflow-x: auto; }
/* Drehgriff des Rechteck-Editors. */
.rect-dreh-griff {
display: block; width: 16px; height: 16px; box-sizing: border-box;
border-radius: 50%;
background: #fff; border: 2px solid #007FB4;
box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
cursor: grab;
}
.rect-edit-handle--dreh { cursor: grab; }
/* Zeichenfenster ueber den Karten-Knoepfen (Zoom +/-), die sonst in
breiten Fenstern ueber Speichern lagen. */
.zf-fenster { z-index: 1001 !important; }
/* Layers und Ansichten, Layer-Liste: die Knopf-Spalte wie in den
anderen Tabellen abgesetzt, mit senkrechter Trennlinie ueber die ganze
Zeilenhoehe und ohne eigenen Schatten. */
.load-modal-row .load-modal-actions {
align-self: stretch;
/* volle Spaltenbreite, damit die Linie im Kopf und in jeder Zeile an
derselben Stelle steht (sonst ruckt sie mit dem Inhalt) */
justify-self: stretch;
align-items: center;
justify-content: flex-end;
margin: -6px -10px -6px 0;
padding: 6px 10px 6px 10px;
box-shadow: inset 1px 0 0 var(--border);
}
.load-modal-row.is-checked .load-modal-actions {
background: linear-gradient(rgba(0, 204, 255, 0.10), rgba(0, 204, 255, 0.10)), var(--bg-elevated);
}
.load-modal-row--header .load-modal-actions {
background: var(--input-bg);
}
/* Muster und andere Fenster mit Zahnrad UND Vollbild-Knopf: das Zahnrad
schiebt die Gruppe an den rechten Rand, Vollbild und Kreuz folgen mit
4 px wie Hilfe/Vollbild/Kreuz (das Zahnrad schwebte mittig). */
.modal-header:has(.stil-zahnrad, [data-action="icon-setup"], [data-action="mgen-setup"]) .modal-vollbild-btn,
.modal-header:has(.stil-zahnrad, [data-action="icon-setup"], [data-action="mgen-setup"]) .modal-hilfe-btn {
margin-left: 4px !important;
}
/* "Kein Muster / Kein Stil / Kein Fuelleffekt / Kein Symbol" steht im
Fuss rechts, direkt links neben Uebernehmen. */
.modal .modal-footer.pattern-footer,
.modal .modal-footer.ls-fuss,
.modal .modal-footer.filleffect-footer {
justify-content: flex-end !important;
gap: 8px;
}
.mgen-modal .modal-footer .mgen-status { order: 0; margin-left: 0; margin-right: auto; }
.mgen-modal .modal-footer [data-action="mgen-none"] { order: 1; }
.mgen-modal .modal-footer [data-action="mgen-save"] { order: 2; }
/* Eckpunkt-Griffe im Bearbeiten-Modus (js/geoman-edit-vertex-remove.js,
Punkt 1 und 8): der Punkt selbst wird zum blauen Verschieben-Knopf
(Geomans Marker, er zieht wie vorher), rechts daneben Loeschen und bei
Linien "Linie trennen". */
.leaflet-marker-icon.marker-icon.geolyser-vertex-zieh {
box-sizing: border-box !important;
width: 36px !important;
height: 36px !important;
margin: -18px 0 0 -18px !important;
border-radius: 50% !important;
border: 2px solid #fff !important;
background: #3b8eef url("data:image/svg+xml;utf8,") center / 15px 15px no-repeat !important;
box-shadow: 0 0 0 3px rgba(59, 142, 239, 0.32), 0 2px 6px rgba(0, 0, 0, 0.35) !important;
cursor: move !important;
z-index: 1098 !important;
}
.geolyser-edit-vertex-menu {
position: absolute;
z-index: 1100;
width: 0;
height: 0;
}
.geolyser-edit-vertex-menu[hidden] { display: none; }
.geolyser-edit-vertex-menu .geolyser-vertex-remove-hot { left: 26px; top: -18px; }
.geolyser-vertex-split-hot {
position: absolute;
left: 70px;
top: -18px;
width: 36px;
height: 36px;
box-sizing: border-box;
border-radius: 50%;
background: #e0a200;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
box-shadow: 0 0 0 3px rgba(224, 162, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.35);
cursor: pointer;
pointer-events: auto;
transition: transform .12s ease-out;
}
.geolyser-vertex-split-hot:hover { transform: scale(1.12); }
.geolyser-vertex-split-hot[hidden] { display: none; }
.geolyser-vertex-split-hot svg { display: block; }
/* Popup eines geschuetzten (unveraenderlichen) Features fuer Nicht-
SuperAdmins: Geometrie-Knoepfe ausgegraut, darunter der Hinweis
. */
.feature-popup-geo.ist-geschuetzt .icon-btn.danger:disabled:hover { background: transparent; }
.feature-popup-geschuetzt {
margin-top: 6px;
font-size: 0.8rem;
line-height: 1.35;
color: var(--muted);
}
/* Einrasten von Anfang und Ende sichtbar (js/fang-anzeige.js): der Zielpunkt bekommt einen pulsierenden Ring, beim
Einrasten laeuft einmal ein Ring nach aussen. Der Ring sitzt in
::after, weil Leaflet die Lage des Markers ueber transform setzt. */
.leaflet-marker-icon.geolyser-fang-nah { z-index: 2000 !important; }
.leaflet-marker-icon.geolyser-fang-nah::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
border-radius: 50%;
border: 2px solid var(--c-primary);
background: color-mix(in srgb, var(--c-primary) 22%, transparent);
box-sizing: border-box;
pointer-events: none;
animation: geolyser-fang-nah 0.9s ease-in-out infinite;
}
@keyframes geolyser-fang-nah {
0%, 100% { transform: scale(0.8); opacity: 0.95; }
50% { transform: scale(1.15); opacity: 0.6; }
}
.geolyser-fang-puls {
position: absolute;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border-radius: 50%;
border: 3px solid var(--c-primary);
box-sizing: border-box;
pointer-events: none;
z-index: 1000;
animation: geolyser-fang-puls 0.65s ease-out forwards;
}
@keyframes geolyser-fang-puls {
0% { transform: scale(0.6); opacity: 1; }
100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.leaflet-marker-icon.geolyser-fang-nah::after { animation: none; }
.geolyser-fang-puls { animation-duration: 0.01s; }
}
/* Minus oben links an Kacheln aus "zuletzt verwendet" (Feature-Fenster,
Sammelbearbeitung; js/marker-icon-picker.js zuletztWegHtml). Erscheint beim Ueberfahren, auf Touch-Geraeten immer. */
.marker-icon-pick:has(> .mip-zuletzt-weg) { position: relative; overflow: visible; }
.mip-zuletzt-weg {
position: absolute;
top: -6px;
left: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--c-danger, #b91c1c);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
cursor: pointer;
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity .12s;
}
.marker-icon-pick:hover > .mip-zuletzt-weg,
.marker-icon-pick:focus-visible > .mip-zuletzt-weg { opacity: 1; pointer-events: auto; }
.mip-zuletzt-weg:hover { filter: brightness(1.15); }
@media (hover: none) {
.mip-zuletzt-weg { opacity: 1; pointer-events: auto; }
}