@charset "UTF-8";
/*
 * dbh Designsystem - Angleichung von co_update
 *
 * Werte aus "dbh Designsystem - Regeln fuer Bestandsanwendungen" (UI/UX Team, 14.10.2026),
 * Quelle der Werte: Figma-Library "dbh's Produkt-Designsystem v2" (Light-Mode).
 *
 * Die Seiten von co_update sind ueberwiegend absolut positioniert und mit Inline-Styles
 * gestaltet. Grundprinzip laut Dokument: angleichen statt umbauen. Deshalb setzt dieses
 * Stylesheet Schrift, Farben, Rahmen, Ecken und Zustaende zentral - wo Inline-Styles
 * dagegenhalten, mit !important. Hoehen absolut positionierter Felder bleiben, damit
 * sich Elemente nicht ueberlappen.
 */

:root {
  /* Flaechen */
  --dbh-canvas: #FBFBFB;
  --dbh-surface: #FFFFFF;
  --dbh-sunken: #EEEEEE;
  /* Text */
  --dbh-text: #222222;
  --dbh-text-muted: #333333;
  --dbh-text-subtle: #555555;
  --dbh-text-disabled: rgba(0,0,0,.3);
  /* Linien */
  --dbh-border: #DDDDDD;
  --dbh-border-strong: #CCCCCC;
  --dbh-border-subtle: #EEEEEE;
  /* Marke und Interaktion */
  --dbh-burgundy: #6E0730;
  --dbh-burgundy-light: #7B1539;
  --dbh-on-burgundy: #FBFBFB;
  --dbh-action: #CBDAB5;
  --dbh-action-hover: #C1CFAC;
  --dbh-on-action: #2C3328;
  --dbh-focus: #00478A;
  /* Rueckmeldungen */
  --dbh-error: #FF002F;   --dbh-error-surface: #FFF6F7;   --dbh-error-text: #93001B;
  --dbh-info: #C57701;    --dbh-info-surface: #FCF8F1;    --dbh-info-text: #945B03;
  --dbh-task: #3A7CC8;    --dbh-task-surface: #F0F6FF;    --dbh-task-text: #00478A;
  --dbh-success: #318F55; --dbh-success-surface: #E9F8ED; --dbh-success-text: #075D30;
  /* Form */
  --dbh-font: "Segoe UI", system-ui, Arial, sans-serif;
  --dbh-radius: 0 0 0 8px;
  --dbh-control-height: 40px;
  --dbh-shadow: 0 0 20px -20px rgba(0,0,0,.2), 0 12px 10px -10px rgba(0,0,0,.1);
}

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

html, body {
  background: var(--dbh-canvas);
  color: var(--dbh-text);
}
body {
  font: 16px/1.5 var(--dbh-font);
}
/* Einzige Schrift ist Segoe UI - auch gegen alte Inline-Angaben (Arial, Verdana) */
body, body * {
  font-family: var(--dbh-font) !important;
}

a, a:link, a:visited, A.llink {
  color: var(--dbh-burgundy) !important;
}
a:hover, A.llink:hover {
  color: var(--dbh-burgundy-light) !important;
  text-decoration: underline;
}

hr {
  border: 0;
  border-top: 1px solid var(--dbh-border-subtle);
}

/* ---------------------------------------------------------------- Buttons */

/* Standard = Outline (Nebenaktionen) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-size: 14px;
  color: var(--dbh-text) !important;
  background: var(--dbh-canvas) !important;
  border: 1.5px solid var(--dbh-border) !important;
  border-radius: var(--dbh-radius) !important;
  padding: 0 16px;
  cursor: pointer;
  box-sizing: border-box;
  font-weight: normal !important;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background: var(--dbh-sunken) !important;
}
button img {
  vertical-align: middle;
  margin-right: 6px;
}

/* Primaer: die eine Hauptaktion eines Bereichs (Pastellgruen) */
input.dbh-btn-primary, button.dbh-btn-primary, a.dbh-btn-primary {
  color: var(--dbh-on-action) !important;
  background: var(--dbh-action) !important;
  border-color: var(--dbh-action) !important;
}
input.dbh-btn-primary:hover, button.dbh-btn-primary:hover, a.dbh-btn-primary:hover {
  background: var(--dbh-action-hover) !important;
  border-color: var(--dbh-action-hover) !important;
}

/* Secondary: weitere Aktionen (Flaeche #EEEEEE) */
input.dbh-btn-secondary, button.dbh-btn-secondary {
  background: var(--dbh-sunken) !important;
  border-color: var(--dbh-sunken) !important;
  color: var(--dbh-text) !important;
}
input.dbh-btn-secondary:hover, button.dbh-btn-secondary:hover {
  background: #E2E2E2 !important; /* Secondary mit 5 % Schwarz */
  border-color: #E2E2E2 !important;
}

