/* Geschäftskonto-Vergleich — component styles (firma.de design language)
   Transposed comparison table: banks are COLUMNS, attributes are ROWS
   (firma.de's own pricing-table convention). Ubuntu, brand purple #6b35ff/#8a4fff,
   yellow primary CTA #f1c40f, ink #0b0c0c. Page-scoped under .gv. */

.gv {
  --gv-purple: #6b35ff;
  --gv-purple-2: #8a4fff;
  --gv-purple-tint: #f4f1ff;
  --gv-yellow: #f1c40f;
  --gv-ink: #0b0c0c;
  --gv-gray: #636363;
  --gv-bg: #f7f7f8;
  --gv-line: #ececec;
  --gv-white: #fff;
  font-family: Ubuntu, sans-serif;
  color: var(--gv-ink);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 96px;
  box-sizing: border-box;
}
.gv *, .gv *::before, .gv *::after { box-sizing: border-box; }

/* ---------- Calculator ---------- */
.gv-calculator {
  background: var(--gv-bg);
  border: 1px solid var(--gv-line);
  border-radius: 10px;
  padding: 28px 28px 20px;
  margin: 16px 0 40px;
}
.gv-calculator::before {
  content: "Kostenrechner";
  display: block;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--gv-purple);
  margin-bottom: 18px;
}
#gv-calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 20px;
}
#gv-calc label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gv-ink); }
#gv-calc input[type="number"],
#gv-calc input[type="text"],
#gv-calc select {
  font-family: Ubuntu, sans-serif; font-size: 15px; font-weight: 400;
  padding: 10px 12px; border: 1px solid #d7d7dd; border-radius: 6px;
  background: var(--gv-white); color: var(--gv-ink);
  transition: border-color .15s, box-shadow .15s;
}
#gv-calc input:focus, #gv-calc select:focus {
  outline: none; border-color: var(--gv-purple);
  box-shadow: 0 0 0 3px rgba(107, 53, 255, .14);
}
#gv-calc label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 10px; align-self: end; padding-bottom: 10px; }
#gv-calc input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gv-purple); }

/* "Kosten berechnen" — the calculator's explicit action. Purple (tool action), so the
   yellow buttons stay reserved for the affiliate CTAs. */
