/* MaassIT Account Console Branding — Umsetzung des Designs "Profil.dc.html"
   aus dem Maaß-IT-Design-System (claude.ai/design, Projekt d28885a8).

   Additiv zur nativen Keycloak-26.7 Account Console (React + PatternFly 5).
   Es werden bewusst keine FreeMarker-Templates ueberschrieben, damit
   Keycloak-Updates sowie Passkey-/WebAuthn- und Broker-Funktionen erhalten
   bleiben. Alle Regeln haengen deshalb an den PatternFly-Klassen der
   gebuendelten React-App.

   Farb-, Typo-, Abstands- und Effekt-Werte sind 1:1 die Tokens des
   Design-Systems (tokens/colors.css, typography.css, spacing.css,
   effects.css). Die Primaerschrift Visby CF wird mit dem Theme ausgeliefert.
   Der Mono-Stack bleibt bewusst systemseitig, damit die Console keine
   externen Font-Requests ausloest. */

@font-face {
    font-family: "Visby CF";
    src: url("../fonts/VisbyCF-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Visby CF";
    src: url("../fonts/VisbyCF-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Marke (exakte CI-Werte) ---- */
    --mit-orange: #ff7c00;
    --mit-dark: #3c3c3c;

    /* ---- Orange-Rampe ---- */
    --mit-orange-50: #fff4e8;
    --mit-orange-100: #ffe4c7;
    --mit-orange-200: #ffce9c;
    --mit-orange-300: #ffb165;
    --mit-orange-600: #ea6e00;
    --mit-orange-700: #c25a00;

    /* ---- Neutrale Rampe (warmes Grau, Anker #3C3C3C) ---- */
    --mit-gray-50: #f6f5f3;
    --mit-gray-100: #eceae7;
    --mit-gray-200: #dad7d2;
    --mit-gray-300: #bebab4;
    --mit-gray-400: #939089;
    --mit-gray-500: #6a6863;
    --mit-gray-800: #2b2b2b;
    --mit-gray-900: #1b1b1b;

    /* ---- Status ---- */
    --mit-success-fg: #1e7a55;
    --mit-success-bg: #e8f6ef;
    --mit-success-border: #b6e3cf;
    --mit-info-fg: #0a6e93;
    --mit-info-bg: #e3f8fe;
    --mit-info-border: #b3ecfb;
    --mit-warning-fg: #9a4b00;
    --mit-warning-bg: #fff1e0;
    --mit-warning-border: #ffd3a6;
    --mit-danger-solid: #ff2e00;
    --mit-danger-fg: #b31f00;
    --mit-danger-bg: #ffe9e3;
    --mit-danger-border: #ffc0b0;

    /* ---- Semantische Flaechen und Text ---- */
    --mit-surface-raised: #ffffff;
    --mit-surface-sunken: var(--mit-gray-50);
    --mit-text-strong: var(--mit-gray-900);
    --mit-text-body: var(--mit-dark);
    --mit-text-muted: var(--mit-gray-500);
    --mit-text-subtle: var(--mit-gray-400);
    --mit-border-subtle: var(--mit-gray-100);
    --mit-border-default: var(--mit-gray-200);
    --mit-border-strong: var(--mit-gray-300);
    --mit-ring: rgba(255, 124, 0, .38);

    /* ---- Effekte ---- */
    --mit-radius-sm: 6px;
    --mit-radius-md: 10px;
    --mit-radius-lg: 16px;
    --mit-radius-pill: 999px;
    --mit-shadow-xs: 0 1px 2px rgba(27, 27, 27, .06);
    --mit-shadow-md: 0 8px 20px rgba(27, 27, 27, .10);
    --mit-shadow-orange: 0 10px 28px rgba(255, 124, 0, .30);
    --mit-shadow-focus: 0 0 0 3px var(--mit-ring);
    --mit-ease-out: cubic-bezier(.22, 1, .36, 1);

    /* ---- Typografie ---- */
    --mit-font-sans: "Visby CF", "VisbyCF", "Visby Round CF", "Aptos", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mit-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* ---- Icons ---- */
    --mit-icon-plus: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3C/svg%3E");

    /* ---- Layout ---- */
    --mit-container: 1000px;
    --mit-gutter: max(16px, calc((100% - var(--mit-container)) / 2));

    /* ---- PatternFly-Globals auf die Marke ziehen ---- */
    --pf-v5-global--primary-color--100: var(--mit-orange);
    --pf-v5-global--primary-color--200: var(--mit-orange-600);
    --pf-v5-global--link--Color: var(--mit-orange);
    --pf-v5-global--link--Color--hover: var(--mit-orange-600);
    --pf-v5-global--active-color--100: var(--mit-orange);
    --pf-v5-global--BorderRadius--sm: var(--mit-radius-md);
    --pf-v5-global--BorderRadius--lg: var(--mit-radius-lg);
    --pf-v5-global--FontFamily--base: var(--mit-font-sans);
    --pf-v5-global--FontFamily--sans-serif: var(--mit-font-sans);
    --pf-v5-global--FontFamily--heading--sans-serif: var(--mit-font-sans);
    --pf-v5-global--FontFamily--redhat-updated--sans-serif: var(--mit-font-sans);
    --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: var(--mit-font-sans);
    --pf-v5-global--FontFamily--redhatVF--sans-serif: var(--mit-font-sans);
    --pf-v5-global--FontFamily--redhatVF--heading--sans-serif: var(--mit-font-sans);
    --pf-v5-global--FontFamily--monospace: var(--mit-font-mono);
    --pf-v5-global--FontFamily--redhat-updated--monospace: var(--mit-font-mono);
    --pf-v5-global--FontFamily--redhatVF--monospace: var(--mit-font-mono);
}

@keyframes mitRise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body .pf-v5-c-page * {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

body {
    background: var(--mit-surface-sunken);
    color: var(--mit-text-body);
    font-family: var(--mit-font-sans);
    -webkit-font-smoothing: antialiased;
}

body .pf-v5-c-page,
body .pf-v5-c-page * {
    font-family: var(--mit-font-sans);
}

body ::selection {
    background: var(--mit-orange-100);
    color: var(--mit-gray-900);
}

/* ============================================================
   Grundgeruest: Kopfzeile, horizontale Tab-Leiste, Inhalt.
   Die PatternFly-Page ist per Default ein Grid mit seitlicher
   Navigation. Das Design fuehrt die Navigation stattdessen als
   Tab-Leiste unter der Kopfzeile — deshalb wird die Page zu
   einer simplen Spalte (Header / Nav / Main in DOM-Reihenfolge).
   ============================================================ */
/* PatternFly sperrt die Page auf `height: 100dvh` und laesst nur
   `.pf-v5-c-page__main` scrollen. Dieses verschachtelte Scrollen fuehlt
   sich falsch an (Scrollleiste beginnt unter der Kopfzeile) und laesst
   Safaris Ganzseiten-Screenshots auf Dokumenthoehe explodieren, waehrend
   der Inhalt abgeschnitten wird. Das Design scrollt im Dokument; die
   Kopfzeile bleibt per position:sticky oben. */
body .pf-v5-c-page {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    min-height: 100dvh;
    background: var(--mit-surface-sunken);
}

body .pf-v5-c-page__main {
    flex: 1 1 auto;
    height: auto;
    min-width: 0;
    overflow: visible;
    background: transparent;
}

body .pf-v5-c-page__main-section {
    width: 100%;
    padding-inline: var(--mit-gutter);
    background: transparent;
}

body .pf-v5-c-page__main-section.pf-m-light {
    background: transparent;
}

/* Erster Abschnitt = Seitentitel, zweiter = Inhalt. Das Design setzt den
   Titel deutlich ab und laesst unten Luft fuer die Karten.
   Wichtig: nur die direkten Abschnitte der Seite. `SigningIn` schachtelt je
   Kategorie eine weitere PageSection; ohne den Kindselektor griffen
   `:first-of-type`/`:last-of-type` auch dort und rissen zwischen den
   Kategorien ueber 100px Leerraum auf. */
body .pf-v5-c-page__main > .pf-v5-c-page__main-section:first-of-type {
    padding-block: clamp(24px, 3.2vw, 44px) 0;
}

body .pf-v5-c-page__main > .pf-v5-c-page__main-section:last-of-type {
    padding-block: clamp(22px, 2.6vw, 30px) 96px;
}

/* Geschachtelte Abschnitte tragen keine Seitenabstaende. Der Abstand zwischen
   zwei Kategorien kommt aus dem `pf-v5-u-mb-xl` der Liste darueber plus
   diesem Zuschlag. */
body .pf-v5-c-page__main-section .pf-v5-c-page__main-section {
    padding-block: 0;
}

body .pf-v5-c-page__main-section .pf-v5-c-page__main-section
    + .pf-v5-c-page__main-section {
    padding-block: 16px 0;
}

/* ---- Kopfzeile ---- */
/* PatternFly legt die Kopfzeile als Grid an und schiebt den Inhalt auf
   schmalen Viewports in eine zweite Zeile. Das Design haelt Logo und
   Identitaets-Chip immer in einer Zeile. */
body .pf-v5-c-masthead {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    padding-inline: var(--mit-gutter);
    background: var(--mit-surface-raised);
    border-bottom: 1px solid var(--mit-border-default);
    box-shadow: none;
}

body .pf-v5-c-masthead__main {
    flex: 0 0 auto;
    padding-block: 13px;
    margin-inline-end: 0;
}

/* PatternFly trennt Logo und Inhalt auf schmalen Viewports mit einer eigenen
   Linie (::before). Die Kopfzeile des Designs hat nur eine untere Kante. */
body .pf-v5-c-masthead__main::before {
    display: none;
}

body .pf-v5-c-masthead__brand {
    display: inline-flex;
    align-items: center;
}

body .pf-v5-c-masthead__brand img,
body .pf-v5-c-brand {
    height: 26px;
    width: auto;
    max-height: 26px;
}

/* Die Navigation liegt jetzt als Tab-Leiste unter der Kopfzeile, der
   PatternFly-Sidebar-Umschalter waere dadurch funktionslos. */
body .pf-v5-c-masthead__toggle {
    display: none;
}

body .pf-v5-c-masthead__content {
    display: flex;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 13px;
    margin-inline-start: 0;
}

body .pf-v5-c-masthead .pf-v5-c-toolbar,
body .pf-v5-c-masthead .pf-v5-c-toolbar__content,
body .pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
    padding: 0;
    background: transparent;
}

/* Identitaets-Chip: oranges Avatar-Quadrat plus Benutzername. Im Realm
   MaassIT ist der Benutzername die E-Mail-Adresse (registrationEmailAsUsername),
   das Design zeigt an dieser Stelle also bereits den richtigen Wert. */
body .pf-v5-c-masthead .pf-v5-c-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(280px, 46vw);
    padding: 4px 8px 4px 4px;
    border: 0;
    border-radius: var(--mit-radius-md);
    background: transparent;
    color: var(--mit-text-strong);
    font-size: .875rem;
    font-weight: 700;
    transition: background 200ms var(--mit-ease-out);
}

body .pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
body .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-expanded {
    background: var(--mit-surface-sunken);
}

/* PatternFly nutzt ::before als absolut positionierten Rahmen. Hier wird das
   Pseudo-Element stattdessen zum Avatar-Quadrat im Textfluss. */
/* Das Design zeigt hier die Initialen. Den Wert setzt das Skript als
   `--mit-initials`; ohne Skript bleibt das Quadrat leer, aber sichtbar. */
body .pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
    content: var(--mit-initials, "");
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--mit-radius-md);
    background: var(--mit-orange);
    color: #fff;
    font-family: var(--mit-font-sans);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    border-inline-start: 0;
}

