/* mapfit - was NUR mapfit hat: eigene Token, die Anordnung der Arbeitsfläche und die Zutaten des Kopfes, die es sonst nirgends gibt. * * Am 19.08.2026 auf das Gestaltungssystem umgestellt: Farben, Schriften, Maße, * Kopf, Fußzeile, Knöpfe, Karten, Formularelemente, Rückfragen und die * Anmeldemaske stehen jetzt EINMAL - in gestaltung/marke.css und * gestaltung/basis.css, byte-identisch mit design-system/dist/. Hier stand das * alles noch einmal, wertgleich; mapfit war die Quelle des Systems und lange * die einzige Fassung, aber eine Regel an zwei Stellen läuft auseinander, und * genau das ist mehrfach passiert (das Blau des Ziehgriffs, das Gelb der * Warnung, die Breite der Sinnbild-Knöpfe). * * Die Ladereihenfolge steht in index.html: marke.css → basis.css → hilfe.css → * dieses Blatt → karte.css → zeichnen.css → listen.css → bedienung.css → * drucken.css. Späteres überschreibt Früheres. */ /* --- Token, die es nur in mapfit gibt -------------------------------------- Alles Übrige - Flächen, Tinte, Grün, Rot, Schriften, Größen, Rundungen, Takt, Schatten, Chevron - kommt aus gestaltung/marke.css. Wer hier einen Wert braucht, den es dort nicht gibt, hat entweder einen neuen Fall gefunden (dann gehört er dorthin) oder benutzt den falschen. */ :root { /* Der Grund UNTER der Karte - er blitzt beim Schwenken an den Rändern durch, bevor Kacheln da sind. Hell wirkt das wie Papier, dunkel wie ein Loch; beides ist richtig, solange es zum Rest passt. */ --kartengrund: #e8e8e8; /* Dreh-Cursor für Griff ↻ und die freie Fläche außerhalb des Overlays - einen System-Cursor fürs Drehen gibt es nicht. Pfeilkreis im Blau der Griffe, mit weißem Rand für dunkle Untergründe. */ --cursor-rotate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 5A7 7 0 1 1 5 12' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M5 7.5L1.5 13L8.5 13Z' fill='%230969da' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M12 5A7 7 0 1 1 5 12' fill='none' stroke='%230969da' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, default; /* Einfüge- und Lösch-Cursor fürs Messen: ein Paar nach derselben Machart - derselbe Pfeil, oben rechts ein kleines schwarzes Plus (Segmentmitte: Klick fügt einen Punkt ein) bzw. Minus (Alt über einem Punkt: Klick entfernt ihn). Das native copy wäre fürs Plus zu haben gewesen, hat aber kein Gegenstück mit Minus - selbst gezeichnet sehen beide identisch aus. */ --cursor-einfuegen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M5 2.5v14.6l3.7-3.5 2.2 5.2 2.6-1.1-2.2-5.1h5.1z' fill='%23fff' stroke='%2324292f' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M15.5 6h9M20 1.5v9' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 4 2, copy; --cursor-loeschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M5 2.5v14.6l3.7-3.5 2.2 5.2 2.6-1.1-2.2-5.1h5.1z' fill='%23fff' stroke='%2324292f' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M15.5 6h9' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 4 2, default; /* Quelle und Ziel einer Georeferenz - das Farbpaar, an dem in mapfit alles hängt: Gelb ist der angeklickte Punkt IM BILD, Rot der zugehörige Punkt IN DER KARTE. Beide stehen an drei Stellen zugleich (Marke auf der Karte, Kügelchen in der Legende, Zeile in der Tabelle), und sie müssen überall dieselben sein - genau dafür stehen sie hier einmal. Sie gehen das Thema NICHT mit: Sie liegen auf der Basiskarte, und die kommt vom Anbieter, wie sie kommt. */ --marke-quelle: #bf8700; --marke-ziel: #cf222e; /* Die Werkzeugspalte. Breit genug, dass Breite und Länge einer Georeferenz nebeneinander in eine Zeile passen - so, wie sie auch oben in der Karte stehen („49.94273° N 11.59321° E"). Der Vergleich zwischen beiden ist der Sinn der Spalte, und dafür müssen sie gleich aussehen. */ --sidebar-width: 390px; /* Die Werkzeugleiste an der Kartenkante. 52 px sind 40 px Knopf plus Luft: Sinnbild und Taste stehen nebeneinander im Knopf, damit man beides auf einen Blick hat und die Taste nicht erst im Tooltip suchen muss. */ --werkzeug-breite: 52px; /* Der Grund der KARTENAUFSÄTZE - Ebenen-Widget, Maßstabsanzeige, Messmenü, Zeichenmenü, Quellenvermerk. Halbdeckend, damit man sieht, dass darunter Karte liegt: ein Aufsatz auf ihr, kein Stück Werkzeugspalte, das in die Karte gerutscht ist. Als Token und nicht als Literal, weil er das Thema mitgehen MUSS: Die Schrift darin kommt aus --text, und ein fester weißer Grund hätte im dunklen Thema helle Schrift auf Weiß ergeben. */ --aufsatz: rgba(255, 255, 255, 0.92); /* Derselbe Grund, leiser - für den Quellenvermerk, der dauerhaft dasteht. */ --aufsatz-leise: rgba(255, 255, 255, 0.78); } /* Kartengrund und Aufsätze im dunklen Thema - nach derselben Machart wie die Token des Systems (--d-* und zwei Zuweisungen, siehe marke.css): einmal für den Systemstand, einmal für die ausdrückliche Wahl. Die Aufsätze gehen das Thema mit, obwohl sie auf der BASISKARTE liegen und die vom Anbieter kommt, wie sie kommt: Ihre Schrift ist die des Themas, und ein festgehaltener weißer Grund hätte im dunklen Thema helle Schrift auf Weiß ergeben - genau so stand es am 19.08.2026 kurz da, als das dunkle Thema aus dem System dazukam und die Beschriftungen im Ebenen-Widget verschwanden. Ein dunkler Aufsatz auf heller Karte liest sich gut; die Karte bleibt sichtbar, weil der Grund halbdeckend ist. Ausgenommen bleibt nur, was ZUR KARTE gehört und nicht zur Bedienung: die Marken der Georeferenzen und ihre Legende (--marke-quelle/--marke-ziel oben). */ :root { --d-kartengrund: #0d100e; --d-aufsatz: rgba(27, 32, 29, 0.92); --d-aufsatz-leise: rgba(27, 32, 29, 0.82); } @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --kartengrund: var(--d-kartengrund); --aufsatz: var(--d-aufsatz); --aufsatz-leise: var(--d-aufsatz-leise); } } :root[data-thema="dunkel"] { --kartengrund: var(--d-kartengrund); --aufsatz: var(--d-aufsatz); --aufsatz-leise: var(--d-aufsatz-leise); } /* --- Die Anordnung --------------------------------------------------------- Kopf, Arbeitsfläche, Fuß übereinander; die Fläche dazwischen nimmt den Rest. Das System setzt Farben und Höhe des Kopfes, die Anordnung ist Sache dieses Werkzeugs. */ body { display: flex; flex-direction: column; } main { flex: 1; display: flex; min-height: 0; position: relative; } #sidebar { width: var(--sidebar-width); flex: none; overflow-y: auto; padding: var(--polster); border-right: 1px solid var(--border); /* Ein Hauch Grün im Grau - hell und freundlich, aber erkennbar aus dem Mischfeld. Checkboxen und Regler übernehmen das Markengrün gleich mit. */ background: var(--flaeche-leiste); accent-color: var(--gruen-tief); } #map-wrap { flex: 1; position: relative; min-width: 0; } #map { position: absolute; inset: 0; } /* --- Was mapfit im Kopf zusätzlich hat ------------------------------------- .kopf-links, .kopf-rechts, .brand, .header-group, die Knöpfe auf der Tinte und die 26 px der Reihe stehen in basis.css. Hier bleibt, was mapfit eigen ist: die Suche, das Blatt der Marke, die Wegmarke und der Knopf, der seine Taste zeigt. */ /* Die Suche gibt als Erstes nach: Sie darf schrumpfen, die Griffe nicht - ein halbes Suchfeld ist benutzbar, ein halber Knopf nicht. */ #suchleiste { flex: 0 1 420px; } /* Das neunte Feld der Marke: ein schräg liegendes Blatt - mapfit legt einen Plan über eine Karte. (Das Raster und das Wort daneben kommen aus dem System; nur die Farbe des Blattes steht hier, weil es .marke-blatt heißt und nicht .marke-akzent.) */ header .marke-blatt { fill: var(--gruen); stroke: var(--gruen); } header .brand:hover .marke-blatt { fill: var(--gruen-hell); stroke: var(--gruen-hell); } /* Die Wegmarke im Kopf: der Sicherungsstand („zuletzt gesichert 14:03"). Eine Auskunft, kein Griff - sie tritt hinter allem zurück, was man drückt. */ header .crumb { color: var(--tinte-leise); font-size: var(--gr-bedienung); white-space: nowrap; } /* Die zwei Kopfknöpfe, die ihre Taste zeigen (Export K, Drucken D): Die feste Breite von 26 px aus dem System wiegt schwerer als die 40 px von .btn-mit-taste in werkzeuge.css (Element + Klasse gegen eine Klasse), und Sinnbild und Buchstabe wurden zusammengequetscht. Hier mit gleichem Gewicht freigegeben: die Breite ergibt sich aus dem Inhalt, mindestens aber die 40 px der Geschwister in der Werkzeugleiste - dieselbe Sprache, dasselbe Maß. Die Höhe bleibt die des Kopfes. */ header .btn-icon.btn-mit-taste { width: auto; min-width: 40px; padding: 0 7px; gap: 4px; } /* Der Quellenvermerk der Karten steht dauerhaft sichtbar (nicht hinter einem ⓘ-Knopf) - so verlangen es die Nutzungsbedingungen der Anbieter. Er darf dabei nur nicht die halbe Karte einnehmen: kleine Schrift, höchstens die halbe Breite, Umbruch statt Abschneiden. Zurückhaltend gefärbt, aber lesbar - unsichtbar machen wäre dasselbe wie verstecken. */ .maplibregl-ctrl-attrib { font-size: var(--gr-winzig); line-height: 1.35; max-width: min(52ch, 50%); } /* Zwei Klassen, weil maplibre sein Stylesheet zur Laufzeit als