/* Blaumann Prototyp – Büro (Web): Plantafel, Anträge, Zeiten, Monatsabschluss, Einstellungen (kompakt, E48) */

.b-app { display: flex; height: 100%; background: var(--flaeche); position: relative; font-size: 14px; }
.b-seite { width: 216px; flex: none; background: var(--blau-900); color: #C9D3E3; display: flex; flex-direction: column; padding: 14px 10px 12px; }
.b-seite__marke { display: flex; gap: 10px; align-items: center; padding: 2px 8px 12px; }
.b-seite__marke b { display: block; color: #fff; font-family: var(--schrift-schmal); font-size: 19px; letter-spacing: .05em; text-transform: uppercase; }
.b-seite__marke small { font-size: 12px; opacity: .75; }
.b-seite__nav { display: flex; flex-direction: column; gap: 2px; }
.b-nav__gruppe { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; opacity: .55; padding: 12px 10px 4px; }
.b-nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #C9D3E3; font-weight: 600; font-size: 14px; text-align: left; }
.b-nav:hover { background: rgba(255,255,255,.07); color: #fff; }
.b-nav.aktiv { background: rgba(255,255,255,.13); color: #fff; box-shadow: inset 3px 0 0 var(--gelb); }
.b-nav em { margin-left: auto; font-style: normal; background: var(--gelb); color: var(--text); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.b-seite__nutzer { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px 8px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.b-seite__nutzer b { display: block; color: #fff; font-size: 13px; }
.b-seite__nutzer small { font-size: 12px; opacity: .7; }

.b-haupt { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; }
.b-kopf { flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--linie); }
.b-kopf__titel h1 { font-family: var(--schrift-schmal); font-size: 24px; margin: 0; }
.b-kopf__titel small { font-size: 13px; color: var(--text-3); }
.b-kopf__abstand { flex: 1; }
.datumnav { display: inline-flex; align-items: center; gap: 4px; }
.datumnav__text { font-weight: 700; padding: 0 6px; }
.b-inhalt { padding: 16px 20px 28px; }

/* ---------- Plantafel ---------- */
.b-tafel-layout { flex: 1; display: flex; min-height: 0; }
.b-offen { width: 264px; flex: none; background: #fff; border-right: 1px solid var(--linie); display: flex; flex-direction: column; min-height: 0; }
.b-offen__kopf { padding: 14px 14px 6px; }
.b-offen__kopf h2 { font-size: 15px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.b-offen__kopf h2 span { font-size: 12px; background: var(--gelb); color: var(--text); padding: 1px 8px; border-radius: 999px; }
.b-offen__tipp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-3); padding: 0 14px 8px; margin: 0; }
.b-offen__liste { flex: 1; overflow-y: auto; padding: 4px 12px 14px; }
.b-karte { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: box-shadow .15s, border-color .15s; }
.b-karte:hover { border-color: #AFBCCE; box-shadow: 0 4px 14px rgba(20,40,71,.08); }
.b-karte.wird-gezogen { opacity: .4; }
.b-karte__kopf { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.b-karte__kopf .komp { margin-left: auto; }
.b-karte__titel { display: block; width: 100%; text-align: left; font-weight: 700; font-size: 14.5px; color: var(--text); margin: 6px 0 2px; line-height: 1.25; }
.b-karte__titel:hover { color: var(--blau); text-decoration: underline; }
.b-karte__ort { font-size: 13px; color: var(--text-2); margin: 0 0 4px; }
.b-karte__meta { display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--text-3); margin: 2px 0; }
.b-karte__warte { display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--warn); margin: 4px 0 0; }
.b-karte__fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.b-karte__griff { color: #A9B3C1; display: inline-flex; }
.ziehen-geist { position: fixed; top: 0; left: 0; z-index: 4000; pointer-events: none; background: var(--blau); color: #fff; padding: 8px 12px; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 13px; max-width: 280px; }
.ziehen-geist b { display: block; }
body.zieht, body.zieht * { cursor: grabbing !important; user-select: none !important; }

.b-tafel { flex: 1; min-width: 0; overflow: auto; padding: 14px 16px 20px; }
.pt { background: #fff; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; min-width: 900px; }
.pt-kopfzeile { display: flex; border-bottom: 1px solid var(--linie); background: #FAFBFC; }
.pt-ecke { width: 200px; flex: none; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--text-3); border-right: 1px solid var(--linie); }
.pt-skala { flex: 1; position: relative; height: 32px; margin-right: 16px; }
.pt-skala span { position: absolute; top: 9px; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pt-skala span:first-child { transform: translateX(2px); }
.pt-skala span:last-child { transform: translateX(-100%); }
.pt-zeile { display: flex; border-bottom: 1px solid var(--linie); min-height: 104px; }
.pt-truppkopf { width: 200px; flex: none; padding: 10px 12px; border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 6px; }
.pt-truppkopf__name { display: flex; gap: 8px; align-items: center; }
.pt-truppkopf__name b { font-size: 15px; }
.pt-truppkopf__name small { flex: 1; color: var(--text-3); font-size: 12px; }
.pt-farbe { width: 10px; height: 22px; border-radius: 3px; flex: none; }
.pt-besetzung { display: flex; flex-wrap: wrap; gap: 4px; }
.pt-person { font-size: 12px; background: #EEF1F5; border-radius: 6px; padding: 2px 6px; white-space: nowrap; cursor: default; }
.pt-person--weg { background: repeating-linear-gradient(135deg, #EEF1F5 0 4px, #E2E6EC 4px 8px); color: var(--text-3); text-decoration: line-through; }
.pt-person--weg em { font-style: normal; font-size: 10px; font-weight: 700; text-decoration: none; display: inline-block; }
.pt-warnung { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--warn); background: var(--warn-100); border-radius: 8px; padding: 5px 8px; text-align: left; line-height: 1.3; font-weight: 600; }
.pt-warnung .ic { margin-top: 1px; }
.pt-warnung--still { font-weight: 500; }
.pt-offline { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--warn); font-weight: 600; }
.pt-bahn { flex: 1; position: relative; margin-right: 16px;
  background: repeating-linear-gradient(to right, transparent 0, transparent calc(10% - 1px), #EDF0F4 calc(10% - 1px), #EDF0F4 10%); }
.pt-bahn__grau { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-3); background: repeating-linear-gradient(135deg, rgba(220,225,232,.5) 0 6px, transparent 6px 12px); }
.pt-block { position: absolute; top: 14px; bottom: 14px; border-radius: 8px; padding: 6px 8px; overflow: hidden; font-size: 12px; cursor: pointer; border: 1px solid; display: flex; flex-direction: column; gap: 1px; z-index: 1; touch-action: none; transition: box-shadow .15s; }
.pt-block:hover { z-index: 3; box-shadow: 0 6px 16px rgba(20,40,71,.18); }
.pt-block b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; padding-right: 16px; }
.pt-block span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.pt-block__icons { position: absolute; top: 5px; right: 6px; display: flex; gap: 2px; color: var(--text-3); }
.pt-block--geplant { background: var(--blau-100); border-color: #BCCAE0; border-left: 4px solid var(--blau); }
.pt-block--in_arbeit, .pt-block--beendet { background: var(--gelb-100); border-color: #EFD47A; border-left: 4px solid var(--gelb); }
.pt-block--erledigt { background: var(--ok-100); border-color: #B5DAC4; border-left: 4px solid var(--ok); }
.pt-block--erledigt .pt-block__icons { color: var(--ok); }
.pt-block--folgetermin, .pt-block--wartet_material { background: #FFF1E8; border-color: #F3C7AE; border-left: 4px solid var(--warn); }
.pt-block--warn { box-shadow: inset 0 0 0 2px var(--warn); }
.pt-block--warn .pt-block__icons { color: var(--warn); }
.pt-block--neu { animation: neu-blinken 1.4s ease-out 2; }
@keyframes neu-blinken { 0% { box-shadow: 0 0 0 0 rgba(242,183,5,.9); } 100% { box-shadow: 0 0 0 12px rgba(242,183,5,0); } }
.wird-gezogen.pt-block { opacity: .35; }
.pt-fahrt { position: absolute; top: 50%; height: 16px; transform: translateY(-50%); border-radius: 4px; background: repeating-linear-gradient(45deg, #D3DAE3 0 4px, transparent 4px 8px); display: flex; align-items: center; justify-content: center; overflow: visible; }
.pt-fahrt span { font-size: 10.5px; font-weight: 700; color: var(--text-3); background: rgba(255,255,255,.92); padding: 0 3px; border-radius: 3px; white-space: nowrap; }
.pt-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--warn); z-index: 4; pointer-events: none; }
.pt-jetzt span { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 700; color: var(--warn); background: #fff; padding: 0 3px; border-radius: 3px; }
.pt-vorschau { position: absolute; top: 8px; bottom: 8px; border: 2px dashed var(--blau); background: rgba(31,58,107,.08); border-radius: 8px; z-index: 5; pointer-events: none; padding: 4px 6px; font-size: 11.5px; color: var(--blau); overflow: hidden; }
.pt-vorschau b { display: block; white-space: nowrap; }
.pt-vorschau span { white-space: nowrap; }
.pt-vorschau--warn { border-color: var(--warn); background: rgba(194,65,12,.08); color: var(--warn); }
.pt-abwesend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: #FAFBFC; }
.pt-abwesend__titel { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--text-3); margin-right: 4px; }
.pt-abw { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: 3px 4px 3px 3px; }
.pt-abw .art-chip { font-size: 12px; padding: 2px 8px 2px 6px; }
.pt-legende { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 12px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--linie); align-items: center; }
.pt-legende span { display: inline-flex; align-items: center; gap: 5px; }
.lg { display: inline-block; width: 16px; height: 11px; border-radius: 3px; }
.lg--geplant { background: var(--blau-100); border-left: 3px solid var(--blau); }
.lg--in_arbeit { background: var(--gelb-100); border-left: 3px solid var(--gelb); }
.lg--erledigt { background: var(--ok-100); border-left: 3px solid var(--ok); }
.lg--folgetermin { background: #FFF1E8; border-left: 3px solid var(--warn); }
.lg--fahrt { background: repeating-linear-gradient(45deg, #C9D1DC 0 3px, transparent 3px 6px); }
.lg--warn { border: 2px solid var(--warn); }
.pt-frei { text-align: center; color: var(--text-3); padding: 80px 0; }

/* Karte */
.karte-wrap { display: grid; grid-template-columns: 1fr 230px; gap: 14px; align-items: start; }
.karte { width: 100%; height: auto; display: block; background: #fff; border-radius: 12px; border: 1px solid var(--linie); }
.karte-punkt { cursor: pointer; }
.karte-punkt:hover circle { stroke-width: 5; }
.karte-legende span { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; }
.karte-legende i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.karte-legende i.offen { background: #fff; border: 3px solid var(--gelb); }
.karte-legende i.werkhof { border-radius: 3px; background: var(--blau); }
.karte-legende p { font-size: 12.5px; color: var(--text-2); background: var(--blau-50); border-radius: 10px; padding: 10px; margin-top: 14px; line-height: 1.45; }

/* Kalender (Woche) */
.b-woche { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; }
.b-woche__tag { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 8px; min-height: 440px; }
.b-woche__tag.heute { border-color: var(--gelb); box-shadow: 0 0 0 2px rgba(242,183,5,.3); }
.b-woche__kopf { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 8px; border-bottom: 1px solid var(--linie-2); }
.b-woche__kopf span { color: var(--text-3); font-size: 12.5px; }
.b-woche__abw { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.b-woche__abw span { font-size: 11.5px; background: #F0F2F5; border-radius: 4px; padding: 1px 5px; }
.b-woche__abw em { font-style: normal; font-weight: 700; }
.b-woche__einsatz { width: 100%; display: block; text-align: left; border-left: 4px solid var(--trupp); background: #F6F8FA; border-radius: 6px; padding: 6px 8px; margin-top: 6px; font-size: 12px; }
.b-woche__einsatz:hover { background: var(--blau-50); }
.b-woche__einsatz b { display: block; font-variant-numeric: tabular-nums; }
.b-woche__einsatz span { color: var(--text-2); }
.b-woche__einsatz--erledigt { opacity: .6; }

/* ---------- Seitenfenster ---------- */
.b-drawer-ov { position: absolute; inset: 0; background: rgba(12,22,40,.22); z-index: 30; }
.b-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 470px; max-width: 94%; background: #fff; z-index: 31; box-shadow: -14px 0 34px rgba(0,0,0,.14); overflow-y: auto; display: flex; flex-direction: column; animation: rein .2s ease-out; }
@keyframes rein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.b-drawer__kopf { position: sticky; top: 0; z-index: 2; background: #fff; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 12px 18px; border-bottom: 1px solid var(--linie); }
.b-drawer__kopf h2 { margin: 0; font-family: var(--schrift-schmal); font-size: 22px; }
.b-drawer__kopf small { display: flex; gap: 6px; align-items: center; color: var(--text-3); font-size: 13px; margin-top: 3px; }
.b-drawer__inhalt { padding: 12px 18px 24px; }
.b-drawer__aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie-2); }
.b-abschnitt { margin: 14px 0; }
.b-abschnitt h3 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.b-abschnitt p { margin: 6px 0; }
.b-gross { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.b-dl { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; font-size: 13.5px; margin: 10px 0 0; }
.b-dl dt { color: var(--text-3); }
.b-dl dd { margin: 0; }
.b-planung { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: var(--flaeche); border-radius: 10px; padding: 12px; }
.b-planung small { display: block; color: var(--text-3); font-size: 11.5px; }
.b-planung b { font-size: 14px; }
.b-planung .voll { grid-column: 1 / -1; font-size: 13px; }
.b-tabletdaten { background: #F5FAF7; border: 1px solid #D1E7DA; border-radius: 10px; padding: 12px; }
.b-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.b-fotos figure { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 10 / 7; }
.b-fotos svg, .b-fotos img { width: 100%; height: 100%; display: block; object-fit: cover; }
.b-unterschrift img { max-width: 260px; width: 100%; border: 1px solid var(--linie); border-radius: 8px; background: #fff; display: block; }
.b-unterschrift small { color: var(--text-3); }
.b-einsatzliste { list-style: none; margin: 0; padding: 0; }
.b-einsatzliste button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--linie-2); text-align: left; font-size: 13px; }
.b-einsatzliste button:hover { background: var(--blau-50); }
.b-einsatzliste li.aktiv button { background: var(--blau-50); }
.b-einsatzliste b { font-variant-numeric: tabular-nums; }
.b-einsatzliste .chip { margin-left: auto; }
.b-historie { list-style: none; margin: 0; padding: 0; }
.b-historie li { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--linie-2); }
.b-historie span { color: var(--text-3); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* ---------- Modale Fenster ---------- */
.b-modal { position: absolute; inset: 0; z-index: 60; background: rgba(12,22,40,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.b-modal__karte { background: #fff; border-radius: 16px; width: 660px; max-width: 100%; max-height: 100%; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.b-modal__karte--breit { width: 1060px; }
.b-modal__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--linie); }
.b-modal__kopf h2 { display: flex; gap: 8px; align-items: center; margin: 0; font-family: var(--schrift-schmal); font-size: 24px; }
.b-modal__kopf h2 .ic { color: var(--blau); }
.b-modal__kopf p { margin: 4px 0 0; color: var(--text-3); }
.b-modal__inhalt { padding: 16px 20px; }
.b-modal__fussnote { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--text-3); margin: 12px 0 0; }
.b-modal__fuss { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--linie); position: sticky; bottom: 0; background: #fff; }
.b-modal__inhalt .b-modal__fuss { padding: 12px 0 0; justify-content: flex-end; position: static; }
.b-modal__fehler { display: flex; gap: 8px; align-items: center; background: var(--warn-100); color: var(--warn); padding: 10px 20px; font-size: 13.5px; font-weight: 600; }
.vorschlag { border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.vorschlag--erster { border: 2px solid var(--gelb); background: #FFFCF0; }
.vorschlag__kopf { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.vorschlag__kopf b { font-size: 16px; }
.vorschlag__nr { width: 26px; height: 26px; border-radius: 50%; background: var(--blau); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.vorschlag ul { list-style: none; margin: 6px 0 10px; padding: 0 0 0 36px; }
.vorschlag li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); padding: 2px 0; }
.vorschlag li .ic { color: var(--ok); margin-top: 2px; }
.vorschlag .btn { margin-left: 36px; }

/* Auftrag anlegen */
.b-neu { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.b-neu__spalte h3 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 6px 0 10px; display: flex; gap: 6px; align-items: center; }
.b-neu__spalte h3:not(:first-child) { margin-top: 18px; }
.b-treffer { list-style: none; margin: 6px 0; padding: 0; border: 1px solid var(--linie-2); border-radius: 10px; overflow: hidden; }
.b-treffer li.gedimmt { padding: 8px 10px; font-size: 13px; }
.b-treffer button { width: 100%; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie-2); }
.b-treffer li:last-child button { border-bottom: 0; }
.b-treffer button:hover { background: var(--blau-50); }
.b-treffer b { display: block; }
.b-treffer small { color: var(--text-3); font-size: 12px; }
.b-gewaehlt { display: flex; justify-content: space-between; align-items: center; background: var(--blau-50); border: 1px solid #C9D6EA; border-radius: 10px; padding: 10px 12px; }
.b-gewaehlt b { display: block; }
.b-gewaehlt small { color: var(--text-3); }
.b-objekte { display: grid; gap: 6px; }
.b-objekt { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border: 1.5px solid var(--linie); border-radius: 10px; }
.b-objekt b { display: block; }
.b-objekt small { color: var(--text-3); }
.b-objekt.aktiv { border-color: var(--blau); background: var(--blau-50); }
.b-feld { display: block; margin: 10px 0; }
.b-feld > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; }
.b-feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.b-kategorien { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b-kat { text-align: left; padding: 8px 10px; border: 1.5px solid var(--linie); border-radius: 10px; }
.b-kat b { display: block; font-size: 13px; }
.b-kat small { color: var(--text-3); font-size: 12px; }
.b-kat.aktiv { border-color: var(--blau); background: var(--blau-50); }
.b-neu__historie { background: var(--flaeche); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; margin-top: 8px; }
.b-neu__historie small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.b-neu__historie p { margin: 4px 0; }
.b-neu__historie span { color: var(--text-3); margin-right: 6px; }
.b-neukunde .b-feld { margin: 6px 0; }
.b-bes-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.b-bes { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; text-align: left; padding: 9px 10px; border: 1.5px solid var(--linie); border-radius: 10px; }
.b-bes b { flex: 1; }
.b-bes small { width: 100%; padding-left: 32px; color: var(--text-3); font-size: 12px; }
.b-bes__komp { display: flex; gap: 3px; padding-left: 32px; }
.b-bes .haken { width: 24px; height: 24px; border-radius: 50%; background: var(--flaeche); display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.b-bes.aktiv { border-color: var(--blau); background: var(--blau-50); }
.b-bes.aktiv .haken { background: var(--blau); color: #fff; }
.b-bes.gesperrt { opacity: .45; }

/* ---------- Anträge ---------- */
.b-reiter { display: flex; gap: 2px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--linie); flex: none; }
.b-reiter button { padding: 11px 14px; font-weight: 600; font-size: 14px; color: var(--text-2); border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.b-reiter button.aktiv { color: var(--blau); border-bottom-color: var(--blau); }
.b-reiter em { font-style: normal; background: #EDF0F4; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.b-reiter em.warn { background: var(--warn); color: #fff; }
.b-reiter--klein { padding: 0; margin: 12px 0 4px; background: none; }
.b-zwei { flex: 1; display: grid; grid-template-columns: 350px 1fr; min-height: 0; }
.b-zwei__liste { overflow-y: auto; padding: 12px; border-right: 1px solid var(--linie); background: #fff; }
.b-zwei__detail { overflow-y: auto; padding: 18px 24px 28px; }
.b-antrag { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border: 1px solid var(--linie); border-radius: 12px; margin-bottom: 8px; background: #fff; position: relative; }
.b-antrag:hover { border-color: #AFBCCE; }
.b-antrag.aktiv { border-color: var(--blau); background: var(--blau-50); }
.b-antrag__text { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.b-antrag__text b { width: 100%; font-size: 14.5px; }
.b-antrag__text span { font-size: 13px; color: var(--text-2); }
.b-antrag__text small { width: 100%; font-size: 12px; color: var(--text-3); }
.b-antrag__warn { color: var(--warn); }
.punkt-neu { position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.b-detail { max-width: 880px; }
.b-detail__kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.b-detail__kopf h2 { margin: 0; font-family: var(--schrift-schmal); font-size: 25px; }
.b-detail__kopf small { color: var(--text-3); }
.b-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.b-kachel { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 11px 14px; }
.b-kachel small { display: block; color: var(--text-3); font-size: 12px; }
.b-kachel b { display: block; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.b-kachel span { color: var(--text-3); font-size: 12.5px; }
.b-kachel--warn { border-color: #F0B79A; background: var(--warn-100); }
.b-zitat { font-style: italic; color: var(--text-2); background: #fff; border-left: 3px solid var(--linie); padding: 8px 12px; margin: 10px 0; }
.b-va { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--text-2); margin: 10px 0; }
.b-va .ic { color: var(--ok); }
.b-va--offen .ic { color: var(--text-3); }
.b-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; font-size: 13.5px; }
.b-tabelle th, .b-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--linie-2); text-align: left; vertical-align: middle; }
.b-tabelle tbody tr:last-child th, .b-tabelle tbody tr:last-child td { border-bottom: 0; }
.b-tabelle thead th { background: #FAFBFC; font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.b-tabelle tbody th { font-weight: 600; }
.b-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-tabelle tr.klickbar { cursor: pointer; }
.b-tabelle tr.klickbar:hover td, .b-tabelle tr.klickbar:hover th { background: var(--blau-50); }
.b-kompetenz td { text-align: center; color: var(--text-2); }
.b-kompetenz td b { font-size: 15px; color: var(--text); }
.b-kompetenz td.knapp { background: var(--warn-100); color: var(--warn); }
.b-kompetenz td.knapp b { color: var(--warn); }
.b-kompetenz th small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-3); }
.b-ueber { list-style: none; margin: 0; padding: 0; }
.b-ueber li { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linie-2); flex-wrap: wrap; }
.b-entscheidung { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; }
.b-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.b-auswirkung { display: grid; grid-template-columns: 82px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13.5px; }
.b-auswirkung.warn { border-color: #F0B79A; background: var(--warn-100); }

/* ---------- Team und Zeiten ---------- */
.b-team { min-width: 980px; }
.b-team th:first-child { min-width: 210px; }
.b-team__person { display: flex; gap: 8px; align-items: center; }
.b-team__person b { display: block; }
.b-team__person small { color: var(--text-3); font-size: 12px; font-weight: 400; }
.b-team th.heute, .b-team td.heute { background: #FFFBEA; }
.b-zelle { font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-zelle .punkt { margin-right: 4px; vertical-align: middle; }
.b-zelle--warn { background: var(--warn-100); color: var(--warn); font-weight: 700; }
.art-kurz { display: inline-block; font-size: 11px; font-weight: 700; color: var(--art); background: #F3F5F8; border: 1px solid var(--art); border-radius: 4px; padding: 0 6px; }
.b-fussnote { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; }
.b-komp-zeile { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.komp-lang { font-size: 12px; background: #EEF1F5; border-radius: 6px; padding: 3px 8px; }
.b-tagkarte { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: #fff; }
.b-tagkarte.warn { border-color: #F0B79A; }
.b-tagkarte.offen { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(31,58,107,.1); }
.b-tagkarte__kopf { display: grid; grid-template-columns: 66px 1fr auto auto; gap: 10px; align-items: center; font-size: 13.5px; }
.b-tagkarte__stempel { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.b-version { background: var(--flaeche); border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 13px; }
.b-version small { color: var(--text-3); }
.b-version p { margin: 4px 0 0; font-style: italic; color: var(--text-2); }
.b-version .diff { background: #fff; font-size: 13px; }
.b-korrektur { border-top: 1px dashed var(--linie); margin-top: 10px; padding-top: 10px; }
.b-korrektur__felder { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.b-korrektur__felder > label > span, .b-korrektur__felder > div > span { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.b-korrektur .feld--zeit { width: 112px; min-height: 38px; padding: 6px 8px; }
.b-pause-zeile { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; font-size: 12.5px; }
.b-fehler { background: var(--warn-100); color: var(--warn); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; margin: 8px 0; display: flex; gap: 6px; align-items: center; }
.b-konto-kopf { display: flex; flex-wrap: wrap; gap: 8px; }
.b-konto-kopf > div { background: var(--flaeche); border-radius: 10px; padding: 8px 12px; flex: 1; min-width: 104px; }
.b-konto-kopf small { display: block; color: var(--text-3); font-size: 11.5px; }
.b-konto-kopf b { font-size: 17px; font-variant-numeric: tabular-nums; }
.b-auszahlung { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.b-auszahlung h3 { margin: 0 0 4px; }
.b-auszahlung .b-feld-paar { margin: 0 0 8px; }

/* ---------- Monatsabschluss ---------- */
.b-abschluss-status { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.b-abschluss-status > div { flex: 1; }
.b-abschluss-status b { display: block; font-size: 17px; }
.b-abschluss-status span { color: var(--text-2); font-size: 13.5px; }
.b-abschluss-status > .ic { color: var(--blau); }
.b-abschluss-status.zu { background: var(--ok-100); border-color: #B5DAC4; }
.b-abschluss-status.zu > .ic { color: var(--ok); }
.pruefliste--buero { background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 0 14px; }
.pruefliste--buero li { padding: 10px 0; }
.pruefliste--buero small { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.b-monat { min-width: 900px; }
.b-monat th:first-child { min-width: 200px; }
.b-datev { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 16px 18px; }
.b-datev__tabelle { margin: 10px 0; font-size: 12.5px; }
.b-datev__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.b-datev__zuordnung { margin: 10px 0; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; }
.b-datev__zuordnung summary { cursor: pointer; font-weight: 600; }
.b-datev__nummern { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; }
.b-datev__nummern label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.b-datev .feld--kurz { width: 90px; min-height: 32px; padding: 4px 8px; }

/* ---------- Einstellungen ---------- */
.b-einstellungen { display: grid; gap: 14px; max-width: 1120px; }
.b-karte-gross { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 14px 20px 6px; }
.b-karte-gross > h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font-size: 16px; }
.b-karte-gross > h3 .ic { color: var(--blau); }
.b-zeile { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 24px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linie-2); }
.b-zeile--oben { align-items: start; }
.b-zeile > div:first-child b { display: block; font-size: 14.5px; }
.b-zeile > div:first-child small { color: var(--text-3); font-size: 13px; }
.b-regeln { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; max-width: 460px; justify-content: flex-end; }
.b-regeln li { font-size: 12.5px; background: #EEF1F5; border-radius: 6px; padding: 3px 8px; }
.b-checkliste { display: flex; flex-wrap: wrap; gap: 6px 16px; max-width: 560px; justify-content: flex-end; }
.b-checkliste label { display: flex; gap: 6px; align-items: center; font-size: 13.5px; cursor: pointer; }
.b-checkliste input { accent-color: var(--blau); width: 16px; height: 16px; }
.b-mindest { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.b-mindest > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.b-arten { display: flex; flex-wrap: wrap; gap: 6px; max-width: 520px; justify-content: flex-end; }
.b-kat-tabelle { width: auto; min-width: 400px; }
.b-kat-tabelle .feld { min-height: 34px; padding: 4px 8px; }
.b-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; max-width: 640px; }
.b-status__phase { background: var(--flaeche); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.b-status__phase b { display: block; }
.b-status__phase span { display: block; font-size: 12px; color: var(--text-3); }
.b-status__phase--neben { border: 1px dashed var(--linie); background: #fff; }
.b-status__pfeil { color: var(--text-3); display: inline-flex; }
.b-speicher { width: 280px; }
.b-speicher small { display: block; color: var(--text-3); font-size: 12px; margin-top: 4px; }
.b-schalter { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linie-2); cursor: pointer; }
.b-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.b-schalter__knopf { width: 44px; height: 26px; border-radius: 13px; background: #CBD3DD; position: relative; flex: none; transition: background .15s; }
.b-schalter__knopf::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.b-schalter input:checked + .b-schalter__knopf { background: var(--blau); }
.b-schalter input:checked + .b-schalter__knopf::after { transform: translateX(18px); }
.b-schalter input:focus-visible + .b-schalter__knopf { outline: 3px solid rgba(242,183,5,.7); outline-offset: 2px; }
.b-schalter b { display: block; font-size: 14.5px; }
.b-schalter small { color: var(--text-3); font-size: 13px; }

/* Vollbild auf schmalen Bildschirmen: Büro bleibt bedienbar, scrollt seitlich */
body.vollbild.geraet-buero .b-app { min-width: 1100px; }
body.vollbild.geraet-buero .browser__bildschirm { overflow: auto; }

/* Kunden importieren (docs/21 Nr. 2) */
.k-import__text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; min-height: 160px; }
.k-import__tabelle { max-height: 46vh; overflow: auto; border: 1px solid var(--linie); border-radius: 10px; margin: 10px 0; }
.k-import__tabelle .b-tabelle { margin: 0; font-size: 12.5px; }
.k-import__zeile--doppelt td, .k-import__zeile--fehlt td { color: var(--text-3); }
.b-knoepfe__abstand { flex: 1; }
.rg-aktionen { white-space: nowrap; }
.rg-aktionen .btn + .btn { margin-left: 6px; }
.b-knoepfe--links { justify-content: flex-start; }
.rg-nr { white-space: nowrap; }

/* Leistungsnachweis (Vorschau und Druck) */
.ln-blatt { border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; background: #fff; }
.ln-blatt__kopf { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--blau); padding-bottom: 10px; margin-bottom: 12px; }
.ln-blatt__kopf small, .ln-blatt__angaben small { display: block; color: var(--text-3); font-size: 12px; }
.ln-blatt__titel { text-align: right; font-family: var(--schrift-schmal); font-size: 22px; font-weight: 700; }
.ln-blatt__angaben { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; font-size: 13.5px; }
.ln-blatt__angaben b, .ln-blatt__angaben span { display: block; }
.ln-blatt__tabelle { font-size: 13px; }
.ln-blatt__tabelle tfoot th { border-top: 2px solid var(--linie); }
.ln-blatt__unterschrift { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 46px; font-size: 12px; color: var(--text-3); }
.ln-blatt__unterschrift div { border-top: 1px solid var(--text-3); padding-top: 4px; }
/* ohne gestempelte Zeit: erst bestätigen (E202) */
.ln-offen { display: grid; gap: 8px; margin: 10px 0 4px; }
.ln-offen__zeile { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche, #fff); }
.ln-offen__zeile small { display: block; color: var(--text-3); font-size: 12px; }
.ln-offen__zeile label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ln-offen__zeile input[type="time"] { width: 118px; }
@media print {
  html:has(body.druck-ln), body.druck-ln { background: #fff !important; }
  body.druck-ln * { visibility: hidden !important; }
  body.druck-ln .ln-blatt, body.druck-ln .ln-blatt * { visibility: visible !important; }
  body.druck-ln .ln-blatt { position: fixed; left: 0; top: 0; width: 100%; border: 0; }
}
.b-datev__unter { font-size: 13px; margin: 12px 0 6px; }
.b-datev__personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 6px 14px; }
.b-datev__personen label { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.b-datev__offen { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; }
.feld--fehler { border-color: var(--warn) !important; background: var(--warn-100); }
.k-import__zeile--pruefen td { background: var(--gelb-50, #FFF8E1); }
.ln-blatt__bericht { margin-top: 14px; font-size: 13px; }
.ln-blatt__bericht small, .ln-blatt__signiert small { display: block; color: var(--text-3); font-size: 12px; }
.ln-blatt__bericht p { margin: 4px 0; }
.ln-blatt__signiert { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
.ln-blatt__signiert img { display: block; max-width: 240px; max-height: 80px; border-bottom: 1px solid var(--text-3); }