/* Eigenes CSS ohne UI-Framework (AGENTS.md: Downloadgröße ist ein
   Produktmerkmal). Interaktive Elemente mindestens 48×48 px, weil die App
   im Bestand mit Handschuhen bedient wird. */

:root {
    /* **Grundfarbe — Text, Kontur, Fokus.** Sie traegt beide Rollen (15,9:1
       gegen Weiss in jeder Richtung) und bleibt deshalb, wo gelesen wird.

       **War Waldgruen (#1d3b2a) und ist jetzt das INTEND-Schwarzgrau.**
       Nachgesehen in `assets/themes/intend/css/` auf intend.de:
       `default-theme.css` fuehrt genau eine Farbe, und das ist `#fbb800` —
       die Aktionsfarbe unten stand also von Anfang an richtig. Alles Uebrige
       der Marke sind Grauwerte um #222222 auf Weiss; ein Gruen kommt dort
       nicht vor. Der Tausch kostet nichts und gewinnt Lesbarkeit: 12,3:1
       vorher, 15,9:1 jetzt.

       **Gruen bleibt, wo es etwas bedeutet** — `--farbe-erfolg` und die
       Statuskacheln `erledigt`/`abgenommen`. Der Satz dort („das ist die
       Bedeutung, nicht die Marke") stimmt ab jetzt auch fuer den Rest: Gruen
       heisst in dieser App ausschliesslich *erledigt* und nie mehr *INTEND*. */
    --farbe-primaer: #222222;
    --farbe-primaer-hell: #4a4a4a;

    /* **Aktionsfarbe — nur Flaechen, nie Text auf Weiss.**
       Gemessen: `#fbb800` auf Weiss ergibt 1,76:1 und faellt als Schriftfarbe
       oder Kontur durch; mit dunkler Schrift darauf sind es 9,91:1. Deshalb
       gibt es sie ausschliesslich als Knopfflaeche, und die Schrift darauf ist
       `--farbe-text`, nicht Weiss.

       `--farbe-aktion-rand` schliesst die zweite Luecke: Ohne ihn stuende der
       Knopf mit 1,76:1 gegen die weisse Seite, seine Grenze waere also nicht
       zu sehen (WCAG 1.4.11 verlangt 3:1 fuer die Kontur eines
       Bedienelements). Mit `#a87600` sind es 4,0:1. */
    --farbe-aktion: #fbb800;
    --farbe-aktion-hell: #ffc933;
    --farbe-aktion-rand: #a87600;

    /* **Die Schrift auf der Aktionsflaeche dreht nicht um.** Sie ist in beiden
       Darstellungen dunkel, weil die Flaeche in beiden bernstein ist — und
       genau darauf beruht die Messung oben. `--farbe-text` waere hier falsch:
       Die dreht im Dunkelmodus auf Hell, und helle Schrift auf Bernstein ergibt
       1,9:1. Am Bildschirm gesehen (Browserprobe), nicht geschaetzt. */
    --farbe-aktion-text: #1a1a1a;

    /* **Erledigt.** Bleibt gruen — das ist die Bedeutung, nicht die Marke. */
    --farbe-erfolg: #1e7a34;

    /* **Wartet auf Uebertragung.** War bernsteinbraun und musste weichen, als
       Bernstein zur Aktionsfarbe wurde: Derselbe Farbton haette „hier
       druecken" und „das haengt noch" gesagt. Blaugrau steht weit genug
       daneben (4,1:1 gegen die Aktionsfarbe) und traegt als Schrift 7,2:1. */
    --farbe-warten: #3a5a78;
    --farbe-warten-dunkel: #2c4459;
    --farbe-warten-hell: #eef3f8;

    --farbe-fehler: #b02a2a;
    --farbe-text: #1a1a1a;

    /* **Flaechen, Raender, gedaempfte Schrift — als Marken, nicht als Werte.**

       Sie standen bis zum UX-Durchgang rund vierzigmal fest im Regelwerk
       (`#fff`, `#c9c9c9`, `#ececec`, …). Das war solange gleichgueltig, wie es
       genau eine Darstellung gab; fuer den Dunkelmodus darunter ist es der
       Unterschied zwischen „funktioniert" und „halbe Seite bleibt hell". */
    /* **Die Leiste hat eigene Marken.** `--farbe-primaer` dreht im
       Dunkelmodus um (dunkle Schrift wird zu heller Schrift); die Kopfleiste
       soll aber in beiden Faellen ein dunkler Balken mit heller Schrift sein.
       Beide an dieselbe Marke zu haengen hiesse im Dunkelmodus: weisse Schrift
       auf hellgrauem Grund. */
    --farbe-leiste: #222;
    --farbe-leiste-text: #fff;

    --farbe-grund: #fff;
    --farbe-flaeche: #fafafa;
    --farbe-flaeche-zart: #f2f2f2;
    --farbe-grau: #ececec;
    --farbe-rand: #c9c9c9;
    --farbe-rand-zart: #d6d6d6;
    --farbe-rand-stark: #b8b8b8;
    --farbe-linie: #e0e0e0;
    --farbe-gedaempft: #555;
    --farbe-haken: #595959;

    /* Die getoenten Flaechen der Bedeutungsfarben. Sie tragen `--farbe-text`,
       nicht Weiss — deshalb braucht jede im Dunkelmodus eine eigene, tiefere
       Fassung statt einer Aufhellung. */
    --farbe-fehler-grund: #fdf2f2;
    --farbe-erfolg-grund: #eaf5ec;
    --farbe-erfolg-dunkel: #14591f;
    --farbe-erledigt-grund: #f2f8f3;

    --status-grund: #e6e6e6;
    --status-freigegeben: #dbe9ff;
    --status-in-arbeit: #fff0c9;
    --status-erledigt: #d9efdd;
    --status-teilweise: #ffe4c4;
    --status-nicht-durchfuehrbar: #f6d6d6;
    --status-abgenommen: #bfe3c6;
    --status-storniert: #ddd;

    /* Der Uebertragungsknopf traegt `--farbe-text` wie die Statuskacheln und
       braucht deshalb dieselbe Behandlung: blasse Toenung im Hellen, tiefe im
       Dunkeln. */
    --uebertragung-wartet: #9dc2e0;
    --uebertragung-wartet-rand: #5d87a8;
    --uebertragung-offline: #dfe3e6;
    --uebertragung-offline-rand: #8b9399;
    --uebertragung-leer: #bfe3c6;
    --uebertragung-leer-rand: #3f8f55;

    /* Sagt dem Browser, welche Darstellung gilt — sonst zeichnet er
       Bildlaufleisten und die Auswahlfelder von iOS in der falschen. */
    color-scheme: light;
}

/* **Der Dunkelmodus.**

   Im Dezember beginnt und endet die Schicht im Dunkeln. Ein reinweisser
   Bildschirm mit 18 px Grundschrift bei voller Helligkeit blendet dann so,
   dass man ihn wegdreht — und das Geraet wegzudrehen ist das Gegenteil
   dessen, was eine Rueckmeldung braucht.

   **Nur Marken, kein einziges Bauteil.** Die Regeln darunter ruehren sich
   nicht; sie greifen ausschliesslich auf `var(--…)` zu. Genau dafuer ist der
   Block darueber gebaut worden.

   **Die Rollen bleiben:** Bernstein handelt, Gruen ist erledigt, Blaugrau
   wartet, Rot weist ab. Was sich aendert, ist der Grund, auf dem sie stehen —
   nicht, was sie bedeuten. */
