/*
 * Optimizely Axiom -- Komponenten.
 *
 * Nachgebaut gegen die --ax-*-Variablen aus tokens.css. Massgeblich waren der
 * Axiom-MCP-Server (welche Varianten und Groessen es gibt) und das kompilierte
 * Komponenten-CSS aus @optiaxiom/react (welche Werte die Bauteile setzen).
 *
 * Die Klassennamen stammen weiter aus Bootstrap 3, weil die Templates und vor
 * allem pdfs/elements.min.js sie verwenden.
 */

/* ------------------------------------------------------------- Button ---- */

/*
 * Axiom-Button: Radius md, 1px Rahmen, Innenabstand 8px waagerecht (sm 6px,
 * lg 10px), Hoehe aus den size-Tokens (sm 1.5rem, md 2rem, lg 2.5rem).
 */
.btn {
  --ax-btn-border: 1px;
  --ax-btn-padding: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ax-size-md);
  padding-inline: calc(var(--ax-btn-padding) - var(--ax-btn-border));
  border: var(--ax-btn-border) solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
  color: var(--ax-colors-fg-default);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ax-duration-sm) ease,
              border-color var(--ax-duration-sm) ease;
}

.btn:hover:not(:disabled, .disabled) {
  background-color: var(--ax-colors-bg-default-hovered);
  border-color: var(--ax-colors-border-control-hovered);
  color: var(--ax-colors-fg-default);
  text-decoration: none;
}

.btn:active:not(:disabled, .disabled) {
  background-color: var(--ax-colors-bg-default-pressed);
}

.btn:disabled,
.btn.disabled {
  background-color: var(--ax-colors-bg-secondary);
  border-color: transparent;
  color: var(--ax-colors-fg-disabled);
  cursor: not-allowed;
}

/* Axiom-Groessen: sm | md | lg */
.btn-sm, .btn-xs {
  --ax-btn-padding: 6px;
  height: var(--ax-size-sm);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.btn-lg {
  --ax-btn-padding: 10px;
  height: var(--ax-size-lg);
  border-radius: var(--ax-borderRadius-lg);
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: var(--ax-fontSize-lg-lineHeight);
}

.btn-block {
  display: flex;
  width: 100%;
}

/*
 * appearance="primary" -- Axioms Akzent ist das Optimizely-Gruen. Die Schrift
 * darauf ist fg.black, nicht weiss.
 */
.btn.btn-primary,
.btn.btn-success {
  background-color: var(--ax-colors-bg-accent);
  border-color: var(--ax-colors-bg-accent);
  color: var(--ax-colors-fg-black);
}

.btn.btn-primary:hover:not(:disabled, .disabled),
.btn.btn-success:hover:not(:disabled, .disabled) {
  background-color: var(--ax-colors-bg-accent-hovered);
  border-color: var(--ax-colors-bg-accent-hovered);
  color: var(--ax-colors-fg-black);
}

.btn.btn-primary:active:not(:disabled, .disabled),
.btn.btn-success:active:not(:disabled, .disabled) {
  background-color: var(--ax-colors-bg-accent-pressed);
}

/* appearance="danger" */
.btn.btn-danger {
  background-color: var(--ax-colors-bg-error);
  border-color: var(--ax-colors-bg-error);
  color: var(--ax-colors-fg-white);
}

.btn.btn-danger:hover:not(:disabled, .disabled) {
  background-color: var(--ax-colors-bg-error-hovered);
  border-color: var(--ax-colors-bg-error-hovered);
  color: var(--ax-colors-fg-white);
}

/*
 * appearance="inverse". Die Spielarten setzen .btn voraus: die Seitenauswahl
 * traegt btn-default/btn-success/btn-info/btn-primary nur noch als Zustand,
 * den elements.min.js umschaltet -- als Reiter sieht sie anders aus.
 */
.btn.btn-info {
  background-color: var(--ax-colors-bg-default-inverse);
  border-color: var(--ax-colors-bg-default-inverse);
  color: var(--ax-colors-fg-default-inverse);
}

.btn.btn-info:hover:not(:disabled, .disabled) {
  background-color: var(--ax-colors-bg-default-inverse-hovered);
  border-color: var(--ax-colors-bg-default-inverse-hovered);
  color: var(--ax-colors-fg-default-inverse);
}

/* appearance="subtle" */
.btn.btn-link {
  border-color: transparent;
  background-color: transparent;
  color: var(--ax-colors-fg-link-default);
}

.btn.btn-link:hover:not(:disabled, .disabled) {
  background-color: var(--ax-colors-bg-default-hovered);
  border-color: transparent;
  color: var(--ax-colors-fg-link-default-hovered);
}

/*
 * Der Editor markiert den aktiven Zustand ueber btn-success/btn-info. Axiom
 * nutzt dafuer data-state="active": Akzentflaeche, Akzentrahmen, dunkle Schrift.
 */
.btn.active {
  background-color: var(--ax-colors-bg-accent);
  border-color: var(--ax-colors-fg-accent);
  color: var(--ax-colors-fg-black);
}

/* Gruppe: Radien nur aussen, Rahmen dazwischen geteilt. */
.btn-group {
  display: inline-flex;
  vertical-align: middle;
}

.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }

.btn-group > .btn:first-child:not(:only-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.btn-group > .btn:last-child:not(:only-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.btn-group > .btn:not(:first-child) { margin-inline-start: -1px; }
.btn-group > .btn:hover,
.btn-group > .btn:focus-visible { z-index: 1; }

/* -------------------------------------------------------------- Input ---- */

/*
 * Axiom-Input: Radius md, 1px border.default, Flaeche bg.default. Fokus setzt
 * einen 2px-Rahmen border.focus mit 2px Abstand und faerbt den Rand
 * border.control. Fehler faerbt den Rand border.error.
 */
.form-control {
  display: block;
  width: 100%;
  height: var(--ax-size-lg);
  padding: 0 8px;
  border: 1px solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
  color: var(--ax-colors-fg-default);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
}

textarea.form-control {
  height: auto;
  min-height: var(--ax-size-lg);
  padding: 8px;
  line-height: var(--ax-fontSize-md-lineHeight);
  resize: vertical;
}

select.form-control {
  padding-inline-end: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23616755' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  appearance: none;
}

select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
  height: auto;
  padding: 4px;
  background-image: none;
}

.form-control::placeholder { color: var(--ax-colors-fg-disabled); }

.form-control:focus {
  border-color: var(--ax-colors-border-control);
  outline: 2px solid var(--ax-colors-border-focus);
  outline-offset: 2px;
}

.form-control[readonly] {
  background-color: var(--ax-colors-bg-page);
  border-color: var(--ax-colors-border-tertiary);
}

.form-control:disabled {
  background-color: var(--ax-colors-bg-page);
  border-color: var(--ax-colors-border-default);
  color: var(--ax-colors-border-control);
  cursor: not-allowed;
}

/* Fehlerzustand: Axiom faerbt Rand und Fokusrahmen getrennt. */
.has-error .form-control {
  border-color: var(--ax-colors-border-error);
}

.has-error .form-control:focus {
  outline-color: var(--ax-colors-border-focus-error);
}

.has-error .control-label,
.has-error .feld-titel,
.has-error .help-block,
.has-error .feld-hilfe {
  color: var(--ax-colors-fg-error);
}

/* --------------------------------------------------------------- Field --- */

/*
 * Axioms Field bringt Beschriftung, Hilfetext und Fehlermeldung mit. Die
 * Templates bauen das aus form-group + control-label + help-block.
 */
.form-group {
  display: flex;
  flex-wrap: wrap;
  /*
   * Oben ausrichten, nicht mittig: sonst rutscht die Beschriftung neben einem
   * mehrzeiligen Feld in dessen Mitte. Axioms Field setzt die Beschriftung
   * ueber das Feld; die Templates hier stellen sie daneben.
   */
  align-items: start;
  margin-bottom: 16px;
  margin-inline: -8px;
}

.form-group > [class*="col-"] { padding-inline: 8px; }

.control-label {
  margin-bottom: 4px;
  color: var(--ax-colors-fg-default);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  font-weight: 500;
}

/* Im waagerechten Formular steht die Beschriftung neben dem Feld. */
.form-horizontal .control-label {
  margin-bottom: 0;
  /* Auf die erste Zeile des Feldes ausrichten: (Feldhoehe 40 - Zeile 20) / 2. */
  padding-top: 10px;
  text-align: start;
}

.help-block {
  display: block;
  margin-top: 4px;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

/* ----------------------------------------------------------- Checkbox ---- */

/*
 * Axiom-Checkbox: 2px Rahmen border.control, Flaeche bg.default, im
 * angehakten Zustand Akzentflaeche.
 */
.checkbox-inline,
.radio-inline,
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline { margin-inline-start: 12px; }

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid var(--ax-colors-border-control);
  background-color: var(--ax-colors-bg-default);
  accent-color: var(--ax-colors-bg-accent);
  cursor: pointer;
  appearance: none;
  display: grid;
  place-content: center;
  transition: background-color var(--ax-duration-sm) ease,
              border-color var(--ax-duration-sm) ease;
}

input[type="checkbox"] { border-radius: var(--ax-borderRadius-xs); }
input[type="radio"]    { border-radius: var(--ax-borderRadius-full); }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--ax-colors-bg-accent);
  border-color: var(--ax-colors-bg-accent);
}

