/*
   Gestaltung nach dem Sollstand mockup/cloud-design/.

   Die Gestaltungswerte stehen NICHT hier. Sie kommen aus den sechs Tokendateien unter
   wwwroot/_ds/, und die werden erzeugt:

       dotnet run --project src/WorkOrders.DesignGate -- --generate

   Damit gibt es genau einen Ort mit Farben, Radien, Abständen und Schriftstufen (UI-12,
   UI-12a). Wer einen Wert ändern will, ändert ihn in Claude Design, importiert neu und
   erzeugt neu — ein von Hand nachgezogener Wert an dieser Stelle wäre die zweite Wahrheit,
   die dieses Feature abgeschafft hat.

   Was hier stehen bleibt: Aufbau und Größen, die zu genau einer Ansicht gehören
   (Spaltenbreiten eines Rasters, Höchstbreite eines Textblocks). Dafür kennt das
   Design-System kein Token, und ein erfundenes wäre wieder ein Wert ohne Quelle.

   Schrift und Symbole liegen im Repo (wwwroot/fonts/, wwwroot/icons/) — geladen wird nie
   von außen (UI-08, UI-09, SC-005).

   Regel des Systems, die hier trägt: Orange ist Signal, keine Fläche. Ein Orange je Ansicht.
*/

@import url("_ds/colors.css");
@import url("_ds/spacing.css");
@import url("_ds/effects.css");
@import url("_ds/typography.css");
@import url("_ds/fonts.css");
@import url("_ds/interactions.css");

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--ara-bg-subtle);
    color: var(--ara-ink);
    font: 400 var(--fs-body) / 1.5 var(--font-body);
}

/* Grad, Zeilenhöhe und Farbe stehen so im Sollstand (baselines · h1) — nicht --fs-h1, das
   ist mit 24 px die Stufe des Design-Systems und sechs Pixel zu klein für diesen Screen.
   Die Schriftfamilie bleibt die des Systems: welche Familie der Sollstand für Überschriften
   zeigt, klärt T030 (UI-09/UI-10), nicht dieser Task. */
h1 {
    font: var(--fw-semibold) var(--soll-h1) / var(--soll-h1-zeile) var(--font-display);
    color: var(--soll-h1-farbe);
    margin: 0 0 var(--space-8);
}

h2 {
    font: 600 var(--fs-h2) / 1.2 var(--font-display);
    margin: 0 0 var(--space-3);
}

h3 {
    font: 600 var(--fs-h3) / 1.2 var(--font-display);
    margin: var(--space-6) 0 var(--space-2);
}

a {
    color: var(--ara-orange);
    text-decoration: none;
}

a:hover {
    color: var(--ara-orange-hover);
    text-decoration: underline;
}

/* ===================================================================================
   Maße des Sollstands, für die das Design-System keinen Namen kennt

   Die sechs Tokendateien unter _ds/ tragen die Werte, die der Sollstand *benannt* hat.
   Die Screens unter mockup/cloud-design/ zeigen daneben Maße, die dort keinen Namen
   haben: die Breite der Navigationsspalte (256 px), der Radius eines Navigationseintrags
   (10 px) und der einer Karte (14 px), der Grad der Überschrift (30 px), die Farben der
   Sekundärtexte. Sie stehen hier, an genau einer Stelle, mit ihrer Herkunft.

   Herkunft jedes Werts ist der erzeugte Sollwertsatz unter
   src/WorkOrders.Web.Tests/baselines/ (origin: "measured") — nicht das Auge, nicht der
   Screenshot. Wer einen davon ändert, ohne dass der Sollwertsatz ihn trägt, macht das
   Gate aus T033/T034 rot, und das ist der Zweck dieser Anordnung.

   ⚠️ Offen gegenüber UI-12a: erzeugt sind diese Zeilen noch nicht. Die Tokenerzeugung
   (T013) kopiert die benannten Tokens; die gemessenen Screenmaße nimmt sie nicht mit.
   Solange das so ist, sind sie hier von Hand geführt und über die Sollwertsätze belegt.
   =================================================================================== */

:root {
    --soll-navspalte:       256px; /* baselines/*.json · sidebar.width */
    --soll-kopfleiste:      64px;  /* baselines/*.json · topbar.height (= --layout-nav-h) */
    --soll-radius-weg:      10px;  /* sidebar-item.borderRadius, primary-action.borderRadius */
    --soll-radius-karte:    14px;  /* card.borderRadius, kpi-card.borderRadius */
    --soll-schatten-karte:  0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --soll-h1:              30px;  /* h1.fontSize */
    --soll-h1-zeile:        36px;  /* h1.lineHeight */
    --soll-h1-farbe:        #1e293b; /* h1.color */
    --soll-text-2:          #4b5563; /* breadcrumb.color, table-head.color */
    --soll-text-weg:        #374151; /* sidebar-item.color, button-secondary.color */
    --soll-spalte-weit:     1280px; /* content-inner.maxWidth — dashboard, arbeitsplan */
    --soll-spalte-mittel:   1024px; /* content-inner.maxWidth — einstellungen */
    --soll-spalte-gross:    1152px; /* content-inner.maxWidth — merkmale, zeitmodell */
    --soll-spalte-schmal:   896px;  /* content-inner.maxWidth — aufbereitung, erstellen */
}

/* --- Keine Monospace, nirgends (UI-10, T030) ---
   Der Sollstand zeigt heute an keiner Stelle eine nichtproportionale Schrift; Zahlen, Zeiten
   und Bezeichner stehen dort in Inter wie der Fliesstext daneben. Ohne diese Regel bliebe
   Monospace trotzdem stehen: <code> und <pre> bekommen sie vom Standardstylesheet des
   Browsers, nicht von app.css. Deshalb wird sie hier ausdruecklich zurueckgenommen.

   Die Lesbarkeit, fuer die sie da war, uebernimmt font-variant-numeric: gleich breite
   Ziffern halten Zeiten und Abdruecke untereinander in einer Flucht, ohne die Schrift zu
   wechseln. */
