/* Titillium Web – Hausschrift der QuACX GmbH (SIL Open Font License, siehe fonts/OFL.txt) */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/TitilliumWeb-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/TitilliumWeb-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/TitilliumWeb-Bold.ttf') format('truetype');
}

html, body {
    font-family: 'Titillium Web', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---- Listen über die gesamte verfügbare Höhe ------------------------------------------------
   Der Inhaltsbereich ist eine Flex-Spalte über die volle Fensterhöhe. Listen auf oberster
   Seitenebene wachsen dynamisch auf die verbleibende Höhe (nach Kopfzeile, Titel, Toolbar,
   Filterbereich und Zusatzbereichen); nur der Tabellenkörper scrollt, Toolbar und Pager
   bleiben sichtbar. Ohne feste Höhen oder max-height-Begrenzungen: Der interne Scrollbalken
   erscheint erst, wenn die tatsächliche Fensterhöhe vollständig genutzt ist. Seiten ohne
   Listen scrollen unverändert im Inhaltsbereich. */

.mud-main-content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Der Inhalt liegt seit dem Umbau auf das Erscheinungsbild der Schwesteranwendungen in einem
   MudContainer. Der schiebt sich zwischen MudMainContent und die Liste — die Vollhoehen-Kette
   muss deshalb durch ihn hindurchreichen, sonst verlieren alle Listen Innenscrollen und
   fixierte Kopfzeile auf einen Schlag. */
.mud-main-content > .mud-container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Der Container ist eine Flex-Spalte fester Fensterhoehe. Ohne diese Regel darf jeder
   Seitenblock darin schrumpfen — und Bloecke mit eigenem overflow (MudTabs traegt mit
   Rounded ein overflow:hidden) schrumpfen bis auf null: Das Register wird gestaucht, sein
   Inhalt abgeschnitten, und weil nichts mehr uebersteht, gibt es auch nichts zu scrollen.
   Genau das passierte auf der Projektdetailseite in einem niedrigen Fenster. Seitenbloecke
   behalten deshalb ihre Inhaltshoehe; der Ueberstand landet im Bildlauf des Inhaltsbereichs.
   Die Liste bleibt davon ausgenommen — die Regel darunter ist spezifischer und gibt ihr
   weiterhin flex: 1 1 auto, also die volle Resthoehe mit Innenscrollen. */
.mud-main-content > .mud-container > * {
    flex-shrink: 0;
}

.mud-main-content .mud-container > .mud-table {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mud-main-content .mud-container > .mud-table > .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: none !important;
    height: auto !important;
}

/* Kopfzeile der Liste bleibt beim internen Scrollen sichtbar */
.mud-main-content .mud-container > .mud-table > .mud-table-container > table > thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface);
}
/* Gemeinsamer Listenstandard: Filterzeilen reagieren auf Maus, Fokus und den
   zentral gesetzten Hover-/Touch-Zustand. */
.mud-table thead tr:has(.mud-input-control),
.list-standard-table thead tr.list-filter-row {
    display: none !important;
}

.mud-table thead.list-filter-hover-open tr:has(.mud-input-control),
.mud-table thead:focus-within tr:has(.mud-input-control),
.mud-table thead.list-filter-open tr:has(.mud-input-control),
.list-standard-table thead.list-filter-hover-open tr.list-filter-row,
.list-standard-table thead:focus-within tr.list-filter-row,
.list-standard-table thead.list-filter-open tr.list-filter-row {
    display: table-row !important;
}

.list-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.list-toolbar__leading,
.list-toolbar__actions,
.list-toolbar__templates,
.list-toolbar__hierarchy,
.list-toolbar__tools,
.list-toolbar__search,
.list-toolbar__filters,
.list-toolbar__trash,
.list-toolbar-switch {
    display: flex;
    align-items: center;
}

.list-toolbar__spacer { flex: 1 1 24px; }
.list-toolbar__search { flex: 0 1 320px; }
.list-toolbar__search .mud-input-control { width: 100%; }
.list-toolbar-switch { gap: 4px; white-space: nowrap; }