@media (prefers-color-scheme: dark) {
    :root {
        /* Die Grundfarbe traegt hier Schrift auf dunklem Grund und dreht sich
           deshalb um: aus #222222 wird ein helles Grau (13,2:1 auf #121212). */
        --farbe-primaer: #e6e6e6;
        --farbe-primaer-hell: #c2c2c2;

        /* Bernstein bleibt die Aktionsfarbe, aber gedaempft: #fbb800 auf
           dunklem Grund ist ein Scheinwerfer, und die Schrift darauf bleibt
           dunkel. */
        --farbe-aktion: #d9a017;
        --farbe-aktion-hell: #e8b33a;
        --farbe-aktion-rand: #f0c95a;

        --farbe-erfolg: #58c473;
        --farbe-warten: #9dc2e0;
        --farbe-warten-dunkel: #cfe2f2;
        --farbe-warten-hell: #17242f;
        --farbe-fehler: #ff8a80;
        --farbe-text: #ededed;

        --farbe-leiste: #1c1c1c;
        --farbe-leiste-text: #ededed;

        --farbe-grund: #121212;
        --farbe-flaeche: #1c1c1c;
        --farbe-flaeche-zart: #232323;
        --farbe-grau: #2a2a2a;
        --farbe-rand: #444;
        --farbe-rand-zart: #3a3a3a;
        --farbe-rand-stark: #5a5a5a;
        --farbe-linie: #333;
        --farbe-gedaempft: #b0b0b0;
        --farbe-haken: #d0d0d0;

        --farbe-fehler-grund: #2b1616;
        --farbe-erfolg-grund: #16261a;
        --farbe-erfolg-dunkel: #8fdca2;
        --farbe-erledigt-grund: #18211a;

        --status-grund: #2e2e2e;
        --status-freigegeben: #1e3050;
        --status-in-arbeit: #4a3c12;
        --status-erledigt: #1d4429;
        --status-teilweise: #4a3320;
        --status-nicht-durchfuehrbar: #4a2323;
        --status-abgenommen: #235c36;
        --status-storniert: #333;

        --uebertragung-wartet: #1e3b52;
        --uebertragung-wartet-rand: #6f9fc2;
        --uebertragung-offline: #2c3033;
        --uebertragung-offline-rand: #737b80;
        --uebertragung-leer: #1d4429;
        --uebertragung-leer-rand: #4f9e68;

        color-scheme: dark;
    }

    /* **Die Statuskacheln tragen im Dunkeln helle Schrift.** Im Hellen steht
       `--farbe-text` (dunkel) auf einer blassen Toenung; im Dunkeln steht
       dieselbe Marke hell auf einer tiefen — die Kachel braucht also keine
       eigene Regel, sondern nur diese Klarstellung, dass sie `--farbe-text`
       folgt und nicht einem festen Wert. */
    .status {
        color: var(--farbe-text);
    }
}

/* **Fokussprunge landen nicht hinter der Kopfleiste.**

   `FocusAsync` rollt sein Ziel buendig an den oberen Rand — seit dem
   UX-Durchgang steht dort aber eine klebende Leiste von 56 px plus Safe Area,
   und die drei Spruenge dieser App (Positionsdialog, Abschlussueberschrift,
   Verlassen-Rueckfrage) landeten dahinter. `scroll-padding-top` am
   Rollbehaelter loest das fuer alle auf einmal, auch fuer Anker und die Suche
   des Browsers (Befund des Code-Reviews, vierte Runde). */
html {
    scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 68px);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    color: var(--farbe-text);
    /* **Ausdruecklich gesetzt.** Ohne diese Zeile bliebe der Seitengrund im
       Dunkelmodus weiss und die helle Schrift stuende darauf unlesbar. */
    background-color: var(--farbe-grund);
    /* 18px Grundschrift: Lesbarkeit bei Sonne auf dem Smartphone. */
    font-size: 112.5%;
}

h1:focus {
    outline: none;
}

a {
    color: var(--farbe-primaer-hell);
}

/* Mindestens 48×48 px Touch-Fläche für Handschuhbedienung.

   `a.aktions-knopf` und `a.pruef-knopf` stehen mit dabei, seit die Navigation
   ein Link ist und kein Knopf: Das Ziel liegt auf einer fremden Origin, und
   dafuer ist `<a>` der Baustein des Browsers. Ohne diesen Zusatz saehe er aus
   wie ein Knopf und waere einen Finger zu klein.

   **Beide Formen, nicht nur die laute.** In der Auskunft auf der Karte traegt
   der Navigationslink `pruef-knopf` — dort erreichte er 48 px nur, solange das
   Raster ihn an der Hoehe des Knopfes daneben streckte. Steht daneben statt
   des Knopfes der Satz „kann gerade nichts gemeldet werden", faellt diese
   Streckung weg, und die Trefferflaeche schrumpfte unter das Mass, das der
   Kommentar am Raster ausdruecklich zusichert (Befund des Code-Reviews dieser
   Stufe). */
button, .zurueck-link, .auftrags-eintrag, .feld input, .feld select, .haupt-link,
a.aktions-knopf, a.pruef-knopf {
    min-width: 48px;
    min-height: 48px;
}

.pruef-knopf, .aktions-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
}

/* **Der handelnde Knopf traegt die Aktionsfarbe** — Flaeche bernstein, Schrift
   dunkel (9,91:1). Helligkeit faellt bei Sonne schneller ins Auge als
   Farbton; das ist der Grund, warum diese Rolle die auffaellige Farbe bekommt
   und nicht der Text. */
.aktions-knopf {
    color: var(--farbe-aktion-text);
    background-color: var(--farbe-aktion);
    border: 2px solid var(--farbe-aktion-rand);
}

/* **Abbrechen ist kein Handeln** und darf nicht so laut sein wie Speichern.
   Vorher trugen beide dieselbe Flaeche — zwei gleich auffaellige Knoepfe
   nebeneinander, von denen einer verwirft. */
.pruef-knopf {
    color: var(--farbe-primaer);
    background-color: var(--farbe-grund);
    border: 2px solid var(--farbe-primaer);
}

    .aktions-knopf:hover:not(:disabled) {
        background-color: var(--farbe-aktion-hell);
    }

    .pruef-knopf:hover:not(:disabled) {
        background-color: var(--farbe-flaeche-zart);
    }

    .pruef-knopf:focus-visible, .aktions-knopf:focus-visible {
        /* Der Fokusrahmen bleibt gruen: Er liegt mit `outline-offset` auf der
           weissen Seite, und dort traegt Bernstein nicht. */
        outline: 3px solid var(--farbe-primaer-hell);
        outline-offset: 2px;
    }

    .pruef-knopf:disabled, .aktions-knopf:disabled {
        opacity: 0.6;
        cursor: default;
    }

.aktions-knopf {
    margin: 0.5rem 0 1rem 0;
    text-decoration: none;
}

.haupt-link {
    margin-right: 0.75rem;
}

.ergebnis {
    font-weight: 600;
}

.erfolg {
    color: var(--farbe-erfolg);
}

.fehlgeschlagen {
    color: var(--farbe-fehler);
}

/* Abgewiesene Rueckmeldungen: deutlich, aber kein Fehler der App — der
   Ausfuehrende hat richtig gehandelt, die Meldung kam nur nicht an. */