input[type="checkbox"]:checked::after {
  width: 10px;
  height: 10px;
  content: "";
  background-color: var(--ax-colors-fg-black);
  clip-path: polygon(14% 44%, 0 65%, 44% 100%, 100% 16%, 84% 0, 43% 62%);
}

input[type="radio"]:checked::after {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: var(--ax-borderRadius-full);
  background-color: var(--ax-colors-fg-black);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  border-color: var(--ax-colors-border-disabled);
  background-color: var(--ax-colors-bg-secondary);
  cursor: not-allowed;
}

/* --------------------------------------------------------- Input group --- */

/*
 * Axiom haengt Zusaetze innen an das Feld an (Input mit addon). Nachgebaut mit
 * geteilten Radien und halben Rahmen, wie im kompilierten CSS.
 */
.input-group {
  display: flex;
  width: 100%;
}

.input-group > .form-control { flex: 1 1 auto; width: 1%; }

.input-group > :not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: -1px;
}

.input-group > :not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.input-group > .form-control:focus { z-index: 10; }

.input-group-addon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ax-size-lg);
  padding-inline: 8px;
  border: 1px solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-secondary);
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-md-fontSize);
  white-space: nowrap;
}

.input-group-btn { display: inline-flex; }
.input-group-btn > .btn { height: var(--ax-size-lg); }

/* -------------------------------------------------------------- Paper ---- */

/*
 * Axioms Paper/Card: Flaeche bg.default, 1px border.secondary, Radius lg.
 * Bootstraps panel traegt in den Templates dieselbe Rolle.
 */
.panel {
  margin-bottom: 16px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-default);
}

/*
 * Blockelement, nicht flex: die Templates legen im Kopf ein eigenes .row-Raster
 * an (Schaltflaeche links, Filterfeld rechts).
 */
.panel-heading {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  border-start-start-radius: var(--ax-borderRadius-lg);
  border-start-end-radius: var(--ax-borderRadius-lg);
  font-weight: 600;
}

.panel-body { padding: 16px; }

.panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--ax-colors-border-secondary);
  background-color: var(--ax-colors-bg-page);
}

.panel-title { margin: 0; font-size: var(--ax-fontSize-md-fontSize); font-weight: 600; }

.well {
  padding: 16px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-secondary);
}

/* -------------------------------------------------------------- Table ---- */

/*
 * Axiom-Tabelle: Kopfzeile bg.page, Trennlinien border.secondary, Zeilen
 * beruehrungsempfindlich ueber bg.default.hovered. Zahlen werden -- wie im
 * DataTable-Beispiel von Axiom -- ebenfalls am Anfang ausgerichtet.
 */
.table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
  font-size: var(--ax-fontSize-md-fontSize);
}

/* Auch Kopfzeilen ohne thead richten sich links aus, nicht mittig. */
.table th { text-align: start; }

.table > thead > tr > th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ax-colors-border-default);
  background-color: var(--ax-colors-bg-page);
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-sm-fontSize);
  font-weight: 600;
  text-align: start;
}

.table > tbody > tr > td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  color: var(--ax-colors-fg-default);
  text-align: start;
  vertical-align: middle;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td { padding: 6px 12px; }

.table-hover > tbody > tr:hover > td {
  background-color: var(--ax-colors-bg-default-hovered);
}

/*
 * Waagerechter Bildlauf nur, wenn es eng wird. Dauerhaft gesetzt macht
 * overflow-x den Rahmen zum Bildlaufbereich, und breite Tabellen bekommen
 * einen Balken, obwohl reichlich Platz da ist.
 */
.table-responsive { width: 100%; }

@media (max-width: 56.24rem) {
  .table-responsive { overflow-x: auto; }
}

/* -------------------------------------------------------------- Alert ---- */

/*
 * Axiom-Alert: getoente Flaeche, farbiger Rahmen, Radius md.
 * wrapError/wrapSuccess/wrapInfo/wrapWarning in global/functions.php
 * erzeugen genau diese vier Varianten.
 */
