/*
  Grundstil dumpro-KC (Ticket P009.4/P009.5).

  Diese Datei ist **kein** Vorlagenstand mehr und setzt kein CSS-Rahmenwerk voraus.
  Bootstrap ist mit P009.5 abgelöst; die Begründung steht in ADR-103.

  Quellen für jede Regel:
  - docs/PLAN.md 10.3 (Tablet und PWA): Touchfläche mindestens 44 CSS-Pixel, sichtbarer
    Fokus, kein Hover als einziger Zugang, Status nie allein über Farbe, beschriftete
    Fehler, numerische Eingabehilfen.
  - docs/PLAN.md 10.5 (dumpro CI): Farben, Schriften, Eckenradius und Touchmaß
    ausschließlich aus css/tokens.css; Primärgrün nur für die eine primäre Aktion je
    Ansicht; Zahlen tabellarisch; Einheiten immer sichtbar; kein Dunkelmodus in V1.

  Klassennamen sind deutsch und mit `dp-` vorangestellt, wie die Bezeichner im übrigen
  Quellstand. Jede Farbe kommt aus einem Token; in dieser Datei steht kein Farbwert.
*/

/* ------------------------------------------------------------------ Grundlage */

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

html {
    /* Skalierung 100–200 % (10.3): keine feste Pixelgröße am Wurzelelement, damit die
       Schriftgröße des Systems durchschlägt. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--dp-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--dp-gray-dark);
    background-color: var(--dp-white);
    /* Dunkelmodus ist nach 10.5 in V1 nicht vorgesehen; ohne diese Angabe stellen
       iPadOS und Edge Formularelemente von sich aus dunkel dar. */
    color-scheme: light only;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dp-font-heading);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.6em 0;
    color: var(--dp-gray-dark);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

p {
    margin: 0 0 1em 0;
}

a {
    color: var(--dp-green-dark);
}

code, kbd, samp, pre {
    font-family: var(--dp-font-mono);
}

/* Zahlen tabellarisch (10.5): Maße und Faktoren stehen untereinander und müssen
   stellenweise vergleichbar sein. */
table,
output,
.dp-zahl {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Fokus */

/* 10.3 verlangt einen sichtbaren Fokus. Der Vorlagenstand des SDK nahm ihn der
   Überschrift mit `h1:focus { outline: none }` weg — und genau diese Überschrift bekommt
   nach jeder Navigation den Fokus (`FocusOnNavigate` in App.razor). Die Umrandung wird
   deshalb nicht entfernt, sondern nur auf die Tastaturbedienung beschränkt
   (`:focus-visible`); beim Setzen durch das Programm erscheint sie nicht. */
h1:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--dp-green-dark);
    outline-offset: 2px;
}

/* Sprungmarke zum Inhalt. Sichtbar erst im Tastaturfokus, damit die Navigation nicht
   bei jedem Seitenaufruf durchlaufen werden muss (10.3, Tastaturbedienung). */
.dp-sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    background-color: var(--dp-white);
    color: var(--dp-green-dark);
    border: 2px solid var(--dp-green-dark);
    border-radius: var(--dp-radius);
}

.dp-sprungmarke:focus {
    left: 0.5rem;
    top: 0.5rem;
}

/* ------------------------------------------------------------------ Grundlayout */

.dp-seite {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dp-navigationsspalte {
    background-color: var(--dp-slate);
    /* Safe-Areas auf dem iPad (10.3); index.html setzt dafür viewport-fit=cover. */
    padding-left: env(safe-area-inset-left);
}

.dp-hauptspalte {
    flex: 1;
    min-width: 0;
}

.dp-kopfzeile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-height: var(--dp-touch-min);
    padding: 0.5rem 1rem;
    padding-right: max(1rem, env(safe-area-inset-right));
    background-color: var(--dp-gray-light);
    border-bottom: 1px solid var(--dp-border);
}

