/* LeZo Büro 1.1 – nur App-Spezifisches. Tokens, Grundlagen, Kopf, Fuss, Knöpfe, Felder, Karten, Tags, Meldungen,
   Tabellen, Dialog und Kennzahlen kommen aus lezo-ui.css 2.0.0 (unveränderte Kopie, wird vorher geladen).
   Dokumente (.doc), Kalenderfarben (.cal), QR-Zahlteil (qr.css) und Gutschein (gutschein.css) bleiben schwarz auf weiss. */

/* Gerüst */
main{max-width:var(--breite);margin:0 auto;padding:var(--a6) var(--a5) var(--a8)}
.view{display:none}
.view.aktiv{display:block}
h1:focus{outline:none}
main h2{font-size:var(--fs-xl);margin:var(--a8) 0 var(--a3)}
main h3{margin:var(--a5) 0 var(--a2)}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
main .card{margin:var(--a4) 0}
.grid .card,.cockpit .card{margin:0}
.right{text-align:right}
.demo-balken{background:var(--warn-weich);color:var(--warn);border-bottom:1px solid var(--warn-rand);text-align:center;padding:var(--a2) var(--a3);font-size:.95rem}
.demo-balken .btn{margin-left:var(--a2)}
.meldung.nostore{margin:0;border-radius:0;border-width:0 0 2px;background:var(--fehler);color:var(--flaeche);border-color:var(--fehler-hover);text-align:center;position:sticky;top:0;z-index:300}

/* Kopf: Symbolknöpfe der aktiven Ansicht, mobil nur Symbole */
.kopf .ikon-btn[aria-current="page"]{background:var(--akzent-weich);border-color:var(--akzent-rand);color:var(--akzent-text)}
@media (max-width:860px){
  .kopf nav.module{display:none}
  .kopf .ikon-btn .nur-breit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .kopf .ikon-btn{padding:0 10px}
}
@media (max-width:430px){.kopf .ikon-btn.haus{display:none}}

/* «Gespeichert»-Hinweis (.toast aus lezo-ui.css), nur sichtbar, solange .an gesetzt ist */
#gespeichert{opacity:0;pointer-events:none;transition:opacity .3s}
#gespeichert.an{opacity:1}

/* Knopfreihen */
.aktionen{display:flex;gap:var(--a2);flex-wrap:wrap;justify-content:flex-end}
.actions{display:flex;gap:var(--a2);flex-wrap:wrap;margin:var(--a4) 0;align-items:center}
.leer>.btn{margin:var(--a1)}
.tabs{margin:var(--a3) 0}

/* Formulare: Das Label umschliesst das Feld (Label steht immer sichtbar über dem Feld) und sieht aus wie .feld in lezo-ui.css */
main label{display:block;margin:var(--a2) 0;font-size:var(--fs-s);font-weight:600;color:var(--text)}
main label.check{font-size:var(--fs-m);font-weight:400}
main label.btn{display:inline-flex;margin:0;font-size:.95rem;font-weight:600;color:var(--ink)}
.view input:not([type=checkbox]):not([type=radio]):not([type=file]),.view select,.view textarea,.dialog-in{
  display:block;width:100%;min-height:var(--tipp);padding:10px 14px;font:inherit;font-weight:400;color:var(--text);
  background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:var(--r-m);
  transition:border-color var(--dauer),box-shadow var(--dauer)}
main label>input:not([type=checkbox]):not([type=radio]),main label>select,main label>textarea{margin-top:6px}
.view input[type=file]{display:block;width:100%;margin-top:6px;font:inherit;font-weight:400;color:var(--text-2)}
.view input[type=checkbox],.view input[type=radio]{width:20px;height:20px;margin:0 var(--a2) 0 0;vertical-align:-4px;accent-color:var(--akzent)}
.view textarea{min-height:100px;resize:vertical}
.view input:hover,.view select:hover,.view textarea:hover{border-color:var(--text-3)}
.view input:focus,.view select:focus,.view textarea:focus,.dialog-in:focus{outline:none;border-color:var(--akzent);box-shadow:var(--ring)}
.view input[aria-invalid=true]{border-color:var(--fehler)}
.row{display:flex;gap:var(--a3);flex-wrap:wrap;align-items:flex-end}
.row>label,.row>.feld{flex:1 1 180px}
.check{margin:var(--a1) 0}

