/* ══════════════════════════════════════════════════════════════════════
   RheinAgent Systems · Dokument-Werkstatt
   Stil fuer die Live-Vorschau (HTML-Blatt) und den grossen Editor,
   in dem Rechnung, Angebot, Vertrag und Mahnung vollstaendig
   bearbeitet werden.

   Diese Datei wird NACH 08-team-chat.css geladen und ueberschreibt
   deshalb die alten, kleinen Vorschau-Masse.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Das Blatt ────────────────────────────────────────────────────────
   Die Vorschau ist kein Bild und kein Canvas, sondern echtes HTML mit
   denselben Koordinaten wie das PDF. Deshalb flackert beim Tippen
   nichts: es wird nur Text verschoben, nichts neu gerechnet. */
.ra-blatt {
  position: relative; background: #fff; overflow: hidden;
  line-height: 1; border-radius: 2px; margin: 0 auto 20px;
  box-shadow: 0 6px 26px rgba(15, 23, 42, .18);
}
.ra-blatt:last-child { margin-bottom: 0; }
.ra-blatt i, .ra-blatt b { position: absolute; display: block; font-style: normal; }
.ra-blatt b {
  white-space: pre; line-height: 1; letter-spacing: 0;
  font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
}
.ra-blatt img { position: absolute; display: block; }
html.gs-dark .ra-blatt { box-shadow: 0 6px 26px rgba(0, 0, 0, .55); }

/* ── Firmendaten: die Vorschau rechts, jetzt deutlich groesser ─────── */
.fa-split { grid-template-columns: minmax(0, 1fr) minmax(600px, 52vw); gap: 1.1rem; }
@media (max-width: 1600px) { .fa-split { grid-template-columns: minmax(0, 1fr) minmax(520px, 48vw); } }
@media (max-width: 1200px) { .fa-split { grid-template-columns: 1fr; } }

/* Zwei getrennte Rollbereiche: links das Formular, rechts das Blatt.
   Beide rollen fuer sich - je nachdem, wo die Maus steht. Die Seite
   dahinter rollt nicht mit (overscroll-behavior), sonst rutscht beim
   Erreichen des Endes ploetzlich die ganze Seite weg.
   Die genaue Hoehe setzt 24-abrechnung.js, damit der Bereich immer
   exakt bis zum unteren Fensterrand reicht. */
/* Innenabstand zaehlt zur Hoehe, nicht obendrauf. Ohne das ragt der
   Rollbereich um seine Polsterung nach unten heraus und verdeckt die
   Zeile darunter. */
.fa-form, .fa-vs-blatt, .dw-form, .dw-vs-flaeche { box-sizing: border-box; }

/* Zwei getrennte Rollbereiche: links das Formular, rechts das Blatt.
   Beide rollen fuer sich - je nachdem, wo die Maus steht.

   Die Hoehe haengt bewusst NICHT vom umgebenden Kasten ab, sondern nur
   von der Fensterhoehe (vh). Ein gemessener Wert war hier der Fehler:
   gemessen wird beim Seitenwechsel, waehrend die Seite noch einblendet -
   dabei kommt ein falscher Platz heraus, der Rahmen bleibt winzig und
   das Blatt passt hinein. Wo nichts ueberlaeuft, rollt auch nichts.
   Mit vh kann das nicht passieren. */
.fa-split { align-items: start; }
.fa-form {
  min-height: 0; max-height: calc(100vh - 300px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: .55rem;
}
.fa-vorschau {
  position: sticky; top: .5rem;
  display: flex; flex-direction: column;
}
.fa-vs-rahmen {
  height: calc(100vh - 380px); min-height: 320px; background: #e9edf3;
}
.fa-vs-blatt {
  height: 100%; overflow: auto; overscroll-behavior: contain;
  padding: 18px 14px; display: block; text-align: center;
}
.fa-vs-blatt > div { text-align: left; }
html.gs-dark .fa-vs-rahmen { background: rgb(24, 32, 46); }

/* Schmale Bildschirme: alles untereinander, die Seite rollt als Ganzes.
   Die Vorschau behaelt trotzdem ihren eigenen Rollbereich. */
@media (max-width: 1200px) {
  .fa-form { max-height: none; overflow: visible; }
  .fa-vorschau { position: static; }
  .fa-vs-rahmen { height: 68vh; }
}

/* Vollbild der Firmendaten-Vorschau */
.fa-vorschau.dw-gross {
  position: fixed; inset: 14px; z-index: 9400; max-width: none;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .45);
}
.fa-vorschau.dw-gross .fa-vs-rahmen { height: calc(100vh - 130px); }