/*
 * Kein Flex: die Meldungen bestehen aus blossen Textknoten mit <br> dazwischen,
 * und in einem Flex-Kasten wird jeder Textknoten ein eigenes Element -- die
 * Saetze standen dann nebeneinander statt untereinander. Block mit Platz
 * rechts fuer das Kreuz, das absolut darin sitzt.
 */
.alert {
  position: relative;
  padding: 12px 16px;
  padding-inline-end: 40px;
  border: 1px solid transparent;
  border-radius: var(--ax-borderRadius-md);
  margin-bottom: 16px;
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
}

.alert-success {
  background-color: var(--ax-colors-bg-success-subtle);
  border-color: var(--ax-colors-border-success);
  color: var(--ax-colors-fg-success-strong);
}

.alert-info {
  background-color: var(--ax-colors-bg-information-subtle);
  border-color: var(--ax-colors-bg-information-light);
  color: var(--ax-colors-fg-information-strong);
}

.alert-warning {
  background-color: var(--ax-colors-bg-warning-subtle);
  border-color: var(--ax-colors-border-warning);
  color: var(--ax-colors-fg-warning-strong);
}

.alert-danger {
  background-color: var(--ax-colors-bg-error-subtle);
  border-color: var(--ax-colors-border-error);
  color: var(--ax-colors-fg-error-strong);
}

.alert .close {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}

.alert .close:hover { opacity: 1; }

/* -------------------------------------------------------------- Badge ---- */

.badge,
.label {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ax-borderRadius-full);
  background-color: var(--ax-colors-bg-pill-default);
  color: var(--ax-colors-fg-default);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
  font-weight: 500;
}

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

/*
 * Linke Navigation nach Axioms Sidebar/Nav: Sidebar > Nav > NavBody >
 * NavList > NavItem, dazu NavHeader und NavFooter.
 *
 * Die Werte stammen aus dem kompilierten NavItem-CSS: Grundfarbe
 * fg.secondary, ausgewaehlt nur bg.default.pressed (die Schriftfarbe bleibt),
 * ueberfahren bg.default.hovered -- aber nicht auf dem ausgewaehlten Eintrag.
 * Die Akzentfarbe kommt hier bewusst nicht vor.
 */

.app-huelle {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 236px;
  height: 100vh;
  /* Nichts darf seitlich herausragen -- eingeklappt laege der Umschalter
     sonst ausserhalb der Leiste. */
  overflow: hidden;
  border-inline-end: 1px solid var(--ax-colors-border-default);
  background-color: var(--ax-colors-bg-default);
  transition: width var(--ax-duration-md) ease;
}

.sidebar.eingeklappt { width: 64px; }

.sidebar.eingeklappt .nav-text,
.sidebar.eingeklappt .nav-kopf-text,
.sidebar.eingeklappt .nav-gruppe,
/* Eingeklappt bleiben nur Symbole -- die Unterpunkte haben keine. */
.sidebar.eingeklappt .nav-unterkopf,
.sidebar.eingeklappt .nav-unterpunkt { display: none; }

.sidebar.eingeklappt .nav-punkt { justify-content: center; }
.sidebar.eingeklappt .nav-kopf  { justify-content: center; padding-inline: 8px; }

/* NavHeader */
.nav-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--ax-colors-border-default);
}

.logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ax-size-md);
  height: var(--ax-size-md);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-accent);
  /* Weiss waere auf dem Akzentgruen nicht lesbar -- Axiom setzt fg.black. */
  color: var(--ax-colors-fg-black);
  font-family: var(--ax-fontFamily-heading);
  font-size: var(--ax-fontSize-sm-fontSize);
  font-weight: 700;
}

.nav-kopf-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.nav-kopf-text strong {
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-kopf-text small {
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-xs-fontSize);
  line-height: var(--ax-fontSize-xs-lineHeight);
}

