/* HRS – Design-System (gleiche Handschrift wie das Finanzcockpit, damit die
   Werkzeuge zusammen aussehen). Farben, Abstaende und Bausteine stehen hier
   einmal zentral: Seitenmenue, Karten, Knoepfe, Tabellen, Dialoge, Toasts. */
:root{
  --bg:#f4f6fa; --card:#fff; --line:#e3e8f0; --text:#0f172a; --muted:#64748b;
  --blue:#2563eb; --blue-dark:#1d4ed8; --green:#059669; --red:#dc2626;
  --amber:#d97706; --shadow:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.05);
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:14px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0 0 .5rem;font-weight:650;letter-spacing:-.01em}
h1{font-size:1.35rem}h2{font-size:1.05rem}h3{font-size:.95rem}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- Layout ---------- */
#app{display:flex;min-height:100vh;
  background:linear-gradient(to right,#0f172a 0 216px,var(--bg) 216px)}
nav{width:216px;flex:0 0 216px;background:#0f172a;color:#cbd5e1;padding:14px 10px;
  position:sticky;top:0;height:100vh;overflow:auto}
nav .marke{background:#fff;border-radius:9px;padding:7px 11px;margin:0 10px 9px}
nav .marke img{display:block;width:100%;height:auto}
nav .logo{color:#fff;font-weight:700;font-size:1.05rem;padding:0 10px 12px;display:flex;
  align-items:center;gap:8px}
nav .logo small{display:block;font-weight:400;font-size:.7rem;color:#64748b}
nav a{display:flex;align-items:center;gap:9px;color:#cbd5e1;padding:9px 11px;border-radius:9px;
  margin-bottom:2px;font-size:.88rem}
nav a:hover{background:#1e293b;color:#fff}
nav a.sub{padding:5px 11px 5px 26px;font-size:.82rem;margin-top:-4px}
nav a.active{background:var(--blue);color:#fff;font-weight:600}
nav a .zahl{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;
  padding:0 7px;font-size:.72rem;font-weight:700;min-width:18px;text-align:center}
nav .sep{border-top:1px solid #1e293b;margin:12px 4px}
nav .fuss{font-size:.7rem;color:#475569;padding:10px}
nav .fuss .copy{margin-top:6px;border-top:1px solid #1e293b;padding-top:6px;line-height:1.35}
main{flex:1;min-width:0;padding:18px 22px 60px}
header.top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
header.top .spacer{flex:1}

/* ---------- Bausteine ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow);margin-bottom:16px}
.card.pad0{padding:0;overflow:hidden}
.card h2{display:flex;align-items:center;gap:8px}
.card .breitschalter{float:right;font-size:.8rem;padding:2px 7px;margin:-2px 0 0 8px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card.breit{grid-column:1 / -1}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  box-shadow:var(--shadow)}
.kpi .l{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font-size:1.5rem;font-weight:680;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:.76rem;color:var(--muted);margin-top:2px}
.pos{color:var(--green)}.neg{color:var(--red)}.neutral{color:var(--muted)}
.warnung{color:#b45309}

button,.btn{font:inherit;border:1px solid var(--line);background:#fff;color:var(--text);
  padding:7px 13px;border-radius:9px;cursor:pointer;font-weight:500;transition:.12s}
button:hover,.btn:hover{border-color:#c3cbdb;background:#f8fafc}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
button.primary:hover{background:var(--blue-dark)}
button.danger{color:var(--red);border-color:#fecaca}
button.danger:hover{background:#fef2f2}
button.small{padding:4px 9px;font-size:.8rem;border-radius:7px}
/* Der entscheidende Punkt: ein deaktivierter Knopf sieht auch deaktiviert aus. */
button:disabled,button:disabled:hover{opacity:.5;cursor:not-allowed;
  background:var(--blue);border-color:var(--blue)}
button:not(.primary):disabled,button:not(.primary):disabled:hover{background:#fff;border-color:var(--line)}
input,select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--text);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #bfdbfe;outline-offset:-1px;border-color:var(--blue)}
label{font-size:.8rem;color:var(--muted);display:block;margin-bottom:3px}
.feld{margin-bottom:10px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:.74rem;font-weight:600;background:#eef2ff;color:#3730a3;white-space:nowrap}
/* Aufgaben-Karten: die Farbe links sagt, wie dringend es ist */
.aufgabe{border-left:4px solid #94a3b8}
.aufgabe.p1{border-left-color:var(--red)}
.aufgabe.p2{border-left-color:var(--amber)}
.aufgabe.p3{border-left-color:var(--blue)}
.aufgabe.p9{border-left-color:#94a3b8;background:#fafbfd}
.aufgabe.erledigt{opacity:.45}
.aufgabe .kopfzeile{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.aufgabe .aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.aufgabe .st{font-size:.8rem;color:var(--muted)}

/* Ein-/Ausblend-Chips fuer Filterleisten (Objekte, Jahre …) */
.filterchip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:3px 11px;cursor:pointer;font-size:.82rem;background:#fff;
  user-select:none;color:var(--text)}
.filterchip:hover{border-color:#c3cbdb}
.filterchip input{width:auto;margin:0}
.filterchip.aus{opacity:.45}
.chip.gruen{background:#dcfce7;color:#166534}
.chip.rot{background:#fee2e2;color:#991b1b}
.chip.gelb{background:#fef3c7;color:#92400e}
.chip.grau{background:#f1f5f9;color:#475569}
.chip.blau{background:#dbeafe;color:#1e40af}

table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-weight:600;color:var(--muted);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.04em;padding:9px 10px;border-bottom:1px solid var(--line);background:#fafbfd}
td{padding:8px 10px;border-bottom:1px solid #f1f5f9;vertical-align:top}
tr:hover td{background:#f8fafc}
tr.summe td,tr.summe:hover td{background:#0f172a;color:#fff;font-weight:700;border-bottom-color:#0f172a}
tr.zwsumme td,tr.zwsumme:hover td{background:#e8edf5;font-weight:650}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabwrap{overflow:auto;max-height:70vh}
.leer{padding:30px;text-align:center;color:var(--muted)}
/* Beschriftung links, Wert rechts – fuer Status-Aufstellungen */
table.kv td{padding:6px 8px;vertical-align:top;border-bottom:1px solid #eef2f7}
table.kv td:first-child{color:var(--muted);white-space:nowrap;width:1%}
table.kv tr:hover td{background:transparent}

/* ---------- Diagramme ---------- */
.diagramm{overflow-x:auto}
.diagramm svg{width:100%;max-width:1100px;display:block}
.diagramm svg text{font-family:inherit}
.legende{font-size:.76rem;color:var(--muted);font-weight:400;margin-left:auto;
  display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.legende .punkt{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin:0 3px 0 10px;vertical-align:-1px}
.filterleiste{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filterleiste .titel{color:var(--muted);font-size:.8rem}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs button{border:none;background:none;border-bottom:2px solid transparent;border-radius:0;
  padding:8px 12px;color:var(--muted)}
.tabs button.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}

dialog{border:none;border-radius:14px;padding:0;box-shadow:0 20px 60px rgba(15,23,42,.28);
  max-width:min(760px,94vw);width:100%}
dialog::backdrop{background:rgba(15,23,42,.45)}
dialog .kopf{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between}
dialog .inhalt{padding:16px 18px;max-height:70vh;overflow:auto}
dialog .fuss{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;
  justify-content:flex-end;background:#fafbfd}

#toast{position:fixed;right:18px;bottom:18px;z-index:99}
#toast div{background:#0f172a;color:#fff;padding:10px 15px;border-radius:10px;margin-top:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:.86rem;max-width:420px;animation:ein .2s}
#toast div.err{background:#991b1b}
#toast div.ok{background:#166534}
@keyframes ein{from{opacity:0;transform:translateY(8px)}}
.lade{display:inline-block;width:14px;height:14px;border:2px solid #cbd5e1;border-top-color:var(--blue);
  border-radius:50%;animation:dreh .7s linear infinite;vertical-align:-2px}
@keyframes dreh{to{transform:rotate(360deg)}}

.hint{font-size:.8rem;color:var(--muted);background:#f8fafc;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px}
.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}

/* ---------- Bruecke fuer die uebernommenen Seiten ----------
   Rechnungen, Stammdaten, Kontakte, Bank und Belegung sind bewaehrt und wurden
   unveraendert uebernommen; diese Klassen uebersetzen ihre alte Gestaltung in
   die neue Handschrift, damit an der erprobten Logik nichts angefasst wurde. */
.leise{color:var(--muted);font-size:.78rem}
.muted{color:var(--muted);font-size:.78rem}
.stats{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;min-width:160px;box-shadow:var(--shadow)}
.tile .v{font-size:1.4rem;font-weight:680;font-variant-numeric:tabular-nums}
.tile .v small{font-size:.8rem;font-weight:500}
.tile .l{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.tile.offen .v{color:var(--red)}
.abtn{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--text);
  padding:3px 9px;font-size:.8rem;cursor:pointer;margin-right:4px;font:inherit;font-size:.8rem}
.abtn:hover{background:#f8fafc;border-color:#c3cbdb}
.abtn[disabled],.abtn:disabled{opacity:.5;cursor:not-allowed;background:#fff}
.st{display:inline-block;border-radius:999px;padding:2px 9px;font-size:.72rem;font-weight:600;white-space:nowrap}
.st.offen{background:#fef3c7;color:#92400e}
.st.teilweise{background:#ffedd5;color:#9a3412}
.st.bezahlt{background:#dcfce7;color:#166534}
.st.storniert,.st.angebot{background:#f1f5f9;color:#475569}
.st.gebucht{background:#dbeafe;color:#1e40af}
.stufe{display:inline-block;border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:600;
  margin-right:4px;border:1px solid var(--line);background:#f8fafc;color:var(--muted)}
.stufe.ok{background:#dcfce7;border-color:#bbf7d0;color:#166534}
.stufe.due{background:#fef3c7;border-color:#fde68a;color:#92400e}
.rowmsg{display:block;font-size:.76rem;margin-top:3px}
.rowmsg.err{color:#b42318;font-weight:600;background:none;border:none;padding:0}
.rowmsg.ok{color:#166534;background:none;border:none;padding:0}
tr.dim td{opacity:.55}
tr.nomail td{background:#fff6f6}
.hinweis{background:#eff6ff;border:1px solid #bfdbfe;border-radius:9px;padding:9px 12px;font-size:.82rem;color:#1e3a8a}
.msg{border-radius:9px;padding:8px 12px;font-size:.82rem;margin-top:10px;display:none}
.msg.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;display:block}
.msg.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;display:block}
.chk{display:inline-flex;align-items:center;gap:5px;margin:2px 10px 2px 0;font-size:.78rem;white-space:nowrap}
.chk input{width:auto;margin:0}
.tag{background:#eef2ff;border-radius:999px;padding:1px 9px;font-size:.7rem;color:#3730a3;margin-right:4px;
  display:inline-block;margin-bottom:2px}
select.mini{padding:2px 6px;font-size:.78rem;max-width:140px;border-radius:7px}
.spacer{flex:1}
.aktionen{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.komm{white-space:normal;min-width:160px}
.uebertabelle{overflow-x:auto}
.uebertabelle table{min-width:900px}
.ov{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:60;display:none;
  align-items:center;justify-content:center}
.ov.open{display:flex}
.ovbox{background:#fff;border-radius:14px;padding:18px;width:560px;max-width:94vw;max-height:85vh;
  display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(15,23,42,.28);overflow:auto}

/* ---------- Belegungskalender ---------- */
.monthnav{display:flex;align-items:center;gap:6px}
.monthnav b{min-width:150px;text-align:center}
.calwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow-x:auto;position:relative;box-shadow:var(--shadow);margin-bottom:14px}
.todaystripe{position:absolute;top:0;pointer-events:none;z-index:4;box-sizing:border-box;
  background:rgba(217,119,6,.14);border-left:2px solid #d97706;border-right:2px solid #d97706}
table.cal{border-collapse:collapse;width:100%;min-width:900px;font-size:.8rem}
.cal th,.cal td{border:1px solid var(--line);padding:0;height:38px;text-transform:none;letter-spacing:0}
.cal thead th{font-size:.68rem;font-weight:500;color:var(--muted);padding:3px 0;background:#fafbfd;
  position:sticky;top:0;text-align:center}
.cal thead th.wk{background:#eef2f7}
.cal thead th.today{background:#fff7e0;color:#8a6100;font-weight:700}
/* Zimmerspalte: so breit wie noetig, nie umbrechen, nie abschneiden –
   width:1% laesst die Spalte auf ihren Inhalt schrumpfen. */
.cal td.roomname,.cal th.roomname{min-width:150px;width:1%;padding:4px 14px 4px 10px;text-align:left;
  font-weight:500;background:#fafbfd;position:sticky;left:0;z-index:5;white-space:nowrap}
.cal td.roomname small{color:var(--muted);font-weight:400;margin-left:7px;font-size:.86em}
.cal td.day{position:relative;cursor:pointer;min-width:21px}
.cal td.day.wk{background:#f7f8fa}
.cal td.day.today{background:#fff7e0}
.cal tr:hover td{background:inherit}
.cal th.mstart,.cal td.day.mstart{border-left:2px solid #94a3b8}
.cal thead th.monthband{background:#e8edf5;color:var(--text);font-weight:700;font-size:.76rem;
  border-bottom:1px solid var(--line)}
.rowwrap{position:relative}
.bars{position:absolute;left:150px;right:0;top:0;height:38px;pointer-events:none}
.bar{position:absolute;top:6px;height:26px;border-radius:6px;color:#fff;font-size:.7rem;line-height:26px;
  padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:auto;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.25)}
.bar.angebot{background:var(--amber)}
.bar.gebucht{background:var(--blue)}
.bar.bezahlt{background:#15803d}
.bar.storniert{background:#94a3b8;text-decoration:line-through;opacity:.75}
@keyframes verlblink{0%,49%{background:#d97706}50%,100%{background:#2563eb}}
.bar.verl-due{animation:verlblink 1.1s step-end infinite;font-weight:700}
.bar.ghost{background:repeating-linear-gradient(45deg,#bfdbfe 0 8px,#e8f0fd 8px 16px);
  color:#1e3a8a;border:1px dashed var(--blue);line-height:24px}
.bar.released{background:repeating-linear-gradient(45deg,#bbf7d0 0 8px,#eafaf0 8px 16px);
  color:#166534;border:1px dashed #15803d;line-height:24px}
.bar.storniert.st-strittig{outline:2px solid #b91c1c;opacity:.95}
.bar.storniert.st-bezahlt,.bar.storniert.st-rechtsstreit{outline:2px solid #15803d;opacity:.95}
.legend{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:.76rem;flex-wrap:wrap;
  margin-bottom:14px}
.dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.row2{display:flex;gap:10px;flex-wrap:wrap}.row2>div{flex:1;min-width:150px}
.btnrow{display:flex;gap:8px;margin-top:18px;align-items:center;flex-wrap:wrap}
.bkwarn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:9px;padding:8px 11px;
  font-size:.78rem;margin-top:12px;display:none}
.aufgabenleiste{display:none;gap:10px;flex-wrap:wrap;align-items:center;padding:9px 13px;background:#fffbeb;
  border:1px solid #fde68a;border-radius:9px;font-size:.84rem;margin-bottom:14px}

/* ---------- Kontakte und Kundenakte ---------- */
tr.ohne td{background:#fff5f5}
.hinw{font-size:.78rem}
.hinw.err{color:#b91c1c;font-weight:600}
.hinw.ok{color:#166534}
.beleg{border-radius:999px;padding:1px 8px;font-size:.68rem;font-weight:600;white-space:nowrap;margin-left:4px}
.beleg.s3{background:#dcfce7;color:#166534}
.beleg.s2{background:#e0f2fe;color:#0369a1}
.beleg.s1{background:#fef3c7;color:#92400e}
.beleg.s0{display:none}
.waadr{display:inline-flex;gap:6px;align-items:center;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:8px;padding:2px 8px;font-size:.78rem}
.schritt{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:9px 12px;
  margin-bottom:10px;font-size:.84rem}
.impz{border-top:1px solid var(--line);padding:8px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.impz .n{font-weight:600}
.impz select{max-width:280px}
.ovbox.gross{width:860px;max-width:96vw;max-height:90vh;min-height:min(420px,90vh);padding:0;overflow:hidden}
.gross .kopf{padding:14px 18px 10px;border-bottom:1px solid var(--line);flex:none}
.gross .kopf h2{margin:0}
.gross .rumpf{flex:1;overflow:auto;padding:8px 18px 14px;min-height:0}
.gross .fuss{flex:none;border-top:1px solid var(--line);background:#fafbfd;padding:10px 18px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gross .fuss input{flex:1;min-width:180px}
.stammzeile{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px;font-size:.86rem}
.kpi2{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.kpi2 .tile{min-width:108px;padding:7px 11px;box-shadow:none}
.kpi2 .tile .v{font-size:1.05rem}
.aktechips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 18px 0}
.aktechip{border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px 12px;font-size:.78rem}
.aktechip.an{background:#0f172a;color:#fff;border-color:#0f172a}
.tagtrenner{position:sticky;top:0;z-index:2;background:var(--card);color:var(--muted);font-size:.78rem;
  font-weight:600;padding:8px 0 4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ev{padding:4px 0}
.ev .zeile{display:flex;gap:8px;align-items:flex-start}
.ev .sym{width:20px;flex:none;text-align:center}
.ev .zeit{color:var(--muted);font-size:.68rem;width:40px;flex:none;padding-top:1px}
.ev .inh{flex:1;min-width:0}
.ev .tit{font-size:.78rem;color:var(--muted)}
.ev .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.ev.wa{display:flex}
.ev.wa.ein{justify-content:flex-start}
.ev.wa.aus{justify-content:flex-end}
.blase{max-width:74%;border:1px solid var(--line);border-radius:10px;padding:5px 10px;background:#f1f5f9}
.ev.wa.aus .blase{background:#dcf5d2;border-color:#bfe3b0}
.blase .kopfz{display:flex;gap:8px;align-items:baseline;font-size:.68rem;color:var(--muted);margin-bottom:1px}
.del{border:0;background:none;cursor:pointer;color:var(--muted);font-size:.78rem;padding:0 2px;line-height:1}
.del:hover{color:var(--red);background:none;border:0}

/* ---------- Login ---------- */
.loginbox{max-width:400px;margin:9vh auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.loginbox img.marke{display:block;width:190px;max-width:70%;height:auto;margin:0 auto 16px}
.loginbox h1{text-align:center;margin-bottom:4px}
.loginbox p.sub{text-align:center;color:var(--muted);margin:0 0 20px;font-size:.85rem}
.loginbox input{width:100%}
.loginbox button{width:100%;margin-top:6px}
.loginbox .copy{text-align:center;color:var(--muted);font-size:.72rem;margin:22px 0 0;
  border-top:1px solid var(--line);padding-top:12px}

/* Nur-Lese-Zugang sieht keine Schalter, die ohnehin abgewiesen wuerden. */
body.nur-lesen .nur-inhaber{display:none}

@media(max-width:820px){
  #app{flex-direction:column;background:var(--bg)}
  nav{width:100%;flex:none;height:auto;position:static;display:flex;flex-wrap:wrap;gap:2px;padding:8px}
  nav .logo,nav .sep,nav .fuss{display:none}
  nav .marke{width:120px;margin:0 8px 0 0;padding:5px 8px}
  nav a{padding:7px 10px;font-size:.8rem}
  main{padding:12px}
}
@media print{
  nav,header.top button,.tabs{display:none}
  body{background:#fff}
  .card{box-shadow:none;break-inside:avoid}
}