/* ── Der grosse Editor ────────────────────────────────────────────── */
.dw-hg {
  position: fixed; inset: 0; z-index: 9500; padding: 14px;
  background: rgba(15, 23, 42, .55); display: flex; justify-content: center;
}
.dw-fenster {
  width: 100%; max-width: 1860px; background: #f6f8fb; border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .45);
}
.dw-kopf {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .9rem; background: #fff; border-bottom: 1px solid #e5e9f0;
}
.dw-titel { font-size: .95rem; font-weight: 700; color: #0f172a; margin-right: auto; }
.dw-titel small { display: block; font-size: .7rem; font-weight: 500; color: #94a3b8; }

.dw-koerper {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(400px, 34%) minmax(0, 1fr);
  /* minmax(0, 1fr) statt der Vorgabe "auto": eine auto-hohe Zeile waechst
     mit ihrem Inhalt und schiebt das Formular unten aus dem Fenster
     heraus, statt es rollen zu lassen. */
  grid-template-rows: minmax(0, 1fr);
}
@media (max-width: 1150px) {
  .dw-koerper { grid-template-columns: 1fr; grid-template-rows: minmax(0, 45%) minmax(0, 55%); }
}

.dw-form {
  min-height: 0; overflow: auto; overscroll-behavior: contain; background: #fff;
  border-right: 1px solid #e5e9f0; padding: .8rem .95rem 2.5rem;
}
.dw-abschnitt { border: 1px solid #e8ecf3; border-radius: 10px; margin-bottom: .6rem; background: #fff; }
.dw-abschnitt > summary {
  cursor: pointer; list-style: none; padding: .55rem .7rem;
  font-size: .8rem; font-weight: 700; color: #334155;
}
.dw-abschnitt > summary::-webkit-details-marker { display: none; }
.dw-abschnitt > summary::before { content: "▸ "; color: #94a3b8; }
.dw-abschnitt[open] > summary::before { content: "▾ "; }
.dw-abschnitt > summary:hover { background: #f8fafc; border-radius: 10px; }
.dw-inhalt { padding: 0 .7rem .7rem; }
.dw-hinweis { font-size: .72rem; color: #64748b; margin: 0 0 .5rem; line-height: 1.45; }

.dw-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.dw-feld { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.dw-feld.breit { grid-column: 1 / -1; }
.dw-feld > label { font-size: .7rem; font-weight: 600; color: #475569; }
.dw-feld > label span { font-weight: 400; color: #94a3b8; }
.dw-feld input, .dw-feld select, .dw-feld textarea {
  width: 100%; padding: .4rem .55rem; font-size: .8rem; font-family: inherit;
  border: 1px solid #dbe2ea; border-radius: .45rem; background: #fff; color: #0f172a;
}
.dw-feld textarea { min-height: 62px; resize: vertical; line-height: 1.45; }
.dw-feld input:focus, .dw-feld select:focus, .dw-feld textarea:focus { outline: none; border-color: #2563eb; }
.dw-schalter { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: #334155; }
.dw-schalter input { width: auto; }

/* Positionen */
.dw-poskopf, .dw-pos {
  display: grid; gap: .35rem; align-items: start;
  grid-template-columns: 22px .78fr 3.1fr .62fr .62fr .85fr 28px;
}
.dw-poskopf { font-size: .65rem; font-weight: 700; color: #94a3b8; padding: .1rem 0 .25rem; }
.dw-pos { margin-bottom: .35rem; }
.dw-pos .dw-nr { font-size: .72rem; color: #94a3b8; padding-top: .5rem; }
.dw-pos input, .dw-pos textarea {
  width: 100%; padding: .35rem .45rem; font-size: .76rem; font-family: inherit;
  border: 1px solid #dbe2ea; border-radius: .4rem; background: #fff; color: #0f172a;
}
.dw-pos textarea { min-height: 34px; resize: vertical; }
.dw-pos .dw-weg {
  border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
  border-radius: .4rem; cursor: pointer; padding: .3rem; font-size: .75rem; line-height: 1;
}
@media (max-width: 780px) {
  .dw-poskopf { display: none; }
  .dw-pos { grid-template-columns: 1fr 1fr; }
}
.dw-poszeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.dw-summe { margin-left: auto; font-size: .78rem; color: #334155; }
.dw-summe b { font-size: .9rem; }

/* Vorschau-Seite des Editors */
.dw-vs { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #e9edf3; }
.dw-vs-leiste {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .45rem .7rem; background: #fff; border-bottom: 1px solid #e5e9f0;
}
.dw-vs-info { font-size: .72rem; color: #64748b; margin-right: auto; }
.dw-vs-flaeche { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 20px 14px 28px; }
.dw-vs-flaeche > div { margin: 0 auto; }

.dw-knopf {
  border: 1px solid #dbe2ea; background: #fff; color: #334155; border-radius: .45rem;
  padding: .32rem .6rem; font-size: .74rem; font-weight: 600; cursor: pointer;
}
.dw-knopf:hover { background: #f1f5f9; }
.dw-knopf.haupt { background: #2563eb; border-color: #2563eb; color: #fff; }
.dw-knopf.haupt:hover { background: #1d4ed8; }
.dw-knopf:disabled { opacity: .45; cursor: default; }
.dw-zoom { font-size: .72rem; color: #475569; min-width: 44px; text-align: center; }
.dw-meldung { font-size: .74rem; font-weight: 600; color: #15803d; }
.dw-meldung.fehler { color: #b91c1c; }

/* ── Dunkelmodus ──────────────────────────────────────────────────── */
html.gs-dark .dw-fenster { background: rgb(17, 24, 37); }
html.gs-dark .dw-kopf, html.gs-dark .dw-vs-leiste { background: rgb(22, 30, 45); border-color: rgb(38, 48, 66); }
html.gs-dark .dw-titel { color: rgb(226, 232, 240); }
html.gs-dark .dw-form { background: rgb(19, 26, 39); border-color: rgb(38, 48, 66); }
html.gs-dark .dw-abschnitt { background: rgb(19, 26, 39); border-color: rgb(38, 48, 66); }
html.gs-dark .dw-abschnitt > summary { color: rgb(198, 208, 224); }
html.gs-dark .dw-abschnitt > summary:hover { background: rgb(26, 35, 51); }
html.gs-dark .dw-feld > label { color: rgb(148, 163, 184); }
html.gs-dark .dw-feld input, html.gs-dark .dw-feld select, html.gs-dark .dw-feld textarea,
html.gs-dark .dw-pos input, html.gs-dark .dw-pos textarea {
  background: rgb(28, 37, 52); border-color: rgb(45, 58, 78); color: rgb(226, 232, 240);
}
html.gs-dark .dw-vs { background: rgb(24, 32, 46); }
html.gs-dark .dw-knopf { background: rgb(28, 37, 52); border-color: rgb(45, 58, 78); color: rgb(198, 208, 224); }
html.gs-dark .dw-knopf:hover { background: rgb(38, 49, 68); }
html.gs-dark .dw-knopf.haupt { background: #2563eb; border-color: #2563eb; color: #fff; }
html.gs-dark .dw-hinweis, html.gs-dark .dw-vs-info { color: rgb(139, 149, 169); }
html.gs-dark .dw-summe { color: rgb(198, 208, 224); }