/* ===== Forma ERP – Design: weiß / dunkelblau ===== */
:root {
  --bg:#f6f7f9; --card:#fff; --text:#1a2233; --muted:#6b7385; --line:#e3e7ee;
  --accent:#1f3a68; --accent-dark:#152a4d; --accent-soft:#e8eef8; --rot:#b42318;
  --side:210px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
h2 { font-size:20px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em; }
h3 { font-size:15px; font-weight:600; margin:0; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
small { color:var(--muted); font-size:12.5px; }
p { margin:0; }

/* --- Seitenleiste --- */
header { position:fixed; top:0; bottom:0; left:0; width:var(--side); background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px; padding:22px 14px; z-index:10; }
header h1 { font-size:19px; font-weight:600; letter-spacing:.01em; color:var(--accent); margin:0 10px 22px; cursor:pointer; }
header nav { display:flex; flex-direction:column; gap:2px; }
header nav a, #logout { background:none; border:none; color:var(--text); text-align:left; font-weight:500; font-size:14px;
  padding:9px 10px; min-height:0; border-radius:7px; text-decoration:none; white-space:nowrap; }
header nav a:hover { background:var(--accent-soft); color:var(--accent); text-decoration:none; }
header nav a.aktiv { background:var(--accent-soft); color:var(--accent); font-weight:600; }
#wer { margin-top:auto; padding:10px; font-size:12.5px; color:var(--muted); line-height:1.4; }
#wer b { color:var(--text); font-weight:600; }
#logout { color:var(--muted); }
#logout:hover { background:#f1f2f5; color:var(--text); }
main { margin-left:var(--side); max-width:1040px; padding:28px 36px 60px; }

/* --- Bausteine --- */
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; display:grid; gap:12px; }
.bar { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.bar input { flex:1; }
.kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.kopf h2 { margin-top:2px; }
.abschnitt { display:flex; justify-content:space-between; align-items:center; margin:30px 0 10px; }
.zeile { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 8px; margin:0 -8px; border-bottom:1px solid var(--line); border-radius:6px; }
.eintrag { padding:10px 8px; margin:0 -8px; border-bottom:1px solid var(--line); border-radius:6px; }
.eintrag p { margin-top:2px; }
.zeile:last-child, .eintrag:last-child { border-bottom:none; }
.klick { cursor:pointer; }
a.zeile, a.eintrag { color:inherit; text-decoration:none; }
.zeile.klick:hover, .eintrag.klick:hover, a.zeile:hover, a.eintrag:hover { background:#f7f9fc; text-decoration:none; }
a.hinweis { display:block; color:#2b3a55; text-decoration:none; } a.hinweis:hover { text-decoration:none; border-color:var(--accent); }
.seitenkopf { margin-bottom:16px; }
.login { max-width:420px; margin:40px auto 0; }
.rechts { display:flex; gap:10px; align-items:center; }
.notiz { white-space:pre-wrap; background:#f7f8fa; border:1px solid var(--line); padding:10px 12px; border-radius:8px; }
.leer { color:var(--muted); }
.err { color:var(--rot); }
.ok { color:#1c7a4a; margin:0; }
.hinweis { background:#f4f7fc; border:1px solid #d9e3f3; color:#2b3a55; padding:10px 12px; border-radius:8px; font-size:13.5px; margin:0 0 10px; }
.live { color:var(--muted); min-height:1.2em; font-size:13.5px; }
.lang { white-space:pre-wrap; font-size:13px; color:var(--muted); margin-top:3px; }

/* --- Formulare --- */
label { display:grid; gap:5px; font-size:12.5px; font-weight:500; color:var(--muted); min-width:0; }
input, select, textarea { font:inherit; font-size:15px; color:var(--text); background:#fff; width:100%; min-width:0;
  padding:9px 12px; min-height:42px; border:1px solid var(--line); border-radius:8px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
select { -webkit-appearance:none; appearance:none; padding-right:36px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7385' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center; }
.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
#fForm .raster { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px 14px; }
label.check { display:flex; gap:10px; align-items:center; font-size:14px; color:var(--text); font-weight:400; }
label.check input { min-height:auto; width:18px; height:18px; accent-color:var(--accent); }

/* --- Knöpfe --- */
button { font:inherit; font-size:14px; font-weight:500; cursor:pointer; min-height:40px; padding:8px 16px;
  border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; }
button:hover { background:var(--accent-dark); }
button.sek { background:#fff; color:var(--text); border-color:var(--line); }
button.sek:hover { background:#f4f6f9; }
button.rot { background:#fff; color:var(--rot); border-color:#f0c9c5; }
button.rot:hover { background:#fdf1f0; }
button.mini { min-height:32px; padding:4px 10px; font-size:13px; background:#fff; color:var(--text); border-color:var(--line); }
button.mini:hover { background:var(--accent-soft); color:var(--accent); }
/* Links, die wie Knöpfe aussehen */
a.knopf { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:500; min-height:40px;
  padding:8px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; text-decoration:none; white-space:nowrap; }
a.knopf:hover { background:var(--accent-dark); text-decoration:none; }
a.knopf.sek { background:#fff; color:var(--text); border-color:var(--line); }
a.knopf.sek:hover { background:#f4f6f9; }
a.knopf.mini { min-height:32px; padding:4px 10px; font-size:13px; background:#fff; color:var(--text); border-color:var(--line); }
a.knopf.mini:hover { background:var(--accent-soft); color:var(--accent); }
a.knopf.mini.aktiv { background:var(--accent); color:#fff; border-color:var(--accent); }
label.knopf { display:inline-flex; align-items:center; background:var(--accent); color:#fff; font-size:14px; font-weight:500;
  padding:9px 16px; border-radius:8px; cursor:pointer; position:relative; }
.knopf input { position:absolute; opacity:0; width:1px; height:1px; }

/* --- Tabellen --- */
table { width:100%; border-collapse:collapse; background:#fff; }
.tabwrap, main > div > table, #liste table { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.tabwrap { overflow-x:auto; margin-bottom:14px; }
th { text-align:left; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  background:#fafbfc; padding:10px 12px; border-bottom:1px solid var(--line); }
td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:none; }
tr.klick:hover td { background:#f7f9fc; }
.r { text-align:right; white-space:nowrap; }
.masse { display:flex; gap:6px; flex-wrap:wrap; }
td.masse { display:table-cell; white-space:nowrap; }
td.masse button + button { margin-left:6px; }
.summe table { background:none; }
.summe td { padding:6px 0; border:none; }
.summe tr.zw td { border-top:1px solid var(--line); font-weight:600; padding-top:10px; }
.summe tr.gross td { border-top:1.5px solid var(--text); font-weight:700; font-size:16px; padding-top:10px; }
.zwei { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin-top:14px; }
.zwei > .card { align-content:start; }

/* --- Etiketten --- */
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; }
.s0{background:#eef0f4;color:#475069} .s1{background:#e6effd;color:#1d4ed8} .s2{background:#fdf4e1;color:#8a5a0b}
.s3{background:#e3f5ec;color:#1c7a4a} .s4{background:#fdeee3;color:#a1521d} .s5{background:#f1e8fc;color:#6d3aa8}
.s6{background:#e0f4f4;color:#0f6b6b} .s7{background:#ececee;color:#555} .s8{background:#f5f5f6;color:#999}
.a0{background:#eef0f4;color:#475069} .a1{background:#e6effd;color:#1d4ed8} .a2{background:#e3f5ec;color:#1c7a4a} .a3{background:#fdecea;color:#b42318}
.diag, .frist { padding:2px 9px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; }
.diag.ok, .frist.ok { background:#e3f5ec; color:#1c7a4a; }
.diag.warn, .frist.warn { background:#fdf4e1; color:#8a5a0b; }
.diag.bad, .frist.bad { background:#fdecea; color:#b42318; }

/* --- Übersicht --- */
.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.kachel { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; display:grid; gap:2px; }
.kachel b { font-size:28px; font-weight:600; line-height:1.2; color:var(--accent); }
.statusblock { margin-bottom:14px; }
.statuskopf { display:flex; gap:8px; align-items:center; margin:0 0 6px 2px; }

/* --- Fotos --- */
.fotos { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.fotos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; display:block; }

/* --- Schmale Bildschirme (iPad hochkant, Handy) --- */
@media (max-width: 820px) {
  header { position:sticky; bottom:auto; width:auto; flex-direction:row; align-items:center; padding:10px 14px;
    border-right:none; border-bottom:1px solid var(--line); overflow-x:auto; }
  header h1 { margin:0 14px 0 4px; font-size:17px; white-space:nowrap; flex-shrink:0; }
  header nav { flex-direction:row; }
  #wer { display:none; }
  #logout { margin:0 0 0 auto; }
  main { margin-left:0; padding:18px 16px 50px; }
}

/* --- Termine --- */
.tagkopf { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:16px 0 6px 2px; }
.zeile .zeit { white-space:nowrap; font-weight:500; color:var(--text); }
.zeile.meins { box-shadow:inset 3px 0 0 var(--accent); padding-left:12px; }
.zeile.vorbei { opacity:.5; }
.leute { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:6px; }

/* --- Aufgaben --- */
.zeile.aufgabe { justify-content:flex-start; }
.haken { display:flex; }
.haken input { width:20px; height:20px; min-height:auto; margin:2px 0 0; accent-color:var(--accent); cursor:pointer; }
.aufgabe.fertig b { text-decoration:line-through; color:var(--muted); font-weight:500; }
.reiter { display:flex; gap:6px; }
.zahl { display:inline-block; min-width:18px; padding:0 6px; margin-left:8px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; line-height:18px; text-align:center; }
.schnell { margin-bottom:8px; padding:12px; }
@media (max-width: 820px) { .schnell .bar { flex-wrap:wrap; } }
.schnell button.sek { padding:8px 12px; }

/* --- Plantafel --- */
.plantafel table { table-layout:fixed; min-width:780px; }
.plantafel th:first-child, .plantafel td.pname { width:130px; }
.plantafel th.heute { background:#e8eef8; color:var(--accent); }
.plantafel td.pname { font-weight:600; font-size:13.5px; background:#fafbfc; vertical-align:middle; }
.pzelle { cursor:pointer; padding:6px; height:70px; border-left:1px solid var(--line); }
.pzelle.heute { background:#f4f7fc; }
.pzelle:hover { background:#eef3fb; }
.pchip { background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:6px; padding:5px 7px; margin-bottom:5px; font-size:12.5px; line-height:1.35; cursor:pointer; }
.pchip:hover { border-color:var(--accent); box-shadow:0 1px 3px rgba(20,40,80,.12); }
.pchip small { font-size:11.5px; }
.typ-0 { border-left-color:#1d4ed8; } .typ-1 { border-left-color:#6b7385; } .typ-2 { border-left-color:#b7791f; }
.typ-3 { border-left-color:#1c7a4a; } .typ-4 { border-left-color:#6d3aa8; }
.typ-5 { border-left-color:#0f6b6b; } .typ-6 { border-left-color:#b42318; } .typ-7 { border-left-color:#9aa1b1; }
.pabw { background:#eceef2; color:#475069; border-radius:6px; padding:4px 7px; margin-bottom:5px; font-size:12px; font-weight:600; cursor:pointer;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.pabw.beantragt { background:#fff; border:1.5px dashed #b6bcc8; font-weight:500; }
.pzelle.konflikt { background:#fdf1f0; }
.pzelle.konflikt .pchip { border-color:#e5a39b; }
.pzelle.feiertag { background:#f6f4ee; }
.pfeier { font-size:11.5px; font-weight:600; color:#8a5a0b; margin-bottom:5px; }

/* --- Fehleranzeige --- */
.fehlerbox { background:#fdecea; border-color:#f0c9c5; color:#8a1c12; word-break:break-word; }

/* --- Auswertungen --- */
.kachel b.geld { font-size:22px; }
.diagramm { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; height:200px; }
.mon { display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; }
.saeulen { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; border-bottom:1px solid var(--line); }
.saeule { width:40%; max-width:18px; background:var(--accent); border-radius:3px 3px 0 0; }
.saeule.hell { background:#b9c7e0; }
.leg { display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--accent); margin:0 5px 0 14px; vertical-align:middle; }
.leg.hell { background:#b9c7e0; }
.statusreihe { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; }
.statusreihe div { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.statusreihe b { font-size:20px; font-weight:600; }

/* --- Zeiterfassung + Stempeluhr --- */
.stempelkarte { padding:22px; gap:16px; }
.stempelstatus { font-size:17px; font-weight:600; }
.stempel-an { color:#1c7a4a; } .stempel-pause { color:#8a5a0b; } .stempel-aus { color:var(--muted); }
.stempelknoepfe { display:flex; gap:10px; flex-wrap:wrap; }
.stempelknoepfe button { min-height:52px; font-size:16px; padding:10px 22px; }
.terminal { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.tkarte { background:#fff; color:var(--text); border:1px solid var(--line); border-left:5px solid #c9ced8; border-radius:12px; padding:18px;
  min-height:100px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; text-align:left; }
.tkarte:hover { background:#f7f9fc; text-decoration:none; }
a.tkarte { color:var(--text); text-decoration:none; cursor:pointer; }
.tkarte b { font-size:18px; }
.tkarte.an { border-left-color:#1c7a4a; } .tkarte.pause { border-left-color:#b7791f; }
.pinkarte { max-width:480px; margin:0 auto; }
.pinanzeige { font-size:34px; letter-spacing:.4em; text-align:center; padding:4px; }
.pinpad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pinpad button { min-height:62px; font-size:24px; background:#fff; color:var(--text); border-color:var(--line); }
.pinpad button:hover { background:var(--accent-soft); }
.tmeldung { text-align:center; font-size:24px; padding:50px 10px; }
.pinbox { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; padding:12px; background:#f7f8fa; border-radius:8px; }
.pinbox label { flex:1; min-width:200px; }
.terminal.klein { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.terminal.klein .tkarte { min-height:72px; padding:12px 14px; cursor:default; }
.terminal.klein .tkarte b { font-size:15px; }

/* --- Zeitkonto --- */
.kachel b.minus, b.minus { color:#b42318; }
b.plus { color:#1c7a4a; }
.vertrag { flex-direction:column; align-items:stretch; }
.vertrag button { align-self:flex-start; }
.vertrag .raster { width:100%; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }

/* --- Druck: Angebot, AB, Aufmaßblatt, Stundenzettel --- */
#druck { display:none; }
@media print {
  @page { size: A4; margin: 15mm 18mm 15mm 22mm; }
  body { background:#fff; }
  body > header, main, #leiste { display:none !important; }
  #druck { display:block; color:#000; font:10pt/1.45 -apple-system, "Helvetica Neue", Arial, sans-serif; }
  #druck p { margin:0 0 3mm; }
  #druck .firmenkopf { display:flex; justify-content:space-between; align-items:flex-end; gap:8mm; margin-bottom:9mm; padding-bottom:3mm; border-bottom:1pt solid var(--fc, #C5A252); }
  #druck .fk-zusatz { font-size:9pt; color:#555; margin-top:1mm; }
  #druck .fk-logo { height:26mm; width:auto; display:block; }
  #druck .firmenname { font-size:17pt; font-weight:700; letter-spacing:.3px; color:#1a1a1a; }
  #druck .kopf2 { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10mm; }
  #druck .adresse { min-height:32mm; }
  #druck .absender { font-size:7pt; text-decoration:underline; color:#444; margin-bottom:2mm; }
  #druck table { width:100%; border-collapse:collapse; background:none; border:none; border-radius:0; }
  #druck td, #druck th { border:none; background:none; text-transform:none; letter-spacing:0; }
  #druck .info { width:auto; }
  #druck .info td { padding:0.5mm 0 0.5mm 6mm; }
  #druck .betreff { font-size:12pt; font-weight:700; margin-bottom:4mm; }
  #druck .text { white-space:pre-wrap; }
  #druck .pos { margin-top:4mm; }
  #druck .pos th { text-align:left; font-size:9pt; color:#000; border-bottom:1.2pt solid var(--fc, #000); padding:1.5mm 1mm; }
  #druck .pos th.r { text-align:right; }
  #druck .pos td { border-bottom:.4pt solid #bbb; padding:2mm 1mm; vertical-align:top; }
  #druck .pos tr { page-break-inside:avoid; }
  #druck .lang { white-space:pre-wrap; font-size:9pt; color:#333; margin-top:1mm; }
  #druck .opt td { color:#555; }
  #druck .summen { width:50%; margin:4mm 0 6mm auto; }
  #druck .summen td { padding:1mm; }
  #druck .summen .gesamt td { border-top:1.2pt solid var(--fc, #000); font-weight:700; font-size:11pt; }
  #druck .r { text-align:right; white-space:nowrap; }
  #druck .klein { font-size:8.5pt; color:#444; }
  #druck .gruss { margin-top:12mm; }
  #druck .fuss { display:flex; gap:6mm; margin-top:12mm; padding-top:2mm; border-top:.8pt solid var(--fc, #999); font-size:7pt; color:#444; page-break-inside:avoid; }
  #druck .fuss div { flex:1; }
  #druck .ab-kopf { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1.5pt solid var(--fc, #C5A252); padding-bottom:3mm; margin-bottom:5mm; }
  #druck .ab-titel { font-size:18pt; font-weight:700; color:#1a1a1a; }
  #druck .ab-raum { font-size:12pt; margin-top:1mm; }
  #druck .ab-firma { font-size:9pt; font-weight:600; color:#1a1a1a; text-align:center; }
  #druck .ab-logo { height:16mm; width:auto; display:block; margin:0 auto 1mm; }
  #druck .ab-info { margin-bottom:4mm; }
  #druck .ab-info td { padding:1mm 3mm 1mm 0; vertical-align:top; }
  #druck .ab-info td:nth-child(odd) { color:#555; font-size:8.5pt; width:22mm; }
  #druck .ab-notiz { border:.5pt solid #bbb; padding:2mm 3mm; margin-bottom:4mm; white-space:pre-wrap; }
  #druck .ab-pos th { font-size:8.5pt; text-align:left; color:#000; border-bottom:1.2pt solid #000; padding:1.5mm 1mm; }
  #druck .ab-pos th.r, #druck .ab-pos td.r { text-align:right; }
  #druck .ab-pos td { border-bottom:.4pt solid #bbb; padding:2mm 1mm; vertical-align:top; font-variant-numeric:tabular-nums; }
  #druck .ab-pos tr { page-break-inside:avoid; }
  #druck .ab-bem { font-size:8.5pt; color:#444; }
  #druck .ab-diag { padding:0.4mm 2mm; border-radius:3mm; font-size:8.5pt; font-weight:600; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #druck .ab-diag.ok { background:#d1fae5; } #druck .ab-diag.warn { background:#fef3c7; } #druck .ab-diag.bad { background:#fbd5d5; }
  #druck .ab-hinweis { font-size:8pt; color:#555; margin-top:2mm; }
  #druck .ab-werkstatt { margin-top:6mm; page-break-inside:avoid; }
  #druck .ab-linie { border-bottom:.5pt solid #999; height:8mm; }
  #druck .ab-fotos { display:grid; grid-template-columns:1fr 1fr; gap:4mm; margin-top:6mm; }
  #druck .ab-fotos figure { margin:0; page-break-inside:avoid; }
  #druck .ab-fotos img { width:100%; max-height:90mm; object-fit:contain; border:.5pt solid #ccc; }
  #druck .ab-fotos figcaption { font-size:8pt; color:#555; margin-top:1mm; }
  #druck .ab-fuss { margin-top:6mm; font-size:7.5pt; color:#777; }
  #druck .unterschriften { display:flex; gap:20mm; margin-top:25mm; }
  #druck .entwurf { border:1.5pt solid #b42318; color:#b42318; font-weight:700; text-align:center; padding:2mm; margin-bottom:6mm; letter-spacing:.3px; }
  #druck .unterschriften div { flex:1; border-top:.5pt solid #000; padding-top:1mm; font-size:8pt; }
}
header h1 a, header h1 a:hover { color:inherit; text-decoration:none; }

/* --- Kostenstellen --- */
.kstwahl { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:6px; }
.kst { display:block; cursor:pointer; }
.kst input { position:absolute; opacity:0; width:1px; height:1px; }
.kst span { display:flex; align-items:center; justify-content:center; text-align:center; min-height:52px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--text); font-size:15px; font-weight:500; }
.kst span:hover { border-color:var(--accent); }
.kst input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; }
.kst input:focus-visible + span { box-shadow:0 0 0 3px var(--accent-soft); }
tr.unproduktiv td { color:#8a5a0b; }
.raster.saetze { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

/* --- Tag verteilen --- */
.verteilen { max-width:860px; }
.tagwahl { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.tagchip { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:0; padding:8px 12px; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:10px; white-space:nowrap; }
.tagchip:hover { background:#f4f6f9; }
.tagchip small { font-size:12px; }
.tagchip.offen, .tagchip.teil { border-color:#ecd39c; }
.tagchip.aktiv { background:var(--accent); border-color:var(--accent); color:#fff; }
.tagchip.aktiv small { color:#dfe6f3; }
.vzeile { display:grid; grid-template-columns:2fr 1.4fr 110px auto; gap:10px; align-items:end; padding:10px 0; border-bottom:1px solid var(--line); }
.vknoepfe { display:flex; gap:6px; padding-bottom:4px; }
.vsumme { font-size:15px; padding:6px 0; }
.vsumme .gut { color:#1c7a4a; font-weight:600; }
.vsumme .warn { color:#8a5a0b; }
button.gross, a.knopf.gross { min-height:52px; font-size:16px; }
.offenmarke { font-size:12px; font-weight:600; color:#8a5a0b; background:#fdf4e1; border-radius:999px; padding:2px 9px; }
.kopfhinweis { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
tr.nichtverteilt td { color:#b42318; }
@media (max-width: 700px) { .vzeile { grid-template-columns:1fr 1fr; } }
.stempelknoepfe.gross button { min-height:72px; font-size:20px; }
.vzeile.zblock { grid-template-columns:120px 1.5fr 1fr 44px; }
.zuhr { font-size:11.5px; color:var(--muted); font-weight:400; }
.zzeit { display:flex; flex-direction:column; gap:2px; padding-bottom:8px; }
.zzeit b { font-size:16px; }
@media (max-width: 700px) { .vzeile.zblock { grid-template-columns:1fr 1fr; } }
.vzeile.zblock { align-items:start; }
.zteile span { display:inline-block; margin:0 12px 2px 0; font-size:13.5px; }
.zteile .warn { color:#8a5a0b; }
.pinkarte .kacheln { grid-template-columns:1fr 1fr; }

/* --- Ganze Bildschirmbreite nutzen (Formulare bleiben lesbar schmal) --- */
main { max-width:none; }
#app > form.card { max-width:980px; }

/* --- Rechnungs-Vorbereitung --- */
.vzeile.nachtrag { grid-template-columns:2fr 90px 90px 170px 44px; }
@media (max-width: 700px) { .vzeile.nachtrag { grid-template-columns:1fr 1fr; } }

/* --- Projektablauf --- */
.ablauf { display:flex; gap:4px; margin:14px 0 0; overflow-x:auto; padding-bottom:4px; }
.schritt { flex:1 1 0; min-width:64px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:8px 4px 6px;
  border-radius:10px; background:#fff; border:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.schritt b { font-weight:500; hyphens:manual; overflow-wrap:anywhere; }
.schritt small { font-size:11px; color:var(--muted); line-height:1.2; }
.schritt .punkt { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  background:#eef0f4; color:#8a90a2; }
.schritt.fertig .punkt { background:#e3f5ec; color:#1c7a4a; }
.schritt.fertig b { color:var(--text); }
.schritt.skip .punkt { background:#f5f5f6; color:#bbb; }
.schritt.jetzt { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; color:var(--text); }
.schritt.jetzt .punkt { background:var(--accent); color:#fff; }
.schritt.jetzt b { font-weight:700; }
.schritt.warn .punkt { background:#fdeee3; color:#a1521d; }
.naechster { margin-top:10px; border-left:4px solid var(--accent); }
.naechster .was { font-size:16px; font-weight:600; margin:4px 0 10px; }
.naechster .erinnerung { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; font-size:14px; }
.nfleiste { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.nfleiste .knopf, .nfleiste button { min-height:38px; font-size:14px; }
#wvForm { margin-top:10px; grid-template-columns:200px 1fr auto; }
@media (max-width: 700px) { #wvForm { grid-template-columns:1fr; } }
.nf { align-items:flex-start; }
.nf .nfknoepfe { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.projnext { display:block; margin-top:2px; color:var(--accent); font-size:12.5px; }

/* --- Abnahme / Reklamationen --- */
.sigblock { border:1px solid var(--line); border-radius:10px; padding:10px; background:#fff; }
.sigblock .kopf { margin-bottom:6px; }
canvas.sig { width:100%; height:170px; display:block; border:1.5px dashed #c5cad6; border-radius:8px; background:#fcfcfd; touch-action:none; cursor:crosshair; }
.sigalt { display:flex; align-items:center; gap:10px; }
.sigalt img { max-height:110px; max-width:70%; border:1px solid var(--line); border-radius:8px; background:#fff; }
.vzeile.mangel { grid-template-columns:2fr 170px 70px; }
@media (max-width: 700px) { .vzeile.mangel { grid-template-columns:1fr 1fr; } }
.zeile.rek { justify-content:flex-start; }
.zeile.rek .rektext { flex:1; color:var(--text); text-decoration:none; }
.zeile.rek.erledigt .rektext b { text-decoration:line-through; color:var(--muted); font-weight:400; }
.kst span small { display:block; font-size:12px; color:var(--muted); font-weight:400; }
@media print {
  #druck .sigs { margin-top:12mm; }
  #druck .sigs div { border-top:none; padding-top:0; }
  #druck .sigs .sigbild { height:22mm; display:flex; align-items:flex-end; }
  #druck .sigbild img { max-height:22mm; max-width:70mm; }
  #druck .sigs .siglinie { border-top:.5pt solid #000; padding-top:1mm; font-size:8pt; }
}

.ergwahl .kst span { flex-direction:column; gap:2px; }
.ergwahl .kst input:checked + span small { color:#cfd8ea; }

/* --- Projekt-Board --- */
.board { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 14px; align-items:flex-start; scroll-snap-type:x proximity; }
.bspalte { flex:0 0 236px; background:#eef0f4; border-radius:12px; padding:8px; min-height:max(220px, calc(100vh - 260px)); scroll-snap-align:start; transition:background .15s, box-shadow .15s; }
.bspalte.drueber { background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent) inset; }
.bspkopf { display:flex; justify-content:space-between; align-items:center; padding:4px 6px 10px; }
.bliste { display:flex; flex-direction:column; gap:8px; }
.bleer { color:var(--muted); text-align:center; padding:14px 0; font-size:13px; }
.bkarte { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 10px 10px 8px; cursor:pointer; user-select:none;
  -webkit-user-select:none; box-shadow:0 1px 2px rgba(20,30,50,.05); display:flex; flex-direction:column; gap:3px; }
.bkarte:hover { border-color:#c9d2e3; }
.bkarte.zieht { opacity:.35; }
.bkarte.neu { animation:blink 1s; }
@keyframes blink { from { box-shadow:0 0 0 3px var(--accent); } to { box-shadow:0 1px 2px rgba(20,30,50,.05); } }
.bkarte.geist { position:fixed; left:0; top:0; z-index:100; pointer-events:none; box-shadow:0 12px 30px rgba(20,30,50,.25); margin:0; }
.bkopf { display:flex; align-items:flex-start; gap:6px; }
.bkopf b { flex:1; font-size:14.5px; line-height:1.3; }
.griff { cursor:grab; color:#a3aabb; font-size:18px; line-height:1; padding:2px 4px 6px 2px; margin:-2px 0 -4px; touch-action:none; }
.bkarte small { color:var(--muted); font-size:12.5px; padding-left:22px; }
.bwert { font-weight:600; font-size:13.5px; padding-left:22px; }
.bnext { font-size:12.5px; color:var(--accent); padding-left:22px; }
.bmarken { display:flex; flex-wrap:wrap; gap:4px; padding-left:22px; }
.bmarken:empty { display:none; }
.weiter { min-height:26px !important; padding:2px 8px !important; }

/* --- Projektseite: Kacheln --- */
.ptiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; margin:16px 0 4px; }
.ptile { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:10px 12px; min-height:84px; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:12px; text-align:left; font-weight:400; box-shadow:0 1px 2px rgba(20,30,50,.04); }
.ptile:hover { border-color:#c9d2e3; background:#fff; }
.ptile .pic { font-size:18px; line-height:1.2; }
.ptile b { font-size:19px; font-weight:700; line-height:1.2; }
.ptile small { font-size:12.5px; color:var(--muted); }
.ptile em { font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.ptile.aktiv { border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent) inset; background:var(--accent-soft); }
.ptile.warn b { color:#b42318; }
.ptile.alle { background:transparent; border-style:dashed; }
section.bereich > .abschnitt:first-child { margin-top:14px; }

/* --- Leiste oben: Suche + Neu --- */
#leiste { margin-left:var(--side); padding:14px 36px 0; display:flex; gap:10px; align-items:center; position:sticky; top:0; z-index:9;
  background:linear-gradient(var(--bg) 80%, rgba(246,247,249,0)); padding-bottom:6px; }
#leiste[hidden] { display:none; }
#leiste + main { padding-top:12px; }
.suche { position:relative; flex:1; max-width:560px; }
#suchFeld { width:100%; padding-left:36px; border-radius:22px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7385' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 13px center; }
#suchErg { position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 34px rgba(20,30,50,.16); max-height:70vh; overflow:auto; padding:6px; z-index:20; }
.sgruppe { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px 4px; }
.streffer { display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; color:var(--text); text-decoration:none; }
.streffer:hover, .streffer.an { background:var(--accent-soft); text-decoration:none; }
.streffer b { display:block; font-weight:600; font-size:14px; }
.streffer small { display:block; color:var(--muted); font-size:12.5px; }
.neuwahl { position:relative; margin-left:auto; }
#neuKnopf { border-radius:22px; padding:0 18px; }
#neuMenue { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 34px rgba(20,30,50,.16); padding:6px; min-width:220px; z-index:20; display:flex; flex-direction:column; }
#neuMenue[hidden] { display:none; }
#neuMenue a { display:flex; gap:10px; padding:10px 12px; border-radius:8px; color:var(--text); text-decoration:none; font-size:14.5px; }
#neuMenue a:hover { background:var(--accent-soft); }
@media (max-width: 820px) {
  #leiste { margin-left:0; padding:10px 16px 4px; position:static; background:none; }
}
.bspalte.leer { flex-basis:130px; }

/* Team: Arbeitszeit-Felder im Raster, PIN-Feld schmal */
.vertrag .raster label { min-width:0; }
.vertrag .raster { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px 14px; }
#pinNeu { max-width:160px; display:block; }
.tart { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); max-width:520px; margin-bottom:6px; }

/* --- Plantafel: Zeitleiste in der Woche --- */
.plantafel th { vertical-align:bottom; }
.ptaglink { color:inherit; text-decoration:none; display:block; }
.ptaglink:hover { color:var(--accent); text-decoration:underline; }
.pskala { position:relative; height:13px; margin-top:4px; font-size:9.5px; font-weight:400; color:#8a90a2; text-transform:none; letter-spacing:0; }
.pskala span { position:absolute; transform:translateX(-50%); }
.pskala span:first-child { transform:none; } .pskala span:last-child { transform:translateX(-100%); }
.pzelle { vertical-align:top; }
.pbar { position:relative; height:12px; background:#eef0f4; border-radius:4px; margin:0 0 6px; overflow:hidden; cursor:copy; }
.pbar .tick { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.9); }
.pbar .tick.mittag { background:#c5cad6; }
.seg { position:absolute; top:0; bottom:0; border-radius:3px; opacity:.85; }
.seg.abw { background:repeating-linear-gradient(45deg,#d9dce3 0 4px,#eef0f4 4px 8px); opacity:1; }
.seg.offen { -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent); mask-image:linear-gradient(90deg,#000 40%,transparent); }
.seg.typ-0, .tblock.typ-0 { --c:#1d4ed8; } .seg.typ-1, .tblock.typ-1 { --c:#6b7385; } .seg.typ-2, .tblock.typ-2 { --c:#b7791f; }
.seg.typ-3, .tblock.typ-3 { --c:#1c7a4a; } .seg.typ-4, .tblock.typ-4 { --c:#6d3aa8; } .seg.typ-5, .tblock.typ-5 { --c:#0f6b6b; }
.seg.typ-6, .tblock.typ-6 { --c:#b42318; } .seg.typ-7, .tblock.typ-7 { --c:#9aa1b1; }
.seg { background:var(--c, var(--accent)); }
.pchip .pzeit, .tblock .pzeit { display:block; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pchip b { display:block; font-weight:600; }
.pchip small { display:block; color:var(--muted); }

/* --- Plantafel: Tagesansicht --- */
.tageswrap { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:12px; }
.tageskal { min-width:calc(56px + var(--spalten) * 120px); }
.tkopf, .traster { display:grid; grid-template-columns:56px repeat(var(--spalten), minmax(120px, 1fr)); }
.tkopf { border-bottom:1px solid var(--line); }
.tname { padding:10px 8px; font-weight:600; font-size:13.5px; text-align:center; border-left:1px solid var(--line); }
.ganzzeile { background:#fafbfc; }
.tlabel { font-size:10.5px; color:var(--muted); padding:8px 4px; text-align:right; }
.tganz { border-left:1px solid var(--line); padding:4px; min-height:30px; display:flex; flex-direction:column; gap:4px; }
.tganz .pchip, .tganz .pabw { margin:0; }
.traster { position:relative; }
.tuhr { position:relative; }
.tuhr span { position:absolute; right:8px; transform:translateY(-6px); font-size:11px; color:#8a90a2; font-variant-numeric:tabular-nums; }
.tuhr span:first-child { transform:translateY(2px); }
.tspalte { position:relative; border-left:1px solid var(--line); cursor:copy; z-index:1; }
.tspalte.abwesend { background:repeating-linear-gradient(45deg,rgba(217,220,227,.45) 0 6px,transparent 6px 12px); }
.tlinien { position:absolute; left:56px; right:0; top:0; pointer-events:none; }
.tlinien i { position:absolute; left:0; right:0; border-top:1px solid #eceef3; }
.tlinien i.halb { border-top-style:dotted; border-top-color:#f1f2f6; }
.tlinien i.mittag { border-top-color:#c5cad6; }
.tlinien .jetzt { position:absolute; left:-4px; right:0; border-top:2px solid #e5484d; }
.tlinien .jetzt::before { content:''; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:#e5484d; }
.tblock { position:absolute; overflow:hidden; border-radius:6px; padding:3px 6px; font-size:12px; line-height:1.3; cursor:pointer;
  background:color-mix(in srgb, var(--c) 13%, #fff); border-left:3px solid var(--c); color:var(--text); }
.tblock:hover { box-shadow:0 2px 8px rgba(20,40,80,.18); z-index:2; }
.tblock b { display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tblock small { display:block; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tblock.offen { -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent); }

/* --- Material & Bestellungen --- */
.tabwrap.flach { border:none; box-shadow:none; }
table.bedarf td, table.bpos td { vertical-align:middle; }
table.bedarf tr.erledigt td { color:var(--muted); }
table.bedarf select { min-width:150px; }
table.bpos input { min-width:60px; padding:6px 8px; }
table.bpos td:nth-child(2) input { min-width:200px; }
table.bpos input.r { text-align:right; }
#bArtikel { max-width:280px; }
.gelcb { width:22px; height:22px; min-height:0; accent-color:var(--accent); }

/* --- Lieferanten-Katalog / Shop --- */
.shopleiste { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 10px; }
.shopleiste small { color:var(--muted); margin-right:2px; }
.shopknopf { min-height:36px; font-size:13.5px; }
.ksuche { position:relative; display:block; }
#kTreffer { position:absolute; left:0; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 34px rgba(20,30,50,.16); max-height:340px; overflow:auto; padding:4px; z-index:20; display:block; }
#kTreffer[hidden] { display:none; }
#kTreffer .streffer { cursor:pointer; justify-content:space-between; }
#kTreffer .streffer b.r { font-size:13px; white-space:nowrap; }

/* --- Nachkalkulation --- */
.nktab { width:100%; }
.nktab td, .nktab th { padding:8px 6px; }
.nktab tr.zw td { border-top:1px solid var(--line); font-weight:600; }
.nktab tr.gross td { border-top:1.5px solid var(--text); font-weight:700; font-size:15px; }
.nktab td.minus, .r.minus { color:#b42318; }
.nkbar { position:relative; height:10px; background:#eef0f4; border-radius:5px; overflow:visible; }
.nkbar span { position:absolute; left:0; top:0; bottom:0; background:#1c7a4a; border-radius:5px; }
.nkbar span.knapp { background:#b7791f; }
.nkbar span.ueber { background:#b42318; }
.nkbar i { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--text); }

/* --- Stückliste aus SketchUp --- */
.slzuo select { min-width:220px; }
.slzuo input { width:84px; min-width:0; }
.slzuo tr.offen td { background:#fff7e6; }
.slzuo tr.offen td:first-child { box-shadow:inset 3px 0 0 #f59e0b; }
details > summary { cursor:pointer; font-weight:600; margin:8px 0; }
@media print {
  #druck .sl-druck { margin-bottom:4mm; }
  #druck .abschnitt h3 { font-size:11pt; margin:5mm 0 1mm; }
}
.slaktion { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.slteile tr.aus td { color:var(--muted, #999); text-decoration:line-through; background:#f6f6f6; }
.slteile tr.aus td:last-child { text-decoration:none; }
@media print {
  #druck .sl-mat { margin:6mm 0 1mm; font-size:10.5pt; page-break-after:avoid; }
  #druck .betreff .klein { font-weight:400; }
}
.skbox { border:1px dashed var(--line); border-radius:10px; padding:10px 12px; margin:6px 0 10px; background:rgba(31,58,104,.03); }
.skbox .hinweis { margin-top:0; }
.preisfeld { width:110px; min-width:0; text-align:right; }
.preisfeld.ok { border-color:#16a34a; background:#f0fdf4; }
.preisfeld.fehler { border-color:#dc2626; background:#fef2f2; }
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 0 0; }
.chips > span { font-size:12.5px; color:var(--muted); min-width:64px; }
.chips a { padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--text); font-size:14px; text-decoration:none; }
.chips a small { color:var(--muted); margin-left:2px; }
.chips a.aktiv { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset; }
#aTab tr.grkopf td { background:var(--accent-soft, #eef2f8); font-weight:700; font-size:13px; padding:8px 12px; color:var(--accent, #1f3a68); }
.chips + .bar, .chips + .chips + .bar { margin-top:12px; }
/* --- Zuschnitt-Optimierung --- */
.zbilder { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; margin:10px 0 18px; }
.zbild { margin:0; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; }
.zbild svg { width:100%; height:auto; display:block; }
.zbild figcaption { font-size:12.5px; color:var(--muted); margin-top:4px; }
.zbild .zp { fill:#f3ede4; stroke:#8a7a63; stroke-width:6; }
.zbild .zr { fill:none; stroke:#b9a98f; stroke-width:3; stroke-dasharray:18 12; }
.zbild .zt { fill:#dfe8f5; stroke:#1f3a68; stroke-width:4; }
.zbild text { fill:#1f3a68; font-family:-apple-system, "Helvetica Neue", Arial, sans-serif; font-weight:600; }
.zeinst .raster { align-items:end; }
@media print {
  #druck .zdruck { page-break-inside:avoid; margin:3mm 0 5mm; }
  #druck .zbild { border:none; padding:0; }
  #druck .zbild svg { max-height:120mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #druck .zbild figcaption { font-size:8pt; color:#444; }
}
.typ-8 { border-left-color:#c2410c; }
.seg.typ-8, .tblock.typ-8 { --c:#c2410c; }
.pchip.doppelt, .tblock.doppelt { outline:2px solid #dc2626; outline-offset:-2px; }

/* --- Hausstil: Logo-Vorschau, Briefpapier --- */
.logovorschau { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.logovorschau img { height:90px; width:auto; border:1px solid var(--line); border-radius:8px; background:#fff; padding:6px; }
@media print {
  #druck .briefpapier { height:256mm; overflow:hidden; break-after:avoid; min-height:0; display:flex; flex-direction:column; justify-content:space-between; }
  #druck .briefpapier .fuss { margin-top:0; }
  #druck .ab-pos th { border-bottom-color:var(--fc, #000); }
}

/* --- Artikel-Auswahl zum Durchklicken --- */
.feld { display:block; margin-bottom:12px; }
.feldname { display:block; font-size:13px; color:var(--muted); margin-bottom:5px; }
.awahl { position:relative; }
.awknopf { width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:46px; font-weight:400; }
.awknopf small { color:var(--muted); }
.awknopf.offen { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.awleer { color:var(--muted); }
.awpfeil { color:var(--muted); }
.awpanel { margin-top:6px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px; box-shadow:0 8px 24px rgba(20,30,50,.08); }
.awsuche { width:100%; margin-bottom:8px; }
.awweg { font-size:13px; color:var(--muted); margin:2px 2px 8px; }
.awweg a { color:var(--accent); }
.awinhalt { max-height:360px; overflow:auto; }
.awkacheln { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.awkachel { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; min-height:72px; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:10px; text-align:left; font-weight:400; }
.awkachel:hover { border-color:var(--accent); background:var(--accent-soft); }
.awkachel b { font-size:14px; } .awkachel small { color:var(--muted); font-size:12px; }
.awart { width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 10px; background:none; color:var(--text);
  border:none; border-bottom:1px solid var(--line); border-radius:0; text-align:left; font-weight:400; }
.awart:hover { background:var(--accent-soft); }
.awart small { display:block; color:var(--muted); font-size:12px; }
.awart .r { white-space:nowrap; font-size:13px; }
.awfuss { margin-top:8px; font-size:13px; } .awfuss a { color:var(--muted); }

/* --- Druck-Vorschau --- */
#vorschau { position:fixed; inset:0; z-index:1000; background:rgba(20,26,38,.55); display:flex; flex-direction:column; }
#vorschau .vkopf { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); }
#vorschau .vknoepfe { display:flex; gap:8px; }
#vorschau iframe { flex:1; width:100%; border:0; background:#e9ebef; }
body.vorschau-offen { overflow:hidden; }
@media print { #vorschau { display:none !important; } }
@media print {
  #druck .mliste td.haken { font-size:13pt; width:7mm; }
  #druck .mliste td.bemerk { width:45mm; border-bottom:.4pt solid #bbb; }
  #druck .mliste { margin-bottom:4mm; }
}

/* ---------- Werkstattmappe ---------- */
.mgruppe { border-top:1px solid var(--line); padding:10px 0 4px; }
.mgruppe h3 { margin:0 0 6px; font-size:1rem; }
.mgruppe .mwahl { display:flex; gap:10px; align-items:flex-start; padding:6px 0; }
.mgruppe .mwahl input { margin-top:3px; }
.mgruppe textarea { width:100%; }
@media print {
  #druck .umbruch { break-before:page; page-break-before:always; height:0; }
  #druck .mleistung .mlang { white-space:pre-line; font-size:9pt; color:#333; margin-top:1mm; }
  #druck .mleistung td.haken { font-size:13pt; width:14mm; text-align:center; }
  #druck .mhinweis { margin:4mm 0; }
  #druck .minhalt { margin:1mm 0 3mm 5mm; padding-left:4mm; }
  #druck .minhalt li { margin:.6mm 0; }
  #druck .mplan { display:flex; flex-direction:column; align-items:center; }
  #druck .mplan-kopf { width:100%; display:flex; justify-content:space-between; gap:4mm; font-size:8pt; color:#444; border-bottom:.8pt solid var(--fc, #C5A252); padding-bottom:1mm; margin-bottom:2mm; }
  #druck .mplan img { max-width:100%; max-height:255mm; object-fit:contain; }
}
/* Artikelauswahl in der Stücklisten-Zuordnung: Auswahlfenster in eigener Zeile unter dem Material */
.slzuo td.awzelle { min-width:260px; }
.slzuo tr.awzeile td { padding:0 8px; border-top:none; }
.slzuo tr.awzeile .awpanel { margin:0 0 10px; }
.slzuo tr.awzeile:has(.awpanel[hidden]) td { padding:0; border:none; }
.awknopf .awfrei-txt { color:var(--text); }
.slzuo .awpanel .awsuche { width:100%; }
.awknopf:hover, .awknopf:focus { background:#f7f8fa; color:var(--text); }
.awfuss { display:flex; flex-wrap:wrap; gap:6px 18px; }

/* ---------- Mein Tag ---------- */
.meintag { max-width:760px; }
.mt-kopf { margin:0 0 14px; }
.mt-kopf h2 { font-size:24px; }
.mt-kopf p { color:var(--muted); }
.mt-weg { margin-bottom:12px; font-size:16px; }
.mt-stempel .stempelstatus { font-size:16px; }
.tkarte-tag { margin-bottom:10px; box-shadow:inset 4px 0 0 var(--accent); }
.tkarte-tag.typ-Fertigung { box-shadow:inset 4px 0 0 #b7791f; }
.tkarte-tag.typ-Montage { box-shadow:inset 4px 0 0 #2f855a; }
.tkarte-tag h3 { font-size:18px; margin:4px 0 2px; }
.tk-kopf { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); }
.tk-typ { font-weight:600; color:var(--text); }
.tk-kunde { color:var(--muted); margin-bottom:6px; }
.tkarte-tag .notiz { margin:6px 0; }
.tk-knoepfe { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tk-knoepfe .knopf { min-height:44px; display:inline-flex; align-items:center; }

/* Leiste unten – nur auf dem Handy */
#tabbar { display:none; }
@media (max-width: 600px) {
  #tabbar:not([hidden]) { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid var(--line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content:space-around; }
  #tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 2px; font-size:11px; color:var(--muted); text-decoration:none; border-radius:8px; }
  #tabbar a span { font-size:20px; line-height:1.1; }
  #tabbar a.aktiv { color:var(--accent); background:var(--accent-soft); font-weight:600; }
  main { padding-bottom:90px !important; }
  .stempelknoepfe button { flex:1 1 40%; }
  .tk-knoepfe .knopf { flex:1 1 40%; justify-content:center; }
}
@media print { #tabbar { display:none !important; } }

/* ---------- Plantafel: Projekte einplanen ---------- */
.pprojekte { margin-bottom:12px; padding:12px 14px; }
.pp-kopf { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; margin-bottom:8px; }
.pp-liste { display:flex; flex-wrap:wrap; gap:8px; max-height:190px; overflow-y:auto; }
.pproj { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 10px 6px 6px;
  cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; font-size:13px; line-height:1.3; }
.pproj:hover { border-color:var(--accent); }
.pproj span:nth-child(2) { display:flex; flex-direction:column; }
.pproj .griff { color:var(--muted); font-size:16px; padding:0 2px; }
.pproj .badge { font-size:10.5px; }
.pproj .pp-n { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.pproj.gewaehlt { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent); }
.pproj.zieht { opacity:.35; }
.pproj.geist { position:fixed; left:0; top:0; z-index:100; pointer-events:none; box-shadow:0 12px 30px rgba(20,30,50,.25); }
.pp-wahl { margin-top:8px; font-size:14px; }
.pzelle.drueber { background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent) inset; }
.wahlmodus .pzelle:hover { background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent) inset; }
#einplanen { position:fixed; inset:0; z-index:200; background:rgba(20,26,38,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.ep-fenster { width:min(460px, 100%); max-height:90vh; overflow:auto; margin:0; }
.ep-fenster h3 { font-size:17px; }
.ep-wer { margin:8px 0 4px; }
.ep-warn { background:#fff7e6; border:1px solid #f5d08a; border-radius:8px; padding:8px 10px; font-size:13.5px; margin:8px 0; }
.pchip { touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.pchip.halten { box-shadow:0 0 0 2px var(--accent); transform:scale(1.03); }
.pchip.zieht { opacity:.35; }
.pchip.geist { position:fixed; left:0; top:0; z-index:100; pointer-events:none; box-shadow:0 12px 30px rgba(20,30,50,.25); margin:0; }

/* ---------- Stundensatz-Rechner & Preisbox ---------- */
.sstab input, .sstab select { min-width:0; width:100%; padding:6px 8px; }
.sstab td { padding:4px 3px; }
.sstab th { padding:8px 4px; font-size:11px; }
.sstab td:first-child input { min-width:130px; }
.sstab tr td:nth-child(n+3):nth-child(-n+10) input { width:64px; }
.sstab tr td:nth-child(3) input { width:84px; }
.sstab select { min-width:104px; }
.sstab th { white-space:nowrap; }
.sstab tr.summe td { background:#fafbfc; }
.preisbox .kachel b { font-size:22px; }
.preisbox.schlecht .kachel:last-child { border-color:#f2b8b5; background:#fff5f4; }
.kachel b.minus { color:var(--rot); }
.pstand { font-size:11.5px; color:var(--muted); }
.pstand.alt { color:#b7791f; font-weight:600; }
.preisbox-zeile { display:inline-flex; gap:6px; align-items:center; }
.merkliste { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* ---------- Lager & Etiketten ---------- */
.lkopf .lmasse { font-size:18px; font-weight:600; margin:4px 0; }
.zreste { margin-top:6px; }
.zneu { margin:-4px 0 14px; padding:10px 14px; background:#fbf8ef; border-color:#ecdcae; }
.zbild .zrest, #druck .zbild .zrest { fill:rgba(197,162,82,.18); stroke:#b08a2e; stroke-width:3; stroke-dasharray:14 8; }
.zbild .zresttxt { fill:#7a5c12; font-weight:600; }
.mt-schnell { margin-top:10px; }
@media print {
  #druck .etikett { box-sizing:border-box; width:100mm; height:62mm; padding:3mm 3.5mm; display:flex; gap:3mm; align-items:stretch; overflow:hidden;
    font-family:Arial, Helvetica, sans-serif; color:#000; page-break-inside:avoid; }
  #druck .et-text { flex:1; display:flex; flex-direction:column; gap:1mm; min-width:0; }
  #druck .et-nr { font-size:22pt; font-weight:800; line-height:1; }
  #druck .et-mat { font-size:11pt; font-weight:700; line-height:1.15; max-height:2.35em; overflow:hidden; }
  #druck .et-masse { font-size:17pt; font-weight:800; line-height:1.1; }
  #druck .et-masse small { font-size:10pt; font-weight:600; }
  #druck .et-info { font-size:8.5pt; line-height:1.25; }
  #druck .et-klein { font-size:7pt; color:#333; margin-top:auto; }
  #druck .et-qr { width:29mm; display:flex; align-items:center; justify-content:center; }
  #druck .et-qr svg { width:29mm; height:29mm; display:block; }
  #druck .etbogen { display:grid; grid-template-columns:105mm 105mm; grid-auto-rows:74.25mm; width:210mm; height:297mm; }
  #druck .etfeld { overflow:hidden; display:flex; align-items:center; justify-content:center; }
  #druck .etfeld .etikett { width:105mm; height:74mm; padding:6mm; }
  #druck .zbild .zrest { fill:rgba(197,162,82,.18); stroke:#b08a2e; stroke-width:3; stroke-dasharray:14 8; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
@media print {
  #druck .etu { box-sizing:border-box; width:62mm; height:100mm; display:flex; flex-direction:column; overflow:hidden; font-family:Arial, Helvetica, sans-serif; color:#000; page-break-inside:avoid; }
  #druck .etu-flap { box-sizing:border-box; display:flex; gap:2mm; align-items:center; padding:2mm 2.5mm; overflow:hidden; }
  #druck .etu-unten { transform:rotate(180deg); }
  #druck .etu-flap .et-qr { width:22mm; flex:none; }
  #druck .etu-flap .et-qr svg { width:22mm; height:22mm; }
  #druck .etu-flap .et-text { gap:.6mm; }
  #druck .etu-flap .et-nr { font-size:15pt; }
  #druck .etu-flap .et-mat { font-size:8.5pt; }
  #druck .etu-flap .et-masse { font-size:12pt; }
  #druck .etu-flap .et-masse small { font-size:8pt; }
  #druck .etu-flap .et-info { font-size:6.5pt; }
  #druck .etu-kante { box-sizing:border-box; flex:none; border-top:.4mm dashed #000; border-bottom:.4mm dashed #000; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; line-height:1.05; white-space:nowrap; overflow:hidden; padding:0 2mm; }
  #druck .etu-kante b { font-weight:800; }
  #druck .etu-kante span { font-weight:600; }
}

/* ---------- Nachträge ---------- */
.ntfrei { margin-top:14px; }
.ntfrei.ok { border-color:#bfe3c8; background:#f3fbf5; }
.ntsig { max-height:110px; max-width:100%; display:block; margin:6px 0; }
@media print {
  #druck .ntfreigabe { margin-top:8mm; page-break-inside:avoid; font-size:9.5pt; }
  #druck .ntfreigabe .sigbild { height:22mm; display:flex; align-items:flex-end; margin-top:3mm; }
  #druck .ntfreigabe .sigbild img { max-height:22mm; max-width:70mm; }
  #druck .ntfreigabe .siglinie { width:70mm; border-top:.5pt solid #000; font-size:8pt; padding-top:1mm; }
  #druck .ntfreigabe .unterschriften { margin-top:18mm; }
}
.zeile.ntzeile { padding-left:26px; background:#fafbfc; }

/* ---------- Checkliste ---------- */
.ckgruppe h3 { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.ckzeile { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); }
.ckzeile label { display:flex; gap:10px; align-items:flex-start; flex:1; cursor:pointer; }
.ckzeile input[type=checkbox] { width:22px; height:22px; min-height:auto; margin:0; accent-color:var(--accent); flex:none; }
.ckzeile.ok span { color:var(--muted); text-decoration:line-through; }
.ckwer { white-space:nowrap; }
.ckneu { display:flex; gap:6px; margin-top:8px; }
.ckneu input { flex:1; }
@media print {
  #druck .mqr { float:right; width:26mm; text-align:center; margin:-2mm 0 2mm 4mm; }
  #druck .mqr svg { width:24mm; height:24mm; display:block; margin:0 auto 1mm; }
  #druck .mqr small { font-size:6.5pt; color:#444; }
  #druck .ckdruck td.bemerk { width:55mm; }
}

/* Übersicht als Kacheln */
.uetiles { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; margin-top:18px; }
.uetiles .ptile { min-height:96px; padding:12px 14px; }
.uetiles .ptile b { font-size:24px; }
.uetiles .ptile.null b { color:var(--muted); font-weight:500; }
.uetiles .ptile.null .pic { opacity:.55; }
.kachel.klick { cursor:pointer; }
.kachel.klick:hover { border-color:#c9d2e3; }
@media (max-width:600px) { .uetiles { grid-template-columns:repeat(3,1fr); gap:8px; } .uetiles .ptile { min-height:84px; padding:10px; } .uetiles .ptile b { font-size:20px; } }
@media (max-width:600px) {
  .kacheln { grid-template-columns:1fr 1fr; gap:8px; }
  .kacheln .kachel { padding:10px 12px; }
  .kacheln .kachel b { font-size:22px; }
  .kacheln .kachel small { font-size:11.5px; }
}

/* Erfahrungswerte */
.hinweis.erf ul { margin:6px 0 6px 18px; padding:0; }
.hinweis.erf p { margin:4px 0 0; }
.erftab input { width:70px; text-align:right; }
.nktab tr.aus td { opacity:.55; }
.nktab input[type=checkbox] { width:20px; height:20px; min-height:0; }

/* Übersicht: große Kacheln mit Inhalt */
.widgets { display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:18px; margin-top:18px; align-items:start; }
.widget { background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px 14px 10px; min-width:0; }
.widget.offen { grid-column:1 / -1; }
.widget .abschnitt { margin:8px 0 6px; gap:8px; flex-wrap:wrap; }
.widget .abschnitt h3 { margin:0; font-size:15.5px; display:flex; align-items:center; gap:6px; }
.widget .wic { font-size:17px; }
.widget .wzahl { background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:1px 9px; font-size:13px; font-weight:700; }
.widget.warn .wzahl { background:#fde8e6; color:#b42318; }
.widget.warn { border-color:#f3c6c1; }
.widget .wkopf { display:flex; align-items:center; gap:8px; margin-left:auto; }
.widget .wsub { color:var(--muted); }
.widget.warn .wsub { color:#b42318; font-weight:600; }
.widget > .card { border:0; padding:0; margin:0; box-shadow:none; background:transparent; }
.widget > .card .zeile:last-child { border-bottom:0; }
.widget.leer { padding-bottom:6px; }
.widget.leer > .card .leer { padding:6px 0; margin:0; font-size:13.5px; }
.widget.leer .wzahl { background:#eef0f4; color:var(--muted); }
.widget .wmehr { background:none; border:0; color:var(--accent); padding:6px 0 0; font-size:13.5px; cursor:pointer; min-height:0; }
.widget .wvoll .statusblock { margin-top:8px; }
.wchips { display:flex; flex-wrap:wrap; gap:6px 12px; padding:2px 0 8px; font-size:13px; color:var(--muted); }
@media (max-width:600px) { .widgets { grid-template-columns:1fr; gap:12px; } .widget { padding:2px 12px 8px; } }
.widget.wleer { background:transparent; border-style:dashed; }
.widget.wleer .wchips span { color:var(--muted); }

/* E-Mail-Dialog */
#mailDlg { position:fixed; inset:0; z-index:1100; background:rgba(20,26,38,.5); display:flex; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow:auto; }
#mailDlg .mdlg { width:min(680px,100%); margin:0; }
#mailDlg .kopf h3 { margin:0; }
#mailDlg textarea { font-family:inherit; line-height:1.45; }
#mailDlg .manhang { background:var(--accent-soft); border-radius:8px; padding:8px 12px; font-size:14px; }
#mailForm details { margin:10px 0; }
#mailForm details summary { cursor:pointer; font-weight:600; }
#mailForm .mtest { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:12px; }
#mailForm .mtest label { flex:1; min-width:220px; margin:0; }

/* Posteingang */
.mordner { flex-wrap:wrap; align-items:center; }
.mordner .zahl, #navMail .zahl { margin-left:6px; }
.msuche { margin-left:auto; flex:1; min-width:220px; max-width:360px; }
.msuche input { width:100%; }
.mzeile { display:flex; gap:10px; align-items:flex-start; }
.mzeile .mric { font-size:15px; padding-top:2px; }
.mzeile .mtxt { flex:1; min-width:0; }
.mzeile .mbetr { color:var(--text); }
.mzeile .mvor { color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mzeile .mzeit { white-space:nowrap; text-align:right; color:var(--muted); }
.mzeile.neu .mbetr, .mzeile.neu b { font-weight:700; }
.mzeile.neu { box-shadow:inset 3px 0 0 var(--accent); }
.mailkopf h2 { margin:6px 0 8px; font-size:22px; line-height:1.3; }
.mailkopf > p { margin:0; color:var(--muted); }
.mwerkzeug { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.mwerkzeug > button, .mwerkzeug > a.knopf, .mwerkzeug select { height:40px; min-height:40px; margin:0; padding:0 14px; font-size:14px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.mwerkzeug .mordnerwahl { margin-left:auto; }
.mwerkzeug .mordnerwahl select { min-width:200px; }
form.mzuord { max-width:none; }
.makt .bar > button { height:36px; min-height:36px; display:inline-flex; align-items:center; gap:6px; }
.minhalt iframe { width:100%; min-height:120px; border:0; background:#fff; }
.manh { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pfzeile { display:flex; gap:10px; align-items:center; margin:6px 0; flex-wrap:wrap; }
.pfzeile input[data-pf] { flex:1; min-width:220px; }
.pfzeile .check { margin:0; }

/* Aus Mail wird … */
#aktDlg { position:fixed; inset:0; z-index:1100; background:rgba(20,26,38,.5); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow:auto; }
#aktDlg .mdlg { width:min(560px,100%); margin:0; }
#aktDlg .kopf h3 { margin:0; }
.makt small { color:var(--muted); }
.makt .bar { flex-wrap:wrap; gap:6px; }
.merin { margin:10px 0 0; }
.merin.faellig { border-color:#f3c6c1; background:#fdf1ef; }
.merin.ok { opacity:.75; }
.merin .mini { margin-left:6px; }
.manhz { display:inline-flex; gap:4px; }
.merinwahl select { max-width:220px; }
.babz { margin:6px 0 10px; }

/* Aus Mail wird … */
#aktDlg { position:fixed; inset:0; z-index:1100; background:rgba(20,26,38,.5); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow:auto; }
#aktDlg .mdlg { width:min(560px,100%); margin:0; }
#aktDlg .kopf h3 { margin:0; }
.makt small { color:var(--muted); }
.makt .bar { flex-wrap:wrap; gap:6px; }
.merin { margin:10px 0 0; }
.merin.faellig { border-color:#f3c6c1; background:#fdf1ef; }
.merin.ok { opacity:.75; }
.merin .mini { margin-left:6px; }
.manhz { display:inline-flex; gap:4px; }
.merinwahl select { max-width:220px; }
.babz { margin:6px 0 10px; }

/* Kommunikation im Projekt */
.kneu .bar { flex-wrap:wrap; }
.kneu select { flex:0 0 150px; }
.kneu input { flex:1; min-width:220px; }
.kfilter { flex-wrap:wrap; gap:6px; margin:10px 0 8px; }
.kfilter small { opacity:.7; margin-left:3px; }
.kitem + .kitem { border-top:1px solid var(--line); }
.kzeile { display:flex; gap:10px; align-items:flex-start; padding:10px 2px; color:inherit; text-decoration:none; }
a.kzeile:hover { background:var(--accent-soft); }
.kzeile .kic { font-size:16px; width:22px; text-align:center; }
.kzeile .ktxt { flex:1; min-width:0; }
.kzeile .ktxt small { color:var(--muted); }
.kzeile .kzeit { white-space:nowrap; color:var(--muted); }
.kfrei .ktxt b { color:#1e7a46; }
.kchips a { color:var(--accent); text-decoration:none; }

/* ---------- Zeichnungen ---------- */
.zgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.zkarte { position:relative; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.zkarte.gewaehlt { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.zkarte .zbild { display:flex; align-items:center; justify-content:center; background:#f3f4f6; aspect-ratio:1.414; border-bottom:1px solid var(--line); overflow:hidden; }
.zkarte .zbild img { width:100%; height:100%; object-fit:contain; background:#fff; }
.zkarte .zbild span { font-size:40px; }
.zkarte .ztxt { padding:10px 12px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:14px; flex:1; }
.zkarte .zwahl { position:absolute; z-index:2; top:8px; left:8px; background:#fff; border-radius:6px; padding:4px; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.zkarte .zwahl input { width:20px; height:20px; min-height:auto; accent-color:var(--accent); display:block; }
.zst { display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:20px; background:#eef0f4; color:#4a5263; }
.st-ZurFreigabe .zst { background:#fff4e0; color:#9a5b00; }
.st-Freigegeben .zst { background:#e3f5e8; color:#1d7a3a; }
.zidx { font-size:12px; font-weight:600; color:var(--accent); border:1px solid var(--accent-soft); background:var(--accent-soft); border-radius:20px; padding:2px 8px; }
.st-Entwurf .zbild img, .st-ZurFreigabe .zbild img { opacity:.92; }
.zalt summary { cursor:pointer; font-size:12.5px; color:var(--muted); }
.zalt a { display:block; font-size:12.5px; color:var(--muted); text-decoration:line-through; padding:2px 0; }
.zknopf { display:flex; gap:6px; justify-content:flex-end; margin-top:auto; padding-top:4px; align-self:stretch; }
.zaktion { margin:0 0 10px; flex-wrap:wrap; }
#aktDlg .mdlg.breit { width:min(820px,100%); }
.zliste { display:grid; gap:10px; max-height:62vh; overflow:auto; padding-right:4px; }
.zrow { display:grid; grid-template-columns:auto 150px 1fr; gap:12px; align-items:start; border:1px solid var(--line); border-radius:8px; padding:10px; }
.zrow.aus { opacity:.45; }
.zrow img { width:150px; border:1px solid var(--line); border-radius:4px; background:#fff; }
.zrow .zfelder { display:grid; gap:8px; min-width:0; }
.zraster { display:grid; grid-template-columns:70px 1fr 64px; gap:8px; }
.zhin { color:var(--muted); }
.zfwahl { display:grid; gap:6px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fafbfc; }
.ztoast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:1200; background:var(--text); color:#fff; padding:10px 16px; border-radius:8px; font-size:14px; box-shadow:0 4px 16px rgba(0,0,0,.2); }
@media (max-width:600px) {
  .zrow { grid-template-columns:auto 1fr; }
  .zrow img { width:100%; grid-column:2; }
  .zrow .zfelder { grid-column:1 / -1; }
  .zraster { grid-template-columns:60px 1fr 56px; }
}

/* ---------- Termine: Status, Konflikte, Monat ---------- */
:root { --warn:#c2410c; --warn-bg:#fff7ed; --warn-line:#fdba74; }
.tstatus { display:inline-block; font-size:11.5px; font-weight:600; padding:1px 8px; border-radius:20px; background:#eef0f4; color:#4a5263; vertical-align:1px; }
.tstatus.st-Vorläufig { background:#fff7ed; color:#9a3412; }
.tstatus.st-Bestätigt { background:#e3f5e8; color:#1d7a3a; }
.tstatus.st-Erledigt { background:#eef0f4; color:#4a5263; }
.tstatus.st-Abgesagt { background:#fdecea; color:#b42318; }
.zeile.abgesagt b, .zeile.abgesagt small { text-decoration:line-through; opacity:.6; }
/* Vorläufig = gestrichelt, Abgesagt = durchgestrichen und blass, Erledigt = blass */
.pchip.st-Vorläufig { border-style:dashed; }
.tblock.st-Vorläufig { border-left-style:dashed; outline:1px dashed var(--c); outline-offset:-1px; background:color-mix(in srgb, var(--c) 6%, #fff); }
.mchip.st-Vorläufig { border-left-style:dashed; background:#fff; outline:1px dashed #d5dae3; outline-offset:-1px; }
.pchip.st-Abgesagt, .tblock.st-Abgesagt, .mchip.st-Abgesagt { opacity:.5; }
.pchip.st-Abgesagt b, .tblock.st-Abgesagt b, .mchip.st-Abgesagt { text-decoration:line-through; }
.pchip.st-Erledigt, .tblock.st-Erledigt { opacity:.65; }
.pst { font-style:normal; margin-left:4px; color:var(--muted); }
.tkarte-tag.st-Abgesagt { opacity:.6; } .tkarte-tag.st-Abgesagt h3 { text-decoration:line-through; }
.tk-anspr { margin:4px 0; font-size:14px; }
.tfahrt { position:absolute; border-radius:4px; background:repeating-linear-gradient(135deg, rgba(107,115,133,.12) 0 4px, transparent 4px 8px); pointer-events:none; }
/* Konflikte: Orange = Hinweis, Rot nur kritisch (krank, genehmigter Urlaub) */
.pzelle.konflikt { background:var(--warn-bg); }
.pzelle.konflikt .pchip { border-color:var(--warn-line); }
.pchip.doppelt, .tblock.doppelt { outline:2px solid #ea580c; outline-offset:-2px; }
.pkonflikt { display:grid; gap:6px; }
.pkonflikt .pk { background:var(--warn-bg); border:1px solid var(--warn-line); color:#7c2d12; border-radius:8px; padding:8px 10px; font-size:13.5px; line-height:1.4; }
.pkonflikt .pk.krit { background:#fdecea; border-color:#f3b4ad; color:#8a1c12; }
.ep-warn { background:none; border:0; padding:0; display:grid; gap:8px; }
.tfilter { flex-wrap:wrap; margin:0 0 12px; }
.tfilter select { width:auto; min-width:150px; flex:1 1 150px; }
/* Monatsansicht */
.monat { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.mkopf, .mraster { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); }
.mkopf div { padding:8px; font-size:12px; font-weight:600; color:var(--muted); text-align:left; border-bottom:1px solid var(--line); }
.mtag { min-height:112px; padding:6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px; cursor:pointer; min-width:0; }
.mtag:nth-child(7n) { border-right:0; }
.mtag:hover { background:#fafbfc; }
.mtag.frei { background:#fafafa; }
.mtag.fremd { background:#f7f8fa; } .mtag.fremd .mnr, .mtag.fremd .mchip { opacity:.5; }
.mnr { font-size:13px; font-weight:600; color:var(--text); text-decoration:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.mnr:hover { background:var(--accent-soft); }
.mtag.heute .mnr { background:var(--accent); color:#fff; }
.mtag.heute { box-shadow:inset 0 0 0 2px var(--accent-soft); }
.mfeier { font-size:11px; color:#b7791f; }
.mabw { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mchip { display:block; font-size:12px; line-height:1.3; padding:2px 6px; border-radius:5px; background:#f3f5f9; border:0; border-left-width:3px; border-left-style:solid;
  color:var(--text); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mchip:hover { background:var(--accent-soft); }
.mchip .mz { color:var(--muted); font-variant-numeric:tabular-nums; font-size:11px; }
.mchip i { font-style:normal; color:var(--muted); }
.mmehr { font-size:11.5px; color:var(--muted); }
.monat-liste { display:none; }
@media (max-width:760px) {
  .monat { display:none; }
  .monat-liste { display:block; }
}

/* ---------- Outlook: belegt + Status ---------- */
.seg.belegt { background:repeating-linear-gradient(135deg, #9aa3b2 0 3px, #c9cfd9 3px 6px); opacity:.75; }
.pbelegt { font-size:11.5px; color:#5b6374; background:#f1f3f6; border:1px dashed #c9cfd9; border-radius:6px; padding:3px 7px; margin-bottom:5px; }
.tbelegt { position:absolute; left:2px; right:2px; border-radius:6px; padding:3px 6px; font-size:11.5px; color:#5b6374; overflow:hidden;
  background:repeating-linear-gradient(135deg, #eef0f4 0 6px, #e3e7ee 6px 12px); border:1px dashed #c9cfd9; pointer-events:none; }
.kstzeile { margin:4px 0 0; }
.kst-ok { color:#1d7a3a; } .kst-warn { color:var(--warn); } .kst-aus { color:var(--muted); }
.tol { margin:0; } .tol.bad small { color:var(--warn); }
.kalzeile { display:grid; grid-template-columns:minmax(140px, 1fr) minmax(180px, 1.4fr) auto auto; gap:8px; align-items:center; margin-bottom:8px; }
.kalzeile .check { margin:0; white-space:nowrap; }
@media (max-width:600px) { .kalzeile { grid-template-columns:1fr auto; } .kalzeile input[type=email] { grid-column:1 / -1; grid-row:2; } }
#kalPlus { justify-self:start; }

/* ---------- sevDesk ---------- */
.sevbox { background:#f7f9fc; }
.sevschritte { margin:0; padding-left:20px; display:grid; gap:8px; font-size:14px; }
details.erech { border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:grid; gap:10px; }
details.erech summary { cursor:pointer; font-weight:600; font-size:14px; }

/* ---------- Montagetagebuch ---------- */
.tbform { max-width:760px; }
.tbkacheln { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.tbk { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px; border:2px solid var(--line); border-radius:12px; background:#fff;
  font-size:15px; font-weight:600; color:var(--text); cursor:pointer; min-height:92px; -webkit-user-select:none; user-select:none; }
.tbk input { position:absolute; opacity:0; width:1px; height:1px; }
.tbk .tbic { font-size:26px; line-height:1; }
.tbk.an { border-color:var(--accent); background:var(--accent-soft); }
.tbk[data-tb="mehrarbeit"].an, .tbk[data-tb="behinderung"].an { border-color:#ea580c; background:var(--warn-bg); }
.tbk[data-tb="schaden"].an { border-color:#dc2626; background:#fdecea; }
.tbk[data-tb="alles_ok"].an { border-color:#1d7a3a; background:#e3f5e8; }
.tbmehr { display:grid; gap:8px; border-left:3px solid var(--line); padding:4px 0 4px 12px; }
.tbchips { display:flex; flex-wrap:wrap; gap:8px; }
.tbchips .chip { border:1px solid var(--line); border-radius:20px; padding:8px 14px; font-size:14px; font-weight:500; color:var(--text); cursor:pointer; background:#fff; }
.tbchips .chip input { position:absolute; opacity:0; width:1px; height:1px; }
.tbchips .chip.an { background:var(--accent); color:#fff; border-color:var(--accent); }
.tbfotos { display:grid; gap:8px; }
.tbkamera { justify-self:start; font-size:16px; padding:12px 18px; }
.tbthumbs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tbthumbs img { width:88px; height:88px; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:#fff; }
.tbthumbs span { font-size:13px; color:var(--muted); }
.tbck { border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:grid; gap:8px; }
.tbck summary { cursor:pointer; font-weight:600; }
.tbliste { gap:0; padding:6px 12px; }
.tbeintrag { display:grid; gap:6px; padding:12px 4px; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none; }
.tbeintrag:last-child { border-bottom:0; }
.tbeintrag p { margin:0; font-size:14px; }
.tbkopf { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.tbflags { display:flex; flex-wrap:wrap; gap:6px; }
.tbflag { font-size:12px; background:#eef0f4; border-radius:20px; padding:2px 8px; }
.ntnfbox { display:grid; gap:8px; margin-bottom:12px; }
.ntnfbox p { margin:0; }
.ntquelle { display:grid; gap:6px; margin-bottom:12px; color:var(--text); text-decoration:none; }
.ntquelle p { margin:0; }
.zeile.ntnf a { color:var(--text); text-decoration:none; flex:1; min-width:0; }
.mt-tb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tbdruck h1 { font-size:20px; margin:8px 0; }
.tbd { break-inside:avoid; border-top:1px solid #ccc; padding:8px 0; }
.tbd h3 { margin:0 0 4px; font-size:14px; }
.tbd p { margin:2px 0; font-size:12px; }
.tbdfotos { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin-top:6px; }
.tbdfotos img { width:100%; height:48mm; object-fit:cover; }
.tbdsig { height:18mm; }
@media (max-width:600px) { .tbkacheln { grid-template-columns:1fr 1fr; } .tbk { min-height:80px; font-size:14px; } }

/* Stammdaten: Kacheln + Untermasken */
.sdkacheln { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.sdkachel { display:flex; align-items:center; gap:12px; padding:14px 14px; background:#fff; color:var(--text); border:1px solid var(--line); border-radius:10px; text-decoration:none; min-height:68px; }
.sdkachel:hover { border-color:var(--accent); background:var(--accent-soft); text-decoration:none; }
.sdkachel:hover b, .sdkachel:hover small { text-decoration:none; }
.sdkachel .pic { font-size:22px; width:30px; text-align:center; flex:none; }
.sdkachel > span:nth-child(2) { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sdkachel b { font-size:15px; font-weight:600; }
.sdkachel small { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sdkachel.warn small { color:#b54708; }
.sdkachel.ok small { color:#067647; }
.sdkachel .pfeil { color:var(--muted); font-size:20px; }
.sdfarbe { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; border:1px solid rgba(0,0,0,.15); }
.seitenkopf small a { color:inherit; }
.sdseite > .abschnitt.sdbar { margin:0 0 10px; justify-content:flex-end; }
.sdseite > .abschnitt.sdbar:empty { display:none; }
.sdweiter { margin-top:28px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; font-size:13.5px; }
.sdweiter a { color:var(--muted); text-decoration:none; } .sdweiter a:hover { color:var(--accent); }
input.fehlt { border-color:#f0b37e; background:#fffaf5; }
/* Tagebuch: Neu von der Baustelle */
.tbneu .rechts { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.tbneu.tbwichtig { box-shadow:inset 3px 0 0 #f79009; }
.tbflag.or { background:#fff4e5; color:#b54708; border-color:#f7c27a; }
img.tbmini { width:38px; height:38px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.tbbuero { margin:0 0 12px; }
.tbregie { background:#fff8ee; border:1px solid #f7c27a; border-radius:10px; padding:10px 12px; margin:6px 0; }
.tbregie.ok { background:#ecfdf3; border-color:#a6e4bf; }
.tbgesehen { margin:4px 0 0; }
/* Datensicherung */
a.hinweis.warnhinweis { background:#fff8ee; border-color:#f7c27a; color:#93370d; }
.sichstand { font-size:15px; margin:0 0 10px; } .sichstand.ok { color:#067647; } .sichstand.warn { color:#b54708; }
.sichtab { width:auto; margin:0 0 12px; } .sichtab td { padding:4px 16px 4px 0; border:none; } .sichtab td:first-child { color:var(--muted); }
pre.befehl { background:#1f2937; color:#f9fafb; padding:10px 12px; border-radius:8px; font-size:13px; overflow-x:auto; user-select:all; white-space:pre-wrap; word-break:break-all; }
details.card > summary { cursor:pointer; }

/* ===== Projektseite: Kopf · Als Nächstes · 4 Phasen · Immer dabei ===== */
.pkopf { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.pkopf-l { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pkopf .zurueck { font-size:13.5px; color:var(--muted); }
.pkopf h2 { font-size:26px; font-weight:700; margin:2px 0 0; }
.pkopf p { color:var(--muted); font-size:14.5px; }
.pkopf p a { color:var(--text); }
.pkopf .pbadges { margin-top:4px; }
.pkopf-r { margin:0; align-items:center; }
.mehrmenue { position:relative; }
.mehrmenue > summary { list-style:none; display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:44px; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700; color:var(--text); }
.mehrmenue > summary::-webkit-details-marker { display:none; }
.mehrliste { position:absolute; right:0; top:calc(100% + 6px); z-index:20; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(20,30,50,.14); padding:6px; display:flex; flex-direction:column; min-width:230px; }
.mehrliste a, .mehrliste button { display:block; text-align:left; padding:10px 12px; border-radius:8px; color:var(--text); background:transparent; border:none; font-size:14.5px; min-height:40px; font-weight:400; }
.mehrliste a:hover, .mehrliste button:hover { background:var(--accent-soft); text-decoration:none; color:var(--text); }

/* Als Nächstes: ein Kasten, ein Hauptknopf */
.naechster { margin:0 0 16px; border:none; border-left:none; background:var(--accent); color:#fff; border-radius:14px; padding:18px 22px; }
.naechster > small { color:#c9d3e6; text-transform:uppercase; letter-spacing:.06em; font-size:12px; }
.naechster .was { font-size:19px; font-weight:600; margin:4px 0 12px; color:#fff; }
.naechster .bar .knopf, .naechster .bar button { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.naechster .bar .knopf:first-child, .naechster .bar button:first-child { background:#c5a252; border-color:#c5a252; color:#1a2233; font-weight:700; }
.naechster .bar .knopf:first-child:hover, .naechster .bar button:first-child:hover { background:#d4b46a; }
.naechster .erinnerung { color:#e3e9f4; }
.naechster .erinnerung .frist { background:rgba(255,255,255,.14); color:#fff; }
.naechster .nfleiste { border-top-color:rgba(255,255,255,.18); gap:6px; }
.naechster .nfleiste .knopf, .naechster .nfleiste button { background:transparent; color:#dfe6f2; border-color:transparent; min-height:36px; padding:6px 10px; font-size:13.5px; }
.naechster .nfleiste .knopf:hover, .naechster .nfleiste button:hover { background:rgba(255,255,255,.1); text-decoration:none; }
.naechster #wvForm { margin-top:10px; } .naechster #wvForm label { color:#e3e9f4; }

.playout { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.pmain { flex:999 1 520px; min-width:0; display:flex; flex-direction:column; gap:12px; }
.pside { flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:12px; }

/* Phasen-Reiter mit kleinem Fahrplan */
.phasen { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; }
.phase { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:12px 12px 10px; background:#fff; color:var(--text); border:1px solid var(--line); border-radius:12px; font-weight:400; min-height:44px; }
.phase:hover { background:#fff; border-color:#c9d2e3; }
.phase.aktiv { border:2px solid var(--accent); padding:11px 11px 9px; box-shadow:0 2px 10px rgba(31,58,104,.10); }
.phname { font-weight:700; font-size:16px; }
.phstand { font-size:12.5px; }
.phase.ok .phstand { color:#1c7a4a; } .phase.warn .phstand { color:#a1521d; } .phase.jetzt .phstand { color:var(--accent); font-weight:600; }
.ablauf.mini { display:flex; flex-direction:column; gap:3px; margin:8px 0 0; padding:0; overflow:visible; width:100%; }
.ablauf.mini .schritt { flex:none; min-width:0; flex-direction:row; align-items:center; text-align:left; gap:7px; padding:0; border:none; background:none; box-shadow:none; }
.ablauf.mini .schritt .punkt { width:16px; height:16px; font-size:10px; flex:none; border:1.5px solid #c7cbd2; background:#fff; }
.ablauf.mini .schritt.fertig .punkt { background:#2f8a57; border-color:#2f8a57; color:#fff; }
.ablauf.mini .schritt.jetzt .punkt { background:#c5a252; border-color:#c5a252; color:#1a2233; }
.ablauf.mini .schritt.warn .punkt { background:#c2670f; border-color:#c2670f; color:#fff; }
.ablauf.mini .schritt.skip .punkt { background:#f1f2f4; border-color:#e3e5e8; color:#aaa; }
.ablauf.mini .schritt b { font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; }
.ablauf.mini .schritt.jetzt b { font-weight:700; }
.ablauf.mini .schritt.offen b, .ablauf.mini .schritt.skip b { color:var(--muted); }
.ablauf.mini .schritt small { font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:700px) { .phasen { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Zeilen einer Phase */
.prows { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.phinhalt { display:flex; flex-direction:column; }
.prow { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 16px; min-height:54px; background:#fff; color:var(--text); border:none; border-bottom:1px solid #eef0f3; border-radius:0; font-weight:400; font-size:15px; }
.prow:hover { background:#f8f9fb; }
.prow .pdot { width:12px; height:12px; border-radius:50%; background:var(--accent); flex:none; }
.prow.warn .pdot { background:#c2670f; }
.prow .ptxt { flex:1; min-width:0; display:flex; flex-direction:column; }
.prow .ptxt > span { font-weight:600; }
.prow .ptxt small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prow b { font-size:15px; font-weight:700; color:var(--text); }
.prow.warn b { color:#a1521d; }
.prow .pfeil { color:var(--muted); font-size:20px; line-height:1; }
.prow.aktiv { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.pleer { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 16px; background:#fafbfc; }
.pleer small { margin-right:4px; }
.prow.chip { display:inline-flex; width:auto; min-height:34px; padding:4px 12px; border:1px dashed #c7cbd2; border-radius:8px; background:transparent; font-size:13.5px; color:#3c4655; }
.prow.chip:hover { background:#fff; border-color:var(--accent); color:var(--accent); }
.prow.chip.aktiv { border-style:solid; border-color:var(--accent); background:var(--accent-soft); box-shadow:none; color:var(--accent); }
.pbereiche section.bereich > .abschnitt:first-child { margin-top:6px; }

/* rechte Spalte */
.pside .card { padding:6px 0; }
.pside h3 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 16px 4px; }
.pimmer .prow:last-child { border-bottom:none; }
.pzahlen { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px 16px !important; }
.pzahlen small { display:block; } .pzahlen b { font-size:18px; }
.pzahl { text-align:left; background:transparent; color:var(--text); border:1px solid transparent; padding:4px 6px; margin:-4px -6px; border-radius:8px; min-height:0; font-weight:400; }
.pzahl:hover, .pzahl.aktiv { background:var(--accent-soft); }

/* ===== Menü in Gruppen ===== */
header nav { gap:2px; overflow-y:auto; }
header nav a { font-size:15px; padding:10px 10px; }
.navgruppe { display:flex; flex-direction:column; }
.navgruppe .navkopf { display:flex; align-items:center; justify-content:space-between; }
.navgruppe .navkopf::after { content:'›'; color:var(--muted); font-size:16px; transition:transform .15s; }
.navgruppe.offen .navkopf::after { transform:rotate(90deg); }
.navgruppe .navkopf.drin { color:var(--accent); font-weight:600; }
.navgruppe .navsub { display:none; flex-direction:column; gap:1px; margin:1px 0 4px 10px; padding-left:8px; border-left:2px solid var(--line); }
.navgruppe.offen .navsub { display:flex; }
.navgruppe .navsub a { font-size:14px; padding:8px 10px; }
.navunten { margin-top:14px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; }
.navunten a { color:var(--muted) !important; font-size:14px !important; }
.navunten a.aktiv { color:var(--accent) !important; }
header nav .zahl { margin-left:auto; }
header nav a { display:flex; align-items:center; gap:6px; }
.pside .prow { min-height:46px; padding:9px 16px; }
.prow.leer .pdot { background:#c7cbd2; }
@media (max-width: 820px) {
  header nav { overflow-x:auto; overflow-y:visible; align-items:center; }
  .navgruppe { flex-direction:row; align-items:center; flex:none; }
  .navgruppe .navkopf::after { transform:none !important; }
  .navgruppe.offen .navkopf::after { content:'·'; }
  .navgruppe .navsub { flex-direction:row; margin:0; padding:0 0 0 4px; border-left:none; }
  .navunten { margin:0; padding:0; border:none; flex-direction:row; flex:none; }
}

/* ===== Lagerbestand & Inventur ===== */
.lagertabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; border-bottom:1px solid var(--line); }
.lagertabs a { padding:10px 14px; color:var(--muted); font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; }
.lagertabs a:hover { color:var(--text); text-decoration:none; }
.lagertabs a.aktiv { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
a.kachel { color:var(--text); text-decoration:none; } a.kachel:hover { border-color:var(--accent); text-decoration:none; }
.kachel.warnkachel { border-color:#f7c27a; background:#fffaf2; }
#lbTab tr.knapp td:first-child { box-shadow:inset 3px 0 0 #c2670f; }
.segment { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; width:max-content; max-width:100%; }
.segment label { margin:0; } .segment input { position:absolute; opacity:0; width:1px; height:1px; }
.segment span { display:inline-flex; align-items:center; min-height:42px; padding:0 16px; cursor:pointer; font-weight:500; font-size:14.5px; border-right:1px solid var(--line); background:#fff; }
.segment label:last-child span { border-right:none; }
.segment input:checked + span { background:var(--accent); color:#fff; }
.segment input:focus-visible + span { outline:2px solid var(--accent); outline-offset:-3px; }
.lbentn { margin-top:14px; } .lbentn .kopf h3 { margin:0; }
.lbzeile.geholt { opacity:.65; }
.ivkopf { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:5; }
.ivbalken { height:6px; width:220px; max-width:100%; background:#eef0f3; border-radius:3px; margin-top:6px; overflow:hidden; }
.ivbalken span { display:block; height:100%; background:#2f8a57; transition:width .2s; }
.ivgruppe h3 { margin:20px 0 8px; }
.ivgruppe .card { padding:4px 16px; gap:0; }
.ivzeile { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #eef0f3; }
.ivzeile:last-child { border-bottom:none; }
.ivname { flex:1; min-width:0; display:flex; flex-direction:column; }
.ivmenge { display:flex; align-items:center; gap:8px; margin:0; flex:none; }
.ivmenge input { width:110px; min-height:46px; font-size:18px; text-align:right; font-weight:600; }
.ivmenge span { width:34px; color:var(--muted); font-size:14px; }
.ivzeile.gezaehlt .ivmenge input { background:#ecfdf3; border-color:#a6e4bf; }
.ivmenge input.fehler { border-color:var(--rot); background:#fdf1f0; }
.ivabschluss { margin-top:20px; }
#ivNeuBox { margin-top:16px; } #ivNeuBox form { display:grid; gap:12px; margin-top:12px; }
.ivdruck table { width:100%; } .ivdruck .ivart td { padding-top:10px; border-bottom:1px solid #999; } .ivdruck .ivsum td { font-style:italic; border-top:1px solid #ccc; }
.ivdruck tfoot td { border-top:2px solid #333; padding-top:6px; }
.ivsig { display:flex; gap:40px; margin-top:40px; } .ivsig div { flex:1; border-top:1px solid #333; padding-top:4px; font-size:11px; }
@media (max-width: 820px) { .ivkopf { top:62px; } }
/* ===== Icons (Lucide, ISC-Lizenz) – statt Emojis: einheitlich, folgen der Textfarbe ===== */
i[class^="i-"] { display:inline-block; width:1.1em; height:1.1em; flex:none; vertical-align:-0.18em; background-color:currentColor; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; -webkit-print-color-adjust:exact; print-color-adjust:exact; font-style:normal; }
.i-alarm-clock { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%228%22 /%3E%3Cpath d=%22M12 9v4l2 2%22 /%3E%3Cpath d=%22M5 3 2 6%22 /%3E%3Cpath d=%22m22 6-3-3%22 /%3E%3Cpath d=%22M6.38 18.7 4 21%22 /%3E%3Cpath d=%22M17.64 18.67 20 21%22 /%3E%3C/svg%3E"); }
.i-archive { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2220%22 height=%225%22 x=%222%22 y=%223%22 rx=%221%22 /%3E%3Cpath d=%22M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8%22 /%3E%3Cpath d=%22M10 12h4%22 /%3E%3C/svg%3E"); }
.i-ban { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22M4.929 4.929 19.07 19.071%22 /%3E%3C/svg%3E"); }
.i-bolt { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22 /%3E%3C/svg%3E"); }
.i-building-2 { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M10 12h4%22 /%3E%3Cpath d=%22M10 8h4%22 /%3E%3Cpath d=%22M14 21v-3a2 2 0 0 0-4 0v3%22 /%3E%3Cpath d=%22M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2%22 /%3E%3Cpath d=%22M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16%22 /%3E%3C/svg%3E"); }
.i-calculator { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2216%22 height=%2220%22 x=%224%22 y=%222%22 rx=%222%22 /%3E%3Cline x1=%228%22 x2=%2216%22 y1=%226%22 y2=%226%22 /%3E%3Cline x1=%2216%22 x2=%2216%22 y1=%2214%22 y2=%2218%22 /%3E%3Cpath d=%22M16 10h.01%22 /%3E%3Cpath d=%22M12 10h.01%22 /%3E%3Cpath d=%22M8 10h.01%22 /%3E%3Cpath d=%22M12 14h.01%22 /%3E%3Cpath d=%22M8 14h.01%22 /%3E%3Cpath d=%22M12 18h.01%22 /%3E%3Cpath d=%22M8 18h.01%22 /%3E%3C/svg%3E"); }
.i-calendar { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M8 2v3%22 /%3E%3Cpath d=%22M16 2v3%22 /%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22 /%3E%3Cpath d=%22M3 9h18%22 /%3E%3C/svg%3E"); }
.i-calendar-days { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M8 2v3%22 /%3E%3Cpath d=%22M16 2v3%22 /%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22 /%3E%3Cpath d=%22M3 9h18%22 /%3E%3Cpath d=%22M8 13h.01%22 /%3E%3Cpath d=%22M12 13h.01%22 /%3E%3Cpath d=%22M16 13h.01%22 /%3E%3Cpath d=%22M8 17h.01%22 /%3E%3Cpath d=%22M12 17h.01%22 /%3E%3Cpath d=%22M16 17h.01%22 /%3E%3C/svg%3E"); }
.i-camera { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z%22 /%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%223%22 /%3E%3C/svg%3E"); }
.i-chart-column { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 3v16a2 2 0 0 0 2 2h16%22 /%3E%3Cpath d=%22M18 17V9%22 /%3E%3Cpath d=%22M13 17V5%22 /%3E%3Cpath d=%22M8 17v-3%22 /%3E%3C/svg%3E"); }
.i-circle-alert { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%228%22 y2=%2212%22 /%3E%3Cline x1=%2212%22 x2=%2212.01%22 y1=%2216%22 y2=%2216%22 /%3E%3C/svg%3E"); }
.i-circle-check { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22m16 9-5.5 5.5L8 12%22 /%3E%3C/svg%3E"); }
.i-circle-dot { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3C/svg%3E"); }
.i-circle-help { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3%22 /%3E%3Cpath d=%22M12 17h.01%22 /%3E%3C/svg%3E"); }
.i-circle-x { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22m15 9-6 6%22 /%3E%3Cpath d=%22m9 9 6 6%22 /%3E%3C/svg%3E"); }
.i-clipboard-list { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%228%22 height=%224%22 x=%228%22 y=%222%22 rx=%221%22 ry=%221%22 /%3E%3Cpath d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22 /%3E%3Cpath d=%22M12 11h4%22 /%3E%3Cpath d=%22M12 16h4%22 /%3E%3Cpath d=%22M8 11h.01%22 /%3E%3Cpath d=%22M8 16h.01%22 /%3E%3C/svg%3E"); }
.i-clock { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22M12 6v6l4 2%22 /%3E%3C/svg%3E"); }
.i-coffee { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M10 2v2%22 /%3E%3Cpath d=%22M14 2v2%22 /%3E%3Cpath d=%22M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1%22 /%3E%3Cpath d=%22M6 2v2%22 /%3E%3C/svg%3E"); }
.i-download { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 15V3%22 /%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22 /%3E%3Cpath d=%22m7 10 5 5 5-5%22 /%3E%3C/svg%3E"); }
.i-eraser { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21%22 /%3E%3Cpath d=%22m5.082 11.09 8.828 8.828%22 /%3E%3C/svg%3E"); }
.i-euro { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M4 10h12%22 /%3E%3Cpath d=%22M4 14h9%22 /%3E%3Cpath d=%22M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2%22 /%3E%3C/svg%3E"); }
.i-eye { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22 /%3E%3C/svg%3E"); }
.i-factory { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 16h.01%22 /%3E%3Cpath d=%22M16 16h.01%22 /%3E%3Cpath d=%22M3 19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.5a.5.5 0 0 0-.769-.422l-4.462 2.844A.5.5 0 0 1 15 10.5v-2a.5.5 0 0 0-.769-.422L9.77 10.922A.5.5 0 0 1 9 10.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z%22 /%3E%3Cpath d=%22M8 16h.01%22 /%3E%3C/svg%3E"); }
.i-file-text { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z%22 /%3E%3Cpath d=%22M14 2v5a1 1 0 0 0 1 1h5%22 /%3E%3Cpath d=%22M10 9H8%22 /%3E%3Cpath d=%22M16 13H8%22 /%3E%3Cpath d=%22M16 17H8%22 /%3E%3C/svg%3E"); }
.i-folder { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z%22 /%3E%3C/svg%3E"); }
.i-folder-open { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2%22 /%3E%3C/svg%3E"); }
.i-globe { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22 /%3E%3Cpath d=%22M2 12h20%22 /%3E%3C/svg%3E"); }
.i-graduation-cap { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z%22 /%3E%3Cpath d=%22M22 10v6%22 /%3E%3Cpath d=%22M6 12.5V16a6 3 0 0 0 12 0v-3.5%22 /%3E%3C/svg%3E"); }
.i-hammer { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9%22 /%3E%3Cpath d=%22m18 15 4-4%22 /%3E%3Cpath d=%22m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5%22 /%3E%3C/svg%3E"); }
.i-hard-drive { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M10 16h.01%22 /%3E%3Cpath d=%22M2.212 11.577a2 2 0 0 0-.212.896V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5.527a2 2 0 0 0-.212-.896L18.55 5.11A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z%22 /%3E%3Cpath d=%22M21.946 12.013H2.054%22 /%3E%3Cpath d=%22M6 16h.01%22 /%3E%3C/svg%3E"); }
.i-hard-hat { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5%22 /%3E%3Cpath d=%22M14 6a6 6 0 0 1 6 6v3%22 /%3E%3Cpath d=%22M4 15v-3a6 6 0 0 1 6-6%22 /%3E%3Crect x=%222%22 y=%2215%22 width=%2220%22 height=%224%22 rx=%221%22 /%3E%3C/svg%3E"); }
.i-hash { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cline x1=%224%22 x2=%2220%22 y1=%229%22 y2=%229%22 /%3E%3Cline x1=%224%22 x2=%2220%22 y1=%2215%22 y2=%2215%22 /%3E%3Cline x1=%2210%22 x2=%228%22 y1=%223%22 y2=%2221%22 /%3E%3Cline x1=%2216%22 x2=%2214%22 y1=%223%22 y2=%2221%22 /%3E%3C/svg%3E"); }
.i-history { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8%22 /%3E%3Cpath d=%22M3 3v5h5%22 /%3E%3Cpath d=%22M12 7v5l4 2%22 /%3E%3C/svg%3E"); }
.i-hourglass { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 22h14%22 /%3E%3Cpath d=%22M5 2h14%22 /%3E%3Cpath d=%22M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22%22 /%3E%3Cpath d=%22M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2%22 /%3E%3C/svg%3E"); }
.i-house { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22 /%3E%3Cpath d=%22M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22 /%3E%3C/svg%3E"); }
.i-image { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%223%22 rx=%222%22 ry=%222%22 /%3E%3Ccircle cx=%229%22 cy=%229%22 r=%222%22 /%3E%3Cpath d=%22m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21%22 /%3E%3C/svg%3E"); }
.i-inbox { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpolyline points=%2222 12 16 12 14 15 10 15 8 12 2 12%22 /%3E%3Cpath d=%22M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z%22 /%3E%3C/svg%3E"); }
.i-layers { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z%22 /%3E%3Cpath d=%22M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12%22 /%3E%3Cpath d=%22M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17%22 /%3E%3C/svg%3E"); }
.i-lightbulb { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5%22 /%3E%3Cpath d=%22M9 18h6%22 /%3E%3Cpath d=%22M10 22h4%22 /%3E%3C/svg%3E"); }
.i-lock { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22 /%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22 /%3E%3C/svg%3E"); }
.i-mail { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7%22 /%3E%3Crect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22 /%3E%3C/svg%3E"); }
.i-map-pin { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22 /%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22 /%3E%3C/svg%3E"); }
.i-megaphone { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z%22 /%3E%3Cpath d=%22M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14%22 /%3E%3Cpath d=%22M8 6v8%22 /%3E%3C/svg%3E"); }
.i-message-square { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z%22 /%3E%3C/svg%3E"); }
.i-notebook { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M2 6h4%22 /%3E%3Cpath d=%22M2 10h4%22 /%3E%3Cpath d=%22M2 14h4%22 /%3E%3Cpath d=%22M2 18h4%22 /%3E%3Crect width=%2216%22 height=%2220%22 x=%224%22 y=%222%22 rx=%222%22 /%3E%3Cpath d=%22M16 2v20%22 /%3E%3C/svg%3E"); }
.i-package { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z%22 /%3E%3Cpath d=%22M12 22V12%22 /%3E%3Cpolyline points=%223.29 7 12 12 20.71 7%22 /%3E%3Cpath d=%22m7.5 4.27 9 5.15%22 /%3E%3C/svg%3E"); }
.i-paintbrush { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m14.622 17.897-10.68-2.913%22 /%3E%3Cpath d=%22M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z%22 /%3E%3Cpath d=%22M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15%22 /%3E%3C/svg%3E"); }
.i-paperclip { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551%22 /%3E%3C/svg%3E"); }
.i-pencil-line { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13 21h8%22 /%3E%3Cpath d=%22m15 5 4 4%22 /%3E%3Cpath d=%22M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z%22 /%3E%3C/svg%3E"); }
.i-phone { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384%22 /%3E%3C/svg%3E"); }
.i-pin { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 17v5%22 /%3E%3Cpath d=%22M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z%22 /%3E%3C/svg%3E"); }
.i-plug { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 22v-5%22 /%3E%3Cpath d=%22M15 8V2%22 /%3E%3Cpath d=%22M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z%22 /%3E%3Cpath d=%22M9 8V2%22 /%3E%3C/svg%3E"); }
.i-plus { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12h14%22 /%3E%3Cpath d=%22M12 5v14%22 /%3E%3C/svg%3E"); }
.i-printer { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2%22 /%3E%3Cpath d=%22M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6%22 /%3E%3Crect x=%226%22 y=%2214%22 width=%2212%22 height=%228%22 rx=%221%22 /%3E%3C/svg%3E"); }
.i-receipt { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 17V7%22 /%3E%3Cpath d=%22M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8%22 /%3E%3Cpath d=%22M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z%22 /%3E%3C/svg%3E"); }
.i-rectangle-horizontal { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2220%22 height=%2212%22 x=%222%22 y=%226%22 rx=%222%22 /%3E%3C/svg%3E"); }
.i-refresh-cw { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8%22 /%3E%3Cpath d=%22M21 3v5h-5%22 /%3E%3Cpath d=%22M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16%22 /%3E%3Cpath d=%22M8 16H3v5%22 /%3E%3C/svg%3E"); }
.i-repeat { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m17 2 4 4-4 4%22 /%3E%3Cpath d=%22M3 11v-1a4 4 0 0 1 4-4h14%22 /%3E%3Cpath d=%22m7 22-4-4 4-4%22 /%3E%3Cpath d=%22M21 13v1a4 4 0 0 1-4 4H3%22 /%3E%3C/svg%3E"); }
.i-ruler { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z%22 /%3E%3Cpath d=%22m14.5 12.5 2-2%22 /%3E%3Cpath d=%22m11.5 9.5 2-2%22 /%3E%3Cpath d=%22m8.5 6.5 2-2%22 /%3E%3Cpath d=%22m17.5 15.5 2-2%22 /%3E%3C/svg%3E"); }
.i-scissors { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%226%22 cy=%226%22 r=%223%22 /%3E%3Cpath d=%22M8.12 8.12 12 12%22 /%3E%3Cpath d=%22M20 4 8.12 15.88%22 /%3E%3Ccircle cx=%226%22 cy=%2218%22 r=%223%22 /%3E%3Cpath d=%22M14.8 14.8 20 20%22 /%3E%3C/svg%3E"); }
.i-search { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m21 21-4.34-4.34%22 /%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22 /%3E%3C/svg%3E"); }
.i-send { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z%22 /%3E%3Cpath d=%22m21.854 2.147-10.94 10.939%22 /%3E%3C/svg%3E"); }
.i-settings { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22 /%3E%3C/svg%3E"); }
.i-shopping-cart { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18%22 /%3E%3Cpath d=%22M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25%22 /%3E%3Ccircle cx=%2218%22 cy=%2220%22 r=%222%22 /%3E%3Ccircle cx=%228%22 cy=%2220%22 r=%222%22 /%3E%3C/svg%3E"); }
.i-signature { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m21 17-2.156-1.868A.5.5 0 0 0 18 15.5v.5a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1c0-2.545-3.991-3.97-8.5-4a1 1 0 0 0 0 5c4.153 0 4.745-11.295 5.708-13.5a2.5 2.5 0 1 1 3.31 3.284%22 /%3E%3Cpath d=%22M3 21h18%22 /%3E%3C/svg%3E"); }
.i-smartphone { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2214%22 height=%2220%22 x=%225%22 y=%222%22 rx=%222%22 ry=%222%22 /%3E%3Cpath d=%22M12 18h.01%22 /%3E%3C/svg%3E"); }
.i-tag { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z%22 /%3E%3Ccircle cx=%227.5%22 cy=%227.5%22 r=%22.5%22 fill=%22black%22 /%3E%3C/svg%3E"); }
.i-thermometer { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z%22 /%3E%3C/svg%3E"); }
.i-timer { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cline x1=%2210%22 x2=%2214%22 y1=%222%22 y2=%222%22 /%3E%3Cline x1=%2212%22 x2=%2215%22 y1=%2214%22 y2=%2211%22 /%3E%3Ccircle cx=%2212%22 cy=%2214%22 r=%228%22 /%3E%3C/svg%3E"); }
.i-toolbox { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 12v4%22 /%3E%3Cpath d=%22M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2%22 /%3E%3Cpath d=%22M17 6a2 2 0 011.414.586l3 3A2 2 0 0122 11v8a2 2 0 01-2 2H4a2 2 0 01-2-2v-8a2 2 0 01.586-1.414l3-3A2 2 0 017 6z%22 /%3E%3Cpath d=%22M2 14h20%22 /%3E%3Cpath d=%22M8 12v4%22 /%3E%3C/svg%3E"); }
.i-trash-2 { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M10 11v6%22 /%3E%3Cpath d=%22M14 11v6%22 /%3E%3Cpath d=%22M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6%22 /%3E%3Cpath d=%22M3 6h18%22 /%3E%3Cpath d=%22M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2%22 /%3E%3C/svg%3E"); }
.i-tree-deciduous { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z%22 /%3E%3Cpath d=%22M12 19v3%22 /%3E%3C/svg%3E"); }
.i-tree-palm { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13 8c0-2.76-2.46-5-5.5-5S2 5.24 2 8h2l1-1 1 1h4%22 /%3E%3Cpath d=%22M13 7.14A5.82 5.82 0 0 1 16.5 6c3.04 0 5.5 2.24 5.5 5h-3l-1-1-1 1h-3%22 /%3E%3Cpath d=%22M5.89 9.71c-2.15 2.15-2.3 5.47-.35 7.43l4.24-4.25.7-.7.71-.71 2.12-2.12c-1.95-1.96-5.27-1.8-7.42.35%22 /%3E%3Cpath d=%22M11 15.5c.5 2.5-.17 4.5-1 6.5h4c2-5.5-.5-12-1-14%22 /%3E%3C/svg%3E"); }
.i-trending-down { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 17h6v-6%22 /%3E%3Cpath d=%22m22 17-8.5-8.5-5 5L2 7%22 /%3E%3C/svg%3E"); }
.i-trending-up { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 7h6v6%22 /%3E%3Cpath d=%22m22 7-8.5 8.5-5-5L2 17%22 /%3E%3C/svg%3E"); }
.i-triangle-alert { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%22 /%3E%3Cpath d=%22M12 9v4%22 /%3E%3Cpath d=%22M12 17h.01%22 /%3E%3C/svg%3E"); }
.i-truck { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2%22 /%3E%3Cpath d=%22M15 18H9%22 /%3E%3Cpath d=%22M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14%22 /%3E%3Ccircle cx=%2217%22 cy=%2218%22 r=%222%22 /%3E%3Ccircle cx=%227%22 cy=%2218%22 r=%222%22 /%3E%3C/svg%3E"); }
.i-user { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22 /%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22 /%3E%3C/svg%3E"); }
.i-users { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22 /%3E%3Cpath d=%22M16 3.128a4 4 0 0 1 0 7.744%22 /%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22 /%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22 /%3E%3C/svg%3E"); }
.i-van { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13 6v5a1 1 0 0 0 1 1h6.102a1 1 0 0 1 .712.298l.898.91a1 1 0 0 1 .288.702V17a1 1 0 0 1-1 1h-3%22 /%3E%3Cpath d=%22M5 18H3a1 1 0 0 1-1-1V8a2 2 0 0 1 2-2h12c1.1 0 2.1.8 2.4 1.8l1.176 4.2%22 /%3E%3Cpath d=%22M9 18h5%22 /%3E%3Ccircle cx=%2216%22 cy=%2218%22 r=%222%22 /%3E%3Ccircle cx=%227%22 cy=%2218%22 r=%222%22 /%3E%3C/svg%3E"); }
.i-wrench { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z%22 /%3E%3C/svg%3E"); }
.i-zap { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z%22 /%3E%3C/svg%3E"); }
/* Icon-Farben: ruhig, in Kacheln in der Akzentfarbe */
.sdkachel .pic, .ptile .pic, .awkachel .pic { color:var(--accent); display:inline-flex; }
.sdkachel .pic i, .ptile .pic i { width:22px; height:22px; }
.zeile > span > i[class^="i-"]:first-child, small i[class^="i-"] { color:var(--muted); }
.badge i[class^="i-"], .frist i[class^="i-"], .tbflag i[class^="i-"] { width:1em; height:1em; vertical-align:-0.14em; }
.hinweis i[class^="i-"] { color:inherit; }
#tabbar a span i[class^="i-"] { width:22px; height:22px; }
button i[class^="i-"], a.knopf i[class^="i-"], label.knopf i[class^="i-"] { width:1.05em; height:1.05em; }
.i-layout-dashboard { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%227%22 height=%229%22 x=%223%22 y=%223%22 rx=%221%22 /%3E%3Crect width=%227%22 height=%225%22 x=%2214%22 y=%223%22 rx=%221%22 /%3E%3Crect width=%227%22 height=%229%22 x=%2214%22 y=%2212%22 rx=%221%22 /%3E%3Crect width=%227%22 height=%225%22 x=%223%22 y=%2216%22 rx=%221%22 /%3E%3C/svg%3E"); }
.i-sun { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22 /%3E%3Cpath d=%22M12 2v2%22 /%3E%3Cpath d=%22M12 20v2%22 /%3E%3Cpath d=%22m4.93 4.93 1.41 1.41%22 /%3E%3Cpath d=%22m17.66 17.66 1.41 1.41%22 /%3E%3Cpath d=%22M2 12h2%22 /%3E%3Cpath d=%22M20 12h2%22 /%3E%3Cpath d=%22m6.34 17.66-1.41 1.41%22 /%3E%3Cpath d=%22m19.07 4.93-1.41 1.41%22 /%3E%3C/svg%3E"); }
.i-briefcase { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16%22 /%3E%3Crect width=%2220%22 height=%2214%22 x=%222%22 y=%226%22 rx=%222%22 /%3E%3C/svg%3E"); }
header nav > a i[class^="i-"], header nav .navkopf i[class^="i-"], header nav .navunten i[class^="i-"] { width:18px; height:18px; color:var(--muted); margin-right:4px; }
header nav a.aktiv i[class^="i-"], header nav .navkopf.drin i[class^="i-"] { color:var(--accent); }
header nav .navkopf .nk { flex:1; } header nav .navkopf .zahl { margin:0 6px 0 0; }
.i-list-checks { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M13 5h8%22 /%3E%3Cpath d=%22M13 12h8%22 /%3E%3Cpath d=%22M13 19h8%22 /%3E%3Cpath d=%22m3 17 2 2 4-4%22 /%3E%3Cpath d=%22m3 7 2 2 4-4%22 /%3E%3C/svg%3E"); }
.i-check-check { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 7 17l-5-5%22 /%3E%3Cpath d=%22m22 10-7.5 7.5L13 16%22 /%3E%3C/svg%3E"); }
.i-reply { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M20 18v-2a4 4 0 0 0-4-4H4%22 /%3E%3Cpath d=%22m9 17-5-5 5-5%22 /%3E%3C/svg%3E"); }

/* ===== Nachrichtenverlauf (Chat) ===== */
.chat { padding:0; gap:0; overflow:hidden; }
.cverlauf { max-height:min(70vh, 720px); overflow-y:auto; padding:14px 16px 10px; display:flex; flex-direction:column; gap:8px; background:#f3f5f8; }
.cverlauf .leer { margin:20px auto; text-align:center; max-width:420px; }
.ctag { display:flex; justify-content:center; margin:8px 0 2px; }
.ctag span { font-size:12px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:20px; padding:2px 10px; }
.cblase { max-width:min(78%, 620px); padding:9px 12px 7px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 1px rgba(20,30,50,.04); }
.cblase.ein { align-self:flex-start; border-bottom-left-radius:4px; }
.cblase.aus { align-self:flex-end; background:#e6eef9; border-color:#cddbf0; border-bottom-right-radius:4px; }
.cblase.neu { box-shadow:inset 3px 0 0 var(--accent); }
.cwer { font-size:12.5px; font-weight:600; color:var(--accent); margin-bottom:2px; }
.cbetr { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; }
.cbetr i[class^="i-"] { color:var(--muted); width:.95em; height:.95em; }
.ctext { white-space:pre-line; font-size:14.5px; line-height:1.45; overflow-wrap:anywhere; }
.canh { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.canh span { font-size:12.5px; background:rgba(0,0,0,.04); border-radius:6px; padding:2px 8px; }
.cfuss { display:flex; gap:6px; align-items:center; justify-content:flex-end; font-size:11.5px; color:var(--muted); margin-top:4px; flex-wrap:wrap; }
.cfuss a { color:var(--muted); text-decoration:underline; }
.cproj { background:#fff; border:1px solid var(--line); border-radius:10px; padding:0 7px; margin-right:auto; }
.cvermerk { align-self:center; max-width:min(86%, 640px); background:#fff8e6; border:1px solid #f1dfae; border-radius:10px; padding:6px 12px; font-size:13.5px; }
.cvermerk.intern { background:#f1f2f4; border-color:#e1e3e7; }
.cvermerk.cfrei { background:#ecfdf3; border-color:#a6e4bf; }
.cvkopf { font-size:12.5px; color:#5b6472; } .cvkopf b { color:var(--text); }
.cvermerk .ctext { font-size:14px; }
.cschreiben { display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--line); background:#fff; }
.cschreiben select { width:auto; min-height:44px; }
.cschreiben textarea { flex:1; resize:none; min-height:44px; max-height:160px; padding:10px 12px; border-radius:22px; line-height:1.35; }
.cschreiben button { min-width:44px; min-height:44px; border-radius:50%; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.cschreiben button i[class^="i-"] { width:18px; height:18px; }

/* ===== E-Mail: Ordnerspalte ===== */
.mlayout { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.mordner { flex:0 1 200px; display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px; align-items:stretch; }
.mordner a { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:8px; color:var(--text); text-decoration:none; font-size:14.5px; }
.mordner a:hover { background:#f4f6f9; text-decoration:none; }
.mordner a.aktiv { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.mordner a i[class^="i-"] { color:var(--muted); } .mordner a.aktiv i[class^="i-"] { color:var(--accent); }
.mordner a .zahl { margin-left:auto; }
.mordner hr { border:none; border-top:1px solid var(--line); margin:6px 4px; width:auto; }
.mordner #mOrdnerNeu { margin:6px 4px 2px; }
.mhaupt { flex:999 1 480px; min-width:0; }
.mwahlzeile { display:flex; align-items:center; gap:8px; }
.mwahlzeile > .mWahl { width:18px; height:18px; min-height:auto; flex:none; accent-color:var(--accent); }
.mwahlzeile > a { flex:1; min-width:0; }
.mverschieben { position:sticky; bottom:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px; box-shadow:0 8px 24px rgba(20,30,50,.12); align-items:center; }
.mverschieben select { width:auto; }
.mordnerwahl { display:inline-flex; align-items:center; gap:6px; margin:0 0 0 auto; color:var(--muted); }
.mordnerwahl select { width:auto; min-height:40px; }
.hinweis.klein { font-size:13px; padding:8px 12px; }
@media (max-width:820px) { .mordner { flex:1 1 100%; flex-direction:row; flex-wrap:wrap; } .mordner hr { display:none; } .mordner a { padding:7px 10px; } }
.i-external-link { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 3h6v6%22 /%3E%3Cpath d=%22M10 14 21 3%22 /%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22 /%3E%3C/svg%3E"); }
.i-mail-open { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z%22 /%3E%3Cpath d=%22m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10%22 /%3E%3C/svg%3E"); }
/* Mail-Ansicht: gleichmäßige Abstände, alle Karten gleich breit */
.mailkopf, .makt, .manh, .minhalt, #app > form.card.mzuord { margin-bottom:14px; }
#app > form.card.mzuord { max-width:none; }
.manh { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* Nicht übernommene Mails (unbekannter Absender) */
.mueber { border-left:4px solid var(--warn-line); margin-bottom:12px; }
.mueber h3 { margin:0 0 6px; display:flex; align-items:center; gap:8px; }
.mueber .klein { color:var(--muted); font-size:13px; margin:4px 0 10px; }
.mueberzeile { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.mueberzeile small { color:var(--muted); }
.mueberknopf { display:flex; gap:8px; flex-shrink:0; }
.mueberknopf button { height:36px; min-height:36px; margin:0; padding:0 12px; font-size:14px; }
@media (max-width:640px) { .mueberzeile { flex-direction:column; align-items:stretch; } }
/* Team-Fotos, Signatur-Vorschau, „Zu Ihnen kommen“ */
.avatar { border-radius:50%; object-fit:cover; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--accent-soft); color:var(--accent); font-weight:700; vertical-align:middle; }
.tname { display:inline-flex; align-items:center; gap:10px; }
.fotobox { display:flex; gap:18px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:12px; margin:6px 0 14px; }
.fotofelder { flex:1; min-width:0; }
.fotowahl { cursor:pointer; }
.blink { animation:blink 1.2s ease 2; border-radius:8px; }
@keyframes blink { 50% { background:var(--warn-bg); } }
.msig, .mteam { margin:4px 0 10px; }
.msig > small, .mteam > small { color:var(--muted); }
.msigbox { display:flex; gap:12px; align-items:flex-start; margin-top:6px; padding:10px 12px; border:1px dashed var(--line); border-radius:10px; font-size:12.5px; color:#666; line-height:1.5; }
.msigbox img { width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.msigbox > div { border-left:2px solid var(--fc, #c9a24a); padding-left:12px; }
.mteamliste { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.mteamkarte { display:flex; flex-direction:column; align-items:center; text-align:center; width:96px; font-size:13px; }
.mteamkarte img, .mteamini { width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:4px; }
.mteamini { display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); font-weight:700; }
.mteamkarte small { color:var(--muted); font-size:11.5px; }
.mteamohne { font-style:italic; }
@media (max-width:560px) { .fotobox { flex-direction:column; align-items:center; } }
.tname > span { text-align:left; }
.lang.klickbar { cursor:pointer; border-radius:6px; }
.lang.klickbar:hover { background:var(--accent-soft); }
.ptextplus { margin-top:4px; font-size:12.5px; min-height:28px; padding:2px 10px; }
.uebsumme { margin:2px 0 6px; color:var(--muted); }
/* Arbeitszeit-Karte: weitere Kostenstellen */
.azweitere { margin:10px 0 6px; }
.azblock { border:1px solid var(--line); border-radius:10px; margin:8px 0; background:#fff; }
.azblock > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; cursor:pointer; }
.azblock > summary::-webkit-details-marker { display:none; }
.azblock[open] > summary { border-bottom:1px solid var(--line); }
.azblock > .raster, .azblock > p { padding:0 12px; }
.azblock > .raster { padding-top:10px; }
.azan { margin:0; }
.azan small { color:var(--muted); font-weight:400; }
.azh { font-weight:700; color:var(--accent); white-space:nowrap; }
/* Plantafel: kalkulierte Stunden */
.ep-std { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; background:#fafbfc; }
.ep-stdkopf { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; align-items:baseline; margin-bottom:6px; }
.ep-stdkopf small { color:var(--muted); }
.ep-kst { display:flex; flex-wrap:wrap; gap:4px 16px; margin-bottom:6px; }
.ep-kst small { color:var(--muted); }
.ep-tage { align-self:end; margin:0 0 10px; color:var(--muted); }
.pp-h { font-size:12px; font-weight:600; color:var(--muted); background:var(--accent-soft); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.pp-h.fertig { color:#1f7a46; background:#e7f6ec; }
.mnaechst { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.mnaechst > span { flex:1; min-width:220px; }
.mnaechst .knopf { margin:0; }
.mnaechst.ok { background:#e7f6ec; border-color:#b9e3c7; color:#1f6b3d; }
/* Übersicht: Wer ist dran? */
.werdran { margin:18px 0 6px; }
.wdchips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.wdchips .rotchip.sek { color:var(--warn); border-color:var(--warn-line); }
.wdkarte { padding:4px 0 !important; }
.wdgruppe + .wdgruppe { border-top:1px solid var(--line); }
.wdgruppe h4 { margin:0; padding:12px 18px 6px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); display:flex; align-items:center; gap:8px; }
.wdgruppe[data-wer="ich"] h4 { color:var(--accent); }
.wdzeile { display:grid; grid-template-columns:14px 1fr auto; gap:12px; align-items:center; padding:9px 18px; color:var(--text); text-decoration:none; border-top:1px solid #f0f2f5; }
.wdzeile:first-of-type { border-top:none; }
.wdzeile:hover { background:#f6f8fb; text-decoration:none; }
.wdpunkt { width:9px; height:9px; border-radius:50%; background:var(--line); justify-self:center; }
.wdgruppe[data-wer="ich"] .wdpunkt { background:var(--accent); }
.wdzeile.rot .wdpunkt { background:var(--warn); box-shadow:0 0 0 3px var(--warn-bg); }
.wdtxt { min-width:0; }
.wdtxt small { color:var(--muted); }
.wdschritt { display:block; font-size:13.5px; color:#3a4656; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wdzeile.rot .wdschritt { color:var(--warn); }
.wdrechts { display:flex; flex-direction:column; align-items:flex-end; gap:4px; white-space:nowrap; }
.wdrechts small { color:var(--muted); }
@media (max-width:640px) { .wdzeile { grid-template-columns:12px 1fr; } .wdrechts { grid-column:2; flex-direction:row; align-items:center; justify-content:flex-start; } .wdschritt { white-space:normal; } }
/* Skizzenblock (Vollbild) */
#skizze { position:fixed; inset:0; z-index:2000; background:#eef1f5; display:flex; flex-direction:column; }
.skz-leiste { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; background:#fff; border-bottom:1px solid var(--line); }
.skz-titel { margin-right:auto; }
.skz-werkzeuge { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.skz-rechts { display:flex; gap:8px; }
.skz-rechts button { margin:0; min-height:42px; }
.skz-farbe { width:34px; height:34px; min-height:0; padding:0; border-radius:50%; background:var(--f); border:3px solid #fff; box-shadow:0 0 0 1px var(--line); }
.skz-farbe.an { box-shadow:0 0 0 3px var(--accent); }
.skz-btn { min-height:38px; padding:0 12px; margin:0; background:#fff; color:var(--text); border:1px solid var(--line); font-weight:500; }
.skz-btn.an { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.skz-flaeche { flex:1; margin:12px; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.08); background:#fff; touch-action:none; }
.skz-flaeche canvas { display:block; touch-action:none; cursor:crosshair; }
.skz-tipp { margin:0 14px 10px; color:var(--muted); font-size:12.5px; }
.skizzen { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.skzbild { margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.skzbild img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; cursor:pointer; background:#fff; }
.skzbild figcaption { display:flex; justify-content:space-between; gap:6px; padding:6px 8px; border-top:1px solid var(--line); }
.fotobemalen { position:relative; display:inline-block; }
.fotobemalen [data-fotomalen] { position:absolute; right:6px; bottom:6px; min-height:30px; padding:2px 9px; background:rgba(255,255,255,.92); }
@media print { #druck .ab-skizzen { margin-top:6mm; } #druck .ab-skizzen figure { margin:0 0 4mm; page-break-inside:avoid; } #druck .ab-skizzen img { width:100%; max-height:150mm; object-fit:contain; border:.5pt solid #ccc; } #druck .ab-skizzen figcaption { font-size:8pt; color:#666; } }
#druck .ab-skizzen { margin-top:6mm; } #druck .ab-skizzen figure { margin:0 0 4mm; page-break-inside:avoid; } #druck .ab-skizzen img { width:100%; max-height:150mm; object-fit:contain; border:.5pt solid #ccc; } #druck .ab-skizzen figcaption { font-size:8pt; color:#666; }
.skz-btn:focus:not(.an), .skz-btn:hover:not(.an) { background:#f4f6f9; color:var(--text); }
.wdbadges { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
/* Übersicht: Ebene „Heute“ + Ebene 3 */
.heute { margin:18px 0 6px; }
.hkarte { padding:4px 0 !important; }
.hzeile { display:grid; grid-template-columns:28px 1fr 14px; gap:10px; align-items:center; padding:10px 18px; color:var(--text); text-decoration:none; border-top:1px solid #f0f2f5; }
.hzeile:first-child { border-top:none; }
.hzeile:hover { background:#f6f8fb; text-decoration:none; }
.hzeile small { display:block; color:var(--muted); }
.hzeile.warn b { color:var(--warn); }
.hic { color:var(--accent); display:flex; justify-content:center; }
.hzeile .pfeil { color:var(--muted); }
.ebene3 { margin-top:26px; }
.kacheln.kompakt .kachel b { font-size:22px; }
.wdknoepfe { display:flex; gap:6px; margin-top:6px; }
.wdknoepfe .mini { min-height:28px; padding:2px 9px; font-size:12.5px; }
.hkarte > .leer { padding:12px 18px; margin:0; }

/* gesperrte Knöpfe sichtbar ausgrauen */
button:disabled, .knopf[aria-disabled="true"] { opacity:.45; cursor:not-allowed; filter:saturate(.4); }

/* --- Briefstil „modern-minimal“: Logo klein links, kein Strich, Fußzeile in drei ruhigen Zeilen --- */
@media print {
  #druck .firmenkopf.stil-minimal { flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:5mm; border-bottom:none; padding-bottom:0; margin-bottom:14mm; }
  #druck .firmenkopf.stil-minimal .fk-logo { height:15mm; }
  #druck .firmenkopf.stil-minimal .fk-text { border-left:.6pt solid var(--fc, #C5A252); padding-left:5mm; }
  #druck .firmenkopf.stil-minimal .firmenname { font-size:15pt; font-weight:600; letter-spacing:.6px; }
  #druck .firmenkopf.stil-minimal .fk-zusatz { font-size:7.5pt; color:#777; letter-spacing:.3px; margin-top:.8mm; }
  #druck .fuss.stil-minimal { display:block; text-align:center; border-top:.4pt solid #d6d6d6; padding-top:2.5mm; font-size:6.8pt; line-height:1.6; color:#777; }
  #druck .fuss.stil-minimal div { flex:none; }
}

/* Große, getrennte Kacheln für die Artikelnavigation. */
.artikel-kacheln { grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:20px; margin:20px 0; }
.artikel-kacheln .ptile { min-width:0; min-height:155px; padding:22px; gap:12px; border-radius:16px; box-shadow:0 3px 10px rgba(20,30,50,.06); }
.artikel-kacheln .ptile .pic { font-size:26px; }
.artikel-kacheln .ptile .pic i { width:30px; height:30px; }
.artikel-kacheln .ptile b { font-size:28px; }
.artikel-kacheln .ptile small { font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.artikel-kacheln .ptile:hover, .artikel-kacheln .ptile:focus-visible { border-color:var(--accent); background:var(--accent-soft); }
/* Klarer Tagesüberblick mit kompakter Zeiterfassung. */
.meintag.mt-neu { max-width:1200px; }
.mt-neu .mt-stempel { grid-template-columns:minmax(220px,1fr) auto; align-items:center; gap:12px 24px; padding:18px 22px; }
.mt-zeitinfo { display:grid; gap:6px; }
.mt-zeitinfo > small { color:var(--muted); }
.mt-neu .mt-zeitlinks { grid-column:1/-1; margin:0; }
.mt-neu .mt-stempel .err:empty { display:none; }
.mt-neu .mt-stempel .err { grid-column:1/-1; }
.mt-heute-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; margin-top:24px; }
.mt-heute-grid section { min-width:0; }
.mt-heute-grid section > .abschnitt:first-child { margin-top:0; min-height:44px; }
.mt-ausblick { display:block; margin-top:24px; }
.mt-ausblick summary { cursor:pointer; font-size:17px; font-weight:600; padding:3px 0; }
.mt-ausblick summary small { color:var(--muted); font-weight:400; }
.mt-ausblick[open] summary { margin-bottom:12px; }
.mt-erinnerungen .card { background:#fcfaf4; }
.mt-neu .mt-schnell { margin-top:24px; }
@media(max-width:900px) { .mt-heute-grid { grid-template-columns:1fr; gap:8px; } .mt-neu .mt-stempel { grid-template-columns:1fr; } .mt-neu .mt-stempel .stempelknoepfe { justify-content:flex-start; } }

/* Ruhiger Projekt-Arbeitsbereich */
.parbeit-nav { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.parbeit-tab { background:#fff; color:var(--text); border:1px solid var(--line); padding:10px 18px; border-radius:9px; }
.parbeit-tab:hover { background:var(--accent-soft); color:var(--accent); }
.parbeit-tab.aktiv { background:var(--accent); color:#fff; border-color:var(--accent); }
.pkompakt { padding:14px 18px; margin:0; }
.pkompakt summary { cursor:pointer; font-weight:600; }
.pkompakt[open] summary { margin-bottom:14px; }
.pweitere { order:5; margin-top:8px; color:var(--muted); }
.pbereiche .pzahlen { margin-bottom:18px; }

/* Schritte öffnen ihren Arbeitsbereich, ohne den Projektstatus zu ändern. */
.phase-kopf { display:flex; flex-direction:column; gap:2px; width:100%; background:none; color:inherit; text-align:left; border:none; padding:0; min-height:44px; }
.phase-kopf:hover { background:none; color:var(--accent); }
.ablauf.mini button.schritt { width:100%; color:var(--text); font-weight:400; min-height:32px; border-radius:5px; cursor:pointer; }
.ablauf.mini button.schritt:hover { background:var(--accent-soft); }
.ablauf.mini button.schritt:focus-visible, .phase-kopf:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Persönliche Angebotsmappe */
.amform{max-width:1100px}.amform>.card{margin:20px 0}.amform h3{margin-bottom:18px}.ambildwahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:20px 0}.amwahl{border:1px solid var(--rand,#dce3ee);border-radius:12px;overflow:hidden;background:#f7f9fb}.amwahl>img{width:100%;height:190px;object-fit:contain;background:#eeece6}.amwahl>div{padding:16px}.ammaterialeditor{padding:22px;background:#f7f9fb;border:1px solid #dce3ee;border-radius:12px;margin:18px 0}.amform input[type=file]{display:none}.amform label.knopf{display:inline-block}.amform textarea{line-height:1.5}.amform .check{display:flex;gap:10px;align-items:center}

.ammoodpreview{position:relative;aspect-ratio:676/360;max-width:620px;border-radius:12px;overflow:hidden;margin-top:20px;background:#e8e3d8}.ammoodpreview:empty{display:none}.ammoodpreview>div{position:absolute;overflow:hidden;box-shadow:0 0 0 1.5px #fff}.ammoodpreview img{width:100%;height:100%;object-fit:cover}.ammoodpreview span{position:absolute;bottom:12px;left:8px;right:8px;padding:5px;background:rgba(255,255,255,.9);font-size:12px;color:#23372f;overflow-wrap:anywhere}

/* --- Plantafel: kompakte Kapazität + Großansicht --- */
.i-maximize { --ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M8 3H5a2 2 0 0 0-2 2v3%22 /%3E%3Cpath d=%22M21 8V5a2 2 0 0 0-2-2h-3%22 /%3E%3Cpath d=%22M3 16v3a2 2 0 0 0 2 2h3%22 /%3E%3Cpath d=%22M16 21h3a2 2 0 0 0 2-2v-3%22 /%3E%3C/svg%3E"); }
.pkap { display:flex; align-items:center; gap:6px; margin:0 0 6px; font-size:11.5px; font-weight:600; color:#236341; cursor:pointer; white-space:nowrap; }
.pkap i { flex:1; min-width:20px; height:5px; background:#dbe4df; border-radius:4px; overflow:hidden; }
.pkap i b { display:block; height:100%; background:#398567; border-radius:4px; }
.pkap em { font-style:normal; font-weight:500; color:var(--muted); }
.pkap.ueber { color:#b42318; } .pkap.ueber i b { background:#b42318; } .pkap.ueber em { color:#b42318; font-weight:600; }
.pp-auf { cursor:pointer; user-select:none; }
.pp-pfeil { display:inline-block; transition:transform .15s; color:var(--muted); }
.pprojekte.zu .pp-pfeil { transform:rotate(-90deg); }
.pprojekte.zu .pp-liste, .pprojekte.zu .pp-kopf small { display:none; }
.pprojekte.zu { padding-top:10px; padding-bottom:10px; }
.plantafel td.pname { position:sticky; left:0; z-index:2; }
.plantafel tr:first-child th:first-child { position:sticky; left:0; z-index:3; background:#fafbfc; }

body.ptgross > header, body.ptgross #leiste, body.ptgross #tabbar { display:none !important; }
body.ptgross main { margin-left:0; padding:12px 14px 30px; }
body.ptgross .kopf { margin-bottom:8px; }
body.ptgross .kopf h2 { font-size:20px; }
body.ptgross .pp-liste { max-height:96px; }
body.ptgross .plantafel table { min-width:100%; }
body.ptgross .plantafel th:first-child, body.ptgross .plantafel td.pname { width:110px; }
body.ptgross .pzelle { height:120px; padding:7px 8px; }
body.ptgross .pchip { font-size:13.5px; padding:6px 8px; }
body.ptgross .pchip small { font-size:12.5px; }
body.ptgross .pchip .pzeit { font-size:12px; }
body.ptgross .plantafel th { font-size:14px; }
body.ptgross .plantafel td.pname { font-size:14.5px; }
body.ptgross .pzelle { height:max(120px, calc((100vh - 290px) / var(--zeilen, 4))); }

/* --- Terminfarben: deutlich unterscheidbar, Karte farbig hinterlegt (Plantafel, Tag, Monat) --- */
.typ-0[class] { --c:#2563eb; } /* Aufmaß – blau */
.typ-1[class] { --c:#7c3aed; } /* Besprechung – violett */
.typ-2[class] { --c:#ca8a04; } /* Lieferung – gelb */
.typ-3[class] { --c:#16a34a; } /* Montage – grün */
.typ-4[class] { --c:#64748b; } /* Sonstiges – schiefer */
.typ-5[class] { --c:#0d9488; } /* Teammeeting – türkis */
.typ-6[class] { --c:#db2777; } /* Schulung – pink */
.typ-7[class] { --c:#9ca3af; } /* Intern – hellgrau */
.typ-8[class] { --c:#c2410c; } /* Fertigung – orange */
.pchip[class*="typ-"], .mchip[class*="typ-"] { background:color-mix(in srgb, var(--c) 14%, #fff); border-left:4px solid var(--c); }
.pchip[class*="typ-"] b i, .mchip[class*="typ-"] i { color:var(--c); }
.tblock[class*="typ-"] { background:color-mix(in srgb, var(--c) 18%, #fff); border-left-width:4px; }
.seg[class*="typ-"] { background:var(--c); opacity:1; }
.pzelle.konflikt .pchip { border-top-color:var(--warn-line); border-right-color:var(--warn-line); border-bottom-color:var(--warn-line); border-left-color:var(--c, var(--accent)); }
.pchip.st-Vorläufig { background:#fff; }
.plegende { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 10px; font-size:12.5px; color:var(--muted); }
.plegende span { display:inline-flex; align-items:center; gap:5px; }
.plegende span::before { content:""; width:12px; height:12px; border-radius:3px; background:color-mix(in srgb, var(--c) 20%, #fff); border-left:4px solid var(--c); }

/* --- Arbeitsschutz --- */
.as-overlay { position:fixed; inset:0; z-index:200; background:rgba(20,26,38,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.as-sign { width:min(640px, 100%); }
.as-sign canvas.sig { height:220px; }
.asfrist { font-size:12.5px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; flex:none; }
.asfrist.rot { background:#fde8e6; color:#b42318; }
.asfrist.gelb { background:#fff3dc; color:#92570b; }
.asfrist.gruen { background:#e7f6ec; color:#1f7a46; }
.asfrist.offen { background:#eef0f4; color:#5b6375; }
.asfrist i[class^="i-"] { width:1em; height:1em; vertical-align:-0.14em; }
.asrot { color:#b42318; }
.asstatus { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.asdateien { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:13.5px; }
.asinhalt { white-space:pre-wrap; font-size:15px; line-height:1.6; }
.assig { height:44px; max-width:180px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:6px; }
.asok { color:#1f7a46; font-weight:600; }
.asteiln { border:1px solid var(--line); border-radius:8px; padding:8px 12px; display:flex; flex-wrap:wrap; gap:6px 18px; }
.mt-as a { margin-left:6px; }

/* --- Zeitplan je Auftrag --- */
.zp h3 { display:flex; align-items:center; gap:6px; }
.zp-zeile { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
.zp-zeile:last-of-type { border-bottom:none; }
.zp-zeile.zp-ok b { color:#1f7a46; }
.zp-zeile.zp-rot b { color:#b42318; }
.mt-planung .asfrist { margin-left:8px; }

/* --- Deckblatt Hängeregister --- */
@media print {
  #druck .kdeck-name { font-size:22pt; font-weight:700; margin:10mm 0 4mm; }
  #druck .kdeck-grid { display:flex; justify-content:space-between; gap:10mm; align-items:flex-start; font-size:11pt; }
  #druck .kdeck-grid p { margin:0 0 1.5mm; }
  #druck .kdeck-qr { width:38mm; text-align:center; }
  #druck .kdeck-qr svg { width:38mm; height:38mm; display:block; }
  #druck .kdeck-qr small { font-size:7.5pt; color:#555; }
  #druck .kdeck h3 { margin:9mm 0 2mm; font-size:12pt; }
  #druck .kdeck-check { display:grid; grid-template-columns:1fr 1fr; gap:2.5mm 10mm; font-size:10.5pt; }
  #druck .kdeck-fuss { margin-top:10mm; font-size:8.5pt; color:#666; }
}

/* ==========================================================================
   Übersicht & Mein Tag – Optik 2026-10: Farbe = Bedeutung
   Terminarten haben überall dieselbe Farbe (wie Plantafel), Dringendes ist rot,
   Bald orange, Erledigt grün. Gold (Firmenfarbe) nur für den Tageskopf.
   ========================================================================== */
:root { --gold:#C5A252; --ok:#1f7a46; --ok-bg:#e7f5ec; --amber:#b7791f; --amber-bg:#fdf3e1; --rot-bg:#fdecea; }

/* --- Tageskopf (Mein Tag) --- */
.mt-neu .mt-kopf { margin:0 0 18px; }
.mt-neu .mt-kopf small { font-size:13.5px; letter-spacing:.01em; }
.mt-neu .mt-kopf h2 { font-size:30px; font-weight:700; letter-spacing:-.02em; margin:2px 0 14px; }
.mt-neu .mt-kopf h2::after { content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--gold); margin-top:10px; }
.mt-tiles { display:flex; flex-wrap:wrap; gap:10px; }
.mt-tile { --t:var(--accent); --tb:var(--accent-soft); display:flex; align-items:baseline; gap:8px; min-height:0; padding:10px 16px 10px 14px; border-radius:12px;
  background:var(--card); border:1px solid var(--line); box-shadow:inset 4px 0 0 var(--t); color:var(--text); font-weight:500; cursor:pointer; }
.mt-tile b { font-size:22px; font-weight:700; color:var(--t); font-variant-numeric:tabular-nums; line-height:1; }
.mt-tile span { font-size:13.5px; color:var(--muted); }
.mt-tile:hover { background:var(--tb); border-color:var(--tb); }
.mt-tile.t-aufg { --t:var(--ok); --tb:var(--ok-bg); }
.mt-tile.t-lief { --t:var(--amber); --tb:var(--amber-bg); }
.mt-tile.t-plan { --t:#6d3aa8; --tb:#f1ebfa; }
.mt-tile.t-rot { --t:var(--rot); --tb:var(--rot-bg); }
.mt-tile.t-rot span { color:var(--rot); font-weight:600; }
.mt-tile.null { --t:#a3aab8; box-shadow:none; }
.mt-tile.null b { color:#a3aab8; }

/* --- Terminkarte: Zeit links, farbig nach Terminart --- */
.mt-neu .tkarte-tag { display:grid; grid-template-columns:78px 1fr; gap:0; padding:0; overflow:hidden; box-shadow:none; border-color:var(--line); }
.mt-neu .tkarte-tag[class*="typ-"] { --tc:var(--c, var(--accent)); }
.mt-neu .tk-zeit { background:color-mix(in srgb, var(--tc) 11%, #fff); border-right:3px solid var(--tc); padding:16px 8px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.mt-neu .tk-zeit b { font-size:21px; font-weight:700; color:var(--tc); font-variant-numeric:tabular-nums; line-height:1.1; letter-spacing:-.01em; }
.mt-neu .tk-zeit small { font-size:12px; color:color-mix(in srgb, var(--tc) 70%, #333); font-variant-numeric:tabular-nums; }
.mt-neu .tk-inhalt { padding:14px 18px 14px; min-width:0; }
.mt-neu .tk-kopf .zeit { display:none; }
.mt-neu .tk-typ { color:var(--tc); font-weight:600; }
.mt-neu .tk-typ i[class^="i-"] { background-color:var(--tc); }
.mt-neu .tkarte-tag h3 { font-size:19px; margin:3px 0 2px; letter-spacing:-.01em; }
.mt-neu .tk-kunde { font-size:14.5px; }
.mt-neu .tkarte-tag .notiz { background:#f7f8fa; border-radius:8px; padding:8px 10px; font-size:14px; }
.mt-neu .tk-knoepfe { margin-top:12px; }
.mt-neu .tk-knoepfe .knopf, .mt-neu .tk-knoepfe button { min-height:42px; }
.mt-neu .tk-mehr { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.mt-neu .tk-mehr .knopf { background:none; border:none; padding:4px 0; min-height:0; color:var(--accent); font-weight:500; font-size:14px; box-shadow:none; }
.mt-neu .tk-mehr .knopf:hover { text-decoration:underline; }
.mt-neu .tk-mehr:empty { display:none; }
.mt-neu .tkarte-tag.st-Vorläufig .tk-zeit { background:repeating-linear-gradient(135deg, #fff 0 6px, color-mix(in srgb, var(--tc) 9%, #fff) 6px 12px); }
@media (max-width:600px) {
  .mt-neu .tkarte-tag { grid-template-columns:62px 1fr; }
  .mt-neu .tk-zeit b { font-size:18px; }
  .mt-neu .tk-inhalt { padding:12px 14px; }
  .mt-neu .tk-knoepfe .knopf, .mt-neu .tk-knoepfe button { flex:1 1 40%; justify-content:center; }
  .mt-neu .mt-kopf h2 { font-size:25px; }
}

/* --- Hinweisbänder in Mein Tag: farbiger Rand nach Thema --- */
.mt-neu .hinweis { border:none; border-left:4px solid var(--accent); border-radius:10px; background:var(--card); box-shadow:0 0 0 1px var(--line) inset; padding:12px 14px; }
.mt-neu .hinweis.mt-as { border-left-color:var(--amber); }
.mt-neu .hinweis.mt-tb { border-left-color:#6d3aa8; }
.mt-neu .hinweis.mt-weg { border-left-color:var(--ok); }
.mt-neu .hinweis i[class^="i-"] { vertical-align:-0.15em; }

/* --- Abschnittsköpfe: Symbol in farbiger Fläche --- */
.mt-neu .abschnitt h3, .heute .abschnitt h3, .werdran .abschnitt h3, .widget .abschnitt h3 { font-size:16.5px; letter-spacing:-.005em; }
.wic { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent); margin-right:4px; vertical-align:middle; }
.wic i[class^="i-"] { width:16px; height:16px; }
.heute .wic { background:#fbf4e4; } .heute .wic i { background-color:#a17f2e; }
.werdran .wic { background:var(--accent-soft); }
.widget.warn .wic { background:var(--rot-bg); } .widget.warn .wic i { background-color:var(--rot); }

/* --- Übersicht „Heute“: Zeit vorne, Symbol im Farbkreis --- */
.hzeile { grid-template-columns:52px 34px 1fr 14px; padding:11px 18px; }
.hzeit { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.hic { width:34px; height:34px; border-radius:50%; align-items:center; background:var(--accent-soft); color:var(--accent); }
.hic i[class^="i-"] { width:17px; height:17px; }
.hzeile[class*="typ-"] .hic { background:color-mix(in srgb, var(--c) 14%, #fff); }
.hzeile[class*="typ-"] .hic i[class^="i-"] { background-color:var(--c); }
.hzeile[class*="typ-"] .hzeit { color:var(--c); }
.hzeile.k-lief .hic { background:var(--amber-bg); } .hzeile.k-lief .hic i { background-color:var(--amber); }
.hzeile.k-mail .hic { background:var(--accent-soft); }
.hzeile.k-aufg .hic { background:var(--ok-bg); } .hzeile.k-aufg .hic i { background-color:var(--ok); }
.hzeile.k-bau .hic { background:#f1ebfa; } .hzeile.k-bau .hic i { background-color:#6d3aa8; }
.hzeile.k-abw .hic { background:#eef0f4; } .hzeile.k-abw .hic i { background-color:#5b6375; }
.hzeile.warn { background:linear-gradient(90deg, var(--rot-bg), transparent 60%); }
.hzeile.warn .hic { background:var(--rot-bg); } .hzeile.warn .hic i { background-color:var(--rot); }
.hzeile.warn b { color:var(--rot); }
@media (max-width:600px) { .hzeile { grid-template-columns:42px 30px 1fr 12px; gap:8px; padding:10px 14px; } .hic { width:30px; height:30px; } }

/* --- „Wer ist dran?“: Dringlichkeit als Randfarbe, ruhige Gruppenköpfe --- */
.wdgruppe h4 { text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; color:var(--text); padding:14px 18px 8px; }
.wdgruppe[data-wer="ich"] h4 { color:var(--accent); }
.wdzeile { box-shadow:inset 3px 0 0 transparent; padding:11px 18px; }
.wdzeile.rot { box-shadow:inset 3px 0 0 var(--rot); background:linear-gradient(90deg, #fff5f4, #fff 45%); }
.wdzeile.rot:hover { background:#fdf0ee; }
.wdzeile b { font-size:15.5px; }
.wdzeile .frist { font-weight:600; }
.wdchips .rotchip { color:var(--rot); border-color:#f4b9b2; }
.mt-tile.t-bald { --t:var(--amber); --tb:var(--amber-bg); }
.mt-neu .tk-zeit small { white-space:nowrap; }
@media (max-width:600px) {
  .mt-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:8px; }
  .mt-tile { flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; }
  .mt-tile span { font-size:12.5px; line-height:1.25; text-align:left; }
  .mt-neu .tk-zeit { padding:14px 4px; }
  .mt-neu .tk-zeit small { font-size:11px; }
}

/* --- Wochenblick --- */
.al-kennzahlen { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:14px 0; }
.al-k { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; display:flex; flex-direction:column; gap:2px; box-shadow:inset 4px 0 0 var(--accent); }
.al-k b { font-size:28px; font-weight:700; color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.al-k span { font-weight:600; font-size:14px; }
.al-k.al-gold { box-shadow:inset 4px 0 0 var(--gold); } .al-k.al-gold b { color:#8a6a1f; }
.al-hinweis { border-radius:10px; padding:10px 14px; margin:0 0 8px; font-size:14px; border-left:4px solid; background:var(--card); box-shadow:0 0 0 1px var(--line) inset; }
.al-h-gelb { border-left-color:var(--amber); } .al-h-rot { border-left-color:var(--rot); } .al-h-gruen { border-left-color:var(--ok); }
.al-tab table { table-layout:fixed; min-width:760px; }
.al-tab th { font-size:13px; } .al-tab th small { display:block; font-weight:400; }
.al-tab th:first-child, .al-name { width:150px; }
.al-name { font-weight:600; font-size:14px; background:#fafbfc; }
.al-name small { display:block; font-weight:400; }
.al-z { text-align:center; padding:10px 6px; border-left:1px solid var(--line); }
.al-z b { display:block; font-size:16px; font-variant-numeric:tabular-nums; }
.al-z small { font-size:11.5px; }
.al-luecke { background:#fdf3e1; } .al-luecke b { color:#92570b; }
.al-mittel { background:#f3f7f0; } .al-mittel b { color:#4b7a2e; }
.al-voll { background:#e7f5ec; } .al-voll b { color:var(--ok); }
.al-ueber { background:#fdecea; } .al-ueber b { color:var(--rot); }
.al-leer { color:var(--muted); }
.al-summe td { border-top:2px solid var(--line); }
.al-leg { display:inline-flex; flex-wrap:wrap; gap:4px 10px; margin-left:6px; align-items:center; }
.al-leg i { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:3px; }
.ab-frueh { display:block; color:#8a6a1f; font-weight:600; }
.al-leg i { box-shadow:0 0 0 1px rgba(0,0,0,.12) inset; }


/* --- Rapportzettel (Druck, A4 – eine Seite, wie die bekannten Durchschreibe-Rapporte) --- */
@media print {
  #druck .rp-blatt { font-size:9.5pt; color:#111; }
  #druck .rp-blatt + .rp-blatt { page-break-before:always; break-before:page; }
  #druck .rp-titel { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:.8pt solid var(--fc, #C5A252); padding-bottom:2.5mm; }
  #druck .rp-titel h1 { font-size:17pt; margin:0 0 1mm; font-weight:700; letter-spacing:-.01em; }
  #druck .rp-nr { font-size:10pt; display:flex; gap:10mm; }
  #druck .rp-logo .ab-firma { text-align:right; font-size:8pt; }
  #druck .rp-logo .ab-logo { max-height:13mm; max-width:40mm; }
  #druck .rp-bloecke { display:grid; grid-template-columns:1fr 1fr 20mm; gap:6mm; margin:4mm 0 2mm; line-height:1.35; }
  #druck .rp-bloecke small { display:block; font-size:7.5pt; color:#666; margin-bottom:.6mm; }
  #druck .rp-qr svg { width:20mm; height:20mm; display:block; }
  #druck .rp-hinweis { margin:1mm 0 2mm; padding:1.5mm 2.5mm; background:#f4f4f4; border-radius:1mm; font-size:9pt; }
  #druck .rp-tab { width:100%; border-collapse:collapse; table-layout:fixed; margin-top:2mm; page-break-inside:avoid; }
  #druck .rp-tab th { text-align:left; font-size:8pt; font-weight:600; border-bottom:.8pt solid #333; padding:1mm 1.5mm; }
  #druck .rp-tab td { height:7.4mm; border-bottom:.4pt solid #bbb; border-left:.4pt solid #ddd; }
  #druck .rp-tab td:first-child { border-left:none; }
  #druck .rp-d { width:17mm; } #druck .rp-n { width:15mm; } #druck .rp-s { width:14mm; }
  #druck .rp-check { display:flex; gap:10mm; margin:4mm 0 0; font-size:9.5pt; }
  #druck .rp-sig { display:flex; gap:14mm; margin-top:9mm; page-break-inside:avoid; }
  #druck .rp-sig div { flex:1; border-top:.6pt solid #000; padding-top:1mm; font-size:8pt; color:#444; }
}

/* --- Handy: nichts darf über den Rand ragen (Prüfung mit 390 px Breite) --- */
@media (max-width:600px) {
  .kopf, .reiter, .kopf .bar { flex-wrap:wrap; }
  .kopf > * { min-width:0; }
  #app h2, #app h3, #app p, #app label, #app .zeile > span { overflow-wrap:anywhere; }
  #app input, #app select, #app textarea { max-width:100%; min-width:0; }
  #app .card { min-width:0; max-width:100%; }
  #app .raster { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #app .raster > *, #app .card > *, #app .zwei > * { min-width:0; }
  #app .tabwrap { max-width:100%; }
  #app .knopf, #app button { max-width:100%; white-space:normal; }
  #app .zwei { grid-template-columns:1fr; }
}