.abgewiesen-hinweis {
    padding: 0.6rem 0.8rem;
    border-left: 4px solid var(--farbe-fehler);
    background: var(--farbe-fehler-grund);
    color: var(--farbe-fehler);
}

.zurueck-link {
    display: inline-flex;
    align-items: center;
}

/* --- Kopfleiste und Sprachwahl (UX-Durchgang) ------------------------------
   Die Leiste selbst steht in `MainLayout.razor.css` (sie gehoert dem Layout);
   hier stehen die Bauteile darin, weil sie aus zwei Komponenten kommen — der
   Sprachwahl und dem Kopfbereich der Auftragsansicht. */

/* Der Sprachknopf sitzt rechts, egal ob die Seite einen eigenen Kopf fuellt. */
.sprachwahl-kopf {
    position: relative;
    margin-left: auto;
}

/* **48 px und zwei Buchstaben.** Der Kontrast kommt vom hellen Rand gegen die
   dunkle Leiste, nicht von einer Flaeche: Die Aktionsfarbe steht fuer
   „hier handeln“, und die Sprachwahl handelt nicht — sie stellt ein. */
.sprach-chip {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    min-width: 48px;
    min-height: 48px;
    padding: 0 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    color: inherit;
    background-color: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 0.4rem;
    cursor: pointer;
}

    .sprach-chip[aria-expanded="true"] {
        color: var(--farbe-aktion-text);
        background-color: var(--farbe-aktion);
        border-color: var(--farbe-aktion-rand);
    }

    .sprach-chip:focus-visible {
        outline: 3px solid var(--farbe-leiste-text);
        outline-offset: 2px;
    }

.sprach-pfeil {
    font-size: 0.62rem;
    opacity: 0.85;
}

/* **Der Vorhang schliesst den Aufklapper bei einer Beruehrung daneben.**
   Ein unsichtbarer Knopf ueber der ganzen Seite — kein Klick-Lauscher am
   Dokument, also kein `IJSRuntime` in einer Komponente (AGENTS.md). */
.sprach-vorhang {
    position: fixed;
    inset: 0;
    z-index: 39;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: default;
}

/* Das Blatt haengt unter der Leiste und schiebt nichts weg: Es verschwindet
   sofort wieder, und ein springender Seiteninhalt waere teurer als die
   Ueberlagerung. */
.sprachblatt {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    padding: 0.3rem;
    background-color: var(--farbe-grund);
    border: 1px solid var(--farbe-rand);
    border-radius: 0.4rem;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45);
}

.sprach-eintrag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 0.6rem;
    font-size: 1rem;
    text-align: left;
    color: var(--farbe-text);
    background: none;
    border: 0;
    border-radius: 0.3rem;
    cursor: pointer;
}

    /* Die eingestellte Sprache ist markiert und **bleibt bedienbar**: Ein
       gesperrter Eintrag waere hier eine Sackgasse fuer die Tastatur. */
    .sprach-eintrag[aria-current="true"] {
        font-weight: 700;
        background-color: var(--farbe-flaeche-zart);
    }

    .sprach-eintrag:hover {
        background-color: var(--farbe-grau);
    }

    .sprach-eintrag:focus-visible {
        outline: 3px solid var(--farbe-primaer-hell);
        outline-offset: -3px;
    }

.sprach-kuerzel {
    min-width: 2.1rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--farbe-gedaempft);
}

/* --- Auftragsliste und -detail (SPEC-02) ----------------------------------- */

.auftragsliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .auftragsliste li {
        margin-bottom: 0.5rem;
    }

.auftrags-eintrag {
    display: flex;
    align-items: center;
    /* `wrap`, damit die Zusatzangaben eine eigene Zeile bekommen. Die
       Zeilenhoehe trennt sie; `row-gap` bleibt deshalb klein. */
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--farbe-text);
}

    .auftrags-eintrag .massnahme {
        font-weight: 600;
        flex: 1;
    }

    .auftrags-eintrag .auftrags-nr {
        color: var(--farbe-gedaempft);
    }

    /* Fortschritt, Massnahmenart und Zeitraum — die zweite Zeile.

       `flex-basis: 100%` erzwingt den Umbruch, ohne dass im Markup ein
       leeres Element dafuer stehen muss. */
    .auftrags-eintrag .auftrags-zusatz {
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.125rem 0.5rem;
        font-size: 0.875rem;
        color: var(--farbe-gedaempft);
    }

        /* Den Trenner setzt das Stylesheet, nicht das Markup: Welche Angaben
           vorhanden sind, entscheidet sich je Auftrag, und ein Trennzeichen
           vor einer fehlenden Angabe sieht nach einem Fehler aus.
           `:not(:first-child)` trifft immer die tatsaechlich erste.

           **Ein Rand, kein Zeichen.** Der erste Entwurf nahm
           `content: "·"` — im Zugaenglichkeitsbaum stand damit
           „·Holzaufnahme", ein Vorleser spricht den Punkt mit. `speak: never`
           dagegenzusetzen hilft nicht, die Eigenschaft unterstuetzt fast
           niemand. Ein Rand ist reine Darstellung und taucht im Baum gar
           nicht erst auf. */
        .auftrags-eintrag .auftrags-zusatz > span:not(:first-child) {
            border-left: 1px solid var(--farbe-rand);
            padding-left: 0.5rem;
        }

    /* Debug-Seite: die volle Link-Adresse rutscht in eine eigene Zeile und
       darf umbrechen, sonst sprengt das 43-Zeichen-Token die Kachel auf dem
       Smartphone. */
    .auftrags-eintrag.debug-link {
        flex-wrap: wrap;
    }

    .auftrags-eintrag .debug-link-url {
        flex-basis: 100%;
        font-size: 0.8rem;
        color: var(--farbe-gedaempft);
        word-break: break-all;
    }

.status {
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--status-grund);
}

/* Die acht MVP-Statuswerte (SPEC-05). Die Klasse traegt den Drahtwert
   unveraendert — `entwurf` bleibt bewusst ohne eigene Regel und faellt auf das
   Grau von `.status` zurueck. */
.status-freigegeben {
    background-color: var(--status-freigegeben);
}

.status-in_arbeit {
    background-color: var(--status-in-arbeit);
}

.status-erledigt {
    background-color: var(--status-erledigt);
}

.status-teilweise_erledigt {
    background-color: var(--status-teilweise);
}

.status-nicht_durchfuehrbar {
    background-color: var(--status-nicht-durchfuehrbar);
}

.status-abgenommen {
    background-color: var(--status-abgenommen);
}

.status-storniert {
    background-color: var(--status-storniert);
    text-decoration: line-through;
}

.kostentraeger-tabelle {
    border-collapse: collapse;
    width: 100%;
    max-width: 30rem;
    margin-bottom: 1rem;
}

    .kostentraeger-tabelle th,
    .kostentraeger-tabelle td {
        text-align: left;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--farbe-rand-zart);
    }

