/* ===========================================================================
   Provimedia-Theme fuer das Partner-Portal
   ===========================================================================

   LADEREIHENFOLGE: diese Datei kommt NACH styles.css (Bootstrap 5.2.3).
   Das ist keine Geschmacksfrage, sondern die Bedingung, unter der sie
   ueberhaupt wirkt — und der erste Entwurf hatte es falsch herum:

     styles.css oeffnet selbst ein :root (Zeile 13) und setzt dort
     --bs-primary und Verwandte. Bei gleicher Spezifitaet gewinnt die
     SPAETERE Quelle. Eine Token-Datei DAVOR wird vollstaendig ueberschrieben.

   Und der zweite, wichtigere Punkt: Bootstrap 5.2 loest seine Komponenten
   NICHT ueber --bs-* auf. `var(--bs-primary)` wird in den 10.825 Zeilen von
   styles.css NULL Mal gelesen; .form-control traegt `border: 1px solid
   #ced4da` hart (Zeilen 2003, 2158, 2536). Die Verkettung
   `--bs-btn-bg: var(--bs-primary)` kam erst mit Bootstrap 5.3.

   Deshalb stehen unten EXPLIZITE Regeln je Komponente statt einer
   Variablen-Abbildung. Das ist mehr Text, aber es ist deterministisch: was
   hier nicht steht, aendert sich nicht, und was hier steht, gewinnt.
   Die Flaeche ist abgezaehlt — dieses Projekt benutzt rund 20 verschiedene
   Bootstrap-Klassen, nicht die 1.400 des Frameworks.

   VORBILD: www.provimedia.de, gemessen an der AUSGELIEFERTEN CSS
   (app-O0yxpDnZ.css, Stand 2026-09-22+d6a50cf), nicht an der Quelle.
   Leitidee dort woertlich: "Monochrom-editorial: warme neutrale Gruende +
   Ink" und "EINZIGER Akzent: gedaempftes Gruen, sparsam".

   Alle Kontrastwerte in den Kommentaren sind GERECHNET (WCAG-Luminanz),
   nicht geschaetzt.
   =========================================================================== */


/* --- Schriften ------------------------------------------------------------
   Selbst gehostet, kein Google-Origin. Variable Fonts mit der vollen
   Gewichtsachse 100-900, damit eine Datei alle Schnitte traegt.
   font-display: swap haelt den Text waehrend des Ladens sichtbar.
   Lizenz: SIL OFL 1.1, Text liegt bei (app/assets/fonts/OFL.txt) -- OFL
   Abschnitt 2 verlangt das bei jeder Weitergabe.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/plus-jakarta-sans-latin-var.woff2') format('woff2');
}


/* --- Token ---------------------------------------------------------------- */

