/* ============================================================
   revota OS: Design-System, destilliert aus dem Claude-Design.
   Helles Grundthema, dunkle Seitenleiste, Smaragd-Akzente.
   ============================================================ */

:root {
  --grund: #FCFCFA;
  --karte: #ffffff;
  --linie: #E7E9E5;
  --linie-zart: #F1F3EF;
  --text: #1A211D;
  --text-mittel: #3D4741;
  --gedimmt: #6B7570;
  --gedimmt-dunkel: #5A635D;
  --akzent: #0B6E4F;
  --akzent-hell: #1FAE7F;
  --akzent-wanne: #EAF6F0;
  --akzent-zart: #F4FBF7;
  --warn-wanne: #FDF6E7;
  --warn: #8A5A08;
  --rot-wanne: #FDECEA;
  --rot: #B3261E;
  --blau-wanne: #EDF4FB;
  --blau: #25588F;
  --lila-wanne: #F2F0FA;
  --lila: #4C40A0;
  --dunkel: #101513;
  --dunkel-karte: #171E1B;
  --dunkel-linie: #232C27;
  --dunkel-text: #F4F6F4;
  --dunkel-gedimmt: #9AA59E;
  --schatten: 0 1px 2px rgba(16,21,19,.04), 0 10px 24px rgba(16,21,19,.035);
  --schrift-display: 'Fraunces', Georgia, serif;
  --schrift-text: 'Hanken Grotesk', system-ui, sans-serif;
}

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin-full-normal.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  height: 100%; background: var(--grund); color: var(--text);
  font-family: var(--schrift-text); font-size: 13.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; color: inherit; font-size: inherit; }