body .pf-v5-c-masthead .pf-v5-c-menu-toggle::after {
    border: 0;
}

/* Der Name ist eine Identitaet, kein Datenwert: er steht in der Marken-
   Schrift und im gleichen Ton wie die Tab-Leiste. In Mono und Grau sah der
   Chip neben dem kraeftigen Avatar wie ein deaktiviertes Feld aus. */
body .pf-v5-c-masthead .pf-v5-c-menu-toggle__text {
    overflow: hidden;
    font-family: var(--mit-font-sans);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mit-text-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .pf-v5-c-masthead .pf-v5-c-menu-toggle__controls {
    color: var(--mit-text-subtle);
}

/* ---- Tab-Leiste (ehemals Seitennavigation) ---- */
body .pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--Width: 100%;
    --pf-v5-c-page__sidebar--BackgroundColor: var(--mit-surface-raised);
    position: static !important;
    display: block !important;
    visibility: visible !important;
    flex: 0 0 auto;
    inset: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    background: var(--mit-surface-raised);
    border-bottom: 1px solid var(--mit-border-default);
    box-shadow: none;
    transform: none !important;
    transition: none;
    overflow: visible;
}

body .pf-v5-c-page__sidebar-body {
    padding: 0 var(--mit-gutter);
}

/* PatternFlys Navigation ist im Original eine dunkle Seitenleiste. Ihre
   Hover-/Aktiv-Flaechen kommen aus Variablen (dark-200/dark-400), die
   spezifischere Selektoren einsetzen als Farbregeln hier erreichen — beim
   Ueberfahren des aktiven Tabs blitzte deshalb ein dunkelgrauer Block auf.
   Die Variablen werden darum an der Quelle neutralisiert. */