code,
kbd,
samp,
pre,
.datenlage__markdown {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

/* --- Die Hülle: Navigationsspalte, Kopfleiste, begrenzte Inhaltsspalte (UI-01, UI-03) --- */

.huelle {
    display: flex;
    min-height: 100vh;
    background: var(--ara-bg-subtle);
    font-family: var(--font-body);
}

.navspalte {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    width: var(--soll-navspalte);
    flex: none;
    background: var(--ara-white);
    border-right: var(--border-w) solid var(--ara-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.navspalte__marke {
    padding: var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
    display: grid;
    grid-template-columns: var(--icon-lg) 1fr;
    column-gap: var(--space-2);
    align-items: center;
}

.marke__zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-lg);
    height: var(--icon-lg);
    border-radius: var(--soll-radius-weg);
    background: var(--ara-orange);
    color: var(--ara-white);
}

.marke__wort {
    font: var(--fw-semibold) var(--fs-h3) / var(--lh-body) var(--font-display);
    color: var(--ara-ink);
}

.marke__zusatz {
    grid-column: 2;
    font-size: var(--fs-body);
    color: var(--ara-text-2);
}

.navspalte__wege {
    flex: 1;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.navweg {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 12px; /* sidebar-item.padding */
    border: none;
    border-radius: var(--soll-radius-weg);
    background: transparent;
    color: var(--soll-text-weg);
    font: var(--fw-medium) var(--fs-body) / 1.43 var(--font-body);
    text-align: left;
    text-decoration: none;
    transition: var(--transition);
}

a.navweg:hover {
    background: var(--ara-bg-subtle);
    color: var(--soll-text-weg);
    text-decoration: none;
}

.navweg--aktiv,
a.navweg--aktiv:hover {
    background: var(--ara-orange);
    color: var(--ara-white);
}

/* Ein Eintrag ohne Ziel: der Bereich entsteht noch (User Story 2), oder der Vorführmodus
   sperrt ihn (DEMO-08). Er steht in der Spalte, führt aber
   nirgendwohin. Sichtbar zurückgenommen, damit niemand vergeblich klickt. */
.navweg--ohne-ziel {
    opacity: 0.55;
    cursor: default;
}

/* Der aktive Eintrag bleibt voll da, auch wenn er gerade kein Ziel trägt: er ist keine
   Zusage, die nicht eingelöst wird, sondern der Ort, an dem man steht. */
.navweg--aktiv.navweg--ohne-ziel {
    opacity: 1;
}

.huelle__rechts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kopfleiste {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--soll-kopfleiste);
    flex: none;
    padding: 0 var(--space-6);
    background: var(--ara-white);
    border-bottom: var(--border-w) solid var(--ara-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brotkrume {
    font-size: var(--fs-body);
    color: var(--soll-text-2);
}

.inhalt {
    flex: 1;
}

.inhalt__spalte {
    padding: var(--space-8);
}

.inhalt__innen {
    max-width: var(--soll-spalte-weit);
    margin: 0 auto;
}

.inhalt__innen[data-ansicht="aufbereitung"],
.inhalt__innen[data-ansicht="erstellen"] {
    max-width: var(--soll-spalte-schmal);
}

.inhalt__innen[data-ansicht="merkmale"],
.inhalt__innen[data-ansicht="zeitmodell"] {
    max-width: var(--soll-spalte-gross);
}

.inhalt__innen[data-ansicht="einstellungen"] {
    max-width: var(--soll-spalte-mittel);
}

/* --- Symbole aus dem Repo (UI-08): die Datei als Maske, die Farbe vom Text daneben --- */

.symbol {
    display: inline-block;
    flex: none;
    width: var(--symbol-groesse, var(--icon-md));
    height: var(--symbol-groesse, var(--icon-md));
    background-color: currentColor;
    -webkit-mask: var(--symbol) center / contain no-repeat;
    mask: var(--symbol) center / contain no-repeat;
}

/* --- Fokus (UI-04) ---
   Die Überschrift bleibt der Einstiegspunkt nach einer Navigation, zeichnet dafür aber
   keinen Rahmen: sie ist kein Bedienelement, und der schwarze Standardrahmen des Browsers
   sah auf jedem Screen aus wie ein Fehler. Bedienelemente bekommen den weichen orangen
   Ring des Systems — dort gehört Fokus sichtbar hin. */

h1:focus,
h1:focus-visible,
[data-role="h1"]:focus,
[data-role="h1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* --- Der Regelwerk-Knopf in der Kopfleiste (006 T050, KISS-20/KISS-21) ---
   Derselbe Knopf wie ueberall (.knopf, zweite Stufe): die orange Flaeche gehoert der
   Hauptaktion daneben (UI-11). Die Liste haengt rechtsbuendig unter ihm, ueber dem Inhalt. Den
   gelben Balken darunter gibt es seit T051 nicht mehr (KISS-22) - seine Regeln sind entfallen,
   statt als tote Selektoren stehen zu bleiben. */

.kopfleiste__tun {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.regelwerkknopf {
    position: relative;
    min-width: 0;
}

.regelwerkknopf__knopf {
    max-width: 100%;
}

.regelwerkknopf__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.regelwerkknopf__schleier {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.regelwerkknopf__liste {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 2;
    min-width: 100%;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-weg);
    box-shadow: var(--shadow-pop);
}

.regelwerkknopf__eintrag {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ara-ink);
    font: var(--fw-medium) var(--fs-body) / var(--lh-body) var(--font-body);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.regelwerkknopf__eintrag:hover {
    background: var(--ara-bg-subtle);
}

.regelwerkknopf__haken {
    display: inline-flex;
    width: var(--icon-sm);
    color: var(--ara-orange);
}

/* --- Die benannten Nebenwege in der Fusszeile (UI-16) ---
   Was hier frueher stand, war der Vorfuehrmodus: Stand, Frage, Mitnahme. Seit T064 gibt es
   einen Betriebszustand - die Regeln dafuer sind entfallen, statt als tote Selektoren stehen
   zu bleiben. */

.modus {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: var(--border-w) solid var(--ara-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--fs-small);
    color: var(--ara-text-2);
}

.modus__intern {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.modus__link {
    color: var(--ara-orange);
}

/* --- Knöpfe in drei Stufen (UI-07) ---
   Zweite Stufe ist der Regelfall (button-secondary im Sollwertsatz): Rand, kein Grund.
   Erste Stufe trägt als einzige die orange Fläche — eine je Ansicht (UI-11). Dritte Stufe
   ist der leise Knopf: weder Rand noch Grund, für das, was daneben steht.
   Alle drei nehmen ein Symbol auf (UI-08); die Lücke daneben steht hier, nicht am Symbol. */

.knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4); /* button-secondary.padding */
    border: var(--border-w) solid var(--ara-border-strong);
    border-radius: var(--soll-radius-weg);
    background: transparent;
    color: var(--soll-text-weg);
    font: var(--fw-medium) var(--fs-h4) / var(--lh-body) var(--font-body);
    cursor: pointer;
    transition: var(--transition);
}

.knopf:hover {
    border-color: var(--ara-border-strong);
    background: var(--ara-bg-subtle);
    color: var(--soll-text-weg);
    text-decoration: none;
}

.knopf:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.knopf--leise {
    border-color: transparent;
    background: transparent;
    color: var(--ara-text-2);
}

.knopf--leise:hover {
    border-color: transparent;
    background: var(--ara-bg-subtle);
    color: var(--ara-ink);
}

/* --- Die Karte (Befund 3.6, UI-07) ---
   Der Sollstand zeichnet jede Karte gleich: weisser Grund, 1 px Rand, Radius 14 px und ein
   weicher Schatten. Gebaut war sie „weiss, Radius 12 px, ohne Schatten, teils ohne Rand".

   Die Regel haengt an der Rolle, nicht an einer Klasse: wer irgendwo im Haus
   data-role="card" schreibt, bekommt die Karte des Sollstands, ohne sie ein zweites Mal
   aufzuschreiben. Sie steht bewusst VOR den Bausteinen - eine Klasse mit gleicher
   Spezifitaet, die spaeter kommt, darf ihr eigenes Bild darueberlegen (die Meldung ihren
   farbigen linken Rand, die Teilekachel ihr Verhalten beim Ueberfahren). */
[data-role="card"],
[data-role="kpi-card"] {
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
    box-shadow: var(--soll-schatten-karte);
}

/* --- Dashboard (T051, UI-23) ---
   Vier Kennzahlkarten nebeneinander, darunter die Tafel der Sitzung. Die Karte selbst kommt
   aus der Rolle data-role="card" - hier steht nur, wie ihr Inneres liegt. Die Vier-Spalten-
   Aufteilung steht so im Sollstand-Screen „dashboard". */

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    margin: 0 0 var(--space-8);
}

/* Die Leseansichten (Regelwerk, Merkmale) zeigen drei Kennzahlen, nicht vier. */
.kennzahlen--drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kennzahl {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
}

.kennzahl__zeichen {
    margin-bottom: var(--space-3);
    color: var(--ara-orange);
}

.kennzahl__name {
    color: var(--ara-text-2);
    font-size: var(--fs-small);
}

/* Der Platz der Zahl. Er traegt die Schrift einer Kennzahl und den Ton der Unsicherheit -
   er sieht damit nach einem Wert aus, der nicht da ist, und nicht nach einem, der da ist. */
.kennzahl__wert {
    margin-top: var(--space-1);
    font: var(--fw-semibold) var(--fs-h4) / var(--lh-tight) var(--font-display);
}

.kennzahl__quelle {
    margin-top: var(--space-2);
    color: var(--ara-text-3);
    font-size: var(--fs-small);
}

.letzte {
    margin: 0 0 var(--space-8);
    overflow: hidden;
}

.letzte__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
}

.letzte__kopf h2 {
    margin: 0;
}

.letzte__geltung {
    color: var(--ara-text-3);
    font-size: var(--fs-small);
}

.letzte__leer {
    margin: 0;
    padding: var(--space-6);
    color: var(--ara-text-2);
}

.letzte__tafel {
    width: 100%;
    border-collapse: collapse;
}

.letzte__tafel th {
    padding: var(--space-3) var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
    background: var(--ara-bg-subtle);
    text-align: left;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--soll-text-2);
}

.letzte__tafel td {
    padding: var(--space-4) var(--space-6);
    vertical-align: middle;
}

/* --- Der Einstieg auf dem Dashboard (006, T023, KISS-30) ---
   Gross, aber in der zweiten Stufe: die eine orange Flaeche einer Ansicht ist die Hauptaktion
   der Kopfleiste (UI-11). */

.einstieg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
    padding: var(--space-8);
}

