/* WG Bausteine: Widget „vergleich“. Mehrfach nutzbar: Alle Selektoren hängen an der gedoppelten Klasse
   .wgb-vergleich.wgb-vergleich und nie an der ID der Sektion.
   Semantische Tabelle mit Spalten- und Zeilenköpfen. Die rechte, empfohlene Spalte steht in einer hellen Glaskarte mit
   Lime-Kante und Lime-Häkchen (die Karte liegt als eigenes Element hinter der Spalte, die Spaltenbreiten sind fest).
   Die linke Spalte ist gedämpft und zeigt graue Kreuze. Auf dem Handy wird jede Zeile zu einem Block. */
.wgb-vergleich.wgb-vergleich{isolation:isolate}
.wgb-vergleich.wgb-vergleich .v3-head h2{text-wrap:balance}
.wgb-vergleich.wgb-vergleich .v3-head--center{max-width:860px}
.wgb-vergleich.wgb-vergleich .v3-head--center .v3-lead{max-width:720px}

.wgb-vergleich.wgb-vergleich .vg-stage{position:relative;max-width:1000px;margin:56px 0 0}
.wgb-vergleich.wgb-vergleich.vg-center .vg-stage{margin-left:auto;margin-right:auto}
.wgb-vergleich.wgb-vergleich .v3-wrap>.vg-stage:first-child{margin-top:0}
.wgb-vergleich.wgb-vergleich .vg-card{position:absolute;top:0;bottom:0;left:61%;right:0;z-index:0;display:block;border-radius:var(--radius);background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(194,242,28,.95),0 0 0 6px rgba(194,242,28,.1),0 24px 60px rgba(20,20,20,.08),0 0 56px rgba(194,242,28,.2);pointer-events:none}

