/* ============================================================
   UMG Admin Design System — Component styles
   Universitätsmedizin Göttingen · Admin / Dashboard surface
   ------------------------------------------------------------
   Requires colors_and_type.css (token sheet) loaded first.
   All components are token-driven, near-sharp, blue-dominant,
   high-contrast. Notfall red and gelb are reserved accents.

   Übernommen aus dem Design-Projekt „UMG Admin Design System",
   Datei admin/admin-components.css. Nach dem Abgleich mit
   www.umg.eu (17.08.2026) angepasst: Eingabefelder mit
   dunkelblauem Rand wie die Formulare der Website.

   Zweiter Abgleich mit www.umg.eu (29.10.2026), an der Website
   gemessen: Kopf in zwei Zeilen mit Kachel, kompakter Seitenkopf
   mit blauem Untertitel, Brotkrume unterstrichen wie dort,
   Inhalt auf der grauen Sektionsfläche, Fußzeile dunkelblau,
   Knöpfe und Eingabefelder in den Maßen der Website. Abschnitte
   TOP BAR, PAGE HEADER, SEITENRAHMEN und FOOTER.
   ============================================================ */

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11.2px 16px 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--marke-knopf);
  color: var(--marke-knopf-text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
/* Wie banner__cta auf www.umg.eu: der Hover unterstreicht den Text,
   die Fläche bleibt gelb. */
.btn:hover, .btn:active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.btn .icon, .btn i    { font-size: 16px; line-height: 0; }

.btn--secondary {
  background: #fff;
  color: var(--umg-logoblau);
  border-color: var(--umg-logoblau);
  font-weight: var(--fw-light);
}
.btn--secondary:hover { background: var(--umg-logoblau); color: #fff; text-decoration: none; }
.btn--secondary:active { background: #0d3157; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--umg-logoblau);
  border-color: transparent;
}
.btn--ghost:hover     { background: var(--umg-grey-100); color: var(--umg-dunkelblau); }

.btn--subtle {
  background: var(--umg-grey-100);
  color: var(--umg-grey-700);
}
.btn--subtle:hover    { background: var(--umg-grey-200); color: var(--umg-grey-900); }

.btn--danger {
  background: var(--umg-red-notfall);
  color: #fff;
}
.btn--danger:hover    { background: var(--umg-red-notfall-hover); }

.btn--sm { padding: 6px 12px 4px; font-size: 14px; line-height: 19px; }
.btn--lg { padding: 24px 32px; font-size: 16px; }
.btn--icon { padding: 9px; }
.btn--block { display: flex; width: 100%; }

.btn:disabled,
.btn--disabled {
  background: var(--umg-grey-200);
  color: var(--umg-grey-400);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------
   FORM FIELDS
   ------------------------------------------------------------ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.field__label .req { color: var(--umg-red-notfall); margin-left: 2px; }
.field__hint  { font-size: 14px; color: var(--fg-3); }
.field__error { font-size: 14px; color: var(--umg-red-notfall); }

.input, .select, .textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-light);
  line-height: 22px;
  color: var(--fg-1);
  background: #fff;
  border: 1px solid var(--umg-dunkelblau);
  border-radius: var(--radius-sm);
  padding: 13px 16px 11px;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.textarea { min-height: 90px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--umg-punkteblau);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(32, 49, 81, 0.4);
}
.input.is-error, .select.is-error, .textarea.is-error {
  border-color: var(--umg-red-notfall);
}
.input.is-error:focus { box-shadow: 0 0 0 1px var(--umg-red-notfall); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--umg-red-notfall);
}
/* Tastaturfokus zusätzlich als Ring; der Randwechsel allein ist schwach. */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 2px solid var(--border-focus); outline-offset: 2px;
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--bg-2);
  color: var(--fg-3);
  cursor: not-allowed;
}

/* Input with leading icon */
.input-group { position: relative; display: flex; align-items: center; }
.input-group > i, .input-group > .ic {
  position: absolute; left: 14px; font-size: 18px; color: var(--umg-dunkelblau);
  pointer-events: none;
}
.input-group .input { padding-left: 42px; }