.feld {
    display: block;
    margin-bottom: 0.75rem;
    max-width: 30rem;
}

    /* Nur die **erste** Spanne ist die Beschriftungszeile. Die Regel traf
       vorher jede innere Spanne, und das Pflichtzeichen sowie die Einheit
       standen in eigenen Zeilen unter der Beschriftung (gesehen im
       Positionsdialog, SPEC-08). */
    .feld > span {
        display: block;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .feld > span span {
        display: inline;
        font-weight: 400;
    }

    /* Auswahlfelder wie Eingabefelder: Das Rueckmeldeformular rendert
       `ja_nein` und `auswahl` als `select`, und ohne diese Zeile waren sie
       schmal und flach — mit Handschuhen nicht zu treffen (gesehen im
       Positionsdialog, SPEC-08). */
    .feld input, .feld select {
        width: 100%;
        box-sizing: border-box;
        padding: 0 0.75rem;
        font-size: 1.1rem;
        border: 1px solid var(--farbe-rand);
        border-radius: 0.5rem;
        background-color: var(--farbe-grund);
    }

.feld-hinweis, .abschluss-hinweis {
    color: var(--farbe-gedaempft);
}

/* **Dieselbe Sache, dieselbe Farbe.** Diese Zeile sagt unten, was der Zaehler
   oben neben dem Fortschritt sagt — sie stand aber noch in Bernsteinbraun,
   also in der Familie, die seit der Farbumstellung „hier druecken" bedeutet.
   Zwei Farben fuer eine Aussage auf einem Bildschirm, und eine davon die
   Aktionsfarbe (Befund des Code-Reviews, dritte Runde). */
.outbox-hinweis {
    font-weight: 600;
    color: var(--farbe-warten);
}

/* Rueckmeldungen ohne Auftragszuordnung (SPEC-04): unuebertragbar, aber
   lesbar — sie muessen im Feld ablesbar sein, damit sie telefonisch
   weitergegeben werden koennen. Deshalb Blockdarstellung statt einer Zeile. */
.ohne-auftrag {
    margin-top: 2rem;
}

.ereignisliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .ereignisliste li {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        margin-bottom: 0.5rem;
        padding: 0.75rem 1rem;
        border: 1px solid var(--farbe-rand);
        border-left: 4px solid var(--farbe-fehler);
        border-radius: 0.5rem;
    }

    .ereignisliste .ereignis-typ {
        font-weight: 600;
    }

    .ereignisliste .auftrags-nr,
    .ereignisliste .ereignis-zeit {
        color: var(--farbe-gedaempft);
    }

/* --- Vom Blazor-Loader in index.html benötigte Stile ----------------------- */

/* **Das Fehlerband bleibt hell — und braucht deshalb eine eigene
   Schriftfarbe.**

   Es traegt `color-scheme: light only` und einen festen gelben Grund, weil es
   in jeder Darstellung gleich aussehen soll. Eine Schriftfarbe hatte es aber
   nie: Sie kam aus `body`, und die ist seit dem Dunkelmodus dieses Durchgangs
   `#ededed` — gemessen 1,1:1 auf `lightyellow`, der Verweis „Neu laden" 1,4:1.
   `color-scheme` wirkt nicht auf eine geerbte Farbe.

   Ergebnis waere gewesen: Auf einem Geraet im Dunkelmodus ist ausgerechnet das
   Band, das man nach einem unbehandelten Fehler lesen **muss**, ein leerer
   gelber Balken (Befund des Code-Reviews, achte Runde). Beide Farben stehen
   jetzt fest und folgen keiner Marke, weil auch der Grund keiner folgt. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #1a1a1a;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    /* Der Weg aus dem Fehler heraus — dunkel auf Gelb, nicht aus der Marke:
       `--farbe-primaer-hell` dreht im Dunkelmodus auf Hellgrau. */
    #blazor-error-ui .reload {
        color: #1a3a6b;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b02a2a;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ein Fehler ist aufgetreten.";
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--farbe-linie);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--farbe-primaer);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Lädt");
    }

/* --- Positionen und Rückmeldeformular (SPEC-08) ------------------------- */

/* Der Fortschrittszähler steht oben und bleibt sichtbar. Groß und ruhig:
   Er ist die Zahl, auf die der Ausführende zwischen zwei Punkten schaut. */
.fortschritt {
    margin: 0.25rem 0 0.75rem;
    padding: 0.4rem 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--farbe-primaer);
    background-color: var(--farbe-flaeche-zart);
    border-left: 4px solid var(--farbe-primaer);
    border-radius: 0.2rem;
}

/* --- Fortschritt, Bestaetigung, Abschlussknopf (UX-Durchgang) ------------- */

/* Ebene 3 der Rueckmeldung: was noch auf dem Geraet liegt, **oben** neben dem
   Fortschritt statt am Seitenende. */
.fortschritt-wartend { font-weight: 600; color: var(--farbe-warten); }

/* Ebene 1 der Rueckmeldung: die Bestaetigung der letzten Handlung, an den
   Aufgaben und nicht am Seitenende.

   **„Auf dem Geraet gespeichert" ist kein Fehlerton.** Offline ist im Revier
   der Normalfall; die Fehlerfarbe bleibt den Abweisungen vorbehalten, sonst
   stumpft sie ab. */
.bestaetigung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0.25rem 0 0.75rem;
    padding: 0.6rem 0.8rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 0.3rem;
}

.bestaetigung-uebertragen {
    color: var(--farbe-erfolg-dunkel);
    background-color: var(--farbe-erfolg-grund);
    border-left: 6px solid var(--farbe-erfolg);
}

.bestaetigung-geraet {
    color: var(--farbe-warten-dunkel);
    background-color: var(--farbe-warten-hell);
    border-left: 6px solid var(--farbe-warten);
}

/* **Der Knopf, der den Abschluss aufklappt.** Volle Breite und 64 px: Er ist
   das Ende des Arbeitstages und darf nicht gesucht werden — vorher stand die
   ganze Maske offen, jetzt steht hier ein Knopf. */
.abschluss-oeffnen {
    display: block;
    width: 100%;
    min-height: 64px;
    margin: 1.25rem 0 0.5rem;
    padding: 0 1.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--farbe-aktion-text);
    background-color: var(--farbe-aktion);
    border: 2px solid var(--farbe-aktion-rand);
    border-radius: 0.5rem;
    cursor: pointer;
}

    .abschluss-oeffnen:hover:not(:disabled) { background-color: var(--farbe-aktion-hell); }

    .abschluss-oeffnen:focus-visible {
        outline: 3px solid var(--farbe-primaer-hell);
        outline-offset: 2px;
    }

    .abschluss-oeffnen:disabled { opacity: 0.6; cursor: default; }