/* Geräteauskunft in der Kopfzeile (P013.1): Verbindung, Speicher, später Sync (P014).
   Sie darf umbrechen statt abzuschneiden — auf dem schmalen Tablet stehen die Zustände
   sonst außerhalb des Bildes, und ein unsichtbarer Zustand ist keiner. */
.dp-geraetezeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.dp-inhalt {
    padding: 1.25rem 1rem;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

@media (min-width: 641px) {
    .dp-seite {
        flex-direction: row;
    }

    .dp-navigationsspalte {
        width: 260px;
        flex: 0 0 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }

    .dp-kopfzeile {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .dp-inhalt {
        padding: 1.5rem 2rem;
    }
}

/* ------------------------------------------------------------------ Navigation */

.dp-markenzeile {
    display: flex;
    align-items: stretch;
    background-color: var(--dp-green-dark);
    padding-top: env(safe-area-inset-top);
}

.dp-marke {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 3.5rem;
    padding: 0 1rem;
    font-family: var(--dp-font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dp-white);
    text-decoration: none;
    background-color: var(--dp-green-dark);
}

/* Platzhalter für das Logo aus 10.5. Die Illustrator-Datei liegt bei Konrad; bis der
   SVG-Export vorliegt, bleibt die Stelle sichtbar frei und trägt nur den Wortlaut. */
.dp-marke-logo {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.6rem;
    border: 1px dashed var(--dp-white);
    border-radius: var(--dp-radius);
    opacity: 0.6;
}

.dp-navigationsschalter {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dp-touch-min);
    min-height: var(--dp-touch-min);
    margin: 0.5rem 1rem 0.5rem 0;
    color: var(--dp-white);
    background-color: transparent;
    border: 1px solid var(--dp-white);
    border-radius: var(--dp-radius);
    font-size: 1.25rem;
    cursor: pointer;
}

.dp-navigation {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
}

.dp-navigation-gruppe {
    margin-top: 1rem;
    padding: 0 0.75rem 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dp-border);
}

.dp-navigation a {
    display: flex;
    align-items: center;
    min-height: var(--dp-touch-min);
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.25rem;
    border-radius: var(--dp-radius);
    color: var(--dp-white);
    text-decoration: none;
}

.dp-navigation a:hover {
    background-color: var(--dp-green-dark);
    text-decoration: underline;
}

/* Der aktive Eintrag trägt nach 10.5 Primärgrün. Er ist zusätzlich fett und über
   `aria-current="page"` ausgezeichnet, damit die Auswahl nicht allein an der Farbe
   hängt (10.3). */
.dp-navigation a.active {
    background-color: var(--dp-green);
    font-weight: 600;
}

/* Bis zur Rollenauswertung aus P006 sind die verwaltenden Bereiche (10.1) sichtbar,
   aber als noch nicht rollengeprüft gekennzeichnet. */
.dp-navigation-hinweis {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--dp-border);
}

@media (max-width: 640.98px) {
    .dp-navigation-eingeklappt {
        display: none;
    }
}

@media (min-width: 641px) {
    .dp-navigationsschalter {
        display: none;
    }
}

/* ------------------------------------------------------------------ Schaltflächen */

.dp-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-height: var(--dp-touch-min);
    min-width: var(--dp-touch-min);
    padding: 0.5rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--dp-gray-dark);
    background-color: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    cursor: pointer;
}

.dp-knopf:hover {
    background-color: var(--dp-gray-light);
}

/* Primärgrün nur für die eine primäre Aktion je Ansicht (10.5). Weißer Text auf Grün:
   für Fließtext auf Grün ist nach 10.5 stets Weiß zu verwenden. */
.dp-knopf-primaer {
    color: var(--dp-white);
    background-color: var(--dp-green);
    border-color: var(--dp-green);
}

.dp-knopf-primaer:hover,
.dp-knopf-primaer:active {
    background-color: var(--dp-green-dark);
    border-color: var(--dp-green-dark);
}

.dp-knopf:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Nebenaktion in der Kopfzeile (P013.1). Schmaler und leiser als eine Hauptaktion, aber
   mit unveränderter Mindest-Touchfläche: 10.3 gibt die Fläche vor, nicht die Betonung. */