/* Die ListToolbar füllt die Toolbar der Tabelle. */
.mud-table-toolbar > .list-toolbar { flex: 1 1 auto; }
.list-toolbar__actions,
.list-toolbar__filters { gap: 8px; }

@media (max-width: 700px) {
    .list-toolbar__spacer { flex-basis: 100%; height: 0; }
    .list-toolbar__search { flex: 1 1 220px; }
}
.document-actions-cell, .document-actions-header {
    white-space: nowrap;
    text-align: right !important;
    justify-content: flex-end;
}
.document-actions-cell { display: flex; align-items: center; padding-left: 8px !important; padding-right: 16px !important; }

/* Rollentabelle im Konfigurations-Template: Festes Spaltenlayout, damit lange
   Beschreibungen gekürzt werden (Tooltip) statt die Aktionsspalte aus dem sichtbaren
   Bereich zu schieben. Unterhalb des Tabellen-Breakpoints gilt das Kartenlayout. */
@media (min-width: 600px) {
    .role-list-table .mud-table-root { table-layout: fixed; width: 100%; }
    .role-list-table tbody .mud-table-cell { overflow: hidden; text-overflow: ellipsis; }
}

.list-title-ellipsis {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Zeilenaktionen stehen dauerhaft da. Bis zum Umbau auf das Erscheinungsbild der
   Schwesteranwendungen erschienen sie erst nach 400 ms Annaeherung; das war sparsam,
   aber es zwang dazu, jede Zeile einzeln anzufahren, um zu sehen, was moeglich ist.
   Die Klasse bleibt als reine Layoutklasse bestehen - sie haelt die Icons in einer
   Zeile und verhindert Umbrueche. */
.delayed-row-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.mud-table-cell:has(.delayed-row-actions) {
    white-space: nowrap;
}

/* Aktions-Icons: das Icon unter dem Cursor hebt farblich hervor (app-weiter Standard).
   Destruktive Aktionen (Löschen/Endgültig löschen — erkennbar am Material-Delete-Pfad)
   warnen in Error-Rot; in der farbigen AppBar bleibt die vererbte Farbe erhalten. */
.mud-icon-button:hover {
    color: var(--mud-palette-primary);
}

.mud-icon-button:hover:has(path[d^="M6 19c0"]) {
    color: var(--mud-palette-error);
}

.mud-appbar .mud-icon-button:hover {
    color: inherit;
}

/* ---------- Kopf- und Seitenleiste in dunklem Türkis ----------
   Farbwerte stammen aus der Petrol-Reihe des QuACX-Corporate-Designs:
   #1e698c (Kopfleiste), #10556f (Seitenleiste), #faa500 (Orange als Akzent). */

.quacx-appbar {
    /* Feine Kante, damit sich Kopf- und Seitenleiste trotz ähnlicher Farbe trennen */
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.quacx-appbar-untertitel {
    color: rgba(255, 255, 255, .65);
}

.quacx-appbar-version {
    font-size: .75rem;
    color: rgba(255, 255, 255, .45);
}

.quacx-logo {
    height: 30px;
}

/* Das Menü füllt die Höhe der Menüleiste, damit der untere Block (Einstellungen, Tutorial,
   Anleitung, Konto) an den unteren Rand rückt.
   Reicht der Platz nicht, folgt er wie gewohnt den übrigen Einträgen. Alle anderen Einträge
   bleiben oben links und in voller Breite.
   Nur das oberste Menü: MudNavGroup legt seine Einträge in ein eigenes `mud-navmenu`. */
.quacx-drawer .mud-drawer-content > .mud-navmenu {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

/* MudBlazor gibt `mud-divider-fullwidth` ein `flex: 1 0 auto` mit. In der Spalte oben schluckte
   die Trennlinie sonst den freien Platz und schob Struktur und Administration nach unten. */
.quacx-drawer .mud-drawer-content > .mud-navmenu > .mud-divider {
    flex: 0 0 auto;
}

.quacx-drawer .quacx-nav-bottom {
    margin-top: auto;
}

/* Navigationseinträge auf dunklem Grund.

   Die Selektoren tragen absichtlich `.mud-navmenu` und `:not(.mud-nav-link-disabled)` mit:
   MudBlazor färbt den aktiven Eintrag über `.mud-navmenu.mud-navmenu-default .mud-nav-link.active
   :not(.mud-nav-link-disabled)` und das Symbol über `.mud-nav-link:not(.mud-nav-link-disabled)
   .mud-nav-link-icon.mud-nav-link-icon-default`. Ohne diesen Ballast liegen unsere Regeln in der
   Spezifität darunter und bleiben wirkungslos -- die Seitenleiste zeigte dann MudBlazors
   Standardfärbung statt des Orange. */
.quacx-drawer .mud-navmenu .mud-nav-link:not(.mud-nav-link-disabled) {
    color: rgba(255, 255, 255, .82);
}

.quacx-drawer .mud-navmenu .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: inherit;
}

.quacx-drawer .mud-navmenu .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) {
    background-color: rgba(255, 255, 255, .08);
    color: #ffffff;
}

/* Aktiver Eintrag: Orange als Akzent, links abgesetzt */
.quacx-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #ffffff;
    background-color: rgba(250, 165, 0, .22);
    box-shadow: inset 3px 0 0 0 #faa500;
}