/* Destructive: Loeschen und Entfernen */
input.dbh-btn-destructive, button.dbh-btn-destructive {
  color: var(--dbh-error-text) !important;
  background: var(--dbh-error-surface) !important;
  border-color: var(--dbh-error) !important;
}
input.dbh-btn-destructive:hover, button.dbh-btn-destructive:hover {
  background: #F4E9EA !important; /* Fehlerflaeche mit 5 % Schwarz */
}

/* Deaktiviert: ueber Farben, nicht ueber Deckkraft */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--dbh-sunken) !important;
  color: var(--dbh-text-disabled) !important;
  border-color: var(--dbh-sunken) !important;
  opacity: 1 !important;
  cursor: default;
}

/* ---------------------------------------------------------------- Eingabefelder */

input[type="text"],
input[type="password"],
input[type="file"],
input:not([type]),
select,
textarea {
  font-size: 14px; /* Inline-Groessen der absolut positionierten Formulare bleiben */
  color: var(--dbh-text) !important;
  background: var(--dbh-surface) !important;
  border: 1.5px solid var(--dbh-border) !important;
  border-radius: var(--dbh-radius) !important;
  padding: 0 6px;
  box-sizing: border-box;
}
input::placeholder,
textarea::placeholder {
  color: var(--dbh-text-subtle);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--dbh-burgundy); /* ausgewaehlt = Burgund */
}

/* Fokus: blauer Ring 3 px aussen, Rahmen entfaellt - nie entfernen */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--dbh-focus) !important;
}

/* Bedienelemente im normalen Seitenfluss: 40 px hoch.
   Absolut positionierte Formulare behalten ihre Hoehen, sonst ueberlappen die Felder. */
.dbh-control,
button.dbh-control,
input.dbh-control {
  height: var(--dbh-control-height) !important;
  min-height: var(--dbh-control-height);
  font-size: 16px;
}

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

table {
  border-color: var(--dbh-border-subtle) !important;
  border-collapse: collapse;
}
td, th {
  border-color: var(--dbh-border-subtle) !important;
}
th {
  color: var(--dbh-text-muted);
  font-weight: 600 !important;
}

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

/* Menueleiste (#mainmenue): Burgund mit heller Schrift, Produktname links */
div:has(> #mainmenue) {
  background: var(--dbh-burgundy);
  height: var(--dbh-control-height) !important;
  border-radius: var(--dbh-radius);
}
.dbh-produkt {
  float: left;
  line-height: var(--dbh-control-height);
  padding-left: 16px;
  color: var(--dbh-on-burgundy);
  font-size: 16px;
  font-weight: 600;
}
#mainmenue button {
  height: var(--dbh-control-height) !important;
  width: auto !important;
  padding: 0 16px;
  margin: 0;
  font-size: 14px !important;
  color: var(--dbh-on-burgundy) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#mainmenue button:hover {
  background: var(--dbh-burgundy-light) !important;
}
#mainmenue button img {
  display: none; /* alte GIF-Icons; Phosphor-Icons folgen (Schritt 5) */
}
/* aktiver Menuepunkt: weiss mit dunkler Schrift */
#mainmenue button.dbh-aktiv {
  background: var(--dbh-on-burgundy) !important;
  color: var(--dbh-text) !important;
  border-radius: var(--dbh-radius) !important;
}

/* ---------------------------------------------------------------- Umgebungsleiste */

/* Auf jeder Umgebung ausser Live: Leiste ueber die volle Breite (Gelb, dunkle Schrift).
   Die Seiten sind absolut positioniert - der Inhalt wird um die Leistenhoehe verschoben. */
.dbh-umgebung {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  background: var(--dbh-info);
  color: var(--dbh-text) !important;
  font-size: 14px;
  font-weight: 600;
  z-index: 10000;
}
body:has(> .dbh-umgebung) {
  position: relative;
  top: 32px;
  margin: 0;
  padding: 8px;
}

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

.dbh-fehler {
  color: var(--dbh-error-text) !important;
}

/* ---------------------------------------------------------------- Update-Seite */

/* Hauptaktion als Link (Herunterladen) */
a.dbh-btn-primary {
  display: inline-block;
  height: var(--dbh-control-height);
  line-height: var(--dbh-control-height);
  padding: 0 16px;
  border-radius: var(--dbh-radius);
  text-decoration: none !important;
  color: var(--dbh-on-action) !important;
  background: var(--dbh-action);
  white-space: nowrap;
}
a.dbh-btn-primary:hover {
  background: var(--dbh-action-hover);
}

/* Tabelle der Updates: Zeilentrenner 1 px, keine senkrechten Linien */
#main table tr + tr > td {
  border-top: 1px solid var(--dbh-border-subtle);
}
#main th {
  color: var(--dbh-text-muted);
}

/* ---------------------------------------------------------------- Logo */

