/*
 * Standard-Theme. Setzt die Variablen, die basic.css anbietet, und gestaltet die Komponenten,
 * die zum Design passen müssen, komplett selbst (unten).
 * Liegt außerhalb der CSS-Layer und gewinnt damit immer gegen basic.css und Bootstrap.
 */
:root {
  --page-bg: #eef1f6;
  --header-bg: #1e293b;
  --header-text: #f8fafc;
  --subheader-bg: #334155;
  --subheader-text: #e2e8f0;
  --footer-bg: #1e293b;
  --footer-text: #94a3b8;
  --contentbox-border: #cbd5e1;
  --contentbox-header-bg: #e2e8f0;
  --contentbox-footer-bg: #f8fafc;
  --table-header-bg: #e2e8f0;
  --table-row-b-bg: #f1f5f9;
  --tile-hover-bg: #e0e7ff;
  --tile-hover-text: #3730a3;
  /* Benutzermenü: der Kopf im selben Verlauf wie das Hoverlay */
  --user-menu-head-bg: linear-gradient(135deg, #1e293b 0%, #312e81 100%);
  --user-menu-head-text: #f8fafc;
  --user-menu-item-hover-bg: #e0e7ff;
  --user-menu-item-hover-text: #3730a3;
  /* Profil */
  --profile-cover-from: #1e293b;
  --profile-cover-to: #312e81;
  --profile-cover-glow: #6366f1;
  --profile-online: #4f46e5;
  /* Matrix */
  --matrix-text: #0f172a;
  --matrix-head-bg: #eef1f6;
  --matrix-line: #cbd5e1;
  --matrix-active: #4f46e5;
  --matrix-group-bg: #dfe5ee;
  --matrix-read: #0891b2;
  --matrix-pending: #64748b;
}

/*
 * ===== Knöpfe nach Art =====
 * button-save: speichern, anlegen, hochladen, bestätigen (ConfirmButton)
 * button-cancel: abbrechen, zurück, im Popup schließen (CancelButton, „zurück zu …“ im Header); anthrazit, damit man
 *   den Ausweg überall sofort erkennt (User 2026-10-14)
 * button-other: alles andere
 */
.button-save,
.button-cancel,
.button-other {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.button-save:focus-visible,
.button-cancel:focus-visible,
.button-other:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.button-save:disabled,
.button-cancel:disabled,
.button-other:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button-save {
  border-color: #15803d;
  background: #16a34a;
  color: #ffffff;
}

.button-save:hover:not(:disabled) {
  background: #15803d;
}

.button-cancel {
  border-color: #27272a;
  background: #3f3f46;
  color: #f4f4f5;
}

.button-cancel:hover:not(:disabled) {
  background: #27272a;
  color: #ffffff;
}

/* „zurück zu …“ im Header, der Panikknopf: Rand in der Schriftfarbe, damit er heraussticht (User 2026-10-14) */
.button-cancel.header-back {
  border-color: currentColor;
}

.button-other {
  border-color: #94a3b8;
  background: #ffffff;
  color: #1e293b;
}

.button-other:hover:not(:disabled) {
  background: #f1f5f9;
}

/*
 * ===== Menüs im header: Sprache und Benutzer =====
 * Die Knöpfe sind nur Symbol oder Flagge mit dünnem hellem Rand, ohne Hintergrund; beim Hover wird der Rand weiß und die
 * Fläche hellt sich auf. Die Klappe sieht aus wie das Hoverlay, nur 90 % deckend. Beim Benutzermenü bleibt die Box
 * mit E-Mail, Session und Refresh eine eigene, deckende Box oben über dem Hoverlay.
 */
.header-icon-button {
  border: 1px solid rgb(255 255 255 / 0.45);
  background: transparent;
  color: inherit;
}

.header-icon-button:hover,
.header-icon-button:focus-visible,
.header-icon-button[aria-expanded='true'] {
  outline: none;
  border-color: #ffffff;
  background: rgb(255 255 255 / 0.14);
}

/*
 * Die Lupe: in Ruhe wie die anderen Knöpfe im header, nur Symbol mit hellem Rand. Beim Darüberfahren klappt sie auf
 * und leuchtet kräftig türkis (User 2026-10-14).
 */
.header-search {
  border-color: rgb(255 255 255 / 0.45);
  background: transparent;
  color: #ffffff;
}

.header-search:hover,
.header-search:focus-visible {
  outline: none;
  border-color: #2dd4bf;
  background: rgb(20 184 166 / 0.22);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(45 212 191 / 0.9),
    0 0 12px 2px rgb(20 184 166 / 0.85),
    0 0 26px 6px rgb(20 184 166 / 0.45);
}

.header-search-key {
  border: 1px solid rgb(153 246 228 / 0.55);
  background: rgb(20 184 166 / 0.3);
  color: inherit;
}

.user-menu-panel {
  border: 1px solid #475569;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, rgb(30 41 59 / 0.9) 0%, rgb(49 46 129 / 0.9) 100%);
  color: #f8fafc;
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.35);
}

.user-menu-head {
  border-bottom: 1px solid rgb(255 255 255 / 0.25);
  background: var(--user-menu-head-bg);
  color: var(--user-menu-head-text);
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: rgb(255 255 255 / 0.14);
  color: #ffffff;
}

.user-menu-divider {
  background: rgb(255 255 255 / 0.25);
}

/*
 * ===== Tabs im subheader =====
 * Hauchdünne Trennstriche zwischen den Tabs (nicht vor dem ersten), der aktive Tab indigo hinterlegt.
 * Neben dem aktiven und dem überfahrenen Tab verschwindet der Strich, die Fläche trennt dort schon.
 */
.subheader-tabs {
  gap: 0.5rem;
}

.subheader-tab {
  position: relative;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  color: inherit;
  text-decoration: none;
  transition:
    background 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

/* der Strich sitzt mittig in der Lücke (halber gap links vom Tab) */
.subheader-tab + .subheader-tab::before {
  content: '';
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: calc(-0.25rem - 0.5px);
  width: 1px;
  background: rgb(226 232 240 / 0.2);
  transition: opacity 0.15s ease-in-out;
}

.subheader-tab:hover {
  background: #475569;
  color: #ffffff;
}

.subheader-tab.active {
  background: #4f46e5;
  color: #ffffff;
}

.subheader-tab:hover::before,
.subheader-tab:hover + .subheader-tab::before,
.subheader-tab.active::before,
.subheader-tab.active + .subheader-tab::before {
  opacity: 0;
}

.subheader-tab:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: -2px;
}

/*
 * ===== Tabellen (components/Table, Klasse data-table) =====
 * Hauchdünne Striche zwischen den Spalten, deutlichere zwischen den Zeilen, damit sie auch dann unterscheidbar
 * bleiben, wenn Zeile A und B gleich aussehen.
 */
.data-table > :not(caption) > * > * {
  border-bottom: 1px solid rgb(15 23 42 / 0.2);
}

.data-table > :not(caption) > * > * + * {
  border-left: 1px solid rgb(15 23 42 / 0.08);
}

/* die letzte Zeile braucht keinen Strich, darunter kommt der Rand des contentbox-footer */
.data-table > tbody > tr:last-child > * {
  border-bottom: none;
}

/* Ein Spaltenkopf mit Erklärung im Hoverlay: gepunktet unterstrichen, damit man sieht, dass es etwas zu lesen gibt */
.table-header-hinted {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}

/*
 * ===== Hoverlay =====
 * Das aufpoppende Feld für alle Hinweistexte, später auch der Hintergrund der A4-Seiten im Browser.
 * Immer ein Verlauf, auf dem Text an jeder Stelle lesbar bleibt: hier zwei dunkle Töne mit heller Schrift.
 * Nie etwa von Weiß nach Schwarz, dann gäbe es eine Stelle ohne Kontrast.
 */
.hoverlay {
  padding: 0.375rem 0.625rem;
  border: 1px solid #475569;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #1e293b 0%, #312e81 100%);
  color: #f8fafc;
  font-size: 0.8125rem;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.35);
}