.dp-knopf-leise {
    padding: 0.25rem 0.75rem;
    font-weight: 400;
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------ Formulare */

.dp-feld {
    display: block;
    margin-bottom: 1rem;
    max-width: 32rem;
}

.dp-feld-beschriftung {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--dp-gray-dark);
}

/* Die Einheit ist nach 10.5 immer sichtbar. Sie steht neben dem Eingabefeld und nicht
   im Platzhalter — ein Platzhalter verschwindet beim Tippen. */
.dp-feld-eingabezeile {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.dp-feld input,
.dp-feld select,
.dp-feld textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--dp-touch-min);
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--dp-gray-dark);
    background-color: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
}

.dp-feld input[inputmode="decimal"],
.dp-feld input[inputmode="numeric"] {
    font-variant-numeric: tabular-nums;
}

.dp-feld-einheit {
    display: inline-flex;
    align-items: center;
    padding: 0 0.6rem;
    font-weight: 600;
    color: var(--dp-gray);
    background-color: var(--dp-gray-light);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
}

.dp-feld-hilfe {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--dp-gray);
}

/* Beschrifteter Fehler (10.3): Rahmenfarbe **und** Text **und** Symbol, und das Feld
   verweist über aria-describedby auf diesen Text. */
.dp-feld-fehler {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    margin-top: 0.25rem;
    font-weight: 600;
    color: var(--dp-status-block);
}

.dp-feld-fehler::before {
    content: "\2715";
    font-variant-emoji: text;
}

.dp-feld input[aria-invalid="true"],
.dp-feld select[aria-invalid="true"],
.dp-feld textarea[aria-invalid="true"],
.dp-feld .invalid {
    border-color: var(--dp-status-block);
    border-width: 2px;
}

/* Meldungen der Blazor-Formularprüfung. */
.validation-message {
    font-weight: 600;
    color: var(--dp-status-block);
}

.valid.modified:not([type=checkbox]) {
    border-color: var(--dp-green);
}

/* ------------------------------------------------------------------ Tabellen */

.dp-tabelle {
    width: 100%;
    border-collapse: collapse;
}

.dp-tabelle th,
.dp-tabelle td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--dp-border);
}

.dp-tabelle th {
    font-family: var(--dp-font-heading);
    font-weight: 600;
    color: var(--dp-gray);
}

.dp-tabelle tbody tr:nth-child(even) {
    background-color: var(--dp-gray-light);
}

/* Zahlenspalten rechtsbündig, damit die Stellen untereinander stehen (10.5). */
.dp-tabelle .dp-zahl {
    text-align: right;
}

/* ------------------------------------------------------------------ Flächen */

.dp-hinweisflaeche {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: var(--dp-green-light);
    border-radius: var(--dp-radius);
}

.dp-karte {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
}

/* ------------------------------------------------------------------ Zustand */

/*
  docs/PLAN.md 10.3: „Status nicht nur farblich; Text und Symbol ergänzen.“
  Die Farbe kommt aus der Klasse, das Symbol aus `::before`, der Text steht im Element
  selbst. Damit bleibt der Zustand auch für Farbfehlsichtige und im Schwarz-Weiß-Druck
  (10.4) lesbar.
*/
.dp-zustand {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
}

.dp-zustand::before {
    font-variant-emoji: text;
}

.dp-zustand-ok        { color: var(--dp-status-ok); }
.dp-zustand-ok::before    { content: "\2713"; }        /* Haken */

.dp-zustand-warnung   { color: var(--dp-status-warn); }
.dp-zustand-warnung::before { content: "\26A0"; }      /* Warndreieck */

.dp-zustand-gesperrt  { color: var(--dp-status-block); }
.dp-zustand-gesperrt::before { content: "\2715"; }     /* Kreuz */

.dp-zustand-hinweis   { color: var(--dp-status-info); }
.dp-zustand-hinweis::before { content: "\2139"; }      /* Informationszeichen */

