/* Berichte mit Unterschrift (Stufe 9) – alle Klassen beginnen mit br-. Farben aus den Variablen der Seite (--ink, --line, --red …). */
:root { --br-rand: #cfc7bb; --br-hell: #faf7f4; --br-blau: #1d4e89; --br-blau-hell: #e7f0fb; --br-gruen-hell: #e3f3e7; --br-gelb-hell: #fff6dc; --br-schatten: 0 20px 50px rgba(0,0,0,.28); }
@media screen { html.br-offen, html.br-offen body { overflow: hidden; } }

/* ---------- Dialoge ---------- */
dialog.br-dlg { border: 0; border-radius: var(--r, 12px); padding: 0; box-shadow: var(--br-schatten); color: var(--ink); background: #fff; max-height: calc(100dvh - 24px); overflow: auto; }
dialog.br-dlg::backdrop { background: rgba(43,38,33,.5); }
dialog.br-dlg button, dialog.br-dlg label, .br-mappe button, .br-zeile button { touch-action: manipulation; }
dialog.br-dlg.br-klein { width: min(480px, calc(100vw - 24px)); }
dialog.br-dlg.br-mittel { width: min(880px, calc(100vw - 24px)); }
dialog.br-dlg.br-voll { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; overflow: hidden; background: var(--bg, #f5f2ee); }
dialog.br-dlg.br-voll[open] { display: flex; flex-direction: column; }
.br-dk { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; }
.br-dk h2 { margin: 0; font-size: 19px; flex: 1; line-height: 1.25; } .br-dk h2 small { font-weight: 400; color: var(--muted); font-size: 15px; }
.br-zu { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); width: 44px; height: 44px; border-radius: 10px; flex: none; }
.br-zu:hover { background: #f3efeb; color: var(--ink); }
.br-dinhalt { padding: 16px 18px 18px; }
.br-text { font-size: 16px; line-height: 1.5; margin: 0 0 6px; overflow-wrap: anywhere; }
.br-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; align-items: center; }
.br-knoepfe .btn { min-height: 46px; font-size: 16px; }
.br-luecke { flex: 1; }
.btn.br-gefahr { background: var(--bad, #c62828); }
.btn.br-gross { min-height: 52px; font-size: 17px; padding: 12px 20px; }
#brToast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15px; opacity: 0; pointer-events: none; transition: .25s; z-index: 100; max-width: min(92vw, 560px); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#brToast.an { opacity: 1; transform: translate(-50%, 0); }
#brToast.br-toast-ok { background: var(--good, #1f7a3f); } #brToast.br-toast-warn { background: var(--bad, #c62828); }
dialog.br-bild-dlg { width: auto; max-width: 96vw; max-height: 94dvh; background: #111; padding: 0; overflow: hidden; }
dialog.br-bild-dlg img { display: block; max-width: 96vw; max-height: 94dvh; object-fit: contain; }
.br-bild-zu { position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,.9); }

/* ---------- Seite „Berichte“ ---------- */
.br-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.br-leiste .br-suche { flex: 1 1 240px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.br-leiste select { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; max-width: 240px; color: var(--ink); }
.br-leiste .btn { min-height: 44px; }
.br-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.br-filter .chip { min-height: 38px; font-size: 14px; }
.br-anz { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 9px; background: #f1ece5; color: var(--ink); font-size: 12px; font-weight: 700; margin-left: 2px; }
.chip.an .br-anz { background: rgba(255,255,255,.22); color: #fff; }
.br-liste { display: grid; gap: 8px; }
.br-zeile { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.br-zeile:hover { border-color: #bdb3a6; }
.br-z-knopf { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1.2fr) 110px 190px; gap: 12px; align-items: center; border: 0; background: none; padding: 12px 14px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.br-z-knopf:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.br-z-sym { font-size: 24px; text-align: center; }
.br-z-haupt, .br-z-kunde, .br-z-datum, .br-z-stand { display: grid; gap: 2px; min-width: 0; }
.br-z-haupt b, .br-z-kunde b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-zeile small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-z-datum { font-size: 14px; }
.br-z-akt { display: flex; gap: 6px; align-items: center; padding: 0 12px 0 0; flex: none; }
.br-z-akt .btn { min-height: 40px; }
.br-leer-karte { background: #fff; border: 1px dashed var(--br-rand); border-radius: 12px; padding: 22px; text-align: center; }
.br-leer-karte p { margin: 4px 0; }
.br-z-wahl { display: flex; align-items: center; padding: 0 0 0 14px; cursor: pointer; flex: none; }
.br-z-wahl input { width: 22px; height: 22px; accent-color: var(--red); margin: 0; cursor: pointer; }
.br-zeile.br-markiert { border-color: var(--ink); background: #fbf9f6; }
.br-sammel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; min-height: 40px; }
.br-sammel-alle { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; padding-left: 14px; }
.br-sammel-alle input { width: 20px; height: 20px; accent-color: var(--red); }
.br-sammel-zahl { font-weight: 700; }
.br-sammel .btn { min-height: 40px; }
@media (max-width: 980px) { .br-z-knopf { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); } .br-z-datum { display: none; } .br-z-stand { grid-column: 2 / -1; } }
@media (max-width: 620px) { .br-zeile { flex-wrap: wrap; } .br-z-knopf { flex: 1 1 calc(100% - 60px); grid-template-columns: 30px minmax(0, 1fr); } .br-z-kunde, .br-z-stand { grid-column: 2; } .br-z-akt { width: 100%; padding: 0 12px 10px 92px; } }

/* Stand */
.br-stand { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; justify-self: start; background: #f1ece5; color: var(--ink); }
.br-stand-offen { background: var(--br-gelb-hell); color: #7a5a00; }
.br-stand-teil { background: #fde9d8; color: #8a4a12; }
.br-stand-wartet { background: var(--br-blau-hell); color: var(--br-blau); }
.br-stand-fertig { background: var(--br-gruen-hell); color: var(--good, #1f7a3f); }
.br-stand-warn { background: #fde5e5; color: var(--bad, #c62828); }
.br-stand-weg { background: #eee; color: #777; }

/* ---------- Karte in der Vorgangsmappe ---------- */
.br-mappe h3 { margin-top: 0; }
.br-mliste { display: grid; gap: 6px; margin: 4px 0 2px; }
.br-mzeile { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 9px 12px; font: inherit; color: var(--ink); cursor: pointer; min-height: 48px; }
.br-mzeile:hover { border-color: #bdb3a6; background: var(--br-hell); }
.br-mzeile > span:first-child { font-size: 20px; }
.br-mz-text { flex: 1; min-width: 0; display: grid; } .br-mz-text b, .br-mz-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .br-mz-text small { color: var(--muted); font-size: 12.5px; }

/* ---------- Neuer Bericht ---------- */
.br-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.br-kachel { display: grid; gap: 4px; align-content: start; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font: inherit; color: var(--ink); cursor: pointer; min-height: 110px; }
.br-kachel:hover, .br-kachel:focus-visible { border-color: var(--ink); background: var(--br-hell); }
.br-kachel b { font-size: 16px; } .br-kachel small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.br-k-sym { font-size: 28px; line-height: 1; }
.br-vgliste { display: grid; gap: 6px; margin-top: 10px; max-height: 52dvh; overflow: auto; }
.br-vg { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer; min-height: 52px; }
.br-vg:hover, .br-vg:focus-visible { border-color: var(--ink); background: var(--br-hell); }
.br-vg small { grid-column: 1; color: var(--muted); font-size: 13px; }
.br-vg-fertig { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }

/* ---------- Formular (Editor) ---------- */
.br-ed-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 3px solid var(--red); background: #fff; flex: none; }
.br-ed-kopf .btn { min-height: 42px; }
.br-ed-titel { flex: 1; min-width: 0; display: grid; }
.br-ed-titel b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-ed-titel span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-speicher { font-size: 13px; color: var(--muted); white-space: nowrap; }
.br-speicher-ok { color: var(--good, #1f7a3f); } .br-speicher-warn { color: var(--bad, #c62828); font-weight: 700; white-space: normal; max-width: 220px; }
.br-menue-wrap { position: relative; }
.br-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 6px; min-width: 250px; display: grid; }
.br-menue[hidden] { display: none; }
.br-menue button { border: 0; background: none; text-align: left; padding: 12px 14px; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; min-height: 44px; }
.br-menue button:hover { background: #f3efeb; }
.br-menue .hinweis { padding: 10px 12px; }
.br-ed-inhalt { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
.br-ed-spalte { max-width: 940px; margin: 0 auto; }
.br-breit-nur { display: inline; }
@media (max-width: 700px) { .br-breit-nur { display: none; } .br-speicher { display: none; } .br-ed-kopf { gap: 6px; padding-left: 10px; padding-right: 10px; } }

.br-sperre { display: grid; gap: 4px; justify-items: start; background: #fff3e0; border: 1px solid #f1d6b0; border-left: 5px solid var(--orange); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.br-sperre span { font-size: 14.5px; }
.br-sperre .btn { margin-top: 6px; min-height: 42px; }
.br-sperre-fertig { background: var(--br-gruen-hell); border-color: #b9dcb9; border-left-color: var(--good, #1f7a3f); }
.br-sperre-wartet { background: var(--br-blau-hell); border-color: #c3d6ee; border-left-color: var(--br-blau); }
.br-sperre-warn { background: #fde5e5; border-color: #f3c2c2; border-left-color: var(--bad, #c62828); }
.br-sperre-weg { background: #f1f1f1; border-color: #ddd; border-left-color: #999; }

.br-allg { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 20px; align-items: start; }
.br-allg-k { display: grid; gap: 2px; font-size: 16px; } .br-allg-k small { color: var(--muted); font-size: 13.5px; }
.br-allg-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .br-allg-knoepfe .btn { min-height: 40px; }
.br-allg-stand { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .br-allg-stand small { color: var(--muted); }
.br-hilfe-inl { font-weight: 400; color: var(--muted); }
@media (max-width: 640px) { .br-allg { grid-template-columns: 1fr; } }

.br-abschnitt h3 { margin: 0 0 12px; font-size: 17px; }
.br-abs-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.br-abs-kopf h3 { margin: 0; }
.br-abs-kopf .btn { min-height: 42px; }
.br-vorschl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.br-vorschl .hinweis { width: 100%; }
.br-pos { min-height: 40px; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.br-kachel-fremd { border-style: dashed; }
.br-abschnitt h3 small { font-weight: 400; }
.br-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.br-f { min-width: 0; }
.br-f-lang { grid-column: 1 / -1; }
@media (max-width: 640px) { .br-felder { grid-template-columns: 1fr; } }
.br-fl { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.br-pflicht { color: var(--red); }
.br-hilfe { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.br-in { display: block; width: 100%; box-sizing: border-box; min-height: 50px; padding: 10px 12px; font: inherit; font-size: 17px; border: 1px solid var(--br-rand); border-radius: 10px; background: #fff; color: var(--ink); }
textarea.br-in { min-height: 100px; line-height: 1.45; resize: vertical; }
select.br-in { padding-right: 32px; }
.br-in:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.br-in:disabled { background: #f5f2ee; color: var(--muted); }
.br-zahl { display: flex; align-items: center; gap: 8px; } .br-zahl .br-in { flex: 1; } .br-zahl span { color: var(--muted); font-size: 15px; white-space: nowrap; }
.br-datum { display: flex; gap: 8px; align-items: stretch; } .br-datum .br-in { flex: 1; min-width: 0; } .br-datum .btn { min-height: 50px; }
.br-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.br-opt { min-height: 50px; padding: 10px 16px; border: 1px solid var(--br-rand); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; cursor: pointer; color: var(--ink); text-align: center; touch-action: manipulation; }
.br-opt:hover { border-color: var(--ink); }
.br-opt.an { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.br-opt:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.br-wahl-2 .br-opt { flex: 1 1 0; }
.br-haken { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.br-hk { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; min-height: 50px; font-size: 15.5px; line-height: 1.35; font-weight: 400; touch-action: manipulation; }
.br-hk input { width: 26px; height: 26px; accent-color: var(--red); flex: none; margin: -2px 0 0; }
.br-hk:has(input:checked) { border-color: var(--ink); background: #f6f2ec; }
.br-hk:focus-within { outline: 2px solid var(--orange); outline-offset: 1px; }
.br-info { background: var(--br-gelb-hell); border: 1px solid #f0dc9a; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; }
.br-fehlt { outline: 3px solid var(--red); outline-offset: 6px; border-radius: 6px; }
.br-fehlt .br-fl::after { content: " – bitte ausfüllen"; color: var(--red); font-weight: 600; }
.diktat { display: inline-block; margin-top: 6px; }

/* Fotos */
.br-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.br-foto { position: relative; margin: 0; }
.br-foto-bild { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding: 0; background: #f3f1ec; cursor: zoom-in; }
.br-foto-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-foto-weg { position: absolute; top: -8px; right: -8px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: var(--ink); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.br-foto-neu { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 4 / 3; border: 2px dashed var(--br-rand); border-radius: 10px; background: var(--br-hell); cursor: pointer; text-align: center; padding: 8px; font-size: 13.5px; color: var(--ink); }
.br-foto-neu span { font-size: 28px; line-height: 1; }
.br-foto-neu:hover, .br-foto-neu:focus-within { border-color: var(--ink); }
.br-foto-neu input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Skizze und Unterschrift-Feld */
.br-zf { position: relative; border: 1px solid var(--br-rand); border-radius: 10px; background: #fff; overflow: hidden; }
.br-raster { background-color: #fff; background-image: linear-gradient(#ebe5dc 1px, transparent 1px), linear-gradient(90deg, #ebe5dc 1px, transparent 1px); background-size: 25px 25px; }
.br-zf canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.br-zf-u { max-width: 640px; }
.br-zf-linie { position: absolute; left: 6%; right: 6%; bottom: 22%; border-bottom: 1px solid #b9b0a3; pointer-events: none; }
.br-zf-knoepfe { display: flex; gap: 8px; margin-top: 8px; } .br-zf-knoepfe .btn { min-height: 42px; }
.br-zbild { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background-color: #fff; }

/* Nur lesen (gesperrt) */
.br-f-lesen .br-fl { color: var(--muted); font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.br-wert { font-size: 16px; overflow-wrap: anywhere; }
.br-mz { white-space: pre-wrap; line-height: 1.5; }
.br-leer { color: #b0a79b; }
.br-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 4px 14px; }
.br-hl li { color: #9c9387; } .br-hl li.an { color: var(--ink); font-weight: 600; }
.br-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Unterschriften im Formular */
.br-erkl { background: var(--br-hell); border-left: 4px solid var(--brown, #6b5b3e); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.br-u-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.br-u { display: grid; gap: 8px; align-content: start; justify-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; }
.br-u-l { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.br-u-da { background: #f7fbf7; border-color: #cfe5cf; }
.br-u-da img { max-width: 100%; max-height: 110px; border-bottom: 1px solid #9c9387; padding-bottom: 4px; }
.br-u small { color: var(--muted); font-size: 13px; }
.br-u-offen .btn { width: 100%; }
.br-u-offen .btns { margin-top: 0; }
.br-pruef { margin: 12px 0 0; overflow-wrap: anywhere; } .br-pruef code { font-size: 11.5px; }
.br-verlauf summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.br-verlauf .kurzliste li { font-size: 14px; }

/* Unterschrift-Dialog (Finger) */
dialog.br-dlg.br-sign-dlg { width: min(860px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }
.br-sign-felder { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.br-sign-flaeche { position: relative; border: 2px dashed var(--br-rand); border-radius: 12px; background: #fff; }
.br-sign-flaeche canvas { display: block; width: 100%; height: clamp(170px, 36dvh, 330px); touch-action: none; cursor: crosshair; border-radius: 10px; }
.br-sign-linie { position: absolute; left: 7%; right: 5%; bottom: 26%; border-bottom: 1.5px solid #9c9387; pointer-events: none; }
.br-sign-x { position: absolute; left: 3%; bottom: calc(26% + 2px); font-size: 20px; color: #9c9387; pointer-events: none; }
.br-sign-tipp { position: absolute; inset: 0; display: grid; place-items: center; color: #b0a79b; font-size: 18px; pointer-events: none; }
@media (max-width: 560px) { .br-sign-felder { grid-template-columns: 1fr; } .br-dinhalt { padding: 12px; } }

/* E-Mail-Dialog */
.br-mail-dlg .br-fl { margin-bottom: 12px; }
.br-mail-dlg .br-fl .br-in { margin-top: 6px; font-weight: 400; }
.br-mkopf { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 14px; }
.br-mkopf dt { color: var(--muted); } .br-mkopf dd { margin: 0; overflow-wrap: anywhere; }
.br-mrahmen { width: 100%; height: 52dvh; border: 1px solid var(--line); border-radius: 10px; background: #f5f2ee; }

/* ---------- Druckansicht (Bildschirm) ---------- */
.br-vorschau { flex: 1; overflow: auto; padding: 16px 12px 40px; background: #8f877d; }
.br-vorschau-blatt { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.br-vorschau .br-blatt { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.br-vorschau-tipp { text-align: center; color: #f4efe8; margin: 14px 0 0; font-size: 13px; }

/* ---------- Vorlagen-Editor ---------- */
.br-ve-tipp { margin: 0 0 14px; font-size: 13.5px; }
.br-ve-zeile-l { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.br-ve-zeile-l:last-child { border-bottom: 0; }
.br-ve-zeile-l .br-z-haupt { flex: 1 1 260px; }
.br-ve-zeile-l.br-aus { opacity: .7; }
.br-ve-akt { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.br-ve-akt .btn { min-height: 40px; }
.br-ve-grid { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px 16px; }
.br-ve-breit { grid-column: 1 / -1; }
.br-ve-sym { text-align: center; font-size: 22px; }
.br-ve-abs { border-left: 5px solid var(--wood, #d9bf98); }
.br-ve-reihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.br-ve-reihe > .br-in { flex: 1 1 220px; }
.br-ve-reihe > select.br-in { flex: 0 1 230px; }
.br-ve-abstitel { font-weight: 700; font-size: 18px; }
.br-ve-hinweis { margin: 8px 0 12px; font-size: 15px; min-height: 44px; }
.br-ve-pfeile { display: flex; gap: 4px; } .br-ve-pfeile .btn { min-width: 42px; min-height: 42px; padding: 6px; }
.br-ve-pf { display: flex; gap: 8px; align-items: center; font-size: 14.5px; white-space: nowrap; cursor: pointer; }
.br-ve-pf input { width: 22px; height: 22px; accent-color: var(--red); }
.br-ve-felder { display: grid; gap: 10px; margin-bottom: 10px; }
.br-ve-feld { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--br-hell); }
.br-ve-mehr { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.br-ve-mehr label { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.br-ve-mehr .br-in { min-height: 42px; font-size: 15px; }
.br-ve-mehr .br-ve-pf { display: flex; grid-column: 1 / -1; color: var(--ink); font-size: 14px; white-space: normal; }
.br-ve-rollen { display: grid; gap: 8px; margin-bottom: 12px; }
.br-ve-rolle { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 8px; align-items: center; }
@media (max-width: 640px) { .br-ve-rolle, .br-ve-grid { grid-template-columns: 1fr; } }

/* ---------- Druckblatt (Druckansicht und Druck) ---------- */
.br-blatt { width: 210mm; min-height: 297mm; padding: 12mm 12mm 12mm; box-sizing: border-box; background: #fff; color: #222; font: 9.5pt/1.4 system-ui, "Segoe UI", Arial, sans-serif; text-align: left; }
.br-blatt * { box-sizing: border-box; }
.br-b-kopf { display: flex; gap: 6mm; align-items: flex-start; border-bottom: 1.5pt solid #e63741; padding-bottom: 3mm; margin-bottom: 3mm; }
.br-b-kopf > div { flex: 1; min-width: 0; }
.br-b-kopf h1 { font-size: 18pt; line-height: 1.15; margin: 0; color: #222; font-weight: 800; letter-spacing: 0; }
.br-b-kopf h1::after { display: none; }
.br-b-kopf img { height: 15mm; width: auto; flex: none; }
.br-b-unter { color: #555; margin-top: 1mm; }
.br-b-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(38mm, 1fr)); gap: 2mm 5mm; margin: 0 0 3mm; padding: 2.5mm 3.5mm; background: #f6f3ef; border-radius: 2mm; }
.br-b-info span { display: block; font-size: 6.8pt; text-transform: uppercase; letter-spacing: .06em; color: #6b5b3e; }
.br-b-info b { display: block; } .br-b-info small { display: block; color: #555; font-size: 8pt; }
.br-b-stand { font-size: 8pt; color: #a12; border: .5pt solid #e9b3b3; background: #fdf3f3; padding: 1mm 2.5mm; border-radius: 1.5mm; margin: 0 0 2mm; display: inline-block; }
.br-b-abs h2 { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; color: #6b5b3e; border-bottom: .5pt solid #ccc; margin: 3.5mm 0 1.5mm; padding-bottom: .6mm; break-after: avoid; page-break-after: avoid; font-weight: 700; }
.br-b-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4mm 7mm; }
.br-bf { break-inside: avoid; page-break-inside: avoid; min-width: 0; }
.br-bf-lang { grid-column: 1 / -1; }
.br-bf-zeile { display: flex; gap: 2mm; align-items: flex-end; min-height: 6mm; }
.br-b-l { color: #555; } .br-bf-zeile .br-b-l { max-width: 50%; }
div.br-b-l { margin-bottom: .6mm; }
.br-b-w { flex: 1; border-bottom: .5pt solid #999; min-height: 4.6mm; padding: 0 1mm; font-weight: 600; overflow-wrap: anywhere; }
.br-b-keine { color: #999; font-weight: 400; border: 0; }
.br-kx { display: inline-flex; width: 3.3mm; height: 3.3mm; border: .6pt solid #333; align-items: center; justify-content: center; font-size: 7pt; line-height: 1; vertical-align: -.6mm; font-weight: 700; margin-right: .8mm; }
.br-b-wahl { display: flex; flex-wrap: wrap; gap: 1mm 4.5mm; margin-left: auto; }
.br-b-wahl-l { margin-left: 0; }
.br-b-haken { display: grid; grid-template-columns: 1fr 1fr; gap: .8mm 5mm; }
.br-b-text { white-space: pre-wrap; font-weight: 600; min-height: calc(var(--z, 3) * 5.6mm); line-height: 5.6mm; background-image: linear-gradient(to bottom, transparent 5.3mm, #cfcfcf 5.3mm); background-size: 100% 5.6mm; overflow-wrap: anywhere; }
.br-b-hinweis { margin: .5mm 0; font-size: 8.5pt; border: .5pt solid #c9b98f; background: #fffaf0; padding: 2mm 3mm; border-radius: 1.5mm; }
.br-b-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm; }
.br-b-fotos img { width: 100%; height: 44mm; object-fit: contain; background: #f3f3f3; border: .5pt solid #ccc; break-inside: avoid; }
.br-b-skizze { height: 75mm; border: .5pt solid #bbb; background-image: linear-gradient(#e3ddd4 .3pt, transparent .3pt), linear-gradient(90deg, #e3ddd4 .3pt, transparent .3pt); background-size: 5mm 5mm; }
.br-b-skizze img { width: 100%; height: 100%; object-fit: contain; }
.br-b-u-feld { height: 16mm; border-bottom: .6pt solid #333; display: flex; align-items: flex-end; max-width: 90mm; } .br-b-u-feld img { max-height: 15mm; max-width: 100%; }
.br-b-sign { margin-top: 5mm; break-inside: avoid; page-break-inside: avoid; }
.br-b-erkl { margin: 0 0 3mm; font-weight: 600; border: .5pt solid #bbb; padding: 2mm 3mm; border-radius: 1.5mm; }
.br-b-sign-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 10mm; }
.br-b-u { display: grid; align-content: end; }
.br-b-u-bild { height: 18mm; display: flex; align-items: flex-end; } .br-b-u-bild img { max-height: 18mm; max-width: 100%; }
.br-b-u-linie { border-bottom: .7pt solid #333; margin: .5mm 0 1mm; }
.br-b-u small { color: #555; font-size: 7.8pt; }
.br-b-nachweis { margin-top: 4mm; font-size: 7pt; color: #555; border-top: .5pt dashed #bbb; padding-top: 1.5mm; break-inside: avoid; overflow-wrap: anywhere; }
.br-b-nachweis ul { margin: .5mm 0; padding-left: 4mm; }
.br-b-fuss { margin-top: 6mm; padding-top: 2mm; border-top: .5pt solid #ccc; font-size: 7pt; color: #888; }
@media print {
  .br-blatt { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #druck .br-blatt { width: auto; min-height: 0; padding: 0; zoom: 1 !important; }
  #druck .br-blatt + .br-blatt { break-before: page; page-break-before: always; }   /* Sammeldruck: jeder Bericht auf neuer Seite */
  .br-b-fotos img { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { #brToast { transition: none; } }