/* NavBody */
.nav-koerper {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

/* NavGroup */
.nav-gruppe {
  padding: 8px 10px 4px;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-xs-fontSize);
  line-height: var(--ax-fontSize-xs-lineHeight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* NavList */
.nav-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* NavSeparator */
.nav-trenner {
  height: 0;
  margin: 12px 4px;
  border: 0;
  border-top: 1px solid var(--ax-colors-border-default);
  background: none;
}

/* NavItem */
.nav-punkt {
  display: flex;
  width: 100%;
  min-height: var(--ax-size-md);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ax-borderRadius-md);
  background: transparent;
  color: var(--ax-colors-fg-secondary);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  font-weight: 400;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.nav-punkt:hover:not(.aktiv):not(:active) {
  background-color: var(--ax-colors-bg-default-hovered);
  color: var(--ax-colors-fg-secondary);
  text-decoration: none;
}

.nav-punkt:active {
  background-color: var(--ax-colors-bg-default-pressed);
  color: var(--ax-colors-fg-default);
}

/*
 * Axiom faerbt beim ausgewaehlten Eintrag nur die Flaeche. Die fettere
 * Schrift ist die eine Zutat, die nicht aus Axiom kommt -- ohne sie haengt
 * die Markierung allein an der Farbe.
 */
.nav-punkt.aktiv {
  background-color: var(--ax-colors-bg-default-pressed);
  font-weight: 600;
}

/*
 * Unternavigation zum gewaehlten Dokument. Axiom kennt dafuer NavGroup:
 * eine Ueberschrift und darunter die Punkte -- eingerueckt sind sie hier,
 * damit sie sichtbar zu "Übersicht" gehoeren. Die Beschriftungen stehen auf
 * derselben Hoehe wie die Beschriftungen der Punkte darueber: 10px Innenrand
 * plus Symbolbreite plus 10px Abstand.
 */
.nav-unterkopf {
  overflow: hidden;
  padding: 8px 10px 4px calc(20px + var(--ax-size-xs));
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-xs-fontSize);
  line-height: var(--ax-fontSize-xs-lineHeight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-unterpunkt {
  min-height: var(--ax-size-md);
  padding-inline-start: calc(20px + var(--ax-size-xs));
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.nav-unterpunkt.gesperrt {
  color: var(--ax-colors-fg-disabled);
  cursor: not-allowed;
}

.nav-punkt:focus-visible {
  z-index: 10;
  outline: 2px solid var(--ax-colors-border-focus);
  outline-offset: 2px;
}

.nav-icon {
  display: flex;
  flex: none;
  width: var(--ax-size-xs);
  height: var(--ax-size-xs);
  align-items: center;
  justify-content: center;
  font-size: var(--ax-fontSize-md-fontSize);
}

.nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* NavFooter */
.nav-fuss {
  padding: 8px;
  border-top: 1px solid var(--ax-colors-border-default);
}

/* ------------------------------------------------------------- Inhalt ---- */

.app-inhalt {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

/*
 * Kopfzeile des Inhalts: Name des Dokuments und seine Reiter. Sie erscheint
 * nur, wenn ein Dokument gewaehlt ist.
 */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  background-color: var(--ax-colors-bg-default);
}

.dokument-titel {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dokument-titel strong {
  font-family: var(--ax-fontFamily-heading);
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: var(--ax-fontSize-lg-lineHeight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dokument-titel small {
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-xs-fontSize);
  line-height: var(--ax-fontSize-xs-lineHeight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Die Schaltflaeche fuer die Generierungs-URL sitzt rechts in der Kopfzeile. */
.dokument-info { margin-inline-start: auto; }

/* Aufklappmenue (DropdownMenu) -- weiterhin fuer Dialoge in Gebrauch. */
.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  z-index: var(--ax-zIndex-popover);
  display: none;
  min-width: 200px;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-md);
  list-style: none;
}

.open > .dropdown-menu { display: block; }

.dropdown-menu > li > a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--ax-borderRadius-sm);
  color: var(--ax-colors-fg-default);
  font-size: var(--ax-fontSize-md-fontSize);
  text-decoration: none;
}

.dropdown-menu > li > a:hover {
  background-color: var(--ax-colors-bg-default-hovered);
  text-decoration: none;
}

/*
 * Schmale Anzeigen: die Leiste legt sich ueber die volle Breite nach oben und
 * rollt waagerecht. Eine 236px-Spalte neben 320px Inhalt waere kein
 * Nebeneinander mehr. Axiom kennt genau zwei Haltepunkte -- hier der untere.
 */
@media (max-width: 56.24rem) {
  .app-huelle { flex-direction: column; }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-inline-end: 0;
    border-bottom: 1px solid var(--ax-colors-border-default);
  }

  .sidebar.eingeklappt { width: 100%; }

  .sidebar.eingeklappt .nav-text,
  .sidebar.eingeklappt .nav-gruppe { display: revert; }

  .nav-koerper {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 12px;
  }

  .nav-liste { flex-direction: row; }
  .nav-gruppe { display: none; }
  .nav-trenner { display: none; }
  .nav-punkt { white-space: nowrap; }
  .nav-fuss { border-top: 0; }
  .nav-fuss .nav-liste { flex-direction: row; justify-content: end; }
  .nav-umschalter { display: none; }

  .topbar { gap: 12px; }
  .tabs { margin-inline-start: 0; overflow-x: auto; }
}

/* ------------------------------------------------------------- Symbole --- */

/*
 * Font Awesome bleibt in Gebrauch; hier wird nur die Farbe angeglichen, damit
 * die Symbole nicht mehr nach Bootstrap aussehen. Groesse und Familie bringt
 * Font Awesome selbst mit.
 */
.fa, .fas, .far, .fal, .fab {
  color: inherit;
}

.btn > .fa,  .btn > .fas, .btn > .far,
.btn > .fal, .btn > .fab { font-size: 1em; }

/*
 * Glyphicons kommen nur noch aus elements.min.js (Auf- und Zuklappen,
 * Sichtbarkeit). Bootstraps Icon-Schrift wird nicht mehr geladen -- die
 * benoetigten Zeichen kommen als Unicode-Ersatz.
 */
.glyphicon {
  display: inline-block;
  font-family: var(--ax-fontFamily-sans);
  font-style: normal;
  line-height: 1;
  color: inherit;
}

.glyphicon-menu-down::before        { content: "\25BE"; }
.glyphicon-menu-right::before       { content: "\25B8"; }
.glyphicon-menu-up::before          { content: "\25B4"; }
.glyphicon-triangle-bottom::before  { content: "\25BE"; }
.glyphicon-triangle-right::before   { content: "\25B8"; }
.glyphicon-eye-open::before         { content: "\1F441"; }
.glyphicon-eye-close::before        { content: "\2298"; }
.glyphicon-plus::before             { content: "\FF0B"; }
.glyphicon-minus::before            { content: "\2212"; }
.glyphicon-remove::before           { content: "\2715"; }
.glyphicon-ok::before               { content: "\2713"; }
.glyphicon-log-out::before          { content: "\21AA"; }
.glyphicon-chevron-left::before     { content: "\2039"; }
.glyphicon-chevron-right::before    { content: "\203A"; }

/* ------------------------------------------------------------ Toast ----- */

/*
 * Axiom Toast. Werte aus @optiaxiom/react: Flaeche bg.default.inverse,
 * Schrift fg.default.inverse, fontSize md, gap 8, Innenabstand 12 (links 16),
 * Radius md, Schatten md, Breite unter sm voll, darueber inhaltsbreit.
 * Das Sichtfeld steht oben rechts (Axioms Vorgabe), fest, Abstand 24,
 * Breite 384, Abstand zwischen den Meldungen 16.
 */
.toast-sichtfeld {
  position: fixed;
  z-index: var(--ax-zIndex-toast);
  top: 0;
  right: 0;
  display: flex;
  max-height: 100%;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px;
  pointer-events: none;
  scrollbar-gutter: stable;
}

@media (min-width: 37.5rem) {
  .toast-sichtfeld { width: 384px; }
}

@media (max-width: 37.49rem) {
  .toast-sichtfeld { width: 100%; }
}

.toast {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 12px;
  padding-inline-start: 16px;
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default-inverse);
  box-shadow: var(--ax-boxShadow-md);
  color: var(--ax-colors-fg-default-inverse);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  pointer-events: auto;
  transition: opacity var(--ax-duration-lg) ease;
}

@media (min-width: 37.5rem) {
  .toast { width: max-content; }
}

.toast a {
  color: var(--ax-colors-fg-link-inverse);
  text-decoration: underline;
}

/* Das Symbol traegt die Bedeutung -- die Flaeche bleibt in allen Faellen gleich. */
.toast-symbol {
  align-self: start;
  margin-top: 4px;
  color: var(--ax-colors-fg-default-inverse);
}

.toast-erfolg  .toast-symbol { color: var(--ax-colors-fg-success-light); }
.toast-fehler  .toast-symbol { color: var(--ax-colors-fg-error-light); }
.toast-warnung .toast-symbol { color: var(--ax-colors-fg-warning-light); }
.toast-hinweis .toast-symbol { color: var(--ax-colors-fg-information-light); }

.toast-titel { flex: 1; }

.toast-schliessen {
  display: inline-flex;
  width: var(--ax-size-sm);
  height: var(--ax-size-sm);
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--ax-borderRadius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
}

.toast-schliessen:hover { opacity: 1; }

/* Einblenden wie in Axiom: von rechts herein, dazu aufblenden. */
@keyframes toast-herein {
  from { opacity: 0; translate: calc(100% + 24px) 0; }
}

.toast[data-state="open"] { animation: toast-herein var(--ax-duration-lg) ease; }
.toast[data-state="closed"] { opacity: 0; }

/* ------------------------------------------------------------- Card ----- */

/*
 * Axiom Card: Flaeche bg.default, 1px border.tertiary, Radius lg, Abstand 16,
 * Inhalt als Spalte mit gap 8.
 */
.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--ax-colors-border-tertiary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-default);
  color: var(--ax-colors-fg-default);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
}

