*{box-sizing:border-box}
:root{--blue:#1769aa;--blue-dark:#0f5288;--blue-light:#eaf4fa;--ink:#17242d;--muted:#6b7880;--line:#cbd4d9;--bg:#eef2f6;--green:#16845c;--green-dark:#0f6847;--red:#b42318;--red-light:#fff0ef;--card-bg:#fff;--card-line:#e2e8ec;--input-bg:#fff}
html.dark{--ink:#e7edf1;--muted:#93a1a9;--line:#33424c;--bg:#141c22;--blue-light:#1c3546;--red-light:#3a1f1d;--card-bg:#1c262e;--card-line:#2a3841;--input-bg:#202b33}
html.dark body{background:linear-gradient(180deg,#171f26,#141c22 240px,var(--bg) 480px)}
html.dark .modal{background:linear-gradient(180deg,#171f26,#141c22 240px,var(--bg) 480px)}
html.dark .card{background:var(--card-bg);border-color:var(--card-line)}
html.dark input,html.dark select,html.dark textarea{background:var(--input-bg);color:var(--ink);border-color:var(--line)}
html.dark .settingrow-mat,html.dark .sketch-thumb-wrap{background:var(--card-bg);border-color:var(--card-line)}
html.dark .mat-row-head{background:transparent}
html.dark th{background:#0e161c!important}
body{margin:0;background:linear-gradient(180deg,#f2f5f8,#e8edf1 240px,var(--bg) 480px);background-attachment:fixed;font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
.app{max-width:920px;margin:auto;padding:14px 9px 40px}
.brand{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--blue)}
h1{font-size:28px;margin:3px 0 14px;color:var(--ink);letter-spacing:-.01em}
h2{font-size:13px;margin:0 0 12px;padding-bottom:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-dark);border-bottom:2px solid var(--blue-light)}
.card{background:#fff;border:1px solid #e2e8ec;border-radius:16px;padding:14px;margin:12px 0;box-shadow:0 1px 2px #17242d0a,0 10px 24px -8px #17242d1f}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.wide{grid-column:1/-1}
label{display:block;font-size:9px;font-weight:900;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
input,select,textarea{width:100%;min-height:40px;border:1px solid var(--line);border-radius:9px;padding:8px;font-size:14px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #1769aa26}
input::placeholder,textarea::placeholder{color:#9aa7ae}
textarea{min-height:72px;resize:vertical}
button{border:0;border-radius:9px;padding:10px 13px;font-weight:800;cursor:pointer;transition:filter .15s,transform .05s}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;filter:none}
.blue{background:var(--blue);color:#fff;box-shadow:0 2px 8px #1769aa40}.blue:hover{background:var(--blue-dark)}
.green{background:var(--green);color:#fff;box-shadow:0 2px 8px #16845c40}.green:hover{background:var(--green-dark)}
.gray{background:#e8eef1;color:var(--ink)}.gray:hover{background:#dde6ea}
.red{background:#fff0ef;color:var(--red)}.red:hover{background:#ffe3e1}
.bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* Ohne diese Regel schlaegt .bar{display:flex} das [hidden] des Browsers
   und eine versteckte Leiste bleibt sichtbar (Lehre aus Abschnitt 59). */
.bar[hidden]{display:none}
.scroll{overflow:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;min-width:1000px;table-layout:fixed}
/* Spaltenbreiten in der App, abgestimmt auf den tatsächlichen Inhalt je Spalte.
   Pos. wird unten für den Bildschirm zusätzlich fix auf 23mm gesetzt (gleich wie im PDF). */
.work-table col.c-pos{width:7%}.work-table col.c-desc{width:54%}.work-table col.c-emp{width:5.5%}.work-table col.c-func{width:8.5%}.work-table col.c-std{width:5%}.work-table col.c-rate{width:7%}.work-table col.c-total{width:8.5%}.work-table col.c-del{width:4.5%}
.mat-table col.m-pos{width:7%}.mat-table col.m-edv{width:11%}.mat-table col.m-material{width:43%}.mat-table col.m-dim{width:6.5%}.mat-table col.m-unit{width:6%}.mat-table col.m-qty{width:6%}.mat-table col.m-price{width:7.5%}.mat-table col.m-total{width:8%}.mat-table col.m-del{width:5%}
.work-table td:last-child,.work-table th:last-child,.mat-table td:last-child,.mat-table th:last-child{text-align:left}
.work-table td:last-child button,.mat-table td:last-child button{padding:6px 9px}
input[type=date]{font-size:11px;padding-left:4px;padding-right:2px;width:100%;min-width:0}
#workBody input[type=date],#matBody input[type=date]{width:100%;display:block;box-sizing:border-box}
th{background:#f2f6f8;text-align:left;font-size:9px;padding:9px 6px;color:var(--muted);font-weight:800;letter-spacing:.03em}
td{border-top:1px solid var(--line);padding:6px;font-size:12px;vertical-align:middle}
tbody tr:hover td{background:#f7fafc}
td input,td select{min-height:34px;font-size:12px}
.money{text-align:left;font-variant-numeric:tabular-nums}
.money input.mat-preis{text-align:left;font-variant-numeric:tabular-nums}
.print-only{display:none}
.total{text-align:right;font-size:20px;font-weight:900;margin-top:10px;background:var(--blue-light);color:var(--blue-dark);border-radius:10px;padding:10px 12px}
.small{font-size:11px;color:var(--muted);margin-top:7px}
.search{position:relative}
/* Leere Vorschlagsbox ausblenden – sonst bleibt ihr Rahmen als feiner
   Strich quer über dem Bildschirm stehen. */
.suggest:empty{display:none}
.suggest{position:fixed;z-index:1000;min-width:320px;max-width:min(92vw,560px);background:#fff;border:1px solid #bcc9d0;border-radius:10px;box-shadow:0 14px 28px #17242d26;max-height:260px;overflow:auto}
.item{white-space:normal;line-height:1.25}
.item{padding:10px;border-bottom:1px solid #edf0f2;cursor:pointer;transition:background .1s}.item:last-child{border-bottom:0}.item:hover{background:var(--blue-light)}.item b{display:block}.item span{font-size:11px;color:var(--muted)}
/* Projektvorschlag (v2.48): Adresse als Hauptinformation, darf ueber
   mehrere Zeilen umbrechen; Trefferflaeche gross genug fuer den Daumen. */
.projekt-vorschlag{min-height:48px;padding:9px 10px}
.projekt-vorschlag b{font-size:13px;word-break:break-word}
.projekt-vorschlag span{display:block;margin-top:2px;word-break:break-word}
.empty{text-align:center;color:var(--muted);padding:20px;font-size:12px;border:1px dashed var(--line);border-radius:10px;background:#fbfcfd}
.modal{position:fixed;inset:0;background:linear-gradient(180deg,#f2f5f8,#e8edf1 240px,var(--bg) 480px);background-attachment:fixed;z-index:500;padding:14px 9px 40px;overflow:auto;animation:fadeIn .15s ease-out}.modalbox{max-width:920px;margin:auto;padding:0}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.settingrow{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 8px;margin:6px 0;display:grid;grid-template-columns:1.3fr .9fr auto;gap:8px;align-items:center}
.settingrow.emp-row{grid-template-columns:1fr auto}
.settings-section{border:1px solid #dfe6ea;border-radius:12px;margin:12px 0;overflow:hidden}
.settings-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;cursor:pointer;background:var(--blue-light)}
.settings-section-head h2{margin:0;padding:0;border:0;color:var(--blue-dark)}
.settings-section-chevron{flex:0 0 auto;font-size:18px;font-weight:900;color:var(--blue);transition:transform .15s}
.settings-section.open .settings-section-chevron{transform:rotate(90deg)}
.settings-section-body{display:none;padding:12px 14px}
.settings-section.open .settings-section-body{display:block}
.settings-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid #e2e8ec;margin:8px 0 16px}
.settings-tab{background:none;color:var(--muted);padding:9px 14px;border-radius:9px 9px 0 0;font-weight:800;font-size:12.5px;box-shadow:none}
.settings-tab:hover{background:#f2f5f8}
.settings-tab.active{background:var(--blue-light);color:var(--blue-dark)}
.settingrow-mat{background:#fff;border:1px solid var(--line);border-radius:10px;margin:6px 0;overflow:hidden}
.mat-row-head{display:flex;align-items:center;gap:8px;padding:7px;cursor:pointer}
.mat-row-head .mat-nr{flex:0 0 30%;min-width:0}
.mat-row-head .mat-name{flex:1 1 auto;min-width:0}
.mat-chevron{flex:0 0 20px;text-align:center;color:var(--muted);font-size:16px;font-weight:900;transition:transform .15s}
.settingrow-mat.open .mat-chevron{transform:rotate(90deg);color:var(--blue)}
.mat-row-body{display:none;grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:7px;padding:0 7px 9px}
.mat-row-body label{font-size:8px}
.settingrow-mat.open .mat-row-body{display:grid}
.settingrow-mat.open .mat-row-head{border-bottom:1px solid #eef1f3;background:var(--blue-light)}
.cut{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0}
.cutgrid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}.area{background:var(--blue-light);color:var(--blue-dark);border-radius:9px;padding:9px;font-weight:800}
.project-row{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;margin:6px 0}
.project-row .project-row-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.project-row .project-row-top b{font-size:15px;flex:1 1 auto;min-width:0;word-break:break-word}
.project-row .small{margin-top:3px;word-break:break-word}
/* v2.47: Status auf eigener Zeile - so verdraengt das Badge nie den
   Titel und die Karte laeuft auf dem Handy nicht seitlich hinaus. */
.project-row-status{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.pstatus-archiv{color:var(--muted)}
.project-row-archiviert{opacity:.72}
/* Hauptaktion: volle Breite, gross genug fuer den Daumen. */
.project-row-main{display:block;width:100%;min-height:44px;margin-top:9px;text-align:center;font-size:13px}
.project-row-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.project-row-actions button{flex:1 1 auto;min-height:38px;padding:6px 10px;font-size:11px}
.report-list{margin-top:8px;border-top:1px solid var(--line);padding-top:8px;display:none}
.report-list.open{display:block}
.report-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;background:var(--blue-light);border-radius:8px;padding:7px 9px;margin:5px 0}
.report-row .report-row-info{flex:1 1 190px;min-width:0}
.report-row .report-row-info b{display:block;font-size:12px;word-break:break-word}
/* Objektadresse als Haupttitel im Regierapport-Bildschirm (v2.44) */
.report-adresse{font-size:15px;font-weight:800;color:var(--ink);margin:-6px 0 10px;word-break:break-word}
/* Projektdateien (v2.43): Bildvorschau bzw. Typ-Symbol vor der Zeile */
.datei-thumb{flex:0 0 auto;width:44px;height:44px;border-radius:8px;object-fit:cover;background:#fff;border:1px solid var(--line)}
.datei-icon{flex:0 0 auto;width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px}
/* Dateizeile im Projekt-Cockpit (v2.49): Name gross, darunter Typ/Groesse
   und Datum; die Aktionen brechen auf schmalen Geraeten um und sind gross
   genug fuer den Daumen. */
.datei-row .report-row-info b{font-size:13px}
.datei-row .report-row-actions{flex:1 1 100%;flex-wrap:wrap;margin-top:2px}
.datei-row .report-row-actions button{flex:1 1 auto;min-height:40px}
.datei-row .report-row-actions button.blue{min-height:44px;flex:1 1 100%}
/* Medien-Hinweis in der Massaufnahme-Zeile (v2.50) */
.meas-medien-hinweis{color:var(--blue-dark)!important;font-weight:800}
/* Galerie der Fotos/Skizzen einer Massaufnahme (v2.50): grosse, gut
   antippbare Kacheln, die auf schmalen Geraeten umbrechen. */
.medien-galerie{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.medien-kachel{flex:1 1 140px;max-width:200px;min-height:130px;padding:0;background:#fff;
 border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;
 flex-direction:column;align-items:stretch;cursor:pointer}
.medien-kachel img{width:100%;height:110px;object-fit:cover;background:var(--blue-light);display:block}
.medien-label{display:block;padding:6px 8px;font-size:11px;font-weight:800;color:var(--muted);text-align:left}
.medien-fehler{display:flex;align-items:center;justify-content:center;height:110px;padding:8px;
 font-size:11px;font-weight:700;color:var(--muted);background:var(--blue-light);text-align:center}
/* Grosse Ansicht eines einzelnen Bildes (v2.50) */
.medien-viewer{position:fixed;inset:0;z-index:900;background:#0d141aee;display:flex;
 flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px}
.medien-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
 width:100%;max-width:920px;color:#fff;font-size:12px;font-weight:800}
.medien-viewer-bar button{min-height:44px}
.medien-viewer img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px;background:#fff}
/* WICHTIG: Eine Klasse mit display:… schlaegt die Browserregel
   [hidden]{display:none}. Ohne diese Zeile bleibt die Vollbildansicht
   dauerhaft ueber der ganzen App liegen (Fehler aus v2.50).
   Gleiches Muster wie .sketch-fullscreen[hidden] weiter unten. */
.medien-viewer[hidden]{display:none}
/* Arbeitsstand im Projekt-Cockpit (v2.42): kompakte Zeilen, nur Fakten */
.arbeitsstand{border:1px solid var(--line);border-radius:10px;margin-top:10px;overflow:hidden;background:#fff}
.arbeitsstand-titel{font-size:9px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px 4px}
.arbeitsstand-zeile{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border-top:1px solid #eef1f3;border-radius:0;padding:9px 10px;min-height:38px;font-weight:600;color:var(--ink)}
button.arbeitsstand-zeile{cursor:pointer}
button.arbeitsstand-zeile:hover{background:var(--blue-light)}
/* v3.10: .arbeitsstand-zeile setzt display:flex und schlaegt damit das
   [hidden] des Browsers - dieselbe Falle wie .bar und .medien-viewer
   (CLAUDE.md 59). Betrifft die drei Modulzeilen aus v3.09 und die neue
   Zeile "Naechster Schritt". */
.arbeitsstand-zeile[hidden]{display:none}
.arbeitsstand-marke{flex:0 0 auto;width:16px;text-align:center;font-size:12px;font-weight:900;color:var(--blue)}
.arbeitsstand-name{flex:1 1 auto;min-width:0;font-size:12px;word-break:break-word}
.arbeitsstand-wert{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--blue-dark);text-align:right}
.arbeitsstand-aktivitaet .arbeitsstand-wert{font-weight:600;color:var(--muted)}
/* Schnellzugriff "Zuletzt bearbeitet" (v2.41): ganze Karte ist der Knopf */
.recent-project{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--blue-light);color:var(--blue-dark);border-radius:10px;padding:11px 12px;margin:6px 0;min-height:52px}
.recent-project-info{flex:1 1 auto;min-width:0}
.recent-project-info b{display:block;font-size:13px;word-break:break-word}
.recent-project-info span{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:3px;word-break:break-word}
.recent-project-arrow{flex:0 0 auto;font-size:18px;font-weight:900;color:var(--blue)}
/* Projektstatus (v2.46): Zeichen + Text + Farbe - nie die Farbe allein.
   Kompakt genug fuer die Projektkarte, gut lesbar auf dem Handy. */
.pstatus{display:inline-block;font-size:11px;font-weight:900;line-height:1.5;
 border:1px solid currentColor;border-radius:999px;padding:1px 8px;white-space:nowrap}
.pstatus-offen{color:var(--muted)}
.pstatus-in_arbeit{color:var(--blue)}
.pstatus-abgeschlossen{color:var(--green)}
.pstatus-storniert{color:var(--red)}
html.dark .pstatus-abgeschlossen{color:#4cc79a}
html.dark .pstatus-storniert{color:#f08b80}
/* Statuszeile im Projektkopf: Anzeige und Auswahlfeld nebeneinander,
   auf schmalen Geraeten untereinander. */
.projekt-status-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 4px}
.projekt-status-zeile select{flex:0 1 200px;min-height:38px}
.projekt-status-anzeige{flex:0 0 auto}
/* Statusfilter der Projektliste: gleiche Chips wie im Verlauf (v2.31).
   margin-top ist Pflicht: die Leiste darueber (.bar) hat nur margin-top,
   sonst beruehren sich die beiden Knopfreihen ohne jede Luft (v2.69). */
.status-filter{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.status-filter button{padding:5px 9px;font-size:10.5px;background:var(--blue-light);color:var(--blue-dark);min-height:30px}
.status-filter button.aktiv{background:var(--blue);color:#fff}
.status-filter[hidden]{display:none}
/* Projektkopf im Cockpit (v2.45): die Adresse ist der Haupttitel und
   darf auf schmalen Geraeten umbrechen, statt seitlich hinauszulaufen. */
#cockpitTitle{word-break:break-word}
#cockpitSubline{word-break:break-word}
/* Projekt-Cockpit (v2.39): Abschnittsueberschrift mit Anzahl rechts,
   klar beschriftete Neu-Knoepfe ueber voller Breite. */
/* Aus der globalen Suche geoeffneter Treffer (v2.40): kurz hervorheben */
.report-row.treffer{outline:2px solid var(--blue);outline-offset:1px;background:#fff}
/* Ausmass "Offerte erfassen" (v3.48): fertig markierte Position dezent gruen. */
.am-pos-fertig{background:#eaf7f0}
.cockpit-count{float:right;font-size:11px;font-weight:900;color:var(--blue);background:var(--blue-light);border-radius:999px;padding:1px 9px;min-width:20px;text-align:center}
.cockpit-new{display:block;width:100%;min-height:44px;text-align:center;line-height:24px}
/* Klappbare Abschnitte im Projekt-Cockpit (v3.11). Gleiche Bildsprache wie
   die Einstellungen (.settings-section): Kopf antippbar, Winkel dreht sich.
   Der Koerper wird ueber die Klasse .open geschaltet und NICHT ueber das
   hidden-Attribut - eine eigene display-Regel wuerde [hidden] sonst
   schlagen (CLAUDE.md 59/71.5/115.9). */
.klapp-kopf{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:34px;user-select:none}
.klapp-kopf .cockpit-count{float:none;margin-left:auto}
.klapp-kopf .hilfe-knopf{flex:0 0 auto}
.klapp-chevron{flex:0 0 auto;margin-left:auto;font-size:18px;font-weight:900;color:var(--blue);transition:transform .15s}
.klapp-kopf .cockpit-count~.klapp-chevron,.klapp-kopf .hilfe-knopf~.klapp-chevron{margin-left:0}
.klapp.open>.klapp-kopf .klapp-chevron{transform:rotate(90deg)}
.klapp:not(.open)>h2.klapp-kopf{margin-bottom:0;padding-bottom:0;border-bottom:0}
.klapp-body{display:none}
.klapp.open>.klapp-body{display:block}
.arbeitsstand-titel.klapp-kopf{padding:9px 10px;min-height:36px}
.arbeitsstand-titel.klapp-kopf .klapp-chevron{font-size:15px}
/* Abschnitte in der Offerten-Positionsliste (v3.71): ein .klapp-kopf als
   eigene Kopfzeile IN einer Tabellenzelle statt als direktes Kind von
   .klapp - .klapp.open>.klapp-kopf greift hier nicht, deshalb dreht sich
   der Winkel ueber eine eigene .open-Klasse direkt am Kopf. */
.ang-sek-kopf .klapp-chevron{font-size:15px}
.ang-sek-kopf.open .klapp-chevron{transform:rotate(90deg)}
label.cockpit-upload{cursor:pointer;border-radius:9px;padding:10px 13px;font-weight:800;font-size:12px;
 text-transform:none;letter-spacing:0}
.verlauf-filters button{padding:5px 9px;font-size:10.5px;background:var(--blue-light);color:var(--blue-dark)}
/* Sortier-Chips der Feedback-Liste - gleiche Optik wie die Verlauf-Filter */
.feedback-sort button{padding:6px 10px;font-size:11px;min-height:34px;background:var(--blue-light);color:var(--blue-dark)}
.feedback-sort button.active{background:var(--blue);color:#fff}
/* Auswahl der zu exportierenden Feedbacks: die ganze Kopfzeile ist das
   Label, damit auf dem Handy nicht das kleine Kaestchen getroffen werden
   muss. word-break, damit lange Modulnamen umbrechen statt zu ueberlaufen. */
label.feedback-pick{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
 min-height:30px;padding:2px 0;margin:0}
label.feedback-pick input{width:19px;height:19px;min-height:0;flex:0 0 auto;margin:2px 0 0;padding:0;border:0;border-radius:0;accent-color:var(--blue)}
label.feedback-pick span{flex:1 1 auto;min-width:0;word-break:break-word;text-transform:none;letter-spacing:normal;font-weight:400;font-size:11px;margin:0}
.settingrow.feedback-gewaehlt{border-left:3px solid var(--blue)}
.verlauf-filters button.active{background:var(--blue);color:#fff}
.verlauf-entry{border-bottom:1px solid var(--line);padding:7px 2px}
.verlauf-entry:last-child{border-bottom:0}
.verlauf-entry-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.verlauf-entry-badges{display:flex;gap:5px;flex-wrap:wrap}
.verlauf-entry-entity{font-size:10.5px;font-weight:800;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap}
.verlauf-entry-action{font-size:10.5px;font-weight:800;color:var(--blue-dark);background:var(--blue-light);border-radius:6px;padding:2px 7px;white-space:nowrap}
.verlauf-entry-who{font-size:12px;font-weight:700}
.verlauf-entry-desc{font-size:11px;color:var(--muted);margin-top:2px}
.verlauf-entry-changes{margin-top:4px;padding:6px 8px;background:var(--blue-light);border-radius:8px;font-size:11px;color:var(--ink)}
.verlauf-change-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:2px 0}
.verlauf-change-label{font-weight:700;color:var(--blue-dark);white-space:nowrap}
.verlauf-change-value{word-break:break-word}
.verlauf-limit-hint{color:var(--muted);text-align:center}
.report-row .report-row-info span{display:block;font-size:11px;color:var(--muted);word-break:break-word}
.report-row .report-row-actions{display:flex;gap:6px;flex:0 0 auto}
.report-row button{padding:7px 10px;font-size:11px;min-height:34px}

.meas-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.eb-table{width:100%;border-collapse:collapse;margin-top:6px;table-layout:fixed}
.eb-diagram-box{background:#f8fafb;border:1px solid var(--line);border-radius:10px;padding:8px;margin:8px 0}
.eb-diagram-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.eb-diagram-scroll svg{display:block}
.eb-table col.eb-col-pos{width:14%}
.eb-table col.eb-col-len{width:32%}
.eb-table col.eb-col-massa{width:26%}
.eb-table col.eb-col-side{width:28%}
.eb-table th{background:#f2f6f8;text-align:left;font-size:9px;padding:6px 5px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.eb-table td{border-top:1px solid var(--line);padding:5px;font-size:12px}
.eb-table td:first-child{text-align:left;color:var(--muted)}
.eb-table td:nth-child(2),.eb-table td:nth-child(3){text-align:left;font-variant-numeric:tabular-nums}
.eb-rest-row td{background:var(--blue-light);font-weight:800}
.start-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:8px}
.start-nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px 10px;border-radius:14px;font-size:14px;font-weight:800;text-align:center;line-height:1.3}
.start-nav-btn small{font-weight:600;font-size:10px;opacity:.85}
.start-nav-icon{font-size:34px;line-height:1}
/* v3.24: .start-nav-btn setzt display:flex und wuerde das [hidden] des
   Browsers schlagen - der Werkstatt-Knopf waere fuer jeden sichtbar.
   Fuenfter Fall derselben Falle (CLAUDE.md 59, 71.5, 115.9). Gemessen. */
.start-nav-btn[hidden]{display:none!important}
/* Der Startbildschirm hat je nach Firma einen oder zwei grosse Einstiege -
   die Typ-Auswahlen darunter behalten ihre drei festen Spalten. */
#startNav{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
#topUserBar{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:6px}
.report-topnav{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.report-topnav button{padding:7px 12px;font-size:12px}
@media(max-width:600px){.start-nav{grid-template-columns:1fr}}
.meas-preview{max-width:100%;border-radius:10px;margin-top:8px;border:1px solid var(--line);display:block}
.meas-preview[hidden]{display:none}
.sketch-fullscreen{position:fixed;inset:0;z-index:2000;background:#fff;display:flex;flex-direction:column;touch-action:pan-x pan-y}
.sketch-fullscreen[hidden]{display:none}
.sketch-fs-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:9px 10px;background:#f2f5f8;border-bottom:1px solid var(--line);flex:0 0 auto;touch-action:manipulation}
.sketch-fs-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sketch-fs-actions{display:flex;gap:8px;flex:0 0 auto;margin-left:auto}
.sketch-fs-toolbar select,.sketch-fs-toolbar input[type=color]{width:auto;min-height:38px}
.sketch-fs-toolbar button{padding:9px 14px;flex:0 0 auto}
.sketch-zoom-label{font-size:12px;font-weight:800;color:var(--muted);min-width:38px;text-align:center}
/* Farbe/Breite/Radieren als richtige Knoepfe (v3.74) statt roher Formfelder -
   #fsSketchColor bleibt als verstecktes echtes Farbfeld bestehen (bester
   nativer Farbwaehler auf dem Handy), der sichtbare Knopf loest nur dessen
   .click() aus und zeigt die aktuelle Farbe als kleines Quadrat an. */
.sketch-color-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid #0003;vertical-align:-2px;background:#17202a}
#fsSketchErase.active{background:var(--blue);color:#fff}
#fsPanFloating{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:900;background:var(--green);color:#fff;box-shadow:0 4px 16px #0004;white-space:nowrap}
#fsPanFloating.active{background:var(--blue)}
#fsSketchDone{font-size:14px;font-weight:900;padding:10px 20px;box-shadow:0 3px 10px #16845c66}
.sketch-viewport{flex:1 1 auto;overflow:auto;background:#dbe1e5;display:flex;align-items:flex-start;justify-content:center;padding:14px;touch-action:pan-x pan-y}
#fsSketchCanvas{background:#fff;box-shadow:0 2px 14px #0002;flex:0 0 auto;touch-action:none}
.sketch-gallery{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0}
.sketch-thumb-wrap{position:relative;width:84px;height:118px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.sketch-thumb{width:100%;height:100%;object-fit:contain}
.sketch-thumb-actions{position:absolute;inset:auto 0 0 0;display:flex;gap:2px;background:#17242dcc}
.sketch-thumb-actions button{flex:1;padding:4px 0;font-size:11px;border-radius:0}
.meas-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;margin:6px 0}
.meas-thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#eef2f6}
.meas-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px}
.meas-row-info{flex:1 1 190px;min-width:0}
.meas-row-info b{display:block;font-size:13px;word-break:break-word}
.meas-row-info span{display:block;font-size:11px;color:var(--muted);word-break:break-word}
.meas-row-actions{display:flex;gap:6px;flex:0 0 auto}
.meas-row-actions button{padding:7px 10px;font-size:12px;min-height:34px}
@media(max-width:600px){.meas-columns{grid-template-columns:1fr}}
#authScreen .modalbox{max-width:420px}
.info{background:var(--blue-light);color:var(--blue-dark);border-radius:10px;padding:10px 12px;font-size:12px;margin-top:9px;border-left:3px solid var(--blue)}
.report-head{display:none}
.report-foot{display:none}
.pdf-foot{display:none}
.print-rate-block{display:none}


/* Kehle (v2.52) – Hauptresultate b/c/d dominieren, alles Weitere bleibt
   dezent. Kein Element hier startet versteckt; sollte das je nötig
   werden, braucht die Klasse zusätzlich eine eigene
   .klasse[hidden]{display:none}-Regel (siehe CLAUDE.md 59). */
.kehle-haupt{background:var(--blue-light);border:2px solid var(--blue);border-radius:12px;padding:10px 12px;margin:12px 0 4px}
.kehle-haupt-titel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--blue-dark);margin-bottom:6px}
.kehle-haupt-zeile{display:flex;flex-wrap:nowrap;align-items:baseline;gap:8px;padding:4px 0;border-top:1px solid #ffffff80}
.kehle-haupt-zeile:first-of-type{border-top:0}
.kehle-haupt-buchstabe{font-size:20px;font-weight:800;color:var(--blue-dark);flex:0 0 20px}
.kehle-haupt-wert{font-size:24px;font-weight:800;color:var(--blue-dark);flex:0 0 auto;min-width:96px;text-align:right;white-space:nowrap}
.kehle-haupt-text{flex:1 1 0;min-width:0;font-size:11px;line-height:1.25;color:var(--blue-dark);overflow-wrap:anywhere}
/* Zusatzwerte bewusst schmal: Kurzbezeichnung auf dem Bildschirm, der
   volle Excel-Wortlaut haengt als Tooltip an der Zeile und steht
   ungekuerzt im PDF. */
/* min-width:0 ist hier zwingend: die globale Regel oben (Zeile 33)
   setzt jeder Tabelle min-width:1000px, weil die Stuecklisten-Tabellen
   der App in einem <div class="scroll"> stehen und breit sein duerfen.
   Ohne diese Zeile waere auch die Kehle-Tabelle 1000px breit und wuerde
   rechts aus dem Bildschirm laufen. */
table.kehle-tabelle{width:100%;min-width:0;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
.kehle-tabelle th{width:32px;text-align:left;font-weight:800;color:var(--blue-dark);padding:3px 5px 3px 0;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.kehle-tabelle td{padding:3px 4px 3px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.3;overflow-wrap:anywhere}
.kehle-tabelle td.kehle-zahl{width:74px;text-align:right;font-weight:700;white-space:nowrap;padding-right:0}
details.kehle-zwischen summary{cursor:pointer;font-size:11.5px;color:var(--muted);padding:7px 0;min-height:32px}
details.kehle-zwischen[open] summary{margin-bottom:2px}
@media(max-width:600px){
 .kehle-haupt-wert{font-size:21px;min-width:84px}
 .kehle-haupt-buchstabe{font-size:17px;flex:0 0 16px}
 .kehle-haupt-text{font-size:10.5px}
 table.kehle-tabelle{font-size:11px}
 .kehle-tabelle td.kehle-zahl{width:68px}
 .kehle-tabelle th{width:30px}
}

/* ---- Rinne · frei definierbares Profil + Zuschnittliste (v2.57) ----
   Beide Tabellen stehen wie die uebrigen Stuecklisten in einem
   <div class="scroll"> und duerfen breiter als der Bildschirm sein.
   min-width und table-layout werden hier ausdruecklich gesetzt: die
   globale Regel (Zeile 33) gibt jeder Tabelle min-width:1000px und
   table-layout:fixed - bei einer Tabelle mit dynamisch vielen Spalten
   waere beides falsch. */
table.rp-profiltabelle,table.rp-table{width:100%;min-width:0;border-collapse:collapse;
 margin-top:6px;table-layout:auto}
.rp-profiltabelle th,.rp-table th{background:#f2f6f8;text-align:left;font-size:9px;padding:6px 5px;
 color:var(--muted);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.rp-profiltabelle td,.rp-table td{border-top:1px solid var(--line);padding:4px 5px;font-size:12px;
 vertical-align:middle;white-space:nowrap}
.rp-profiltabelle td:first-child,.rp-table td:first-child{color:var(--muted);text-align:left}
.rp-profiltabelle input,.rp-profiltabelle select,
.rp-table input[type=number],.rp-table select{padding:5px 4px;font-size:12px;min-height:34px;
 border:1px solid var(--line);border-radius:7px;background:#fff;color:inherit;min-width:0}
.rp-profiltabelle input[type=text]{width:150px}
.rp-profiltabelle input[type=number]{width:76px;text-align:right}
.rp-profiltabelle select{width:92px}
.rp-table input[type=number]{width:72px;text-align:right}
.rp-table select{width:92px}
.rp-varzelle input[type=number]{width:62px}
/* display:flex auf einem <td> sprengt das Tabellenlayout - die Knoepfe
   liefen in die Nachbarspalte. Deshalb ein innerer Flex-Container. */
.rp-winkel > div{display:flex;gap:3px;align-items:center}
.rp-winkel button,.rp-segbtn button,.rp-table button{min-height:32px;min-width:32px;padding:2px 6px;font-size:12px}
.rp-segbtn{white-space:nowrap}
.rp-segbtn button{margin-right:2px}
.rp-var{color:var(--blue-dark);font-weight:800}
.rp-erg{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.rp-zuschnitt{color:var(--blue-dark)}
@media(max-width:600px){
 .rp-profiltabelle td,.rp-table td{font-size:11.5px}
 .rp-profiltabelle input[type=text]{width:120px}
}
/* Pflichtfeld-Stern (v2.70): rot, fett und etwas groesser als das Label,
   damit er auch auf einem Handy sicher zu sehen ist. Der Stern steht im
   Label, nie im Eingabewert - er kann also nicht mitgetippt werden. */
.pflicht-stern{color:var(--red);font-weight:900;font-size:13px;line-height:1;margin-left:3px;vertical-align:baseline}
/* Vorschlag-Chip (v3.67): zeigt den Firmen-Richtwert neben einem leeren
   Pflichtfeld, wird aber nur nach Antippen uebernommen - kein stilles
   Vorausfuellen mehr. */
.vorschlag-chip{display:inline-block;margin:3px 6px 0 0;padding:2px 9px;
 border:1px solid var(--blue);border-radius:999px;background:var(--blue-light);
 color:var(--blue);font-size:11px;font-weight:700;line-height:1.6;
 cursor:pointer}
.vorschlag-chip:active{background:var(--blue);color:#fff}
/* Offline-Hinweis (v2.70): deutlich, aber nicht alarmierend. Steht ganz
   oben und nimmt auf dem Handy die volle Breite ein. */
.offline-hinweis{background:#fff4e5;border:1px solid #f0c48a;color:#8a5300;
 border-radius:10px;padding:8px 10px;margin:0 0 8px;line-height:1.35}
.offline-hinweis[hidden]{display:none}

/* ---- Rinne Halbrund · Aufnahme (js/28) ---------------------------------- */
/* Die globalen Grundregeln (input{min-height:40px}, label{uppercase},
   table{min-width:1000px}) gelten auch hier - Tabellen stehen deshalb wie
   ueberall in .scroll, und es wird nichts davon still ueberschrieben. */
.ra-block{margin-top:4px}
.ra-zeile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0}
.ra-zeile-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.ra-zeile-kopf b{font-size:13px}
.ra-klein{font-size:11.5px;color:var(--muted);font-weight:400}
.ra-weg{min-height:34px;padding:0 10px;flex:0 0 auto}
.ra-ueb{background:#f4f9f8;border-color:#cfe4e0}
.ra-ueb-aus{background:#fafbfc;border-color:var(--line)}
.ra-ueb-stutzen{background:#f5f2fb;border-color:#ddd3ee}
.ra-wert{min-height:40px;display:flex;align-items:center;font-weight:700;font-size:14px;
 padding:8px;border:1px dashed var(--line);border-radius:9px;background:#fafbfc;word-break:break-word}
.ra-schalter{display:flex;align-items:center;gap:8px;min-height:40px;font-size:13px;
 font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.ra-schalter input{width:auto;min-height:0;padding:0;border:0;transform:scale(1.25);flex:0 0 auto}
.ra-pruefung{display:flex;flex-direction:column;gap:6px}
.ra-fehler{background:#fdf1f0;border-left:3px solid #b42318;border-radius:8px;padding:8px 10px;font-size:12.5px;color:#8a2018}
.ra-warnung{background:#fdf6ec;border-left:3px solid #d9822b;border-radius:8px;padding:8px 10px;font-size:12.5px;color:#8a5312}
.ra-ok{background:#eff9f2;border-left:3px solid #2e7d4f;border-radius:8px;padding:8px 10px;font-size:12.5px;color:#1f5c39}
.ra-liste{margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.55}
.ra-warn{background:#fdf6ec;color:#8a5312;border-left-color:#d9822b}
/* Legende unter dem Verlaufsband - ohne sie waeren die berechneten
   Dehnungselemente nur unbeschriftete Rauten. */
.ra-legende{font-size:11px;color:var(--muted);line-height:1.5;margin:2px 0 8px;text-align:center}
/* Rinnenboden und Dehnung stehen in einem eigenen, abgesetzten Block, damit
   die berechneten Dehnungselemente sichtbar sind und nicht in einer
   Feldreihe untergehen. */
.ra-dehnung{background:#fdf8f2;border:1px solid #f0dcc3;border-radius:12px;padding:10px;margin:10px 0}
.ra-dehnung-zahl{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px;
 color:var(--ink);margin-bottom:4px}
.ra-dehnung-zahl span{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.ra-dehnung-zahl b{font-size:17px;color:#b4610a}
.ra-dehnung-liste{margin:4px 0 0;padding-left:18px;font-size:12.5px;line-height:1.6}
/* Kurz sichtbar machen, wohin "Fertig" gefuehrt hat. */
.ra-ziel{outline:2px solid var(--blue);outline-offset:3px;border-radius:10px}
.ra-dila-zeile{background:var(--blue-light)}
.ra-dila-feld{max-width:130px;text-align:right;font-variant-numeric:tabular-nums}
.ra-rest{color:#b4610a;font-weight:700}
@media (max-width:520px){.ra-dila-feld{max-width:none}}
/* Die globale Grundregel table{min-width:1000px} ist fuer die breiten
   Stuecklisten gedacht. Die Tabellen der Rinnen-Aufnahme haben wenige,
   kurze Spalten und sollen auf dem Handy ganz sichtbar sein - min-width
   muss dafuer AUSDRUECKLICH zurueckgesetzt werden, width:100% allein
   reicht nicht (siehe CLAUDE.md 60.5). */
/* Zuschnitt-Optimierung (js/33): in allen Massaufnahme-Arten derselbe
   Aufbau. Die Kennzahlen stehen immer in derselben Reihenfolge, zuerst die
   Streifenbreite. .ra-wert-klein ist fuer laengere Aufzaehlungen (mehrere
   Normlaengen), damit die Zeile nicht umbricht. */
.zu-kennzahlen{margin:8px 0}
.ra-wert-klein{font-size:12.5px}
.zu-hinweis{color:var(--muted);margin-top:6px;line-height:1.5}
.zu-gruppe{margin:10px 0 4px;color:var(--ink)}
/* Zuschnittlaenge und -breite in einer Tabellenzelle. Nebeneinander wuerde
   das Eingabefeld in der schmalen Spalte auf wenige Pixel zusammengedrueckt
   (im Browser gemessen) - deshalb steht die Breite UNTER dem Feld. Gelesen
   ergibt das weiterhin "2'170 mm × 330 mm". */
.zu-lb{display:block}
.zu-lb input{width:100%;min-width:0}
.zu-lb-breite{display:block;white-space:nowrap;font-size:11px;color:var(--muted);
 margin-top:2px;text-align:right}
.eb-table.ra-tab{min-width:0;table-layout:auto}
.eb-table.ra-tab td,.eb-table.ra-tab th{word-break:break-word}
/* Kurze Kennzeichnungen wie "Traufstueck" duerfen NICHT mitten im Wort
   umbrechen - .ra-tab bricht sonst Buchstabe fuer Buchstabe (gemessen). */
.kea-rolle{white-space:nowrap;word-break:normal;color:var(--muted);font-size:10px;
 line-height:1.2;margin-top:2px}
.eb-table.ra-tab th.kea-nowrap{word-break:normal}
/* Die Zahlenfelder duerfen nicht zusammengedrueckt werden - sonst ist der
   eingetippte Wert nicht mehr lesbar (v2.81 schon einmal gemessen). */
.eb-table.ra-tab input[type=number]{min-width:62px}

/* ---- Zuschnittliste: STUECKZAHL x LAENGE x ABWICKLUNG -------------------
   Hauptdarstellung in jeder Massaufnahme-Art. Bewusst KEINE Tabelle: auf dem
   Handy soll man die Zeilen aus zwei Metern Abstand lesen koennen. */
.zu-liste{border:1px solid var(--line);border-radius:10px;overflow:hidden;
 margin:0 0 10px;background:var(--card)}
.zu-liste-kopf{background:var(--bg2);padding:8px 12px;font-size:11px;font-weight:800;
 letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
 border-bottom:1px solid var(--line)}
.zu-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
 padding:9px 12px;border-bottom:1px solid var(--line)}
.zu-zeile:last-of-type{border-bottom:0}
.zu-anzahl{flex:0 0 auto;font-size:19px;font-weight:800;color:var(--blue);
 min-width:46px;text-align:right}
.zu-mass{flex:1 1 auto;min-width:0;font-size:19px;font-weight:700;
 word-break:break-word}
.zu-einheit{font-size:13px;font-weight:600;color:var(--muted)}
.zu-zusatz{flex:1 1 100%;font-size:11px;color:var(--muted);word-break:break-word}
/* Positionsnummern: die eigentliche Frage auf der Baustelle - welches Blech
   gehoert wohin. Deshalb eigene Zeile, dunkel und als abgesetzte Marken,
   nicht als kleiner grauer Nachsatz. */
.zu-pos{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px;
 margin-top:2px}
.zu-pos-marke{font-size:10px;font-weight:800;letter-spacing:.6px;
 text-transform:uppercase;color:var(--muted);margin-right:2px}
.zu-nr{display:inline-flex;align-items:center;justify-content:center;
 min-width:26px;height:24px;padding:0 7px;border-radius:6px;
 background:var(--bg2);border:1px solid var(--line);
 font-size:13px;font-weight:800;color:var(--text);
 font-variant-numeric:tabular-nums}
/* Belegung: je Streifen eine Karte, je Stueck eine Zeile mit seiner Nummer. */
.zu-belegung{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.zu-platz{flex:1 1 220px;min-width:0;border:1px solid var(--line);
 border-radius:8px;overflow:hidden;background:var(--card)}
.zu-platz-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
 background:var(--bg2);padding:6px 9px;border-bottom:1px solid var(--line);
 font-size:12px}
.zu-platz-fuell{font-size:11px;color:var(--muted)}
.zu-platz-stueck{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
 padding:6px 9px;border-bottom:1px solid var(--line)}
.zu-platz-stueck:last-child{border-bottom:0}
.zu-platz-mass{flex:1 1 auto;min-width:0;font-size:14px;font-weight:700;
 word-break:break-word;font-variant-numeric:tabular-nums}
.zu-platz-zusatz{flex:1 1 100%;font-size:11px;color:var(--muted);word-break:break-word}
.zu-platz-leer{padding:6px 9px;font-size:12px;color:var(--muted)}
/* Rollenvergleich: die Spaltenkoepfe duerfen NICHT mitten im Wort brechen
   (.ra-tab setzt word-break:break-word fuer die Zellen). Passt der Kopf nicht,
   scrollt die Tabelle in ihrem .scroll-Rahmen - das ist lesbar, "ROLLENLÄNG E"
   nicht. */
table.zu-vergleich th{word-break:normal;overflow-wrap:normal;white-space:nowrap}
table.zu-vergleich td{white-space:nowrap}
.zu-liste-fuss{padding:8px 12px;font-size:12px;color:var(--muted);
 border-top:1px solid var(--line);background:var(--bg2)}
.zu-details{margin-top:4px}
.zu-details>summary{cursor:pointer;font-size:12px;color:var(--blue);
 padding:8px 2px;min-height:38px;display:flex;align-items:center}
.zu-details[open]>summary{margin-bottom:6px}
/* Register-Fuehrung durch die Rinnen-Massaufnahme (wie in der Testapp).
   .ra-register-knopf setzt min-height/padding/width ausdruecklich zurueck -
   die globale button-Regel wuerde sie sonst ueberschreiben. */
.ra-register{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;
 -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ra-register-knopf{flex:0 0 auto;width:auto;display:inline-flex;align-items:center;gap:6px;
 background:#fff;border:1px solid var(--line);border-radius:22px;
 min-height:42px;padding:0 13px;font-size:13px;font-weight:600;color:var(--ink);
 white-space:nowrap;cursor:pointer;position:relative}
.ra-register-knopf.aktiv{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:800}
.ra-register-nr{display:inline-flex;align-items:center;justify-content:center;
 width:20px;height:20px;border-radius:50%;background:#eef2f5;color:var(--ink);
 font-size:11px;font-weight:800;flex:0 0 auto}
.ra-register-knopf.aktiv .ra-register-nr{background:#fff;color:var(--blue)}
.ra-register-punkt{width:8px;height:8px;border-radius:50%;background:#d9822b;flex:0 0 auto}
.ra-register-punkt.fehler{background:#b42318}
.ra-register-knopf.aktiv .ra-register-punkt{box-shadow:0 0 0 2px #fff}
.ra-blaettern{justify-content:space-between;margin-top:14px}
.ra-blaettern button{flex:1 1 46%;min-height:46px;font-weight:700}

/* ---- Freies Profil: Aufnahme (v2.77) ---------------------------------- */
/* Die globale Grundregel table{min-width:1000px} ist fuer die breiten
   Stuecklisten gedacht. Diese Tabellen sollen in die Seitenbreite passen -
   sonst muesste man auf dem Handy jede einzeln seitwaerts schieben. */
.eb-table.fpa-tab{min-width:0;table-layout:auto}
.eb-table.fpa-tab td,.eb-table.fpa-tab th{word-break:break-word}
/* Die Zeichnung ist beim Erfassen die eigentliche Rückmeldung. Auf einem
   Handy stünde sie sonst unter mehreren langen Schenkel-Karten - man sähe
   sie beim Tippen nie. Deshalb klebt sie oben am Bildschirmrand. */
.ra-zeichnung{border:1px solid var(--line);border-radius:12px;background:var(--card-bg);
 padding:6px 8px 8px;margin:8px 0}
.ra-zeichnung.ra-klebt{position:sticky;top:0;z-index:5;box-shadow:0 6px 14px -12px #0d141a55}
.ra-zeichnung[hidden]{display:none}
.ra-zeichnung-kopf{display:flex;justify-content:space-between;gap:8px;font-size:10px;
 font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
/* Ein gedrückter Zustand für „180° Umschlag“ - der Knopf ist ein Schalter. */
button.ra-aktiv{border-color:var(--blue);color:var(--blue-dark);background:var(--blue-light)}

/* --- PDF-Listenauswahl (js/35) ------------------------------------------
   Ein Eintrag je waehlbarer Liste. Das Kaestchen muss die globalen
   Grundregeln fuer input ausdruecklich zuruecksetzen (width:100%,
   min-height:40px, border, padding) - sonst wird es 40 px hoch und
   bekommt einen zweiten Rahmen. Ebenso label{text-transform:uppercase}. */
label.pdf-liste{display:flex;align-items:center;gap:10px;min-height:44px;
 padding:4px 2px;border-bottom:1px solid var(--line);cursor:pointer;
 text-transform:none;font-size:14px;font-weight:500;color:var(--fg);letter-spacing:0}
label.pdf-liste:last-child{border-bottom:0}
label.pdf-liste input[type=checkbox]{width:20px;min-width:20px;height:20px;
 min-height:0;padding:0;border:0;margin:0;flex:0 0 auto}
.pdf-liste-name{flex:1 1 auto;min-width:0;word-break:break-word}
.pdf-liste-aus{color:var(--muted);cursor:default}
.pdf-liste-hinweis{flex:0 0 auto;font-size:11px;color:var(--muted);
 text-transform:none;letter-spacing:0}

/* --- Rollenauswahl je Massaufnahme (js/33) ------------------------------- */
details.zu-rollen{border:1px solid var(--line);border-radius:10px;padding:8px 10px;
 margin:0 0 10px;background:var(--card)}
details.zu-rollen>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--fg)}
.zu-rollen-liste{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
label.zu-rolle{display:flex;align-items:center;gap:7px;min-height:40px;
 text-transform:none;font-size:14px;font-weight:600;color:var(--fg);letter-spacing:0;
 flex:0 0 auto;cursor:pointer}
label.zu-rolle input[type=checkbox]{width:20px;min-width:20px;height:20px;
 min-height:0;padding:0;border:0;margin:0;flex:0 0 auto}

/* Kamineinfassung: Schalter "links und rechts getrennt erfassen".
   Setzt die globalen Grundregeln fuer input und label ausdruecklich
   zurueck - siehe CLAUDE.md 72.5. Gleiches Muster wie label.zu-rolle. */
label.kam-schalter{display:flex;align-items:center;gap:8px;min-height:40px;margin-top:10px;
 text-transform:none;font-size:14px;font-weight:600;color:var(--fg);letter-spacing:0;cursor:pointer}
label.kam-schalter input[type=checkbox]{width:20px;min-width:20px;height:20px;
 min-height:0;padding:0;border:0;margin:0;flex:0 0 auto;cursor:pointer}

/* ---- Hilfe (v3.03) -------------------------------------------------------
   Der Info-Knopf steht meist in einem <h2>. Die globalen Grundregeln muessen
   deshalb ausdruecklich zurueckgesetzt werden - sonst waere er 40 px hoch
   (button{padding:10px 13px}) und seine Beschriftung GROSS und gesperrt
   (h2{text-transform:uppercase;letter-spacing:.05em}). Gleiche Falle wie bei
   .bar gegen [hidden] und table{min-width:1000px}, siehe CLAUDE.md 59/60.5. */
.hilfe-knopf{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
 width:20px;height:20px;min-height:0;padding:0;margin-left:7px;vertical-align:middle;
 border:1.5px solid var(--blue);border-radius:50%;background:transparent;color:var(--blue);
 font:700 12px/1 Georgia,"Times New Roman",serif;text-transform:none;letter-spacing:0}
.hilfe-knopf:hover{background:var(--blue);color:#fff}
.settings-section-head .hilfe-knopf{border-color:var(--blue-dark);color:var(--blue-dark)}
.settings-section-head .hilfe-knopf:hover{background:var(--blue-dark);color:#fff}
/* In der Registerleiste sitzt der Knopf am Ende und darf nicht mitschrumpfen. */
.ra-register .hilfe-knopf{align-self:center;margin-left:2px}

.hilfe-box{max-width:660px}
.hilfe-text{font-size:13px;line-height:1.55}
.hilfe-text p{margin:0 0 9px}
.hilfe-text ul{margin:0 0 9px;padding-left:20px}
.hilfe-text li{margin:0 0 4px}
.hilfe-text b{color:var(--blue-dark)}
.hilfe-pdf{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;
 border-radius:9px;background:var(--blue-light);color:var(--blue-dark);
 font-weight:800;font-size:13px;text-decoration:none}
.hilfe-pdf:hover{filter:brightness(.96)}

/* Reststuecke-Lager (v3.04): der Block unter der Zuschnittliste. Bewusst
   dezent - er ist ein Hinweis, keine Rechnung. */
.rest-block{margin:8px 0 4px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:rgba(127,127,127,.06)}
.rest-block .bar{margin-top:4px}
/* Der kleine "Hier verwenden"-Knopf in einer Restzeile. Die globale
   button-Grundregel macht ihn sonst gross und ueber die volle Breite. */
.rest-klein-knopf{display:inline-block;width:auto;min-height:26px;padding:2px 8px;
  margin-left:6px;font-size:11.5px;text-transform:none;vertical-align:baseline}
.rest-verwendet{font-weight:600}

/* Materialbilanz (v3.26): Ausgangsmaterial -> Schnittfuge -> Zuschnitte ->
   Reststueck. Bewusst als Flex-Zeilen und NICHT als <table> - die globale
   Grundregel table{min-width:1000px} wuerde sie sonst aus dem Bild schieben
   (CLAUDE.md 60.5). */
.zu-bilanz{margin:8px 0 4px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:rgba(127,127,127,.06)}
.zu-bilanz-kopf{font-weight:700;margin-bottom:4px}
.zu-bilanz-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
  padding:2px 0;font-size:12.5px;line-height:1.35}
.zu-bilanz-name{flex:1 1 130px;min-width:0;word-break:break-word;color:var(--muted)}
.zu-bilanz-wert{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600}
.zu-bilanz-anteil{flex:0 0 44px;text-align:right;color:var(--muted);
  font-variant-numeric:tabular-nums}
.zu-bilanz-summe{border-bottom:1px solid var(--line);padding-bottom:4px;
  margin-bottom:2px}
.zu-bilanz-summe .zu-bilanz-name{color:inherit;font-weight:700}
.zu-bilanz-fuss{margin-top:5px;color:var(--muted)}

/* ---- Offline-Warteschlange (v3.04) ------------------------------------ */
/* Der Knopf erscheint nur, wenn wirklich etwas wartet - er ist deshalb
   auffaellig, aber nicht schreiend. .bar[hidden] gilt hier nicht, der
   Knopf ist ein <button>: dessen [hidden] wird vom Browser respektiert,
   solange keine Klassenregel ein display setzt (CLAUDE.md 59). */
.ws-knopf{display:block;width:100%;margin:8px 0;min-height:42px;
  background:#fff5e0;border:1px solid #e3b34a;color:#7a4d00;
  border-radius:8px;font-weight:600;text-transform:none;cursor:pointer}
.ws-knopf[hidden]{display:none}
.ws-knopf.rot{background:#fdecea;border-color:#d9534f;color:#8a1f1a}
.ws-eintrag{border:1px solid var(--line);border-radius:8px;padding:8px;margin:6px 0;
  background:var(--card)}
.ws-eintrag.ws-konflikt{border-color:#d9534f;background:#fdecea}
.ws-eintrag.ws-fehler{border-color:#e3b34a;background:#fff5e0}
.ws-kopf{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;justify-content:space-between}
.ws-zeit{font-size:11px;color:var(--muted)}
.ws-titel{font-size:13px;word-break:break-word}
.ws-meldung{font-size:12px;margin-top:4px}
.ws-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ws-knoepfe button{flex:1 1 auto;min-height:38px}
.pstatus-wartet{border-color:#e3b34a;color:#7a4d00}

/* ---- Spaltenzuordnung beim Excel-Import (v3.04) ----------------------- */
.import-mapping{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;
  padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.import-mapping .small{flex:1 1 100%}
.import-feld{flex:1 1 160px;display:flex;flex-direction:column;gap:2px;
  /* Die globale label-Regel schreibt gross und klein - hier waere das
     unleserlich, weil die Feldnamen Punkte und Bindestriche tragen. */
  text-transform:none;font-size:11px;color:var(--muted)}
.import-feld select{min-height:38px;font-size:13px}

/* ---- v3.05 Arbeitsstatus der Massaufnahme -------------------------------
   Gleiche Bauform wie der Projektstatus (v2.46): Zeichen + Text + Farbe,
   nie die Farbe allein. */
/* Der Zuweisungs-Dialog oeffnet UEBER dem Massaufnahme-Formular. Alle
   .modal teilen z-index 500, dann entscheidet die Reihenfolge im Dokument -
   und das Formular steht weiter unten. Ohne diese Zeile laege der Dialog
   dahinter. Kein display hier, sonst schlaegt die Regel [hidden] (CLAUDE.md 59). */
#mwZuweisenModal,#mwKorrigierenModal{z-index:700}
.mw-bereich{margin-top:14px;border-top:2px solid var(--card-line);padding-top:10px}
.mw-badge{display:inline-block;font-size:11px;font-weight:900;line-height:1.5;
 border:1px solid currentColor;border-radius:999px;padding:1px 8px;white-space:nowrap}
.mw-grau{color:var(--muted)}
.mw-blau{color:var(--blue)}
.mw-rot{color:var(--red)}
.mw-orange{color:#a35a06}
.mw-gruen{color:var(--green)}
html.dark .mw-gruen{color:#4cc79a}
html.dark .mw-rot{color:#f08b80}
html.dark .mw-orange{color:#e0a35c}
.mw-kopf{margin-bottom:8px}
.mw-liste{margin-bottom:10px}
.mw-zeile{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
 font-size:12px;padding:4px 0;border-bottom:1px solid var(--card-line);min-width:0}
.mw-zeile:last-child{border-bottom:0}
.mw-zeile .mw-label{flex:0 0 118px;font-size:9px;font-weight:900;color:var(--muted);
 text-transform:uppercase;letter-spacing:.03em}
.mw-zeile>span:last-child{flex:1 1 140px;min-width:0;word-break:break-word}
.mw-zeit{color:var(--muted);font-size:11px}
.mw-aktionen{display:flex;flex-direction:column;gap:6px}
.mw-voll{width:100%;min-height:44px}
.mw-fehler{color:var(--red);font-weight:700}
/* v3.06: Die Freigabe ist verfallen. Bewusst mit Zeichen UND Text, nicht nur
   ueber die Farbe - wie die Statusabzeichen. */
.mw-warnung{border:1.5px solid var(--red);border-radius:8px;padding:8px 10px;
 margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--red);font-weight:700;
 word-break:break-word}
html.dark .mw-warnung{border-color:#f08b80;color:#f08b80}
/* v3.14: ruhige Meldung nach der Freigabe (Standard-Zuweisung). Kein Fehler,
   deshalb gruen und ohne Ausrufezeichen. Setzt kein display, damit das
   [hidden]-Attribut wirkt (CLAUDE.md 59). */
.mw-hinweis{border:1.5px solid var(--green);border-radius:8px;padding:8px 10px;
 margin:8px 0 0;line-height:1.45;color:var(--green);word-break:break-word}
.mw-hinweis[hidden]{display:none}

/* ---- v3.05 Persoenliche Aufgaben auf der Startseite --------------------- */
.aufgabe{border:1px solid var(--card-line);border-left:4px solid var(--muted);
 border-radius:10px;padding:9px 11px;margin-bottom:8px;background:var(--card-bg)}
.aufgabe-rot{border-left-color:var(--red)}
.aufgabe-orange{border-left-color:#d98014}
.aufgabe-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;font-size:9px;
 font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
 margin-bottom:3px;min-width:0;word-break:break-word}
.aufgabe-marke{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.aufgabe-marke-rot{background:var(--red)}
.aufgabe-marke-orange{background:#d98014}
.aufgabe-titel{font-size:13px;font-weight:800;word-break:break-word;line-height:1.3}
.aufgabe-zusatz{font-size:11px;color:var(--muted);word-break:break-word;margin-top:2px}
.aufgabe-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.aufgabe-knoepfe button{flex:1 1 auto;min-height:40px}
.aufgabe-haupt{flex:1 1 100%}
@media(min-width:520px){.aufgabe-haupt{flex:1 1 auto}}
/* v3.07 Die Karte ist zugeklappt eine Zeile hoch. Der Kopf ist ein echter
   Knopf (Tastatur), der Info-Knopf steht daneben - ein Knopf im Knopf waere
   kein gueltiges HTML. */
.aufgaben-karte{padding:0;overflow:hidden}
.aufgaben-leiste{display:flex;align-items:center;gap:4px;padding-right:10px}
.aufgaben-toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;
 gap:8px;min-height:46px;padding:10px 4px 10px 14px;background:none;color:inherit;
 font-size:13px;font-weight:800;text-align:left;border-radius:16px 0 0 16px;
 text-transform:none;word-break:break-word}
.aufgaben-toggle:hover{filter:none;background:var(--blue-light)}
.aufgaben-dringend{color:var(--red)}
.aufgaben-chevron{flex:0 0 auto;font-size:18px;font-weight:900;color:var(--blue);transition:transform .15s}
.aufgaben-karte.offen .aufgaben-chevron{transform:rotate(90deg)}
.aufgaben-body{display:none;padding:0 14px 12px}
.aufgaben-karte.offen .aufgaben-body{display:block}

/* v3.08 Firmenadmin-Uebersicht ueber alle Massaufnahmen.
   Karten statt Tabelle - eine Tabelle waere auf dem Handy unbrauchbar, und
   die globale Regel table{min-width:1000px} wuerde sie ohnehin aus dem Bild
   schieben (CLAUDE.md 60.5). */
.au-filter{display:grid;grid-template-columns:1fr;gap:6px;margin:8px 0}
@media(min-width:700px){.au-filter{grid-template-columns:2fr 1fr 1fr 1fr}}
.au-zeile{border:1px solid var(--card-line);border-left:4px solid var(--blue);
 border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--card)}
.au-zeile.au-ohne-projekt{border-left-color:var(--red)}
.au-kopf{display:flex;flex-wrap:wrap;gap:4px 8px;margin-bottom:4px}
.au-titel{font-size:13px;font-weight:800;word-break:break-word;line-height:1.3}
.au-zusatz{font-size:11px;color:var(--muted);word-break:break-word;margin-top:2px}
.au-zeit{font-size:10.5px}
.au-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.au-knoepfe button{flex:1 1 auto;min-height:40px}
/* Auf breiten Bildschirmen steht der Knopf neben dem Text statt darunter -
   sonst waere eine Liste mit vielen Massaufnahmen unnoetig lang. Auf dem
   Handy bleibt die gestapelte Karte. */
@media(min-width:700px){
 .au-zeile{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:start}
 .au-kopf,.au-titel,.au-zusatz{grid-column:1}
 .au-knoepfe{grid-column:2;grid-row:1/99;margin-top:0;align-self:center;flex-direction:column;min-width:190px}
 .au-knoepfe button{width:100%}
}
.au-warn{color:var(--red);font-weight:800}

/* ---- Projektmodule-Schalter (v3.09) --------------------------------------
   Die Unterschalter des erweiterten Projekt-/Material-/Werkstattworkflows.
   Wie label.kam-schalter setzt jede Zeile die globalen Grundregeln fuer
   input und label ausdruecklich zurueck (CLAUDE.md 72.5), und weil
   .pm-liste ein eigenes display setzt, braucht sie die [hidden]-Regel
   (CLAUDE.md 59/71.5) - sonst waere die Liste trotz hidden sichtbar. */
.pm-liste{display:grid;gap:8px;margin-top:10px}
.pm-liste[hidden]{display:none}
label.pm-zeile{display:flex;align-items:flex-start;gap:10px;min-height:44px;
 padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);
 text-transform:none;font-size:13px;font-weight:400;color:var(--fg);letter-spacing:0;cursor:pointer}
label.pm-zeile input[type=checkbox]{width:20px;min-width:20px;height:20px;
 min-height:0;padding:0;border:0;margin:2px 0 0;flex:0 0 auto;cursor:pointer}
label.pm-zeile .pm-text{flex:1 1 auto;min-width:0;word-break:break-word}
label.pm-zeile.pm-gesperrt{opacity:.55;cursor:not-allowed}
label.pm-zeile.pm-gesperrt input[type=checkbox]{cursor:not-allowed}

/* ---- Projektweites Material und Zuschnitt (v3.09) -------------------------
   .pmat-tab setzt das globale table{min-width:1000px} ausdruecklich zurueck
   (CLAUDE.md 60.5) - diese Tabellen haben vier Spalten und sollen sich in
   die Seitenbreite einfuegen, nicht seitwaerts scrollen. */
.pmat-gruppe,.pzu-material{border:1px solid var(--line);border-radius:10px;
 padding:10px;margin-bottom:12px;background:var(--card)}
.pmat-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
 margin-bottom:6px;word-break:break-word}
.pmat-kopf b{font-size:15px}
.pmat-unter{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--muted);margin:10px 0 4px}
table.pmat-tab{width:100%;min-width:0;table-layout:auto;font-size:12px}
table.pmat-tab th,table.pmat-tab td{padding:4px 6px;word-break:break-word}
table.pmat-tab td.pmat-zahl,table.pmat-tab th:nth-child(2){text-align:right;white-space:nowrap}
.pmat-quellen{display:flex;flex-wrap:wrap;gap:6px}
button.pmat-quelle{width:auto;min-height:34px;padding:6px 10px;font-size:12px;
 background:var(--card);border:1px solid var(--line);border-radius:8px;
 color:var(--fg);text-transform:none;letter-spacing:0;cursor:pointer;
 max-width:100%;white-space:normal;text-align:left;word-break:break-word}
button.pmat-quelle:hover{border-color:var(--blue)}
.pmat-status{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.pmat-statuszeile{font-size:11px;color:var(--muted);display:flex;
 flex-wrap:wrap;align-items:center;gap:6px;word-break:break-word}
.pzu-herkunft{margin-top:10px}
.pzu-quelle{margin-bottom:8px}
.pzu-quelle .small{margin-top:2px;color:var(--muted);word-break:break-word}
/* v3.86: Auswahl, welche Massaufnahmen in den projektweiten Zuschnitt
   eingehen - eine einfache Kaestchenliste vor den Materialgruppen. */
.pzu-auswahl{border:1px solid var(--line);border-radius:10px;padding:10px;
 margin-bottom:12px;background:var(--card)}
.pzu-auswahl-zeile{display:flex;align-items:center;gap:8px;
 font-size:13px;padding:4px 0;word-break:break-word}
/* v3.09 Materialreservierung. Die Aktionsspalte darf nicht umbrechen, die
   Zeile selbst schon - sonst laeuft sie auf dem Handy seitlich hinaus. */
.resv-akt{white-space:nowrap}
.resv-akt select{width:auto;display:inline-block;margin-right:4px}
.resv-akt button{width:auto;min-height:34px;padding:4px 8px;font-size:12px}
.resv-reste{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.resv-rest-zeile{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
 justify-content:space-between;font-size:12px;padding:4px 0;
 border-bottom:1px solid var(--card-line);min-width:0}
.resv-rest-zeile:last-of-type{border-bottom:0}
.resv-rest-zeile>span:not(.resv-akt){flex:1 1 160px;min-width:0;word-break:break-word}
.resv-rest-zeile>label.resv-pick{flex:0 0 auto}
.resv-rest-zeile button{width:auto;min-height:34px;padding:4px 8px;font-size:12px}

/* ---- Sammelaktionen der Reservierung (v3.13) ------------------------------
   Die Kaestchen setzen die globale input-Grundregel ausdruecklich zurueck
   (CLAUDE.md 72.5) - sonst waeren sie 40 px hoch und traegen einen zweiten
   Rahmen. Ebenso label{text-transform:uppercase}. */
label.resv-pick{display:inline-flex;align-items:center;justify-content:center;
 min-height:30px;min-width:30px;margin:0;padding:0;cursor:pointer;
 text-transform:none;letter-spacing:normal;font-weight:400}
label.resv-pick input[type=checkbox]{width:19px;min-width:19px;height:19px;
 min-height:0;padding:0;border:0;border-radius:0;margin:0;flex:0 0 auto;
 cursor:pointer;accent-color:var(--blue)}
/* Nur fuer Screenreader - sichtbar waere der Text in der schmalen Spalte Laerm. */
.resv-pick-sr{position:absolute;width:1px;height:1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap}
.resv-tab th.resv-pick-th,.resv-tab td.resv-pick-td{width:34px;padding-left:2px;padding-right:2px;text-align:center}
/* .pmat-tab setzt min-width:0, weil es fuer VIER Spalten gedacht ist (siehe
   dort). Diese Tabelle hat sieben - auf einem Handy wurde daraus ein Umbruch
   Buchstabe fuer Buchstabe ("T i t a n z i n k"). Sie bekommt deshalb wieder
   eine Mindestbreite und scrollt in ihrem .scroll-Rahmen seitwaerts, wie die
   uebrigen breiten Tabellen der App (CLAUDE.md 60.5). */
table.resv-tab{min-width:760px}
/* .pmat-tab bricht mit word-break:break-word auch MITTEN im Wort. Hier reicht
   ein Umbruch an der Wortgrenze; nur ein Wort, das allein nicht passt, wird
   noch geteilt. Sonst stand da "Titanzin k". */
table.resv-tab th,table.resv-tab td{word-break:normal;overflow-wrap:break-word}
tr.resv-gewaehlt td:first-child{border-left:3px solid var(--blue)}
.resv-rest-zeile.resv-gewaehlt{border-left:3px solid var(--blue);padding-left:5px}
.resv-bulk{border:1px solid var(--line);border-radius:8px;padding:8px;margin:8px 0}
.resv-bulk-chips{display:flex;flex-wrap:wrap;gap:6px}
.resv-bulk-zahl{margin:6px 0 4px}
/* v3.18: Zeilen aus einer Uebernahme vor v3.17, die ein Rechenergebnis sind.
   Dezent, aber erkennbar - der Aufraeum-Knopf nennt sie beim Namen. */
.resv-abgeleitet{color:var(--muted);font-style:italic}
.resv-abgeleitet-hinweis{margin-top:6px;color:var(--muted)}
.resv-bulk-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.resv-bulk-knoepfe button{width:auto;flex:0 1 auto;min-height:38px;padding:6px 10px;font-size:12px}
.resv-bulk-knoepfe button[disabled]{opacity:.45;cursor:not-allowed}
/* v3.09 Werkstatt. Vollstaendige Uebersicht am Schreibtisch, auf dem Tablet
   und Handy sinnvoll gestapelt - keine unbrauchbaren Mini-Tabellen. */
.werk-projekt{margin-bottom:10px}
.werk-kopf{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
 justify-content:space-between;margin-bottom:6px}
.werk-kopf-titel{flex:1 1 200px;min-width:0;word-break:break-word}
.werk-kopf-titel b{font-size:15px}
.werk-kopf-akt{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px}
.werk-kopf-akt button{width:auto;min-height:38px;padding:6px 10px;font-size:12px}
.werk-grundlage{margin-top:8px;border-top:2px solid var(--line);padding-top:8px}
.werk-block{margin-bottom:10px}

/* v3.09 Vorlagen und Serien */
.vorlage-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
 padding:8px 0;border-bottom:1px solid var(--line)}
.vorlage-zeile:last-child{border-bottom:0}
.vorlage-info{flex:1 1 190px;min-width:0;word-break:break-word}
.vorlage-akt{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px}
.vorlage-akt button{min-height:34px}

/* v3.09 Freigegebene Fassungen */
.ver-liste{margin-top:8px}
.ver-zeile{padding:8px 0;border-bottom:1px solid var(--line)}
.ver-zeile:last-child{border-bottom:0}
.ver-kopf{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.ver-akt{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ver-akt button{min-height:34px}
.ver-diff{margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:8px}
.ver-diff-zeile{display:flex;flex-wrap:wrap;gap:6px;padding:3px 0}
.ver-diff-label{flex:1 1 150px;min-width:0;font-weight:600;color:var(--blue);word-break:break-word}
.ver-diff-wert{flex:1 1 150px;min-width:0;word-break:break-word}

/* v3.09 Modul-Angaben in der Firmenadmin-Uebersicht */
.au-module{margin-top:4px;gap:6px}

/* === v3.10 Der naechste Schritt ========================================== */
/* Streifen ganz oben im Massaufnahme-Formular. Er beantwortet in jedem
   Register dieselbe Frage: was ist jetzt zu tun und wer macht es.
   display:flex schlaegt das [hidden] des Browsers - deshalb die eigene
   Regel darunter (CLAUDE.md 59). */
.mw-streifen{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
 border:1.5px solid var(--card-line);border-left-width:5px;border-radius:9px;
 padding:8px 10px;margin:0 0 10px;background:var(--card)}
.mw-streifen[hidden]{display:none}
.mw-streifen-rot{border-left-color:var(--red)}
.mw-streifen-orange{border-left-color:#d98014}
.mw-streifen-gruen{border-left-color:var(--green)}
.mw-streifen-text{flex:1 1 190px;min-width:0}
.mw-streifen-label{display:block;font-size:9px;font-weight:900;letter-spacing:.5px;
 text-transform:uppercase;color:var(--muted)}
.mw-streifen-satz{display:block;font-size:12px;line-height:1.35;word-break:break-word}
.mw-streifen-knopf{flex:1 1 auto;min-height:42px}
@media(min-width:560px){.mw-streifen-knopf{flex:0 0 auto}}

/* Fortschrittsleiste: fuenf Stationen. Auf schmalen Geraeten scrollt sie
   seitwaerts statt zu brechen - die Reihenfolge ist die Aussage. */
.mw-leiste{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
 margin:0 0 10px;padding-bottom:2px}
.mw-station{flex:1 0 auto;min-width:66px;text-align:center;position:relative;
 padding:0 2px}
.mw-station+.mw-station::before{content:"";position:absolute;left:-50%;right:50%;
 top:9px;height:2px;background:var(--card-line)}
.mw-st-fertig+.mw-station::before,.mw-station.mw-st-fertig::before{background:var(--green)}
.mw-st-marke{position:relative;z-index:1;display:inline-flex;align-items:center;
 justify-content:center;width:20px;height:20px;border-radius:50%;font-size:11px;
 font-weight:900;border:2px solid var(--card-line);background:var(--card);color:var(--muted)}
.mw-st-text{display:block;font-size:9px;font-weight:800;letter-spacing:.3px;
 text-transform:uppercase;color:var(--muted);margin-top:3px;word-break:break-word}
.mw-st-fertig .mw-st-marke{border-color:var(--green);color:var(--green)}
.mw-st-fertig .mw-st-text{color:var(--green)}
.mw-st-jetzt .mw-st-marke{border-color:var(--blue);background:var(--blue);color:#fff}
.mw-st-jetzt .mw-st-text{color:var(--ink)}
.mw-st-uebersprungen .mw-st-marke{border-style:dashed}
html.dark .mw-st-fertig .mw-st-marke,html.dark .mw-st-fertig .mw-st-text{color:#4cc79a}
html.dark .mw-st-fertig .mw-st-marke{border-color:#4cc79a}

/* Der Satz "was ist als Naechstes zu tun" in der Karte am Ende. */
.mw-schritt{display:flex;gap:8px;align-items:flex-start;border-radius:9px;
 padding:9px 10px;margin:0 0 10px;border:1.5px solid var(--card-line);
 border-left-width:5px}
.mw-schritt-rot{border-left-color:var(--red)}
.mw-schritt-orange{border-left-color:#d98014}
.mw-schritt-gruen{border-left-color:var(--green)}
.mw-schritt-marke{font-weight:900;line-height:1.4}
.mw-schritt-label{font-size:9px;font-weight:900;letter-spacing:.5px;
 text-transform:uppercase;color:var(--muted)}
.mw-schritt-satz{font-size:12px;line-height:1.35;color:var(--muted);word-break:break-word}

/* In Listen: der naechste Schritt neben dem Status. */
.mw-next{font-size:11px;font-weight:800}

/* Startseite: die eine Aufgabe, die jetzt dran ist - auch zugeklappt.
   Bewusst eine kompakte Zeile und nicht die volle Karte, damit die Startseite
   nicht wieder einen halben Bildschirm braucht (Grund fuer v3.07). */
.aufgaben-jetzt{padding:0 10px 8px}
.aufgaben-jetzt[hidden]{display:none}
.aufgabe-jetzt-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;
 border:1px solid var(--card-line);border-left:4px solid var(--muted);
 border-radius:8px;padding:7px 9px}
.aufgabe-jetzt-zeile.aufgabe-rot{border-left-color:var(--red)}
.aufgabe-jetzt-zeile.aufgabe-orange{border-left-color:#d98014}
.aufgabe-jetzt-text{flex:1 1 150px;min-width:0;font-size:11px;line-height:1.35;
 color:var(--muted);word-break:break-word}
.aufgabe-jetzt-text b{font-size:12px;color:var(--ink)}
.aufgabe-jetzt-knopf{flex:0 0 auto;min-height:36px;font-size:11px}

/* --- v3.12: Winkel im Meter -------------------------------------------- */
/* Der Knopf steht in engen Tabellenzellen neben dem Eingabefeld. Die
   globale button-Regel (padding 10/13, fett) wuerde ihn dort sprengen -
   sie wird deshalb ausdruecklich zurueckgesetzt (CLAUDE.md 72.5). */
/* Der Dialog kann ueber JEDEM anderen Schirm stehen - auch ueber dem
   Massaufnahme-Formular und ueber dem Zuweisen-Dialog. Alle .modal teilen
   z-index 500, dann entscheidet die Reihenfolge im Dokument (CLAUDE.md 110.6:
   dieselbe Falle hat den Zuweisen-Dialog unbedienbar gemacht). */
#winkelModal{z-index:750}
.winkel-knopf{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
 min-width:34px;height:30px;min-height:0;padding:0 6px;margin-left:5px;vertical-align:middle;
 border:1.5px solid var(--blue);border-radius:8px;background:var(--blue-light);color:var(--blue-dark);
 font:800 10.5px/1 inherit;text-transform:none;letter-spacing:.2px;white-space:nowrap}
.winkel-knopf:hover{background:var(--blue);color:#fff}
/* Der Knopf darf ein enges Zahlenfeld nicht zusammendruecken - genau diese
   Falle hat schon in v2.81 und v2.88 zugeschlagen (CLAUDE.md 88.5/89.5).
   In einer engen Tabellenzelle bricht deshalb der Knopf um, nicht das Feld:
   er ruecht per order ans Ende, das Feld behaelt seine lesbare Mindestbreite. */
*:has(> .winkel-knopf){flex-wrap:wrap}
*:has(> .winkel-knopf) > .winkel-knopf{order:9}
input:has(+ .winkel-knopf){min-width:70px}
.winkel-paar{display:flex;flex-wrap:wrap;gap:10px}
.winkel-feld{flex:1 1 150px;min-width:0}
.winkel-wert{font-size:22px;font-weight:900;color:var(--ink);line-height:1.2}
.winkel-uebernahme{width:100%;min-height:44px;background:var(--blue);color:#fff;
 font-size:15px;text-transform:none;letter-spacing:0}
.winkel-uebernahme:hover{background:var(--blue-dark)}

/* --- v3.12: der rote Faden in der Werkstatt ---------------------------- */
.werk-jetzt{padding:9px 11px;margin-bottom:8px;border-radius:9px;
 background:var(--blue-light);color:var(--blue-dark);font-size:12px;line-height:1.4;
 word-break:break-word}
.werk-projekt .mw-streifen{margin:8px 0 6px}
.werk-projekt .mw-leiste{margin:0 0 8px}
.werk-block-dran{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}

/* ---- v3.15 Material & Zuschnitt ---------------------------------------- */
/* Hauptansicht bewusst als Kartenliste, nicht als Tabelle: die Seite wird auf
   dem Handy in Werkstatt und Baustelle bedient. */
.mz-kennzahlen{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mz-kennzahlen[hidden]{display:none}
.mz-kennzahl{flex:1 1 130px;min-width:0}
.mz-kennzahl label{display:block}
.mz-titel{margin:14px 0 6px;font-size:13px}
.mz-karte{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.mz-karte-fertig{border-color:var(--green)}
.mz-karte-titel{font-weight:700;font-size:14px;word-break:break-word}
.mz-karte-zeile{font-size:12px;color:var(--muted);margin-top:2px;word-break:break-word}
.mz-stand{color:var(--ink);font-weight:700}
.mz-zahl{font-weight:700;color:var(--ink)}
.mz-knopf{width:100%;min-height:44px;margin-top:8px}
.mz-klein{min-height:36px;margin-left:6px}
.mz-balken{height:8px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:6px}
.mz-balken-innen{height:100%;background:var(--blue);border-radius:5px}
.mz-balken-innen.mz-voll{background:var(--green)}
.mz-warn{font-size:12px;color:var(--red);font-weight:700;margin-top:6px;word-break:break-word}
/* v3.25: "Noch nicht freigegeben" ist ein Hinweis, kein Fehler - deshalb
   ruhiger als die rote Warnung darueber. */
.mz-warn.mz-warn-still{color:var(--muted);font-weight:600}
/* v3.25: Die Knopfzeile unter der Zuschnittliste. Die globale mz-knopf-Regel
   (volle Breite) gilt hier ausdruecklich nicht - es sind zwei Knoepfe
   nebeneinander, die auf schmalen Geraeten umbrechen duerfen. */
.mz-karte-akt{margin-top:8px;gap:6px}
.mz-karte-akt button{width:auto;flex:1 1 auto;min-width:0;min-height:40px;font-size:12px}
.mz-rest{font-size:12px;margin:8px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mz-kompakt{line-height:1.5}
.mz-details{margin:10px 0}
.mz-details[hidden]{display:none}
.mz-details>summary{cursor:pointer;padding:8px 4px;font-size:12px;color:var(--muted)}

/* v3.15 Zuschnittstueck abhaken: die Positionsnummern aus v2.88 werden
   bedienbar, statt eine zweite Liste danebenzustellen. Grosse Trefferflaeche,
   ein Tap = erledigt. Die globalen button-Regeln werden dafuer ausdruecklich
   zurueckgesetzt (CLAUDE.md 72.5). */
button.zu-nr.zu-nr-hak{min-height:34px;min-width:34px;padding:2px 8px;cursor:pointer;
 text-transform:none;letter-spacing:0;font-weight:700;line-height:1.1;
 border:1.5px solid var(--line);background:var(--card-bg);color:var(--ink)}
button.zu-nr.zu-nr-hak.ze-ok{border-color:var(--green);background:var(--green);color:#fff}
button.zu-nr.zu-nr-hak.ze-ok::before{content:"✓ "}
/* v3.23: gesetzt, aber noch nicht uebertragen - gestrichelt statt voll. */
button.zu-nr.zu-nr-hak.ze-ok.ze-wartet{background:none;color:var(--green);
 border-style:dashed}
button.zu-nr.zu-nr-hak.ze-ok.ze-wartet::before{content:"⧗ "}
.ze-stand{font-size:11px;color:var(--muted);white-space:nowrap}
.ze-stand.ze-stand-ok{color:var(--green);font-weight:700}
button.ze-alle{min-height:30px;padding:2px 8px;font-size:11px;text-transform:none;
 letter-spacing:0;background:transparent;border:1px solid var(--line);color:var(--muted)}

/* v3.22: Warum hier nicht abgehakt werden kann. Bis v3.21 verschwand das
   Abhaken kommentarlos, sobald das Untermodul "zuschnitt" aus war - der
   Ruester sah eine Liste, die sich nicht anfassen liess. Der Hinweis steht
   unter der Liste, der Schnellschalter daneben.
   Die globale button-Regel (Zeile 23) setzt fette Grossschrift und viel
   Polsterung - beides hier ausdruecklich zurueck (CLAUDE.md 72.5/107). */
.ze-aus-hinweis{margin-top:8px;padding:8px 10px;border-radius:8px;
 background:var(--bg2);border:1px solid var(--line);color:var(--muted);
 display:flex;flex-wrap:wrap;align-items:center;gap:8px}
button.ze-ein{min-height:34px;padding:4px 12px;font-size:12px;
 text-transform:none;letter-spacing:0;font-weight:700;
 background:var(--blue);color:#fff;border:0}

/* ---------------------------------------------------------------------------
   v3.16  Material fuer den Regierapport
   ---------------------------------------------------------------------------
   ACHTUNG - dieselbe Falle wie in CLAUDE.md 59/60.5/71.5/72.5/115.9/118.5:
   ganz oben in dieser Datei stehen sehr breite Grundregeln. Sie treffen hier
   zweimal zu und werden deshalb ausdruecklich zurueckgesetzt:
     label{text-transform:uppercase;font-size:9px}  -> die Auswahlzeile ist
       ein <label> und waere sonst durchgehend GROSS und winzig
     input{width:100%;min-height:40px;border;padding} -> das Kaestchen waere
       40 px hoch mit zweitem Rahmen
   Gemessen, nicht vermutet. */
.rmat-zeile{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  border:1px solid var(--line);border-radius:10px;
  padding:6px;margin:6px 0;background:#fff;
}
.rmat-nr{flex:1 1 130px;min-width:0}
.rmat-menge{flex:0 1 110px}
.rmat-text{flex:2 1 180px;min-width:0;font-size:12px;color:var(--muted);word-break:break-word}
.rmat-unbekannt{color:var(--red)}
.rmat-zeile [data-rmat-weg]{flex:0 0 auto;min-height:34px}

.rmat-gruppe{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.rmat-gruppe:first-child{border-top:0;padding-top:0;margin-top:0}
.rmat-gruppe-kopf{font-size:12px;font-weight:800;color:var(--blue-dark);margin-bottom:4px}
.rmat-wahl{
  display:flex;gap:8px;align-items:flex-start;
  padding:6px;border-radius:8px;cursor:pointer;
  text-transform:none;font-size:13px;font-weight:400;color:inherit;letter-spacing:0;
}
.rmat-wahl:hover{background:var(--bg)}
.rmat-wahl input[type="checkbox"]{
  width:20px;height:20px;min-height:0;padding:0;border:0;margin:2px 0 0;flex:0 0 auto;
}
.rmat-wahl-text{display:flex;flex-direction:column;gap:2px;min-width:0;word-break:break-word}
.rmat-schon{color:var(--red)}

/* v3.24  Zuschnitte und Halbfabrikate uebernehmen.
   Je Zeile eine Positionsauswahl - die App SCHLAEGT VOR, sie behauptet
   nicht. Die globalen Grundregeln fuer label/select werden hier
   ausdruecklich zurueckgesetzt (CLAUDE.md 72.5). */
.rmat-art{
  font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);margin:8px 0 2px;
}
.rmat-wahl-block{border-left:2px solid var(--line);padding-left:6px;margin-bottom:6px}
.rmat-pos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 6px 4px 34px}
.rmat-pos select{flex:1 1 240px;min-width:0;min-height:36px;font-size:12px}
.rmat-pos-fest{padding:0 6px 4px 34px;font-size:12px;color:var(--muted);word-break:break-word}
.rmat-sicher{font-size:11px;color:var(--green);font-weight:700}
.rmat-unsicher{font-size:11px;color:#a35a06;font-weight:700}
html.dark .rmat-unsicher{color:#e0a35c}
.rmat-basis{display:flex;flex-wrap:wrap;gap:10px;padding:0 6px 4px 34px}
.rmat-basis label{
  display:flex;align-items:center;gap:5px;cursor:pointer;
  text-transform:none;font-size:12px;font-weight:400;color:inherit;letter-spacing:0;
}
.rmat-basis input[type="radio"]{width:18px;height:18px;min-height:0;padding:0;border:0;margin:0;flex:0 0 auto}

/* Werkstatt: Zuschnitt direkt abhaken (v3.20). Eine Karte je Massaufnahme -
   Kopf mit Fortschritt, darunter die abhakbare Liste aus js/33.
   v3.21: Die Karte IST die Massaufnahme-Zeile - eine Darstellung, nicht
   zwei. Sie steht ohne Aufklappen da. */
.werk-karte{border:1px solid var(--line);border-radius:8px;padding:8px;margin:8px 0;
 background:var(--card)}
.werk-karte.werk-zu-fertig{border-color:var(--green)}
.werk-karte-jetzt{border-left:4px solid var(--blue)}
/* v3.30: Der Kopf ist der Schalter - deshalb eine ordentliche Trefferflaeche
   und ein Zeiger. Die globalen Grundregeln fuer Knoepfe greifen hier nicht,
   weil es ein div mit role="button" ist (ein echter button duerfte die
   Aktionsknoepfe darin nicht enthalten). */
.werk-karte-kopf{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-bottom:4px;
 cursor:pointer;min-height:40px;padding:2px}
.werk-karte-kopf:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.werk-karte-pfeil{flex:0 0 auto;color:var(--muted);font-size:13px;line-height:1.5;width:14px}
.werk-karte-info{flex:1 1 190px;min-width:0;word-break:break-word}
.werk-karte-warn{color:var(--red);padding:0 2px 4px}
.werk-karte-body{border-top:1px solid var(--line);margin-top:4px;padding-top:6px}
.werk-karte-fuss{margin-top:8px}
.werk-karte-fuss button{width:auto;min-height:38px;padding:6px 10px;font-size:12px}
/* Die vermasste Skizze und der Grundriss - nebeneinander, wenn Platz ist,
   sonst untereinander. Die Zeichner geben ihre eigene Breite mit; hier wird
   nur die Hoehe begrenzt, damit die Zuschnittliste darunter im Bild bleibt. */
.werk-skizzen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:2px 0 8px}
.werk-skizze{flex:1 1 240px;max-width:420px;margin:0;text-align:center}
.werk-skizze figcaption{font-size:11px;color:var(--muted);text-transform:uppercase;
 letter-spacing:.4px;margin-bottom:2px}
/* max-height ist zugleich die Quelle, aus der js/60 (rsVerhaeltnis) die
   passende Breite rechnet - sonst steht eine hohe, schmale Zeichnung klein
   in einem breiten, leeren Rahmen. Die Zahl steht deshalb nur hier. */
.werk-skizze svg{max-width:100%;height:auto;max-height:230px}
.werk-skizze-leer{color:var(--muted);margin-bottom:6px}
.werk-karte-akt{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:6px;
 justify-content:flex-end}
.werk-karte-akt button{width:auto;min-height:38px;padding:6px 10px;font-size:12px}
.werk-zu-text{color:var(--muted)}
.werk-karte.werk-zu-fertig .werk-zu-text{color:var(--green);font-weight:600}
/* Material und Reservierungen - beim Ruesten die Nebensache, deshalb
   zugeklappt. Gleiche Bildsprache wie die Klappbereiche des Cockpits. */
.werk-mehr{margin-top:8px;border-top:2px solid var(--line);padding-top:6px}
.werk-mehr-knopf{width:100%;text-align:left;background:none;border:0;color:var(--muted);
 font-size:12px;min-height:38px;padding:4px 2px;text-transform:none;letter-spacing:0;
 font-weight:600;cursor:pointer}
.werk-mehr-pfeil{display:inline-block;width:14px}
.werk-jetzt-zu{display:block;margin-top:3px;font-weight:600}
.werk-zu-auf{width:100%;text-align:left;background:none;border:1px dashed var(--line);
 border-radius:8px;color:var(--muted);font-size:12px;min-height:38px;padding:6px 8px;
 text-transform:none;letter-spacing:0;cursor:pointer;margin-top:4px}
/* v3.23 Werkstatt: alles geschnitten - der naechste Schritt gehoert unter die
   fertige Liste, nicht klein oben in die Kopfzeile. */
.werk-fertig{margin-top:8px;padding:9px 11px;border-radius:9px;
 border:1px solid var(--green);background:rgba(46,160,67,.08);
 display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.werk-fertig-satz{flex:1 1 200px;min-width:0;font-size:12.5px;font-weight:600;
 color:var(--green);word-break:break-word}
.werk-fertig-knopf{flex:0 0 auto;width:auto;min-height:42px;padding:8px 14px}
.werk-fertig-still{color:var(--muted);font-weight:400;border-color:var(--line);
 background:none;font-size:12px}

/* ---- v3.28 Dialoge, die UEBER einem anderen Dialog stehen ----------------
   Vierter Fall derselben Falle (CLAUDE.md 110.6, 115.8, 117.3): alle .modal
   teilen z-index 500, dann entscheidet die Reihenfolge im Dokument.
   "Material erfassen" (#lagerFormModal, Zeile 565) oeffnet aus den
   Einstellungen (#settingsModal, Zeile 1563) - ohne diese Zeile liegt die
   Karte HINTER den Einstellungen, sichtbar geoeffnet und doch unbedienbar.
   Gemessen ueber elementFromPoint, nicht ueber die z-index-Zahl. */
#lagerFormModal{z-index:700}
/* v3.29: "Rest verwenden" oeffnet ueber dem Massaufnahme-Formular bzw. ueber
   der Seite "Material & Zuschnitt" - derselbe Fall, deshalb dieselbe Ebene.
   Fuenfter Fall der Falle aus 133.5: gemessen, nicht aus der Zahl gelesen. */
#restVerwendenModal{z-index:700}

/* Das Hilfefenster ist von JEDEM Schirm aus erreichbar - auch aus den vier
   hochgesetzten Dialogen (700/750) und aus der Skizzen-Vollbildansicht
   (.sketch-fullscreen, 2000). Es muss deshalb ueber allem liegen; bis v3.27
   stand es auf 500 und oeffnete aus diesen Dialogen heraus unsichtbar
   dahinter. Hoechste Ebene der App - darueber kommt nichts mehr. */
#hilfeModal{z-index:2500}

/* ---- Rest verwenden: Stueckauswahl (v3.29) -------------------------------
   Die Kaestchen setzen die globalen input-Grundregeln zurueck (CLAUDE.md
   72.5) - sonst waeren sie 40 px hoch und truegen einen zweiten Rahmen. */
.rest-stueck-liste{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
/* text-transform muss ausdruecklich zurueckgesetzt werden: die globale
   label-Regel schreibt sonst GROSS, und "250 MM" liest sich falsch
   (CLAUDE.md 72.5 - schon der sechste Fall dieser Falle). */
.rest-stueck-wahl{display:flex;align-items:center;gap:5px;border:1px solid var(--line);
 border-radius:8px;padding:6px 9px;min-height:36px;cursor:pointer;font-size:12px;
 text-transform:none;letter-spacing:normal;color:var(--text)}
.rest-stueck-wahl input[type=checkbox]{width:17px;min-height:0;height:17px;
 margin:0;padding:0;border:0;flex:0 0 auto}
.rest-stueck-wahl b{font-size:12px}
.rest-stueck-wahl.rest-stueck-passt-nicht{opacity:.55}
.rest-verwendet-zeile{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;
 padding:5px 0;border-top:1px solid var(--line);min-width:0}
.rest-verwendet-zeile b{word-break:break-word}