/* 
 * Shared Markdown Content Styling
 * 
 * Usage: Add the class "markdown-content" to any container that displays markdown-converted HTML
 * 
 * Example:
 * <div class="markdown-content">
 *     @((MarkupString)MarkdownService.ToHtml(content))
 * </div>
 * 
 * This provides consistent styling for:
 * - Headings (h1-h6) with proper hierarchy and borders
 * - Lists (ul/ol) with proper indentation and bullet points
 * - Tables with alternating row colors and borders
 * - Code blocks and inline code with background colors
 * - Blockquotes with left border styling
 * - Links with hover effects
 * - Responsive design for mobile devices
 * - Dark theme support
 */
.markdown-content {
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
    font-size: var(--mud-typography-body1-size);
}

/* Force proper list styling even if global CSS resets interfere */
.markdown-content ul,
.markdown-content ol {
    display: block !important;
}

.markdown-content li {
    display: list-item !important;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
}

.markdown-content h1 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--mud-palette-divider);
    padding-bottom: 0.3rem;
}

.markdown-content h2 {
    font-size: 1.3rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    padding-bottom: 0.2rem;
}

.markdown-content h3 {
    font-size: 1.1rem;
}

.markdown-content p {
    margin-bottom: 1rem;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
    margin-left: 0;
}

.markdown-content ul {
    list-style-type: disc;
    list-style-position: outside;
}

.markdown-content ol {
    list-style-type: decimal;
    list-style-position: outside;
}

.markdown-content ul ul {
    list-style-type: circle;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.markdown-content ul ul ul {
    list-style-type: square;
}

.markdown-content li {
    margin-bottom: 0.25rem;
    padding-left: 0.25rem;
}

.markdown-content blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background-color: var(--mud-palette-background-grey);
    font-style: italic;
    border-radius: 4px;
}

.markdown-content code {
    background-color: var(--mud-palette-background-grey);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.markdown-content pre {
    background-color: var(--mud-palette-background-grey);
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid var(--mud-palette-divider);
}

.markdown-content pre code {
    background-color: transparent;
    padding: 0;
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--mud-palette-divider);
    padding: 0.75rem;
    text-align: left;
}