/* ---------- Tabelle ---------- */
.wgb-vergleich.wgb-vergleich .vg-table{position:relative;z-index:1;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;margin:0;padding:0;border:0;background:transparent;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:var(--ink-2)}
.wgb-vergleich.wgb-vergleich .vg-col-m{width:26%}
.wgb-vergleich.wgb-vergleich .vg-col-a{width:35%}
.wgb-vergleich.wgb-vergleich .vg-col-b{width:39%}
.wgb-vergleich.wgb-vergleich .vg-table :is(thead,tbody,tr){margin:0;padding:0;border:0;background:transparent}
.wgb-vergleich.wgb-vergleich .vg-table :where(th,td){margin:0;padding:22px 24px;border:0;background:transparent;vertical-align:top;text-align:left;font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.wgb-vergleich.wgb-vergleich .vg-table :is(th,td):first-child{padding-left:0}

/* Kopfzeile: links gedämpft, rechts mit Etikett */
.wgb-vergleich.wgb-vergleich .vg-table thead :is(th,td){padding-top:30px;padding-bottom:20px;vertical-align:bottom}
.wgb-vergleich.wgb-vergleich .vg-th-text{display:block;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.wgb-vergleich.wgb-vergleich .vg-th--a .vg-th-text{font-weight:700;color:var(--muted)}
.wgb-vergleich.wgb-vergleich .vg-tag{display:inline-flex;align-items:center;margin:0 0 12px;padding:7px 11px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 0 18px rgba(194,242,28,.35)}

/* Zeilen: feine Linien, in der Karte eingerückt */
.wgb-vergleich.wgb-vergleich .vg-table tbody :is(th,td){border-top:1px solid var(--line-2)}
.wgb-vergleich.wgb-vergleich .vg-table tbody td.vg-b{border-top:0;background-image:linear-gradient(var(--line-2),var(--line-2));background-size:calc(100% - 48px) 1px;background-position:24px 0;background-repeat:no-repeat}
.wgb-vergleich.wgb-vergleich .vg-table tbody tr:last-child>*{padding-bottom:28px}
.wgb-vergleich.wgb-vergleich .vg-feat{font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.wgb-vergleich.wgb-vergleich .vg-val{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:start}
.wgb-vergleich.wgb-vergleich .vg-text{min-width:0;text-wrap:pretty}
.wgb-vergleich.wgb-vergleich .vg-a{color:var(--muted)}
.wgb-vergleich.wgb-vergleich .vg-b{font-weight:500;color:var(--ink)}
.wgb-vergleich.wgb-vergleich .vg-mark{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%}
.wgb-vergleich.wgb-vergleich .vg-mark .v3-ico{width:11px;height:11px;stroke-width:2.6}
.wgb-vergleich.wgb-vergleich .vg-mark--x{background:rgba(20,20,20,.05);color:#5C6355;box-shadow:inset 0 0 0 1px rgba(20,20,20,.1)}
.wgb-vergleich.wgb-vergleich .vg-mark--x .v3-ico{stroke-width:2.2}
.wgb-vergleich.wgb-vergleich .vg-mark--ok{background:var(--lime);color:var(--lime-ink);box-shadow:0 0 0 1px rgba(20,23,12,.08) inset,0 0 12px var(--glow)}
/* Spaltennamen je Zelle erscheinen nur auf dem Handy, dort fehlt die Kopfzeile */
.wgb-vergleich.wgb-vergleich .vg-lbl{display:none}

/* Leere Zeile nur im Editor */
.wgb-vergleich.wgb-vergleich .vg-leer{font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:11px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* ---------- Tablet: engere Zellen ---------- */
@media (max-width:959px){
  .wgb-vergleich.wgb-vergleich .vg-table :is(th,td){padding:18px 18px}
  .wgb-vergleich.wgb-vergleich .vg-table thead :is(th,td){padding-top:26px;padding-bottom:16px}
  .wgb-vergleich.wgb-vergleich .vg-table tbody td.vg-b{background-size:calc(100% - 36px) 1px;background-position:18px 0}
  .wgb-vergleich.wgb-vergleich .vg-table tbody tr:last-child>*{padding-bottom:22px}
  .wgb-vergleich.wgb-vergleich .vg-col-m{width:24%}
  .wgb-vergleich.wgb-vergleich .vg-col-a{width:36%}
  .wgb-vergleich.wgb-vergleich .vg-col-b{width:40%}
  .wgb-vergleich.wgb-vergleich .vg-card{left:60%}
  .wgb-vergleich.wgb-vergleich .vg-th-text{font-size:17px}
  .wgb-vergleich.wgb-vergleich .vg-feat{font-size:16px}
  .wgb-vergleich.wgb-vergleich .vg-table{font-size:15px}
}

/* ---------- Handy: jede Zeile ein Block, Merkmal oben, darunter links und rechts ---------- */
@media (max-width:719px){
  .wgb-vergleich.wgb-vergleich .vg-stage{margin-top:36px}
  .wgb-vergleich.wgb-vergleich .vg-card{display:none}
  .wgb-vergleich.wgb-vergleich .vg-table,
  .wgb-vergleich.wgb-vergleich .vg-table :is(tbody,tr,th,td){display:block;width:auto}
  .wgb-vergleich.wgb-vergleich .vg-table colgroup{display:none}
  /* Kopfzeile nur für Screenreader: die Spaltennamen stehen sichtbar in jeder Zelle */
  .wgb-vergleich.wgb-vergleich .vg-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .wgb-vergleich.wgb-vergleich .vg-table tbody tr{padding:20px 0 22px;border-top:1px solid var(--line-2)}
  .wgb-vergleich.wgb-vergleich .vg-table tbody :is(th,td),
  .wgb-vergleich.wgb-vergleich .vg-table tbody tr:last-child>*{padding:0;border-top:0;background-image:none}
  .wgb-vergleich.wgb-vergleich .vg-feat{margin:0 0 12px;font-size:17px}
  .wgb-vergleich.wgb-vergleich .vg-table tbody td.vg-a{margin:0 0 12px}
  .wgb-vergleich.wgb-vergleich .vg-table tbody td.vg-b{padding:13px 15px 14px;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(194,242,28,.95),0 0 0 5px rgba(194,242,28,.1),0 10px 28px rgba(20,20,20,.06)}
  .wgb-vergleich.wgb-vergleich .vg-lbl{display:block;margin:0 0 7px;font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .wgb-vergleich.wgb-vergleich .vg-b .vg-lbl{color:var(--lime-text)}
  .wgb-vergleich.wgb-vergleich .vg-table tbody td:empty{display:none}
  .wgb-vergleich.wgb-vergleich .vg-table{font-size:15.5px}
}