/*
 * Einsatzkarte - Gestaltungssystem
 * SPEC.md Abschnitt 9a. Dies ist die einzige Stelle, an der Farben, Groessen
 * und Abstaende definiert werden. Spaetere Meilensteine verbrauchen diese
 * Merkmale und legen keine neuen an.
 *
 * Haltung: Instrumententafel, keine Web-Anwendung. Die Karte ist der Inhalt,
 * die Oberflaeche die stille Huelle darum. Kein Verlauf, keine Milchglas-
 * effekte (kosten GPU auf billigen Tablets und zerstoeren die Lesbarkeit in
 * der Sonne), kein Schatten als Zierde.
 */

/* ==========================================================================
   1. Merkmale
   ========================================================================== */

:root {
    /* Tag - warmes Neutral statt Reinweiss, das blendet weniger. */
    --surface: #f7f7f5;
    --surface-raise: #ffffff;
    --ink: #14161a;
    --ink-muted: #55606e;
    --line: #c9ced6;
    --accent: #e8a317;
    --accent-ink: #14161a;
    --danger: #c1272d;
    --ok: #1f7a4d;

    /* Der Fokusring liegt auf heller Flaeche bei nur rund 2:1. Der dunkle
       Hof macht ihn sichtbar, ohne den in 9a vorgeschriebenen 2-px-Ring aus
       --accent zu ersetzen. */
    --focus-halo: rgba(20, 22, 26, 0.55);

    /* Genau eine Schattenstufe. Hoehe entsteht sonst aus 1 px --line. */
    --shadow: 0 2px 8px rgba(20, 22, 26, 0.16);

    /* Schrift. Nur Systemschriften: eine Webschrift muesste fuer den
       Offline-Betrieb mitgespeichert werden, und keine Auszeichnungsschrift
       verbessert ein Werkzeug, das um drei Uhr nachts auf Armlaenge
       gelesen wird. */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --size-xs: 13px;   /* Untergrenze - nirgends kleiner */
    --size-s: 15px;    /* Mindestgroesse fuer Fliesstext */
    --size-m: 17px;
    --size-l: 22px;
    --size-xl: 28px;

    /* Form. Pillen wirken nach Konsumprodukt, rechte Winkel nach veraltet. */
    --radius-control: 6px;
    --radius-sheet: 10px;

    /* Mit Handschuhen bedienbar. */
    --touch: 48px;
    --gap: 8px;
    --gap-l: 16px;

    /* Bewegung ist im Einsatz Stoerung: nur Zustandswechsel, sonst nichts. */
    --duration: 120ms;

    color-scheme: light;
}

/*
 * Nacht - rotverschoben, erhaelt die Dunkeladaption. Nicht #000, weil OLED
 * beim Schieben der Karte schmiert.
 *
 * Bewusst zweimal ausgeschrieben statt ueber light-dark(): kennt ein
 * aelteres Tablet die Funktion nicht, waeren schlagartig alle Farben
 * ungueltig. Zehn doppelte Zeilen sind billiger als ein unlesbares Geraet.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="day"]) {
        --surface: #12151a;
        --surface-raise: #1c2129;
        --ink: #e6e8ec;
        --ink-muted: #94a0b0;
        --line: #2f3742;
        --accent: #d99414;
        --accent-ink: #14161a;
        --danger: #f2898d;
        --ok: #5ec98d;
        --focus-halo: rgba(0, 0, 0, 0.7);
        --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}

/* Die Handauswahl steht hinter der Systemabfrage und gewinnt deshalb in
   beide Richtungen - auch zurueck auf Tag bei dunklem System.
   .theme-night/.theme-day sind dieselben Merkmale, nur auf einen Teilbaum
   begrenzt. Nur der Styleguide braucht das, um beide Themen nebeneinander
   zu zeigen; neue Merkmale entstehen dabei keine. */