/* Checkbox & radio */
.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--umg-dunkelblau);
  border-radius: var(--radius-sm);
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.check input[type="radio"] { border-radius: var(--radius-pill); }
.check input:checked { background: var(--umg-logoblau); border-color: var(--umg-logoblau); }
.check input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 10px;
  background: #fff;
  clip-path: polygon(14% 47%, 0 60%, 40% 100%, 100% 22%, 86% 9%, 38% 71%);
}
.check input[type="radio"]:checked::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.check input:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 40px; height: 22px; border-radius: var(--radius-pill);
  background: var(--umg-grey-300); position: relative;
  transition: background var(--t-base) var(--ease-out);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--t-base) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--umg-logoblau); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ------------------------------------------------------------
   BADGES & CHIPS
   ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.9;
}
.badge--neutral { background: var(--umg-grey-100); color: var(--umg-grey-700); }
.badge--info    { background: #e7eef7; color: var(--umg-logoblau); }
.badge--success { background: #e3f1ea; color: var(--umg-green-success); }
.badge--warning { background: #fdf0d6; color: #875e00; }
.badge--danger  { background: #fbe4e6; color: var(--umg-red-notfall); }
.badge--solid   { background: var(--umg-logoblau); color: #fff; }
.badge--solid::before { background: #fff; }

/* Chip (removable / filter token) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
  background: var(--umg-grey-100);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-pill);
  padding: 5px 6px 5px 12px;
}
.chip button {
  border: 0; background: transparent; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-content: center;
  color: var(--fg-3); font-size: 14px;
  transition: background var(--t-fast), color var(--t-fast);
}
.chip button:hover { background: var(--umg-grey-300); color: var(--fg-1); }

/* ------------------------------------------------------------
   CARDS  (.ui-card to avoid clashing with styleguide .card)
   ------------------------------------------------------------ */
.ui-card {
  background: #fff;
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-card-rest);
}
.ui-card__body   { padding: 20px; }
.ui-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ui-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--umg-dunkelblau);
  margin: 0;
}
.ui-card__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-1);
  background: #fff;
  border-radius: var(--radius-none);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* Stat card */
.stat {
  background: #fff;
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-card-rest);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--letter-overline);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 34px;
  line-height: 1;
  color: var(--umg-logoblau);
  letter-spacing: var(--letter-tight);
}
.stat__delta { font-size: 13px; font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: 4px; }
.stat__delta--up   { color: var(--umg-green-success); }
.stat__delta--down { color: var(--umg-red-notfall); }

/* ------------------------------------------------------------
   DATA TABLE
   ------------------------------------------------------------ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  background: #fff;
}
.data-table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-1);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background var(--t-fast) var(--ease-out); }
.data-table tbody tr:hover { background: var(--bg-2); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table--card {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-none);
  overflow: hidden;
  box-shadow: var(--shadow-card-rest);
}

/* ------------------------------------------------------------
   ALERTS / CALLOUTS
   ------------------------------------------------------------ */