:root {
    /* Gruende und Tinte */
    --pm-paper:          #F4F3EF;  /* Seitengrund, warmes Off-White */
    --pm-surface:        #FFFFFF;  /* Karten */
    --pm-ink:            #15161A;  /* Tinte, dunkle Baender */
    --pm-heading:        #15161A;  /* Ueberschriften        18,08:1 auf Weiss */
    --pm-body:           #374151;  /* Fliesstext            9,28:1 auf paper  */
    --pm-muted:          #646B78;  /* Sekundaertext         5,36:1 auf Weiss  */

    /* Kanten -- und hier liegt die Falle, die provimedia.de schon bezahlt hat.
       `line` ist eine Haarlinie: sie TRENNT, und dafuer sind 1,31:1 genau
       richtig -- man soll sie spueren, nicht ansehen. Ein Eingabefeld ist
       etwas anderes: seine Kante SAGT, wo das Feld ist, und WCAG 1.4.11
       verlangt dafuer 3:1. Wer hier `line` nimmt, weil es "Linie" heisst,
       baut ein Formular, dessen Felder man nicht findet.
       Gemessen im Partner-Portal am 22.09.2026: die Felder standen bei
       1,00:1 -- weiss auf weiss, gar keine Kante. */
    --pm-line:           #E3E1DA;  /* NUR Trenner           1,31:1 */
    --pm-control:        #8A867C;  /* Kanten von Bedienelementen
                                      3,63:1 auf Weiss, 3,27:1 auf paper */

    /* Akzent -- sparsam. Der PRIMAERE Knopf ist Ink, nicht Gruen. */
    --pm-accent:         #1C6B5A;  /* 6,36:1 auf Weiss, 5,73:1 auf paper */
    --pm-accent-hover:   #14564A;  /* 8,54:1 auf Weiss */
    --pm-accent-soft:    #E7F0ED;  /* Tint-Flaeche */
    --pm-accent-on-dark: #4FB79C;  /* 7,39:1 auf ink */

    /* Auf dunklem Grund. muted traegt dort NICHT (nur 3,37:1) -- deshalb
       eigene Werte statt der hellen wiederzuverwenden. */
    --pm-on-dark:        #F4F3EF;  /* 16,28:1 auf ink */
    --pm-on-dark-muted:  #99A1AF;  /*  6,95:1 auf ink */
    --pm-on-dark-line:   #6A7282;  /*  3,74:1 auf ink, Nicht-Text */

    /* Zustandsfarben. Gedaempft, passend zur monochromen Grundhaltung --
       nicht die Signalfarben von Bootstrap. */
    --pm-danger:         #A33A32;  /* Weiss darauf: 6,54:1 */
    --pm-danger-hover:   #8A312A;
    --pm-warn-soft:      #FBF3E2;
    --pm-warn-ink:       #6B4E12;

    /* Geometrie. Raster 4 px wie im Vorbild (--spacing: .25rem). */
    --pm-r-sm:  .25rem;
    --pm-r-md:  .5rem;
    --pm-r-lg:  .75rem;   /* Knoepfe, Eingabefelder -- haeufigste Stufe */
    --pm-r-xl:  1rem;     /* Karten */
    --pm-r-full: 9999px;  /* Badges, Punkte */

    --pm-4:  .25rem;
    --pm-8:  .5rem;
    --pm-12: .75rem;
    --pm-16: 1rem;
    --pm-24: 1.5rem;
    --pm-32: 2rem;
    --pm-48: 3rem;

    --pm-font:         'Inter', system-ui, -apple-system, sans-serif;
    --pm-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}


/* --- Grundlage ------------------------------------------------------------
   Ein @font-face macht eine Schrift VERFUEGBAR, nicht ANGEWENDET. Ohne die
   folgenden Regeln haette die Seite weiter in der Bootstrap-Systemschrift
   gerendert -- und eine Pruefung ueber document.fonts haette das nicht
   bemerkt, weil die Schrift ja geladen war.
   -------------------------------------------------------------------------- */

body {
    background-color: var(--pm-paper);
    color: var(--pm-body);
    font-family: var(--pm-font);
    font-size: 1rem;
    line-height: 1.625;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.navbar-brand {
    font-family: var(--pm-font-display);
    color: var(--pm-heading);
    letter-spacing: -0.02em;
    font-weight: 700;
}

h1 { font-size: 1.875rem; line-height: 1.2; }
h2 { font-size: 1.5rem;   line-height: 1.25; }
h3 { font-size: 1.25rem;  line-height: 1.3; }
h4 { font-size: 1.125rem; line-height: 1.35; }

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


/* --- Fokus, global --------------------------------------------------------
   Zwei Ringe, und der Grund steht im Vorbild als Messung: der Akzent liefert
   gegen ink nur 2,84:1 und traegt auf dunklen Baendern nicht. Der zweite Ring
   in Papierfarbe fuellt den Spalt des outline-offset und bringt dort 16,28:1.
   Vorher lag der Fokusring des Portals bei 1,51:1 -- wer per Tastatur
   bediente, sah nicht, wo er war.
   -------------------------------------------------------------------------- */

*:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--pm-paper);
}