.einstieg__satz {
    margin: 0;
    max-width: 40rem;
    color: var(--ara-text-2);
    font-size: var(--fs-h4);
}

.einstieg__knopf {
    padding: var(--space-4) var(--space-8);
    font-size: var(--fs-h3);
}

/* --- Schritt 1: die Dateien (006, T024) --- */

.zufuhr {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-6) 0;
    padding: var(--space-6);
}

.zufuhr__dateien {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zufuhr__datei {
    display: flex;
    gap: var(--space-2);
}

.zufuhr__art {
    min-width: 8rem;
    color: var(--ara-text-2);
}

.zufuhr__name {
    font-weight: var(--fw-medium);
}

.zufuhr__offen {
    color: var(--ara-text-2);
    font-style: italic;
}

.zufuhr__hinweis {
    margin: 0;
    color: var(--ara-text-2);
}

.zufuhr__weiter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

/* Spec 010: der frühere Stand, freiwillig, mit den beiden Bezeichnungen nebeneinander. */
.vergleich {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-6) 0;
    padding: var(--space-6);
}

.vergleich h2 {
    margin: 0;
}

.vergleich__bezeichnungen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.vergleich__feld {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* --- Vorschau: CAD und Zeichnung nebeneinander (006, KISS-11) --- */

.vorschau {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.vorschau__feld {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
    box-shadow: var(--soll-schatten-karte);
}

.vorschau__titel {
    color: var(--ara-text-2);
    font-weight: var(--fw-medium);
}

.vorschau__modell,
.vorschau__zeichnung {
    width: 100%;
    height: 26rem;
    border: 0;
}

.vorschau__modell {
    cursor: grab;
    touch-action: none;
}

.vorschau__modell--greift {
    cursor: grabbing;
}

.vorschau__hinweis {
    align-self: center;
    margin: 0;
    color: var(--ara-text-2);
}

.vorschau__hinweis--fehlschlag {
    padding-left: var(--space-4);
    border-left: var(--border-w-accent) solid var(--ara-warning);
}

@media (max-width: 60rem) {
    .vorschau {
        grid-template-columns: 1fr;
    }
}

/* --- Schritt 1: Beispielteile zum Herunterladen (006, T046, KISS-15) --- */

.beispielteile {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    padding: var(--space-6);
}

.beispielteile h2 {
    margin: 0;
}

.beispielteile__liste {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.beispielteil {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
}

.beispielteil__art {
    font-weight: var(--fw-medium);
}

.beispielteil__text {
    color: var(--ara-text-2);
}

.beispielteil__dateien {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 48rem) {
    .beispielteil {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* Gesperrt, weil etwas fehlt, ist etwas anderes als beschaeftigt: kein Warten-Zeiger. */
.knopf:disabled:not([aria-busy="true"]) {
    cursor: not-allowed;
}

/* --- Schritt 2: Merkmale und Rueckfragen (006, T026-T031) --- */

.erkannt {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-6);
    margin: 0;
}

.erkannt__zeile {
    display: contents;
}

.erkannt dt {
    color: var(--ara-text-2);
}

.erkannt dd {
    margin: 0;
    font-weight: var(--fw-medium);
}

.fragen {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.frage {
    display: grid;
    gap: var(--space-1);
    max-width: 40rem;
}

.frage__text {
    font-weight: var(--fw-medium);
}

.frage__warum {
    margin: 0;
    color: var(--ara-text-2);
    font-size: var(--fs-small);
}

.weiter {
    display: flex;
    justify-content: flex-end;
    margin: var(--space-6) 0 0;
}

/* --- Tafel: die Tabelle der Leseansichten (T055, T056) ---
   Dieselbe Gestalt wie „Letzte Arbeitspläne": Kopf mit Titel und Geltungssatz, darunter das
   Gitter. Gemeinsam, weil der Sollstand sie gleich zeichnet - zwei Stellen mit demselben
   Bild waeren zwei Stellen, die auseinanderlaufen. */

.tafel {
    margin: 0 0 var(--space-8);
    overflow: hidden;
}

.tafel__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
}

.tafel__kopf h2 {
    margin: 0;
}

.tafel__geltung {
    color: var(--ara-text-3);
    font-size: var(--fs-small);
    text-align: right;
}

.tafel__gitter {
    width: 100%;
    border-collapse: collapse;
}

.tafel__gitter th {
    padding: var(--space-3) var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
    background: var(--ara-bg-subtle);
    text-align: left;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--soll-text-2);
}

/* T068 (UI-15): die Zeilentrennung liegt auf der ZEILE, nicht auf der Zelle - der Sollstand
   zieht sie dort, und der Sollwertsatz misst sie dort. Gezeichnet wird dieselbe Linie
   (border-collapse), nur in dem helleren Grau des Sollstands: im erzeugten Tokensatz traegt
   --ara-bg-panel genau diesen Wert. */
.tafel__gitter tbody tr,
.letzte__tafel tbody tr {
    border-bottom: var(--border-w) solid var(--ara-bg-panel);
}

.tafel__gitter td {
    padding: var(--space-4) var(--space-6);
    vertical-align: top;
}

.tafel__kennung {
    white-space: nowrap;
    color: var(--ara-text-2);
}

.tafel__zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Der Beleg ist ein Satz, keine Zahl - er bekommt den Platz dafuer und den leiseren Ton. */
.tafel__beleg {
    width: 24rem;
    color: var(--ara-text-2);
    font-size: var(--fs-small);
}

.tafel__leer {
    margin: 0;
    padding: var(--space-6);
    color: var(--ara-text-2);
}

/* --- Einleitungssatz einer Ansicht --- */

.einleitung {
    color: var(--ara-text-2);
    max-width: 46rem;
}

/* --- Der Plan --- */

.plan__ruecksprung {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-small);
}

.plan__regelwerk {
    margin: 0;
    color: var(--ara-text-2);
}

.geltung {
    margin: var(--space-6) 0;
    padding: var(--space-3) var(--space-4);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-left: var(--border-w-accent) solid var(--ara-orange);
    border-radius: var(--radius-md);
}

.geltung__satz {
    margin: 0;
}

.geltung__marke {
    margin-right: var(--space-2);
    color: var(--ara-text-2);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.geltung__koerper {
    margin: var(--space-1) 0 0;
    color: var(--ara-text-2);
    font-size: var(--fs-small);
}

.plan__zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

/* Kennzahlkarte (kpi-card im Sollwertsatz): 24 px innen, Radius 14, derselbe leise
   Schatten wie die Karte. */
.zahl {
    padding: var(--space-6);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
    box-shadow: var(--soll-schatten-karte);
    font-size: var(--fs-h4);
}

/* Jede Kennzahlkarte trägt ein Symbol (UI-08) — es steht über der Zahl, nicht daneben. */
.zahl__zeichen {
    margin-bottom: var(--space-2);
    color: var(--ara-orange);
}

.zahl__wert {
    display: block;
    font: var(--fw-semibold) var(--fs-h1) / var(--lh-tight) var(--font-display);
}

.zahl__marke {
    display: block;
    margin-top: var(--space-1);
    color: var(--ara-text-2);
    font-size: var(--fs-small);
}

/* --- Arbeitsgangfolge --- */

.folge {
    width: 100%;
    border-collapse: collapse;
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
    box-shadow: var(--soll-schatten-karte);
    overflow: hidden;
}

/* Der Tabellenkopf hat einen Grund und steht in der Textgröße, nicht in Versalien:
   so misst ihn der Sollwertsatz (table-head, table-head-row). */
.folge thead tr {
    background: var(--ara-bg-subtle);
}

.folge th {
    padding: var(--space-3) var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
    text-align: left;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--soll-text-2);
}

.folge td {
    padding: var(--space-3) var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
    vertical-align: top;
}

.folge__nr {
    width: 3.5rem;
    color: var(--ara-text-2);
    font-variant-numeric: tabular-nums;
}

.folge__name {
    font-weight: 600;
}

.folge__nebensache {
    color: var(--ara-text-3);
    font-size: var(--fs-small);
}

.folge__zeit {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* T054 (UI-19): Ein Arbeitsgang, dessen Datenlage etwas nicht traegt (DEMO-03), bleibt als
   Zeile erkennbar — aber NICHT mehr flaechig gelb. Die ganze Zeile in Warnfarbe zu tauchen
   hiess: die Warnung galt allem darin, auch den sechs Feldern, an denen nichts unsicher ist.
   Und wo halbe Tabellen gelb sind, sagt Gelb nichts mehr.

   Gelb bleibt deshalb dem einen Wort vorbehalten, das wirklich warnt (.unsicher). Die Zeile
   traegt nur noch eine schmale Kante an ihrer linken Flanke — sichtbar beim Ueberfliegen,
   ohne den Rest der Zeile einzufaerben. */
.folge__zeile--unsicher > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ara-warning);
}

/* T053 (UI-18): die Herkunft steht in der letzten Spalte derselben Zeile. Aufgeklappt
   waechst die Zeile in der Hoehe - die Tabelle behaelt eine Zeile je Arbeitsgang. Die
   Spalte bekommt dafuer Platz, sonst bricht der Beleg auf jedes Wort um. */
.folge__herkunft {
    width: 24rem;
}

/* Statusmarke als farbige Pille (status-pill im Sollwertsatz): voller Radius, kleine
   Schrift, 4 px über und 12 px neben dem Text. */
.marke,
[data-role="status-pill"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    line-height: 1.33;
}

/* Das Symbol in der Pille (UI-08, T029). Die erzeugte Tokendatei kennt vier Symbolgroessen,
   die kleinste davon ist 16 px - neben einer 12-px-Schrift in einer Pille zu gross. Statt in
   _ds/ eine fuenfte Groesse von Hand nachzutragen (das waere der zweite Ort mit
   Gestaltungswerten, den UI-12 verbietet), nimmt die Pille die benannte 12-px-Stufe der
   Abstandsskala. Ein Wert aus der einen Quelle, kein neuer daneben. */
[data-role="status-pill"] > .symbol {
    --symbol-groesse: var(--space-3);
}

.marke {
    margin-left: var(--space-2);
}

.marke--fremd {
    background: var(--ara-bg-panel);
    color: var(--ara-text-2);
}

/* --- Aufklappbare Herkunft (DEMO-01, DEMO-02) --- */

.herkunft__griff {
    cursor: pointer;
    color: var(--ara-orange);
    font-size: var(--fs-small);
}

.herkunft__griff:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.herkunft__inhalt {
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--ara-bg-subtle);
    border-radius: var(--radius-md);
}

