/* =====================================================================
   DACHKONZEPTE ERP – Gestaltungsgrundlagen „Schiefer & Signal“
   app/static/ds/ds.css (Stufe 1 des Redesigns, seit 1.8.127; Werte
   aus der Vorgabe ds-tokens.css, seit 1.8.155 Firmengrün als
   Hauptaktion: --ds-aktion*, --ds-marke-hell, --ds-ok* = aktion*)

   Diese Datei setzt --ds-*-Eigenschaften, @font-face und (seit 1.8.161)
   Regeln für Bausteine, deren Ziel eine Klasse .ds-… trägt -- eine Seite
   ohne diese Klassen bleibt unverändert. Kein color-scheme, keine
   Element-Selektoren, keine At-Regeln außer @font-face (Wächter:
   tests/test_v432_design_fundament.py). Grundregeln für Schrift und
   Steuerelemente einer umgezogenen Seite: ds-basis.css (.ds-seite).

   Prüfpaare für den Kontrasttest (je hell und dunkel):
   Text mindestens 4,5 : 1
     text/grund text/flaeche text/flaeche-2
     text-2/grund text-2/flaeche text-2/flaeche-2 text-2/feld-gesperrt
     text-3/grund text-3/flaeche text-3/flaeche-2
     navi-text/navi-grund navi-text/navi-aktiv navi-leise/navi-grund navi-text/navi-hover
     auf-stark/stark auf-signal/signal auf-fehler/fehler
     auf-aktion/aktion aktion-text/aktion-hell aktion-text/flaeche
     signal-text/signal-hell signal-text/flaeche signal-text/grund
     info-text/info-hell ok-text/ok-hell warn-text/warn-hell
     termin-text/termin-hell text/termin-hell
     fehler-text/fehler-hell fehler-text/flaeche
     link/flaeche link/grund link-hover/flaeche
   Bedienelemente und Rahmen mindestens 3 : 1
     feld-rand/flaeche fokus/flaeche fokus/grund
     feld-rand-signal/signal-hell feld-rand-signal/flaeche
     signal/flaeche stark/flaeche info/flaeche ok/flaeche fehler/flaeche
     aktion/flaeche aktion/grund aktion/flaeche-2
     zeitart-baustelle/flaeche zeitart-fahrt/flaeche zeitart-werkstatt/flaeche zeitart-sonstige/flaeche
   ===================================================================== */