:root[data-theme="night"],
.theme-night {
    --surface: #12151a;
    --surface-raise: #1c2129;
    --ink: #e6e8ec;
    --ink-muted: #94a0b0;
    --line: #2f3742;
    --accent: #d99414;
    --accent-ink: #14161a;
    --danger: #f2898d;
    --ok: #5ec98d;
    --focus-halo: rgba(0, 0, 0, 0.7);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

.theme-day {
    --surface: #f7f7f5;
    --surface-raise: #ffffff;
    --ink: #14161a;
    --ink-muted: #55606e;
    --line: #c9ced6;
    --accent: #e8a317;
    --accent-ink: #14161a;
    --danger: #c1272d;
    --ok: #1f7a4d;
    --focus-halo: rgba(20, 22, 26, 0.55);
    --shadow: 0 2px 8px rgba(20, 22, 26, 0.16);
    color-scheme: light;
}

/* Ein begrenzter Themenbereich muss seine Flaeche selbst streichen, sonst
   bleibt der Hintergrund der der Seite. */
.theme-day,
.theme-night {
    background: var(--surface);
    color: var(--ink);
}

/*
 * Rot und Blau fehlen hier absichtlich. Auf einer taktischen Karte bedeutet
 * Rot bereits Feuer und Gefahr, Blau eigene Kraefte und Wasser. Beide sind
 * dem Karteninhalt vorbehalten und duerfen nie fuer die Oberflaeche
 * verwendet werden. --danger ist die einzige Ausnahme und gilt nur fuer
 * zerstoerende Bedienelemente, nie fuer Kartenbeiwerk.
 *
 * --ink-muted erreicht auf heller Flaeche rund 5,9:1 und bleibt damit unter
 * der Schwelle von 7:1 aus Abschnitt 9a. Es ist deshalb nur fuer beilaeufige
 * Zusatztexte zulaessig. Jede Anzeige und jede Beschriftung eines
 * Bedienelements nimmt --ink.
 */

/* ==========================================================================
   2. Grundlage
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--size-s);
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink);
    background: var(--surface);
    -webkit-text-size-adjust: 100%;
}

h1 { font-size: var(--size-xl); font-weight: 700; line-height: 1.2; margin: 0 0 var(--gap-l); }
h2 { font-size: var(--size-l); font-weight: 700; line-height: 1.25; margin: 0 0 var(--gap); }
h3 { font-size: var(--size-m); font-weight: 600; line-height: 1.3; margin: 0 0 var(--gap); }

.text-muted { color: var(--ink-muted); }
.text-small { font-size: var(--size-xs); }

/* Jede Zahlenanzeige - Koordinaten, Entfernungen, Druecke, Wind. Ohne
   Tabellenziffern springen die Stellen bei jeder Aktualisierung. */
.readout {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   3. Fokus und Bewegung
   ==========================================================================
   outline: none ist im ganzen Projekt verboten (Abschnitt 9a). Wer den Ring
   versetzen muss, aendert outline-offset.
*/

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-halo);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration: 0ms;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}

/* ==========================================================================
   4. Bedienelemente
   ========================================================================== */

.btn,
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    min-height: var(--touch);
    padding: 0 var(--gap-l);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--size-s);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration), border-color var(--duration);
}

.btn:hover,
.btn-icon:hover { border-color: var(--ink-muted); }

.btn:active,
.btn-icon:active { background: var(--surface); }

.btn--primary,
.btn[aria-pressed="true"],
.btn-icon[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* Der Rahmen traegt die Warnung, nicht die Schrift: --danger erreicht auf
   heller Flaeche nur rund 5,8:1 und darf deshalb keine Beschriftung
   einfaerben (7:1, Abschnitt 9a). Der innere Schatten verdoppelt den
   Rahmen optisch auf 2 px, damit er in der Sonne bestehen bleibt. */
.btn--danger {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
}

.btn:disabled,
.btn-icon:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Nur Sinnbilder, keine Textbeschriftung in der Hauptleiste. Jede
   Schaltflaeche braucht ein aria-label (Abschnitt 9.3). */
.btn-icon {
    width: var(--touch);
    min-width: var(--touch);
    padding: 0;
}

/* Strichstaerke mindestens 2 px: Haarlinien verschwinden in der Sonne und
   hinter Wasser auf dem Glas. */
.btn-icon svg,
.rail svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--gap);
    min-height: var(--touch);
    cursor: pointer;
}

.toggle input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.toggle__track {
    position: relative;
    flex: none;
    width: 52px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
    transition: background-color var(--duration), border-color var(--duration);
}

.toggle__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--ink-muted);
    transition: transform var(--duration), background-color var(--duration);
}

.toggle input:checked + .toggle__track {
    background: var(--accent);
    border-color: var(--accent);
}