.quacx-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
    background-color: rgba(250, 165, 0, .3);
}

.quacx-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: #faa500;
}

/* Menueblock des aktiven Projekts: Schrift in Orange, damit der Projektkontext sich vom
   allgemeinen Menue abhebt. Die Selektoren tragen denselben Ballast wie oben, sonst
   gewinnt die allgemeine Eintragsfarbe. Der aktive Eintrag behaelt seine Hervorhebung
   ueber Hintergrund und Randstrich. */
.quacx-drawer .quacx-active-project .mud-typography,
.quacx-drawer .quacx-active-project .mud-navmenu .mud-nav-link:not(.mud-nav-link-disabled),
.quacx-drawer .quacx-active-project .mud-nav-link:not(.mud-nav-link-disabled),
.quacx-drawer .quacx-active-project .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.quacx-drawer .quacx-active-project .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled),
.quacx-drawer .quacx-active-project .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: #faa500;
}

.quacx-drawer .mud-divider {
    border-color: rgba(255, 255, 255, .15);
}

/* ---------- Verweise in der Farbe der Kopfleiste ----------
   MudLink faerbt sich standardmaessig in Primary, also Orange -- dieselbe Farbe, die die
   Hauptaktion einer Seite traegt. Verweise sind aber keine Handlungsaufforderungen; sie
   nehmen deshalb das Petrol der Kopfleiste auf. Orange bleibt damit dem Knopf vorbehalten.

   Der Selektor traegt `.mud-primary-text` mit: MudBlazor setzt die Standardfarbe ueber
   `.mud-primary-text{color:...!important}`. Zwei Klassen schlagen eine -- und zugleich
   bleiben ausdrueckliche Farben unberuehrt, etwa `Color="Color.Error"` beim Loeschverweis
   in den Kontodaten, der `.mud-error-text` traegt und hier gar nicht erst erfasst wird.

   Zwei Werte, weil kein einzelner in beiden Modi lesbar ist: #1e698c ist exakt die
   Kopfleiste (QuacxTheme.Petrol, 6,1 Kontrast auf Weiss); im dunklen Modus ist die
   Kopfleiste fast schwarz und damit als Schriftfarbe unbrauchbar, dort steht derselbe
   Farbton aufgehellt (198 Grad wie Petrol, 7,2 Kontrast auf der dunklen Flaeche).
   `color-scheme` steht am Element selbst -- MudBlazor fuehrt den aktiven Modus in
   `--mud-native-html-color-scheme`, setzt ihn aber nur auf Eingabefeldern; ohne diese
   Zeile haette `light-dark()` hier nichts, woran es sich entscheiden koennte. */

