/* VERTRAG 2.0: Liste und Akte. Nur Tokens; die Karten, Marken und Reiter kommen aus VIComponents. */
.vtr-akte { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* Eine Statuszeile: Stichtag, Sicht und der offene Stand. */
.vtr-sz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.vtr-sz-f { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--gray-500); }
.vtr-sz-f .form-input, .vtr-sz-f .form-select { width: auto; }
.vtr-sz-punkte { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-left: auto; font-size: var(--text-sm); color: var(--gray-500); }
.vtr-sz-fehlt { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.vtr-sz-p[data-z="konflikt"] { color: var(--color-danger, var(--gray-900)); font-weight: 600; }

.vtr-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-3); align-items: start; }
.vtr-karten--eine { grid-template-columns: minmax(0, 1fr); }

/* Eine Angabe: Bezeichnung, Wert mit Quelle, Zustand. Die Karte traegt die Flaeche. */
.vtr-zeile { display: grid; grid-template-columns: minmax(96px, 180px) minmax(160px, 1fr) minmax(0, auto); gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--gray-200); }
.vtr-zeile:first-child { border-top: 0; }
.vtr-zeile-k { font-size: var(--text-sm); color: var(--gray-500); overflow-wrap: break-word; }
.vtr-zeile-v { min-width: 0; font-size: var(--text-md); }
.vtr-wert { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); overflow-wrap: anywhere; }
.vtr-wert + .vtr-wert { margin-top: var(--space-1); }
.vtr-wert-t { font-weight: 500; font-variant-numeric: tabular-nums; }
.vtr-quelle { font-size: var(--text-xs); color: var(--gray-500); }
.vtr-marke { font-size: var(--text-xs); color: var(--gray-500); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.vtr-leer { color: var(--gray-500); font-size: var(--text-sm); }

.vtr-zeile-z { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.vtr-link { background: none; border: 0; padding: 0; color: var(--color-forest); font-size: var(--text-xs); cursor: pointer; text-decoration: underline; }
.vtr-dateien { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-2); }
.vtr-datei { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* Erfassen. `hidden` muss gegen das display der Knopfklassen gewinnen. */
.vi-dlg-foot [hidden] { display: none; }
.vtr-raster[hidden] { display: none; }
.vtr-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.vtr-f-breit { grid-column: 1 / -1; }
.vtr-formular { display: flex; flex-direction: column; gap: var(--space-3); }
.vtr-as-inhalt { padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.vtr-as-form { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--gray-200); }
.vtr-as-add { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vtr-bisher { font-size: var(--text-sm); color: var(--gray-500); overflow-wrap: anywhere; }
.vtr-bisher-k { font-weight: 600; }
.vtr-dr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; }
.vtr-dr-n { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); }
.vtr-dr .form-select { width: auto; }
.vtr-as-h { font-size: var(--text-md); font-weight: 600; margin: 0; }
.vtr-hist + .vtr-hist { padding-top: var(--space-3); }
.vtr-unterz { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; padding-top: var(--space-3); border-top: 1px solid var(--gray-200); }
.vtr-unterz .vtr-raster, .vtr-unterz > .vtr-f-breit { width: 100%; }
.vtr-frage { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-3); }
.vtr-opt { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--gray-300); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); }
.vtr-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }

@media (max-width: 767px) {
  .vtr-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .vtr-sz-punkte { margin-left: 0; }
}