.toggle input:checked + .toggle__track::after {
    transform: translateX(22px);
    background: var(--accent-ink);
}

.toggle input:focus-visible + .toggle__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-halo);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field > label {
    font-size: var(--size-xs);
    font-weight: 600;
    color: var(--ink);
}

.input,
.select {
    width: 100%;
    min-height: var(--touch);
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--size-m); /* unter 16 px zoomt iOS beim Fokus hinein */
    transition: border-color var(--duration);
}

.input:hover,
.select:hover { border-color: var(--ink-muted); }

.input::placeholder { color: var(--ink-muted); }

.select {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

/* ==========================================================================
   5. Flaechen
   ========================================================================== */

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--gap-l);
    padding-bottom: calc(var(--gap-l) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    background: var(--surface-raise);
    box-shadow: var(--shadow);
}

.sheet[hidden] { display: none; }

.sheet__handle {
    width: 40px;
    height: 4px;
    margin: 0 auto var(--gap-l);
    border-radius: 2px;
    background: var(--line);
}

/* Kurzmeldungen bleiben im unteren Drittel (Abschnitt 9.13, einhaendige
   Bedienung) und liegen ueber der Instrumentenleiste UND der schwebenden
   .draw-actions-Leiste - beide sonst nahezu gleich hoch positioniert, der
   Toast wuerde sie sonst verdecken statt nur darueber zu schweben (F-006).
   Gerechnet wird mit der gemessenen Leistenhoehe, nicht mit einer festen
   Zahl: die Werkzeugreihe bricht auf schmalen Geraeten um, und mit einem
   festen Wert lag der Toast dort auf den Symbolen. */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--rail-height, 112px) + var(--touch) + var(--gap-l) * 2);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--gap-l);
    max-width: calc(100vw - 2 * var(--gap-l));
    padding: 12px var(--gap-l);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
    color: var(--ink);
    box-shadow: var(--shadow);
    transform: translateX(-50%);
}

.toast--danger { border-color: var(--danger); }
.toast--ok { border-color: var(--ok); }
.toast[hidden] { display: none; }

/* ==========================================================================
   6. Instrumentenleiste
   ==========================================================================
   Das Erkennungsmerkmal der Anwendung: ein durchgehendes Band an der
   Unterkante mit Koordinaten, Massstab, Nordpfeil, Wind und
   Verbindungszustand, die Werkzeugknoepfe unmittelbar darueber. Ein Band,
   ein Rhythmus, immer am selben Platz, einhaendig erreichbar
   (Abschnitt 9.6 und 9.13).
*/

.rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gap);
    padding-bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px));
    pointer-events: none; /* die Karte bleibt zwischen den Elementen greifbar */
}

.rail > * { pointer-events: auto; }

.rail__tools {
    display: flex;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: var(--gap);
}

.rail__strip {
    display: flex;
    align-items: stretch;
    min-height: var(--touch);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
    box-shadow: var(--shadow);
}

/* min-height gehoert an die Zelle, nicht nur an das Band: die Koordinaten-
   zelle ist eine Schaltflaeche und muss die 48 px selbst erreichen. Am Band
   allein bleiben nach Abzug der Rahmen nur 46 px uebrig. */
.rail__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    gap: 6px;
    padding: 0 12px;
    border-right: 1px solid var(--line);
    font-size: var(--size-xs);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.rail__cell:last-child { border-right: 0; }

/* Die Koordinatenanzeige ist antippbar und wechselt das Format
   (Abschnitt 9.7), darum eine Schaltflaeche und mit Vorrang beim Platz. */
.rail__cell--coords {
    flex: 1 1 auto;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    background: none;
    font-family: inherit;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Ebenfalls Balken statt Schriftfarbe - eine Anzeige muss 7:1 erreichen,
   und der Verbindungszustand ist die Anzeige, auf die es offline ankommt. */
.rail__cell--offline {
    color: var(--ink);
    box-shadow: inset 0 -4px 0 var(--danger);
}

/* Nordpfeil und Windpfeil drehen sich, der eine mit der Karte, der andere
   mit der Windrichtung. */
.rail__north svg,
.rail__wind svg { transition: transform var(--duration); }

/* Der Windpfeil oeffnet das Wetterblatt, die Verbindungszelle seit M7b die
   Offline-Karten; beide sind deshalb echte Schaltflaechen (Tastaturfokus,
   Abschnitt 9a) - derselbe Reset wie bei der Koordinatenzelle, aber ohne deren
   Wachstumsvorrang. */
.rail__wind,
.rail__cell--action {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    background: none;
    cursor: pointer;
}

.rail__scale-bar {
    min-width: 40px;
    height: 6px;
    border: 2px solid var(--ink);
    border-top: 0;
}

/* ==========================================================================
   7. Karte
   ==========================================================================
   Die Karte fuellt 100 % des Sichtfelds, alle Bedienelemente schweben
   darueber (Abschnitt 9.1 und 9.2). Kein Vorspann, kein Cookie-Banner.
*/

.map {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--surface);
}