:root {
  /* Flächen und Linien */
  --ds-grund: #EEF0F1;          /* Arbeitsfläche hinter den Karten */
  --ds-flaeche: #FFFFFF;        /* Karten, Tabellen, Dialoge */
  --ds-flaeche-2: #F3F5F6;      /* leicht abgesetzt: Hover, Infokästen */
  --ds-linie: #DADEE1;          /* Rahmen und Trenner */
  --ds-linie-stark: #C9CFD4;    /* Rahmen von Zweitknöpfen */
  --ds-feld-rand: #88929A;      /* Rahmen von Eingabefeldern */
  --ds-feld-rand-signal: #7A848C; /* seit 1.9.50: Rahmen eines Felds auf der Signalfläche (feld-rand dort nur 2,84 : 1) */
  --ds-feld-gesperrt: #F3F5F6;  /* seit 1.9.110: Fläche eines gesperrten Felds (hell wie flaeche-2) */

  /* Schrift */
  --ds-text: #171C1F;           /* Fließtext, Titel, Beträge */
  --ds-text-2: #4B555D;         /* Beschreibungen */
  --ds-text-3: #5A646C;         /* Nebentext, Beschriftungen */

  /* Navigation (in beiden Modi dunkel) */
  --ds-navi-grund: #1F2529;
  --ds-navi-aktiv: #333C43;
  --ds-navi-hover: #2A3238;     /* Hover in Leiste und Monteurskopf (seit 1.9.1) */
  --ds-navi-text: #D5DBDF;
  --ds-navi-leise: #9AA5AD;

  /* Starke Aktion (z. B. „Feierabend buchen“) */
  --ds-stark: #2B3238;
  --ds-auf-stark: #FFFFFF;

  /* Aktion: Firmengrün, Hauptaktion (seit 1.8.155) */
  --ds-aktion: #367337;
  --ds-auf-aktion: #FFFFFF;
  --ds-aktion-hell: #EEF5E8;
  --ds-aktion-rand: #C4DDB0;
  --ds-aktion-text: #2A5C2B;
  --ds-marke-hell: #A7CD5D;     /* nur Schmuck, nie Text auf hellem Grund */

  /* Signal: „wartet auf dich“ und Vorschläge (bis 1.8.154 auch Hauptaktion) */
  --ds-signal: #C2410C;
  --ds-auf-signal: #FFFFFF;
  --ds-signal-hell: #FDF0E7;
  --ds-signal-rand: #F6C9AC;
  --ds-signal-text: #8A2E0A;

  /* Status */
  --ds-info: #1D5FA8;           /* läuft, Fortschritt */
  --ds-info-hell: #E3EEF9;
  --ds-info-text: #174E8C;
  --ds-ok: #367337;             /* erledigt, bezahlt -- seit 1.8.155 = aktion */
  --ds-ok-hell: #EEF5E8;        /* = aktion-hell */
  --ds-ok-text: #2A5C2B;        /* = aktion-text */
  --ds-warn-hell: #FCEBDD;      /* unvollständig */
  --ds-warn-text: #8A2E0A;
  --ds-fehler: #A61B1B;         /* überfällig, Fehler, Löschen */
  --ds-auf-fehler: #FFFFFF;
  --ds-fehler-hell: #FBE4E4;
  --ds-fehler-text: #8F1A1A;

  /* Zeitarten (seit 1.9.96, Seite „Zeiten“): Farbpunkt je Zeitart -- Baustelle, Fahrzeit, Werkstatt, Sonstige (auch Schlechtwetter) */
  --ds-zeitart-baustelle: #367337;
  --ds-zeitart-fahrt: #3D6A8C;
  --ds-zeitart-werkstatt: #7A5A34;
  --ds-zeitart-sonstige: #5C6660;
  /* Termin aus dem Kalender auf der Plantafel (seit 1.9.247, Zeichnung entwurf-stufe6) */
  --ds-termin-hell: #F3EEFA;
  --ds-termin-rand: #CFC2E6;
  --ds-termin-text: #5B3E8A;

  /* Links und Fokus */
  --ds-link: #1D5FA8;
  --ds-link-hover: #123E6E;
  --ds-fokus: #1D5FA8;

  /* Schriftfamilien */
  --ds-schrift-titel: "Archivo", system-ui, sans-serif;
  --ds-schrift-text: "IBM Plex Sans", system-ui, sans-serif;
  --ds-schrift-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Schriftgrößen */
  --ds-groesse-1: 12px;         /* Mono-Beschriftungen, Kennzeichen */
  --ds-groesse-2: 13px;         /* Nebentext */
  --ds-groesse-3: 14px;         /* Bedienelemente, Tabellen */
  --ds-groesse-4: 15px;         /* Fließtext Büro */
  --ds-groesse-5: 17px;         /* Fließtext Tablet */
  --ds-groesse-6: 19px;         /* Kartentitel */
  --ds-groesse-7: 24px;         /* Abschnittstitel Tablet */
  --ds-groesse-8: 30px;         /* Kennzahlen */
  --ds-groesse-9: 30px;         /* Seitentitel Büro -- seit 1.8.161 (vorher 38) */
  --ds-groesse-9-tablet: 26px;  /* Seitentitel Tablet -- seit 1.8.161 */

  /* Abstände (Raster 4 px) */
  --ds-abstand-1: 4px;
  --ds-abstand-2: 8px;
  --ds-abstand-3: 12px;
  --ds-abstand-4: 16px;
  --ds-abstand-5: 24px;
  --ds-abstand-6: 32px;
  --ds-abstand-7: 48px;

  /* Ecken */
  --ds-ecke-feld: 10px;         /* Knöpfe, Eingabefelder */
  --ds-ecke-karte: 12px;
  --ds-ecke-tablet-feld: 12px;  /* Tablet: Knöpfe, Eingabefelder -- seit 1.8.161 (vorher ein Wert, 20) */
  --ds-ecke-tablet-karte: 16px; /* Tablet: Karten -- seit 1.8.161 */
  --ds-ecke-rund: 999px;        /* Status-Kennzeichen */

  /* Mindestgröße von Klickflächen */
  --ds-klick: 44px;
  --ds-klick-tablet: 64px;
}

