/* NebenkostenHeld Web-App */
:root{--blue:#16425B;--blue-l:#3D6B8E;--green:#2E9E6B;--green-d:#237a52;--bg:#F4F7F9;--ink:#22303B;--gray:#5b6b77;--line:#E3E9EE;--warn:#C0392B;--amber:#9A6E00;--input:#FFFDF4}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;padding-bottom:76px}
header.app{position:sticky;top:0;z-index:40;background:var(--blue);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
header.app .logo{font-weight:800;font-size:1.05rem}
header.app .logo b{color:#4ECF96}
.pill{font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:20px;background:#ffffff22}
.pill.voll{background:var(--green)}
main{max-width:860px;margin:0 auto;padding:16px}
h2{color:var(--blue);font-size:1.15rem;margin:18px 0 10px}
h3{color:var(--blue);font-size:.95rem;margin:12px 0 6px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.hint{font-size:.8rem;color:var(--gray)}
label{display:block;font-size:.8rem;font-weight:600;color:var(--gray);margin:10px 0 4px}
input,select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:1rem;background:var(--input);color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--green);border-color:var(--green)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.btn{display:inline-block;background:var(--green);color:#fff;border:none;padding:12px 20px;border-radius:9px;font-weight:800;font-size:.95rem;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--green-d)}
.btn.sec{background:#fff;color:var(--blue);border:1.5px solid var(--line)}
.btn.mini{padding:7px 12px;font-size:.8rem;font-weight:700}
.btn.warn{background:#fff;color:var(--warn);border:1.5px solid #F2C4BE}
.btn.block{display:block;width:100%}
.kost-row{display:grid;grid-template-columns:1.6fr 1fr 1.1fr;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.kost-row:last-child{border:none}
.kost-row .name{font-size:.85rem}
.kost-row input,.kost-row select{padding:8px 10px;font-size:.9rem}
.entity{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:#fff}
.entity .kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.entity .kopf b{color:var(--blue)}
.del{background:none;border:none;color:var(--warn);font-size:.8rem;font-weight:700;cursor:pointer}
.ampel{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:9px;margin-bottom:8px;font-size:.88rem}
.ampel.OK{background:#D5F0E3;color:#1E7A4F}
.ampel.PRÜFEN{background:#FBE0DC;color:var(--warn)}
.ampel.Hinweis{background:#FDF3D8;color:var(--amber)}
.ampel b{min-width:130px}
table.erg{width:100%;border-collapse:collapse;font-size:.85rem;background:#fff}
table.erg th{background:var(--blue-l);color:#fff;padding:8px;text-align:left}
table.erg td{padding:8px;border-bottom:1px solid var(--line)}
table.erg td.r{text-align:right;white-space:nowrap}
.saldo-pos{color:var(--warn);font-weight:800}
.saldo-neg{color:var(--green);font-weight:800}
.mcard{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mcard .betrag{font-size:1.15rem;font-weight:800}
nav.tabs{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:50}
nav.tabs button{flex:1;background:none;border:none;padding:10px 4px 12px;font-size:.72rem;font-weight:700;color:var(--gray);cursor:pointer}
nav.tabs button .ico{display:block;font-size:1.25rem;margin-bottom:2px}
nav.tabs button.aktiv{color:var(--green)}
.banner{background:var(--blue);color:#fff;border-radius:12px;padding:14px 16px;margin-bottom:12px;font-size:.88rem}
.banner a{color:#4ECF96;font-weight:800}
.ok-text{color:var(--green);font-weight:700}
.err-text{color:var(--warn);font-weight:700}
#print-root{display:none}
@media(min-width:720px){
  nav.tabs{position:sticky;top:52px;bottom:auto;border-top:none;border-bottom:1px solid var(--line)}
  body{padding-bottom:20px}
}
@media print{
  body>*{display:none !important}
  body{padding:0;background:#fff}
  #print-root{display:block !important}
  .brief{page-break-after:always;font-size:11pt;color:#000;max-width:17cm;margin:0 auto;padding:1cm 0;position:relative}
  .brief .absender{font-size:8pt;text-decoration:underline;color:#333;margin-bottom:1.2cm}
  .brief .datum{text-align:right}
  .brief h1{font-size:14pt;color:#16425B;margin:.8cm 0 .2cm}
  .brief table{width:100%;border-collapse:collapse;font-size:9.5pt;margin:.3cm 0}
  .brief th{background:#EEF3F7;color:#16425B;text-align:left;padding:4pt 6pt;border:.5pt solid #B8C4CE}
  .brief td{padding:3.5pt 6pt;border:.5pt solid #B8C4CE}
  .brief td.r{text-align:right;white-space:nowrap}
  .brief tr.sum td{font-weight:bold;background:#F5F8FA}
  .brief .ergebnis{font-size:13pt;font-weight:bold;margin:.4cm 0}
  .brief .klein{font-size:8pt;color:#555}
  .wasserzeichen{position:absolute;top:40%;left:0;right:0;text-align:center;font-size:42pt;color:#C0392B;opacity:.18;transform:rotate(-24deg);font-weight:800}
}