.alert {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-none);
  border: 1px solid var(--border-1);
  background: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
}
.alert i { font-size: 18px; line-height: 1.3; flex: none; margin-top: 1px; }
.alert__title { font-weight: var(--fw-bold); margin: 0 0 2px; }
.alert__body  { margin: 0; color: var(--fg-2); }
.alert--info    { border-color: #cfe0f1; }
.alert--info i  { color: var(--umg-logoblau); }
.alert--success { border-color: #c5e3d2; }
.alert--success i { color: var(--umg-green-success); }
.alert--warning { border-color: #f0dba6; }
.alert--warning i { color: #875e00; }
.alert--danger  { border-color: #f1c8cd; }
.alert--danger i { color: var(--umg-red-notfall); }

/* ------------------------------------------------------------
   PAGE HEADER — kompakt im weißen Band über die volle Breite, auf
   allen Seiten gleich hoch. Zeile 1 der Titel (24 px fett), Zeile 2
   der Untertitel in Logoblau (18 px leicht, wie `subheading` der
   Website) links und die Aktionen rechts, mit fester Mindesthöhe
   auch ohne Aktionen. Die Oberzeile steht im Markup vor dem Titel
   und wird als Untertitel darunter gezeigt.
   ------------------------------------------------------------ */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(43px, auto);
  grid-template-areas: "titel titel" "unter aktionen";
  align-items: center;
  column-gap: 24px;
  row-gap: 2px;
  padding: 16px 0 12px;
  background: #fff;
  border-image: conic-gradient(#fff 0 0) fill 0 / / 0 100vmax;
}
.page-head > div:first-child { display: contents; }
.page-head__eyebrow {
  grid-area: unter;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.375;
  color: var(--umg-logoblau);
  font-weight: var(--fw-light);
}
.page-head__title {
  grid-area: titel;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 1.3;
  color: var(--umg-dunkelblau);
  margin: 0;
  text-wrap: pretty;
}
.page-head__actions {
  grid-area: aktionen;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
}
.page-head__actions .input, .page-head__actions .select { height: 43px; padding-top: 0; padding-bottom: 0; }

/* Brotkrume wie auf der Website: unterstrichene Links in Logoblau,
   Winkel als Trenner, im weißen Band direkt unter dem Kopf. */
.breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-body); font-size: 16px; line-height: 22px;
  font-weight: var(--fw-light); color: var(--umg-dunkelblau);
  margin: 0; padding: 0;
  background: #fff; border-image: conic-gradient(#fff 0 0) fill 0 / / 0 100vmax;
}
.breadcrumb a { color: var(--umg-logoblau); text-decoration: underline; }
.breadcrumb a:hover { color: var(--umg-logoblau); text-decoration-thickness: 2px; }
.breadcrumb .sep { font-size: 0; display: inline-flex; align-items: center; }
.breadcrumb .sep::before {
  content: ""; width: 6px; height: 6px; margin: 0 2px 0 -2px;
  border-right: 1px solid var(--umg-dunkelblau); border-bottom: 1px solid var(--umg-dunkelblau);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
   SECTION HEADER — three-square punkteblau mark + title + subtitle
   ------------------------------------------------------------ */
.section-head { display: flex; align-items: flex-start; gap: 12px; }
.section-head .umg-mark { margin-top: 5px; flex: none; }
.section-head__title {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 22px;
  color: var(--umg-dunkelblau); line-height: 1.15; margin: 0; letter-spacing: var(--letter-tight);
}
.section-head__sub {
  font-family: var(--font-body); font-size: 14px; color: var(--fg-3);
  margin: 4px 0 0; max-width: 70ch; line-height: 1.5;
}
.section-head--lg .section-head__title { font-size: 28px; }

/* ------------------------------------------------------------
   TOP BAR — Kopf wie www.umg.eu: Servicezeile (51 px, rechts
   bündig) über der Hauptzeile (100 px) mit Logo (34 px) und
   Navigation in Overpass Medium #404040. Die aktive Seite trägt
   Logoblau und das Quadrat in Punkteblau, mit dem die Website den
   aktiven Servicelink markiert.
   ------------------------------------------------------------ */
.topbar { background: #fff; position: relative; z-index: 20; }
.topbar__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 51px 100px;
  column-gap: 32px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
.topbar__brand {
  --logo-h: 34px;
  grid-row: 2; grid-column: 1; align-self: center;
  display: flex; flex-direction: column; width: max-content; text-decoration: none;
}
.topbar__brand img { height: var(--logo-h); display: block; }
/* Name unter dem Logo wie auf labor.umg.eu: feine Linie über die Logobreite, rechtsbündig.
   Versalhöhe wie „GÖTTINGEN“: 7,5 von 25,5 Logoeinheiten, bei Overpass 0,7 em. */
.topbar__produkt {
  position: relative; margin-top: 6px; padding-top: 6px;
  font-family: var(--font-body); font-weight: var(--fw-light);
  font-size: calc(var(--logo-h) * 0.42); line-height: 1;
  color: var(--umg-logoblau); text-align: right;
}
.topbar__produkt::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--umg-schwarz);
}
.topbar__meta {
  grid-row: 1; grid-column: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: 30px;
}
.topbar__meta form { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.topbar__meta .select { width: auto; padding: 4px 34px 2px 10px; font-size: 14px; line-height: 19px; }
.topbar__meta-link {
  position: relative;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 16px; line-height: 1.2;
  letter-spacing: 0.005em; color: var(--fg-nav); text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
}
a.topbar__meta-link:hover, button.topbar__meta-link:hover { color: var(--umg-logoblau); }
.topbar__meta-link.is-active::before,
.topbar__link.is-active::before {
  content: ""; position: absolute; top: 5px; left: -10px;
  width: 6px; height: 6px; background: var(--umg-punkteblau);
}
.topbar__meta-text { cursor: default; color: var(--fg-2); }
.topbar__nav {
  grid-row: 2; grid-column: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: 45px;
}
.topbar__link {
  position: relative; display: inline-block; padding: 30px 0;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 16px; line-height: 1.2;
  letter-spacing: 0.005em; color: var(--fg-nav); text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}
.topbar__link.is-active::before { top: 35px; }
.topbar__link:hover, .topbar__link.is-active { color: var(--umg-logoblau); }
.topbar__link .ic { font-size: 16px; }
.topbar__link__badge {
  font-family: var(--font-mono); font-size: 11px; color: var(--umg-logoblau);
  background: #eef4fb; border: 1px solid #cfe0f1; padding: 0 6px; line-height: 1.5;
}
.topbar__search { flex: 1; max-width: 420px; }

@media (max-width: 1180px) {
  .topbar__nav { gap: 28px; }
}
@media (max-width: 960px) {
  .topbar__inner { grid-template-columns: 1fr; grid-template-rows: auto 80px auto; }
  .topbar__meta { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; gap: 16px; padding: 10px 0; }
  .topbar__meta .select { max-width: 60vw; }
  .topbar__brand { --logo-h: 26px; }
  .topbar__nav {
    grid-row: 3; grid-column: 1 / -1; justify-content: flex-start;
    gap: 24px; overflow-x: auto; border-top: 1px solid var(--border-1);
  }
  .topbar__link { padding: 14px 0; }
  .topbar__link.is-active::before { top: 19px; }
}
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  font-size: 19px;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--umg-grey-100); color: var(--umg-dunkelblau); }
.icon-btn__dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--umg-red-notfall); border: 1.5px solid #fff;
}
.avatar {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: var(--umg-logoblau); color: #fff;
  display: grid; place-content: center;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px;
}