:root[data-theme="dark"] {
  --ds-grund: #121619;
  --ds-flaeche: #1A2024;
  --ds-flaeche-2: #222A2F;
  --ds-linie: #2E373D;
  --ds-linie-stark: #3E4951;
  --ds-feld-rand: #6E7A83;
  --ds-feld-rand-signal: #6E7A83;
  --ds-feld-gesperrt: #2B3339;  /* seit 1.9.110: bis 1.9.109 flaeche-2 (#222A2F, auf flaeche kaum zu sehen) -- Helligkeitsabstand zur Fläche
                                   mindestens doppelt so groß wie hell (L* 8,9 statt 4,7; hell 3,6) */

  --ds-text: #E9EDEF;
  --ds-text-2: #BAC3C9;
  --ds-text-3: #9DA8B0;

  --ds-navi-grund: #0B0F11;
  --ds-navi-aktiv: #232B30;
  --ds-navi-hover: #171D20;     /* zwischen navi-grund und navi-aktiv */
  --ds-navi-text: #D5DBDF;
  --ds-navi-leise: #9AA5AD;

  --ds-stark: #D5DBDF;
  --ds-auf-stark: #121619;

  --ds-aktion: #3D823E;          /* seit 1.8.157 (vorher #3B7D3C: auf flaeche-2 nur 2,91) */
  --ds-auf-aktion: #FFFFFF;
  --ds-aktion-hell: #17281A;
  --ds-aktion-rand: #2F5A30;
  --ds-aktion-text: #B9DA86;
  --ds-marke-hell: #A7CD5D;

  --ds-signal: #C2410C;
  --ds-auf-signal: #FFFFFF;
  --ds-signal-hell: #36200F;
  --ds-signal-rand: #6E3414;
  --ds-signal-text: #FDBA8C;

  --ds-info: #3B82D0;
  --ds-info-hell: #15283C;
  --ds-info-text: #A9CCF5;
  --ds-ok: #3D823E;
  --ds-ok-hell: #17281A;
  --ds-ok-text: #B9DA86;
  --ds-warn-hell: #36200F;
  --ds-warn-text: #FDBA8C;
  --ds-fehler: #C53A35;
  --ds-auf-fehler: #FFFFFF;
  --ds-fehler-hell: #3A1818;
  --ds-fehler-text: #F6AAA8;

  --ds-zeitart-baustelle: #3D823E;
  --ds-zeitart-fahrt: #5B8DB8;
  --ds-zeitart-werkstatt: #A8804F;
  --ds-zeitart-sonstige: #8A948E;
  --ds-termin-hell: #2A2238;
  --ds-termin-rand: #5B4A7A;
  --ds-termin-text: #CDB8F0;

  --ds-link: #86B9F2;
  --ds-link-hover: #B5D3F7;
  --ds-fokus: #86B9F2;
}

/* =====================================================================
   Schriften (seit 1.8.127): selbst gehostet unter schriften/ als woff2,
   je Schnitt latin und latin-ext -- Archivo 500/600/700, IBM Plex Sans
   400/500/600, IBM Plex Mono 400/500. Quelle: Fontsource 5.3.0 aus der
   npm-Registry (@fontsource/archivo, @fontsource/ibm-plex-sans,
   @fontsource/ibm-plex-mono), Prüfsumme der Registry geprüft. Lizenz:
   SIL Open Font License 1.1, die Texte liegen daneben
   (schriften/ofl-*.txt). /static/ wird ein Jahr zwischengespeichert --
   eine geänderte Schrift bekommt einen neuen Dateinamen.
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/archivo-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/archivo-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/archivo-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/archivo-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("schriften/archivo-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("schriften/archivo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Bausteine (seit 1.8.161, Stufe 2 „Rahmen“): Regeln nur auf .ds-Klassen
   (Regel 37) -- Seitenkopf (app/templates/teile/seitenkopf.html,
   _seitenkopf.html), Knöpfe, Menü (_menue.html), Status-Kennzeichen.
   Eine Seite, die keine dieser Klassen trägt, bleibt unverändert. Jede
   Regel setzt ihre Maße selbst (Höhe, Breite, Hintergrund, Schrift):
   Element-Regeln einer Seite (button{…}) sollen sie nicht verschieben.
   ===================================================================== */

