/* MiVaTool – Mietvertrag-Generator (App und Webseite). Farben über die Tokens der jeweiligen Seite (hell/dunkel). */
:root{--blatt-buehne:#0f0f0f}   /* --kopf-h: Höhe der festen Kopfzeile (App: app.js misst, Webseite: fest) */
:root[data-thema="hell"]{--blatt-buehne:#d3d8cc}

/* ---------- Ergänzende Feldbausteine ---------- */
.in-chf{position:relative;display:block}
.in-chf .in{padding-left:50px;text-align:right;font-variant-numeric:tabular-nums}
.in-chf::before{content:"CHF";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:13px;font-weight:600;pointer-events:none}
.werk .f.ist-fehler .in,.werk .f.ist-fehler select{border-color:var(--crit)}
.werk .f-hinweis{margin:2px 0 0;font-size:13px;line-height:1.4}
.werk .f-hinweis.fehler{color:var(--crit-text,#ff9f95)}
.werk .f-hinweis.info{color:var(--muted)}
.werk .in[type="date"]{color-scheme:dark}
:root[data-thema="hell"] .werk .in[type="date"]{color-scheme:light}
.werk textarea{width:100%;min-height:120px;padding:11px 13px;border-radius:10px;border:1px solid var(--line2);background:var(--field);color:var(--text);font:inherit;font-size:15.5px;line-height:1.5;resize:vertical}

/* ---------- Aufbau: Eingaben links, A4-Vorschau rechts ---------- */
.werk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(18px,2.4vw,32px);align-items:start;padding-bottom:40px}
.werk .panel{background:var(--bg2);border:1px solid var(--line);border-radius:18px}
.eingabe{padding:clamp(18px,2.4vw,28px)}
.stepper{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 26px;padding:0;list-style:none}
.stepper::before{content:"";position:absolute;left:10%;right:10%;top:15px;height:2px;background:var(--line2)}
.stepper li{position:relative;display:flex;justify-content:center}
.stepper button{display:grid;justify-items:center;gap:7px;padding:0 2px;border:0;background:transparent;color:var(--faint);font:inherit;font-size:13px;font-weight:500;cursor:pointer;border-radius:10px;min-width:0}
.stepper button i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);background:var(--bg2);font-style:normal;font-size:13px;font-weight:700;color:var(--muted);transition:background .15s ease,border-color .15s ease,color .15s ease}
.stepper button:hover{color:var(--text)}
.stepper button:hover i{border-color:var(--rand-stark,rgba(255,255,255,.4))}
.stepper button[aria-current="step"]{color:var(--text)}
.stepper button[aria-current="step"] i{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 5px var(--lime-soft)}
.stepper button.fertig i{border-color:var(--lime-line);color:var(--akzent,var(--lime))}
.schritt{border:0;margin:0;padding:0;min-width:0}
.schritt > legend{padding:0;margin:0 0 4px;font:700 28px/1.1 var(--display)}
.schritt-lede{margin:0 0 20px;color:var(--muted);font-size:15px}
.gruppe{display:grid;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.gruppe:first-of-type{border-top:0;padding-top:4px}
.gruppe-titel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font:600 15px/1.3 var(--body);color:var(--text)}
.gruppe-titel small{font-weight:400;color:var(--faint)}
.nk-liste{display:grid;gap:10px}
.nk-zeile{display:grid;grid-template-columns:minmax(0,1fr) 170px 40px;gap:10px;align-items:center}
.nk-zeile.mit-kat{grid-template-columns:170px minmax(0,1fr) 150px 40px}
.nk-zeile:has(.in:disabled){grid-template-columns:minmax(0,1fr) 170px}
.blatt .kopf-logo{float:right;max-width:52mm;max-height:17mm;margin:0 0 3mm 6mm;object-fit:contain}
.blatt .tab .zwischen th,.blatt .tab .zwischen td{border-top:1px solid #9a9a9a}
.blatt p.klein{font-size:8pt;color:#444}
.ikon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--faint);cursor:pointer}
.ikon-btn:hover{color:var(--text);background:var(--hover2,rgba(255,255,255,.05));border-color:var(--line)}
.summe-zeile{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;border-radius:12px;background:var(--lime-soft);border:1px solid var(--lime-line)}
.summe-zeile span{color:var(--ok-text,#dcefb0);font-size:14px}
.summe-zeile b{font:700 24px/1 var(--display);font-variant-numeric:tabular-nums}
.schritt-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.fertig-box{display:grid;gap:14px;padding:20px;border-radius:14px;border:1px solid var(--lime-line);background:linear-gradient(135deg,rgba(146,192,32,.16),rgba(146,192,32,.04))}
.fertig-box h3{font-size:24px;margin:0}
.fertig-box p{margin:0;color:var(--muted)}
.fertig-aktionen{display:flex;flex-wrap:wrap;gap:10px}
.offen-liste{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px}

/* Vorschau */
.vorschau{position:sticky;top:calc(var(--kopf-h,64px) + 14px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);max-height:calc(100vh - var(--kopf-h,64px) - 28px);overflow:hidden}
.vorschau-leiste{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.vorschau-leiste .titel{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-right:auto;min-width:0}
.vorschau-leiste .titel::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.speicher-status{font-size:13px;color:var(--faint);white-space:nowrap}
.speicher-status.ok{color:var(--akzent,var(--lime))}
.speicher-status.fehler{color:var(--crit-text,#ff9f95)}
.titel-eingabe{height:34px;min-width:0;flex:1;max-width:280px;padding:0 10px;border-radius:8px;border:1px solid var(--line2);background:var(--field);color:var(--text);font:inherit;font-size:14px}
.titel-eingabe:focus{outline:none;border-color:var(--lime-line)}
.buehne{overflow:auto;padding:22px;background:var(--blatt-buehne);border-radius:0 0 18px 18px;scrollbar-color:var(--line2) transparent}
.blatt-huelle{margin:0 auto;position:relative}
.blatt{position:absolute;top:0;left:0;transform-origin:0 0}

/* ---------- Das Vertragsblatt (A4, immer hell) ---------- */
.blatt{width:210mm;min-height:297mm;padding:20mm 20mm 18mm;background:#fff;color:#1a1a1a;font:10pt/1.5 "Barlow",Arial,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.35);border-radius:2px}
.blatt .kopf{position:static;padding-bottom:6mm;margin-bottom:6mm;border-bottom:2px solid #92c020;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.blatt .kopf-marke{display:inline-block;padding:1mm 2.5mm;margin-bottom:3mm;border-radius:1mm;background:#92c020;color:#0b0b0b;font:700 7.5pt/1.3 "Barlow",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.blatt h1{font:700 21pt/1.1 "Barlow",Arial,sans-serif;letter-spacing:-.01em;color:#0b0b0b;margin:0 0 5mm}
.blatt .kurz{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:4mm;margin:0}
.blatt .kurz div{border-left:2px solid #e4e4e4;padding-left:3mm}
.blatt .kurz dt{font-size:7.5pt;text-transform:uppercase;letter-spacing:.08em;color:#6b6b6b}
.blatt .kurz dd{margin:.5mm 0 0;font-weight:600;font-size:10.5pt}
.blatt .kurz small{font-weight:400;color:#6b6b6b;font-size:8pt}
.blatt .ab{margin:0 0 5mm;break-inside:auto}
.blatt .ab h2{display:flex;align-items:baseline;gap:3mm;margin:0 0 2mm;font:700 11.5pt/1.3 "Barlow",Arial,sans-serif;color:#0b0b0b;letter-spacing:0;break-after:avoid}
.blatt .ab h2 span{display:inline-grid;place-items:center;min-width:6mm;height:6mm;border-radius:50%;background:#f0f6e0;color:#4d6a0c;font-size:9pt}
.blatt p{margin:0 0 2mm;text-align:left;hyphens:auto;-webkit-hyphens:auto;orphans:3;widows:3;color:#1a1a1a}
.blatt .parteien{display:grid;grid-template-columns:1fr 1fr;gap:4mm 8mm;margin:0 0 3mm}
.blatt .partei{break-inside:avoid}
.blatt .partei-rolle{font-size:7.5pt;text-transform:uppercase;letter-spacing:.08em;color:#6b6b6b;margin-bottom:.8mm}
.blatt .tab{width:100%;border-collapse:collapse;margin:0 0 3mm;break-inside:avoid}
.blatt .tab th,.blatt .tab td{padding:1.6mm 0;border-bottom:1px solid #e6e6e6;text-align:left;vertical-align:top;font-weight:400;color:#1a1a1a;background:none;font-size:inherit;letter-spacing:0;text-transform:none}
.blatt .tab th{width:42%;color:#4a4a4a;padding-right:4mm}
.blatt .tab th small{color:#7a7a7a}
.blatt .tab .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.blatt .tab-zins th{width:auto}
.blatt .tab .summe th,.blatt .tab .summe td{font-weight:700;color:#0b0b0b;border-bottom:2px solid #92c020}
.blatt .ln{display:inline-block;height:1em;vertical-align:-.25em;border-bottom:1px solid #9a9a9a}
.blatt .ln-s{width:22mm}.blatt .ln-m{width:45mm}.blatt .ln-l{width:70mm}
.blatt .ab-sig{margin-top:9mm;break-inside:avoid}
.blatt .ort{margin-bottom:12mm}
.blatt .sig{display:grid;grid-template-columns:repeat(auto-fit,minmax(48mm,1fr));gap:8mm}
.blatt .sig-feld{display:grid;gap:.8mm;font-size:9pt}
.blatt .sig-linie{display:block;height:14mm;border-bottom:1px solid #1a1a1a}
.blatt .sig-feld small{color:#6b6b6b;min-height:1.2em}
.blatt .quelle{margin-top:8mm;padding-top:2mm;border-top:1px solid #eee;font-size:7.5pt;color:#8a8a8a}

/* ---------- Dialog ---------- */
dialog.vg-dialog{width:min(480px,calc(100vw - 32px));padding:0;border:1px solid var(--line2);border-radius:20px;background:var(--bg2);color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.45)}
dialog.vg-dialog::backdrop{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg{display:grid;gap:14px;padding:26px}
.dlg h2{font-size:28px;margin:0}
.dlg p{margin:0;color:var(--muted)}
.dlg-aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* ---------- Handy: Umschalter Eingaben / Vorschau ---------- */
.umschalter{display:none}
@media (max-width:1100px){
	.werk{grid-template-columns:minmax(0,1fr)}
	.vorschau{position:fixed;inset:var(--kopf-h,64px) 0 0;z-index:60;max-height:none;border-radius:0;border:0;display:none}
	body.zeige-vorschau .vorschau{display:grid}
	body.zeige-vorschau{overflow:hidden}
	.buehne{border-radius:0;padding:14px}
	.umschalter{position:fixed;left:50%;bottom:18px;z-index:65;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:99px;background:var(--karte-bg,rgba(20,20,20,.94));border:1px solid var(--line2);box-shadow:0 12px 40px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
	.umschalter button{height:40px;padding:0 18px;border-radius:99px;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer}
	.umschalter button[aria-pressed="true"]{background:var(--lime);color:var(--lime-ink)}
	.werk{padding-bottom:90px}
}
@media (max-width:760px){
	.werk .raster{grid-template-columns:repeat(2,minmax(0,1fr))}
	.werk .s2,.werk .s3,.werk .s4{grid-column:1/-1}
	.werk .raster .halb{grid-column:span 1}
	.nk-zeile{grid-template-columns:minmax(0,1fr) 130px 40px}
	.nk-zeile.mit-kat{grid-template-columns:minmax(0,1fr) 130px 40px}
	.nk-zeile.mit-kat > :first-child{grid-column:1/-1}
	.vorschau-leiste .titel{display:none}
	.stepper button{font-size:11.5px}
}

/* ---------- Druck: nur das Vertragsblatt ---------- */
@page{size:A4;margin:16mm 18mm 16mm;
	@bottom-right{content:"Seite " counter(page) " von " counter(pages);font:8pt Arial,sans-serif;color:#888}}
@media print{
	:root{color-scheme:light}
	html,body{background:#fff !important;color:#000}
	body *{visibility:hidden}
	.vorschau,.vorschau *{visibility:visible}
	.seitenleiste,.haupt > .kopf,.sl-schleier,.msg,.eingabe,.umschalter,.vorschau-leiste,dialog,.vg-vor,.vg-nach,.top,.foot,.hero,.band{display:none !important}
	.shell,.haupt,.inhalt,.werk,.wrap{display:block !important;padding:0 !important;margin:0 !important;max-width:none !important;background:none !important}
	.vorschau,.werk .panel.vorschau{position:static !important;display:block !important;max-height:none;overflow:visible;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
	.buehne{padding:0;overflow:visible;background:none}
	.blatt-huelle{width:auto !important;height:auto !important}
	.blatt{position:static;transform:none !important;width:auto;min-height:0;padding:0;box-shadow:none;border-radius:0;font-size:10pt}
	.blatt .quelle{break-before:avoid}
}
.vorschau-leiste .speicher-status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}