:root {
  --grund: #f5f4f0;
  --flaeche: #ffffff;
  --text: #1d2125;
  --leise: #5f6670;
  --linie: #dddad2;
  --akzent: #8a1c2b;
  --akzent-dunkel: #6c1421;
  --akzent-hell: #f6e8ea;
  /* Farbe des handelnden Notars (Benutzer 1.11.2026: AM tannengrün, SK schwarz, MM königsblau): Notar-Kästchen und
     Beschriftungen des Formulars (Gruppentitel, gewählte Vorlage, Reiter); app.js setzt data-notar am <html> */
  --notar-farbe: var(--akzent);
  --farbe-AM: #1b4d2e;
  --farbe-SK: #000000;
  --farbe-MM: #16418f;
  --ok: #24663b;
  --warn-hg: #fff6dd;
  --warn: #7a5600;
  --fehler: #9b1c1c;
  --fehler-hg: #fdecec;
  --radius: 8px;
  --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grund); color: var(--text); font: 15px/1.45 var(--schrift); }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: .2px; }
.marke .leicht { font-weight: 400; color: var(--leise); }
.logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px;
  background: var(--akzent); color: #fff; font-family: Georgia, serif; font-size: 18px; }
nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wer { color: var(--leise); margin: 0 8px; font-size: 14px; }
.link { background: none; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--text); }
.link:hover { background: var(--grund); }

main { max-width: 1180px; margin: 0 auto; padding: 24px; }
h1 { font-size: 22px; margin: 0 0 12px; font-weight: 650; }
h2 { font-size: 16px; margin: 0 0 12px; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; }
.schmal { max-width: 380px; margin: 0 auto; }
.anmeldung { padding-top: 8vh; }
.anmeldung label, .zeilenform label { display: flex; flex-direction: column; gap: 4px; font-size: 13px;
  color: var(--leise); margin-bottom: 12px; }
input[type=text], input:not([type]), input[type=password], input[type=date], input[type=number], textarea {
  border: 1px solid var(--linie); border-radius: 6px; padding: 7px 9px; background: #fff; color: var(--text);
  min-width: 0; }
/* Eingabefelder im Formular deutlich umrandet (wie in Word abgesetzt; Benutzer 1.11.2026) */
#formular input:not([type=checkbox]):not([type=file]), #formular textarea, #formular select { border-color: #b3ada1; }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.anmeldung input { font-size: 15px; }
.primaer { background: var(--akzent); color: #fff; border: 0; border-radius: 6px; padding: 9px 16px;
  font-weight: 600; cursor: pointer; }
.primaer:hover { background: var(--akzent-dunkel); }
.primaer:disabled { opacity: .55; cursor: progress; }
.sekundaer { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 6px;
  padding: 8px 14px; cursor: pointer; }
.sekundaer:hover { background: var(--grund); }
a.sekundaer { display: inline-block; text-decoration: none; }
.fehler { color: var(--fehler); background: var(--fehler-hg); padding: 8px 10px; border-radius: 6px; font-size: 14px; }

.liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.vorlage-kachel { text-align: left; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 18px; cursor: pointer; }
.vorlage-kachel:hover { border-color: var(--akzent); }
.vorlage-kachel strong { display: block; font-size: 16px; }
.vorlage-kachel span { color: var(--leise); font-size: 13px; }

.formkopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 8px; }
.formkopf h1 { margin: 0; }
.aktionen { display: flex; gap: 8px; justify-content: flex-end; }
/* Aktionsleiste: unten am Fenster fest, damit „Dokument erstellen“ auch bei langen Masken sichtbar bleibt. Ohne Streifen:
   nur die Knöpfe schweben rechts unten, „Dokument erstellen“ größer und rund (Benutzer 1.11.2026, Vorschlag C) */
.aktionsleiste { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-top: 14px; padding: 0 0 16px; background: transparent; pointer-events: none; }
.aktionsleiste .aktionen { flex-wrap: wrap; gap: 10px; pointer-events: auto; }
.aktionsleiste .aktionsinfo:empty, .aktionsleiste .aktionsinfo:has(> span:empty) { display: none; }
.aktionsleiste button { border-radius: 24px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.aktionsleiste #zuruecksetzen, .aktionsleiste #leerenknoepfe button { padding: 10px 18px; }
.aktionsleiste .primaer { padding: 12px 26px; font-size: 16px; }
.aktionsinfo { color: var(--leise); font-size: 13px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wordwahl { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; white-space: nowrap; }
.startknoepfe { display: contents; }
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; flex-wrap: wrap; }
.formreiter { margin-bottom: 14px; }
.reiter button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer;
  color: var(--leise); }
.reiter button.aktiv { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }
:root[data-notar="AM"] { --notar-farbe: var(--farbe-AM); }
:root[data-notar="SK"] { --notar-farbe: var(--farbe-SK); }
:root[data-notar="MM"] { --notar-farbe: var(--farbe-MM); }
/* Im Formular (Vorlagenleiste, Reiter, Gruppen, Kästchen, Vorberechnung, Knopfleiste) ist die ganze Akzentfarbe die des
   handelnden Notars (Benutzer 1.11.2026: „auch die jeweilige Farbe“); Kopfzeile mit Logo und „Anleitung“ bleibt weinrot.
   Ohne Notar-Wahl bzw. bei einem anderen Kürzel bleibt alles weinrot. */