/* Tabellen: Zeilen werden mobil zu Karten (.tabelle.karten aus lezo-ui.css); Eingabefelder in Zellen */
.tabelle td input,.tabelle td select{min-height:var(--tipp);padding:6px 10px}
@media (max-width:700px){.tabelle.karten td input,.tabelle.karten td select,.tabelle.karten td textarea{width:100%!important}.tabelle.karten td.num{white-space:normal}.tabelle.karten td>*{max-width:100%}}
.tabelle td .btn.gefahr.alt{white-space:nowrap}
.tabelle.cal-wrap{max-width:100%}

/* Kennzahlen und Cockpit */
a.kpi:hover{box-shadow:var(--sch-2)}
.kpi.warn b{color:var(--fehler)}
.cockpit{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--a4)}
.cockpit h2{margin:0 0 var(--a2);font-size:var(--fs-l)}
.liste-kurz{list-style:none;margin:0;padding:0}
.liste-kurz li{display:flex;justify-content:space-between;gap:var(--a3);padding:var(--a2) 0;border-bottom:1px solid var(--linie);font-size:.93rem}
.liste-kurz li:last-child{border-bottom:0}
.schnell{display:flex;gap:var(--a2);flex-wrap:wrap;margin:var(--a3) 0 var(--a1)}
.kpis{margin:var(--a3) 0}

/* Dialog (Rückfrage), Aufbau aus core.js */
.dialog-msg{margin:0 0 var(--a4);white-space:pre-line;line-height:1.5}
.dialog-in{margin:0 0 var(--a4)}

/* Geführter erster Start */
.tour{background:var(--flaeche);border:2px solid var(--akzent);border-radius:var(--r-l);padding:var(--a5);margin:var(--a4) 0}
.tour ol{list-style:none;margin:var(--a3) 0 0;padding:0;counter-reset:s}
.tour li{counter-increment:s;display:flex;align-items:center;gap:var(--a3);padding:var(--a3) 0;border-top:1px solid var(--linie)}
.tour li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;background:var(--akzent-weich);color:var(--akzent-text);font-weight:800;display:flex;align-items:center;justify-content:center}
.tour li.fertig::before{content:"";background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/18px no-repeat}
.tour li div{flex:1;min-width:0}
@media (max-width:600px){.tour li{flex-wrap:wrap}.tour li div{flex:1 1 calc(100% - 50px)}.tour li .btn{margin-left:44px}}