/* Gedämpfter Text und Code im Hoverlay: hell, Bootstraps Grau und Pink sind für hellen Grund gemacht. Das !important
   schlägt Bootstraps eigenes !important an text-muted. */
.hoverlay .text-muted,
.hoverlay-box .text-muted {
  color: #c7d2fe !important;
}

.hoverlay code,
.hoverlay-box code {
  color: #fde68a;
}

/* Längere Erklärungen im Hoverlay, z. B. zu den Solr-Einstellungen: Titel fett, darunter die Absätze mit Luft */
.hoverlay-explanation {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  white-space: normal;
  text-align: left;
}

.hoverlay-explanation strong {
  display: block;
  color: #c7d2fe;
}

/* Die zentrale Tabelle im Hoverlay: in den Farben des Hoverlays, mit feinen hellen Strichen */
.hoverlay-explanation .data-table {
  --bs-table-color: #f8fafc;
  --bs-table-bg: transparent;
  --bs-table-striped-color: #f8fafc;
  --bs-table-striped-bg: rgb(255 255 255 / 0.06);
  --bs-table-border-color: rgb(255 255 255 / 0.25);
  font-size: inherit;
}

.hoverlay-explanation .data-table > :not(caption) > * > * {
  border-bottom-color: rgb(255 255 255 / 0.25);
}