/* offizielle dbh-Bildmarke (Marketing), nicht verzerren oder umfaerben */
img.dbh-logo {
  height: 48px;
  width: auto;
}

/* ---------------------------------------------------------------- Seitenaufbau (fliessend) */

/* Inhalt unter der Menueleiste, ganze Breite */
.dbh-inhalt {
  padding: 0 16px;
}
/* Kopfzeile: Bildmarke links, Aktionen rechts */
.dbh-seitenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 0;
}
.dbh-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Ausloggen ganz rechts, etwas abgesetzt */
.dbh-aktionen .dbh-logout {
  margin-left: 16px;
}
/* Seitentitel: H5 (22 px Bold) */
.dbh-titel {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 8px 0 16px;
}

/* ---------------------------------------------------------------- Verwaltungsseiten (volle Breite) */

.dbh-seite {
  width: 100%;
}

/* Listen: Kopfzeile und Inhalt sind getrennte Tabellen (Inhalt wird per AJAX neu geladen).
   Gleiche feste Spaltenaufteilung + gleicher Platz fuer die Scrollleiste -> Spalten bleiben buendig. */
.dbh-liste-tabelle {
  table-layout: fixed;
  width: 100% !important;
}
.dbh-liste-kopf {
  overflow-y: hidden;
  scrollbar-gutter: stable;
  margin-top: 16px;
}
.dbh-liste {
  width: 100%;
  border-bottom: 1px solid var(--dbh-border-subtle);
}
.dbh-liste-tabelle th {
  font-size: 14px;
  padding: 8px 4px;
}
.dbh-liste-tabelle td {
  font-size: 14px !important;
  padding: 6px 4px;
}
/* Listen (Anwendungen, Kundenverwaltung, Lizenzen): jede zweite Zeile hellgrau */
.dbh-liste .dbh-liste-tabelle tr:nth-child(even) > td {
  background: #F4F4F4;
}
.dbh-liste .dbh-liste-tabelle tr:hover > td,
.dbh-liste-tabelle tr:hover > td {
  background: var(--dbh-sunken);
}

/* Formulare: Raster aus Beschriftung + Feld, zwei Spalten, bei wenig Platz untereinander */
.dbh-formular {
  background: var(--dbh-surface);
  border: 1.5px solid var(--dbh-border);
  border-radius: var(--dbh-radius);
  padding: 16px 24px 24px;
  margin: 24px 0 16px;
  box-sizing: border-box;
}
.dbh-formular-titel {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
}
.dbh-formular-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 8px 48px;
}
.dbh-felder {
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
  align-content: start;
}
.dbh-felder > label,
.dbh-feld-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dbh-text-muted);
}
.dbh-feld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dbh-formular input[type="text"],
.dbh-formular input[type="file"],
.dbh-formular select,
.dbh-suche input[type="text"],
.dbh-suche select {
  height: var(--dbh-control-height);
  padding: 0 12px;
  font-size: 14px;
}
.dbh-formular input[type="file"] {
  padding-top: 7px;
}
.dbh-formular textarea {
  min-height: 96px;
  padding: 8px 12px;
}
.dbh-formular input[type="button"],
.dbh-suche input[type="button"] {
  height: var(--dbh-control-height);
}
.dbh-formular input[type="checkbox"],
.dbh-suche input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 11px 0;
}
.dbh-feld-s { width: 72px; }
.dbh-feld-m { width: 160px; }
.dbh-feld-l { flex: 1 1 240px; width: 100%; min-width: 0; }
/* Nur-Lese-Felder: Wert ohne Feldrahmen */
input.dbh-nurlesen {
  border-color: transparent !important;
  background: transparent !important;
  padding-left: 0 !important;
}
.dbh-kalender {
  height: 16px;
  cursor: pointer;
}
.dbh-formular-aktionen {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.dbh-formular-aktionen > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Suchbereich der Lizenzverwaltung */
.dbh-suche {
  margin-top: 16px;
}
.dbh-suche-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.dbh-suche-kopf .dbh-formular-titel {
  margin-bottom: 8px;
}
.dbh-suche-summe {
  font-size: 14px;
  font-weight: 600;
  color: var(--dbh-text-muted);
}
.dbh-suche-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.dbh-suchfeld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dbh-suchfeld > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dbh-text-muted);
}
.dbh-suchfeld-breit {
  flex: 1 1 220px;
}

/* Fehlermarkierung der Formularpruefung (dataform.js): roter Rahmen + rosa Flaeche */
input.dbh-fehlerhaft,
select.dbh-fehlerhaft,
textarea.dbh-fehlerhaft {
  border-color: var(--dbh-error) !important;
  background: var(--dbh-error-surface) !important;
}
input.dbh-deaktiviert,
select.dbh-deaktiviert {
  background: var(--dbh-sunken) !important;
  color: var(--dbh-text-disabled) !important;
}