/* =====================================================================
   Fixly – Oberflaechenstile (Entwurf "Werkbank", FI-0032)

   HIER STEHEN KEINE FARBEN.

   Die einzige Quelle fuer Farbe ist Theming/FixlyTheme.cs. MudBlazor gibt
   die dort gesetzte Palette als CSS-Variablen (--mud-palette-*) an das
   Dokument weiter. Der Block unten benennt diese Variablen so um, wie der
   Entwurf sie nennt (--fx-*), und ab da wird ausschliesslich mit den
   --fx-Namen gearbeitet.

   Der Nutzen: Eine Aenderung in FixlyTheme.cs faerbt MudBlazor-Komponenten
   und diese Datei gleichzeitig um — die frueher hier fest eingetragenen
   Werte (Material-Blau fuer Fokus und Buttons, Schieferblau fuer die
   Schiene) konnten der Palette widersprechen und taten es auch. Und ein
   spaeterer
   Dunkelmodus waere ein Palettentausch in C#, kein Umbau dieser Datei.

   Die Hex-Werte im Aliasblock sind Rueckfallwerte fuer den Fall, dass
   MudBlazor eine Variable umbenennt. Sie sind die einzigen Farbwerte in
   dieser Datei und muessen mit FixlyTheme.cs uebereinstimmen.
   ===================================================================== */

/* =====================================================================
   Schriften (FI-0033)

   IBM Plex, selbst gehostet unter fonts/. Kein externer Request: die CSP
   erlaubt font-src 'self' (siehe CONTENT_SECURITY_POLICY in Program.cs),
   die Offline-Faehigkeit bleibt, und es geht keine Adresse an einen
   fremden Server.

   Die Regel dahinter: Das Produkt spricht in Plex, die Nutzer sprechen in
   ihrer eigenen Schrift. Alles, was Fixly sagt — Navigation, Ueberschriften,
   Spaltenkoepfe, Beschriftungen, Schaltflaechen — steht in Plex Sans. Alles,
   was ein Bezeichner ist — Ticketnummern, Versionen, Daten — in Plex Mono.
   Alles, was Nutzer geschrieben haben — Beschreibungen, Kommentare, Release
   Notes — bleibt im System-Font-Stack: schneller, an jedem Arbeitsplatz
   vertraut, und es respektiert die Schrifteinstellungen des Betriebssystems.
   Deshalb wird auch kein kursiver Schnitt geladen; Markdown-Hervorhebung in
   Nutzertext liefert die Systemschrift.

   Lizenz: SIL OFL 1.1, fonts/OFL.txt.
   ===================================================================== */

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    /* MudBlazor fordert an mehreren Stellen 500 an (Schaltflaechen,
       Tabellenkoepfe, Chips). Ohne diesen Schnitt faellt der Browser auf 400
       zurueck — kein Fehler, aber duenner als beabsichtigt. */
    font-weight: 500;
    font-display: swap;
    src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

/* Bezeichner: Ticketnummern, Versionen, Daten, Migrationsnummern. Die
   Tabellenziffern sorgen dafuer, dass Spalten untereinander fluchten. */
.fixly-mono {
    font-family: var(--fx-mono-family);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "zero" 1;
}