/* Seit T053 steht der Satz in einer Tabellenspalte und nicht mehr ueber die volle Breite:
   zwei Spalten zu 14rem passen dort nicht, Begriff und Antwort stehen deshalb untereinander. */
.herkunft__satz {
    display: grid;
    gap: var(--space-1) var(--space-4);
    margin: 0;
}

.herkunft__satz dt {
    color: var(--ara-text-2);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.herkunft__satz dd {
    margin: 0;
}

.herkunft__regel {
    font-weight: 600;
}

.herkunft__kennung {
    margin-left: var(--space-2);
    font-size: var(--fs-small);
    color: var(--ara-text-2);
}

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

.merkmal {
    padding: var(--space-1) 0;
}

.merkmal__pfad {
    font-size: var(--fs-small);
    color: var(--ara-text-2);
}

.merkmal__wert {
    margin-left: var(--space-2);
    font-weight: 600;
}

.merkmal__beleg {
    margin-left: var(--space-2);
    color: var(--ara-text-2);
    font-size: var(--fs-small);
}

/* Der eine Zustand, den diese Oberfläche niemals beschönigt (DEMO-03). */
.unsicher {
    color: var(--ara-warning);
    font-weight: 600;
}

/* --- Nachforderungsliste (DEMO-04) --- */

.nachforderung {
    margin-top: var(--space-8);
}

.nachforderung__leer {
    padding: var(--space-3) var(--space-4);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-left: var(--border-w-accent) solid var(--ara-success);
    border-radius: var(--radius-md);
    color: var(--ara-success);
}

.nachforderung__einleitung {
    color: var(--ara-text-2);
}

.nachforderung__stufe {
    font-size: var(--fs-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nachforderung__stufe--blockierend {
    color: var(--ara-error);
}

.nachforderung__stufe--schaetzbar {
    color: var(--ara-warning);
}

.nachforderung__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.nachforderung__eintrag {
    padding: var(--space-4);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
    box-shadow: var(--soll-schatten-karte);
}

.nachforderung__stufe--blockierend + .nachforderung__liste .nachforderung__eintrag {
    border-left: var(--border-w-accent) solid var(--ara-error);
}

/* Kein Fehler, nur nichts da: der leere Zustand einer Ansicht, die etwas erwartet haette. */
.meldung--leer {
    border-left: var(--border-w-accent) solid var(--ara-warning);
}

.nachforderung__stufe--schaetzbar + .nachforderung__liste .nachforderung__eintrag {
    border-left: var(--border-w-accent) solid var(--ara-warning);
}

.nachforderung__merkmal {
    margin: 0;
    font-weight: 600;
}

.nachforderung__pfad {
    margin-left: var(--space-2);
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--ara-text-2);
}

.nachforderung__grund {
    margin: var(--space-1) 0 var(--space-3);
}

.nachforderung__satz {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font-size: var(--fs-small);
}

.nachforderung__satz dt {
    color: var(--ara-text-2);
}

.nachforderung__satz dd {
    margin: 0;
}

/* --- Meldungen --- */

.meldung {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
    box-shadow: var(--soll-schatten-karte);
}

.meldung--fehler {
    border-left: var(--border-w-accent) solid var(--ara-error);
}

/* --- Knöpfe im Inhalt (DEMO-17, DEMO-18) --- */

/* Die erste Stufe: die einzige orange Flaeche einer Ansicht (UI-11, T031).

   „Einzig" ist woertlich zu nehmen. Die Hauptaktion steht in der Kopfleiste und ist auf
   jeder Route dieselbe - sie ist die Flaeche, die der Sollwertsatz als primary-action
   misst. Drei Knoepfe im Inhalt trugen sie bis T031 ebenfalls (Auslesen, Eingang sichern,
   Check fahren); auf /aufbereitung waren damit drei orange Flaechen gleichzeitig zu sehen
   und keine davon war noch die Hauptaktion. Sie stehen jetzt in der zweiten Stufe, mit
   Rand - dieselbe Stufe, in der der Sollstand seine Knoepfe im Inhalt zeigt
   (element-catalog.json, Rolle „button-secondary" auf dem Screen „generieren").

   Wer hier einen vierten knopf--haupt hinzufuegt, faellt im Wertevergleich auf:
   DesignBaselineTests zaehlt je Ansicht die orangen Flaechen. */
.knopf--haupt {
    border-color: var(--ara-orange);
    background: var(--ara-orange);
    color: var(--ara-white);
}

.knopf--haupt:hover {
    border-color: var(--ara-orange-hover);
    background: var(--ara-orange-hover);
    color: var(--ara-white);
}

.knopf:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* --- Die Ablageflaeche (UI-05): Dateiauswahl mit deutscher Beschriftung --- */

.ablage {
    position: relative;
    border: 2px dashed var(--ara-border-strong); /* drop-zone.borderStyle/-Width/-Color */
    border-radius: var(--soll-radius-karte);
    padding: var(--space-12);
    text-align: center;
    transition: var(--transition);
}

.ablage:hover,
.ablage:focus-within,
.ablage--ueber {
    border-color: var(--ara-orange);
}

/* Das Feld selbst liegt unsichtbar ueber der ganzen Flaeche: ein Klick oeffnet den Dialog,
   und eine hineingezogene Datei faellt direkt in das Feld - der Browser liefert sie ohne
   eigenes Skript an. Er stellt dabei weder „Choose File" noch „No file chosen" dar. */
.ablage__feld {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ablage__griff {
    display: block;
    cursor: pointer;
}

.ablage__zeichen {
    margin: 0 auto var(--space-4);
    color: var(--ara-text-3);
}

.ablage__satz {
    display: block;
    margin-bottom: var(--space-2);
    font: var(--fw-medium) var(--fs-h3) / 1.56 var(--font-body);
    color: var(--ara-ink);
}

.ablage__klick {
    display: block;
    margin-bottom: var(--space-4);
    font-size: var(--fs-body);
    color: var(--soll-text-2);
}

.ablage__formate {
    display: block;
    font-size: var(--fs-small);
    color: var(--ara-text-2);
}

.ablage--belegt {
    border-style: solid;
    border-color: var(--ara-orange);
}

.ablage__datei {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: var(--space-4);
    background: var(--ara-bg-subtle);
    border-radius: var(--soll-radius-weg);
    font-size: var(--fs-body);
}

.ablage__dateizeichen {
    color: var(--ara-orange);
}

.dateiwahl {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.dateiwahl__marke {
    color: var(--ara-text-2);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.eingabe {
    padding: var(--space-2) var(--space-3);
    border: var(--border-w) solid var(--ara-border-strong);
    border-radius: var(--radius-md);
    font: inherit;
    min-width: 16rem;
}

.eingabe:focus-visible {
    outline: none;
    border-color: var(--ara-orange);
    box-shadow: var(--focus-ring);
}

/* --- Planansicht und Diagnose --- */

.plan__standwechsel {
    margin: var(--space-4) 0 0;
}

/* --- Abgleich zweier Stände (Spec 010, REV-10) ---
   Gebaut wie die Geltungsangabe darunter: eine Kante links, ein Satz. Die vier Lagen sind
   Pillen aus den vorhandenen Statusfarben - kein Wert, den _ds/ nicht schon kennt. */

.abgleich {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-left: var(--border-w-accent) solid var(--ara-ink);
    border-radius: var(--radius-md);
}

.abgleich__satz {
    margin: 0;
    font-weight: var(--fw-medium);
}

.abgleich__entfallen {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
}

.abgleich__entfallen .marke {
    margin: 0 var(--space-2) 0 0;
}

/* T031b: der alte Stand trug selbst Luecken - ein Satz unter der Aussage, kein eigener Kasten. */
.abgleich__luecke {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-small);
    color: var(--ara-text-2);
}

/* T033: was der Vergleich nicht deuten konnte - eine eigene Liste, gebaut wie die
   Nachforderungsliste, aber mit der Kante der Abgleich-Aussage, damit die zwei Listen nicht
   fuer eine gehalten werden. */
.abgleich-offen {
    margin-top: var(--space-8);
}

.abgleich-offen__einleitung {
    color: var(--ara-text-2);
}

.abgleich-offen__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.abgleich-offen__eintrag {
    padding: var(--space-4);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-left: var(--border-w-accent) solid var(--ara-ink);
    border-radius: var(--soll-radius-karte);
    box-shadow: var(--soll-schatten-karte);
}

.abgleich-offen__merkmal {
    margin: 0;
    font-weight: 600;
}

.abgleich-offen__werte {
    margin-left: var(--space-2);
    font-weight: 400;
}

.abgleich-offen__grund {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-small);
    color: var(--ara-text-2);
}

.marke--new {
    background: var(--ara-success-bg);
    color: var(--ara-success);
}

.marke--removed {
    background: var(--ara-error-bg);
    color: var(--ara-error);
}

.marke--time_changed {
    background: var(--ara-warning-bg);
    color: var(--ara-ink);
}

.marke--unchanged {
    background: var(--ara-bg-panel);
    color: var(--ara-text-2);
}

.folge__lage .marke {
    margin: 0;
}

.folge__grund {
    display: block;
    margin-top: var(--space-1);
    color: var(--ara-text-2);
    font-size: var(--fs-small);
}

.diagnose__eintrag[data-zustand="works"] {
    border-left-color: var(--ara-success);
}

/* --- Einstellungen (T061, UI-24) ---
   Je Karte ein Kopf mit Symbol und Ueberschrift, darunter die Werte als Gruppe - der Aufbau des
   Sollstand-Screens „einstellungen". Die Karte selbst kommt aus der Rolle data-role="card";
   hier steht nur, wie ihr Inneres liegt. */

.einstellkarte {
    margin: 0 0 var(--space-6);
    overflow: hidden;
}

.einstellkarte__kopf {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
}

.einstellkarte__kopf h2 {
    margin: 0;
}

.einstellkarte__zeichen {
    color: var(--ara-orange);
}

.einstellkarte__gruppe {
    display: flex;
    flex-direction: column;
}

.einstellwert {
    padding: var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
}

.einstellwert:last-child {
    border-bottom: none;
}

.einstellwert h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-body);
}

.einstellwert__wert {
    margin: 0;
    overflow-wrap: anywhere;
}

.einstellwert__herkunft {
    margin: var(--space-2) 0 0;
    color: var(--ara-text-3);
    font-size: var(--fs-small);
}

/* Was nicht schaltbar ist, sagt das (UI-24a) - statt als Knopf dazustehen, der nichts tut. */
.einstellwert__anzeige {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--radius-pill);
    color: var(--ara-text-3);
}