/* Leaflet bringt eigene helle Farben mit; nur so weit angeglichen, dass der
   Nachtmodus nicht aufblitzt. */
.leaflet-container {
    background: var(--surface);
    font-family: var(--font);
    font-size: var(--size-xs);
}

/* Der Kartenhinweis sitzt bei Leaflet fest an der Unterkante und lag damit
   unter der Instrumentenleiste - lesbar war er nur, solange die Leiste
   schmaler war als das Fenster. Angehoben wird er, nicht die Leiste: das
   durchgehende Band an der Unterkante ist das Erkennungsmerkmal der
   Anwendung (Abschnitt 9a). Die Namensnennung ist Pflicht (Abschnitt 8).

   Angehoben aber nur so weit wie noetig: --attribution-offset ist in der
   Regel die Hoehe des Anzeigebands, sodass der Hinweis unten rechts
   unmittelbar darauf aufsitzt und wie dessen Fortsetzung wirkt statt wie ein
   Kasten mitten auf der Karte. Erst wenn die Werkzeugreihe auf einem
   schmalen Geraet bis dorthin reicht, weicht er auf die volle Leistenhoehe
   aus - gemessen in map.js, nicht geraten. Buendig rechts wie auf jeder
   Karte im Netz, ohne eigenen Rahmen und ohne Schatten. */
.leaflet-bottom.leaflet-right {
    margin-bottom: var(--attribution-offset, 112px);
}

.leaflet-control-attribution {
    margin: 0 !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-control) 0 0 0 !important;
    background: var(--surface-raise) !important;
    color: var(--ink-muted) !important;
    font-size: var(--size-xs) !important;
}

.leaflet-control-attribution a { color: var(--ink) !important; }

/* ==========================================================================
   8. Seiteninhalt (Impressum, Datenschutz, Styleguide)
   ========================================================================== */

.page {
    max-width: 68ch;
    margin: 0 auto;
    padding: var(--gap-l);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
}

/* ==========================================================================
   9. Kleine Sichtfelder
   ==========================================================================
   Voller Funktionsumfang bis herunter zu 360 px (Abschnitt 9a).
*/

@media (max-width: 380px) {
    .rail__cell { padding: 0 8px; }
    .btn { padding: 0 12px; }

    /* Fuenf Zellen mit umbruchfreiem Text brauchen rund 465 px. Auf 360 px
       wuerde das Band die Seite seitlich herausschieben. Abschnitt 9.6
       verlangt alle fuenf Anzeigen dauerhaft sichtbar - also umbrechen
       statt kuerzen oder waagerecht schieben. Das Band bleibt ein Band,
       es wird nur zweizeilig. */
    .rail__strip { flex-wrap: wrap; }

    .rail__cell--coords {
        flex: 1 1 100%;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    /* Auf 360 px kostet der Innenabstand von Blatt und Kategorie zusammen
       64 px - genug, um dem Kachelraster eine ganze Spalte zu nehmen. Hier
       ist der schmalere Abstand das kleinere Uebel: drei Zeichen
       nebeneinander sind mehr wert als 8 px Luft am Rand. */
    .sheet { padding: var(--gap); }
    .signs-category > .sign-grid { padding: var(--gap); }
}

/* ==========================================================================
   10. Zeichnen und Messen
   ==========================================================================
   SPEC.md Abschnitt 10, M2a. Die sechs Zeichenfarben und drei Strichstaerken
   sind bewusst keine Merkmale hier, sondern Konstanten in draw.js: sie
   muessen ueber Tag und Nacht optisch fest bleiben (ein "Schwarz" darf im
   Nachtmodus nicht zu Weiss werden), und Rot/Blau sind laut Abschnitt 1 dem
   Kartenbeiwerk vorenthalten, nicht dem Karteninhalt - Zeichenfarben sind
   Karteninhalt.
*/

/* Schwebende Leiste fuer Fertig/Abbrechen/Loeschen waehrend des Zeichnens
   und Auswaehlens. Liegt oberhalb der Instrumentenleiste, gleiche Optik wie
   .rail__strip. Die Hoehe der Leiste wird gemessen (map.js), nicht geschaetzt:
   ihre Werkzeugreihe bricht je nach Geraetebreite in zwei oder drei Reihen um. */
.draw-actions {
    position: fixed;
    left: var(--gap);
    right: var(--gap);
    bottom: calc(var(--rail-height, 112px) + var(--gap));
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--gap);
    min-height: var(--touch);
    padding: 0 var(--gap);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
    box-shadow: var(--shadow);
}