.markdown-content th {
    background-color: var(--mud-palette-background-grey);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.markdown-content tr:nth-child(even) {
    background-color: rgba(var(--mud-palette-background-grey-rgb), 0.3);
}

.markdown-content strong {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.markdown-content em {
    font-style: italic;
}

.markdown-content a {
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.markdown-content a:hover {
    text-decoration: underline;
    color: var(--mud-palette-primary-darken);
}

.aura-mermaid-block {
    width: 100%;
    box-sizing: border-box;
    margin: 1rem 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 72%, transparent);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
}

/* AI-Nachrichten schrumpfen normalerweise auf ihre intrinsische Inhaltsbreite. Enthält die
   Antwort ein Diagramm, darf die Bubble die gesamte verfügbare Chatbreite für die Grafik nutzen. */
.assistant-message:has(.aura-mermaid-block) > .chat-message-alignment,
.assistant-message:has(.aura-mermaid-block) .chat-bubble-with-controls {
    width: 100%;
}

.aura-mermaid-toolbar {
    display: flex;
    gap: 0.45rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.aura-mermaid-action {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aura-mermaid-action:hover {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

.aura-mermaid-viewer {
    min-width: 0;
}

.aura-mermaid-canvas {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mud-palette-divider) 45%, transparent);
    border-radius: 9px;
    background: #FCFCFD;
    cursor: zoom-in;
    isolation: isolate;
}

.aura-mermaid-canvas:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.aura-mermaid-canvas.aura-mermaid-canvas-pannable {
    cursor: grab;
}

.aura-mermaid-canvas.aura-mermaid-canvas-dragging {
    cursor: grabbing;
    user-select: none;
}

.aura-mermaid-canvas.aura-mermaid-canvas-zoomed {
    max-height: min(70vh, 760px);
    touch-action: none;
}

.aura-mermaid-canvas svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}

.aura-mermaid-loading,
.aura-mermaid-error {
    padding: 0.9rem 1rem;
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    font-size: 0.88rem;
}

.aura-mermaid-canvas-error .aura-mermaid-error {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    color: var(--mud-palette-error);
}

.aura-mermaid-error-detail {
    max-height: 12rem;
    margin: 0.65rem 0;
    padding: 0.55rem 0.65rem;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-background) 88%, transparent);
    color: var(--mud-palette-text-primary);
    font: 0.78rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.aura-mermaid-repair {
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 6px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    cursor: pointer;
}

.aura-mermaid-repair:hover {
    filter: brightness(0.96);
}

.aura-mermaid-status {
    margin-top: 0.5rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.aura-mermaid-status-error {
    color: var(--mud-palette-error);
}

.aura-mermaid-export {
    margin-top: 0.75rem;
}

.aura-mermaid-export summary {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
}

/*
 * Nutzergeschriebenes Markdown in einer BEARBEITUNGS-Umgebung: das Rich-Chat-Eingabefeld
 * (contenteditable) und die Vorschau im Vorlagen-Editor. Bewusst NICHT ".markdown-content" —
 * dort tragen h1/h2 Trennlinien und die Grundschrift ist body1; beides passt nicht in ein
 * Eingabefeld.
 *
 * Warum global und nicht im Scoped-CSS der Komponente: das Eingabefeld befüllt sein DOM per
 * JavaScript (chatInputHelper.js), die erzeugten Kinder tragen also kein Blazor-Scope-Attribut.
 * Eine globale Klasse greift dort direkter als "::deep" — und dieselbe Klasse lässt die
 * Vorschau im Vorlagen-Editor garantiert gleich aussehen wie das Eingabefeld später.
 * Wer hier etwas ändert, ändert damit beide Orte. Genau das ist der Zweck: die Regeln lagen
 * vorher nur im Eingabefeld, Überschriften fehlten dort komplett und fielen auf die
 * Browser-Defaults zurück (h1 = 2em = 1,75rem bei 0,875rem Fließtext).
 *
 * Grundschrift und feldspezifische Regeln (Platzhalter, max-height, eingefügte Bilder) bleiben
 * in ChatInputComponent.razor.css.
 */
.user-markdown-content > :first-child {
    margin-top: 0;
}

.user-markdown-content > :last-child {
    margin-bottom: 0;
}

.user-markdown-content h1,
.user-markdown-content h2,
.user-markdown-content h3 {
    margin: 0.9rem 0 0.35rem;
    font-weight: 650;
    line-height: 1.25;
}

.user-markdown-content h1 {
    font-size: 1.35rem;
}

.user-markdown-content h2 {
    font-size: 1.15rem;
}

.user-markdown-content h3 {
    font-size: 1rem;
}

/* h4 bis h6 bleiben auf Fließtextniveau und unterscheiden sich über Gewicht, Versalien und
   Abstand. Über die Größe geht nicht: die Browser-Defaults setzen h5 auf 0,83em und h6 auf
   0,67em, eine tiefere Gliederungsebene würde also KLEINER statt nur leiser — dieselbe
   Entscheidung wie in der Artefakt-Vorschau (ChatComponent.razor.css). */
.user-markdown-content h4,
.user-markdown-content h5,
.user-markdown-content h6 {
    margin: 0.8rem 0 0.3rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
}

.user-markdown-content h5,
.user-markdown-content h6 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.user-markdown-content p {
    margin: 0 0 0.5rem;
}

.user-markdown-content ul,
.user-markdown-content ol {
    margin: 0.35rem 0;
    padding-left: 1.5rem;
}

.user-markdown-content li {
    margin: 0.15rem 0;
}

.user-markdown-content blockquote {
    margin: 0.5rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--mud-palette-lines-default);
}

.user-markdown-content table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0.5rem 0;
}

.user-markdown-content th,
.user-markdown-content td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.4rem 0.5rem;
    min-width: 72px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.user-markdown-content th {
    background: var(--mud-palette-background-grey);
    font-weight: 600;
}

/* hr, pre, code und a sind im Sanitizer des Eingabefelds erlaubt (chatInputHelper.js) und waren
   wie die Überschriften ungestylt: pre landete auf der Monospace-Standardgröße des Browsers,
   hr auf dessen Rändern. */