.einstellwert code {
    word-break: break-all;
}

/* T037 (DLC-14) - der Datenlage-Check aus der Oberflaeche. */

.datenlage__gate,
.datenlage__zufuhr,
.datenlage__report {
    margin: var(--space-6) 0;
    padding: var(--space-4);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
}

/* Das Gate steht vorn und sieht auch so aus: hinter ihm gehen Kundendaten auf die Platte. */
.datenlage__gate {
    border-left: var(--border-w-accent) solid var(--ara-orange);
}

.datenlage__frage {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-2) 0;
}

.datenlage__hinweis {
    color: var(--ara-text-2);
    font-size: var(--fs-small);
}

.datenlage__zufuhr {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.datenlage__zufuhr h2,
.datenlage__hinweis {
    flex-basis: 100%;
}

.datenlage__befunde {
    margin: 0 0 var(--space-4);
}

/* Der Report, wie der Generator ihn geschrieben hat - umgebrochen, nicht umformuliert. */
.datenlage__markdown {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--ara-bg-code);
    border-radius: var(--soll-radius-karte);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--fs-small);
}


/* --- Das schmale Fenster (UI-13, T032) ---

   Der Sollstand ist auf 1440 px gezeichnet und kennt keinen schmalen Zustand. Er gibt hier
   also nichts vor, was abzuschreiben waere; was er vorgibt, ist die Regel dahinter - die
   Navigation bleibt erreichbar, sie verschwindet nicht.

   Der Umbruch liegt bei 1024 px. Das ist keine geschaetzte Zahl: --bp-tablet in
   wwwroot/_ds/spacing.css nennt sie, und die Datei ist erzeugt. In der @media-Bedingung
   selbst kann sie nicht als Custom Property stehen - eine Media Query wird ausgewertet,
   bevor es einen Elementbaum mit Variablen gibt. Deshalb steht der Wert hier ausgeschrieben
   und die Quelle daneben.

   Warum 1024 und nicht schmaler: die Spalte ist 256 px breit, der Inhalt hat 32 px
   Innenabstand auf jeder Seite. Unterhalb von rund 1000 px bleiben dem Inhalt weniger als
   700 px - eine Tabelle mit sechs Spalten passt dort nicht mehr neben die Navigation. */