:root {
    --fx-ink: var(--mud-palette-text-primary, #1B1A17);
    --fx-mono-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --fx-paper: var(--mud-palette-background, #FAF9F7);
    --fx-slate: var(--mud-palette-drawer-background, #2B2A26);
    --fx-signal: var(--mud-palette-primary, #0B5B4E);
    --fx-rust: var(--mud-palette-error, #A8481F);
    --fx-rule: var(--mud-palette-lines-default, #DCD8D0);

    /* Abgeleitete Werte, die keine eigene Palettenrolle haben. */
    --fx-muted: var(--mud-palette-text-secondary);
    --fx-rule-input: var(--mud-palette-lines-inputs);
    --fx-surface: var(--mud-palette-surface);
    --fx-on-slate: rgba(255, 255, 255, 0.85);
    --fx-on-slate-quiet: rgba(255, 255, 255, 0.55);
    --fx-slate-hover: rgba(255, 255, 255, 0.1);
    --fx-slate-rule: rgba(255, 255, 255, 0.12);

    /* Statusreihe (FI-0035). Die einzige Ausnahme von der Regel oben, und zwar
       bewusst: Das hier ist keine Palettenrolle, sondern eine Skala — fuenf
       Stufen einer Helligkeitstreppe, die den Fortschritt eines Tickets
       kodieren. Die relative Leuchtdichte halbiert sich ungefaehr mit jedem
       Schritt (0,55 → 0,35 → 0,17 → 0,06 → 0,01), deshalb liest sich der
       Fortschritt auch bei elf Pixel Balkenhoehe.

       Soll der Fortschritt doch wieder farbig kodiert werden, sind es diese
       fuenf Zeilen — sonst nichts. */
    --fx-step-new: #C9C4B8;
    --fx-step-planned: #A79E8C;
    --fx-step-inprogress: #7D7360;
    --fx-step-resolved: #4E4739;
    --fx-step-released: #1B1A17;
}

/* =====================================================================
   Sidebar (dunkel) und mobile AppBar
   ===================================================================== */

/* Drawer-Grund und -Text kommen aus der Palette (DrawerBackground,
   DrawerText). Die Regeln hier setzen nur nach, wo MudBlazor eigene
   Komponentenfarben mitbringt. */
.fixly-drawer .mud-drawer-content,
.mud-drawer.fixly-drawer {
    background-color: var(--fx-slate) !important;
    color: #fff !important;
}

.fixly-drawer-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1rem 0.75rem 1rem;
    border-bottom: 1px solid var(--fx-slate-rule);
}

.fixly-app-title {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* NavLinks in der Sidebar */
.fixly-drawer .mud-nav-link,
.fixly-drawer .mud-nav-link .mud-icon-root,
.fixly-drawer .mud-list-item-text {
    color: var(--fx-on-slate) !important;
}

.fixly-drawer .mud-nav-link:hover,
.fixly-drawer .mud-nav-link.active {
    background-color: var(--fx-slate-hover) !important;
    color: #fff !important;
}

.fixly-drawer .mud-nav-link.active .mud-icon-root {
    color: #fff !important;
}

/* Der aktive Eintrag traegt zusaetzlich zur Flaeche eine Marke in der
   Akzentfarbe – der Zustand darf nicht allein an der Helligkeit haengen. */
.fixly-drawer .mud-nav-link.active {
    box-shadow: inset 2px 0 0 var(--fx-signal);
}

/* Sidebar Footer */
.fixly-drawer-footer {
    border-top: 1px solid var(--fx-slate-rule);
    padding: 0.5rem 0;
}

/* Die Programmversion steht seit FI-0032 im Fuss statt unter dem Produktnamen:
   sie ist Metadatum, nicht Teil des Titels. */
.fixly-drawer-version {
    color: var(--fx-on-slate-quiet);
    font-size: 0.7rem;
    line-height: 1.2;
    padding: 0 1rem 0.35rem 1rem;
}

.fixly-nav-user .mud-nav-link-text,
.fixly-nav-user .mud-icon-root {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
}

/* Mobile AppBar: gleiche Flaeche wie die Schiene. */
.fixly-mobile-appbar,
.fixly-mobile-appbar.mud-appbar {
    background-color: var(--fx-slate) !important;
    color: #fff !important;
}

.fixly-mobile-version {
    color: var(--fx-on-slate-quiet);
    font-size: 0.7rem;
    margin-right: 0.5rem;
}

/* Auf Desktop: Mobile AppBar verstecken (MudBlazor macht das per d-sm-none,
   aber das Padding des MudMainContent wird durch die AppBar verschoben –
   korrigieren) */
@media (min-width: 600px) {
    .fixly-mobile-appbar {
        display: none !important;
    }
}

/* Auf Mobile: MudMainContent hat keinen left-margin wegen des Drawers */
@media (max-width: 599px) {
    .fixly-main-content {
        margin-left: 0 !important;
    }
}

/* =====================================================================
   Sichtbarer Tastaturfokus (Accessibility)
   ===================================================================== */

:focus-visible {
    outline: 3px solid var(--fx-signal);
    outline-offset: 2px;
}

/* =====================================================================
   Grundtypografie

   Die Familie steht in FixlyTheme.cs, damit MudBlazor-Komponenten und rohes
   HTML dieselbe Schrift verwenden; hier wird sie nur auf das Dokument
   durchgereicht. Der System-Font-Stack bleibt als Rueckfallkette am Ende
   der Familie erhalten, falls eine Schriftdatei fehlt.
   ===================================================================== */

html, body {
    font-family: var(--mud-typography-default-family);
    background-color: var(--fx-paper);
    color: var(--fx-ink);
}

h1 {
    font-size: 1.8rem;
    margin: 0;
}

label {
    font-weight: 500;
}

small {
    color: var(--fx-muted);
    font-size: 0.8rem;
}

/* =====================================================================
   Auth-Seiten (Login / Register) – zentriert im Viewport
   ===================================================================== */

.fixly-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fx-paper);
}

.fixly-auth-card-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 1rem;
}

.fixly-auth-card {
    padding: 2rem;
    border-radius: 3px;
    border: 1px solid var(--fx-rule);
}

.fixly-auth-title {
    font-weight: 600;
    color: var(--fx-ink);
    margin-bottom: 0.25rem;
}

/* =====================================================================
   Eingabefelder der statisch gerenderten Account-Formulare (Login/Register).
   MudBlazor-Eingaben funktionieren in SSR-Formularen nicht zuverlaessig,
   daher native Felder mit eigenem, barrierefreiem Styling.
   ===================================================================== */

.fixly-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--fx-ink);
    border: 1px solid var(--fx-rule-input);
    border-radius: 3px;
    background-color: var(--fx-surface);
}

.fixly-input:focus {
    border-color: var(--fx-signal);
}

/* Nativer Primary-Button fuer statisch gerenderte Auth-Seiten (kein MudButton,
   damit das native Form-Submit nicht vom MudBlazor-Click-Handler verschluckt
   wird). Ohne Grossbuchstaben – dieselbe Entscheidung wie im Theme. */
.fixly-btn-primary {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    color: #fff;
    background-color: var(--fx-signal);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.01em;
}

.fixly-btn-primary:hover {
    background-color: var(--mud-palette-primary-darken);
}

.fixly-btn-primary:focus-visible {
    outline: 3px solid var(--fx-signal);
    outline-offset: 2px;
}

.fixly-btn-fullwidth {
    width: 100%;
}

/* =====================================================================
   Ticketuebersicht – Master-Detail (Vorschau-Panel auf breiten Bildschirmen)
   ===================================================================== */

/* Hervorhebung der in TicketTable per Klick ausgewaehlten Zeile (Vorschau).
   Die Flaeche allein traegt den Zustand nicht – die Marke links tut es. */
.fixly-selected-row {
    background-color: var(--mud-palette-table-hover) !important;
}

.fixly-selected-row td {
    border-left: 3px solid var(--fx-signal);
}

/* =====================================================================
   Statuspfad (FI-0035)

   Fuenfteiliger Balken, der sich mit dem Fortschritt fuellt und dabei
   dunkler wird. Aeusseres Element traegt role="img" samt Bezeichnung,
   Balken und Text sind aria-hidden — siehe TicketStatusTrack.razor.
   ===================================================================== */

.fixly-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.fixly-status-track {
    display: inline-flex;
    gap: 2px;
    position: relative;
    flex: none;
}

.fixly-status-seg {
    display: block;
    width: 9px;
    height: 11px;
    background-color: var(--fx-rule);
}

/* Gefuellte Abschnitte tragen alle den Ton des aktuellen Schritts: Der Balken
   wird als Ganzes dunkler, statt eine Treppe innerhalb einer Zeile zu zeigen. */
.fixly-status-seg--on {
    background-color: var(--fx-step, var(--fx-ink));
}

.fixly-status-text {
    font-size: 0.8125rem;
}

/* Grosse Ausfuehrung fuer Detailseite und Vorschau. */
.fixly-status--lg .fixly-status-track {
    gap: 3px;
}

.fixly-status--lg .fixly-status-seg {
    width: 38px;
    height: 14px;
}

/* Fuellfarbe je Status. Die Klasse setzt nur die Variable; die Abschnitte
   oben lesen sie. */
.fixly-status--new { --fx-step: var(--fx-step-new); }
.fixly-status--planned { --fx-step: var(--fx-step-planned); }
.fixly-status--inprogress { --fx-step: var(--fx-step-inprogress); }
.fixly-status--resolved { --fx-step: var(--fx-step-resolved); }
.fixly-status--released { --fx-step: var(--fx-step-released); }

/* Abgelehnt liegt nicht im Ablauf (R-3.5): kein gefuellter Abschnitt, sondern
   ein Strich quer ueber den ganzen Balken. Die Abschnitte bleiben sichtbar,
   damit erkennbar bleibt, worueber der Strich liegt. */
.fixly-status--rejected .fixly-status-seg {
    background-color: var(--fx-rule);
    opacity: 0.6;
}

.fixly-status--rejected .fixly-status-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right,
        transparent 44%,
        var(--fx-rust) 44%,
        var(--fx-rust) 56%,
        transparent 56%);
}

