/* =============================================================================
   ERP - Zentrale Formatvorlage
   ---------------------------------------------------------------------------
   Eine Datei fuer alle Ansichten. Wird in base.html.twig eingebunden,
   jedes Template erbt davon.

   Aufbau
     1  Gestaltungswerte (Custom Properties)
     2  Grundlagen und Zuruecksetzung
     3  Seitengeruest
     4  Navigation
     5  Karten und Abschnitte
     6  Tabellen
     7  Formulare
     8  Schaltflaechen
     9  Statusmarken
    10  Meldungen
    11  Seitenblaetterung
    12  Hilfsklassen
    13  Mobil
    14  Dunkelmodus
    15  Druck

   Grundsatz: Zahlen sind tabellarisch, Betraege rechtsbuendig. In einer Liste
   mit 40 Rechnungsbetraegen entscheidet das ueber Lesbarkeit.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1  Gestaltungswerte
   ------------------------------------------------------------------------ */

:root {
    /* Flaechen - leicht kuehles Papierweiss, kein Cremeton */
    --grund:          #f7f8f9;
    --flaeche:        #ffffff;
    --flaeche-ruhig:  #f0f2f4;
    --flaeche-aktiv:  #e7ebef;

    /* Schrift */
    --text:           #16202a;
    --text-ruhig:     #5a6b7a;
    --text-schwach:   #8a99a6;
    --text-invers:    #ffffff;

    /* Linien */
    --linie:          #d9dfe4;
    --linie-stark:    #b8c2cc;

    /* Akzent - Blaupausenblau, aus dem Bauplan entlehnt */
    --akzent:         #1f5f8b;
    --akzent-hell:    #e8f0f6;
    --akzent-dunkel:  #16455f;

    /* Zustaende - gedaempft, nicht signalfarben */
    --erfolg:         #1f7a4d;
    --erfolg-hell:    #e8f4ee;
    --warnung:        #9a6414;
    --warnung-hell:   #fdf4e3;
    --fehler:         #a32d2d;
    --fehler-hell:    #fbeded;
    --neutral:        #5a6b7a;
    --neutral-hell:   #eef1f3;

    /* Schriftfamilien - Systemschriften, keine Webfonts:
       Die Anwendung laeuft ueber einen Reverse Proxy, jede externe
       Schriftart kostet Ladezeit bei jedem Seitenaufruf. */
    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --schrift-zahl: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                    Menlo, Consolas, monospace;

    /* Groessen */
    --gr-xs:   11px;
    --gr-s:    12px;
    --gr-m:    14px;
    --gr-l:    16px;
    --gr-xl:   20px;
    --gr-xxl:  26px;

    /* Abstaende - Vierpunktraster */
    --a1:  4px;
    --a2:  8px;
    --a3: 12px;
    --a4: 16px;
    --a5: 24px;
    --a6: 32px;
    --a7: 48px;

    /* Rundungen */
    --rund-s: 3px;
    --rund-m: 5px;
    --rund-l: 8px;

    /* Schatten - sehr zurueckhaltend */
    --schatten-1: 0 1px 2px rgba(22, 32, 42, .06);
    --schatten-2: 0 2px 8px rgba(22, 32, 42, .10);
    --schatten-3: 0 8px 24px rgba(22, 32, 42, .14);

    /* Masse */
    --kopf-hoehe:    52px;
    --seite-breite:  220px;
    --inhalt-breite: 1240px;

    --uebergang: 120ms ease;
}

/* ---------------------------------------------------------------------------
   2  Grundlagen
   ------------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: var(--gr-m);
    line-height: 1.5;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--a3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

h1 { font-size: var(--gr-xxl); }
h2 { font-size: var(--gr-xl); }
h3 { font-size: var(--gr-l); }
h4 { font-size: var(--gr-m); }

p { margin: 0 0 var(--a3); }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sichtbarer Tastaturfokus - nicht entfernen */
:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--rund-s);
}

hr {
    border: 0;
    border-top: 1px solid var(--linie);
    margin: var(--a5) 0;
}

code, kbd, samp {
    font-family: var(--schrift-zahl);
    font-size: .92em;
}

/* Zahlen laufen ueberall tabellarisch - gleiche Ziffernbreite,
   dadurch untereinander ausgerichtete Betraege und Datumsangaben */
.zahl, td.zahl, .betrag, time, .nummer {
    font-variant-numeric: tabular-nums;
}

.betrag {
    font-family: var(--schrift-zahl);
    text-align: right;
    white-space: nowrap;
}

.nummer {
    font-family: var(--schrift-zahl);
    font-size: .95em;
    letter-spacing: -.02em;
}

/* ---------------------------------------------------------------------------
   3  Seitengeruest
   ------------------------------------------------------------------------ */

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