.hoverlay-explanation .data-table > :not(caption) > * > * + * {
  border-left-color: rgb(255 255 255 / 0.12);
}

/*
 * Die Hilfe der Suche (SearchHelp): jedes Zeichen in seiner eigenen kräftigen Farbe, + grün, - rot, fsc. bernstein,
 * msc. himmelblau, damit man es im Feld wiedererkennt. Die Beispiele auf einer etwas helleren Fläche, die Eingabe hell
 * wie das echte Suchfeld.
 */
.search-help-rule,
.search-help-keys {
  border-top-color: rgb(255 255 255 / 0.18);
}

.search-help-operator-words,
.search-help-operator-switch {
  border-color: #cbd5e1;
  background: rgb(203 213 225 / 0.12);
  color: #f1f5f9;
}

.search-help-operator-plus {
  border-color: #4ade80;
  background: rgb(74 222 128 / 0.16);
  color: #4ade80;
}

.search-help-operator-minus {
  border-color: #f87171;
  background: rgb(248 113 113 / 0.16);
  color: #f87171;
}

.search-help-operator-fsc {
  border-color: #fbbf24;
  background: rgb(251 191 36 / 0.16);
  color: #fbbf24;
}

.search-help-operator-msc {
  border-color: #38bdf8;
  background: rgb(56 189 248 / 0.16);
  color: #38bdf8;
}

.search-help-switch {
  background: #22c55e;
}

.search-help-switch::after {
  background: #ffffff;
}

.search-help-example {
  background: rgb(255 255 255 / 0.07);
}

.search-help-example-label {
  color: #fde68a;
}

.search-help-example-caption,
.search-help-note {
  color: #c7d2fe;
}

.search-help-input {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #94a3b8;
  color: #0f172a;
}

/* in der hellen Eingabe dunklere Töne derselben Farben, sonst wären sie auf Weiß kaum zu lesen */
.search-help-input-operator-plus {
  color: #15803d;
}

.search-help-input-operator-minus {
  color: #dc2626;
}

.search-help-input-operator-fsc {
  color: #b45309;
}

.search-help-input-operator-msc {
  color: #0369a1;
}

.search-help-chip-fsc {
  border-color: #d97706;
  background: #fef3c7;
  color: #0f172a;
}

.search-help-chip-fsc .search-help-chip-symbol {
  background: #d97706;
}

.search-help-chip-msc {
  border-color: #0284c7;
  background: #e0f2fe;
  color: #0f172a;
}

.search-help-chip-msc .search-help-chip-symbol {
  background: #0284c7;
}

.search-help-hit mark {
  background: rgb(253 230 138 / 0.4);
}

.search-help-hit mark.search-help-mark-reason {
  background: rgb(248 113 113 / 0.55);
}

.search-help-hit .search-help-hit-sign {
  color: #4ade80;
}

.search-help-hit-dropped {
  color: #94a3b8;
}

.search-help-hit-dropped .search-help-hit-sign,
.search-help-hit-reason {
  color: #fca5a5;
}

.search-help-key kbd {
  border: 1px solid #94a3b8;
  background: #f1f5f9;
  color: #0f172a;
}

/* Eine Box im Aussehen des Hoverlays, fest in der Seite, z. B. der Hook-Katalog im Kern-Tab */
.hoverlay-box {
  border: 1px solid #475569;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, #1e293b 0%, #312e81 100%);
  color: #f8fafc;
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.35);
}