button { cursor: pointer; }
a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-hell); }
*:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 8px; }
::selection { background: #CDEBDD; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #DFE3DE; border: 3px solid var(--grund); border-radius: 99px; }

@keyframes puls { 0% { opacity: .5; } 50% { opacity: 1; } 100% { opacity: .5; } }
@keyframes panelRein { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sanftRein { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes hakenZeichnen { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Grundgerüst ---------- */
.os { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.hauptbereich { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inhalt { flex: 1; overflow-y: auto; padding: 24px 26px 72px; }
.inhalt > .ansicht { max-width: 1340px; animation: sanftRein .25s ease-out; }

/* ---------- Seitenleiste ---------- */
.seitenleiste {
  width: 250px; flex: none; background: var(--dunkel); color: var(--dunkel-text);
  display: flex; flex-direction: column; padding: 20px 14px 14px;
}
.marke { display: flex; align-items: center; gap: 10px; padding: 2px 8px 20px; }
.marke b { font: 500 21px/1 var(--schrift-display); letter-spacing: -.015em; }
.marke .os-chip {
  margin-left: auto; font: 600 9.5px/1 var(--schrift-text); letter-spacing: .18em;
  color: #8B968F; border: 1px solid #29322D; padding: 5px 7px 4px; border-radius: 999px;
}
.navigation { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-punkt {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border: 0; border-radius: 11px; text-align: left; font-size: 13.5px;
  transition: background .16s ease; background: transparent; color: #AFB8B2;
}
.nav-punkt:hover { background: #1C2521; }
.nav-punkt.dran { background: #1B2521; color: var(--dunkel-text); font-weight: 600; }
.nav-punkt svg { flex: none; stroke: #7D877F; }
.nav-punkt.dran svg { stroke: var(--akzent-hell); }
.nav-zahl {
  margin-left: auto; min-width: 19px; text-align: center;
  font: 600 10.5px/17px var(--schrift-text); background: var(--akzent-hell);
  color: #06231A; border-radius: 999px; padding: 0 5px;
}
.profil-kachel { margin-top: 12px; padding: 11px 11px 12px; border-radius: 14px; background: var(--dunkel-karte); border: 1px solid var(--dunkel-linie); }
.profil-zeile { display: flex; align-items: center; gap: 10px; }
.profil-avatar { width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--akzent); color: #EAF6F0; display: grid; place-items: center; font: 600 12px/1 var(--schrift-text); }
.profil-name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profil-mail { display: block; font-size: 11px; color: #8B968F; }
.rollen-zeile { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.rollen-badge { font: 600 9.5px/1 var(--schrift-text); letter-spacing: .14em; padding: 6px 9px 5px; border-radius: 999px; }
.rollen-badge.gruender { background: #0E2C22; color: #7FE0BB; }
.rollen-badge.vertrieb { background: #2A2118; color: #E8C88A; }
.rollen-wechsel { margin-left: auto; border: 1px solid #2A332E; background: none; color: #9AA59E; font-size: 11px; padding: 5px 9px; border-radius: 999px; }
.rollen-wechsel:hover { color: var(--dunkel-text); border-color: #3B4640; }

/* ---------- Kopfleiste ---------- */
.kopfleiste {
  flex: none; display: flex; align-items: center; gap: 14px; padding: 13px 26px;
  background: rgba(252,252,250,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie);
}
.suche-knopf {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  border: 1px solid #E2E5E0; background: #fff; border-radius: 999px; cursor: text;
  color: #7C857F; font-size: 13px; text-align: left;
}
.suche-knopf:hover { border-color: #CBD2CB; }
.taste { font: 600 10px/1 var(--schrift-text); letter-spacing: .08em; color: var(--gedimmt); border: 1px solid #E2E5E0; border-radius: 6px; padding: 4px 6px 3px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--akzent);
  color: #F4FBF7; font-size: 13px; font-weight: 600; padding: 10px 15px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(11,110,79,.22); transition: transform .15s ease, box-shadow .15s ease;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,110,79,.3); }
.knopf-geist { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #E2E5E0; background: #fff; color: var(--text-mittel); font-size: 13px; padding: 9px 14px; border-radius: 999px; transition: border-color .15s ease, color .15s ease; }
.knopf-geist:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf-still { border: 0; background: none; color: var(--gedimmt); font-size: 13px; padding: 9px 8px; }
.knopf-still:hover { color: var(--text); }
.knopf-rund { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #E2E5E0; background: #fff; border-radius: 999px; }
.knopf-rund:hover { border-color: #CBD2CB; }
.knopf-mini { border: 1px solid var(--linie); background: #fff; font-size: 11.5px; color: var(--text-mittel); padding: 6px 11px; border-radius: 999px; }
.knopf-mini:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf-rot { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #E8B4AE; background: #fff; color: var(--rot); font-size: 13px; padding: 9px 14px; border-radius: 999px; }
.knopf-rot:hover { background: var(--rot-wanne); }

/* Tab-Pillen (Woche/Monat/..., Filter) */
.tab-reihe { display: flex; gap: 7px; flex-wrap: wrap; }
.tab-pille { border: 1px solid #E2E5E0; background: #fff; color: var(--text-mittel); font-size: 12.5px; padding: 8px 13px; border-radius: 999px; transition: all .15s ease; }
.tab-pille:hover { border-color: #CBD2CB; }
.tab-pille.dran { background: var(--dunkel); border-color: var(--dunkel); color: var(--dunkel-text); }
.tab-pille.dran-gruen { background: var(--akzent); border-color: var(--akzent); color: #F4FBF7; }

/* ---------- Karten & Bausteine ---------- */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; box-shadow: var(--schatten); }
.karte-eng { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten); }
.karte-dunkel { background: var(--dunkel); color: var(--dunkel-text); border-radius: 18px; }
.karte-klick { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; text-align: left; }
.karte-klick:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11,110,79,.11); }
.kicker { font: 600 10.5px/1 var(--schrift-text); letter-spacing: .2em; color: var(--akzent); text-transform: uppercase; }
.kicker-grau { font: 600 10px/1 var(--schrift-text); letter-spacing: .16em; color: var(--gedimmt); text-transform: uppercase; }
.titel-gross { font: 500 34px/1.15 var(--schrift-display); letter-spacing: -.01em; }
.titel-mittel { font: 500 21px/1.3 var(--schrift-display); }
.titel-klein { font: 500 16px/1.35 var(--schrift-display); }
.zahl-gross { font: 500 30px/1 var(--schrift-display); }
.zahl-mittel { font: 500 26px/1 var(--schrift-display); }
.hinweis { font-size: 12.5px; color: var(--gedimmt); line-height: 1.5; }
.klein { font-size: 11.5px; color: var(--gedimmt); }

.badge { display: inline-flex; align-items: center; font: 600 10.5px/1 var(--schrift-text); padding: 6px 9px 5px; border-radius: 999px; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; font-size: 10.5px; padding: 4px 8px 3px; border-radius: 999px; background: var(--linie-zart); color: var(--gedimmt-dunkel); white-space: nowrap; }

/* ---------- Tabellen ---------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th { text-align: left; font: 600 10px/1 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gedimmt); padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--linie-zart); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr { transition: background .12s ease; }
.tabelle tbody tr:hover { background: #FAFCF9; }

/* ---------- Formulare ---------- */
.feld { display: grid; gap: 5px; }
.feld label { font-size: 12px; font-weight: 600; color: var(--text-mittel); }
.feld input, .feld textarea, .feld select {
  background: #fff; border: 1px solid #E2E5E0; border-radius: 11px; padding: 9px 12px;
  font-size: 13px; transition: border-color .15s ease; width: 100%;
}
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--akzent); outline: none; }
.feld textarea { resize: vertical; min-height: 70px; }

/* Schalter (an/aus) */
.schalter { width: 36px; height: 21px; flex: none; border: 0; border-radius: 999px; background: #DDE2DC; display: flex; align-items: center; padding: 3px; transition: background .18s ease; }
.schalter.an { background: var(--akzent); justify-content: flex-end; }
.schalter span { width: 15px; height: 15px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(16,21,19,.25); }

/* Häkchen-Kästchen */
.hakenbox { width: 19px; height: 19px; flex: none; border-radius: 6px; border: 1.5px solid #D8DDD7; background: #fff; display: grid; place-items: center; font: 700 11px/1 var(--schrift-text); color: #F4FBF7; transition: all .15s ease; }
.hakenbox.an { background: var(--akzent); border-color: var(--akzent); }

/* ---------- Panel (rechte Seite) ---------- */
.panel-schleier { position: fixed; inset: 0; background: rgba(16,21,19,.28); z-index: 60; animation: sanftRein .2s ease-out; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); z-index: 61;
  background: #fff; border-left: 1px solid var(--linie); box-shadow: -18px 0 50px rgba(16,21,19,.14);
  display: flex; flex-direction: column; animation: panelRein .22s ease-out;
}
.panel-kopf { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--linie-zart); }
.panel-koerper { flex: 1; overflow-y: auto; padding: 18px 22px 28px; }
.panel-fuss { flex: none; display: flex; gap: 9px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--linie-zart); background: #FAFBF8; }
.panel-zu { margin-left: auto; width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--linie); background: #fff; border-radius: 999px; font-size: 15px; color: var(--gedimmt); }
.panel-zu:hover { color: var(--text); border-color: #CBD2CB; }

/* ---------- Modal (Mitte) ---------- */
/* minmax(0,1fr) statt der impliziten auto-Spalte: sonst wächst die Spalte
   auf die max-content-Breite des Modals und das breite Angebots-Modal
   läuft auf dem Handy über den Bildschirmrand hinaus. */
.modal-schleier { position: fixed; inset: 0; background: rgba(16,21,19,.32); z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; overflow-y: auto; padding: 7vh 16px 40px; animation: sanftRein .18s ease-out; }
.modal { width: min(620px, 100%); background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(16,21,19,.25); animation: sanftRein .22s ease-out; }
.modal-kopf { display: flex; align-items: center; gap: 12px; padding: 20px 24px 0; }
.modal-koerper { padding: 16px 24px 22px; }
.modal-fuss { display: flex; gap: 9px; justify-content: flex-end; padding: 0 24px 22px; flex-wrap: wrap; }

/* ---------- Toast ---------- */
.toast-wurzel { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; justify-items: center; }
.toast { background: var(--dunkel); color: var(--dunkel-text); font-size: 13px; padding: 11px 18px; border-radius: 999px; box-shadow: 0 14px 34px rgba(16,21,19,.3); animation: sanftRein .25s ease-out; display: flex; gap: 9px; align-items: center; }
.toast svg { flex: none; }

/* ---------- Zustände ---------- */
.leerzustand { max-width: 520px; margin: 70px auto; text-align: center; animation: sanftRein .3s ease-out; }
.leerzustand .kreis { width: 96px; height: 96px; margin: 0 auto; border-radius: 999px; background: var(--akzent-wanne); display: grid; place-items: center; }
.leerzustand h2 { font: 500 25px/1.25 var(--schrift-display); margin: 20px 0 8px; }
.leerzustand p { margin: 0 auto 20px; max-width: 400px; font-size: 13.5px; line-height: 1.65; color: var(--gedimmt-dunkel); }
.skeleton { animation: puls 1.5s ease-in-out infinite; }
.skeleton .balken { border-radius: 10px; background: #E9ECE8; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.kanban-spalte { background: #F6F8F5; border: 1px solid #ECEFEA; border-radius: 15px; padding: 11px; min-height: 120px; }
.kanban-spalte.ziel { outline: 2px dashed var(--akzent-hell); outline-offset: -2px; background: var(--akzent-zart); }
.kanban-karte { background: #fff; border: 1px solid var(--linie); border-radius: 13px; padding: 12px 13px; margin-top: 9px; cursor: grab; box-shadow: 0 1px 2px rgba(16,21,19,.05); transition: transform .15s ease, box-shadow .15s ease; }
.kanban-karte:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16,21,19,.09); }
.kanban-karte.schwebt { opacity: .45; }

/* ---------- Kalender ---------- */
.kal-raster { display: grid; grid-template-columns: 52px repeat(6, 1fr); gap: 2px; }
.kal-zelle { border-radius: 8px; min-height: 26px; }
.kal-termin { border-radius: 9px; padding: 6px 8px; font-size: 11px; line-height: 1.35; border-left: 3px solid; cursor: pointer; overflow: hidden; transition: transform .12s ease; }
.kal-termin:hover { transform: translateY(-1px); }

/* ---------- Sonstiges ---------- */
.trenner { border: 0; border-top: 1px solid var(--linie-zart); margin: 14px 0; }
.zeile { display: flex; align-items: center; gap: 10px; }
.wachsen { flex: 1; min-width: 0; }
.raster-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.avatar-ini { border-radius: 12px; background: var(--akzent-wanne); color: var(--akzent); display: grid; place-items: center; font: 600 13px/1 var(--schrift-text); flex: none; }
.punkt { width: 9px; height: 9px; flex: none; border-radius: 999px; }
.dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 65; width: 300px; background: #fff; border: 1px solid var(--linie); border-radius: 16px; box-shadow: 0 20px 50px rgba(16,21,19,.16); overflow: hidden; animation: sanftRein .16s ease-out; }
.beispiel-band { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--warn); background: var(--warn-wanne); border-radius: 999px; padding: 5px 11px 4px; }

/* Speicherleiste der Einstellungen: bleibt unten stehen, solange
   Änderungen offen sind. Mobil über der Tab-Leiste. */
.speicherleiste { position: sticky; bottom: 14px; z-index: 20; }
@media (max-width: 900px) {
  .speicherleiste { bottom: 76px; }
  /* Über der Tab-Leiste, nicht darauf: sonst verdeckt jede Rückmeldung
     die Beschriftungen von „Anfragen" und „Kunden". */
  .toast-wurzel { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Responsiv ---------- */
.nur-mobil { display: none; }
@media (max-width: 900px) {
  .seitenleiste { display: none; }
  .nur-mobil { display: flex; }
  .taste { display: none; }
  .suche-knopf > span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inhalt { padding: 16px 14px 96px; }
  .kopfleiste { padding: 11px 14px; }
  .titel-gross { font-size: 27px; }
  /* Tabellen behalten ihre Breite und rollen im Kartenrahmen */
  .tabelle { min-width: 560px; }
  .karte > div[style*='overflow-x'], .tabellen-rolle { -webkit-overflow-scrolling: touch; }
  /* Kanban: eine Spalte je Wisch, sauber einrastend */
  .kanban { grid-auto-columns: 84vw; scroll-snap-type: x mandatory; }
  .kanban-spalte { scroll-snap-align: start; }
  /* Modals füllen den Schirm fast ganz */
  .modal-schleier { padding: 12px 8px 24px; }
  .modal { width: 100%; border-radius: 16px; }
  /* Kennzahl-Karten zweispaltig statt untereinander */
  .raster-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Dropdowns (Glocke, Neu) an den Rand anpassen */
  .dropdown { position: fixed; left: 10px; right: 10px; top: 64px; width: auto; }
  .mobil-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex;
    background: var(--dunkel); color: var(--dunkel-text); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .mobil-nav button { flex: 1; display: grid; justify-items: center; gap: 3px; border: 0; background: none; color: #AFB8B2; font-size: 9.5px; padding: 7px 2px; border-radius: 10px; }
  .mobil-nav button.dran { color: var(--akzent-hell); }
  .mobil-nav svg { stroke: currentColor; }
  .panel { width: 100vw; border-left: 0; }
}

/* ---------- Dokumente: Angebot und Rechnung ----------
   Am Bildschirm eine Karte, auf Papier eine volle A4-Seite.
   Der dehnbare Zwischenraum drückt den Schlussblock nach unten,
   damit auch ein kurzes Angebot die Seite ausfüllt. */
/* Alle Schriftgrößen des Dokuments hängen an diesen Größen. Auf Papier
   werden sie kleiner und die Ränder größer, damit ein Angebot nicht wie
   eine Großdruck-Ausgabe wirkt. */
/* Eine Schrift im ganzen Dokument. Die Display-Schrift bleibt allein der
   Wortmarke vorbehalten, sonst wirkt ein Angebot uneinheitlich. */
.dokument, .dokument * { font-family: var(--schrift-text); }
.dokument [aria-label="revota"] { font-family: var(--schrift-display); }
.dokument {
  --dok-xs: 10px; --dok-s: 11.5px; --dok-m: 12px; --dok-l: 13.5px; --dok-xl: 14.5px;
  --dok-summe: 24px; --dok-summe-m: 19px; --dok-marke: 21px; --dok-zeile: 1.5;
  display: flex; flex-direction: column; border: 1px solid var(--linie);
  border-radius: 16px; padding: 24px 26px 26px; background: #fff;
}
.dok-fuellen { flex: 1 1 auto; min-height: 0; }
.dok-absender { margin-left: auto; text-align: right; font-size: var(--dok-s); line-height: 1.7; color: var(--gedimmt); }
.dok-meta { text-align: right; min-width: 200px; font-size: var(--dok-m); line-height: 1.8; color: var(--gedimmt-dunkel); }
/* Auf schmalen Bildschirmen stapeln sich Absender und Eckdaten,
   statt sich mit dem Empfänger zu verkeilen. */
@media (max-width: 620px) {
  .dok-absender, .dok-meta { flex: 1 0 100%; margin-left: 0; text-align: left; min-width: 0; }
  .dok-meta { margin-top: 12px; }
}
.dok-fuss {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; padding-top: 11px;
  border-top: 1px solid var(--linie-zart); font-size: var(--dok-xs); line-height: 1.65; color: var(--gedimmt);
}

@media print {
  /* margin:0 ist Absicht: Sobald die Seite einen Rand hat, druckt Chrome
     dort seine eigene Kopf- und Fußzeile mit Titel und URL hinein. Der
     sichtbare Rand kommt deshalb aus dem Innenabstand des Dokuments. */
  @page { size: A4; margin: 0; }
  /* height:100% würde im Druck die volle Seitenhöhe belegen und das
     Dokument auf eine zweite, leere Seite schieben. */
  html, body { height: auto !important; min-height: 0 !important; margin: 0; padding: 0; background: #fff; }
  /* Nur das Dokument kommt aufs Papier, nichts von der Oberfläche */
  body > *:not(#modal-wurzel) { display: none !important; }
  .modal-kopf, .modal-fuss, .nicht-drucken { display: none !important; }
  .modal-schleier { position: static; display: block; overflow: visible; padding: 0; margin: 0; background: none; animation: none; }
  .modal { width: 100% !important; margin: 0; border-radius: 0; box-shadow: none; animation: none; }
  .modal-koerper { padding: 0; margin: 0; }
  .dokument {
    /* Kleinere Schrift und breitere Ränder als am Bildschirm: auf Papier
       wirkt dieselbe Größe sonst wie eine Großdruck-Ausgabe. */
    --dok-xs: 9.2px; --dok-s: 10.2px; --dok-m: 10.8px; --dok-l: 11.9px; --dok-xl: 13px;
    --dok-summe: 21px; --dok-summe-m: 17px; --dok-marke: 19px; --dok-zeile: 1.45;
    box-sizing: border-box;
    /* 252mm lassen 45mm Luft auf der A4-Seite. Auch wenn im Druckdialog
       „Ränder: Standard" steht und dadurch nur rund 277mm nutzbar sind,
       rutscht nichts auf eine zweite Seite. */
    min-height: 252mm;
    padding: 20mm 20mm 16mm;
    border: 0; border-radius: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .dokument > *:last-child { margin-bottom: 0; }
  /* Positionen und Schlussblock nie über den Seitenumbruch reißen */
  .dok-posten, .dok-schluss, .dok-fuss { break-inside: avoid; page-break-inside: avoid; }
}