/* Untere Navigation (mobil): hell, mit Tokens */
.bottomnav{display:none}
@media (max-width:860px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:var(--a3)}
  .kpi b{font-size:1.15rem}
  #gespeichert{bottom:calc(72px + env(safe-area-inset-bottom))}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--flaeche);border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom)}
  .bottomnav a{flex:1;color:var(--text-2);text-decoration:none;text-align:center;font-size:.7rem;padding:6px 0 7px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .bottomnav a .ikon{width:22px;height:22px}
  .bottomnav a.on{color:var(--akzent-text);background:var(--akzent-weich);font-weight:700}
  .bottomnav ~ .fuss{margin-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* Ferienplaner-Kalender (Farben bleiben fest) */
.cal td,.cal th{padding:2px;text-align:center;font-size:.75rem;min-width:24px;border:1px solid #e6eaf0}
.cal th.name,.cal td.name{text-align:left;min-width:120px;white-space:nowrap;padding:2px 6px;font-size:.85rem;position:sticky;left:0;background:#fff}
.cal .we{background:#eef0f3}
.cal .ft{background:#e2d9f3}
.cal .a-Ferien{background:#7fc8a9}
.cal .a-Krank{background:#f2a7a0}
.cal .a-Unfall{background:#f08a7e}
.cal .a-Militaer{background:#a9b8d6}
.cal .a-Weiterbildung{background:#f6d38b}
.cal .a-Andere{background:#c9c9c9}
.legend span{display:inline-block;padding:2px 8px;margin:2px 6px 2px 0;border-radius:6px;font-size:.8rem}

/* Dokument (Offerte/Rechnung) – Bildschirm-Vorschau, schwarz auf weiss */
.doc{background:#fff;max-width:800px;margin:0 auto;padding:40px 48px;border:1px solid var(--linie);font-size:10.5pt;color:#000}
.doc-kopf{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.doc-logo{max-height:70px;max-width:220px;display:block;color:#000}
.doc .absender{font-size:9pt;color:#333;text-align:right}
.doc .empf{margin:36px 0 26px;min-height:80px}
.doc .absz{font-size:7.5pt;color:#555;border-bottom:1px solid #999;display:inline-block;margin-bottom:6px}
.doc h1{color:#000;font-size:15pt;margin:10px 0 4px}
.doc .meta{font-size:9.5pt;margin-bottom:16px;width:auto}
.doc .meta td{border:0;padding:1px 14px 1px 0}
.doc .entwurf{display:inline-block;border:2px solid #b3150e;color:#b3150e;padding:1px 10px;font-weight:700;letter-spacing:.1em;margin:0 0 8px}
.doc table{border-collapse:collapse;width:100%}
.doc th,.doc td{padding:5px 6px;text-align:left;vertical-align:top}
.doc table.pos th{background:#f0f0f0;color:#000;font-size:9pt}
.doc table.pos td,.doc table.pos th{border-bottom:1px solid #ccc;padding:5px 6px}
.doc table.pos td.num,.doc table.pos th.num,.doc table.tot td.num{text-align:right;white-space:nowrap}
.doc table.tot{width:auto;margin-left:auto;margin-top:8px}
.doc table.tot td{border:0;padding:2px 6px}
.doc table.tot tr.sum td{border-top:2px solid #000;font-weight:700}
.doc-fuss{margin-top:30px;font-size:8.5pt;color:#333;border-top:1px solid #ccc;padding-top:8px}
.doc p{margin:.5em 0}
.doc .tabelle{border:0;border-radius:0}
@media (max-width:600px){.doc{padding:20px 14px}.doc-kopf{flex-direction:column}}

/* Hilfe-Seiten */
.prose{max-width:760px}
.prose h2{margin-top:var(--a8)}
.prose li{margin:.3em 0}

/* Selbsttest */
#fragen fieldset.card{display:block;margin:var(--a3) 0;min-width:0}
#fragen legend{padding:0 6px;font-weight:600}
#fragen label{display:inline-block;margin:6px 1.2em 6px 0;font-size:.95rem;font-weight:400;color:inherit}
#fragen label input{display:inline-block;width:auto;min-height:0;margin:0 6px 0 0;vertical-align:middle}

/* Preis fehlt (Rapport-Import) */
.preisfehlt{border:2px solid var(--fehler)!important;background:var(--fehler-weich)!important}
.rot{color:var(--fehler);font-weight:600;display:block}

/* Hilfsklassen (ersetzen frühere Inline-Styles; die Server-CSP erlaubt keine style-Attribute) */
.mt0{margin-top:0!important}.mb0{margin-bottom:0!important}.m0{margin:0!important}.m0b4{margin:0 0 4px!important}.mt16{margin-top:16px!important}.mt20{margin-top:20px!important}
.m0-text{margin:0!important;color:var(--text)!important}.m2-text{margin:2px 0!important;color:var(--text)!important}
.gc-1{grid-template-columns:minmax(0,1fr)!important}.gc-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:2px!important}
.box150{align-self:center!important;min-width:150px!important;text-align:center!important}
.w70{width:70px!important}.w70r{width:70px!important;text-align:right!important}.w100{width:100px!important}.w40p{width:40%!important}.wfull-h42{width:100%!important;min-height:42px!important}
.mw110{max-width:110px!important}.mw130{max-width:130px!important}.mw160{max-width:160px!important}.mw200{max-width:200px!important}.flex-260{flex:2 1 260px!important}
.t-ok{color:var(--ok)!important}.t-bad{color:var(--fehler)!important}.t-bad-b{color:var(--fehler)!important;font-weight:700!important}
.fs14pt{font-size:14pt!important}.fs108{font-size:1.08rem!important}.mh60{max-height:60px!important}.ml52{margin-left:52%!important}

/* Druck: Dokumente schwarz auf weiss, App-Rahmen aus */
@media print{
  body{font-size:10.5pt}
  .noprint,.actions,.meldung,.bottomnav,.demo-balken,.tabs,.toast{display:none!important}
  main{max-width:none;padding:0}
  .doc{border:0;padding:0;max-width:none}
  main .card{border:0;padding:0;margin:0}
  .tabelle{border:0;overflow:visible}
  .cal td,.cal th{font-size:6.5pt;min-width:0}
  @page{size:A4;margin:16mm 16mm 16mm 20mm}
}
@media print and (orientation:landscape){@page{size:A4 landscape}}