[hidden] { display: none !important; }
:root {
  --schwarz: #000; --weiss: #fff; --grau: #9a9a9a; --dunkel: #161616; --linie: #333;
  --rot: #ff3b30; --gelb: #ffd400; --gruen: #22c55e; --blau: #4da3ff;
  --knopf: min(52vmin, 400px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--schwarz); color: var(--weiss);
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; }
body { display: flex; flex-direction: column; min-height: 100dvh; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Kopfzeile */
.kopf { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--linie); gap: 12px; }
.logo { font-weight: 300; letter-spacing: .38em; font-size: 26px; }
.logo span { font-size: 12px; letter-spacing: .3em; margin-left: .6em; font-weight: 500; vertical-align: middle; }
.untertitel { color: var(--grau); font-size: 14px; letter-spacing: .08em; margin-top: 2px; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.badge { background: var(--gelb); color: #000; font-weight: 800; font-size: 13px; letter-spacing: .08em; padding: 7px 10px; border-radius: 6px; }
.icon-btn { display: flex; align-items: center; gap: 6px; background: var(--dunkel); border: 2px solid var(--linie); border-radius: 14px;
  min-height: 56px; min-width: 56px; padding: 0 14px; justify-content: center; font-size: 18px; font-weight: 600; }
.icon-btn svg { width: 28px; height: 28px; fill: var(--weiss); }
.icon-btn:active { background: #2a2a2a; }

/* Hauptbereich */
.haupt { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 18px 24px; min-height: 0; }
.mitte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 0; }
.seite { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
@media (orientation: portrait), (max-width: 820px) {
  .haupt { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  :root { --knopf: min(62vw, 440px); }
}

.status { font-size: clamp(26px, 4.2vmin, 40px); font-weight: 700; text-align: center; min-height: 1.3em; }
.projekt-chip { display: flex; align-items: center; gap: 8px; background: #102a44; color: #cfe6ff; border: 2px solid #1f4f7d; border-radius: 999px; padding: 6px 8px 6px 16px; font-size: 18px; font-weight: 600; }
.projekt-chip button { background: transparent; border: 0; font-size: 26px; line-height: 1; width: 40px; height: 40px; color: #cfe6ff; }

/* Großer Sprechknopf */
.sprech-knopf { position: relative; width: var(--knopf); height: var(--knopf); border-radius: 50%; border: 0; background: var(--weiss);
  display: grid; place-items: center; box-shadow: 0 0 0 10px #1c1c1c; transition: transform .12s, background .2s; touch-action: manipulation; }
.sprech-knopf:active { transform: scale(.97); }
.sprech-knopf .ico { width: 42%; height: 42%; grid-area: 1/1; display: none; }
.sprech-knopf .ico-mikro, .sprech-knopf .ico-stopp { fill: #000; }
.sprech-knopf .ico-denkt { stroke: #000; animation: dreh 1s linear infinite; }
.sprech-knopf .ring { position: absolute; inset: -10px; border-radius: 50%; border: 6px solid transparent; pointer-events: none; }
.sprech-knopf[data-zustand="bereit"] .ico-mikro { display: block; }
.sprech-knopf[data-zustand="hoert"] { background: var(--rot); }
.sprech-knopf[data-zustand="hoert"] .ico-mikro { display: block; fill: #fff; }
.sprech-knopf[data-zustand="hoert"] .ring { border-color: var(--rot); animation: puls 1.2s ease-out infinite; }
.sprech-knopf[data-zustand="denkt"] { background: #d9d9d9; }
.sprech-knopf[data-zustand="denkt"] .ico-denkt { display: block; }
.sprech-knopf[data-zustand="spricht"] { background: var(--blau); }
.sprech-knopf[data-zustand="spricht"] .ico-stopp { display: block; fill: #fff; }
.sprech-knopf[data-zustand="spricht"] .ring { border-color: var(--blau); animation: puls 1.6s ease-out infinite; }
@keyframes puls { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes dreh { to { transform: rotate(360deg); } }

.live { font-size: 22px; color: #ddd; text-align: center; min-height: 1.4em; max-width: 90%; font-style: italic; }

.weiterleiten { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.gross-btn { min-height: 72px; padding: 0 28px; border-radius: 16px; border: 0; font-size: 24px; font-weight: 800; background: var(--weiss); color: #000; }
.gross-btn.ja { background: var(--gruen); color: #000; }
.gross-btn.nein { background: #3a3a3a; color: #fff; }

/* Antwort + Verlauf */
.antwort-karte { background: var(--dunkel); border: 2px solid var(--linie); border-radius: 18px; padding: 18px 20px; }
.antwort-karte.unbekannt { border-color: var(--gelb); }
.antwort-text { font-size: 22px; line-height: 1.4; }
.antwort-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.quelle { color: var(--gelb); font-size: 16px; font-weight: 600; }
.quelle:empty { display: none; }
.klein-btn { min-height: 52px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--linie); background: #222; color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }
.klein-titel { color: var(--grau); font-size: 15px; margin-bottom: 8px; }
.beispiele { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.beispiele .klein-titel { width: 100%; }
.chip { min-height: 52px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--linie); background: #111; font-size: 17px; text-align: left; }
.chip:active { background: #2a2a2a; }
.verlauf { font-size: 15px; color: #cfcfcf; }
.verlauf summary { cursor: pointer; color: var(--grau); min-height: 44px; display: flex; align-items: center; font-size: 16px; }
.verlauf .msg { padding: 6px 0; border-bottom: 1px solid #222; }
.verlauf .msg b { color: #fff; }
.verlauf .msg.system { color: var(--gelb); }
.tipp-form { display: flex; gap: 8px; margin-top: auto; }
.tipp-form input { flex: 1; min-height: 52px; border-radius: 12px; border: 2px solid var(--linie); background: #111; color: #fff; font-size: 18px; padding: 0 14px; }

.fuss { color: #777; font-size: 13px; padding: 8px 22px 12px; border-top: 1px solid #1c1c1c; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fuss .warn { color: var(--gelb); }

/* Dialog */
dialog { background: #111; color: #fff; border: 2px solid var(--linie); border-radius: 18px; width: min(560px, 94vw); padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.7); }
.dialog-inhalt { display: flex; flex-direction: column; gap: 16px; padding: 22px; font-size: 18px; }
.dialog-inhalt h2 { margin: 0; }
.dialog-inhalt label { display: flex; flex-direction: column; gap: 6px; }
.dialog-inhalt label.zeile { flex-direction: row; align-items: center; gap: 12px; }
.dialog-inhalt input[type=checkbox] { width: 28px; height: 28px; }
.dialog-inhalt input[type=text], .dialog-inhalt select { min-height: 52px; font-size: 18px; border-radius: 10px; border: 2px solid var(--linie); background: #000; color: #fff; padding: 0 10px; }
.dialog-inhalt input[type=range] { width: 100%; height: 40px; }
.info { color: var(--grau); font-size: 14px; line-height: 1.5; }
.dialog-knoepfe { display: flex; justify-content: space-between; gap: 10px; }
.hinweis-box { background: #2b2200; border: 2px solid var(--gelb); color: #ffe680; border-radius: 14px; padding: 12px 16px; font-size: 17px; }

/* Code-Eingabe */
.anmeldung { position: fixed; inset: 0; background: #000; z-index: 50; display: grid; place-items: center; overflow-y: auto; padding: 16px; }
.anm-box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(440px, 100%); }
.anm-box h1 { margin: 0; font-size: 34px; font-weight: 700; }
.anm-box p { margin: 0; font-size: 22px; text-align: center; }
.anm-box p.fehler { color: var(--rot); font-weight: 700; }
.anm-box .anm-hinweis { color: var(--grau); font-size: 15px; margin-top: 6px; }
.anm-punkte { display: flex; gap: 16px; margin: 10px 0 14px; }
.anm-punkte i { width: 24px; height: 24px; border-radius: 50%; border: 3px solid #fff; }
.anm-punkte i.voll { background: #fff; }
.anm-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.anm-tasten button { min-height: 76px; border-radius: 16px; border: 2px solid var(--linie); background: #1a1a1a; font-size: 32px; font-weight: 700; }
.anm-tasten button:active { background: #333; }
.anm-tasten button[data-t="ok"] { background: var(--weiss); color: #000; }
@media (max-height: 700px) { .anm-tasten button { min-height: 58px; font-size: 26px; } .anm-box h1 { display: none; } }
.msg .quellen a { color: inherit; text-decoration: underline; }

/* Anmeldung mit Namen + PIN */
.anm-namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; width: min(560px, 92vw); margin-top: 10px; }
.anm-namen button { min-height: 72px; border-radius: 16px; border: 2px solid var(--linie); background: #1a1a1a; font-size: 22px; font-weight: 700; padding: 8px; }
.anm-namen button.zuletzt { border-color: var(--weiss); }
.anm-namen button:active { background: #333; }
#anm-namen-schritt, #anm-pin-schritt { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.anm-tasten button[data-t="zurueck"] { font-size: 26px; }
.anmeldung.bestaetigen { background: rgba(0,0,0,.94); }
.wer-chip { font-size: 17px; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Zusatzauftrag / Lieferschein: Unterschrift */
.beleg { position: fixed; inset: 0; z-index: 40; background: #f2f2f2; color: #111; display: flex; flex-direction: column; }
.beleg-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: #000; color: #fff; font-size: 20px; }
.beleg-kopf .klein-btn { color: #fff; }
.beleg-inhalt { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; padding: 14px 18px; min-height: 0; }
.beleg-vorschau { overflow-y: auto; background: #ddd; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.beleg-vorschau img { width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.beleg-form { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.beleg-form label { display: flex; flex-direction: column; gap: 4px; font-size: 17px; font-weight: 600; }
.beleg-form input { font: inherit; font-weight: 400; font-size: 20px; padding: 10px 12px; border: 2px solid #999; border-radius: 10px; background: #fff; color: #111; }
.beleg-label { margin: 6px 0 0; font-size: 17px; font-weight: 600; }
#beleg-canvas { width: 100%; height: clamp(200px, 34vh, 320px); background: #fff; border: 2px dashed #555; border-radius: 12px; touch-action: none; }
.beleg-knoepfe { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.beleg-knoepfe .klein-btn { color: #111; background: #fff; border-color: #999; }
.beleg-fehler { color: #b00020; font-weight: 700; min-height: 1.2em; margin: 0; }
.beleg-test { background: #fff3cd; border: 2px solid #e0b000; border-radius: 10px; padding: 8px 12px; font-weight: 700; }
@media (orientation: portrait), (max-width: 820px) { .beleg-inhalt { grid-template-columns: 1fr; grid-template-rows: 45vh auto; } }

/* ---------- Baustellenfotos ---------- */
.foto-status { display: flex; flex-direction: column; gap: 6px; background: var(--dunkel); border: 2px solid var(--linie); border-radius: 14px; padding: 10px 14px; font-size: 17px; min-width: min(80vw, 420px); }
.foto-status .balken { height: 8px; background: #333; border-radius: 4px; overflow: hidden; }
.foto-status .balken i { display: block; height: 100%; background: var(--gruen); transition: width .3s; }
.foto-wahl-knoepfe { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
body.kamera-offen { overflow: hidden; }
.kamera { position: fixed; inset: 0; z-index: 45; background: #000; display: flex; flex-direction: column; }
.kamera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.kamera-blitz { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.kamera-blitz.an { animation: blitz .25s ease-out; }
@keyframes blitz { from { opacity: .8; } to { opacity: 0; } }
.kamera-kopf { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(#000c, #0000); font-size: 20px; }
.kamera-kopf #kamera-info { font-size: 15px; color: #ddd; margin-top: 2px; }
.kamera-test, .kamera-hinweis { position: relative; margin: 0 18px; padding: 10px 14px; border-radius: 12px; font-weight: 700; }
.kamera-test { background: var(--gelb); color: #000; }
.kamera-hinweis { background: #000c; border: 2px solid var(--gelb); margin-top: 10px; }
.kamera-unten { position: relative; margin-top: auto; background: linear-gradient(#0000, #000d 30%); padding: 10px 14px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.kamera-leiste { display: flex; gap: 10px; overflow-x: auto; min-height: 96px; padding: 4px 2px 10px; align-items: flex-start; }
.kamera-bild { flex: 0 0 auto; width: 170px; display: flex; flex-direction: column; gap: 4px; }
.kamera-bild .rahmen { position: relative; width: 170px; height: 112px; border-radius: 10px; overflow: hidden; border: 2px solid #fff; }
.kamera-bild.ist-mangel .rahmen { border-color: #ff9f0a; }
.kamera-bild img { width: 100%; height: 100%; object-fit: cover; }
.kamera-bild .nr { position: absolute; left: 4px; bottom: 3px; background: #000a; padding: 0 6px; border-radius: 6px; font-weight: 700; }
.kamera-bild button { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #000b; color: #fff; font-size: 18px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.kamera-bild .weg { right: 3px; top: 3px; } .kamera-bild .notiz { left: 3px; top: 3px; }
.kamera-bild .mikro { right: 3px; bottom: 3px; width: 46px; height: 46px; font-size: 22px; }
.kamera-bild .mikro.nimmt-auf { background: #d70015; transform: scale(1.15); box-shadow: 0 0 0 6px #d7001566; }
.kamera-bild.mit-notiz .notiz { background: var(--gelb); color: #000; }
.kamera-bild .notiztext { font-size: 13px; line-height: 1.3; color: #fff; background: #000a; border-radius: 8px; padding: 2px 6px; max-height: calc(4 * 1.3em + 4px); overflow-y: auto; }
.kamera-bild .notiztext:empty { display: none; }
.kamera-bild .notiztext i { color: #bbb; }
.kamera-bild .notiztext .mangel { color: #ff9f0a; }
.kamera-bild .notiztext .wartet { color: #888; }
.kamera-knoepfe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.kamera-zahl { font-size: 20px; font-weight: 700; }
.ausloeser { width: 96px; height: 96px; border-radius: 50%; border: 6px solid #fff; background: #fff; box-shadow: inset 0 0 0 4px #000; }
.ausloeser:active { transform: scale(.94); background: #ddd; }
#kamera-fertig { justify-self: end; }
#kamera-fertig { white-space: nowrap; }
@media (max-width: 480px) { #kamera-fertig { padding: 0 16px; font-size: 21px; min-height: 64px; } .ausloeser { width: 84px; height: 84px; } .kamera-zahl { font-size: 17px; } }

/* Persönliche Dokumente (Ausweis usw.) im Vollbild */
body.dokument-offen { overflow: hidden; }
.dokument { position: fixed; inset: 0; z-index: 60; background: #fff; color: #000; display: flex; flex-direction: column; }
.dok-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: #000; color: #fff; }
.dok-kopf #dok-info { font-size: 14px; color: #ccc; }
.dok-knoepfe { display: flex; gap: 8px; }
.dok-knoepfe button { min-width: 52px; min-height: 48px; border-radius: 12px; border: 0; background: #333; color: #fff; font-size: 22px; font-weight: 700; }
.dok-knoepfe .dok-zu { background: #fff; color: #000; font-size: 18px; padding: 0 14px; }
.dok-hinweis { background: #fff4c2; color: #000; padding: 6px 14px; font-size: 14px; }
.dok-flaeche { flex: 1; overflow: auto; touch-action: pan-x pan-y; background: #fff; -webkit-overflow-scrolling: touch; }
.dok-seiten { width: 100%; margin: 0 auto; }
.dok-seiten img { display: block; width: 100%; height: auto; margin: 0 auto 10px; user-select: none; -webkit-user-drag: none; }
/* vertrauliche Antworten (nur Geschäftsführung) */
.karte.vertraulich, .msg.vertraulich { border-left: 4px solid #9b1c1c; }
.msg.vertraulich::before { content: '🔒 '; }

/* Zurück zum Dashboard (Startseite) */
.zum-dashboard { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; margin-right: 12px; border: 2px solid currentColor; border-radius: 12px; font-weight: 750; font-size: 16px; text-decoration: none; color: inherit; white-space: nowrap; }
.zum-dashboard span { font-size: 26px; line-height: 1; margin-top: -3px; }