/*
 * ===== SolrHookCatalog =====
 * Die Gruppenzeile wie ein Spaltenkopf, die Einträge mit feinen Strichen wie Tabellenzeilen, in der Hook-Auswahl mit
 * einer Hover-Tonung in der Aktivfarbe. Die Fundstelle des Suchtexts im Feldnamen als mark in derselben Tonung. In
 * der Hoverlay-Box helle Striche.
 */
.solr-hook-catalog-group {
  border-bottom: 2px solid rgb(15 23 42 / 0.2);
}

.solr-hook-catalog-entry {
  border-bottom: 1px solid rgb(15 23 42 / 0.08);
}

button.solr-hook-catalog-entry:hover,
button.solr-hook-catalog-entry:focus-visible {
  background: rgb(79 70 229 / 0.08);
}

.solr-hook-catalog-key mark,
.file-sub-class-picker-name mark {
  padding: 0 0.15rem;
  border-radius: 2px;
  background: rgb(79 70 229 / 0.25);
  color: inherit;
  font-weight: 600;
}

.hoverlay-box .solr-hook-catalog-group {
  border-bottom-color: rgb(255 255 255 / 0.35);
}

.hoverlay-box .solr-hook-catalog-entry {
  border-bottom-color: rgb(255 255 255 / 0.15);
}

/* Das Vorschaubild auf einem Schachbrett, damit die transparenten Ränder zu sehen sind */
.dms-preview-image {
  border: 1px solid #cbd5e1;
  background: repeating-conic-gradient(#cbd5e1 0 25%, #f8fafc 0 50%) 0 0 / 20px 20px;
}

/*
 * ===== Dropzone für Dateien =====
 * Gestrichelter Rahmen in Ruhe zurückgenommen, beim Zeigen und beim Darüberziehen in der Akzentfarbe.
 */
.file-dropzone {
  border-color: #94a3b8;
  color: #475569;
}

.file-dropzone:hover:not(:disabled),
.file-dropzone-dragover {
  border-color: #4f46e5;
  background: rgb(79 70 229 / 0.06);
  color: #1e293b;
}

.file-dropzone:disabled,
.file-dropzone-camera:disabled {
  opacity: 0.6;
}

.file-dropzone-camera {
  border-color: #94a3b8;
}

.file-dropzone-camera:hover:not(:disabled) {
  border-color: #4f46e5;
}

/*
 * ===== Dateiart-Auswahl =====
 * Kacheln gedimmt, beim Zeigen voll, die Wahl voll mit Ring. Der Ring ist ein box-shadow, kein outline: Er gehört zum
 * Malvorgang des Elements, folgt dem Radius und ist sofort da. Die Regel für die Wahl steht nach :disabled, sonst
 * verschwände die getroffene Wahl, sobald die Auswahl gesperrt wird, gerade dann muss sie sichtbar sein.
 */
.file-sub-class-picker-tile {
  opacity: 0.75;
}

.file-sub-class-picker-tile:hover:not(:disabled),
.file-sub-class-picker-tile:focus-visible {
  opacity: 1;
  background: rgb(79 70 229 / 0.08);
}

.file-sub-class-picker-tile:disabled {
  opacity: 0.35;
}

.file-sub-class-picker-tile.active {
  opacity: 1;
  box-shadow: 0 0 0 2px #4f46e5;
}

/*
 * ===== Toasts =====
 * Schwebende Karten unten rechts. Wie beim Hoverlay ein Verlauf aus dunklen Tönen, auf dem die helle Schrift an jeder
 * Stelle lesbar bleibt, dazu ein weicher Lichtschein links oben und ein Glühen in der Farbe der Art.
 * Gleitet von rechts herein, das Symbol springt kurz auf, unten läuft ein leuchtender Balken ab: So lange bleibt der
 * Toast stehen (--app-toast-duration kommt aus der Komponente). Ruht die Maus darauf, hält der Balken an
 * (app-toast-paused). Das Ausblenden (app-toast-leaving) darf höchstens 300 ms dauern.
 */
.app-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 22rem;
  max-width: 100%;
  padding: 0.875rem 2.5rem 1.05rem 0.875rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.875rem;
  color: #f8fafc;
  text-align: left;
  box-shadow:
    0 18px 40px -14px var(--app-toast-glow),
    0 6px 16px -6px rgb(15 23 42 / 0.45),
    inset 0 1px 0 rgb(255 255 255 / 0.2);
  animation: app-toast-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

/* Lichtschein links oben, über dem Symbol. Die Schrift liegt dort, wo er schon fast verblasst ist. */
.app-toast::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 95% at 0% 0%, rgb(255 255 255 / 0.17) 0%, transparent 55%);
  pointer-events: none;
}