/* ------------------------------------------------------------
   SIDEBAR NAV
   ------------------------------------------------------------ */
.sidebar {
  width: 248px;
  background: #fff;
  border-right: 1px solid var(--border-1);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar__group {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--letter-overline);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-medium);
  padding: 14px 12px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item i { font-size: 18px; color: var(--fg-3); transition: color var(--t-fast); }
.nav-item:hover { background: var(--umg-grey-100); color: var(--umg-dunkelblau); }
.nav-item:hover i { color: var(--umg-dunkelblau); }
.nav-item.is-active {
  background: #eef4fb;
  color: var(--umg-logoblau);
  border-left-color: var(--umg-logoblau);
}
.nav-item.is-active i { color: var(--umg-logoblau); }
.nav-item__badge {
  margin-left: auto;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 11px; color: #fff; background: var(--umg-logoblau);
  border-radius: var(--radius-pill); padding: 1px 7px;
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.app-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-2);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-3);
}
.app-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.app-footer a { color: var(--fg-2); }
.app-footer a:hover { color: var(--umg-logoblau); }

/* ============================================================
   INLINE ICONS (CSS mask — Lucide paths, no webfont dependency)
   Single-color, follow `color`. Use: <span class="ic ic-search"></span>
   ============================================================ */
.ic {
  display: inline-block; width: 1em; height: 1em;
  background: currentColor; vertical-align: -0.125em; flex: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ic-search   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.ic-bell     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.ic-plus     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
.ic-link     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.ic-download { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.ic-info     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.ic-check-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ic-warning  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.ic-danger   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }

.ic-chevron-left  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.ic-chevron-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.ic-server { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2' ry='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2' ry='2'/%3E%3Cline x1='6' x2='6.01' y1='6' y2='6'/%3E%3Cline x1='6' x2='6.01' y1='18' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2' ry='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2' ry='2'/%3E%3Cline x1='6' x2='6.01' y1='6' y2='6'/%3E%3Cline x1='6' x2='6.01' y1='18' y2='18'/%3E%3C/svg%3E"); }
.ic-box { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.ic-list { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E"); }
.ic-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }

/* Three-square punkteblau motif — the only decorative brand element */
.umg-mark { display: inline-grid; grid-auto-rows: 5px; gap: 3px; }
.umg-mark > i { width: 5px; height: 5px; background: var(--umg-punkteblau); display: block; }

/* ============================================================
   TECHNICAL / DASHBOARD MODULES
   Grounded in the umg.eu language: sharp edges, hairline borders,
   mono for machine data, dunkelblau as the dark surface (footer),
   gelb strictly as accent.
   ============================================================ */

/* Status indicator — small sharp square marker + label */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px; color: var(--fg-1);
}
.status__dot { width: 8px; height: 8px; flex: none; background: var(--umg-grey-400); }
.status--online   .status__dot { background: var(--umg-green-success); }
.status--degraded .status__dot { background: var(--umg-gelb); }
.status--offline  .status__dot { background: var(--umg-red-notfall); }
.status--maint    .status__dot { background: var(--umg-punkteblau); }
.status__meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); margin-left: 2px; }