/* Auf dunklem Grund traegt der helle Akzent. */
.navbar *:focus-visible {
    outline-color: var(--pm-accent-on-dark);
    box-shadow: 0 0 0 2px var(--pm-ink);
}

/* Bootstrap setzt an .btn:focus einen eigenen Schatten-Ring
   (box-shadow: 0 0 0 .25rem rgba(...)). Die Regel oben steht auf dem
   Universalselektor und hat damit Spezifitaet (0,1,0) -- .btn:focus hat
   (0,2,0) und gewinnt. Gemessen hat die Probe genau das: Fokusring 1,72:1
   bzw. 1,77:1 auf jeder Schaltflaeche, also praktisch unsichtbar. Der
   Bootstrap-Ring wird deshalb abgeraeumt und durch denselben Ring wie ueberall
   sonst ersetzt -- mit einer Spezifitaet, die traegt. */
.btn:focus,
.btn:active:focus,
.btn-check:focus + .btn {
    box-shadow: none;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
    outline: 2px solid var(--pm-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--pm-paper);
}

.navbar .btn:focus-visible {
    outline-color: var(--pm-accent-on-dark);
    box-shadow: 0 0 0 2px var(--pm-ink);
}

/* Auf dem gruenen Knopf steht der Papier-Ring auf gruenem Grund. Der Akzent
   gegen sich selbst traegt nichts, also nimmt der Ring dort die Tinte. */
.btn-success:focus-visible,
.btn-danger:focus-visible {
    outline-color: var(--pm-ink);
    box-shadow: 0 0 0 2px var(--pm-paper);
}


/* --- Navigationsleiste ----------------------------------------------------
   Sie gehoert in diese Phase und nicht spaeter: der alte violette Verlauf
   stand in style_app.css, und die vier Inline-color:#FFFFFF im Markup lebten
   davon. Faellt der Verlauf weg, ohne dass hier etwas steht, bleibt
   bg-light (#f8f9fa) mit weisser Schrift -- gemessen 1,05:1, auf dem Rahmen
   JEDER Maske einschliesslich der Kundenoberflaeche. Das waere schlechter
   gewesen als der Ausgangszustand.
   -------------------------------------------------------------------------- */

.navbar,
.navbar.bg-light,
.navbar.navbar-dark {
    background: var(--pm-ink) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--pm-on-dark-line);
    padding-top: var(--pm-12);
    padding-bottom: var(--pm-12);
}

/* Die Wortmarke im Kopf. Bis heute sass im Brand ein Bild, und diese Regel
   lief ins Leere; jetzt traegt sie die Marke selbst -- wie im Vorbild, das in
   seinem Kopf ebenfalls Text setzt und kein SVG. "PARTNER" steht als
   Untermarke daneben: leichter gesetzt und im Akzent fuer Dunkelgrund, damit
   die Hierarchie ohne eine zweite Schriftgroesse auskommt. */