/* geschafft: Smaragd über Petrol nach Indigo */
.app-toast-success {
  --app-toast-glow: rgb(16 185 129 / 0.55);
  --app-toast-bar: linear-gradient(90deg, #6ee7b7 0%, #67e8f9 50%, #a5b4fc 100%);
  background: linear-gradient(135deg, #065f46 0%, #0f766e 45%, #3730a3 100%);
}

/* schiefgegangen: Weinrot über Rot nach Beere */
.app-toast-error {
  --app-toast-glow: rgb(220 38 38 / 0.55);
  --app-toast-bar: linear-gradient(90deg, #fca5a5 0%, #fdba74 50%, #f9a8d4 100%);
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 50%, #9d174d 100%);
}

/* zur Kenntnis: Schiefer über Königsblau nach Indigo, wie das Hoverlay */
.app-toast-info {
  --app-toast-glow: rgb(79 70 229 / 0.55);
  --app-toast-bar: linear-gradient(90deg, #93c5fd 0%, #a5b4fc 50%, #c4b5fd 100%);
  background: linear-gradient(135deg, #1e293b 0%, #1e40af 50%, #312e81 100%);
}

/* Upload läuft: Bernstein über Orange nach Indigo, der Balken unten zeigt den Fortschritt */
.app-toast-upload {
  --app-toast-glow: rgb(245 158 11 / 0.55);
  --app-toast-bar: linear-gradient(90deg, #fde68a 0%, #fdba74 50%, #a5b4fc 100%);
  background: linear-gradient(135deg, #78350f 0%, #c2410c 50%, #312e81 100%);
}

.app-toast-icon {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.3),
    0 0 18px var(--app-toast-glow);
  font-size: 1.1rem;
  line-height: 1;
  animation: app-toast-icon-pop 0.55s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.app-toast-icon i::before,
.app-toast-close i::before {
  vertical-align: 0;
}

.app-toast-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.1rem;
}

.app-toast-title {
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.app-toast-text {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgb(248 250 252 / 0.88);
}

.app-toast-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.app-toast-close:hover {
  background: rgb(255 255 255 / 0.16);
  color: #ffffff;
}

.app-toast-close:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: 1px;
}

/* der ablaufende Balken unten */
.app-toast-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--app-toast-bar);
  box-shadow: 0 0 8px rgb(255 255 255 / 0.45);
  transform-origin: left center;
  animation: app-toast-countdown var(--app-toast-duration) linear forwards;
}

.app-toast-paused .app-toast-progress {
  animation-play-state: paused;
}

/* Der Balken zeigt einen Fortschritt statt der Zeit: keine Animation, der Stand kommt aus der Komponente */
.app-toast-progress-manual {
  animation: none;
  transition: transform 0.25s ease-out;
}

/*
 * ===== DMS-Stapelmaske =====
 * Fertige Zeilen grün, gescheiterte rot, über die Variablen der Bootstrap-Tabelle, sonst deckt die Streifung sie zu.
 */
.table > tbody > tr.dms-upload-row-done > * {
  --bs-table-bg-state: rgb(16 185 129 / 0.2);
}

.table > tbody > tr.dms-upload-row-failed > * {
  --bs-table-bg-state: rgb(220 38 38 / 0.14);
}

.dms-upload-countdown {
  background: rgb(15 23 42 / 0.12);
}

.dms-upload-countdown-bar {
  background: #10b981;
}

.app-toast-leaving {
  opacity: 0;
  transform: translateX(2rem) scale(0.96);
}

@keyframes app-toast-in {
  from {
    opacity: 0;
    transform: translateX(2.5rem) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes app-toast-icon-pop {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes app-toast-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* wer weniger Bewegung will: nur ein- und ausblenden, der Balken bleibt als Anzeige */
@media (prefers-reduced-motion: reduce) {
  .app-toast,
  .app-toast-icon {
    animation: none;
  }

  .app-toast {
    transition: opacity 0.2s linear;
  }

  .app-toast-leaving {
    transform: none;
  }
}

/*
 * ===== PasswordButton, EditButton, DeleteButton, ViewButton, DetailsButton, DownloadButton, NewVersionButton und
 * ShareButton =====
 * Bearbeiten immer in Gelb- und Brauntönen, Löschen immer in Rottönen, Ansehen in Blau, Details in Grün, Herunterladen
 * in Türkis, neue Fassung in Grau, Freigeben in Violett (User 2026-10-14). Wie genau, entscheidet das Theme. Der
 * Schlüssel zum Passwortsetzen ist hier petrol.
 */
.password-button,
.edit-button,
.delete-button,
.view-button,
.details-button,
.download-button,
.new-version-button,
.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease-in-out,
    color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.password-button {
  border-color: #0891b2;
  background: #cffafe;
  color: #155e75;
}

.password-button:hover:not(:disabled) {
  background: #a5f3fc;
  color: #164e63;
  box-shadow: 0 1px 3px rgb(21 94 117 / 0.35);
}

.edit-button {
  border-color: #d97706;
  background: #fef3c7;
  color: #92400e;
}

.edit-button:hover:not(:disabled) {
  background: #fde68a;
  color: #78350f;
  box-shadow: 0 1px 3px rgb(146 64 14 / 0.35);
}

.delete-button {
  border-color: #ef4444;
  background: #fee2e2;
  color: #b91c1c;
}

.delete-button:hover:not(:disabled) {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
  box-shadow: 0 1px 3px rgb(185 28 28 / 0.4);
}

/* der schlanke Mülleimer in einem Badge (User 2026-10-22, wie der Papierkorb der Vorlage): nur das rote Symbol */
.delete-button-slim {
  display: inline-flex;
  align-items: center;
  padding: 0 0.1rem;
  border: none;
  background: transparent;
  color: #dc2626;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.delete-button-slim:hover:not(:disabled) {
  color: #991b1b;
}

.delete-button-slim:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

.delete-button-slim:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* das rote × an einem Zusatz in der Vorschau des Satzes: nimmt ihn nur aus dem Satz, löscht nichts (User 2026-10-22) */
.span-dc-remove {
  margin-left: 0.2rem;
  padding: 0 0.15rem;
  border: none;
  background: transparent;
  color: #dc2626;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.span-dc-remove:hover {
  color: #991b1b;
}

.span-dc-remove:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

.view-button {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1d4ed8;
}

.view-button:hover:not(:disabled) {
  background: #bfdbfe;
  color: #1e40af;
  box-shadow: 0 1px 3px rgb(29 78 216 / 0.35);
}

.details-button {
  border-color: #16a34a;
  background: #dcfce7;
  color: #15803d;
}

.details-button:hover:not(:disabled) {
  background: #bbf7d0;
  color: #166534;
  box-shadow: 0 1px 3px rgb(21 128 61 / 0.35);
}

/* Ein Link, kein Knopf: ohne Unterstrich */
.download-button {
  border-color: #0d9488;
  background: #ccfbf1;
  color: #0f766e;
  text-decoration: none;
}

.download-button:hover {
  background: #99f6e4;
  color: #115e59;
  box-shadow: 0 1px 3px rgb(15 118 110 / 0.35);
}

.new-version-button {
  border-color: #64748b;
  background: #e2e8f0;
  color: #334155;
}

.new-version-button:hover:not(:disabled) {
  background: #cbd5e1;
  color: #1e293b;
  box-shadow: 0 1px 3px rgb(51 65 85 / 0.35);
}

.share-button {
  border-color: #7c3aed;
  background: #ede9fe;
  color: #6d28d9;
}

.share-button:hover:not(:disabled) {
  background: #ddd6fe;
  color: #5b21b6;
  box-shadow: 0 1px 3px rgb(109 40 217 / 0.35);
}

.password-button:focus-visible,
.edit-button:focus-visible,
.delete-button:focus-visible,
.view-button:focus-visible,
.details-button:focus-visible,
.download-button:focus-visible,
.new-version-button:focus-visible,
.share-button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.password-button:disabled,
.edit-button:disabled,
.delete-button:disabled,
.view-button:disabled,
.details-button:disabled,
.new-version-button:disabled,
.share-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/*
 * ===== NewEntityButton =====
 * Ruhezustand: runder Knopf mit +. Beim Hover wächst der Knopf selbst und zieht „new <Entity>()“ auf,
 * so bleibt die Maus immer auf ihm und nichts flackert. Animiert wird max-width, weil sich width
 * von auto aus nicht animieren lässt.
 */
.new-entity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  border: 1px solid #4338ca;
  border-radius: 999px;
  /* gewölbt: Licht von oben, die Wende knapp über der Mitte */
  background: linear-gradient(to bottom, #6366f1 0%, #4f46e5 48%, #4338ca 100%);
  color: #ffffff;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 1px 2px rgb(15 23 42 / 0.35);
  transition:
    background 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    padding 0.2s ease-in-out;
}

.new-entity-button .bi {
  font-size: 1.05rem;
}

.new-entity-button:hover:not(:disabled),
.new-entity-button:focus-visible:not(:disabled) {
  padding: 0 0.9rem 0 0.6rem;
  background: linear-gradient(to bottom, #818cf8 0%, #6366f1 48%, #4f46e5 100%);
}

/* gedrückt sinkt er ein */
.new-entity-button:active:not(:disabled) {
  box-shadow: inset 0 2px 3px rgb(15 23 42 / 0.45);
}

/* gesperrt: flach, grau, klappt nicht auf */
.new-entity-button:disabled {
  border-color: #cbd5e1;
  background: #cbd5e1;
  color: #64748b;
  box-shadow: none;
  cursor: not-allowed;
}

.new-entity-button-text {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  font-weight: 600;
  transition:
    max-width 0.24s ease-in-out,
    margin-left 0.24s ease-in-out,
    opacity 0.16s ease-in-out;
}

.new-entity-button:hover:not(:disabled) .new-entity-button-text,
.new-entity-button:focus-visible:not(:disabled) .new-entity-button-text {
  max-width: 24rem;
  margin-left: 0.4rem;
  opacity: 1;
}

/*
 * ===== AbasOpenButton: in ABAS öffnen =====
 * Ein heller Knopf, denn die Bildmarke behält die Farben von abas und das Dunkelblau wäre auf dunklem Grund unsichtbar.
 * Groß steht „öffnen“ dauerhaft offen; beim Hover zieht es sich zu und die Sternzeit geht auf, derselbe Atem wie beim
 * NewEntityButton. Schmal: nur die Marke im runden Knopf, ein Stück niedriger, damit er in einer Tabellenzeile bleibt.
 */
.abas-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.8rem;
  /* kein gap: den Abstand trägt die Beschriftung als margin-left, der mit ihr auf- und zugezogen wird */
  padding: 0 0.7rem 0 0.4rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 0.85);
  color: #112033;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 0.15s ease-in-out,
    background-color 0.15s ease-in-out;
}

.abas-open-button:hover,
.abas-open-button:focus-visible {
  border-color: #4f46e5;
  background-color: #ffffff;
  color: #112033;
}

.abas-open-button-mark {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.abas-open-button-text {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width 0.24s ease-in-out,
    margin-left 0.24s ease-in-out,
    opacity 0.16s ease-in-out;
}

.abas-open-button-text-hover {
  font-variant-numeric: tabular-nums;
}

.abas-open-button-text-open,
.abas-open-button:hover .abas-open-button-text-hover,
.abas-open-button:focus-visible .abas-open-button-text-hover {
  max-width: 24rem;
  margin-left: 0.4rem;
  opacity: 1;
}

/* der Gegenzug: „öffnen“ zieht sich zu, sobald die Sternzeit aufgeht; steht nach der Regel oben, damit es beim Hover gewinnt */
.abas-open-button:hover .abas-open-button-text-open,
.abas-open-button:focus-visible .abas-open-button-text-open {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}

.abas-open-button-compact {
  height: 1.5rem;
  width: 1.5rem;
  padding: 0;
}

.abas-open-button-compact .abas-open-button-mark {
  width: 1rem;
  height: 1rem;
}