body .pf-v5-c-nav {
    --pf-v5-c-nav__link--BackgroundColor: transparent;
    --pf-v5-c-nav__link--hover--BackgroundColor: transparent;
    --pf-v5-c-nav__link--focus--BackgroundColor: transparent;
    --pf-v5-c-nav__link--active--BackgroundColor: transparent;
    --pf-v5-c-nav__link--m-current--BackgroundColor: transparent;
    --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: transparent;
    --pf-v5-c-nav__link--before--BorderColor: transparent;
    --pf-v5-c-nav__item--before--BorderColor: transparent;
}

body .pf-v5-c-nav,
body .pf-v5-c-nav__list {
    background: transparent;
}

body .pf-v5-c-nav__list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(14px, 2.2vw, 28px);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

body .pf-v5-c-nav__list::-webkit-scrollbar {
    display: none;
}

body .pf-v5-c-nav__item {
    flex: 0 0 auto;
}

body .pf-v5-c-nav__link,
body .pf-v5-c-nav__link:hover,
body .pf-v5-c-nav__link:focus,
body .pf-v5-c-nav__link.pf-m-current,
body .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    position: relative;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: var(--mit-text-body);
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 200ms var(--mit-ease-out);
}

/* PatternFly zeichnet die aktive Markierung als Balken am linken Rand
   (::before) bzw. als Rahmen ueber ::after. Das Design nutzt stattdessen eine
   orange Unterstreichung auf der Trennlinie der Tab-Leiste. */
body .pf-v5-c-nav__link::before {
    display: none;
}

body .pf-v5-c-nav__link::after,
body .pf-v5-c-nav__link.pf-m-current::after {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    transition: background 160ms var(--mit-ease-out);
}

body .pf-v5-c-nav__link:hover,
body .pf-v5-c-nav__link.pf-m-current,
body .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    color: var(--mit-text-strong);
}

/* Ein inaktiver Tab zeigte beim Ueberfahren gar keine Reaktion. Er
   bekommt jetzt dieselbe Unterstreichung wie der aktive, nur blass —
   die Bewegung verraet, dass er anklickbar ist, ohne den aktiven Tab zu
   imitieren. */
body .pf-v5-c-nav__link:hover::after {
    background: var(--mit-orange-200);
}

body .pf-v5-c-nav__link.pf-m-current:hover::after,
body .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link:hover::after {
    background: var(--mit-orange);
}

body .pf-v5-c-nav__link.pf-m-current::after,
body .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::after {
    background: var(--mit-orange);
}

body .pf-v5-c-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--mit-shadow-focus);
    border-radius: var(--mit-radius-sm);
}

/* ============================================================
   Typografie: Seitentitel mit `>_`-Motiv, Abschnittsueberschriften.
   ============================================================ */
/* Die Groessen-Modifier von PatternFly setzen Gewicht und Groesse selbst und
   sind zweifach klassifiziert — die Marken-Regeln muessen deshalb ebenfalls
   auf Modifier-Ebene greifen. */
body .pf-v5-c-title,
body .pf-v5-c-title.pf-m-md,
body .pf-v5-c-title.pf-m-lg,
body .pf-v5-c-title.pf-m-xl,
body .pf-v5-c-title.pf-m-2xl,
body .pf-v5-c-title.pf-m-3xl,
body .pf-v5-c-title.pf-m-4xl,
body .pf-v5-c-page h1,
body .pf-v5-c-page h2,
body .pf-v5-c-page h3 {
    color: var(--mit-text-strong);
    font-weight: 700;
    letter-spacing: -.015em;
}

body .pf-v5-c-title[data-testid="page-heading"],
body h1[data-testid="page-heading"] {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.2;
}

/* ---- Eyebrow `>_LABEL` ----
   Im Design steht ueber jeder Ueberschrift eine Mono-Zeile mit orangem
   `>_`. Ueber dem Seitentitel setzt sie das Skript (der Text kommt aus der
   aktiven Navigation); ueber den Abschnitten uebernimmt die
   Kategorie-Ueberschrift selbst diese Rolle, siehe weiter unten. */
