/* =============================================================================
   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; }

/* Die Dateiauswahl
   ----------------
   Sie fehlte in der Aufzaehlung oben und bekam deshalb weder Rahmen
   noch Flaeche. Im Hellmodus faellt das nicht auf; im Dunkelmodus
   steht ein weisser Kasten auf dunklem Grund.

   Der Text daneben ("Keine Datei ausgewaehlt") gehoert dem Browser
   und ist mit CSS nicht erreichbar. */
input[type="file"] {
    width: 100%;
    padding: 6px 10px;
    font-family: inherit;
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    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="file"]:hover:not(:disabled) {
    border-color: var(--text-schwach);
}

input[type="file"]:focus {
    outline: 0;
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px var(--akzent-hell);
}

input[type="file"]:disabled {
    background: var(--flaeche-ruhig);
    color: var(--text-schwach);
    cursor: not-allowed;
}

/* Der Knopf im Feld. Er ist das einzige Teil, das sich gestalten
   laesst — und das einzige, das im Dunkelmodus wirklich stoerte. */
input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: var(--gr-s);
    font-weight: 500;
    color: var(--text);
    background: var(--flaeche-ruhig);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rund-s);
    cursor: pointer;
    transition: background var(--uebergang), border-color var(--uebergang);
}

input[type="file"]::file-selector-button:hover {
    background: var(--flaeche-aktiv);
    border-color: var(--text-schwach);
}

input[type="file"]:disabled::file-selector-button {
    cursor: not-allowed;
    color: var(--text-schwach);
}

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
   ------------------------------------------------------------------------ */

/* DER GRUNDKNOPF LIEGT FLACH

   Der Rahmen erscheint beim Ueberfahren, nicht vorher. Auf
   einer Seite mit zwoelf Knoepfen sind zwoelf Rahmen zu viel
   — sie sagen nichts darueber, welcher wichtig ist.

   Der durchsichtige Rahmen bleibt stehen, damit nichts
   springt, wenn er sichtbar wird. */
.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-ruhig);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rund-s);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--uebergang),
                border-color var(--uebergang),
                color var(--uebergang);
}

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

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

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

/* DER HAUPTKNOPF IST GEFUELLT

   Er traegt die Handlung, um die es auf der Seite geht:
   Editor oeffnen, Baustein einziehen, Speichern.

   Hoechstens einer bis zwei je Seite. Wer drei setzt, hat
   keinen. */
.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);
}

/* DER LOESCHKNOPF

   Rot beschriftet, damit man ihn erkennt. Gefuellt erst beim
   Ueberfahren — was unwiderruflich ist, soll nicht schon von
   weitem leuchten.

   Diese Fassung ist die einzige. Es gab drei, die sich
   gegenseitig aufhoben. */
.knopf--gefahr {
    color: #a33;
    border-color: transparent;
    background: transparent;
}

.knopf--gefahr:hover {
    background: #a33;
    border-color: #a33;
    color: #fff;
}

.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); }

/* ALLE KNOEPFE IM SEITENKOPF KLEIN

   Die erste Reihe war groesser als die zweite, ohne dass der
   Unterschied etwas bedeutete. Wer Editor und Stoffe
   nebeneinander sieht, soll nicht raten, warum das eine
   wichtiger aussieht. */
.seitenkopf__aktionen .knopf {
    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 */


/* ---------------------------------------------------------------------------
   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; }

    /* `.nach-oben` fehlte hier: Der Pfeil stand im PDF,
       weil niemand ihn als Bedienelement gezaehlt hat. Er
       ist eines. */
    .kopf, .navi, .blaettern, .seitenkopf__aktionen,
    .knopf, .suche, .formular__aktionen, .nicht-drucken,
    .nach-oben {
        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; }
}
/* ---------------------------------------------------------------------------
   Kacheln für Dashboard und Hilfe

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.kachel {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}

.kachel:hover {
    text-decoration: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-2);
}

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

.kachel__zeichen {
    font-size: 26px;
    line-height: 1;
    margin-bottom: var(--a3);
}

.kachel__titel {
    font-weight: 600;
    font-size: var(--gr-l);
    display: flex;
    align-items: baseline;
    gap: var(--a2);
}

.kachel__zahl {
    font-size: var(--gr-s);
    font-variant-numeric: tabular-nums;
    color: var(--text-schwach);
    background: var(--flaeche-ruhig);
    padding: 1px var(--a2);
    border-radius: 10px;
    font-weight: 400;
}

.kachel__text {
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    margin-top: var(--a1);
    line-height: 1.45;
}

/*
   Module, die eingetragen aber noch nicht gebaut sind. Gedämpft statt
   versteckt: So ist sichtbar, was noch kommt - und man klickt nicht
   ins Leere.
*/
.kachel--wartet {
    opacity: .55;
    cursor: default;
}

.kachel--wartet:hover {
    border-color: var(--linie);
    box-shadow: none;
}

.kachel__wartet {
    display: inline-block;
    margin-top: var(--a2);
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
}

/* Hilfeseiten: Fließtext etwas luftiger als in Tabellen */
.inhalt--schmal .karte__koerper p {
    line-height: 1.6;
}

.inhalt--schmal .karte__koerper h3 {
    margin-top: var(--a5);
    margin-bottom: var(--a2);
}

.inhalt--schmal .karte__koerper h3:first-child {
    margin-top: 0;
}

/* Hilfelink im Kopf */
.kopf__hilfe {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--linie);
    border-radius: 50%;
    color: var(--text-ruhig);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    transition: color var(--uebergang), border-color var(--uebergang);
}

.kopf__hilfe:hover {
    color: var(--akzent);
    border-color: var(--akzent);
    text-decoration: none;
}

@media print {
    .kopf__hilfe { display: none !important; }
}
/* ---------------------------------------------------------------------------
   Werkzeugleiste unter den Modullisten

   An erp.css ANHÄNGEN.

   Zurückhaltend gestaltet: Sie ist ein Angebot, keine Hauptnavigation.
   Wer sie braucht, findet sie; wer nicht, übersieht sie.
   ------------------------------------------------------------------------ */

.werkzeuge {
    margin-top: var(--a6);
    padding-top: var(--a4);
    border-top: 1px solid var(--linie);
    display: flex;
    flex-wrap: wrap;
    gap: var(--a5);
}

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

.werkzeuge__titel {
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
    margin-right: var(--a1);
}

@media (max-width: 640px) {
    .werkzeuge {
        flex-direction: column;
        gap: var(--a3);
    }
}

@media print {
    .werkzeuge { display: none !important; }
}
/* ---------------------------------------------------------------------------
   Zeichnungsansicht

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.karte__koerper--randlos {
    padding: 0;
}

.zeichnung__rahmen {
    position: relative;
    overflow: auto;
    max-height: 70vh;
    background: #fff;   /* Zeichnungen sind für weißes Papier gemacht */
    cursor: grab;

    /* Karomuster, damit sichtbar ist, wo die Zeichnung endet */
    background-image:
        linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
        linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.zeichnung__rahmen--zieht {
    cursor: grabbing;
    user-select: none;
}

.zeichnung__bild {
    display: block;
    width: 100%;
    min-height: 400px;
    border: 0;
    transition: transform .08s linear;
}

.zeichnung__werkzeuge {
    display: flex;
    align-items: center;
    gap: var(--a2);
}

.zeichnung__stufe {
    font-size: var(--gr-s);
    font-variant-numeric: tabular-nums;
    color: var(--text-ruhig);
    min-width: 3.5rem;
    text-align: center;
}

/*
   Im dunklen Thema bleibt die Zeichnungsfläche weiß. Eine technische
   Zeichnung ist für Papier gemacht — dunkel umgekehrt wäre unlesbar,
   und Farben in einem P&ID haben Bedeutung.
*/
html[data-thema-aktiv="dunkel"] .zeichnung__rahmen {
    background-color: #fff;
}

@media print {
    .zeichnung__werkzeuge { display: none !important; }

    .zeichnung__rahmen {
        max-height: none;
        overflow: visible;
        background-image: none;
    }
}

/* ---------------------------------------------------------------------------
   Zeichnungsanzeige als <img>

   An erp.css ANHÄNGEN. Ersetzt die Regel aus erp_zeichnung.css, weil <img>
   sich anders verhält als <object>: Es skaliert von sich aus auf die
   Rahmenbreite, statt eine eigene Größe mitzubringen.
   ------------------------------------------------------------------------ */

.zeichnung__bild {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;          /* <img> braucht keine Mindesthöhe */
    border: 0;
    transition: transform .08s linear;

    /* Beim Ziehen soll die Zeichnung nicht als Bild „mitgenommen" werden */
    -webkit-user-drag: none;
    user-select: none;
}

/* ---------------------------------------------------------------------------
   Fußzeile — kompakt

   An erp.css ANHÄNGEN. Überschreibt die Regeln aus erp_kopf_fuss.css.

   Vorher standen dort drei Zeilen mit Anschrift, Kontakt und Bankverbindung —
   die vollständigen Pflichtangaben nach § 5 TMG. Die gehören ins Impressum,
   nicht unter jede Rechnungsliste.
   ------------------------------------------------------------------------ */

.fuss {
    background: transparent;
    border-top: 1px solid var(--linie);
    margin-top: var(--a6);
}

.fuss__inhalt {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--a3) var(--a4);
    text-align: center;

    font-size: var(--gr-xs);
    color: var(--text-schwach);
    line-height: 1.5;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--a1) var(--a2);
}

.fuss__inhalt a {
    color: var(--text-schwach);
    text-decoration: none;
}

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

.fuss__trenner {
    opacity: .4;
    user-select: none;
}

/* Die alten mehrzeiligen Regeln stilllegen */
.fuss__zeile,
.fuss__links {
    display: none;
}

@media (max-width: 640px) {
    .fuss__inhalt {
        padding: var(--a2) var(--a3);
        font-size: 11px;
    }
}

@media print {
    .fuss { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Kalender

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.termin {
    display: flex;
    gap: var(--a4);
    padding: var(--a3) 0;
    border-bottom: 1px solid var(--linie);
    align-items: flex-start;
}

.termin:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.termin__zeit {
    flex: 0 0 6rem;
    font-variant-numeric: tabular-nums;
    font-size: var(--gr-s);
    padding-top: 1px;
}

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

.termin__titel {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--a2);
}

/* Farbpunkt des Kalenders — bei mehreren Quellen die schnellste
   Unterscheidung, ohne eine Spalte zu kosten */
.termin__punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.termin__text {
    margin-top: var(--a1);
    white-space: pre-line;   /* Zeilenumbrüche aus dem iCalendar erhalten */
}

.termin__quelle {
    flex: 0 0 auto;
    text-align: right;
}

.kalender__passwort {
    background: var(--flaeche-ruhig);
    padding: var(--a2) var(--a3) !important;
}

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

.kalender__passwort input[type="password"] {
    max-width: 20rem;
    margin: 0;
}

@media (max-width: 640px) {
    .termin {
        flex-direction: column;
        gap: var(--a1);
    }

    .termin__zeit,
    .termin__quelle {
        flex: none;
        text-align: left;
    }
}

/* ---------------------------------------------------------------------------
   Kalenderansicht: Tag, Woche, Monat, Jahr

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.kal__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a4);
    margin-bottom: var(--a4);
    flex-wrap: wrap;
}

.kal__navigation {
    display: flex;
    align-items: center;
    gap: var(--a2);
}

.kal__titel {
    margin: 0 0 0 var(--a3);
    font-size: var(--gr-xl);
}

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

/* ------------------------------------------------------ Monats- und Wochenraster */

.kal__raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--linie);
    border-left: 1px solid var(--linie);
}

.kal__wochentag {
    padding: var(--a2);
    text-align: center;
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
    background: var(--flaeche-ruhig);
    border-right: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
}

.kal__zelle {
    min-height: 6.5rem;
    padding: var(--a1) var(--a2) var(--a2);
    border-right: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    overflow: hidden;
}

/* In der Wochenansicht ist Platz für mehr */
.kal__raster--woche .kal__zelle {
    min-height: 16rem;
}

/* Tage aus dem Vor- oder Folgemonat. Gedämpft statt weggelassen: Ohne sie
   verrutschte die Spaltenzuordnung, und ein Termin stünde unter dem
   falschen Wochentag. */
.kal__zelle--fremd {
    background: var(--flaeche-ruhig);
    opacity: .5;
}

.kal__zelle--wochenende {
    background: color-mix(in srgb, var(--flaeche-ruhig) 50%, transparent);
}

.kal__zelle--heute {
    box-shadow: inset 0 0 0 2px var(--akzent);
}

.kal__nummer {
    display: inline-block;
    font-size: var(--gr-s);
    font-variant-numeric: tabular-nums;
    color: var(--text-ruhig);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: var(--rund-s);
    margin-bottom: var(--a1);
}

.kal__nummer:hover {
    background: var(--flaeche-aktiv);
    text-decoration: none;
}

.kal__zelle--heute .kal__nummer {
    background: var(--akzent);
    color: var(--text-invers);
    font-weight: 600;
}

.kal__termin {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--gr-xs);
    line-height: 1.4;
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kal__zeit {
    font-variant-numeric: tabular-nums;
    color: var(--text-schwach);
    flex-shrink: 0;
}

.kal__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.kal__mehr {
    display: block;
    font-size: var(--gr-xs);
    color: var(--akzent);
    text-decoration: none;
    margin-top: 2px;
}

/* ------------------------------------------------------------- Jahresansicht */

.kal__jahr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--a3);
}

.kal__monat {
    text-decoration: none;
    color: inherit;
    text-align: center;
    margin-bottom: 0;
    transition: border-color var(--uebergang);
}

.kal__monat:hover {
    border-color: var(--akzent);
    text-decoration: none;
}

.kal__monat--aktuell {
    border-color: var(--akzent);
    border-width: 2px;
}

.kal__monat-name {
    font-weight: 600;
    font-size: var(--gr-s);
    color: var(--text-ruhig);
}