/* =====================================================================
   Ticket-Detailseite – Eigenschaften/Aktionen-Sidebar bleibt beim
   Scrollen der Kommentare/des Verlaufs sichtbar.
   ===================================================================== */

.fixly-sticky-sidebar {
    position: sticky;
    top: 16px;
    align-self: flex-start;
}

/* Auf schmalen Bildschirmen steht die Sidebar unterhalb des Hauptinhalts
   (MudGrid-Umbruch) – dort ist "sticky" nicht sinnvoll. */
@media (max-width: 959px) {
    .fixly-sticky-sidebar {
        position: static;
    }
}

/* =====================================================================
   MarkdownEditor (FI-0003) – Live-Vorschau unter Beschreibung/Release-
   Notes-Eingabefeldern, optisch vom Eingabefeld abgesetzt.
   ===================================================================== */

.fixly-markdown-preview-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--fx-muted);
}

.fixly-markdown-preview {
    border: 1px solid var(--fx-rule);
    border-radius: 3px;
    padding: 0.75rem 1rem;
    background-color: var(--mud-palette-background-gray);
}

.fixly-markdown-help-list {
    margin: 0;
    padding-left: 1.25rem;
}

.fixly-markdown-help-list li {
    margin-bottom: 0.25rem;
}

.fixly-markdown-help-list li:last-child {
    margin-bottom: 0;
}

