/* Familie Klein -- Kontoverwaltung.
 *
 * NUR CSS. Das Elternthema keycloak.v3 ist die gebaute React-Konsole; eigene
 * Vorlagen gibt es hier nicht, und sie waeren auch nicht gewuenscht.
 *
 * ---------------------------------------------------------------------------
 * WARUM DIESE DATEI AM 06.10.2026 NEU GESCHRIEBEN WURDE
 *
 * Der erste Anlauf setzte alles in :root. Das deckt viel ab - PatternFlys
 * eigene Dunkelmodus-Tokens stehen unter :where(.pf-v5-theme-dark) und haben
 * Spezifitaet null, gegen :root verlieren sie also. Aber 26 KOMPONENTEN
 * deklarieren ihre Marken INNERHALB der eigenen Regel, etwa
 *
 *   .pf-v5-c-button{ --pf-v5-c-button--m-primary--BackgroundColor: ... }
 *
 * und eine Deklaration am Element gewinnt gegen Vererbung. Gemessen kam dabei
 * heraus: helle Seite, fast schwarze Inhaltsflaechen, Ueberschrift in
 * Dunkelteal darauf, und der Speichern-Knopf in PatternFly-Blau.
 *
 * Deshalb zweierlei: der Dunkelmodus ist in theme.properties abgeschaltet
 * (darkMode=false, Begruendung steht dort), UND jede Komponentenmarke steht
 * auf dem Selektor der Komponente. Das zweite allein genuegte schon, das erste
 * nimmt den ganzen zweiten Codeweg heraus - zwei Darstellungen, von denen nur
 * eine je angesehen wird, sind eine Fehlerquelle ohne Gegenwert.
 *
 * Die Anmeldeseiten hatten dieses Problem nie, weil sie seit #278 ohnehin alles
 * am Element setzen; nachgemessen, hell gegen dunkel, kein Unterschied.
 */

/* ---------------------------------------------------------------- Flaeche */
body {
  background: #1F242B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23E8EDF2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M22 50 L45 30 L68 50M30 46 V72 H60 V46M40 72 V58 H50 V72'/%3E%3C/g%3E%3Cg transform='translate(90 90)'%3E%3Cpath d='M45 20 L30 42 L60 42 ZM45 34 L26 58 L64 58 ZM45 58 V72'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(900px 520px at 50% -8%, #2C3742 0%, transparent 72%);
  background-repeat: repeat, no-repeat;
  background-size: 320px 320px, auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: #E8EDF2;
}

