/* Vertragsabschluss im Board (Punkt 133, 22.10.2026): Strecke „Vertrag
   vorbereiten“, Reiter „Vertrag“ in der Akte, öffentliche Unterschriftsseite.
   Farben und Grundformen kommen aus style.css (Variablen), hier nur Layout. */

.vt-schritte { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 18px; }
.vt-schritte .vt-schritt {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linie);
  color: var(--gedimmt); background: var(--flaeche);
}
.vt-schritte .vt-schritt.aktiv { color: var(--schrift); border-color: var(--akzent); }
.vt-schritte .vt-schritt.fertig { color: var(--gut); border-color: var(--gut); }
.vt-schritte .vt-schritt-nr { font-variant-numeric: tabular-nums; margin-right: 6px; opacity: .8; }

.vt-karte { margin-bottom: 14px; }
.vt-karte h3 { margin: 0 0 4px; }
.vt-zeile { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.vt-zeile > div { flex: 1 1 220px; }
.vt-zeile > button { flex: 0 0 auto; }
.vt-status { min-height: 1.2em; font-size: 12.5px; margin-top: 6px; }
.vt-chip-quelle { margin-left: 6px; vertical-align: middle; }
.vt-feld-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vt-feld-kopf label { margin: 12px 0 5px; }

.vt-unterzeichner { display: grid; gap: 8px; margin: 6px 0 4px; }
.vt-unterzeichner .vt-person {
  display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 8px; align-items: end;
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche2);
}
.vt-unterzeichner .vt-person label { margin: 0 0 4px; }
.vt-unterzeichner .vt-person input { background: var(--flaeche); }
.vt-unterzeichner .vt-person button { margin-bottom: 2px; }

.vt-summe {
  margin-top: 12px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; font-size: 13.5px;
  font-variant-numeric: tabular-nums; background: var(--flaeche2);
}
.vt-summe .vt-summe-fett { font-weight: 600; }
.vt-summe .vt-summe-rechts { text-align: right; white-space: nowrap; }

.vt-vorschau {
  width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--linie); border-radius: 10px;
  background: #fff;
}
.vt-vorschau.klein { height: 52vh; min-height: 320px; }
.vt-avv-text { min-height: 320px; font-family: Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; }
.vt-mono { font-family: Menlo, Consolas, monospace; font-size: 11.5px; word-break: break-all; }

.vt-vorgang-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.vt-vorgang-kopf h3 { margin: 0; }
.vt-vorgang-kopf .vt-vorgang-meta { color: var(--gedimmt); font-size: 12.5px; }
.vt-tabelle { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 13px; }
.vt-tabelle th, .vt-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.vt-tabelle th { color: var(--gedimmt); font-weight: 500; font-size: 12px; }
.vt-tabelle td.vt-aktion { text-align: right; white-space: nowrap; }
.vt-protokoll { font-size: 12.5px; color: var(--gedimmt); margin-top: 8px; }
.vt-protokoll li { margin: 2px 0; }
.vt-dialog { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--akzent); border-radius: 10px; }
.vt-haken { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 13.5px; }
.vt-haken input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.vt-haken.gesperrt { opacity: .55; }

/* Öffentliche Unterschriftsseite (Punkt 142): eine Website. Lesebreite mit Rand,
   das Dokument läuft im Fluss der Seite (kein iframe, kein eigener Scrollkasten),
   Überschriften klein, „Als PDF“ als kleiner Knopf. Die Seite ist immer hell. */
.us-seite { max-width: 760px; }
.us-kopf h1 { font-size: 22px; line-height: 1.25; margin: 6px 0 8px; }
.us-abschnitt { margin-top: 26px; }
.us-abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
                     border-bottom: 1px solid var(--linie); padding-bottom: 6px; margin-bottom: 12px; }