.gv-calc__submit {
  /* Flows into the free cells at the end of the last form row and hugs the right
     edge, bottom-aligned with the input boxes (classic submit position). */
  grid-column-end: -1;
  justify-self: end;
  align-self: end;
  font-family: Ubuntu, sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: .53px; line-height: 16px; text-transform: uppercase;
  color: var(--gv-white); background: var(--gv-purple);
  border: 2px solid var(--gv-purple); border-radius: 2px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(49, 49, 93, .11);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gv-calc__submit:hover {
  background: var(--gv-purple-2); border-color: var(--gv-purple-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 20px 0 rgba(49, 49, 93, .16);
}
@media (max-width: 768px) {
  .gv-calc__submit { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
}

/* Result strip: filled by vergleich.js when "Kosten berechnen" is clicked (plus once on
   load with the defaults). Editing an input marks it stale until the next click. */
.gv-calc-result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 18px; padding: 12px 14px;
  background: var(--gv-purple-tint);
  border-radius: 8px;
  font-size: 14px;
}
.gv-calc-result[hidden] { display: none; }
.gv-calc-result__label { font-weight: 700; color: var(--gv-ink); }
.gv-calc-result__chip {
  background: var(--gv-white);
  border: 1px solid var(--gv-line);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.gv-calc-result__chip strong { color: var(--gv-purple); }
.gv-calc-result__hint { flex-basis: 100%; font-size: 12px; color: var(--gv-gray); }
/* Inputs edited since the last calculation: dim the result + say what to do */
.gv-calc-result--stale .gv-calc-result__chip { opacity: .45; }
.gv-calc-result--stale .gv-calc-result__label::after {
  content: " Eingaben geändert, bitte neu berechnen.";
  font-weight: 400; color: var(--gv-gray);
}

/* Pulse on the estimate cells/tiles when the calculator changes their value */
@keyframes gv-flash {
  from { background-color: #dcc9ff; }
  to { background-color: transparent; }
}
.gv-flash { animation: gv-flash .9s ease-out; border-radius: 4px; }

/* ---------- Controls / filter ---------- */
.gv-controls { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

/* Criteria filter panel (build-rendered from columns.json, wired in vergleich.js). */
#gv-filterpanel { flex: 1 1 auto; min-width: 0; }
.gv-fp__summary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: Ubuntu, sans-serif; font-size: 15px; font-weight: 500;
  color: var(--gv-ink); background: var(--gv-white);
  border: 1px solid #d7d7dd; border-radius: 999px;
  padding: 10px 18px 10px 38px; cursor: pointer; list-style: none; user-select: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23636363' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18M7 12h10M10 19h4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center;
}
.gv-fp__summary::-webkit-details-marker { display: none; }
.gv-fp[open] .gv-fp__summary { border-color: var(--gv-purple); color: var(--gv-purple); }
.gv-fp__badge {
  background: var(--gv-purple); color: var(--gv-white);
  font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: 999px; padding: 4px 7px;
}
.gv-fp__body {
  margin-top: 10px; padding: 16px 18px;
  background: var(--gv-white); border: 1px solid var(--gv-line); border-radius: 8px;
}
.gv-fp__groups { display: flex; flex-wrap: wrap; gap: 8px 36px; }
.gv-fp__group { border: 0; margin: 0; padding: 0; min-width: 150px; }
.gv-fp__group legend {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gv-gray); padding: 0; margin-bottom: 6px;
}
.gv-fp__opt {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 20px; color: var(--gv-ink); padding: 3px 0; cursor: pointer;
}
.gv-fp__opt input { accent-color: var(--gv-purple); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.gv-fp__foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gv-line);
}
.gv-fp__legalform { font-size: 14px; color: var(--gv-ink); display: inline-flex; align-items: center; gap: 8px; }
.gv-fp__legalform select {
  font-family: Ubuntu, sans-serif; font-size: 14px; padding: 6px 10px;
  border: 1px solid #d7d7dd; border-radius: 6px; background: var(--gv-white);
}
.gv-fp__count { font-size: 14px; font-weight: 700; color: var(--gv-purple); }
.gv-fp__reset {
  font-family: Ubuntu, sans-serif; font-size: 13px; color: var(--gv-gray);
  background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0;
  margin-left: auto;
}
.gv-fp__reset:hover { color: var(--gv-ink); }
.gv-fp__empty {
  margin: 0 0 12px; padding: 12px 16px; font-size: 14px; color: var(--gv-ink);
  background: var(--gv-purple-tint); border-radius: 8px;
}
.gv-fp__empty .gv-fp__reset { margin-left: 6px; }
#gv-filter {
  font-family: Ubuntu, sans-serif; font-size: 15px;
  padding: 10px 14px 10px 38px;
  border: 1px solid #d7d7dd; border-radius: 999px; min-width: 260px;
  background: var(--gv-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23636363' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;
}
#gv-filter:focus { outline: none; border-color: var(--gv-purple); box-shadow: 0 0 0 3px rgba(107, 53, 255, .14); }

/* ---------- Transposed table (banks = columns, attributes = rows) ---------- */
.gv-scroll {
  overflow-x: auto;
  border: 1px solid var(--gv-line);
  border-radius: 10px;
  background: var(--gv-white);
  -webkit-overflow-scrolling: touch;
}
.gv-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--gv-white);
  font-size: 14px;
}

/* Provider header row. Pinned to the viewport top on PAGE scroll by vergleich.js
   (translateY scrub) — pure sticky can't escape .gv-scroll's overflow-x scroll container.
   The inert sticky top:0 keeps the cells positioned (z-index) and is the no-JS fallback. */
.gv-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--gv-white);
  border-bottom: 2px solid var(--gv-purple-2);
}
.gv-table th.gv-provider {
  min-width: 122px;
  padding: 16px 12px;
  font-size: 15px; font-weight: 700; text-align: center;
  color: var(--gv-ink); white-space: nowrap;
}
.gv-provider__logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 108px;
  margin: 0 auto;
  object-fit: contain;
}
/* Logo-only header: the bank name is the logo's own wordmark, so the text label is hidden —
   but only when a logo actually covers it (--covered, set by renderHead); providers without
   a LOGO entry keep their visible name. The hidden span stays in the DOM (display:none still
   counts toward th.textContent) so the "Anbieter filtern" search keeps matching by name;
   the img alt covers screen-reader accessibility. */
.gv-provider__name--covered { display: none; }