/* ------------------------------------------------------------------ Katalogansicht */

/*
  Ergänzungen für die Katalogsuche (Ticket P012). Auch hier steht kein Farbwert: alle
  Farben kommen aus css/tokens.css.
*/

/* Die Suchfelder stehen nebeneinander, sobald Platz ist. `auto-fit` mit einer Mindestbreite
   von 16rem statt fester Spaltenzahl: docs/PLAN.md 10.3 verlangt Hoch- und Querformat und
   eine Skalierung bis 200 %, und bei 200 % ist ein dreispaltiges Raster nicht mehr
   lesbar. */
.dp-suchraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0 1.25rem;
}

/* Die Felder tragen ihren eigenen Abstand nach unten; im Raster darf die Maximalbreite der
   Spalte gelten, sonst bleibt bei breiten Spalten Platz ungenutzt. */
.dp-suchraster .dp-feld {
    max-width: none;
}

.dp-knopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Was der Katalog nicht beantwortet. Die Fläche ist bewusst kein Hinweisgrün: sie nennt
   Sperren, und die Sperrfarbe steht nach 10.5 für genau das. Die Farbe ist hier trotzdem
   nur Zugabe — jeder Punkt trägt über den Baustein `Zustand` Symbol und Text. */
.dp-luecken {
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    background-color: var(--dp-gray-light);
    border-left: 4px solid var(--dp-status-block);
    border-radius: var(--dp-radius);
}

.dp-luecken-liste {
    margin: 0;
    padding-left: 1.25rem;
}

.dp-luecken-liste > li {
    margin-bottom: 1rem;
}

.dp-luecken-liste > li > p {
    margin: 0.25rem 0 0 0;
}

/* Beleg einer Aussage: kleiner als der Fließtext, aber sichtbar. Nicht hinter einem
   Aufklappen — 10.3 lässt kein Hover als einzigen Zugang zu, und ein zugeklapptes Feld ist
   für den Leser dasselbe. */
.dp-beleg {
    font-size: 0.875rem;
    color: var(--dp-gray);
}

/* Quellenschlüssel nach docs/PLAN.md 5.1 (etwa DATEI.VDI:433#710.01.3). Feste Schrittweite,
   damit die Bestandteile untereinander vergleichbar bleiben; `anywhere` als Umbruchregel,
   weil der Schlüssel keine Leerzeichen enthält und sonst die Spalte sprengt. */
