/* GwG-Bereich (C3) — Schublade und Verwaltungs-Ansicht.
 *
 * Eigene Datei aus demselben Grund wie `katalog.css` und `datenblatt.css`: an
 * `notarflow.css` arbeiten in dieser Welle mehrere Sessions gleichzeitig, und
 * eine Datei, die nur mir gehoert, ist beim Merge eine Zeile statt einer
 * Verhandlung. Farben und Abstaende kommen aus den Variablen von dort.
 */

/* Die Vorlage-Kennzeichnung. Sie steht oben, sie ist nicht wegklickbar, und sie
   sieht nicht aus wie eine Warnung, die man abstellt — sie ist eine Angabe
   ueber den Inhalt der Liste, solange die Risikoanalyse der Kanzlei fehlt. */
.gwg-vorlage {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--panel); border-left: 3px solid var(--warn);
  padding: 9px 11px; margin: 10px 0; border-radius: 3px;
  font-size: 11.5px; line-height: 1.5; color: var(--ink-soft);
}
.gwg-vorlage-marke {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--warn); padding-top: 1px;
}

.gwg-bilanz {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.gwg-bilanz-haupt { font-size: 12.5px; font-weight: 600; }
.gwg-bilanz[data-art="ok"] .gwg-bilanz-haupt { color: var(--ok); }
.gwg-bilanz[data-art="warn"] .gwg-bilanz-haupt { color: var(--warn); }
.gwg-bilanz-neben { font-size: 11px; color: var(--ink-soft); }
.gwg-bilanz-warn { font-size: 11px; color: var(--warn); font-weight: 600; }

.gwg-warnung {
  font-size: 11px; line-height: 1.5; color: var(--warn);
  margin: 4px 0 6px; padding-left: 9px; border-left: 2px solid var(--warn);
}

.gwg-punkt { border-bottom: 1px solid var(--line); }
.gwg-punkt-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  width: 100%; padding: 9px 0; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
.gwg-punkt-kopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.gwg-punkt-kopf .t { font-size: 12.5px; }
.gwg-punkt-kopf .s {
  display: block; color: var(--ink-soft); font-size: 11px; margin-top: 1px;
}
.gwg-punkt-kopf .st {
  flex: none; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 600;
}
.gwg-punkt[data-art="ok"] .st { color: var(--ok); }
.gwg-punkt[data-art="neutral"] .st { color: var(--blau-tief); }
.gwg-punkt[data-art="warn"] .st { color: var(--warn); }

/* Der Auffaelligkeits-Punkt sieht anders aus als ein Haken. Das ist kein
   Schmuck: er ist die einzige Zeile, an der § 43 GwG zur Sprache kommt, und er
   soll nicht wie die zwoelf daneben aussehen. */
.gwg-punkt[data-auffaelligkeit="true"] { background: var(--panel); }
.gwg-punkt[data-auffaelligkeit="true"] .gwg-punkt-kopf { padding-left: 8px; padding-right: 8px; }

.gwg-punkt-koerper { padding: 2px 0 12px; }
.gwg-text { font-size: 11.5px; line-height: 1.5; margin: 0 0 6px; color: var(--ink-soft); }
.gwg-grund {
  font-size: 11.5px; line-height: 1.5; margin: 0 0 6px;
  padding-left: 9px; border-left: 2px solid var(--line-stark); color: var(--ink);
}

.gwg-schalterreihe { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gwg-schalter {
  font: inherit; font-size: 11px; padding: 4px 10px; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-stark); border-radius: 3px;
}
.gwg-schalter:hover:not(:disabled) { background: var(--panel); }
.gwg-schalter[aria-pressed="true"] {
  background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600;
}
.gwg-schalter:disabled { cursor: default; }
.gwg-schalter:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.gwg-merkmal { align-items: center; }
.gwg-merkmal .gwg-schalter { flex: none; }

.gwg-nachweise { margin-top: 10px; }
.gwg-nachweise h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft); margin: 0 0 5px; font-weight: 600;
}
.gwg-nachweis {
  display: flex; gap: 7px; align-items: baseline; font-size: 11.5px;
  padding: 3px 0; cursor: pointer;
}
.gwg-nachweis input { margin: 0; flex: none; }