.navbar .navbar-brand {
    color: var(--pm-on-dark);
    font-family: var(--pm-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

/* Bootstrap daempft die Marke im Hover ab. Auf dem Tintengrund waere das ein
   Kontrastverlust ohne Nutzen -- der Link ist das Ziel, nicht die Farbe. */
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: var(--pm-on-dark);
}

.navbar .navbar-brand .pm-wortmarke {
    color: var(--pm-accent-on-dark);   /* 7,39:1 auf ink */
    font-weight: 500;
}

.navbar .nav-link,
.navbar .navbar-nav .nav-link {
    color: var(--pm-on-dark-muted);
    font-weight: 500;
    padding: var(--pm-8) var(--pm-12);
    border-radius: var(--pm-r-md);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-nav .nav-link:hover {
    color: var(--pm-accent-on-dark);
}

.navbar-toggler {
    border-color: var(--pm-on-dark-line);
}
.navbar-toggler-icon {
    /* Bootstrap zeichnet das Symbol als eingebettetes SVG in der Farbe der
       navbar-Variante. Auf unserem Ink-Grund braucht es die helle Fassung. */
    filter: invert(1) grayscale(1) brightness(1.6);
}

.dropdown-menu {
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    box-shadow: none;
    padding: var(--pm-4);
}
.dropdown-item {
    border-radius: var(--pm-r-md);
    color: var(--pm-body);
    padding: var(--pm-8) var(--pm-12);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--pm-accent-soft);
    color: var(--pm-accent);
}


/* --- Knoepfe --------------------------------------------------------------
   Der PRIMAERE Knopf ist INK, nicht Gruen. Im Vorbild:
   `bg-ink text-paper hover:bg-accent`. Das Gruen ist die SEKUNDAERE Aktion.
   Wer das raet, baut ein gruenes Portal und liegt falsch.
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--pm-r-lg);
    font-family: var(--pm-font);
    font-weight: 600;
    padding: var(--pm-12) var(--pm-24);
    border-width: 1px;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-sm {
    padding: var(--pm-8) var(--pm-16);
    font-size: .875rem;
    border-radius: var(--pm-r-md);
}
.btn-lg {
    padding: var(--pm-16) var(--pm-32);
    font-size: 1.125rem;
}

.btn-primary {
    background-color: var(--pm-ink);
    border-color: var(--pm-ink);
    color: var(--pm-paper);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: #FFFFFF !important;
}

.btn-success {
    background-color: var(--pm-accent);
    border-color: var(--pm-accent);
    color: #FFFFFF;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--pm-accent-hover) !important;
    border-color: var(--pm-accent-hover) !important;
    color: #FFFFFF !important;
}

.btn-danger {
    background-color: var(--pm-danger);
    border-color: var(--pm-danger);
    color: #FFFFFF;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--pm-danger-hover) !important;
    border-color: var(--pm-danger-hover) !important;
    color: #FFFFFF !important;
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--pm-ink);
    color: var(--pm-ink);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--pm-ink) !important;
    border-color: var(--pm-ink) !important;
    color: var(--pm-paper) !important;
}


/* --- Formulare ------------------------------------------------------------
   Die Feldkante ist der Grund, aus dem dieses ganze Theme existiert:
   gemessen 1,00:1 im Ist-Zustand. --pm-control bringt 3,63:1 gegen Weiss und
   3,27:1 gegen paper, also ueber der Schwelle von WCAG 1.4.11 auf BEIDEN
   Gruenden -- und Felder stehen hier auf beiden.
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    border: 1px solid var(--pm-control);
    border-radius: var(--pm-r-lg);
    background-color: var(--pm-surface);
    color: var(--pm-heading);
    padding: var(--pm-12) var(--pm-16);
    font-family: var(--pm-font);
    font-size: 1rem;
    line-height: 1.5;
}

.form-control::placeholder {
    color: var(--pm-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pm-accent);
    box-shadow: 0 0 0 3px var(--pm-accent-soft);
    outline: none;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--pm-paper);
    color: var(--pm-muted);
}

.form-label {
    font-weight: 500;
    font-size: .875rem;
    color: var(--pm-heading);
    margin-bottom: var(--pm-4);
}

/* Ersetzt 33 gleichlautende Inline-Styles
   (`text-align: left; margin-top: 10px`). */
.form-group {
    margin-bottom: var(--pm-16);
    text-align: left;
}

/* Die Haken-Kaestchen trugen bisher das Blau von Bootstrap 4 aus einer
   eigenen Regel in style_app.css. */
input[type="checkbox"] {
    border-color: var(--pm-control) !important;
    border-radius: var(--pm-r-sm) !important;
}
input[type="checkbox"]:checked {
    background-color: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
}


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

.card {
    background-color: var(--pm-surface);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-xl);
    box-shadow: none;   /* das Vorbild hat keine Schatten-Token */
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--pm-line);
    padding: var(--pm-16) var(--pm-24);
    font-family: var(--pm-font-display);
    font-weight: 700;
    color: var(--pm-heading);
}
.card-body {
    padding: var(--pm-24);
}
.card-title {
    font-size: 1.25rem;
    margin-bottom: var(--pm-16);
}


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