/* =====================================================================
   Kopfzone einer Seite (FI-0036)

   Zwei Zeilen: Weg dorthin, dann Titel und Hauptaktion, darunter eine
   ruhige Metazeile. Getrennt wird durch eine Haarlinie — keine Erhebung,
   kein Schatten. Der frueher eigene Zurueck-Knopf steckt in der Brotkrume.
   ===================================================================== */

.fixly-page-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fx-rule);
}

.fixly-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0 0 0.25rem 0;
    padding: 0;
    font-size: 0.8125rem;
}

.fixly-crumbs li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--fx-muted);
}

.fixly-crumb-separator {
    color: var(--fx-rule-input);
}

/* Die aktuelle Seite ist die einzige Station in Tinte — sie ist der Ort,
   an dem man steht, und nicht anklickbar. */
.fixly-crumbs [aria-current="page"] {
    color: var(--fx-ink);
    font-weight: 500;
}

.fixly-page-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.fixly-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fixly-page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--fx-muted);
}

.fixly-meta-dot {
    color: var(--fx-rule-input);
}

/* =====================================================================
   Statusleiste ueber der Ticketliste (FI-0037)

   Sechs Umschalter statt einer eigenen Rasterspalte mit Kontrollkaestchen.
   Der gedrueckte Zustand haengt bewusst nicht an Farbe: gedrueckt heisst
   durchgezogener Rahmen in Tinte auf abgesetzter Flaeche, nicht gedrueckt
   heisst gestrichelte Haarlinie in Grau. Der Zustand ist damit auch in
   Graustufen und bei Farbfehlsichtigkeit lesbar (R-9.2).
   ===================================================================== */