body .mit-eyebrow {
    margin: 0 0 12px;
    color: var(--mit-text-muted);
    font-family: var(--mit-font-mono);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

body .mit-eyebrow-caret {
    color: var(--mit-orange);
}

body .pf-v5-c-page__main-section .pf-v5-c-content p,
body .pf-v5-c-page__main-section > .pf-v5-c-content > p {
    max-width: 58ch;
    color: var(--mit-text-muted);
    font-size: 1.125rem;
    line-height: 1.5;
    text-wrap: pretty;
}

/* ---- Abschnittshierarchie nach Vorgabe ----
   Das Design kennt je Abschnitt drei Ebenen: Eyebrow, Ueberschrift,
   Beschreibung. Keycloak liefert dafuer die Kategorie (h2, z. B.
   "Zwei-Faktor-Authentifizierung"), den Namen der Anmeldemethode (h3, z. B.
   "Authenticator-Anwendung") und deren Hilfetext. Die Kategorie uebernimmt
   deshalb die Rolle der Eyebrow-Zeile — inklusive orangem `>_`. */
body .pf-v5-c-title.pf-m-xl[id$="-categ-title"] {
    display: block;
    margin: 0;
    color: var(--mit-text-muted);
    font-family: var(--mit-font-mono);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

body .pf-v5-c-title.pf-m-xl[id$="-categ-title"]::before {
    content: ">_";
    color: var(--mit-orange);
}

/* Der Name der Anmeldemethode ist die eigentliche Abschnittsueberschrift. */
body .cred-title {
    display: block;
    color: var(--mit-text-strong);
    font-size: clamp(19px, 1.9vw, 24px);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
}

/* Ueberschrift und Statusbadge stehen im Design nebeneinander. */
body .pf-v5-c-title.pf-m-md {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 0;
}

/* Der Hilfetext liegt bei Keycloak innerhalb der fetten Abschnitts-
   ueberschrift und muss deshalb aktiv zurueckgenommen werden. */
body [data-testid$="/help-text"] {
    display: block;
    max-width: 56ch;
    margin-top: 7px;
    color: var(--mit-text-muted);
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-wrap: pretty;
}

/* ============================================================
   Zeilen-Karten: DataList-Eintraege werden zu eigenstaendigen
   Karten, wie im Design (weisse Flaeche, 1px Rahmen, 16px Radius).
   ============================================================ */
body .pf-v5-c-data-list {
    --pf-v5-c-data-list--BorderTopWidth: 0;
    --pf-v5-c-data-list--BorderBottomWidth: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 0;
    background: transparent;
}

body .pf-v5-c-data-list__item {
    --pf-v5-c-data-list__item--BorderBottomWidth: 0;
    --pf-v5-c-data-list__item--BorderBottomColor: transparent;
    padding: 0;
    border: 1px solid var(--mit-border-default);
    border-radius: var(--mit-radius-lg);
    background: var(--mit-surface-raised);
    box-shadow: var(--mit-shadow-xs);
}

body .pf-v5-c-data-list__item::after {
    display: none;
}

/* ---- Zeilen-Karte nach Vorgabe ----
   Icon-Kachel · Titel mit Badge · Mono-Metazeile · Aktion rechts. */
body .pf-v5-c-data-list__item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
}

/* Die 44px-Kachel des Designs. Welches Symbol sie traegt, entscheidet der
   `data-testid` der Liste — Keycloak stellt pro Anmeldemethode keinen
   eigenen Knoten bereit, auf den man das haengen koennte. Die Strichfarbe
   steckt im SVG, weil eine Maske sonst auch die Kachelflaeche wegschneiden
   wuerde.
   Nur fuer die Anmeldemethoden-Listen: Geraete- und Anwendungszeilen
   bringen eigene Symbole mit bzw. brauchen keine leere Kachel. */
body .pf-v5-c-data-list[data-testid$="/credential-list"] .pf-v5-c-data-list__item-row::before {
    content: "";
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--mit-radius-md);
    background-color: var(--mit-cred-tile, var(--mit-gray-100));
    background-image: var(--mit-cred-icon, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 21px 21px;
}

/* Symbole je Anmeldemethode — Strichzeichnungen wie im Design. */
body .pf-v5-c-data-list[data-testid^="password/"] .pf-v5-c-data-list__item-row {
    --mit-cred-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22/%3E%3C/svg%3E");
}

body .pf-v5-c-data-list[data-testid^="otp/"] .pf-v5-c-data-list__item-row {
    --mit-cred-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E");
}

body .pf-v5-c-data-list[data-testid^="webauthn/"] .pf-v5-c-data-list__item-row,
body .pf-v5-c-data-list[data-testid^="webauthn-passwordless/"] .pf-v5-c-data-list__item-row {
    --mit-cred-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z%22/%3E%3Ccircle cx=%2216.5%22 cy=%227.5%22 r=%22.6%22 fill=%22%23000%22/%3E%3C/svg%3E");
}

/* Passkeys sind der empfohlene Weg — ihre Kachel traegt das Markenorange,
   deshalb dieselbe Zeichnung noch einmal mit oranger Strichfarbe. */
body .pf-v5-c-data-list[data-testid^="webauthn-passwordless/"] .pf-v5-c-data-list__item-row {
    --mit-cred-tile: var(--mit-orange-50);
    --mit-cred-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23ff7c00%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z%22/%3E%3Ccircle cx=%2216.5%22 cy=%227.5%22 r=%22.6%22 fill=%22%23ff7c00%22/%3E%3C/svg%3E");
}

/* Wiederherstellungscodes */
body .pf-v5-c-data-list[data-testid^="recovery-authn-codes/"] .pf-v5-c-data-list__item-row {
    --mit-cred-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4h16v16H4z%22/%3E%3Cpath d=%22M8 8h2v2H8z%22/%3E%3Cpath d=%22M14 8h2v2h-2z%22/%3E%3Cpath d=%22M8 14h2v2H8z%22/%3E%3Cpath d=%22M14 14h2v2h-2z%22/%3E%3C/svg%3E");
}

/* Im Design steht der Zeilentitel ueber der Metazeile, nicht daneben.
   PatternFly legt die Zellen per Default nebeneinander. */
/* Im Design steht der Zeilentitel ueber der Metazeile und die Aktion rechts
   daneben. Keycloak legt die Aktion als letztes Element in denselben
   Container — deshalb ein Raster: Inhalt in Spalte 1, Aktion in Spalte 2
   ueber alle Zeilen. */
/* Die Spezifitaet muss `.pf-v5-c-data-list:not([class*=pf-m-grid])
   .pf-v5-c-data-list__item-content` uebertreffen — PatternFly setzt dort
   `display: flex` und wuerde das Raster sonst aushebeln. */
body .pf-v5-c-data-list .pf-v5-c-data-list__item-row > .pf-v5-c-data-list__item-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 14px;
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 0;
}

/* PatternFly gibt schmalen Viewports `.pf-v5-c-data-list__cell + .cell
   { order: 1 }` mit — die Aktion behaelt `order: 0` und rutschte dadurch
   zwischen Titel und Erstellungsdatum ("Loeschen" vor "Erstellt"). Hier gilt
   wieder die Dokumentreihenfolge. */
body .pf-v5-c-data-list__item-content > .pf-v5-c-data-list__cell,
body .pf-v5-c-data-list__item-content > .pf-v5-c-data-list__item-action {
    order: 0;
}

body .pf-v5-c-data-list__cell,
body .pf-v5-c-data-list__cell:not(:first-child) {
    grid-column: 1;
    width: auto;
    min-width: 0;
    padding-block: 0;
    color: var(--mit-text-body);
    font-size: 1rem;
}

body .pf-v5-c-data-list__cell:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mit-text-strong);
}

/* Die Aktion steht rechts neben dem gesamten Zeileninhalt. */
body .pf-v5-c-data-list__item-content > .pf-v5-c-data-list__item-action {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    padding-block: 0;
    margin: 0;
}

/* Sekundaerzeilen (Datum, IP, Client) im Mono-Stil des Designs. */
body .pf-v5-c-data-list__item-content > .pf-v5-c-data-list__cell:not(:first-child),
body .pf-v5-c-data-list__cell .pf-v5-c-content small,
body .pf-v5-c-data-list__cell time,
body .pf-v5-c-description-list__description,
body .pf-v5-c-description-list__text {
    font-family: var(--mit-font-mono);
    font-size: .75rem;
    letter-spacing: .02em;
    line-height: 1.5;
    color: var(--mit-text-muted);
}