.table {
    --bs-table-bg: transparent;
    color: var(--pm-body);
    border-color: var(--pm-line);
    margin-bottom: 0;
}
/* Tabellenkopf: gedaempft und klein, aber in gemischter Schreibung.
   Er trug bis eben dieselbe Versalien-Sperrung wie die Kennzahl-Label und
   die Kontaktangaben -- drei verschiedene Rollen im selben Kostuem. Das
   Design-Gesetz nennt das beim Namen ("one label treatment, everywhere"):
   wenn jede kleine Beschriftung gleich aussieht, liest sich die Seite als
   Vorlage. Die Sperrung bleibt jetzt der EINEN Rolle vorbehalten, die sie
   im Vorbild traegt: dem Label unter einer Kennzahl. */
.table > thead > tr > th {
    font-family: var(--pm-font);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--pm-muted);
    border-bottom: 1px solid var(--pm-line);
    padding: var(--pm-12) var(--pm-16);
    background-color: transparent;
}
.table > tbody > tr > td {
    padding: var(--pm-12) var(--pm-16);
    border-bottom: 1px solid var(--pm-line);
    vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: var(--pm-paper);
    color: var(--pm-body);
}
.table > tbody > tr:hover > * {
    background-color: var(--pm-accent-soft);
}

/* Waagerechtes Scrollen auf schmalen Fenstern. Diese Regel stand schon in
   style_app.css und sitzt auf der EINEN Kundentabelle des
   Partner-Aussenbereichs -- ohne sie scrollt sie auf dem Telefon nicht. */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* --- Zustaende und Marken ------------------------------------------------- */

.badge {
    border-radius: var(--pm-r-full);
    font-weight: 500;
    font-size: .75rem;
    padding: var(--pm-4) var(--pm-12);
}
.badge.bg-primary  { background-color: var(--pm-accent-soft) !important; color: var(--pm-accent); }
.badge.bg-success  { background-color: var(--pm-accent-soft) !important; color: var(--pm-accent); }
.badge.bg-secondary{ background-color: var(--pm-line) !important;        color: var(--pm-body); }

.alert {
    border-radius: var(--pm-r-lg);
    border-width: 1px;
    padding: var(--pm-16);
}
.alert-success {
    background-color: var(--pm-accent-soft);
    border-color: var(--pm-accent);
    color: var(--pm-accent-hover);
}
.alert-danger {
    background-color: #FBECEA;
    border-color: var(--pm-danger);
    color: #7A2A24;          /* 8,05:1 auf #FBECEA */
}

/* Die beiden Statusfarben der Auftrags- und Anfragetabellen. Sie wurden
   bisher in PHP BERECHNET und ins style-Attribut geschrieben -- die einzige
   Stelle im Projekt, die eine zentrale Farbumstellung prinzipiell nicht
   erreichen konnte. */
/* Der Statusbalken am Zeilenanfang.
 *
 * Er wird als box-shadow gemalt, nicht als background-color -- und das ist
 * kein Stilmittel, sondern die einzige Art, wie er ueberhaupt sichtbar wird:
 * Bootstrap faerbt Streifenzeilen mit
 *     box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)
 * auf JEDER Zelle (styles.css:1761). Dieser Schatten liegt ueber jeder
 * Hintergrundfarbe der Zelle. Der Balken war damit auf gestreiften Zeilen
 * unsichtbar. Die Regel hier traegt .table davor und schlaegt Bootstraps
 * Selektor ueber die Spezifitaet, ohne !important.
 *
 * Und die Farben kommen jetzt aus dem Token-Satz. "Offen" trug bis eben ein
 * Bernstein (#C9971F), das sonst nirgends im System vorkam -- eine fuenfte
 * Farbe fuer genau einen 6 px breiten Streifen. Das System hat einen Akzent;
 * "fertig" bekommt ihn, "offen" die Rahmenfarbe. Unterscheidbar bleiben sie,
 * und die Bedeutung steht ohnehin als Text in der Zelle. */