:root {
  /* Die globalen Tokens tragen alles, was keine eigene Komponentenregel hat -
   * und das ist die Mehrheit. Sie bleiben deshalb, sie waren nie das Problem. */
  --pf-v5-global--BackgroundColor--100: #28303A;
  --pf-v5-global--BackgroundColor--200: #222A33;
  --pf-v5-global--BackgroundColor--light-100: #28303A;
  --pf-v5-global--BackgroundColor--light-300: #222A33;
  --pf-v5-global--Color--100: #E8EDF2;
  --pf-v5-global--Color--200: #A6B2BF;
  --pf-v5-global--BorderColor--100: #3A4552;
  --pf-v5-global--BorderColor--200: #3A4552;
  --pf-v5-global--BorderColor--300: #3A4552;
  --pf-v5-global--primary-color--100: #8FB8A8;
  --pf-v5-global--primary-color--200: #A6C8BA;
  --pf-v5-global--active-color--100: #D9A066;
  /* --400 ist der Standardwert hinter den Markierungsstrichen der Navigation.
   * Ohne diese Zeile blieb der Strich am aktiven Punkt PatternFly-Hellblau,
   * rgb(115, 188, 247) - gemessen, nicht geschaetzt. */
  --pf-v5-global--active-color--400: #D9A066;
  --pf-v5-global--link--Color: #D9A066;
  --pf-v5-global--link--Color--hover: #E8BC8A;
  --pf-v5-global--FontFamily--text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --pf-v5-global--FontFamily--heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------------------------------------------- Wo :root NICHT durchkommt */
/* ELF SELEKTOREN SETZEN DIESELBEN GLOBALEN TOKENS AUF SICH SELBST NEU - das
 * sind PatternFlys eigene Theme-Ruecksetzer fuer Bauteile, die immer hell
 * gedacht sind. Eine Deklaration in :root wird nur VERERBT, und innerhalb
 * dieser Bauteile gewinnt die eigene. Deshalb standen die Texte der Listen auf
 * der Seite "Anmeldung" in rgb(21, 21, 21) mitten auf der dunklen Karte, und
 * die Nebenzeilen in rgb(106, 110, 115).
 *
 * Die Liste ist nicht geraten: sie stammt aus einer Suche nach allen Stellen,
 * die --pf-v5-global--Color--100 und seine Nachbarn auf einem
 * Komponentenselektor deklarieren - im Haupt-CSS und in den Bausteinen, die
 * erst auf den Unterseiten nachgeladen werden (data-list, description-list,
 * label; zusammen gut 100 KB, die beim ersten Durchgang gar nicht im Blick
 * waren).
 *
 * Die Kopfleiste steht bewusst NICHT hier - sie hat ihre eigenen Farben und
 * bekommt sie weiter unten.
 *
 * ---------------------------------------------------------------------------
 * UND WARUM JEDE KLASSE DOPPELT STEHT
 *
 * Weil gleiche Spezifitaet nach REIHENFOLGE entscheidet und die Konsole ihr
 * CSS nachlaedt. brand.css haengt im <head>; die Bausteine fuer data-list,
 * description-list und label kommen erst beim Wechsel auf eine Unterseite
 * dazu, also DANACH. Eine Regel .pf-v5-c-data-list von mir verliert damit
 * gegen die gleichnamige aus dem Baustein.
 *
 * Am laufenden Keycloak nachgemessen: mit einfacher Klasse stand "My password"
 * weiterhin in rgb(21, 21, 21) auf der dunklen Karte, waehrend derselbe Aufbau
 * als statische Seite - dort liegt der Baustein vor brand.css - richtig
 * aussah. Die doppelte Klasse hebt die Spezifitaet auf 0,2,0 und macht die
 * Reihenfolge gleichgueltig; !important taete es auch, nimmt aber jede
 * spaetere Korrektur mit. */
.pf-v5-c-alert.pf-v5-c-alert,
.pf-v5-c-chip.pf-v5-c-chip,
.pf-v5-c-chip-group.pf-v5-c-chip-group,
.pf-v5-c-data-list.pf-v5-c-data-list,
.pf-v5-c-menu.pf-v5-c-menu,
.pf-v5-c-table.pf-v5-c-table {
  --pf-v5-global--Color--100: #E8EDF2;
  --pf-v5-global--Color--200: #A6B2BF;
  --pf-v5-global--BackgroundColor--100: #28303A;
  --pf-v5-global--BorderColor--100: #3A4552;
  --pf-v5-global--link--Color: #D9A066;
  --pf-v5-global--primary-color--100: #8FB8A8;
  color: #E8EDF2;
}

/* Die Seite selbst und ihre Abschnitte. pf-m-light heisst bei PatternFly
 * "helle Variante" und ist WEISS - nicht die Markenfarbe. */
.pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: transparent;
  background: transparent;
  color: #E8EDF2;
}

.pf-v5-c-page__main {
  background-color: transparent;
}

.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: transparent;
  --pf-v5-c-page__main-section--m-light--BackgroundColor: #28303A;
}

/* DIE INHALTSFLAECHEN STEHEN ALS KARTEN AUF DER SEITE, nicht randlos darauf.
 * Ohne den Abstand deckt die Kartenfarbe die ganze Seite ab und das Muster der
 * Marke ist nirgends zu sehen - im ersten Bild war von der cremefarbenen
 * Flaeche kein Pixel uebrig. Dieselbe Form wie die Karte der Anmeldeseite.
 *
 * DER KINDSELEKTOR ">" IST HIER TRAGEND, nicht Geschmack. Die Konsole
 * VERSCHACHTELT main-section ineinander: auf der Seite "Anmeldung" liegen drei
 * weitere darin, jede mit pf-m-light UND pf-v5-u-px-0. Ohne das ">" bekam jede
 * davon ebenfalls Rahmen, Rundung und Rand - bei Innenabstand null klebte der
 * Inhalt dann an der Kante, gemessen padding-inline 0px bei x=363.
 *
 * Die Sprungmarken auf der Seite "Persoenliche Daten" sind ebenfalls ein
 * main-section, tragen aber kein pf-m-light und waren nie betroffen. */
.pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light {
  background-color: #28303A;
  color: #E8EDF2;
  margin: 16px 24px 0;
  border: 1px solid #3A4552;
  border-radius: 14px;
}

.pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light:last-child {
  margin-bottom: 24px;
}

/* Die verschachtelten Abschnitte sind Gliederung, keine eigenen Karten. */
.pf-v5-c-page__main-section.pf-m-light .pf-v5-c-page__main-section {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* ------------------------------------------------------------- Kopfleiste */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #16202A;
  --pf-v5-c-masthead__main--BorderBottomColor: #D9A066;
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: transparent;
  /* AUCH DIE KOPFLEISTE SETZT DIE GLOBALEN TOKENS NEU - sie unterstellt, dass
   * sie dunkel ist, und stellt Color--100/200 auf helle Werte. Bei Muth-Event
   * ist sie aber WEISS, und alles, was diese Tokens liest, wurde dort beinahe
   * unsichtbar: das Kebab-Menue auf dem Telefon stand in rgb(240, 240, 240)
   * auf Weiss. Gemessen, nicht vermutet - es faellt nur auf schmalen Anzeigen
   * auf, weil der Knopf erst dort erscheint. */
  --pf-v5-global--Color--100: #E8EDF2;
  --pf-v5-global--Color--200: #E8EDF2;
  background-color: #16202A;
  color: #E8EDF2;
  border-bottom: 3px solid #D9A066;
}

.pf-v5-c-masthead a,
.pf-v5-c-masthead__brand,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text {
  color: #E8EDF2;
}

/* Der Knopf, der die Seitenleiste ein- und ausklappt. */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
  --pf-v5-c-button--m-plain--Color: #E8EDF2;
  --pf-v5-c-button--m-plain--hover--Color: #E8EDF2;
  --pf-v5-c-button--m-plain--focus--Color: #E8EDF2;
  color: #E8EDF2;
}

/* Das Benutzermenue oben rechts. Ohne diese Regel traegt es die
 * Standardmarken von PatternFly und bekommt einen hellen Kasten mit Rahmen
 * mitten in die dunkle Leiste. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--Color: #E8EDF2;
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--hover--BackgroundColor: rgba(232, 237, 242, 0.12);
  --pf-v5-c-menu-toggle--focus--BackgroundColor: rgba(232, 237, 242, 0.12);
  --pf-v5-c-menu-toggle--active--BackgroundColor: rgba(232, 237, 242, 0.12);
  --pf-v5-c-menu-toggle--before--BorderTopColor: transparent;
  --pf-v5-c-menu-toggle--before--BorderRightColor: transparent;
  --pf-v5-c-menu-toggle--before--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle--before--BorderLeftColor: transparent;
  --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: #D9A066;
  border-radius: 8px;
}

.pf-v5-c-masthead .pf-v5-c-avatar {
  --pf-v5-c-avatar--BorderColor: #D9A066;
  border: 2px solid #D9A066;
}

/* Bildmarke und Name daneben, wie auf der Anmeldeseite. Der Name steht im
 * CSS und nicht in der Datenbank - wird der Realm umbenannt, aendert sich
 * hier nichts. Die Zeile heisst content:. */
.pf-v5-c-masthead__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.pf-v5-c-masthead__brand img {
  height: 42px;
  width: auto;
  max-height: none;
}

.pf-v5-c-masthead__brand::after {
  content: "Familie Klein";
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.1;
  white-space: nowrap;
}

/* ---------------------------------------------------------- Seitenleiste */
/* PatternFly faerbt die Seitenleiste von sich aus fast schwarz
 * (rgb(33, 36, 39), gemessen). Neben einer cremefarbenen Seite sieht das wie
 * ein Versehen aus, also traegt sie hier die Kartenfarbe. */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #28303A;
  background-color: #28303A;
}

