/* =========================
   VERGLEICHSTABELLE – STYLES
   ========================= */

/* Spaltenbreiten */
:root{
  --vt-cols: 2.35fr 1fr 1fr 1fr 1fr; /* Desktop: Feature | BW | VP | OV | AWD */
  --vtm-cols: 2fr 1fr 1fr;           /* Mobile:  Feature | BW | Andere     */
}

/* ===== äußere Hülle ===== */
.vergleichstabelle-section{
  margin: 70px auto 80px;
  width: min(1200px, 96vw);
  padding: 28px 22px 40px;
  border-radius: 24px;
  background: rgba(18,22,32,.94) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05) !important;
  border: 1px solid rgba(40,60,90,.55) !important;
}

/* ===== inneres Grid ===== */
.vergleichstabelle{
  width: 100%;
  display: grid;
  grid-template-columns: var(--vt-cols);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg,#0f1826 0%, #0c1420 100%) !important;
  border: 1px solid rgba(40,60,90,.55) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

/* Desktop standardmäßig sichtbar, Mobile ausgeblendet */
.vergleichstabelle.vt-desktop{ display: grid; }
.vergleichstabelle.vt-mobile{  display: none; }

/* kompatibles Sizing */
.vergleichstabelle, .vergleichstabelle *{ box-sizing: border-box; }

/* Header + Rows liefern nur Zellen */
.tabelle-header, .tabelle-row{ display: contents; }

/* ===== Zellen ===== */
.tabelle-leer, .tabelle-feature, .tabelle-col{
  padding: 18px 22px;
  border-bottom: 1px solid rgba(60,80,110,.55);
  font-family: 'Oswald', Arial, sans-serif;
}

/* ===== Header-Zeile ===== */
.tabelle-header .tabelle-leer,
.tabelle-header .tabelle-col{
  display: flex;
  align-items: center;
  min-height: 68px;
  background: linear-gradient(180deg,#0e233f 0%, #0b1a2c 100%) !important;
  border-bottom: 2.5px solid #05B9F2 !important;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
}

/* Linke Header-Zelle */
.tabelle-header .tabelle-leer{ justify-content: flex-start; }

/* BITWOLT Header – Baseline */
.bitwolt-head{ justify-content:center; }
.bitwolt-head .bitwolt-brand{ display:inline-flex; gap:.06em; line-height:1; align-items:baseline; }
.bitwolt-head .logo-blue{ color:#05B9F2; font-weight:700; }
.bitwolt-head .logo-yellow{ color:#B9DB1B; font-weight:700; }

/* ===== Feature-Spalte ===== */
.tabelle-feature{
  color:#fff;
  font-weight:700;
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  letter-spacing:.01em;
  line-height:1.25;
  position: relative; /* für Tooltips */
  z-index: 2;
}

/* ===== Normale Zellen ===== */
.tabelle-col{ text-align:center; color:#e6eef6; font-size: clamp(1rem, 2vw, 1.25rem); }

/* ===== Haken/Kreuz ===== */
.check, .cross{ display:inline-block; line-height:1; }
.check { color:#b9db1b; font-size:1.6em; text-shadow:none; }
.cross { color:#ff5353; font-size:1.4em; text-shadow:none; }
html[data-design="future"] .vergleichstabelle .check{
  text-shadow: 0 0 10px #afff5d, 0 0 22px #b9db1b, 0 0 36px rgba(185,219,27,.55);
}
html[data-design="future"] .vergleichstabelle .cross{
  text-shadow: 0 0 8px #ff9090, 0 0 18px #ff3b3b88, 0 0 30px rgba(255,83,83,.45);
}

/* ===== Bitwolt-Spalte als durchgehender Block ===== */
.vergleichstabelle .col-bw{
  position: relative;
  background: transparent !important;
  z-index: 0;
}
.vergleichstabelle .col-bw::before{
  content: "";
  position: absolute; inset: 0;
  background: rgba(5,185,242,.08);
  box-shadow: inset 0 0 0 1.5px rgba(5,185,242,.40);
  border-radius: 0;
  z-index: -1;
  pointer-events: none;
}
.tabelle-header .col-bw::before{ border-radius: 12px 12px 0 0; }
.tabelle-row:last-of-type .col-bw::before{ border-radius: 0 0 12px 12px; }
.tabelle-row .col-bw{ border-bottom-color: rgba(5,185,242,.18) !important; }
html[data-design="classic"] .vergleichstabelle .col-bw::before{
  background: rgba(5,185,242,.09) !important;
  box-shadow: inset 0 0 0 1.6px rgba(5,185,242,.44) !important;
}

/* =========================
   Tooltips auf Feature
   ========================= */
.tabelle-feature::after{
  content: attr(data-info);
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: min(56ch, 520px);
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(10,14,22,.98);
  border: 1px solid rgba(90,120,160,.55);
  color: #eaf2ff;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 50;
}
.tabelle-feature::before{
  content:"";
  position: absolute;
  left: 16px;
  bottom: calc(100% + 4px);
  border: 7px solid transparent;
  border-top-color: rgba(10,14,22,.98);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
  z-index: 50;
  filter: drop-shadow(0 1px 0 rgba(90,120,160,.55));
}
.tabelle-feature:hover::after,
.tabelle-feature:focus-visible::after,
.tabelle-feature:hover::before,
.tabelle-feature:focus-visible::before{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1024px){
  .tabelle-feature{ font-size: clamp(1rem, 2.1vw, 1.2rem); }
}

/* Mobile: 3 Spalten – Feature | Bitwolt | Andere */
@media (max-width: 700px){
  .vergleichstabelle-section{ padding: 20px 10px 28px; }

  .vergleichstabelle.vt-desktop{ display: none; }
  .vergleichstabelle.vt-mobile{
    display: grid;
    grid-template-columns: var(--vtm-cols);
  }

  .tabelle-col{ font-size: 1.05rem; }

  /* „Andere“ optisch wie normale Spalten (eigene Klasse für evtl. Feintuning) */
  .col-oth{ }
}