/* Kundenportal P2b (A-1331, Release 430): Angebote vergleichen, digital unterschreiben.
   Farben nur aus app.css (Kontraste dort geprueft). Unterschiede: Zeichen + Wort, nie nur Farbe (WCAG 1.4.1). */

.vg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.vg-punkte { margin: 6px 0 0; padding-left: 20px; }
.vg-punkte li + li { margin-top: 2px; }
.vg-empf { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--akzent); margin: 0 0 4px 8px; vertical-align: 2px; }
p.vg-empf { margin: 0 0 4px; }
.vg-empf svg { width: 16px; height: 16px; }
.karte.vg-empfohlen { border: 2px solid var(--akzent); }

.vg-marke { display: inline-flex; align-items: center; gap: 4px; margin: 4px 6px 0 0; padding: 2px 8px; border-radius: 12px; font-size: .8rem; font-weight: 700; line-height: 1.4; }
.vg-marke svg { width: 14px; height: 14px; flex: none; }
.vg-marke.m-besser, .vg-marke.m-neu { background: var(--gut-hell); color: var(--gut); }
.vg-marke.m-schlechter, .vg-marke.m-entfaellt { background: var(--fehler-hell); color: var(--fehler); }
.vg-marke.m-gleich { background: var(--flaeche-2); color: var(--text-2); border: 1px solid var(--linie); }
.vg-marke.m-anders { background: var(--warn-hell); color: var(--warn); }
.vg-legende { margin-bottom: 10px; }
.vg-wert { display: block; overflow-wrap: anywhere; }

/* Rechner: echte Tabelle nebeneinander */
.vg-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
.vg-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; table-layout: fixed; }
.vg-tabelle th, .vg-tabelle td { padding: 10px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--linie); overflow-wrap: break-word; hyphens: auto; }
.vg-tabelle thead th { border-top: 0; font-size: 1rem; background: var(--flaeche-2); }
.vg-tabelle thead th.empfohlen { background: var(--akzent-hell); }
.vg-tabelle thead td:first-child, .vg-tabelle tbody th { width: 22%; font-weight: 600; }
.vg-tabelle tbody th small { display: block; font-weight: 400; color: var(--text-2); font-size: .8rem; margin-top: 2px; }
.vg-tabelle td.alt, .vg-tabelle th.alt { color: var(--text-2); }
.vg-tabelle thead .vg-empf { display: flex; margin: 4px 0 0; }

/* Handy: je Angebot eine Karte, darunter jeweils „Bisher“ */
.vg-karten { display: none; }
.vg-liste { margin: 8px 0 0; }
.vg-liste > div { padding: 10px 0; border-top: 1px solid var(--linie); }
.vg-liste dt { color: var(--text-2); font-size: .875rem; }
.vg-liste dd { margin: 2px 0 0; font-weight: 600; }
.vg-liste dd small { display: block; font-weight: 400; color: var(--text-2); font-size: .85rem; margin-top: 4px; }
@media (max-width: 719px) {
  .vg-tabelle-rahmen { display: none; }
  .vg-karten { display: block; }
}

/* „hidden“ schlaegt Anzeige-Regeln wie .feld { display: block } (sonst stuende das Namensfeld neben dem Zeichenfeld). */
#inhalt [hidden] { display: none !important; }

/* Unterschrift */
.unterschrift-feld { display: block; width: 100%; height: 180px; border: 2px dashed var(--linie-2); border-radius: var(--radius-k); background: #ffffff; touch-action: none; cursor: crosshair; margin: 4px 0 8px; }
.unterschrift-feld:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
@media (min-width: 720px) { .unterschrift-feld { height: 200px; } }