/*
  Mietvertrags-Generator – Darstellung (AP2 Stufe A, Umbau UI-1 „Arbeitsfläche“).

  Regel: Farben stehen NUR im Block „Farben“ gleich unten (Variablen --mv-…).
  Sie verweisen, wo es sie gibt, auf den bestehenden Stil von BBasic (todo.css:
  Knöpfe --cp-btn-*, Tabellen --cp-tab-* nach E162, Texte --todo-*) — die
  Werte dahinter sind nur der Ersatz, falls eine Variable fehlt. Die übrigen
  (Markierungen in Vorschau und Prüfliste) kommen aus dem Klick-Entwurf.

  Aufbau (UI-1, Abschnitt 2): Die Seite füllt genau die Höhe unter der
  Kopfleiste von BBasic und scrollt selbst nicht. Zwei Fenster nebeneinander,
  jedes mit festem Kopf und eigenem Scrollbereich. Unter 1000 px nur ein
  Fenster mit Umschalter.

  Alles hängt unter .mv. Einzige Ausnahme sind die drei Regeln „Host“, die nur
  greifen, solange die Arbeitsfläche auf der Seite steht (:has).
*/

/* ---------- Farben ---------- */

.mv {
    --mv-grund: #f1f5f9;
    --mv-flaeche: var(--todo-card-bg, #ffffff);
    --mv-versenkt: var(--todo-block-bg, #f6f8fb);
    --mv-papier: #ffffff;
    --mv-text: var(--todo-text, #0f172a);
    --mv-leise: var(--todo-text-leise, #64748b);
    --mv-linie: var(--todo-card-border, #dbe2ea);
    --mv-knopf-bg: var(--cp-btn-bg, #ffffff);
    --mv-knopf-rand: var(--cp-btn-rand, #cbd5e1);
    --mv-knopf-text: var(--cp-btn-text, #1e293b);
    --mv-akzent: var(--cp-btn-haupt-bg, #1e3a8a);
    --mv-akzent-text: var(--cp-btn-haupt-text, #ffffff);
    --mv-akzent-zart: #e3e9f6;
    --mv-tab-kopf: var(--cp-tab-kopf-bg, #1b2a5e);
    --mv-tab-kopf-text: var(--cp-tab-kopf-text, #ffffff);
    --mv-tab-zeile: var(--cp-tab-zeile-bg, #ffffff);
    --mv-tab-grau: var(--cp-tab-zeile-grau-bg, #f4f6fa);
    --mv-wert: #f6e6b9;
    --mv-wert-text: #59440f;
    --mv-umf: #e8def4;
    --mv-umf-text: #4d3175;
    --mv-warn: #9a5b08;
    --mv-warn-zart: #fbf0dc;
    --mv-offen: #a3272b;
    --mv-offen-zart: #fae3e2;
    --mv-gelb: #fff59a;
    --mv-blitz: #fff3b0;
    --mv-ok: #2b6b44;
    --mv-ok-zart: #dff0e5;
    --mv-schleier: rgba(10, 20, 25, 0.45);
    --mv-schatten: rgba(0, 0, 0, 0.14);
    /* Einzige Ausnahme: Das Wasserzeichen „ENTWURF“ (.mv-papier-wz) ist ein SVG als
       data:-Adresse, das keine Variablen lesen kann — Grau 128/128/128, Deckkraft 0,14. */

    /* Höhe der Kopfleiste von BBBlazor (MainLayout.razor, .top-row): min-height
       calc(2.75rem + env(safe-area-inset-top)). Der gelbe Rand (3px) liegt darin, weil
       Bootstrap überall box-sizing: border-box setzt. mietvertrag.js misst den echten
       Abstand nach (--mv-oben) — falls die Leiste einmal höher ist, etwa durch Umbruch. */
    --mv-kopfleiste: calc(2.75rem + env(safe-area-inset-top, 0px));
}

/* ---------- Host: nur solange die Arbeitsfläche dasteht ---------- */

html:has(.mv-flaeche),
body:has(.mv-flaeche) {
    overflow: hidden;
}

.page main:has(.mv-flaeche),
article.content:has(.mv-flaeche) {
    padding-bottom: 0;
}

/* ---------- Grundlagen ---------- */

.mv {
    color: var(--mv-text);
    font-family: var(--bb-font, system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 14px;
    line-height: 1.45;
}

.mv *,
.mv *::before,
.mv *::after {
    box-sizing: border-box;
}

.mv button,
.mv input,
.mv select,
.mv textarea {
    font: inherit;
    color: inherit;
}

.mv :focus-visible {
    outline: 2px solid var(--mv-akzent);
    outline-offset: 2px;
}

.mv h1,
.mv h2,
.mv h3 {
    color: var(--mv-text);
}

.mv-sperre {
    padding: 2rem 1rem;
    color: var(--mv-leise);
}

.mv-fehler {
    margin: 0.25rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--mv-offen);
    background: var(--mv-offen-zart);
    color: var(--mv-offen);
    border-radius: 3px;
}

.mv-erfolg {
    margin: 0.5rem 0 0;
    color: var(--mv-ok);
}

.mv-laedt,
.mv-leise {
    color: var(--mv-leise);
}

.mv-laedt {
    padding: 0.4rem 0;
}

.mv-spreizer {
    flex: 1;
}

/* ---------- Die Fläche ---------- */

.mv-flaeche {
    height: calc(100dvh - var(--mv-oben, var(--mv-kopfleiste)));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 0.25rem;
}

.mv-kopf {
    flex: none;
    display: grid;
    gap: 4px;
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--mv-linie);
}

.mv-kopf-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.mv-kopf h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
}

.mv-reiter,
.mv-umschalter {
    display: flex;
    gap: 2px;
    background: var(--mv-flaeche);
    border: 1px solid var(--mv-linie);
    border-radius: 6px;
    padding: 2px;
}

.mv-reiter button,
.mv-umschalter button {
    border: 0;
    background: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.mv-reiter button[aria-selected="true"],
.mv-umschalter button[aria-selected="true"] {
    background: var(--mv-akzent);
    color: var(--mv-akzent-text);
}

.mv-reiter button[disabled] {
    color: var(--mv-leise);
    cursor: default;
}

.mv-reiter small {
    font-size: 11px;
    margin-left: 4px;
}

.mv-aktionen {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.mv-kontext {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
}

.mv-kontext b {
    font-size: 16px;
}

.mv-kontext .mv-leise {
    font-size: 13px;
}

.mv-ungesichert {
    font-style: normal;
    color: var(--mv-warn);
    font-weight: 600;
}

.mv-umschalter {
    display: none;
}

.mv-arbeit {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(360px, 40%) minmax(0, 1fr);
    gap: 14px;
    padding: 10px 0 8px;
}

.mv-fenster {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--mv-versenkt);
    border: 1px solid var(--mv-linie);
    border-radius: 8px;
    overflow: hidden;
}

.mv-fenster-kopf {
    flex: none;
    display: grid;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--mv-linie);
    background: var(--mv-flaeche);
}

.mv-fenster-inhalt {
    /* Bezugsrahmen für alles Absolute darin (die versteckten Radioknöpfe von .mv-seg) —
       sonst rechnet es zur ganzen Seite, und die Seite wird höher als das Fenster. */
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.mv-papier-grund {
    background: var(--mv-grund);
}

@media (max-width: 1000px) {
    .mv-arbeit {
        grid-template-columns: 1fr;
    }

    .mv-umschalter {
        display: flex;
    }

    .mv-flaeche[data-zeigt="links"] .mv-fenster-rechts,
    .mv-flaeche[data-zeigt="rechts"] .mv-fenster-links {
        display: none;
    }

    .mv-legende > span {
        display: none;
    }

    .mv-breit-nur {
        display: none;
    }
}

@media (min-width: 1001px) {
    .mv-schmal-nur {
        display: none;
    }
}

.mv-toast {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    z-index: 1900;
    background: var(--mv-text);
    color: var(--mv-papier);
    padding: 8px 14px;
    border-radius: 5px;
    font-size: 13px;
}

/* ---------- Knöpfe und Eingaben ---------- */

.mv-knopf {
    border: 1px solid var(--mv-knopf-rand);
    background: var(--mv-knopf-bg);
    color: var(--mv-knopf-text);
    padding: 6px 13px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}

.mv-knopf:hover:not([disabled]) {
    border-color: var(--mv-akzent);
}

.mv .mv-knopf-haupt {
    background: var(--mv-akzent);
    border-color: var(--mv-akzent);
    color: var(--mv-akzent-text);
    font-weight: 600;
}

.mv .mv-knopf-haupt:hover:not([disabled]) {
    filter: brightness(1.12);
}

.mv-knopf-leise {
    border-color: transparent;
    background: none;
    color: var(--mv-akzent);
    padding-inline: 6px;
}

.mv-knopf[disabled],
.mv-link[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mv-link {
    border: 0;
    background: none;
    padding: 0 2px;
    color: var(--mv-akzent);
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
}

.mv-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 0.75rem;
}

.mv-knoepfe-klein {
    margin-top: 2px;
    gap: 10px;
}

.mv-eingabe {
    width: 100%;
    font-size: 14px;
    background: var(--mv-papier);
    border: 1px solid var(--mv-linie);
    border-radius: 5px;
    padding: 6px 9px;
}

.mv-eingabe[disabled] {
    background: var(--mv-versenkt);
}

.mv-eingabe-kurz {
    max-width: 14rem;
}

textarea.mv-eingabe {
    min-height: 60px;
    resize: vertical;
}

.mv-check {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    cursor: pointer;
    font-size: 13px;
    margin: 0;
}

.mv-check input {
    margin-top: 3px;
}

.mv-seg {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mv-seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mv-seg label {
    border: 1px solid var(--mv-linie);
    background: var(--mv-papier);
    padding: 5px 11px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    margin: 0;
}

.mv-seg input:checked + label {
    background: var(--mv-akzent);
    border-color: var(--mv-akzent);
    color: var(--mv-akzent-text);
}

.mv-seg input:focus-visible + label {
    outline: 2px solid var(--mv-akzent);
    outline-offset: 2px;
}

.mv-seg input:disabled + label {
    cursor: not-allowed;
    color: var(--mv-leise);
    border-style: dashed;
}

/* Gesperrte Option (D56): ausgegraut und durchgestrichen, der Grund steht darunter (.mv-feld-sperre). */
.mv-seg label.mv-option-gesperrt {
    background: var(--mv-versenkt);
    text-decoration: line-through;
}

.mv-feld-sperre {
    color: var(--mv-warn);
}

/* Einheit in BBasic als Gewerbe eingetragen (Wohnungstyp-Kategorie 10–13) */
.mv-gewerbe-marke {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--mv-akzent-zart);
    color: var(--mv-akzent);
}

.mv-multi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 4px 10px;
}

/* ---------- Linkes Fenster ---------- */

.mv-werkzeug {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mv-werkzeug .mv-eingabe {
    flex: 1;
    min-width: 0;
}

.mv-werkzeug .mv-check {
    white-space: nowrap;
}

.mv-sprungleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mv-sprungleiste button {
    display: flex;
    gap: 5px;
    align-items: center;
    border: 1px solid var(--mv-linie);
    background: var(--mv-papier);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.mv-sprungleiste button:hover {
    border-color: var(--mv-akzent);
}

.mv-punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mv-ok);
}

.mv-punkt-offen {
    background: var(--mv-offen);
}

.mv-karte {
    background: var(--mv-flaeche);
    border: 1px solid var(--mv-linie);
    border-radius: 7px;
    padding: 12px 14px;
    display: grid;
    gap: 10px;
}

.mv-karte h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.mv-karte-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mv-schritte {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.mv-schritte li {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--mv-leise);
}

.mv-schritte li.mv-dran {
    color: var(--mv-text);
    font-weight: 600;
}

.mv-schritte li.mv-erledigt {
    color: var(--mv-ok);
}

.mv-kreis {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    flex: none;
}

.mv-mieterwahl {
    display: grid;
    gap: 4px;
}

.mv-mieter-zeile {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px 9px;
    border: 1px solid var(--mv-linie);
    border-radius: 5px;
    background: var(--mv-papier);
    cursor: pointer;
    font-size: 13px;
    margin: 0;
}

.mv-mieter-zeile small {
    color: var(--mv-leise);
}

.mv-mieter-zeile.mv-gewaehlt {
    border-color: var(--mv-akzent);
    background: var(--mv-akzent-zart);
}

.mv-gesperrt {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mv-abschnitt {
    border: 1px solid var(--mv-linie);
    background: var(--mv-flaeche);
    border-radius: 7px;
    min-width: 0;
    scroll-margin-top: 8px;
}

.mv-abschnitt-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: none;
    padding: 10px 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.mv-abschnitt-fest {
    cursor: default;
}

.mv-pfeil {
    color: var(--mv-leise);
    font-size: 12px;
    transition: transform 0.15s;
}

.mv-abschnitt-auf .mv-pfeil {
    transform: rotate(90deg);
}

.mv-fortschritt {
    margin-left: auto;
    display: flex;
    gap: 8px;
    font-weight: 400;
    font-size: 12px;
    color: var(--mv-leise);
}

.mv-fehlt {
    color: var(--mv-offen);
}

.mv-ok {
    color: var(--mv-ok);
}

.mv-abschnitt-inhalt {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.mv-weitere-kopf {
    border: 0;
    border-top: 1px dashed var(--mv-linie);
    background: none;
    padding: 8px 0 0;
    text-align: left;
    color: var(--mv-akzent);
    font-size: 13px;
    cursor: pointer;
}

.mv-weitere {
    display: grid;
    gap: 10px;
}

/* ---------- Ein Feld ---------- */

.mv-feld {
    display: grid;
    gap: 3px;
    min-width: 0;
    border-radius: 5px;
    transition: background 0.6s;
}

.mv-feld.mv-blitz {
    background: var(--mv-blitz);
}

.mv-feld-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
    color: var(--mv-leise);
    margin: 0;
}

.mv-pflicht {
    color: var(--mv-offen);
    font-weight: 700;
}

.mv-marke {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 3px;
    padding: 1px 5px;
    background: var(--mv-akzent-zart);
    color: var(--mv-akzent);
}

.mv-marke-rechnung {
    background: var(--mv-ok-zart);
    color: var(--mv-ok);
}

.mv-marke-geaendert {
    background: var(--mv-umf);
    color: var(--mv-umf-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.mv-feld-offen .mv-eingabe {
    border-color: var(--mv-offen);
}

.mv-feld-geaendert .mv-eingabe {
    border-color: var(--mv-umf-text);
    background: var(--mv-umf);
}

.mv-feld-treffer {
    background: var(--mv-wert);
    padding: 2px 4px;
}

.mv-feld-hinweis {
    font-size: 12px;
    color: var(--mv-leise);
    margin: 0;
}

.mv-feld-bbasic {
    color: var(--mv-akzent);
}

.mv-warn-text {
    color: var(--mv-warn);
}

/* ---------- Auswahl rechts ---------- */

.mv-auswahl {
    display: grid;
    gap: 10px;
    align-content: start;
}

.mv-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.mv-leiste h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.mv-tabelle-rahmen {
    overflow-x: auto;
    border: 1px solid var(--mv-linie);
    border-radius: 7px;
}

.mv-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: var(--mv-tab-zeile);
}

.mv-tabelle th {
    position: sticky;
    top: 0;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 8px 10px;
    background: var(--mv-tab-kopf);
    color: var(--mv-tab-kopf-text);
}

.mv-tabelle td {
    padding: 8px 10px;
    border-top: 1px solid var(--mv-linie);
    vertical-align: top;
}

.mv-tabelle tbody tr:nth-child(even) td {
    background: var(--mv-tab-grau);
}

.mv-tabelle tbody tr {
    cursor: pointer;
}

.mv-tabelle tbody tr:hover td,
.mv-tabelle tbody tr:focus-visible td {
    background: var(--mv-akzent-zart);
}

.mv-tabelle tbody tr.mv-aus,
.mv-tabelle tbody tr.mv-aus:hover td {
    cursor: default;
    color: var(--mv-leise);
    background: none;
}

.mv-tabelle tbody tr.mv-gesperrt {
    display: table-row;
}

.mv-zahlspalte {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mv-kuerzel {
    font-weight: 600;
}

.mv-stand {
    display: inline-block;
    font-size: 12px;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.mv-stand-frei {
    background: var(--mv-ok-zart);
    color: var(--mv-ok);
}

.mv-stand-bald {
    background: var(--mv-warn-zart);
    color: var(--mv-warn);
}

.mv-stand-vermietet {
    background: var(--mv-akzent-zart);
    color: var(--mv-akzent);
}

.mv-stand-neu {
    background: var(--mv-umf);
    color: var(--mv-umf-text);
}

/* ---------- Prüfliste (Kopf rechts) ---------- */

.mv-pruefzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mv-zahl {
    border: 0;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 4px;
}

button.mv-zahl {
    cursor: pointer;
}

.mv-zahl-offen {
    background: var(--mv-offen-zart);
    color: var(--mv-offen);
}

.mv-zahl-warn {
    background: var(--mv-warn-zart);
    color: var(--mv-warn);
}

.mv-zahl-info {
    background: var(--mv-akzent-zart);
    color: var(--mv-akzent);
}

.mv-zahl-umf {
    background: var(--mv-umf);
    color: var(--mv-umf-text);
}

.mv-zahl-ok {
    background: var(--mv-ok-zart);
    color: var(--mv-ok);
}

.mv-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-left: auto;
    font-size: 12px;
    color: var(--mv-leise);
}

.mv-legende-wert::before,
.mv-legende-umf::before,
.mv-legende-offen::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: -1px;
}

.mv-legende-wert::before {
    background: var(--mv-wert);
}

.mv-legende-umf::before {
    background: var(--mv-umf);
}

.mv-legende-offen::before {
    background: var(--mv-offen-zart);
    border: 1px solid var(--mv-offen);
}

.mv-legende .mv-check {
    font-size: 12px;
}

.mv-pruef-liste {
    display: grid;
    gap: 6px;
    max-height: 38vh;
    overflow: auto;
}

.mv-pruef-eintrag {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 10px;
    align-items: start;
    background: var(--mv-versenkt);
    border: 1px solid var(--mv-linie);
    border-radius: 5px;
    padding: 8px 10px 8px 0;
    font-size: 13px;
}

.mv-streifen {
    align-self: stretch;
    border-radius: 0 2px 2px 0;
}

.mv-stufe-offen .mv-streifen {
    background: var(--mv-offen);
}

.mv-stufe-warn .mv-streifen {
    background: var(--mv-warn);
}

.mv-stufe-info .mv-streifen {
    background: var(--mv-akzent);
}

.mv-gesehen {
    opacity: 0.55;
}

.mv-gesehen-schalter {
    white-space: nowrap;
    color: var(--mv-leise);
    font-size: 12px;
}

.mv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.mv-chip {
    border: 1px solid var(--mv-offen);
    background: var(--mv-offen-zart);
    color: var(--mv-offen);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12px;
    cursor: pointer;
}

/* ---------- Vorschau (Papier) ---------- */

.mv-papier {
    position: relative;
    flex: none;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 44px 54px 56px;
    background-color: var(--mv-papier);
    box-shadow: 0 1px 4px var(--mv-schatten);
    font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--mv-text);
}

@media (max-width: 640px) {
    .mv-papier {
        padding: 24px 16px;
    }
}

.mv-papier-wz {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='900'%3E%3Ctext x='380' y='470' text-anchor='middle' transform='rotate(-35 380 450)' font-family='Arial,sans-serif' font-size='150' font-weight='700' fill='rgb(128,128,128)' fill-opacity='0.14' letter-spacing='12'%3EENTWURF%3C/text%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
}

.mv-papier-kopf {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--bb-font, system-ui, sans-serif);
    font-size: 11px;
    color: var(--mv-leise);
    border-bottom: 1px solid var(--mv-linie);
    padding-bottom: 6px;
    margin-bottom: 28px;
}

.mv-papier-titel {
    margin: 0 0 4px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.mv-papier-untertitel {
    margin: 0 0 20px;
    text-align: center;
    font-size: 16px;
}

.mv-par {
    margin: 26px 0 10px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
}

.mv-par-anlage {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed var(--mv-linie);
}

.mv-par-zwischen {
    margin: 20px 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.mv-baustein {
    position: relative;
    border-radius: 3px;
    padding: 1px 28px 1px 0;
}

.mv-baustein:hover {
    background: var(--mv-akzent-zart);
}

.mv-baustein-umf,
.mv-baustein-umf:hover {
    background: var(--mv-umf);
}

.mv-baustein-offen {
    outline: 1px solid var(--mv-akzent);
}

.mv-umf-marke {
    display: inline-block;
    font: 600 10px/1 var(--bb-font, system-ui, sans-serif);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--mv-umf-text);
    color: var(--mv-papier);
    padding: 3px 5px;
    border-radius: 2px;
    margin: 2px 0 4px;
}

.mv-stift {
    position: absolute;
    right: 2px;
    top: 2px;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
    color: var(--mv-akzent);
    font-size: 14px;
    padding: 2px 4px;
}

.mv-baustein:hover .mv-stift,
.mv-baustein:focus-within .mv-stift,
.mv-baustein-umf .mv-stift {
    opacity: 1;
}

@media (hover: none) {
    .mv-stift {
        opacity: 1;
    }
}

.mv-umf-box {
    display: grid;
    gap: 6px;
    margin: 6px 0 8px;
    font-family: var(--bb-font, system-ui, sans-serif);
}

.mv-abs {
    display: grid;
    grid-template-columns: 2.6em 1fr;
    margin: 0 0 8px;
}

.mv-nr {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mv-abs-text {
    min-width: 0;
    text-align: justify;
    hyphens: manual;
}

.mv-auf .mv-abs-text {
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.mv-auf-punkt {
    display: inline-block;
    width: 1.2em;
    text-indent: 0;
}

.mv-anlagenliste .mv-abs-text {
    text-align: left;
}

.mv-tab-luecke {
    display: inline-block;
    width: 2.5em;
}

.mv-kopf-abs {
    margin: 0;
}

.mv-stil-zentriert {
    text-align: center;
    margin: 28px 0;
}

.mv-stil-rechts {
    text-align: right;
    margin-top: 8px;
}

.mv-baustein > .mv-stil-block:first-of-type {
    margin-top: 24px;
}

.mv-stil-abstand {
    margin-top: 12px;
}

.mv-stil-text {
    text-align: justify;
    margin-bottom: 8px;
}

.mv-fett {
    font-weight: 700;
}

/* Eingesetzte Werte: klickbar, springen zum Feld (UI-1, Abschnitt 6). */
.mv-wert {
    background: var(--mv-wert);
    color: var(--mv-wert-text);
    padding: 0 2px;
    border-radius: 2px;
    cursor: pointer;
    outline: 3px solid transparent;
    outline-offset: 1px;
    transition: outline-color 0.3s;
}

/* Offene Stellen hellrot wie im Klick-Entwurf — gelb sind sie erst im Word-Dokument.
   Gelb in der Vorschau sähe aus wie ein eingesetzter Wert (.mv-wert). */
.mv-offen {
    background: var(--mv-offen-zart);
    color: var(--mv-offen);
    padding: 0 2px;
    border-radius: 2px;
    font-family: var(--bb-font, system-ui, sans-serif);
    font-size: 13px;
}

mark.mv-offen[data-f] {
    cursor: pointer;
}

.mv-wert.mv-puls,
.mv-offen.mv-puls {
    outline: 3px solid var(--mv-akzent);
}

.mv-ref {
    color: inherit;
}

.mv-tab {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 12px;
    font-size: 14px;
}

.mv-tab-einzug {
    margin-left: 2.6em;
    width: calc(100% - 2.6em);
}

.mv-tab td {
    padding: 3px 6px;
    vertical-align: top;
}

.mv-tab-rahmen td {
    border: 1px solid var(--mv-linie);
}

.mv-tab-kopf td {
    font-weight: 700;
    border-bottom: 1px solid var(--mv-text);
}

.mv-tab-summe td {
    font-weight: 700;
    border-top: 1px solid var(--mv-text);
}

.mv-tab-abstand td {
    padding-top: 36px;
}

.mv-rechts {
    text-align: right;
}

/* ---------- Stufe C: Speichern, Entwürfe ---------- */

.mv-status-wahl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.mv-status-wahl .mv-eingabe {
    width: auto;
}

.mv-konflikt,
.mv-hinweis {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.mv-konflikt > span,
.mv-hinweis > span {
    flex: 1;
}

.mv-hinweis {
    margin: 0.25rem 0;
    padding: 0.4rem 0.75rem;
    border-left: 4px solid var(--mv-akzent);
    background: var(--mv-akzent-zart);
    border-radius: 3px;
    font-size: 13px;
}

/* Eine Spalte, ein Fenster — auch unter 1000 px (kein Umschalter in der Liste). */
.mv-arbeit.mv-arbeit-liste {
    grid-template-columns: minmax(0, 1fr);
}

.mv-vertragsliste td {
    vertical-align: middle;
}

.mv-tabelle tbody tr.mv-offen-zeile td:first-child {
    box-shadow: inset 3px 0 0 var(--mv-akzent);
}

.mv-zeilen-aktionen {
    white-space: nowrap;
    text-align: right;
    cursor: default;
}

.mv-zeilen-aktionen .mv-knopf {
    margin-left: 4px;
    padding: 2px 8px;
    font-size: 12.5px;
}

.mv-unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Dialog ---------- */

.mv-schleier {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mv-schleier);
    padding: 16px;
}

.mv-dialog {
    width: min(540px, 100%);
    background: var(--mv-flaeche);
    color: var(--mv-text);
    border: 1px solid var(--mv-linie);
    border-radius: 8px;
    padding: 20px;
}

.mv-dialog h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
}

.mv-dialog-hinweis {
    margin: 0 0 8px;
    padding: 6px 8px;
    background: var(--mv-warn-zart);
    color: var(--mv-warn);
    border-radius: 4px;
    font-size: 13px;
}

.mv-optionen {
    display: grid;
    gap: 8px;
    margin: 10px 0;
}

.mv-optionen .mv-check {
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .mv-pfeil,
    .mv-feld,
    .mv-wert {
        transition: none;
    }

    .mv-fenster-inhalt {
        scroll-behavior: auto;
    }
}