.fixly-status-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.fixly-status-filter-label {
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fx-muted);
}

.fixly-status-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.mud-button-root.fixly-filter-chip {
    gap: 0.4rem;
    min-width: 0;
    padding: 0.15rem 0.6rem;
    border: 1px dashed var(--fx-rule);
    border-radius: 3px;
    background-color: transparent;
    color: var(--fx-muted) !important;
    font-weight: 400;
}

.mud-button-root.fixly-filter-chip[aria-pressed="true"] {
    border: 1px solid var(--fx-ink);
    background-color: var(--mud-palette-background-gray);
    color: var(--fx-ink) !important;
    font-weight: 500;
}

.fixly-filter-count {
    font-size: 0.75rem;
    color: var(--fx-muted);
}

.fixly-filter-chip[aria-pressed="true"] .fixly-filter-count {
    color: var(--fx-ink);
}

/* Die Trefferzahl steht am rechten Rand der Leiste und rutscht auf schmalen
   Bildschirmen in eine eigene Zeile. */
.fixly-status-filter-result {
    margin: 0 0 0 auto;
    font-size: 0.8125rem;
    color: var(--fx-muted);
}

@media (max-width: 959px) {
    .fixly-status-filter-result {
        margin-left: 0;
    }
}

/* =====================================================================
   Leere Zustaende (FI-0038)

   Ein leerer Bildschirm ist eine Einladung, kein Statusbericht. Deshalb
   kein Warnkasten, sondern eine ruhige Flaeche mit einem Satz, was hier
   entstehen soll — und dem Knopf, der es anlegt, direkt darunter.
   ===================================================================== */

.fixly-empty {
    border: 1px dashed var(--fx-rule);
    border-radius: 3px;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--fx-muted);
}

.fixly-empty h2 {
    color: var(--fx-ink);
}

/* =====================================================================
   Bearbeitungskonflikt im Ticket-Formular (FI-0042)

   Bewusst kein Warnkasten: Der Benutzer hat nichts falsch gemacht, es ist
   eine Gabelung. Deshalb dieselbe ruhige Flaeche wie sonst, mit der
   Akzentkante in der Signalfarbe — dasselbe Motiv, das in der Sidebar den
   aktiven Eintrag markiert: "hier ist etwas zu entscheiden", nicht "hier
   ist etwas kaputt". Rot ist in Fixly den echten Fehlern vorbehalten.
   ===================================================================== */

.fixly-edit-conflict {
    border: 1px solid var(--fx-rule);
    border-radius: 3px;
    box-shadow: inset 3px 0 0 var(--fx-signal);
    padding: 1rem 1.25rem;
}

/* Die Flaeche bekommt beim Erscheinen den Fokus (tabindex="-1"), damit
   Screenreader und Tastatur direkt bei der Entscheidung landen. Der
   Standard-Umriss des Browsers wuerde die ganze Flaeche einrahmen; die
   Kante links markiert sie bereits. */
.fixly-edit-conflict:focus {
    outline: none;
}

.fixly-edit-conflict:focus-visible {
    outline: 2px solid var(--fx-signal);
    outline-offset: 2px;
}

/* Ein Block je umstrittenem Feld (FI-0044): Feldname, aktueller Wert, und
   darunter die Entscheidung. Die eigene Fassung steht bewusst nicht daneben —
   sie steht im Formular unmittelbar unter dieser Flaeche. */
.fixly-conflict-fields {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0.9rem 0 0 0;
}