.kal__monat-zahl {
    font-size: 28px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* --------------------------------------------------------------- Tagesliste */

.kal__tagesblock {
    margin-bottom: var(--a5);
}

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

.kal__tagesdatum {
    font-weight: 600;
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    padding-bottom: var(--a1);
    border-bottom: 2px solid var(--linie);
    margin-bottom: var(--a2);
}

/* --------------------------------------------------------------- Schmal */

@media (max-width: 900px) {
    .kal__zelle { min-height: 4.5rem; }
    .kal__raster--woche .kal__zelle { min-height: 8rem; }
    .kal__titel { font-size: var(--gr-l); flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 640px) {
    /* Auf dem Telefon ist ein Sieben-Spalten-Raster unlesbar - die Liste
       darunter bleibt die brauchbare Ansicht */
    .kal__raster { font-size: 10px; }
    .kal__zelle  { min-height: 3.5rem; padding: 2px; }
    .kal__zeit, .kal__text { display: none; }

    .kal__termin::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: currentColor;
        opacity: .4;
    }
}

@media print {
    .kal__werkzeuge, .kal__navigation .knopf { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Balkenplan

   An erp.css ANHÄNGEN.

   Umgesetzt mit Prozentbreiten statt SVG: So skaliert der Plan mit dem
   Fenster, bleibt beim Drucken lesbar, und die Beschriftungen sind
   auswählbarer Text.
   ------------------------------------------------------------------------ */

.gantt {
    font-size: var(--gr-s);
    overflow-x: auto;
}

.gantt__kopf,
.gantt__zeile {
    display: flex;
    align-items: stretch;
    min-height: 2.1rem;
}

.gantt__kopf {
    border-bottom: 2px solid var(--linie-stark);
    background: var(--flaeche-ruhig);
    position: sticky;
    top: 0;
    z-index: 2;
}

.gantt__spalte-namen {
    flex: 0 0 14rem;
    padding: var(--a2) var(--a3);
    border-right: 1px solid var(--linie);
    display: flex;
    align-items: center;
    gap: var(--a2);
    background: var(--flaeche);
    position: sticky;
    left: 0;
    z-index: 1;
}

.gantt__kopf .gantt__spalte-namen {
    background: var(--flaeche-ruhig);
}

.gantt__name {
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt__name:hover {
    color: var(--akzent);
}

/* Vertraglich vereinbarte Termine. Bei Verzug haben sie Folgen
   (§ 5 VOB/B, § 286 BGB) — das sollte man sehen. */
.gantt__vertrag {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--warnung);
    cursor: help;
}

.gantt__zeitachse,
.gantt__spur {
    flex: 1;
    position: relative;
    min-width: 24rem;
}

.gantt__zeile {
    border-bottom: 1px solid var(--linie);
}

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

.gantt__monat {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-schwach);
    border-left: 1px solid var(--linie);
    white-space: nowrap;
    overflow: hidden;
}

/* --------------------------------------------------------------- Balken */

.gantt__balken {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1.1rem;
    border-radius: 3px;
    opacity: .85;
    overflow: hidden;
    min-width: 3px;
}

/* Fortschritt als dunklerer Anteil im Balken selbst — eine zweite Zeile
   darunter kostet Platz und sagt nicht mehr. */
.gantt__fortschritt {
    height: 100%;
    background: rgba(0, 0, 0, .35);
}

/* Meilenstein: Raute, wie im Anlagenbau üblich */
.gantt__raute {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.gantt__marke {
    display: block;
    width: 11px;
    height: 11px;
    transform: rotate(45deg);
    border-radius: 2px;
}

/* IST als schmaler Strich unter dem Soll: Die Abweichung ist damit
   ablesbar, ohne dass der Plan überschrieben wird. */
.gantt__ist {
    position: absolute;
    bottom: 3px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-ruhig);
    min-width: 3px;
}

.gantt__heute {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--fehler);
    opacity: .6;
    z-index: 1;
    pointer-events: none;
}

/* Erledigte Termine gedämpft — der Blick soll auf dem Offenen bleiben */
tr.erledigt {
    opacity: .55;
}

@media (max-width: 640px) {
    .gantt__spalte-namen { flex-basis: 8rem; font-size: var(--gr-xs); }
    .gantt__zeitachse, .gantt__spur { min-width: 18rem; }
}

@media print {
    .gantt { overflow: visible; }
    .gantt__spalte-namen, .gantt__kopf { position: static; }
    .gantt__balken { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Grafischer Terminplaner

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.planer__leiste {
    display: flex;
    align-items: flex-end;
    gap: var(--a4);
    padding: var(--a3) var(--a4);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund-m);
    margin-bottom: var(--a4);
    flex-wrap: wrap;

    /* Bleibt beim Scrollen sichtbar — man wählt die Art oben und klickt
       weiter unten in den Kalender */
    position: sticky;
    top: 3.4rem;
    z-index: 20;
}

.planer__gruppe {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.planer__label {
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
}

.planer__leiste select,
.planer__leiste input {
    margin: 0;
    min-width: 14rem;
}

.planer__hinweis {
    flex: 1;
    min-width: 12rem;
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    padding-bottom: 6px;
}

.planer__navigation {
    display: flex;
    align-items: center;
    gap: var(--a2);
    margin-bottom: var(--a3);
    flex-wrap: wrap;
}

.planer__abstand {
    flex: 1;
}

/* ------------------------------------------------------------------ Monate */

.planer__monate {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--a4);
    margin-bottom: var(--a5);

    /* Verhindert, dass der Finger die Seite scrollt statt zu ziehen */
    touch-action: none;
    user-select: none;
}

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

.planer__monat-kopf {
    padding: var(--a2) var(--a3);
    font-weight: 600;
    font-size: var(--gr-s);
    background: var(--flaeche-ruhig);
    border-bottom: 1px solid var(--linie);
    text-align: center;
}

.planer__raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.planer__wochentag {
    padding: 3px 0;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-schwach);
    border-bottom: 1px solid var(--linie);
}

.planer__tag {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    border-radius: var(--rund-s);
    transition: background .08s;
}

.planer__tag:hover {
    background: var(--flaeche-aktiv);
}

.planer__nummer {
    font-size: var(--gr-xs);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.planer__tag--fremd {
    opacity: .3;
    cursor: default;
}

.planer__tag--fremd:hover {
    background: transparent;
}

.planer__tag--wochenende .planer__nummer {
    color: var(--text-schwach);
}

.planer__tag--heute {
    box-shadow: inset 0 0 0 2px var(--akzent);
}

/* Die laufende Auswahl. Kräftig, damit beim Ziehen über drei Monate
   sichtbar bleibt, was erfasst ist. */
.planer__tag--wahl {
    background: var(--akzent);
    color: var(--text-invers);
}

.planer__tag--wahl .planer__nummer {
    color: var(--text-invers);
    font-weight: 600;
}

/* ------------------------------------------------------------------ Marken */

.planer__marken {
    display: flex;
    gap: 1px;
    height: 4px;
    align-items: center;
}

.planer__marke {
    height: 4px;
    width: 4px;
    border-radius: 1px;
}

/* Meilenstein als Raute, wie im Balkenplan */
.planer__marke--meilenstein {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    border-radius: 1px;
}

/* Eine Periode wird zum durchgehenden Band: Am ersten und letzten Tag
   abgerundet, dazwischen eckig. So ist der Zeitraum als Ganzes zu sehen
   und nicht als Reihe von Punkten. */
.planer__marke--periode {
    width: 100%;
    min-width: 8px;
    border-radius: 0;
}

.planer__marke--periode.planer__marke--erster {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.planer__marke--periode.planer__marke--letzter {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.planer__tag--belegt .planer__marken {
    width: 100%;
    padding: 0 1px;
}

/* --------------------------------------------------------------- Schmal */

@media (max-width: 640px) {
    .planer__leiste {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .planer__leiste select,
    .planer__leiste input { min-width: 0; width: 100%; }

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

@media print {
    .planer__leiste, .planer__navigation { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Planer — Auswahl von Form, Name und Farbe

   An erp.css ANHÄNGEN. Ergänzt erp_planer.css.
   ------------------------------------------------------------------------ */

.planer__gruppe--breit {
    flex: 1;
    min-width: 16rem;
}

.planer__gruppe--breit input {
    width: 100%;
}

/* --------------------------------------------------------- Form-Auswahl */

.planer__wahl {
    display: flex;
    gap: var(--a1);
    background: var(--flaeche-ruhig);
    border: 1px solid var(--linie);
    border-radius: var(--rund-m);
    padding: 2px;
}

.planer__option {
    display: flex;
    align-items: center;
    gap: var(--a2);
    padding: 6px var(--a3);
    border-radius: var(--rund-s);
    cursor: pointer;
    font-size: var(--gr-s);
    white-space: nowrap;
    transition: background .1s;
}

.planer__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.planer__option:hover {
    background: var(--flaeche-aktiv);
}

/* Die gewählte Form deutlich hervorheben: Sie entscheidet, ob geklickt
   oder gezogen wird — wer das verwechselt, bekommt den falschen Eintrag. */
.planer__option:has(input:checked) {
    background: var(--akzent);
    color: var(--text-invers);
    font-weight: 500;
}

.planer__symbol {
    display: inline-block;
    background: currentColor;
    flex-shrink: 0;
}

.planer__symbol--raute {
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    border-radius: 1px;
}

.planer__symbol--balken {
    width: 18px;
    height: 7px;
    border-radius: 2px;
}

/* ------------------------------------------------------------- Farbwahl */

.planer__farben {
    display: flex;
    gap: 4px;
    padding-top: 4px;
}

.planer__farbe {
    cursor: pointer;
    line-height: 0;
}

.planer__farbe input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.planer__farbe span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: var(--rund-s);
    border: 2px solid transparent;
    transition: transform .08s;
}

.planer__farbe:hover span {
    transform: scale(1.12);
}

.planer__farbe:has(input:checked) span {
    border-color: var(--text);
    transform: scale(1.12);
}

/* Für Browser ohne :has — dort bleibt die Farbwahl bedienbar, nur ohne
   sichtbare Markierung. Besser als ein unbenutzbares Feld. */
@supports not selector(:has(*)) {
    .planer__option input:checked + .planer__symbol {
        outline: 2px solid var(--akzent);
        outline-offset: 3px;
    }
}

/* ---------------------------------------------------------------------------
   Positionseditor

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.pos {
    font-size: var(--gr-s);
}

.pos th {
    white-space: nowrap;
}

.pos td {
    padding: var(--a1) var(--a2);
    vertical-align: top;
}

.pos input,
.pos textarea,
.pos select {
    margin: 0;
    padding: 4px 6px;
    font-size: var(--gr-s);
    width: 100%;
}

.pos textarea {
    min-height: 0;
    resize: vertical;
    line-height: 1.4;
    overflow: hidden;   /* wächst über JavaScript mit */
}

/* Spaltenbreiten. Der Text bekommt, was übrig bleibt — er ist das
   Einzige, was wirklich Platz braucht. */
.pos__nr      { width: 4rem; }
.pos__menge   { width: 6rem; }
.pos__einheit { width: 6rem; }
.pos__preis   { width: 7rem; }
.pos__gesamt  { width: 8rem; }
.pos__titel   { width: 4rem; }

.pos [data-gesamt] {
    padding-top: 9px;
    font-variant-numeric: tabular-nums;
}

/* Titelzeilen gliedern die Position, ohne zu zählen. Deutlich abgesetzt,
   damit niemand darin einen Preis sucht. */
.pos--titel {
    background: var(--flaeche-ruhig);
}

.pos--titel textarea {
    font-weight: 600;
}

.pos--titel [data-menge],
.pos--titel [data-preis] {
    opacity: .25;
    pointer-events: none;
}

/* --------------------------------------------------------------- Summen */

.pos__summen {
    max-width: 22rem;
    margin-left: auto;
}

.pos__summen th {
    width: auto;
    text-align: right;
    padding-right: var(--a4);
}

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

/* Die im Browser gerechnete Summe ist vorläufig — maßgeblich ist, was
   nach dem Speichern zurückkommt. Der gestrichelte Rahmen sagt das,
   ohne einen Satz dafür zu brauchen. */
.pos__summe--vorlaeufig {
    border-bottom: 1px dashed var(--text-schwach);
}

@media (max-width: 900px) {
    /* Auf schmalen Geräten die Einheit ausblenden — sie steht meist auf
       dem Standardwert, und der Text braucht den Platz dringender */
    .pos__einheit,
    .pos td:nth-child(4) { display: none; }
}

@media print {
    .pos input, .pos textarea, .pos select {
        border: 0;
        background: transparent;
        padding: 0;
    }

    .pos__titel, .pos th:last-child, .pos td:last-child { display: none; }
}

/* ---------------------------------------------------------------------------
   Eventualpositionen

   An erp.css ANHÄNGEN. Ergänzt erp_pos.css.
   ------------------------------------------------------------------------ */

/* Gedämpft und schräg gestreift: Eine Eventualposition sieht aus wie eine
   Position, zählt aber nicht — das muss auf den ersten Blick erkennbar
   sein, sonst sucht man den Fehler in der Summe. */
.pos--optional {
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 6px,
        var(--flaeche-ruhig) 6px,
        var(--flaeche-ruhig) 12px
    );
}

.pos--optional [data-gesamt] {
    color: var(--text-schwach);
    font-style: italic;
}

.pos--optional textarea {
    color: var(--text-ruhig);
}

@media (max-width: 900px) {
    /* Auf schmalen Geräten bleibt die Eventualspalte — sie ist wichtiger
       als die Einheit, weil sie über den Preis entscheidet */
    .pos th:nth-last-child(2),
    .pos td:nth-last-child(2) { display: table-cell; }
}

/* ---------------------------------------------------------------------------
   Vorbelegte Nummer

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.eingabe--nummer {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Der Hinweis, dass die Nummer erst beim Speichern gezogen wird. Gedämpft
   und schräg: eine Anmerkung, keine Warnung. */
.feld__hinweis--vorschau {
    font-style: italic;
    color: var(--text-schwach);
}

/* ---------------------------------------------------------------------------
   Dashboard — gleich große Kacheln

   An erp.css ANHÄNGEN.

   Das Problem: Die Kacheln waren unterschiedlich hoch, weil die
   Beschreibungen unterschiedlich lang sind. Bei einem Raster fällt das
   sofort auf — die Reihen verrutschen gegeneinander.
   ------------------------------------------------------------------------ */

.kacheln {
    display: grid;

    /* Feste Mindestbreite statt auto-fit mit Prozenten: So sind alle
       Spalten gleich breit, auch die letzte Reihe mit nur zwei Kacheln. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--a4);
    margin-bottom: var(--a5);
}

.kachel {
    /* Die Zeile bestimmt die Höhe, nicht der Inhalt. Alle Kacheln einer
       Reihe sind damit gleich hoch — auch wenn eine Beschreibung zwei
       Zeilen braucht und die nächste keine. */
    display: flex;
    flex-direction: column;
    min-height: 9.5rem;

    padding: var(--a4);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund-m);
    text-decoration: none;
    color: inherit;

    transition: border-color var(--uebergang), transform var(--uebergang);
}

.kachel:hover {
    border-color: var(--akzent);
    text-decoration: none;
    transform: translateY(-2px);
}

.kachel__zeichen {
    font-size: 26px;
    line-height: 1;
    margin-bottom: var(--a2);

    /* Emoji in Farbschriften. Ohne diese Angabe zeigen manche Systeme
       eine schwarzweiße Ersatzform. */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
                 sans-serif;
}

.kachel__titel {
    font-weight: 600;
    font-size: var(--gr-m);
    margin-bottom: var(--a1);
}

.kachel__text {
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    line-height: 1.45;

    /* Nimmt den verbleibenden Platz ein — so steht die Zahl unten immer
       auf derselben Höhe, unabhängig von der Textlänge. */
    flex: 1;

    /* Höchstens zwei Zeilen. Eine dritte würde die Kachel sprengen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kachel__zahl {
    margin-top: var(--a3);
    font-size: var(--gr-s);
    font-variant-numeric: tabular-nums;
    color: var(--text-schwach);
}

.kachel--leer {
    opacity: .55;
    cursor: default;
}

.kachel--leer:hover {
    border-color: var(--linie);
    transform: none;
}

/* --------------------------------------------------------------- Bereiche */

.kacheln__bereich {
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-schwach);
    margin: var(--a5) 0 var(--a3);
    padding-bottom: var(--a1);
    border-bottom: 1px solid var(--linie);
}

.kacheln__bereich:first-child {
    margin-top: 0;
}

@media (max-width: 640px) {
    .kacheln {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--a3);
    }

    .kachel {
        min-height: 7.5rem;
        padding: var(--a3);
    }

    .kachel__zeichen { font-size: 22px; }
    .kachel__titel   { font-size: var(--gr-s); }

    /* Auf dem Telefon nur eine Zeile Beschreibung */
    .kachel__text    { -webkit-line-clamp: 1; }
}

/* ---------------------------------------------------------------------------
   Dashboard-Kacheln — gleich groß

   Korrektur: Die Kachel ist .karte.kachel, dazwischen liegt .karte__koerper.
   Ein min-height auf der äußeren Karte allein genügt nicht — der Flex-Aufbau
   muss durch beide Ebenen laufen, sonst wirkt flex:1 auf dem Text nicht.
   ------------------------------------------------------------------------ */

.raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--a4);
    align-items: stretch;
}

.karte.kachel {
    display: flex;
    flex-direction: column;
    min-height: 10rem;
    margin-bottom: 0;
}

.karte.kachel .karte__koerper {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Nimmt den Platz zwischen Titel und Zahl ein — so steht die Zahl
   in jeder Kachel auf derselben Höhe */
.kachel__text {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kachel__zeichen {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

@media (max-width: 640px) {
    .raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .karte.kachel { min-height: 8rem; }
    .kachel__text { -webkit-line-clamp: 1; }
}

/* ---------------------------------------------------------------------------
   Kachelhöhe — die eigentliche Ursache

   .karte hat margin-bottom, .karte:last-child nicht. Im Raster wirkt der
   Abstand innerhalb der Zelle: Jede Kachel nimmt Höhe plus Rand ein — außer
   der letzten. Deshalb war sie größer.

   Im Grid regelt `gap` die Abstände. Der Rand gehört dort weg.
   ------------------------------------------------------------------------ */

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

/* ---------------------------------------------------------------------------
   Kachelhöhe — mit ausreichender Gewichtung

   Die vorherigen Anläufe hatten dieselbe Gewichtung wie .karte und verloren
   bei Gleichstand. Der Elternselektor .raster davor hebt sie an.
   ------------------------------------------------------------------------ */

.raster > .karte.kachel,
.raster > .kachel {
    min-height: 10rem !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
}

.raster > .kachel > .karte__koerper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.raster > .kachel .kachel__text {
    flex: 1 1 auto !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kachel__zeichen {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ---------------------------------------------------------------------------
   Terminauswahl im Balkenplan

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

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

.terminwahl select {
    margin: 0;
    min-width: 16rem;
}

/* Die Auswahlspalte schmal halten — sie braucht nur Platz für ein
   Kästchen, und jeder Millimeter fehlt sonst dem Termintext */
.tabelle th.mitte.pos__titel,
.tabelle td.mitte input[type="checkbox"] {
    width: 2.5rem;
}

@media (max-width: 640px) {
    .terminwahl {
        flex-direction: column;
        align-items: stretch;
    }

    .terminwahl select { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Symbolbibliothek

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.symbolgitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--a3);
}

.symbolkarte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    overflow: hidden;
    transition: border-color var(--uebergang);
}

.symbolkarte:hover {
    border-color: var(--akzent);
}

/* Weißer Grund unabhängig vom Thema: Ein Fließbild wird gedruckt, und die
   Symbole müssen so aussehen wie später auf dem Papier. */
.symbolkarte__bild {
    background: #ffffff;
    color: #16202a;
    padding: var(--a3);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.symbolkarte__bild svg {
    max-width: 100%;
    max-height: 100%;
}

/* Anschlusspunkte. Sie gehören nicht ins fertige Fließbild — hier zeigen
   sie, wo Leitungen einrasten. */
.symbol__punkt {
    fill: #1f5f8b;
    opacity: .5;
}

.symbolkarte__name {
    padding: var(--a2) var(--a2) 0;
    font-size: var(--gr-xs);
    line-height: 1.3;
    flex: 1;
}

.symbolkarte__fuss {
    display: flex;
    align-items: center;
    gap: var(--a1);
    padding: var(--a1) var(--a2) var(--a2);
    flex-wrap: wrap;
}

.symbolkarte__fuss code {
    font-size: 10px;
    color: var(--text-schwach);
    background: none;
    padding: 0;
}

.symbolkarte__laden {
    margin-left: auto;
    text-decoration: none;
    color: var(--text-schwach);
    font-size: var(--gr-s);
}

.symbolkarte__laden:hover {
    color: var(--akzent);
}

@media (max-width: 640px) {
    .symbolgitter { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .symbolkarte__bild { height: 80px; padding: var(--a2); }
}

@media print {
    .symbolgitter { grid-template-columns: repeat(6, 1fr); }
    .symbolkarte__laden { display: none; }
}

/* ---------------------------------------------------------------------------
   Fließbild-Editor

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Der Editor braucht die volle Höhe. Die Seite darf nicht scrollen —
   sonst wandert die Zeichenfläche beim Ziehen weg. */
body.editor-seite {
    overflow: hidden;
}

.editor {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.4rem);
    margin: 0 calc(-1 * var(--a4));
}

.editor__leiste {
    display: flex;
    align-items: center;
    gap: var(--a2);
    padding: var(--a2) var(--a4);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    flex-shrink: 0;

    /* ══════════ DIE LEISTE MUSS UMBRECHEN ══
     *
     * Ohne diese Zeile laufen die Knoepfe aus dem Fenster
     * hinaus — und was hinaus laeuft, ist nicht anklickbar.
     *
     * Aufgefallen ist es, als Zurueck, Rechtwinklig und Als
     * Modul dazukamen: Auf einem Bildschirm mit 1920 Punkten
     * fehlten die letzten drei. */
    flex-wrap: wrap;
    row-gap: var(--a1);
}

/* ══════════ DER EDITOR FUELLT DAS FENSTER ══
 *
 * `100dvh` statt `100vh`: Auf Mobilgeraeten ist die sichtbare
 * Hoehe kleiner als die Fensterhoehe, solange die Adressleiste
 * eingeblendet ist. */
.editor {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

/* ══════════ DIE PALETTE LAESST SICH EINKLAPPEN ══
 *
 * Auf einem schmalen Bildschirm nehmen Palette und
 * Eigenschaften zusammen 460 Punkte — mehr als ein Viertel.
 * Wer zeichnet, braucht sie nicht dauernd. */
.editor__palette--zu,
.editor__eigenschaften--zu {
    width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

/* ══════════ DIE EINGEKLAPPTE LEISTE ══
 *
 * Sie verschwindet ganz. Ein schmaler Streifen darunter bleibt
 * als Griff — ohne ihn kaeme man nie wieder an die Werkzeuge. */
.editor__leiste--zu {
    display: none;
}

.editor__aufklapp {
    display: block;
    width: 100%;
    padding: 2px 0;
    font-size: var(--gr-s);
    line-height: 1.4;
    text-align: center;
    background: var(--flaeche);
    border: 0;
    border-bottom: 1px solid var(--linie);
    color: var(--text-ruhig);
    cursor: pointer;
}

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

.editor__klapp {
    position: absolute;
    z-index: 5;
    padding: 2px 6px;
    font-size: var(--gr-s);
    line-height: 1;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 3px;
    cursor: pointer;
}

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

.editor__abstand { flex: 1; }

.editor__wahl {
    margin: 0;
    padding: 4px 8px;
    font-size: var(--gr-s);
    min-width: 10rem;
}

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

/* ------------------------------------------------------------- Palette */

.editor__palette {
    width: 220px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--linie);
    background: var(--flaeche);
    padding: var(--a2);
}

.editor__suche {
    width: 100%;
    margin-bottom: var(--a3);
    padding: 6px 8px;
    font-size: var(--gr-s);
}

.palette__titel {
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
    margin: var(--a3) 0 var(--a1);
}

.palette__gitter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.palette__symbol {
    background: #ffffff;
    color: #16202a;
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    padding: 4px;
    cursor: grab;
    text-align: center;
    transition: border-color .08s;
}

.palette__symbol:hover {
    border-color: var(--akzent);
}

.palette__symbol:active {
    cursor: grabbing;
}

.palette__symbol svg {
    width: 100%;
    height: 42px;
}

.palette__name {
    display: block;
    font-size: 9px;
    line-height: 1.2;
    color: #5a6b7a;
    margin-top: 2px;

    /* Zwei Zeilen, dann abschneiden — sonst werden die Kacheln
       unterschiedlich hoch und das Gitter zerfällt */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------- Zeichenfläche */

.editor__blatt {
    flex: 1;
    overflow: auto;
    background: var(--flaeche-ruhig);
    padding: var(--a4);
}

.editor__blatt svg {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    display: block;
}

.element {
    cursor: move;
}

/* Die Auswahl muss deutlich sein — bei zwanzig Symbolen sucht man sonst,
   welches gerade bearbeitet wird */
.element--gewaehlt {
    outline: 2px dashed #1f5f8b;
    outline-offset: 4px;
}

/* ══════════════════════════════════════════════════════════
    MARKIERT UND GRUPPIERT
   ══════════════════════════════════════════════════════════

   Drei Zustände, drei Erscheinungen:

     gewaehlt    blau gestrichelt   — eines, zum Bearbeiten
     markiert    orange durchgezogen — gesammelt mit Strg
     gruppe      grün gestrichelt    — als Ganzes gewaehlt

   Die Farben sind fest, nicht aus den Variablen: Sie bedeuten
   einen Zustand, nicht ein Erscheinungsbild. Im Dunkelmodus
   sollen sie dasselbe heissen.

   Und weil sie fest sind, brauchen sie keine Schriftfarbe —
   es ist nur eine Umrandung, kein Grund.                    */

.element--markiert {
    outline: 2px solid #c2410c;
    outline-offset: 4px;
}

.gruppenteil--gewaehlt {
    outline: 2px dashed #2f7a4d;
    outline-offset: 8px;
}

.leitung {
    cursor: pointer;
}

.leitung--gewaehlt {
    stroke: #1f5f8b !important;
    stroke-width: 3 !important;
}

.anschluss {
    fill: #1f5f8b;
    opacity: .35;
    cursor: crosshair;
    transition: opacity .08s, r .08s;
}

.anschluss:hover {
    opacity: 1;
    r: 7;
}

/* ------------------------------------------------------- Eigenschaften */

.editor__eigenschaften {
    width: 240px;
    flex-shrink: 0;
    overflow-y: auto;
    border-left: 1px solid var(--linie);
    background: var(--flaeche);
    padding: var(--a3);
}

.eigen__leer {
    color: var(--text-schwach);
    font-size: var(--gr-s);
    text-align: center;
    padding: var(--a5) 0;
}

.eigen__paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--a2);
}

.eigen__vorschau {
    background: var(--flaeche-ruhig);
    padding: var(--a2) var(--a3);
    border-radius: var(--rund-s);
    font-size: var(--gr-s);
    margin: var(--a3) 0;
}

.eigen__vorschau strong {
    font-family: ui-monospace, Menlo, monospace;
    font-size: var(--gr-m);
}

/* ------------------------------------------------------------- Dialog */

.editor__dialog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.editor__dialog[hidden] { display: none; }

.editor__dialog-kasten {
    background: var(--flaeche);
    border-radius: var(--rund-m);
    padding: var(--a5);
    width: 26rem;
    max-width: calc(100vw - 2rem);
}

.editor__dialog-kasten h2 {
    margin-top: 0;
    font-size: var(--gr-l);
}

/* ------------------------------------------------------------ Meldung */

.editor__meldung {
    position: fixed;
    bottom: var(--a4);
    left: 50%;
    transform: translateX(-50%);
    background: var(--erfolg);
    color: #ffffff;
    padding: var(--a2) var(--a4);
    border-radius: var(--rund-m);
    font-size: var(--gr-s);
    z-index: 300;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.editor__meldung--fehler {
    background: #a32d2d;
}

@media (max-width: 900px) {
    /* Auf schmalen Geräten ist ein Zeichenprogramm nicht bedienbar.
       Die Palette bleibt, die Eigenschaften weichen. */
    .editor__eigenschaften { display: none; }
    .editor__palette { width: 150px; }
}

/* ---------------------------------------------------------------------------
   Leitungsangaben im Editor

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.editor__klein {
    margin: 0;
    padding: 4px 8px;
    font-size: var(--gr-s);
    width: 5.5rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px) {
    /* Auf schmalen Bildschirmen weichen die Angabefelder — die
       Leitungsart ist wichtiger */
    .editor__klein { display: none; }
}

/* ---------------------------------------------------------------------------
   Wirklinien und Auto-Nummerierung

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Das Element, von dem eine Wirklinie ausgeht. Ohne diese Markierung
   weiß man nach dem ersten Klick nicht, ob er angekommen ist. */
.element--wirkstart {
    outline: 2px solid #1f5f8b;
    outline-offset: 4px;
}

.element--wirkstart::after {
    content: '';
}

/* Im Wirklinienwerkzeug sind alle Elemente anklickbar — der Zeiger sagt es */
[data-editor] .editor__blatt svg[data-werkzeug="wirk"] .element {
    cursor: crosshair;
}

/* ---------------------------------------------------------------------------
   Logovorschau im Formular

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.logo-vorschau {
    /* Weißer Grund unabhängig vom Thema: Ein Logo landet auf einem
       Briefkopf, und der ist weiß. Auf dunklem Grund sähe man nicht,
       ob es einen weißen Kasten mitbringt. */
    background: #ffffff;
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    padding: var(--a3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.logo-vorschau img {
    max-width: 220px;
    max-height: 90px;
    display: block;
}

/* ---------------------------------------------------------------------------
   Firmenseite

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.firma__logo {
    display: flex;
    gap: var(--a5);
    align-items: flex-start;
    flex-wrap: wrap;
}

.firma__logo-form {
    flex: 1;
    min-width: 16rem;
}

.logo-vorschau--leer {
    width: 220px;
    height: 90px;
    border-style: dashed;
    background: var(--flaeche-ruhig);
}

/* Zwei Spalten, damit 65 Einstellungen nicht zu einer endlosen Liste
   werden. Bei Textfeldern über die volle Breite wären es 65 Zeilen. */
.firma__felder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--a4);
}

/* Der technische Schlüssel klein darunter. Wer in der Dokumentation
   nachschlägt, sucht nach firma.bank_iban — nicht nach "Bank iban". */
.feld__schluessel {
    font-size: 10px;
    color: var(--text-schwach);
    margin-top: 2px;
    opacity: .7;
}

.karte__zeichen {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    margin-right: var(--a1);
}

/* Die Speicherleiste bleibt sichtbar — bei acht Karten scrollt man sonst
   ganz nach unten, nur um zu speichern. */
.firma__leiste {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--a3);
    padding: var(--a3) var(--a4);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund-m);
    margin-top: var(--a4);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
}

@media (max-width: 640px) {
    .firma__felder { grid-template-columns: 1fr; }
    .firma__logo { flex-direction: column; }
    .firma__leiste { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------------------
   Dokument hochladen und zuordnen

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.beleg__felder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--a4);
    padding-top: var(--a3);
    margin-top: var(--a3);
    border-top: 1px solid var(--linie);
}

.beleg__felder[hidden] { display: none; }

/* Eine Bezugszeile: Typ, Eintrag, Rolle, Hauptbezug, Entfernen.
   Der mittlere Teil nimmt den Platz — dort stehen die längsten Texte. */
.bezug__zeile {
    display: grid;
    grid-template-columns: 9rem 1fr 9rem auto auto;
    gap: var(--a2);
    align-items: center;
    margin-bottom: var(--a2);
}

.bezug__zeile select {
    margin: 0;
}

.bezug__haupt {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 800px) {
    .bezug__zeile {
        grid-template-columns: 1fr 1fr;
        gap: var(--a2);
        padding: var(--a3);
        border: 1px solid var(--linie);
        border-radius: var(--rund-s);
        margin-bottom: var(--a3);
    }

    /* Der Eintrag über beide Spalten — dort stehen die langen Namen */
    .bezug__zeile [data-bezug-id] { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Dokumentzuordnung — vereinfacht

   An erp.css ANHÄNGEN. Ersetzt die .bezug__zeile-Regeln aus dem
   vorigen Paket; die können bleiben, sie greifen nur nicht mehr.
   ------------------------------------------------------------------------ */

/* Vier Felder in zwei Spalten. Lieferant und Kunde nebeneinander —
   fast nie ist beides gesetzt, aber man sieht auf einen Blick, welches. */
.bezug__gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--a4);
}

.dokgruppe {
    margin-bottom: var(--a4);
}

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

.dokgruppe__titel {
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
    margin-bottom: var(--a2);
    display: flex;
    gap: var(--a2);
}

.tabelle--dicht td {
    padding: 6px 8px;
}

/* Ausgaben rot, Einnahmen grün — bei einer Liste gemischter Belege ist
   das der schnellste Weg zu sehen, wohin das Geld fließt. */
.betrag--aus { color: #a32d2d; font-variant-numeric: tabular-nums; }
.betrag--ein { color: #1f7a4d; font-variant-numeric: tabular-nums; }

.angaben {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--a2) var(--a4);
    margin: 0;
}

.angaben dt {
    font-size: var(--gr-s);
    color: var(--text-schwach);
}

.angaben dd { margin: 0; }

/* ---------------------------------------------------------------------------
   Kachelbereiche mit einstellbarer Spaltenzahl

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Die Spaltenzahl kommt aus kachel_bereich.spalten. Vier füllt eine Reihe
   auf breitem Bildschirm; wer weniger will, setzt drei. */
.raster--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.raster--5 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.raster--6 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }

.kacheln__bereich-text {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-schwach);
    margin-left: var(--a2);
}

/* Bei einer Kachel mit Unterkacheln steht die Zahl der Kinder da, nicht die
   der Datensätze — deshalb dezenter, damit man sie nicht verwechselt. */
.kachel__zahl--kinder {
    opacity: .5;
    font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Feste Spaltenzahl je Bereich

   An erp.css ANHÄNGEN. Ersetzt die auto-fill-Regeln aus dem vorigen Paket —
   sie können bleiben, diese hier stehen später und gewinnen.
   ------------------------------------------------------------------------ */

/* auto-fill richtet sich nach der Fensterbreite: Bei acht Kacheln kamen
   fünf und drei heraus, weil für vier der Platz fehlte.

   `repeat(4, 1fr)` gibt vier vor — die Kacheln werden schmaler, statt
   umzubrechen. Bei acht ergibt das zwei Reihen zu vier. */
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--5 { grid-template-columns: repeat(5, 1fr); }
.raster--6 { grid-template-columns: repeat(6, 1fr); }

/* Unter 1100 Pixeln sind vier Kacheln zu schmal für lesbare Beschreibungen —
   dort brechen wir doch um. */
@media (max-width: 1100px) {
    .raster--4, .raster--5, .raster--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px) {
    .raster--3, .raster--4, .raster--5, .raster--6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .raster--3, .raster--4, .raster--5, .raster--6 {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Zuordnungsmarken und Dokumentfilter

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Die Marken. Klein, damit vier nebeneinander passen — ein Dokument kann
   Lieferant, Kunde, Projekt und Partner gleichzeitig haben. */
.marke-bez {
    display: inline-block;
    font-size: 10px;
    line-height: 1.5;
    padding: 1px 6px;
    border-radius: 3px;
    margin: 1px 2px 1px 0;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Vier Farben, die sich auch bei Rot-Grün-Schwäche unterscheiden: Blau,
   Violett, Orange und Grün liegen im Farbkreis weit auseinander. */
.marke-bez--lieferant { background: #1f5f8b; color: #ffffff; }
.marke-bez--kunde     { background: #1f7a4d; color: #ffffff; }
.marke-bez--projekt   { background: #b5651d; color: #ffffff; }
.marke-bez--partner   { background: #6b4c9a; color: #ffffff; }

/* Ohne Zuordnung: grau und mit gestricheltem Rand — es ist kein Zustand,
   den man aussucht, sondern einer, der übrig bleibt. Miete und Strom
   gehören nirgends dazu, und das ist richtig so. */
.marke-bez--ohne {
    background: transparent;
    color: var(--text-schwach);
    border: 1px dashed var(--linie);
    font-weight: 400;
}

/* --------------------------------------------------------------- Filter */

.filter__zeile {
    display: flex;
    align-items: center;
    gap: var(--a3);
    flex-wrap: wrap;
    padding: var(--a2) 0;
    border-bottom: 1px solid var(--linie);
}

.filter__zeile:last-child { border-bottom: none; padding-bottom: 0; }
.filter__zeile--eng { padding: var(--a1) 0; }

.filter__titel {
    font-size: var(--gr-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
    min-width: 7rem;
}

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

/* Die Filterkästchen tragen dieselbe Farbe wie die Marken — so ist ohne
   Nachdenken klar, welches Kästchen zu welcher Marke gehört. */
.filter__marke {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    font-size: var(--gr-s);
    cursor: pointer;
    transition: border-color .08s, background .08s;
}

.filter__marke input { margin: 0; }

.filter__marke:hover { border-color: var(--akzent); }

.filter__marke--lieferant { border-left: 4px solid #1f5f8b; }
.filter__marke--kunde     { border-left: 4px solid #1f7a4d; }
.filter__marke--projekt   { border-left: 4px solid #b5651d; }
.filter__marke--partner   { border-left: 4px solid #6b4c9a; }
.filter__marke--ohne      { border-left: 4px dashed var(--text-schwach); }

/* Angekreuzt: kräftiger Rand. :has() greift auf das Elternelement zu —
   ohne es bräuchte es JavaScript für eine reine Anzeigefrage. */
.filter__marke:has(input:checked) {
    background: var(--flaeche-ruhig);
    border-color: var(--akzent);
}

.filter__zahl {
    font-size: 10px;
    color: var(--text-schwach);
    font-variant-numeric: tabular-nums;
}

.filter__wahl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--gr-s);
    cursor: pointer;
}

.filter__hinweis { margin-left: auto; }

.filter__zeile select,
.filter__zeile input[type="search"] {
    margin: 0;
    padding: 5px 8px;
    font-size: var(--gr-s);
}

.filter__zeile input[type="search"] { min-width: 12rem; }

@media (max-width: 700px) {
    .filter__titel { min-width: 0; width: 100%; }
    .filter__hinweis { margin-left: 0; width: 100%; }
    .filter__zeile select,
    .filter__zeile input[type="search"] { flex: 1; min-width: 8rem; }
}

/* ---------------------------------------------------------------------------
   Massenzuordnung

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Die Leiste klebt unten: Bei fünfzig Zeilen scrollt man sonst ganz nach
   unten, nur um zuzuordnen. */
.massen {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--a2);
    padding: var(--a3) var(--a4);
    background: var(--flaeche);
    border-top: 2px solid var(--akzent);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    z-index: 10;
}

.massen[hidden] { display: none; }

.massen__kopf {
    font-size: var(--gr-s);
    color: var(--text-ruhig);
}

.massen__kopf strong {
    font-size: var(--gr-m);
    color: var(--akzent);
    font-variant-numeric: tabular-nums;
}

.massen__felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--a2);
}

.massen__felder select { margin: 0; font-size: var(--gr-s); }

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

.massen__modus .knopf { margin-left: auto; }

/* Die Auswahlspalte schmal — jeder Millimeter fehlt sonst dem Dateinamen */
.tabelle th.mitte,
.tabelle td.mitte { width: 2.5rem; text-align: center; }

@media (max-width: 700px) {
    .massen__modus .knopf { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Beleg buchen

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.buchen__gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--a4);
}

/* Errechnete Werte sehen anders aus als Eingabefelder — man soll nicht
   versuchen, dort zu tippen. */
.feld__rechnung {
    padding: 7px 10px;
    background: var(--flaeche-ruhig);
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    font-variant-numeric: tabular-nums;
    color: var(--text-ruhig);
}

.feld__rechnung--stark {
    font-weight: 600;
    color: var(--text);
    border-color: var(--akzent);
}

/* Der Hinweis zum Zahlungsdatum ist der wichtigste auf der Seite: Ohne
   Zahlung keine Ausgabe in der EÜR. */
.feld__hinweis--wichtig {
    color: #a32d2d;
    font-weight: 500;
}

.dok-gebucht {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #1f7a4d;
    color: #fff;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Belegliste

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Zeilen ohne Belegdatei dezent rot — die GoBD verlangen zu jeder Buchung
   einen auffindbaren Beleg, und was fehlt, soll auffallen. */
.zeile--warn {
    background: rgba(163, 45, 45, .05);
}

.marke--warn {
    background: #a32d2d;
    color: #fff;
}

.filter__marke--warn {
    border-left: 4px solid #a32d2d;
}

.tabelle tfoot td {
    border-top: 2px solid var(--linie);
    padding-top: 10px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Belegdatei als Link

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Der Dateiname ist der Link — er sagt schon, was kommt. */
.beleg__datei {
    font-family: var(--schrift-nummer, monospace);
    font-size: var(--gr-s);
    word-break: break-all;
}

.beleg__datei--lose {
    color: var(--text-schwach);
    cursor: help;
}

/* Fehlt der Beleg, ist der Link eine Aufforderung — kein toter Text. */
.beleg__datei--fehlt {
    color: #a32d2d;
    font-weight: 600;
    font-family: inherit;
}

/* ---------------------------------------------------------------------------
   Belegdatei als Link

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Der Dateiname ist der Link — er sagt schon, was kommt. */
.beleg__datei {
    font-family: var(--schrift-nummer, monospace);
    font-size: var(--gr-s);
    word-break: break-all;
}

.beleg__datei--lose {
    color: var(--text-schwach);
    cursor: help;
}

/* Fehlt der Beleg, ist der Link eine Aufforderung — kein toter Text. */
.beleg__datei--fehlt {
    color: #a32d2d;
    font-weight: 600;
    font-family: inherit;
}

/* Einnahmen dezent grün hinterlegt — bei gemischten Zeilen sieht man
   sofort, wo Geld hereinkommt und wo es hinausgeht. */
.zeile--einnahme {
    background: rgba(31, 122, 77, .04);
}

/* ---------------------------------------------------------------------------
   Summenzeile in der Belegliste

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Was noch nicht geflossen ist, steht blasser — es zählt ja auch nicht. */
.fuss--offen td {
    border-top: none;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ---------------------------------------------------------------------------
   Benutzerformular

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.benutzer__gitter,
.rollen__gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--a4);
}

/* -------------------------------------------------------- Kontotyp */

.typ__wahl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--a3);
}

.typ__karte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--a3);
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    cursor: pointer;
    transition: border-color .08s, background .08s;
}

.typ__karte input { margin-bottom: 4px; }

.typ__karte:hover { border-color: var(--akzent); }

.typ__karte:has(input:checked) {
    border-color: var(--akzent);
    border-width: 2px;
    padding: calc(var(--a3) - 1px);
    background: var(--flaeche-ruhig);
}

.typ__name { font-weight: 600; font-size: var(--gr-s); }
.typ__text { font-size: 11px; color: var(--text-schwach); line-height: 1.35; }

/* Dieselben Farben wie bei den Dokumentmarken — ein Kunde ist überall
   grün, ein Lieferant überall blau. */
.typ__karte--kunde:has(input:checked)     { border-color: #1f7a4d; }
.typ__karte--lieferant:has(input:checked) { border-color: #1f5f8b; }
.typ__karte--partner:has(input:checked)   { border-color: #6b4c9a; }

.typ__marke {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    background: var(--flaeche-ruhig);
    color: var(--text-ruhig);
}

.typ__marke--kunde     { background: #1f7a4d; color: #fff; }
.typ__marke--lieferant { background: #1f5f8b; color: #fff; }
.typ__marke--partner   { background: #6b4c9a; color: #fff; }

/* -------------------------------------------------------- Passwort */

.passwort__zeile {
    display: flex;
    gap: var(--a2);
    align-items: stretch;
}

.passwort__zeile input {
    flex: 1;
    margin: 0;
    font-family: var(--schrift-nummer, monospace);
    letter-spacing: .02em;
}

/* Vier Balken statt einer Zahl: Man sieht auf einen Blick, ob es reicht,
   ohne lesen zu müssen. */
.passwort__balken {
    display: flex;
    gap: 3px;
    margin-top: 6px;
}

.passwort__balken span {
    height: 3px;
    flex: 1;
    background: var(--linie);
    border-radius: 2px;
    transition: background .15s;
}

.passwort__balken--1 span:nth-child(1) { background: #a32d2d; }
.passwort__balken--2 span:nth-child(-n+2) { background: #b5651d; }
.passwort__balken--3 span:nth-child(-n+3) { background: #1f7a4d; }
.passwort__balken--4 span { background: #1f7a4d; }

/* ---------------------------------------------------------- Rollen */

.rolle__karte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--a3);
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    cursor: pointer;
}

.rolle__karte:has(input:checked) {
    border-color: var(--akzent);
    background: var(--flaeche-ruhig);
}

.rolle__name { font-weight: 600; font-size: var(--gr-s); }
.rolle__text { font-size: 11px; color: var(--text-schwach); line-height: 1.35; }
.rolle__zahl { font-size: 10px; color: var(--text-schwach); margin-top: 2px; }

/* Gesperrte Konten blasser — sie sind da, aber sie zählen nicht. */
.zeile--still { opacity: .55; }

/* ---------------------------------------------------------------------------
   Besucherhinweis

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Ruhiges Blau, nicht Rot: Ein Besucher hat nichts falsch gemacht — er soll
   nur wissen, worin er sich bewegt. Rot wäre eine Warnung, und die wäre
   hier fehl am Platz. */
.besucher__streifen {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #1f5f8b;
    color: #ffffff;
    text-align: center;
    padding: 5px var(--a4);
    font-size: var(--gr-xs);
    letter-spacing: .02em;
}

/* Knöpfe, die nichts bewirken, gar nicht erst anbieten. Sie bleiben im
   HTML — das Ausblenden ist Höflichkeit, nicht Sicherheit. Die greift
   im BesucherSperre-Listener. */
body:has(.besucher__streifen) .knopf--gefahr,
body:has(.besucher__streifen) .formular__aktionen button[type="submit"],
body:has(.besucher__streifen) .massen,
body:has(.besucher__streifen) [href*="/neu"],
body:has(.besucher__streifen) [href*="hochladen"] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Passwort-Merker

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Was beim Speichern gilt — deutlich, weil genau hier der häufigste Fehler
   passiert: sich einen anderen merken als den im Feld. */
.passwort__merker {
    margin-top: var(--a2);
    padding: 6px 10px;
    background: var(--flaeche-ruhig);
    border-left: 3px solid var(--akzent);
    border-radius: var(--rund-s);
    font-family: var(--schrift-nummer, monospace);
    font-size: var(--gr-s);
    user-select: all;
}

.passwort__merker[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Passwort-Merker

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.passwort__merker {
    margin-top: var(--a2);
    padding: 6px 10px;
    background: var(--flaeche-ruhig);
    border-left: 3px solid var(--akzent);
    border-radius: var(--rund-s);
    font-family: var(--schrift-nummer, monospace);
    font-size: var(--gr-s);
    user-select: all;
}

.passwort__merker[hidden] { display: none; }
/* ─────────────────────────────────────────────────────────────────────
   Impressum und Datenschutz

   Ans Ende von public/assets/css/erp.css anhängen, dann
   firma.css_version hochzählen — sonst zeigt der Browser die alte Datei.
   ───────────────────────────────────────────────────────────────────── */

.recht__anschrift {
    font-style: normal;
    line-height: 1.7;
}

/* Beschreibungsliste zweispaltig, solange Platz ist.
   Auf schmalen Geräten untereinander — nebeneinander bliebe für den
   Begriff zu wenig Raum, und abgeschnittene Beschriftungen sind
   schlimmer als eine längere Seite. */
.recht__liste {
    display: grid;
    grid-template-columns: minmax(12rem, auto) 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.recht__liste dt {
    font-weight: 600;
    color: var(--text-ruhig, inherit);
}

.recht__liste dd {
    margin: 0;
}

@media (max-width: 40rem) {
    .recht__liste {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .recht__liste dd {
        margin-bottom: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   Vorlage wählen

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.vorlagenwahl {
    display: flex;
    flex-direction: column;
    gap: var(--a2);
}

.vorlagenwahl__eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--a3);
    padding: var(--a3);
    border: 1px solid var(--linie);
    border-radius: var(--rund-s);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.vorlagenwahl__eintrag:hover {
    border-color: var(--akzent);
    background: var(--flaeche-ruhig);
}

/* Die gewählte Vorlage deutlich hervorheben — man soll auf einen Blick
   sehen, womit gleich gedruckt wird. */
.vorlagenwahl__eintrag:has(input:checked) {
    border-color: var(--akzent);
    border-width: 2px;
    padding: calc(var(--a3) - 1px);
    background: var(--flaeche-ruhig);
}

.vorlagenwahl__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------------------------------------------------------------------------
   Unterseiten am Formular

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Die Unterseiten stehen über den Speichern-Knöpfen, abgesetzt: Sie führen
   weg von diesem Formular, die anderen bleiben hier. */
.formular__unterseiten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2);
    padding: var(--a3) 0;
    margin-bottom: var(--a3);
    border-bottom: 1px solid var(--linie);
}

/* ---------------------------------------------------------------------------
   Unterseiten am Formular

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Die Unterseiten stehen über den Speichern-Knöpfen, abgesetzt: Sie führen
   weg von diesem Formular, die anderen bleiben hier. */
.formular__unterseiten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2);
    padding: var(--a3) 0;
    margin-bottom: var(--a3);
    border-bottom: 1px solid var(--linie);
}

/* ---------------------------------------------------------------------------
   Einnahmen-Überschuss-Rechnung

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Die Zeilennummer ist der Anker zum ELSTER-Formular — schmal, monospace,
   damit man sie beim Abtippen wiederfindet. */
.euer__zeile {
    width: 3.5rem;
    text-align: center;
    color: var(--text-schwach);
    font-variant-numeric: tabular-nums;
}

.euer td,
.euer th {
    padding-top: 6px;
    padding-bottom: 6px;
}

.euer tfoot td {
    border-top: 2px solid var(--linie);
    padding-top: 10px;
}

.euer__ergebnis {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--a4);
    font-size: var(--gr-l);
}

.euer__betrag {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 1.4em;
}

.warnton {
    color: #a32d2d;
}

/* Beim Drucken bleibt nur die Aufstellung — Hinweise und Bedienelemente
   gehören nicht aufs Blatt. */
@media print {
    .kein-druck,
    .seitenkopf__aktionen,
    .pfad,
    nav {
        display: none !important;
    }

    .karte {
        border: none;
        box-shadow: none;
        break-inside: avoid;
    }
}

/* ---------------------------------------------------------------------------
   Zeilennummern der Anlage EÜR

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

/* Schmal und in Ziffernbreite — beim Abtippen wandert der Blick die Spalte
   hinunter, da darf nichts springen. */
.euer__zeile {
    width: 3rem;
    text-align: center;
    color: var(--text-schwach);
    font-variant-numeric: tabular-nums;
    font-size: var(--gr-s);
}

/* Ein Konto ohne Zeilennummer fällt beim Abtippen unter den Tisch. */
.euer__fehlt {
    color: #a32d2d;
    font-weight: 700;
    cursor: help;
}

.euer__warnung {
    color: #a32d2d;
}

/* ---------------------------------------------------------------------------
   Prozessbeschreibung nach ISA-88

   An erp.css ANHÄNGEN.
   ------------------------------------------------------------------------ */

.pb-ablauf {
    font-size: var(--gr-s);
}

/* ══ Elemente ══ */

.pb-el {
    border-left: 3px solid var(--linie);
    padding-left: var(--a3);
    margin-bottom: var(--a2);
}

/* Die Ebene über die Farbe der Randlinie — so sieht man die Tiefe, ohne
   zu zählen. */
.pb-el--stage     { border-left-color: var(--akzent); }
.pb-el--operation { border-left-color: #6b8caf; }
.pb-el--action    { border-left-color: #b0b0b8; }

.pb-el__kopf {
    display: flex;
    align-items: center;
    gap: var(--a2);
    padding: 4px 0;
    flex-wrap: wrap;
}

.pb-el--stage > .pb-el__kopf {
    font-weight: 600;
    font-size: var(--gr-m);
}

.pb-el--operation > .pb-el__kopf {
    font-weight: 500;
}

.pb-el__zeichen {
    opacity: .6;
    min-width: 1.2em;
    text-align: center;
}

.pb-el__name { flex: 0 1 auto; }

/* Die Parameter sind der Inhalt des Schritts — sie stehen in der Zeile,
   nicht versteckt hinter einem Klick. */
.pb-el__werte {
    display: flex;
    gap: var(--a3);
    flex-wrap: wrap;
    font-size: var(--gr-xs);
    color: var(--text-ruhig);
}

.pb-wert strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.pb-el__dauer {
    font-size: var(--gr-xs);
    color: var(--text-schwach);
    font-variant-numeric: tabular-nums;
}

.pb-el__aktionen {
    margin-left: auto;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .12s;
}

.pb-el__kopf:hover .pb-el__aktionen { opacity: 1; }

.pb-el__text {
    font-size: var(--gr-xs);
    color: var(--text-ruhig);
    padding-bottom: 4px;
}

.pb-kinder {
    padding-left: var(--a4);
    padding-top: 2px;
}

/* Kritischer Schritt nach ICH Q8/Q9 — muss ins Auge fallen. */
.pb-kritisch {
    background: #a32d2d;
    color: #fff;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* ══ Verzweigungen ══ */

.pb-zweigung {
    margin: var(--a3) 0;
}

/* Doppelter Balken bei parallel, einfacher bei alternativ — dieselbe
   Konvention wie in der Ablaufsprache nach IEC 61131-3. */
.pb-zweigung__balken {
    border-top: 2px solid var(--text-ruhig);
    padding-top: 4px;
    display: flex;
    align-items: center;
    gap: var(--a3);
    font-size: var(--gr-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-ruhig);
}

.pb-zweigung--parallel > .pb-zweigung__balken {
    border-top-style: double;
    border-top-width: 5px;
}

.pb-zweigung__balken--zu {
    border-top: 2px solid var(--text-ruhig);
    margin-top: var(--a2);
}

.pb-zweigung--parallel > .pb-zweigung__balken--zu {
    border-top-style: double;
    border-top-width: 5px;
}

.pb-zweige {
    display: flex;
    gap: var(--a4);
    padding: var(--a3) 0;
    align-items: flex-start;
}

.pb-zweig {
    flex: 1 1 0;
    min-width: 0;
    border-left: 1px dashed var(--linie);
    padding-left: var(--a3);
}

.pb-zweig__kopf {
    font-size: var(--gr-xs);
    color: var(--text-schwach);
    padding-bottom: var(--a2);
    display: flex;
    gap: var(--a2);
    flex-wrap: wrap;
}

.pb-bedingung {
    background: var(--flaeche-ruhig);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--schrift-nummer, monospace);
}

.pb-bedingung--std { font-style: italic; }

/* Bei einer Alternative ohne Bedingung weiß niemand, wann der Zweig gilt.
   Das muss auffallen. */
.pb-bedingung--fehlt {
    background: #a32d2d;
    color: #fff;
}

/* ══ Hinzufügen ══ */

.pb-hinzu {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 2px 0;
    margin-right: var(--a3);
    opacity: .45;
    transition: opacity .12s;
}

.pb-hinzu:hover,
.pb-hinzu:focus-within { opacity: 1; }

.pb-hinzu__wahl {
    font-size: var(--gr-xs);
    padding: 2px 6px;
    max-width: 220px;
}

.pb-hinzu--zweig { opacity: .3; }

/* ══ Bei schmalen Fenstern ══ */

@media (max-width: 720px) {
    /* Zweige untereinander statt nebeneinander — sonst wird jeder Zweig
       zu schmal zum Lesen. */
    .pb-zweige {
        flex-direction: column;
        gap: var(--a2);
    }

    .pb-zweig {
        border-left: 3px solid var(--linie);
        width: 100%;
    }
}
/* ---------------------------------------------------------------------------
   Procedure Function Chart
   ------------------------------------------------------------------------ */

.pfc-blatt {
    /* Waagerecht scrollbar: Bei breiten Verzweigungen passt die Zeichnung
       nicht ins Fenster, und Verkleinern macht sie unlesbar. */
    overflow-x: auto;
    text-align: center;
    color: var(--text);
}

.pfc-blatt svg {
    max-width: none;
    height: auto;
}

@media print {
    .kein-druck { display: none !important; }

    .pfc-blatt {
        overflow: visible;
    }

    .pfc-blatt svg {
        max-width: 100%;
        height: auto;
    }

    .karte {
        border: none;
        box-shadow: none;
    }
}

/* ---------------------------------------------------------------------------
   Bausteine einziehen
   ------------------------------------------------------------------------ */

.pb-hinzu--baustein {
    /* Abgesetzt vom Katalogformular: Der Katalog liefert einen leeren
       Schritt, die Bibliothek einen fertigen. Zwei verschiedene Dinge
       sollen nicht gleich aussehen. */
    border-left: 2px solid var(--linie);
    padding-left: .6rem;
    margin-left: .3rem;
}

.pb-hinzu--baustein .pb-hinzu__wahl {
    min-width: 16rem;
}

/* ---------------------------------------------------------------------------
   In die Bibliothek ablegen
   ------------------------------------------------------------------------ */

.pb-ablegen {
    margin: .3rem 0 .3rem .3rem;
}

.pb-ablegen__auf {
    /* Zugeklappt und unauffällig: Ablegen ist die Ausnahme, nicht der
       Alltag. Ein dauerhaft sichtbares Formular würde den Ablauf
       überlagern. */
    cursor: pointer;
    font-size: .82rem;
    color: var(--text-ruhig, #6a6a72);
    padding: .15rem 0;
    list-style: none;
}

.pb-ablegen__auf:hover {
    color: var(--text, #1a1a20);
}

.pb-ablegen__form {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: end;
    padding: .5rem 0 .3rem .8rem;
    border-left: 2px solid var(--linie);
}

.pb-ablegen__feld {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.pb-ablegen__feld input {
    font-family: ui-monospace, monospace;
    font-size: .85rem;
    min-width: 14rem;
}

/* ---------------------------------------------------------------------------
   Parameterzeilen
   ------------------------------------------------------------------------ */

.pb-param__tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.pb-param__tabelle th {
    text-align: left;
    font-weight: 500;
    font-size: .78rem;
    color: var(--text-ruhig, #6a6a72);
    padding: .2rem .3rem;
    border-bottom: 1px solid var(--linie);
}

.pb-param__tabelle td {
    padding: .15rem .3rem;
    vertical-align: top;
}

.pb-param__tabelle input[type="text"],
.pb-param__tabelle select {
    width: 100%;
    font-size: .85rem;
    padding: .25rem .35rem;
}

/* Die Spaltenbreiten: Parameter und Bemerkung brauchen Platz, Wert und
   Einheit wenig. Ohne feste Breiten verteilt der Browser gleichmäßig —
   und dann passt in die Bemerkung nichts. */
.pb-param__sp-name    { width: 22%; }
.pb-param__sp-wert    { width: 8%; }
.pb-param__sp-einheit { width: 18%; }
.pb-param__sp-bem     { width: 26%; }
.pb-param__sp-verweis { width: 16%; }
.pb-param__sp-krit    { width: 3%; text-align: center; }

.pb-param__wert {
    font-family: ui-monospace, monospace;
    text-align: right;
}

.pb-param__weg {
    background: none;
    border: none;
    color: var(--text-ruhig, #6a6a72);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: .2rem .4rem;
}

.pb-param__weg:hover {
    color: #a32d2d;
}

/* Geleerte Zeilen bleiben sichtbar, aber gedämpft — wer versehentlich
   löscht, sieht es vor dem Speichern und kann zurück. */
.pb-param__zeile--weg {
    opacity: .35;
}

.pb-param__zeile--weg input,
.pb-param__zeile--weg select {
    text-decoration: line-through;
}

@media (max-width: 60rem) {
    /* Auf schmalen Schirmen scrollt die Tabelle, statt die Felder auf
       zwei Zeichen zu quetschen. */
    .pb-param {
        overflow-x: auto;
    }

    .pb-param__tabelle {
        min-width: 46rem;
    }
}

/* ---------------------------------------------------------------------------
   Parameterzeilen
   ------------------------------------------------------------------------ */

.pb-param__tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.pb-param__tabelle th {
    text-align: left;
    font-weight: 500;
    font-size: .78rem;
    color: var(--text-ruhig, #6a6a72);
    padding: .2rem .3rem;
    border-bottom: 1px solid var(--linie);
}

.pb-param__tabelle td {
    padding: .15rem .3rem;
    vertical-align: top;
}

.pb-param__tabelle input[type="text"],
.pb-param__tabelle select {
    width: 100%;
    font-size: .85rem;
    padding: .25rem .35rem;
}

/* Die Spaltenbreiten: Parameter und Bemerkung brauchen Platz, Wert und
   Einheit wenig. Ohne feste Breiten verteilt der Browser gleichmäßig —
   und dann passt in die Bemerkung nichts. */
.pb-param__sp-name    { width: 22%; }
.pb-param__sp-wert    { width: 8%; }
.pb-param__sp-einheit { width: 18%; }
.pb-param__sp-bem     { width: 26%; }
.pb-param__sp-verweis { width: 16%; }
.pb-param__sp-krit    { width: 3%; text-align: center; }

.pb-param__wert {
    font-family: ui-monospace, monospace;
    text-align: right;
}

.pb-param__weg {
    background: none;
    border: none;
    color: var(--text-ruhig, #6a6a72);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: .2rem .4rem;
}

.pb-param__weg:hover {
    color: #a32d2d;
}

/* Geleerte Zeilen bleiben sichtbar, aber gedämpft — wer versehentlich
   löscht, sieht es vor dem Speichern und kann zurück. */
.pb-param__zeile--weg {
    opacity: .35;
}

.pb-param__zeile--weg input,
.pb-param__zeile--weg select {
    text-decoration: line-through;
}

@media (max-width: 60rem) {
    /* Auf schmalen Schirmen scrollt die Tabelle, statt die Felder auf
       zwei Zeichen zu quetschen. */
    .pb-param {
        overflow-x: auto;
    }

    .pb-param__tabelle {
        min-width: 46rem;
    }
}

/* ---------------------------------------------------------------------------
   Kategoriewahl über Facetten
   ------------------------------------------------------------------------ */

.kat-wahl {
    display: grid;
    gap: .6rem;
}

@media (min-width: 48rem) {
    /* Nebeneinander, solange Platz ist — der Weg von links nach rechts
       macht die Reihenfolge sichtbar. */
    .kat-wahl {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
        align-items: end;
    }
}

.kat-wahl .feld {
    margin: 0;
}

.kat-wahl select {
    width: 100%;
}

/* Ausgeblendete Stufen nehmen keinen Platz ein */
.kat-wahl [hidden] {
    display: none;
}

[data-kat-zahl] {
    min-height: 1.1em;
    font-size: .78rem;
    color: var(--text-ruhig, #6a6a72);
}

/* ---------------------------------------------------------------------------
   Freie Felder
   ------------------------------------------------------------------------ */

.feld-gruppe {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-ruhig, #6a6a72);
    margin: 1.2rem 0 .5rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--linie);
}

.feld-gruppe:first-child {
    margin-top: 0;
}

.feld-raster {
    display: grid;
    gap: .8rem;
}

@media (min-width: 42rem) {
    /* Zwei Spalten, solange Platz ist. Mehrzeilige Felder nehmen beide —
       ein Fließtext in halber Breite ist nicht zu lesen. */
    .feld-raster {
        grid-template-columns: 1fr 1fr;
    }

    .feld--breit {
        grid-column: 1 / -1;
    }
}

.feld-raster .feld {
    margin: 0;
}

/* Der Platzhaltername, klein und zurückhaltend. Wer eine Vorlage
   schreibt, braucht ihn — wer nur ausfüllt, soll ihn übersehen können. */
.feld__platzhalter {
    margin-top: .2rem;
    font-size: .7rem;
    opacity: .45;
}

.feld__platzhalter code {
    font-family: ui-monospace, monospace;
    user-select: all;
}

.feld__platzhalter:hover {
    opacity: .8;
}

/* Ein anzubietender Abschnitt */
.feld-angebot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--linie);
}

.feld-angebot:last-child {
    border-bottom: none;
}

.feld-angebot__text {
    flex: 1;
}

.karte__fuss {
    padding: .5rem 1rem;
    border-top: 1px solid var(--linie);
    text-align: right;
}

form.inline {
    display: inline;
}

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

.editor {
    display: grid;
    gap: 1rem;
}

@media (min-width: 62rem) {
    /* Text links, Platzhalter rechts. Unter 62rem untereinander — eine
       Seitenleiste von zehn Zeichen Breite hilft niemandem. */
    .editor {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }
}

.editor__feld {
    width: 100%;
    font-family: ui-monospace, monospace;
    font-size: .88rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 24rem;
}

.editor__suche {
    width: 100%;
    margin-bottom: .6rem;
    font-size: .85rem;
}

.editor__gruppe {
    margin-bottom: .4rem;
}

.editor__gruppe summary {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    padding: .25rem 0;
    color: var(--text-ruhig, #6a6a72);
}

.editor__gruppe[open] summary {
    color: var(--text, #1a1a20);
}

.editor__feldknopf {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 3px;
    padding: .25rem .4rem;
    cursor: pointer;
    font-size: .78rem;
    line-height: 1.35;
}

.editor__feldknopf:hover {
    background: var(--flaeche-ruhig, #f0f0f3);
}

.editor__feldknopf code {
    display: block;
    font-family: ui-monospace, monospace;
    color: var(--text, #1a1a20);
}

.editor__feldknopf span {
    display: block;
    font-size: .72rem;
}

.editor__feldknopf[hidden] {
    display: none;
}

.editor__satz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem 0;
    font-size: .85rem;
    border-bottom: 1px solid var(--linie);
}

.editor__weg {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .3rem;
    color: var(--text-ruhig, #6a6a72);
}

.editor__weg:hover {
    color: #a32d2d;
}

.editor__satzwahl {
    width: 100%;
    margin: .5rem 0;
    font-size: .85rem;
}

.editor__fassung {
    padding: .35rem 0;
    font-size: .82rem;
    border-bottom: 1px solid var(--linie);
}

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

/* Ziehen und Fallenlassen im Vorlageneditor */

.editor__feldknopf {
    cursor: grab;
}

.editor__feldknopf:active {
    cursor: grabbing;
}

.editor__feldknopf--zieht {
    opacity: .4;
}

/* Das Textfeld zeigt, dass es annimmt */
.editor__feld--ziel {
    outline: 2px dashed var(--akzent);
    outline-offset: -2px;
}

/* Ziehen und Fallenlassen im Vorlageneditor */

.editor__feldknopf {
    cursor: grab;
}

.editor__feldknopf:active {
    cursor: grabbing;
}

.editor__feldknopf--zieht {
    opacity: .4;
}

.editor__feld--ziel {
    outline: 2px dashed var(--akzent);
    outline-offset: -2px;
}

/* Zweiter Weg am Speichernknopf: als neue Vorlage */

.editor__abzweig {
    display: inline-block;
}

.editor__abzweig summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
}

.editor__abzweig summary::-webkit-details-marker {
    display: none;
}

.editor__abzweig__inhalt {
    /* Über dem Knopf statt darunter — sonst schiebt sich beim Aufklappen
       die halbe Seite nach unten. */
    position: absolute;
    z-index: 20;
    margin-top: .4rem;
    padding: .8rem;
    min-width: 18rem;
    background: var(--flaeche, #fff);
    border: 1px solid var(--linie-stark);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.editor__abzweig__inhalt input {
    width: 100%;
    margin-bottom: .5rem;
    font-size: .85rem;
}

.trenner {
    border: none;
    border-top: 1px solid var(--linie);
    margin: .8rem 0;
}

/* Drei Spalten im Vorlageneditor: Text, Platzhalter, Werkzeuge */

@media (min-width: 82rem) {
    .editor {
        /* ══════════════════════════════════════════════════════
             ALLE DREI WACHSEN MIT
           ══════════════════════════════════════════════════════

           Vorher: `minmax(0, 1fr) 19rem 19rem`. Die beiden
           Leisten blieben immer gleich breit, egal wie gross
           das Fenster war.

           Jetzt teilen sich die drei das Fenster im
           Verhaeltnis 2 : 1 : 1 — das Textfeld die Haelfte,
           die Leisten je ein Viertel.

           Die Mindestbreiten bleiben: Eine Leiste unter 17rem
           waere unlesbar, und der ODT-Knopf braeche mitten im
           Wort. */
        grid-template-columns:
            minmax(0, 2fr) minmax(19rem, 1fr) minmax(17rem, 1fr);
    }
}

/* Dazwischen zwei Spalten: Text oben, die beiden Leisten darunter */
@media (min-width: 62rem) and (max-width: 81.99rem) {
    .editor {
        /* Dasselbe bei zwei Spalten: Das Textfeld zwei
           Drittel, die Leiste ein Drittel. */
        grid-template-columns: minmax(0, 2fr) minmax(21rem, 1fr);
    }

    .editor__werkzeuge {
        grid-column: 2;
    }
}

.editor__werkzeuge {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.editor__felder {
    align-content: start;
}

.karte--warnung {
    border-color: #d8b8b8;
}

/* ---------------------------------------------------------------------------
   Dokument erzeugen
   ------------------------------------------------------------------------ */

.vorlagen-raster {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.vorlagen-kachel {
    display: block;
    padding: .6rem .8rem;
    border: 1px solid var(--linie);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color .1s;
}

.vorlagen-kachel:hover {
    border-color: var(--akzent);
    background: var(--flaeche-ruhig, #f6f7f9);
}

.vorlagen-kachel strong {
    display: block;
    font-size: .9rem;
    line-height: 1.3;
}

.vorlagen-kachel span {
    display: block;
    margin-top: .15rem;
}

.vorlagen-kachel[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Hilfeseiten
   ------------------------------------------------------------------------ */

.hilfe {
    max-width: 52rem;
}

.hilfe__vorspann {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text, #1a1a20);
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--linie);
    margin-bottom: 1.2rem;
}

.hilfe h2 {
    margin-top: 2.2rem;
    margin-bottom: .6rem;
    padding-top: .8rem;
    border-top: 1px solid var(--linie);
    font-size: 1.15rem;
}

.hilfe h2:first-of-type {
    border-top: none;
    padding-top: 0;
}

.hilfe h3 {
    margin-top: 1.4rem;
    margin-bottom: .4rem;
    font-size: .98rem;
}

.hilfe p {
    line-height: 1.6;
    margin-bottom: .7rem;
}

.hilfe ol,
.hilfe ul {
    margin: .5rem 0 1rem 1.2rem;
    line-height: 1.6;
}

.hilfe li {
    margin-bottom: .3rem;
}

.hilfe code {
    font-family: ui-monospace, monospace;
    font-size: .88em;
    background: var(--flaeche-ruhig, #f0f0f3);
    padding: .1em .35em;
    border-radius: 3px;
}

/* Die drei Schritte */

.hilfe__schritte {
    display: grid;
    gap: 1rem;
    margin: 1.2rem 0;
}

@media (min-width: 50rem) {
    .hilfe__schritte {
        grid-template-columns: repeat(3, 1fr);
    }
}

.hilfe__schritt {
    display: flex;
    gap: .8rem;
    align-items: start;
    padding: .9rem;
    background: var(--flaeche-ruhig, #f6f7f9);
    border-radius: 5px;
}

.hilfe__schritt h3 {
    margin: 0 0 .3rem;
    font-size: .95rem;
}

.hilfe__schritt p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
}

.hilfe__nummer {
    flex: 0 0 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--akzent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
}

/* Hinweiskästen */

.hilfe__kasten {
    margin: 1rem 0;
    padding: .8rem 1rem;
    background: var(--flaeche-ruhig, #f6f7f9);
    border-left: 3px solid var(--linie-stark);
    border-radius: 0 4px 4px 0;
    font-size: .92rem;
    line-height: 1.55;
}

.hilfe__kasten p {
    margin-bottom: .4rem;
}

.hilfe__kasten p:last-child {
    margin-bottom: 0;
}

.hilfe__kasten--tipp {
    background: #f0f6fa;
    border-left-color: #6a9cc4;
}

.hilfe__kasten--merken {
    background: #f4f8f2;
    border-left-color: #7aa668;
}

/* Tabellen in der Hilfe */

.hilfe .tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: .8rem 0 1.2rem;
    font-size: .9rem;
}

.hilfe .tabelle th {
    text-align: left;
    padding: .45rem .6rem;
    background: var(--flaeche-ruhig, #f0f0f3);
    border-bottom: 2px solid var(--linie-stark);
    font-size: .82rem;
    font-weight: 600;
}

.hilfe .tabelle td {
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
    line-height: 1.45;
}

.hilfe .tabelle tr:last-child td {
    border-bottom: none;
}

/* ---------------------------------------------------------------------------
   Eingabefeld mit Knopf darin — etwa zum Anzeigen des Passworts
   ------------------------------------------------------------------------ */

.feld__mit-knopf {
    position: relative;
    display: flex;
    align-items: stretch;
}

.feld__mit-knopf input {
    width: 100%;
    /* Platz für den Knopf, damit der Text nicht darunter läuft */
    padding-right: 2.6rem;
}

.feld__knopf {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: .5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feld__knopf:hover,
.feld__knopf:focus {
    opacity: .9;
}

.feld__knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
    border-radius: 3px;
}

/* Marke für Testdatensätze — sichtbar, aber nicht laut */
.marke--test {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    text-align: center;
    background: #e8e4d0;
    color: #8a7a3a;
    border-radius: 3px;
    font-size: .7rem;
    font-weight: 600;
    margin-right: .3rem;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Beiträge von außen
   ------------------------------------------------------------------------ */

.beitrag {
    padding: .7rem 0;
    border-bottom: 1px solid var(--linie);
}

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

.beitrag__kopf {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}

.beitrag__text { line-height: 1.5; }

.beitrag__antwort {
    margin-top: .4rem;
    padding: .5rem .7rem;
    background: var(--flaeche-ruhig, #f6f7f9);
    border-left: 3px solid var(--akzent);
    border-radius: 0 3px 3px 0;
    line-height: 1.5;
}

.marke--vorgeschlagen  { background: #e4ecf4; color: #3a6ea5; }
.marke--in_pruefung    { background: #f4eede; color: #8a6a2a; }
.marke--angenommen     { background: #e4f0e0; color: #4a7a3a; }
.marke--abgelehnt      { background: #f4e4e4; color: #a34a4a; }
.marke--zurueckgezogen { background: #eee; color: #777; }

.marke[class*="marke--"] {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 600;
}

.filterleiste {
    display: flex;
    gap: .4rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; }

.knopf--aktiv {
    background: var(--akzent);
    color: #fff;
    border-color: var(--akzent);
}

/* Schalter für Freigaben */
.schalter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--linie);
}

.schalter:last-child { border-bottom: none; }
.schalter__text { flex: 1; }

.knopf--an {
    background: #e4f0e0;
    border-color: #7aa668;
    color: #3a6a2a;
    font-weight: 600;
    min-width: 4rem;
}

.knopf--aus {
    background: var(--flaeche-ruhig, #f0f0f3);
    border-color: var(--linie-stark);
    color: #777;
    min-width: 4rem;
}

.knopf--an:hover  { background: #d4e8cc; }
.knopf--aus:hover { background: #e4e4e8; }

.knopf[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

/* Einmalige Passwortanzeige */
.passwort-anzeige {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .5rem 0;
}

/* ══════════════════════════════════════════════════════════
    EIN PASSWORT MUSS MAN LESEN KÖNNEN
   ══════════════════════════════════════════════════════════

   Hier stand `background: #fff` mit geerbter Schriftfarbe. Im
   Dunkelmodus ist die hell — hell auf weiss ist nichts.

   Das wiegt schwerer als anderswo: Ein einmalig angezeigtes
   Passwort kann man nicht nachschlagen. Wer es nicht lesen
   kann, muss ein neues anfordern.

   Der weisse Grund bleibt: Ein Passwort soll sich abheben,
   damit man es beim Abschreiben nicht verliert. Also bekommt
   die Schrift eine feste Farbe dazu.

   UND `--rand` GIBT ES NICHT

   Die Variable steht nirgends in dieser Datei. Der Ersatzwert
   hinter dem Komma griff, und niemand merkte es — dieselbe
   Falle wie bei `--hell` und `--ruhig` am 11.09.

   Die Linienfarbe heisst `--linie`.                          */

.passwort-anzeige__wert {
    font-family: ui-monospace, monospace;
    font-size: 1.05rem;
    letter-spacing: .04em;
    background: #fff;
    color: #1a1a1a;
    padding: .4rem .7rem;
    border: 1px solid var(--linie);
    border-radius: 4px;
    user-select: all;
}

/* Zähler für Neues — pulsiert dreimal, dann still.
   Dauerhaftes Blinken zieht den Blick ab und löst bei manchen
   Menschen Kopfschmerzen aus (WCAG 2.3.1). */
.zaehler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    background: #c0392b;
    color: #fff;
    border-radius: .6rem;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    animation: zaehler-puls 1s ease-in-out 3;
}
@keyframes zaehler-puls {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(192,57,43,.5); }
    50%      { transform: scale(1.15); box-shadow: 0 0 0 .3rem rgba(192,57,43,0); }
}
@media (prefers-reduced-motion: reduce) {
    .zaehler { animation: none; }
}
.kachel { position: relative; }
.kachel .zaehler { position: absolute; top: .6rem; right: .6rem; }

/* Reiter im Bearbeitungsformular */
.reiter {
    display: flex;
    gap: .3rem;
    margin: 1rem 0 0;
    border-bottom: 2px solid var(--linie);
}

.reiter__knopf {
    padding: .5rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-ruhig, #666);
    text-decoration: none;
    font-size: .9rem;
    cursor: pointer;
}

.reiter__knopf:hover { color: var(--text, #222); }

.reiter__knopf--aktiv {
    color: var(--akzent);
    border-bottom-color: var(--akzent);
    font-weight: 600;
}

.reiter__zahl {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .35rem;
    background: var(--flaeche-ruhig, #eee);
    border-radius: .6rem;
    font-size: .75rem;
}

/* Sortierbare Spaltenköpfe */
.sortierbar {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

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

.sortierbar--aktiv {
    font-weight: 600;
    color: var(--akzent);
}


/* Hilfekästen im dunklen Thema
   
   Sie hatten feste helle Hintergründe (#f0f6fa, #f4f8f2). Im dunklen
   Thema ist die Schrift hell — heller Text auf hellblauem Grund ist
   unlesbar.
   
   Die Grundfarbe kommt aus einer Variablen und passte schon; nur die
   beiden Sonderfälle waren fest codiert. */
html[data-thema-aktiv="dunkel"] .hilfe__kasten--tipp {
    background: #1c2a33;
    border-left-color: #4a7391;
}

html[data-thema-aktiv="dunkel"] .hilfe__kasten--merken {
    background: #1e2a1c;
    border-left-color: #5a7d4c;
}

/* Gesperrte Eingaben sollen gesperrt aussehen, nicht kaputt.
   Ein disabled select zeigt sonst einen Pfeil, der nichts tut. */
.pos select:disabled,
.pos input:read-only,
.pos textarea:read-only {
    background: transparent;
    border-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    cursor: default;
}

/* Gesperrte Eingaben sollen gesperrt aussehen, nicht kaputt.
   Ein disabled select zeigt sonst einen Pfeil, der nichts tut. */
.pos select:disabled,
.pos input:read-only,
.pos textarea:read-only {
    background: transparent;
    border-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    cursor: default;
}

/* Sortierbare Spaltenköpfe sollen anklickbar aussehen.
   Vorher waren sie von unsortierbaren nicht zu unterscheiden. */
.sortierbar {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}
.sortierbar::after {
    content: "⇅";
    font-size: .8em;
    opacity: .35;
}
.sortierbar:hover::after { opacity: .7; }
.sortierbar--aktiv::after { content: "▼"; opacity: 1; }
.sortierbar--aktiv.sortierbar--auf::after { content: "▲"; }

/* ── Zurück nach oben ──────────────────────────────────────────────
 *
 * Feste Stelle rechts unten. Er wandert nicht mit dem Inhalt: Ein
 * Knopf, der sich bewegt, ist schwer zu treffen.
 *
 * `z-index` hoch genug, um über Tabellen zu liegen, aber unter
 * Meldungen — die sollen ihn verdecken dürfen.
 */
.nach-oben {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 40;

    width: 2.75rem;
    height: 2.75rem;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.25rem;
    line-height: 1;

    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 50%;

    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);

    transition: background .15s, transform .15s;
}

.nach-oben:hover {
    background: var(--flaeche-ruhig);
    transform: translateY(-2px);
}

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

/* Auf schmalen Bildschirmen näher an den Rand */
@media (max-width: 40rem) {
    .nach-oben {
        right: .75rem;
        bottom: .75rem;
    }
}

/* ── Portalleiste über der Tabelle ─────────────────────────────────
 *
 * Dieselben Knöpfe wie unten, damit niemand blättern muss.
 */
.portalleiste {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ── Speichern über der Tabelle ────────────────────────────────────
 *
 * Derselbe Knopf wie unten. Bei 185 Zeilen ist der Weg ans Ende ein
 * Umweg, den niemand gehen sollte, um drei Haken zu sichern.
 */
.portalleiste-oben {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;

    padding: 0 0 .75rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--linie);
}

/* ── Nummerierte Schritte ──────────────────────────────────────────
 *
 * Für Anleitungen: Wer eine Datei ändern und zurückschicken soll,
 * braucht die Reihenfolge, nicht nur die Aufzählung.
 */
.schritte {
    margin: 1rem 0;
    padding-left: 1.5rem;
    line-height: 1.7;
}

.schritte li {
    margin-bottom: .5rem;
    padding-left: .25rem;
}

.schritte li::marker {
    font-weight: 600;
    color: var(--akzent);
}

/* ── Hilfeinhalte ──────────────────────────────────────────────────
 *
 * Der Text kommt als HTML aus der Datenbank. Er braucht denselben
 * Abstand und dieselbe Zeilenhöhe wie handgeschriebene Seiten —
 * sonst sieht die Hilfe aus wie ein Fremdkörper.
 */
.hilfe-inhalt p {
    margin: 0 0 1rem;
    line-height: 1.7;
}

.hilfe-inhalt p:last-child {
    margin-bottom: 0;
}

.hilfe-inhalt h3 {
    margin: 1.5rem 0 .5rem;
    font-size: 1rem;
}

.hilfe-inhalt ul,
.hilfe-inhalt ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    line-height: 1.7;
}

.hilfe-inhalt li {
    margin-bottom: .35rem;
}

.hilfe-inhalt table {
    margin-bottom: 1rem;
}

.hilfe-inhalt details {
    margin-bottom: .5rem;
}

.hilfe-inhalt summary {
    cursor: pointer;
    padding: .35rem 0;
}

/* ---------------------------------------------------------------------------
   Zwei Editoren, ein Klassenname

   Der Vorlageneditor und der Fließbildeditor heißen beide `.editor`.
   Der Vorlageneditor steht später in dieser Datei und setzt
   `display: grid` — damit verliert der Fließbildeditor sein
   Flex-Layout: Die Palette rutscht in die zweite Spalte, die Fläche
   verliert die Höhe, das Ablegen landet neben dem Blatt.

   `[data-editor]` trägt nur der Fließbildeditor. Damit gewinnt er
   zurück, was ihm gehört.
   ------------------------------------------------------------------------ */

.editor[data-editor] {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none;
    height: calc(100vh - 3.4rem);
}

/* ---------------------------------------------------------------------------
   Editorfläche waagerecht scrollbar

   Bisher wich die Eigenschaftsspalte unter 900 px ganz — sie war dann
   nicht erreichbar, auch nicht durch Scrollen.

   Jetzt bleiben alle drei Spalten stehen, und die Fläche scrollt
   waagerecht. Wer die Eigenschaften braucht, schiebt hinüber.
   ------------------------------------------------------------------------ */

.editor__flaeche {
    overflow-x: auto;
}

/* Palette und Eigenschaften behalten ihre Breite, statt sich
 * zusammendrücken zu lassen — sonst wird die Palette unlesbar,
 * bevor der Scrollbalken erscheint. */
.editor__palette,
.editor__eigenschaften {
    flex-shrink: 0;
}

/* Das Blatt darf nicht unter eine brauchbare Breite fallen. */
.editor__blatt {
    min-width: 400px;
}

@media (max-width: 900px) {
    /* Die Ausblendregel von oben zurücknehmen. */
    .editor__eigenschaften {
        display: block;
        width: 240px;
    }

    /* Auch die Palette behält ihre volle Breite. */
    .editor__palette {
        width: 220px;
    }
}

/* ---------------------------------------------------------------------------
   Editorfläche waagerecht scrollbar

   Bisher wich die Eigenschaftsspalte unter 900 px ganz — sie war dann
   nicht erreichbar, auch nicht durch Scrollen.

   Jetzt bleiben alle drei Spalten stehen, und die Fläche scrollt
   waagerecht. Wer die Eigenschaften braucht, schiebt hinüber.
   ------------------------------------------------------------------------ */

.editor__flaeche {
    overflow-x: auto;
}

/* Palette und Eigenschaften behalten ihre Breite, statt sich
 * zusammendrücken zu lassen — sonst wird die Palette unlesbar,
 * bevor der Scrollbalken erscheint. */
.editor__palette,
.editor__eigenschaften {
    flex-shrink: 0;
}

/* Das Blatt darf nicht unter eine brauchbare Breite fallen. */
.editor__blatt {
    min-width: 400px;
}

@media (max-width: 900px) {
    /* Die Ausblendregel von oben zurücknehmen. */
    .editor__eigenschaften {
        display: block;
        width: 240px;
    }

    /* Auch die Palette behält ihre volle Breite. */
    .editor__palette {
        width: 220px;
    }
}

/* ---------------------------------------------------------------------------
   Editorfläche waagerecht scrollbar

   Bisher wich die Eigenschaftsspalte unter 900 px ganz — sie war dann
   nicht erreichbar, auch nicht durch Scrollen.

   Jetzt bleiben alle drei Spalten stehen, und die Fläche scrollt
   waagerecht. Wer die Eigenschaften braucht, schiebt hinüber.
   ------------------------------------------------------------------------ */

.editor__flaeche {
    overflow-x: auto;
}

/* Palette und Eigenschaften behalten ihre Breite, statt sich
 * zusammendrücken zu lassen — sonst wird die Palette unlesbar,
 * bevor der Scrollbalken erscheint. */
.editor__palette,
.editor__eigenschaften {
    flex-shrink: 0;
}

/* Das Blatt darf nicht unter eine brauchbare Breite fallen. */
.editor__blatt {
    min-width: 400px;
}

@media (max-width: 900px) {
    /* Die Ausblendregel von oben zurücknehmen. */
    .editor__eigenschaften {
        display: block;
        width: 240px;
    }

    /* Auch die Palette behält ihre volle Breite. */
    .editor__palette {
        width: 220px;
    }
}

/* ---------------------------------------------------------------------------
   Editorfläche waagerecht scrollbar

   Bisher wich die Eigenschaftsspalte unter 900 px ganz — sie war dann
   nicht erreichbar, auch nicht durch Scrollen.

   Jetzt bleiben alle drei Spalten stehen, und die Fläche scrollt
   waagerecht. Wer die Eigenschaften braucht, schiebt hinüber.
   ------------------------------------------------------------------------ */

.editor__flaeche {
    overflow-x: auto;
}

/* Palette und Eigenschaften behalten ihre Breite, statt sich
 * zusammendrücken zu lassen — sonst wird die Palette unlesbar,
 * bevor der Scrollbalken erscheint. */
.editor__palette,
.editor__eigenschaften {
    flex-shrink: 0;
}

/* Das Blatt darf nicht unter eine brauchbare Breite fallen. */
.editor__blatt {
    min-width: 400px;
}

@media (max-width: 900px) {
    /* Die Ausblendregel von oben zurücknehmen. */
    .editor__eigenschaften {
        display: block;
        width: 240px;
    }

    /* Auch die Palette behält ihre volle Breite. */
    .editor__palette {
        width: 220px;
    }
}

/* ---------------------------------------------------------------------------
   Waagerechter Schieber über der Zeichenfläche

   `overflow-x: auto` setzt den Balken an den unteren Rand. Bei einem
   Editor über die volle Fensterhöhe liegt er damit am Bildschirmrand,
   weit weg von der Arbeit.

   Dieser Streifen liegt über der Fläche und schiebt sie mit. Er ist
   leer — die Breite seines Inhalts entspricht der Breite der Fläche,
   mehr braucht er nicht.
   ------------------------------------------------------------------------ */

.editor__schieber {
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    background: var(--flaeche-ruhig);
    border-bottom: 1px solid var(--linie);

    /* Hoch genug, dass der Balken auch dort greifbar ist, wo das
     * System ihn schmal zeichnet. */
    height: 14px;
}

.editor__schieber > div {
    height: 1px;
}

/* Ohne Überlauf ist der Streifen nur eine Linie im Weg. Das
 * JavaScript blendet ihn dann aus. */
.editor__schieber[hidden] {
    display: none;
}

/* Der Balken soll sichtbar sein, nicht erst beim Berühren erscheinen.
 * Auf Systemen mit überlagerten Balken sonst unauffindbar. */
.editor__schieber {
    scrollbar-width: thin;
}

.editor__schieber::-webkit-scrollbar {
    height: 12px;
}

.editor__schieber::-webkit-scrollbar-thumb {
    background: var(--linie-stark);
    border-radius: 6px;
}

.editor__schieber::-webkit-scrollbar-track {
    background: var(--flaeche-ruhig);
}

/* ---------------------------------------------------------------------------
   Zoomstufe des Zeichenblattes

   Das Blatt ist 1600 Punkte breit. Mit Palette und Eigenschaften
   braucht der Editor über 2000 — mehr, als viele Bildschirme haben.

   Die Stufe betrifft nur das Blatt. Palette, Leiste und
   Eigenschaften bleiben lesbar.
   ------------------------------------------------------------------------ */

.editor__zoom {
    margin-left: var(--a2);
}

.editor__zoom .knopf {
    font-variant-numeric: tabular-nums;
    min-width: 2.4rem;
}

/* Das Blatt darf schmaler werden als die 400 Punkte von vorhin —
 * bei kleiner Zoomstufe passt der Inhalt ja hinein. */
.editor__blatt {
    min-width: 240px;
}

/* Die drei Spalten dürfen sich nicht zusammendrücken lassen.
   Sonst passt der Editor immer ins Fenster — und ein Schieber
   hätte nichts zu tun, während rechts trotzdem etwas fehlt. */
.editor__palette       { min-width: 220px; flex: 0 0 220px; }
.editor__eigenschaften { min-width: 240px; flex: 0 0 240px; }
.editor__blatt         { min-width: 900px; flex: 1 0 900px; }

/* Die drei Spalten dürfen sich nicht zusammendrücken lassen.
   Sonst passt der Editor immer ins Fenster — und ein Schieber
   hätte nichts zu tun, während rechts trotzdem etwas fehlt. */
.editor__palette       { min-width: 220px; flex: 0 0 220px; }
.editor__eigenschaften { min-width: 240px; flex: 0 0 240px; }
.editor__blatt         { min-width: 900px; flex: 1 0 900px; }

/* Der Editor rechnete mit `100vh - 3.4rem` — der Kopfzeile.
   Brotkrumenpfad, Schieber und der Innenabstand des Inhalts
   kamen nicht vor. Zusammen ragt der Editor unten heraus, und
   `overflow: hidden` am body macht das Fehlende unerreichbar.

   `flex` statt fester Höhe: Der Editor nimmt, was übrig ist. */
body.editor-seite {
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

body.editor-seite .inhalt {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: var(--a2);
    padding-bottom: 0;
}

.editor[data-editor] {
    height: auto;
    flex: 1;
    min-height: 0;
}

body.editor-seite .fuss {
    display: none;
}

/* Die Fläche wuchs auf die Breite ihres Inhalts (2104) statt auf die
   des Editors (1227) — deshalb war `scrollWidth` gleich `clientWidth`
   und es gab nichts zu schieben, obwohl rechts etwas fehlte.

   Ein Flex-Element wächst über seinen Container hinaus, wenn seine
   Kinder eine Mindestbreite haben. `min-width: 0` verbietet das:
   Die Fläche bleibt so breit wie der Editor, der Inhalt läuft über —
   und genau dann greift `overflow-x: auto`. */
.editor[data-editor] {
    min-width: 0;
    overflow: hidden;
}

.editor__flaeche {
    min-width: 0;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   Der Editor auf schmalen Geräten

   Über 900 Punkten: drei Spalten nebeneinander, waagerecht
   scrollbar. Bleibt, wie es ist.

   Darunter: untereinander in Leserichtung. Palette oben,
   Blatt in der Mitte, Eigenschaften unten. Man scrollt.

   WARUM 900

   Darunter bleiben nach Palette (220) und Eigenschaften (240)
   weniger als 440 Punkte für das Blatt. Das ist keine
   Zeichenfläche mehr.

   Derselbe Bruchpunkt wie in Abschnitt 13 — dort trennt er
   Arbeitsplatz von Tablet.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

    /* Die Seite darf scrollen. Auf dem Schreibtisch verhindert
     * `overflow: hidden`, dass die Zeichenfläche wegwandert —
     * hier wäre es nur im Weg. */
    body.editor-seite {
        overflow: auto;
        height: auto;
        display: block;
    }

    body.editor-seite .inhalt {
        display: block;
        padding: var(--a2);
    }

    .editor[data-editor] {
        height: auto;
        min-height: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    /* ── Die drei untereinander ───────────────────────────────── */

    .editor__flaeche {
        flex-direction: column;
        overflow: visible;
        width: auto;
    }

    /* Die Palette quer oben. Feste Höhe, sonst schöbe eine Liste
     * mit dreißig Gruppen das Blatt aus dem Bild. */
    .editor__palette {
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
        max-height: 45vh;
        overflow-y: auto;
        border-right: none;
        border-bottom: 2px solid var(--linie-stark);
    }

    /* Mehr Spalten, weil jetzt die ganze Breite da ist. */
    .palette__gitter {
        grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    }

    /* Das Blatt: volle Breite, in beide Richtungen scrollbar.
     * 1600 Punkte passen auf kein Handy — das ist in Ordnung,
     * man schiebt. */
    .editor__blatt {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        min-height: 55vh;
        overflow: auto;
        padding: var(--a2);
    }

    /* Die Eigenschaften unten, über die ganze Breite. */
    .editor__eigenschaften {
        width: auto;
        min-width: 0;
        flex: 0 0 auto;
        border-left: none;
        border-top: 2px solid var(--linie-stark);
    }

    /* Zwei Spalten für die Felder — nebeneinander ist hier
     * lesbarer als untereinander. */
    .eigen__inhalt {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--a3);
        align-items: start;
    }

    .eigen__inhalt > button {
        grid-column: 1 / -1;
    }

    /* ── Der Schieber ─────────────────────────────────────────── */

    /* Er koppelt an die Fläche, und die scrollt hier nicht mehr
     * waagerecht. Weg damit — das Blatt bringt seinen eigenen mit. */
    .editor__schieber {
        display: none;
    }

    /* ── Die Werkzeugleiste ───────────────────────────────────── */

    /* Umbrechen statt quetschen. Sonst schrumpfen die Knöpfe
     * unter die Größe, die ein Finger trifft. */
    .editor__leiste {
        flex-wrap: wrap;
        gap: var(--a1);
        padding: var(--a2);
    }

    .editor__abstand {
        display: none;
    }

    /* Der Titel über die ganze Zeile — sonst drängt er die
     * Werkzeuge in die nächste. */
    .editor__titel {
        flex-basis: 100%;
    }

    /* Antippbare Flächen. 42 Punkte sind das Mindestmaß, unter
     * dem ein Finger danebentrifft. */
    .editor__leiste .knopf {
        min-height: 38px;
        min-width: 38px;
    }

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

/* Auf dem Telefon ist auch für zwei Spalten Eigenschaften kein
   Platz mehr. */
@media (max-width: 520px) {

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

    .palette__gitter {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    }

    .editor__palette {
        max-height: 38vh;
    }
}

/* ── Übersetzungen bearbeiten ───────────────────────────────────── */

.uebersetzung__feld {
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.92rem;
    transition: border-color 0.15s, background 0.15s;
}

/* Erst beim Hineinklicken sieht es aus wie ein Eingabefeld. Sonst
   flimmert eine Liste aus hundert Rahmen. */
.uebersetzung__feld:hover {
    border-color: var(--linie);
}

.uebersetzung__feld:focus {
    outline: none;
    border-color: var(--akzent);
    background: var(--flaeche-ruhig);
}

.uebersetzung__feld--gut {
    border-color: var(--erfolg);
    background: color-mix(in srgb, var(--erfolg) 12%, transparent);
}

.uebersetzung__feld--fehler {
    border-color: var(--fehler);
    background: color-mix(in srgb, var(--fehler) 12%, transparent);
}

.uebersetzung__haken {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.tabelle.uebersetzung td {
    vertical-align: middle;
}

/* Der deutsche Text ist der Schlüssel — das Feld sieht anders aus,
   damit niemand versehentlich hineingerät. */
.uebersetzung__feld--quelle {
    font-size: 0.88rem;
    color: var(--text-ruhig);
}

.uebersetzung__feld--quelle:focus {
    color: var(--text);
}

/* Ein Streifen am unteren Rand statt eines Meldungsfensters. Wer
   eine Liste durcharbeitet, will nicht wegklicken müssen. */
.uebersetzung__hinweis {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(120%);
    max-width: min(40rem, 92vw);
    padding: 0.7rem 1.1rem;
    border-radius: 6px;
    background: var(--flaeche-ruhig);
    border: 1px solid var(--akzent);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: transform 0.25s, opacity 0.25s;
    z-index: 60;
}

.uebersetzung__hinweis--sichtbar {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.uebersetzung__hinweis--fehler {
    border-color: var(--fehler);
}

/* ── Kontoseite ─────────────────────────────────────────────────── */

.konto {
    display: grid;
    gap: var(--a4);
    max-width: 46rem;
}

.konto .karte__koerper form + form {
    margin-top: var(--a4);
}

.konto .knopf {
    margin-top: var(--a2);
}

.daten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.2rem;
    margin: 0;
}

.daten dt {
    color: var(--text-ruhig);
    font-size: 0.9rem;
}

.daten dd {
    margin: 0;
}

/* ── Der Zeitstrahl im Dokumentverlauf ──────────────────────────── */

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

/* Die Linie zwischen den Punkten. Sie beginnt am ersten und endet
   am letzten Punkt, nicht am Kartenrand. */
.verlauf::before {
    content: '';
    position: absolute;
    left: 0.32rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--linie);
}

.verlauf__schritt {
    position: relative;
    padding: 0 0 1.1rem 1.6rem;
}

.verlauf__schritt:last-child {
    padding-bottom: 0;
}

.verlauf__punkt {
    position: absolute;
    left: 0;
    top: 0.28rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--flaeche);
    border: 2px solid var(--linie);
}

.verlauf__punkt--gut {
    border-color: var(--erfolg);
    background: var(--erfolg);
}

.verlauf__punkt--zurueck {
    border-color: var(--warnung);
    background: var(--flaeche);
}

.verlauf__punkt--offen {
    border-style: dashed;
}

.verlauf__was {
    font-weight: 550;
    font-size: 0.95rem;
}

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

.liste-schlicht li {
    padding: 0.25rem 0;
}

/* ── Die Beschreibung zu einer Operation ────────────────────────── */

.pb-dok {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.35rem 0 0 1.6rem;
    padding: 0.35rem 0.6rem;
    border-left: 2px solid var(--linie);
    font-size: 0.85rem;
}

.pb-dok__eintrag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pb-dok__leer {
    font-style: italic;
}

/* ── Alte Fassungen, zusammengeklappt ───────────────────────────── */

.pb-dok__alte {
    display: inline-block;
    position: relative;
}

.pb-dok__alte > summary {
    cursor: pointer;
    list-style: none;
}

.pb-dok__alte > summary::-webkit-details-marker {
    display: none;
}

/* Die Liste schwebt über dem Ablauf: Sie soll ihn nicht
   auseinanderschieben, wenn sie aufgeht. */
.pb-dok__liste {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    padding: 0.5rem 0.7rem;
    min-width: 22rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.pb-dok__zeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0;
    white-space: nowrap;
}

.pb-dok__zeile + .pb-dok__zeile {
    border-top: 1px solid var(--linie);
}

/* ── Die Farben der Änderungsbewertung ──────────────────────────── */

.tt-farben {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.6rem;
}

.tt-farbe {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    border: 1px solid var(--linie);
}

/* Dieselben Werte wie in der XLSX — wer die Seite und die Datei
   nebeneinander legt, sieht dasselbe. */
/* ══════════════════════════════════════════════════════════
    VIER ZUSTÄNDE, WIE SIE IN DER DATEI AUSSEHEN
   ══════════════════════════════════════════════════════════

   Diese Farben bilden ab, wie die Zellen in der erzeugten
   Excel-Datei aussehen. Wer hier Grün sieht, sieht dort Grün.

   Deshalb sind sie fest und folgen NICHT dem Dunkelmodus —
   sonst stünde auf dem Bildschirm etwas anderes als in der
   Datei.

   DIE SCHRIFT MUSS MIT

   Bis zum 12.09. stand hier nur der Grund. Im hellen Modus
   passte das, weil die Schrift ohnehin dunkel war.

   Im dunklen erbt sie `var(--text)` — und die ist hell. Hell
   auf hell ist nichts, und die vier Felder waren unlesbar.

   Ein fester Grund braucht eine feste Schrift.              */

.tt-farbe--keine,
.tt-farbe--wert,
.tt-farbe--entfernt,
.tt-farbe--neu { color: #1a1a1a; }

.tt-farbe--keine    { background: #e3f1e3; }
.tt-farbe--wert     { background: #fdf0dc; }
.tt-farbe--entfernt { background: #fbe4e4; }
.tt-farbe--neu      { background: #e3edf7; }

/* Auch die Erläuterung darunter — `.klein` setzt eine eigene
   Farbe, und die wäre im Dunkelmodus wieder hell.           */
.tt-farbe--keine .klein,
.tt-farbe--wert .klein,
.tt-farbe--entfernt .klein,
.tt-farbe--neu .klein { color: #4a4a4a; }

.tt-farbe--entfernt strong {
    text-decoration: line-through;
    color: #9b2c2c;
}

.feld__eingabe--schmal {
    max-width: 6rem;
}

/* ── Das Kombinationsfeld im Ablaufeditor ───────────────────────── */

.pb-hinzu__eingabe {
    min-width: 16rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--linie);
    border-radius: 4px;
    background: var(--flaeche);
    color: var(--text);
    font-size: 0.9rem;
}

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

/* Der Platzhalter soll wie die alte Beschriftung aussehen. */
.pb-hinzu__eingabe::placeholder {
    color: var(--text-ruhig);
    opacity: 1;
}

/* ── Katalogvorschläge ──────────────────────────────────────────── */

.pb-aehnlich {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pb-vorschlag-zeile {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.pb-vorschlag-zeile .feld {
    margin: 0;
}

.feld--breit {
    flex: 1;
    min-width: 14rem;
}

/* ── Der Zeichenwähler ──────────────────────────────────────────── */

.zeichenwahl__feld {
    max-width: 5rem;
    text-align: center;
    font-size: 1.1rem;
}

.zeichenwahl__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.4rem;
    max-width: 34rem;
}

.zeichenwahl__knopf {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--linie);
    border-radius: 4px;
    background: var(--flaeche);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
}

.zeichenwahl__knopf:hover {
    background: var(--flaeche-aktiv));
    border-color: var(--akzent);
}

/* ── Die Abweichungen ───────────────────────────────────────────── */

/* Dieselben Farben wie in der XLSX — wer beides nebeneinander
   legt, sieht dasselbe. */
.tt-zeile--geaendert { background: color-mix(in srgb, #fdf0dc 45%, transparent); }
.tt-zeile--entfaellt { background: color-mix(in srgb, #fbe4e4 45%, transparent); }
.tt-zeile--neu       { background: color-mix(in srgb, #e3edf7 45%, transparent); }

.marke--geaendert { background: #fdf0dc; color: #7a5c1e; }
.marke--entfaellt { background: #fbe4e4; color: #9b2c2c; }
.marke--neu       { background: #e3edf7; color: #1f5f8b; }

.tt-fehlt {
    color: #9b2c2c;
    font-style: italic;
}

/* Der Bereich zum Hochladen auf der Paketseite */
.tt-hochladen {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ── Process Fit Risk Assessment ────────────────────────────────── */

.pfra-zeile {
    border: 1px solid var(--linie);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--flaeche);
}

.pfra-zeile--geaendert { border-left: 3px solid #d99a3a; }
.pfra-zeile--entfaellt { border-left: 3px solid #a32d2d; }
.pfra-zeile--neu       { border-left: 3px solid #1f5f8b; }

.pfra-zeile__kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    flex-wrap: wrap;
}

.pfra-zeile__kopf::-webkit-details-marker { display: none; }

.pfra-zeile__kopf::before {
    content: '▸';
    color: var(--text-ruhig);
    flex: none;
}

.pfra-zeile[open] > .pfra-zeile__kopf::before { content: '▾'; }

.pfra-zeile[open] > .pfra-zeile__kopf {
    border-bottom: 1px solid var(--linie);
}

.pfra-zeile__name { flex: 1; min-width: 12rem; }

.pfra-zeile__koerper { padding: 0.9rem; }

/* Die RPZ als Zahl neben dem Namen */
.pfra-rpz {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--text-ruhig);
}

.pfra-rpz-anzeige {
    padding: 0.3rem 0.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Die Ampel: ein Punkt, keine Beschriftung — sie steht im Titel */
.pfra-ampel {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex: none;
}

.pfra-ampel--gering { background: #4a9a4a; }
.pfra-ampel--mittel { background: #d99a3a; }
.pfra-ampel--hoch   { background: #a32d2d; }

.pfra-bewertung {
    border: 1px solid var(--linie);
    border-radius: 6px;
    padding: 0.8rem;
    margin: 0.8rem 0;
}

.pfra-bewertung legend {
    padding: 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-ruhig);
}

.pfra-sae {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
    align-items: end;
}

.pfra-zwei {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.8rem;
}

.pfra-vier {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.6rem;
}

.pfra-bereiche {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pfra-bereich {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
}

.pfra-bereich:has(input:checked) {
    background: color-mix(in srgb, var(--akzent) 12%, transparent);
    border-color: var(--akzent);
}

.pfra-fehlt { margin: 0.4rem 0 0 1rem; }
.pfra-fehlt li { margin-bottom: 0.15rem; }

.marke--klein { font-size: 0.75rem; padding: 0.1rem 0.4rem; }

/* ── Die Artspalte im Parametereditor ───────────────────────────── */

.pb-param__sp-art { width: 6.5rem; }

.pb-param__art {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.2rem;
}

/* Ein Auswahlfeld ist etwas schmaler als ein Textfeld — es
   braucht Platz für den Pfeil. */
select.pb-param__wert { width: 100%; }

/* ── Die Grenzen ────────────────────────────────────────────────── */

.pb-param__sp-grenze { width: 9%; }

.pb-param__grenze {
    width: 100%;
    text-align: right;
    font-size: 0.9rem;
}

/* Der Platzhalter zeigt das Zeichen — ≥ oder ≤. Er ist blass,
   damit er nicht mit einem Wert verwechselt wird. */
.pb-param__grenze::placeholder {
    color: var(--text-ruhig);
    opacity: 0.5;
}

/* Die Grenzen im Ablauf: klein und blass hinter dem Sollwert */
.pb-grenzen {
    font-size: 0.85em;
    color: var(--text-ruhig);
}

/* Ein Wert außerhalb der Vorgabe */
.tt-ausserhalb {
    color: #a32d2d;
    font-weight: 600;
    margin-left: 0.2rem;
}

/* ── Der Import-Assistent ───────────────────────────────────────── */

/* Die Vorschau kann breit werden — sie darf scrollen, ohne die
   Seite mitzunehmen. */
.imp-vorschau { max-height: 30rem; overflow: auto; }

.imp-vorschau td,
.imp-vorschau th {
    white-space: nowrap;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Die gewählte Kopfzeile */
.imp-kopf {
    background: color-mix(in srgb, var(--akzent) 14%, transparent);
    font-weight: 600;
}

/* Was der Katalog kennt und was nicht */
.imp-bekannt { color: #4a9a4a; }

.imp-unbekannt {
    color: #a06a1a;
    border-bottom: 1px dotted #a06a1a;
}

.imp-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.imp-eintrag {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--linie);
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ── Design-Änderungen ──────────────────────────────────────────── */

.pb-aend--geaendert { border-left: 3px solid #c88a2a; }
.pb-aend--neu       { border-left: 3px solid #3a7ac8; }
.pb-aend--entfernt  { border-left: 3px solid #a32d2d; }

.pb-aend--entfernt td { opacity: 0.72; }

/* ── Die Reihenfolge ändern ─────────────────────────────────────── */

/* Zwei Pfeile am Element. Klein und blass — sie sind da, wenn
   man sie braucht, und stören nicht, wenn nicht. */
.pb-el__pfeil {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-ruhig);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
}

.pb-el__pfeil:hover {
    background: var(--flaeche-ruhig);
    border-color: var(--linie);
    color: var(--text);
}

.karte--flach {
    box-shadow: none;
    border: 1px solid var(--linie);
    margin-bottom: 0.8rem;
}

/* ══════════════════════════════════════════════════════════════
   Der grafische Prozesseditor
   ══════════════════════════════════════════════════════════════

   WARUM KEINE FREIEN POSITIONEN

   Ein R&I-Fließbild hat sie: Der Behälter steht, wo der Planer
   ihn hinsetzt. Ein PFC nicht — was oben steht, läuft zuerst.
   Die Position ist die Bedeutung.

   Also: verschachtelte Kästen, deren Anordnung die Struktur
   zeigt. Wer etwas verschiebt, ändert die Struktur. */

.ed {
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--flaeche);
    overflow: hidden;
}

.ed__leiste {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.8rem;
    background: var(--flaeche-ruhig);
    border-bottom: 1px solid var(--linie);
    font-size: 0.85rem;
}

.ed__stand { color: var(--text-ruhig); }
.ed__stand--fehler { color: #a32d2d; font-weight: 600; }

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

.ed__punkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-left: 0.6rem;
}

.ed__punkt--stage     { background: #4a6785; }
.ed__punkt--operation { background: #4a8a7a; }
.ed__punkt--action    { background: #8a7a4a; }

.ed__blatt {
    padding: 1rem;
    min-height: 20rem;
    overflow: auto;
}

/* ── Ein Element ────────────────────────────────────────────── */

.ed__el {
    border: 1px solid var(--linie);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--flaeche);
    margin: 0;
    transition: box-shadow 0.12s, transform 0.12s;
}

.ed__el--stage     { border-left-color: #4a6785; }
.ed__el--operation { border-left-color: #4a8a7a; }
.ed__el--action    { border-left-color: #8a7a4a; }

.ed__el:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }

.ed__el--gewaehlt {
    box-shadow: 0 0 0 2px var(--akzent);
}

/* Was gezogen wird, wird blass und leicht kleiner — man sieht,
   dass es unterwegs ist, und wo es herkam. */
.ed__el--zieht {
    opacity: 0.45;
    transform: scale(0.98);
}

.ed__el__kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    cursor: default;
}

.ed__griff {
    cursor: grab;
    color: var(--text-ruhig);
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.2rem;
    user-select: none;
    touch-action: none;
}

.ed__griff:active { cursor: grabbing; }

body.ed-zieht { cursor: grabbing; user-select: none; }

.ed__zeichen { font-size: 1rem; width: 1.2rem; text-align: center; }
.ed__name    { font-weight: 500; }

.ed__nummer {
    margin-left: auto;
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: var(--text-ruhig);
}

.ed__werte {
    padding: 0 0.6rem 0.45rem 2.4rem;
    font-size: 0.8rem;
    color: var(--text-ruhig);
}

.ed__kinder {
    padding: 0 0.6rem 0.5rem 1.6rem;
    border-top: 1px dashed var(--linie);
    margin-top: 0.2rem;
}

/* ── Die Ablegestellen ──────────────────────────────────────── */

/* WARUM SIE IMMER DA SIND

   Zwei Bildpunkte hoch und unsichtbar, bis jemand etwas
   darüberzieht. Sie erst beim Ziehen anzulegen hieße, das Blatt
   mitten in der Bewegung umzubauen — dann springt alles. */

.ed__ablege {
    height: 2px;
    margin: 2px 0;
    border-radius: 2px;
    transition: height 0.1s, background 0.1s;
}

.ed__ablege--bereit {
    height: 10px;
    background: var(--akzent-hell);
}

.ed__ablege--treffer {
    height: 16px;
    background: var(--akzent);
}

/* ── Verzweigungen ──────────────────────────────────────────── */

.ed__gruppe {
    margin: 0.3rem 0;
    border-radius: 6px;
    background: var(--flaeche-ruhig);
}

.ed__gruppe__balken {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-top: 3px solid var(--text);
    border-bottom: 1px solid var(--text);
}

/* Doppelter Balken heißt parallel, einfacher alternativ — wie
   in der Ablaufsprache nach IEC 61131-3. */
.ed__gruppe--parallel > .ed__gruppe__balken {
    border-top-style: double;
    border-top-width: 6px;
}

.ed__gruppe__balken--unten {
    border-top: 1px solid var(--text);
    border-bottom: 3px solid var(--text);
    min-height: 0.4rem;
}

.ed__gruppe--parallel > .ed__gruppe__balken--unten {
    border-bottom-style: double;
    border-bottom-width: 6px;
}

.ed__gruppe__art {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-ruhig);
}

.ed__gruppe__name { font-size: 0.85rem; }

.ed__gruppe__knopf {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-ruhig);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.1rem 0.35rem;
}

.ed__gruppe__knopf:last-child { margin-left: 0; }
.ed__gruppe__knopf:nth-last-child(2) { margin-left: auto; }

.ed__gruppe__knopf:hover {
    background: var(--flaeche);
    border-color: var(--linie);
    color: var(--text);
}

.ed__zweige {
    display: flex;
    gap: 0.8rem;
    padding: 0.5rem;
    align-items: flex-start;
}

.ed__zweig {
    flex: 1 1 0;
    min-width: 12rem;
    border: 1px dashed var(--linie);
    border-radius: 6px;
    padding: 0.4rem;
    background: var(--flaeche);
}

.ed__zweig__kopf {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.3rem;
}

.ed__zweig__bedingung {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--akzent);
}

/* ── Die Werkzeuge am gewählten Element ─────────────────────── */

.ed__werkzeuge {
    position: absolute;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.5rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ed__werkzeuge__name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 0.4rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Auf schmalen Bildschirmen stehen die Zweige untereinander —
   nebeneinander wäre jeder drei Zentimeter breit. */
@media (max-width: 60rem) {
    .ed__zweige { flex-direction: column; }
    .ed__zweig  { min-width: 0; }
}

/* ── Der Schatten beim Ziehen ───────────────────────────────── */

/* Er folgt dem Zeiger und trägt den Namen. Damit ist immer klar,
   was man trägt — auch wenn man weit gescrollt hat.

   `pointer-events: none` ist das Entscheidende: Sonst läge er
   zwischen Zeiger und Ablegestelle, und nichts würde treffen. */

.ed__schatten {
    position: fixed;
    z-index: 100;
    pointer-events: none;

    display: flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.35rem 0.6rem;
    border: 1px solid var(--linie);
    border-left-width: 4px;
    border-radius: 6px;
    background: var(--flaeche);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);

    font-size: 0.85rem;
    white-space: nowrap;

    /* Leicht gedreht — das sagt „aufgenommen", ohne dass man es
       lesen muss. */
    transform: rotate(-1.5deg);
    opacity: 0.94;
}

.ed__schatten--stage     { border-left-color: #4a6785; }
.ed__schatten--operation { border-left-color: #4a8a7a; }
.ed__schatten--action    { border-left-color: #8a7a4a; }

.ed__schatten__zeichen { font-size: 1rem; }
.ed__schatten__name    { font-weight: 500; }

/* Wohin es geht — steht im Schatten, nicht in der Statuszeile.
   Wer zieht, schaut auf den Zeiger, nicht nach oben links. */
.ed__schatten__ziel {
    font-size: 0.75rem;
    color: var(--akzent);
    border-left: 1px solid var(--linie);
    padding-left: 0.4rem;
    margin-left: 0.2rem;
}

.ed__schatten--daneben .ed__schatten__ziel {
    color: var(--text-schwach);
}

/* ── Bilder in der Hilfe ────────────────────────────────────── */

/* SVG im Text statt Bilddateien: Sie skalieren ohne Unschärfe,
   folgen über `currentColor` dem hellen und dunklen Thema, und
   niemand muss sie pflegen, wenn sich die Oberfläche ändert —
   sie zeigen das Prinzip, nicht einen Bildschirm. */

.hilfe-bild {
    display: block;
    width: 100%;
    max-width: 34rem;
    height: auto;
    margin: 1.2rem 0;
    color: var(--text);
}

.hilfe-code {
    background: var(--flaeche-ruhig);
    border: 1px solid var(--linie);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    font-family: ui-monospace, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    overflow-x: auto;
    margin: 0.8rem 0;
}

.tabelle--klein td,
.tabelle--klein th {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

/* ── Die Vorlagenauswahl ────────────────────────────────────── */

/* Ein leerer Prozess ist ein leeres Blatt. Wer hier landet, soll
   den Ausgangspunkt zuerst sehen — nicht nach ihm suchen. */

.karte--betont {
    border-color: var(--akzent);
    border-width: 2px;
}

.tpl__knopf:hover {
    border-color: var(--akzent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.marke--klein {
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
}

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

/* ═══ Ablauf leeren ═══
   Der Knopf steht am Ende der Seite und ist zurueckhaltend
   gestaltet: Er wird selten gebraucht, und wer ihn
   versehentlich trifft, verliert Arbeit. */
.pb-leeren {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linie);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.pb-btn--warn {
    background: transparent;
    border: 1px solid var(--fehler);
    color: var(--fehler);
}

.pb-btn--warn:hover {
    background: var(--fehler);
    color: #fff;
}

.pb-leeren__hinweis {
    font-size: 0.85rem;
    color: var(--text-ruhig);
}

/* ═══ Templatekacheln ═══
   GLEICHE HÖHE, GLEICHE BREITE

   Vorher richtete sich die Höhe nach der Beschreibung. Ein
   Template mit drei Sätzen war doppelt so hoch wie eines mit
   einem — das Raster brach auseinander.

   Jetzt: feste Höhe, der Text auf drei Zeilen abgeschnitten.
   Wer mehr wissen will, zieht das Template ein und liest die
   Kopfdaten. */

.tpl-gruppe {
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--linie);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-ruhig);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.tpl-gruppe:first-of-type { margin-top: 0; }

.tpl-gruppe__zahl {
    font-weight: 400;
    font-size: 0.8rem;
    opacity: 0.6;
}

.tpl-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.tpl { display: flex; }

.tpl__knopf {
    /* DIE KACHEL SELBST
       Fläche, Rahmen, Polsterung — alles über Variablen,
       damit Hell- und Dunkelmodus von selbst stimmen. */
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund-m);
    padding: var(--a3);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;

    /* ALLE GLEICH GROSS
       `height: 100%` zusammen mit `align-items: stretch` am
       Raster: Die höchste Kachel der Reihe gibt das Maß. */
    height: 100%;
    width: 100%;
    min-height: 8.5rem;

    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.tpl__name {
    /* Zwei Zeilen für den Namen, dann Punkte. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5rem;
}

.tpl__marken {
    min-height: 1.4rem;
    align-items: flex-start;
}

.tpl__text {
    /* DREI ZEILEN, DANN PUNKTE
       Das ist der Kern: Ohne diese Begrenzung wächst die
       Kachel mit dem Text. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
}

@media (max-width: 640px) {
    .tpl-liste {
        grid-template-columns: 1fr;
    }

    .tpl__knopf { min-height: 0; }
}
/* ============================================================
   FMEA-Editor
   26.08.2026 — an erp.css anhaengen

   Nur was fehlt. Karte, Feld, Raster, Marke und Knopf kommen aus
   dem Bestand.
   ============================================================ */

/* Eine Parameterzeile. Zugeklappt eine Zeile, aufgeklappt ein
   Formular — dieselbe Bauart wie die PFRA-Zeile. */
.fmea-zeile { margin-bottom: .5rem; }

.fmea-zeile__kopf {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    flex-wrap: wrap;
    cursor: pointer;
    padding: .6rem .9rem;
    list-style: none;
}

.fmea-zeile__kopf::-webkit-details-marker { display: none; }

.fmea-zeile__kopf::before {
    content: '▸';
    opacity: .5;
    flex: none;
}

.fmea-zeile[open] > .fmea-zeile__kopf::before { content: '▾'; }

.fmea-zeile__name { flex: 1 1 20rem; }

/* Eine Fehlerart. Der linke Rand traegt das Restrisiko — so sieht
   man beim Scrollen, wo es brennt, ohne zu lesen. */
.fmea-fa {
    border-inline-start: 3px solid var(--linie-stark);
    padding: .8rem 0 .8rem .9rem;
    margin: .8rem 0;
}

.fmea-fa + .fmea-fa { border-block-start: 1px solid var(--linie-stark); }

.fmea-fa--hoch   { border-inline-start-color: var(--fehler); }
.fmea-fa--mittel { border-inline-start-color: var(--warnung, #d68910); }
.fmea-fa--gering { border-inline-start-color: var(--erfolg); }
.fmea-fa--offen  { border-inline-start-color: var(--linie-stark); }

.fmea-fa__neu { margin: .6rem 0; }
.fmea-fa__neu > summary { cursor: pointer; }

/* Die drei Wertfelder von NOR nebeneinander. */
.werte { display: flex; gap: .4rem; }
.werte > input { min-width: 0; flex: 1 1 0; }

.rechts { text-align: end; }

/* Eine Marke, die warnt — Apparatebezug, nicht eingestuft. */
.marke--warnung {
    background: var(--warnung-hell, #fdf3e0);
    color: var(--warnung, #8a5a00);
}
/* ============================================================
   Methodenkatalog

   Nur sechs eigene Klassen. Alles andere kommt aus dem
   vorhandenen Baukasten: seitenkopf, karte, tabelle-rahmen,
   tabelle, feld, feldgruppe, knopf, meldung, leer.

   AUSSCHLIESSLICH VARIABLEN

   Keine feste Farbe. Der Umschalter zwischen hell und dunkel
   setzt die Variablen um, und diese Regeln folgen von selbst.
   Deshalb steht hier auch keine eigene Regel fuer
   html[data-thema-aktiv="dunkel"].
   ============================================================ */

/* Die Klassenzeile in der Liste.
   Ordnet die Tabelle, ohne die Klasse in jeder Zeile zu
   wiederholen. */
.am-gruppe {
    background: var(--flaeche-ruhig);
    color: var(--text-ruhig);
    font-size: var(--gr-s);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding-top: var(--a2);
    padding-bottom: var(--a2);
}

/* Eine inaktive Methode bleibt lesbar, tritt aber zurueck. */
.am-inaktiv td {
    color: var(--text-schwach);
}

.am-inaktiv a {
    color: var(--text-schwach);
}

/* Messgroesse und Normstatus sind Nebenangaben. */
.am-klein {
    font-size: var(--gr-s);
    color: var(--text-ruhig);
}

/* Der Messort als Marke.
   Inline und online heben sich ab, weil sie im laufenden
   Prozess messen — das ist die Angabe, auf die es bei der
   Auswahl ankommt. */
.am-ort {
    display: inline-block;
    padding: 1px var(--a2);
    border-radius: var(--rund-s);
    font-size: var(--gr-xs);
    line-height: 1.6;
    border: 1px solid var(--linie);
    color: var(--text-ruhig);
    background: var(--flaeche-ruhig);
}

.am-ort--inline,
.am-ort--online {
    border-color: var(--akzent);
    color: var(--akzent);
    background: var(--akzent-hell);
}

/* Kaestchen nebeneinander statt untereinander.
   Sieben Branchen in einer Spalte waeren eine Wand. */
.am-kaestchen {
    display: inline-flex;
    align-items: center;
    gap: var(--a1);
    margin-right: var(--a4);
    margin-bottom: var(--a2);
    font-size: var(--gr-m);
    color: var(--text);
    cursor: pointer;
}

.am-kaestchen input {
    margin: 0;
}

/* Die Normtabelle traegt Eingabefelder statt Text.
   Ohne diese Regel sprengen sie die Spaltenbreite. */
#am-normen input[type="text"] {
    width: 100%;
    min-width: 0;
    font-size: var(--gr-s);
}

#am-normen td {
    padding-top: var(--a1);
    padding-bottom: var(--a1);
}

/* Auf schmalen Geraeten wird die Filterreihe zur Spalte.
   Das macht feldgruppe von selbst; hier bleibt nur die
   Normtabelle, die scrollen muss statt zu brechen. */
@media (max-width: 700px) {
    #am-normen {
        min-width: 640px;
    }
}
/* ============================================================
   Die Analytik am Schritt

   Vier eigene Klassen, alle mit Variablen. Der Umschalter
   zwischen hell und dunkel traegt von selbst.
   ============================================================ */

/* Eine Zeile aus dem Katalog.
   Sie tritt zurueck, solange sie unveraendert ist — und faellt
   in die normale Darstellung, sobald jemand sie anfasst. */
.am-aus-katalog td {
    background: var(--flaeche-ruhig);
}

.am-aus-katalog input,
.am-aus-katalog select {
    border-color: var(--linie);
}

/* Die Kennung und der Messort unter dem Tippfeld.
   Sie beantworten die Frage, die man beim Auswaehlen hat:
   Ist das die richtige, und misst sie rechtzeitig? */
.am-methode-info {
    margin-top: var(--a1);
    font-size: var(--gr-xs);
    color: var(--text-schwach);
}

/* Von, Wert, bis und Einheit nebeneinander.
   Untereinander waere die Zeile viermal so hoch. */
.am-grenze {
    white-space: nowrap;
}

.am-grenze input {
    width: 4.5em;
    display: inline-block;
    margin-right: var(--a1);
}

.am-grenze select {
    width: auto;
    display: inline-block;
    min-width: 4em;
}

/* Die Bemerkung laeuft ueber die ganze Breite.
   Sie gehoert zur Zeile darueber, deshalb kein eigener Rahmen. */
.am-bemerkung {
    padding-top: 0;
    border-top: none;
}

.am-bemerkung input {
    width: 100%;
    font-size: var(--gr-s);
    color: var(--text-ruhig);
}

/* Die Zeilentabelle traegt Eingabefelder statt Text. */
#am-zeilen input[type="text"],
#am-zeilen select {
    font-size: var(--gr-s);
}

#am-zeilen td {
    padding-top: var(--a1);
    padding-bottom: var(--a1);
    vertical-align: top;
}

@media (max-width: 900px) {
    #am-zeilen {
        min-width: 900px;
    }
}
/* ============================================================
   Die Rohstoffkataloge

   Drei eigene Klassen, alle mit Variablen.
   ============================================================ */

/* Ein inaktiver Eintrag bleibt lesbar, tritt aber zurueck. */
.rs-inaktiv td,
.rs-inaktiv a {
    color: var(--text-schwach);
}

/* Die Einheit in der Spaltenueberschrift. */
.rs-einheit {
    font-weight: 400;
    font-size: var(--gr-xs);
    color: var(--text-schwach);
}

/* Kaestchen nebeneinander statt untereinander.
   Zehn Branchen in einer Spalte waeren eine Wand. */
.rs-kaestchen {
    display: inline-flex;
    align-items: center;
    gap: var(--a1);
    margin-right: var(--a4);
    margin-bottom: var(--a2);
    font-size: var(--gr-m);
    color: var(--text);
    cursor: pointer;
}

.rs-kaestchen input {
    margin: 0;
}
/* ============================================================
   Sortierbare Spaltenköpfe

   Der Pfeil steht rechts und nimmt Platz ein, auch wenn er
   unsichtbar ist — sonst springt die Spaltenbreite beim ersten
   Klick.
   ============================================================ */

.tab-sortierbar {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px;
}

.tab-sortierbar:hover {
    color: var(--akzent);
}

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

/* Der Platzhalter: ein blasser Doppelpfeil, der beim
   Darüberfahren erscheint. Er sagt, dass die Spalte sortierbar
   ist, ohne die Übersicht zu stören. */
.tab-sortierbar::after {
    content: "⇅";
    position: absolute;
    right: 4px;
    opacity: 0;
    font-size: var(--gr-s);
    transition: opacity var(--uebergang);
}

.tab-sortierbar:hover::after {
    opacity: .4;
}

.tab-sortiert--auf::after {
    content: "↑";
    opacity: 1;
    color: var(--akzent);
}

.tab-sortiert--ab::after {
    content: "↓";
    opacity: 1;
    color: var(--akzent);
}

/* Die aktive Spalte hebt sich leicht ab. */
.tab-sortiert--auf,
.tab-sortiert--ab {
    color: var(--akzent);
}
/* ============================================================
   Die Stoffströme am Schritt

   Sieben eigene Klassen, alle mit Variablen.
   ============================================================ */

.st-aus-katalog td {
    background: var(--flaeche-ruhig);
}

.st-stoff-info {
    margin-top: var(--a1);
    font-size: var(--gr-xs);
    color: var(--text-schwach);
}

#st-zeilen input[type="text"],
#st-zeilen select {
    font-size: var(--gr-s);
}

#st-zeilen td {
    padding-top: var(--a1);
    padding-bottom: var(--a1);
    vertical-align: top;
}

#st-zeilen input.st-menge {
    text-align: right;
}

/* Die Bilanz unter der Tabelle.
   Sie steht ruhig da, solange sie aufgeht — und tritt hervor,
   wenn eine Lücke bleibt. */
.st-bilanz {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--a4);
    margin-top: var(--a3);
    padding: var(--a3);
    border: 1px solid var(--linie);
    border-radius: var(--rund-m);
    background: var(--flaeche-ruhig);
    font-size: var(--gr-s);
}

.st-bilanz__wert {
    color: var(--text-ruhig);
}

.st-bilanz__wert strong {
    font-family: var(--schrift-zahl);
    color: var(--text);
    margin-left: var(--a1);
}

.st-bilanz__hinweis {
    flex: 1 1 100%;
    color: var(--text-ruhig);
    font-size: var(--gr-xs);
}

.st-bilanz--stimmig strong {
    color: var(--erfolg);
}

.st-bilanz--offen strong {
    color: var(--warnung);
}

@media (max-width: 900px) {
    #st-zeilen {
        min-width: 900px;
    }
}
/* ============================================================
   Was über die Eingangsstoffe mitgeprüft wird

   Sie stehen unter den eigenen Prüfungen, deutlich abgesetzt:
   Sie gehören nicht zum Schritt, sondern zum Stoff. Keine
   Eingabefelder — wer sie ändern will, ändert den Stoff.
   ============================================================ */

.am-geerbt {
    margin-top: var(--a4);
    padding: var(--a3);
    border-left: 3px solid var(--linie-stark);
    background: var(--flaeche-ruhig);
    border-radius: 0 var(--rund-m) var(--rund-m) 0;
}

.am-geerbt__kopf {
    font-size: var(--gr-s);
    font-weight: 600;
    color: var(--text-ruhig);
    margin-bottom: var(--a2);
}

.am-geerbt__stoff {
    font-size: var(--gr-s);
    font-weight: 600;
    color: var(--text);
    margin-top: var(--a2);
    padding-top: var(--a1);
    border-top: 1px solid var(--linie);
}

.am-geerbt__stoff:first-of-type {
    border-top: none;
    padding-top: 0;
}

.am-geerbt__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--a2);
    font-size: var(--gr-s);
    padding: 2px 0 2px var(--a3);
    color: var(--text-ruhig);
}

.am-geerbt__methode {
    color: var(--text);
    min-width: 9em;
}

.am-geerbt__grenze {
    font-family: var(--schrift-zahl);
    font-size: var(--gr-xs);
    color: var(--text);
}

.am-geerbt__art {
    font-size: var(--gr-xs);
    padding: 1px var(--a2);
    border-radius: var(--rund-s);
    border: 1px solid var(--linie);
    color: var(--text-schwach);
}

.am-geerbt__sperrend {
    font-size: var(--gr-xs);
    padding: 1px var(--a2);
    border-radius: var(--rund-s);
    border: 1px solid var(--warnung);
    color: var(--warnung);
}
/* ============================================================
   Stoffe, Analytik und Kundennummern
   ============================================================ */

/* Eine Zeile ohne Kundennummer tritt zurück, ist aber lesbar. */
.kn-offen td {
    color: var(--text-ruhig);
}

.kn-weg {
    margin: 0 0 var(--a4) 0;
    padding-left: var(--a5);
    font-size: var(--gr-s);
    color: var(--text-ruhig);
}

.kn-weg li {
    margin-bottom: var(--a2);
}

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

.hinweis {
    margin-top: var(--a3);
    padding-top: var(--a2);
    border-top: 1px solid var(--linie);
}

.karte__unterzeile {
    margin-top: 2px;
}
/* ============================================================
   Die Kontrollen unter der Fehlerart

   Sie stehen als Liste, nicht als Tabelle: Die Begründung
   braucht Platz, und eine Tabelle mit einer langen Textspalte
   liest sich schlecht.
   ============================================================ */

.fk {
    margin-top: var(--a4);
    padding-top: var(--a3);
    border-top: 1px solid var(--linie);
}

.fk__kopf {
    font-size: var(--gr-s);
    font-weight: 600;
    color: var(--text-ruhig);
    margin-bottom: var(--a2);
}

.fk__zeile {
    display: grid;
    grid-template-columns: 7em 1fr 7em 5em 11em;
    gap: var(--a3);
    align-items: start;
    padding: var(--a2) 0;
    border-bottom: 1px solid var(--linie);
    font-size: var(--gr-s);
}

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

/* Eine verworfene Kontrolle bleibt sichtbar, tritt aber
   zurück — wer sie verworfen hat, hatte einen Grund. */
.fk__zeile--verworfen {
    opacity: .5;
}

/* Die Art als Marke. Vier Farben wären zu viel — die
   Unterscheidung trägt die Schrift. */
.fk__art {
    font-size: var(--gr-xs);
    padding: 2px var(--a2);
    border-radius: var(--rund-s);
    border: 1px solid var(--linie);
    color: var(--text-schwach);
    text-align: center;
    white-space: nowrap;
}

.fk__art--konstruktiv,
.fk__art--technisch {
    border-color: var(--erfolg);
    color: var(--erfolg);
}

.fk__was {
    color: var(--text);
}

.fk__quelle {
    display: inline-block;
    margin-left: var(--a2);
    font-size: var(--gr-xs);
    color: var(--text-schwach);
}

.fk__grund {
    margin-top: var(--a1);
    font-size: var(--gr-xs);
    color: var(--text-ruhig);
    line-height: 1.5;
}

.fk__wirkung {
    font-size: var(--gr-xs);
    color: var(--text-ruhig);
}

.fk__spaet {
    color: var(--warnung);
    margin-top: 2px;
}

/* Der Gewinn an Entdeckung. Er steht rechts, weil er das
   Ergebnis ist. */
.fk__e {
    text-align: right;
    font-family: var(--schrift-zahl);
}

.fk__e_alt {
    color: var(--text-schwach);
    text-decoration: line-through;
}

.fk__pfeil {
    color: var(--text-schwach);
    margin: 0 2px;
}

.fk__e strong {
    color: var(--erfolg);
    font-size: var(--gr-m);
}

.fk__tun {
    text-align: right;
}

.fk__stand {
    font-size: var(--gr-xs);
    padding: 2px var(--a2);
    border-radius: var(--rund-s);
    border: 1px solid var(--linie);
    color: var(--text-schwach);
}

.fk__stand--umgesetzt {
    border-color: var(--erfolg);
    color: var(--erfolg);
}

.fk__fuss {
    margin-top: var(--a2);
    padding-top: var(--a2);
    border-top: 1px solid var(--linie);
}

@media (max-width: 1100px) {
    .fk__zeile {
        grid-template-columns: 1fr;
        gap: var(--a1);
    }

    .fk__art { justify-self: start; }
    .fk__e, .fk__tun { text-align: left; }
}
/* ============================================================
   Die Kontrollen prüfen

   Eine Karte je Gruppe. Nicht je Kontrolle — dieselbe Kontrolle
   hängt an hunderten Fehlerarten, und es ist dieselbe Frage.
   ============================================================ */

.kp .karte__kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--a4);
}

.kp__zahl {
    margin-left: var(--a2);
    font-family: var(--schrift-zahl);
    font-weight: 400;
    color: var(--text-schwach);
}

.kp__unter {
    margin-top: var(--a1);
}

.kp__art {
    padding: 1px var(--a2);
    border-radius: var(--rund-s);
    border: 1px solid var(--linie);
}

.kp__art--konstruktiv,
.kp__art--technisch {
    border-color: var(--erfolg);
    color: var(--erfolg);
}

.kp__spaet {
    color: var(--warnung);
}

/* Was sie der Entdeckung bringt — die Zahl, die zählt. */
.kp__e {
    font-family: var(--schrift-zahl);
    font-size: var(--gr-l);
    color: var(--text-schwach);
    white-space: nowrap;
}

.kp__e strong {
    color: var(--erfolg);
}

.kp__pfeil {
    margin: 0 var(--a1);
}

.kp__grund {
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    line-height: 1.6;
    margin-bottom: var(--a3);
}

/* Die Beispiele: Sie zeigen, ob die Regel getroffen hat. */
.kp__proben {
    padding: var(--a3);
    background: var(--flaeche-ruhig);
    border-radius: var(--rund-m);
    margin-bottom: var(--a3);
}

.kp__probe {
    font-size: var(--gr-s);
    padding: var(--a1) 0;
    color: var(--text);
}

.kp__par {
    font-weight: 600;
    margin-right: var(--a2);
}

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

.kp__eform {
    display: inline-flex;
    align-items: center;
    gap: var(--a1);
    margin-left: auto;
}

.kp__eform select {
    width: 4em;
}
/* ── Die Detailansicht je Gruppe ── */

.kp__mehr {
    margin-top: var(--a2);
    padding-top: var(--a2);
    border-top: 1px solid var(--linie);
}

.kd-alle {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
    font-weight: 400;
    font-size: var(--gr-s);
    cursor: pointer;
}

.kd-gewaehlt {
    font-family: var(--schrift-zahl);
}

/* Eine schon entschiedene Zeile tritt zurück. */
.kd-zeile--umgesetzt td,
.kd-zeile--verworfen td {
    color: var(--text-schwach);
}

.kd-tun {
    position: sticky;
    bottom: 0;
    background: var(--flaeche);
    padding: var(--a3);
    border-top: 1px solid var(--linie);
    z-index: 5;
}

.kd-e {
    display: flex;
    align-items: center;
    gap: var(--a2);
}

.kd-e select {
    width: 5em;
}
/* ============================================================
   Kontrollen bearbeiten

   Das Formular klappt unter der Zeile auf, statt in einem
   eigenen Fenster zu stehen: Wer eine Kontrolle ändert, will
   die Fehlerart darüber sehen.
   ============================================================ */

.kd-form td {
    background: var(--flaeche-ruhig);
    padding: var(--a4);
}

.kd-form .feldgruppe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    gap: var(--a3);
    align-items: start;
}

.kd-form .feld--breit {
    grid-column: 1 / -1;
}

.kd-form .formular__aktionen {
    grid-column: 1 / -1;
    margin-top: 0;
}

.kd-kaestchen {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
    font-size: var(--gr-s);
    cursor: pointer;
}

/* Die Mengenaktionen unter dem Änderungsformular. */
.kd-tun2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--a2);
    margin-top: var(--a4);
    padding-top: var(--a3);
    border-top: 1px solid var(--linie);
}

.kd-etrenner {
    color: var(--text-schwach);
    margin: 0 var(--a2);
}

.kd-tun2 select {
    width: 5em;
}
/* ============================================================
   Zurück in den Katalog
   ============================================================ */

.av-text {
    font-size: var(--gr-s);
    color: var(--text-ruhig);
    line-height: 1.6;
    margin-bottom: var(--a3);
}

.av-hinweis {
    margin-top: var(--a2);
    padding-top: var(--a2);
    border-top: 1px solid var(--linie);
}
/* ============================================================
   Die Rezepturen

   Ein Schritt ist ein Kasten, die Zugaben stehen darin. Wer
   liest, wie angesetzt wird, will an der Stelle wissen, was
   zugegeben wird — nicht in einer Tabelle daneben.
   ============================================================ */

.rz-schritt {
    border: 1px solid var(--linie);
    border-radius: var(--rund-m);
    padding: var(--a3);
    margin-bottom: var(--a3);
    background: var(--flaeche);
}

.rz-schritt__kopf {
    display: flex;
    align-items: center;
    gap: var(--a3);
    margin-bottom: var(--a3);
}

.rz-schritt__nr {
    font-family: var(--schrift-zahl);
    font-size: var(--gr-l);
    color: var(--text-schwach);
    min-width: 2em;
    text-align: right;
}

.rz-schritt__handlung {
    flex: 1;
    font-weight: 600;
}

.rz-schritt__vorlage {
    width: 18em;
}

.rz-schritt__felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
    gap: var(--a3);
    margin-bottom: var(--a3);
}

.rz-schritt__felder .feld--breit {
    grid-column: 1 / -1;
}

/* Die Zugaben, eingerückt unter dem Schritt. */
.rz-teile {
    padding: var(--a3);
    background: var(--flaeche-ruhig);
    border-radius: var(--rund-s);
}

.rz-teil {
    display: grid;
    grid-template-columns: 1fr 10em 7em 12em 9em;
    gap: var(--a2);
    align-items: start;
    padding: var(--a2) 0;
    border-bottom: 1px solid var(--linie);
}

.rz-teil:last-of-type {
    border-bottom: none;
}

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

.rz-teil__konz input {
    width: 5em;
}

/* Die Einwaage — das Ergebnis, deshalb rechtsbündig und
   hervorgehoben. */
.rz-teil__waage {
    text-align: right;
    font-family: var(--schrift-zahl);
    padding-top: var(--a2);
}

.rz-teil__waage strong {
    font-size: var(--gr-m);
    color: var(--erfolg);
}

.rz-teil__marken {
    display: flex;
    gap: var(--a2);
    padding-top: var(--a2);
}

.rz-teil__marken label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

.rz-warn {
    color: var(--warnung);
}

/* Eine Zubereitung ohne Rezeptur tritt zurück. */
.rz-leer td {
    color: var(--text-schwach);
}

@media (max-width: 1200px) {
    .rz-teil {
        grid-template-columns: 1fr;
    }

    .rz-teil__waage {
        text-align: left;
    }

    .rz-schritt__kopf {
        flex-wrap: wrap;
    }

    .rz-schritt__vorlage {
        width: 100%;
    }
}

/* ── Die Zugabezeile: Breiten und Beschriftung ──

   Die Felder brauchen eine Breite. Ohne sie fällt das
   Eingabefeld auf null zusammen und ist unsichtbar — der
   Platzhalter hilft dann auch nicht.

   Und jedes Feld bekommt eine Beschriftung: "ad" und "Titrant"
   versteht niemand, der sie nicht kennt. */

.rz-teil {
    grid-template-columns: 1fr 11em 8em 13em 15em;
}

.rz-teil input[type="text"],
.rz-teil select {
    width: 100%;
}

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

.rz-teil__konzfeld input {
    width: 4.5em;
    flex: 0 0 4.5em;
}

.rz-teil__wert {
    padding-top: 6px;
    text-align: right;
}

.rz-teil .feld__label {
    display: block;
    margin-bottom: 2px;
}

/* Die beiden besonderen Fälle: ad und Titrant.
   Sie brauchen mehr als ein Wort. */
.rz-teil__marken {
    display: flex;
    flex-direction: column;
    gap: var(--a1);
    padding-top: 0;
}

.rz-marke {
    display: flex;
    align-items: flex-start;
    gap: var(--a2);
    cursor: pointer;
    font-size: var(--gr-s);
}

.rz-marke input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.rz-marke strong {
    display: block;
}

.rz-marke .klein {
    display: block;
    line-height: 1.3;
}

@media (max-width: 1200px) {
    .rz-teil {
        grid-template-columns: 1fr;
    }

    .rz-teil__wert {
        text-align: left;
    }
}

/* ── Die Textfelder brauchen Platz ──

   Beschreibung und Bemerkung tragen mehrere Absätze. In einem
   Raster mit elf Zentimetern Spaltenbreite lässt sich das
   weder schreiben noch lesen.

   Sie stehen deshalb über die volle Breite, und die Höhe
   wächst mit dem Inhalt. */

.rz-schritt__felder .feld--breit {
    grid-column: 1 / -1;
}

.rz-schritt__felder textarea {
    width: 100%;
    min-height: 5em;
    resize: vertical;
    line-height: 1.6;
    font-family: inherit;
}

/* Das Endekriterium ist ein Satz, kein Wort. */
.rz-schritt__felder .feld--breit input[type="text"] {
    width: 100%;
}

/* Auch das Rühren und die Temperatur tragen mehr als eine
   Zahl: "kräftig, ohne Trombe" braucht Platz. */
.rz-schritt__felder .feld input[type="text"] {
    width: 100%;
}

/* Die Beschreibung des Schritts und die Bemerkung
   nebeneinander, wenn Platz ist — sonst untereinander. */
@media (min-width: 1400px) {
    .rz-schritt__felder {
        grid-template-columns: repeat(4, 1fr);
    }

    .rz-schritt__felder .feld--halb {
        grid-column: span 2;
    }
}

/* ── Die Bedingungsfelder brauchen auch Platz ──

   "20 °C, gemessen bei Solltemperatur" und "kräftig, ohne
   Trombe" sind Sätze, keine Zahlen. In einer Elf-Zentimeter-
   Spalte sieht man drei Wörter.

   Das Raster wird weiter, und die Felder bekommen Breiten nach
   dem, was sie tragen:

     Temperatur      ein Satz
     Heizen/Kühlen   ein Wort aus einer Liste
     Rühren          ein Satz
     Dauer           eine Zahl
     Endekriterium   ein Satz, über die ganze Breite
*/

.rz-schritt__felder {
    display: grid;
    grid-template-columns: 1fr 9em 1fr 6em;
    gap: var(--a3);
    align-items: start;
}

.rz-schritt__felder input[type="text"],
.rz-schritt__felder select,
.rz-schritt__felder textarea {
    width: 100%;
}

.rz-schritt__felder input[type="number"] {
    width: 100%;
}

/* Das Endekriterium ist ein Satz und steht allein. */
.rz-schritt__felder .feld--breit {
    grid-column: 1 / -1;
}

.rz-schritt__felder textarea {
    min-height: 6em;
    resize: vertical;
    line-height: 1.6;
    font-family: inherit;
}

/* Auf breiten Bildschirmen Beschreibung und Bemerkung
   nebeneinander. */
@media (min-width: 1500px) {
    .rz-schritt__felder .feld--halb {
        grid-column: span 2;
    }
}

/* Auf schmalen alles untereinander — vier Spalten mit Sätzen
   darin sind auf einem Laptop unlesbar. */
@media (max-width: 1100px) {
    .rz-schritt__felder {
        grid-template-columns: 1fr 1fr;
    }

    .rz-schritt__felder .feld--halb {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .rz-schritt__felder {
        grid-template-columns: 1fr;
    }
}

/* ── Entfernen ──

   Abgesetzt von den übrigen Aktionen: Wer speichern will und
   löschen trifft, hat ein Problem. Der Abstand ist die
   Sicherung. */

.rz-gefahr {
    margin-top: var(--a6);
    border-color: var(--warnung);
}

.rz-gefahr__reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a5);
}

.rz-gefahr__reihe form {
    flex: 1 1 20em;
}

.rz-gefahr__reihe .klein {
    margin-top: var(--a1);
    line-height: 1.4;
}


/* ── EIN ZITAT IST GEKENNZEICHNET ────────────────────────
 *
 * Der Hilfsprozess wird zitiert, nicht kopiert. Wer die
 * Farbe sieht, weiss: Hier wird nichts geaendert — das
 * geschieht in der Vorlage.
 *
 * Ueber die Variablen, damit es im Dunkelmodus stimmt.
 */
.pb-el--zitat {
    background: var(--warnung-hell);
    border-left: 3px solid var(--warnung);
}

/* ── DIE ÜBERSETZUNG ALS LESEHILFE ───────────────────────
 *
 * Unter dem Eingabefeld: grau, klein, mit einer Sprachmarke
 * davor. Sie soll lesbar sein, aber nicht mit dem Feld
 * konkurrieren.
 *
 * Ueber die Variablen, damit es im Dunkelmodus stimmt.
 */
.lesehilfe {
    display: flex;
    gap: .5rem;
    align-items: flex-start;

    margin-top: .25rem;
    padding: .3rem .5rem;

    border-left: 2px solid var(--linie);
    background: var(--flaeche-ruhig);

    font-size: .82rem;
    line-height: 1.4;
    color: var(--text-ruhig);
}

.lesehilfe__marke {
    flex: 0 0 auto;

    padding: 0 .3rem;
    border-radius: 2px;

    background: var(--linie);
    color: var(--text-ruhig);

    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.lesehilfe__text {
    flex: 1 1 auto;
}

/* ── DIE ARBEITSLISTE DES ÜBERSETZERS ────────────────────
 *
 * Der deutsche Text ist die Vorlage, der englische die
 * Arbeit. Beide brauchen Platz und Umbruch — bei einem Satz
 * von achtzig Zeichen zeigt eine Zeile nur den Anfang.
 */
[data-fehlliste] td {
    vertical-align: top;
    font-size: .84rem;
    line-height: 1.4;
}

[data-fehlliste] textarea[data-fremd] {
    width: 100%;
    min-height: 3.2rem;

    font-size: .84rem;
    line-height: 1.4;

    resize: vertical;
}

/* ── DIE WERKBANK DES ÜBERSETZERS ────────────────────────
 *
 * Zwei Felder nebeneinander, die Knöpfe dazwischen. Auf
 * schmalen Schirmen untereinander — dann stehen die Knöpfe
 * quer in der Mitte.
 */
.wb {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: start;
}

.wb__seite {
    min-width: 0;
}

.wb__feld {
    width: 100%;
    min-height: 22rem;

    font-size: .9rem;
    line-height: 1.55;

    resize: vertical;
}

.wb__mitte {
    display: flex;
    flex-direction: column;
    gap: .4rem;

    padding-top: 2rem;
}

.wb__fuss {
    display: flex;
    justify-content: flex-end;

    padding-top: .2rem;
    min-height: 1.2rem;
}

.wb__stand {
    min-height: 1.4rem;
    padding-top: .5rem;
}

.wb__umschlag {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

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

    .wb__mitte {
        flex-direction: row;
        justify-content: center;
        padding-top: 0;
    }

    .wb__feld {
        min-height: 14rem;
    }
}

/* ── DER FORTSCHRITTSBALKEN ──────────────────────────────
 *
 * Ein Balken und eine Zeile darunter. Mehr braucht es nicht:
 * Wieviel geschafft, wie lange noch, woran gerade.
 */
.lauf {
    margin-top: 1rem;
}

.lauf__balken {
    height: .5rem;
    border-radius: 3px;
    overflow: hidden;

    background: var(--flaeche-ruhig);
}

.lauf__fuellung {
    height: 100%;
    width: 0;

    background: var(--akzent);

    transition: width .3s ease;
}

.lauf__zeile {
    display: flex;
    gap: 1rem;

    margin-top: .4rem;
    min-height: 1.3rem;
}

.lauf__zeile > :last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── DER HINWEIS ZU DEN ZITATEN ──────────────────────────
 *
 * Derselbe Kasten wie ein Zitat selbst — gelb hinterlegt,
 * gelber Randstreifen. Wer ihn sieht, erkennt die Kästen
 * darunter wieder.
 */
.zitat-hinweis {
    margin-bottom: 1rem;
    padding: .6rem .8rem;
}

/* ── WAS EIN ZITAT ANSETZT ───────────────────────────────
 *
 * Eine Zeile unter der Beschreibung: der Stoff und der Weg
 * zur Rezeptur. Ohne Stoff die Auswahl.
 */
.zitat-stoff {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;

    margin-top: .4rem;
    padding-top: .4rem;

    border-top: 1px solid var(--linie);
}

.zitat-stoff__name {
    font-weight: 600;
}

/* ── DER STOFF WIRD NIRGENDS GEBRAUCHT ───────────────────
 *
 * Rot mit weißer Schrift, in beiden Modi gleich.
 *
 * KEINE VARIABLEN
 *
 * Eine Warnung muss immer gleich aussehen. Wer sie im
 * Dunkelmodus übersieht, übersieht einen Fehler.
 */
.zitat-stoff--warnung {
    display: inline-block;

    padding: .1rem .5rem;
    border: 2px solid #c62828;
    border-radius: 3px;

    background: #c62828;
    color: #ffffff;

    font-weight: 700;
    font-size: .8rem;

    cursor: help;
}

/* ══════════════════════════════════════════════════════════════
   DAS KLAPPEN GEWINNT
   ══════════════════════════════════════════════════════════════

   Die Klappregel bei Zeile 3509 blieb wirkungslos: Bei 6593 und
   6600 stehen `min-width: 220px` und `flex: 0 0 220px` — und bei
   gleicher Gewichtung gewinnt die spaetere Regel.

   `min-width` verhindert das Zusammenklappen vollstaendig: Was
   mindestens 220 Punkte breit sein muss, wird nie null.

   Das JavaScript setzt die Klasse richtig — in der Konsole
   nachgewiesen. Nur das Aussehen folgte nicht.
   ------------------------------------------------------------ */

.editor__palette--zu,
.editor__eigenschaften--zu {
    width: 0;
    min-width: 0;
    max-width: 0;
    flex: 0 0 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   EXTERNE INHALTE
   ══════════════════════════════════════════════════════════

   Die vier Platzhalter [[ext:art:name]] werden zu Tabellen,
   Bildern und Diagrammen. Was fehlt, wird zu einem Kasten —
   sichtbar, aber nicht wie eine Panne.

   ISO 7144 und DIN 1421: Beschriftung bei Tabellen oben, bei
   Abbildungen unten. Das entscheidet `ExternerInhalt`, hier
   steht nur das Aussehen.
   ────────────────────────────────────────────────────────── */

.ext { margin: 1rem 0; }

.ext__titel {
    font-size: .88em;
    font-weight: 600;
    color: var(--text-ruhig);
    margin: 0 0 .25rem 0;
}

/* Bei Abbildungen steht der Titel darunter. */
.ext > .ext__titel:last-child { margin: .25rem 0 0 0; }

.ext--fehlt {
    border: 1px dashed var(--fehler);
    color: var(--fehler);
    padding: .6rem .8rem;
    border-radius: 4px;
    background: var(--fehler-hell);
}

.ext__svg { display: block; width: 100%; height: auto; }

/* Im SVG steht ein eigener <style> mit festen Werten — er
   ist fuer WeasyPrint da, das `currentColor` nicht aufloest
   (Kapitel 208).

   Diese Regel ist spezifischer und gewinnt im Browser. Dort
   folgt das Diagramm dem Thema. */
.ext__svg .d { stroke: currentColor; }
.ext__svg .ax, .ext__svg .gr { stroke: var(--linie); }
.ext__svg .tx { fill: var(--text-ruhig); }

@media print {
    .ext { break-inside: avoid; }
    .ext--fehlt { background: none; }
}

/* ══ PLATZHALTERFARBEN ══ */
/* ══════════════════════════════════════════════════════════
   WOHER EIN PLATZHALTER SEINEN WERT BEKOMMT
   ══════════════════════════════════════════════════════════

   Sieben Herkünfte, sieben Farben. Welche zu welcher gehört,
   steht in `platzhalter_herkunft.farbe` — hier stehen nur die
   Werte.

   KEIN BLASSER GRUND, SONDERN EIN RAND

   Kapitel 185: Für einen blassen Grund gäbe es keine
   Variable, die in beiden Modi trägt. Ein Rand in der Farbe
   trägt in beiden.

   Die Werte sind aus dem hellen Block von `erp.css`
   abgeleitet und im dunklen Block aufgehellt — dieselbe
   Familie, andere Helligkeit.
   ────────────────────────────────────────────────────────── */

:root {
    /* Was von selbst kommt: gedeckt, ruhig. */
    --ph-bezug:     #1f5f8b;
    --ph-provider:  #2a6d78;
    --ph-firma:     #5a6b7a;
    --ph-laufzeit:  #7a7f86;

    /* Was Arbeit macht: kräftiger. */
    --ph-feldsatz:  #1f7a4d;
    --ph-extern:    #7a3b6e;

    /* Was fehlt. */
    --ph-unbekannt: #a3521c;
}

/* ══ DER DUNKLE MODUS HAT ZWEI WEGE ══

   Die Anwendung kennt drei Zustände: hell, dunkel, auto.
   `base.html.twig` löst sie auf und setzt
   `data-thema-aktiv` auf `hell` oder `dunkel`.

   `@media` allein trüge nur „auto". Wer ausdrücklich
   „Dunkel" wählt und ein helles System hat, bekäme helle
   Farben.

   `erp.css` Zeile 1193 nennt den Grund für beides:
   Reihenfolge und Spezifität. `html[…]` ist spezifischer
   als `:root` und gewinnt auch gegen das Medienmerkmal. */

@media (prefers-color-scheme: dark) {
    :root {
        --ph-bezug:     #5fa8d8;
        --ph-provider:  #5fb3c0;
        --ph-firma:     #9aa8b5;
        --ph-laufzeit:  #b0b5bb;
        --ph-feldsatz:  #5fc08a;
        --ph-extern:    #c07ab0;
        --ph-unbekannt: #e09050;
    }
}

/* Wer „Hell" wählt, bekommt Hell — auch auf einem dunklen
   System. Deshalb die hellen Werte hier noch einmal. */
html[data-thema-aktiv="hell"] {
    --ph-bezug:     #1f5f8b;
    --ph-provider:  #2a6d78;
    --ph-firma:     #5a6b7a;
    --ph-laufzeit:  #7a7f86;
    --ph-feldsatz:  #1f7a4d;
    --ph-extern:    #7a3b6e;
    --ph-unbekannt: #a3521c;
}

html[data-thema-aktiv="dunkel"] {
    /* Auf dunklem Grund braucht dieselbe Farbe mehr
       Helligkeit, sonst verschwindet sie im Rand. */
    --ph-bezug:     #5fa8d8;
    --ph-provider:  #5fb3c0;
    --ph-firma:     #9aa8b5;
    --ph-laufzeit:  #b0b5bb;
    --ph-feldsatz:  #5fc08a;
    --ph-extern:    #c07ab0;
    --ph-unbekannt: #e09050;
}

/* ══ DIE MARKE ══

   Steht neben einem Platzhalternamen in der Vorlagenliste
   und im Erzeugungsformular. */
.ph {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    font-size: .82em;
    padding: .05rem .4rem;
    border: 1px solid var(--ph-farbe, var(--linie));
    border-radius: 3px;
    color: var(--ph-farbe, var(--text-ruhig));
    white-space: nowrap;
}

.ph__zeichen { font-size: .9em; }

.ph--bezug     { --ph-farbe: var(--ph-bezug); }
.ph--provider  { --ph-farbe: var(--ph-provider); }
.ph--firma     { --ph-farbe: var(--ph-firma); }
.ph--laufzeit  { --ph-farbe: var(--ph-laufzeit); }
.ph--feldsatz  { --ph-farbe: var(--ph-feldsatz); }
.ph--extern    { --ph-farbe: var(--ph-extern); }
.ph--unbekannt { --ph-farbe: var(--ph-unbekannt); }

/* ══ DIE LEGENDE ══

   Ohne sie ist ein farbiger Rand ein farbiger Rand. */
.ph-legende {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 .6rem 0;
    font-size: .85em;
}

.ph-legende__eintrag {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    cursor: help;
}

.ph-legende__punkt {
    width: .7rem;
    height: .7rem;
    border: 2px solid var(--ph-farbe, var(--linie));
    border-radius: 50%;
    display: inline-block;
}

/* ══ DIE ZEILE IM PLATZHALTERVERZEICHNIS ══ */
.ph-zeile {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    padding: .2rem 0;
    border-bottom: 1px solid var(--flaeche-ruhig);
}

.ph-zeile__name {
    font-family: var(--schrift-zahl, monospace);
    font-size: .88em;
    flex: 0 0 16rem;
    border-left: 3px solid var(--ph-farbe, var(--linie));
    padding-left: .4rem;
}

.ph-zeile__text {
    flex: 1;
    font-size: .85em;
    color: var(--text-ruhig);
    min-width: 0;
}

.ph-zeile__anzahl {
    font-size: .78em;
    color: var(--text-ruhig);
}

/* ══ DIE ÜBERSICHT IM ERZEUGUNGSFORMULAR ══

   Fünf bis sieben Zeilen, je Herkunft eine. Jede klappt auf
   und zeigt die Namen. */
.ph-uebersicht {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ph-uebersicht__zeile {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .35rem .5rem;
    border-left: 3px solid var(--ph-farbe, var(--linie));
    background: var(--flaeche-ruhig);
    cursor: pointer;
}

.ph-uebersicht__zeile:hover { background: var(--flaeche); }

.ph-uebersicht__bez { flex: 1; font-weight: 600; }

.ph-uebersicht__zahl {
    font-family: var(--schrift-zahl, inherit);
    font-weight: 600;
    color: var(--ph-farbe, var(--text));
}

.ph-uebersicht__namen {
    padding: .3rem 0 .5rem 1.2rem;
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

@media print {
    .ph, .ph-legende, .ph-uebersicht { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   DIE KARTEN IM WERKZEUGKASTEN
   ══════════════════════════════════════════════════════════════

   `.karte { overflow: hidden }` steht weiter oben für die
   runden Ecken. In einem Raster ist ein Element voreingestellt
   so hoch wie seine Zeile — ist die Karte höher, wird der Rest
   abgeschnitten.

   Die ODT-Karte mit ihren zwei Formularen traf es. */

.editor__werkzeuge > .karte,
.editor__felder > .karte {
    overflow: visible;
    align-self: start;
    min-height: 0;
}

/* In einer schmalen Spalte bricht „↓ Als ODT herunterladen"
   sonst nicht um, sondern ragt über den Rand. */
.editor__werkzeuge .knopf {
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
}

.editor__werkzeuge input,
.editor__werkzeuge select {
    max-width: 100%;
    box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════
   JEDE KARTE BEKOMMT EINEN ROLLBALKEN
   ══════════════════════════════════════════════════════════════

   Die Platzhalter stehen in `<details>`. Beim Aufklappen wächst
   der Inhalt — die Karte blieb auf ihrer Höhe und schnitt ihn
   ab.

   Ein eigener Rollbalken statt endlosen Wachsens: Neunzig
   Gruppen mit hunderten Knöpfen aufgeklappt wären meterhoch,
   und der Rest der Seite rutschte weg.

   Der KÖRPER rollt, nicht die Karte — dann bleibt der Kopf mit
   dem Titel stehen. */

.karte {
    overflow: visible;
    align-self: start;
    min-height: 0;
}

/* ══ NICHT DIE TEXTKARTE ══
   
   `.editor__text` enthält das grosse Textfeld. Es hat seine
   eigene Höhe über `rows` und darf nicht in einen Rollbalken
   gesperrt werden — sonst rollt man zweimal, einmal im Feld
   und einmal in der Karte. */

.editor__felder > .karte > .karte__koerper,
.editor__werkzeuge > .karte > .karte__koerper {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Das Suchfeld bleibt oben stehen. Wer in hundert Gruppen
   sucht, will es nicht jedes Mal heraufscrollen. */
.editor__suche {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--flaeche);
}


/* ══════════════════════════════════════════════════════════════
   DAS INHALTSVERZEICHNIS ZEIGT DIE STUFEN
   ══════════════════════════════════════════════════════════════

   `verzeichnis()` setzt `class="inhalt--2"` und `inhalt--3`.
   Ohne CSS dazu standen alle Eintraege gleichberechtigt — ein
   Unterpunkt aus einem eingesetzten Word-Dokument sah aus wie
   ein Hauptkapitel.

   ACHTUNG: `.inhalt--schmal` und `.inhalt--breit` gibt es
   schon, fuer die Seitenbreite. Die Zahlen hier sind etwas
   anderes und stoeren sich nicht daran — aber wer nach
   `inhalt--` sucht, findet beides. */

nav.inhalt .inhalt--2 { margin-left: 0; }

nav.inhalt .inhalt--3 {
    margin-left: 1.4rem;
    font-size: .95em;
}

nav.inhalt .inhalt--4 {
    margin-left: 2.8rem;
    font-size: .9em;
    color: var(--text-ruhig);
}