.navgriff {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-w) solid var(--ara-border-strong);
    border-radius: var(--soll-radius-weg);
    background: transparent;
    color: var(--soll-text-weg);
    font: var(--fw-medium) var(--fs-h4) / var(--lh-body) var(--font-body);
    cursor: pointer;
}

.navgriff:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.kopfleiste__ort {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

/* --- Protokoll (T060, UI-23) ---
   Filterreiter ueber dem Zeitstrahl und der Zeitstrahl darunter. Der Reiter ist derselbe Knopf
   wie ueberall im Inhalt (.knopf, Rolle button-secondary) - der gewaehlte traegt die Flaeche des
   Sollstands. Ein eigener Knopftyp waere eine zweite Gestalt fuer dieselbe Sache. */

.reiter {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-6);
}

.reiter__zeichen {
    color: var(--ara-text-3);
}

.reiter__gruppe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.reiter__knopf {
    font-size: var(--fs-body);
}

.reiter__knopf--aktiv {
    border-color: var(--ara-orange);
    color: var(--ara-orange);
}

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

.zeitstrahl__eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-w) solid var(--ara-border);
}

.zeitstrahl__eintrag:last-child {
    border-bottom: none;
}

.zeitstrahl__zeichen {
    flex: none;
    color: var(--ara-text-3);
}