.dp-fundstelle {
    font-family: var(--dp-font-mono);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.dp-fundstelle-datei {
    display: block;
    font-size: 0.8125rem;
    color: var(--dp-gray);
    overflow-wrap: anywhere;
}

/* Die Trefferliste ist breiter als ein Tablet im Hochformat. Sie rollt waagerecht in einer
   eigenen Fläche, statt die Spalten zu quetschen; die Fläche ist im Markup als Region
   ausgezeichnet und über `tabindex` auch mit der Tastatur rollbar (10.3). */
.dp-rollflaeche {
    overflow-x: auto;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
}

.dp-trefferliste caption {
    padding: 0.6rem 0.75rem;
    text-align: left;
}

/* Die Fundstelle darf umbrechen, die übrigen Spalten nicht: ein umbrochener Maßwert
   verliert seine Stellenausrichtung. */
.dp-trefferliste td,
.dp-trefferliste th {
    white-space: nowrap;
}

.dp-trefferliste td:last-child {
    white-space: normal;
    min-width: 14rem;
}

.dp-suchabweichung {
    padding: 0.5rem 0.75rem;
    background-color: var(--dp-green-light);
    border-radius: var(--dp-radius);
}

.dp-blaettern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.dp-blaettern-stand {
    /* Mindesthöhe wie eine Touchfläche, damit die Zeile beim Blättern nicht springt. */
    display: inline-flex;
    align-items: center;
    min-height: var(--dp-touch-min);
    color: var(--dp-gray);
}

.dp-sperrvermerke {
    margin-top: 1.5rem;
}

.dp-sperrliste {
    margin: 0;
    padding-left: 1.25rem;
}

.dp-sperrliste > li {
    margin-bottom: 0.75rem;
}

.dp-sperrliste > li > p {
    margin: 0.25rem 0 0 0;
}

/* ------------------------------------------------------------- Kandidatenliste */

/* Kandidaten stehen als Karten und nicht als Tabellenzeilen (Ticket P015.7): jeder
   trägt drei Klartextlisten unterschiedlicher Länge, und die passen in keine Spalte.
   Auf dem Tablet im Hochformat ist eine Karte außerdem ohne Rollen lesbar
   (docs/PLAN.md 10.3). Kein Farbwert steht hier: jede Farbe kommt aus tokens.css
   (ADR-103). */
.dp-kandidatenliste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dp-kandidatenliste > li {
    margin-bottom: 1rem;
}

.dp-kandidat-masse {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0 0 0.75rem 0;
}

.dp-kandidat-masse > dt {
    color: var(--dp-gray);
}

.dp-kandidat-masse > dd {
    margin: 0;
}

.dp-kandidat-liste {
    margin-bottom: 0.75rem;
}

.dp-kandidat-liste > h4 {
    margin: 0 0 0.25rem 0;
}

.dp-kandidat-liste ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dp-kandidat-liste li {
    margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------- Abgleich */

/* Die Abgleichleiste der Auftragsübersicht (Ticket P014.4, docs/PLAN.md 10.2). Zustand und
   Knopf stehen nebeneinander, die Zahlen des letzten Laufs darunter — sie sind die Antwort
   auf „was ist passiert?“ und nicht die primäre Aktion. */
.dp-syncleiste {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--dp-white);
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
}

.dp-syncleiste h2 {
    margin-top: 0;
}

/* Die Zahlen eines Laufs als Beschriftung/Wert-Paare. Vier getrennte Zahlen statt einer
   Summe (siehe Datensatzzaehlung); tabellarische Ziffern, damit sie untereinander stehen. */
.dp-lauf {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 0.25rem 1rem;
    margin: 0.75rem 0 0 0;
}

.dp-lauf dt {
    color: var(--dp-gray);
}

.dp-lauf dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Ergebnisprotokoll */

/*
  Die Druckansicht aus docs/PLAN.md 10.4a (Ticket P020.6).

  Drei Regeln tragen sie:

  1. **Schwarz-Weiß-tauglich** (10.4, 10.5). Keine Aussage hängt allein an einer Farbe.
     Die Zustände benutzen `.dp-zustand` — Farbe *und* Symbol *und* Text —, und im
     Druck werden die Farben ohnehin auf Schwarz gezogen. Rahmen und Fettschrift
     tragen dann, was am Bildschirm die Farbe trägt.
  2. **Grün nur für Logo und Kopfleiste** (10.5, letzter Punkt). Der Protokollkopf
     behält seinen grünen Streifen als dünne Linie; sonst ist das Blatt schwarzweiß.
  3. **Gedruckt wird das Protokoll, nicht die Anwendung.** Navigation, Gerätezeile
     und Schaltflächen verschwinden; die Seite bekommt den Rand des Papiers.
*/

.dp-protokollkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--dp-green);
}

.dp-protokollkopf .dp-absender {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--dp-gray);
    text-align: right;
}

