/* Grundlayout der Anwendung: feste Sidebar ab Large-Breakpoint,
   auf kleinen Bildschirmen ausfahrbar. Ergaenzt Bootstrap 5, ersetzt es nicht. */

:root {
    --app-sidebar-breite: 15rem;
    --app-akzent: #2f4858;          /* dunkles Blaugrau, spaeter konfigurierbar */
    --app-akzent-hell: #3d5c70;
}

body {
    background-color: var(--bs-tertiary-bg);
}

/* Verhindert das kurze Aufblitzen von Alpine-Bereichen vor dem Initialisieren. */
[x-cloak] {
    display: none !important;
}

/* ---------------------------------------------------------------- Geruest */

.app-shell {
    min-height: 100vh;
}

.app-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-content {
    padding: 1.5rem 1rem 3rem;
    flex: 1 1 auto;
}

@media (min-width: 992px) {
    .app-main    { margin-left: var(--app-sidebar-breite); }
    .app-content { padding: 2rem 2rem 3rem; }
}

/* --------------------------------------------------------------- Sidebar */

.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1045;
    width: var(--app-sidebar-breite);
    display: flex;
    flex-direction: column;
    background: var(--app-akzent);
    color: rgba(255, 255, 255, .85);
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
}

.app-sidebar.is-offen { transform: translateX(0); }

@media (min-width: 992px) {
    .app-sidebar { transform: translateX(0); }
}

.app-sidebar__marke {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.app-sidebar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .15);
    font-weight: 700;
    font-size: .8rem;
    color: #fff;
}

/* Ist ein Firmenlogo hinterlegt, tritt es an die Stelle der Kachel
   (04.09.2026). Die helle Flaeche darunter ist noetig, weil die
   Seitenleiste dunkel ist und die meisten Logos dunkel gezeichnet sind.
   Die Hoehe ist fest, die Breite waechst mit — damit auch ein
   Schriftzug lesbar bleibt und nicht auf ein Quadrat gestaucht wird. */
.app-sidebar__logo--bild {
    width: auto;
    max-width: 7.5rem;
    height: 2rem;
    padding: .15rem .25rem;
    background: #fff;
    object-fit: contain;
}

.app-sidebar__name {
    font-weight: 600;
    color: #fff;
    font-size: .95rem;
}

.app-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .75rem .5rem;
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    border-radius: .5rem;
    padding: .5rem .75rem;
    color: rgba(255, 255, 255, .8);
    font-size: .925rem;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.app-sidebar .nav-link.active {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 600;
}

.app-sidebar__icon {
    display: inline-flex;
    opacity: .9;
}

/* Gruppen der Seitennavigation (Phase 37).

   Das Auf- und Zuklappen laeuft ueber `grid-template-rows: 0fr → 1fr`
   statt ueber eine feste Hoehe: so bewegt sich die Liste weich, ohne
   dass jemand ihre Hoehe kennen muss. `visibility` nimmt die
   zugeklappten Links zugleich aus der Tab-Reihenfolge — sonst wandert
   der Fokus durch eine unsichtbare Liste. */

.app-nav-gruppe__kopf {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    border: 0;
    border-radius: .5rem;
    padding: .5rem .75rem;
    background: transparent;
    color: rgba(255, 255, 255, .65);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
}

.app-nav-gruppe__kopf:hover,
.app-nav-gruppe__kopf:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Die Gruppe, in der die aktuelle Seite liegt, ist auch zugeklappt
   noch als der Ort zu erkennen, an dem man gerade ist. */