.pm-status { width: 6px; padding: 0 !important; }
.table .pm-status-offen  { box-shadow: inset 0 0 0 9999px var(--pm-control); }
.table .pm-status-fertig { box-shadow: inset 0 0 0 9999px var(--pm-accent); }

/* Die Aktionsspalte bricht nicht um. Ohne das standen Stift und Papierkorb
   untereinander, sobald die uebrigen Spalten den Platz nahmen -- die Zeile
   wurde dadurch doppelt so hoch, und die Tabelle sah aus, als waere sie
   kaputt. Gemessen an der Auftragsverwaltung: 100 px statt 52 px Zeilenhoehe. */
td.pm-aktionen,
th.pm-aktionen {
    white-space: nowrap;
}

.spinner-border {
    color: var(--pm-accent);
}

.nav-tabs {
    border-bottom: 1px solid var(--pm-line);
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--pm-muted);
    font-weight: 500;
    padding: var(--pm-12) var(--pm-16);
}
.nav-tabs .nav-link:hover {
    color: var(--pm-heading);
    border-bottom-color: var(--pm-line);
}
.nav-tabs .nav-link.active {
    color: var(--pm-accent);
    background-color: transparent;
    border-bottom-color: var(--pm-accent);
}


/* --- Eigene Bausteine ----------------------------------------------------- */

/* Die sechs Kennzahlen im Dashboard. Sie trugen bisher je ein
   `font-size: 40px` inline -- die auffaelligste Typografie der Anwendung,
   nirgends zentral definiert. */
.pm-kennzahl {
    display: block;
    font-family: var(--pm-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pm-heading);
    letter-spacing: -0.03em;
}
/* Die Kennzahl-Kachel traegt die Gestalt des Vorbilds, nicht eine erfundene:
   resources/js/Components/Counter.vue setzt die Zahl gross in der
   Display-Schrift und darunter ein kleines Label in Versalien mit weiter
   Laufweite, zentriert und OHNE eigene Kartenhuelle.

   Eine Falle dabei, die fast zur falschen Farbe gefuehrt haette: das Vorbild
   faerbt die Zahl mit der Klasse `text-violet`. Der Name ist ein Ueberrest --
   `--color-violet` zeigt dort seit dem Umbau auf #15161A (app.css:72), also
   auf Tinte. Die alten Klassennamen wurden behalten und ihre WERTE umgelegt,
   damit nicht 500 Utility-Klassen umbenannt werden mussten. Wer den
   Klassennamen liest statt des Werts, holt sich das Violett zurueck, das
   dieses Projekt gerade losgeworden ist. */
.pm-kennzahl-block {
    text-align: center;
    padding: var(--pm-24) var(--pm-16);
}
.pm-kennzahl-label {
    display: block;
    margin-top: var(--pm-8);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pm-muted);
}
.pm-kennzahl-zusatz {
    display: block;
    margin-top: var(--pm-8);
    font-size: 1.125rem;
    color: var(--pm-muted);
}

/* Ueberschrift eines Verwaltungsmoduls. Bisher lebten diese <h4> vom
   geerbten text-center der Huelle; faellt das weg, rutschen sie stumm nach
   links. Das soll eine Entscheidung sein, kein Nebeneffekt -- und linksbuendig
   ist im Vorbild ohnehin richtig. */
.pm-modul-titel {
    text-align: left;
    margin-bottom: var(--pm-16);
}

/* Kopfzeile einer Maske: Titel links, Aktionen rechts. Ersetzt die
   Kombination aus text-center auf der Huelle und text-align:right inline. */