/* Attribute label column (sticky left) */
.gv-table th.gv-attr,
.gv-table th.gv-corner {
  position: sticky; left: 0; z-index: 1;
  background: var(--gv-white);
  box-shadow: 6px 0 8px -6px rgba(11, 12, 12, .14);
}
.gv-table th.gv-corner { z-index: 3; min-width: 190px; }
.gv-table th.gv-attr {
  min-width: 190px; max-width: 240px;
  text-align: left; font-weight: 600; font-size: 13px;
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--gv-ink);
  padding: 15px 34px 15px 18px; /* right pad reserves room for the pinned sort arrow */
  border-bottom: 1px solid var(--gv-line);
  vertical-align: middle;
}

/* Body cells */
.gv-table tbody td {
  padding: 13px 12px;
  text-align: center; vertical-align: middle;
  color: var(--gv-ink);
  border-bottom: 1px solid var(--gv-line);
}
.gv-table tbody tr:last-child td,
.gv-table tbody tr:last-child th { border-bottom: 0; }

/* Yes/No cells rendered as a green ✓ / red ✕ circle (with an optional qualifier beneath).
   The yes/no word itself is visually hidden (.gv-sr) so it still reaches screen readers and
   the column-sort (which reads td.textContent). */
.gv-bool-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.3; }
.gv-bool { width: 20px; height: 20px; display: block; }
.gv-bool--yes circle { fill: #1f9d57; }
.gv-bool--no circle  { fill: #d8483f; }
.gv-bool--partial circle { fill: #e0a417; }
.gv-note { font-size: 12px; color: var(--gv-gray); max-width: 160px; }
.gv-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* App-rating cells (finanzfluss-style): platform glyph over the score "4,7 / 5", with the
   rating count as a small note beneath. Score stays first in the DOM so column-sort still
   parses the leading star value off td.textContent. */
.gv-rating { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.2; }
.gv-rating__icon { width: 22px; height: 22px; display: block; fill: var(--gv-ink); }
.gv-rating__score { font-size: 15px; font-weight: 700; color: var(--gv-ink); white-space: nowrap; }
.gv-rating__meta { font-size: 11px; color: var(--gv-gray); max-width: 130px; }
.gv-rating--empty .gv-rating__icon { fill: #c7c7cd; }
.gv-rating--empty .gv-rating__score { color: var(--gv-gray); font-weight: 600; }

/* Row hover (highlights the attribute across all banks) */
.gv-table tbody tr:hover td,
.gv-table tbody tr:hover th.gv-attr { background: var(--gv-purple-tint); }

/* Sortable attribute labels — click to re-order the bank columns.
   The sort glyph is pinned to the right edge (absolute, vs the sticky cell) so it never
   crowds or orphans off the label text; it reads as a tidy vertical rail of sort controls. */
.gv-table th.gv-attr[data-sort-key] { cursor: pointer; user-select: none; transition: color .12s; }
.gv-table th.gv-attr[data-sort-key]:hover { color: var(--gv-purple); }
.gv-table th.gv-attr[data-sort-key]::after {
  content: "↕";
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-size: 11px; line-height: 1; color: var(--gv-gray); opacity: .55;
  transition: color .12s, opacity .12s;
}
.gv-table th.gv-attr[data-sort-key]:hover::after { color: var(--gv-purple); opacity: 1; }
.gv-table th.gv-attr[data-dir="asc"]::after  { content: "↑"; color: var(--gv-purple); opacity: 1; }
.gv-table th.gv-attr[data-dir="desc"]::after { content: "↓"; color: var(--gv-purple); opacity: 1; }

/* Estimated-cost row highlight */
.gv-table tr[data-col="gv-estimate"] td { font-weight: 700; color: var(--gv-purple); background: var(--gv-purple-tint); white-space: nowrap; }
.gv-table tr[data-col="gv-estimate"] th.gv-attr { color: var(--gv-purple); background: var(--gv-purple-tint); }

/* CTA row — buttons mirror firma .button-primary (yellow) */
.gv-table tr.gv-cta-row td { padding: 16px 12px; }
/* Frozen CTA footer: pinned to the viewport bottom on PAGE scroll by vergleich.js
   (translateY scrub, same reason as the header). Opaque bg + z-index make the row paint
   cleanly over the body cells it slides across; the sticky bottom:0 itself is inert. */
.gv-table tr.gv-cta-row td,
.gv-table tr.gv-cta-row th.gv-attr {
  position: sticky;
  bottom: 0;
  z-index: 2; /* above body cells */
  background: var(--gv-white); /* opaque so scrolling rows don't show through */
  border-top: 2px solid var(--gv-purple-2);
}
.gv-table tr.gv-cta-row th.gv-attr {
  z-index: 4; /* bottom-left corner: above both the footer cells and the left column */
}
.gv-cta__btn {
  display: inline-block;
  font-family: Ubuntu, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .53px; line-height: 16px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  color: var(--gv-ink); background: var(--gv-yellow);
  border: 2px solid var(--gv-yellow); border-radius: 2px;
  padding: 11px 14px;
  box-shadow: 0 8px 16px 0 rgba(49, 49, 93, .11);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gv-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 20px 0 rgba(49, 49, 93, .16); }

/* ---------- Mobile cards (finanzfluss-style) ----------
   Under 768px the transposed table is swapped for one compact card per bank: rank + name,
   logo/price tiles, CTA, key-fact tiles, and a "Produktdetails" accordion with the
   remaining attributes as a 2-column list. Rendered at build time by build-vergleich. */
.gv-cards { display: none; }

@media (max-width: 768px) {
  .gv-scroll { display: none; }
  .gv-cards { display: flex; flex-direction: column; gap: 18px; }
  .gv-card {
    border: 1px solid var(--gv-line);
    border-radius: 12px;
    background: var(--gv-white);
    padding: 16px 14px 12px;
    box-shadow: 0 2px 10px rgba(11, 12, 12, .05);
  }
  .gv-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .gv-card__rank {
    min-width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gv-purple-tint); color: var(--gv-purple);
    font-weight: 700; font-size: 14px; border-radius: 6px;
  }
  .gv-card__name { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.2; }
  .gv-card__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
  .gv-card__tile {
    border: 1px solid var(--gv-line);
    border-radius: 10px;
    padding: 12px 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; min-height: 78px;
  }
  .gv-card__tile-label { font-size: 12px; font-weight: 700; color: var(--gv-gray); line-height: 1.3; }
  .gv-card__tile-value { font-size: 16px; font-weight: 700; line-height: 1.3; }
  .gv-card__tile-value .gv-note { font-weight: 400; }
  .gv-card__logo { max-height: 34px; max-width: 128px; object-fit: contain; }
  .gv-card__tile-value[data-col="gv-estimate"] { color: var(--gv-purple); }
  .gv-card__cta { display: block; text-align: center; margin: 2px 0 12px; }
  .gv-card__details { border-top: 1px solid var(--gv-line); margin-top: 4px; padding-top: 12px; }
  .gv-card__details summary {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 700; color: var(--gv-ink);
    padding-bottom: 4px;
  }
  .gv-card__details summary::-webkit-details-marker { display: none; }
  .gv-card__details summary::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid var(--gv-gray); border-bottom: 2px solid var(--gv-gray);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
  }
  .gv-card__details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
  .gv-card__table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
  .gv-card__table th {
    text-align: left; font-weight: 600; color: var(--gv-ink);
    padding: 9px 10px 9px 0; width: 46%; vertical-align: middle;
    border-bottom: 1px solid var(--gv-line);
  }
  .gv-card__table td {
    text-align: right; vertical-align: middle;
    padding: 9px 0;
    border-bottom: 1px solid var(--gv-line);
  }
  .gv-card__table tr:last-child th,
  .gv-card__table tr:last-child td { border-bottom: 0; }
  .gv-card__table .gv-bool-cell { align-items: flex-end; }
  .gv-card__table .gv-rating { align-items: flex-end; }
}

/* ---------- Disclaimers ---------- */
.gv-disclaimer { font-size: 12px; line-height: 1.55; color: var(--gv-gray); margin: 14px 0 0; max-width: 960px; }
.gv-disclaimer--einlagensicherung {
  background: var(--gv-bg); border-left: 3px solid var(--gv-purple-2);
  border-radius: 0 6px 6px 0; padding: 12px 16px; margin-top: 16px;
}

/* ---------- Top 3 im Detail (editorial cards under the comparison) ---------- */
.gv-top3 { max-width: 960px; margin: 72px auto 0; }
.gv-top3 > h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin: 0 0 20px; line-height: 1.2; }
.gv-top3__item {
  border: 1px solid var(--gv-line);
  border-radius: 12px;
  background: var(--gv-white);
  padding: 24px 24px 20px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(11, 12, 12, .05);
}
.gv-top3__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gv-top3__logo { height: 32px; max-width: 140px; object-fit: contain; }
.gv-top3__badge {
  background: var(--gv-purple-tint); color: var(--gv-purple);
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.gv-top3__name { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.gv-top3__facts { font-size: 13px; color: var(--gv-gray); margin: 0 0 12px; }
.gv-top3__facts strong { color: var(--gv-ink); font-weight: 600; }
.gv-top3__item p { font-size: 15px; line-height: 1.65; color: #333; margin: 0 0 12px; }
.gv-top3__points { list-style: none; padding: 0; margin: 0 0 16px; }
.gv-top3__points li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; margin: 6px 0; }
.gv-top3__points .gv-bool { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.gv-top3__cta { display: inline-block; }
@media (max-width: 768px) {
  .gv-top3__item { padding: 18px 14px 14px; }
  .gv-top3__head { flex-wrap: wrap; }
  .gv-top3__cta { display: block; text-align: center; }
}

/* ---------- "Auf einen Blick" summary (after table + Top-3) ---------- */
.gv-kurzfazit {
  max-width: 840px;
  margin: 56px auto 0;
  padding: 28px 30px;
  border: 1px solid var(--gv-line);
  border-left: 4px solid var(--gv-purple);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--gv-purple-tint), var(--gv-white) 65%);
}
.gv-kurzfazit__title { font-size: clamp(20px, 2.6vw, 25px); font-weight: 700; margin: 0 0 12px; line-height: 1.2; }
.gv-kurzfazit__lead { font-size: 16px; line-height: 1.7; color: #333; margin: 0 0 16px; }
.gv-kurzfazit__lead strong { color: var(--gv-ink); font-weight: 700; }
.gv-kurzfazit__stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.gv-kurzfazit__stats li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: #333; }
.gv-kurzfazit__stats li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--gv-purple); }
.gv-kurzfazit__stats strong { color: var(--gv-ink); font-weight: 700; }
@media (max-width: 560px) {
  .gv-kurzfazit { padding: 22px 18px; }
  .gv-kurzfazit__stats { grid-template-columns: 1fr; }
}

/* ---------- Long-form content ---------- */
.gv-content { max-width: 840px; margin: 72px auto 0; }
.gv-content h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin: 48px 0 14px; line-height: 1.2; }
.gv-content h3 { font-size: 19px; font-weight: 700; margin: 28px 0 10px; color: #2a2a2a; }
.gv-content p, .gv-content li { font-size: 16px; line-height: 1.75; color: #333; }
.gv-content ul { padding-left: 22px; }
.gv-content li { margin: 8px 0; }
.gv-content a { color: var(--gv-purple); text-decoration: underline; text-underline-offset: 2px; }
.gv-content table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.gv-content th { text-align: left; background: var(--gv-bg); font-weight: 700; }
.gv-content th, .gv-content td { padding: 10px 12px; border: 1px solid var(--gv-line); vertical-align: top; }
.gv-content ol { padding-left: 22px; }
.gv-content ol li { margin: 10px 0; }

/* ---------- FAQ spacing (faq--details styled globally) ---------- */
.gv-faq { max-width: 840px; margin: 64px auto 0; }
.gv-faq > h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin-bottom: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .gv { padding: 0 14px 64px; }
  #gv-calc { grid-template-columns: 1fr 1fr; }
  #gv-filter { min-width: 0; width: 100%; }
  .gv-controls { justify-content: stretch; }
  #gv-filterpanel { flex-basis: 100%; }
  .gv-fp__groups { gap: 4px 24px; }
  .gv-table th.gv-attr, .gv-table th.gv-corner { min-width: 150px; }
}
@media (max-width: 460px) {
  #gv-calc { grid-template-columns: 1fr; }
}

/* ---------- Hero Testsieger banner (replaces the old animated stage scene) ----------
   Injected by build-vergleich into #gv-testsieger from testsieger.json. Sits absolutely
   in the hero's right half (the CDN styles .hero as position:relative); at 1120px, the
   same breakpoint where the CDN hides .stage/.stars, it reflows into a compact static
   strip below the hero copy. The hero lives OUTSIDE main.gv, so the --gv-* tokens are
   re-declared here for the reused .gv-cta__btn / .gv-bool styles. */
/* Widen the hero content column to the nav width (nav-wrapper = 1180px) so the copy
   sits further left and the Testsieger banner further right: a clear middle gap. */
@media (min-width: 1121px) {
  .hero .content { max-width: min(1180px, calc(100% - 48px)); }
  .hero .hero--content { max-width: 620px; padding-top: 85px; }
}

/* Full-bleed the comparison table on screens wider than the .gv content cap (1280px):
   break the table section out of the centered container to the full viewport width
   (minus 24px gutters) so more of the 12 provider columns are visible and the table
   uses the whole screen instead of leaving big side margins. Prose sections stay capped. */
@media (min-width: 1281px) {
  .gv-table-wrap {
    width: calc(100vw - 48px);
    max-width: calc(100vw - 48px);
    margin-left: calc((100% - (100vw - 48px)) / 2);
    margin-right: calc((100% - (100vw - 48px)) / 2);
  }
}
.gv-ts {
  --gv-purple: #6b35ff;
  --gv-yellow: #f1c40f;
  --gv-ink: #0b0c0c;
  font-family: Ubuntu, sans-serif;
  position: absolute; top: 149px; right: max(24px, calc((100% - 1180px) / 2));
  width: 480px; box-sizing: border-box;
  background: #fff; border-radius: 12px; padding: 20px 26px 16px;
  box-shadow: 0 24px 56px rgba(8, 23, 42, .35), 0 2px 8px rgba(8, 23, 42, .12);
  z-index: 1;
}
.gv-ts__head { display: flex; align-items: center; margin-bottom: 16px; }
.gv-ts__flag {
  background: #6b35ff; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  line-height: 1; padding: 7px 10px 6px; border-radius: 3px;
}
.gv-ts__logo { height: 42px; max-width: 172px; object-fit: contain; align-self: flex-start; }
.gv-ts__logo-name { font-size: 18px; font-weight: 700; color: #0b0c0c; }
.gv-ts__row { display: flex; align-items: center; gap: 24px; }
.gv-ts__facts { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.gv-ts__badge { flex: none; width: 175px; border: 1px solid #e2e6ec; border-radius: 12px; overflow: hidden; text-align: center; box-shadow: 0 4px 14px rgba(8, 23, 42, .12); }
.gv-ts__badge-head { display: flex; align-items: center; justify-content: center; background: #08172a; padding: 13px 0 12px; }
.gv-ts__badge-brand { height: 20px; display: block; }
.gv-ts__badge-body { display: block; padding: 12px 0 10px; }
.gv-ts__verdict { display: block; font-size: 22px; font-weight: 700; color: #08172a; line-height: 1.15; }
.gv-ts__stars { display: flex; justify-content: center; gap: 3px; margin: 8px 0 6px; }
.gv-ts__star { width: 21px; height: 21px; display: block; }
.gv-ts__score { display: block; font-size: 12px; color: #08172a; }
.gv-ts__badge-foot {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #e9ebef; color: #08172a;
  font-size: 10px; font-weight: 700; line-height: 1; padding: 7px 8px 6px;
}
.gv-ts__points { list-style: none; margin: 0; padding: 0; }
.gv-ts__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 23px; color: #0b0c0c; padding: 6px 0; }
.gv-ts__points .gv-bool { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.gv-ts__cta { display: block; text-align: center; margin-top: 16px; font-size: 15px; padding: 14px; }
.gv-ts__note { margin: 10px 0 0; font-size: 11px; line-height: 15px; color: #636363; }
@media (prefers-reduced-motion: no-preference) {
  .gv-ts { animation: gv-ts-enter .55s cubic-bezier(.2, .7, .3, 1) .15s both; }
  @keyframes gv-ts-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 1120px) {
  .gv-ts { position: static; margin: 0 auto; width: min(560px, calc(100% - 32px)); padding: 18px 16px 18px; }
  /* Padding on the wrapper (not margin on the card) so the gap sits INSIDE the hero as
     purple breathing room below the floating card — a card margin-bottom collapses out of
     the hero and leaves the card flush against the next (grey) section. */
  #gv-testsieger { padding-bottom: 34px; }
  .gv-ts__points { display: none; }
  /* Center the flag so it aligns with the centered logo + badge below it (on desktop the
     flag sits left above a horizontal row; stacked-and-centered on mobile it must center too). */
  .gv-ts__head { justify-content: center; margin-bottom: 14px; }
  .gv-ts__row { flex-direction: column; align-items: center; gap: 12px; }
  .gv-ts__facts { order: -1; align-items: center; gap: 0; }
  .gv-ts__logo { align-self: center; height: 28px; }
  .gv-ts__verdict { font-size: 22px; }
  .gv-ts__star { width: 22px; height: 22px; }
  .gv-ts__badge-body { padding: 10px 0 9px; }
  /* Keep the Testsieger CTA on mobile so the banner still has an action (bullets stay hidden). */
  .gv-ts__cta { display: block; margin-top: 14px; max-width: 320px; margin-left: auto; margin-right: auto; }
  .gv-ts__note { text-align: center; max-width: 420px; margin-left: auto; margin-right: auto; }
}