.app-nav-gruppe__kopf.is-aktiv { color: #fff; }

.app-nav-gruppe__label { flex: 1 1 auto; }

.app-nav-gruppe__chevron {
    display: inline-flex;
    opacity: .7;
    transform: rotate(90deg);
    transition: transform .2s ease;
}

.app-nav-gruppe__chevron.is-zu { transform: none; }

/* Offen ist der Grundzustand, `is-zu` schliesst. Anders herum waere
   die Leiste ohne JavaScript vollstaendig zugeklappt und damit
   unbenutzbar; so sieht, wer kein Alpine bekommt, einfach alles. */
.app-nav-gruppe__huelle {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .2s ease;
}

.app-nav-gruppe__huelle > ul {
    overflow: hidden;
    transition: visibility .2s;
}

.app-nav-gruppe__huelle.is-zu { grid-template-rows: 0fr; }

/* `visibility` nimmt die zugeklappten Links zugleich aus der
   Tab-Reihenfolge — sonst wandert der Fokus durch eine unsichtbare
   Liste. */
.app-nav-gruppe__huelle.is-zu > ul { visibility: hidden; }

/* Die Eintraege einer Gruppe ruecken ein — die Einrueckung ersetzt
   die Trennlinie, die eine dunkle Leiste nur unruhig machen wuerde. */
.app-nav-gruppe__huelle .nav-link { padding-left: 1.75rem; }

@media (prefers-reduced-motion: reduce) {
    .app-nav-gruppe__huelle,
    .app-nav-gruppe__chevron { transition: none; }
}

/* Unterwegs wird mit dem Daumen getroffen, nicht mit der Maus. */
@media (max-width: 991.98px) {
    .app-sidebar .nav-link,
    .app-nav-gruppe__kopf { min-height: 44px; }
}

.app-sidebar__fuss {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ------------------------------------------- Navigations-Editor (37 B) */

.nav-editor__wurzel,
.nav-editor__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-editor__wurzel > li + li { margin-top: .35rem; }

.nav-editor__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .35rem .6rem;
    background: var(--bs-body-bg);
}

.nav-editor__liste .nav-editor__item { margin-top: .35rem; }

.nav-editor__griff {
    cursor: grab;
    color: var(--bs-secondary-color);
    /* Ein Griff statt der ganzen Zeile: sonst startet jeder Klick ins
       Beschriftungsfeld ein Ziehen. */
    padding: 0 .15rem;
    user-select: none;
}

.nav-editor__symbol { display: inline-flex; color: var(--bs-secondary-color); }
.nav-editor__titel  { font-weight: 500; }
.nav-editor__pfad   { font-size: .75rem; color: var(--bs-secondary-color); }

.nav-editor__rollen {
    margin-left: auto;
    display: flex;
    gap: .25rem;
    font-size: .7rem;
}

.nav-editor__gruppe {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .5rem;
    background: var(--bs-tertiary-bg);
}

.nav-editor__kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nav-editor__label { max-width: 16rem; }

.nav-editor__symbolknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .4rem;
}

/* Eine leere Gruppe soll als Ziel erkennbar bleiben. */
.nav-editor__liste {
    min-height: 2.25rem;
    margin-top: .35rem;
    border-radius: .4rem;
}

.nav-editor__liste--offen {
    border: 1px dashed var(--bs-border-color);
    padding: .35rem;
}

.nav-editor__zieht { opacity: .5; }

/* ----------------------------------------------- Vorschau der Leiste */

.nav-vorschau {
    border-radius: .5rem;
    padding: .5rem;
    background: var(--app-akzent);
    color: rgba(255, 255, 255, .85);
}

.nav-vorschau__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-vorschau__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    font-size: .9rem;
}

.nav-vorschau__kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.nav-vorschau__gruppe > .nav-vorschau__liste .nav-vorschau__item { padding-left: 1.75rem; }

.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------- Topbar */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.app-topbar__suche { min-width: 18rem; }

/* Die Trefferliste der globalen Suche haengt unter dem Feld. Sie muss
   ueber der Kopfleiste liegen (die selbst z-index 1030 hat) und darf bei
   vielen Treffern nicht aus dem Bild wachsen. */
.app-topbar__treffer {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1040;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    padding: 0;
}

.app-topbar__treffer .list-group-item-action.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

@media (min-width: 992px) {
    .app-topbar { padding: .625rem 2rem; }
    .app-topbar__suche { min-width: 24rem; }
}

/* ----------------------------------------------------------------- Login */

.app-login {
    background: linear-gradient(160deg, var(--app-akzent) 0%, var(--app-akzent-hell) 55%, var(--bs-tertiary-bg) 55%);
    min-height: 100vh;
}

.app-login__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-weight: 700;
}

.app-login__logo--bild {
    display: block;
    width: auto;
    max-width: 12rem;
    height: 3rem;
    padding: .2rem .35rem;
    background: #fff;
    object-fit: contain;
}

.app-login h1,
.app-login .text-secondary { color: rgba(255, 255, 255, .85) !important; }