/* Der Rand nur, wenn die Leiste auch aufgeklappt ist. Steht er immer da,
 * bleibt bei der eingeklappten Leiste auf dem Telefon ein ein Pixel breiter
 * Streifen stehen - gemessen x=-1..0, also gerade eben neben dem Bild, aber
 * es gibt keinen Grund, ihn zu zeichnen. */
.pf-v5-c-page__sidebar.pf-m-expanded {
  border-right: 1px solid #3A4552;
}

.pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: #E8EDF2;
  --pf-v5-c-nav__link--hover--Color: #E8EDF2;
  --pf-v5-c-nav__link--focus--Color: #E8EDF2;
  --pf-v5-c-nav__link--active--Color: #E8EDF2;
  --pf-v5-c-nav__link--m-current--Color: #E8EDF2;
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(232, 237, 242, 0.07);
  --pf-v5-c-nav__link--focus--BackgroundColor: rgba(232, 237, 242, 0.07);
  --pf-v5-c-nav__link--active--BackgroundColor: rgba(143, 184, 168, 0.16);
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(143, 184, 168, 0.16);
  --pf-v5-c-nav__link--m-current--after--BorderColor: #D9A066;
  --pf-v5-c-nav__link--hover--after--BorderColor: #D9A066;
  --pf-v5-c-nav__link--focus--after--BorderColor: #D9A066;
  --pf-v5-c-nav__link--active--after--BorderColor: #D9A066;
  /* DAS UNTERMENUE BIEGT DAS TOKEN UM, STATT DIE FARBE ZU UEBERSCHREIBEN:
   *   .pf-v5-c-nav__subnav { --...__link--m-current--after--BorderColor:
   *                          var(--...__subnav__link--m-current--after--BorderColor) }
   * Die vier Zeilen darueber gelten also nur fuer die obere Ebene; im
   * Untermenue zeigt dasselbe Token auf ein zweites, das hier gesetzt werden
   * muss. Ohne diese Zeilen blieb der Strich der Unterpunkte hellblau. */
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: #D9A066;
  --pf-v5-c-nav__subnav__link--hover--after--BorderColor: #D9A066;
  --pf-v5-c-nav__subnav__link--focus--after--BorderColor: #D9A066;
  --pf-v5-c-nav__subnav__link--active--after--BorderColor: #D9A066;
  --pf-v5-c-nav__section__link--m-current--after--BorderColor: #D9A066;
  --pf-v5-c-nav__section__link--hover--after--BorderColor: #D9A066;
  --pf-v5-c-nav__section__link--focus--after--BorderColor: #D9A066;
  --pf-v5-c-nav__section__link--active--after--BorderColor: #D9A066;
  --pf-v5-c-nav__item--before--BorderColor: transparent;
  --pf-v5-c-nav__section-title--Color: #A6B2BF;
  --pf-v5-c-nav__section-title--BorderBottomColor: #3A4552;
}

.pf-v5-c-nav__link {
  color: #E8EDF2;
}

/* -------------------------------------------------------- Ueberschriften */
.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3 {
  color: #E8EDF2;
  letter-spacing: -0.2px;
}

.pf-v5-c-content p,
[data-pf-content="true"] {
  color: #A6B2BF;
}

/* ------------------------------------------------------------- Formulare */
.pf-v5-c-form {
  --pf-v5-c-form__label-required--Color: #D9A066;
  --pf-v5-c-form__helper-text--Color: #A6B2BF;
  --pf-v5-c-form__label--m-disabled--Color: #A6B2BF;
  --pf-v5-c-form__group-label-help--Color: #A6B2BF;
  --pf-v5-c-form__group-label-help--hover--Color: #E8EDF2;
}

.pf-v5-c-form__label-text,
.pf-v5-c-form__label {
  color: #E8EDF2;
}