.dp-protokolltitel {
    margin: 0;
    font-family: var(--dp-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
}

/*
  Das Etikett. Es erscheint nur, wenn der Server `abrechnungsfaehig` gesetzt hat
  (10.4, ADR-203) — die Ansicht leitet es nicht ab. Rahmen und Großbuchstaben tragen
  die Aussage auch dann, wenn die Farbe fehlt.
*/
.dp-etikett {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-family: var(--dp-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid currentcolor;
    border-radius: var(--dp-radius);
}

.dp-etikett-abrechenbar {
    color: var(--dp-status-ok);
}

.dp-etikett-offen {
    color: var(--dp-status-warn);
}

/* Testdaten sichtbar von Produktivdaten getrennt (CLAUDE.md); Rahmen und Wort tragen es. */
.dp-etikett-testdaten {
    color: var(--dp-status-warn);
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Beschriftung links, Wert rechts — die Form jedes Protokollabschnitts. */
.dp-protokollfeld {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
}

.dp-protokollfeld dt {
    font-weight: 600;
    color: var(--dp-gray);
}

.dp-protokollfeld dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/*
  Eine fehlende Angabe. Sie steht als Wort da und nicht als leere Zelle: ein leeres
  Feld sähe aus wie ein Druckfehler, und nach docs/PLAN.md 5.1 ist „fehlt“ eine
  Aussage (ADR-009).
*/
.dp-ohne-angabe {
    color: var(--dp-gray);
    font-style: italic;
}

.dp-protokoll section {
    margin-bottom: 1.5rem;
}

.dp-protokoll h2 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--dp-border);
}

.dp-protokollfuss {
    margin-top: 2rem;
    padding-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--dp-gray);
    border-top: 1px solid var(--dp-border);
}

/* Ein Heizkörper des Grunddatenblattes (10.4b, Ticket P020.7). Er trägt seine eigene
   Überschrift, damit er auf dem Ausdruck als Einheit erkennbar bleibt — eine Wohnung mit
   acht Heizkörpern ergibt sonst eine durchlaufende Wand aus Tabellen. */
.dp-heizkoerperblock h3 {
    font-size: 0.95rem;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 15mm;
    }

    /* Die Anwendung verschwindet, das Blatt bleibt. */
    .dp-navigationsspalte,
    .dp-kopfzeile,
    .dp-geraetezeile,
    .dp-nicht-drucken,
    #blazor-error-ui,
    #dp-neue-fassung {
        display: none !important;
    }

    .dp-seite,
    .dp-hauptspalte,
    .dp-inhalt {
        display: block;
        margin: 0;
        padding: 0;
        max-width: none;
    }

    body {
        font-size: 10pt;
        color: #000;
        background: #fff;
    }

    /* Schwarz-Weiß-tauglich (10.4): die Farbe fällt weg, Symbol und Text bleiben. */
    .dp-zustand,
    .dp-zustand-ok,
    .dp-zustand-warnung,
    .dp-zustand-gesperrt,
    .dp-zustand-hinweis,
    .dp-etikett-abrechenbar,
    .dp-etikett-offen,
    .dp-etikett-testdaten {
        color: #000;
    }

    .dp-tabelle tbody tr:nth-child(even) {
        background-color: transparent;
    }

    .dp-tabelle th,
    .dp-tabelle td {
        padding: 0.25rem 0.4rem;
        border-bottom: 1px solid #999;
    }

    .dp-hinweisflaeche {
        background-color: transparent;
        border: 1px solid #999;
    }

    /* Ein Abschnitt soll nicht mitten in einer Zeile umbrechen. */
    .dp-protokoll section,
    .dp-protokollfeld,
    .dp-tabelle tr {
        break-inside: avoid;
    }

    .dp-protokoll h2,
    .dp-heizkoerperblock h3 {
        break-after: avoid;
    }
}

/* ------------------------------------------------------------- Laufzeitmeldungen */

/* Fehlerleiste des Blazor-Laufzeitsystems. Der Text steht in index.html, weil die
   Leiste erscheinen kann, bevor die Anwendung läuft. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    font-weight: 600;
    color: var(--dp-white);
    background-color: var(--dp-status-block);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui a,
#blazor-error-ui .dismiss {
    color: var(--dp-white);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    min-width: var(--dp-touch-min);
    min-height: var(--dp-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Hinweis auf eine bereitstehende neue Fassung (Ticket P031.6). Dieselbe Bauform wie die
   Fehlerleiste, aber in der Hinweisfarbe: es ist keine Störung, sondern ein Angebot.
   Der Text steht in index.html, weil die Leiste erscheinen kann, bevor die Anwendung
   läuft — und weil sie gerade die Fassung betrifft, die läuft. */