.mud-link.mud-primary-text,
.mud-breadcrumb-item:not(.mud-disabled) > a {
    color-scheme: var(--mud-native-html-color-scheme, light);
    color: light-dark(#1e698c, #6fb6d6) !important;
}

.mud-link.mud-primary-text:hover,
.mud-link.mud-primary-text:focus-visible,
.mud-breadcrumb-item:not(.mud-disabled) > a:hover,
.mud-breadcrumb-item:not(.mud-disabled) > a:focus-visible {
    color: light-dark(#10556f, #9ed2e8) !important;
}

/* Das Logo in der Kopfleiste ist ebenfalls ein MudLink. Auf dem Petrol der Leiste selbst
   waere Petrol unsichtbar -- dort gilt weiterhin die vererbte Schriftfarbe. */
.mud-appbar .mud-link.mud-primary-text,
.mud-appbar .mud-link.mud-primary-text:hover {
    color: inherit !important;
}

/* ---------- Hauptaktion im Stil der Website ----------
   quacx.eu setzt seine Handlungsaufforderungen als orange Pille in Versalien. Diese Klasse
   bringt genau diese Form in die Anwendung -- fuer die EINE Hauptaktion einer Seite, nicht
   fuer jeden gefuellten Knopf: Es gibt 91 davon, und wenn alle rufen, ruft keiner.

   Anzuwenden als Class="quacx-cta" an einem MudButton. Die Klasse traegt .mud-button-root
   mit, weil MudBlazor Farbe und Grund ueber .mud-button-filled.mud-button-filled-primary
   setzt -- zwei Klassen. Ohne diesen Ballast laege die Regel darunter und bliebe wirkungslos.

   Die Farbe kommt bewusst aus der Palette und nicht als fester Wert: Aendert sich die
   Primaerfarbe, folgt die Hauptaktion. */

.mud-button-root.quacx-cta {
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .02em;
    padding-inline: 1.75rem;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.mud-button-root.quacx-cta:hover,
.mud-button-root.quacx-cta:focus-visible,
.mud-button-root.quacx-cta:active {
    background-color: var(--mud-palette-primary-darken);
}

/* ---------- Gliederung einer Fassung (wie im DocManager) ----------
   Eine umrandete Fläche ohne Spaltenkopf; je Kapitel eine Zeile mit blauer Nummer direkt
   vor dem Titel, Unterkapitel eingerückt, Bedienelemente rechts. Die Zeilenhöhe entspricht
   der Kopfzeile einer Aufklapp-Klappe (48 px). */

.chapter-outline {
    border: 1px solid var(--mud-palette-divider);
}

.chapter-outline .mud-table-body .mud-table-cell {
    height: 48px;
}

.chapter-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.chapter-group-slot {
    flex: 0 0 24px;
    width: 24px;
    display: inline-flex;
    justify-content: center;
}

.chapter-number {
    color: var(--mud-palette-primary);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.chapter-title {
    font-size: 0.875rem;
    font-weight: 400;
}

.chapter-title-main {
    font-weight: 500;
}

/* Schlanke Knöpfe der Kapitelzeile (ChapterMoveButtons): sehen aus wie ein kleiner
   MudIconButton, kommen aber ohne dessen Hülle und Klassenliste aus — sie stehen an jeder
   Kapitelzeile, und jedes Zeichen geht in Blazor Server über die Verbindung. */
.chapter-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-action-default);
    cursor: pointer;
}

.chapter-move svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.chapter-move:hover {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-primary);
}

.chapter-move:disabled {
    color: var(--mud-palette-action-disabled);
    background: transparent;
    cursor: default;
    pointer-events: none;
}

.chapter-outline td.chapter-status {
    width: 130px;
}

.chapter-outline td.chapter-actions {
    width: 1%;
}

.chapter-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.chapter-outline tr.chapter-row-open > td {
    background-color: var(--mud-palette-action-default-hover);
}

.chapter-outline td.chapter-detail {
    padding: 16px 24px;
}

/* ---------- Suchtreffer in einem Inhalt (Kapitelliste) ----------
   Der Ausschnitt steht unter dem Kapiteltitel und nennt den Grund des Treffers. Er darf die
   Zeile nicht auseinanderziehen: eine Zeile, abgeschnitten statt umgebrochen. */

.chapter-content-hit {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
}

.chapter-content-hit-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Druckvorschau eines Dokuments ----------
   Diese Klassen gehoeren hierher und nicht in eine .razor.css: Blazors CSS-Isolation
   haengt ihr Scope-Attribut nur an Elemente, die der Razor-Compiler kennt. Die Vorschau
   setzt ihr Markup in C# zusammen -- diese Elemente bekaemen es nie und blieben ungestylt. */

.doc-preview-chapter {
    margin-bottom: 1.5rem;
}

.doc-preview-heading {
    margin-top: 1rem;
}

.doc-preview-text > *:first-child { margin-top: 0; }
.doc-preview-text > *:last-child { margin-bottom: 0; }
.doc-preview-text p { margin: 0 0 .6rem; line-height: 1.6; }
.doc-preview-text img { max-width: 100%; height: auto; }

.doc-preview-table {
    border-collapse: collapse;
    width: 100%;
    margin: .25rem 0 1rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--mud-palette-divider);
}