.ds-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--ds-abstand-2);
  margin: 0 0 var(--ds-abstand-5);
  font-family: var(--ds-schrift-text);
  color: var(--ds-text);
}

.ds-kopf-pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-abstand-2);
  font-size: var(--ds-groesse-2);
  color: var(--ds-text-3);
}

.ds-kopf-pfad:empty {
  display: none;
}

.ds-kopf-pfadglied {
  color: var(--ds-link);
  text-decoration: none;
}

.ds-kopf-pfadglied:hover {
  color: var(--ds-link-hover);
  text-decoration: underline;
}

.ds-kopf-pfadende,
.ds-kopf-trenner {
  color: var(--ds-text-3);
}

.ds-kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-abstand-4);
}

.ds-kopf-text {
  flex: 1 1 320px;
  min-width: 0;
}

/* seit 1.9.18: Variante „breit“ (seitenkopf(…, breit=true)) -- der Text über die ganze erste Zeile, Kennzahlen und Aktionen darunter */
.ds-kopf-breit .ds-kopf-text {
  flex-basis: 100%;
}

/* seit 1.9.25: Variante „tablet“ (seitenkopf(…, tablet=true)) -- der Kopf im Monteursrahmen: Pfad 15 px, Titel 26 px, Knöpfe, Menüknopf
   und Menüeinträge 48 px hoch (Ziel für den Finger) */
.ds-kopf-tablet .ds-kopf-pfad {
  font-size: var(--ds-groesse-4);
}

.ds-kopf-tablet .ds-kopf-titel {
  font-size: var(--ds-groesse-9-tablet);
}

.ds-kopf-tablet .ds-knopf,
.ds-kopf-tablet .ds-menue-eintrag {
  height: 48px;
  min-height: 48px;
}

.ds-kopf-tablet .ds-knopf-symbol {
  width: 48px;
}

/* seit 1.9.11 ein Kennzeichen in Mono mit Rahmen in der Titelzeile, zwischen Titel und Status (bis dahin eine Zeile über dem Titel) */
.ds-kopf-kennung {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--ds-linie-stark);
  border-radius: 6px;
  font-family: var(--ds-schrift-mono);
  font-size: var(--ds-groesse-1);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--ds-text-2);
}

.ds-kopf-kennung:empty {
  display: none;
}

.ds-kopf-titelzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-abstand-3);
}

.ds-kopf-titel {
  margin: 0;
  font-family: var(--ds-schrift-titel);
  font-size: var(--ds-groesse-9);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ds-text);
}

.ds-tablet .ds-kopf-titel {
  font-size: var(--ds-groesse-9-tablet);
}

/* seit 1.9.88 setzt jede Seite im Monteursrahmen .ds-tablet (Beschluss Stufe 2): auch der Knopf des Seitenkopfs mit der Tablet-Ecke
   wie die übrigen Knöpfe (ds-basis.css) */
.ds-tablet .ds-knopf {
  border-radius: var(--ds-ecke-tablet-feld);
}

.ds-kopf-untertitel {
  margin: var(--ds-abstand-1) 0 0;
  font-size: var(--ds-groesse-3);
  color: var(--ds-text-2);
}

.ds-kopf-untertitel:empty {
  display: none;
}

.ds-kopf-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-abstand-2);
}

.ds-kopf-menue {
  position: relative;
}

/* seit 1.9.13: Kennzahlen im Kopf (Rechnung: Netto, MwSt., Brutto) -- der Name klein über dem Wert */
.ds-kopf-kennzahlen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ds-abstand-5);
}

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

.ds-kennzahl-name {
  font-size: var(--ds-groesse-1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-3);
}

.ds-kennzahl-wert {
  font-size: var(--ds-groesse-4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}

.ds-status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--ds-ecke-rund);
  font-family: var(--ds-schrift-text);
  font-size: var(--ds-groesse-2);
  font-weight: 500;
  white-space: nowrap;
}