/* Gelb bleibt der Warnung vorbehalten (UI-19) - hier ist es eine, und nur hier. */
.zeitstrahl__zeichen--warnung {
    color: var(--ara-warning);
}

.zeitstrahl__zeichen--fehler {
    color: var(--ara-error);
}

.zeitstrahl__inhalt {
    flex: 1;
    min-width: 0;
}

.zeitstrahl__wort {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Der Anhang ist ein Ablaufbericht - er behaelt seine Zeilen und seine Schreibmaschinenschrift,
   weil beides zu seinem Inhalt gehoert. */
.zeitstrahl__anhang {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    overflow-x: auto;
    background: var(--ara-bg-subtle);
    border-radius: var(--soll-radius-weg);
    font-size: var(--fs-small);
}

.zeitstrahl__fuss {
    margin: var(--space-1) 0 0;
    color: var(--ara-text-3);
    font-size: var(--fs-small);
}

@media (max-width: 1024px) {

    /* Der Griff wird sichtbar - das Bedienelement, ueber das die Navigation erreichbar
       bleibt. Ohne ihn waere sie im schmalen Fenster weg, und genau das verbietet UI-13. */
    .navgriff {
        display: inline-flex;
    }

    /* Die Spalte steht nicht mehr neben dem Inhalt, sondern darueber, und ist zunaechst
       ausgefahren. Sie bleibt im Baum: ein display:none haette sie auch fuer den
       Screenreader entfernt. */
    .navspalte {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 40;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-pop);
    }

    .huelle--navspalte-offen .navspalte {
        transform: translateX(0);
    }

    /* Die Flaeche hinter der aufgeschlagenen Spalte. Sie liegt ueber dem Inhalt, damit
       sichtbar ist, dass er gerade verdeckt wird. Geschlossen wird ueber denselben Griff,
       der sie geoeffnet hat - er steht in der Kopfleiste darueber und bleibt bedienbar. */
    .huelle--navspalte-offen::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(17, 24, 39, 0.4);
    }

    .huelle--navspalte-offen .kopfleiste {
        z-index: 50;
    }

    /* Der Inhalt nimmt die frei gewordene Breite und den kleineren Innenabstand. */
    .inhalt__spalte {
        padding: var(--space-6) var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navspalte {
        transition: none;
    }
}