.user-markdown-content hr {
    margin: 0.75rem 0;
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.user-markdown-content pre {
    margin: 0.5rem 0;
    padding: 0.5rem 0.65rem;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow-x: auto;
}

.user-markdown-content code {
    font-family: var(--mud-typography-default-family), monospace;
    font-size: 0.85em;
}

.user-markdown-content pre code {
    font-size: inherit;
    background: none;
    padding: 0;
}

.user-markdown-content :not(pre) > code {
    padding: 0.1rem 0.3rem;
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
}

.user-markdown-content a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

:where([data-aura-view="mobile"]) .user-markdown-content h1 {
    font-size: 1.2rem;
}

:where([data-aura-view="mobile"]) .user-markdown-content h2 {
    font-size: 1.05rem;
}

:where([data-aura-view="mobile"]) .user-markdown-content h3,
:where([data-aura-view="mobile"]) .user-markdown-content h4,
:where([data-aura-view="mobile"]) .user-markdown-content h5,
:where([data-aura-view="mobile"]) .user-markdown-content h6 {
    font-size: 0.9375rem;
}

/* Responsive design */
:where([data-aura-view="mobile"]) .markdown-content {
    font-size: 0.9rem;
}

:where([data-aura-view="mobile"]) .markdown-content h1 {
    font-size: 1.3rem;
}

:where([data-aura-view="mobile"]) .markdown-content h2 {
    font-size: 1.1rem;
}

:where([data-aura-view="mobile"]) .markdown-content h3 {
    font-size: 1rem;
}

:where([data-aura-view="mobile"]) .markdown-content ul,
:where([data-aura-view="mobile"]) .markdown-content ol {
    padding-left: 1.5rem;
}

:where([data-aura-view="mobile"]) .markdown-content table {
    font-size: 0.8rem;
}

:where([data-aura-view="mobile"]) .markdown-content th,
:where([data-aura-view="mobile"]) .markdown-content td {
    padding: 0.5rem;
}

:where([data-aura-view="mobile"]) .markdown-content pre {
    padding: 0.75rem;
    font-size: 0.8rem;
}

:where([data-aura-view="mobile"]) .aura-mermaid-block {
    padding: 0.75rem;
}

:where([data-aura-view="mobile"]) .aura-mermaid-canvas.aura-mermaid-canvas-zoomed {
    max-height: 58vh;
}

.mud-dark-theme .aura-mermaid-canvas {
    background: #15161A;
}

.mud-dark-theme .markdown-content blockquote {
    background-color: rgba(255, 255, 255, 0.05);
}

.mud-dark-theme .markdown-content code {
    background-color: rgba(255, 255, 255, 0.1);
}

.mud-dark-theme .markdown-content pre {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .aura-mermaid-action {
        transition: none;
    }
} 

/* --------------------------------------------------------------------------------------
   Unteilbare Datenwerte in Tabellenzellen.

   Bewusst OHNE .markdown-content-Präfix, anders als der Rest dieser Datei: Das Span wird vom
   MarkdownService an ALLEN Render-Orten erzeugt, und die Chat-Bubbles sind kein
   .markdown-content-Container. Eine Regel im Scoped-CSS der Komponenten wäre dreifach zu pflegen
   (Chat, Artefakt-Vorschau, Dokumentbetrachter) und würde beim vierten Render-Ort still fehlen.
   Diese Datei ist global eingebunden (App.razor).

   Zwei Erzeuger, weil die Render-Wege sich unterscheiden: ProtectDataTokensInTableCells für
   vollständige Dokumente mit echten <td>-Tags (Artefakt-Vorschau, Dokumentbetrachter) und
   ProtectDataTokensInCellHtml für einzeln gerenderte Zellen (Chat — dort setzt Razor das <td>).

   Warum es die Regel überhaupt braucht: Die Zellen tragen overflow-wrap: anywhere, damit breite
   Tabellen in die Spaltenbreite passen statt seitlich zu scrollen. Das bricht aber an beliebiger
   Stelle — auch "14.06.2026" nach "202" mit der "6" auf der nächsten Zeile. hyphens: auto ist
   dagegen kein Mittel, Silbentrennung greift bei Ziffernfolgen nicht.
   -------------------------------------------------------------------------------------- */
.nowrap-token {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------------------
   .aura-markdown-sheet — Markdown-Typografie des Artefakt-Betrachters für Inhalte, die
   bereits in einem Container liegen.

   Typografie-Zwilling von .artifact-preview-markdown (Components/Chat/ChatComponent.razor.css,
   Block ab Zeile 283): identische Überschriftengrößen, Abstände, Listen-, Code- und
   Tabellenregeln. Bewusst NICHT übernommen ist die Blatt-Optik des Betrachters — Rahmen,
   Radius, Schatten, eigener Hintergrund und die 28/32px-Innenpolsterung. Diese Klasse ist für
   Markdown gedacht, das schon in einem MudPaper oder einer Karte sitzt (erster Verwender:
   KI-Zusammenfassung und Analyse-Bericht auf der Vergabe-Detailseite); ein Blatt darin wäre
   Karte-in-Karte.

   Wird die Typografie im Artefakt-Betrachter geändert, ist sie hier mitzuziehen — die beiden
   Blöcke sollen gleich aussehen.

   Unterschied zu .markdown-content weiter oben: dort steht die größere Standard-Typografie
   (body1, Überschriften mit Trennlinien) für Berichte und Dokumentansichten. Hier die
   dichtere, ruhigere Variante der KI-Ausgaben.

   Alle Farben kommen aus der MudBlazor-Palette bzw. color-mix darauf und schalten deshalb
   ohne eigene Dark-Theme-Regeln mit dem Theme mit.
   -------------------------------------------------------------------------------------- */
.aura-markdown-sheet {
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* Der erste Block darf den Vorlauf seiner Überschrift nicht zum Abstand des Containers addieren. */
.aura-markdown-sheet > :first-child {
    margin-top: 0;
}

/* Der MarkdownService setzt vor jede h2 bis h4 ein <hr class="section-divider">. Beginnt der
   Inhalt mit einer solchen Überschrift, stünde die Linie ohne Inhalt darüber — in Vergabe
   direkt unter dem MudDivider bzw. dem Abschnittstitel. Abweichung vom Artefakt-Betrachter:
   dort beginnt das Markdown mitten im Blatt, hier direkt unter einer Kartenüberschrift. */
.aura-markdown-sheet > hr.section-divider:first-child {
    display: none;
}

/* Die Überschrift dahinter ist dann nicht mehr :first-child und behielte ihren Vorlauf von 1.5em —
   eine sichtbare Lücke direkt unter dem MudDivider, obwohl darüber nichts steht. */
.aura-markdown-sheet > hr.section-divider:first-child + * {
    margin-top: 0;
}

.aura-markdown-sheet h1,
.aura-markdown-sheet h2,
.aura-markdown-sheet h3 {
    margin: 1.5em 0 0.45em;
    font-weight: 650;
    line-height: 1.25;
}

.aura-markdown-sheet h1 {
    font-size: 1.35rem;
    margin-top: 0.3em;
}

.aura-markdown-sheet h2 {
    font-size: 1.15rem;
}

.aura-markdown-sheet h3 {
    font-size: 1rem;
}

/* h4 bis h6 bleiben auf Fließtextniveau und unterscheiden sich über Versalien und Farbe statt
   über die Größe — die Browser-Defaults (h5 0.73rem, h6 0.59rem) liegen unter dem Fließtext von
   0.875rem, eine tiefere Gliederungsebene würde dort kleiner statt nur leiser. */
.aura-markdown-sheet h4,
.aura-markdown-sheet h5,
.aura-markdown-sheet h6 {
    margin: 1.2em 0 0.4em;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
}

.aura-markdown-sheet h5,
.aura-markdown-sheet h6 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aura-markdown-sheet h6 {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 78%, var(--mud-palette-surface));
}

/* Fetter Fließtext bleibt unter dem Gewicht der Überschriften, damit sich beides unterscheidet —
   ohne diese Regel trägt strong den Browser-Default 700. */
.aura-markdown-sheet strong,
.aura-markdown-sheet b {
    font-weight: 600;
}

.aura-markdown-sheet p,
.aura-markdown-sheet ul,
.aura-markdown-sheet ol,
.aura-markdown-sheet blockquote,
.aura-markdown-sheet pre,
.aura-markdown-sheet table {
    margin: 0 0 0.85rem;
}

.aura-markdown-sheet ul,
.aura-markdown-sheet ol {
    padding-left: 1.5rem;
}

.aura-markdown-sheet li {
    margin: 0.15rem 0;
}

.aura-markdown-sheet code {
    font-size: 0.86em;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
    background: var(--mud-palette-action-default-hover);
}

/* Getönt wird aus der Textfarbe gegen die Container-Fläche (surface), nicht über
   --mud-palette-background-grey — das setzt kein Tenant-Theme, es griffe der MudBlazor-Default
   und der Codeblock säße auf einer fremden Grundfarbe. */
.aura-markdown-sheet pre {
    overflow-x: auto;
    padding: 12px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 60%, transparent);
}

.aura-markdown-sheet pre code {
    padding: 0;
    background: transparent;
}

.aura-markdown-sheet blockquote {
    padding: 0.25rem 0 0.25rem 0.9rem;
    border-left: 3px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* Bilder kommen mit ihrer vollen Pixelbreite aus der KI-Antwort und würden die Spalte sprengen.
   Die Höhenbegrenzung hält Hochformate davon ab, die halbe Karte zu belegen. */
.aura-markdown-sheet img {
    display: block;
    max-width: min(100%, 460px);
    max-height: 340px;
    width: auto;
    height: auto;
    margin: 0.5rem 0;
    border-radius: 6px;
}

.aura-markdown-sheet hr {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1rem 0;
}

/* Der automatisch injizierte Trenner stammt nicht vom Autor der Antwort und wird deshalb
   zurückgenommen an die folgende Überschrift gerückt, statt den Text in gleichwertige Blöcke zu
   zerlegen. Ein vom Autor gesetztes --- behält die Regel darüber. */
.aura-markdown-sheet hr.section-divider {
    border-top-color: color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    margin: 1.6rem 0 0.3rem;
}

/* Der MarkdownService verpackt jede Tabelle in diesen Wrapper (WrapTablesForHorizontalScroll).
   Er klammert die Tabelle auf die Containerbreite; gewünscht ist, dass die Tabelle vollständig
   sichtbar bleibt und in den Zellen umbricht (siehe th/td). overflow-x bleibt nur als Notausgang
   für Inhalte, die sich nicht umbrechen lassen (Bild oder Codeblock in einer Zelle) — hidden
   würde solchen Inhalt still abschneiden. */
.aura-markdown-sheet .markdown-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 0.9rem;
}

/* Tabellen im Linienstil: keine Füllflächen, keine senkrechten Linien, kein Zebra. Die
   Gliederung tragen die kräftige Unterlinie des Kopfes und feine Zeilentrenner — aus der
   Textfarbe gemischt, nicht aus --mud-palette-primary, das färbte die Tabelle bei kräftigen
   Tenantfarben deutlich ein. */
.aura-markdown-sheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Die Spaltenbreiten stehen NICHT hier, sondern kommen als <colgroup> mit Prozentwerten aus dem
   MarkdownService (ApplyTableColumnWidths) — sie hängen vom Inhalt ab und lassen sich in CSS
   nicht ausdrücken. Ohne diese Vorgabe verteilt das Auto-Layout proportional zur
   max-content-Breite: Eine Fließtextspalte („Herleitung der Schätzung") nimmt dann fast die
   ganze Tabelle ein, und eine Schlagwortspalte („Priorität") fällt auf wenige Pixel, weil
   overflow-wrap: anywhere weiter unten ihre min-content-Breite auf ein Zeichen senkt.

   Bewusst KEIN table-layout: fixed dazu: Im Auto-Layout wirken die Prozentwerte als Vorgabe, die
   min-content-Breite einer Spalte bleibt aber ihre Untergrenze. Ein unteilbarer Wert (siehe
   .nowrap-token) sprengt so notfalls die berechnete Breite, statt aus der Zelle zu laufen. */

/* Umbruch in der Zelle, damit die Tabelle nicht seitlich scrollen muss — in zwei Stufen:
   hyphens: auto trennt echte Wörter an ihren Silbengrenzen (Voraussetzung ist <html lang="de">
   in App.razor), overflow-wrap: anywhere greift danach für Zeichenfolgen ohne Silbengrenzen
   (Artikelnummern, Versalien, URLs). "anywhere" statt "break-word", weil nur "anywhere" auch die
   Mindestbreite (min-content) der Spalte senkt. hyphenate-limit-chars verhindert Trennungen wie
   "A-nlage". Zahlen und Datumsangaben schützt zentral der MarkdownService über
   ProtectDataTokensInTableCells (.nowrap-token weiter unten) — deshalb hier NICHT mit
   overflow-wrap: normal für Zahlenspalten nachhelfen, das hebt die Mindestbreite wieder an. */
.aura-markdown-sheet th,
.aura-markdown-sheet td {
    padding: 0.45rem 0.7rem;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
    text-align: left;
    vertical-align: top;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    overflow-wrap: anywhere;
}

/* code in einer Zelle ist ein technischer Bezeichner: keine Silbentrennung, aber weiterhin
   umbrechbar, damit er die Spalte nicht sprengt. */
.aura-markdown-sheet td code,
.aura-markdown-sheet th code {
    hyphens: manual;
    overflow-wrap: anywhere;
}

/* Kein white-space: nowrap im Kopf — das machte die Tabelle mindestens so breit wie die Summe
   der ungebrochenen Spaltentitel. Kopfzeilen brechen mehrzeilig um. */
.aura-markdown-sheet th {
    border-bottom: 2px solid color-mix(in srgb, var(--mud-palette-text-primary) 45%, transparent);
    font-weight: 600;
}

/* Ab der zwölften Spalte trägt allein die waagerechte Zellpolsterung mehrere hundert Pixel bei
   und drückt die Mindestbreite über die Containerbreite. Sie wird dort zurückgenommen; die
   Schriftgröße bleibt bewusst bei 0.875rem. */
.aura-markdown-sheet table:has(tr > *:nth-child(12)) th,
.aura-markdown-sheet table:has(tr > *:nth-child(12)) td {
    padding: 0.4rem 0.3rem;
}

.aura-markdown-sheet tbody tr:last-child td {
    border-bottom: none;
}

.aura-markdown-sheet tbody tr:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}