.positionsliste {
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.position-eintrag { margin-bottom: 0.4rem; }

/* Die ganze Zeile ist der Knopf — ein Symbol am Rand waere mit Handschuhen
   nicht zu treffen. Deshalb hier die Knopf-Vorgaben zuruecknehmen und die
   Flaeche ueber die volle Breite ziehen. */
button.position-zeile {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

button.position-zeile:disabled { cursor: default; opacity: 1; }

/* Zeile und Haken liegen nebeneinander; der farbige Balken und der Rahmen
   gehoeren jetzt der Reihe, damit beide Knoepfe innerhalb desselben Randes
   sitzen (UX-Durchgang). */
.position-reihe {
    display: flex;
    align-items: stretch;
    margin-bottom: 0.4rem;
    border: 1px solid var(--farbe-rand-zart);
    border-radius: 0.3rem;
    background-color: var(--farbe-grund);
    overflow: hidden;
}

/* Die angetippte Aufgabe bleibt erkennbar, auch wenn die Karte darueber steht
   und die Liste lang ist. */
.position-gewaehlt {
    box-shadow: inset 0 0 0 2px var(--farbe-primaer);
}

/* Eine Zeile ist eine Trefferfläche: großzügige Abstände — bedient wird mit
   Handschuhen (AGENTS.md Priorität 3). */
.position-zeile {
    display: flex;
    flex: 1 1 auto;
    gap: 0.75rem;
    align-items: flex-start;
    min-height: 56px;
    padding: 0.6rem 0.75rem;
    border: none;
    background-color: transparent;
}

/* **Der Haken: 56 px, der meistgetroffene Knopf der App.** Abgesetzt vom
   Bildschirmrand, damit ein Streifen mit dem Handschuh nicht meldet. */
.position-haken {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-width: 56px;
    min-height: 56px;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    /* **Gemessen, nicht geschaetzt** (Browserabnahme 2026-09-16): #c2c2c2 auf
       #f6f6f6 ergibt 1,65:1 — weit unter den 3:1, die fuer ein Bedienelement
       gelten, und auf einem Telefon bei Sonne schlicht unsichtbar. Der leere
       Haken muss als Aufforderung lesbar sein; er ist der meistgetroffene Knopf
       der App. Jetzt 4,8:1. */
    color: var(--farbe-haken);
    background-color: var(--farbe-grau);
    border: none;
    border-left: 1px solid var(--farbe-rand);
    cursor: pointer;
}

    /* Gesetzt bleibt er **stehen** und zeigt den Zustand, statt zu
       verschwinden („es soll nichts verschwinden", Stefan 2026-09-16). */
    .position-haken.haken-gesetzt {
        color: var(--farbe-grund);
        background-color: var(--farbe-erfolg);
    }

    .position-haken:focus-visible {
        outline: 3px solid var(--farbe-primaer-hell);
        outline-offset: -3px;
    }

    .position-haken:disabled {
        cursor: default;
        opacity: 0.45;
    }

/* **Erledigt ist auf einen Blick von offen zu unterscheiden** (SPEC-08 §1) —
   und zwar nicht allein durch Farbe: Die Zeile trägt den Zustand auch als
   Wort, und der linke Balken ist zusätzlich unterschiedlich breit. Wer bei
   Sonne auf ein Telefon schaut, sieht Kontrast besser als Farbton. */
.position-erledigt {
    border-left: 6px solid var(--farbe-erfolg);
    background-color: var(--farbe-erledigt-grund);
}

.position-nicht_erledigt {
    border-left: 6px solid var(--farbe-fehler);
    background-color: var(--farbe-fehler-grund);
}

.position-offen {
    border-left: 6px solid var(--farbe-rand-stark);
}

.position-nr {
    min-width: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--farbe-primaer);
}

.position-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.position-bezeichnung { font-weight: 600; font-size: 1.05rem; }

/* **1rem statt 0.9rem** (UX-Durchgang): Hier steht der Zustand der Aufgabe —
   erledigt, wartet auf Uebertragung, die Begruendung. 16 px sind dafuer zu
   klein, wenn der Leser 50+ ist und bei Sonne auf ein Telefon schaut. */
.position-ergebnis { font-size: 1rem; }
.position-zeit { color: var(--farbe-gedaempft); }
.position-begruendung, .position-bemerkung { font-size: 1rem; color: var(--farbe-gedaempft); }

/* Ebene 2 der Rueckmeldung: der Uebertragungszustand **dieser** Aufgabe.
   Nicht allein ueber Farbe — der Zustand steht als Wort daneben. */
.position-uebertragung { font-weight: 600; }
.position-uebertragung.wartet { color: var(--farbe-warten); }
.position-uebertragung.draussen { color: var(--farbe-erfolg); }

/* Der Dialog oeffnet unter der Zeile und gehoert sichtbar zu ihr: eingerueckt,
   mit demselben Rahmen, ohne Ueberlagerung. Keine Modalitaet — ein Fokusfang
   ist im Bestand das Letzte, was jemand braucht. */
.positionsdialog {
    margin: 0 0 0.75rem 1rem;
    padding: 0.75rem;
    border: 1px solid var(--farbe-rand-zart);
    border-top: none;
    border-radius: 0 0 0.3rem 0.3rem;
    background-color: var(--farbe-flaeche);
}

/* --- Daten zur Aufgabe und Navigation --------------------------------------
   Die hinterlegten Sachdaten stehen vor der Rueckmeldefrage: Wer einen Marker
   antippt, will zuerst wissen, was hier liegt. Ruhig gesetzt, damit die Frage
   darunter der laute Teil bleibt. */
.positionsinfo {
    margin: 0 0 0.75rem;
}

.positionsdaten {
    margin: 0 0 0.5rem;
    padding: 0;
}

/* Beschriftung ueber dem Wert und nicht daneben: Auf einem Telefon im
   Hochformat bricht eine zweispaltige Liste bei langen Beschriftungen um, und
   dann steht der Wert unter der falschen Zeile. */
.positionsdaten-zeile {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--farbe-rand-zart);
}

.positionsdaten-zeile dt {
    font-size: 0.9rem;
    color: var(--farbe-gedaempft);
}

.positionsdaten-zeile dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Die Koordinaten sind zum Vorlesen und Vergleichen da — Ziffern in gleicher
   Breite lassen sich dabei nicht verwechseln. */
.positions-koordinaten {
    margin: 0.5rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
    color: var(--farbe-gedaempft);
    /* Auf einem schmalen Geraet steht die Zeile sonst ueber den Rand hinaus:
       Ziffern gleicher Breite brauchen Platz, und zwei Koordinaten mit
       Himmelsrichtung fuellen auf 390 px bereits die Zeile (im Browser
       nachgemessen). Umbrechen ist besser als abschneiden — die Zahl soll
       vorgelesen werden koennen. */
    overflow-wrap: anywhere;
}

/* --- Route ueber die offenen Aufgaben --------------------------------------
   Sie steht ueber der Liste, in beiden Ansichten. Abgesetzt, weil sie die
   Anfahrt betrifft und nicht die Rueckmeldung. */
.routenblock {
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid var(--farbe-rand-zart);
    border-radius: 0.3rem;
    background-color: var(--farbe-flaeche);
}

.routenblock h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

/* Untereinander und nicht nebeneinander: Bei mehreren Etappen traegt jeder
   Knopf eine Spanne wie „Aufgaben 11–18", und die bricht in einer Reihe
   unleserlich um. */
.routenknoepfe {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.ergebniswahl {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--farbe-rand-zart);
    border-radius: 0.3rem;
}

.ergebniswahl legend { padding: 0 0.3rem; font-size: 0.95rem; }

/* Jede Wahl eine eigene Trefferflaeche, 48 px hoch, und das Kaestchen gross
   genug fuer einen Handschuh. */
.ergebnis-wahl {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    font-size: 1.05rem;
}

.ergebnis-wahl input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
}

/* Einheit und Pflichtzeichen am Feld des Rückmeldeformulars. */
.feld-einheit { color: var(--farbe-gedaempft); font-weight: 400; }
.pflicht { color: var(--farbe-fehler); }

/* --- Kartenansicht (SPEC-09) ----------------------------------------------
   Der Umschalter zwischen Liste und Karte. Zwei Knoepfe nebeneinander und
   kein Auswahlfeld: Ein Auswahlfeld braucht zwei Antippen, und beide Ansichten
   sind gleich wichtig. Die Trefferflaeche ist die uebliche — 48 px gelten hier
   wie ueberall (AGENTS.md Prioritaet 3). */