.us-abschnitt-kopf h2 { font-size: 17px; margin: 0; }
.us-abschnitt-kopf button, .us-abschnitt .us-anlage-auf { padding: 3px 10px; font-size: 12.5px; }
.us-dok { font-size: 16px; line-height: 1.6; }   /* einen Tick groesser (Carl 23.10.), vorher 14.5px */
.us-dok .seite { margin: 0 0 30px; }
.us-dok .kopf { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.us-dok .kopf svg, .us-dok .kopf img { height: 26px; width: auto; }
.us-dok h1 { font-size: 21px; line-height: 1.3; margin: 0 0 10px; }
.us-dok h2 { font-size: 17px; margin: 18px 0 6px; }
.us-dok h3 { font-size: 16px; margin: 14px 0 4px; }
.us-dok p { margin: 0 0 9px; }
.us-dok .absender { font-size: 12px; text-decoration: underline; color: var(--gedimmt); }
.us-dok .anschrift, .us-dok .partei { white-space: pre-line; }
.us-dok .datumzeile { display: flex; gap: 40px; font-size: 13px; margin: 0 0 12px; }
.us-dok .datumzeile span { display: block; }
.us-dok .vertrag { text-align: center; }   /* ganzer Vertrag zentriert wie die Parteien oben (Carl 23.10.), Angebot bleibt links */
.us-dok .vertrag ul, .us-dok .vertrag ol { list-style-position: inside; margin-left: 0; }
.us-dok .vertrag .felder { justify-content: center; }
.us-dok .us-mein-feld .us-werkzeug { text-align: left; }
.us-dok .rolle { font-weight: 600; }
.us-dok table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 6px 0 12px; }
.us-dok th, .us-dok td { border: 1px solid var(--linie); padding: 5px 7px; text-align: left; vertical-align: top; }
.us-dok th { background: var(--flaeche2); font-weight: 600; }
.us-dok td.z, .us-dok th.z { text-align: right; white-space: nowrap; }
.us-dok tr.summe td { font-weight: 600; }
.us-dok ul, .us-dok ol { margin: 0 0 10px 20px; padding: 0; }
.us-dok li { margin: 0 0 3px; }
.us-dok .hinweis { color: var(--gedimmt); font-size: 13px; }
.us-dok hr { border: 0; border-top: 1px solid var(--linie); margin: 18px 0; }
.us-dok .felder { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 12px; }
.us-dok .feld { flex: 1 1 42%; min-width: 220px; }
.us-dok .feld.us-mein-feld { flex: 1 1 100%; }
.us-dok .feld-box { min-height: 84px; border-bottom: 1px solid var(--schrift); display: flex; align-items: flex-end; }
.us-dok .feld-box img { max-height: 80px; max-width: 100%; display: block; }
.us-dok .feld-name { font-weight: 600; margin-top: 4px; }
.us-dok .feld-info { font-size: 13.5px; color: var(--gedimmt); }
.us-pflicht { color: var(--akzent); font-weight: 700; }
.us-unterschreiben .vt-haken { margin: 8px 0; }
.us-danke h3 { margin: 0 0 6px; }
/* Pfeil unten rechts zum naechsten offenen Punkt (Carl 23.10.) */
.us-pfeil { position: fixed; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; z-index: 40; }
.us-pfeil-text { font-size: 12.5px; padding: 6px 11px; border-radius: 999px; background: var(--flaeche);
                 border: 1px solid var(--linie); color: var(--schrift); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.us-pfeil-knopf { width: 48px; height: 48px; border-radius: 50%; padding: 0; font-size: 24px; line-height: 1;
                  box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.us-hervor { outline: 3px solid var(--akzent); outline-offset: 4px; border-radius: 8px; }

/* Unterschrift zeichnen oder tippen (Punkt 142). Schreibschrift Great Vibes (OFL), lokal. */
@font-face {
  font-family: "Great Vibes"; src: url("/assets/greatvibes-latin.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Great Vibes"; src: url("/assets/greatvibes-latin-ext.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.us-werkzeug { width: 100%; margin: 6px 0 4px; }
.us-werkzeug-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.us-werkzeug-tabs .us-tab { padding: 4px 12px; font-size: 13px; border-radius: 999px; border-color: var(--linie); }
.us-werkzeug-tabs .us-tab.aktiv { border-color: var(--akzent); color: var(--schrift); }
.us-zeichnen { position: relative; }
.us-canvas { display: block; width: 100%; max-width: 640px; background: var(--flaeche); border: 1px dashed var(--gedimmt);
             border-radius: 10px; cursor: crosshair; }
.us-canvas-hinweis { position: absolute; left: 12px; top: 10px; font-size: 12.5px; color: var(--gedimmt); pointer-events: none; }
.us-tippen input { max-width: 420px; }
.us-tippen-vorschau { font-family: "Great Vibes", "Apple Chancery", "Snell Roundhand", cursive; font-size: 46px; line-height: 1.2;
                      min-height: 64px; padding: 6px 10px 0; color: var(--schrift); white-space: nowrap; overflow: hidden; }
.us-tippen-vorschau.leer { color: var(--gedimmt); }
.us-werkzeug-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.us-hinterlegt { margin: 6px 0 10px; }
.us-hinterlegt-bild { max-height: 70px; max-width: 320px; display: block; background: #fff; border-radius: 8px;
                      padding: 6px 10px; border: 1px solid var(--linie); }

@media (max-width: 640px) {
  .vt-unterzeichner .vt-person { grid-template-columns: 1fr; }
  .vt-summe { grid-template-columns: 1fr auto; }
  .vt-vorschau { height: 60vh; }
  .us-dok .feld { flex: 1 1 100%; }
  .us-dok .datumzeile { gap: 20px; }
}
@media print { .vt-karte button, .us-seite button, .us-pfeil { display: none; } }

.klein-titel { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gedimmt); margin: 22px 0 0; }
#uebersicht-angebote-block .kartenliste { margin-top: 10px; }