body .pf-v5-c-description-list__term,
body .pf-v5-c-description-list__term .pf-v5-c-description-list__text {
    font-family: var(--mit-font-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--mit-text-subtle);
    text-transform: none;
    /* PatternFly setzt `overflow-wrap: break-word`. Zusammen mit der engen
       Begriffsspalte zerriss das lange deutsche Woerter mitten im Wort
       ("Authentifizierungsan|bieter"). */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Die Begriffsspalte ist bei PatternFly auf 12ch fest — zu schmal fuer
   deutsche Labels. Sie waechst jetzt bis 24ch mit dem laengsten Begriff. */
body .pf-v5-c-description-list[class*="pf-m-horizontal"] {
    --pf-v5-c-description-list--m-horizontal__term--width: fit-content(24ch);
    --pf-v5-c-description-list__term--width: fit-content(24ch);
    --pf-v5-c-description-list--RowGap: 4px;
    --pf-v5-c-description-list--ColumnGap: 16px;
}

body .pf-v5-c-data-list__action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 15px;
}

body .pf-v5-c-data-list__item-content .pf-v5-c-data-list__action {
    padding-block: 0;
}

/* Der Info-Block einer Anmeldemethode traegt PatternFlys `mb-lg`. Direkt
   darunter folgt die Aktion — zusammen ergab das ueber 50px Leerraum. */
body .pf-v5-c-data-list__cell[data-testrole="warning-message"] .pf-v5-l-split {
    margin-bottom: 0 !important;
}

body .pf-v5-c-data-list__cell[data-testrole="warning-message"] svg.pf-v5-svg {
    width: 13px;
    height: 13px;
    color: var(--mit-text-subtle);
}

/* ---- Abschnittskopf mit Aktion (Split) ---- */
/* Ohne `flex-start` zieht PatternFly die Aktion auf die Hoehe des gesamten
   Kopfblocks; sie stand dadurch neben dem Hilfetext statt neben der
   Ueberschrift. */
body .pf-v5-l-split {
    align-items: flex-start;
}

/* Keycloak positioniert die Aktion mit `float: right`. Ein Float in einem
   Flex-Element richtet sich nicht zuverlaessig aus — hier uebernimmt das
   Flexbox selbst. */
body .pf-v5-l-split__item > .pf-v5-u-float-right {
    display: flex;
    justify-content: flex-end;
    float: none !important;
}

/* ---- Leerzustand einer Liste ("… ist nicht eingerichtet.") ---- */
/* Keycloaks EmptyRow traegt `pf-v5-u-align-items-center`. Da die Zeile eine
   Flex-Spalte ist, zentrierte das die ganze Karte auf Inhaltsbreite statt
   sie wie alle anderen Karten aufzuziehen. */
body .pf-v5-c-data-list__item.pf-v5-u-align-items-center {
    align-items: stretch !important;
}

/* Ein Leerzustand ist keine Ueberschrift: er bleibt ruhig und leicht. */
body .pf-v5-c-data-list__cell[data-testid$="/not-set-up"] {
    color: var(--mit-text-muted);
    font-weight: 400;
}

body .pf-v5-c-data-list__item-row svg.pf-v5-svg {
    color: var(--mit-text-body);
}

/* ============================================================
   Geraete und Browser-Sitzungen (DeviceActivity).
   Keycloak baut diese Seite anders als die Anmeldemethoden: EINE
   DataListItem enthaelt alle Sitzungen als Rows, jede Row ein
   `expandable-content` mit einem 12-Spalten-Grid (Icon span1,
   Titel span10, Aktion span1, DescriptionList span11). Das Design
   will eine Karte PRO Sitzung mit Icon-Kachel, Titelzeile samt
   Badge, kompakter Metazeile und der Aktion rechts.
   ============================================================ */
body .signed-in-device-list > .pf-v5-c-data-list__item {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Jede Sitzung wird zur eigenstaendigen Karte. */
body .signed-in-device-list .pf-v5-c-data-list__item-row {
    border: 1px solid var(--mit-border-default);
    border-radius: var(--mit-radius-lg);
    background: var(--mit-surface-raised);
    box-shadow: var(--mit-shadow-xs);
}

body .signed-in-device-list .pf-v5-c-data-list__item-row + .pf-v5-c-data-list__item-row {
    margin-top: 10px;
}

/* PatternFly kleidet DataListContent als Aufklapp-Bereich mit eigenem
   Rahmen und Polster — hier ist es schlicht der Karteninhalt. */
body .signed-in-device-list .pf-v5-c-data-list__expandable-content {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    box-shadow: none;
}

body .signed-in-device-list .pf-v5-c-data-list__expandable-content-body {
    padding: 0;
    border: 0;
}

/* Das 12-Spalten-Grid wird zum Kartenraster des Designs:
   Kachel | Inhalt | Aktion. Die Spannen-Klassen der GridItems muessen
   dafuer hart ueberschrieben werden. */
body .signed-in-device-list .pf-v5-l-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 14px;
}

body .signed-in-device-list .pf-v5-l-grid > .pf-v5-l-grid__item {
    grid-column: 2 !important;
    grid-row: auto !important;
    min-width: 0;
}

/* 1. GridItem: Geraetesymbol in der 44px-Kachel. */
body .signed-in-device-list .pf-v5-l-grid > .pf-v5-l-grid__item:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mit-radius-md);
    background: var(--mit-gray-100);
    color: var(--mit-text-body);
}

body .signed-in-device-list .pf-v5-l-grid > .pf-v5-l-grid__item:nth-child(1) svg {
    width: 20px;
    height: 20px;
}

/* 3. GridItem: die Abmelden-Aktion rechts ueber beide Zeilen. */
body .signed-in-device-list .pf-v5-l-grid > .pf-v5-l-grid__item:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    align-self: center;
}

body .signed-in-device-list .session-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mit-text-strong);
}

/* Die Metadaten (IP, letzter Zugriff, Clients, …) fliessen als kompakte
   Mono-Zeile statt als PatternFly-Spaltenraster. */
body .signed-in-device-list .pf-v5-c-description-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 18px;
    row-gap: 3px;
}

body .signed-in-device-list .pf-v5-c-description-list__group {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* ============================================================
   Anwendungen (Applications).
   Keycloak baut die Liste wie eine Tabelle: die erste DataListItem ist
   eine reine Spaltenueberschrift (Name / Anwendungstyp / Status). In der
   Kartendarstellung des Designs ergibt das eine leere Geisterkarte — sie
   entfaellt, die Werte tragen ihre Bedeutung selbst.
   ============================================================ */
body #applications-list-header {
    display: none;
}

/* Name in Zeile 1, Typ und Status nebeneinander in der Metazeile darunter.
   Bewusst Flex statt Raster: im Raster landeten Typ und Status in
   derselben Zelle und lagen uebereinander. */
body #applications-list .pf-v5-c-data-list__item-row > .pf-v5-c-data-list__item-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    column-gap: 0;
}

body #applications-list .pf-v5-c-data-list__cell:first-child {
    flex: 1 0 100%;
    align-items: center;
    gap: 8px;
}