:root[data-notar="AM"] #ansicht-formular { --akzent: var(--farbe-AM); --akzent-dunkel: #123a22; --akzent-hell: #e5efe8; }
:root[data-notar="SK"] #ansicht-formular { --akzent: var(--farbe-SK); --akzent-dunkel: #3a3a3a; --akzent-hell: #ececec; }
:root[data-notar="MM"] #ansicht-formular { --akzent: var(--farbe-MM); --akzent-dunkel: #0f2f6b; --akzent-hell: #e6ecf7; }
.formreiter button.aktiv { border-bottom-color: var(--notar-farbe); }
/* Reiter des Formulars: eine Zeile (bei vielen Reitern waagrecht scrollbar statt umbrechen) */
.formreiter { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: thin; font-size: 14px; }
.formreiter button { white-space: nowrap; padding: 8px 10px; }
/* Fett macht breiter: unsichtbare fette Kopie des Texts hält die Breite, damit beim Wechsel nichts verspringt */
.reiter button[data-text]::after, .vorlagenleiste button[data-text]::after { content: attr(data-text); display: block;
  height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }

#formular .seite { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: start; }
fieldset.rahmen { margin: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
  padding: 12px 14px 10px; min-width: 0; grid-column: span var(--b, 12); position: relative; }
fieldset.rahmen > legend { font-weight: 650; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--notar-farbe); padding: 0 6px; }
/* 12-Spalten-Raster je Rahmen; Breite je Feld in --b (Layout-Editor) */
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px 14px; align-items: center; }
.el { grid-column: span var(--b, 12); min-width: 0; position: relative; }
.el.umbruch { grid-column: 1 / span var(--b, 12); }
.el[data-s] { grid-column: var(--s) / span var(--b, 12); }     /* feste Startspalte (Layout „spalte“) */
.feld-cb { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 4px; border-radius: 5px;
  user-select: none; }