/* DIE KLASSE SITZT AM RAHMEN, NICHT AM FELD. PatternFly v5 baut
 * <span class="pf-v5-c-form-control"><input></span>; Flaeche und Rahmen
 * gehoeren also nach oben, Schrift an das Kind. Dieselbe Falle wie auf der
 * Anmeldeseite, wo die erste Fassung das Feld direkt adressierte und nichts
 * tat. */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: #222A33;
  --pf-v5-c-form-control--Color: #E8EDF2;
  --pf-v5-c-form-control--m-placeholder--Color: #A6B2BF;
  --pf-v5-c-form-control--m-disabled--BackgroundColor: #1C242C;
  --pf-v5-c-form-control--m-disabled--Color: #A6B2BF;
  --pf-v5-c-form-control--m-disabled--after--BorderColor: #3A4552;
  background-color: #222A33;
  color: #E8EDF2;
  border: 1px solid #3A4552;
  border-radius: 10px;
  /* 16px, weil iOS beim Fokus auf kleinere Schrift hineinzoomt. */
  font-size: 16px;
  min-height: 44px;
}

/* PatternFly zeichnet den Rahmen als ::after mit border-bottom; der wuerde
 * den runden Rahmen oben durchschneiden. */
.pf-v5-c-form-control::after {
  border: 0;
}

.pf-v5-c-form-control.pf-m-disabled {
  background-color: #1C242C;
  color: #A6B2BF;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
  background-color: transparent;
  color: #E8EDF2;
  font-size: 16px;
  min-height: 42px;
}

.pf-v5-c-form-control > input:disabled {
  color: #A6B2BF;
}

.pf-v5-c-form-control:focus-within {
  border-color: #8FB8A8;
  box-shadow: 0 0 0 3px rgba(143, 184, 168, 0.26);
}

/* PatternFly zeichnet zusaetzlich einen Umriss am FELD; zusammen mit dem Ring
 * oben waeren das zwei Rahmen uebereinander. */
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > textarea:focus {
  outline: none;
}

/* Das Auswahlfeld fuer die Sprache ist KEIN <select>, sondern ein
 * menu-toggle - es muss trotzdem wie ein Eingabefeld aussehen, sonst stehen
 * zwei verschiedene Bauformen uebereinander im selben Formular. */
.pf-v5-c-form__group-control .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--BackgroundColor: #222A33;
  --pf-v5-c-menu-toggle--Color: #E8EDF2;
  --pf-v5-c-menu-toggle--hover--BackgroundColor: #222A33;
  --pf-v5-c-menu-toggle--focus--BackgroundColor: #222A33;
  --pf-v5-c-menu-toggle--before--BorderTopColor: #3A4552;
  --pf-v5-c-menu-toggle--before--BorderRightColor: #3A4552;
  --pf-v5-c-menu-toggle--before--BorderBottomColor: #3A4552;
  --pf-v5-c-menu-toggle--before--BorderLeftColor: #3A4552;
  /* UND DIESE BREITE, sonst steht der Kasten unten offen. PatternFly zeichnet
   * drei Kanten als ::before und die UNTERE als ::after - die obere Zeile
   * macht das ::after unsichtbar, also muss das ::before die vierte Kante
   * uebernehmen. Im Bild war der Rahmen an der Unterseite schlicht weg. */
  --pf-v5-c-menu-toggle--before--BorderBottomWidth: 1px;
  --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle--BorderRadius: 10px;
  background-color: #222A33;
  color: #E8EDF2;
  border-radius: 10px;
  min-height: 44px;
  font-size: 16px;
}

/* Die Rundung muss an das ::before, denn DORT wird der Rahmen gezeichnet - am
 * Element selbst rundet sie nur die Flaeche, und im Bild stand ein eckiger
 * Rahmen neben runden Eingabefeldern. */
.pf-v5-c-form__group-control .pf-v5-c-menu-toggle::before {
  border-radius: 10px;
}

.pf-v5-c-form__group-control .pf-v5-c-menu-toggle:focus-within {
  box-shadow: 0 0 0 3px rgba(143, 184, 168, 0.26);
}

/* Die aufgeklappte Liste dazu. */
.pf-v5-c-menu {
  --pf-v5-c-menu--BackgroundColor: #28303A;
  --pf-v5-c-menu__item--BackgroundColor: transparent;
  --pf-v5-c-menu__item--Color: #E8EDF2;
  border: 1px solid #3A4552;
  border-radius: 10px;
}