.ds-status:empty {
  display: none;
}

.ds-status-neutral {
  background: var(--ds-flaeche-2);
  color: var(--ds-text-2);
}

.ds-status-info {
  background: var(--ds-info-hell);
  color: var(--ds-info-text);
}

.ds-status-ok {
  background: var(--ds-ok-hell);
  color: var(--ds-ok-text);
}

.ds-status-warn {
  background: var(--ds-warn-hell);
  color: var(--ds-warn-text);
}

.ds-status-fehler {
  background: var(--ds-fehler-hell);
  color: var(--ds-fehler-text);
}

.ds-status-signal {
  background: var(--ds-signal-hell);
  color: var(--ds-signal-text);
}

.ds-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-abstand-2);
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--ds-abstand-4);
  border: 1px solid var(--ds-linie-stark);
  border-radius: var(--ds-ecke-feld);
  background: var(--ds-flaeche);
  color: var(--ds-text);
  font-family: var(--ds-schrift-text);
  font-size: var(--ds-groesse-3);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ds-knopf:hover,
.ds-knopf:active {
  background: var(--ds-flaeche-2);
  color: var(--ds-text);
  text-decoration: none;
}

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

.ds-knopf-aktion {
  border-color: var(--ds-aktion);
  background: var(--ds-aktion);
  color: var(--ds-auf-aktion);
}

.ds-knopf-aktion:hover,
.ds-knopf-aktion:active {
  background: var(--ds-aktion);
  color: var(--ds-auf-aktion);
  filter: brightness(0.92);
}

.ds-knopf-symbol {
  width: 40px;
  padding: 0;
}

.ds-menue {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  box-sizing: border-box;
  min-width: 220px;
  margin: 0;
  padding: var(--ds-abstand-1);
  border: 1px solid var(--ds-linie);
  border-radius: var(--ds-ecke-karte);
  background: var(--ds-flaeche);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-family: var(--ds-schrift-text);
}

.ds-menue[hidden] {
  display: none;
}

/* seit 1.9.10: ein verborgener Knopf oder Menüeintrag bleibt verborgen -- das display aus .ds-knopf und .ds-menue-eintrag schlüge [hidden] */
.ds-knopf[hidden],
.ds-menue-eintrag[hidden] {
  display: none;
}

.ds-menue-kopf {
  margin: 0 0 var(--ds-abstand-1);
  padding: var(--ds-abstand-2) var(--ds-abstand-3);
  border-bottom: 1px solid var(--ds-linie);
  font-size: var(--ds-groesse-3);
  font-weight: 600;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-menue-eintrag {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* seit 1.9.130: die Seiten zentrieren button (justify-content:center) -- ein Knopf im Menü stand sonst mittig */
  gap: var(--ds-abstand-2);
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--ds-abstand-3);
  border: 0;
  border-radius: var(--ds-ecke-feld);
  background: transparent;
  color: var(--ds-text);
  font-family: var(--ds-schrift-text);
  font-size: var(--ds-groesse-3);
  font-weight: 500;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* :hover und :active mit zwei Teilen (0,2,0) -- die Seiten haben button:hover/button:active (0,1,1), die sonst in Knopf und Menü greifen */
.ds-menue-eintrag:hover,
.ds-menue-eintrag:active,
.ds-menue-eintrag:focus-visible {
  background: var(--ds-flaeche-2);
  color: var(--ds-text);
  text-decoration: none;
  outline: none;
}

.ds-menue-eintrag-fehler,
.ds-menue-eintrag-fehler:hover {
  color: var(--ds-fehler-text);
}

/* seit 1.9.137 (Stufe 5, R3, Punkt 5): Trennlinie zwischen Gruppen im Menü (Status · Projekt bzw. Kunde · Wege), _menue.html blendet sie aus,
   wo eine Gruppe leer ist */
.ds-menue-trenner {
  height: 1px;
  margin: var(--ds-abstand-1) var(--ds-abstand-2);
  background: var(--ds-linie);
}

.ds-menue-trenner[hidden] {
  display: none;
}