.kopf {
    height: var(--kopf-hoehe);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a4);
    padding: 0 var(--a5);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 40;
}

.kopf__marke {
    font-weight: 650;
    font-size: var(--gr-l);
    letter-spacing: -.02em;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--a2);
}

.kopf__marke:hover { text-decoration: none; }

.kopf__marke small {
    font-weight: 400;
    font-size: var(--gr-xs);
    color: var(--text-schwach);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.kopf__rechts {
    display: flex;
    align-items: center;
    gap: var(--a4);
    font-size: var(--gr-s);
}

.rumpf {
    flex: 1;
    display: flex;
    min-height: 0;
}

.inhalt {
    flex: 1;
    min-width: 0;
    padding: var(--a5);
}

.inhalt--schmal {
    max-width: 780px;
    margin: 0 auto;
    width: 100%;
}

.inhalt--breit {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    width: 100%;
}

/* Seitenkopf innerhalb des Inhalts */
.seitenkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--a4);
    margin-bottom: var(--a5);
    flex-wrap: wrap;
}

.seitenkopf h1 { margin: 0; }

.seitenkopf__unterzeile {
    color: var(--text-ruhig);
    font-size: var(--gr-s);
    margin-top: var(--a1);
}

.seitenkopf__aktionen {
    display: flex;
    gap: var(--a2);
    flex-wrap: wrap;
}

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

.navi {
    width: var(--seite-breite);
    flex-shrink: 0;
    background: var(--flaeche);
    border-right: 1px solid var(--linie);
    padding: var(--a4) 0;
    overflow-y: auto;
}

.navi__gruppe { margin-bottom: var(--a5); }
.navi__gruppe:last-child { margin-bottom: 0; }

.navi__titel {
    padding: 0 var(--a4) var(--a2);
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-schwach);
}

.navi__eintrag {
    display: flex;
    align-items: center;
    gap: var(--a3);
    padding: var(--a2) var(--a4);
    color: var(--text-ruhig);
    font-size: var(--gr-m);
    border-left: 2px solid transparent;
    transition: background var(--uebergang), color var(--uebergang);
}

.navi__eintrag:hover {
    background: var(--flaeche-ruhig);
    color: var(--text);
    text-decoration: none;
}

.navi__eintrag--aktiv {
    background: var(--akzent-hell);
    border-left-color: var(--akzent);
    color: var(--akzent-dunkel);
    font-weight: 550;
}

.navi__zaehler {
    margin-left: auto;
    font-size: var(--gr-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-schwach);
    background: var(--flaeche-ruhig);
    padding: 1px var(--a2);
    border-radius: 10px;
}

/* Brotkrumen */
.pfad {
    display: flex;
    align-items: center;
    gap: var(--a2);
    font-size: var(--gr-s);
    color: var(--text-schwach);
    margin-bottom: var(--a3);
    flex-wrap: wrap;
}

.pfad__trenner { color: var(--linie-stark); }

/* ---------------------------------------------------------------------------
   5  Karten
   ------------------------------------------------------------------------ */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund-m);
    margin-bottom: var(--a4);
    overflow: hidden;
}

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

.karte__kopf {
    padding: var(--a3) var(--a4);
    border-bottom: 1px solid var(--linie);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a3);
    background: var(--flaeche);
}

.karte__titel {
    margin: 0;
    font-size: var(--gr-m);
    font-weight: 600;
}

.karte__koerper { padding: var(--a4); }

.karte__fuss {
    padding: var(--a3) var(--a4);
    border-top: 1px solid var(--linie);
    background: var(--flaeche-ruhig);
    font-size: var(--gr-s);
    color: var(--text-ruhig);
}

/* Statusband am linken Rand - kennzeichnet Projektstatus auf einen Blick */
.karte--band { border-left-width: 3px; }
.karte--band-akzent  { border-left-color: var(--akzent); }
.karte--band-erfolg  { border-left-color: var(--erfolg); }
.karte--band-warnung { border-left-color: var(--warnung); }
.karte--band-fehler  { border-left-color: var(--fehler); }

