/* ============================================
   vergleich.css – WerkUp Tarifvergleich
   Eigene Datei, weil die Tabelle sowohl auf /preise (preise.css) als
   auch auf den Branchenseiten (branche.css) gebraucht wird. So bleibt
   sie an einer Stelle gepflegt statt in beiden Stylesheets doppelt.
   Nutzt ausschließlich die bestehenden Tokens.
   ============================================ */

.vg {
  background: var(--bg-2, #eaedf0);
  padding: 7rem 0;
}

.vg-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}
.vg-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.vg-head p {
  font-size: 0.98rem;
  color: var(--muted, #5a6e78);
  line-height: 1.7;
}

/* Der Rahmen scrollt bei Bedarf seitlich – die Seite selbst nie. */
.vg-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border, rgba(19,35,42,0.09));
  border-radius: var(--radius, 1.25rem);
  box-shadow: var(--shadow-sm);
}

.vg-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  text-align: left;
}

/* ── Kopfzeile ──
   Bewusst schlank: nur Symbol und Tarifname. Preise, Einordnung und
   Handlungsaufforderung stehen auf den Tarifkarten oberhalb der Tabelle
   und werden hier nicht wiederholt. */
.vg-table thead th {
  background: var(--bg-dark, #13232a);
  padding: 1.6rem 1.25rem 1.4rem;
  vertical-align: bottom;
  text-align: center;
}
.vg-table thead th:first-child { text-align: left; border-top-left-radius: calc(var(--radius, 1.25rem) - 2px); }
.vg-table thead th:last-child  { border-top-right-radius: calc(var(--radius, 1.25rem) - 2px); }

/* Erste Spalte: statt leerer Fläche eine Beschriftung */
.vg-leer-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.42);
}

/* Die empfohlene Spalte bleibt markiert – über die Fläche, nicht über Text. */
.vg-th--feat {
  background: linear-gradient(180deg, #1b2c34 0%, #16252c 100%);
  /* Nur links, rechts und oben – ein umlaufender Rahmen zöge unten eine
     rote Linie quer und schnitte die Spalte vom Tabellenkörper ab. */
  box-shadow: inset  1.5px 0 0 rgba(202,0,19,0.5),
              inset -1.5px 0 0 rgba(202,0,19,0.5),
              inset  0 1.5px 0 rgba(202,0,19,0.5);
  border-radius: 14px 14px 0 0;
}

.vg-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 0.7rem;
  object-fit: contain;
}

.vg-plan {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

/* Die Spalte bleibt auch im Tabellenkörper markiert */
.vg-cell--feat { background: rgba(202,0,19,0.045); }

/* ── Gruppenzeilen ── */
.vg-gruppe th {
  background: var(--bg, #f4f6f7);
  padding: 1rem 1.5rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text, #13232a);
  letter-spacing: 0.01em;
  border-top: 1px solid var(--border, rgba(19,35,42,0.09));
  border-bottom: 1px solid var(--border, rgba(19,35,42,0.09));
}
.vg-gruppe-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 0.6rem;
  vertical-align: -0.45em;
  border-radius: 8px;
  background: var(--accent-dim, rgba(202,0,19,0.08));
  color: var(--accent, #ca0013);
  font-size: 0.72rem;
}

/* ── Funktionszeilen ── */
.vg-zeile {
  padding: 0.95rem 1.5rem;
  font-size: 0.89rem;
  font-weight: 500;
  color: var(--text-2, #2c4050);
  line-height: 1.45;
}
.vg-table tbody tr:not(.vg-gruppe) + tr:not(.vg-gruppe) th,
.vg-table tbody tr:not(.vg-gruppe) + tr:not(.vg-gruppe) td {
  border-top: 1px solid var(--border, rgba(19,35,42,0.09));
}

.vg-cell {
  padding: 0.95rem 1.25rem;
  text-align: center;
  vertical-align: middle;
}

.vg-ja   { color: #1f9d4d; font-size: 0.95rem; }
.vg-nein { color: rgba(19,35,42,0.22); font-size: 0.95rem; }
.vg-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-2, #2c4050);
}

/* Wisch-Hinweis: erscheint nur, wenn die Tabelle tatsächlich breiter ist
   als der Rahmen – also unterhalb der Umbruchbreite. */
.vg-hinweis {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--muted, #5a6e78);
}
.vg-hinweis i { color: var(--accent, #ca0013); font-size: 0.85rem; }

@media (max-width: 860px) {
  .vg-hinweis { display: flex; }
}

/* Nur für Screenreader */
.vg-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Erste Spalte beim Seitwärtsscrollen stehen lassen */
@media (max-width: 860px) {
  .vg-table thead th:first-child,
  .vg-zeile {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card, #fff);
  }
  .vg-table thead th:first-child { background: var(--bg-dark, #13232a); }
  .vg-gruppe th { position: sticky; left: 0; }
}

@media (max-width: 640px) {
  .vg { padding: 4.5rem 0; }
  .vg-table thead th { padding: 1.4rem 0.9rem; }
  .vg-plan-desc { display: none; }
  .vg-preis { font-size: 1.5rem; }
  .vg-zeile { padding: 0.85rem 1rem; font-size: 0.84rem; }
  .vg-cell  { padding: 0.85rem 0.75rem; }
  .vg-gruppe th { padding: 0.85rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-wrap { scroll-behavior: auto; }
}