body #applications-list .pf-v5-c-data-list__cell:not(:first-child) {
    flex: 0 0 auto;
    width: auto;
}

/* Der Status haengt hinter dem Typ, getrennt durch einen Mittelpunkt. */
body #applications-list .pf-v5-c-data-list__cell:nth-child(3)::before {
    content: "·";
    margin: 0 8px;
    color: var(--mit-text-subtle);
}

/* Kachel mit dem Anfangsbuchstaben wie im Design; den Buchstaben setzt
   das Skript als data-Attribut, CSS kann ihn nicht aus dem Namen lesen. */
body #applications-list .pf-v5-c-data-list__item-row[data-mit-initial]::before {
    content: attr(data-mit-initial);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--mit-radius-md);
    background: var(--mit-gray-100);
    color: var(--mit-text-body);
    font-family: var(--mit-font-mono);
    font-size: .875rem;
    font-weight: 700;
}

/* Aufklapp-Pfeil ans Zeilenende, wie jede andere Aktion auch — zwischen
   Kachel und Namen stand er im Weg. */
body #applications-list .pf-v5-c-data-list__toggle {
    order: 3;
    align-self: center;
    margin-left: auto;
    padding: 0;
}

body #applications-list .pf-v5-c-data-list__item-row > .pf-v5-c-data-list__item-content {
    order: 2;
}

body #applications-list .pf-v5-c-data-list__toggle .pf-v5-c-button {
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    border-radius: var(--mit-radius-md);
}

/* ============================================================
   Verknuepfte Konten (LinkedAccounts).
   Die Seite bringt als einzige eine PatternFly-Toolbar mit Suchfeld und
   Blaetterung mit — beides in PatternFly-Rechteckform, was neben den
   runden Karten als Stilbruch auffiel.
   ============================================================ */
body .pf-v5-c-toolbar,
body .pf-v5-c-toolbar__content {
    padding-inline: 0;
    background: transparent;
}

body .pf-v5-c-page__main .pf-v5-c-text-input-group,
body .pf-v5-c-page__main .pf-v5-c-text-input-group__main {
    border-radius: var(--mit-radius-md);
    background: var(--mit-surface-raised);
}

body .pf-v5-c-page__main .pf-v5-c-text-input-group {
    border: 1.5px solid var(--mit-border-default);
    overflow: hidden;
}

body .pf-v5-c-page__main .pf-v5-c-text-input-group:focus-within {
    border-color: var(--mit-orange);
    box-shadow: var(--mit-shadow-focus);
}

/* PatternFly zeichnet die Feldkante als ::after — sonst laege sie als
   zweite, eckige Linie ueber dem runden Rahmen. */
body .pf-v5-c-page__main .pf-v5-c-text-input-group__text::after,
body .pf-v5-c-page__main .pf-v5-c-form-control::after {
    border: 0 !important;
}

body .pf-v5-c-page__main .pf-v5-c-text-input-group__text-input {
    background: transparent;
    font-size: .875rem;
}

body .pf-v5-c-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

body .pf-v5-c-pagination .pf-v5-c-menu-toggle,
body .pf-v5-c-pagination .pf-v5-c-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    max-width: none;
    padding: 4px 8px;
    border-radius: var(--mit-radius-md);
    font-size: .875rem;
    white-space: nowrap;
}

/* Das Avatar-Quadrat gilt nur fuer den Identitaets-Chip in der Kopfzeile;
   in der Blaetterung waere es ein oranger Klotz. */
body .pf-v5-c-pagination .pf-v5-c-menu-toggle::before {
    display: none;
}

body .pf-v5-c-pagination__total-items {
    font-family: var(--mit-font-mono);
    font-size: .75rem;
    color: var(--mit-text-muted);
}

/* Name und Etikett in einer Zeile, der verknuepfte Benutzername darunter —
   im Raster stapelten die drei Zellen zu einer sehr hohen Karte. */
body [id$="-idp"] .pf-v5-c-data-list__item-row > .pf-v5-c-data-list__item-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 5px;
    column-gap: 10px;
}

body [id$="-idp"] .pf-v5-c-data-list__cell {
    flex: 0 0 auto;
    width: auto;
}

/* Der verknuepfte Benutzername ist die dritte Zelle und bekommt eine
   eigene Zeile, eingerueckt auf die Textkante neben der Kachel.
   Bewusst `nth-child`: `last-of-type` traefe das Aktions-div, weil beide
   div sind. */
body [id$="-idp"] .pf-v5-c-data-list__cell:nth-child(3) {
    flex: 1 0 100%;
    padding-left: 54px;
}

body [id$="-idp"] .pf-v5-c-data-list__item-action {
    margin-left: auto;
}

body [id$="-idp"] .pf-v5-l-split {
    align-items: center;
    gap: 0;
}

/* Provider-Symbol bekommt dieselbe 44px-Kachel wie die Anmeldemethoden. */
body [id$="-idp"] .pf-v5-c-data-list__cell:first-child .pf-v5-l-split__item:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--mit-radius-md);
    background: var(--mit-gray-50);
    border: 1px solid var(--mit-border-subtle);
}

body [id$="-idp"] .pf-v5-c-data-list__cell:first-child .pf-v5-l-split__item:first-child svg,
body [id$="-idp"] .pf-v5-c-data-list__cell:first-child .pf-v5-l-split__item:first-child img {
    width: 20px;
    height: 20px;
}

body [id$="-idp-name"] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mit-text-strong);
}

body [id$="-idp-username"] {
    font-family: var(--mit-font-mono);
    font-size: .75rem;
    letter-spacing: .02em;
    color: var(--mit-text-muted);
}

/* ---- Statusetiketten (PatternFly Label) ---- */
body .pf-v5-c-page .pf-v5-c-label {
    --pf-v5-c-label--BorderRadius: var(--mit-radius-pill);
    border-radius: var(--mit-radius-pill);
    padding: 2px 9px;
    font-family: var(--mit-font-sans);
}

body .pf-v5-c-page .pf-v5-c-label .pf-v5-c-label__content {
    font-size: .6875rem;
    font-weight: 700;
    color: inherit;
}

body .pf-v5-c-page .pf-v5-c-label.pf-m-green {
    border: 1px solid var(--mit-success-border);
    background: var(--mit-success-bg);
    color: var(--mit-success-fg);
}

/* "Diese Sitzung" traegt im Design den Markenton, nicht Gruen. */
body .signed-in-device-list .pf-v5-c-label.pf-m-green {
    border: 1px solid var(--mit-orange-100);
    background: var(--mit-orange-50);
    color: var(--mit-orange-700);
}

