/* 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);
}

/* Filter ueber der Seitenleiste (15.09.2026). Er steht zwischen Marke
   und Liste und scrollt deshalb nicht mit. Die Farben folgen der
   dunklen Leiste, nicht dem hellen Bootstrap-Feld. */
.app-sidebar__filter { padding: .75rem .5rem 0; }

.app-sidebar__filterzeile { position: relative; }

.app-sidebar__filtersymbol {
    position: absolute;
    top: 50%;
    left: .625rem;
    display: inline-flex;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .55);
    pointer-events: none;
}

.app-sidebar__filtersymbol svg { width: 1rem; height: 1rem; }

.app-sidebar__filterfeld {
    display: block;
    width: 100%;
    padding: .375rem .625rem .375rem 2rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .875rem;
    line-height: 1.5;
}

.app-sidebar__filterfeld::placeholder { color: rgba(255, 255, 255, .55); }

.app-sidebar__filterfeld:focus {
    outline: 0;
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .12);
}

/* Das Kreuzchen zum Leeren zeichnet WebKit dunkel — auf der dunklen
   Leiste waere es nicht zu sehen. */
.app-sidebar__filterfeld::-webkit-search-cancel-button {
    filter: invert(1);
    opacity: .7;
    cursor: pointer;
}

.app-sidebar__leer {
    margin: 0;
    padding: .5rem .75rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .65);
}

/* Waehrend gefiltert wird, klappt ein Gruppenkopf nicht — er soll dann
   auch nicht so aussehen, als taete er es. */
.app-sidebar__nav.is-gefiltert .app-nav-gruppe__kopf { cursor: default; }
.app-sidebar__nav.is-gefiltert .app-nav-gruppe__kopf:hover { background: transparent; }

/* Auf dem Handy: Daumengroesse, und 16 px Schrift, damit iOS beim
   Antippen nicht in die Seite zoomt. */
@media (max-width: 991.98px) {
    .app-sidebar__filterfeld { min-height: 44px; font-size: 1rem; }
}

/* ------------------------------------------- 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);
}

/* Leistungsumfang (Phase 41 A): nach dem Speichern springt die Seite
   zur bearbeiteten Position zurueck — nicht unter die Topbar, und die
   Position ist kurz zu erkennen. */
.umfang-position {
    scroll-margin-top: 5rem;
}