.doc-preview-table th,
.doc-preview-table td {
    border: 1px solid var(--mud-palette-divider);
    padding: .35rem .6rem;
    vertical-align: top;
}

.doc-preview-table th {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
}

/* Gegenueberstellung aus Verknuepfungen (URS | Anforderung | FRS | Umsetzung). Anders als
   bei strukturierten Tabellen steht in diesen Zellen gespeichertes Markup -- ein <p> bringt
   seinen Aussenabstand mit und blaehte die Zeile sonst auf. */
.doc-preview-links td > *:first-child { margin-top: 0; }
.doc-preview-links td > *:last-child { margin-bottom: 0; }
.doc-preview-links td p { margin: 0 0 .4rem; line-height: 1.5; }
.doc-preview-links td img { max-width: 100%; height: auto; }

/* Teilstueck der Gegenueberstellung: eine Zeile als eigene Tabelle. Der Textmodus braucht
   sie einzeln, weil jeder Inhalt seine eigene Aktionsleiste bekommt -- in EINE Tabelle
   liesse sie sich nicht einhaengen. Ohne Aussenabstand und mit gleichen Spaltenbreiten
   stossen die Stuecke aneinander und lesen sich als eine Tabelle. */
.doc-preview-links-part {
    margin: 0;
}

/* Verknuepfung als Textblock (ueber oder unter dem eigenen Text) statt als
   Gegenueberstellung. Der senkrechte Strich links sagt, dass der Text nicht aus diesem
   Dokument stammt -- ohne ihn laese sich das Zitat nicht vom eigenen Text unterscheiden. */
.doc-preview-link {
    border-left: 3px solid var(--mud-palette-divider);
    padding: .1rem 0 .1rem .75rem;
    margin: 0 0 .75rem;
}

.doc-preview-link-title {
    font-weight: 600;
    margin-bottom: .2rem;
}

/* Der Browser druckt. Ein eigener Erzeugungsweg (PDF) waere eine neue Abhaengigkeit --
   fuer eine Vorschau, die es schon gibt. */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-tabs-toolbar,
    .mud-breadcrumbs {
        display: none !important;
    }

    .doc-preview {
        border: none !important;
        padding: 0 !important;
    }

    /* Eine Tabellenzeile soll nicht ueber den Seitenumbruch zerfallen. */
    .doc-preview-table tr {
        page-break-inside: avoid;
    }

    /* Eine Gegenueberstellung laeuft ueber viele Seiten -- ohne wiederholte Kopfzeile
       weiss der Leser ab Seite zwei nicht mehr, welche Spalte die Anforderung ist. */
    .doc-preview-table thead {
        display: table-header-group;
    }

    .doc-preview-chapter {
        page-break-inside: auto;
    }
}

/* ---------- Markdown ----------
   Inhaltstexte und Tabellenzellen sind Markdown (MarkdownText) — wie die Kapiteltexte im
   DocManager. Die Regeln fuer Eingabe, Vorschau und Formatierungshilfe entsprechen dort
   app.css. Was Markdig ausgibt (Listen, Zitate, Code, Tabellen), steht in .doc-preview-text
   und damit in Editor-Vorschau, Textmodus, Dokumentvorschau und — ueber HtmlToPdf (QuestPDF) —
   im PDF gleich da. */

/* Das Eingabefeld fuellt seine Spalte, damit es so hoch steht wie die Vorschau daneben. */
.markdown-eingabe .mud-input-control-input-container { flex: 1 1 auto; }
.markdown-eingabe .mud-input { flex: 1 1 auto; align-items: stretch; }