body .signed-in-device-list .pf-v5-c-label.pf-m-green .pf-v5-c-label__content::before {
    content: "";
    position: static;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border: 0;
    border-radius: 50%;
    background: var(--mit-orange);
    vertical-align: 1px;
}

/* ---- Karten und Leerzustaende ---- */
body .pf-v5-c-card,
body .pf-v5-c-empty-state {
    border: 1px solid var(--mit-border-default);
    border-radius: var(--mit-radius-lg);
    background: var(--mit-surface-raised);
    box-shadow: var(--mit-shadow-xs);
}

body .pf-v5-c-empty-state__content {
    color: var(--mit-text-muted);
}

body .pf-v5-c-modal-box {
    border-radius: var(--mit-radius-lg);
    box-shadow: var(--mit-shadow-md);
}

/* ============================================================
   Buttons — 1:1 die Varianten des Design-Systems (Button.jsx).
   ============================================================ */
body .pf-v5-c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .72em 1.2em;
    border: 1.5px solid transparent;
    border-radius: var(--mit-radius-md);
    font-family: var(--mit-font-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1;
    white-space: nowrap;
    transition:
        background 200ms var(--mit-ease-out),
        border-color 200ms var(--mit-ease-out),
        color 200ms var(--mit-ease-out),
        box-shadow 200ms var(--mit-ease-out),
        transform 120ms var(--mit-ease-out);
}

/* PatternFly zeichnet Rahmen und Fokusring der Schaltflaechen als
   absolut positioniertes ::after. Dieses Theme setzt den Rahmen direkt auf
   das Element — ohne diese Regel lag darueber weiterhin PatternFlys eigener
   Rahmen, bei `pf-m-secondary` in seinem Blau. Genau das war der blaue
   Ring um "Aktualisieren". */
body .pf-v5-c-button::after {
    border: 0 !important;
}

body .pf-v5-c-button:active {
    transform: translateY(1px);
}

body .pf-v5-c-button:focus-visible {
    outline: none;
    box-shadow: var(--mit-shadow-focus);
}

body .pf-v5-c-button.pf-m-small {
    padding: .5em .9em;
    border-radius: var(--mit-radius-sm);
    font-size: .875rem;
}

body .pf-v5-c-button.pf-m-primary {
    background: var(--mit-orange);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--mit-shadow-orange);
}

body .pf-v5-c-button.pf-m-primary:hover {
    background: var(--mit-orange-600);
    color: #fff;
}

body .pf-v5-c-button.pf-m-primary:active {
    background: var(--mit-orange-700);
}

body .pf-v5-c-button.pf-m-secondary,
body .pf-v5-c-button.pf-m-tertiary {
    background: transparent;
    border-color: var(--mit-border-strong);
    color: var(--mit-text-strong);
}

body .pf-v5-c-button.pf-m-secondary:hover,
body .pf-v5-c-button.pf-m-tertiary:hover {
    background: transparent;
    border-color: var(--mit-orange);
    color: var(--mit-orange);
}

/* "… einrichten" (data-testid `<typ>/create`) ist im Design die
   Primaeraktion des Abschnitts — orange, mit Plus-Zeichen. Der Selektor
   ist bewusst eng: andere Link-Schaltflaechen (Seite aktualisieren auf
   der Geraeteseite, Rueckwege) duerfen weder orange werden noch ein
   Plus bekommen. */
body .pf-v5-c-button.pf-m-link[data-testid$="/create"] {
    min-height: 48px;
    padding: 0 1.2em;
    border-color: transparent;
    border-radius: var(--mit-radius-md);
    background: var(--mit-orange);
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: var(--mit-shadow-orange);
}

body .pf-v5-c-button.pf-m-link[data-testid$="/create"]::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--mit-icon-plus) center / contain no-repeat;
    mask: var(--mit-icon-plus) center / contain no-repeat;
}

body .pf-v5-c-button.pf-m-link[data-testid$="/create"]:hover {
    background: var(--mit-orange-600);
    color: #fff;
    text-decoration: none;
}

body .pf-v5-c-button.pf-m-link[data-testid$="/create"]:active {
    background: var(--mit-orange-700);
}

/* Uebrige Link-Schaltflaechen bleiben ruhige Ghost-Aktionen. */
body .pf-v5-c-button.pf-m-link:not(.pf-m-inline):not([data-testid$="/create"]) {
    padding: .5em .9em;
    border-color: transparent;
    border-radius: var(--mit-radius-md);
    background: transparent;
    color: var(--mit-text-strong);
    font-size: .875rem;
    text-decoration: none;
}

body .pf-v5-c-button.pf-m-link:not(.pf-m-inline):not([data-testid$="/create"]):hover {
    background: var(--mit-surface-sunken);
    color: var(--mit-text-strong);
    text-decoration: none;
}

/* ---- Badge (Badge.jsx aus dem Design-System) ---- */
body .mit-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--mit-radius-pill);
    font-family: var(--mit-font-sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

body .mit-badge-success {
    border-color: var(--mit-success-border);
    background: var(--mit-success-bg);
    color: var(--mit-success-fg);
}

body .mit-badge-success::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mit-success-fg);
}

body .mit-badge-neutral {
    border-color: var(--mit-border-strong);
    background: transparent;
    color: var(--mit-text-muted);
}

body .pf-v5-c-button.pf-m-plain {
    background: transparent;
    border-color: transparent;
    color: var(--mit-text-strong);
    text-decoration: none;
}

body .pf-v5-c-button.pf-m-plain:hover {
    background: var(--mit-surface-sunken);
    color: var(--mit-text-strong);
    text-decoration: none;
}

body .pf-v5-c-button.pf-m-plain {
    width: 44px;
    height: 44px;
    padding: 0;
}

body .pf-v5-c-button.pf-m-danger {
    background: transparent;
    border-color: var(--mit-danger-border);
    color: var(--mit-danger-fg);
}

body .pf-v5-c-button.pf-m-danger:hover {
    background: var(--mit-danger-bg);
    border-color: var(--mit-danger-solid);
    color: var(--mit-danger-fg);
}

/* Der Bestaetigungs-Button in Modalen ist im Design bewusst dunkel. */
body .pf-v5-c-modal-box__footer .pf-v5-c-button.pf-m-primary {
    background: var(--mit-dark);
    box-shadow: none;
}

body .pf-v5-c-modal-box__footer .pf-v5-c-button.pf-m-primary:hover {
    background: var(--mit-gray-800);
}

body .pf-v5-c-button.pf-m-inline {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mit-orange);
    font-size: inherit;
    box-shadow: none;
    transform: none;
}

body .pf-v5-c-button.pf-m-inline:hover {
    background: transparent;
    color: var(--mit-orange-600);
    text-decoration: underline;
}