/* Kachelraster fuer das Dashboard */
.raster {
    display: grid;
    gap: var(--a4);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.raster--zwei  { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.raster--weit  { grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }

/* Kennzahl */
.kennzahl__wert {
    font-size: 30px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.kennzahl__label {
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    margin-top: var(--a1);
}

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

.tabelle-rahmen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--gr-m);
}

.tabelle th {
    text-align: left;
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
    padding: var(--a2) var(--a3);
    border-bottom: 1px solid var(--linie-stark);
    white-space: nowrap;
    background: var(--flaeche);
}

.tabelle td {
    padding: var(--a3);
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.tabelle tbody tr:last-child td { border-bottom: 0; }

.tabelle tbody tr:hover { background: var(--flaeche-ruhig); }

.tabelle th.rechts, .tabelle td.rechts { text-align: right; }
.tabelle th.mitte,  .tabelle td.mitte  { text-align: center; }

/* Beschreibungstabelle: Bezeichnung links, Wert rechts */
.werte {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--gr-m);
}

.werte th {
    width: 200px;
    text-align: left;
    font-weight: 500;
    color: var(--text-ruhig);
    padding: var(--a2) var(--a3) var(--a2) 0;
    vertical-align: top;
}

.werte td {
    padding: var(--a2) 0;
    vertical-align: top;
}

.werte tr + tr th, .werte tr + tr td {
    border-top: 1px solid var(--linie);
}

/* Leerzustand - eine Einladung zum Handeln, keine Fehlermeldung */
.leer {
    padding: var(--a7) var(--a5);
    text-align: center;
    color: var(--text-ruhig);
}

.leer__titel {
    font-size: var(--gr-l);
    font-weight: 550;
    color: var(--text);
    margin-bottom: var(--a2);
}

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

.feld { margin-bottom: var(--a4); }
.feld:last-child { margin-bottom: 0; }

.feld__label {
    display: block;
    font-size: var(--gr-s);
    font-weight: 550;
    color: var(--text-ruhig);
    margin-bottom: var(--a1);
}

.feld__pflicht { color: var(--fehler); margin-left: 2px; }

.feld__hinweis {
    font-size: var(--gr-s);
    color: var(--text-schwach);
    margin-top: var(--a1);
}

.feld__fehler {
    font-size: var(--gr-s);
    color: var(--fehler);
    margin-top: var(--a1);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"],
input[type="url"], input[type="search"], select, textarea {
    width: 100%;
    padding: 7px 10px;
    font-family: inherit;
    font-size: var(--gr-m);
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rund-s);
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}

input[type="number"], input[type="date"] {
    font-variant-numeric: tabular-nums;
}

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--text-schwach);
}

input:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px var(--akzent-hell);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--flaeche-ruhig);
    color: var(--text-schwach);
    cursor: not-allowed;
}

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

textarea { min-height: 90px; resize: vertical; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6b7a' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.ankreuz {
    display: flex;
    align-items: flex-start;
    gap: var(--a2);
    font-size: var(--gr-m);
    cursor: pointer;
    margin-bottom: var(--a2);
}

.ankreuz input { margin-top: 3px; flex-shrink: 0; }

/* Feldgruppen nebeneinander */
.feldgruppe {
    display: grid;
    gap: var(--a4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.formular__aktionen {
    display: flex;
    gap: var(--a2);
    align-items: center;
    padding-top: var(--a4);
    margin-top: var(--a4);
    border-top: 1px solid var(--linie);
    flex-wrap: wrap;
}

/* Suchleiste */
.suche {
    display: flex;
    gap: var(--a2);
    align-items: center;
    margin-bottom: var(--a4);
    flex-wrap: wrap;
}

.suche input[type="search"] { max-width: 320px; }

/* ---------------------------------------------------------------------------
   8  Schaltflaechen
   ------------------------------------------------------------------------ */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--a2);
    padding: 7px 14px;
    font-family: inherit;
    font-size: var(--gr-m);
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rund-s);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--uebergang), border-color var(--uebergang);
}

.knopf:hover {
    background: var(--flaeche-ruhig);
    border-color: var(--text-schwach);
    text-decoration: none;
}

.knopf:active { background: var(--flaeche-aktiv); }

.knopf:disabled, .knopf[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.knopf--haupt {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--text-invers);
}

.knopf--haupt:hover {
    background: var(--akzent-dunkel);
    border-color: var(--akzent-dunkel);
}

.knopf--gefahr {
    background: var(--fehler);
    border-color: var(--fehler);
    color: var(--text-invers);
}

.knopf--gefahr:hover { background: #8a2424; border-color: #8a2424; }

.knopf--still {
    background: transparent;
    border-color: transparent;
    color: var(--text-ruhig);
}

.knopf--still:hover { background: var(--flaeche-ruhig); color: var(--text); }

.knopf--klein { padding: 4px 10px; font-size: var(--gr-s); }
.knopf--gross { padding: 10px 20px; font-size: var(--gr-l); }
.knopf--voll  { width: 100%; }

.knopfgruppe { display: inline-flex; }
.knopfgruppe .knopf { border-radius: 0; margin-left: -1px; }
.knopfgruppe .knopf:first-child {
    border-radius: var(--rund-s) 0 0 var(--rund-s);
    margin-left: 0;
}
.knopfgruppe .knopf:last-child {
    border-radius: 0 var(--rund-s) var(--rund-s) 0;
}

/* ---------------------------------------------------------------------------
   9  Statusmarken
   ------------------------------------------------------------------------ */

.marke {
    display: inline-flex;
    align-items: center;
    gap: var(--a1);
    padding: 2px var(--a2);
    font-size: var(--gr-xs);
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--rund-s);
    white-space: nowrap;
    background: var(--neutral-hell);
    color: var(--neutral);
}