/* ===================================================================================
   Spec 012 (T024-T027, T030b): die Online-Instanz - Huelle vor der Anmeldung, Konto-Seiten,
   Rechtstexte, Fusszeile, Kennzeichnung des Demo-Stands.

   Nur neue Klassen, alle aus den Tokens unter _ds/. Keine Regel oben wird hier geaendert:
   im lokalen Betrieb erscheint nichts davon, und der gemessene Sollstand bleibt, wie er ist.
   =================================================================================== */

/* --- Die Huelle vor der Anmeldung (PublicLayout) --- */

.offen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ara-bg-subtle);
}

.offen__kopf {
    height: var(--soll-kopfleiste);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    background: var(--ara-white);
    border-bottom: var(--border-w) solid var(--ara-border);
}

.offen__marke {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ara-ink);
}

.offen__marke:hover {
    color: var(--ara-ink);
    text-decoration: none;
}

.offen__inhalt {
    flex: 1;
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
}

.offen__fuss {
    padding: var(--space-4) var(--space-6);
    border-top: var(--border-w) solid var(--ara-border);
    background: var(--ara-white);
}

/* --- Impressum und Datenschutzerklaerung in der Fusszeile (LegalFooter) --- */

.recht {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--fs-small);
}

.modus .recht {
    margin-left: auto;
}

.recht__link {
    color: var(--ara-text-2);
}

/* --- Die Konto-Seiten --- */

.konto {
    padding: var(--space-6);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
    box-shadow: var(--soll-schatten-karte);
}

.konto__satz {
    margin: 0 0 var(--space-4);
}

.konto__meldung {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    box-shadow: none;
}

.meldung--erfolg {
    border-left: var(--border-w-accent) solid var(--ara-success);
}

.konto__formular {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.konto__zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.konto__feld {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.konto__feld .eingabe {
    min-width: 0;
    width: 100%;
}

.konto__marke {
    font-weight: var(--fw-medium);
    color: var(--soll-text-weg);
}

.konto__hinweis {
    font-size: var(--fs-small);
    color: var(--ara-text-2);
}

.konto__haken {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.konto__haken input {
    margin-top: 0.3em;
    accent-color: var(--ara-orange);
}

.konto__zustimmung {
    padding: var(--space-3);
    background: var(--ara-bg-subtle);
    border-radius: var(--radius-md);
}

.konto__absenden {
    justify-content: center;
}

.konto__absenden--gefahr {
    border-color: var(--ara-error);
    color: var(--ara-error);
}

.konto__fehlerliste {
    margin: 0;
    padding-left: var(--space-6);
    color: var(--ara-error);
}

.konto__fehlerliste:empty {
    display: none;
}

.konto__wege {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.konto__daten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-6);
    margin: 0;
}

.konto__daten dt {
    color: var(--ara-text-2);
}

.konto__daten dd {
    margin: 0;
}

/* --- Kontoverwaltung in der Oberflaeche (ManageLayout) und Kopfleiste (AccountControls) --- */

.konto-verwaltung {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-8);
}

.konto-verwaltung__wege {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.konto-verwaltung__weg {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--soll-radius-weg);
    color: var(--soll-text-weg);
}

.konto-verwaltung__weg.active {
    background: var(--ara-orange-tint);
    color: var(--ara-orange);
}

.konto-verwaltung__inhalt {
    padding: var(--space-6);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
}

.konto-kopf {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.abmelden {
    margin: 0;
}

/* --- Die Rechtstexte (LegalTextView) --- */

.rechtstext {
    padding: var(--space-6);
    background: var(--ara-white);
    border: var(--border-w) solid var(--ara-border);
    border-radius: var(--soll-radius-karte);
}

.rechtstext__fassung {
    margin: var(--space-6) 0 0;
    font-size: var(--fs-small);
    color: var(--ara-text-2);
}

/* --- Der Demo-Stand auf dem Regelwerk-Knopf (ONL-15) --- */

.regelwerkknopf__demo {
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--ara-orange-tint);
    color: var(--ara-orange);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}