#dp-neue-fassung {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    font-weight: 600;
    color: var(--dp-white);
    background-color: var(--dp-status-info);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

/* `hidden` allein reicht nicht: `position: fixed` setzt `display` und schlüge das
   Vorgabeverhalten des Attributs. */
#dp-neue-fassung[hidden] {
    display: none;
}

#dp-neue-fassung .dp-neu-laden {
    min-height: var(--dp-touch-min);
    margin-left: 0.5rem;
    padding: 0 1rem;
    font: inherit;
    color: var(--dp-status-info);
    background-color: var(--dp-white);
    border: none;
    border-radius: var(--dp-radius);
    cursor: pointer;
}

#dp-neue-fassung .dismiss {
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    min-width: var(--dp-touch-min);
    min-height: var(--dp-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    color: var(--dp-white);
    background: none;
    border: none;
    cursor: pointer;
}

.blazor-error-boundary {
    padding: 1rem;
    font-weight: 600;
    color: var(--dp-white);
    background-color: var(--dp-status-block);
    border-radius: var(--dp-radius);
}

.blazor-error-boundary::after {
    content: "\2715  Es ist ein Fehler aufgetreten.";
    font-variant-emoji: text;
}

/* Ladeanzeige vor dem Start der Anwendung. */
.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

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

.loading-progress circle:last-child {
    stroke: var(--dp-green);
    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: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Wird geladen");
}

/* ------------------------------------------------------------------ Kern-Durchlauf */

/*
  Auftragsansicht, Aufnahme, Erkennen, Gerät, Bewerten (docs/FINALISIERUNG.md Stufe 2).
  Alle Farben aus css/tokens.css; Primärgrün bleibt der einen primären Aktion je Ansicht.
*/

a.dp-knopf {
    text-decoration: none;
}

/* Der nächste offene Schritt: hervorgehoben durch Rahmen und Schrift, nicht durch Primärgrün. */
.dp-knopf-naechster {
    color: var(--dp-green-dark);
    border-color: var(--dp-green);
    border-width: 2px;
}

.dp-gruppe {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
}

.dp-gruppe > legend {
    padding: 0 0.25rem;
    font-weight: 600;
    color: var(--dp-gray-dark);
}

.dp-raumzeile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0 1.25rem;
    align-items: end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--dp-border);
}

.dp-raumzeile .dp-feld {
    max-width: none;
}

.dp-raumzeile > .dp-knopf {
    margin-bottom: 1rem;
    justify-self: start;
}

.dp-ankreuzfeld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dp-ankreuzfeld input[type="checkbox"],
.dp-auswahl input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    flex: 0 0 auto;
    accent-color: var(--dp-green);
}

.dp-ankreuzfeld .dp-feld-hilfe {
    flex-basis: 100%;
}

.dp-auswahl {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--dp-touch-min);
}

.dp-raum {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dp-border);
}

.dp-raum h3 {
    margin-bottom: 0.25rem;
}

.dp-heizkoerperliste {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

.dp-heizkoerper {
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--dp-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-white);
}

.dp-heizkoerperkopf-titel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 0.5rem 0;
}

/* Der Gesamtbewertungsfaktor K steht groß; tabellarische Ziffern wie jede Zahl (10.5). */
.dp-k {
    font-family: var(--dp-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dp-gray-dark);
}

.dp-kamerabild {
    display: block;
    width: 100%;
    max-width: 32rem;
    margin-bottom: 1rem;
    border-radius: var(--dp-radius);
    background-color: var(--dp-gray-dark);
}

.dp-verborgen {
    display: none;
}

.dp-tabelle tbody tr.dp-gewaehlt {
    background-color: var(--dp-green-light);
}

.dp-bestaetigung {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dp-border);
}

/* Nur für Vorleseprogramme: die Beschriftung einer Auswahl in der Tabelle. */
.dp-nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}