/* Touchziele auf Mobilgeraeten grosszuegig halten (Zeiterfassung ab Phase 7). */
@media (max-width: 575.98px) {
    .btn, .form-control, .form-select { min-height: 2.75rem; }
}

/* ------------------------------------------------- Sortieren (Drag & Drop) */
/* Ab Phase 3 fuer die Reihenfolge der Zusatzfelder; Vorlagen und
   Arbeitsschritte (Phase 6) benutzen dieselben Klassen. */

[data-griff] {
    cursor: grab;
    user-select: none;
    line-height: 1;
}

[data-griff]:active { cursor: grabbing; }

.sortier-geist {
    opacity: .45;
    background: var(--bs-secondary-bg);
}

/* --------------------------------------------------- Gerätebaum (Phase 4) */

.geraete-baum ul {
    margin-left: .75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--bs-border-color);
}

.geraete-baum__ast + .geraete-baum__ast {
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* ------------------------------------------- Werkstatt-Board (Phase 24 B) */
/* Sechs Spalten nebeneinander, waagerecht scrollend statt umbrechend: ein
   Board, dessen Spalten untereinander stehen, ist kein Board mehr. Auf dem
   Tablet in der Werkstatt wird ohnehin gewischt. */

.board {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    align-items: flex-start;
}

.board__spalte {
    flex: 0 0 15rem;
    background: var(--bs-secondary-bg);
    border-radius: var(--bs-border-radius);
    padding: .5rem;
}

.board__kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .5rem;
}