.draw-actions[hidden] { display: none; }

/* Farbwahl im Zeichnen-Sheet. Die Farbe selbst kommt inline von draw.js, das
   Merkmalsystem legt nur Groesse und Auswahlring fest - nie --accent, das
   wuerde mit dem gelben Zeichenton kollidieren. */
.draw-swatch {
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color var(--duration), box-shadow var(--duration);
}

.draw-swatch[aria-pressed="true"] {
    border-color: var(--surface-raise);
    box-shadow: 0 0 0 2px var(--ink);
}

/* Strichstaerkenwahl mit einer Vorschaustaerke statt einer Zahl - schneller
   erfassbar auf Armlaenge. */
.draw-width {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch);
    min-height: var(--touch);
    padding: 0 var(--gap-l);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
    cursor: pointer;
    transition: background-color var(--duration), border-color var(--duration);
}

.draw-width[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
}

.draw-width__bar {
    width: 28px;
    border-radius: 2px;
    background: var(--ink);
}

/* Ziehpunkt an einer Stuetzstelle einer Linie oder Flaeche. touch-action:
   none ist Pflicht, sonst versucht der Browser waehrend des Ziehens zu
   schieben statt den Punkt zu bewegen. */
.draw-handle {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--surface-raise);
    touch-action: none;
    cursor: grab;
}

.draw-handle:active { cursor: grabbing; }

/* Auswahl einer Marke: gestrichelter Rahmen statt Farbwechsel, damit die
   taktische Farbe des Objekts unangetastet bleibt. Bewusst --ink statt
   --accent, damit die Auswahl nicht mit dem Tastaturfokus verwechselt wird. */
.draw-marker--selected {
    outline: 2px dashed var(--ink);
    outline-offset: 3px;
    border-radius: 50%;
}

/* M2b ab hier. */

/* Fuellt den Platz, den .draw-actions' justify-content:flex-end links von
   den Schaltflaechen frei laesst - die laufende Anzeige beim Messen. */