/* --------------------------------------------------------------- Knoepfe */
.pf-v5-c-button {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.pf-v5-c-form__actions .pf-v5-c-button {
  min-height: 44px;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: #8FB8A8;
  --pf-v5-c-button--m-primary--Color: #16202A;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #A6C8BA;
  --pf-v5-c-button--m-primary--hover--Color: #16202A;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #A6C8BA;
  --pf-v5-c-button--m-primary--focus--Color: #16202A;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #A6C8BA;
  --pf-v5-c-button--m-primary--active--Color: #16202A;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary,
.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-secondary--Color: #E8EDF2;
  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--hover--Color: #E8EDF2;
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: rgba(232, 237, 242, 0.07);
  --pf-v5-c-button--m-secondary--after--BorderColor: #3A4552;
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: #D9A066;
  color: #E8EDF2;
}

a,
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: #D9A066;
  --pf-v5-c-button--m-link--hover--Color: #E8BC8A;
  --pf-v5-c-button--m-link--focus--Color: #E8BC8A;
  color: #D9A066;
}

a:hover,
.pf-v5-c-button.pf-m-link:hover {
  color: #E8BC8A;
}

/* ---------------------------------------------------------- Sprungmarken */
.pf-v5-c-jump-links {
  --pf-v5-c-jump-links__link-text--Color: #A6B2BF;
  --pf-v5-c-jump-links__item--m-current__link-text--Color: #E8EDF2;
  --pf-v5-c-jump-links__link--hover__link-text--Color: #E8EDF2;
  --pf-v5-c-jump-links__link--focus__link-text--Color: #E8EDF2;
  --pf-v5-c-jump-links__list--before--BorderColor: #3A4552;
  --pf-v5-c-jump-links__link--before--BorderColor: #3A4552;
  --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: #D9A066;
  --pf-v5-c-jump-links__label--Color: #A6B2BF;
}

.pf-v5-c-jump-links__label {
  color: #A6B2BF;
}

/* ------------------------------------------- Bauteile der Unterseiten */
/* Anwendungen, Anmeldung, Geraeteaktivitaet. Die kann ich ohne Anmeldung
 * nicht ansehen, deshalb stehen hier nur Tokens und keine Feinarbeit - ohne
 * sie stuenden auf den drei DUNKLEN Themes weisse Karten und Tabellen auf
 * dunklem Grund, was schlechter ist als etwas zu grob gefaerbt. */
.pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: #28303A;
  --pf-v5-c-card--BorderColor: #3A4552;
  --pf-v5-c-card--m-plain--BackgroundColor: transparent;
  color: #E8EDF2;
  border: 1px solid #3A4552;
  border-radius: 14px;
}

.pf-v5-c-table {
  --pf-v5-c-table--BackgroundColor: transparent;
  --pf-v5-c-table--BorderColor: #3A4552;
  --pf-v5-c-table--cell--Color: #E8EDF2;
  --pf-v5-c-table__caption--Color: #A6B2BF;
  --pf-v5-c-table--m-striped__tr--BackgroundColor: #222A33;
  color: #E8EDF2;
}

.pf-v5-c-table__button {
  --pf-v5-c-table__button--Color: #E8EDF2;
  --pf-v5-c-table__button--BackgroundColor: transparent;
  --pf-v5-c-table__button--hover--Color: #D9A066;
}

.pf-v5-c-chip {
  --pf-v5-c-chip--BackgroundColor: #222A33;
  color: #E8EDF2;
}

.pf-v5-c-empty-state {
  --pf-v5-c-empty-state__body--Color: #A6B2BF;
  --pf-v5-c-empty-state__icon--Color: #A6B2BF;
}

.pf-v5-c-divider {
  --pf-v5-c-divider--BackgroundColor: #3A4552;
  --pf-v5-c-divider--after--BackgroundColor: #3A4552;
}

.pf-v5-c-panel {
  --pf-v5-c-panel--BackgroundColor: #28303A;
}

.pf-v5-c-modal-box {
  --pf-v5-c-modal-box--BackgroundColor: #28303A;
  color: #E8EDF2;
}