.pm-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pm-16);
    margin-bottom: var(--pm-24);
    /* Umbruch ist Pflicht, nicht Kosmetik. Ohne ihn standen Titel und
       Aktionen auf EINER Zeile, und die Probe mass bei 320 px Breite 80 bis
       93 px waagerechten Ueberhang (WCAG 1.4.10) -- auf jeder der sieben
       Verwaltungsmasken. Der Befund entstand mit dieser Klasse; er ist hier
       behoben, nicht aufgeschrieben. */
    flex-wrap: wrap;
}

/* Und die Aktionen brechen INNERHALB ihrer Zeile ebenfalls um: zwei
   Schaltflaechen nebeneinander sind auf einem 320-px-Schirm breiter als
   der Platz, auch wenn sie eine eigene Zeile bekommen haben. Bewusst nur
   im Seitenkopf -- .pm-aktionen sitzt sonst auf Tabellenzellen, und ein
   display:flex wuerde die Zelle aus dem Tabellenfluss nehmen. */
.pm-kopf .pm-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--pm-8);
}
.pm-kopf h1, .pm-kopf h2, .pm-kopf h3, .pm-kopf h4 { margin: 0; }

/* Die Seitenhuelle. Ersetzt das `text-center mt-5`, das wortgleich in zwoelf
   Masken stand und ALLES darin zentrierte -- Tabellen, Formulare, Kennzahlen,
   Karten. Das Vorbild ist linksbuendig-editorial, und die Zentrierung war der
   Grund, warum fuenf Formulare eigene text-align:left-Gegenmassnahmen im
   style-Attribut trugen: erst wurde zentriert, dann stellenweise
   zurueckgenommen. Die Ausrichtung steht hier ausdruecklich, damit eine
   zentrierende Umgebung sie nicht stumm wieder einfaengt. */
.pm-seite {
    padding-top: var(--pm-48);
    padding-bottom: var(--pm-48);
    text-align: left;
}

.pm-aktionen { text-align: right; }
.pm-links    { text-align: left; }

/* Leer-Zustand einer Tabelle. Bisher erschien bei leerem Ergebnis ein
   Tabellenkopf ueber einem leeren Rumpf -- in allen elf Tabellen. */
.pm-leer {
    padding: var(--pm-48) var(--pm-24);
    text-align: center;
    color: var(--pm-muted);
}

/* Die Ladeanzeige. Sie stand bisher 44-mal als derselbe Markup-Block in den
   Vorlagen; jetzt erzeugt sie app/js/scripts.js an einer Stelle. */
.pm-laden {
    display: flex;
    justify-content: center;
    padding: var(--pm-48) 0;
}

/* Die Anmeldemaske. Ersetzt die Datei signin.css, einen Ueberrest aus einer
   Bootstrap-4-Vorlage: sie klebte die beiden Felder mit border-radius: 0 und
   margin-bottom: -1px zu einem Block zusammen und gab ihnen eine eigene
   Polsterung und Schriftgroesse -- beides quer zu den Radien und Abstaenden
   dieses Themes. */
.form-signin {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

/* Eine Zahlenspalte. Rechtsbuendig wie ueblich, aber zusaetzlich mit
   Tabellenziffern: ohne sie sind die Ziffern verschieden breit, und eine
   Preisspalte franst am linken Rand aus, obwohl sie rechts sauber steht.
   Bisher trugen die Preisspalten .pm-aktionen -- eine Klasse fuer
   Schaltflaechen, die zufaellig auch rechts ausrichtet. */
.pm-zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    /* Ein Betrag bricht nicht zwischen Zahl und Waehrung um. Gemessen in der
       Auftragsverwaltung: "1.000,00 €" stand auf zwei Zeilen, das Eurozeichen
       allein darunter. */
    white-space: nowrap;
}