.draw-actions__readout {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Eine Messung ist eine Geraeteanzeige, kein Karteninhalt nach DV 102 -
   deshalb folgt sie --ink durch Tag und Nacht statt einer der sechs festen
   Zeichenfarben. */
/* Eine Strecke ist keine Flaeche. Die Fuellung galt frueher fuer beide
   Messarten, und weil eine Regelwerkregel Leaflets eigenes fill="none" an der
   Polylinie schlaegt, erschien eine ueber drei Punkte gemessene Strecke als
   ausgefuelltes Dreieck. Gefuellt wird nur noch die Flaechenmessung, ueber
   die zusaetzliche Klasse an ihrer Ebene. */
.draw-measurement-path {
    stroke: var(--ink);
    stroke-dasharray: 6 4;
    fill: none;
}

.draw-measurement-path--area {
    fill: var(--ink);
}

/* --------------------------------------------------------------------
   Beschriftungen AUF der Karte - eine Gestalt fuer alle
   --------------------------------------------------------------------
   Messwerte, Textfelder, Namen taktischer Zeichen und der Hinweis am
   Windkegel liegen alle auf fremdem Untergrund: helle Luftbildkachel,
   dunkler Wald, Nachtmodus. Frueher hatte jede Stelle ihre eigene Loesung
   (weicher Schlagschatten hier, Kasten dort), und keine davon war in der
   Sonne verlaesslich lesbar.

   Kontur statt Kasten: ein zwei Pixel starker weisser Hof rundherum - die
   uebliche Kartentypografie. Der Text bleibt auf jedem Untergrund lesbar,
   auch auf einem Luftbild, verdeckt die Karte aber nur dort, wo Buchstaben
   sind, statt einen Block darueberzulegen. Acht Richtungen, weil ein
   einzelner text-shadow nur in eine Richtung deckt.

   Feste Farben statt --ink/--surface, und das ist der Kern: die Kartenkacheln
   sind Tag wie Nacht dieselben hellen Rasterbilder. Eine Beschriftung, die
   dem Nachtmodus folgt, waere dort helle Schrift mit dunklem Hof auf hellem
   Grund - schwer lesbar genau dann, wenn es darauf ankommt. Derselbe Grund,
   aus dem .sign-icon weiter unten fest #ffffff traegt und die sechs
   Zeichenfarben Konstanten in draw.js sind: was auf der Karte liegt, ist
   Karteninhalt und darf sich mit der Oberflaeche nicht aendern
   (Abschnitt 9a). */
.map-label {
    display: inline-block;
    color: #14161a;
    font-size: var(--size-xs);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-align: center;
    text-shadow:
        0 2px 0 #ffffff, 0 -2px 0 #ffffff,
        2px 0 0 #ffffff, -2px 0 0 #ffffff,
        1px 1px 0 #ffffff, -1px 1px 0 #ffffff,
        1px -1px 0 #ffffff, -1px -1px 0 #ffffff;
    pointer-events: none;
}

.map-label__line {
    display: block;
}

/* iconSize:[0,0] plus overflow:visible laesst die Beschriftung sich an ihren
   Inhalt anpassen, statt auf eine feste Box zuzuschneiden; translateX(-50%)
   zentriert sie ueber ihrem Ankerpunkt, sonst haengt sie rechts daneben. */
.map-label-icon {
    overflow: visible;
}

.map-label-icon .map-label {
    transform: translateX(-50%);
}

/* Die Farbe eines Textfelds bleibt die gewaehlte Zeichenfarbe - sie ist
   Karteninhalt (Abschnitt 9a). Aus .map-label kommen nur Hof und
   Schriftschnitt, deshalb hier keine eigene Farbe. */
.draw-text-label {
    font-size: var(--size-s);
}

/* iconSize:[0,0] plus overflow:visible laesst das Sinnbild sich an seinen
   Inhalt anpassen, statt auf eine feste Box zuzuschneiden. */

/* ------------------------------------------------------------------
 * Windkegel (M5b)
 * ------------------------------------------------------------------ */

/* Wie .draw-measurement-path: ein Windkegel ist eine Geraeteanzeige, kein
   Karteninhalt nach DV 102 (er wird nie von Hand gezeichnet, nur ausgeloest
   und nach Windrichtung ausgerichtet) - deshalb --ink statt einer der sechs
   Zeichenfarben, und stroke/fill statt inline color, damit Tag und Nacht
   ohne erneutes Rendern folgen. */
.draw-wind-cone {
    stroke: var(--ink);
    fill: var(--ink);
}

/* Leaflet bringt fuer Tooltips einen eigenen weissen Kasten mit Zipfel mit.
   Der Windkegel ist laut Abschnitt 10 "als Hilfsmittel gekennzeichnet", und
   diese dauerhafte Beschriftung ist die Kennzeichnung - sie traegt deshalb
   dieselbe Gestalt wie jede andere Beschriftung auf der Karte: Hof statt
   Kasten (siehe .map-label oben), sonst liegt hier als einziger Stelle ein
   Block ueber dem Gelaende. */
.wind-cone-tooltip {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.wind-cone-tooltip::before {
    display: none;
}

/* ------------------------------------------------------------------
 * Taktische Zeichen (M6b)
 * ------------------------------------------------------------------ */

/* Heller Traeger um das Sinnbild auf der Karte: die DV-102-Zeichen sind
   schwarze Strichzeichnungen fuer weissen Untergrund (feste Farbe in der
   SVG-Datei, kein Merkmal), keine dunkle Kachel oder der Nachtmodus duerfen
   das aendern - bewusst fest #ffffff statt --surface-raise, wie bei
   .session-qr weiter unten. Gedreht wird nur das <img> darin, siehe
   buildSignIcon in draw.js - der Traeger selbst bleibt ein Kreis. */
.sign-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--line), var(--shadow);
}