.gwg-fuss { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Verwaltungs-Ansicht */
.gwg-block {
  border: 1px solid var(--line); border-radius: 3px;
  padding: 10px 11px; margin-bottom: 10px;
}
.gwg-block-titel { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.gwg-wahl { margin-top: 6px; }
.gwg-kasten { flex-direction: row; align-items: center; gap: 8px; }
.gwg-kasten input { margin: 0; }

/* Druck: die Schalter sind auf Papier sinnlos, die Angaben nicht. C4 baut die
   eigentliche Druckansicht — diese vier Zeilen sorgen dafuer, dass ein
   Strg+P aus der Schublade heraus bis dahin nichts Falsches zeigt. */
@media print {
  .gwg-schalterreihe, .gwg-fuss .nf-knopfreihe, .gwg-nachweis input { display: none; }
  .gwg-punkt-koerper { display: block; }
}


/* --- Pflichtpruefung nach Checkliste: sekundaer, eingeklappt --------------- */
/* Die lange Liste (Bilanz · verstaerkte Sorgfalt § 15 · Pflichtpunkte) sitzt
   jetzt UNTER dem Automatik-Hero und ist standardmaessig zu. Der offene
   Kurzstand steht in der Zusammenfassung — die Ehrlichkeit bleibt sichtbar,
   ohne dass man aufklappen muss. */
.gwg-pflicht { margin: 6px 0 4px; border-top: 1px solid var(--line); }
.gwg-pflicht-kopf {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 2px; cursor: pointer; list-style: none;
}
.gwg-pflicht-kopf::-webkit-details-marker { display: none; }
.gwg-pflicht-kopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.gwg-pflicht-titel {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 13px; font-weight: 600;
}
.gwg-pflicht-stand { font-size: 11px; font-weight: 600; }
.gwg-pflicht-stand[data-art="ok"] { color: var(--ok); }
.gwg-pflicht-stand[data-art="warn"] { color: var(--warn); }
.gwg-pflicht-kopf::after {
  content: "▸"; margin-left: auto; color: var(--ink-soft); font-size: 11px;
  display: inline-block; transition: transform 150ms var(--ease);
}
.gwg-pflicht[open] .gwg-pflicht-kopf::after { transform: rotate(90deg); }
.gwg-pflicht-koerper { padding-top: 2px; }

/* --- GwG-Automatik: durchklickbarer Demo-Flow (BUILD 2 / Demo) ------------ */
/* Der Hero GANZ OBEN in der Schublade: als Karte hervorgehoben, damit der
   Demo-Durchlauf sofort ins Auge faellt und ohne Scrollen laeuft. */
.gwg-automatik {
  margin: 2px 0 14px; padding: 12px 13px;
  background: var(--panel); border: 1px solid var(--line-stark);
  border-radius: 10px;
}
.gwg-automatik .bereich-titel { padding-top: 2px; }
.gwg-automatik-knoepfe { flex-wrap: wrap; gap: .4rem; margin-top: .1rem; }
.gwg-automatik-ergebnis { margin-top: .75rem; }
/* Kompakte Schritt-fuer-Schritt-Uebersicht ueber den Knoepfen. */
.gwg-tutorial { margin: .5rem 0 .7rem; }
.gwg-tutorial-kopf { margin: 0 0 .5rem; }
.gwg-tutorial-liste { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.gwg-tutorial-liste li { font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }
.gwg-tutorial-titel { display: block; font-weight: 600; color: var(--ink); }
.gwg-tutorial-satz { display: block; }
/* Die ausfuehrliche Fuehrung, eingeklappt unter den Knoepfen. */
.gwg-tutorial-details { margin-top: .6rem; border-top: 1px solid rgba(0,0,0,.08); padding-top: .5rem; }
.gwg-tutorial-details-kopf {
  font-size: 11px; color: var(--blau-tief); cursor: pointer; list-style: none;
  font-weight: 600;
}
.gwg-tutorial-details-kopf::-webkit-details-marker { display: none; }
.gwg-tutorial-details-kopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.gwg-tutorial-details-kopf::before { content: "▸ "; display: inline; }
.gwg-tutorial-details[open] .gwg-tutorial-details-kopf::before { content: "▾ "; }
.gwg-tutorial-details .gwg-tutorial-liste { margin-top: .5rem; gap: .5rem; }
.gwg-demo-box { border: 1px solid rgba(0,0,0,.15); border-radius: 8px; padding: .6rem .75rem; margin-bottom: .6rem; }
.gwg-demo-box h4 { margin: 0 0 .4rem; }
.gwg-demo-feld { display: flex; flex-direction: column; padding: .25rem 0; border-bottom: 1px dotted rgba(0,0,0,.12); }
.gwg-demo-feld:last-child { border-bottom: none; }
.gwg-demo-feld .t { font-weight: 600; }
.gwg-demo-feld .s { font-size: .88em; opacity: .8; }
.gwg-goaml {
  max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem;
  background: rgba(0,0,0,.04); border-radius: 6px; padding: .5rem .6rem;
}
.gwg-zeit { display: flex; flex-direction: column; gap: .2rem; margin: .3rem 0; }
.gwg-zeit .gwg-zeit-haupt { font-weight: 600; }
.gwg-zeit .gwg-zeit-neben { font-size: .9em; opacity: .85; }
@media (prefers-color-scheme: dark) {
  .gwg-automatik { border-top-color: rgba(255,255,255,.14); }
  .gwg-demo-box { border-color: rgba(255,255,255,.18); }
  .gwg-demo-feld { border-bottom-color: rgba(255,255,255,.12); }
  .gwg-goaml { background: rgba(255,255,255,.07); }
}


/* --- Fokussierte GwG-Vollansicht (Wizard) + Erst-Login-Coachmarks ---------- */
/* Auf breiten Fenstern die Lesbreite begrenzen und zentrieren, damit die
   Unterseite ruhig bleibt statt ueber die ganze Breite zu laufen. */
body[data-gwg-fokus="true"] #gwgliste { max-width: 720px; margin: 0 auto; }

.gwg-fokus-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line-stark); border-radius: 999px;
  color: var(--blau-tief); font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; cursor: pointer; margin-bottom: 12px;
}
.gwg-fokus-zurueck:hover { border-color: var(--blau); background: var(--panel); }
.gwg-fokus-zurueck:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.gwg-fokus-zurueck--fuss { margin-top: 16px; margin-bottom: 0; }

.gwg-fokus-kopf { margin-bottom: 10px; }
.gwg-fokus-titel { font-size: 18px; margin: 0 0 4px; }
.gwg-abschluss .gwg-fokus-titel { font-size: 15px; }

.gwg-wizard { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.gwg-schritt {
  border: 1px solid var(--line-stark); border-radius: 12px; padding: 14px 16px;
  background: var(--paper);
}
.gwg-schritt-kopf { display: flex; align-items: flex-start; gap: 12px; }
.gwg-schritt-nr {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blau); color: #fff; font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
}
.gwg-schritt-text { display: flex; flex-direction: column; gap: 3px; }
.gwg-schritt-marke {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 14px; font-weight: 600;
}
.gwg-schritt-was { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.gwg-schritt-knopf { margin-top: 10px; }
.gwg-schritt-ergebnis:not(:empty) { margin-top: 10px; }

.gwg-abschluss {
  margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--line-stark);
}
.gwg-abschluss-stand { font-size: 13px; font-weight: 600; margin: 6px 0 12px; }
.gwg-abschluss-stand[data-art="ok"] { color: var(--ok); }
.gwg-abschluss-stand[data-art="warn"] { color: var(--warn); }

/* Coachmarks: kurze, schliessbare Einfuehrung beim ersten Landen. */
.gwg-tour {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(11, 34, 57, 0.45);
  display: grid; place-items: center; padding: 20px;
}
.gwg-tour-karte {
  position: relative; background: var(--paper); border-radius: 14px;
  padding: 22px 24px; max-width: 460px; width: 100%;
  box-shadow: 0 12px 40px rgba(11, 34, 57, 0.28);
}
.gwg-tour-titel { font-size: 17px; margin: 0 0 8px; }
.gwg-tour-text { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px; }
.gwg-tour-liste {
  margin: 0 0 6px; padding-left: 1.3rem;
  display: flex; flex-direction: column; gap: 8px;
}
.gwg-tour-liste li { font-size: 12.5px; line-height: 1.45; }
.gwg-tour-schritt { display: block; font-weight: 600; color: var(--ink); }
.gwg-tour-satz { display: block; color: var(--ink-soft); }
.gwg-tour-zu {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 2px 6px;
}
.gwg-tour-zu:hover { color: var(--ink); }
.gwg-tour .nf-knopfreihe { margin-top: 8px; }

@media (prefers-color-scheme: dark) {
  .gwg-schritt { border-color: rgba(255,255,255,.18); }
}


/* --- Erzeugte GwG-Dokumente (Blätter) je Schritt + Prüfbericht -------------
 * Jeder Schritt legt ein ansehbares, formatiert gesetztes Prüf-Dokument vor —
 * ein „Blatt", das aussieht wie ein Ausdruck aus der Akte. Es bleibt bewusst
 * Papier (weiss, dunkle Tinte) auch im dunklen Modus: ein Dokument liest sich
 * so, und Farbflaechen tragen hier nichts. */
.gwg-blatt {
  background: #fff; color: #17222f;
  border: 1px solid var(--line-stark); border-radius: 10px;
  padding: 18px 20px 16px; margin: 2px 0;
  box-shadow: 0 4px 18px rgba(11, 34, 57, 0.10);
  font-size: 12.5px; line-height: 1.55;
}
.gwg-blatt-marke {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #8a5a00; background: #fdf3d8;
  border: 1px solid #f0dfa6; border-radius: 999px; padding: 2px 9px; margin-bottom: 12px;
}
.gwg-blatt-kopf {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  border-bottom: 2px solid #17222f; padding-bottom: 8px; margin-bottom: 12px;
}
.gwg-blatt-haus-name {
  display: block; font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px; font-weight: 700; color: #17222f;
}
.gwg-blatt-haus-ort { display: block; font-size: 11px; color: #5b6875; margin-top: 1px; }
.gwg-blatt-meta { text-align: right; font-size: 11px; color: #5b6875; white-space: nowrap; }
.gwg-blatt-meta span { display: block; }
.gwg-blatt-titel {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 15px; margin: 0 0 2px; color: #17222f;
}
.gwg-blatt-unter { font-size: 11.5px; color: #5b6875; margin: 0 0 12px; }
.gwg-blatt-koerper { display: flex; flex-direction: column; }
.gwg-blatt-feld {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dotted #d7dee6;
}
.gwg-blatt-feld:last-child { border-bottom: none; }
.gwg-blatt-feld-label { flex: none; color: #5b6875; font-size: 11.5px; max-width: 45%; }
.gwg-blatt-feld-wert { text-align: right; }
.gwg-blatt-feld-haupt { display: block; font-weight: 600; color: #17222f; }
.gwg-blatt-feld-sub { display: block; font-size: 10.5px; color: #7a8794; margin-top: 1px; }
.gwg-blatt-satz { margin: 10px 0 0; font-size: 12px; }
.gwg-blatt-satz--mini { font-size: 11px; color: #5b6875; }
.gwg-blatt-satz--ok { color: #1E7A4B; font-weight: 600; }
.gwg-blatt-satz--warn { color: #C4381F; font-weight: 600; }
.gwg-blatt-abschnitt {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 12px; margin: 14px 0 4px; color: #17222f;
}
.gwg-blatt-block { border-top: 1px solid #e6ebf0; padding: 8px 0 2px; }
.gwg-blatt-block:first-of-type { border-top: none; }
.gwg-blatt-fuss {
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #e6ebf0;
  font-size: 10.5px; line-height: 1.5; color: #5b6875;
}
.gwg-blatt-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Das goAML-XML im Blatt behaelt die Papier-Tinte (die generische .gwg-goaml
   nutzt sonst die App-Farben, die auf Weiss zu blass sein koennen). */
.gwg-blatt .gwg-goaml {
  background: #f4f6f8; color: #17222f; border: 1px solid #e0e6ec;
}
@media (prefers-color-scheme: dark) {
  .gwg-blatt { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); }
}
@media print {
  .gwg-blatt-knopfreihe { display: none; }
  .gwg-blatt { box-shadow: none; border: none; }
}