.feld-cb:hover { background: var(--grund); }
/* Notar-Kästchen (Urkundsperson AM/SK …, Substitut MM): jedes ein eigenes Element ohne Rand (Benutzer 1.11.2026:
   „Umrandungen wieder weg“, „AM und SK unabhängig verschieben“) */
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.knoepfe > .feld-cb { white-space: nowrap; line-height: 18px; }
/* jedes Kästchen in der Farbe seiner Person, angehakt mit fettem Kürzel; „Substitut“ in der Farbe des handelnden Notars */
.knoepfe input[data-wert="AM"] { accent-color: var(--farbe-AM); }
.knoepfe input[data-wert="SK"] { accent-color: var(--farbe-SK); }
.knoepfe input[data-wert="MM"] { accent-color: var(--farbe-MM); }
.knoepfe input[data-wert="@"] { accent-color: var(--notar-farbe); }
.knoepfe > .feld-cb:has(input:checked) > span { font-weight: 700; color: var(--notar-farbe); }
.knoepfe > .feld-cb:has(input[data-wert="AM"]:checked) > span { color: var(--farbe-AM); }
.knoepfe > .feld-cb:has(input[data-wert="SK"]:checked) > span { color: var(--farbe-SK); }
.knoepfe > .feld-cb:has(input[data-wert="MM"]:checked) > span { color: var(--farbe-MM); }
.optionsliste { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.frei-flaeche .el .optionsliste { height: 100%; flex-wrap: wrap; align-content: flex-start; gap: 6px 18px; }
.feld-cb input { width: 16px; height: 16px; accent-color: var(--akzent); margin: 0; flex: none; }
/* Optionsfeld der UserForm: rund wie in Word (bleibt ein Kästchen im Formular, die Gruppe wählt nur eines) */
.feld-cb input.option { appearance: none; -webkit-appearance: none; border: 1.5px solid #767676; border-radius: 50%;
  background: #fff; display: inline-grid; place-content: center; cursor: pointer; }
.feld-cb input.option:checked { border-color: var(--akzent); }
.feld-cb input.option:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
/* Kästchen/Optionsfeld: kein Fokusring nach dem Anklicken – der lag 3 px außerhalb und wurde in der freien Anordnung
   links abgeschnitten (Benutzer 1.11.2026: „runde Knöpfe, wenn ausgewählt, links abgeschnitten“); mit der Tastatur
   ein Ring direkt am Rand, der in den Innenabstand passt */
.feld-cb input:focus { outline: none; }
.feld-cb input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 0; }
.feld-cb input.option:disabled { opacity: .5; }
.feld-text { display: flex; align-items: center; gap: 8px; }
.feld-text label { color: var(--leise); font-size: 14px; }
.feld-text.oben { flex-direction: column; align-items: flex-start; gap: 3px; }
.raster input.betrag { width: 130px; max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.raster input.klein { width: 52px; text-align: center; }
.raster input.mittel { width: 70px; text-align: right; }
.raster label.beschriftung { min-width: 0; flex: 0 1 auto; }
.feld-voll { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.feld-voll label { color: var(--leise); font-size: 13px; }
textarea.gb { width: 100%; min-height: 110px; font-family: Consolas, "Courier New", monospace; font-size: 12px;
  resize: vertical; }
/* Liste der Grundbuchauszüge (Gruppe „Grundbuchauszüge“, Benutzer 14.11.2026): je Auszug eine Karte, darunter das
   Einfügefeld für den nächsten; „Text“ klappt den Auszug auf */
.gb-liste { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gb-karte { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 8px; align-items: start; padding: 7px 8px;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--akzent-hell); font-size: 12px; }
.gb-karte[hidden] { display: none; }
.gb-karte .gb-nr { width: 22px; height: 22px; border-radius: 50%; background: var(--akzent); color: #fff; display: grid;
  place-items: center; font-weight: 700; font-size: 11.5px; }
.gb-karte .gb-kurz { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.gb-karte .gb-titel { font-weight: 650; overflow-wrap: anywhere; }
.gb-karte .gb-zeile, .gb-karte .gb-eig { color: var(--leise); font-size: 11.5px; overflow-wrap: anywhere; }
.gb-karte .gb-eig:empty { display: none; }
.gb-karte .gb-knoepfe { display: flex; gap: 4px; }
.gb-karte .gb-knoepfe button { padding: 2px 7px; font-size: 11.5px; line-height: 1.4; }
.gb-karte textarea.gb { grid-column: 1 / -1; display: none; width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical; }
.gb-karte.offen textarea.gb { display: block; }
.gb-karte.neu { display: block; padding: 0; border: 0; background: transparent; }
.gb-karte.neu > :not(textarea) { display: none; }
.gb-karte.neu textarea.gb { display: block; min-height: 64px; border-style: dashed; }
.gb-liste .gb-fuss { font-size: 11.5px; color: var(--leise); }
.frei-flaeche .el[data-el="_GBMehrere"] { height: auto; }
.gb-verweis { font-size: 12px; color: var(--akzent); background: var(--akzent-hell); border-radius: 6px; padding: 6px 8px; box-sizing: border-box; }
.frei-flaeche .el.gb-verweis { height: auto; }
.beschriftung { color: var(--leise); font-size: 14px; }
.hinweistext { color: var(--leise); font-size: 13px; font-style: italic; white-space: pre-line; }
/* Überschriftsbalken der UserForm (Beschriftung mit eigener Hintergrundfarbe, z. B. Briefe „Briefe“/„Sonstiges“) */
.hinweistext.balken { display: block; background: var(--balken); font-style: normal;
  font-size: 13.5px; padding: 3px 8px; white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.frei-flaeche .el .hinweistext.balken { display: flex; align-items: center; }

.vorberechnung { float: right; margin: 0 0 8px 12px; width: 220px; background: var(--akzent-hell);
  border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.vorberechnung h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--akzent); }
.vorberechnung dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.vorberechnung dt { color: var(--leise); }
.vorberechnung dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.vorberechnung dd.summe, .vorberechnung dt.summe { font-weight: 700; color: var(--text); border-top: 1px solid #e3c6cb; padding-top: 3px; }
.vorberechnung .anzahl { font-size: 12px; color: var(--leise); margin-bottom: 4px; }
.vorberechnung .tipp { font-size: 12px; color: var(--warn); margin-top: 6px; min-height: 1em; }

#meldungen .meldung { padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; white-space: pre-line; }
.meldung.fehler { color: var(--fehler); background: var(--fehler-hg); }
.meldung.warn { color: var(--warn); background: var(--warn-hg); }
.meldung.ok { color: var(--ok); background: #e8f4ec; }

.dialog { position: fixed; inset: 0; background: rgba(20, 20, 20, .35); display: grid; place-items: center; z-index: 20; padding: 16px; }
.dialog p { white-space: pre-line; margin-top: 0; }

.zeilenform { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
.zeilenform label { margin-bottom: 0; }
.zeilenform button { margin-bottom: 1px; }
.tabellenrahmen { overflow-x: auto; margin-top: 16px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--leise); background: #faf9f6; }
td .marke-status { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.status-aktiv { background: #e8f4ec; color: var(--ok); }
.status-gesperrt { background: var(--fehler-hg); color: var(--fehler); }
td button { margin: 0 4px 4px 0; }
td.klein { font-size: 12px; color: var(--leise); }
.kette { display: flex; flex-wrap: wrap; gap: 4px 10px; }

@media (max-width: 820px) {
  main { padding: 16px; }
  .kopf { padding: 10px 16px; }
}
.el .griff { display: none; }
.vorberechnung { float: none; width: auto; margin: 0; }

/* Layout-Editor */
.layoutleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--warn-hg); border: 1px solid #ecd9a4; border-radius: var(--radius); position: sticky; top: 56px; z-index: 4; }
.layoutleiste .tipp { color: var(--leise); font-size: 13px; }
.layoutleiste .ll-name { font-size: 13px; font-weight: 600; margin-left: 8px; }
.layoutleiste .abstand { flex: 1; }
.layoutleiste button.an { background: var(--akzent-hell); border-color: var(--akzent); }
.layoutleiste button:disabled { opacity: .45; cursor: default; }
#formular.bearbeiten .el, #formular.bearbeiten .rahmen { outline: 1px dashed #b9b3a6; outline-offset: 2px; cursor: grab; }
#formular.bearbeiten .el input, #formular.bearbeiten .el textarea, #formular.bearbeiten .el label { pointer-events: none; }
#formular.bearbeiten .bedingt { opacity: .45; }
#formular.bearbeiten .gewaehlt { outline: 2px solid var(--akzent) !important; background: var(--akzent-hell); }
#formular.bearbeiten .zieht { opacity: .4; }
#formular.bearbeiten .ziel-vor { box-shadow: -4px 0 0 var(--akzent); }
#formular.bearbeiten .ziel-nach { box-shadow: 4px 0 0 var(--akzent); }
#formular.bearbeiten .rahmen.ziel-vor { box-shadow: 0 -4px 0 var(--akzent); }
#formular.bearbeiten .rahmen.ziel-nach { box-shadow: 0 4px 0 var(--akzent); }
#formular.bearbeiten .raster.ziel-ende { background: var(--akzent-hell); }
#formular.bearbeiten .griff { display: block; position: absolute; top: 0; right: -6px; width: 10px; height: 100%;
  cursor: ew-resize; border-radius: 3px; }
#formular.bearbeiten .griff:hover, #formular.bearbeiten .gewaehlt > .griff { background: var(--akzent); opacity: .6; }
fieldset.rahmen > .griff { display: none; }
#formular.bearbeiten fieldset.rahmen > .griff { display: block; right: -2px; }

/* Layout v2: eigene Zeile, Höhe, rechtsbündig, Farben (Werte aus der Palette) */
/* Gruppen bleiben in ihrer Reihenfolge; innerhalb einer Gruppe füllen Felder die Lücke neben der Vorberechnung */
.raster { grid-auto-flow: row dense; }
.el label, .el .hinweistext, .el .feld-cb span { overflow-wrap: anywhere; hyphens: auto; }
.feld-text input { min-width: 0; }
fieldset.rahmen.umbruch { grid-column: 1 / span var(--b, 12); }
.el { grid-row: span var(--h, 1); align-self: start; }
.el.rechts { grid-column: auto / -1; grid-column-start: span var(--b, 12); }
.el.rechts.umbruch { grid-column: auto / -1; }
fieldset.rahmen.gefaerbt { border-color: var(--ff); }
fieldset.rahmen.gefaerbt > legend { color: var(--ff); }
fieldset.rahmen.hinterlegt { background: var(--fh); }
.el.gefaerbt, .el.gefaerbt label, .el.gefaerbt .hinweistext { color: var(--ff); }
.el.hinterlegt { background: var(--fh); border-radius: 5px; padding: 2px 4px; }
.el .vorberechnung { height: 100%; }

.formbereich { display: block; }
.formbereich.mit-panel { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.eigenschaften { position: sticky; top: 120px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px 14px; font-size: 14px; max-height: calc(100vh - 140px); overflow: auto; }
.eigenschaften h3 { margin: 0 0 8px; font-size: 14px; }
.eigenschaften h4 { margin: 14px 0 6px; font-size: 13px; color: var(--leise); }
.eigenschaften .tipp { color: var(--leise); font-size: 13px; margin: 4px 0; }
.eigenschaften .p-name { font-weight: 650; margin-bottom: 8px; word-break: break-all; }
.eigenschaften .p-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.eigenschaften .p-zeile.senkrecht { flex-direction: column; align-items: stretch; }
.eigenschaften .p-zeile.feld-cb { justify-content: flex-start; }
.eigenschaften .p-label { color: var(--leise); font-size: 13px; }
.eigenschaften input[type=text], .eigenschaften select { width: 100%; }
.eigenschaften input.klein { width: 64px; }
.eigenschaften > button { margin: 10px 6px 0 0; }
.farbwahl { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 8px 0; }
.farbwahl .p-label { width: 100%; }
.farbwahl .farbe { width: 22px; height: 22px; border-radius: 4px; border: 1px solid #0003; padding: 0; cursor: pointer; }
.farbwahl .farbe.keine { background: var(--flaeche); font-size: 12px; line-height: 1; }
.farbwahl .farbe.an { outline: 2px solid var(--text); outline-offset: 1px; }
.layoutleiste label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--leise); }
.layoutleiste input.mittel { width: 150px; }
#formular.bearbeiten .leer { grid-column: 1 / -1; color: var(--leise); font-size: 13px; padding: 12px; text-align: center;
  border: 1px dashed var(--linie); border-radius: 6px; }
#formular.bearbeiten .neu-vorlage::after { content: "neu"; position: absolute; top: -8px; right: 4px; font-size: 10px;
  background: var(--warn); color: #fff; border-radius: 3px; padding: 0 4px; }
@media (max-width: 1100px) { .formbereich.mit-panel { grid-template-columns: minmax(0, 1fr) 230px; } }

/* Gruppen: Seite -> Zeilen (12er-Raster) -> Spalten -> Gruppen untereinander */
#formular .seite { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
#formular .seite > .gzeile { width: 100%; }
.gzeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.gspalte { grid-column: span var(--b, 12); display: flex; flex-direction: column; gap: 14px; min-width: 0; position: relative; }
.gspalte > fieldset.rahmen { flex: 1 1 auto; }
#formular.bearbeiten .rahmen.gestapelt > .griff { display: none; }
.schieber { display: none; }
#formular.bearbeiten .schieber { display: block; position: absolute; top: 0; bottom: 0; right: -11px; width: 8px;
  cursor: col-resize; border-radius: 4px; background: var(--linie); z-index: 2; }
#formular.bearbeiten .schieber:hover { background: var(--akzent); }
.zeilen-luecke { display: none; }
#formular.bearbeiten .zeilen-luecke { display: block; text-align: center; font-size: 12px; color: var(--leise);
  border: 1px dashed transparent; border-radius: 6px; padding: 4px; margin: -6px 0; min-height: 16px; }
#formular.bearbeiten .zeilen-luecke:hover { border-color: var(--linie); }
#formular.bearbeiten .zeilen-luecke.ziel-luecke { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); padding: 10px; }
fieldset.rahmen { min-height: calc(var(--rh, 0) * 40px); }
.rahmen[data-rahmen="R_Vorberechnung"] .vorberechnung h3 { display: none; }
.griff-unten { display: none; }
#formular.bearbeiten fieldset.rahmen > .griff-unten { display: block; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 10px; cursor: ns-resize; border-radius: 3px; }
#formular.bearbeiten fieldset.rahmen > .griff-unten:hover, #formular.bearbeiten .gewaehlt > .griff-unten { background: var(--akzent); opacity: .6; }
#formular.bearbeiten .rahmen.ziel-oben { box-shadow: 0 -5px 0 var(--akzent); }
#formular.bearbeiten .rahmen.ziel-unten { box-shadow: 0 5px 0 var(--akzent); }
#formular.bearbeiten .rahmen.ziel-links { box-shadow: -5px 0 0 var(--akzent); }
#formular.bearbeiten .rahmen.ziel-rechts { box-shadow: 5px 0 0 var(--akzent); }

/* Handy: alles volle Breite, Reihenfolge wie im Layout */
@media (max-width: 700px) {
  #formular .rahmen, #formular .el { grid-column: 1 / -1 !important; }
  #formular .el { grid-row: auto !important; }
  #formular fieldset.rahmen { min-height: 0; }      /* Mindesthöhe nur am Laptop */
  .gzeile { grid-template-columns: 1fr; }
  .gspalte { grid-column: 1 / -1 !important; }
  .feld-text { flex-wrap: wrap; }
  .formkopf .aktionen { width: 100%; flex-wrap: wrap; }
  .aktionsleiste { flex-wrap: wrap; padding: 0 0 10px; }
  .aktionsleiste .aktionen { width: 100%; }
  .aktionsleiste .aktionen button { flex: 1 1 auto; }
  #layout-bearbeiten { display: none; }      /* Layout wird am Laptop bearbeitet */
}

/* Auswahlleiste der Vorlagen (Oberkategorie) – am Handy waagrecht scrollbar, ohne die Seite zu verbreitern */
.vorlagenleiste { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; max-width: 100%; padding: 2px 0 10px;
  margin-bottom: 12px; border-bottom: 1px solid var(--linie); scrollbar-width: thin; }
.vorlagenleiste button { flex: 0 0 auto; border: 1px solid var(--linie); background: var(--flaeche); color: var(--leise);
  border-radius: 999px; padding: 6px 11px; cursor: pointer; font: inherit; font-size: 14px; white-space: nowrap; }
.vorlagenleiste button:hover { color: var(--text); border-color: var(--notar-farbe); }
.vorlagenleiste button.aktiv { background: var(--notar-farbe); border-color: var(--notar-farbe); color: #fff; font-weight: 600; }
.kopfseite { margin-bottom: 8px; }

/* Knopf „Felder abwählen“ über den Rahmen einer Seite (ui.json "leeren") */
#formular .leeren-leiste { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Verwaltung: Kanzleidaten */
.kanzlei-block { margin-top: 16px; }
.kanzlei-block textarea { font: inherit; }
.kanzlei-block .tabellenrahmen input, .kanzlei-block .tabellenrahmen select { font-size: 13px; padding: 3px 5px; }
#ansicht-verwaltung .meldung { padding: 10px 12px; border-radius: 6px; margin: 0 0 12px; }
#pruefung-quelle .breit { flex: 1 1 420px; }
#pruefung-quelle .breit input { width: 100%; }
pre.bericht { white-space: pre-wrap; font-size: 13px; max-height: 60vh; overflow: auto; background: var(--grund);
  padding: 12px; border-radius: 6px; }
.nn-aus { display: none !important; }
.nn-gb { padding: 10px 12px; border-radius: 6px; margin: 0 0 12px; }
.raster > .nn-gb { grid-column: 1 / -1; margin: 0; }           /* im Rahmen: über die ganze Breite (Schenkungsvertrag) */
.nn-gb ul { margin: 6px 0 8px 18px; padding: 0; }
.nn-gb button { margin-top: 4px; }
.nn-gb.warn { color: var(--warn); background: var(--warn-hg); }
/* ohne Daten aus NovaNota: kein Hinweis, nur „Grundbuch-PDF wählen…“ (bzw. bei ABH das Einfügefeld) */
.nn-gb.leise { padding: 0; background: none; }
.nn-gb.leise > label { display: block; color: var(--leise); font-size: 13px; margin-bottom: 4px; }
.nn-gb textarea.gb { width: 100%; min-height: 110px; box-sizing: border-box; display: block; }
.abh-erkannt:empty { display: none; }
.abh-erkannt { margin: 4px 0 0; }
.abh-erkannt.ok { color: var(--ok); }
.abh-erkannt.warn { color: var(--warn); }

/* Ladebalken beim Erstellen (ab 1 s) */
#ladebalken { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--akzent-hell);
  border-bottom: 1px solid var(--akzent); padding: 6px 16px 8px; font-size: 14px; }
#ladebalken .lade-spur { height: 4px; background: #fff; border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
#ladebalken .lade-lauf { height: 100%; width: 30%; background: var(--akzent); border-radius: 2px;
  animation: lade-lauf 1.2s ease-in-out infinite; }
@keyframes lade-lauf { from { margin-left: -30%; } to { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { #ladebalken .lade-lauf { animation: none; width: 100%; opacity: .6; } }

/* Freie Anordnung (wie die UserForm, Benutzer 25.10.2026): Gruppen und Felder mit Links/Oben/Breite/Höhe in Pixel
   (--x, --y, --w, --hh aus dem Layout); schmale Fenster/Handy: untereinander wie im Raster */
.frei-flaeche { grid-column: 1 / -1; position: relative; height: var(--frei-h); min-width: 0; overflow-x: auto; overflow-y: hidden; }
/* --gb-*: Verschiebungen durch die Liste der Grundbuchauszüge (app.js gbListeLage/gbLueckeSchliessen), getrennt von
   --x/--y, die das Layout und eingeschobene Hinweise (freiPlatz) setzen */
.frei-flaeche > fieldset.rahmen { position: absolute; left: calc(var(--x) + var(--gb-dx, 0px));
  top: calc(var(--y) + var(--gb-dy, 0px) + var(--gb-zu, 0px)); width: calc(var(--w) + var(--gb-dw, 0px));
  height: calc(var(--hh) + var(--gb-dh, 0px)); padding: 0; margin: 0; }
.frei-flaeche > fieldset.rahmen > legend { margin-left: 8px; }
/* Felder direkt auf der Word-Seite (ohne Rahmen): unsichtbare Gruppe, die Rahmen darunter bleiben bedienbar */
.frei-flaeche > fieldset.rahmen.lose { border: none; background: transparent; pointer-events: none; }
.frei-flaeche > fieldset.rahmen.lose > legend { display: none; }
.frei-flaeche > fieldset.rahmen.lose > .raster { top: 0; left: 0; right: 0; }
/* Oben = 0 an der oberen Rahmenlinie (Mitte des Titels) wie in der UserForm; der Titel ist 19 px hoch */
.frei-flaeche .raster { display: block; position: absolute; left: 6px; right: 6px; top: -9px; bottom: 0; pointer-events: none; }
.frei-flaeche .raster > * { pointer-events: auto; }   /* der Titel bleibt anklickbar (Editor: Gruppe wählen/ziehen) */
.frei-flaeche .el { position: absolute; left: calc(var(--x) + var(--gb-dx)); top: calc(var(--y) + var(--gb-zu)); width: calc(var(--w) + var(--gb-dw));
  height: var(--hh); font-size: 12.5px; --gb-dx: 0px; --gb-zu: 0px; --gb-dw: 0px; }   /* nicht von der Gruppe erben; eigene (inline) gehen vor */
.frei-flaeche .feld-cb { gap: 4px; padding: 0 2px; }
.frei-flaeche .feld-cb input { width: 14px; height: 14px; }
.frei-flaeche .el > .feld-cb { width: 100%; height: 100%; padding: 0 2px; overflow: hidden; white-space: nowrap; }
.frei-flaeche .el > .feld-cb span { overflow: hidden; text-overflow: ellipsis; }
.frei-flaeche .el.feld-text { gap: 6px; }
.frei-flaeche .el.feld-text > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; font-size: 13px; }
/* Eingabefelder überall gleich hoch wie „Kaufpreis“ (Benutzer 7.11.2026), unabhängig von der Rundung der Word-Lage aufs Raster */
.frei-flaeche .el.feld-text > input, .frei-flaeche .el.feld-text > select { flex: 1 1 0; min-width: 24px; width: auto; height: 24px;
  padding: 2px 6px; }
.frei-flaeche .el.feld-voll { overflow: hidden; }
.frei-flaeche .el.feld-voll textarea.gb { flex: 1 1 auto; min-height: 0; resize: none; }
/* Beschriftung links wie in der UserForm (Breite aus der Lage des Textfelds, Layout „lw“) – Textfelder stehen bündig */
.frei-flaeche .el.links { flex-direction: row; align-items: flex-start; gap: 6px; }
.frei-flaeche .el.links > label { flex: 0 0 var(--lw); white-space: normal; padding-top: 4px; }
.frei-flaeche .el.links.feld-text { align-items: center; }
.frei-flaeche .el.links.feld-text > label { white-space: nowrap; padding-top: 0; }
.frei-flaeche .el.links > textarea.gb { height: 100%; }
.frei-flaeche .el.links.allein > label { flex: 0 1 auto; max-width: var(--lw); }
.frei-flaeche .el .vorberechnung { height: 100%; overflow: auto; }
/* einzeilig; die Breite des Feldes setzt das Layout passend (app/layout.py notar_breite) */
.frei-flaeche .el .knoepfe { height: 100%; flex-wrap: nowrap; }
.frei-flaeche .el .knoepfe > .feld-cb { padding: 0 4px 0 0; }
.frei-flaeche .el .hinweistext { display: block; height: 100%; overflow: hidden; }
.frei-flaeche .frei-hinweis { position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) + var(--gb-dw)); z-index: 3; margin: 0;
  --gb-dw: 0px; }
.ohne-reiter { margin: 24px 0; padding: 40px 16px; text-align: center; font-size: 17px; color: var(--leise);
  background: var(--flaeche); border: 1px dashed var(--linie); border-radius: var(--radius); }
/* Seitenleiste neben den Gruppen der Reiter (ui.json "seitenleiste": Firmenbuch „Nur diese Abschnitte“ wie in Word) */
.mit-seitenleiste { display: flex; gap: 12px; align-items: flex-start; }
.mit-seitenleiste > .leiste-seiten { flex: 0 1 auto; min-width: 0; }   /* Breite: rechter Rand der Gruppen (app.js) */
.mit-seitenleiste:has(> .seitenleiste[style*="none"]) > .leiste-seiten,
.mit-seitenleiste:not(:has(.seitenleiste fieldset:not([hidden]))) > .leiste-seiten { flex: 1 1 auto; }
.mit-seitenleiste > .seitenleiste { flex: none; }
.seitenleiste:not(:has(fieldset:not([hidden]))) { display: none; }
.griff-ecke { display: none; }
#formular.bearbeiten .griff-ecke { display: block; position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px;
  cursor: nwse-resize; border-radius: 3px; background: var(--akzent); opacity: .35; z-index: 2; }
#formular.bearbeiten .gewaehlt > .griff-ecke, #formular.bearbeiten .griff-ecke:hover { opacity: .85; }
#formular.bearbeiten .frei-flaeche .el, #formular.bearbeiten .frei-flaeche .rahmen { cursor: move; }
#formular.bearbeiten .frei-flaeche { background-image: radial-gradient(circle, #d9d4c8 1px, transparent 1px);
  background-size: 12px 12px; }
#formular.bearbeiten .frei-flaeche .zieht { opacity: .7; z-index: 5; }
@media (max-width: 760px) {
  .frei-flaeche { height: auto; display: flex; flex-direction: column; gap: 14px; overflow: visible; }
  .frei-flaeche > fieldset.rahmen { position: static; width: auto; height: auto; padding: 12px 14px 10px; }
  .frei-flaeche .raster { position: static; display: flex; flex-direction: column; gap: 6px; }
  .frei-flaeche .el { position: static; width: auto; height: auto; padding-top: 0 !important; align-self: stretch; }
  .frei-flaeche .el.feld-voll textarea.gb { min-height: 110px; }
  .frei-flaeche .el.links { flex-direction: column; align-items: stretch; }
  .frei-flaeche .el.links > label { flex: none; }
  .frei-flaeche .el .knoepfe { flex-wrap: wrap; }
  .frei-flaeche .frei-hinweis { position: static; width: auto; }
  .mit-seitenleiste { flex-direction: column-reverse; align-items: stretch; }
  .seitenleiste .frei-flaeche { width: auto !important; }
}

/* Impressum, Datenschutzerklärung, AV-Vertrag (app/gemeinsam/rechtliches.py) und Fußzeile mit den Links */
.fusszeile { max-width: 1180px; margin: 0 auto; padding: 8px 24px 96px; font-size: 13px; color: var(--leise); }
.fusszeile a, .fusslinks a { color: var(--leise); }
main.rechtliches { max-width: 820px; background: var(--flaeche); margin: 24px auto; border-radius: var(--radius);
  border: 1px solid var(--linie); padding: 24px 32px; }
main.rechtliches h1 { font-size: 24px; margin-top: 0; }
main.rechtliches h2 { font-size: 17px; margin-top: 24px; }
main.rechtliches h3 { font-size: 15px; margin: 16px 0 4px; }
main.rechtliches mark { background: #fff3b0; }
main.rechtliches .entwurf { margin: 0 0 16px; padding: 10px 14px; background: var(--warn-hg); border: 1px solid #ecd9a4; border-radius: var(--radius); }
a.marke { color: inherit; text-decoration: none; }
.fusslinks { margin-top: 32px; font-size: 13px; }
/* Kanzlei-Testbetrieb: schmales Hinweisband über dem Kopf (rechtliches.BAND), Fußzeile mit Urheber und Nutzung */
.testband { padding: 3px 24px; font-size: 12px; line-height: 1.4; color: var(--warn); background: var(--warn-hg);
  border-bottom: 1px solid #ecd9a4; }
footer.fusslinks { color: var(--leise); }
/* Grundbuch-PDF hineinziehen */
#formular.pdf-zug textarea { outline: 2px dashed var(--akzent); outline-offset: 2px; }
.nn-gb .gb-pdf { display: inline-block; }
.lageplan-liste { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; margin: 0 0 14px; }
.tv-liste .tv-ez { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; }
.tv-info { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; flex-wrap: wrap; }
/* Zwei-Faktor-Anmeldung (Administratoren) */
.zf-karte { max-width: 640px; margin: 0 auto; }
.zf-qr { display: block; width: 220px; height: 220px; margin: 8px 0; image-rendering: pixelated; }
.zf-codeliste { columns: 2; font-family: Consolas, monospace; font-size: 15px; }
.zf-karte .aktionen { display: flex; justify-content: flex-end; margin-top: 12px; }
#codeformular .link { margin-top: 8px; }
/* Nutzungsbedingungen bestätigen (nach der Anmeldung) */
.nb-karte { max-width: 820px; margin: 0 auto; }
/* feste Hinweise in Ansichten (nicht .meldung: das sind die Meldungen zum Formular) */
.hinweis-ok, .hinweis-warn { padding: 10px 12px; border-radius: 6px; margin: 0 0 12px; font-size: 14px; }
.hinweis-ok { color: var(--ok); background: #e8f4ec; }
.hinweis-warn { color: var(--warn); background: var(--warn-hg); }
.nb-text { max-height: 55vh; overflow: auto; border: 1px solid var(--linie); border-radius: 6px; padding: 4px 16px; }
.nb-text h1 { font-size: 20px; } .nb-text h2 { font-size: 16px; margin-top: 18px; }
.nb-text .entwurf { padding: 8px 12px; background: var(--warn-hg); border-radius: 6px; }
.nb-haken { display: flex; gap: 8px; align-items: center; margin: 14px 0; font-weight: 600; }
.nb-karte .aktionen { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 700px) { main.rechtliches { padding: 16px; margin: 12px; } }

/* Kurzanleitung (/anleitung): Link im Kopf immer sichtbar; Seite druckfreundlich (A4) */
.kopf .anleitung-link { margin-left: auto; color: var(--akzent); font-weight: 600; text-decoration: none; }
.kopf .anleitung-link::before { content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px;
  margin-right: 6px; border-radius: 50%; background: var(--akzent); color: #fff; font-size: 12px; }
.kopf nav a.link { color: var(--text); text-decoration: none; }
@media (max-width: 600px) {    /* Handy: nur das ?-Symbol, sonst wird der Kopf mit Menü zu breit */
  .kopf .anleitung-link { font-size: 0; padding: 6px; }
  .kopf .anleitung-link::before { margin-right: 0; width: 22px; height: 22px; font-size: 14px; }
}
main.anleitung { max-width: 860px; }
main.anleitung h2 { border-bottom: 1px solid var(--linie); padding-bottom: 4px; }
main.anleitung p, main.anleitung li { margin: 4px 0; }
main.anleitung ol, main.anleitung ul { padding-left: 22px; margin: 6px 0; }
main.anleitung figure { margin: 10px 0 12px; }
main.anleitung figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 6px; }
main.anleitung figure.schmal { max-width: 640px; }
main.anleitung figure.nummern { position: relative; }
main.anleitung .nr { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: #1f6fd1; color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: 0 0 0 2px #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
main.anleitung ol.legende { list-style: none; padding-left: 0; counter-reset: nr; }
main.anleitung ol.legende > li { counter-increment: nr; padding-left: 32px; position: relative; }
main.anleitung ol.legende > li::before { content: counter(nr); position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
  border-radius: 50%; display: grid; place-items: center; background: #1f6fd1; color: #fff; font-weight: 700; font-size: 12px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
main.anleitung figcaption { font-size: 13px; color: var(--leise); margin-top: 4px; }
main.anleitung .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
main.anleitung table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 6px 0; }
main.anleitung th, main.anleitung td { border: 1px solid var(--linie); padding: 5px 8px; text-align: left; vertical-align: top; }
main.anleitung th { background: var(--grund); }
main.anleitung .wichtig { padding: 8px 12px; background: var(--warn-hg); border: 1px solid #ecd9a4; border-radius: var(--radius); }
main.anleitung kbd, main.anleitung .knopf { font: inherit; font-size: 13px; padding: 1px 6px; border: 1px solid var(--linie);
  border-radius: 4px; background: var(--grund); white-space: nowrap; }
main.anleitung mark.gelb { background: #ffff00; }
main.anleitung .wichtig, main.anleitung mark, main.anleitung th, main.anleitung .knopf, main.anleitung kbd {
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
main.anleitung .nurdruck { display: none; }
@media (max-width: 700px) { main.anleitung .zwei { grid-template-columns: 1fr; } }
@page { size: A4; margin: 14mm 15mm; }
@media print {
  html, body { background: #fff; font-size: 10pt; line-height: 1.35; }
  main.anleitung figure.nummern { max-width: 86%; }
  main.anleitung figure.schmal { max-width: 70%; }
  main.anleitung table { font-size: 9.5pt; }
  main.anleitung th, main.anleitung td { padding: 3px 6px; }
  main.anleitung h2 { margin: 12px 0 4px; padding-bottom: 2px; }
  main.anleitung p, main.anleitung li { margin: 2px 0; }
  .kopf, .fusszeile, main.rechtliches .fusslinks { display: none; }
  main.rechtliches { max-width: none; margin: 0; padding: 0; border: 0; }
  main.anleitung h1 { font-size: 17pt; }
  main.anleitung h2 { font-size: 12.5pt; margin-top: 12px; break-after: avoid; }
  main.anleitung figure, main.anleitung table, main.anleitung .wichtig { break-inside: avoid; }
  main.anleitung .nurdruck { display: block; }
  main.anleitung .nichtdruck { display: none; }
  main.anleitung a { color: inherit; text-decoration: none; }
}