/* Mietvertrag-App: Stil wie die Protokoll-App (ruhig, sachlich), ohne Inline-Stile (CSP style-src 'self').
   --auf-blau/--auf-rot: Schrift auf blauen/roten Flächen; im Dunkelmodus dunkel, sonst nur 2,75:1 (Befund P3-P3-10). */
:root { --blau:#1f5f8b; --blau-hell:#e8f0f6; --text:#1b1f24; --grau:#5b6470; --linie:#d5dae0; --gruen:#1e7b3a; --gruen-hell:#e7f4ea; --gelb:#8a6100; --gelb-hell:#fbf3df; --rot:#a8261b; --rot-hell:#fbe9e7; --bg:#f5f7f9; --karte:#fff; --auf-blau:#fff; --auf-rot:#fff; }
@media (prefers-color-scheme: dark) { :root { --text:#e8ecf0; --grau:#a3adb8; --linie:#3a424c; --bg:#14181d; --karte:#1e242b; --blau:#5aa3d6; --blau-hell:#1c2a36; --gruen:#5cc77d; --gruen-hell:#16261b; --gelb:#e2b44a; --gelb-hell:#2b2414; --rot:#f08a7e; --rot-hell:#2e1a18; --auf-blau:#0b1a24; --auf-rot:#0b1a24; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; overflow-wrap:break-word; font:17px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--text); background:var(--bg); }
main { max-width:720px; margin:0 auto; padding:16px 16px 120px; }
h1 { font-size:1.5rem; margin:.4em 0 .6em; line-height:1.25; } h2 { font-size:1.1rem; margin:1.5em 0 .5em; } h3 { font-size:1rem; margin:1.2em 0 .4em; }
a { color:var(--blau); }
button, .knopf { font:inherit; border-radius:10px; padding:12px 16px; border:1px solid var(--linie); background:var(--karte); color:var(--text); cursor:pointer; display:inline-block; text-align:center; text-decoration:none; }
button:focus-visible, .knopf:focus-within, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid var(--blau); outline-offset:2px; }
.haupt { background:var(--blau); color:var(--auf-blau); border-color:var(--blau); font-weight:600; }
.gross { width:100%; padding:16px; font-size:1.1rem; margin:8px 0; }
.zweit { width:100%; margin:8px 0; } .klein { padding:8px 12px; font-size:.95rem; }
.link { border:none; background:none; color:var(--blau); padding:2px 0; text-decoration:underline; font-size:.95rem; }
button:disabled { opacity:.45; cursor:default; }
.feld { display:block; margin:10px 0; } .feld > span:first-child { display:block; font-size:.9rem; color:var(--grau); margin-bottom:4px; }
.feld small { display:block; color:var(--grau); font-size:.85rem; margin-top:3px; }
.pflicht::after { content:" *"; color:var(--rot); }
input, textarea, select { font:inherit; width:100%; padding:11px 12px; border:1px solid var(--linie); border-radius:8px; background:var(--karte); color:var(--text); }
textarea { resize:vertical; }
input[type=checkbox], input[type=radio] { width:auto; transform:scale(1.35); margin:0 10px 0 4px; flex:none; }
input:disabled, select:disabled, textarea:disabled { opacity:.75; }
.zwei { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; } .drei { display:grid; grid-template-columns:repeat(2,1fr); gap:0 10px; }
@media (min-width:700px) { .drei { grid-template-columns:repeat(4,1fr); } }
@media (max-width:420px) { .zwei.eng { grid-template-columns:1fr; } }
.zwei .zweit, .zwei .haupt { width:100%; }
.wahl { position:relative; display:block; border:2px solid var(--linie); border-radius:12px; padding:12px; margin:8px 0; background:var(--karte); cursor:pointer; }
.wahl.an { border-color:var(--blau); background:var(--blau-hell); } .wahl input { position:absolute; opacity:0; pointer-events:none; } .wahl small { display:block; color:var(--grau); }
.wahl:focus-within { outline:3px solid var(--blau); outline-offset:2px; }
.janein { display:flex; gap:8px; margin:6px 0 4px; } .janein .wahl { flex:1; text-align:center; margin:0; padding:10px; }
.frage { margin:14px 0 6px; } .frage > b { display:block; }
fieldset { border:1px solid var(--linie); border-radius:10px; margin:12px 0; padding:4px 12px 10px; background:var(--karte); }
fieldset.nackt { border:none; padding:0; margin:0; background:none; min-width:0; }
legend { font-weight:600; padding:0 6px; }
.kopfzeile-person { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.haken-liste { display:grid; gap:8px; margin:6px 0 10px; }
.haken { display:flex; align-items:flex-start; gap:2px; background:var(--karte); padding:12px; border-radius:10px; border:1px solid var(--linie); }
.haken input { margin-top:4px; } .haken small { display:block; color:var(--grau); font-size:.85rem; }
.hinweis { color:var(--grau); font-size:.95rem; } .gruen { color:var(--gruen); font-weight:600; } .gelb { color:var(--gelb); font-weight:600; } .rot { color:var(--rot); font-weight:600; }
.box { border-radius:10px; padding:12px 14px; margin:12px 0; border:1px solid var(--linie); background:var(--karte); }
.box.info { background:var(--blau-hell); border-color:transparent; } .box.ok { background:var(--gruen-hell); border-color:transparent; }
.box.warn { background:var(--gelb-hell); border-color:transparent; } .box.fehler { background:var(--rot-hell); border-color:transparent; }
.box > :first-child { margin-top:0; } .box > :last-child { margin-bottom:0; }
.marke { display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:20px; background:var(--linie); color:var(--text); vertical-align:middle; }
.marke.entwurf { background:var(--gelb-hell); color:var(--gelb); } .marke.fertig { background:var(--gruen-hell); color:var(--gruen); }
.marke.vorlaeufig { background:var(--rot); color:var(--auf-rot); } .marke.papier { background:var(--blau-hell); color:var(--blau); }
.hilfe { margin:4px 0 8px; font-size:.92rem; } .hilfe summary { color:var(--blau); cursor:pointer; width:max-content; }
.hilfe p { margin:6px 0 0; color:var(--grau); white-space:pre-line; }
.pad { width:100%; height:220px; background:#fff; border:2px dashed var(--linie); border-radius:10px; touch-action:none; display:block; margin:8px 0; }
#meldung { position:sticky; top:0; margin:0; padding:10px 16px; background:var(--karte); border-bottom:1px solid var(--linie); z-index:5; white-space:pre-line; }
.leiste { display:flex; justify-content:space-between; align-items:center; color:var(--grau); font-size:.9rem; gap:8px; }
.zurueck-start { border:none; background:none; padding:6px 0; color:var(--blau); }
.fortschritt { width:100%; height:6px; display:block; margin:6px 0 4px; border:none; border-radius:3px; background:var(--linie); appearance:none; -webkit-appearance:none; overflow:hidden; }
.fortschritt::-webkit-progress-bar { background:var(--linie); border-radius:3px; } .fortschritt::-webkit-progress-value { background:var(--blau); border-radius:3px; } .fortschritt::-moz-progress-bar { background:var(--blau); border-radius:3px; }
.schritte select { width:auto; max-width:100%; padding:5px 8px; font-size:16px; } /* unter 16 px zoomt iOS beim Antippen */
.fuss { position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--karte); border-top:1px solid var(--linie); max-width:720px; margin:0 auto; z-index:4; }
.fuss button { flex:1; }
.kopf { display:flex; align-items:center; gap:14px; } .kopf h1 { margin:.2em 0; } .kopf p { margin:0; color:var(--grau); font-size:.95rem; }
.logo { max-height:56px; max-width:160px; display:block; }
.vorschau { max-height:90px; max-width:100%; display:block; margin:8px 0; background:#fff; border:1px solid var(--linie); border-radius:8px; padding:6px; }
.liste { list-style:none; padding:0; margin:8px 0; } .liste li { display:flex; gap:6px; margin:6px 0; align-items:stretch; }
.eintrag { flex:1; text-align:left; min-width:0; } .eintrag b { display:block; overflow-wrap:anywhere; } .eintrag small { display:block; color:var(--grau); }
.ordner { text-align:left; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; } .ordner small { width:100%; color:var(--grau); }
.reiterzeile { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; } .reiter { padding:8px 12px; font-size:.9rem; } .reiter.an { background:var(--blau); color:var(--auf-blau); border-color:var(--blau); }
.pruefliste { list-style:none; padding:0; margin:6px 0 12px; } .pruefliste li { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding:9px 12px; border-radius:8px; margin:5px 0; }
.pruefliste li.f { background:var(--rot-hell); } .pruefliste li.w { background:var(--gelb-hell); } .pruefliste li span { overflow-wrap:anywhere; }
.pruefliste .link { flex:none; white-space:nowrap; }
.dokumente { list-style:none; padding:0; margin:6px 0; counter-reset:dok; } .dokumente li { padding:10px 12px; border:1px solid var(--linie); border-radius:10px; margin:6px 0; background:var(--karte); }
.dokumente li.weg { opacity:.7; border-style:dashed; } .dokumente li small { display:block; color:var(--grau); overflow-wrap:anywhere; } .dokumente li b { overflow-wrap:anywhere; }
.dokumente .knoepfe { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .dokumente .knoepfe .knopf, .dokumente .knoepfe button { padding:8px 12px; font-size:.92rem; }
.signaturen li { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.punkte { list-style:none; padding:0; } .punkte li { padding:10px 12px; border:1px solid var(--linie); border-radius:10px; margin:6px 0; background:var(--karte); }
.punkte li.erledigt { opacity:.6; } .punkte li.erledigt b { text-decoration:line-through; }
.punkte label { display:flex; gap:4px; align-items:flex-start; } .punkte input { margin-top:5px; } .punkte p { margin:4px 0 0; } .punkte small { display:block; color:var(--grau); font-size:.82rem; margin-top:4px; }
.lesetext { background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:10px 14px; font-size:.93rem; max-height:320px; overflow:auto; }
.lesetext p { margin:.5em 0; }
.summe { font-variant-numeric:tabular-nums; }
.unten { text-align:center; font-size:.85rem; color:var(--grau); padding:0 16px 100px; } .unten a { color:var(--grau); }
.recht { max-width:720px; } .recht h2 { font-size:1.05rem; margin-top:1.4em; } .recht p, .recht li { margin:.5em 0; }
.nur-bildschirmleser { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }