:root{--bg:#f4f7fa;--kart:#fff;--text:#0b1b2b;--leise:#51657a;--linie:#d3dde7;--akzent:#0a6cff;--akzent-d:#0753c4;--ok:#0f8a4b;--warn:#b86e00;--fehler:#c62828;--r:14px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:17px;line-height:1.4;overscroll-behavior:none}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit}.seite{min-height:100%;display:flex;flex-direction:column}.inhalt{flex:1;padding:14px 16px 120px;display:flex;flex-direction:column;gap:14px}.stapel{display:flex;flex-direction:column;gap:14px}.mitte-text{text-align:center;color:var(--leise);padding:40px 16px}.kopf{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;background:var(--kart);border-bottom:1px solid var(--linie);padding:calc(env(safe-area-inset-top) + 8px) 8px 8px;min-height:60px}.kopf h1{flex:1;font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px}.kopf-zurueck,.kopf-knopf{background:none;border:0;min-width:48px;height:48px;display:grid;place-items:center;border-radius:12px;cursor:pointer}.kopf-platz{width:0}.kopf-rechts{display:flex;align-items:center;gap:4px}.pille{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:99px;font-size:14px;font-weight:600}.pille.warn{background:#fff1d6;color:var(--warn)}.pille.info{background:#e1edff;color:var(--akzent-d)}.gps{color:var(--leise);display:grid;place-items:center;width:40px}.gps.an{color:var(--ok)}.dreh{animation:dreh 1s linear infinite}@keyframes dreh{to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:var(--r);border:0;background:var(--akzent);color:#fff;font-weight:700;font-size:17px;cursor:pointer;text-decoration:none;flex:1}.btn:active{background:var(--akzent-d)}.btn:disabled{opacity:.45}.btn.zweit{background:#fff;color:var(--akzent-d);border:2px solid var(--akzent)}.btn.gefahr{background:var(--fehler)}.btn.gross{min-height:62px;font-size:18px}.btn.klein{min-height:40px;font-size:15px;padding:0 12px;flex:0}.fuss{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:10px;padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);background:#fffffff5;border-top:1px solid var(--linie)}.karte{background:var(--kart);border:1px solid var(--linie);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}.karte.mitte{align-items:center;text-align:center;gap:12px;color:var(--leise)}.karte.mitte h2{color:var(--text)}.karte-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px}.hinweis{padding:12px 14px;border-radius:12px;font-size:15px;background:#e8f0fb;color:#10325f}.hinweis.warn{background:#fff1d6;color:#6a3f00}.hinweis.fehler{background:#fde4e2;color:#8c1d18}.hinweis.ok{background:#dff4e7;color:#0b5a30}.hinweis.grow{flex:1;text-align:center;font-weight:600}.feld{display:flex;flex-direction:column;gap:6px}.feld>span{font-weight:600;font-size:15px;color:var(--leise)}input,textarea{font:inherit;padding:14px;border:2px solid var(--linie);border-radius:12px;background:#fff;color:var(--text);width:100%}input:focus,textarea:focus{outline:none;border-color:var(--akzent)}.zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{min-height:48px;padding:0 16px;border-radius:99px;border:2px solid var(--linie);background:#fff;font-weight:600;cursor:pointer}.chip.an{background:var(--akzent);border-color:var(--akzent);color:#fff}.gruppe{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--leise);margin:8px 0}.auftrag{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;background:var(--kart);border:1px solid var(--linie);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;cursor:pointer}.auftrag-kopf{display:flex;justify-content:space-between;align-items:center;font-size:19px}.auftrag-zeile{display:flex;gap:6px;align-items:flex-start;color:var(--leise);font-size:15px}.auftrag-zeile svg{flex:none;margin-top:3px}.status{font-size:13px;font-weight:700;padding:4px 10px;border-radius:99px;background:#e1edff;color:var(--akzent-d)}.status.zugewiesen{background:#fff1d6;color:var(--warn)}.status.problem{background:#fde4e2;color:var(--fehler)}.status.zugestellt,.status.abgeschlossen{background:#dff4e7;color:var(--ok)}.daten{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}.daten dt{color:var(--leise)}.daten dd{margin:0;font-weight:600}.schritte{display:flex;background:var(--kart);border-bottom:1px solid var(--linie)}.schritte button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;background:none;border:0;border-bottom:3px solid transparent;font-size:12px;color:var(--leise)}.schritte b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e6edf4;font-size:14px}.schritte .aktiv{border-bottom-color:var(--akzent);color:var(--text);font-weight:700}.schritte .ok b{background:var(--ok);color:#fff}.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kachel{position:relative;aspect-ratio:4/3;border:2px dashed var(--linie);border-radius:12px;background:#fff;overflow:hidden;padding:0;cursor:pointer}.kachel.da{border:2px solid var(--ok)}.kachel img{width:100%;height:100%;object-fit:cover;display:block}.kachel-leer{display:grid;place-items:center;height:100%;color:var(--leise)}.kachel-text{position:absolute;left:0;right:0;bottom:0;background:#0b1b2bc7;color:#fff;font-size:14px;padding:5px 8px;text-align:left}.kachel-wdh{position:absolute;top:6px;right:6px;background:#ffffffe6;border-radius:50%;width:26px;height:26px;display:grid;place-items:center}.fortschritt{color:var(--leise);font-size:15px}.kamera{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;z-index:50;overflow:hidden;background:#000;display:flex;flex-direction:column;color:#fff}.kamera-oben{flex:none;display:flex;gap:10px;align-items:center;padding:calc(env(safe-area-inset-top) + 10px) 12px 12px;background:#0b1b2beb}.kamera-x{background:#ffffff26;border:0;color:#fff;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none}.kamera-text{display:flex;flex-direction:column}.kamera-text small{opacity:.7}.kamera-text strong{font-size:24px;line-height:1.15}.kamera-text span{opacity:.85;font-size:14px}.kamera-bild{flex:1 1 0;position:relative;min-height:0;overflow:hidden;background:#000}.kamera-bild video,.kamera-bild img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.kamera-leer{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.kamera-leer{opacity:.4}.kamera-fehler{position:absolute;left:16px;right:16px;bottom:16px;background:#000000b3;padding:12px;border-radius:12px;font-size:15px}.kamera-unten{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 16px calc(env(safe-area-inset-bottom) + 18px);background:#0b1b2beb}.ausloeser{width:84px;height:84px;border-radius:50%;border:5px solid #fff;background:none;padding:6px}.ausloeser span{display:block;width:100%;height:100%;border-radius:50%;background:#fff}.ausloeser:active span{background:#c9d6e3}.ausloeser:disabled{opacity:.4}.kamera-datei{background:#ffffff26;border:0;color:#fff;width:56px;height:56px;border-radius:50%;display:grid;place-items:center}.kamera-platz{width:56px}.kamera .btn.zweit{background:transparent;color:#fff;border-color:#fff}.fz{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:8px}.fz-svg{width:100%;height:auto;display:block;touch-action:manipulation}.vorschau{width:100%;max-height:220px;object-fit:cover;border-radius:12px}.liste-klein{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.liste-klein button{width:100%;text-align:left;background:#fff;border:1px solid var(--linie);border-radius:12px;padding:12px}.liste-klein em{color:var(--fehler);font-style:normal}.optionen{display:flex;flex-direction:column;gap:10px}.option{display:flex;flex-direction:column;text-align:left;gap:2px;padding:14px;border:2px solid var(--linie);border-radius:var(--r);background:#fff;cursor:pointer}.option span{color:var(--leise);font-size:15px}.option.an{border-color:var(--akzent);background:#eef5ff}.signatur{position:relative}.signatur canvas{width:100%;height:220px;border:2px solid var(--linie);border-radius:12px;background:#fff;touch-action:none;display:block}.signatur-leer{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#a7b6c5;pointer-events:none}.signatur-weg{position:absolute;right:8px;bottom:8px}.pruef{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:14px;border-radius:var(--r);background:#fff;border:2px solid var(--linie);cursor:pointer}.pruef>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--warn);flex:none}.pruef.ok>span{background:var(--ok)}.pruef.ok{border-color:#bfe5cf}.pruef small{display:block;color:var(--leise)}.login{justify-content:center;padding:24px 16px}.login-karte{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px;align-items:stretch;max-width:420px;margin:0 auto;width:100%}.login-karte img{align-self:center;border-radius:16px}.login-karte h1{text-align:center}.login-karte p{text-align:center;color:var(--leise);margin-top:-8px}select{font:inherit;padding:14px;border:2px solid var(--linie);border-radius:12px;background:#fff;color:var(--text);width:100%}.anreise{display:flex;gap:10px;align-items:flex-start;background:#e8f0fb;color:#10325f;border-radius:var(--r);padding:12px 14px;margin:0 0 6px;font-size:15px;text-decoration:none}.anreise svg{flex:none;margin-top:2px}