/* Die Kante links greift das Motiv der Flaeche im Kleinen auf und haelt die
   Felder ohne Rahmen auseinander. */
.fixly-conflict-field {
    border: none;
    border-left: 1px solid var(--fx-rule);
    margin: 0;
    padding: 0 0 0 0.75rem;
}

.fixly-conflict-field legend {
    color: var(--fx-muted);
    font-size: 0.8125rem;
    padding: 0;
}

/* Lange Werte (Beschreibung, Release Notes) duerfen die Flaeche nicht
   sprengen. Der Kasten scrollt stattdessen und ist dafuer fokussierbar
   (tabindex im Markup) — ein Bereich, den nur die Maus scrollen kann, waere
   fuer Tastaturbenutzer abgeschnitten. */
.fixly-conflict-current {
    margin: 0 0 0.15rem 0;
    color: var(--fx-ink);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    max-height: 9rem;
    overflow-y: auto;
}

.fixly-conflict-current:focus-visible {
    outline: 2px solid var(--fx-signal);
    outline-offset: 2px;
}

/* =====================================================================
   Einklappbarer Abschnitt der Ticketliste (FI-0051)

   Der Umschalter steht in der Ueberschrift und soll auch wie eine
   Ueberschrift aussehen — deshalb Schriftgroesse und -farbe der Umgebung
   statt des MudBlazor-Knopfs. Dass er bedienbar ist, zeigt das Pfeil-Symbol
   davor, nicht ein Rahmen.
   ===================================================================== */

.mud-button-root.fixly-section-toggle {
    gap: 0.4rem;
    min-width: 0;
    padding: 0 0.35rem 0 0;
    background-color: transparent;
    color: inherit !important;
    font: inherit;
    text-transform: none;
    letter-spacing: inherit;
}

.fixly-section-count {
    font-size: 0.8125rem;
    color: var(--fx-muted);
}

/* =====================================================================
   Gerendertes Markdown (FI-0048)

   Gemeinsame Kapselklasse fuer alle Stellen, an denen MarkdownRenderer.
   ToHtml/ToReducedHtml angezeigt wird: Ticket-Beschreibung und Release
   Notes (TicketDetail.razor, TicketDetailPanel.razor), Kommentare
   (TicketDetail.razor) sowie die Live-Vorschau im MarkdownEditor. Bewusst
   eine eigene Klasse statt roher Tag-Selektoren (ul/code/...): Die
   Formatierungshilfe im MarkdownEditor nutzt fuer ihre Legende ebenfalls
   <ul>/<code> (fixly-markdown-help-list), soll davon aber unberuehrt
   bleiben.

   Schrift: Code wird -- anders als der umgebende Nutzertext, der laut
   Entscheid in FI-0033 im System-Font-Stack bleibt -- bewusst wie ein
   Bezeichner behandelt (--fx-mono-family, dieselbe bereits geladene
   IBM Plex Mono wie bei .fixly-mono fuer Ticketnummern/Versionen).
   ===================================================================== */

.fixly-markdown ul,
.fixly-markdown ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.fixly-markdown li + li {
    margin-top: 0.25em;
}

/* Verschachtelte Listen (mehrstufiges Einruecken): Der Abstand nach oben
   greift sonst auch zwischen dem Elternpunkt und der ersten Unterebene,
   was dort zu viel Luft liesse. */
.fixly-markdown li > ul,
.fixly-markdown li > ol {
    margin-top: 0.25em;
}

.fixly-markdown code {
    font-family: var(--fx-mono-family);
    font-size: 0.875em;
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--fx-rule);
    border-radius: 3px;
    padding: 0.1em 0.35em;
}

.fixly-markdown pre {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--fx-rule);
    border-radius: 3px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}

/* Codeblock (<pre><code>): Die Schattierung traegt aussen schon das
   <pre>, das innere <code> soll sie nicht doppelt anlegen. */
.fixly-markdown pre code {
    background-color: transparent;
    border: none;
    padding: 0;
}