.umfang-position:target {
    box-shadow: inset .25rem 0 0 var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

/* ------------------------- Festgehaltene Spalte (Planung, Leistungsumfang) */
/* Links die Bibliothek, rechts die Liste, in die gezogen wird
   (21.09.2026). Steht links eine lange Kategorie offen, scrollte die
   Liste oben aus dem Bild, und die Vorlage wurde blind nach oben gezogen.
   Die rechte Spalte bleibt deshalb unter der Topbar stehen.

   Nur, wo die Spalten NEBENEINANDER stehen (ab xl) und der Bildschirm
   hoch genug ist — darunter bleibt alles, wie es war.

   Eine festgehaltene Spalte, die nicht aufs Bild passt, waere unten nie
   erreichbar. Sie ist deshalb hoechstens so hoch wie der Platz unter der
   Topbar: die Karte gibt nach, ihr Kopf und ihre Summenzeile bleiben
   stehen, nur die Liste dazwischen rollt. */
@media (min-width: 1200px) and (min-height: 600px) {
    .haftspalte {
        position: sticky;
        top: 4.5rem;                        /* Topbar plus etwas Luft */
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 5.5rem);
        /* Rueckfall: reicht der Platz selbst fuer die Mindesthoehe der
           Liste nicht (aufgeklapptes Formular auf flachem Bildschirm),
           rollt die Spalte als Ganzes, statt unten herauszuragen. */
        overflow-y: auto;
    }

    .haftspalte > * { flex: 0 0 auto; }

    /* Die Karte ist das Einzige, das nachgibt. Ohne ausdrueckliche
       Mindesthoehe gaebe ein Flex-Kind gar nicht nach (min-height: auto);
       9rem ist weniger als die kleinste echte Karte (Kopf, ein Schritt,
       Summenzeile) und blaeht deshalb keine kurze Liste auf. */
    .haftspalte > .haftspalte__karte {
        flex: 1 1 auto;
        min-height: 9rem;
    }

    /* Nur INNERHALB der Huelle: dem Techniker ohne Planungsrecht fehlt
       die Bibliothek und damit die Huelle — seine Liste fliesst wie
       bisher mit der Seite. */
    .haftspalte .haftspalte__liste {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* .list-group ist selbst eine Flex-Spalte: ihre Zeilen sollen rollen,
       nicht schrumpfen. */
    .haftspalte .haftspalte__liste > * { flex-shrink: 0; }
}

/* --------------------------------------------------- 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;
}


/* --------------------------------------- Rechtstexte: Vorschau und Editor */

/* Die Vorschau der Vertragsvorlagen und Entwuerfe (Phase 27 C); die
   Auszeichnung seit 17.09.2026 braucht dieselben Klassen wie das PDF. */
.vertragsvorschau .zentriert { text-align: center; }
.vertragsvorschau .rechts { text-align: right; }
/* Leerzeilen sind eine Zeile hoch, der Absatz hat keinen eigenen Abstand — wie im PDF. */
.vertragsvorschau p { margin-bottom: 0; }
.vertragsvorschau .leerzeile { height: 1.5em; }

.vertragsvorschau .seitenumbruch {
    border-top: 2px dashed var(--bs-border-color);
    margin: 1.25rem 0;
    text-align: center;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.vertragsvorschau .seitenumbruch::after {
    content: 'Seitenumbruch';
    position: relative;
    top: -.6rem;
    background: var(--bs-tertiary-bg);
    padding: 0 .5rem;
}

/* Unterschriftsmarke (19.09.2026): im PDF stehen hier die Felder. */
.vertragsvorschau .unterschriftsmarke {
    border: 2px dashed var(--bs-border-color);
    border-radius: .25rem;
    margin: 1rem 0;
    padding: 1.5rem .75rem .5rem;
    text-align: center;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* Tabulatoren: eine Stufe sind 2.5rem — Einrueckung und leere Tabstopp-Zelle. */
.vertragsvorschau .einzug-1 { margin-left: 2.5rem; }
.vertragsvorschau .einzug-2 { margin-left: 5rem; }
.vertragsvorschau .einzug-3 { margin-left: 7.5rem; }
.vertragsvorschau .einzug-4 { margin-left: 10rem; }
.vertragsvorschau .einzug-5 { margin-left: 12.5rem; }
.vertragsvorschau .einzug-6 { margin-left: 15rem; }
.vertragsvorschau .einzug-7 { margin-left: 17.5rem; }
.vertragsvorschau .einzug-8 { margin-left: 20rem; }
.vertragsvorschau table.tabstopps { border-collapse: collapse; margin-bottom: .75rem; }
.vertragsvorschau table.tabstopps td { padding: 0 1.25rem 0 0; vertical-align: top; }
.vertragsvorschau table.tabstopps td.leer { padding: 0 0 0 2.5rem; }

/* Die Werkzeugleiste ueber dem Wortlaut — in beiden Editoren dieselbe. */
.text-werkzeuge .btn { min-width: 2.25rem; }
.text-werkzeuge .btn-kursiv { font-style: italic; }
.text-werkzeuge .btn-unterstrichen { text-decoration: underline; }

/* Das Wortlaut-Feld: Tabulatoren sichtbar als vier Zeichen. */
.wortlaut-feld { tab-size: 4; }

/* ---------------------------------- Durchsuchbare Auswahlliste (21.09.2026)
   Suchfeld ueber einer nach Gerätetyp gruppierten Liste
   (partials/suchliste.twig, App.suchliste). Ersetzt die langen
   Auswahlfelder fuer Gerätevorlagen und Kundengeräte. */

.suchliste__feldzeile { position: relative; }

.suchliste__symbol {
    position: absolute;
    top: 50%;
    left: .7rem;
    display: inline-flex;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.suchliste__symbol svg { width: 1rem; height: 1rem; }

.suchliste__feld { padding-left: 2.2rem; }

.suchliste__liste {
    margin-top: .5rem;
    max-height: 24rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

.suchliste__liste.is-ungueltig { border-color: var(--bs-form-invalid-border-color); }

/* Der Gruppenkopf bleibt beim Scrollen stehen — in einer langen Liste
   weiss man sonst nicht mehr, in welchem Gerätetyp man gerade ist. */
.suchliste__gruppenkopf {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.suchliste__anzahl { font-weight: 400; letter-spacing: 0; }

.suchliste__eintrag {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-body-color);
    text-decoration: none;
    cursor: pointer;
}

.suchliste__eintrag:hover,
.suchliste__eintrag:focus-visible,
.suchliste__eintrag:focus-within {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.suchliste__eintrag:focus-visible {
    outline: 2px solid var(--app-akzent-hell);
    outline-offset: -2px;
}

.suchliste__eintrag.is-gewaehlt {
    box-shadow: inset 3px 0 0 var(--app-akzent);
    background: var(--bs-secondary-bg);
}

.suchliste__eintrag.is-inaktiv { color: var(--bs-secondary-color); }

.suchliste__knopf { flex: 0 0 auto; margin: 0; }

.suchliste__text { flex: 1 1 auto; min-width: 0; }

.suchliste__titel {
    display: block;
    font-size: .92rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.suchliste__untertitel {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.suchliste__preis {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.suchliste__leer {
    margin: 0;
    padding: .75rem;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}

.suchliste__zaehler {
    margin: .35rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .78rem;
}

/* Breite Seite (Gerätemaske): die Gruppen stehen nebeneinander, damit
   vierzig Vorlagen auf einen Blick passen. Eine feste Hoehe vertruege
   sich nicht mit dem Spaltensatz — die Spalten liefen seitlich hinaus. */
.suchliste--spalten .suchliste__liste {
    max-height: none;
    overflow: visible;
    column-width: 17rem;
    column-gap: 0;
    column-rule: 1px solid var(--bs-border-color);
}

.suchliste--spalten .suchliste__gruppe { break-inside: avoid; }

.suchliste--spalten .suchliste__gruppenkopf { position: static; }

/* Auf dem Handy: Tippziele in Fingergroesse, und 16 px im Feld, damit
   iOS beim Antippen nicht heranzoomt (Linie des Menuefilters). */
@media (max-width: 991.98px) {
    .suchliste__feld { min-height: 44px; font-size: 1rem; }
    .suchliste__eintrag { min-height: 44px; }
}

/* Die zwei Wege der Karte „Gerät aufnehmen“ im Hardware-Reiter. */
.hw-wege { display: flex; gap: .25rem; }

.hw-wege .btn { flex: 1 1 0; }

/* --------------------------------------------------------------------
   Kamera-Scanner (22.09.2026): Vollbild-Sucher fuer QR- und Strichcodes.
   Liegt ueber allem (Topbar 1030, Sidebar 1045), dunkelt den Hintergrund
   ab und laesst das Videobild den ganzen freien Platz fuellen.
   -------------------------------------------------------------------- */
.scanner-schleier {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: rgba(10, 12, 14, .94);
}

.scanner-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    color: #fff;
}

.scanner-bild {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    background: #000;
}

/* Die Statuszeile behaelt ihre Hoehe, damit das Bild beim Wechsel der
   Meldung nicht springt — gerade beim Durchscannen am Wareneingang. */
.scanner-fuss {
    min-height: 3.25rem;
    padding: .75rem 1rem;
    color: #e6e8ea;
    text-align: center;
    font-size: .95rem;
}

.scanner-fuss.ist-ok     { color: #7ee2a8; font-weight: 600; }
.scanner-fuss.ist-fehler { color: #ff9d9d; font-weight: 600; }