:root {
  --blau: #1f2bb8;
  --blau-hell: #e9ebfb;
  --text: #1d2130;
  --grau: #646b80;
  --linie: #dde0e8;
  --hinter: #f3f4f8;
  --karte: #fff;
  --rot: #b42318;
  --gruen: #18794e;
  --gelb: #fff6d6;
  --radius: 8px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--hinter); }
a { color: var(--blau); }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 6px; }
.klein { font-size: 12px; color: var(--grau); }
.r { text-align: right; }
.laden { color: var(--grau); padding: 40px; text-align: center; }

/* Kopfleiste */
.kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.marke img { height: 42px; width: auto; display: block; }
.kopf nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kopf nav a:not(.knopf) { padding: 7px 10px; border-radius: 6px; text-decoration: none; color: var(--text); white-space: nowrap; }
.kopf nav a.aktiv { background: var(--blau-hell); color: var(--blau); font-weight: 600; }
/* Menü-Knopf (drei Striche) für Handy und Tablet */
.menue-knopf { display: none; flex-direction: column; justify-content: space-between; width: 44px; height: 44px; padding: 11px 10px; border-radius: 8px; flex-shrink: 0; }
.menue-knopf span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menue-offen .menue-knopf span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menue-offen .menue-knopf span:nth-child(2) { opacity: 0; }
.menue-offen .menue-knopf span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Startseite */
.start-kopf { display: flex; align-items: center; gap: 28px; padding: 12px 4px 22px; }
.start-logo { width: 240px; max-width: 42vw; height: auto; flex-shrink: 0; }
.start-gruss h1 { font-size: 28px; }
.start-gruss p { margin: 4px 0 0; color: var(--grau); font-size: 15px; }
.start-hinweise { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.start-hinweis { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; text-decoration: none; font-weight: 600; border: 1px solid; }
a.start-hinweis::after { content: '→'; }
.start-hinweis.rot { color: var(--rot); background: #fff1f1; border-color: #f0b4b4; }
.start-hinweis.orange { color: #8a4b00; background: #fff6e8; border-color: #f1c98c; }
.start-hinweis.gruen { color: #14632e; background: #eefaf1; border-color: #a6d9b5; font-weight: 500; }
.start-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.start-kachel { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 18px; background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  text-decoration: none; color: var(--text); transition: box-shadow .15s, transform .15s, border-color .15s; }
.start-kachel:hover { border-color: #0b03cf; box-shadow: 0 4px 16px rgba(11, 3, 207, .12); transform: translateY(-1px); }
.start-symbol { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: #0b03cf; color: #fff; }
.start-symbol svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.start-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.start-text b { font-size: 16px; }
.start-text span { font-size: 13px; color: var(--grau); }
.start-demnaechst ul { list-style: none; margin: 0; padding: 0; }
.start-demnaechst li a { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 4px; border-top: 1px solid #f0f1f5; text-decoration: none; color: var(--text); }
.start-demnaechst li:first-child a { border-top: none; }
.start-demnaechst li a:hover { background: var(--hinter); }
.start-zeit { color: var(--grau); font-size: 13px; }
.start-titel.frist { color: #8c1d1d; }
.start-projekt { font-size: 12px; color: var(--grau); }

.start-hinweis.blau { color: var(--blau); background: var(--blau-hell); border-color: #b9bff3; }

/* Chat */
main.chat-ansicht { padding-bottom: 12px; }
.chat-seite { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; height: calc(100vh - 100px); height: calc(100dvh - 100px); min-height: 420px; }
.chat-liste, .chat-verlauf { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); min-height: 0; display: flex; flex-direction: column; }
.chat-liste-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.ch-push { padding: 0 14px 8px; }
.ch-push p { margin: 0; }
.ch-push-an { width: 100%; background: var(--blau-hell); border-color: #b9bff3; color: var(--blau); font-weight: 600; }
.ch-klein { padding: 2px 8px; font-size: 12px; }
.ch-kanaele { overflow-y: auto; flex: 1; padding: 0 6px 8px; }
.ch-gruppe { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); padding: 12px 8px 4px; }
.ch-kanal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); position: relative; }
.ch-kanal:hover { background: var(--hinter); }
.ch-kanal.aktiv { background: var(--blau-hell); }
.ch-kanal.neu .ch-titel { font-weight: 700; }
.ch-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-zeit { font-size: 11px; color: var(--grau); }
.ch-vorschau { grid-column: 1; font-size: 12px; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-kanal .zaehler { grid-column: 2; grid-row: 2; justify-self: end; }
.chat-leer { color: var(--grau); text-align: center; margin: auto; padding: 30px; }
.ch-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.ch-kopf b { font-size: 16px; }
.ch-zurueck { display: none; text-decoration: none; font-size: 26px; line-height: 1; padding: 0 6px; color: var(--blau); }
.ch-nachrichten { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--hinter); }
.ch-mehr { align-self: center; margin-bottom: 8px; font-size: 13px; }
.ch-tag { display: flex; justify-content: center; margin: 10px 0 6px; }
.ch-tag span { font-size: 12px; color: var(--grau); background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 2px 10px; }
.cn { align-self: flex-start; max-width: min(78%, 620px); padding: 7px 11px 5px; background: #fff; border: 1px solid var(--linie); border-radius: 14px 14px 14px 4px; overflow-wrap: anywhere; }
.cn.eigen { align-self: flex-end; background: #e3e6fc; border-color: #c9cef6; border-radius: 14px 14px 4px 14px; }
.cn.folge { margin-top: -1px; }
.cn.geloescht { color: var(--grau); font-size: 13px; }
.cn-kopf { font-size: 12px; color: var(--grau); margin-bottom: 2px; }
.cn-kopf b { color: var(--blau); }
.cn.eigen .cn-kopf b { color: var(--text); }
.cn-text { line-height: 1.4; }
.cn-erwaehnt { color: var(--blau); font-weight: 600; }
.cn-erwaehnt.ich { background: #fff3c4; border-radius: 4px; padding: 0 2px; }
.cn-bilder { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cn-bilder img { display: block; max-width: 240px; max-height: 240px; border-radius: 8px; object-fit: cover; }
.cn-datei { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; padding: 6px 8px; background: rgba(0, 0, 0, .04); border-radius: 6px; text-decoration: none; }
.cn-datei span { font-size: 11px; color: var(--grau); }
.cn-fuss { display: flex; justify-content: flex-end; gap: 6px; align-items: center; font-size: 11px; color: var(--grau); min-height: 4px; }
.cn-fuss button { padding: 0 5px; font-size: 12px; min-height: 0; border-color: transparent; background: transparent; color: var(--grau); }
.cn-fuss button:hover { color: var(--rot); }
.ch-eingabe { position: relative; border-top: 1px solid var(--linie); padding: 8px 10px; }
.ch-zeile { display: flex; gap: 6px; align-items: flex-end; }
.ch-zeile textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; border-radius: 20px; padding: 9px 14px; }
.ch-plus { padding: 8px 10px; border-radius: 20px; font-size: 16px; line-height: 1; }
.ch-zeile .primaer { border-radius: 20px; }
.ch-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-anhaenge:not(:empty) { margin-bottom: 6px; }
.ch-anhang { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; background: var(--hinter); border-radius: 12px; padding: 3px 4px 3px 10px; }
.ch-anhang button { padding: 0 6px; border-color: transparent; background: transparent; min-height: 0; }
.ch-vorschlaege { position: absolute; bottom: 100%; left: 10px; display: flex; flex-direction: column; min-width: 220px; background: #fff; border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); overflow: hidden; }
.ch-vorschlaege button { border: none; border-radius: 0; text-align: left; padding: 9px 12px; }
.ch-vorschlaege button:hover { background: var(--blau-hell); }

/* Einladung */
dialog.einladung { width: min(440px, 94vw); }
.ei-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }

main { max-width: 1280px; margin: 0 auto; padding: 20px 24px 120px; }

/* Knöpfe */
.knopf, button {
  font: inherit; cursor: pointer; border: 1px solid var(--linie); background: #fff; color: var(--text);
  padding: 7px 14px; border-radius: 6px; text-decoration: none; display: inline-block; line-height: 1.3;
}
.knopf:hover, button:hover { border-color: #b8bdcc; }
.primaer { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }
.primaer:hover { background: #1823a0; border-color: #1823a0; }
.gefahr { color: var(--rot); }
button:disabled { opacity: .5; cursor: default; }

/* Felder */
input, textarea, select {
  font: inherit; color: inherit; width: 100%; padding: 6px 8px;
  border: 1px solid var(--linie); border-radius: 5px; background: #fff;
}
input:focus, textarea:focus, select:focus { outline: 2px solid #b9bff3; border-color: var(--blau); }
textarea { resize: vertical; }
.feld { display: flex; flex-direction: column; gap: 3px; }
.feld > span { font-size: 12px; color: var(--grau); }
.breit { grid-column: 1 / -1; }
.raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; }
.raster .s2 { grid-column: span 2; }
.raster .s3 { grid-column: span 3; }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zwei > .karte { margin-bottom: 0; }
.zwei + * { margin-top: 16px; }

/* Leisten */
.titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.titelzeile .knoepfe { display: flex; gap: 8px; }
.id { color: var(--grau); font-weight: 400; font-size: 14px; margin-left: 6px; }
.filter { display: flex; gap: 8px; margin-bottom: 12px; }
.filter input { max-width: 420px; }
.filter select { width: auto; }

/* Archivliste */
table.liste { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.liste th { text-align: left; font-size: 12px; color: var(--grau); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--linie); background: #fafbfd; }
.liste td { padding: 9px 10px; border-bottom: 1px solid #eef0f4; vertical-align: top; }
.liste tbody tr { cursor: pointer; }
.liste tbody tr:hover { background: #f7f8fe; }
.liste .unter { color: var(--grau); font-size: 12px; }
.liste .r { white-space: nowrap; }
.leer { text-align: center; color: var(--grau); padding: 40px !important; cursor: default; }
.summenzeile { display: flex; justify-content: flex-end; gap: 24px; padding: 10px 4px; color: var(--grau); }
.summenzeile b { color: var(--text); }

.chip { display: inline-block; font-size: 12px; padding: 2px 7px; margin: 1px 3px 1px 0; border-radius: 10px; text-decoration: none; border: 1px solid; white-space: nowrap; }
.chip.angebot { color: #6b4a00; border-color: #e9cf8a; background: #fff8e6; }
.chip.ab { color: #4b2a8a; border-color: #cbb9ef; background: #f5f0ff; }
.chip.lieferschein { color: #155e75; border-color: #a5d8e6; background: #eefaff; }
.chip.rechnung { color: var(--blau); border-color: #b9bff3; background: var(--blau-hell); }
.status { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.status.offen { background: #fdecea; color: var(--rot); }
.status.bezahlt { background: #e6f6ee; color: var(--gruen); }
.status.arbeit { background: #f0f1f5; color: var(--grau); }

/* Hinweise */
.hinweis { background: var(--gelb); border: 1px solid #f1dc94; border-radius: var(--radius); padding: 9px 14px; margin-bottom: 16px; }
.warnung { background: var(--gelb); border: 1px solid #f1dc94; border-radius: 6px; padding: 8px 10px; margin: 10px 0 0; }
.steuerwahl { display: flex; gap: 16px; padding: 6px 0; flex-wrap: wrap; }
.steuerwahl label, .haken { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.steuerwahl input, .haken input { width: auto; }

/* Positionstabelle */
table.pos { width: 100%; border-collapse: collapse; }
.pos th { font-size: 12px; color: var(--grau); font-weight: 600; text-align: left; padding: 4px 4px 6px; border-bottom: 1px solid var(--linie); }
.pos td { padding: 5px 4px; vertical-align: top; border-bottom: 1px solid #f0f1f5; }
.pos .c-pos { width: 70px; }
.pos .c-menge { width: 90px; }
.pos .c-einh { width: 80px; }
.pos .c-ep { width: 110px; }
.pos .c-gp { width: 120px; }
.pos .c-ls { width: 62px; }
.pos .f-bem { margin-top: 4px; min-height: 31px; height: 31px; resize: none; overflow: hidden; font-size: 13px; font-style: italic; }
.pos .f-notiz { margin-top: 4px; min-height: 31px; height: 31px; resize: none; overflow: hidden; font-size: 13px; background: #fffbe6; border-color: #f1dc94; }
.pos .ls-info { color: var(--blau); margin-top: 2px; }
.summen .ls-summe { display: block; margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--linie); color: var(--blau); }
.summen .ls-summe .gesamt { font-size: 14px; border-top-color: var(--blau); }

/* GAEB-Fenster im Vorgang, Anmeldung, Nutzeranzeige */
dialog.gross { width: min(1280px, 96vw); height: 92vh; padding: 14px 18px; background: var(--hinter); }
dialog.gross .lv th { top: 0; }
.dlg-gaeb-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dlg-gaeb-kopf h3 { margin: 0; font-size: 16px; }
#nutzer { margin-left: 8px; font-size: 13px; color: var(--grau); white-space: nowrap; }
#nutzer select { width: auto; padding: 4px 8px; font-size: 13px; }
.passwortschalter { margin-top: 14px; font-weight: 600; }
#nutzer a { color: var(--text); }
.anmeldung { display: flex; flex-direction: column; gap: 12px; }
.anmelde-logo { width: 100%; max-width: 300px; height: auto; margin: 0 auto 6px; display: block; }
.anmeldung .hinweis { margin: 0; }

/* GAEB-Import */
.ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px;
  border: 2px dashed #c3c8d6; border-radius: var(--radius); cursor: pointer; text-align: center; background: #fafbfd; }
.ablage:hover, .ablage.ziehen { border-color: var(--blau); background: var(--blau-hell); }
#lv-liste tr { cursor: pointer; }
#lv-liste tr:hover { background: #f7f8fe; }
.lv-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.lv-kopf h2 { margin-bottom: 2px; }
.lv-kopf .knoepfe { display: flex; gap: 8px; }
.lv-werkzeuge { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.lv-werkzeuge input[type=search] { max-width: 360px; }
table.lv { width: 100%; border-collapse: collapse; }
.lv th { text-align: left; font-size: 12px; color: var(--grau); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--linie); position: sticky; top: 52px; background: #fff; }
.lv td { padding: 6px; border-bottom: 1px solid #f0f1f5; vertical-align: top; }
.lv .c-wahl { width: 34px; }
.lv .c-oz { width: 110px; }
.lv .c-menge { width: 90px; }
.lv .c-einh { width: 60px; }
.lv .c-ep { width: 100px; }
.lv td.oz { font-family: Consolas, monospace; font-size: 12px; white-space: nowrap; }
.lv td.r { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lv input[type=checkbox] { width: auto; }
.lv tbody tr { cursor: pointer; }
.lv tbody tr:hover td { background: #f7f8fe; }
.lv tr.lv-titel td { background: #f3f4f8; }
.lv tr.gewaehlt td { background: var(--blau-hell); }
.lv .lv-kurz { font-weight: 600; }
.lv .lv-lang { white-space: pre-wrap; color: #4a5064; font-size: 12.5px; margin-top: 3px; }
.lv .lv-mehr { padding: 0; border: none; background: none; color: var(--blau); font-size: 12px; margin-top: 2px; }
.lv tr.lv-hinweis .lv-lang { font-style: italic; }
.lv-fuss { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; padding: 12px 0 4px; background: #fff; border-top: 1px solid var(--linie); margin-top: 8px; }
.lv-fuss #lv-zaehler { margin-right: auto; align-self: center; color: var(--grau); }
.lv-fuss select { min-width: 320px; }
.pos .c-akt { width: 150px; }
.pos td.gp { padding-top: 11px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos input.r { text-align: right; font-variant-numeric: tabular-nums; }
.pos .f-kurz { font-weight: 600; }
.pos .f-lang { margin-top: 4px; min-height: 31px; height: 31px; resize: none; overflow: hidden; font-size: 13px; color: #3a4053; }
.pos tr.titel td { background: #f6f7fb; }
.pos tr.titel .f-kurz { font-size: 15px; }
.pos .akt { display: flex; gap: 2px; justify-content: flex-end; padding-top: 2px; }
.pos .akt button { padding: 4px 7px; font-size: 13px; border-color: transparent; background: transparent; color: var(--grau); }
.pos .akt button:hover { background: var(--hinter); color: var(--text); }
.pos .akt button[data-a="weg"]:hover { color: var(--rot); }
.pos tr:focus-within td { background: #fafbff; }
.pos .bilder { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 6px; }
.pos .bilder figure { margin: 0; padding: 4px; border: 1px solid var(--linie); border-radius: 5px; background: #fff; }
.pos .bilder img { display: block; height: 80px; max-width: 220px; object-fit: contain; }
.pos .bilder figcaption { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--grau); }
.pos .bilder figcaption input { width: 52px; padding: 2px 5px; text-align: right; }
.pos .bilder figcaption button { padding: 1px 6px; border-color: transparent; color: var(--grau); }
.pos .bilder figcaption button:hover { color: var(--rot); }
.pos .bild-plus { padding: 3px 9px; font-size: 12px; color: var(--grau); border-style: dashed; }
.pos tr.ziehen td { background: var(--blau-hell); }
.dlg-nr { margin-top: 10px; }
.unter-tabelle { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.unter-tabelle .knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.summen { min-width: 300px; }
.summen div { display: flex; justify-content: space-between; gap: 24px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.summen .gesamt { border-top: 1px solid var(--text); margin-top: 4px; padding-top: 6px; font-weight: 700; font-size: 16px; }

/* Belegkarten */
.belege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.beleg { border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.beleg.erstellt { border-color: #b9bff3; background: #fbfbff; }
.beleg .info { font-size: 13px; color: var(--grau); min-height: 36px; }
.belegnr { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--grau); }
.belegnr input { font-weight: 600; }
.nr-warnung { color: var(--rot); margin-top: -4px; }
.zahlung-vorschau { align-self: end; margin: 0 0 6px; }
table.zahlungen { width: 100%; border-collapse: collapse; }
.zahlungen th { text-align: left; font-size: 12px; color: var(--grau); font-weight: 600; padding: 4px 6px; }
.zahlungen td { padding: 4px 6px; vertical-align: top; border-top: 1px solid #f0f1f5; }
.zahlungen textarea { min-width: 320px; }
.zw-beispiel { margin-top: 3px; }
.beleg .info a { font-weight: 600; }
.beleg .knoepfe { display: flex; gap: 6px; margin-top: auto; }
.beleg .knoepfe button { flex: 1; padding: 6px 8px; }

/* Einstellungen */
table.nummern { width: 100%; border-collapse: collapse; }
.nummern th { text-align: left; font-size: 12px; color: var(--grau); font-weight: 600; padding: 4px 6px; }
.nummern td { padding: 4px 6px; }
.nummern .beispiel { color: var(--grau); font-family: Consolas, monospace; white-space: nowrap; }
.textgruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 14px; }
.textgruppe h3 { grid-column: 1 / -1; margin: 6px 0 0; }

details.karte > summary { cursor: pointer; font-weight: 600; }
details.karte[open] > summary { margin-bottom: 12px; }

/* Speicherleiste */
.speicherleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  display: flex; justify-content: center; gap: 12px; align-items: center;
  padding: 10px; background: #fff; border-top: 1px solid var(--linie);
  transform: translateY(100%); transition: transform .15s;
}
body.ungespeichert .speicherleiste { transform: none; }

/* Dialog & Meldungen */
dialog { border: none; border-radius: 10px; padding: 20px 22px; width: 380px; max-width: 96vw; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(20, 24, 40, .35); }
.dlg-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#meldungen { position: fixed; right: 20px; bottom: 70px; display: flex; flex-direction: column; gap: 8px; z-index: 20; }
.meldung { background: #1d2130; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.2); max-width: 420px; }
.meldung.fehler { background: var(--rot); }
.meldung a { color: #c9cdff; }

/* Bauvorhaben */
.pnr { display: inline-block; font-family: Consolas, monospace; font-weight: 700; color: var(--blau); background: var(--blau-hell);
  border-radius: 4px; padding: 0 5px; margin-right: 6px; font-size: .92em; }
h1 .pnr { font-size: .85em; padding: 1px 8px; vertical-align: 2px; }
.projektleiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 10px; font-size: 13px; }
.projektleiste a { color: var(--text); text-decoration: none; }
.projektleiste a:hover { color: var(--blau); }
.projektleiste label { display: flex; align-items: center; gap: 8px; color: var(--grau); }
.projektleiste select { width: auto; min-width: 280px; max-width: 420px; padding: 4px 8px; }
.projektinfo { margin: -8px 0 14px; color: var(--grau); }
.kennzahlen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.kennzahlen > div { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.kennzahlen span { font-size: 12px; color: var(--grau); }
.kennzahlen b { font-size: 18px; font-variant-numeric: tabular-nums; }
.karten-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.karten-kopf h2 { margin: 0; }
.karten-kopf .knoepfe { display: flex; gap: 8px; margin-left: auto; }
.karte table.liste { border: none; }
table.projekte td.pnr-zelle { font-family: Consolas, monospace; font-weight: 700; color: var(--blau); white-space: nowrap; width: 90px; }
table.projekte tr.gruppe td { background: #f3f4f8; color: var(--grau); font-size: 12px; font-weight: 600; padding: 6px 10px; cursor: default; }
table.projekte tr.abgeschlossen td { color: var(--grau); }
.unterkopf { margin: 0 0 8px; font-size: 14px; }
.stamm-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Leiste: Zähler offener Prüfungen, Reiter */
.zaehler { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--rot); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; margin-left: 3px; }
.reiter { display: inline-flex; border: 1px solid var(--linie); border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.reiter button { border: none; border-radius: 0; padding: 6px 12px; background: #fff; white-space: nowrap; }
.reiter button + button { border-left: 1px solid var(--linie); }
.reiter button.aktiv { background: var(--blau-hell); color: var(--blau); font-weight: 600; }

/* Eingangsrechnungen */
.estatus { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; border: 1px solid; vertical-align: middle; }
.estatus.neu { color: #6b4a00; border-color: #e9cf8a; background: #fff8e6; }
.estatus.pruefung { color: var(--blau); border-color: #b9bff3; background: var(--blau-hell); }
.estatus.beanstandet { color: var(--rot); border-color: #f0b4b4; background: #fff1f1; }
.estatus.freigegeben { color: #14632e; border-color: #a6d9b5; background: #eefaf1; }
.estatus.bezahlt { color: var(--grau); border-color: var(--linie); background: #f3f4f8; }
h1 .estatus { font-size: 13px; font-weight: 600; margin-left: 8px; }
.ueberfaellig { color: var(--rot); font-weight: 600; }
.bald { color: #b35c00; font-weight: 600; }
.klein-ablage { padding: 14px 16px; margin-bottom: 12px; flex-direction: row; font-size: 13px; color: var(--grau); }
.eingang-seite { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); gap: 16px; align-items: start; }
.eingang-dokument { position: sticky; top: 64px; }
.pdf-rahmen { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; height: calc(100vh - 150px); min-height: 480px; }
.pdf-rahmen iframe { width: 100%; height: 100%; border: none; }
.erechnung h2 { font-size: 14px; }
table.liste.kompakt td, table.liste.kompakt th { padding: 5px 6px; font-size: 13px; cursor: default; }
.rechenhilfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -4px; }
.rechenhilfe button { padding: 3px 9px; font-size: 12px; color: var(--grau); }
.freigabe-info { background: #eefaf1; border: 1px solid #a6d9b5; border-radius: 6px; padding: 8px 10px; color: #14632e; margin-bottom: 10px; }
.beanstandung-info { background: #fff1f1; border: 1px solid #f0b4b4; border-radius: 6px; padding: 8px 10px; color: #8c1d1d; margin-bottom: 10px; }
.kommentar-text { margin-top: 4px; font-style: italic; white-space: pre-wrap; }
.kommentar-feld textarea { resize: vertical; }
.eingang-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
button.gruen { background: #16803c; border-color: #16803c; color: #fff; font-weight: 600; }
button.gruen:hover { background: #12692f; }
ul.verlauf { list-style: none; margin: 0; padding: 0; font-size: 13px; }
ul.verlauf li { padding: 6px 0 6px 12px; border-left: 3px solid var(--linie); margin-bottom: 4px; }
ul.verlauf li.freigeben { border-left-color: #16803c; }
ul.verlauf li.beanstanden, ul.verlauf li.zurueck { border-left-color: var(--rot); }
ul.verlauf li.bezahlt { border-left-color: var(--grau); }

/* Eingangsrechnungen: Zuordnen */
.mail-stand { margin: -6px 0 10px; }
.z-leiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; }
.z-leiste select { width: auto; max-width: 280px; }
.z-seite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.z-liste { display: flex; flex-direction: column; gap: 8px; }
.z-karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.z-karte:hover { border-color: #b9bff3; }
.z-karte.aktiv { border-color: var(--blau); box-shadow: 0 0 0 2px var(--blau-hell); }
.z-oben { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--grau); }
.z-oben input { width: auto; }
.z-oben a { margin-left: auto; font-size: 12px; }
.z-betreff { margin: 4px 0 8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zeile 1: Lieferant | Brutto – Zeile 2: Bauvorhaben | Zuständig | Knöpfe */
.z-felder { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.z-felder [data-z="lieferant"] { grid-column: 1 / 3; }
.z-felder input, .z-felder select { padding: 6px 7px; font-size: 13px; }
.z-knoepfe { display: flex; gap: 4px; }
.z-felder button { padding: 6px 10px; white-space: nowrap; }
.z-felder select.vorschlag { background: #fff8e6; border-color: #e9cf8a; }
.z-hinweis { margin-top: 6px; font-size: 12px; color: #8a6400; }
.z-vorschau { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; }
.z-vorschau .pdf-rahmen { height: calc(100vh - 260px); min-height: 420px; }
.z-mail { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.z-mailtext { white-space: pre-wrap; font-size: 13px; color: #3a4053; max-height: 160px; overflow: auto; margin-top: 6px; border-top: 1px solid #f0f1f5; padding-top: 6px; }
.mail-test { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Kalender */
.k-leiste { align-items: center; flex-wrap: wrap; }
.k-leiste select { width: auto; }
.k-monat { min-width: 150px; text-align: center; font-size: 16px; }
.k-monatsblatt { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--linie); gap: 1px; }
.k-kopf { background: #fafbfd; font-size: 12px; color: var(--grau); font-weight: 600; text-align: center; padding: 6px 0; }
.k-kw { background: #fafbfd; font-size: 11px; color: var(--grau); text-align: center; padding-top: 6px; }
.k-tag { background: #fff; min-height: 108px; padding: 4px 4px 6px; cursor: pointer; overflow: hidden; }
.k-tag:hover { background: #fafbff; }
.k-tag.wochenende { background: #fbfbfc; }
.k-tag.fremd { background: #f6f7f9; }
.k-tag.fremd .k-nr { color: #b5b9c6; }
.k-tag.heute .k-nr { background: var(--blau); color: #fff; border-radius: 10px; display: inline-block; padding: 0 7px; }
.k-nr { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.k-eintrag { font-size: 12px; line-height: 1.3; padding: 2px 5px; border-radius: 4px; margin-bottom: 2px; background: var(--blau-hell); color: #1d2a8a;
  border-left: 3px solid var(--blau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.k-eintrag .pnr { font-size: 10.5px; padding: 0 3px; margin-right: 4px; }
.k-eintrag.art-montage { background: #eefaf1; color: #14632e; border-left-color: #16803c; }
.k-eintrag.art-aufmaß { background: #f5f0ff; color: #4b2a8a; border-left-color: #7c4dcc; }
.k-eintrag.art-lieferung { background: #eefaff; color: #155e75; border-left-color: #1b8db0; }
.k-eintrag.art-abnahme { background: #fff8e6; color: #6b4a00; border-left-color: #d49a00; }
.k-eintrag.art-abwesenheit { background: #f3f4f8; color: var(--grau); border-left-color: #9aa0b2; }
.k-eintrag.frist { background: #fff1f1; color: #8c1d1d; border-left-color: var(--rot); font-style: italic; }
.k-eintrag.frist.art-skonto { background: #fff6ec; color: #8a4500; border-left-color: #e08a1e; }
.k-listentag { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--linie); border-radius: 8px; margin-bottom: 6px; }
.k-listentag.heute { border-color: var(--blau); }
.k-listentag .k-eintrag, .p-termin .k-eintrag { white-space: normal; display: block; }
.k-datum { font-weight: 600; font-size: 13px; }
.p-termine { display: flex; flex-direction: column; gap: 4px; }
.p-termin { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: start; }
dialog.termin-dialog { width: min(560px, 94vw); }
.k-feiertag { font-size: 11px; color: var(--rot); font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-eintrag.abwesend { background: #f3f4f8; color: #4a5064; border-left-color: #9aa0b2; }
.seitenreiter a.knopf { border: none; border-radius: 0; padding: 6px 12px; text-decoration: none; }
.seitenreiter a.knopf.aktiv { background: var(--blau-hell); color: var(--blau); font-weight: 600; }

/* Urlaubsplaner */
.u-rahmen { overflow-x: auto; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 16px; }
table.u-plan { border-collapse: collapse; width: 100%; font-size: 12px; }
.u-plan th, .u-plan td { border: 1px solid #eceef3; text-align: center; padding: 0; min-width: 24px; height: 30px; }
.u-plan th { font-weight: 600; color: var(--grau); padding: 3px 0; line-height: 1.2; }
.u-plan .u-name { text-align: left; padding: 3px 8px; min-width: 150px; white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; font-size: 13px; }
.u-plan .u-name .unter { font-size: 11px; color: var(--grau); }
.u-plan td[data-ma] { cursor: pointer; }
.u-plan td[data-ma]:hover { background: var(--blau-hell); }
.u-plan .we { background: #f3f4f8; }
.u-plan .fei { background: #fde8e8; }
.u-plan th.heute { background: var(--blau); color: #fff; }
.u-plan td[data-eintrag] { cursor: pointer; font-weight: 700; }
.u-plan .u-urlaub { background: #b9e6c7; color: #14632e; }
.u-plan .u-sonderurlaub { background: #ddd0f5; color: #4b2a8a; }
.u-plan .u-freizeitausgleich { background: #fde1bf; color: #8a4500; }
.u-plan .u-berufsschule { background: #cde8f3; color: #155e75; }
.u-plan .u-krank { background: #f6c9c9; color: #8c1d1d; }
.u-plan .u-sonstiges { background: #e3e5ec; color: #4a5064; }
.u-plan td.beantragt { opacity: .55; background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.6) 4px 7px); }
.u-plan tr.u-summe td { color: var(--grau); font-weight: 600; background: #fafbfd; }
.u-konto input.u-uebertrag { width: 70px; padding: 3px 6px; }
.u-info { margin: 0; color: var(--blau); font-size: 13px; }
ul.abo-links { list-style: none; padding: 0; margin: 10px 0; }
ul.abo-links input { font-family: Consolas, monospace; font-size: 12px; margin-bottom: 4px; }

/* Nachträge & Schreiben: Textfeld mit Formatierung und Vorschau */
.tf-leiste { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.tf-leiste button { padding: 4px 9px; font-size: 13px; }
.tf-leiste select { width: auto; padding: 4px 6px; font-size: 13px; }
.tf-leiste .klein { margin-left: 8px; }
.tf-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tf-felder.ohne-vorschau { grid-template-columns: 1fr; }
.tf-eingabe { min-height: 120px; resize: vertical; line-height: 1.45; }
.tf-vorschau { border: 1px dashed var(--linie); border-radius: 6px; padding: 8px 12px; background: #fff; font-family: 'Times New Roman', Times, serif; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.tf-leer { height: .7em; }
.tf-li { display: flex; gap: 8px; }
.tf-li > span { min-width: 14px; }
.tf-titel { font-weight: 700; margin-top: 4px; }

.m-bilder, .bilder.m-bilder { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; }
.m-bilder figure { margin: 0; padding: 4px; border: 1px solid var(--linie); border-radius: 5px; background: #fff; }
.m-bilder img { display: block; height: 80px; max-width: 220px; object-fit: contain; }
.m-bilder figcaption { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--grau); }
.m-bilder figcaption input { width: 52px; padding: 2px 5px; text-align: right; }
.m-bilder figcaption button { padding: 1px 6px; border-color: transparent; color: var(--grau); }
.m-bilder .bild-plus { padding: 3px 9px; font-size: 12px; color: var(--grau); border-style: dashed; cursor: pointer; }

/* Kalkulationstabellen */
.m-tabelle { overflow-x: auto; }
table.m-kalk, table.m-bt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.m-kalk th, .m-bt th { font-size: 12px; color: var(--grau); font-weight: 600; text-align: left; padding: 4px 3px 6px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.m-kalk td, .m-bt td { padding: 3px; border-bottom: 1px solid #f0f1f5; vertical-align: middle; }
.m-kalk th.r, .m-kalk td.r, .m-bt th.r, .m-bt td.r { text-align: right; }
.m-kalk input, .m-kalk select, .m-bt input { padding: 5px 6px; font-size: 13px; }
.m-kalk input.r, .m-bt input.r { text-align: right; }
.m-kalk input.r { width: 62px; padding-left: 4px; padding-right: 4px; }
.m-kalk [data-z="einheit"] { width: 58px; }
.m-kalk select { width: 100px; }
.m-kalk input.bez { min-width: 150px; }
.m-kalk td.nr { color: var(--grau); font-size: 12px; text-align: right; }
.m-kalk td.c { text-align: center; }
.m-kalk td.c input { width: auto; }
.m-kalk .z-ep, .m-kalk .z-gp, .m-kalk .z-loehne, .m-bt .bt-calc { white-space: nowrap; padding-right: 6px; }
.m-kalk .z-gp { font-weight: 600; }
.m-kalk tr.minder td { background: #fff5f5; }
.m-kalk tr.minder .z-ep, .m-kalk tr.minder .z-gp { color: var(--rot); }
.m-kalk input:disabled { background: #f6f7fb; color: var(--grau); }
.m-bt td:first-child { width: 50%; }
.m-bt input.r { width: 96px; }
.m-bt .bt-calc { min-width: 70px; }
.m-bt .bt-calc { color: #3a4053; }
.m-bt-plus { margin-top: 8px; }
.m-kalk .akt, .m-bt .akt { display: flex; gap: 2px; justify-content: flex-end; }
.m-kalk .akt button, .m-bt .akt button { padding: 3px 4px; font-size: 13px; border-color: transparent; background: transparent; color: var(--grau); }
.m-kalk .akt button:hover, .m-bt .akt button:hover { background: var(--hinter); color: var(--text); }
.m-saetze { margin-bottom: 6px; }

/* Schreiben: Eingabe links, Briefvorschau rechts */
.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.brief-rechts { position: sticky; top: 64px; }
.brief-rechts .karte { max-height: calc(100vh - 90px); overflow: auto; }
.brief-blatt { background: #fff; border: 1px solid var(--linie); box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 36px 40px 40px 48px;
  font-family: 'Times New Roman', Times, serif; font-size: 15px; line-height: 1.4; min-height: 600px; overflow-wrap: anywhere; }
.bv-anschrift { min-height: 90px; margin-bottom: 18px; }
.bv-datum { text-align: right; margin-bottom: 18px; }
.bv-betreff { font-weight: 700; font-size: 16.5px; margin-bottom: 6px; }
.bv-zeile { margin-bottom: 4px; }
.bv-text { margin-top: 14px; }
.m-vorlage { display: flex; gap: 8px; flex-wrap: wrap; }
.m-vorlage select { flex: 1; min-width: 220px; }

/* Einstellungen: Schreib-Vorlagen */
table.vorlagen { width: 100%; border-collapse: collapse; margin-top: 12px; }
.vorlagen th { text-align: left; font-size: 12px; color: var(--grau); font-weight: 600; padding: 4px 6px; }
.vorlagen td { padding: 4px 6px; vertical-align: top; border-top: 1px solid #f0f1f5; }
.vorlagen textarea { min-width: 360px; font-size: 13px; }

/* Zugriffsrechte: nur lesen (Stufe 1) – Speichern, Neu und Löschen ausgeblendet, Eingaben gesperrt */
main.nur-lesen .primaer, main.nur-lesen .gefahr, main.nur-lesen .speicherleiste, main.nur-lesen [data-speichern] { display: none !important; }
.nur-lesen-hinweis { margin-bottom: 12px; }
.nur-lesen-block input:disabled, .nur-lesen-block select:disabled, .nur-lesen-block textarea:disabled { color: var(--text); background: #f6f7f9; }

/* Personen & Rechte */
.pe-liste td { vertical-align: top; }
.gr-matrix { border-collapse: collapse; width: 100%; font-size: 13px; }
.gr-matrix th { text-align: left; font-size: 12px; color: var(--grau); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.gr-matrix td { padding: 4px 6px; border-top: 1px solid #f0f1f5; }
.gr-matrix select { width: auto; min-width: 104px; padding: 3px 6px; font-size: 13px; }
.gr-bereich { white-space: nowrap; font-weight: 500; }
select.stufe-0 { color: var(--grau); background: #f6f7f9; }
select.stufe-1 { background: #fff8e6; color: #6b4a00; }
select.stufe-2 { background: #eefaf1; color: #14632e; }
select.stufe-3 { background: #e7f4ff; color: #155e75; }
dialog.p-dialog { width: min(860px, 96vw); max-height: 94vh; }
.pe-haken { display: flex; flex-direction: column; gap: 4px; grid-column: span 3; justify-content: center; }
.pe-zugang { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; padding: 8px 10px; background: var(--hinter); border-radius: 6px; font-size: 13px; }
.pe-zugang button { padding: 3px 10px; font-size: 13px; }
.pe-projekte { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: flex-start; }
.pe-projektliste { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 12px; max-height: 200px; overflow: auto;
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: 6px; font-size: 13px; }
.pe-projektliste[hidden] { display: none; }
.pe-rechte { width: 100%; border-collapse: collapse; font-size: 13px; }
.pe-rechte th { text-align: left; font-size: 12px; color: var(--grau); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--linie); }
.pe-rechte td { padding: 3px 6px; border-top: 1px solid #f0f1f5; }
.pe-rechte select { width: auto; min-width: 150px; padding: 3px 6px; font-size: 13px; }

.warnband { display: flex; gap: 12px; align-items: center; justify-content: space-between; max-width: 1280px; margin: 12px auto 0; padding: 10px 14px;
  background: #fff6e8; border: 1px solid #f1c98c; border-radius: var(--radius); color: #8a4b00; font-size: 14px; }
.warnband button { border-color: transparent; background: transparent; color: #8a4b00; }

/* Baustelle: Übersicht, Unterlagen, Mängel */
.b-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.b-kachel { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; color: var(--text); text-decoration: none; }
.b-kachel:hover { border-color: var(--blau); box-shadow: 0 0 0 2px var(--blau-hell); }
.b-kachel.weitere { background: #fafbfd; }
.b-kachel-kopf { display: flex; align-items: baseline; gap: 6px; }
.b-zahlen { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.mstatus { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; white-space: nowrap; border: 1px solid; vertical-align: middle; }
.mstatus.rot { color: var(--rot); border-color: #f0b4b4; background: #fff1f1; }
.mstatus.rot.voll { color: #fff; background: var(--rot); border-color: var(--rot); font-weight: 600; }
.mstatus.orange { color: #8a4b00; border-color: #f1c98c; background: #fff6e8; }
.mstatus.blau { color: var(--blau); border-color: #b9bff3; background: var(--blau-hell); }
.mstatus.gruen { color: #14632e; border-color: #a6d9b5; background: #eefaf1; }
.b-reiter { margin-bottom: 14px; }
.b-reiter button { padding: 8px 16px; }
.b-werkzeuge { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.b-werkzeuge select { width: auto; max-width: 220px; }
.b-werkzeuge input[type=search] { width: 200px; }
.b-werkzeuge .knopf.primaer, .b-werkzeuge #m-neu { margin-left: auto; }
.b-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.b-chips button { padding: 4px 10px; border-radius: 14px; font-size: 13px; }
.b-chips button.aktiv { background: var(--blau-hell); border-color: #b9bff3; color: var(--blau); font-weight: 600; }
.b-typ { display: inline-block; min-width: 34px; text-align: center; font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: #eef0f6; color: var(--grau); }
.b-unterlagen tr.ueberholt td { color: var(--grau); }
.b-unterlagen tr.ueberholt b { font-weight: 500; text-decoration: line-through; }
.b-aktionen { white-space: nowrap; }
.b-aktionen .knopf, .b-aktionen button { padding: 3px 8px; margin-left: 4px; text-decoration: none; }
.zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-baustelle { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.m-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.m-karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.m-karte:hover { border-color: var(--blau); }
.m-kopf { display: flex; gap: 6px; align-items: baseline; }
.m-kopf .m-titel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.m-fotos { display: flex; gap: 6px; overflow: hidden; margin-top: 4px; }
.m-fotos img { height: 64px; width: auto; max-width: 110px; object-fit: cover; border-radius: 4px; border: 1px solid var(--linie); }
.ueberfaellig { color: var(--rot); font-weight: 600; }
dialog.m-dialog { width: min(640px, 96vw); max-height: 94vh; }
.m-fotos-edit { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.m-fotos-edit figure { margin: 0; padding: 3px; border: 1px solid var(--linie); border-radius: 5px; background: #fff; }
.m-fotos-edit img { display: block; height: 90px; width: auto; max-width: 160px; object-fit: cover; }
.m-fotos-edit figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--grau); min-height: 20px; }
.m-fotos-edit figcaption button { padding: 0 6px; border-color: transparent; color: var(--grau); }
.m-fotos-edit figcaption button:hover { color: var(--rot); }
.foto-knopf { display: inline-flex; align-items: center; gap: 6px; }
.foto-knopf.arbeitet { opacity: .6; pointer-events: none; }
.foto-knopf.arbeitet::after { content: '– wird übertragen …'; color: var(--grau); }
.m-dialog details { margin-top: 10px; }
.m-dialog summary { cursor: pointer; color: var(--grau); font-size: 13px; }

/* Arbeitszeit */
.mstatus.grau { color: var(--grau); border-color: var(--linie); background: #f6f7fa; }
.zt-reiter { margin-bottom: 14px; }
.zt-uhr .raster { margin-bottom: 12px; }
.zt-haken { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.zt-haken input, .zt-personen input, #zp-offen input, #zp-alle { width: auto; flex: none; margin: 0; }
.zt-kolonne { grid-column: 1 / -1; }
.zt-kolonne summary { cursor: pointer; color: var(--blau); font-size: 14px; }
.zt-personen { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 2px; }
.zt-personen label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.zt-uhr-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zt-gross { font-size: 16px; padding: 10px 22px; }
.zt-leise { border-color: transparent; background: transparent; color: var(--grau); font-size: 13px; }
.zt-uhr.laeuft { border-color: #a6d9b5; background: #f4fbf6; }
.zt-uhr.pausiert { border-color: #f1c98c; background: #fffaf0; }
.zt-uhr-zeile { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-bottom: 12px; }
.zt-uhr-anzeige { display: flex; gap: 12px; align-items: center; }
.zt-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 4px #d5f0de; animation: zt-puls 2s infinite; }
.zt-uhr.pausiert .zt-punkt { background: #e07b00; box-shadow: 0 0 0 4px #fde6c4; animation: none; }
@keyframes zt-puls { 50% { box-shadow: 0 0 0 8px rgba(213, 240, 222, 0); } }
.zt-laufzeit { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.zt-uhr-info { flex: 1; min-width: 200px; }
.zt-wochenkopf { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.zt-wochenkopf input[type=month] { width: auto; }
.zt-blaettern { display: flex; gap: 6px; align-items: center; }
.zt-blaettern > button { min-width: 36px; padding: 5px 10px; }
.zt-personwahl { width: auto; max-width: 100%; }
.zt-summe { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zt-tage { display: flex; flex-direction: column; gap: 8px; }
.zt-tag { border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px 12px; background: #fff; }
.zt-tag.frei { background: #fafafc; }
.zt-tag.heute { border-color: #b9bff3; box-shadow: inset 3px 0 0 var(--blau); }
.zt-tagkopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 30px; }
.zt-tagsumme { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.zt-plus { min-width: 34px; padding: 2px 8px; font-size: 18px; line-height: 1; color: var(--blau); }
.zt-eintrag { display: grid; grid-template-columns: 110px 1fr auto; gap: 2px 12px; padding: 6px 4px; border-top: 1px dashed var(--linie); align-items: start; border-radius: 4px; }
.zt-eintrag.aenderbar { cursor: pointer; }
.zt-eintrag.aenderbar:hover { background: var(--blau-hell); }
.zt-zeit, .zt-dauer { font-variant-numeric: tabular-nums; }
.zt-zeit small { display: block; color: var(--grau); }
.zt-was .klein { display: block; }
.zt-dauer { font-weight: 600; }
.zt-hinweis { margin-top: 4px; color: #8a4b00; font-size: 13px; }
.zt-wochenfuss { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }
.zt-verlauf { margin-top: 10px; font-size: 13px; color: var(--grau); }
.zt-verlauf summary { cursor: pointer; }
.zt-monat tr.zt-frei td { color: var(--grau); }
.zt-monat tr.zt-folge td { border-top-color: transparent; }
.zt-balken { display: flex; flex-direction: column; gap: 6px; }
.zt-balken-zeile { display: grid; grid-template-columns: minmax(120px, 40%) 1fr 60px; gap: 4px 10px; align-items: center; font-size: 14px; }
.zt-balken-zeile > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-balken-wert { background: #f0f1f5; border-radius: 4px; height: 10px; }
.zt-balken-wert i { display: block; height: 100%; border-radius: 4px; background: var(--blau); }
.zt-balken-zeile b { text-align: right; font-variant-numeric: tabular-nums; }
dialog.zt-dialog { width: min(560px, 96vw); max-height: 94vh; }
.zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.zt-unterschrift { position: relative; border: 1px dashed #9aa0b4; border-radius: 8px; background: #fff; margin-top: 8px; }
.zt-unterschrift canvas { display: block; width: 100%; height: auto; aspect-ratio: 3; touch-action: none; cursor: crosshair; position: relative; z-index: 1; }
.zt-unterschrift::after { content: 'Unterschrift'; position: absolute; left: 14px; right: 14px; bottom: 22%; border-top: 1px solid #c8ccd8; font-size: 11px; color: var(--grau); padding-top: 2px; pointer-events: none; }
.zt-unterschrift button { position: absolute; top: 4px; right: 4px; z-index: 2; }
tr.klickbar { cursor: pointer; }

/* Planansicht */
main.plan-ansicht { max-width: none; padding-bottom: 12px; }
.plan-leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.plan-leiste > a { color: var(--text); text-decoration: none; }
.plan-titel { flex: 1; min-width: 180px; }
.plan-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.plan-knoepfe button, .plan-knoepfe .knopf { min-width: 40px; padding: 7px 11px; }
#pl-seiten { display: inline-flex; gap: 4px; align-items: center; margin-right: 6px; }
#pl-seiten[hidden] { display: none; }
#pl-setzen.aktiv { background: var(--rot); border-color: var(--rot); }
.plan-rahmen { position: relative; overflow: auto; overflow-y: scroll; height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 360px; background: #d9dce4; border: 1px solid var(--linie); border-radius: var(--radius);
  touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.plan-blatt { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.plan-blatt canvas { display: block; }
.plan-blatt.setzen { cursor: crosshair; }
.plan-detail { position: absolute; z-index: 1; pointer-events: none; }
.plan-detail[hidden] { display: none; }
.plan-punkte { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pin { position: absolute; pointer-events: auto; transform: translate(-50%, -50%); min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px;
  font-size: 12px; font-weight: 700; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); line-height: 24px; }
.pin.rot { background: #d11a1a; }
.pin.orange { background: #e07b00; }
.pin.blau { background: var(--blau); }
.pin.gruen { background: #16803c; opacity: .75; }
.pin.frueher { border-style: dashed; }
.pin:hover { z-index: 3; filter: brightness(1.1); border-color: #fff; }
.plan-laden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--grau); margin: 0; padding: 20px; text-align: center; }
.plan-laden[hidden] { display: none; }

/* Tablet und kleiner: Menü hinter dem Knopf, als Liste zum Antippen */
@media (max-width: 1199px) {
  .kopf { padding: 8px 16px; }
  .menue-knopf { display: flex; }
  .kopf nav { display: none; position: absolute; top: 100%; right: 0; width: min(340px, 100vw); max-height: calc(100dvh - 64px); overflow-y: auto;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; padding: 10px; background: #fff;
    border: 1px solid var(--linie); border-top: none; border-radius: 0 0 0 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); }
  .kopf.menue-offen nav { display: flex; }
  .kopf nav a:not(.knopf) { padding: 12px 14px; font-size: 16px; }
  #nutzer { margin: 6px 0 0; padding: 12px 14px 4px; border-top: 1px solid var(--linie); white-space: normal; font-size: 14px; }
}

/* Touch-Geräte (iPad, Handy): größere Tipp-Flächen; 16 px verhindert das Hineinzoomen beim Tippen auf iOS */
@media (pointer: coarse) {
  button, .knopf { min-height: 40px; }
  input, select, textarea { font-size: 16px; }
  input:not([type=checkbox]):not([type=radio]), select { min-height: 40px; }
}

@media (max-width: 1000px) {
  .zwei, .belege { grid-template-columns: 1fr 1fr; }
  .raster { grid-template-columns: 1fr 1fr; }
  .brief, .tf-felder { grid-template-columns: 1fr; }
  .kennzahlen { grid-template-columns: repeat(3, 1fr); }
  .eingang-seite { grid-template-columns: 1fr; }
  .z-seite { grid-template-columns: 1fr; }
  .z-vorschau { position: static; max-height: none; }
  .z-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .eingang-dokument { position: static; }
  .pdf-rahmen { height: 70vh; }
  .k-tag { min-height: 80px; }
  .k-eintrag .pnr { display: none; }
  .brief-rechts { position: static; }
}

/* Handy (nach dem Tablet-Block, damit diese Werte gelten): Listen als Karten, Formulare einspaltig */
@media (max-width: 700px) {
  .kopf { padding: 6px 12px; }
  .marke img { height: 34px; }
  .kopf nav { width: 100vw; border-radius: 0; border-left: none; }
  main { padding-left: 12px; padding-right: 12px; }
  table.pos, table.lv, table.zahlungen, table.vorlagen, table.nummern { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Listen: jede Zeile eine Karte, die Spaltenüberschrift steht vor dem Wert (data-label setzt app.js) */
  table.liste { display: block; border: none; background: transparent; overflow: visible; }
  table.liste thead { display: none; }
  table.liste tbody { display: flex; flex-direction: column; gap: 8px; }
  table.liste tr { display: block; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 12px; }
  table.liste tr.gruppe { background: transparent; border: none; padding: 8px 2px 0; font-weight: 600; }
  table.liste td { display: block; padding: 3px 0 !important; border: none; text-align: right; overflow-wrap: anywhere; }
  table.liste td::after { content: ''; display: block; clear: both; }
  table.liste td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--grau); font-size: 12px; line-height: 20px; text-align: left; }
  table.liste td:first-child { text-align: left; font-size: 15px; }
  table.liste td:first-child::before { content: none; }
  table.liste td:empty { display: none; }
  table.liste td.leer { display: block; text-align: center; }
  .raster { grid-template-columns: 1fr; }
  .raster .s2, .raster .s3 { grid-column: auto; }
  .titelzeile .knoepfe { flex-wrap: wrap; }
  .start-kopf { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; }
  .start-logo { width: 190px; max-width: 60vw; }
  .start-gruss h1 { font-size: 22px; }
  .start-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .start-kachel { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 128px; min-width: 0; padding: 14px; }
  .start-text { width: 100%; }
  .start-text b { font-size: 15px; overflow-wrap: anywhere; hyphens: auto; }
  .filter > *, .b-werkzeuge > *, .titelzeile > * { max-width: 100%; }
  .filter select, .b-werkzeuge select { max-width: 100%; }
  .reiter { max-width: 100%; overflow-x: auto; }
  .start-symbol { width: 44px; height: 44px; }
  .start-demnaechst li a { grid-template-columns: 1fr; gap: 2px; }
  /* Chat: entweder die Kanalliste oder der offene Kanal, jeweils über die ganze Breite */
  main.chat-ansicht { padding: 0; }
  .chat-seite { grid-template-columns: 1fr; gap: 0; height: calc(100dvh - 47px); }
  .chat-liste, .chat-verlauf { border-radius: 0; border: none; }
  .chat-seite.mit-kanal .chat-liste, .chat-seite:not(.mit-kanal) .chat-verlauf { display: none; }
  .ch-zurueck { display: inline; }
  .cn { max-width: 86%; }
  .cn-bilder img { max-width: 200px; }
  .filter { flex-wrap: wrap; }
  .titelzeile h1 { font-size: 22px; }
  .zwei { grid-template-columns: 1fr; }
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .k-listentag, .p-termin { grid-template-columns: 1fr; gap: 2px; }
  .m-liste { grid-template-columns: 1fr; }
  .b-werkzeuge input[type=search] { width: 100%; }
  .plan-rahmen { height: calc(100dvh - 190px); }
  .plan-knoepfe { width: 100%; }
  /* Arbeitszeit: Einträge zweizeilig, große Knöpfe für die Stempeluhr */
  .zt-eintrag { grid-template-columns: 1fr auto; }
  .zt-eintrag .zt-was { grid-column: 1 / -1; grid-row: 2; }
  .zt-zeit small { display: inline; margin-left: 6px; }
  .zt-uhr-knoepfe > button { flex: 1 1 auto; }
  .zt-laufzeit { font-size: 30px; }
  .zt-summe { margin-left: 0; }
  .zt-balken-zeile { grid-template-columns: 1fr 56px; }
  .zt-balken-wert { grid-column: 1 / -1; grid-row: 2; }
}