body .pf-v5-c-page a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):not(.pf-v5-c-masthead__brand) {
    color: var(--mit-orange);
    font-weight: 700;
    text-decoration: none;
}

body .pf-v5-c-page a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):not(.pf-v5-c-masthead__brand):hover {
    color: var(--mit-orange-600);
    text-decoration: underline;
}

/* ============================================================
   Formulare — Input.jsx aus dem Design-System.
   ============================================================ */
body .pf-v5-c-form__label-text,
body .pf-v5-c-form__group-label {
    color: var(--mit-text-strong);
    font-size: .875rem;
    font-weight: 700;
}

body .pf-v5-c-form__label-required {
    color: var(--mit-orange);
}

body .pf-v5-c-form-control {
    padding: .7em .9em;
    border: 1.5px solid var(--mit-border-default);
    border-radius: var(--mit-radius-md);
    background: var(--mit-surface-raised);
    color: var(--mit-text-strong);
    font-size: 1rem;
    line-height: 1.4;
    box-shadow: none;
}

/* PatternFly umschliesst das eigentliche Eingabefeld mit einem Wrapper.
   Rahmen und Innenabstand gehoeren zum Wrapper, sonst entsteht ein
   doppelter Kasten. */
body .pf-v5-c-form-control > input,
body .pf-v5-c-form-control > select,
body .pf-v5-c-form-control > textarea {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    outline: none;
}

body .pf-v5-c-form-control::after {
    display: none;
}

body .pf-v5-c-form-control:hover {
    border-color: var(--mit-border-strong);
}

body .pf-v5-c-form-control:focus-within {
    border-color: var(--mit-orange);
    box-shadow: var(--mit-shadow-focus);
}

body .pf-v5-c-form-control.pf-m-disabled {
    background: var(--mit-surface-sunken);
    color: var(--mit-text-muted);
}

body .pf-v5-c-form-control.pf-m-error {
    border-color: var(--mit-danger-solid);
}

body .pf-v5-c-form-control.pf-m-error:focus-within {
    box-shadow: 0 0 0 3px var(--mit-danger-border);
}

body .pf-v5-c-form__helper-text {
    color: var(--mit-text-muted);
    font-size: .875rem;
}

body .pf-v5-c-form__helper-text.pf-m-error {
    color: var(--mit-danger-fg);
}

/* ============================================================
   Badges (Label) und Meldungen (Alert) — Badge.jsx / Alert.jsx.
   ============================================================ */
body .pf-v5-c-label {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .42em .72em;
    border: 1px solid transparent;
    border-radius: var(--mit-radius-pill);
    background: var(--mit-gray-100);
    color: var(--mit-text-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
}

body .pf-v5-c-label__content::before {
    border: 0;
}

/* Keycloak markiert die aktuelle Sitzung gruen; im Design ist die
   laufende Sitzung orange hervorgehoben. */
body .pf-v5-c-label.pf-m-green {
    background: var(--mit-orange-50);
    color: var(--mit-orange-700);
}

body .pf-v5-c-label.pf-m-blue,
body .pf-v5-c-label.pf-m-cyan {
    background: var(--mit-info-bg);
    color: var(--mit-info-fg);
}

body .pf-v5-c-label.pf-m-red,
body .pf-v5-c-label.pf-m-orange {
    background: var(--mit-danger-bg);
    color: var(--mit-danger-fg);
}

body .pf-v5-c-alert {
    padding: 16px 20px;
    border: 1px solid var(--mit-info-border);
    border-radius: var(--mit-radius-md);
    background: var(--mit-info-bg);
    box-shadow: none;
    font-size: 1rem;
    line-height: 1.5;
    animation: mitRise .3s var(--mit-ease-out) both;
}

body .pf-v5-c-alert__title {
    color: var(--mit-info-fg);
    font-weight: 700;
    letter-spacing: -.015em;
}

body .pf-v5-c-alert.pf-m-success {
    border-color: var(--mit-success-border);
    background: var(--mit-success-bg);
}

body .pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title,
body .pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon {
    color: var(--mit-success-fg);
}

body .pf-v5-c-alert.pf-m-warning {
    border-color: var(--mit-warning-border);
    background: var(--mit-warning-bg);
}

body .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
body .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon {
    color: var(--mit-warning-fg);
}

body .pf-v5-c-alert.pf-m-danger {
    border-color: var(--mit-danger-border);
    background: var(--mit-danger-bg);
}

body .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
body .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon {
    color: var(--mit-danger-fg);
}

body .pf-v5-c-alert.pf-m-info .pf-v5-c-alert__icon {
    color: var(--mit-info-fg);
}

/* ---- Menues und Dropdowns ---- */
body .pf-v5-c-menu,
body .pf-v5-c-dropdown__menu {
    border: 1px solid var(--mit-border-default);
    border-radius: var(--mit-radius-md);
    box-shadow: var(--mit-shadow-md);
}

body .pf-v5-c-menu__item {
    font-weight: 700;
    color: var(--mit-text-body);
}

body .pf-v5-c-menu__item:hover {
    background: var(--mit-surface-sunken);
    color: var(--mit-text-strong);
}

body .pf-v5-c-spinner {
    --pf-v5-c-spinner--Color: var(--mit-orange);
}

/* ============================================================
   Kleine Viewports: Tabs bleiben horizontal scrollbar, die
   Zeilen-Karten brechen um.
   ============================================================ */
@media (max-width: 600px) {
    body .pf-v5-c-masthead .pf-v5-c-menu-toggle__text {
        display: none;
    }

    /* Umbrechende Zeilen-Karten: die Aktionen ruecken unter den Inhalt,
       ohne dass PatternFlys Innenabstaende doppelt Luft erzeugen. */
    body .pf-v5-c-data-list__item-row {
        flex-wrap: wrap;
    }

    body .pf-v5-c-data-list__item-content {
        padding-block: 15px 0;
    }

    body .pf-v5-c-data-list__item-action {
        padding-block: 0;
    }

    body .pf-v5-c-data-list__action {
        padding-block: 12px 15px;
    }

    body .pf-v5-c-page__main-section:last-of-type {
        padding-bottom: 64px;
    }

    /* Der Info-Block in einer Karte darf umbrechen. Der Abschnittskopf nicht:
       dort steht auf schmalen Viewports nur noch das Kebab-Menue, und ein
       Umbruch haette es mit viel Leerraum unter den Hilfetext geschoben. */
    body .pf-v5-c-data-list__cell .pf-v5-l-split {
        flex-wrap: wrap;
        row-gap: 14px;
    }

    body .pf-v5-l-split__item > .pf-v5-u-float-right {
        margin-top: -4px;
    }
}