html, body {
    font-family: 'Segoe UI', Calibri, 'Segoe UI Web (West European)', Tahoma, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #73b92d;
    border-color: #65a527;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: #65a527 !important;
        border-color: #588f22 !important;
        color: #fff;
    }

a, .btn-link {
    color: var(--indusa-link, #2d7091);   /* dunkel: helleres Blau (17.10.2026) */
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.2rem rgba(115,185,45,0.6);
}

.content {
    padding-top: 1.1rem;
}

/* Auswahl-Listen (Filtersystem/Gerät): zeilenweise grau/weiß, Hover indusa-grün */
.auswahl-liste .btn {
    border-radius: 0;
    border: 1px solid var(--bs-border-color);
    border-bottom-width: 0;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.auswahl-liste .btn:last-child { border-bottom-width: 1px; }
.auswahl-liste > button:nth-child(even) { background-color: var(--bs-tertiary-bg) !important; }
.auswahl-liste .btn:hover { background-color: #73b92d !important; border-color: #65a527; color: #fff !important; }
.auswahl-liste .btn.btn-primary { background-color: #73b92d !important; border-color: #65a527; color: #fff; }

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Unterschrift-Pad */
.signature-wrap {
    display: inline-block;
}
.signature-canvas {
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: var(--bs-body-bg);
    touch-action: none;
    max-width: 100%;
}
.signature-actions {
    margin-top: .4rem;
}

/* Fehlertext der Standardvorlage neutralisieren */
.blazor-error-boundary::after {
    content: "Es ist ein Fehler aufgetreten.";
}

/* Login */
.empty-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg);
}
.login-card {
    width: 100%;
    max-width: 380px;
    padding: 2rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.pps-cal-d.gesperrt { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.login-titel { font-weight: 600; margin-bottom: .5rem; }

/* Angemeldeter Benutzer im Seitenmenü */
.nav-user {
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: auto;
}

/* ==========================================================================
   Arbeitsnachweis – Mobil-Layout (Route /nachweis/mobil, Klasse .nachweis-mobil).
   Gleiche Komponente/Logik wie Desktop, nur touch-optimiert (Samsung Tab + Handy).
   Global (nicht scoped), damit auch Kindkomponenten (MaterialListe, InputNumberDec,
   SignaturePad) erfasst werden.
   ========================================================================== */

/* Große Tippziele: Eingaben und Knöpfe. 16px verhindert Auto-Zoom auf Mobilbrowsern. */
.nachweis-mobil .form-control,
.nachweis-mobil .form-select,
.nachweis-mobil .btn {
    min-height: 44px;
    font-size: 16px;
}

.nachweis-mobil .btn {
    padding: .55rem 1rem;
}

/* Beschriftungen etwas größer und mit Luft. */
.nachweis-mobil .form-label {
    font-size: .95rem;
    margin-bottom: .15rem;
    font-weight: 600;
}

/* Reiter (Zeiten/Material/…): größere Flächen, umbrechen statt abschneiden. */
.nachweis-mobil .erfassung-tabs {
    flex-wrap: wrap;
}
.nachweis-mobil .erfassung-tabs .nav-link {
    padding: .6rem 1rem;
    font-size: 1rem;
}

/* Breite Tabellen (v. a. die Zeiten-Tabelle) horizontal scrollbar machen.
   NUR am Tabellen-Wrapper – NICHT am ganzen .card-body, sonst schneidet dessen
   erzwungenes overflow-y die Such-Trefferliste (position-absolute) ab. */
.nachweis-mobil .table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Tabellenzellen mit mehr vertikaler Höhe für den Finger. */
.nachweis-mobil table.table > :not(caption) > * > * {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* Checkboxen/Radios vergrößern. */
.nachweis-mobil .form-check-input {
    width: 1.35rem;
    height: 1.35rem;
}

/* Abschnitts-Umschalter (Kopfdaten/Zeiten/Material/Fußdaten) der Mobil-Ansicht. */
.mobil-abschnitte .btn {
    padding-left: .4rem;
    padding-right: .4rem;
    font-size: .95rem;
}

/* Auf schmalen Geräten (Handy) die Kopf-Karten voll ausnutzen und Abstände straffen. */
@media (max-width: 575.98px) {
    .nachweis-mobil .card-header {
        font-size: 1rem;
    }
    .nachweis-mobil .row.g-3 {
        --bs-gutter-y: .75rem;
    }
    /* Vier Abschnitts-Knöpfe müssen nebeneinander passen. */
    .mobil-abschnitte .btn {
        font-size: .8rem;
        padding-left: .25rem;
        padding-right: .25rem;
    }
}

/* Listen: Toolbar/Kopf bleiben oben, Tabellenkopf klebt beim Scrollen, Zeilen zebra.
   Tabelle in <div class="liste-scroll" data-voll> wickeln (Höhe bis an den Fensterrand rechnet ziehbar.js, auch mit A−/A+)
   und der <table> die Klasse table-striped geben. Gilt für alle Listen. */
.liste-scroll {
    overflow: auto;
}
.liste-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}



/* Preisliste-Zoom (A−/A/A+): die Schriftgröße am Container in em setzen. Bootstrap-Buttons,
   Inputs, Selects und Badges rechnen sonst in rem und schrumpfen nicht mit → hier auf em
   umbiegen (Schrift + Padding relativ), damit auch die Toolbar kleiner wird und Platz spart. */
.preis-zoom .btn,
.preis-zoom .form-control,
.preis-zoom .form-select,
.preis-zoom .input-group-text,
.preis-zoom .badge {
    font-size: 1em;
    padding-top: .25em;
    padding-bottom: .25em;
}
.preis-zoom .form-check-label,
.preis-zoom summary,
.preis-zoom .small {
    font-size: 1em;
}

/* Tabellenkopf klebt auch beim Seiten-Scroll (Listen ohne eigenen Scrollcontainer).
   border-collapse:separate ist nötig, sonst klebt der Kopf bei Bootstrap-Tabellen nicht. */
.tabelle-sticky {
    border-collapse: separate;
    border-spacing: 0;
}
.tabelle-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* Artikelnummer mit Tooltip (Komponente ArtikelNr): dezent gepunktet unterstrichen, damit man
   sieht, dass beim Überfahren alle Texte des Artikels erscheinen. */
.artikelnr-tip {
    text-decoration: underline dotted rgba(0, 0, 0, .35);
    text-underline-offset: 2px;
    cursor: help;
}
a .artikelnr-tip { cursor: pointer; }
/* Mit Recht „Artikelseite“ ist die Nummer ein Link (11.10.2026) – sieht aus wie bisher, blau beim Überfahren */
a.artikelnr-link { color: inherit; cursor: pointer; }
a.artikelnr-link:hover { color: #0d6efd; }

/* Listenfilter (js/listenfilter.js): Trichter je Spalte, grün = aktiv, Popup am body. */
tr[data-lf-aus] { display: none !important; }
th.lf-sortierbar { cursor: pointer; }
.lf-trichter { cursor: pointer; margin-left: 4px; opacity: .35; font-weight: normal; }
.lf-trichter:hover { opacity: .8; }
.lf-trichter.aktiv { opacity: 1; color: var(--bs-success-text-emphasis); }
.lf-popup {
    position: fixed; z-index: 2000; width: 250px; padding: .5rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem;
}
/* Schriftgröße der Listen (js/listenfilter.js): kleine Felder in der Tabelle wachsen mit. */
table[data-lf-schrift] .form-select-sm, table[data-lf-schrift] .form-control-sm,
table[data-lf-schrift] .btn-sm, table[data-lf-schrift] .form-select, table[data-lf-schrift] .form-control { font-size: inherit; }
.lf-schrift { display: flex; align-items: center; white-space: nowrap; }
.lf-schrift-frei {
    position: fixed; right: 12px; bottom: 10px; z-index: 1500;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: 2px 4px;
}
/* Spalten-Taste (rechts im letzten Kopf) und Ziehgriff am rechten Rand jeder Kopfzelle. */
th.lf-kopf { position: relative; }
.lf-spalten { cursor: pointer; float: right; margin-left: 4px; opacity: .4; font-weight: normal; }
.lf-spalten:hover { opacity: .8; }
.lf-spalten.aktiv { opacity: 1; color: var(--bs-success-text-emphasis); }
.lf-griff { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 3; }
.lf-griff::after { content: ""; position: absolute; left: 3px; top: 25%; height: 50%; width: 1px; background: #000; opacity: .45; }
.lf-griff:hover { background: rgba(13, 110, 253, .25); }
.lf-griff:hover::after { opacity: .9; }
body.lf-zieht, body.lf-zieht * { cursor: col-resize !important; user-select: none !important; }
/* Im Menü (dunkler Grund): helle Knöpfe. */
.lf-schrift-ort .lf-schrift .btn { color: #fff; border-color: rgba(255, 255, 255, .45); }
.lf-schrift-ort .lf-schrift .btn:hover { background: rgba(255, 255, 255, .15); }
.lf-schrift-ort .lf-schrift span { color: rgba(255, 255, 255, .7) !important; }
.lf-schrift-ort .lf-schrift-name { color: rgba(255, 255, 255, .7); }
.lf-schrift-frei .lf-schrift-name { display: none; }

/* ---- Handy-Leiste (Components/Layout/MobilLeiste.razor) ----------------------------------
   Unter 768 px: Leiste unten statt Seitenmenü; "Mehr" öffnet das Menü als Vollbild. Tablets
   (Galaxy Tab: 800 px hochkant) und PC liegen darüber und behalten das Seitenmenü. */
.mobil-leiste { display: none; }
.mobil-knopf {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 11px; color: var(--bs-secondary-color); text-decoration: none; background: none; border: 0; padding: 0;
}
.mobil-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mobil-knopf.active { color: var(--bs-success-text-emphasis); font-weight: 600; }
/* Einheitliche Knopf-Symbole (Components/Shared/Sym.razor) */
.sym { width: 1.2em; height: 1.2em; vertical-align: -0.22em; fill: none; stroke: currentColor;
       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sym-dreht { display: inline-block; animation: sym-dreht 1s linear infinite; }
/* Farbige Bild-Symbole (FarbSymbol, 03.10.2026): PA/AB/Art im Chat */
.fsym { width: 1.45em; height: 1.45em; vertical-align: -0.35em; }
.filter-bild { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.filter-kurz { display: none; font-size: .6rem; font-weight: 600; margin-top: 1px; }
body.sym-mit-text .filter-kurz { display: block; }
/* Kleine Chatsymbole hinter Nummern: nie mit Beschriftung (stehen mitten im Text) */
body.sym-mit-text .chat-mini::after { content: none !important; }
/* Raster (SeitenKopf / AktionsLeiste): Symbole immer an derselben Stelle */
.seiten-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 1rem; }
.seiten-kopf-rechts { display: flex; align-items: flex-start; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.aktions-leiste { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 1rem 0 1.5rem; }
/* Auch am PC unten am Fensterrand festhalten – Speichern/Löschen immer an derselben Stelle.
   Am Handy setzt die Handy-Leiste weiter unten den Abstand (über der Leiste). */
.aktions-leiste.mobil-aktion {
    position: sticky; bottom: 0; z-index: 5; background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color); padding: 8px 0; margin-bottom: 0;
}
.aktions-leiste-mitte { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Umschalter "Symbole mit Beschriftung" (listenfilter.js): Name aus aria-label klein darunter.
   Nur Knöpfe, die ausschließlich ein Symbol tragen – Speichern/Löschen haben ihr Wort schon. */
body.sym-mit-text .btn[aria-label]:has(.sym)::after {
    content: attr(aria-label); display: block; font-size: .68em; line-height: 1.1; margin-top: 1px; white-space: nowrap;
}
.lf-schrift-ort { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lf-schrift-ort .lf-schrift-name { margin-right: 2px !important; }
.lf-schrift-ort .lf-schrift-wert { padding: 0 2px !important; }
.lf-schrift-ort .btn.px-1 { padding-left: 3px !important; padding-right: 3px !important; }
.lf-schrift-ort .lf-sym-knopf { color: #fff; border-color: rgba(255, 255, 255, .45); }
.lf-schrift-ort .lf-sym-knopf.active { background: rgba(255, 255, 255, .25); }
@keyframes sym-dreht { to { transform: rotate(360deg); } }

/* Mitarbeiter-Auswahl als Kürzel-Chips (Shared/KuerzelAuswahl.razor) */
.kz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid #7ac143; border-radius: 12px; background: var(--bs-success-bg-subtle); font-size: .85rem; }
/* Messekalender (20.10.2026): Jahresraster, Monate als Spalten, Tage 1–31 untereinander */
.mk-raster { border: 1px solid var(--bs-border-color); border-radius: .4rem; overflow: hidden; font-size: .72rem; }
.mk-zeile { display: grid; grid-template-columns: repeat(12, 1fr); }
.mk-zeile + .mk-zeile { border-top: 1px solid var(--bs-border-color-translucent); }
.mk-kopf { background: var(--bs-tertiary-bg); font-weight: 600; border-bottom: 1px solid var(--bs-border-color); }
.mk-monat { padding: .3rem .4rem; font-weight: 600; text-align: center; border-right: 1px solid var(--bs-border-color); }
.mk-tag { position: relative; display: flex; align-items: center; gap: .3rem; min-height: 1.45rem; padding: 0 .3rem; border-right: 1px solid var(--bs-border-color); cursor: pointer; overflow: hidden; white-space: nowrap; }
.mk-nr { width: 1.1rem; text-align: right; font-weight: 600; }
.mk-wt { width: 1.3rem; color: var(--bs-secondary-color); }
.mk-messe .mk-wt { color: rgba(255,255,255,.85); }
.mk-frei { background: var(--bs-secondary-bg); }
.mk-leer { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--bs-border-color-translucent) 4px 5px); cursor: default; }
.mk-heute { box-shadow: inset 0 0 0 2px #dc3545; }
.mk-messe { color: #fff; }
.mk-aktiv { box-shadow: inset 0 0 0 2px #212529; }
.mk-kw { margin-left: auto; font-size: .6rem; color: var(--bs-secondary-color); }
.mk-messe .mk-kw { color: rgba(255,255,255,.85); }
.mk-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 2px rgba(0,0,0,.5); }
.mk-feiertag { background: rgba(220, 53, 69, .14); }
.mk-feiertag .mk-nr { color: #dc3545; }
.mk-ftname { font-size: .62rem; color: #dc3545; overflow: hidden; text-overflow: ellipsis; }
.mk-feiertag-anders { outline: 1px dashed #dc3545; outline-offset: -3px; }
.mk-ftname-anders { opacity: .8; }
.mk-punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; }
/* Projekt-Postfach (20.10.2026): Ordner links, Mails rechts; am Handy untereinander */
.pp-raster { display: grid; grid-template-columns: 15rem 1fr; gap: .75rem; align-items: start; }
@media (max-width: 767.98px) { .pp-raster { grid-template-columns: 1fr; } }
.pp-ordner { border: 1px solid var(--bs-border-color); border-radius: .4rem; max-height: 70vh; overflow-y: auto; padding: .2rem 0; }
.pp-ordner-zeile { display: flex; align-items: center; gap: .3rem; width: 100%; border: 0; background: none; color: inherit; text-align: left; font-size: .85rem; padding: .2rem .5rem; }
.pp-ordner-zeile:hover { background: var(--bs-tertiary-bg); }
.pp-ordner-zeile.aktiv { background: var(--bs-primary-bg-subtle); }
.pp-inhalt { min-width: 0; }
.pp-mailtext { width: 100%; height: 65vh; border: 1px solid var(--bs-border-color); border-radius: .4rem; background: #fff; }
/* Schritt-Verantwortlicher gewählt (19.10.2026, Holger): grün umrandet wie die Beteiligten-Chips */
.form-select.sel-verantw { border-color: #7ac143; background-color: var(--bs-success-bg-subtle); }
.kz-chip.unbekannt { border-color: var(--bs-border-color); background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.kz-chip .btn-link { color: var(--bs-secondary-color); line-height: 1; }
.kz-neu { max-width: 220px; }
.kz-chip.nein { border-color: #dc3545; background: var(--bs-danger-bg-subtle); color: #842029; }

/* Rechte (Admin/Rechte.razor): vier Spalten Menüeintrag · Funktion · darf · hinzufügen */
.rechte-raster { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(170px, 1fr) minmax(220px, 1.3fr) minmax(190px, 1fr) minmax(190px, 1fr); gap: 10px; }
.rechte-spalte { border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--bs-body-bg); max-height: calc(100vh - 170px); overflow-y: auto; }
.rechte-titel { position: sticky; top: 0; z-index: 1; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); padding: 6px 10px; font-weight: 600; }
.rechte-spalte .list-group-item { font-size: .9rem; padding: 6px 10px; }
@media (max-width: 1199.98px) { .rechte-raster { grid-template-columns: 1fr 1fr 1fr; } }

/* Urlaub: Urlaubskonto oben (aus TimePunch) */
.urlaub-konto > div:not(.small) { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 6px 12px; background: var(--bs-body-bg); font-size: .8rem; color: var(--bs-secondary-color); min-width: 120px; }
.urlaub-konto > div > span { display: block; font-size: 1.4rem; font-weight: 600; color: var(--bs-body-color); line-height: 1.2; }
.urlaub-konto > div.rest { border-color: #198754; background: var(--bs-success-bg-subtle); }
.urlaub-konto > div.rest > span { color: var(--bs-success-text-emphasis); }

/* Urlaub: Karten je Antrag, Rand nach Status */
.urlaub-karte { max-width: 900px; border-left: 5px solid #ffc107; }
.urlaub-karte.freigabe { border-left-color: #0d6efd; }
.urlaub-karte.genehmigt { border-left-color: #198754; }
.urlaub-karte.abgelehnt { border-left-color: #dc3545; }
.urlaub-karte.zurueckgezogen { border-left-color: var(--bs-border-color); opacity: .8; }

/* Zeit (Stempeln): Statuskarte grün = läuft, gelb = Pause */
.zeit-stand { border-left: 6px solid var(--bs-border-color); }
.zeit-stand.laeuft { border-left-color: #198754; background: var(--bs-success-bg-subtle); }
.zeit-stand.pause { border-left-color: #ffc107; background: var(--bs-warning-bg-subtle); }
.zeit-knoepfe { max-width: 520px; }
.zeit-gewaehlt { background: var(--bs-success-bg-subtle); border: 1px solid #198754; }
.zeit-liste { max-height: 55vh; overflow-y: auto; }
/* Runde Symbol-Knöpfe: Starten grün, Pause gelb, Gehen rot, Wechseln grau */
.zeit-rund { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font-size: 13px; color: var(--bs-secondary-color); }
.zeit-rund .kreis { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid; }
.zeit-rund .kreis svg { width: 30px; height: 30px; }
.zeit-rund.gruen .kreis { background: #198754; border-color: #198754; color: #fff; }
.zeit-rund.gelb .kreis { background: #ffc107; border-color: #ffc107; color: var(--bs-warning-text-emphasis); }
.zeit-rund.rot .kreis { background: var(--bs-body-bg); border-color: #dc3545; color: #dc3545; }
.zeit-rund.grau .kreis { background: var(--bs-body-bg); border-color: #198754; color: var(--bs-success-text-emphasis); }
.zeit-rund:disabled { opacity: .45; }
.zeit-rund:not(:disabled):active .kreis { transform: scale(.95); }

/* Info-Startseite: Kacheln, am Handy als Zeile mit Symbol links */
.info-kachel { text-align: center; padding: 1.5rem 1rem; }
.info-kachel > :first-child { margin-bottom: .5rem; }
@media (max-width: 767.98px) {
    .info-kachel { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 12px; }
    .info-kachel > :first-child { grid-row: span 2; margin: 0; font-size: 2rem !important; }
    /* Info-Tafeln: eine Ressource je Bildschirmbreite, seitlich wischen */
    .info-spalten { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    .info-spalten > [class*="col-"] { flex: 0 0 88%; max-width: 88%; scroll-snap-align: start; }
    .info-spalten .list-group-item { overflow-wrap: anywhere; }
}
/* Klappe "Werkstatt": öffnet nach oben über der Leiste */
.mobil-gruppe { flex: 1; display: flex; position: relative; }
.mobil-gruppe:not(:has(.mobil-eintrag)) { display: none; }
.mobil-gruppe > summary { list-style: none; cursor: pointer; }
.mobil-gruppe > summary::-webkit-details-marker { display: none; }
.mobil-gruppe:has(.mobil-eintrag.active) > summary,
.mobil-gruppe[open] > summary { color: var(--bs-success-text-emphasis); font-weight: 600; }
.mobil-klappe {
    position: absolute; left: 6px; bottom: calc(100% + 6px); min-width: 210px;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; box-shadow: 0 -4px 16px rgba(0,0,0,.15);
    padding: 4px 0;
}
.mobil-gruppe.rechts .mobil-klappe { left: auto; right: 6px; }
.mobil-eintrag {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 15px;
    color: var(--bs-body-color); text-decoration: none;
}
.mobil-eintrag + .mobil-eintrag { border-top: 1px solid var(--bs-border-color); }
button.mobil-eintrag { width: 100%; background: none; border: 0; border-top: 1px solid var(--bs-border-color); text-align: left; }
.mobil-eintrag svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mobil-eintrag.active { color: var(--bs-success-text-emphasis); font-weight: 600; background: var(--bs-success-bg-subtle); }
@media (max-width: 767.98px) {
    .mobil-leiste {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
        height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
        background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color);
    }
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    /* Seitenmenü nur als Vollbild über "Mehr" */
    .page > .sidebar {
        display: none !important; position: fixed !important; top: 0; left: 0; right: 0;
        bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 1030; overflow-y: auto; width: auto !important;
    }
    .page > .sidebar:has(.navbar-toggler:checked) { display: flex !important; }
    .lf-schrift-frei { display: none !important; }

    /* Seiteninhalt: schmaler Rand, oben etwas Luft (kein Menükopf mehr darüber). */
    main > article.content { padding: 10px 12px 0 !important; }
    /* iOS zoomt beim Antippen in Felder unter 16 px hinein. */
    input.form-control, select.form-select, textarea.form-control { font-size: 16px !important; }
    /* Listen mit .mobil-frei scrollen mit der Seite statt im eigenen Kasten. */
    .liste-scroll.mobil-frei { max-height: none !important; }
    /* Aktionsleiste über der Handy-Leiste festhalten. */
    .mobil-aktion, .aktions-leiste.mobil-aktion {
        position: sticky; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 5;
        background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: 8px 0; margin-bottom: 0 !important;
    }
    /* Ankreuzfelder als Kacheln zum Antippen (z. B. Messebericht). */
    .kacheln .form-check { display: inline-block; padding: 0; margin: 0 6px 6px 0; }
    .kacheln .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
    .kacheln .form-check-label {
        display: inline-block; padding: 7px 12px; border: 1px solid var(--bs-border-color); border-radius: 18px;
        background: var(--bs-body-bg); font-size: 15px; cursor: pointer;
    }
    .kacheln .form-check-input:checked + .form-check-label { background: #198754; border-color: #198754; color: #fff; }
    .kacheln .form-check-input:disabled + .form-check-label { opacity: .7; }

    /* PA-Abnahme: Prüfpunkte untereinander statt vier Spalten – Text oben, darunter Eingabe
       und Kürzel, darunter die Bemerkung. */
    .pa-abnahme-tab, .pa-abnahme-tab tbody { display: block; }
    .pa-abnahme-tab tr {
        display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 6px;
        padding: 8px 10px; border-bottom: 1px solid var(--bs-border-color);
    }
    .pa-abnahme-tab tr:nth-child(odd) { background: rgba(var(--bs-emphasis-color-rgb), .04); }
    .pa-abnahme-tab td {
        display: block; width: auto !important; min-width: 0 !important; padding: 0 !important;
        border: 0 !important; box-shadow: none !important; background: transparent !important;
    }
    .pa-abnahme-tab td:first-child { grid-column: 1 / -1; }
    .pa-abnahme-tab td:nth-child(3) { align-self: center; text-align: right; }
    .pa-abnahme-tab td:nth-child(4) { grid-column: 1 / -1; }
    .pa-abnahme-tab td:empty { display: none; }
    .pa-abnahme-tab .btn-sm { padding: .45rem .9rem; font-size: 1rem; }

    /* Preisliste-Katalog: Seite scrollt als Ganzes (keine feste Höhe), Liste als Karten:
       oben Bezeichnung + Preis, darunter Art.-Nr., Menge, Dateien. */
    .preis-zoom { height: auto !important; display: block !important; }
    .preis-zoom > .flex-grow-1 { overflow: visible !important; }
    .katalog-tab, .katalog-tab tbody { display: block; }
    .katalog-tab thead { display: none; }
    .katalog-tab tr {
        display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 10px; row-gap: 2px;
        grid-template-areas: "bez bez bez preis" "nr anz dat dat"; padding: 6px 8px; border-bottom: 1px solid var(--bs-border-color);
    }
    .katalog-tab tr:nth-child(odd) { background: rgba(var(--bs-emphasis-color-rgb), .04); }
    .katalog-tab td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
    .katalog-tab .k-bez { grid-area: bez; }
    .katalog-tab .k-preis { grid-area: preis; font-weight: 600; white-space: nowrap; }
    .katalog-tab .k-nr { grid-area: nr; }
    .katalog-tab .k-anz { grid-area: anz; text-align: left !important; }
    .katalog-tab .k-dat { grid-area: dat; }
    .katalog-tab tr.k-trenner { display: block; }
    .katalog-tab tr.k-trenner td { padding: 4px 0 !important; }
}

/* Datums-Auswahl mit KW-Spalte (Shared/KwDatum.razor) – überall statt des nativen Pickers */
.pps-cal { position:relative; display:inline-block; }
.pps-cal-back { position:fixed; inset:0; z-index:1000; }
.pps-cal-pop { position:absolute; top:calc(100% + 4px); left:0; z-index:1001; background:var(--bs-body-bg);
    border:1px solid var(--bs-border-color); border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.18); padding:8px; }
.pps-cal-hd { display:flex; align-items:center; gap:6px; margin-bottom:6px; font-weight:600; }
.pps-cal-hd span { flex:1; text-align:center; text-transform:capitalize; }
.pps-cal-grid { display:grid; grid-template-columns:auto repeat(7,32px); gap:2px; }
.pps-cal-kwh, .pps-cal-wd { font-size:.68rem; color:var(--bs-secondary-color); text-align:center; font-weight:600; padding:2px 0; }
.pps-cal-kw { font-size:.68rem; color:var(--bs-secondary-color); text-align:right; padding-right:6px; align-self:center;
    border-right:1px solid var(--bs-border-color); }
.pps-cal-kwh { text-align:right; padding-right:6px; }
.pps-cal-d { border:0; background:transparent; border-radius:4px; height:30px; cursor:pointer; font-size:.8rem; color:var(--bs-body-color); }
.pps-cal-d:hover { background:var(--bs-secondary-bg); }
.pps-cal-d.aus { color:#c0c4c8; }
.pps-cal-d.heute { background:var(--bs-success-bg-subtle); font-weight:700; }
.pps-cal-d.sel { outline:2px solid #0d6efd; outline-offset:-2px; }
/* Rechts im Seitenkopf klappt der Kalender nach links auf, sonst ragt er über den Rand. */
.seiten-kopf-rechts .pps-cal-pop { left: auto; right: 0; }

/* text-bg-* gibt es erst ab Bootstrap 5.2 – eingebunden ist 5.1. Ohne diese Klassen waren
   Badges weiße Schrift ohne Hintergrund (Rechte in der Benutzerliste, Urlaub-Status, …). */
.text-bg-primary   { color:#fff !important; background-color:rgba(var(--bs-primary-rgb),1) !important; }
.text-bg-secondary { color:#fff !important; background-color:rgba(var(--bs-secondary-rgb),1) !important; }
.text-bg-success   { color:#fff !important; background-color:rgba(var(--bs-success-rgb),1) !important; }
.text-bg-danger    { color:#fff !important; background-color:rgba(var(--bs-danger-rgb),1) !important; }
.text-bg-warning   { color:var(--bs-body-color) !important; background-color:rgba(var(--bs-warning-rgb),1) !important; }
.text-bg-info      { color:var(--bs-body-color) !important; background-color:rgba(var(--bs-info-rgb),1) !important; }
.text-bg-light     { color:var(--bs-body-color) !important; background-color:rgba(var(--bs-light-rgb),1) !important; }
.text-bg-dark      { color:#fff !important; background-color:rgba(var(--bs-dark-rgb),1) !important; }

/* Nachrichten-Glocke in der Handy-Leiste (Components/Shared/NachrichtenGlocke.razor, 01.10.2026) */
.glocke-zahl { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
               background: #dc3545; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.mobil-knopf .glocke-zahl { top: 2px; right: calc(50% - 22px); }
.mobil-knopf .mobil-zahl { position: absolute; top: 0; right: calc(50% - 26px); line-height: 1; }
.mobil-knopf .mobil-zahl .badge { font-size: .6rem; }
.mobil-knopf .mobil-zahl-todo { right: auto; left: calc(50% - 26px); }

/* Formeln im Rechenweg (Elektro-Rechner, 01.10.2026): Bruch übereinander, Indizes tiefgestellt */
.formel { font-family: "Cambria Math", "Cambria", "Times New Roman", serif; font-size: .95rem; line-height: 2.2; }
.formel sub { font-size: .7em; }
.bruch { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .2em; line-height: 1.2; }
.bruch > span:first-child { border-bottom: 1px solid currentColor; padding: 0 .25em; }
.bruch > span:last-child { padding: 0 .25em; }

/* Chat (Mein Bereich, CHAT.md) */
.chat-raeume { max-height: calc(100vh - 140px); overflow: auto; min-width: 0; }
/* Filter als Spalte links neben der Liste (24.10.2026); Zahl der ungelesenen klein oben rechts am Knopf */
.chat-filter { flex: 0 0 auto; overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 140px); padding: 6px 4px 0 0; }
.chat-filter .btn { position: relative; min-width: 2.6rem; padding-top: .35rem; padding-bottom: .35rem; }
.chat-filter .btn .badge { position: absolute; top: -5px; right: -4px; margin: 0 !important; font-size: .6rem; padding: .2em .45em; }
.chat { max-width: var(--chat-breite, none); }
.chat-verlauf { height: calc(100vh - 260px); min-height: 280px; overflow: auto; background: var(--chat-hg, var(--bs-warning-bg-subtle)); }
.chat-blase { max-width: 85%; background: var(--bs-body-bg); font-size: calc(.875rem * var(--chat-schrift, 1)); }   /* 15.10.2026: eine Stufe kleiner; A−/A+ im Chatkopf (16.10.2026) */
.chat-vorsatz { font-size: .7rem; color: var(--bs-secondary-color); margin-right: .25rem; }   /* Chatliste: „Lager“, „Projekt“ vor dem fetten Titel */
.list-group-item.active .chat-vorsatz { color: inherit; opacity: .8; }
.bcl-ungelesen { font-size: .7rem; color: var(--bs-tertiary-color); cursor: pointer; }   /* Büro-Chatliste: als ungelesen markieren */
.bcl-ungelesen:hover { color: var(--bs-success-text-emphasis); }
.chat-liste-links { flex: 0 0 2.6rem; text-align: center; white-space: nowrap; overflow: hidden; }   /* Chatliste: Zeichen bzw. Uhrzeit links */
.chat-titel { font-size: .8rem; font-weight: 600; }   /* Chatliste: Titel bzw. Person – kleiner, halbfett (15.10.2026) */
.chat-blase.eigen { background: var(--bs-success-bg-subtle); }
/* Erledigt (09.10.2026): kräftigeres Grün mit Rand – unterscheidbar von den eigenen (hellgrünen) Blasen */
.chat-blase.erledigt { background: var(--bs-success-bg-subtle); box-shadow: inset 4px 0 0 #198754; }
.chat-erledigt-info { font-size: .65rem; color: var(--bs-success-text-emphasis); font-weight: 600; margin-top: .15rem; }
/* Chat-Bezug (09.10.2026) */
/* Bezug-Feld kompakt (~6 Zeichen), beim Tippen breiter über dem Nachrichtenfeld (09.10.2026) */
.chat-eingabe-links { flex: 0 0 auto; }
.chat-text-box { position: relative; flex: 1 1 0; min-width: 0; }
/* Zwischeninformationen im Verlauf kompakt (15.10.2026): klein, eng, ohne Kursiv */
/* Feste iChat-Taste auf der Startseite (16.10.2026) – über der Handy-Leiste */
.start-ichat { position: fixed; right: 16px; bottom: 24px; z-index: 1035; width: 3.5rem; height: 3.5rem; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; }
.start-ichat svg { width: 1.6rem; height: 1.6rem; }
.start-ichat-zahl { position: absolute; top: -4px; right: -4px; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: .7rem; background: #dc3545; color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.4rem; text-align: center; }
@media (max-width: 767.98px) { .start-ichat { bottom: calc(72px + env(safe-area-inset-bottom)); } }
/* Gelöster Chat zitterte (19.10.2026, Holger): Bildlaufleiste im Verlauf kam und ging – Platz dafür immer frei halten, sonst
   ändert sich die Breite, der Text bricht anders um und die Leiste verschwindet wieder (Endlosschleife) */
.chat-verlauf, html.im-rahmen body { scrollbar-gutter: stable; }
/* Senden ist nie gesperrt (19.10.2026) – leer nur blasser, direkt im Browser ohne Umweg über den Server */
.chat-text-box:has(textarea:placeholder-shown) .chat-senden { opacity: .45; }
/* iChat-Taste neben dem Logo im Menü (17.10.2026) */
.menue-ichat { position: relative; width: 2.1rem; height: 2.1rem; border-radius: 50%; padding: 0; margin-left: .9rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.menue-ichat svg { width: 1.05rem; height: 1.05rem; }
.menue-zurueck { width: 2.1rem; height: 2.1rem; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.menue-zurueck svg { width: 1.05rem; height: 1.05rem; }
.menue-ichat-zahl { position: absolute; top: -5px; right: -7px; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: .6rem; background: #dc3545; color: #fff; font-size: .65rem; font-weight: 600; line-height: 1.15rem; text-align: center; }
/* Chat eingebettet auf der Projektseite (16.10.2026): nur der Chat */
html.im-rahmen .page > .sidebar, html.im-rahmen .mobil-leiste, html.im-rahmen .nav-collapse-btn, html.im-rahmen .ansicht-balken { display: none !important; }
html.im-rahmen main > article.content { padding: 0 !important; }
/* Gelöster iChat zappelte weiter (19.10.2026): ohne Seitenrand stand die .row.g-2 der Chatseite mit ihren negativen Rändern
   5 px rechts und 10 px oben über – Seite 530 statt 520 px breit, beide Laufleisten kamen und gingen im Wechsel */
html.im-rahmen .row.chat { margin-left: 0; margin-right: 0; margin-top: 0; }
/* … und die Seite selbst bekommt im gelösten iChat keine Laufleiste: Liste und Verlauf scrollen in sich. Sonst brachen die
   Filterknöpfe mit Leiste in 3, ohne in 2 Reihen um, die Liste rutschte, die Leiste kam wieder (Video Holger 19.10.2026) */
html.im-rahmen:has(.row.chat) { overflow: hidden; }
/* Projektnotizbuch eingebettet (21.10.2026): ohne Seiten-Scrollleisten – die Spalten scrollen selbst; kein negativer Rand (gab waagrechtes Scrollen) */
html.im-rahmen:has(.notiz-seite), html.im-rahmen:has(.notiz-seite) body { overflow: hidden; }
html.im-rahmen .notiz-seite { margin: 0; }
/* Stempeln gelöst (17.10.2026): etwas Rand, der Chat braucht keinen */
html.im-rahmen main > article.content:has(.zeit-stand) { padding: .75rem !important; }
html.im-rahmen body { padding-bottom: 0 !important; background: transparent; }
/* Projekt-Chat an der Seite (16.10.2026) – neben der Schritt-Seitenleiste, falls die offen ist */
.pj-chat-seite { position: fixed; top: 0; right: 0; bottom: 0; width: min(30rem, 100vw); background: var(--bs-body-bg); box-shadow: -4px 0 16px rgba(0,0,0,.15); z-index: 1045; display: flex; flex-direction: column; }
.pj-chat-seite.neben-leiste { right: min(28rem, 100vw); }
.pj-chat-kopf { padding: .5rem .7rem; border-bottom: 1px solid var(--bs-border-color); display: flex; gap: .5rem; align-items: center; }
.pj-chat-seite iframe { flex: 1; width: 100%; border: 0; }
@media (max-width: 767.98px) { .pj-chat-seite, .pj-chat-seite.neben-leiste { right: 0; width: 100vw; } }
.projekt-chat-rahmen { display: block; width: 100%; height: 75vh; min-height: 480px; border: 1px solid var(--bs-border-color); border-radius: .5rem; margin-top: 1rem; }
/* Bearbeitungssperre (16.10.2026): deckt die Seite ab, solange jemand anderes sie bearbeitet */
.sperre-abdeckung { position: fixed; inset: 0; z-index: 3000; background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sperre-kasten { max-width: 32rem; width: 100%; }
/* iChat-Kopf am Handy (16.10.2026): nur der Titel, alles andere hinter ⋯ – am PC unverändert */
.chat-kopf-knoepfe { display: contents; }
@media (max-width: 767.98px) {
  .chat-kopf-knoepfe { display: none; }
  .chat-kopf-knoepfe.offen { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
  .chat-kopf-extra { display: none; }
  .chat-kopf-extra.offen { display: block; }
}
.chat-unterchats .btn { font-size: .78rem; }
.chat-unterchat-fremd { border-style: dashed; }
.chat-systemzeile { text-align: center; margin: .05rem 0; line-height: 1.15; }
.chat-systemzeile span { font-size: .7rem; color: var(--bs-secondary-color); }
/* Lange Nachrichten eingeklappt: ca. 10 Zeilen */
.chat-text-zu { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.chat-mehr { font-size: .75rem; }
.chat-text-box textarea { width: 100%; padding-right: 2.6rem; }
.chat-senden { position: absolute; right: .4rem; bottom: .4rem; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* so breit wie die Knöpfe darunter: width 0 + min-width 100% – sonst zieht die Standardbreite des Eingabefelds die Spalte breiter */
.chat-bezug-feld { width: 0; min-width: 100%; height: calc(1.5em + .5rem + 2px); }
.chat-bezug-feld input { width: 100%; transition: width .12s; }
.chat-bezug-feld input:focus { position: absolute; left: 0; bottom: 0; width: 20rem; max-width: 80vw; z-index: 25; }
.chat-bezug-chip { display: flex; align-items: center; height: 100%; font-size: .8rem; white-space: nowrap; overflow: hidden; background: var(--bs-primary-bg-subtle); border: 1px solid var(--bs-primary-border-subtle); border-radius: .25rem; padding: .1rem .35rem; max-width: 100%; }
.chat-bezug-liste { position: absolute; bottom: 100%; left: 0; z-index: 30; width: 22rem; max-width: 85vw; max-height: 45vh; overflow: auto; }
.chat-bezug { font-size: .78rem; background: rgba(13,110,253,.08); border-left: 3px solid #0d6efd; border-radius: .2rem; padding: .05rem .35rem; margin-bottom: .2rem; }
.chat-erledigt-knopf { color: var(--bs-success-text-emphasis) !important; font-weight: 700; }
/* Chat wie WhatsApp (02.10.2026): Zitat, Reaktionen, Aktionen beim Überfahren/Antippen, Erwähnungen */
.chat-zitat { border-left: 3px solid #0d6efd; background: rgba(var(--bs-emphasis-color-rgb), .05); border-radius: .25rem; padding: .15rem .4rem; margin-bottom: .2rem; font-size: .75rem; cursor: pointer; max-width: 100%; }
/* Foto-Knopf (06.10.2026) nur an Touch-Geräten (Handy, Tablet) – am Desktop mit Maus nicht */
@media (hover: hover) and (pointer: fine) { .nur-touch { display: none !important; } }
/* Dateien in den Chat ziehen (06.10.2026): Karte als Ablageziel markieren */
/* Bilder & Dateien (06.10.2026): kleine Kacheln, Antippen markiert */
.medien-kachel { width: 84px; height: 84px; border-radius: .25rem; overflow: hidden; cursor: pointer; border: 3px solid transparent; }
.medien-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medien-kachel.medien-markiert { border-color: #0d6efd; }
.medien-kachel.medien-markiert img { opacity: .75; }
.medien-haken { position: absolute; top: 3px; left: 3px; width: 1.3em; height: 1.3em; border-radius: 50%; border: 2px solid var(--bs-body-bg); background: rgba(0,0,0,.25); color: #fff; font-size: .75rem; line-height: 1.05em; text-align: center; }
.medien-markiert .medien-haken { background: #0d6efd; }
.medien-lupe { position: absolute; right: 2px; bottom: 2px; font-size: .75rem; background: rgba(255,255,255,.85); border-radius: .2rem; padding: 0 .15rem; text-decoration: none; }
.medien-zeile-markiert { background: rgba(13,110,253,.08); }
.card.chat-drop { outline: 3px dashed #0d6efd; outline-offset: -3px; background: rgba(13,110,253,.06); }
.chat-aktionen { display: none; }
/* Symbole unter der Blase 50 % größer (16.10.2026, Holger) – Handy und PC; überschreibt die kleinen Inline-Größen */
.chat-aktionen .btn { font-size: 1.125rem !important; margin-right: .35rem !important; }
/* Symbole erst nach Klick auf die Blase, nicht schon beim Darüberfahren (19.10.2026, Holger) – PC wie Handy */
.chat-blase.offen .chat-aktionen { display: inline; }
/* Handy: Eingabefeld oben über die ganze Breite, Knöpfe und Senden darunter */
/* Handy (16.10.2026): Eingabe in einer Zeile – ＋ · Text (2 Zeilen hoch) · Senden; Bezug/Emoji/Foto/Datei hinter ＋ darüber */
@media (max-width: 767.98px) {
  .chat-eingabe { flex-wrap: wrap; align-items: flex-end; }
  .chat-eingabe-links { display: none !important; }
  .chat-eingabe-links.offen { display: flex !important; order: -1; flex: 1 0 100%; flex-direction: row !important; flex-wrap: wrap; align-items: center; }
  .chat-eingabe .chat-text-box { flex: 1 1 0; }
  .chat-eingabe .chat-text-box textarea { height: calc(3em + .75rem + 6px); min-height: 2.6rem; resize: none; }   /* 2 Zeilen (16.10.2026) */
  .chat-plus { flex: 0 0 auto; align-self: flex-end; }
  /* Senden am Handy größer (16.10.2026, Holger) */
  .chat-senden { width: 2.6rem; height: 2.6rem; right: .3rem; bottom: .3rem; }
  .chat-senden svg { width: 1.35rem; height: 1.35rem; }
  .chat-text-box textarea { padding-right: 3.2rem; }
  .chat-verlauf { height: calc(100vh - 230px); }
  html.chat-voll, html.chat-voll body { overflow: hidden; }
  /* Offener Chat am Handy ohne Seiten-Zoom (19.10.2026, DH): mit Schrift A− lag die feste Chat-Karte im Hochformat verschoben,
     erst nach einmal Drehen richtig. Die Chat-Schrift hat ihr eigenes A−/A+ (--chat-schrift). */
  html.chat-voll main > article.content { zoom: 1 !important; }
  /* im offenen Chat ist die Leiste unten ganz aus (16.10.2026, Holger) – zurück mit ← oben links */
  html.chat-voll .mobil-leiste { display: none !important; }
  html.chat-voll body { padding-bottom: 0; }
  html.chat-voll:not(.chat-schreibt) .card.chat-fest > .card-footer:last-child { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
  html.chat-voll .chat-verlauf { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
  /* offener Chat fest an den sichtbaren Bereich (top/height setzt technik.js aus visualViewport) – wie eine App */
  .card.chat-fest { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1020; display: flex; flex-direction: column; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .card.chat-fest > * { flex: 0 0 auto; }
  .card.chat-fest > .chat-verlauf { flex: 1 1 auto; min-height: 0; height: auto !important; }
}
.chat-reaktion { background: rgba(var(--bs-emphasis-color-rgb), .06); border: 1px solid transparent; border-radius: 1rem; font-size: .75rem; line-height: 1.3; }
.chat-reaktion.meine { border-color: #0d6efd; }
.chat-palette { display: flex; flex-wrap: wrap; gap: .2rem; max-width: 22rem; }
.chat-erwaehnung { color: #0d6efd; font-weight: 600; }
.chat-erwaehnung.ich { background: var(--bs-warning-bg-subtle); border-radius: .2rem; padding: 0 .15rem; }
.chat-angepinnt { background: var(--bs-warning-bg-subtle); border-bottom: 1px solid var(--bs-warning-border-subtle); font-size: .8rem; }
.chat-blitz { animation: chatBlitz 1.5s ease-out; }
/* Kleines Chatsymbol hinter AB-/PA-/Artikelnummern (03.10.2026): immer grün – kräftig = Chat gibt es, blass = eröffnen */
.chat-mini { font-size: .8em; margin-left: .25rem; line-height: 1; vertical-align: baseline; text-decoration: none; border: 0; }
.chat-mini, .chat-mini.btn { color: var(--bs-success-text-emphasis); opacity: .55; }
.chat-mini.da { opacity: 1; }
/* In myfactory öffnen (09.10.2026, MfKnopf) */
.mf-knopf { font-size: .8em; margin-left: .2rem; line-height: 1; vertical-align: baseline; text-decoration: none; border: 0; color: #0d6efd; opacity: .55; }
.mf-knopf:hover { opacity: 1; }
.mf-knopf.laeuft { opacity: .3; }
.mf-knopf.ok { color: var(--bs-success-text-emphasis); opacity: 1; }
.mf-knopf.fehler { color: #dc3545; opacity: 1; }
/* Chat gibt es (12.10.2026): Symbol komplett grün gefüllt */
.chat-mini.da .sym { stroke-width: 2.6; fill: #198754; }
.chat-mini:hover { opacity: 1; color: var(--bs-success-text-emphasis); }
/* Chat-Dialog steckt oft in einer Überschrift (SeitenKopf h1, Tabellenkopf) und erbt sonst deren Schrift (03.10.2026) */
.ac-dlg { font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; letter-spacing: normal; text-transform: none; font-style: normal; color: var(--bs-body-color); }
@keyframes chatBlitz { 0% { box-shadow: 0 0 0 3px #ffc107; } 100% { box-shadow: none; } }

/* Wiederverbinden (App.razor): dezenter Streifen oben statt grauem Vollbild. Ohne Klasse unsichtbar. */
#components-reconnect-modal.verbindung-hinweis { display: none; }
#components-reconnect-modal.verbindung-hinweis.components-reconnect-show {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 3000;
    background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); text-align: center; font-size: .85rem; padding: 4px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* ---- Hilfe in der App (js/hilfe.js, Components/Pages/Hilfe.razor, Inhalte im Ordner Hilfe\) ---- */
.lf-schrift-ort .hilfe-knopf { color: #fff; border-color: rgba(255, 255, 255, .45); font-weight: 700; min-width: 1.75em; }
.lf-schrift-ort .hilfe-knopf:hover { background: rgba(255, 255, 255, .15); }
.hilfe-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 2500; background: var(--bs-body-bg);
    box-shadow: -4px 0 18px rgba(0, 0, 0, .18); display: flex; flex-direction: column;
    transform: translateX(105%); transition: transform .2s ease;
}
.hilfe-panel.offen { transform: none; }
.hilfe-kopf { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.hilfe-inhalt { overflow-y: auto; padding: 12px 16px 40px; flex: 1; }
.hilfe-text h1 { font-size: 1.5rem; color: #6aa82c; font-weight: 700; margin: 0 0 .6rem; }
.hilfe-text h2 { font-size: 1.15rem; color: #6aa82c; font-weight: 700; margin: 1.6rem 0 .5rem; scroll-margin-top: 10px; }
.hilfe-text h3 { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .4rem; }
.hilfe-text img { max-width: 100%; height: auto; border: 1px solid var(--bs-border-color); border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.hilfe-text figure { margin: .6rem 0 1rem; text-align: center; }
.hilfe-text figcaption { font-size: .8rem; color: var(--bs-secondary-color); font-style: italic; margin-top: .25rem; }
.hilfe-text table { width: 100%; margin: .4rem 0 1rem; font-size: .92rem; }
.hilfe-text th { background: var(--bs-success-bg-subtle); }
.hilfe-text th, .hilfe-text td { border: 1px solid var(--bs-border-color); padding: 4px 8px; vertical-align: top; }
.hilfe-text .tipp { background: var(--bs-success-bg-subtle); border-left: 4px solid #6aa82c; padding: 8px 12px; margin: .6rem 0 1rem; border-radius: 0 6px 6px 0; }
.hilfe-text .tipp.wichtig { background: var(--bs-danger-bg-subtle); border-left-color: #c92a2a; }
.hilfe-text .tipp b:first-child { color: #6aa82c; }
.hilfe-text .tipp.wichtig b:first-child { color: #c92a2a; }
.hilfe-text .zwei { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hilfe-text .zwei figure { flex: 0 1 260px; }
.hilfe-seite .hilfe-nav { position: sticky; top: 10px; }
.hilfe-abschnitte { display: flex; flex-direction: column; padding: 6px 0 0 12px; font-size: .85rem; }
.hilfe-abschnitte a { padding: 2px 0; text-decoration: none; }
@media (max-width: 767.98px) { .hilfe-seite .hilfe-nav { position: static; } .hilfe-abschnitte { display: none; } }
/* Geräte: Push-Zustand gleich breit, damit Knöpfe untereinander stehen */
.push-zustand { min-width: 2.6em; }
.hilfe-text .wo { font-size: .82rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-radius: 4px; padding: 3px 8px; margin: -.2rem 0 .6rem; }
.hilfe-ki { overflow-y: auto; padding: 12px 16px; flex: 1; }
.hilfe-frage { background: var(--bs-success-bg-subtle); border-radius: 10px; padding: 6px 10px; margin: 0 0 8px 15%; }
.hilfe-frage p, .hilfe-antwort p { margin: 0 0 .35rem; }
.hilfe-antwort { background: var(--bs-secondary-bg); border-radius: 10px; padding: 8px 12px; margin: 0 15% 14px 0; }
.hilfe-antwort ol, .hilfe-antwort ul { padding-left: 1.2rem; margin-bottom: .35rem; }
.hilfe-fuss { display: flex; gap: 6px; align-items: flex-end; padding: 8px 12px 4px; border-top: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.hilfe-fuss textarea { resize: none; }
.hilfe-fuss-hinweis { font-size: .7rem; color: var(--bs-secondary-color); padding: 0 12px 8px; background: var(--bs-tertiary-bg); }

/* ---- VK-Gebiet-Karte (js/vkkarte.js) ---- */
.vk-karte { position: relative; border: 1px solid var(--bs-border-color); border-radius: 6px; background: var(--bs-primary-bg-subtle); overflow: hidden; touch-action: none; user-select: none; }
.vk-karte svg { width: 100%; height: 100%; display: block; cursor: grab; --z: 1; }
.vk-karte svg:active { cursor: grabbing; }
.vk-karte svg path[data-p] { stroke: #fff; stroke-width: calc(.35px / var(--z)); vector-effect: non-scaling-stroke; stroke-width: .3px; }
.vk-karte svg path[data-p]:hover { stroke: #000; stroke-width: 1.5px; }
.vk-karte .vk-zone2 { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: .8px; vector-effect: non-scaling-stroke; pointer-events: none; }
.vk-karte .vk-zone1 { fill: none; stroke: rgba(0, 0, 0, .65); stroke-width: 1.6px; vector-effect: non-scaling-stroke; pointer-events: none; }
.vk-karte .vk-land { fill: none; stroke: #333; stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.vk-karte .vk-labels text { font: 700 calc(14px / var(--z)) sans-serif; fill: rgba(0, 0, 0, .55); text-anchor: middle; dominant-baseline: middle; pointer-events: none;
    paint-order: stroke; stroke: rgba(255, 255, 255, .7); stroke-width: calc(3px / var(--z)); }
.vk-karte .vk-markierung path { fill: none; stroke: #d6336c; stroke-width: 3px; vector-effect: non-scaling-stroke; pointer-events: none; }
.vk-tip { position: absolute; z-index: 5; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 6px; padding: 4px 8px; font-size: .85rem; box-shadow: 0 2px 6px rgba(0,0,0,.15); pointer-events: none; max-width: 240px; }
.vk-punkt { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.2); }
.vk-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.vk-zoom .btn { width: 2.1rem; font-weight: 700; }
.vk-quelle { position: absolute; left: 6px; bottom: 4px; font-size: .65rem; color: #6c757d;   /* auf der (hellen) Karte */ background: rgba(255,255,255,.7); padding: 0 4px; border-radius: 3px; }
.vk-legende .vk-eintrag { cursor: pointer; border-radius: 4px; padding: 2px 6px; }
.vk-legende .vk-eintrag.aktiv { background: var(--bs-secondary-bg); font-weight: 600; }
.vk-kartenbox { height: 76vh; min-height: 420px; }
.vk-treffer { max-height: 40vh; overflow-y: auto; }
.vk-reiter .nav-link { white-space: nowrap; }
@media (max-width: 767.98px) { .vk-kartenbox { height: 62vh; min-height: 320px; } }
/* Unten im Menü (Schrift, Beschriftung, ?, Melden) nie Beschriftung – sonst bricht die Zeile um */
body.sym-mit-text .lf-schrift-ort .btn::after { content: none !important; display: none !important; }
/* Startseite „Neu in der App“ */
.neu-kasten { border-color: var(--bs-success-border-subtle); }
.neu-kasten .card-header { background: var(--bs-success-bg-subtle); }

/* Mehr-Menü am Handy (05.10.2026): in der Handy-Menü-Vorlage ausgeblendete Seiten und leere Gruppen (js/mehrmenue.js) */
@media (max-width: 767.98px) {
    .nav-scrollable .mobil-aus,
    .nav-scrollable details.mobil-leer { display: none !important; }
}

/* „Als Benutzer ansehen“ (05.10.2026) */
.ansicht-balken {
    position: sticky; top: 0; z-index: 3000;
    background: #b02a37; color: #fff; text-align: center;
    padding: .35rem .75rem; font-size: .9rem;
}
.ansicht-balken a { color: #fff; font-weight: 600; text-decoration: underline; margin-left: .5rem; white-space: nowrap; }


/* Projektablauf (06.10.2026): Raster der Checklisten – Zeilen nacheinander, Kacheln gleichzeitig */
.vorlage-raster { max-width: 1400px; }
.vorlage-raster:has(.pb-zeile) { max-width: none; }   /* Baum (Projekt/Vorlage) nutzt die volle Breite (16.10.2026) */
.vr-zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; padding: .4rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.vr-nr { width: 1.8rem; flex: 0 0 auto; font-weight: 600; color: var(--bs-secondary-color); align-self: center; text-align: center; }
.vr-kachel { flex: 0 1 15rem; min-width: 11rem; border: 1px solid var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); border-radius: .4rem; padding: .35rem .55rem; cursor: grab; }
.vr-kachel:hover { border-color: #0d6efd; }
.vr-kachel.zieht { opacity: .4; }
.vr-ende { flex: 0 0 2.4rem; border: 1px dashed var(--bs-border-color); border-radius: .4rem; display: flex; align-items: center; justify-content: center; color: #6a8; cursor: pointer; font-size: 1.2rem; }
.vr-neu { height: 0; overflow: hidden; border-radius: .3rem; color: #0d6efd; font-size: .8rem; text-align: center; transition: height .1s; }
.vr-neu.sichtbar { height: auto; padding: .25rem; border: 1px dashed #0d6efd; margin: .3rem 0; cursor: pointer; }
.ab-kachel { flex: 0 1 17rem; min-width: 12rem; border: 1px solid var(--bs-border-color); border-left-width: 5px; border-radius: .4rem; padding: .35rem .55rem; background: var(--bs-body-bg); }
.ab-kachel.wartet { border-left-color: var(--bs-border-color); color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.ab-kachel.aktiv { border-left-color: #0d6efd; }
.ab-kachel.ueber { border-left-color: #dc3545; background: var(--bs-danger-bg-subtle); }
.ab-kachel.erledigt { border-left-color: #198754; background: var(--bs-success-bg-subtle); }
.ab-kachel.entfallen { border-left-color: var(--bs-border-color); color: var(--bs-secondary-color); text-decoration: line-through; }
/* Projektdateien als Vorschau-Kacheln (14.10.2026) – Vorschaubild von SharePoint, ohne Bild das Symbol */
.pd-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; overflow-y: auto; }
.pd-kachel { border: 1px solid var(--bs-border-color); border-radius: .4rem; background: var(--bs-body-bg); cursor: pointer; overflow: hidden; }
.pd-kachel:hover { border-color: #0d6efd; box-shadow: 0 0 0 1px #0d6efd33; }
.pd-bild { position: relative; }
.pd-programm { position: absolute; top: .25rem; right: .25rem; z-index: 2; border: 1px solid #0d6efd; border-radius: .3rem; background: var(--bs-body-bg); padding: 0 .3rem; font-size: .85rem; line-height: 1.4; }
.pd-programm:hover { background: var(--bs-primary-bg-subtle); }
/* Projektordner bearbeiten (22.10.2026): Auswahl-Knopf links oben, Ablagefläche zum Hochladen */
.pd-mehr { position: absolute; top: .25rem; left: .25rem; z-index: 2; border: 1px solid var(--bs-border-color); border-radius: .3rem; background: var(--bs-body-bg); padding: 0 .35rem; font-size: .85rem; line-height: 1.4; }
.pd-kachel.pd-gewaehlt { outline: 2px solid #0d6efd; overflow: visible; position: relative; z-index: 5; }
.pd-menue { position: absolute; top: 1.9rem; left: .25rem; z-index: 10; min-width: 13rem; max-width: 22rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.35); padding: .35rem; cursor: default; font-size: .85rem; text-align: left; white-space: normal; }
.pd-menue.rechts { left: auto; right: 0; top: 100%; }
.pd-menue-liste { max-height: 12rem; overflow-y: auto; }
.pd-ablage { position: relative; border: 1px dashed var(--bs-border-color); border-radius: .4rem; padding: .35rem .6rem; font-size: .85rem; color: var(--bs-secondary-color); }
.pd-ablage input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pd-ablage:hover { border-color: #0d6efd; color: var(--bs-body-color); }
.pd-bild { position: relative; height: 7.5rem; background: var(--bs-tertiary-bg); display: flex; align-items: center; justify-content: center; }
.pd-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-symbol, .pd-ordner { font-size: 2.2rem; }
.pd-name { font-size: .78rem; padding: .25rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* kompakte Kachel (14.10.2026): eine Zeile – Titel · Datum · Kürzel · ✓ */
.ab-kachel.kompakt { padding: .2rem .5rem; min-width: 14rem; }
/* Kachel-Farben (14.10.2026): offen schwarz, zeitkritisch orange, überzogen rot, fertig grün */
.ab-kachel.offen { border-left-color: #212529; }
.ab-kachel.kritisch { border-left-color: #fd7e14; background: var(--bs-warning-bg-subtle); }
.ab-unter.offen { border-left-color: #212529; }
.ab-unter.kritisch { border-left-color: #fd7e14; }
.pj-orange { color: #e8590c; }
/* Unterschritte in der Kachel (14.10.2026) */
.ab-unter { margin-top: .2rem; padding: .1rem .3rem; border-left: 3px solid var(--bs-border-color); font-size: .85rem; background: var(--bs-primary-bg-subtle); border-radius: .2rem; cursor: pointer; }
.ab-unter.aktiv { border-left-color: #0d6efd; }
.ab-unter.ueber { border-left-color: #dc3545; }
.ab-unter.erledigt { border-left-color: #198754; color: var(--bs-success-text-emphasis); }
.ab-unter.entfallen { text-decoration: line-through; color: var(--bs-secondary-color); }
.vr-unter { border-style: dashed; font-size: .8rem; }
.ab-unter[draggable="true"] { cursor: grab; }
/* Stammbaum je Hauptschritt (14.10.2026): Eltern oben, Kinder nebeneinander darunter, Linien per CSS */
.pb-baum { flex: 0 1 auto; max-width: 100%; overflow-x: auto; padding-bottom: .2rem; }
.pb-baum ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 14px 0 0; position: relative; }
.pb-baum > ul { padding-top: 0; justify-content: flex-start; }
.pb-baum li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 14px 4px 0; }
.pb-baum > ul > li { padding: 0; }
/* Rückwärts terminiert (16.10.2026): Baum auf dem Kopf, die Kästchen selbst wieder richtig herum */
.pb-baum.umgedreht { transform: scaleY(-1); }
.pb-baum.umgedreht li > :not(ul) { transform: scaleY(-1); }
/* ⇅ drehen (19.10.2026): Ziel oben – Drehung aus (je Gerät, js/technik.js) */
html.baum-ziel-oben .pb-baum.umgedreht, html.baum-ziel-oben .pb-baum.umgedreht li > :not(ul) { transform: none; }
/* Baumstriche blau wie die Verweise (16.10.2026, Holger) – Verweise erkennt man am Pfeil */
.pb-baum li::before, .pb-baum li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 14px; border-top: 1px solid #0d6efd; }
.pb-baum li::after { right: auto; left: 50%; border-left: 1px solid #0d6efd; }
.pb-baum > ul > li::before, .pb-baum > ul > li::after, .pb-baum li:only-child::before, .pb-baum li:only-child::after { display: none; }
.pb-baum li:only-child { padding-top: 0; }
.pb-baum li:first-child::before, .pb-baum li:last-child::after { border: 0 none; }
.pb-baum li:last-child::before { border-right: 1px solid #0d6efd; border-radius: 0 5px 0 0; }
.pb-baum li:first-child::after { border-radius: 5px 0 0 0; }
.pb-baum ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 14px; border-left: 1px solid #0d6efd; }
.pb-knoten { min-width: 9rem; max-width: 15rem; border: 1px solid var(--bs-border-color); border-left: 5px solid #212529; border-radius: .4rem; padding: .2rem .45rem; background: var(--bs-body-bg); font-size: .85rem; cursor: pointer; }
.pb-knoten.wurzel { font-size: .95rem; min-width: 12rem; }
.pb-knoten .pb-titel { font-weight: 600; }
.pb-knoten.kritisch { border-left-color: #fd7e14; background: var(--bs-warning-bg-subtle); }
.pb-knoten.ueber { border-left-color: #dc3545; background: var(--bs-danger-bg-subtle); }
.pb-knoten.erledigt { border-left-color: #198754; background: var(--bs-success-bg-subtle); }
.pb-knoten.entfallen { border-left-color: var(--bs-border-color); color: var(--bs-secondary-color); text-decoration: line-through; }
.pb-knoten[draggable="true"] { cursor: grab; }
/* geöffneter Schritt (16.10.2026): blau umrandet, damit man sieht, wo man ist */
.pb-knoten.gewaehlt, .ab-kachel.gewaehlt { outline: 2px solid #0d6efd; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(13,110,253,.15); }
.pb-platz { min-width: 7rem; padding: .45rem .5rem; border: 1px dashed #0d6efd; border-radius: .4rem; color: #0d6efd; font-size: .8rem; text-align: center; background: var(--bs-primary-bg-subtle); }
.pb-davor { position: absolute; left: -8px; top: 14px; bottom: 0; width: 14px; z-index: 2; }
.pb-baum > ul > li > .pb-davor { top: 0; }
.pb-davor::after { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 2px dashed var(--bs-primary-border-subtle); }
.pb-davor.drueber::after { border-left: 4px solid #0d6efd; left: 5px; }
.pb-x { color: var(--bs-secondary-color); line-height: 1; text-decoration: none; }
.pb-x:hover { color: #dc3545; }
.pb-dup:hover { color: #0d6efd; }
.pj-stern-aus { filter: grayscale(1); opacity: .3; }
.todo-punkt-termin { width: 9.5rem; flex: 0 0 auto; padding: 0 .3rem; font-size: .8rem; }
.todo-karte-text { white-space: pre-line; max-height: 9rem; overflow: auto; margin: .15rem 0; }
.todo-termin-neu { background: var(--bs-warning-bg-subtle); border-left: 3px solid #fd7e14; padding: .1rem .35rem; border-radius: .2rem; margin: .2rem 0; }
.todo-link { font-size: .75rem; padding: 0 .35rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-tertiary-bg); white-space: nowrap; }
.pb-platz.drueber { background: var(--bs-primary-bg-subtle); border-style: solid; }
.pb-platz:not(.offen) { cursor: pointer; font-size: 1rem; padding: .3rem .5rem; }
.pb-platz.offen { padding: .15rem; min-width: 11rem; }
/* Zeile mit Bäumen (14.10.2026): nebeneinander, oben bündig, Platz für weiteren Hauptschritt direkt daneben */
.pb-zeile { flex-wrap: nowrap; overflow-x: auto; align-items: flex-start; }
.pb-zeile > .pb-baum { flex: 0 0 auto; max-width: none; overflow: visible; }
.pb-zeile > .vr-nr { align-self: flex-start; padding-top: .6rem; }
.vr-schnell.pb-zeilenplatz { flex: 0 0 11rem; min-width: 11rem; border: 1px dashed #0d6efd; background: var(--bs-primary-bg-subtle); border-radius: .4rem; padding: .3rem; }
@media (max-width: 767.98px) {
  .pb-zeile { flex-wrap: wrap; }
  .pb-zeile > .pb-baum { flex: 1 1 100%; }
}
@media (max-width: 767.98px) {
  .pb-baum { flex: 1 1 100%; }
  .pb-baum ul { flex-direction: column; align-items: stretch; padding: .2rem 0 0 1rem; }
  .pb-baum > ul { padding-left: 0; }
  .pb-baum li { align-items: stretch; padding: 0; }
  .pb-baum li::before, .pb-baum li::after, .pb-baum ul ul::before { display: none; }
  .pb-knoten { max-width: none; }
}
/* Schnell anlegen beim Anpassen (14.10.2026) */
.vr-chip { display: inline-block; border: 1px dashed #0d6efd; color: #0d6efd; border-radius: .4rem; padding: .15rem .6rem; font-size: .85rem; cursor: grab; background: var(--bs-primary-bg-subtle); }
.vr-schnell { min-width: 12rem; display: flex; align-items: center; padding: .1rem; }
.vr-schnell input { border-style: dashed; }
.ab-stufen { display: flex; gap: .25rem; flex-wrap: wrap; }
.ab-stufen span { padding: .2rem .7rem; border-radius: 1rem; background: var(--bs-secondary-bg); font-size: .85rem; }
.ab-stufen span.ist { background: #0d6efd; color: #fff; }
.ab-stufen span.fertig { background: var(--bs-success-bg-subtle); }

/* Emoji-Auswahl im Chat (07.10.2026) */
.emoji-panel { position: fixed; z-index: 1080; display: none; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem; box-shadow: 0 6px 24px rgba(0,0,0,.15); padding: .35rem; }
.emoji-reiter { display: flex; flex-wrap: wrap; gap: .15rem; border-bottom: 1px solid var(--bs-border-color); padding-bottom: .25rem; margin-bottom: .25rem; }
.emoji-reiter button { border: 0; background: none; font-size: 1.1rem; padding: .15rem .4rem; border-radius: .4rem; }
.emoji-reiter button.aktiv { background: var(--bs-secondary-bg); }
.emoji-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); max-height: 200px; overflow-y: auto; }
.emoji-wahl { border: 0; background: none; font-size: 1.35rem; line-height: 1; padding: .3rem 0; border-radius: .4rem; }
.emoji-wahl:hover { background: var(--bs-secondary-bg); }
/* indusa-Emoji (14.10.2026): Bildmarke in Logo-Grün, als Maske – Text ":indusa:" im Chat */
.chat-indusa { display: inline-block; width: 1.25em; height: 1em; vertical-align: -.15em; background: #76b82a;
    -webkit-mask: url(/img/indusa-zeichen.svg) center / contain no-repeat; mask: url(/img/indusa-zeichen.svg) center / contain no-repeat; }

/* Chat-Eingabe (07.10.2026): am oberen Rand (doppelte Linie) nach oben größer ziehen, Verlauf wird kleiner (technik.js) */
textarea[data-enter-senden]:not(#ki-text) { resize: none; min-height: 2.6rem; max-height: 60vh; border-top: 4px double var(--bs-border-color); }

/* iChat-Layout am Desktop (07.10.2026, technik.js): Ziehkanten Liste/Chat, rechter Rand, unterer Rand */
.chat { position: relative; }
@media (min-width: 768px) {
    /* Standard (07.10.2026, von Holger gezogen): Liste 43 % – gezogene Breite je Browser überschreibt das */
    /* Prozent vom Chatbereich (09.10.2026): wächst und schrumpft mit dem Fenster; der Verlauf behält mindestens 360 px */
    .chat-links { flex: 0 0 var(--chat-liste-b, 43%); width: var(--chat-liste-b, 43%); max-width: min(var(--chat-liste-b, 43%), calc(100% - 360px)); min-width: 220px; }
    .chat-rechts { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
    .chat-links { position: relative; }
    .chat-griff-liste { position: absolute; top: 0; bottom: 0; right: -5px; width: 8px; cursor: col-resize; z-index: 5; }
    .chat-griff-breite { position: absolute; top: 0; bottom: 0; right: -10px; width: 8px; padding: 0; cursor: col-resize; z-index: 5; }
    .chat-griff-hoehe { height: 8px; margin-top: 2px; cursor: row-resize; }
    .chat-griff-liste:hover, .chat-griff-breite:hover, .chat-griff-hoehe:hover { background: rgba(120, 160, 60, .35); border-radius: 4px; }
    /* sichtbarer Griff wie im Notizbuch (09.10.2026): Punkte in der Mitte */
    .chat-griff-liste::after { content: ""; position: absolute; left: 1px; top: 50%; width: 4px; height: 36px; margin-top: -18px; border-left: 2px dotted var(--bs-border-color); border-right: 2px dotted var(--bs-border-color); }
}

/* iChat: „… schreibt gerade“ (08.10.2026) */
.chat-tippt { font-style: italic; }
.chat-tippt-punkte { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: .25rem; }
.chat-tippt-punkte span { width: 5px; height: 5px; border-radius: 50%; background: #8a8a8a; animation: chat-tippt 1.2s infinite ease-in-out; }
.chat-tippt-punkte span:nth-child(2) { animation-delay: .2s; }
.chat-tippt-punkte span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-tippt { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* Popups am Kopf verschieben (08.10.2026, js/ziehbar.js) – nur ab Tablet-Breite */
@media (min-width: 576px) {
    .modal-header, .popup-kopf { cursor: move; user-select: none; }
    .modal-header :is(button, input, select, a), .popup-kopf :is(button, input, select, a) { cursor: pointer; }
}
body.popup-zieht { user-select: none; }

/* Notizbuch (09.10.2026, NOTIZBUCH.md): drei Spalten wie Apple Notes, am Handy nacheinander */
/* ganze Fläche nutzen: bis an den unteren und (fast) rechten Rand – Seite hat keinen eigenen Kopf */
.notiz-seite { height: calc(100vh - 1.1rem - .7rem); margin: 0 -1.1rem 0 0; gap: 0 !important; }   /* genaue Höhe setzt ziehbar.js (data-voll-h, mit Zoom) */
.notiz-seite > .border { margin: 0 2px; }
/* Breiten wachsen mit dem Browserfenster; mit dem Teiler dazwischen von Hand ziehbar (gemerkt) */
/* min-width:0 – sonst bleibt die Spalte so breit wie ihr Inhalt (Suchfeld, Knöpfe) und lässt sich nicht schmaler ziehen */
.notiz-links { flex: 0 0 clamp(16rem, 26%, 32rem); overflow: auto; min-width: 0; }
/* Notizliste eingebettet unter Buch/Ordnern (11.10.2026, eine Spalte statt zwei) */
.notiz-ablage { outline: 2px dashed #0d6efd; background: var(--bs-primary-bg-subtle) !important; }
.notiz-liste-eingebettet { border-left: 2px solid var(--bs-border-color); padding-left: .4rem; }
.notiz-links .form-control { min-width: 0; }
.notiz-buch .text-truncate, .notiz-ordner .text-truncate { min-width: 0; }
.notiz-mitte { flex: 0 0 clamp(15rem, 24%, 30rem); overflow: auto; min-width: 0; }
/* sichtbarer Griff: schmale Leiste mit Punkten in der Mitte */
.spalten-teiler { flex: 0 0 10px; cursor: col-resize; border-radius: 4px; align-self: stretch; position: relative; background: var(--bs-secondary-bg); }
.spalten-teiler::after { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 36px; margin-top: -18px; border-left: 2px dotted var(--bs-border-color); border-right: 2px dotted var(--bs-border-color); }
.spalten-teiler:hover, body.teiler-zieht .spalten-teiler { background: rgba(13,110,253,.25); }
body.teiler-zieht { user-select: none; cursor: col-resize; }
.notiz-rechts { flex: 1 1 0; min-width: 0; overflow: auto; }
/* Kopf der Notiz (Titel, Bearbeiten/Fertig, ⋯) bleibt beim Scrollen stehen (15.10.2026) */
.notiz-rechts .notiz-kopf { position: sticky; top: 0; z-index: 5; background: var(--bs-body-bg, var(--bs-body-bg)); padding: .25rem 0; }
/* Projektnotizbuch im Projekt-Reiter (21.10.2026) */
.pj-notizbuch { width: 100%; height: 75vh; border: 1px solid var(--bs-border-color); border-radius: .4rem; background: var(--bs-body-bg); }
/* Notizbuch-Liste: Gruppen „Projekte“ / „Archiv“ (21.10.2026) */
.notiz-gruppe { padding: 0 .25rem; font-weight: 600; }
.notiz-gruppe-klick { cursor: pointer; }
.notiz-gruppe-klick:hover { color: var(--bs-body-color) !important; }
/* Menü offen (20.10.2026): Kopf über die Schließ-Fläche (.notiz-menue-hinter, z 44) heben – sonst landete jeder Klick ins Menü auf der Fläche */
.notiz-rechts .notiz-kopf:has(.notiz-menue) { z-index: 46; }
/* Dateispalte im Notizbuch (11.10.2026) */
.notiz-dateien { flex: 0 0 clamp(14rem, 20%, 26rem); overflow: auto; min-width: 0; }
.notiz-datei { padding: .3rem .35rem; border-radius: .3rem; border-bottom: 1px solid var(--bs-border-color); font-size: .85rem; }
.notiz-datei.aktiv { background: var(--bs-primary-bg-subtle); }
.notiz-anzahl { min-width: 1.2rem; text-align: right; }
.notiz-buch, .notiz-ordner { display: flex; align-items: center; gap: .4rem; padding: .2rem .4rem; border-radius: .3rem; cursor: pointer; font-size: .9rem; }
.notiz-buch:hover, .notiz-ordner:hover, .notiz-zeile:hover { background: rgba(13,110,253,.06); }
.notiz-buch.aktiv, .notiz-ordner.aktiv, .notiz-zeile.aktiv { background: rgba(13,110,253,.13); }
.notiz-buch-art { color: var(--bs-secondary-color); font-size: .72rem; margin-left: .25rem; }
.notiz-punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; }
.notiz-zeile { padding: .35rem .4rem; border-bottom: 1px solid var(--bs-border-color); cursor: pointer; border-radius: .25rem; }
.notiz-vorschau { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .78rem; }
.notiz-mini { width: 3rem; height: 3rem; object-fit: contain; border-radius: .25rem; flex: 0 0 auto; }
.notiz-ampel { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--bs-border-color); background: transparent; vertical-align: -1px; margin-right: .25rem; flex: none; }
.notiz-ampel.klickbar { cursor: pointer; }
.notiz-ampel.a1 { background: #198754; border-color: #198754; }
.notiz-ampel.a2 { background: #fd7e14; border-color: #fd7e14; }
.notiz-ampel.a3 { background: #dc3545; border-color: #dc3545; }
.notiz-fund { overflow-wrap: anywhere; line-height: 1.3; margin-top: .15rem; }
.notiz-fund mark { padding: 0 .1rem; background: var(--bs-warning-bg-subtle); }
/* Logo je Notizbuch/Notiz (11.10.2026) */
.notiz-buch-logo { width: 1.4rem; height: 1.4rem; object-fit: contain; border-radius: .2rem; flex: 0 0 auto; }
.notiz-logo-feld { border: 2px dashed var(--bs-border-color); border-radius: .5rem; padding: 1rem; text-align: center; outline: none; cursor: pointer; }
.notiz-logo-feld:focus { border-color: var(--bs-primary); }
.notiz-logo-gross { max-width: 100%; max-height: 12rem; object-fit: contain; }
.notiz-titel { font-size: 1.05rem; }
.notiz-knoepfe .btn { padding: .1rem .45rem; }
.notiz-editor-rahmen { display: flex; flex-direction: column; min-height: 14rem; }
.notiz-editor-rahmen .ql-toolbar { flex: none; }
.notiz-editor-rahmen .ql-container { font-size: 1rem; flex: 1 1 auto; min-height: 10rem; overflow: auto; }
.notiz-editor-rahmen .ql-editor { min-height: 100%; }
.notiz-editor-rahmen .ql-editor img, .notiz-lesen img, .notiz-lesen-klein img { max-width: 100%; height: auto; }
.notiz-chip { display: inline-flex; align-items: center; font-size: .8rem; background: var(--bs-primary-bg-subtle); border: 1px solid var(--bs-primary-border-subtle); border-radius: .25rem; padding: .05rem .35rem; }
.notiz-symbol-rahmen { position: relative; display: inline-block; }
.notiz-symbol { font-size: .8rem; line-height: 1; text-decoration: none; margin-left: .15rem; }
.notiz-symbol-liste { position: absolute; z-index: 40; top: 100%; left: 0; min-width: 16rem; max-width: 80vw; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .3rem; padding: .3rem .5rem; display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; white-space: nowrap; }
.notiz-menue-rahmen { position: relative; display: inline-flex; }
.notiz-punkte { text-decoration: none; font-weight: 700; line-height: 1; padding: 0 .25rem !important; color: var(--bs-secondary-color); }
.notiz-punkte:hover { color: var(--bs-body-color); }
/* nach links aufklappen: die Spalte schneidet sonst rechts ab (overflow) */
.notiz-menue { position: absolute; z-index: 45; top: 100%; right: 0; left: auto; min-width: 12rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .3rem; padding: .2rem 0; display: flex; flex-direction: column; }
.notiz-menue .dropdown-item { white-space: nowrap; }
.notiz-menue-hinter { position: fixed; inset: 0; z-index: 44; }
/* Löschen im Notizbuch: rotes X statt Mülleimer (09.10.2026) */
.notiz-x { color: #dc3545; font-weight: 700; text-decoration: none; }
.notiz-x-knopf { font-weight: 700; }
/* Eigene Popups mit der Maus an der unteren rechten Ecke größer/kleiner ziehen (09.10.2026, wie in myfactory) */
@media (min-width: 768px) {
    .popup-groesse { resize: both; overflow: hidden; display: flex; flex-direction: column; min-width: 420px; min-height: 300px; max-width: 98vw; max-height: 94vh; }
}
.popup-fuellen { flex: 1 1 auto; min-height: 0; overflow: auto; }
.notiz-farbe { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--bs-body-bg); box-shadow: 0 0 0 1px var(--bs-border-color); cursor: pointer; padding: 0; }
.notiz-farbe.gewaehlt { box-shadow: 0 0 0 3px #212529; }
/* Farbauswahl als eigenes Feld, klappt unter „Farbe“ auf (seitlich würde die Spalte es abschneiden) */
.notiz-farbfeld { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin: 0 .6rem .4rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .3rem; width: 9.6rem; box-shadow: none !important; }
.notiz-farbe.klein { width: 1.3rem; height: 1.3rem; font-size: .65rem; line-height: 1; color: var(--bs-secondary-color); }
/* Bildgröße im Editor (notiz.js) */
.notiz-bild-rahmen { position: absolute; border: 2px dashed #0d6efd; pointer-events: none; z-index: 5; }
.notiz-bild-knoepfe { position: absolute; top: -2rem; left: 0; display: flex; gap: 2px; pointer-events: auto; }
.notiz-bild-knoepfe button { font-size: .72rem; padding: .1rem .35rem; border: 1px solid #0d6efd; background: var(--bs-body-bg); color: #0d6efd; border-radius: .2rem; }
.notiz-bild-griff { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: #0d6efd; border: 2px solid var(--bs-body-bg); border-radius: 3px; cursor: nwse-resize; pointer-events: auto; }
.notiz-anweisungen { border-left: 3px solid #fd7e14; padding-left: .5rem; }
.notiz-lesemodus { max-width: 60rem; margin: 0 auto; }
.notiz-lesemodus .ql-editor { font-size: 1.35rem; line-height: 1.6; }
.notiz-lesen li[data-list="checked"], .notiz-lesen li[data-list="unchecked"] { cursor: pointer; }
@media (max-width: 767.98px) {
    .notiz-seite { height: auto; margin: 0; flex-direction: column; }
    .notiz-links, .notiz-mitte, .notiz-rechts { flex: 1 1 auto; }
    .notiz-lesemodus .ql-editor { font-size: 1.15rem; }
}

/* To-dos (10.10.2026, TODOS.md): heute gelb, überfällig rot – wie auf der Startseite */
.todo-zeile.todo-heute { background: var(--bs-warning-bg-subtle); }
.todo-zeile.todo-ueber { background: var(--bs-danger-bg-subtle); }
.todo-heute-text { color: #b8860b; font-weight: 600; }
.todo-platz { display: inline-block; width: 1rem; text-align: center; color: var(--bs-secondary-color); }
.todo-karte { border-left: 3px solid #198754; background: rgba(25,135,84,.07); border-radius: .25rem; padding: .25rem .5rem; margin-bottom: .25rem; font-size: .85rem; }

/* Vorgangsblick (10.10.2026): Belege als kleine Kacheln */
.vorgang-beleg { border: 1px solid var(--bs-border-color); border-radius: .3rem; padding: .1rem .45rem; font-size: .85rem; white-space: nowrap; }
/* Fehlerchat hinter Seitenüberschriften (12.10.2026) */
.fehlerchat { position: relative; font-size: .55em; margin-left: .4rem; vertical-align: middle; font-weight: normal; }
.fehlerchat-link { text-decoration: none; }
.fehlerchat-leer { opacity: .35; filter: grayscale(1); cursor: default; }
button.fehlerchat-leer { cursor: pointer; }
.fehlerchat-einst { font-size: .9em; opacity: .4; margin-left: .15rem; text-decoration: none; }
.fehlerchat-einst:hover { opacity: 1; }
.fehlerchat-wahl { left: 0; right: auto; top: 1.6em; min-width: 16rem; font-size: 1rem; }
.vorgang-ek td, .vorgang-ek th { vertical-align: top; }
.vorgang-beleg.aktiv { border-color: #0d6efd; background: var(--bs-primary-bg-subtle); font-weight: 600; }

/* Projekte-Übersicht (10.10.2026): Ampel, Kanban, Kalender, Gantt, Auslastung */
.pj-ampel { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: #adb5bd; vertical-align: middle; flex: none; }
.pj-ampel.gruen { background: #198754; } .pj-ampel.gelb { background: #ffc107; } .pj-ampel.rot { background: #dc3545; } .pj-ampel.grau { background: #adb5bd; }
.pj-kanban { display: flex; gap: .6rem; overflow-x: auto; align-items: flex-start; padding-bottom: .5rem; }
.pj-spalte { flex: 0 0 15.5rem; background: var(--bs-secondary-bg); border-radius: .4rem; padding: .4rem; min-height: 8rem; max-height: 100%; overflow-y: auto; }
.pj-spalte-kopf { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; position: sticky; top: 0; background: var(--bs-secondary-bg); }
.pj-karte { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .35rem; padding: .4rem .5rem; margin-bottom: .4rem; cursor: pointer; }
.pj-karte:hover { border-color: #0d6efd; }
.pj-kal { grid-template-columns: 2.4rem repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--bs-border-color); border-top: 1px solid var(--bs-border-color); }
.pj-kal-kopf { font-size: .75rem; font-weight: 600; text-align: center; padding: .2rem; border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); }
.pj-kal-tag { min-height: 6.5rem; border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); padding: .15rem .2rem; overflow: hidden; }
.pj-kal-tag.fremd { background: var(--bs-tertiary-bg); color: var(--bs-tertiary-color); } .pj-kal-tag.we { background: var(--bs-tertiary-bg); } .pj-kal-tag.heute { box-shadow: inset 0 0 0 2px #0d6efd; }
.pj-kal-nr { font-size: .75rem; text-align: right; }
.pj-kal-kw { font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); text-align: center; padding-top: .2rem; background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); }   /* KW-Spalte (16.10.2026) */
.pj-kal-e { font-size: .72rem; border-radius: .2rem; padding: 0 .25rem; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; background: var(--bs-primary-bg-subtle); }
.pj-kal-e.stichtag { background: var(--bs-danger-bg-subtle); font-weight: 600; } .pj-kal-e.rot { background: #dc3545; color: #fff; } .pj-kal-e.wartet { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.pj-kal-e.serie { background: var(--bs-body-bg); border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); }
/* Dazwischen einfügen (16.10.2026): ＋ auf der Linie über dem Kästchen */
.pb-knoten { position: relative; }
.pb-dazwischen { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; line-height: 14px; padding: 0; font-size: 12px;
  border: 1px dashed #0d6efd; border-radius: 50%; background: var(--bs-body-bg); color: #0d6efd; z-index: 3; opacity: .55; }
.pb-dazwischen:hover { opacity: 1; background: var(--bs-primary-bg-subtle); }
.pb-dazwischen.unten { top: auto; bottom: -13px; }
.pb-baum.umgedreht .pb-dazwischen { top: auto; bottom: -13px; }
.pb-baum.umgedreht .pb-dazwischen.unten { bottom: auto; top: -13px; }
html.baum-ziel-oben .pb-baum.umgedreht .pb-dazwischen { top: -13px; bottom: auto; }
html.baum-ziel-oben .pb-baum.umgedreht .pb-dazwischen.unten { top: auto; bottom: -13px; }
/* Verweis-Linien im Baum (16.10.2026) */
.pb-zeile { position: relative; }
.pb-verweis-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
/* Zweiter Vorgänger am Kästchen (16.10.2026) */
.pb-verweis { font-size: .72rem; color: var(--bs-secondary-color); border-top: 1px dashed var(--bs-border-color); margin-top: .15rem; padding-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-verweis.ok { color: var(--bs-success-text-emphasis); }
/* Meilenstein-Überschrift über jeder Zeile (16.10.2026) */
.pb-meilenstein { font-size: .85rem; color: var(--bs-secondary-color); margin: .6rem 0 .15rem; padding-left: .2rem; border-bottom: 1px solid var(--bs-border-color); }
/* Gantt neu (16.10.2026): links Namen (Baum), rechts Zeitstrahl – Zeilen gleich hoch, Hintergrund über alle Zeilen */
.pj-g { display: flex; border: 1px solid var(--bs-border-color); border-radius: .4rem; font-size: .78rem; max-width: 100%; }
.pj-g-links { flex: 0 0 20rem; max-width: 45%; border-right: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.pj-g-rechts { flex: 1 1 auto; overflow-x: auto; }
.pj-g-zeit { position: relative; }
.pj-g-kopf { height: 4.4rem; border-bottom: 1px solid var(--bs-border-color); position: relative; background: var(--bs-tertiary-bg); }
.pj-g-name, .pj-g-zeile { height: 24px; border-bottom: 1px solid var(--bs-border-color); cursor: pointer; }
.pj-g-name { display: flex; align-items: center; gap: .2rem; padding-right: .3rem; white-space: nowrap; overflow: hidden; }
.pj-g-name:hover, .pj-g-zeile:hover { background: rgba(13,110,253,.05); }
/* Gewählter Schritt (19.10.2026, Holger): Name leicht hinterlegt, im Gantt nur der Zeitbalken rot umrandet statt ganzer Zeile */
.pj-g-name.gewaehlt { background: rgba(13,110,253,.12); }
.pj-g-zeile.gewaehlt .pj-g-balken { outline: 2px solid #dc3545; outline-offset: 1px; z-index: 2; }
.pj-g-name.entfallen { color: var(--bs-tertiary-color); text-decoration: line-through; }
.pj-g-zeile { position: relative; }
.pj-g-we { position: absolute; top: 0; bottom: 0; background: var(--bs-tertiary-bg); z-index: 0; }
.pj-g-taglinie { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bs-secondary-bg); z-index: 0; }
.pj-g-tagnr { position: absolute; bottom: .1rem; text-align: center; font-size: .62rem; color: var(--bs-secondary-color); z-index: 3; }
.pj-g-tagnr.we { color: var(--bs-tertiary-color); }
.pj-g-tagnr i { display: block; font-style: normal; font-size: .58rem; line-height: 1.1; }   /* Wochentag über der Tageszahl (16.10.2026) */
.pj-g-monat { position: absolute; top: 0; bottom: 0; width: 1px; background: #adb5bd; z-index: 2; }   /* Monatsanfang – bis in den Kopf (16.10.2026) */
.pj-g-heute { position: absolute; top: 0; bottom: 0; width: 2px; background: #0d6efd; z-index: 2; }
.pj-g-stichtag { position: absolute; top: 0; bottom: 0; width: 2px; background: #dc3545; z-index: 2; }
.pj-g-mon { position: absolute; top: .15rem; padding-left: .2rem; font-weight: 600; white-space: nowrap; }
.pj-g-kw { position: absolute; top: 1.25rem; padding-left: .15rem; color: var(--bs-secondary-color); font-size: .68rem; white-space: nowrap; border-left: 1px solid var(--bs-border-color); }
.pj-g-sttext { position: absolute; top: 1.25rem; transform: translateX(-50%); color: #dc3545; font-size: .68rem; font-weight: 600; white-space: nowrap; background: var(--bs-tertiary-bg); padding: 0 .2rem; z-index: 3; }
.pj-g-balken { position: absolute; top: 5px; bottom: 5px; border-radius: 3px; z-index: 1; overflow: hidden; border: 1px solid transparent; }
.pj-g-balken.aktiv { background: var(--bs-primary-bg-subtle); border-color: #0d6efd; } .pj-g-balken.wartet { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); }
.pj-g-balken.erledigt { background: #2fb344; border-color: #198754; } .pj-g-balken.ueber { background: var(--bs-danger-bg-subtle); border-color: #dc3545; }
.pj-g-balken.entfallen { background: transparent; border-color: var(--bs-border-color); }
.pj-g-balken.flex { border-style: dashed; }
.pj-g-fort { position: absolute; bottom: 0; height: 4px; left: 0; background: #2fb344; }   /* Unterpunkte erledigt: grüner Streifen unten */
.pj-g-raute { position: absolute; top: 2px; transform: translateX(-50%); font-size: 15px; line-height: 18px; z-index: 1; color: #0d6efd; }
.pj-g-raute.erledigt { color: var(--bs-success-text-emphasis); } .pj-g-raute.wartet { color: var(--bs-secondary-color); } .pj-g-raute.ueber { color: #dc3545; } .pj-g-raute.entfallen { color: var(--bs-tertiary-color); }
.pj-g-schloss { position: absolute; top: 3px; font-size: 10px; z-index: 1; }
.pj-g-soll { position: absolute; top: 3px; bottom: 3px; width: 3px; margin-left: -1px; background: #6c757d; opacity: .6; z-index: 1; }
/* Plan/Ist (21.10.2026): Ist-Streifen unten im Balken – grün im Plan, rot über dem geplanten Ende */
.pj-g-ist { position: absolute; bottom: 1px; height: 4px; border-radius: 2px; background: #2fb344; z-index: 2; }
.pj-g-ist.spaet { background: #dc3545; }
.pj-g-leg.ist { background: #2fb344; border-color: #2fb344; height: .3rem; } .pj-g-leg.ist.spaet { background: #dc3545; border-color: #dc3545; }
.pj-g-summe { padding: .3rem .5rem; border: 1px solid var(--bs-border-color); border-radius: .3rem; background: var(--bs-tertiary-bg); }
.pj-g-leg { display: inline-block; width: .9rem; height: .55rem; border-radius: 2px; vertical-align: middle; border: 1px solid; }
.pj-g-leg.erledigt { background: #2fb344; border-color: #198754; } .pj-g-leg.aktiv { background: var(--bs-primary-bg-subtle); border-color: #0d6efd; }
.pj-g-leg.wartet { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); } .pj-g-leg.ueber { background: var(--bs-danger-bg-subtle); border-color: #dc3545; }
@media (max-width: 767.98px) { .pj-g-links { flex-basis: 11rem; } }
.pj-gantt-zeile { padding: 2px 0; } .pj-gantt-zeile:hover { background: var(--bs-tertiary-bg); }
.pj-gantt-balken { position: absolute; top: 4px; bottom: 4px; border-radius: 3px; background: #0d6efd; opacity: .45; }
.pj-gantt-balken.gruen { background: #198754; } .pj-gantt-balken.gelb { background: #ffc107; } .pj-gantt-balken.rot { background: #dc3545; } .pj-gantt-balken.grau { background: #adb5bd; }
.pj-last td.gruen { background: var(--bs-success-bg-subtle); } .pj-last td.gelb { background: var(--bs-warning-bg-subtle); } .pj-last td.rot { background: var(--bs-danger-bg-subtle); font-weight: 600; }
/* Projektseite: Seitenleiste je Schritt */
.pj-leiste { position: fixed; top: 0; right: 0; bottom: 0; width: min(28rem, 100vw); background: var(--bs-body-bg); box-shadow: -4px 0 16px rgba(0,0,0,.15); z-index: 1050; display: flex; flex-direction: column; }
.pj-leiste-kopf { padding: .6rem .8rem; border-bottom: 1px solid var(--bs-border-color); display: flex; gap: .5rem; align-items: flex-start; }
.pj-leiste-inhalt { padding: .6rem .8rem; overflow-y: auto; flex: 1; }
/* Seitenleiste/Chat offen (19.10.2026, Holger): Seite rückt zusammen statt verdeckt zu werden – Raster und Gantt werden schmaler (nur PC) */
@media (min-width: 992px) {
  html:has(.pj-leiste) main > article.content { padding-right: calc(28rem + 1rem) !important; }
  html:has(.pj-chat-seite) main > article.content { padding-right: calc(30rem + 1rem) !important; }
  html:has(.pj-leiste):has(.pj-chat-seite) main > article.content { padding-right: calc(58rem + 1rem) !important; }
}
.pj-verlauf-e { border-left: 2px solid var(--bs-border-color); padding: .1rem 0 .4rem .6rem; margin-left: .3rem; }
.pj-verlauf-e.kommentar { border-left-color: #0d6efd; }
.kd-liste { max-height: 22rem; overflow-y: auto; }   /* Kundenseite (16.10.2026) */
/* Hell/Dunkel-Knopf unten links (17.10.2026): zeigt, wohin er schaltet */
.thema-knopf .thema-dunkel { display: inline; }
.thema-knopf .thema-hell { display: none; }
[data-bs-theme=dark] .thema-knopf .thema-dunkel { display: none; }
[data-bs-theme=dark] .thema-knopf .thema-hell { display: inline; }
/* Dunkel (17.10.2026, Holger): Logo mit weißer Schrift, Menü im Ton der dunklen Seite */
.logo-dunkel { display: none !important; }
img.logo-hell.mx-auto, img.logo-dunkel.mx-auto { display: block; }
html[data-bs-theme=dark] .logo-hell { display: none !important; }
html[data-bs-theme=dark] .logo-dunkel { display: block !important; }
html[data-bs-theme=dark] .sidebar { background-image: linear-gradient(180deg, #1c1f23 0%, #15171a 100%); border-right: 1px solid #2b3035; }
html[data-bs-theme=dark] .brand-bar { background: #1c1f23; border-bottom: 1px solid #2b3035; }
html[data-bs-theme=dark] .navbar-toggler { filter: invert(1); }   /* Handy: Menü-Knopf auf der dunklen Markenleiste */
/* ---- Dunkelmodus (17.10.2026, Holger): was die Variablen nicht abdecken ---- */
/* Bootstrap-Klassen, die in 5.3 auch dunkel hell bleiben */
html[data-bs-theme=dark] .bg-white { background-color: var(--bs-body-bg) !important; }
html[data-bs-theme=dark] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
html[data-bs-theme=dark] .bg-white.text-dark, html[data-bs-theme=dark] .bg-light.text-dark,
html[data-bs-theme=dark] .bg-white .text-dark, html[data-bs-theme=dark] .bg-light .text-dark { color: var(--bs-body-color) !important; }
html[data-bs-theme=dark] .text-bg-light { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; }
html[data-bs-theme=dark] .table-light { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-secondary-bg); --bs-table-hover-bg: var(--bs-secondary-bg); }
html[data-bs-theme=dark] .btn-light { --bs-btn-bg: var(--bs-tertiary-bg); --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-bg: var(--bs-secondary-bg); }
/* Chat: eigene Hintergrundfarbe gilt nur hell; halbtransparente Schatten werden hell */
html[data-bs-theme=dark] .chat-verlauf { background: #15191d; }
html[data-bs-theme=dark] .chat-blase { background: #262b30; }
html[data-bs-theme=dark] .chat-blase.eigen { background: #11402c; }
html[data-bs-theme=dark] .chat-blase.erledigt { background: #11402c; }
html[data-bs-theme=dark] .chat-zitat, html[data-bs-theme=dark] .chat-reaktion { background: rgba(255,255,255,.08); }
/* Notizbuch-Editor (Quill) */
html[data-bs-theme=dark] .ql-toolbar.ql-snow, html[data-bs-theme=dark] .ql-container.ql-snow { border-color: var(--bs-border-color); }
html[data-bs-theme=dark] .ql-snow .ql-stroke { stroke: var(--bs-body-color); }
html[data-bs-theme=dark] .ql-snow .ql-fill, html[data-bs-theme=dark] .ql-snow .ql-stroke.ql-fill { fill: var(--bs-body-color); }
html[data-bs-theme=dark] .ql-snow .ql-picker, html[data-bs-theme=dark] .ql-snow .ql-picker-label { color: var(--bs-body-color); }
html[data-bs-theme=dark] .ql-snow .ql-picker-options, html[data-bs-theme=dark] .ql-snow .ql-tooltip { background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
html[data-bs-theme=dark] .ql-snow .ql-tooltip input[type=text] { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
html[data-bs-theme=dark] .ql-editor.ql-blank::before { color: var(--bs-secondary-color); }
html[data-bs-theme=dark] .ql-snow.ql-toolbar button:hover .ql-stroke, html[data-bs-theme=dark] .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: #6ea8fe; }
html[data-bs-theme=dark] .ql-snow.ql-toolbar button:hover .ql-fill, html[data-bs-theme=dark] .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: #6ea8fe; }
/* halbtransparent dunkle Flächen (rgba(0,0,0,…)) auf dunklem Grund unsichtbar → hell */
html[data-bs-theme=dark] .chat-bezug { background: rgba(110,168,254,.12); }
/* KI-Assistent: eigene Farbvariablen (warmes Beige) dunkel neu belegt */
html[data-bs-theme=dark] .ki-app { --ki-hg: #1f1f1e; --ki-seite: #1a1a19; --ki-rand: #3a3936; --ki-frage: #2c2b29; }
/* Bereiche, die im Dunkelmodus bewusst hell bleiben (data-bs-theme="light", z. B. Plantafel): Schrift und Grund neu setzen */
html[data-bs-theme=dark] [data-bs-theme=light] { color: var(--bs-body-color); background-color: var(--bs-body-bg); }
/* Tabellen-Zeilenfarben (table-secondary, -success …) bleiben in Bootstrap 5.3 auch dunkel hell → getönt dunkel */
html[data-bs-theme=dark] .table-secondary { --bs-table-color: var(--bs-secondary-color); --bs-table-bg: var(--bs-secondary-bg); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-tertiary-bg); --bs-table-striped-color: var(--bs-secondary-color); --bs-table-hover-bg: var(--bs-tertiary-bg); --bs-table-hover-color: var(--bs-body-color); }
html[data-bs-theme=dark] .table-primary { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-primary-bg-subtle); --bs-table-border-color: var(--bs-primary-border-subtle); --bs-table-striped-bg: var(--bs-primary-bg-subtle); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: var(--bs-primary-border-subtle); --bs-table-hover-color: var(--bs-body-color); }
html[data-bs-theme=dark] .table-success { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-success-bg-subtle); --bs-table-border-color: var(--bs-success-border-subtle); --bs-table-striped-bg: var(--bs-success-bg-subtle); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: var(--bs-success-border-subtle); --bs-table-hover-color: var(--bs-body-color); }
html[data-bs-theme=dark] .table-warning { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-warning-bg-subtle); --bs-table-border-color: var(--bs-warning-border-subtle); --bs-table-striped-bg: var(--bs-warning-bg-subtle); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: var(--bs-warning-border-subtle); --bs-table-hover-color: var(--bs-body-color); }
html[data-bs-theme=dark] .table-danger { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-danger-bg-subtle); --bs-table-border-color: var(--bs-danger-border-subtle); --bs-table-striped-bg: var(--bs-danger-bg-subtle); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: var(--bs-danger-border-subtle); --bs-table-hover-color: var(--bs-body-color); }
html[data-bs-theme=dark] .table-info { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-info-bg-subtle); --bs-table-border-color: var(--bs-info-border-subtle); --bs-table-striped-bg: var(--bs-info-bg-subtle); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: var(--bs-info-border-subtle); --bs-table-hover-color: var(--bs-body-color); }
/* Links: das Petrol ist auf dunkel kaum lesbar */
html[data-bs-theme=dark] { --indusa-link: #6ea8fe; }
html[data-bs-theme=dark] .pj-orange { color: #ff922b !important; }   /* verspätet: helleres Orange auf dunkel */
/* Projekt-Baum dunkel: Kacheln heben sich ab, offene Schritte mit grauem statt schwarzem Balken (Statusfarben gehen vor) */
:where(html[data-bs-theme=dark]) .pb-knoten { background: var(--bs-tertiary-bg); border-color: #495057; border-left-color: #adb5bd; }
:where(html[data-bs-theme=dark]) .pj-karte { background: var(--bs-tertiary-bg); }
/* Statusschrift dunkel: Bootstrap färbt text-success/-danger/-primary auch dunkel kräftig → hellere Töne */
html[data-bs-theme=dark] .text-success { color: #75b798 !important; }
html[data-bs-theme=dark] .text-danger { color: #ea868f !important; }
html[data-bs-theme=dark] .text-primary { color: #6ea8fe !important; }
html[data-bs-theme=dark] .text-info { color: #6edff6 !important; }
html[data-bs-theme=dark] .pj-g-sttext { color: #ea868f; }
html[data-bs-theme=dark] .navbar-toggler, html[data-bs-theme=dark] .navbar-toggler:checked { background-color: transparent; }   /* Handy-Menüknopf: invertiert ohne hellen Kasten */

/* Drag & Drop-Ablage (ablage.js, 23.10.2026): beim Ziehen gestrichelt, darüber blau */
.ablage-zieht [data-ablage] { outline: 2px dashed var(--bs-primary, #0d6efd); outline-offset: 3px; border-radius: .375rem; }
[data-ablage].ablage-drueber { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 3px; background-color: rgba(13, 110, 253, .08); }