.markdown-eingabe textarea {
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .85rem;
    line-height: 1.5;
}

.doc-preview-text ul,
.doc-preview-text ol {
    margin: 0 0 .6rem;
    padding-left: 1.4rem;
    line-height: 1.6;
}

.doc-preview-text li { margin-bottom: .2rem; }

.doc-preview-text blockquote {
    margin: 0 0 .6rem;
    padding: .25rem 0 .25rem .9rem;
    border-left: 3px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-secondary);
}

.doc-preview-text table {
    border-collapse: collapse;
    margin: 0 0 .6rem;
    width: 100%;
}

.doc-preview-text th,
.doc-preview-text td {
    border: 1px solid var(--mud-palette-divider);
    padding: .35rem .6rem;
    text-align: left;
    vertical-align: top;
}

.doc-preview-text th { background-color: var(--mud-palette-background-gray); }

.doc-preview-text code {
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .85em;
    padding: .05rem .3rem;
    background-color: var(--mud-palette-background-gray);
    border-radius: 3px;
}

/* Wie im PDF: Zeilen bleiben stehen, wie sie eingegeben wurden; zu lange brechen um. */
.doc-preview-text pre {
    margin: 0 0 .6rem;
    padding: .5rem .7rem;
    white-space: pre-wrap;
    word-break: break-word;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    line-height: 1.45;
}

.doc-preview-text pre code { padding: 0; background: none; border-radius: 0; }

/* Absaetze in Tabellenzellen der Vorschau: kein Aussenabstand am Rand der Zelle. */
.doc-preview-table td > *:first-child,
.doc-preview-table th > *:first-child { margin-top: 0; }
.doc-preview-table td > *:last-child,
.doc-preview-table th > *:last-child { margin-bottom: 0; }

/* Formatierungshilfe (MarkdownHelpDialog) */
.markdown-hilfe { overflow-x: auto; }
.markdown-hilfe table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.markdown-hilfe > table > thead > tr > th,
.markdown-hilfe > table > tbody > tr > td {
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: .5rem .6rem;
    text-align: left;
    vertical-align: top;
}
.markdown-hilfe > table > thead > tr > th {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
}
.markdown-hilfe pre {
    margin: 0;
    padding: .4rem .5rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .8rem;
    line-height: 1.5;
    background-color: var(--mud-palette-background-gray);
    border-radius: 4px;
}
.markdown-hilfe-hinweis { margin-top: .25rem; font-size: .75rem; color: var(--mud-palette-text-secondary); }

/* ---------- Fassungsvergleich ----------
   Farbe traegt die Aussage nie allein: Vor jeder Zeile steht zusaetzlich ein + oder −.
   Wer Rot und Gruen nicht unterscheidet, saehe sonst zwei gleich aussehende Bloecke. */

.diff {
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .82rem;
    line-height: 1.55;
    overflow-x: auto;
}

