:root{--blau:#1e5aa8;--rot:#d5281e;--gelb:#f5d312;--bg:#f2f4f8;--card:#ffffff;--text:#1a2333;--muted:#68738a;--gruen:#178a3d;--gruen-bg:#e2f5e8;--orange:#b85c00;--orange-bg:#fdeeda;--grau-bg:#e9ecf2;--border:#d8dde8;--danger:#c22222}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:16px;-webkit-text-size-adjust:100%}button{font-family:inherit}.app{max-width:840px;margin:0 auto;padding:0 12px 90px}.topbar{display:flex;align-items:center;gap:10px;padding:14px 2px 10px;flex-wrap:wrap}.topbar h1{font-size:1.25rem;margin:0;flex:1;min-width:180px}.topbar h1 small{display:block;font-size:.72rem;font-weight:500;color:var(--muted)}.jahr-select{font-size:1rem;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#fff}.iconbtn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 12px;font-size:.95rem;cursor:pointer;color:var(--text)}.iconbtn:active{background:var(--grau-bg)}.syncstatus{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px;width:100%;padding:0 2px 4px}.syncstatus .punkt{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0}.syncstatus .punkt.ok{background:var(--gruen)}.syncstatus .punkt.fehler{background:var(--danger)}.syncstatus .punkt.laeuft{background:var(--orange);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}.statsbar{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px}.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 14px;flex:1;min-width:140px}.stat b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums}.stat span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}.stat.gruen b{color:var(--gruen)}.suchzeile{display:flex;gap:8px;margin-bottom:10px}.suchzeile input{flex:1;padding:12px 14px;font-size:1.05rem;border:1px solid var(--border);border-radius:12px;background:#fff}.filterchips{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}.chip{border:1px solid var(--border);background:#fff;border-radius:20px;padding:6px 14px;font-size:.85rem;cursor:pointer;color:var(--muted)}.chip.aktiv{background:var(--blau);border-color:var(--blau);color:#fff}.kundenliste{display:flex;flex-direction:column;gap:8px}.kunde{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;width:100%}.kunde:active{background:#f6f8fc}.kunde.ausgeblendet{opacity:.55}.kunde .info{flex:1;min-width:0}.kunde .gname{font-weight:650;font-size:1.02rem}.kunde .details{font-size:.8rem;color:var(--muted);margin-top:2px}.kunde .rechts{text-align:right;flex-shrink:0}.kunde .betrag{font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}.badge{display:inline-block;font-size:.7rem;font-weight:650;border-radius:8px;padding:2px 8px;margin-top:3px;margin-left:4px}.badge.bezahlt{background:var(--gruen-bg);color:var(--gruen)}.badge.erfasst{background:#e3edfb;color:var(--blau)}.badge.offen{background:var(--orange-bg);color:var(--orange)}.badge.grau{background:var(--grau-bg);color:var(--muted)}.leer{color:var(--muted);text-align:center;padding:30px 0}.backrow{display:flex;align-items:center;gap:10px;padding:14px 0 6px}.backbtn{border:none;background:none;color:var(--blau);font-size:1.05rem;cursor:pointer;padding:6px 8px 6px 0;font-weight:600}.detail-titel{flex:1;min-width:0}.detail-titel h2{margin:0;font-size:1.2rem}.detail-titel .sub{font-size:.8rem;color:var(--muted)}.gesamtbar{position:sticky;top:8px;z-index:20;background:var(--blau);color:#fff;border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;margin:8px 0 14px;box-shadow:0 4px 14px #1e5aa840}.gesamtbar .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;opacity:.85}.gesamtbar .wert{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums}.gesamtbar .rest{flex:1}.gesamtbar.warnung{background:var(--danger)}.paybtn{border:none;border-radius:10px;padding:10px 14px;font-size:.95rem;font-weight:700;cursor:pointer;background:#ffffff2e;color:#fff}.paybtn.ist-bezahlt{background:#fff;color:var(--gruen)}.vorjahre{background:#fdf7e0;border:1px solid #ecd98a;border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:.9rem}.vorjahre .vj{display:inline-block;margin-right:14px;white-space:nowrap}.vorjahre .delta{font-weight:700}.delta.hoch{color:var(--danger)}.delta.runter{color:var(--gruen)}.karte{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px}.karte h3{margin:0 0 10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.feld{display:flex;align-items:center;gap:10px;margin-bottom:10px}.feld label{flex:1;font-size:.95rem}.feld input[type=text],.feld input[type=date],.feld input[type=password]{width:150px;padding:10px 12px;font-size:1.05rem;border:1px solid var(--border);border-radius:10px;text-align:right;background:#fff;font-variant-numeric:tabular-nums}.feld input.links{text-align:left}.feld .einheit{width:36px;color:var(--muted);font-size:.9rem}.feld.gross input{font-size:1.5rem;font-weight:700;padding:12px;border:2px solid var(--blau);width:190px}.feld.gross label{font-weight:700}.hinweis{font-size:.82rem;color:var(--muted);margin:2px 0 10px}.hinweis.warn{color:var(--danger);font-weight:600}.hinweis.ok{color:var(--gruen);font-weight:600}.zwei-spalten{display:flex;gap:10px}.zwei-spalten .feld{flex:1}.zwei-spalten .feld input{width:100%}.rechenblock{font-variant-numeric:tabular-nums}.rechenblock .zeile{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--border);font-size:.98rem}.rechenblock .zeile:last-child{border-bottom:none}.rechenblock .zeile.fett{font-weight:800;font-size:1.15rem}.rechenblock .zeile .m{color:var(--muted)}.schalter{display:flex;align-items:center;gap:10px;padding:8px 0}.schalter input{width:22px;height:22px;accent-color:var(--blau);flex-shrink:0}.schalter label{font-size:.95rem;flex:1}.aktionen{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}.btn{flex:1;border:none;border-radius:14px;padding:16px;font-size:1.05rem;font-weight:700;cursor:pointer;min-width:200px}.btn.primaer{background:var(--blau);color:#fff}.btn.sekundaer{background:#fff;color:var(--blau);border:2px solid var(--blau)}.btn:disabled{opacity:.5;cursor:default}.btn:active:not(:disabled){opacity:.85}.btn-klein{border:1px solid var(--border);background:#fff;border-radius:10px;padding:9px 14px;font-size:.9rem;cursor:pointer;margin-right:8px;margin-bottom:6px}.btn-klein.gefahr{color:var(--danger);border-color:#e5b5b5}.btn-klein.aktiv{background:var(--blau);color:#fff;border-color:var(--blau)}details.zuklappbar summary{cursor:pointer;font-weight:600;color:var(--blau);padding:4px 0}.stammdaten .feld input{width:100%;text-align:left}.stammdaten .feld label{flex:0 0 130px}.fotogrid{display:flex;gap:10px;flex-wrap:wrap}.fotokachel{position:relative;width:110px;height:110px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--grau-bg)}.fotokachel img{width:100%;height:100%;object-fit:cover;cursor:pointer}.fotokachel .loeschen{position:absolute;top:4px;right:4px;background:#0000008c;color:#fff;border:none;border-radius:8px;width:26px;height:26px;cursor:pointer;font-size:.8rem}.fotokachel .lade{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.75rem}.fotoadd{width:110px;height:110px;border-radius:12px;border:2px dashed var(--border);background:none;color:var(--muted);cursor:pointer;font-size:.8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.fotoadd span{font-size:1.6rem}.historie{display:flex;flex-direction:column;gap:6px}.historie-eintrag{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fafbfd}.historie-eintrag .hinfo{flex:1;min-width:0}.historie-eintrag .htitel{font-weight:650;font-size:.92rem}.historie-eintrag .hsub{font-size:.78rem;color:var(--muted)}.historie-eintrag .hbetrag{font-weight:700;font-variant-numeric:tabular-nums}.tabellenwrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:14px}table.vgl{border-collapse:collapse;width:100%;font-size:.88rem;min-width:520px}table.vgl th,table.vgl td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;font-variant-numeric:tabular-nums}table.vgl th:first-child,table.vgl td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}table.vgl thead th{background:var(--grau-bg);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}table.vgl tr:last-child td{border-top:2px solid var(--text);font-weight:800}table.vgl td.hoch{color:var(--danger);font-weight:600}table.vgl td.runter{color:var(--gruen);font-weight:600}.einstellungen .feld label{flex:0 0 190px}.einstellungen .feld input{width:100%;text-align:left}input[type=file].versteckt{display:none}.pdf-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#2b3242;z-index:90;display:flex;flex-direction:column}.pdf-kopf{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#1a2333;flex-wrap:wrap}.pdf-kopf .pdf-titel{color:#fff;font-size:.85rem;flex:1;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pdf-kopf .btn-klein{margin:0}.pdf-rahmen{flex:1;border:none;background:#fff}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0f19e0;z-index:100;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.lightbox img{max-width:96vw;max-height:92vh;border-radius:8px}@media(max-width:600px){.zwei-spalten{flex-direction:column;gap:0}}