.sign-icon img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.sign-icon__label {
    position: absolute;
    top: 100%;
    margin-top: 2px;
}

/* Kachelraster der Palette (public/js/signs.js): moeglichst viele Zeichen auf
   einen Blick, mit dem Sinnbild gross und dem Namen darunter - so wird
   gesucht, wenn man weiss, wie das Zeichen aussieht, aber nicht, wie es
   heisst. Kachel mindestens 100 x 96 px: deutlich ueber der 48-px-Vorgabe aus
   Abschnitt 9.4, weil hier mit dem Finger gezielt getroffen werden muss, das
   Sinnbild erkennbar bleiben soll und die laengsten Namen des Katalogs 67
   Zeichen haben. auto-fill statt fester Spaltenzahl, dasselbe Raster traegt
   360 px und ein Tablet quer; 1fr macht alle Kacheln einer Reihe gleich
   breit.
   Die 100 px sind gemessen, nicht gegriffen: auf 360 px bleiben nach den
   schmaleren Innenabstaenden weiter unten 326 px, und drei Spalten brauchen
   davon 3 x 100 + 2 x 8. Bei 104 px waeren es nur noch zwei. */
.sign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--gap);
}

/* .btn liefert Rahmen, Hover- und Fokuszustand; Hoehe und Innenaufbau werden
   fuer die Kachel ueberschrieben. */
.sign-tile {
    flex-direction: column;
    gap: 4px;
    min-height: 96px;
    padding: var(--gap) 4px;
}

/* Derselbe Grund wie bei .sign-icon oben braucht denselben festen weissen
   Untergrund - .btn ist im Nachtmodus selbst dunkel und wuerde das schwarze
   Sinnbild sonst verschlucken. */
.sign-tile__icon {
    width: 48px;
    height: 48px;
    padding: 3px;
    border-radius: 50%;
    background: #ffffff;
    object-fit: contain;
}

/* Zeichennamen reichen bis 67 Zeichen (public/signs/index.json). Zwei Zeilen
   und dann abschneiden haelt das Raster ruhig; der vollstaendige Name steht
   im title und erscheint beim Auswaehlen in der Kontextleiste. 13 px ist die
   Untergrenze aus Abschnitt 9a und hier zulaessig: eine Beschriftung unter
   einem Sinnbild, kein Fliesstext.
   overflow-wrap ist keine Feinheit, sondern der Fix fuer einen echten Fehler:
   ein einzelnes langes Wort ("Verpflegungszubereitungsstelle") hat keine
   Umbruchstelle und lief seitlich aus der Kachel heraus - die Zeilenbegrenzung
   allein haelt das nicht auf, sie schneidet nur senkrecht. */
.sign-tile__label {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
    hyphens: auto;
    font-size: var(--size-xs);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
}

/* Legende der Wasserentnahmestellen im Infoblatt: derselbe Kreis wie auf der
   Karte, damit die Zuordnung ohne Nachdenken gelingt (public/js/waterpoints.js
   baut die Zeilen). */
.water-point-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1b4dd1;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

/* Eine Kategorie in der Zeichen-Palette (public/js/signs.js): natives
   <details>/<summary> statt eigenem Auf-/Zuklapp-Skript - Fokusring kommt
   ueber die globale :focus-visible-Regel oben kostenlos mit, outline
   bleibt deshalb unangetastet. */
.signs-category {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
}

.signs-category + .signs-category {
    margin-top: var(--gap);
}