/* Mindesthoehe, damit eine leere Spalte ein Ziel zum Fallenlassen bleibt. */
.board__karten {
    min-height: 3rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.board__karte { cursor: grab; }
.board__karte:active { cursor: grabbing; }
.board__karte--zieht { opacity: .45; }

/* --------------------------------------------- Kalender (Phase 25 A) */
/* Tag und Woche als Stundenraster, Monat als Gitter aus Tageszellen.
   Das Raster ist ein CSS-Grid mit drei Zeilen — Kopf, Ganztägiges,
   Stundenfläche — und einer Spalte je Tag bzw. je Mitarbeiter. Als Grid,
   weil die drei Zeilen dann in allen Spalten von selbst auf gleicher
   Höhe liegen; mit nebeneinandergestellten Spalten müsste die Anwendung
   die Höhe des Ganztagsstreifens selbst ausrechnen.

   Die Zahl der Stunden steht als --kal-stunden am Raster, weil sie mit
   den Terminen wächst: ein Notdiensteinsatz um vier Uhr morgens soll
   nicht unsichtbar sein. */

.kal__rahmen {
    overflow-x: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

.kal__raster {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 3.5rem;
    grid-auto-columns: minmax(7.5rem, 1fr);
    grid-auto-flow: column;
    min-width: 100%;
}

.kal__spaltenkopf {
    text-align: center;
    padding: .35rem .25rem;
    font-size: .8125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-secondary-bg);
}

.kal__spaltenkopf--heute { background: var(--bs-primary-bg-subtle); }
.kal__spaltenkopf small { display: block; font-weight: 400; color: var(--bs-secondary-color); }
.kal__spaltenkopf a { text-decoration: none; color: inherit; }

/* Der Streifen für Ganztägiges — eine Abwesenheit gehört nicht als
   sechzehn Stunden hohe Säule in den Tag. */
.kal__ganztag {
    min-height: 1.35rem;
    padding: .15rem;
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 1px solid var(--bs-border-color-translucent);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .75rem;
}

.kal__flaeche {
    position: relative;
    height: calc(var(--kal-stunden, 16) * 3rem);
    border-left: 1px solid var(--bs-border-color-translucent);
    background-image: repeating-linear-gradient(
        to bottom,
        var(--bs-border-color-translucent) 0,
        var(--bs-border-color-translucent) 1px,
        transparent 1px,
        transparent 3rem
    );
}

/* Die Zeitspalte ganz links: dieselbe Höhe, aber ohne Raster. */
.kal__zeiten {
    position: relative;
    height: calc(var(--kal-stunden, 16) * 3rem);
}

.kal__zeit {
    position: absolute;
    left: 0;
    right: .3rem;
    text-align: right;
    font-size: .75rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    transform: translateY(-.35em);
}

/* Die halbe Stunde als Ziel zum Ablegen; unsichtbar, aber greifbar. */
.kal__schlitz {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5rem;
}

.kal__schlitz--ziel { background: var(--bs-primary-bg-subtle); }

.kal__termin {
    position: absolute;
    overflow: hidden;
    border-radius: var(--bs-border-radius-sm);
    border-left: 3px solid currentColor;
    padding: .1rem .3rem;
    font-size: .75rem;
    line-height: 1.15;
    cursor: grab;
    text-decoration: none;
    z-index: 1;
}

.kal__termin:active { cursor: grabbing; }
.kal__termin--zieht { opacity: .4; }
.kal__termin--abgesagt { text-decoration: line-through; opacity: .65; }
.kal__termin--verdeckt { font-style: italic; }
.kal__termin b { font-weight: 600; display: block; }
.kal__termin span { display: block; opacity: .85; }

/* Der Griff am unteren Rand verlängert oder verkürzt den Termin. */
.kal__griff {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: .45rem;
    cursor: ns-resize;
}

/* --- Monat ---------------------------------------------------------- */
.kal__monat {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.kal__monatkopf {
    background: var(--bs-secondary-bg);
    font-weight: 600;
    font-size: .8125rem;
    text-align: center;
    padding: .35rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.kal__zelle {
    min-height: 6.5rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    border-left: 1px solid var(--bs-border-color-translucent);
    padding: .25rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.kal__zelle--fremd { background: var(--bs-secondary-bg); }
.kal__zelle--heute { background: var(--bs-primary-bg-subtle); }
.kal__zellkopf { font-size: .75rem; font-weight: 600; display: flex; justify-content: space-between; gap: .25rem; }
.kal__zellkopf small { font-weight: 400; color: var(--bs-secondary-color); }
.kal__eintrag { font-size: .75rem; line-height: 1.15; text-decoration: none; display: block; }

/* --------------------------------------------------- Leitfäden (Phase 36) */

/* Der gerenderte Leitfaden. Er soll wie ein Dokument lesbar sein, nicht
   wie eine Maske — deshalb etwas mehr Zeilenabstand und Luft zwischen
   den Abschnitten. */

.leitfaden {
    line-height: 1.6;
}

.leitfaden > *:first-child { margin-top: 0; }
.leitfaden > *:last-child { margin-bottom: 0; }

.leitfaden h1, .leitfaden h2, .leitfaden h3,
.leitfaden h4, .leitfaden h5, .leitfaden h6 {
    margin-top: 1.75rem;
    margin-bottom: .75rem;
    font-weight: 600;
    /* Damit ein Ankersprung aus der Suche nicht unter der Topbar landet. */
    scroll-margin-top: 5rem;
}

.leitfaden h1 { font-size: 1.5rem; }
.leitfaden h2 { font-size: 1.3rem; border-bottom: 1px solid var(--bs-border-color); padding-bottom: .3rem; }
.leitfaden h3 { font-size: 1.1rem; }
.leitfaden h4, .leitfaden h5, .leitfaden h6 { font-size: 1rem; }

.leitfaden img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    margin: .5rem 0;
}

.leitfaden table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    font-size: .9375rem;
}

.leitfaden table th,
.leitfaden table td {
    border: 1px solid var(--bs-border-color);
    padding: .4rem .6rem;
    vertical-align: top;
}

.leitfaden table th { background: var(--bs-secondary-bg); text-align: left; }

.leitfaden ul, .leitfaden ol { padding-left: 1.4rem; }
.leitfaden li { margin-bottom: .2rem; }

.leitfaden blockquote {
    border-left: .25rem solid var(--bs-border-color);
    padding-left: .9rem;
    color: var(--bs-secondary-color);
    margin: 1rem 0;
}

/* Codeblock mit Kopfleiste und Copy-Knopf. */

.lf-code {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    overflow: hidden;
    margin: 1rem 0;
}

.lf-code-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem .35rem .3rem .75rem;
    background: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .8125rem;
}

.lf-code-sprache {
    color: var(--bs-secondary-color);
    font-weight: 600;
    letter-spacing: .02em;
}

.lf-kopieren {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    border-radius: .25rem;
    padding: .1rem .5rem;
    font-size: .8125rem;
    line-height: 1.4;
    cursor: pointer;
}

.lf-kopieren:hover { background: var(--bs-tertiary-bg); }
.lf-kopieren.lf-kopiert { border-color: var(--bs-success); color: var(--bs-success); }
.lf-kopieren.lf-kopie-fehler { border-color: var(--bs-danger); color: var(--bs-danger); }

.lf-code pre {
    margin: 0;
    padding: 0;
    background: var(--bs-body-bg);
}

.lf-code pre code {
    display: block;
    padding: .75rem;
    font-size: .875rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
}

/* Inline-Code: klickbar, deshalb mit Zeigerhand. */

code.lf-inline {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    padding: .05rem .3rem;
    font-size: .875em;
    color: var(--bs-code-color);
    cursor: pointer;
}

code.lf-inline:hover { background: var(--bs-tertiary-bg); }
code.lf-inline.lf-kopiert { border-color: var(--bs-success); }

/* Hinweisblöcke: > [!WARNUNG] und Verwandte. */

.lf-hinweis {
    border: 1px solid var(--bs-border-color);
    border-left-width: .25rem;
    border-radius: .375rem;
    padding: .75rem 1rem;
    margin: 1rem 0;
    background: var(--bs-secondary-bg);
}

.lf-hinweis-kopf {
    font-weight: 600;
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.lf-hinweis-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
}

.lf-hinweis-text > *:last-child { margin-bottom: 0; }

.lf-hinweis-warnung { border-left-color: var(--bs-warning); background: var(--bs-warning-bg-subtle); }
.lf-hinweis-warnung .lf-hinweis-symbol { background: var(--bs-warning); color: #000; }

.lf-hinweis-achtung { border-left-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.lf-hinweis-achtung .lf-hinweis-symbol { background: var(--bs-danger); }

.lf-hinweis-wichtig { border-left-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.lf-hinweis-wichtig .lf-hinweis-symbol { background: var(--bs-primary); }

.lf-hinweis-hinweis { border-left-color: var(--bs-info); background: var(--bs-info-bg-subtle); }
.lf-hinweis-hinweis .lf-hinweis-symbol { background: var(--bs-info); color: #000; }

.lf-hinweis-tipp { border-left-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.lf-hinweis-tipp .lf-hinweis-symbol { background: var(--bs-success); }

/* Platzhalter: sichtbar in der Bibliothek, als Hinweis im Vorgang. */

.lf-platzhalter {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px dashed var(--bs-secondary-color);
    padding: 0 .1rem;
    color: var(--bs-secondary-color);
}

.lf-platzhalter.lf-unbekannt {
    border-bottom-color: var(--bs-danger);
    color: var(--bs-danger);
}

.lf-fehlt {
    background: var(--bs-warning-bg-subtle);
    border-bottom: 1px dashed var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
    text-decoration: none;
    padding: 0 .15rem;
    font-weight: 600;
}

a.lf-fehlt:hover { background: var(--bs-warning); color: #000; }

/* Checklisten. */

.leitfaden .lf-haken {
    margin-right: .4rem;
    vertical-align: baseline;
}

.leitfaden li:has(> .lf-haken:checked) {
    color: var(--bs-secondary-color);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Versionsvergleich. */

.lf-diff {
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    overflow-x: auto;
}

.lf-diff-zeile {
    display: flex;
    gap: .5rem;
    padding: .05rem .5rem;
    white-space: pre;
}

.lf-diff-nr {
    color: var(--bs-secondary-color);
    min-width: 2.5rem;
    text-align: right;
    user-select: none;
}

.lf-diff-zeichen { user-select: none; width: 1ch; }
.lf-diff-text { white-space: pre-wrap; word-break: break-word; }
.lf-diff-plus { background: var(--bs-success-bg-subtle); }
.lf-diff-minus { background: var(--bs-danger-bg-subtle); }
.lf-diff-luecke { color: var(--bs-secondary-color); text-align: center; padding: .2rem; }

/* Editor. */

.lf-quelltext {
    font-family: var(--bs-font-monospace);
    font-size: .875rem;
    line-height: 1.5;
    tab-size: 4;
}

.lf-rohtext {
    white-space: pre-wrap;
    font-size: .8125rem;
}