.ansicht-umschalter {
    display: flex;
    gap: 0;
    margin: 0.5rem 0 1rem;
}

.ansicht-knopf {
    flex: 1 1 0;
    min-height: 48px;
    padding: 0 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--farbe-primaer);
    background-color: var(--farbe-grund);
    border: 2px solid var(--farbe-primaer);
    cursor: pointer;
}

.ansicht-knopf:first-child {
    border-radius: 0.5rem 0 0 0.5rem;
}

.ansicht-knopf:last-child {
    /* Die gemeinsame Kante nur einmal zeichnen — sonst steht sie doppelt so
       dick wie die aeusseren. */
    border-left-width: 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* **Die gewaehlte Ansicht ist nicht nur farbig markiert.** Bei Sonne auf einem
   Telefon traegt der Kontrast, nicht der Farbton; `aria-pressed` sagt es
   zusaetzlich der Vorlesehilfe. */
/* **Der aktive Umschalter traegt die Aktionsfarbe.** Er ist ein Bedienelement
   in gedruecktem Zustand, kein Text — dieselbe Rolle wie ein Knopf, also
   dieselbe Farbe. Schrift dunkel (9,91:1); der Rand nimmt den dunkleren
   Bernsteinton, damit die gemeinsame Kante zum inaktiven Knopf sichtbar
   bleibt. */
.ansicht-aktiv {
    color: var(--farbe-aktion-text);
    background-color: var(--farbe-aktion);
    border-color: var(--farbe-aktion-rand);
}

.ansicht-knopf:focus-visible {
    outline: 3px solid var(--farbe-primaer-hell);
    outline-offset: 2px;
}

/* Die Kartenflaeche. Hoehe in `vh`, weil die Karte im Hochformat eines
   Telefons gelesen wird und eine feste Pixelhoehe dort entweder verschwindet
   oder den Rest der Seite verdraengt. Der Rahmen macht den Rand des
   Ausschnitts sichtbar. */
/* Der Rahmen traegt die Auskunft, die auf der Karte liegt. Den Aussenabstand
   hat er von der Kartenflaeche uebernommen: Er umschliesst sie, und zwei
   Abstaende uebereinander ergaeben eine Luecke mitten im Kasten. */
.kartenrahmen {
    position: relative;
    margin: 0 0 1rem;
}

.kartenflaeche {
    width: 100%;
    height: 60vh;
    min-height: 320px;
    border: 1px solid var(--farbe-rand-zart);
    border-radius: 0.3rem;
    background-color: var(--farbe-grau);
}

/* --- Die Auskunft auf der Karte -------------------------------------------
   **Sie ist eine Leiste, kein Fenster.** Was sie einnimmt, nimmt sie den
   Markern weg — und wer eine Aufgabe sucht, sucht sie im Bild. Deshalb drei
   gedraengte Zeilen: wer und wie weit, was hinterlegt ist, was zu tun ist.

   Sie liegt **unten** und nicht ueber der Mitte: Der angetippte Marker bleibt
   sichtbar, und der Daumen erreicht die Knoepfe, ohne das Geraet umzugreifen.

   `max-height` mit eigenem Rollbereich, weil die Sachdaten beliebig viele sein
   koennen — ohne das waechst der Kasten ueber die Karte hinaus. */
.kartenoverlay {
    position: absolute;
    right: 0.5rem;
    /* **Oberhalb der Namensnennung, und das ist keine Geschmacksfrage.**
       MapLibre setzt „© OpenMapTiles · © OpenStreetMap-Mitwirkende" und die
       Massstabsleiste an den unteren Kartenrand. Mit `bottom: 0.5rem` lag die
       Auskunft darueber — die Nennung war verdeckt, solange sie offen stand
       (im Browser gemessen: Auskunft bis 845 px, Nennung von 833 bis 853 px).
       Die Nennung ist eine Auflage der ODbL und der CC-BY des
       OpenMapTiles-Schemas (SPEC-09 §5); sie zu verdecken ist dasselbe wie sie
       wegzulassen. 2,4 rem sind bei 18 px Wurzelschrift 43 px und lassen beide
       Leisten frei. */
    bottom: 2.4rem;
    left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: calc(100% - 3.4rem);
    overflow-y: auto;
    padding: 0.6rem 0.7rem 0.7rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 0.5rem;
    /* Undurchsichtig und nicht halbtransparent: Unter dem Kasten liegt eine
       Karte mit Linien und Beschriftungen, und Text auf Text ist bei Sonne
       nicht zu lesen (AGENTS.md Prioritaet 3). */
    background-color: var(--farbe-grund);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}

/* Nummer, Name, Stand und das Kreuz in **einer** Zeile. */
.kartenoverlay-kopf {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* Dieselbe Nummer wie am Marker und in der Liste — sie ist der Bezug zwischen
   den drei Ansichten, und deshalb traegt sie hier dieselbe runde Form. */
.kartenoverlay-nr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--farbe-primaer);
    color: var(--farbe-grund);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kartenoverlay-titel {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Der Stand als kleine Pille. **Wort und Farbe**, nie Farbe allein — dieselbe
   Regel wie an der Zeile in der Liste. */
.kartenoverlay-stand {
    flex: 0 0 auto;
    padding: 0.1rem 0.45rem;
    border: 1px solid currentcolor;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kartenoverlay-stand.stand-erledigt { color: var(--farbe-erfolg); }
.kartenoverlay-stand.stand-nicht_erledigt { color: var(--farbe-fehler); }
.kartenoverlay-stand.stand-offen { color: var(--farbe-gedaempft); }

/* Das Kreuz darf klein aussehen; die Trefferflaeche darf es nicht sein. Der
   negative Aussenabstand holt die 44 px wieder herein, die es optisch nicht
   braucht — ohne ihn schoebe der Knopf die Kopfzeile auf Knopfhoehe. */
.kartenoverlay-schliessen {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin: -0.5rem -0.35rem -0.5rem 0;
    border: none;
    border-radius: 0.3rem;
    background-color: transparent;
    color: var(--farbe-gedaempft);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.kartenoverlay-schliessen:hover {
    background-color: var(--farbe-flaeche-zart);
    color: var(--farbe-text);
}

/* --- Die gedraengte Form der Positionsinfo --------------------------------
   Derselbe Inhalt wie im Dialog, auf weniger Platz: Beschriftungen klein und
   versal ueber dem Wert, die Paare nebeneinander statt untereinander. Ab
   7 rem je Spalte bricht das Raster um — auf einem schmalen Geraet steht dann
   wieder eines unter dem anderen, statt die Werte zu zerquetschen. */
.positionsinfo-kompakt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.positionsinfo-kompakt .positionsdaten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.1rem 0.75rem;
    margin: 0;
}

.positionsinfo-kompakt .positionsdaten-zeile {
    padding: 0;
    border-bottom: none;
}

.positionsinfo-kompakt .positionsdaten-zeile dt {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--farbe-gedaempft);
}

.positionsinfo-kompakt .positionsdaten-zeile dd {
    font-size: 0.95rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.positionsinfo-kompakt .positions-koordinaten {
    margin: 0;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.positionsinfo-kompakt .feld-hinweis {
    margin: 0;
    font-size: 0.85rem;
}

/* Die beiden Knoepfe nebeneinander — zwei volle Zeilen uebereinander waeren
   fast die halbe Auskunft. 48 px hoch bleiben sie beide (AGENTS.md
   Prioritaet 3); erst wenn nicht einmal zwei schmale Spalten passen, bricht
   die zweite um.

   **6,5 rem und nicht 8,5:** Die Wurzelschrift dieser App ist 18 px, nicht 16
   (im Browser nachgemessen). Mit 8,5 rem verlangte eine Spalte 153 px, zwei
   also 314 — drei mehr, als die Auskunft auf einem 390-px-Geraet breit ist,
   und die Knoepfe standen wieder untereinander. */
.positionsinfo-kompakt .positionsinfo-knoepfe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.5rem;
}

.positionsinfo-kompakt .aktions-knopf,
.positionsinfo-kompakt .pruef-knopf {
    width: 100%;
    /* **Rand und Innenabstand zaehlen mit** — wie an den Eingabefeldern des
       Rueckmeldeformulars und aus demselben Grund: Ohne die Zeile rechnet der
       Browser `width: 100%` als Inhaltsbreite, und 2 × 10,8 px Innenabstand
       plus 2 × 2 px Rand standen rechts ueber den Kasten hinaus (im Browser
       gemessen: Knopf bis 375 px, Auskunft bis 363 px). */
    box-sizing: border-box;
    margin: 0;
    padding: 0 0.6rem;
    font-size: 0.95rem;
    /* Der Text darf umbrechen, statt den Knopf zu sprengen: „Google Maps" auf
       einem schmalen Geraet ist zweizeilig besser als abgeschnitten. */
    text-align: center;
    line-height: 1.15;
}

/* **Ein Knopf, der ein Link ist, traegt keine Unterstreichung.** `.aktions-knopf`
   nimmt sie seit jeher weg, `.pruef-knopf` gab es bis hierher nur als `<button>`
   — und der Navigationsknopf in der gedraengten Form ist beides zugleich
   (im Browser gesehen: „Google Maps" unterstrichen wie ein Fliesstextlink). */
a.pruef-knopf {
    text-decoration: none;
}

/* --- Lizenzseite (SPEC-09 S9) ----------------------------------------------
   Die Namensnennung steht oben und traegt sich selbst: Sie ist die Auflage,
   wegen der es die Seite gibt, und nicht eine Fussnote unter dem Rest. */
.lizenz-nennung {
    margin: 0.5rem 0 1.5rem;
    padding: 0.6rem 0.9rem;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: var(--farbe-flaeche-zart);
    border-left: 4px solid var(--farbe-primaer);
    border-radius: 0.2rem;
}

.lizenz-liste {
    margin: 0.4rem 0 1.2rem;
    padding-left: 1.4rem;
}

    .lizenz-liste li {
        margin-bottom: 0.4rem;
    }

/* Der Weg zur Lizenzseite, unter der Karte. Zurueckhaltend, aber eine
   Trefferflaeche: Auch dieser Link wird mit Handschuhen getroffen. */
.lizenz-verweis {
    margin: 0.25rem 0 1rem;
}

    .lizenz-verweis a {
        display: inline-block;
        min-height: 48px;
        line-height: 48px;
    }

/* --- Kopfbereich der Auftragsansicht (UX-Durchgang) ------------------------
   Rueckweg, Auftragsnummer, Fortschritt und Uebertragungszustand in **einer**
   Zeile von 56 px. Sie sitzt in der klebenden Leiste des Layouts und bleibt
   damit an jeder Stelle der Seite erreichbar — bis hierher stand der Rueckweg
   allein in Zeile 1 und war nach dem dritten Bildschirm unerreichbar, und der
   Fortschrittszaehler war es auch, obwohl der Kommentar an ihm „bleibt
   sichtbar“ behauptete. */

/* `min-width: 0` ist hier kein Schmuck: Ohne die Zeile weigert sich ein
   Flex-Kind zu schrumpfen, und die Auftragsnummer draengt den
   Uebertragungsknopf aus der Leiste. */
.kopf-mitte {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
}

.kopf-nr {
    font-size: 0.78rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kopf-zaehler {
    font-size: 1.02rem;
    font-weight: 700;
}

/* **Der Uebertragungsknopf ist Anzeige und Ausloeser in einem.** Die Farbe
   sagt den Zustand, die Zahl die Menge, das Antippen erzwingt einen Versuch.
   Bis hierher wurde nur beim Seitenaufruf und beim `online`-Ereignis
   uebertragen: Wer auf dem Forstweg dreissig Sekunden Empfang hatte, konnte
   nichts erzwingen. */
.uebertragung-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    min-width: 48px;
    min-height: 48px;
    padding: 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--farbe-text);
    background-color: var(--uebertragung-wartet);
    border: 2px solid var(--uebertragung-wartet-rand);
    border-radius: 0.4rem;
    cursor: pointer;
}

    /* Kein Netz ist kein Fehler — grau und ruhig, nicht rot. Offline ist im
       Revier der Normalfall (AGENTS.md Prioritaet 2). */
    .uebertragung-knopf[data-zustand="offline"] {
        background-color: var(--uebertragung-offline);
        border-color: var(--uebertragung-offline-rand);
    }

    /* **Auch hier die feste Schriftfarbe.** Der laufende Zustand faerbt die
       Flaeche bernstein; die Schrift kam aber weiter aus `--farbe-text`, und
       die dreht im Dunkelmodus auf Hell — gemessen 2,0:1. Genau der Fall, fuer
       den `--farbe-aktion-text` zwanzig Zeilen weiter oben eingefuehrt wurde,
       nur an einer Stelle uebersehen. Und er trifft den Moment, in dem die
       Zahl zaehlt: Nachtschicht, Tipp auf „Jetzt uebertragen" (Befund des
       Code-Reviews, sechste Runde). */
    .uebertragung-knopf[data-zustand="laeuft"] {
        color: var(--farbe-aktion-text);
        background-color: var(--farbe-aktion);
        border-color: var(--farbe-aktion-rand);
    }

    .uebertragung-knopf[data-zustand="leer"] {
        background-color: var(--uebertragung-leer);
        border-color: var(--uebertragung-leer-rand);
    }

    .uebertragung-knopf:focus-visible {
        outline: 3px solid var(--farbe-leiste-text);
        outline-offset: 2px;
    }

    /* **Gesperrt muss man sehen.** Jede Farbe dieses Knopfes ist gesetzt, also
       greift die Vorgabe-Abblendung des Browsers nicht: Waehrend `sendet`
       laeuft — und das kann auf einer schlechten Leitung eine ganze Rundreise
       dauern — behielt er Farbe und Beschriftung eines bedienbaren Knopfes,
       und ein Tipp tat nichts. Das `disabled` hat das Verhalten geradegezogen,
       nicht das Aussehen (Befund des Code-Reviews, fuenfte Runde). */
    .uebertragung-knopf:disabled {
        cursor: default;
        opacity: 0.55;
    }

/* Ein Haarstrich Fortschritt unter der Leiste: Die Zahl daneben verlangt
   Rechnen, ein Balken nicht — und er kostet 3 px statt einer Zeile. */
.kopf-balken {
    height: 3px;
    background-color: var(--farbe-linie);
}

    .kopf-balken > span {
        display: block;
        height: 100%;
        background-color: var(--farbe-aktion);
    }

/* --- Hinweise gebuendelt (UX-Durchgang) ------------------------------------
   Bis zu fuenf rote Kaesten standen uebereinander (`nicht_zustellbar`,
   `abgewiesen`, `link_ungueltig`, `abgenommen`, `abgelaufen`) und schoben die
   erste Aufgabe unter den Bildschirmrand; sie schliessen sich nicht alle
   gegenseitig aus. Es faellt nichts weg — sie stehen jetzt als Liste in
   **einem** Kasten mit gezaehlter Ueberschrift. */
.hinweiskasten {
    margin: 0 0 0.8rem;
    padding: 0.6rem 0.8rem;
    border-left: 4px solid var(--farbe-fehler);
    background: var(--farbe-fehler-grund);
}

    .hinweiskasten > strong {
        display: block;
        margin-bottom: 0.25rem;
        color: var(--farbe-fehler);
    }

    .hinweiskasten ul {
        margin: 0;
        padding-left: 1.2rem;
        color: var(--farbe-fehler);
    }

    .hinweiskasten li {
        margin-bottom: 0.2rem;
    }

/* Massnahmenart, Status und Wartendes in einer Zeile statt in drei Absaetzen —
   der Platz, den der Sprachknopf in der Leiste braucht. */
.metazeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    margin: 0 0 0.8rem;
    color: var(--farbe-gedaempft);
}

/* --- Klebende Knopfleiste am Dialog (UX-Durchgang) -------------------------
   Eingabefeld und „Speichern“ lagen einen halben Bildschirm auseinander; auf
   einem Telefon landete der Knopf damit ausserhalb der Daumenzone. Sticky und
   nicht fixed: Die Leiste gehoert dem Dialog und verschwindet mit ihm. */
.dialogknoepfe {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0 calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
    background-color: var(--farbe-grund);
    box-shadow: 0 -8px 12px -10px rgba(0, 0, 0, 0.45);
}

    /* Der Positionsdialog hat eine eigene Flaeche; ohne diese Zeile schiene
       Weiss durch die graue Maske. */
    .positionsdialog .dialogknoepfe {
        background-color: var(--farbe-flaeche);
    }

    /* Die Knoepfe darin tragen den Abstand der Leiste, nicht ihren eigenen. */
    .dialogknoepfe .aktions-knopf {
        margin: 0;
    }

    /* **Im Hinweiskasten ist es keine Leiste, sondern nur zwei Knoepfe.**
       Die Verlassen-Rueckfrage nutzt dieselbe Anordnung; mit der klebenden
       Flaeche sah sie aus wie ein verrutschtes weisses Feld im roten Kasten
       (am Bildschirm gesehen, Browserprobe). */
    .hinweiskasten .dialogknoepfe {
        position: static;
        padding: 0;
        background: none;
        box-shadow: none;
    }

/* --- Rueckgaengig (UX-Durchgang) -------------------------------------------
   Der Haken meldet mit einem einzigen Tipp, und ein Fehlgriff mit Handschuh
   erzeugt sofort ein Ereignis. Korrigieren war schon moeglich — die Zeile
   erneut antippen — aber es stand nirgends. Der Verweis steht deshalb **in**
   der Bestaetigung, wo der Blick nach dem Tipp ohnehin hinfaellt.

   Append-only bleibt unangetastet: Die Korrektur ist ein neues Ereignis, kein
   `UPDATE`. Das Wort beschreibt, was der Ausfuehrende will, nicht, was die
   Datenbank tut. */
/* **48 px, nicht 44.** Die Klasse schlaegt den Typselektor `button` weiter
   oben, und 44 waeren die Untergrenze fuer Barrierefreiheit — nicht das Mass
   fuer einen Handschuh (AGENTS.md Prioritaet 3). Ausgerechnet dieser Knopf ist
   der Korrekturweg nach einem Fehlgriff mit Handschuh (Befund des
   Code-Reviews, sechste Runde). */
.rueckgaengig {
    min-height: 48px;
    padding: 0 0.2rem;
    font: inherit;
    font-weight: 700;
    color: var(--farbe-primaer);
    background: none;
    border: 0;
    border-bottom: 2px solid currentColor;
    cursor: pointer;
}

    .rueckgaengig:focus-visible {
        outline: 3px solid var(--farbe-primaer-hell);
        outline-offset: 2px;
    }

/* --- Auf den Home-Bildschirm legen -----------------------------------------
   Das Band haengt unter der Kopfleiste und liegt im Fluss. Warum nicht als
   schwebender Kasten unten, steht an `Komponenten/Installationshinweis.razor`:
   Dort klebt die Knopfleiste der Dialoge mit „Speichern" darin, und auf der
   Kartenseite die Namensnennung von OpenStreetMap. Beides zu verdecken waere
   teurer als der Platz, den das Band im Fluss kostet.

   Die Flaeche ist `--farbe-flaeche-zart` und nicht die Aktionsfarbe: Das Band
   fragt, es fordert nicht. Bernstein traegt in dieser App der Knopf darin. */
.installband {
    border-bottom: 1px solid var(--farbe-rand-zart);
    background-color: var(--farbe-flaeche-zart);
}

/* Dieselbe Breite und dieselben Seitenpolster wie `.inhalt` und
   `.kopfleiste-innen`, sonst steht das Band auf einer eigenen Spur. `max()`
   an den Seiten wegen der Ecken im Querformat. */
.installband-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    max-width: 40rem;
    margin: 0 auto;
    padding-top: 0.7rem;
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    padding-bottom: 0.7rem;
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
}

    /* Das Icon zeigt, worum es geht, bevor der Satz gelesen ist: Es ist genau
       das Bild, das nachher auf dem Home-Bildschirm steht. */
    .installband-icon {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 0.5rem;
    }

    /* `min-width: 0` und `flex: 1`, damit der Satz umbricht statt die Knoepfe
       aus der Zeile zu schieben. Ohne die erste Zeile waechst ein Flex-Kind
       ueber seinen Inhalt hinaus und bricht nicht um. */
    .installband-text {
        display: flex;
        flex: 1 1 12rem;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }

    .installband-text span {
        font-size: 0.95rem;
        color: var(--farbe-gedaempft);
    }

    /* Auf einem schmalen Telefon rutschen die Knoepfe unter den Text und
       nehmen dort die ganze Breite — zwei halbe Knoepfe nebeneinander sind mit
       Handschuh schlechter zu treffen als zwei volle untereinander. */
    .installband-knoepfe {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

        /* Die Knoepfe tragen hier den Abstand des Bandes und nicht ihren
           eigenen: `.aktions-knopf` bringt `margin: 0.5rem 0 1rem` mit, und
           damit saesse das Band schief. */
        .installband-knoepfe .aktions-knopf,
        .installband-knoepfe .pruef-knopf {
            margin: 0;
            padding: 0 1rem;
            font-size: 1rem;
        }

/* Die Anleitung bekommt die volle Breite unter den Knoepfen. */
.installband-anleitung {
    flex: 1 1 100%;
    margin-top: 0.2rem;
}

    .installband-anleitung ol {
        margin: 0.3rem 0 0;
        padding-left: 1.3rem;
    }

    .installband-anleitung li {
        margin-bottom: 0.3rem;
    }

    .installband-anleitung p {
        margin: 0.3rem 0 0;
    }

/* Das Teilen-Symbol im Fliesstext. `1em` und `currentColor`, damit es mit der
   Schrift waechst und mit ihr die Farbe wechselt — im Dunkelmodus dreht
   `--farbe-text` um, ein fest gesetztes Schwarz waere dort unsichtbar.
   `vertical-align` hebt es auf die Mittellinie der Zeile. */
.teilen-symbol {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}