/* Die Kontaktangaben des Ansprechpartners. Sie standen in einer <table>,
   obwohl sie keine Tabelle sind -- zwei Zeilen mit je einem Label und einem
   Wert. Ein Screenreader kuendigt dort eine Tabelle mit einer Spalte an. */
.pm-kontakt {
    margin-top: var(--pm-24);
    display: grid;
    gap: var(--pm-12);
}
/* Die Bezeichnung einer Kontaktzeile ist bewusst schlichte, kleine, gedaempfte
   Schrift -- kein drittes Label-Kostuem. Siehe die Begruendung beim
   Tabellenkopf. */
.pm-kontakt dt {
    font-size: .8125rem;
    color: var(--pm-muted);
    font-weight: 400;
}
.pm-kontakt dd {
    margin: 0;
}

/* Das Rundbild des Ansprechpartners im Partner-Aussenbereich. Der bisherige
   Inline-Stil trug einen Schlagschatten; das Vorbild hat keine
   Schatten-Token, also faellt er weg. */
.pm-portraet {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--pm-r-full);
    border: 1px solid var(--pm-line);
}

/* Versionszeile im Fuss. Ihre Farbe war bis heute ein fuenftes
   Farbsystem, aus dem alten Haus-Burgunder abgeleitet. Jetzt muted. */
/* Der Fuss steht unten, auch wenn die Seite kurz ist. Ohne das hing die
   Versionszeile auf einem hohen Fenster mitten im Leeren -- auf der
   Anmeldemaske gemessen 110 px unter der Karte und 330 px ueber dem
   unteren Rand. */
/* Der Restplatz geht an den INHALT, nicht als Rand an den Fuss. Die erste
   Fassung setzte .pm-fuss { margin-top: auto } -- der Rand loest sich dann
   zu einem beliebigen Pixelwert auf (je nach Fensterhoehe 200, 263, 330 px),
   und design-beweis zaehlte ihn als Abstand neben dem Raster: die
   Anmeldemaske fiel dadurch von "Skala traegt" auf "keine Schrittweite
   traegt". Eine wachsende Hoehe ist kein Abstand und bleibt aus der Skala. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > .container:not(.pm-fuss) {
    flex: 1 0 auto;
}

/* Ohne Trennlinie darueber: eine Haarlinie, die nur trennt, weil dort eine
   Grenze "sein sollte", ist Ornament. Der Abstand leistet dasselbe und
   behauptet nichts. */
.pm-version {
    margin: var(--pm-48) 0 var(--pm-24);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .8125rem;
    color: var(--pm-muted);
}


/* --- Hilfsklassen fuer die aufgeloesten Inline-Styles --------------------
   Jede ersetzt ein Muster, das vorher als style="..." im Markup stand.
   Die krummen Werte von damals (10/15/20/25 px) sind dabei auf das
   4-px-Raster gerueckt -- das war der dritte Befund der Probe: 13
   verschiedene Abstandswerte, von denen keine Schrittweite trug.
   ------------------------------------------------------------------------ */

.pm-mitte               { text-align: center; }
.pm-abstand-oben        { margin-top: var(--pm-24); }     /* war 20px */
.pm-abstand-oben-klein  { margin-top: var(--pm-12); }     /* war 10px */
.pm-abstand-unten       { margin-bottom: var(--pm-24); }  /* war 20px */
.pm-polster             { padding: var(--pm-12); }        /* war 10px */
.pm-polster-oben        { padding-top: var(--pm-24); }    /* war 20/25px */
.pm-fett                { font-weight: 600; }
.pm-klein               { font-size: .75rem; color: var(--pm-muted); }

/* Ein Eingabefeld, das schmaler bleiben soll als seine Spalte. max-width
   haelt es auf dem Telefon im Rahmen -- die feste Breite allein tat das
   nicht. */
.pm-feld-breit          { width: 280px; max-width: 100%; }
.pm-feld-schmal         { width: 100px; max-width: 100%; }
.pm-spalte-40           { width: 40%; }