/* ------------------------------------------------------- Schmale Anzeigen */
@media (max-width: 767px) {
  /* Auf dem Telefon stehen in der Leiste schon Klappknopf, Bildmarke,
   * Benutzername und Abbild. Der ausgeschriebene Name dazu passt nicht mehr
   * und wuerde die Leiste umbrechen - die Bildmarke traegt die Marke dort
   * allein. */
  .pf-v5-c-masthead__brand::after,
  .pf-v5-c-masthead__content::before {
    display: none;
  }

  .pf-v5-c-masthead__brand img {
    height: 34px;
  }

  /* DIE KOPFLEISTE BLEIBT EINZEILIG.
   *
   * PatternFly baut sie als RASTER und stapelt sie auf schmalen Anzeigen in
   * zwei Zeilen: oben Klappknopf und Bildmarke, darunter die Werkzeugleiste.
   * Gemessen wurde sie dadurch 119 Pixel hoch, und das Kebab-Menue stand
   * mitten darin bei x=177 - es sieht aus, als sei etwas verrutscht. Mit dem
   * Standard-Theme passiert dasselbe, es liegt also nicht an der Marke; fuer
   * eine Kopfleiste, die eine Marke tragen soll, ist es trotzdem die falsche
   * Form.
   *
   * display: flex setzt das Raster ausser Kraft, statt seine Bereiche
   * nachzubauen - die drei Kinder stehen dann einfach nebeneinander. */
  .pf-v5-c-masthead {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .pf-v5-c-masthead__content {
    flex: 1 1 auto;
    /* sonst kann der Inhalt nicht schrumpfen und draengt die Marke hinaus */
    min-width: 0;
  }

  /* Das Kebab-Menue gehoert neben das Abbild, nicht in die Mitte der Leiste.
   *
   * In der Werkzeugleiste stehen DREI Elemente mit margin-left: auto - ein
   * leeres, der Kebab-Knopf und das Abbild. Mehrere automatische Raender
   * teilen den freien Platz zu GLEICHEN TEILEN, und genau so sah es aus:
   * gemessen 53,3 Pixel dreimal, der Knopf landete bei x=237 von 390. Der
   * erste Anlauf setzte dem noch einen vierten hinzu und machte es nicht
   * besser.
   *
   * Richtig ist, allen ausser dem ersten den automatischen Rand zu NEHMEN:
   * dann schiebt der eine verbliebene die ganze Gruppe nach rechts. */
  .pf-v5-c-masthead .pf-v5-c-toolbar__item.pf-m-align-left,
  .pf-v5-c-masthead .pf-v5-c-toolbar__item.pf-m-overflow-menu {
    margin-left: 0;
    margin-right: 0;
  }

  /* Ueberschrift und Knoepfe daneben bekommen auf dem Telefon je eine Zeile.
   * .pf-v5-l-split bricht von sich aus nicht um, deshalb stand "Signed in
   * devices" zweizeilig neben den Knoepfen statt darueber. */
  .pf-v5-l-split {
    flex-wrap: wrap;
  }

  /* Derselbe Abstand wie bei der Karte der Anmeldeseite, damit die beiden
   * Seiten auf dem Telefon gleich eingerueckt sind. */
  .pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light {
    margin-inline: 14px;
  }
}

/* Unterhalb der sm-Grenze von PatternFly (576px) faellt das Raster der
 * Geraeteliste auf EINE Spalte zurueck - und in genau diese eine Spalte setzt
 * die Konsole den rechtsbuendigen Abmelden-Knopf. Der ist breiter als die
 * Spalte und ragte deshalb aus dem Bild: gemessen x=311..402 bei 390 Pixeln
 * Breite. MIT DEM STANDARD-THEME IST ES SCHLIMMER (x=332..424), der Fehler
 * gehoert also der Konsole und nicht der Marke - reparieren laesst er sich
 * hier trotzdem.
 *
 * 1 / -1 statt einer Spaltenzahl: das gilt unabhaengig davon, wie PatternFly
 * die Spannweite intern ausrechnet. */
@media (max-width: 575px) {
  .signed-in-device-list .pf-v5-l-grid__item.pf-v5-u-text-align-right {
    grid-column: 1 / -1;
  }
}