.marke--akzent  { background: var(--akzent-hell);  color: var(--akzent-dunkel); }
.marke--erfolg  { background: var(--erfolg-hell);  color: var(--erfolg); }
.marke--warnung { background: var(--warnung-hell); color: var(--warnung); }
.marke--fehler  { background: var(--fehler-hell);  color: var(--fehler); }

/* Projektstatus - Klassennamen entsprechen ProjektStatus::farbe() */
.marke--grau   { background: var(--neutral-hell);  color: var(--neutral); }
.marke--blau   { background: var(--akzent-hell);   color: var(--akzent-dunkel); }
.marke--gruen  { background: var(--erfolg-hell);   color: var(--erfolg); }
.marke--orange { background: var(--warnung-hell);  color: var(--warnung); }
.marke--rot    { background: var(--fehler-hell);   color: var(--fehler); }

/* Punkt fuer kompakte Statusanzeige in Tabellen */
.punkt {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: var(--a1);
    background: var(--neutral);
}

.punkt--gruen  { background: var(--erfolg); }
.punkt--orange { background: var(--warnung); }
.punkt--rot    { background: var(--fehler); }
.punkt--blau   { background: var(--akzent); }

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

.meldung {
    display: flex;
    gap: var(--a3);
    padding: var(--a3) var(--a4);
    border: 1px solid;
    border-radius: var(--rund-m);
    font-size: var(--gr-m);
    margin-bottom: var(--a4);
}

.meldung__inhalt { flex: 1; min-width: 0; }
.meldung__titel  { font-weight: 600; margin-bottom: var(--a1); }

.meldung--erfolg  { background: var(--erfolg-hell);  border-color: #bfe0cd; color: var(--erfolg); }
.meldung--warnung { background: var(--warnung-hell); border-color: #ecd6a8; color: var(--warnung); }
.meldung--fehler  { background: var(--fehler-hell);  border-color: #e8bcbc; color: var(--fehler); }
.meldung--hinweis { background: var(--akzent-hell);  border-color: #c3d8e6; color: var(--akzent-dunkel); }
.meldung--info    { background: var(--flaeche-ruhig);border-color: var(--linie); color: var(--text-ruhig); }

/* ---------------------------------------------------------------------------
   11  Seitenblaetterung
   ------------------------------------------------------------------------ */

.blaettern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a3);
    margin-top: var(--a4);
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    flex-wrap: wrap;
}

.blaettern__seiten { display: flex; gap: var(--a1); }

.blaettern__seite {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--a2);
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    color: var(--text-ruhig);
    font-variant-numeric: tabular-nums;
}

.blaettern__seite:hover { background: var(--flaeche-ruhig); text-decoration: none; }

.blaettern__seite--aktiv {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--text-invers);
}

/* ---------------------------------------------------------------------------
   12  Hilfsklassen
   ------------------------------------------------------------------------ */

.ruhig   { color: var(--text-ruhig); }
.schwach { color: var(--text-schwach); }
.klein   { font-size: var(--gr-s); }
.winzig  { font-size: var(--gr-xs); }
.fett    { font-weight: 600; }

.rechts { text-align: right; }
.mitte  { text-align: center; }

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

.reihe--eng   { gap: var(--a2); }
.reihe--weit  { gap: var(--a5); }
.reihe--enden { justify-content: space-between; }

.stapel { display: flex; flex-direction: column; gap: var(--a3); }

.abstand-oben-s  { margin-top: var(--a2); }
.abstand-oben-m  { margin-top: var(--a4); }
.abstand-oben-l  { margin-top: var(--a5); }
.abstand-unten-s { margin-bottom: var(--a2); }
.abstand-unten-m { margin-bottom: var(--a4); }
.abstand-unten-l { margin-bottom: var(--a5); }

.kein-umbruch { white-space: nowrap; }

.kuerzen {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nur fuer Bildschirmleser */
.nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   13  Mobil
   ---------------------------------------------------------------------------
   Zwei Bruchpunkte statt vieler: 900px trennt Arbeitsplatz von Tablet,
   640px Tablet von Telefon. Mehr Stufen bringen bei einer Anwendung mit
   dieser Informationsdichte keinen Gewinn.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    :root {
        --a5: 16px;
        --a6: 24px;
    }

    .rumpf { flex-direction: column; }

    /* Navigation wird zur waagerechten Leiste */
    .navi {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--linie);
        padding: 0;
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .navi__gruppe {
        display: flex;
        margin-bottom: 0;
    }

    .navi__titel { display: none; }

    .navi__eintrag {
        border-left: 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        padding: var(--a3) var(--a4);
    }

    .navi__eintrag--aktiv {
        border-left: 0;
        border-bottom-color: var(--akzent);
        background: transparent;
    }

    .werte th { width: 140px; }
}