.diff-zeile {
    display: flex;
    gap: .6rem;
    padding: 0 .8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.diff-zeichen {
    flex: 0 0 1ch;
    color: var(--mud-palette-text-secondary);
    user-select: none;
}

.diff-text { flex: 1 1 auto; }

.diff-plus { background-color: rgba(50, 190, 180, .16); }
.diff-plus .diff-zeichen { color: #1f8078; }
.diff-minus { background-color: rgba(214, 69, 80, .14); }
.diff-minus .diff-zeichen { color: #d64550; }

/* ---------- Textmodus eines Kapitels ----------
   Dasselbe Markup wie die Druckvorschau, deshalb gelten die .doc-preview-Regeln oben hier
   mit. Neu ist nur der Rahmen darum: je Inhalt ein Block mit einer Aktionsleiste, die
   dauerhaft dasteht statt erst bei Mauskontakt zu erscheinen. */

.chapter-text-intro {
    margin-bottom: 1.25rem;
}

.chapter-text-block {
    position: relative;
    /* Platz fuer die Aktionsleiste am rechten Rand -- ohne ihn liefe der Text darunter. */
    padding: .5rem 13rem .5rem .75rem;
    border-left: 2px solid transparent;
    border-radius: var(--mud-default-borderradius);
    transition: background-color .4s ease, border-color .4s ease;
}

.chapter-text-block + .chapter-text-block {
    margin-top: .75rem;
}

/* Zwei aufeinanderfolgende Zeilen derselben Gegenueberstellung: kein Abstand und kein
   Innenrand oben, sonst zerfiele die Tabelle in einzelne Kaesten. Eine Fallunterscheidung
   nach der Seite braucht es nicht mehr -- ein Kapitel hat genau eine Gegenueberstellung, und
   ihre Stuecke haben damit auch dieselben Spaltenbreiten. */
.chapter-text-block:has(> .doc-preview-links-part) {
    padding-top: .15rem;
    padding-bottom: .15rem;
}

.chapter-text-block:has(> .doc-preview-links-part) + .chapter-text-block:has(> .doc-preview-links-part) {
    margin-top: 0;
}

/* Die Kennung ueber dem Text eines Inhalts. Klein und zurueckgenommen: Sie ordnet ein,
   gelesen wird der Text darunter. */
.chapter-text-key {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    margin-bottom: .15rem;
}

/* Das Ziel eines Verweises mit contentId. Im Textmodus gibt es kein Aufklappen, an dem man
   sehen koennte, wo man gelandet ist -- also wird die Stelle gezeigt. */
.chapter-text-block-marked {
    background-color: var(--mud-palette-action-default-hover);
    border-left-color: var(--mud-palette-primary);
}

.chapter-text-actions {
    position: absolute;
    top: .35rem;
    right: .35rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* Schmales Fenster: Die Leiste wandert ueber den Block, statt den Text zu ueberdecken. */
@media (max-width: 960px) {
    .chapter-text-block {
        padding-right: .75rem;
        padding-top: 2.5rem;
    }

    .chapter-text-actions {
        top: .1rem;
        left: .35rem;
        right: .35rem;
        justify-content: flex-start;
    }
}

/* Stichproben der Formatmigration: Quelltext umbrechen statt die Tabelle zu sprengen. */
.legacy-html-sample {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8rem;
    margin: 0;
    max-height: 12rem;
    overflow: auto;
}

/* Schaubilder des Tutorials – wie in smartDocs. Farben aus der MudBlazor-Palette, damit sie der
   dunklen Ansicht folgen. */
.schaubild { display: block; width: 100%; max-width: 760px; height: auto; font-size: 13px; }
.schaubild-titel { font-size: 15px; font-weight: 600; fill: var(--mud-palette-text-primary); }
.schaubild-text { fill: var(--mud-palette-text-primary); }
.schaubild-fett { font-weight: 600; }
.schaubild-klein { font-size: 11.5px; fill: var(--mud-palette-text-secondary); }
.schaubild-linie { stroke: var(--mud-palette-text-disabled); stroke-width: 1.25; }
.schaubild-pfeil { fill: var(--mud-palette-text-disabled); }
.schaubild-kasten { fill: none; stroke: var(--mud-palette-text-disabled); stroke-width: 1.25; }
.schaubild-betont { fill: var(--mud-palette-primary); fill-opacity: .12; stroke: var(--mud-palette-primary); stroke-width: 2; }

/* Tutorial */
.tutorial-einleitung { font-size: 1.05rem; }
.tutorial-aktiv { background-color: var(--mud-palette-action-default-hover); font-weight: 600; }

/* Ablagefläche für Dateien (FileDropZone): Der Hinweis liegt über der Liste, darüber das
   unsichtbare Dateifeld, das die abgelegten Dateien annimmt. Ausgeblendet bleibt das Feld im
   DOM, weil der Upload die Dateien erst später über dieses Feld liest. */
.quacx-file-drop { position: relative; min-height: 160px; }
.quacx-file-drop-overlay { display: none; position: absolute; inset: 0; z-index: 20; align-items: center; justify-content: center;
    border: 2px dashed var(--mud-palette-primary); border-radius: var(--mud-default-borderradius);
    background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent); }
.quacx-file-drop-overlay.is-active { display: flex; }
.quacx-file-drop-hint { background: transparent; text-align: center; }
.quacx-file-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: copy; }