.signs-category > summary {
    display: flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 var(--gap-l);
    font-size: var(--size-s);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.signs-category[open] > summary {
    border-bottom: 1px solid var(--line);
}

.signs-category > .sign-grid {
    padding: var(--gap-l);
}

/* ------------------------------------------------------------------
 * Sitzung teilen (M3b)
 * ------------------------------------------------------------------ */

/* Der Code wird durchgefunkt und abgetippt: gross, mit Ziffernabstand und
   Tabellenziffern aus .readout, damit sich 8 und B nicht bewerben. */
.session-code {
    margin: 0;
    font-size: var(--size-xl);
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Bewusst schwarz auf weiss in beiden Themen: ein rotverschobener QR-Code
   wird von keiner Kamera gelesen. Deshalb feste Werte statt Merkmale. */
.session-qr {
    display: flex;
    justify-content: center;
    padding: var(--gap);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

.session-qr:empty { display: none; }

.session-qr svg {
    width: 100%;
    max-width: 176px;
    height: auto;
}

/* ------------------------------------------------------------------
 * Foerderstrecke und Hoehenprofil (M8b)
 * ------------------------------------------------------------------ */

/* Reine Linie ueber der zurueckgelegten Strecke, ohne Achsen und ohne Gitter:
   die Zahlen darunter sagen, worum es geht. Feste Hoehe, weil das viewBox
   der Grafik in Nutzerkoordinaten rechnet und sich sonst nichts zum Skalieren
   haette. */
.elevation-profile {
    height: 90px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--surface-raise);
}

.elevation-profile:empty { display: none; }

.elevation-profile svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Die Grafik wird in der Breite gedehnt (preserveAspectRatio="none"), damit
   das Profil die ganze Blattbreite nutzt. non-scaling-stroke haelt die
   Strichstaerke davon frei - gedehnt waere sie duenner als die 2 px, die
   Abschnitt 9a als Untergrenze setzt. */
.elevation-profile__line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.elevation-profile__baseline {
    stroke: var(--line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* Steigungsstufen im Profil und in den Zeilen darunter (Abschnitt 10, M8).
   --ok, --accent und --danger erscheinen hier ausschliesslich als Linien- und
   Tupferfarbe, nie als Schriftfarbe - genau die Verwendung, die Abschnitt 9a
   ihnen zugesteht. Die Vorbehaltung von Rot und Blau gilt dem Karteninhalt;
   dieses Profil liegt in einem Blatt und nicht auf der Karte. Farbe traegt
   nichts allein: jede Stufe steht darunter als Zeile mit ihrer Laenge. */
.elevation-profile__line--normal { stroke: var(--ok); }
.elevation-profile__line--steep { stroke: var(--accent); }
.elevation-profile__line--very-steep { stroke: var(--danger); }

.incline-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--ok);
}

.incline-swatch--steep { background: var(--accent); }
.incline-swatch--very-steep { background: var(--danger); }

/* Nummerierte Marke auf der Route. Weder rot noch blau: beide sind dem
   Karteninhalt vorbehalten (Abschnitt 9a), und ein Rechenergebnis ist keine
   Lage. */
.pump-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--surface-raise);
    color: var(--ink);
    font-size: var(--size-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   13. Rechtliche Seiten (SPEC.md Abschnitt 11.3, M9)
   ==========================================================================
   Fliesstext statt Instrumententafel - .page begrenzt die Zeilenlaenge
   fuer Lesbarkeit, sonst nur vorhandene Merkmale und die Ueberschriften-
   groessen aus Abschnitt 9a.
*/

.page h1 { font-size: var(--size-xl); font-weight: 700; }
.page h2 { font-size: var(--size-l); font-weight: 600; margin-top: var(--gap-l); }

.legal-footer {
    margin-top: var(--gap-l);
    padding-top: var(--gap-l);
    border-top: 1px solid var(--line);
}

.legal-footer a { color: var(--ink); }

/* ==========================================================================
   14. Export und Druck (SPEC.md Abschnitt 10, M9)
   ==========================================================================
   Das Overlay ist nur beim Drucken sichtbar (siehe @media print unten);
   public/js/export.js fuellt seinen Inhalt bei jedem 'beforeprint'.
*/

.print-overlay { display: none; }

@media print {
    body * { visibility: hidden; }

    .map, .map * , .print-overlay, .print-overlay * { visibility: visible; }

    .rail, .sheet, .toast, .draw-actions { display: none !important; }

    .map {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .print-overlay {
        display: block;
        position: absolute;
        left: 12px;
        bottom: 12px;
        max-width: 70%;
        padding: var(--gap);
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #000;
        font-size: 11px;
        color: #000;
    }

    .print-overlay__row {
        display: flex;
        gap: var(--gap);
        align-items: center;
        font-weight: 600;
    }

    .print-overlay__north svg {
        width: 18px;
        height: 18px;
        stroke: #000;
        fill: none;
        stroke-width: 2;
    }

    .print-overlay__legend { margin-top: 4px; }
    .print-overlay__attribution { margin-top: 4px; color: #333; }
}