/* =====================================================================
   WM+ — Basis-Stylesheet (Dark Mode)

   Ausgelegt auf das Werkstatt-Tablet: dunkler Hintergrund gegen
   Blendung in der Halle, grosse Beruehrflaechen (min. 44 px), hoher
   Kontrast fuer Arbeit mit oeligen Fingern und wechselndem Licht.
   Das 30/70-Layout der Mechaniker-Ansicht folgt in Phase 5.
   ===================================================================== */

:root {
    color-scheme: dark;

    --grund:          #14181d;
    --flaeche:        #1b2129;
    --flaeche-hoch:   #222a34;
    --rand:           #2c3540;
    --text:           #e4e8ee;
    --text-leise:     #8b96a5;

    --akzent:         #3b82f6;
    --akzent-hell:    #60a5fa;
    --erfolg:         #4ade80;
    --warnung:        #fbbf24;
    --fehler:         #f87171;

    --radius:         8px;
    --beruehrung:     44px;   /* Mindesthoehe fuer Bedienelemente */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--grund);
    color: var(--text);
    font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

body.zentriert {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

/* --- Kopfzeile ------------------------------------------------------ */

.kopfzeile {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.25rem;
    height: 56px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    position: sticky;
    top: 0;
    z-index: 10;
}

.marke {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.marke span { color: var(--akzent); }

.marke.gross { font-size: 2rem; }

.navigation {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    overflow-x: auto;
}

.navigation a {
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    height: 36px;
    border-radius: var(--radius);
    color: var(--text-leise);
    text-decoration: none;
    white-space: nowrap;
}

.navigation a:hover { background: var(--flaeche-hoch); color: var(--text); }
.navigation a.aktiv { background: var(--flaeche-hoch); color: var(--text); }

.benutzerbereich {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.benutzername {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: right;
    font-size: 0.875rem;
}

.benutzername small { color: var(--text-leise); font-size: 0.75rem; }

a.benutzername { color: var(--text); text-decoration: none; }
a.benutzername:hover { color: var(--akzent-hell); }

.kundenzeile { margin: 0; }
.kundenzeile small { display: block; color: var(--text-leise); font-size: 0.8125rem; }

/* Korrekturformular in der Chargentabelle */
.korrekturformular { display: flex; gap: 0.3rem; justify-content: flex-end; }
.korrekturformular input[type="number"] { width: 90px; min-height: 34px; padding: 0.2rem 0.4rem; }
.korrekturformular input[type="text"] { width: 130px; min-height: 34px; padding: 0.2rem 0.4rem; }
.korrekturformular .knopf { min-height: 34px; padding: 0 0.7rem; }

.inline { display: inline; margin: 0; }

/* --- Inhalt --------------------------------------------------------- */

.inhalt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.seitenkopf { margin-bottom: 1.5rem; }
.seitenkopf h1 { font-size: 1.5rem; margin: 0 0 0.15rem; letter-spacing: -0.02em; }
.untertitel { margin: 0; color: var(--text-leise); }

/* --- Kacheln -------------------------------------------------------- */

.kachelraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kachel {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}

.kachel-beschriftung {
    color: var(--text-leise);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kachel-wert {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0.25rem 0 0.1rem;
    letter-spacing: -0.02em;
}

.kachel-hinweis { color: var(--text-leise); font-size: 0.8125rem; }

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

.formular { display: flex; flex-direction: column; gap: 0.35rem; }

.formular label {
    color: var(--text-leise);
    font-size: 0.8125rem;
    margin-top: 0.65rem;
}

/* Die Typen stehen bewusst EINZELN da und nicht als
   `input:not([type="checkbox"])…`. Eine Kette aus :not() zählt jedes
   Argument in die Spezifität — die Regel schlüge dann feinere Regeln wie
   `.suchformular input` oder `.korrekturformular input[type="number"]`,
   und die Felder verlören ihre eingestellten Breiten. Eine Liste aus
   Selektoren behält dagegen je Eintrag ihre eigene Spezifität.

   Wer einen weiteren Typ einbaut, trägt ihn hier nach. Fehlt er, fällt
   das Feld auf die Darstellung des Browsers zurück: heller Kasten,
   Innenrahmen, Arial — mitten in der dunklen Oberfläche sofort sichtbar. */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;
    min-height: var(--beruehrung);
    padding: 0.6rem 0.8rem;
    background: var(--grund);
    color: var(--text);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    font: inherit;

    /* `font: inherit` bringt die Zeilenhöhe 1.6 des Fließtexts mit. Ein
       einzeiliges Feld wird davon 45 px hoch, ein <select> ignoriert die
       Angabe und bleibt bei 44 — nebeneinander in einer Zeile ist der
       Versatz zu sehen. Mit 1.4 greift bei beiden die Mindesthöhe. */
    line-height: 1.4;
}

/* Mehrzeilig gelesen wird angenehmer mit mehr Luft. */
textarea { line-height: 1.6; }

/* Ohne das setzt WebKit dem Suchfeld eigene Innenabstände und ein
   Löschkreuz auf, die sich der Rahmenhöhe widersetzen. */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
    border-color: var(--akzent);
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--beruehrung);
    padding: 0 1.25rem;
    background: var(--akzent);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.knopf:hover { background: var(--akzent-hell); }
.knopf.voll { width: 100%; margin-top: 1.1rem; }

.knopf.sekundaer {
    background: var(--flaeche-hoch);
    color: var(--text);
    border-color: var(--rand);
}

.knopf.sekundaer:hover { background: var(--rand); }

.knopf.schlicht {
    background: transparent;
    color: var(--text-leise);
    border-color: var(--rand);
    min-height: 36px;
    padding: 0 0.9rem;
}

.knopf.schlicht:hover { background: var(--flaeche-hoch); color: var(--text); }

/* Kleiner Knopf fuer Aktionen an einer Tabellenueberschrift — die
   Ueberschrift soll die Zeile beherrschen, nicht der Knopf daneben. */
.knopf.klein {
    min-height: 30px;
    padding: 0 0.7rem;
    font-size: 0.8125rem;
}

/* --- Anmeldung ------------------------------------------------------ */

.anmeldung {
    width: 100%;
    max-width: 380px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: 2rem;
}

.anmeldung-kopf { text-align: center; margin-bottom: 1.5rem; }
.anmeldung-kopf p { color: var(--text-leise); margin: 0.2rem 0 0; }

/* --- Vollbild-Knopf ------------------------------------------------- */
/* Grundaussehen fuer beide Einsatzorte. Die Platzierung steckt in
   `.schwebend` (Anmeldeseite) bzw. in tablet.css (Kopfzeile). */

.vollbild-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    /* Fingerfreundlich: 44 px sind die uebliche Mindestgroesse fuer eine
       Trefferflaeche am Tablet. */
    min-height: 44px;
    padding: 0.5rem 0.9rem;

    background: var(--flaeche);
    color: var(--text-leise);
    border: 1px solid var(--rand);
    border-radius: 8px;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

/* Muss sein: Ohne diese Zeile schlaegt display:inline-flex das
   hidden-Attribut, und der Knopf erschiene auch dort, wo der Browser
   gar kein Vollbild kann. */
.vollbild-knopf[hidden] { display: none; }

/* Schwebend unten rechts — Anmeldeseite. viewport-fit=cover steht im
   Layout: Auf Geraeten mit runden Ecken oder Notch klebte der Knopf
   sonst unter der Systemleiste. */
.vollbild-knopf.schwebend {
    position: fixed;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 20;
}

.vollbild-knopf:hover  { color: var(--text); border-color: var(--akzent); }
.vollbild-knopf:active { background: var(--flaeche-hoch); }

.vollbild-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.vollbild-knopf svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

.vollbild-knopf .symbol-zu,
.vollbild-knopf.ist-aktiv .symbol-auf { display: none; }
.vollbild-knopf.ist-aktiv .symbol-zu { display: block; }

.vollbild-knopf.nicht-moeglich {
    color: var(--warnung);
    cursor: not-allowed;
}

.trenner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 0.25rem;
    color: var(--text-leise);
    font-size: 0.8125rem;
}

.trenner::before,
.trenner::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rand);
}

