:root {
  --blau: #1f3a5f;
  --blau-hell: #e6edf6;
  --grau: #f3f5f8;
  --rand: #cfd6df;
  --text: #1c2430;
  --rot: #b3261e;
  --gruen: #1e7a46;
  --gelb: #fff6d6;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grau); color: var(--text);
  font: 17px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--blau); }

.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px;
  background: var(--blau); color: #fff; padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
}
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-weight: 700; font-size: 20px; }
.topbar nav { display: flex; gap: 16px; margin-left: auto; font-size: 15px; }
.net { font-size: 13px; padding: 2px 8px; border-radius: 10px; background: #2c7a4b; }
.net.offline { background: #a15c00; }

main { max-width: 900px; margin: 0 auto; padding: 16px 16px 120px; }
h1 { font-size: 24px; margin: 8px 0 16px; }
h2 { font-size: 20px; margin: 0 0 12px; }

.karte {
  background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  padding: 16px; margin-bottom: 16px;
}
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled { opacity: .75; }
.gesperrt-hinweis { background: var(--gelb); border: 1px solid #e6d58a; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 15px; }

.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.raster .voll { grid-column: 1 / -1; }
@media (max-width: 600px) { .raster { grid-template-columns: 1fr; } }

label.feld { display: block; font-size: 14px; color: #4a5565; }
label.feld > span { display: block; margin-bottom: 3px; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=search],
input[type=number], input[type=password], select, textarea {
  width: 100%; font: inherit; color: inherit; padding: 11px 12px; min-height: 46px;
  border: 1px solid var(--rand); border-radius: 8px; background: #fff;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid #9bbbe8; border-color: var(--blau); }

.wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.wahl label {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 46px;
  border: 1px solid var(--rand); border-radius: 8px; background: #fff; cursor: pointer;
}
.wahl input { width: 22px; height: 22px; margin: 0; }
.frage { font-weight: 600; margin: 10px 0 2px; }
.haken { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.haken input { width: 24px; height: 24px; margin-top: 2px; flex: none; }

.knopf {
  font: inherit; font-weight: 600; padding: 12px 18px; min-height: 48px; border-radius: 10px;
  border: 1px solid var(--blau); background: #fff; color: var(--blau); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.knopf.haupt { background: var(--blau); color: #fff; }
.knopf.gefahr { border-color: var(--rot); color: var(--rot); }
.knopf.klein { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.knopf:disabled { opacity: .5; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

table.leistung { width: 100%; border-collapse: collapse; }
table.leistung th { text-align: left; font-size: 13px; color: #4a5565; padding: 4px; }
table.leistung td { padding: 4px; vertical-align: middle; }
table.leistung td.nr { width: 28px; color: #4a5565; }
table.leistung input { padding: 8px; min-height: 42px; }
.menge { width: 70px; } .preis { width: 100px; }
.summe { text-align: right; font-size: 20px; font-weight: 700; margin-top: 10px; }
.gesamt-zelle { text-align: right; white-space: nowrap; min-width: 80px; }
@media (max-width: 600px) {
  .preis { width: 84px; } .menge { width: 56px; }
}

.sig-box { position: relative; border: 2px dashed var(--rand); border-radius: 10px; background: #fcfdff; }
.sig-box canvas { display: block; width: 100%; height: 200px; touch-action: none; }
.sig-box .x { position: absolute; left: 10px; bottom: 36px; color: #9aa5b4; font-size: 22px; pointer-events: none; }
.sig-box .linie { position: absolute; left: 34px; right: 10px; bottom: 36px; border-bottom: 1px solid #b6c0cc; pointer-events: none; }
.sig-info { font-size: 13px; color: #4a5565; margin-top: 4px; }
.unterschrift-bild { max-width: 100%; height: 100px; object-fit: contain; border-bottom: 1px solid #333; }

.liste-kopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.liste-kopf > * { flex: 1 1 160px; }
.eintrag {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 12px 16px;
  margin-bottom: 10px; text-decoration: none; color: inherit;
}
.eintrag .name { font-weight: 700; }
.eintrag .zeile2 { font-size: 14px; color: #4a5565; }
.marke { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--blau-hell); color: var(--blau); white-space: nowrap; }
.marke.fertig { background: #dff3e6; color: var(--gruen); }
.leer { text-align: center; color: #4a5565; padding: 40px 0; }

.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: #fff;
  border-top: 1px solid var(--rand); padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.speicher { font-size: 13px; color: #4a5565; align-self: center; }

.dialog-hintergrund { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.5); overflow: auto; padding: 16px; }
.dialog { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 20px; }

/* Positionen als Karten (auf dem Tablet gut lesbar) */
.pos { border: 1px solid var(--rand); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: #fcfdff; }
.pos-kopf { display: flex; gap: 8px; align-items: center; }
.pos-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--blau-hell); color: var(--blau); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.pos-label { flex: 1; font-weight: 600; }
.pos-zahlen { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 10px; margin-top: 8px; align-items: end; }
.pos-extra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.pos-extra .voll { grid-column: 1 / -1; margin: 0; }
.pos-gesamt { min-height: 46px; display: flex; align-items: center; justify-content: flex-end; font-weight: 700; font-size: 18px; }
.menge, .preis { width: 100%; }
@media (max-width: 600px) { .pos-extra { grid-template-columns: 1fr 1fr; } }
.summen { margin-top: 12px; }
.summen > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.summen .gross { font-size: 20px; font-weight: 700; border-top: 2px solid var(--blau); margin-top: 4px; padding-top: 8px; }
.trenner { border: 0; border-top: 1px solid var(--rand); margin: 12px 0; }
b[hidden], span[hidden], div[hidden] { display: none !important; }

.sig-box .overlay { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 12px; color: #4a5565; font-weight: 600; pointer-events: none; }
.sig-box.zu { background: #e3e7ed; border-color: #b6c0cc; }
.sig-box.zu canvas { pointer-events: none; opacity: .15; }
.sig-box.zu .x, .sig-box.zu .linie { opacity: .3; }
.sig-box.zu .overlay { display: flex; }
.sig-fehler { background: var(--gelb); border: 1px solid #e6d58a; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 15px; }
.sig-fehler ul { margin: 4px 0 0; padding-left: 20px; }

/* Logo, Rolle, Bestätigung */
.logo { max-height: 70px; max-width: 240px; display: block; margin-bottom: 6px; }
.logo-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.topbar .rolle { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.topbar .rolle select { min-height: 32px; padding: 2px 6px; font-size: 14px; width: auto; color: var(--text); background: #fff; }
.rollenschild { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 6px; letter-spacing: .03em; }
.rollenschild.admin { background: #f0b429; color: #3a2a00; }
.rollenschild.monteur { background: #4cc3a0; color: #04332a; }
.plzort { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.ver { font-size: 12px; opacity: .8; }
.bestaetigung { border-top: 2px solid var(--blau); margin-top: 20px; padding-top: 8px; }
.topbar nav a[hidden] { display: none; }

/* Fotos */
.foto-raster { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.foto-raster figure { margin: 0; width: 160px; }
.foto-raster img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rand); display: block; }
.foto-raster figcaption { font-size: 11px; color: #4a5565; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.foto-raster.klein figure { width: 120px; }
.foto-raster.klein img { height: 90px; }

/* Dokumentansicht (auch zum Drucken) */
.doc { background: #fff; padding: 22px; border: 1px solid var(--rand); border-radius: 8px; font-size: 14px; line-height: 1.4; }
.doc h2 { font-size: 18px; } .doc h3 { font-size: 16px; margin: 16px 0 6px; } .doc h4 { font-size: 14px; margin: 10px 0 2px; }
.doc p { margin: 4px 0 8px; }
.doc .doc-kopf { border-bottom: 2px solid var(--blau); padding-bottom: 8px; margin-bottom: 10px; }
.doc .klein { font-size: 12px; color: #4a5565; }
.doc dl { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; }
.doc dt { font-weight: 700; } .doc dd { margin: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.doc th, .doc td { border: 1px solid #b6c0cc; padding: 4px 6px; text-align: left; vertical-align: top; }
.doc td.r, .doc th.r { text-align: right; }
.doc .kasten { border: 1px solid #b6c0cc; padding: 8px; background: #f7f8fa; }
.doc .zeile { border-bottom: 1px solid #333; padding-top: 16px; }
.doc .block { margin-top: 10px; }
.doc .abschnitt { background: var(--blau-hell); padding: 3px 8px; font-weight: 700; margin-top: 12px; }

@media print {
  body { background: #fff; }
  .topbar, .leiste, .keinprint, .dialog-hintergrund .keinprint { display: none !important; }
  main { padding: 0; max-width: none; }
  .doc { border: 0; padding: 0; }
  .dialog-hintergrund { position: static; background: none; padding: 0; overflow: visible; }
  .dialog { padding: 0; max-width: none; }
  .seitenumbruch { page-break-after: always; }
  body.dialog-offen main { display: none; }
}

/* Eigene Dialoge und Archiv */
.modal-hintergrund { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.modal { background: #fff; border-radius: 12px; padding: 20px; max-width: 520px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.modal-text { font-size: 17px; line-height: 1.5; }
.modal .knopfreihe { justify-content: flex-end; }
.sig-box.fest canvas { pointer-events: none; }
.krume { margin: 0 0 12px; color: #4a5565; }

.eintrag-zeile { margin-bottom: 4px; }
.eintrag-zeile .eintrag { margin-bottom: 4px; }

/* Kopfzeile mit Menü */
.topbar .platz { flex: 1; }
.topbar { gap: 10px; }
.rollenschild { white-space: nowrap; }
.topbar .net { white-space: nowrap; }
.menue { position: relative; }
.menue-knopf { font: inherit; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.menue-liste { position: absolute; right: 0; top: calc(100% + 8px); min-width: 280px; background: #fff; color: var(--text); border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 6px; z-index: 40; }
.menue-liste a { display: block; padding: 12px 14px; color: var(--text); border-radius: 8px; text-decoration: none; font-size: 17px; }
.menue-liste a:hover, .menue-liste a:focus { background: var(--blau-hell); }
.menue-liste hr { border: 0; border-top: 1px solid var(--rand); margin: 6px 0; }
.menue-liste .rolle { display: block; padding: 8px 14px; font-size: 13px; color: #4a5565; }
.menue-liste .rolle select { width: 100%; margin-top: 4px; min-height: 40px; color: var(--text); background: #fff; }
.menue-fuss { padding: 8px 14px 4px; font-size: 12px; color: #6b7686; }
.menue-liste [hidden], .menue-liste a[hidden], .menue-liste hr[hidden] { display: none !important; }

.marke.neu { background: #fff0c2; color: #6b4a00; font-weight: 700; }

.marke.laeuft { background: #dbeafe; color: #1e3a8a; font-weight: 700; }
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { padding: 3px 0; }

/* Übersicht */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kachel { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 14px; }
.kachel .zahl { font-size: 32px; font-weight: 800; color: var(--blau); line-height: 1.1; }
.kachel.warn { background: var(--gelb); border-color: #e6d58a; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Druck-Layout (PDF): A4, saubere Ränder, keine zerrissenen Zeilen */
@page { size: A4; margin: 14mm 13mm 16mm; }
@media print {
  html { font-size: 10.5pt; }
  .doc { font-size: 10pt; line-height: 1.35; color: #000; }
  .doc h2 { font-size: 15pt; margin: 0 0 6pt; }
  .doc h3 { font-size: 12pt; break-after: avoid; }
  .doc h4 { break-after: avoid; }
  .doc .abschnitt { break-after: avoid; background: #e8edf5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc tr, .doc .block, .doc figure, .doc .kasten, .doc dl > * { break-inside: avoid; }
  .doc table { break-inside: auto; }
  .doc th { background: #eef1f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc .doc-kopf { border-bottom: 1.5pt solid #1f3a5f; }
  .doc .logo { max-height: 18mm; }
  .unterschrift-bild { height: 22mm; }
  .doc .foto-raster.klein figure { width: 38mm; }
  .doc .foto-raster.klein img { height: 28mm; }
  .doc p { orphans: 3; widows: 3; }
  .doc a { color: inherit; text-decoration: none; }
}

a.kachel { text-decoration: none; color: inherit; display: block; }
a.kachel.aktiv { outline: 3px solid var(--blau); background: var(--blau-hell); }
.kachel.warn .zahl { color: #8a4b00; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chip { font: inherit; font-weight: 600; padding: 10px 14px; min-height: 44px; border-radius: 22px; border: 1px solid var(--rand); background: #fff; color: var(--text); cursor: pointer; }
.chip.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
.chip.hell:not(.aktiv) { background: #fff0c2; border-color: #e6c76a; }

table.stat { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
table.stat th, table.stat td { padding: 8px 10px; border-bottom: 1px solid var(--rand); text-align: left; }
table.stat th { background: var(--blau-hell); font-size: 13px; }
table.stat .r { text-align: right; white-space: nowrap; }
.balken { background: #eef1f6; border-radius: 6px; height: 12px; overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--blau); }

.qr-platzhalter { display: flex; gap: 14px; align-items: center; margin: 8px 0; font-size: 14px; }
.qr-box { flex: none; width: 110px; height: 110px; border: 2px dashed #8a97a8; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; color: #8a97a8; background: repeating-conic-gradient(#eef1f6 0 25%, #fff 0 50%) 0 0 / 22px 22px; }

.marke.abbruch { background: #fde8e6; color: #8a1c14; font-weight: 700; }

/* Hervorgehobene Knöpfe zum Anlegen eines neuen Auftrags */
.topbar .brand { border: 1px solid rgba(255,255,255,.55); border-radius: 8px; padding: 6px 12px; font-size: 17px; white-space: nowrap; background: rgba(255,255,255,.1); }
.topbar .topneu, .neu-auftrag {
  background: #ffc83d; color: #1c2430 !important; font-weight: 800; border: 2px solid #e0a800; border-radius: 10px;
  padding: 8px 14px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; font-size: 17px;
}
.topbar .topneu[hidden] { display: none; }
.neu-auftrag { font: inherit; font-weight: 800; font-size: 18px; padding: 10px 18px; }
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.kopfzeile h1 { margin: 0; }
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar .topneu { padding: 6px 10px; min-height: 40px; font-size: 15px; }
  .topbar .brand { font-size: 15px; padding: 6px 10px; }
  .topbar .platz { display: none; }
  .topbar .menue { margin-left: auto; }
  .topbar .rollenschild, .topbar .net { order: 5; }
}

/* Server-Oberfläche: Anmeldung, Menü, Hinweise */
body.abgemeldet .menue, body.abgemeldet .rollenschild, body.abgemeldet #topNeu, body.abgemeldet .net { display: none !important; }
.fehler { color: var(--rot); background: #fde8e6; border: 1px solid #e6a8a3; border-radius: 8px; padding: 8px 12px; }
.fehler[hidden] { display: none; }
.menue-liste .menue-link { display: block; width: 100%; text-align: left; font: inherit; font-size: 17px; padding: 12px 14px; color: var(--text); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.menue-liste .menue-link:hover { background: var(--blau-hell); }

/* Versand per E-Mail, PDF-Links, Passwort vergessen */
.linkknopf { font: inherit; font-size: 15px; color: var(--blau); background: none; border: 0; padding: 8px 4px; text-decoration: underline; cursor: pointer; min-height: 40px; }
.mitte { text-align: center; margin-top: 12px; }
.rot { color: var(--rot); }
.pdf-link { color: var(--blau); white-space: nowrap; }
.sig-info.fehler { color: var(--rot); }

/* ==========================================================================
   Handy und Tablet: nichts steht seitlich über, kein Zoom beim Antippen,
   gut antippbare Knöpfe, lange Wörter brechen um. (Desktop und Druck bleiben gleich.)
   ========================================================================== */
html { text-size-adjust: 100%; }
img, canvas, video, svg { max-width: 100%; }
/* Lange E-Mail-Adressen, Rechnungsnummern, Namen ohne Leerzeichen brechen um statt zu überlaufen */
@media screen {
  main, .modal, .dialog, .leiste, .menue-liste, .fehler, #hinweisleiste { overflow-wrap: break-word; }
  .eintrag .zeile2, .modal p, .sig-info, .pdf-link { overflow-wrap: anywhere; }
  .marke, .r, .pdf-link, .gesamt-zelle, .pos-gesamt, .summen b, .kachel .zahl, .rollenschild, .net { overflow-wrap: normal; }
}
/* Flex- und Grid-Kinder dürfen schmaler werden als ihr Inhalt (sonst drücken sie seitlich heraus) */
.raster > *, .plzort > *, .pos-zahlen > *, .pos-extra > *, .kacheln > *, .liste-kopf > *,
.knopfreihe > *, .kopfzeile > *, .summen > div > span, .qr-platzhalter > *, .logo-zeile > *, .pos-kopf > *, .haken > span { min-width: 0; }
.eintrag > div:first-child { flex: 1 1 auto; min-width: 0; }
.eintrag > :last-child { flex: none; }
.summen > div > b { flex: none; white-space: nowrap; }
.knopf { max-width: 100%; text-align: center; }
.marke { align-self: flex-start; } /* in Flex-Zeilen nicht zur hohen Säule strecken */
/* Eingabefelder: mindestens 16px Schrift, sonst zoomt iOS beim Antippen hinein und die Seite "verrutscht" */
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time],
input[type=number], input[type=password], input[type=search], input:not([type]), select, textarea {
  font-size: max(16px, 1em); min-width: 0; max-width: 100%;
}
.topbar .rolle select, .menue-liste .rolle select { font-size: 16px; }
/* iOS: Datums-/Zeitfelder halten sich sonst nicht an width:100% und stehen über */
@supports (-webkit-touch-callout: none) {
  input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; display: block; text-align: left; }
  input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; }
}
/* Dialoge: oben beginnen und im Hintergrund scrollen (zentriert würde ein hoher Dialog oben abgeschnitten) */
.modal-hintergrund { align-items: flex-start; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal { margin: auto; }
/* Kopfleiste darf auch zwischen 600 und 760px (Handy quer, kleine Tablets) umbrechen statt überzustehen */
.topbar { flex-wrap: wrap; row-gap: 6px; }
.dialog-hintergrund { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.menue-liste { max-width: calc(100vw - 24px); max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
/* Tabellen: nur die Tabelle scrollt, nie die ganze Seite */
.tabelle-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.tabelle-scroll > table { margin-bottom: 0; }
/* Euro-Beträge in den Statistik-Kacheln an die Kachelbreite anpassen */
.kacheln.betraege .zahl { font-size: clamp(20px, 3.4vw, 32px); white-space: nowrap; }
@supports (container-type: inline-size) {
  .kacheln.betraege .kachel { container-type: inline-size; }
  .kacheln.betraege .zahl { font-size: clamp(16px, 15cqi, 32px); }
}
.qr-platzhalter > div:last-child { flex: 1 1 auto; }
.rollenschild { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

@media screen {
  body.dialog-offen { overflow: hidden; }
  .doc { overflow-x: auto; }
  .doc th, .doc td { overflow-wrap: break-word; }
  .doc td.r:not([colspan]) { white-space: nowrap; }
}

/* Touch-Geräte und Tablets: Knöpfe mindestens 44px hoch */
@media screen and (hover: none), screen and (pointer: coarse), screen and (max-width: 1024px) {
  .knopf.klein, .linkknopf, .menue-knopf, .topbar .brand, .topbar .topneu { min-height: 44px; }
  .topbar .brand { display: inline-flex; align-items: center; }
  .pdf-link { display: inline-block; padding: 10px 0; }
  .krume a { display: inline-block; padding: 10px 2px; }
}

/* Schmale Tablets und Handys */
@media screen and (max-width: 760px) {
  .leiste { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 8px; }
  .leiste .knopf { flex: 1 1 auto; }
  .leiste .speicher { flex: 1 1 100%; text-align: center; line-height: 1.2; }
  .leiste .speicher { min-height: 1.2em; }   /* Platz immer frei halten: Leiste springt beim ersten Speichern nicht */
  body:has(.leiste) main { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
}

/* Handys */
@media screen and (max-width: 600px) {
  main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .karte { padding: 14px 12px; }
  h1 { font-size: 22px; overflow-wrap: anywhere; }
  .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); column-gap: 8px; }
  .topbar .brand { font-size: 15px; padding: 6px 10px; }
  .topbar .topneu { padding: 6px 10px; font-size: 15px; }
  .menue-knopf { padding: 8px 12px; }
  .topbar .rollenschild { max-width: calc(100% - 90px); }
  .topbar .net:not(.offline) { display: none; } /* „online“ nur auf breiten Bildschirmen, „offline“ bleibt sichtbar */
  /* Hinweis „offline / nicht gesendet“ schwebt über der Kante der Kopfleiste, damit die Kopfleiste nicht höher wird und springt */
  .topbar .net.offline { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: -12px; z-index: 5; font-size: 11px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
  /* Menü: an der Kopfleiste ausrichten, nicht am Menü-Knopf (der kann in Zeile 2 links stehen) */
  .topbar .menue { position: static; }
  .menue-liste { left: auto; right: max(12px, env(safe-area-inset-right)); top: calc(100% + 4px); min-width: 0; width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
  /* Meldungsleiste: bei zweizeiliger Kopfleiste nicht darunter verstecken */
  #hinweisleiste { position: relative !important; top: auto !important; margin: 8px 12px !important; }
  .neu-auftrag { font-size: 17px; padding: 10px 14px; }
  .leiste .knopf { font-size: 16px; padding: 10px 12px; }
  .dialog-hintergrund, .modal-hintergrund { padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .dialog { padding: 12px; }
  .modal { padding: 16px; }
  .modal .knopfreihe .knopf { flex: 1 1 auto; }
  .doc { padding: 12px; }
  .doc dl { grid-template-columns: 1fr; gap: 0; }
  .doc dd { margin-bottom: 6px; }
  .doc th, .doc td { padding: 3px 4px; font-size: 13px; }
  .pos { padding: 8px; }
  .pos-zahlen { grid-template-columns: 76px 1fr 1fr; gap: 8px; }
  .pos-gesamt { font-size: 17px; }
  .summen .gross { font-size: 18px; }
  .foto-raster figure { width: calc(50% - 5px); }
  .foto-raster.klein figure { width: calc(33.333% - 7px); }
  .qr-box { width: 80px; height: 80px; }
  .kacheln { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .kachel { padding: 10px; }
  table.stat th, table.stat td { padding: 6px 6px; font-size: 14px; }
  table.stat th { hyphens: auto; -webkit-hyphens: auto; }
  .eintrag { padding: 12px; gap: 6px; flex-direction: column; align-items: stretch; }
  .eintrag > :last-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; text-align: left !important; }
  .eintrag > :last-child .marke { white-space: normal; }
  .wahl label { flex: 1 1 auto; }
  .liste-kopf > * { flex: 1 1 100%; }
}
table.stat { overflow-wrap: normal; }
@media screen and (max-width: 420px) {
  table.stat:not(.beleg) td:nth-child(5), table.stat:not(.beleg) th:nth-child(5) { display: none; }
  table.stat th, table.stat td { padding: 6px 4px; font-size: 13px; }
}

/* Touch: Leiste unten ausblenden, solange die Tastatur offen ist (sonst schwebt sie über den Feldern) */
@media (hover: none) and (pointer: coarse) {
  body:has(input:is([type=text], [type=tel], [type=email], [type=number], [type=password], [type=search]):focus, textarea:focus) .leiste { display: none; }
}
@media print {
  .tabelle-scroll { overflow: visible; }
}

/* QS-Nachbesserung: „Jetzt“-Knopf nie quetschen; im Querformat die Kopfleiste nicht festkleben; Kopfleiste auf schmalen Handys kompakter */
[data-jetzt] { flex: none; white-space: nowrap; }
@media screen and (max-height: 500px) { .topbar { position: static; } }
@media screen and (max-width: 400px) {
  .topbar .rollenschild { font-size: 11px; padding: 2px 6px; }
  .leiste .speicher { font-size: 12px; }
}

/* QR-Code für die Unterlagen (Download am Handy, Server weist ihn nach) */
.qr-bereich { margin: 8px 0; min-width: 0; }
.qr-gross { display: flex; justify-content: center; margin: 8px 0; }
.qr-bild { display: block; width: 280px; min-width: 240px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; background: #fff; border: 12px solid #fff; outline: 1px solid var(--rand); border-radius: 4px; box-sizing: border-box; }
.qr-url { overflow-wrap: anywhere; word-break: break-all; user-select: all; -webkit-user-select: all; }
.qr-ok { color: #1a7a3a; font-weight: 700; }
.qr-bereich .knopf { min-height: 44px; }
@media screen and (max-width: 400px) { .qr-bild { width: 100%; min-width: 0; } }

/* Testversion zum Vorführen */
.demo-band { position: sticky; top: 0; z-index: 60; background: #b3261e; color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 5px 10px; height: 27px; line-height: 17px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-band[hidden] { display: none; }
body.demo .topbar { top: 27px; }
@media print {
  body.demo::after { content: 'MUSTER · TESTVERSION · NICHT GÜLTIG'; position: fixed; top: 45%; left: 0; right: 0; text-align: center; font-size: 40pt; font-weight: bold; color: rgba(179,38,30,.18); transform: rotate(-30deg); pointer-events: none; }
  .demo-band { position: static; }
}

/* S5.11: Auftragsblatt in 4 Schritten */
[data-schritt][hidden] { display: none !important; }
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; }
.schritt-knopf { font: inherit; font-size: 13px; font-weight: 600; line-height: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 6px 3px; border: 1px solid var(--rand); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.schritt-knopf b { width: 26px; height: 26px; border-radius: 50%; background: var(--blau-hell); color: var(--blau); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.schritt-knopf.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
.schritt-knopf.aktiv b { background: #fff; color: var(--blau); }
.schritt-nav { display: flex; gap: 10px; margin: 8px 0 16px; }
.schritt-nav .knopf { flex: 1 1 0; min-height: 52px; font-size: 17px; }
.schritt-nav .knopf.aus { display: none; }
.pos-hinzu { display: block; width: 100%; min-height: 52px; font-size: 17px; font-weight: 700; border: 2px dashed var(--blau); background: var(--blau-hell); color: var(--blau); margin: 4px 0 12px; }
.pos-aktionen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.posdialog { max-height: none; }
.posdialog h2 { margin: 0 0 8px; }
.posdialog h3 { margin: 14px 0 6px; font-size: 16px; }
.pos-liste { display: flex; flex-direction: column; gap: 8px; }
.pos-wahl { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; min-height: 48px; width: 100%; max-width: 100%; }
.pos-wahl > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pos-wahl b { flex: none; white-space: nowrap; }
.vermerk { background: #fff7e0; border: 2px solid #d9a400; border-radius: 8px; padding: 12px; margin-bottom: 12px; font-size: 16px; line-height: 1.45; }
.vermerk-doc { font-size: 14px; border-left: 3px solid #999; padding-left: 8px; }
.pv-zeile { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: end; margin-bottom: 8px; }
@media (max-width: 600px) { .pv-zeile { grid-template-columns: 1fr 96px; } .pv-zeile .knopf { grid-column: 1 / -1; } }
.pos-wahl .sig-info { flex: none; white-space: nowrap; margin: 0; }

/* S5.11 Nachbesserung: weniger Scrollen */
.schritte { position: sticky; top: 56px; z-index: 8; gap: 4px; margin: 0 -4px 10px; padding: 6px 4px; background: var(--grau); }
.schritt-knopf { flex-direction: row; gap: 4px; min-height: 40px; padding: 4px 2px; font-size: 12px; line-height: 1.1; border-radius: 8px; white-space: nowrap; overflow-wrap: normal; }
.schritt-knopf b { width: 20px; height: 20px; font-size: 12px; flex: none; }
.schritt-knopf .l-kurz { display: none; }
@media screen and (max-width: 480px) { .schritt-knopf .l-lang { display: none; } .schritt-knopf .l-kurz { display: inline; } }
@media screen and (min-width: 481px) { .schritt-knopf { font-size: 14px; min-height: 44px; } }
.leiste .knopf.aus { display: none; }
.leiste .knopf.still { border-color: var(--rand); color: #4a5565; background: #fff; }
.abbruch { margin: 24px 0 8px; text-align: center; }
.textknopf { font: inherit; font-size: 14px; color: var(--rot); background: none; border: 0; text-decoration: underline; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.sig-fehler .linkknopf { display: inline; text-align: left; padding: 6px 0; min-height: 0; line-height: 1.5; font-size: 15px; }   /* inline: der Aufzählungspunkt steht an der ersten Zeile */
.sig-fehler li { list-style: disc; }
@media screen and (max-width: 600px) {
  .kontakt .knopf { flex: 1 1 calc(50% - 6px); min-width: 0; }
}
@media screen and (max-width: 760px) {
  body:has(.leiste) main { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
}
.posdialog { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.pos-scroll { overflow-y: auto; min-height: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.pos-fuss { position: sticky; bottom: 0; background: #fff; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--rand); justify-content: stretch !important; }
.pos-fuss .knopf { flex: 1 1 auto; }
.pos-wahl:disabled { opacity: 1; background: #eceff3; color: #5b6573; border: 1px dashed #aab3bf; cursor: not-allowed; }
.pos-wahl:disabled .sig-info { color: #5b6573; font-weight: 700; }
@media (max-width: 600px) { .demo-lang { display: none; } }

/* S5.12 Rechnung: Einleitungstext und Satzbausteine */
.sb-zeile { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rand); }
.sb-zeile .knopf { justify-self: start; }
.sb-wahl > span { display: flex; flex-direction: column; gap: 2px; }
.sb-anfang { font-size: 13px; color: #5b6573; font-weight: 400; }
#einleitungText { width: 100%; min-height: 110px; }
.doc .einleitung { margin-top: 14px; }

/* S5.12 Nachtrag: Auffälligkeiten im Auftrag (Schritt 4) */
.nachtrag { border-color: #d9a400; background: #fffdf5; }
.nachtrag-pos { background: #fff; }
.nt-summen { margin-bottom: 12px; }
.nt-zustimmung { margin-top: 12px; }
#ntSprung { margin-top: 10px; }

/* S5.12 Korrekturen: Preisvorlagen am Handy, Hinweiszeile im Dialog, Montage */
.pv-zeile > * { min-width: 0; }
.pv-zeile input { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .pv-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 96px); } }
.pos-scroll { padding-bottom: 8px; }
.pos-scroll > .sig-info { margin: 10px 0 4px; white-space: normal; overflow-wrap: anywhere; }

/* Belegliste: beim Drucken nur den Belegbereich zeigen */
@media print {
  body.belegdruck #app > *:not(#belegBereich), body:has(#belegBereich) #app > *:not(#belegBereich) { display: none !important; }
  body.belegdruck #belegBereich, body:has(#belegBereich) #belegBereich { border: 0; box-shadow: none; padding: 0; }
}

a.knopf[hidden], button.knopf[hidden] { display: none; }