/* CardPreview: zieht sich ueber den Innenabstand hinaus bis an die Kante. */
.karte-vorschau {
  position: relative;
  display: grid;
  align-self: stretch;
  place-items: center;
  margin: -16px -16px 8px;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background-color: var(--ax-colors-bg-secondary);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.karte-vorschau img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* Ordner und Dateien ohne Bild: nur das Symbol. */
.karte-vorschau .karte-symbol {
  color: var(--ax-colors-fg-tertiary);
  font-size: 32px;
}

/* CardPreviewOverlay: liegt ueber der Vorschau, Innenabstand 16. */
.karte-ueberlage {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  inset: 0;
  place-content: space-between;
}

.karte-kopf {
  display: flex;
  align-self: stretch;
  min-height: var(--ax-size-sm);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.karte-titel {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karte-titel a { color: inherit; }

.karte-meta {
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.karte-aktionen {
  display: flex;
  gap: 4px;
  align-self: stretch;
  margin-top: auto;
  padding-top: 4px;
}

/* Raster fuer die Karten -- Axioms Grid mit gleichbreiten Spuren. */
.karten-raster {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ------------------------------------------------------------ Table ---- */

/*
 * Axiom Table: Rahmen 1px border.tertiary, Radius xl, Flaeche bg.default,
 * Kopfzeile in Schreibmaschinenschrift, Grossbuchstaben, fg.tertiary, mit
 * einer Linie darunter; Zellen mit Innenabstand 16 und Trennlinie oben.
 */
.ax-tabelle-rahmen {
  position: relative;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--ax-colors-border-tertiary);
  border-radius: var(--ax-borderRadius-xl);
  background-color: var(--ax-colors-bg-default);
}

.ax-tabelle {
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
  color: var(--ax-colors-fg-default);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
}

.ax-tabelle th {
  padding: 12px 16px;
  background-color: var(--ax-colors-bg-default);
  box-shadow: 0 1px 0 var(--ax-colors-border-tertiary);
  color: var(--ax-colors-fg-tertiary);
  font-family: var(--ax-fontFamily-mono);
  font-size: var(--ax-fontSize-sm-fontSize);
  font-weight: 400;
  text-align: start;
  text-transform: uppercase;
}

.ax-tabelle td {
  padding: 16px;
  border-color: var(--ax-colors-border-tertiary);
  vertical-align: top;
  word-break: break-word;
}

.ax-tabelle tbody tr:not(:first-child) td { border-top: 1px solid var(--ax-colors-border-tertiary); }

@media (hover: hover) {
  .ax-tabelle tbody tr:hover { background-color: var(--ax-colors-bg-default-hovered); }
}

.ax-tabelle tbody tr[data-selected] { background-color: var(--ax-colors-bg-accent-subtle); }

/* ------------------------------------------------------- Pagination ---- */

/*
 * Axiom Pagination: eine Reihe Schaltflaechen mit gap 2, jede mindestens
 * size.md breit. Die aktuelle Seite ist gedrueckt markiert.
 */
.blaetterung {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 16px;
}

.blaetterung-anzahl {
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.blaetterung-liste {
  position: relative;
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}

.blaetterung-liste .btn {
  min-width: var(--ax-size-md);
  justify-content: center;
  border-color: transparent;
  background: transparent;
}

.blaetterung-liste .btn:hover:not(:disabled) {
  background-color: var(--ax-colors-bg-default-hovered);
  border-color: transparent;
}

.blaetterung-liste .btn.aktiv {
  background-color: var(--ax-colors-bg-default-pressed);
  font-weight: 600;
}

.blaetterung-liste .btn:disabled {
  color: var(--ax-colors-fg-disabled);
  cursor: default;
}

.blaetterung-luecke {
  display: inline-flex;
  min-width: var(--ax-size-md);
  align-items: center;
  justify-content: center;
  color: var(--ax-colors-fg-tertiary);
}

/* Nichts gefunden -- Axioms EmptyState in klein. */
.leer-hinweis {
  padding: 48px 24px;
  color: var(--ax-colors-fg-tertiary);
  text-align: center;
}

/* ----------------------------------------------------------- Badge ----- */

/*
 * Axiom Badge, Spielart subtle: Schreibmaschinenschrift, Versalien, voller
 * Radius, Innenabstand 8/2. Die Bedeutung traegt allein die Farbe.
 */
.abzeichen {
  display: inline-flex;
  min-width: var(--ax-size-xs);
  flex: none;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--ax-borderRadius-full);
  font-family: var(--ax-fontFamily-mono);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
  font-weight: 400;
  text-transform: uppercase;
  user-select: none;
}

.abzeichen-erfolg {
  background-color: var(--ax-colors-bg-success-subtle);
  color: var(--ax-colors-fg-success-strong);
}

.abzeichen-warnung {
  background-color: var(--ax-colors-bg-warning-subtle);
  color: var(--ax-colors-fg-warning-strong);
}

.abzeichen-fehler {
  background-color: var(--ax-colors-bg-error-subtle);
  color: var(--ax-colors-fg-error-strong);
}

.abzeichen-neutral {
  background-color: var(--ax-colors-bg-secondary);
  color: var(--ax-colors-fg-secondary);
}

/*
 * Der Zusatz unter einem Navigationspunkt -- bei der Dokumentation der
 * Abschnitt, in den der Verweis fuehrt. Er soll die Zeile nicht sprengen.
 */
.nav-punkt {
  flex-wrap: wrap;
}

.nav-zusatz {
  width: 100%;
  overflow: hidden;
  padding-inline-start: calc(10px + var(--ax-size-xs));
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-xs-fontSize);
  line-height: var(--ax-fontSize-xs-lineHeight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar.eingeklappt .nav-zusatz { display: none; }

/* ------------------------------------------------------------- Field --- */

/*
 * Axiom Field: die Beschriftung steht ueber dem Feld, nicht daneben.
 * Werte aus @optiaxiom/react -- Spalte mit gap 4, Beschriftung fontSize md in
 * fg.secondary mit Gewicht 400, Erklaerung darunter in sm und fg.tertiary.
 *
 * Die aelteren Formulare dieser Anwendung stellen die Beschriftung daneben
 * (form-horizontal). Neue Formulare verwenden diesen Aufbau.
 */
.feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.feld-titel {
  /* Ausdruecklich linksbuendig: der Hochladen-Dialog ist eine Dropzone und
     zentriert sonst alles, was in ihm steht. */
  text-align: start;
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  font-weight: 400;
}

.feld-hilfe {
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

/*
 * Pflichtangabe. Axioms FieldLabel haengt der Beschriftung ein Sternchen an:
 * fg.error, Gewicht 400, 2px Abstand -- dazu ein "Pflichtangabe" nur fuer
 * Vorleseprogramme. Vorher trugen diese Felder dauerhaft die Klasse has-error
 * und damit einen roten Rand; der behauptete einen Fehler, wo nur eine Angabe
 * verlangt wird.
 *
 * Welche Angaben ein Elementtyp braucht, steht in generate/pruefung.php.
 */
.feld-pflicht {
  margin-inline-start: 2px;
  color: var(--ax-colors-fg-error);
  font-weight: 400;
}

.feld-fehler {
  color: var(--ax-colors-fg-error);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

/* Zwei Felder nebeneinander, unter dem schmalen Haltepunkt untereinander. */
.feld-paar {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 37.5rem) {
  .feld-paar { grid-template-columns: 1fr 1fr; }
}

/*
 * Der Fuss eines Formulars: die Knoepfe rechtsbuendig hinter einer Linie, wie
 * im Fuss eines Axiom-Dialogs. Es ist ein .feld, damit der Abstand zum letzten
 * Eingabefeld derselbe ist wie zwischen den Feldern.
 */
.feld-aktionen {
  flex-direction: row;
  justify-content: end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ax-colors-border-secondary);
}

/* In der Box unter "Benutzerdaten" sorgt deren gap fuer den Abstand. */
.einstellungen > .feld { margin-bottom: 0; }

/*
 * Zwei Bedienelemente unter einer Beschriftung -- Wert und Einheit bei PosX
 * und PosY. Sie teilen sich die Zeile; wird es zu eng, rutschen sie
 * untereinander.
 */
.feld-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feld-zeile > * {
  min-width: 6rem;
  flex: 1 1 0;
}

/*
 * Eine Reihe Schalter unter einer Beschriftung -- Fett/Kursiv/Unterstrichen,
 * die vier Rahmenseiten, die Ausrichtung. In der schmalen Spalte rechts
 * brechen sie um; den Abstand uebernimmt hier das gap.
 */
.feld-schalter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: var(--ax-size-lg);
}

.feld-schalter > .checkbox-inline + .checkbox-inline,
.feld-schalter > .radio-inline + .radio-inline { margin-inline-start: 0; }