/* --- Meldungen ------------------------------------------------------ */

.meldung {
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border-left: 3px solid var(--akzent);
    background: var(--flaeche-hoch);
}

.meldung.fehler  { border-left-color: var(--fehler);  color: #fecaca; }
.meldung.erfolg  { border-left-color: var(--erfolg);  color: #bbf7d0; }
.meldung.warnung { border-left-color: var(--warnung); color: #fde68a; }
.meldung.info    { border-left-color: var(--akzent); }

.hinweisbox {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-left: 3px solid var(--akzent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    color: var(--text-leise);
}

.hinweisbox strong { color: var(--text); }

.pruefung { margin: 0.75rem 0 0; font-size: 0.875rem; }

code {
    background: var(--grund);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.875em;
}

/* --- Fehlerseite ---------------------------------------------------- */

.fehlerseite { text-align: center; max-width: 560px; }

.fehler-status {
    font-size: 4rem;
    font-weight: 700;
    color: var(--fehler);
    line-height: 1;
    letter-spacing: -0.04em;
}

.fehler-text { color: var(--text-leise); margin: 0.5rem 0 1.5rem; }

.fehler-spur {
    text-align: left;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.75rem;
    color: var(--text-leise);
    margin-bottom: 1.5rem;
}

/* --- Karten und Spalten --------------------------------------------- */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.karte h2 {
    font-size: 1rem;
    margin: 0 0 0.9rem;
    letter-spacing: -0.01em;
}

.karte h3 {
    font-size: 0.875rem;
    color: var(--text-leise);
    margin: 1.25rem 0 0.35rem;
}

.karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.karte-kopf h2 { margin: 0; }
.karte-aktionen { display: flex; gap: 0.5rem; align-items: center; }
.karte-aktionen select { width: auto; min-width: 240px; }

.spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.seitenkopf.mit-aktion {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.statuswechsel select { width: auto; min-width: 220px; }

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

.tabellenrahmen {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow-x: auto;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tabelle th {
    text-align: left;
    padding: 0.7rem 0.9rem;
    background: var(--flaeche-hoch);
    color: var(--text-leise);
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.tabelle td {
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--rand);
    vertical-align: top;
}

.tabelle tbody tr:hover { background: var(--flaeche-hoch); }
.tabelle tr.leer td { color: var(--text-leise); text-align: center; padding: 1.5rem; }
.tabelle tr.leer:hover { background: none; }

.tabelle td small {
    display: block;
    color: var(--text-leise);
    font-size: 0.75rem;
}

.tabelle a { color: var(--akzent-hell); text-decoration: none; font-weight: 500; }
.tabelle a:hover { text-decoration: underline; }

.rechts { text-align: right; }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahl small { display: inline; }
.stark { font-weight: 600; }
.leise { color: var(--text-leise); }
.positiv { color: var(--erfolg); }
.negativ { color: var(--fehler); }
.warnend { color: var(--warnung); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.875em; }

/* Neu eingefügte Zeile kurz hervorheben */
@keyframes aufblitzen {
    from { background: rgba(59, 130, 246, 0.22); }
    to   { background: transparent; }
}

.tabelle tr.neu { animation: aufblitzen 1.2s ease-out; }

/* --- Status und Marker ---------------------------------------------- */

.status, .marker {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    background: var(--flaeche-hoch);
    color: var(--text-leise);
    border: 1px solid var(--rand);
}

.status.offen                 { color: #93c5fd; border-color: #1e40af; }
.status.in_arbeit             { color: #6ee7b7; border-color: #065f46; }
.status.wartet_auf_teile      { color: #fcd34d; border-color: #92400e; }
.status.wartet_auf_pruefer    { color: #d8b4fe; border-color: #6b21a8; }
.status.bereit_zur_abrechnung { color: #f9a8d4; border-color: #9d174d; }
.status.abgeschlossen         { color: var(--text-leise); }

.marker.express { color: #fca5a5; border-color: #991b1b; margin-left: 0.35rem; }
.marker.teil          { color: #93c5fd; }
.marker.arbeit        { color: #6ee7b7; }
.marker.text          { color: var(--text-leise); }
/* Beides sind Positionen ohne Lagerbezug — bewusst ein eigener Farbton,
   damit sie sich in der Liste von Teilen und Arbeit abheben. */
.marker.pauschale     { color: #fcd34d; }
.marker.fremdleistung { color: #f0abfc; }

/* Zustaende einer Inventur. Absichtlich dieselben Farben wie bei den
   Auftragsstatus: „offen" heisst hier wie dort „wird noch bearbeitet". */
.marker.offen     { color: #93c5fd; border-color: #1e40af; }
.marker.gebucht   { color: #6ee7b7; border-color: #065f46; }
.marker.verworfen { color: var(--text-leise); }

/* --- Fotos und Unterschriften ---------------------------------------- */

.mediengitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.medienkachel {
    margin: 0;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 8px;
    overflow: hidden;
}

.medienkachel img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
}

/* Eine Unterschrift ist ein Strich auf hellem Grund — zugeschnitten
   waere sie unlesbar, deshalb vollstaendig und auf weissem Grund. */
.medienkachel.signatur img {
    height: 90px;
    object-fit: contain;
    background: #fff;
}

.medienkachel figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    color: var(--text-leise);
    font-size: 0.8125rem;
}

/* --- Bildbetrachter --------------------------------------------------- */

.bildschau {
    /* Der Dialog nimmt den ganzen Bildschirm ein, damit ein Klick neben
       das Bild ihn schliessen kann. */
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Das Flex-Layout NUR im geoeffneten Zustand.
   Ein geschlossener <dialog> ist per Browservorgabe display:none — ein
   display:flex an der Grundregel schlaegt das und laesst Schliessknopf
   und Pfeile dauerhaft auf der Seite stehen, mitten im Nichts. Genau
   dieselbe Falle wie beim hidden-Attribut des Vollbild-Knopfes. */
.bildschau[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.bildschau::backdrop { background: rgba(0, 0, 0, 0.88); }

.bildschau-buehne {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    /* Platz fuer die Pfeile links und rechts lassen. */
    max-width: calc(100vw - 8rem);
}

.bildschau-buehne img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
    /* Unterschriften sind dunkle Striche auf durchsichtigem Grund —
       auf schwarzem Hintergrund waeren sie unsichtbar. */
    background: #fff;
}

.bildschau-buehne figcaption {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #e4e8ee;
    font-size: 0.875rem;
}

.bildschau-zaehler { color: #8b96a5; font-variant-numeric: tabular-nums; }

.bildschau-pfeil,
.bildschau-schliessen {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.08);
    color: #e4e8ee;
    border: 0;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.bildschau-pfeil:hover,
.bildschau-schliessen:hover { background: rgba(255, 255, 255, 0.18); }

.bildschau-pfeil[hidden] { display: none; }

.bildschau-schliessen {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 1.5rem;
}

/* Auf schmalen Geraeten rutschen die Pfeile ueber das Bild, sonst bliebe
   fuer das Bild selbst kaum Platz. */
@media (max-width: 700px) {
    .bildschau-buehne { max-width: 100vw; }
    .bildschau-pfeil { position: absolute; top: 50%; transform: translateY(-50%); }
    .bildschau-pfeil.links { left: 0.5rem; }
    .bildschau-pfeil.rechts { right: 0.5rem; }
}

/* --- Dialog (Position bearbeiten) ------------------------------------ */

.wm-dialog {
    width: min(560px, calc(100vw - 2rem));
    padding: 1.5rem;
    background: var(--flaeche);
    color: var(--text);
    border: 1px solid var(--rand);
    border-radius: 12px;
}

/* Der Rueckstrahl hinter dem Dialog. Ohne das ist auf einem dunklen
   Layout kaum zu sehen, dass der Rest der Seite gerade gesperrt ist. */
.wm-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.wm-dialog h2 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.wm-dialog .formularleiste { margin-top: 1.25rem; }

.dialogreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0 1rem;
}

/* Ein ausgeblendetes Feld darf keinen Platz im Raster belegen —
   sonst klafft bei einer Textzeile eine Luecke. */
.dialogreihe .feld[hidden] { display: none; }

/* Aktionsspalte: „Ändern“ und „Storno“ gehoeren nebeneinander. */
.nichtumbrechen { white-space: nowrap; }
.nichtumbrechen .knopf + .knopf { margin-left: 0.35rem; }

/* --- Statusfilter ---------------------------------------------------- */

.statusfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--rand);
    border-radius: 999px;
    color: var(--text-leise);
    text-decoration: none;
    font-size: 0.875rem;
}

.filter:hover { background: var(--flaeche-hoch); color: var(--text); }
.filter.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.filter span {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.75rem;
}

/* --- Datenliste ------------------------------------------------------ */

.datenliste {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.datenliste dt { color: var(--text-leise); font-size: 0.875rem; }
.datenliste dd { margin: 0; }
.datenliste dd small { color: var(--text-leise); }

.fliesstext { margin: 0; color: var(--text-leise); }

/* --- Statusverlauf --------------------------------------------------- */

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

.verlauf li {
    display: flex;
    gap: 0.9rem;
    padding: 0.4rem 0;
    border-left: 2px solid var(--rand);
    padding-left: 0.9rem;
    margin-left: 0.3rem;
}

.verlauf-zeit {
    color: var(--text-leise);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.verlauf-text small { display: block; color: var(--text-leise); font-size: 0.75rem; }

/* --- FIFO-Auflösung -------------------------------------------------- */

.fifo-aufloesung {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.fifo-teil {
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-leise);
}

.fifo-teil small { display: block; font-size: 0.6875rem; opacity: 0.75; }

/* --- Summenblock ----------------------------------------------------- */

.summenblock {
    margin-top: 1rem;
    margin-left: auto;
    max-width: 340px;
}

.summenzeile {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.35rem 0;
    font-variant-numeric: tabular-nums;
}

.summenzeile.gross {
    border-top: 1px solid var(--rand);
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.summenzeile.ertrag {
    border-top: 1px solid var(--rand);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    color: var(--erfolg);
}

.summenzeile.leise { color: var(--text-leise); font-size: 0.875rem; }

/* --- Buchungsbereich -------------------------------------------------- */

.buchungsraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.buchungsfeld label {
    display: block;
    color: var(--text-leise);
    font-size: 0.8125rem;
    margin-bottom: 0.35rem;
}

.buchungszeile {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.buchungszeile input { flex: 0 0 110px; }
.buchungszeile .knopf { flex: 1; }

.buchungshinweis {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-leise);
    min-height: 1.4em;
}

.buchungshinweis.ok      { color: var(--erfolg); }
.buchungshinweis.warnung { color: var(--warnung); }
.buchungshinweis.fehler  { color: var(--fehler); }

.trefferliste {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
}

.treffer {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-top: none;
    color: var(--text);
    padding: 0.55rem 0.8rem;
    font: inherit;
    cursor: pointer;
}

.treffer:first-child { border-top: 1px solid var(--rand); }
.treffer:hover { background: var(--flaeche-hoch); }
.treffer.leer { color: var(--text-leise); cursor: default; }

.treffer-name { display: block; }
.treffer-info { display: block; color: var(--text-leise); font-size: 0.75rem; }

/* --- Vorlageneditor -------------------------------------------------- */

/* Jede Position ist ein eigenes Formular, keine Tabellenzeile: Ein
   <form> darf ein <tr> nicht umschliessen, und die Felder brauchen je
   nach Typ unterschiedlich viel Platz. */
.vorlagenzeile {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rand);
}

.vorlagenzeile:last-of-type { border-bottom: none; }
.vorlagenzeile.neu { border-bottom: none; padding-top: 0; }
.vorlagenzeile.hat-fehler { background: rgba(239, 83, 80, 0.06); }

.zeilennummer {
    flex: 0 0 1.8rem;
    padding-top: 0.5rem;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.zeilenfelder { flex: 1 1 auto; min-width: 0; }

.zeilenreihe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.6rem;
    margin-bottom: 0.6rem;
}

.zeilenreihe:last-child { margin-bottom: 0; }

/* Jedes Feld traegt seine Beschriftung ueber sich. Eine Kopfzeile wie in
   einer Tabelle waere schoener zu lesen, stuende aber beim Umbruch ueber
   den falschen Eingaben — die Felder brechen je nach Breite anders um. */
.zeilenfeld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.zeilenkennung {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-leise);
}

.zeilenfeld input, .zeilenfeld select { width: 100%; }
.zeilenfeld.weit   { flex: 1 1 240px; min-width: 180px; }
.zeilenfeld.schmal { width: 110px; }
.zeilentyp { min-width: 130px; }

/* Das Kaestchen hat seine Beschriftung daneben und braucht keine zweite
   darueber — dafuer eine Grundlinie, die zu den Feldern daneben passt. */
.zeilenhaken { margin-bottom: 0.6rem; white-space: nowrap; }

.zeilenaktionen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    flex: 0 0 auto;
    padding-top: 1.15rem;
}

.zeilenpfeile { display: flex; gap: 0.3rem; }
.zeilenpfeile .knopf { flex: 1 1 0; }

/* --- Zaehlmaske der Inventur ------------------------------------------
   Baut auf denselben .zeilenfeld-Bausteinen auf wie die Vorlagenzeile:
   Beschriftung ueber dem Feld, Umbruch nach Bildschirmbreite. Eine
   eigene Zeilenform braucht es trotzdem — hier ist JEDE Zeile ein
   Formular, und das darf kein Flex-Element mit fester Hoehe sein. */

.zaehlzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.zaehlzeile + .zaehlzeile { margin-top: 0.6rem; }

.zaehlzeile.erfasst {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rand);
}

.zaehlzeile.erfasst:last-of-type { border-bottom: none; }

/* Ein Wert, der nur gelesen wird — gleiche Hoehe wie ein Eingabefeld
   daneben, damit die Zeile nicht wellig wird. */
.zeilenwert {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-variant-numeric: tabular-nums;
}

.zeilenwert small { color: var(--text-leise); margin-left: 0.25rem; }

/* Der aufklappbare Block „Artikel neu anlegen". Bei einer
   Erstinventarisierung steht er offen, sonst zugeklappt — dort ist er
   die Ausnahme. */
.neuerartikel {
    margin-top: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche-hoch);
}

.neuerartikel > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: revert;
}

.neuerartikel[open] > summary { margin-bottom: 0.6rem; }

/* Kurze Erklaerung der Felder, einmal oben statt an jeder Zeile. */
.felderklaerung {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0.6rem 0 0.8rem;
}

.felderklaerung dt { color: var(--text); font-weight: 600; }
.felderklaerung dd { margin: 0; color: var(--text-leise); font-size: 0.875rem; }

@media (max-width: 640px) {
    .felderklaerung { grid-template-columns: 1fr; gap: 0.1rem 0; }
    .felderklaerung dd { margin-bottom: 0.5rem; }
}

/* Nur Bezugspunkt fuer die Trefferliste — die Breite kommt von der
   umgebenden Beschriftung (.zeilenfeld.weit). Eine eigene `flex-basis`
   waere hier falsch: In der Spaltenrichtung von .zeilenfeld legte sie
   die HOEHE fest, und das Feld waere 240 px hoch. */
.artikelfeld { position: relative; display: block; width: 100%; }
.artikelfeld input[type="text"] { width: 100%; }

/* Die Trefferliste legt sich UEBER die folgenden Felder, statt die
   Zeile beim Tippen aufzureissen. */

.artikelfeld .trefferliste {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 100%;
}

.kastenwahl.klein { font-size: 0.8125rem; color: var(--text-leise); }

/* --- Abrechnung und Versandprotokoll --------------------------------- */

.aktionsraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.aktionsfeld strong { display: block; margin-bottom: 0.3rem; }
.aktionsfeld p { margin: 0 0 0.8rem; font-size: 0.875rem; }
.aktionsfeld .knopf { margin-top: 0.6rem; }

.kastenwahl {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1rem;
    color: var(--text-leise);
    font-size: 0.875rem;
    cursor: pointer;
}

.kastenwahl input { width: auto; min-height: 0; }

/* Ein Kaestchen, an dem eine folgenreiche Entscheidung haengt: Kaestchen
   oben, Ueberschrift daneben, Begruendung darunter. `.kastenwahl` ist
   einzeilig und zentriert — ein zweizeiliger Text laege dort neben der
   Mitte des Absatzes statt neben der ersten Zeile. */
.entscheidung {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--warnung);
    border-radius: var(--radius);
    background: rgba(251, 191, 36, 0.06);
    cursor: pointer;
}

.entscheidung input { width: auto; min-height: 0; margin-top: 0.3rem; flex: 0 0 auto; }
.entscheidung > span { display: block; }
.entscheidung > span > strong { display: block; margin-bottom: 0.25rem; }
.entscheidung small { display: block; color: var(--text-leise); line-height: 1.5; }

/* Hervorhebungen INNERHALB der Begruendung bleiben im Fliesstext — sonst
   reisst jedes betonte Wort eine eigene Zeile auf. */
.entscheidung small strong { display: inline; margin: 0; }

/* Die drei Wege zur Menge: scannen, abtippen, Datei einlesen. Sie stehen
   gleichrangig nebeneinander, weil keiner fuer alles der richtige ist. */
.wegweiser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.wegweiser a {
    display: block;
    padding: 0.85rem 1rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}

.wegweiser a:hover { background: var(--flaeche-hoch); border-color: var(--akzent); }
.wegweiser strong { display: block; margin-bottom: 0.15rem; }
.wegweiser small { display: block; color: var(--text-leise); line-height: 1.45; }

/* --- Erfassungsliste: viele Zeilen, ein Feld je Zeile ----------------- */

/* Enger als eine normale Tabelle. Wer vierzig Mengen abtippt, will
   moeglichst viele Zeilen gleichzeitig sehen. */
.tabelle.erfassung td,
.tabelle.erfassung th { padding-top: 0.3rem; padding-bottom: 0.3rem; }

.tabelle.erfassung input[type="number"] {
    width: 100%;
    min-height: 0;
    padding: 0.3rem 0.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tabelle.erfassung input[readonly] { opacity: 0.6; }

/* Eine bereits erfasste Zeile bekommt eine Kante statt einer Flaeche —
   ein Farbblock hinter vierzig Zeilen waere Unruhe ohne Aussage. */
.tabelle.erfassung tr.erfasst td:first-child { box-shadow: inset 2px 0 0 var(--erfolg); }

/* Die Beschriftung einer Checkbox steht inline — ein Hinweistext dahinter
   klebte sonst direkt an ihr, ohne Umbruch und ohne Abstand. */
.feld-kasten .feldhinweis,
.feld-kasten .feldfehler { display: block; margin-top: 0.35rem; }

.versandprotokoll { font-size: 0.875rem; }

.protokollzeile {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--rand);
}

.protokollzeile:last-child { border-bottom: none; }
.protokollzeile small { color: var(--text-leise); }

/* --- Formularseiten --------------------------------------------------- */

.formularseite { max-width: 900px; }

.feldgruppe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.25rem 1.25rem;
}

/* Felder, die die volle Breite brauchen (Textfelder, Anschriften) */
.feldgruppe .feld.breit { grid-column: 1 / -1; }

.feld { margin-bottom: 0.9rem; }

.feld label {
    display: block;
    color: var(--text-leise);
    font-size: 0.8125rem;
    margin-bottom: 0.3rem;
}

.feld.feld-kasten { display: flex; align-items: center; min-height: 44px; }
.feld.feld-kasten label { margin: 0; color: var(--text); font-size: 0.9375rem; }

.pflichtstern { color: var(--fehler); }

.feld.hat-fehler input,
.feld.hat-fehler select,
.feld.hat-fehler textarea {
    border-color: var(--fehler);
}

.feldfehler {
    margin: 0.3rem 0 0;
    color: var(--fehler);
    font-size: 0.8125rem;
}

.feldhinweis {
    margin: 0.3rem 0 0;
    color: var(--text-leise);
    font-size: 0.8125rem;
}

.fehlerliste { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.fehlerliste li { font-size: 0.875rem; }

.formularleiste {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rand);
}

.formularleiste .abstandhalter { flex: 1; }

.knopf.gefahr {
    background: transparent;
    color: #fca5a5;
    border-color: #7f1d1d;
}

.knopf.gefahr:hover { background: #7f1d1d; color: #fff; }

.abschnittstitel {
    grid-column: 1 / -1;
    margin: 1rem 0 0.3rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rand);
    color: var(--text-leise);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.abschnittstitel:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* --- Untermenü --------------------------------------------------------- */

.untermenue {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rand);
}

.untermenue a {
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius);
    color: var(--text-leise);
    text-decoration: none;
    font-size: 0.9375rem;
}

.untermenue a:hover { background: var(--flaeche-hoch); color: var(--text); }
.untermenue a.aktiv { background: var(--flaeche-hoch); color: var(--text); }

.geloescht-zeile { opacity: 0.55; }

/* --- Dashboard und Auswertungen -------------------------------------- */

.kachel.warnend { border-color: #92400e; }
.kachel-wert a { color: var(--akzent-hell); text-decoration: none; }
.kachel-wert.klein { font-size: 1.25rem; }

a.kachel-verweis { text-decoration: none; color: var(--text); display: block; }
a.kachel-verweis:hover { border-color: var(--akzent); }

/* Zuweisungen im Statusverlauf heben sich vom Statuswechsel ab */
.verlauf li.verlauf-zuweisung { border-left-color: var(--akzent); }
.verlauf li.verlauf-zuweisung .verlauf-text { color: var(--text-leise); }

.laufzeit { font-variant-numeric: tabular-nums; font-size: 1.05rem; }

.karte-fuss .marker { display: inline-flex; align-items: center; gap: 0.3rem; }

.statusleiste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
}

.statuskachel {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
}

.statuskachel:hover { border-color: var(--akzent); }
.statuskachel.leer { opacity: 0.5; }
.statuszahl { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.statusname { color: var(--text-leise); font-size: 0.8125rem; }

/* --- Listen ---------------------------------------------------------- */

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

.liste li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rand);
}

.liste li:last-child { border-bottom: none; }
.liste li.dringend { border-left: 3px solid var(--fehler); padding-left: 0.7rem; }

.listen-haupt { min-width: 0; flex: 1; }
.listen-haupt small { display: block; color: var(--text-leise); font-size: 0.8125rem; }
.listen-haupt a { color: var(--akzent-hell); text-decoration: none; }

.listen-neben {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.listen-neben small { display: block; color: var(--text-leise); font-size: 0.75rem; }

.karte-fuss {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rand);
    flex-wrap: wrap;
}

.zeile-dringend { background: rgba(248, 113, 113, 0.06); }

/* --- Diagramm -------------------------------------------------------- */

.diagramm { color: var(--text-leise); }
.diagramm-svg { width: 100%; height: auto; display: block; }

.diagramm-legende {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.legende-eintrag { display: inline-flex; align-items: center; gap: 0.4rem; }

.legende-eintrag i {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
}

.farbe-umsatz { background: #3b82f6; }
.farbe-gewinn { background: #4ade80; }

.balken-umsatz { fill: #3b82f6; }
.balken-gewinn { fill: #4ade80; }
.balken-umsatz:hover, .balken-gewinn:hover { fill-opacity: 0.75; }

.achsentext {
    fill: currentColor;
    font-size: 11px;
    font-family: system-ui, sans-serif;
}

/* --- Anteilsbalken --------------------------------------------------- */

.anteilsbalken {
    position: relative;
    background: var(--grund);
    border-radius: 3px;
    height: 18px;
    min-width: 90px;
    overflow: hidden;
}

.anteilsbalken > div {
    background: var(--akzent);
    height: 100%;
    border-radius: 3px;
}

.anteilsbalken > span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    color: var(--text);
}

.anteilsbalken.schmal { height: 6px; margin-top: 0.35rem; min-width: 0; }

.personenpunkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* --- Zeitraum- und Suchformular -------------------------------------- */

.zeitraumwahl select, .suchformular input { width: auto; min-width: 220px; }

/* --- Zeitraumwahl und Kennzahlvergleich ------------------------------ */

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

.zeitraumwahl .eigenerzeitraum { display: flex; gap: 0.5rem; }
.zeitraumwahl input[type="date"] { width: auto; min-width: 150px; }
.zeitraumwahl [hidden] { display: none; }

/* Die beiden Vergleichswerte unter einer Kennzahl. Bewusst klein und
   ruhig: Die Zahl selbst ist die Aussage, der Vergleich die Einordnung. */
.kachel-vergleich {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.kachel-vergleich small {
    color: var(--text-leise);
    font-size: 0.6875rem;
    margin-left: 0.15rem;
}

/* Nur fuer Vorlesegeraete — die Beschriftung steht sonst doppelt da. */
.nurLesbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.suchformular { display: flex; gap: 0.5rem; }

/* Suche und Filter liegen in EINEM Formular, damit sie sich nicht
   gegenseitig loeschen. Auf schmalen Schirmen bricht die Leiste um,
   statt die Auswahlfelder zusammenzuquetschen. */
.filterleiste {
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.25rem;
}

.filterleiste .filterwahl {
    width: auto;
    min-width: 170px;
    max-width: 240px;
}

/* Das Suchfeld nimmt den Rest der Zeile. Bei fester Breite bliebe rechts
   Luft stehen, während der Platzhalter vorn abgeschnitten wird. */
.filterleiste input[type="search"] { flex: 1 1 220px; }

/* --- Scheckheft ------------------------------------------------------ */

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

.scheckheft li {
    display: flex;
    gap: 1.25rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rand);
}

.scheckheft li:last-child { border-bottom: none; }

.scheckheft-datum {
    flex: 0 0 120px;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}

.scheckheft-datum small { display: block; font-size: 0.75rem; }
.scheckheft-inhalt p { margin: 0.3rem 0; color: var(--text-leise); }
.scheckheft-inhalt small a { color: var(--akzent-hell); text-decoration: none; }

/* --- Auftragsliste: Suche, Zeitraum, Blaettern (Agent B) ------------- */

.auftragssuche { flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.auftragssuche input[type="search"] { flex: 1 1 260px; }
.auftragssuche select { width: auto; min-width: 170px; }

.auftragssuche-datum { display: flex; flex-direction: column; gap: 0.15rem; }
.auftragssuche-datum span { font-size: 0.75rem; color: var(--text-leise); }
.auftragssuche-datum input { width: auto; }

.blaettern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
}

.blaettern-stand { font-variant-numeric: tabular-nums; }
.blaettern-stand small { color: var(--text-leise); }

/* Antwortformular unter einer Teileanfrage: eigene Zeile unter Text
   und Menge, damit die Liste nicht in die Breite gedrueckt wird. */
.liste li:has(.teileanfrage-antwort) { flex-wrap: wrap; }

.teileanfrage-antwort {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
}

.teileanfrage-antwort input[type="text"] { flex: 1 1 220px; width: auto; }

/* Geloeschte Fahrzeuge in der Kundenakte */
.papierkorb { margin-top: 1rem; }
.papierkorb summary { cursor: pointer; }

/* --- Tablet / Querformat -------------------------------------------- */

@media (max-width: 820px) {
    .kopfzeile { gap: 0.75rem; padding: 0 0.75rem; }
    .benutzername { display: none; }
    .inhalt { padding: 1rem 0.75rem 2rem; }
    .summenblock { max-width: none; }
}

/* --- Tablet und Anmeldeseite (Agent A) ------------------------------ */
/* Anmeldeseite am Werkstatt-Tablet: Namen als große Kacheln, PIN über
   ein Tastenfeld auf dem Bildschirm (anmeldung.js). Die
   Bildschirmtastatur schob sich vorher über den PIN-Block. Alle
   Bedienelemente mindestens 56 px — wie in tablet.css. */

.anmeldung.mit-pin { max-width: 560px; }

.pin-personen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    padding: 0;
    border: none;
}

.pin-personen legend {
    padding: 0;
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.pin-kachel {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 0 1rem 0 1.2rem;
    border: 2px solid var(--rand);
    border-left: 6px solid var(--personenfarbe, var(--akzent));
    border-radius: 10px;
    background: var(--grund);
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

/* Der Radioknopf bleibt für Tastatur und Screenreader erreichbar,
   sichtbar ist nur die Kachel. */
.pin-kachel input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.pin-kachel:has(input:checked) {
    border-color: var(--personenfarbe, var(--akzent));
    background: var(--flaeche-hoch);
    box-shadow: 0 0 0 2px var(--personenfarbe, var(--akzent));
}

.pin-kachel:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }

.pin-feld {
    min-height: 56px;
    font-size: 1.6rem !important;
    letter-spacing: 0.4em;
    text-align: center;
}

/* PIN-Felder sind type="text" (nur so kommt die Zifferntastatur) und
   werden hier verdeckt. Wo der Browser das nicht kann, schalten app.js
   und anmeldung.js das Feld auf type="password" zurueck. */
.pin-eingabe { -webkit-text-security: disc; }

.pin-hinweis { min-height: 1.4em; margin-top: 0.4rem; color: var(--warnung); }

.pin-anmelden { min-height: 56px; font-size: 1.1rem; }

/* --- Mängel und Freigabe (Agent A2) --- */

/* Stand der Kundenentscheidung als eigene Zeile unter dem Mangel */
.freigabe-stand {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--flaeche-hoch);
    color: var(--text-leise);
}

.freigabe-stand.angefragt,
.freigabe-stand.fehlt       { color: var(--warnung); }
.freigabe-stand.fehlt       { border: 1px dashed var(--warnung); }
.freigabe-stand.freigegeben { color: var(--erfolg); }
.freigabe-stand.abgelehnt   { color: #fff; background: #991b1b; }

.marker.freigabe-wartet { color: var(--warnung); border-color: #92400e; margin-left: 0.5rem; }

.liste li:has(.freigabe-formular) { flex-wrap: wrap; }

.freigabe-formular {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
}

.freigabe-formular select { flex: 0 1 160px; width: auto; }
.freigabe-formular input[type="text"] { flex: 1 1 220px; width: auto; }

/* --- Annahme, Dubletten, Vorlagen (Agent C2) ------------------------ */

/* Hinweis der Werkstatt an einer Teileanfrage mit Artikel — eigene
   Zeile unter dem Artikelnamen, damit er nicht übersehen wird. */
.liste li:has(.teileanfrage-hinweis) { flex-wrap: wrap; }

.teileanfrage-hinweis {
    flex: 1 1 100%;
    margin: 0;
    padding: 0.35rem 0.6rem;
    border-left: 3px solid var(--warnung);
    background: var(--flaeche-hoch);
    font-size: 0.875rem;
}

.teileanfrage-kennung {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-leise);
}

/* Dublettenwarnung bei Kunde und Kennzeichen */
.dublettenliste { margin: 0.5rem 0; padding-left: 1.2rem; }
.dublettenliste li { margin: 0.35rem 0; }
.dublettenliste small { color: var(--text-leise); margin: 0 0.35rem; }
.dublettenliste .marker { margin-left: 0.35rem; }
.dublettenliste .knopf { margin-left: 0.5rem; }

/* Kostenvoranschlag aus der Vorlage in der Annahme */
.annahme-vorschau { margin-top: 0.6rem; }
.annahme-vorschau .tabelle td small { display: block; }
.annahme-vorschau .summenzeile { max-width: 32rem; margin-left: auto; }

/* --- Abrechnung und Arbeitszeit (Agent B2) --------------------------- */

/* Richtzeit, Istzeit, Abweichung und Kostenvoranschlag nebeneinander —
   die Entscheidung „Richtzeit oder Istzeit" faellt im Vergleich, nicht
   aus dem Gedaechtnis. */
.az-vergleich {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.az-wert {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
}

.az-wert strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.az-wert small { color: var(--text-leise); }
.az-wert .marker { align-self: flex-start; margin: 0.3rem 0 0; }

.az-beschriftung {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-leise);
}

.az-personen { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: 0.8125rem; }
.az-personen li { display: flex; justify-content: space-between; gap: 0.5rem; }

.az-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; }
.az-aktionen p { flex: 1 1 100%; margin: 0.3rem 0 0; }

.az-eintraege { margin-top: 1rem; }
.az-eintraege > summary { cursor: pointer; color: var(--text-leise); margin-bottom: 0.6rem; }

.marker.az-offen       { color: #93c5fd; border-color: #1e40af; }
.marker.az-intern      { color: var(--text-leise); }
.marker.az-abgerechnet { color: #6ee7b7; border-color: #065f46; }

.az-betrag { font-size: 1.4rem; font-weight: 600; margin: 0.4rem 0 0.8rem; }

/* Zahlart als Auswahl, nicht als vier Knoepfe: Erst waehlen, dann das
   Datum pruefen, dann einmal bestaetigen. */
.zahlart-wahl { border: 0; padding: 0; margin: 0 0 0.8rem; }
.zahlart-wahl legend { padding: 0; margin-bottom: 0.4rem; color: var(--text-leise); font-size: 0.875rem; }

/* Rueckfragedialog: Sperren rot, Warnungen gelb — auf einen Blick, ob
   „Trotzdem" ueberhaupt in Frage kommt. */
.wm-frage h3 { margin: 1rem 0 0.35rem; font-size: 0.875rem; }
.wm-frage h3.sperre  { color: var(--fehler); }
.wm-frage h3.warnung { color: var(--warnung); }
.frage-liste { margin: 0; padding-left: 1.2rem; }
.frage-liste li { margin: 0.2rem 0; }
.frage-liste.sperre li::marker  { color: var(--fehler); }
.frage-liste.warnung li::marker { color: var(--warnung); }
.wm-frage .formularleiste { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* =====================================================================
   Hilfe
   Seitenleiste links, Text rechts. Die Kapitel sind handgeschriebenes
   HTML; die Bausteine unten (.hilfe-hinweis, .hilfe-schritte, …) sind
   ihr gesamter Werkzeugkasten.
   ===================================================================== */

.nav-hilfe { margin-left: 0.5rem; border: 1px solid var(--rand); }

.nur-vorleser {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hilfe {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.hilfe-leiste {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.hilfe-suche input { width: 100%; margin-bottom: 1rem; }

.hilfe-verzeichnis a {
    display: block;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    color: var(--text-leise);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
}
.hilfe-verzeichnis a:hover { background: var(--flaeche-hoch); color: var(--text); }
.hilfe-verzeichnis a.aktiv { background: var(--flaeche-hoch); color: var(--text); box-shadow: inset 3px 0 0 var(--akzent); }
.hilfe-verzeichnis ul { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.hilfe-gruppe {
    margin: 0.9rem 0 0.25rem;
    padding: 0 0.6rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-leise);
}

.hilfe-text { max-width: 820px; min-width: 0; }
.hilfe-brotkrumen { font-size: 0.85rem; color: var(--text-leise); margin-bottom: 0.5rem; }
.hilfe-brotkrumen a { color: var(--text-leise); }
.hilfe-kopf h1 { font-size: 1.75rem; margin: 0 0 0.35rem; letter-spacing: -0.02em; }
.hilfe-einleitung { font-size: 1.05rem; color: var(--text-leise); margin: 0 0 0.75rem; }
.hilfe-zielgruppe { font-size: 0.85rem; color: var(--text-leise); margin: 0 0 1.5rem; }

.hilfe-rolle {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    margin-right: 0.25rem;
    border-radius: 999px;
    background: var(--flaeche-hoch);
    border: 1px solid var(--rand);
    font-size: 0.75rem;
    color: var(--text);
}

.hilfe-inhalt {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 0.9rem 1.25rem;
    margin-bottom: 2rem;
}
.hilfe-inhalt p { margin: 0 0 0.35rem; font-weight: 600; font-size: 0.9rem; }
.hilfe-inhalt ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; }
.hilfe-inhalt li { break-inside: avoid; font-size: 0.9rem; }

/* --- Kapiteltext ----------------------------------------------------- */

.hilfe-rumpf { font-size: 1rem; line-height: 1.7; }
.hilfe-rumpf h2 {
    font-size: 1.3rem;
    margin: 2.5rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rand);
    letter-spacing: -0.01em;
    scroll-margin-top: 1rem;
}
.hilfe-rumpf h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.hilfe-rumpf h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; scroll-margin-top: 1rem; }
.hilfe-rumpf h4 { font-size: 0.95rem; margin: 1.25rem 0 0.35rem; color: var(--text-leise); }
.hilfe-rumpf p, .hilfe-rumpf ul, .hilfe-rumpf ol { margin: 0 0 0.9rem; }
.hilfe-rumpf li { margin: 0.2rem 0; }
.hilfe-rumpf a { color: var(--akzent-hell); }
.hilfe-rumpf dl { margin: 0 0 1rem; }
.hilfe-rumpf dt { font-weight: 600; margin-top: 0.75rem; }
.hilfe-rumpf dd { margin: 0.15rem 0 0 1.25rem; }

/* Nummerierte Schritt-für-Schritt-Anleitung */
.hilfe-schritte { counter-reset: schritt; list-style: none; padding-left: 0; }
.hilfe-schritte > li {
    counter-increment: schritt;
    position: relative;
    padding: 0.1rem 0 0.6rem 2.6rem;
}
.hilfe-schritte > li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--akzent);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hinweiskästen */
.hilfe-hinweis, .hilfe-tipp, .hilfe-warnung {
    border: 1px solid var(--rand);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--flaeche);
    padding: 0.8rem 1rem;
    margin: 0 0 1rem;
}
.hilfe-hinweis { border-left-color: var(--akzent); }
.hilfe-tipp    { border-left-color: var(--erfolg); }
.hilfe-warnung { border-left-color: var(--warnung); }
.hilfe-hinweis > :last-child, .hilfe-tipp > :last-child, .hilfe-warnung > :last-child { margin-bottom: 0; }
.hilfe-hinweis::before, .hilfe-tipp::before, .hilfe-warnung::before {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.hilfe-hinweis::before { content: "Hinweis"; color: var(--akzent-hell); }
.hilfe-tipp::before    { content: "Tipp";    color: var(--erfolg); }
.hilfe-warnung::before { content: "Achtung"; color: var(--warnung); }

/* Bezeichnungen aus der Oberfläche */
.hilfe-knopf {
    display: inline-block;
    padding: 0 0.45rem;
    border: 1px solid var(--rand);
    border-radius: 5px;
    background: var(--flaeche-hoch);
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
}
.hilfe-pfad { font-weight: 600; color: var(--text); }
.hilfe-feld { font-style: italic; }
.hilfe-status {
    display: inline-block;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--flaeche-hoch);
    font-size: 0.85em;
    white-space: nowrap;
}
.hilfe-rumpf kbd {
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--rand);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.85em;
}

/* Tabellen */
.hilfe-tabelle { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.93rem; }
.hilfe-tabelle th, .hilfe-tabelle td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--rand);
}
.hilfe-tabelle th { color: var(--text-leise); font-weight: 600; background: var(--flaeche); }

/* Ablauf als Kette von Schritten: A → B → C */
.hilfe-ablauf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hilfe-ablauf li {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--flaeche);
    font-size: 0.9rem;
}
.hilfe-ablauf li + li::before { content: "\2192"; margin: 0 0.45rem 0 -0.1rem; color: var(--text-leise); }

/* Häufige Fragen: <details><summary>Frage</summary>Antwort</details> */
.hilfe-rumpf details {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    padding: 0.6rem 1rem;
    margin: 0 0 0.6rem;
}
.hilfe-rumpf summary { cursor: pointer; font-weight: 600; }
.hilfe-rumpf details[open] summary { margin-bottom: 0.5rem; }

/* Blättern am Seitenende */
.hilfe-blaettern {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rand);
}
.hilfe-blaettern a {
    display: block;
    padding: 0.7rem 1rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    max-width: 48%;
}
.hilfe-blaettern a:hover { background: var(--flaeche-hoch); }
.hilfe-blaettern .weiter { text-align: right; margin-left: auto; }
.hilfe-blaettern small { display: block; color: var(--text-leise); font-size: 0.78rem; }

/* Übersicht */
.hilfe-bereich { margin-bottom: 2rem; }
.hilfe-bereich h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
.hilfe-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; }
.hilfe-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}
.hilfe-kachel:hover { border-color: var(--akzent); }
.hilfe-kachel span { color: var(--text-leise); font-size: 0.88rem; line-height: 1.45; }
.hilfe-kachel .hilfe-kachel-rollen { margin-top: auto; padding-top: 0.25rem; }

/* Suchergebnisse */
.hilfe-treffer { list-style: none; padding: 0; margin: 0; }
.hilfe-treffer li { padding: 0.9rem 0; border-bottom: 1px solid var(--rand); }
.hilfe-treffer-titel { font-weight: 600; font-size: 1.05rem; color: var(--akzent-hell); }
.hilfe-treffer-abschnitt { color: var(--text-leise); font-size: 0.9rem; margin-left: 0.35rem; }
.hilfe-treffer p { margin: 0.3rem 0 0; color: var(--text-leise); font-size: 0.93rem; }
.hilfe-treffer mark { background: rgba(251, 191, 36, 0.25); color: var(--text); border-radius: 3px; padding: 0 0.1rem; }

@media (max-width: 900px) {
    .hilfe { grid-template-columns: minmax(0, 1fr); }
    .hilfe-leiste { position: static; max-height: none; }
    .hilfe-inhalt ol { columns: 1; }
}

@media print {
    .kopfzeile, .hilfe-leiste, .hilfe-blaettern, .hilfe-inhalt { display: none !important; }
    .hilfe { display: block; }
    body { background: #fff; color: #000; }
    .hilfe-rumpf a { color: #000; }
}