/* Severity / log-level tag — sharp mono token */
.level {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid transparent; border-radius: 0; line-height: 1.45;
}
.level--critical { background: var(--umg-red-notfall); color: #fff; }
.level--error    { background: #fbe4e6; color: var(--umg-red-notfall); border-color: #f1c8cd; }
.level--warn     { background: #fdf0d6; color: #875e00; border-color: #f0dba6; }
.level--info     { background: #e7eef7; color: var(--umg-logoblau); border-color: #cfe0f1; }
.level--debug    { background: var(--umg-grey-100); color: var(--umg-grey-700); border-color: var(--border-1); }
.level--ok       { background: #e3f1ea; color: var(--umg-green-success); border-color: #c5e3d2; }

/* Key–value metadata — label (display caps) + machine value (mono) */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; align-items: baseline; margin: 0; }
.kv dt {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
}
.kv dd { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); overflow-wrap: anywhere; }
.kv dd a { color: var(--fg-link); }

/* Metric / KPI tile */
.metric {
  background: #fff; box-shadow: var(--shadow-card-rest);
  border-radius: var(--radius-none); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.metric__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metric__label {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3); font-weight: 500;
}
.metric__value { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--umg-logoblau); letter-spacing: -0.01em; }
.metric__unit  { font-family: var(--font-body); font-size: 14px; color: var(--fg-3); font-weight: 400; margin-left: 4px; }
.metric__foot  { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.delta { font-weight: 700; }
.delta--up   { color: var(--umg-green-success); }
.delta--down { color: var(--umg-red-notfall); }

/* Progress / utilisation bar — sharp */
.progress { height: 6px; background: var(--umg-grey-100); overflow: hidden; }
.progress__bar { height: 100%; background: var(--umg-logoblau); }
.progress--warn   .progress__bar { background: var(--umg-gelb); }
.progress--danger .progress__bar { background: var(--umg-red-notfall); }

/* Log / terminal view — dunkelblau surface (as the footer), mono */
.logview {
  background: var(--umg-dunkelblau); border: 1px solid var(--umg-dunkelblau);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,0.85); overflow: auto;
}
.logview__row {
  display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center;
  padding: 6px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); white-space: nowrap;
}
.logview__row:last-child { border-bottom: 0; }
.logview__ts  { color: var(--umg-punkteblau); }
.logview__msg { color: rgba(255,255,255,0.92); }

/* Tabs — underline-active, mirrors the umg.eu header nav */
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border-1); }
.tab {
  background: transparent; border: 0; padding: 11px 0; margin-bottom: -1px;
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  color: var(--umg-dunkelblau); cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
}
.tab:hover { color: var(--umg-logoblau); }
.tab.is-active { color: var(--umg-logoblau); border-bottom-color: var(--umg-logoblau); font-weight: 700; }
.tab__count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); background: var(--umg-grey-100); padding: 1px 6px; }