@media (max-width: 640px) {
    body { font-size: var(--gr-m); }

    h1 { font-size: var(--gr-xl); }
    h2 { font-size: var(--gr-l); }

    .kopf { padding: 0 var(--a4); }
    .kopf__rechts { gap: var(--a3); }
    .inhalt { padding: var(--a4); }

    .seitenkopf { flex-direction: column; align-items: stretch; }
    .seitenkopf__aktionen .knopf { flex: 1; }

    .raster, .raster--zwei, .raster--weit { grid-template-columns: 1fr; }

    .feldgruppe { grid-template-columns: 1fr; }

    .formular__aktionen { flex-direction: column-reverse; align-items: stretch; }
    .formular__aktionen .knopf { width: 100%; }

    /* Tabellen werden zu Karten.
       Voraussetzung: Jede Zelle traegt data-label mit der Spaltenbezeichnung.
       Waagerechtes Rollen auf dem Telefon ist unbrauchbar - so bleibt
       jede Zeile am Stueck lesbar. */
    .tabelle--karten thead { display: none; }

    .tabelle--karten tr {
        display: block;
        border: 1px solid var(--linie);
        border-radius: var(--rund-m);
        margin-bottom: var(--a3);
        padding: var(--a2) var(--a3);
        background: var(--flaeche);
    }

    .tabelle--karten td {
        display: flex;
        justify-content: space-between;
        gap: var(--a3);
        padding: var(--a2) 0;
        border-bottom: 1px solid var(--linie);
        text-align: right;
    }

    .tabelle--karten td:last-child { border-bottom: 0; }

    .tabelle--karten td::before {
        content: attr(data-label);
        font-size: var(--gr-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-schwach);
        text-align: left;
        flex-shrink: 0;
    }

    .tabelle--karten tbody tr:hover { background: var(--flaeche); }

    .blaettern { flex-direction: column; align-items: stretch; }
    .blaettern__seiten { justify-content: center; }

    /* Eingabefelder mindestens 16px - sonst zoomt iOS beim Antippen */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], input[type="tel"],
    input[type="url"], input[type="search"], select, textarea {
        font-size: var(--gr-l);
    }

    /* Antippbare Flaechen mindestens 44px hoch */
    .knopf { padding: 10px 16px; min-height: 42px; }
    .navi__eintrag { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   14  Dunkelmodus
   ---------------------------------------------------------------------------
   Folgt der Systemeinstellung. Nur die Werte werden getauscht, keine Regel
   doppelt gepflegt.
   ------------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
    :root {
        --grund:         #12181d;
        --flaeche:       #1a2229;
        --flaeche-ruhig: #222c34;
        --flaeche-aktiv: #2a353e;

        --text:          #e4eaef;
        --text-ruhig:    #9fb0bd;
        --text-schwach:  #71828f;

        --linie:         #2c3841;
        --linie-stark:   #3d4c58;

        --akzent:        #5ba3d0;
        --akzent-hell:   #1c2f3d;
        --akzent-dunkel: #8cc4e8;

        --erfolg:        #5cbb8a;
        --erfolg-hell:   #172b22;
        --warnung:       #d4a256;
        --warnung-hell:  #2e2517;
        --fehler:        #e07a7a;
        --fehler-hell:   #2e1c1c;
        --neutral:       #9fb0bd;
        --neutral-hell:  #222c34;

        --schatten-1: 0 1px 2px rgba(0, 0, 0, .3);
        --schatten-2: 0 2px 8px rgba(0, 0, 0, .4);
        --schatten-3: 0 8px 24px rgba(0, 0, 0, .5);
    }

    select {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239fb0bd' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
    }

    .meldung--erfolg  { border-color: #2a5741; }
    .meldung--warnung { border-color: #5a4a28; }
    .meldung--fehler  { border-color: #5c3232; }
    .meldung--hinweis { border-color: #2a4759; }
}

/* Bewegung nur, wenn gewuenscht */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   15  Druck
   ---------------------------------------------------------------------------
   Ein ERP wird gedruckt: Aufmasse zur Baustelle, Listen zur Besprechung.
   ------------------------------------------------------------------------ */

@media print {
    :root {
        --grund: #fff;
        --flaeche: #fff;
        --flaeche-ruhig: #fff;
        --text: #000;
        --text-ruhig: #333;
        --linie: #999;
        --linie-stark: #666;
    }

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

    .kopf, .navi, .blaettern, .seitenkopf__aktionen,
    .knopf, .suche, .formular__aktionen, .nicht-drucken {
        display: none !important;
    }

    .rumpf { display: block; }
    .inhalt { padding: 0; max-width: none; }

    .karte {
        border: 1px solid #999;
        box-shadow: none;
        break-inside: avoid;
        margin-bottom: 8pt;
    }

    .tabelle { break-inside: auto; }
    .tabelle tr { break-inside: avoid; break-after: auto; }
    .tabelle thead { display: table-header-group; }

    a { color: #000; text-decoration: none; }

    /* Ziel externer Verweise sichtbar machen */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #666;
    }

    .marke { border: 1px solid #999; background: #fff !important; color: #000 !important; }
}
/* =============================================================================
   16  Themensteuerung, Kopf, Fuß, Sprachumschalter

   An erp.css ANHÄNGEN. Nutzt AUSSCHLIESSLICH die Variablen aus Abschnitt 1 -
   --flaeche, --flaeche-ruhig, --text-ruhig und so weiter. Eigene Namen zu
   erfinden war der Fehler der ersten Fassung: Der Kopf wurde hell, die
   Karten blieben dunkel, weil sie ihre Farben aus --flaeche holen.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   16  Themenumschaltung

   Abschnitt 14 folgt der Systemeinstellung. Das bleibt so - aber nur, wenn
   der Anwender KEINE ausdrückliche Wahl getroffen hat.

   Reihenfolge und Spezifität entscheiden: html[data-thema-aktiv] ist
   spezifischer als :root innerhalb der Media-Query und steht später in der
   Datei. Damit gewinnt die ausdrückliche Wahl.
   ------------------------------------------------------------------------ */

html[data-thema-aktiv="dunkel"] {
    --grund:         #12181d;
    --flaeche:       #1a2229;
    --flaeche-ruhig: #222c34;
    --flaeche-aktiv: #2a353e;

    --text:          #e4eaef;
    --text-ruhig:    #9fb0bd;
    --text-schwach:  #71828f;
    --text-invers:   #12181d;

    --linie:         #2c3841;
    --linie-stark:   #3d4c58;

    --akzent:        #5ba3d0;
    --akzent-hell:   #1c2f3d;
    --akzent-dunkel: #8cc4e8;

    --erfolg:        #5cbb8a;
    --erfolg-hell:   #172b22;
    --warnung:       #d4a256;
    --warnung-hell:  #2e2517;
    --fehler:        #e07a7a;
    --fehler-hell:   #2e1c1c;
    --neutral:       #9fb0bd;
    --neutral-hell:  #222c34;

    --schatten-1: 0 1px 2px rgba(0, 0, 0, .3);
    --schatten-2: 0 2px 8px rgba(0, 0, 0, .4);
    --schatten-3: 0 8px 24px rgba(0, 0, 0, .5);

    color-scheme: dark;
}

/* Auswahlpfeil im select an die dunkle Schrift anpassen */
html[data-thema-aktiv="dunkel"] select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239fb0bd' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
}

html[data-thema-aktiv="dunkel"] .meldung--erfolg  { border-color: #2a5741; }
html[data-thema-aktiv="dunkel"] .meldung--warnung { border-color: #5a4a28; }
html[data-thema-aktiv="dunkel"] .meldung--fehler  { border-color: #5c3232; }
html[data-thema-aktiv="dunkel"] .meldung--hinweis { border-color: #2a4759; }

/*
   Ausdrücklich HELL - überschreibt die Systemeinstellung aus Abschnitt 14.
   Ohne diesen Block bliebe die Seite dunkel, sobald das Betriebssystem es
   ist, egal was der Anwender wählt.
*/
html[data-thema-aktiv="hell"] {
    --grund:         #f7f8f9;
    --flaeche:       #ffffff;
    --flaeche-ruhig: #f0f2f4;
    --flaeche-aktiv: #e7ebef;

    --text:          #16202a;
    --text-ruhig:    #5a6b7a;
    --text-schwach:  #8a99a6;
    --text-invers:   #ffffff;

    --linie:         #d9dfe4;
    --linie-stark:   #b8c2cc;

    --akzent:        #1f5f8b;
    --akzent-hell:   #e8f0f6;
    --akzent-dunkel: #16455f;

    --erfolg:        #1f7a4d;
    --erfolg-hell:   #e8f4ee;
    --warnung:       #9a6414;
    --warnung-hell:  #fdf4e3;
    --fehler:        #a32d2d;
    --fehler-hell:   #fbeded;
    --neutral:       #5a6b7a;
    --neutral-hell:  #f0f2f4;

    --schatten-1: 0 1px 2px rgba(22, 32, 42, .06);
    --schatten-2: 0 2px 8px rgba(22, 32, 42, .08);
    --schatten-3: 0 8px 24px rgba(22, 32, 42, .12);

    color-scheme: light;
}

html[data-thema-aktiv="hell"] select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6b7a' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   17  Kopfbereich
   ------------------------------------------------------------------------ */

.kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 40;
}

.kopf__inhalt {
    max-width: 1400px;
    margin: 0 auto;
    padding: .7rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.kopf__marke {
    text-decoration: none;
    color: var(--text);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.kopf__logo {
    height: 2.2rem;
    width: auto;
    display: block;
}

.kopf__name {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -.01em;
}

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

.kopf__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.kopf__link {
    display: block;
    padding: .45rem .8rem;
    border-radius: 5px;
    text-decoration: none;
    color: var(--text-ruhig);
    font-size: .94rem;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.kopf__link:hover {
    background: var(--flaeche-ruhig);
    color: var(--text);
}

.kopf__link--aktiv {
    background: var(--akzent-hell);
    color: var(--akzent);
    font-weight: 500;
}

.kopf__rechts {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.kopf__schalter {
    display: none;
    background: none;
    border: 1px solid var(--linie);
    border-radius: 5px;
    padding: .5rem .7rem;
    cursor: pointer;
    color: var(--text);
}

.kopf__schalter-strich,
.kopf__schalter-strich::before,
.kopf__schalter-strich::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.kopf__schalter-strich::before,
.kopf__schalter-strich::after {
    content: "";
    position: relative;
}

.kopf__schalter-strich::before { top: -6px; }
.kopf__schalter-strich::after  { top: 4px; }

/* ---------------------------------------------------------------------------
   18  Themenumschalter
   ------------------------------------------------------------------------ */

.thema {
    display: flex;
    background: var(--flaeche-ruhig);
    border: 1px solid var(--linie);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.thema__knopf {
    background: none;
    border: none;
    border-radius: 4px;
    padding: .35rem .5rem;
    cursor: pointer;
    color: var(--text-ruhig);
    display: flex;
    align-items: center;
    transition: background .12s, color .12s;
}

.thema__knopf:hover { color: var(--text); }

.thema__knopf--aktiv {
    background: var(--flaeche);
    color: var(--akzent);
    box-shadow: var(--schatten-1);
}

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

/* ---------------------------------------------------------------------------
   19  Sprachumschalter
   ------------------------------------------------------------------------ */

.sprache { position: relative; }

.sprache__knopf {
    background: var(--flaeche-ruhig);
    border: 1px solid var(--linie);
    border-radius: 6px;
    padding: .4rem .7rem;
    cursor: pointer;
    color: var(--text-ruhig);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    transition: color .12s, border-color .12s;
}

.sprache__knopf:hover {
    color: var(--text);
    border-color: var(--linie-stark);
}

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

.sprache__liste {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-end: 0;
    min-width: 10rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 6px;
    box-shadow: var(--schatten-2);
    list-style: none;
    margin: 0;
    padding: .3rem;
    z-index: 50;
}

.sprache__liste--offen { display: block; }

.sprache__eintrag {
    display: block;
    padding: .5rem .7rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text);
    font-size: .92rem;
    white-space: nowrap;
}

.sprache__eintrag:hover { background: var(--flaeche-ruhig); }

.sprache__eintrag--aktiv {
    background: var(--akzent-hell);
    color: var(--akzent);
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   20  Benutzer
   ------------------------------------------------------------------------ */

.benutzer {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem;
}

.benutzer__name {
    color: var(--text-ruhig);
    white-space: nowrap;
}

.benutzer__abmelden {
    color: var(--akzent);
    text-decoration: none;
    white-space: nowrap;
}

.benutzer__abmelden:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   21  Inhalt und Fuß
   ------------------------------------------------------------------------ */

.inhalt {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.6rem 1.2rem 3rem;
    min-height: 60vh;
}

.fuss {
    background: var(--flaeche-ruhig);
    border-top: 1px solid var(--linie);
    margin-top: 3rem;
}

.fuss__inhalt {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.2rem;
    text-align: center;
}

.fuss__zeile {
    margin: 0 0 .3rem;
    color: var(--text-ruhig);
    font-size: .88rem;
    line-height: 1.5;
}

.fuss__zeile--klein { font-size: .82rem; }

/* Leere Zeile aus FirmaDaten nimmt keinen Platz */
.fuss__zeile:empty { display: none; }

.fuss__links {
    list-style: none;
    margin: .8rem 0 .5rem;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.fuss__links a {
    color: var(--text-ruhig);
    text-decoration: none;
    font-size: .85rem;
}

.fuss__links a:hover {
    color: var(--akzent);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   22  Meldungen im Kopfbereich
   ------------------------------------------------------------------------ */

.meldung__inhalt {
    max-width: 1400px;
    margin: 0 auto;
    padding: .7rem 1.2rem;
    font-size: .94rem;
}

.meldung--success { background: var(--erfolg-hell);  color: var(--erfolg); }
.meldung--info    { background: var(--akzent-hell);  color: var(--akzent); }
.meldung--warning { background: var(--warnung-hell); color: var(--warnung); }
.meldung--error,
.meldung--danger  { background: var(--fehler-hell);  color: var(--fehler); }

/* ---------------------------------------------------------------------------
   23  Nur für Vorleseprogramme
   ------------------------------------------------------------------------ */

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

/* ---------------------------------------------------------------------------
   24  Rechts nach links

   Arabisch spiegelt das gesamte Layout. Die logischen Eigenschaften -
   inset-inline-end statt right - nehmen das ab.
   ------------------------------------------------------------------------ */

[dir="rtl"] { text-align: right; }

[dir="rtl"] .tabelle th,
[dir="rtl"] .tabelle td { text-align: right; }

/*
   Beträge bleiben rechtsbündig UND links-nach-rechts. Eine Zahlenspalte
   wird von der Einerstelle her gelesen, und 1.234,56 bleibt 1.234,56 -
   auch im arabischen Satz.
*/
[dir="rtl"] .betrag,
[dir="rtl"] .zahl,
[dir="rtl"] .nummer,
[dir="rtl"] td.betrag,
[dir="rtl"] .tabelle--zahlen td {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}

[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[inputmode="decimal"],
[dir="rtl"] .eingabe--zahl,
[dir="rtl"] .eingabe--iban {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .kopf__rechts {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 1.5rem;
}

/*
   Arabische Schrift braucht mehr Zeilenhöhe: Die Buchstaben tragen Punkte
   über und unter der Grundlinie und berühren sich bei 1,45 wie im
   lateinischen Satz.
*/
[lang="ar"] {
    line-height: 1.75;
    font-size: 1.03rem;
}

[lang="ar"] .tabelle { line-height: 1.6; }

/* ---------------------------------------------------------------------------
   25  Schmale Bildschirme
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .kopf__inhalt {
        flex-wrap: wrap;
        gap: .8rem;
    }

    .kopf__schalter {
        display: block;
        order: 3;
    }

    .kopf__liste {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--linie);
        margin-top: .6rem;
        padding-top: .6rem;
    }

    .kopf__liste--offen { display: flex; }

    .kopf__link {
        padding: .7rem .5rem;
        font-size: 1rem;
    }

    .kopf__nav {
        order: 4;
        flex-basis: 100%;
    }

    .kopf__rechts { order: 2; }
}

@media (max-width: 640px) {
    .benutzer__name { display: none; }

    .inhalt      { padding: 1rem .8rem 2rem; }
    .fuss__inhalt { padding: 1.2rem .8rem; }
}

/* ---------------------------------------------------------------------------
   26  Druck
   ------------------------------------------------------------------------ */

@media print {
    .kopf,
    .fuss__links,
    .thema,
    .sprache,
    .benutzer__abmelden,
    .meldung {
        display: none !important;
    }

    .inhalt {
        max-width: none;
        padding: 0;
    }

    /* Auf Papier immer hell, unabhängig von der Bildschirmwahl */
    html[data-thema-aktiv="dunkel"] {
        --grund: #fff;
        --flaeche: #fff;
        --flaeche-ruhig: #fff;
        --text: #000;
        --text-ruhig: #333;
        --linie: #999;
        --linie-stark: #666;
    }
}

/* Rechtetabelle: Beschreibung darf die Statusspalte nicht verdrängen */
.tabelle td.klein.ruhig { max-width: 22ch; }
.tabelle th.rechts, .tabelle td.rechts { width: 5rem; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Rechtetabelle

   Drei Spalten in einer halbbreiten Karte: Der Code braucht seinen Platz,
   die Statusspalte darf nicht abgeschnitten werden. Also weicht die
   Beschreibung - sie ist die entbehrlichste der drei.
   ------------------------------------------------------------------------ */

.tabelle--rechte td:nth-child(2) {
    max-width: 20ch;
    color: var(--text-ruhig);
    font-size: var(--gr-s);
}

.tabelle--rechte th:last-child,
.tabelle--rechte td:last-child {
    width: 4.5rem;
    white-space: nowrap;
}

@media (max-width: 1400px) {
    .tabelle--rechte th:nth-child(2),
    .tabelle--rechte td:nth-child(2) { display: none; }
}