/* Toolbar / filter bar */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: #fff; border: 1px solid var(--border-1);
}
.toolbar__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--umg-dunkelblau); margin-right: 4px; }
.toolbar__spacer { flex: 1; }

/* Data-row list — hairline rows, mono lead column, hover (umg.eu EventList) */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-1); }
.rows__item {
  display: grid; grid-template-columns: 168px 1fr auto auto; gap: 18px; align-items: center;
  padding: 13px 6px; border-bottom: 1px solid var(--border-1);
  text-decoration: none; transition: background var(--t-fast) var(--ease-out);
}
.rows__item:hover { background: var(--bg-2); }
.rows__ts { font-family: var(--font-mono); font-size: 13px; color: var(--umg-logoblau); font-weight: 500; }
.rows__title { font-family: var(--font-body); font-size: 14px; color: var(--fg-1); }

/* Solid brand panel (umg.eu SearchPanel) */
.panel-brand { background: var(--umg-logoblau); color: #fff; padding: 24px 28px; }
.panel-brand h3 { color: #fff; margin: 0 0 6px; }
.panel-brand p  { color: rgba(255,255,255,0.85); margin: 0; max-width: 60ch; }

/* ============================================================
   CARD HOVER — the canonical umg.eu signal: a 10px bottom bar
   that turns gelb (list__wrapper, accordeon__question, teaser).
   ============================================================ */
.ui-card, .stat, .metric {
  border-bottom: 10px solid transparent;
  transition: border-color 0.2s ease-in-out;
}
.ui-card:hover, .stat:hover, .metric:hover { border-bottom-color: var(--umg-gelb); }

/* Opt-out: the gelb bar signals "this card is clickable / navigates".
   Use --static on containers that merely hold content (tables, forms,
   read-only panels). */
.ui-card--static, .stat--static, .metric--static { border-bottom-width: 0; }
.ui-card--static:hover, .stat--static:hover, .metric--static:hover { border-bottom-color: transparent; }

/* ------------------------------------------------------------
   NEWS CARD — teaser tile (self-service / portal): media on top,
   date·category, headline, 2-line snippet, „Mehr erfahren →“.
   ------------------------------------------------------------ */
.news-card {
  display: flex; flex-direction: column; background: #fff;
  box-shadow: var(--shadow-card-rest);
  border-bottom: 10px solid transparent;
  transition: border-color 0.2s ease-in-out;
}
.news-card:hover { border-bottom-color: var(--umg-gelb); }
.news-card__media {
  aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border-1); text-decoration: none;
  background: repeating-linear-gradient(45deg, var(--umg-grey-100), var(--umg-grey-100) 10px, var(--umg-grey-50) 10px, var(--umg-grey-50) 20px);
}
.news-card__media span {
  font-family: var(--font-mono); font-size: 11px; color: var(--umg-grey-500);
  background: #fff; padding: 3px 8px; border: 1px solid var(--border-1);
}
.news-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card__title {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 18px;
  color: var(--umg-dunkelblau); line-height: 1.2; margin: 0; text-wrap: balance;
}
.news-card__text {
  font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__more {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px;
  color: var(--umg-logoblau); text-decoration: none; margin-top: 2px; align-self: flex-start;
}
.news-card__more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   NAV-TEASER — icon tile navigation (umg.eu pattern)
   ------------------------------------------------------------ */
.teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.teaser {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 20px 12px 10px; background: #fff; box-shadow: var(--shadow-card-rest);
  text-decoration: none; color: var(--umg-logoblau);
  border-bottom: 10px solid transparent;
  transition: border-color 0.2s ease-in-out;
}
.teaser:hover { border-bottom-color: var(--umg-gelb); }
.teaser .ic { font-size: 30px; }
.teaser__label { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 13px; }
.teaser:hover .teaser__label { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   PAGINATION (compact) — attaches under a .data-table--card
   ------------------------------------------------------------ */
.pager {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; background: #fff;
  border: 1px solid var(--border-1); border-top: 0;
  font-family: var(--font-body); font-size: 13px; color: var(--fg-2);
}
.pager__count { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.pager__spacer { flex: 1; }
.pager__rows { display: flex; align-items: center; gap: 8px; }
.pager__rows .select { width: auto; padding: 6px 28px 6px 10px; }
.pager__nav { display: flex; align-items: center; gap: 12px; }
.pager__pages { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--umg-dunkelblau); }
.pager__pages b { color: var(--umg-logoblau); }
.pg-btn {
  width: 32px; height: 32px; display: grid; place-content: center;
  border: 1px solid var(--border-2); background: #fff; color: var(--umg-logoblau);
  cursor: pointer; border-radius: var(--radius-sm); font-size: 17px;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.pg-btn:hover:not(:disabled) { background: var(--umg-grey-100); border-color: var(--umg-logoblau); }
.pg-btn:disabled { color: var(--umg-grey-300); cursor: not-allowed; }
.pager--center { justify-content: center; border: 0; padding: 14px 0 2px; }

/* ------------------------------------------------------------
   VERTICAL TIMELINE — single rail (left), deployment/activity
   ------------------------------------------------------------ */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border-2);
}
.timeline__item { position: relative; padding-bottom: 22px; }
.timeline__item:last-child { padding-bottom: 2px; }
.timeline__node {
  position: absolute; left: -25px; top: 2px; width: 13px; height: 13px;
  background: var(--umg-logoblau); outline: 3px solid #fff;
}
.timeline__node--ok   { background: var(--umg-green-success); }
.timeline__node--run  { background: var(--umg-gelb); }
.timeline__node--fail { background: var(--umg-red-notfall); }
.timeline__time  { font-family: var(--font-mono); font-size: 12px; color: var(--umg-logoblau); }
.timeline__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 15px; color: var(--umg-dunkelblau); margin: 2px 0 0; line-height: 1.25; }
.timeline__body  { font-size: 13px; color: var(--fg-2); margin: 4px 0 0; line-height: 1.5; }
.timeline__meta  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.timeline__meta .mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }

/* ------------------------------------------------------------
   TOPBAR · product wordmark variant (instead of the logo)
   ------------------------------------------------------------ */
.topbar__product { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 18px; color: var(--umg-dunkelblau); letter-spacing: var(--letter-tight); }

/* ------------------------------------------------------------
   FOOTER · brand variant — wie www.umg.eu: dunkelblaues Band,
   Inhalt auf 1170 px, oben Logo (27 px) und Links, getrennt durch
   eine Linie in Punkteblau, darunter die Angaben zur Anwendung.
   ------------------------------------------------------------ */
.app-footer--brand {
  display: block; padding: 30px 0; border: 0;
  background: var(--marke-fuss); color: #fff;
  font-size: 16px; font-weight: var(--fw-light); line-height: 22px;
}
.app-footer__inner { max-width: 1170px; margin: 0 auto; padding: 0 24px; box-sizing: content-box; }
.app-footer__row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.app-footer__row:first-child { padding-bottom: 24px; border-bottom: 1px solid var(--umg-punkteblau); }
.app-footer__row + .app-footer__row { padding-top: 24px; }
.app-footer--brand img { height: 27px; display: block; }
.app-footer--brand nav { display: flex; gap: 30px; flex-wrap: wrap; }
.app-footer--brand a { color: #fff; text-decoration: none; }
.app-footer--brand a:hover { color: #fff; text-decoration: underline; }
.app-footer--brand a:focus-visible { outline-color: #fff; }
.app-footer--brand .mono { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.55); }
.app-footer--brand .af-spacer { flex: 1; }

/* ------------------------------------------------------------
   SEITENRAHMEN — wie www.umg.eu: Kopf und Titelbereich weiß, der
   Inhalt liegt auf der grauen Sektionsfläche, mittig auf 1170 px.
   Brotkrume, Seitenkopf, Meldungen und die Reiterzeile eines
   Eintrags tragen das weiße Band über die volle Breite. Gemalt wird es
   als Rahmenbild, das seitlich über den Kasten hinausragt: Es schneidet
   nichts ab (aufklappende Blätter wie „Teilen“) und erzeugt keinen
   seitlichen Rollbalken.
   ------------------------------------------------------------ */
/* Platz für den Rollbalken immer frei: Sonst wandert der mittige Rahmen beim Seitenwechsel. */
html { scrollbar-gutter: stable; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.app-body { flex: 1; background: var(--bg-2); }
.app-content { max-width: 1170px; margin: 0 auto; padding: 0 24px 48px; box-sizing: content-box; }
.app-messages {
  display: flex; flex-direction: column; gap: 12px; padding-top: 16px;
  background: #fff; border-image: conic-gradient(#fff 0 0) fill 0 / / 0 100vmax;
}
.app-content .field + .field { margin-top: var(--space-4); }
.topbar__meta .select { border-color: var(--border-2); }

/* ------------------------------------------------------------
   SCHMALE FENSTER — bis 320 px Breite ohne seitliches Rollen
   (WCAG 1.4.10). Tabellen rollen in ihrem Rahmen (.tabelle).
   ------------------------------------------------------------ */
.app-content { overflow-wrap: break-word; hyphens: auto; }
.app-content code { overflow-wrap: anywhere; }
.data-table { hyphens: manual; }
.rows__item--wert   { grid-template-columns: minmax(0, 1fr) auto; }
.rows__item--kennung { grid-template-columns: 96px minmax(0, 1fr) auto; }
.ui-card__footer { flex-wrap: wrap; }
@media (max-width: 640px) {
  .app-content { padding-left: 16px; padding-right: 16px; }
  .topbar__inner { padding: 0 16px; }
  .topbar__nav { flex-wrap: wrap; overflow-x: visible; column-gap: 24px; row-gap: 0; }
  .app-footer__inner { padding: 0 16px; }
  .page-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "unter" "aktionen"; }
  .page-head__actions { justify-content: flex-start; }
  .btn { white-space: normal; text-align: center; }
  .kv { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .kv dt { white-space: normal; }
  .kv dd { margin-bottom: var(--space-2); }
  .rows__item, .rows__item--kennung { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rows__item--wert { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 12px; }
  .ui-card__header { flex-wrap: wrap; }
}

/* ------------------------------------------------------------
   BARRIEREFREIHEIT — Sprunglink zum Inhalt, nur für Screenreader
   sichtbarer Text, Feldgruppen ohne Rahmen.
   ------------------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprunglink {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; background: var(--umg-dunkelblau); color: #fff;
  font-family: var(--font-display); font-weight: var(--fw-medium); text-decoration: none;
}
.sprunglink:focus { top: 8px; outline: 2px solid var(--umg-gelb); outline-offset: 2px; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.fehleruebersicht ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.fehleruebersicht a { color: var(--umg-red-notfall); }

/* ------------------------------------------------------------
   ERZWUNGENE FARBEN — Kontrastmodus von Windows. Die weißen Bänder
   und der Hover-Balken der Karten entfallen; Logo, Symbole und die
   aktive Seite bleiben sichtbar, Karten bekommen einen Rand.
   ------------------------------------------------------------ */
@media (forced-colors: active) {
  .page-head, .breadcrumb, .app-messages { border-image: none; }
  .topbar__brand img { forced-color-adjust: none; background: #fff; }
  .app-footer--brand img { forced-color-adjust: none; background: var(--marke-fuss); }
  .ic, .badge::before { forced-color-adjust: none; background-color: CanvasText; }
  a .ic, a.btn .ic { background-color: LinkText; }
  button .ic { background-color: ButtonText; }
  .ui-card, .stat, .metric { border: 1px solid CanvasText; }
  .ui-card:hover, .stat:hover, .metric:hover { border-color: Highlight; }
  .topbar__link.is-active::before, .topbar__meta-link.is-active::before {
    forced-color-adjust: none; background: Highlight;
  }
}