@charset "UTF-8";
/* ---------------------------------------------------------------
   bk-vendorlist v2 - Anbieter-Karten (kassensystemevergleich.de)

   Gestaltungsidee: Prüfprotokoll statt Verkaufsregal.
   Die Liste soll wie ein sauber geführter Prüfbogen wirken, nicht wie eine
   Werbefläche. Daraus folgen die drei tragenden Entscheidungen:
     1. Haarlinien als Spaltenstriche trennen die drei Zonen, keine Boxen in Boxen.
     2. Tabellenziffern (tabular-nums) für Preis und Prüfdatum, damit die
        Zahlen über alle Karten hinweg auf derselben Achse stehen.
     3. Grün ist Tinte und Kante, nie Fläche. Die große grüne Kopfzeile der
        Alt-Tabelle fällt ersatzlos weg.

   Alle Selektoren sind mit .bkvl- präfixiert (Legacy-Theme-CSS bleibt aktiv).
   Keine Webfonts, keine externen Ressourcen, kein JavaScript.
   Schrift wird vom Theme geerbt (System-Font-Stack).
   --------------------------------------------------------------- */

/* 1. Tokens + Liste */

.bkvl-list {
  /* Bravekin-Primärgrün (Beleg: themes/bravekin/css/default-color.css) */
  --bkvl-primary: #2bb24c;       /* nur Kante/Fläche, nie Text */
  --bkvl-primary-hover: #1c9a3b; /* Hover-Grün der Theme-Klasse .btn */
  --bkvl-primary-ink: #178435;   /* trägt weiße Schrift: 4.79:1 */
  --bkvl-primary-deep: #10692a;  /* Grün als Text auf hell: 6.83:1 */
  --bkvl-primary-wash: #eef8f1;
  --bkvl-primary-edge: #b9e2c5;
  --bkvl-primary-hair: #cfe8d7;

  --bkvl-ink-strong: #1d1f1c;    /* Preis, Anbietername: 16.6:1 */
  --bkvl-ink: #333330;           /* Bravekin-Fließtext: 12.7:1 */
  --bkvl-ink-mute: #5c5f59;      /* Sekundärtext: 6.5:1 */

  --bkvl-surface: #fff;
  --bkvl-surface-soft: #f4f6f3;
  --bkvl-line: #d6d9d3;
  --bkvl-line-soft: #e6e8e3;

  --bkvl-radius: 12px;
  --bkvl-radius-tag: 3px;
  --bkvl-gutter: 20px;

  /* Container-Kontext: die Breakpoints in Abschnitt 7 messen DIESE Liste, nicht
     das Fenster. Ohne das greifen sie in der schmalen Inhaltsspalte nie. */
  container: bkvl / inline-size;

  display: grid;
  grid-auto-rows: 1fr;           /* alle Karten auf die Höhe der höchsten */
  gap: 14px;
  width: 100%;
  max-width: 970px;              /* die 600px der Alt-Tabelle werden NICHT geerbt */
  margin: 2.25em auto;
  padding: 0;
  color: var(--bkvl-ink);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.bkvl-list *,
.bkvl-list *::before,
.bkvl-list *::after { box-sizing: border-box; }

/* Bravekin unterstreicht Links per box-shadow. In der Karte nicht erwünscht. */
.bkvl-list a {
  text-decoration: none;
  box-shadow: none;
  color: inherit;
}

.bkvl-list a:focus-visible {
  outline: 2px solid var(--bkvl-primary-ink);
  outline-offset: 2px;
  border-radius: var(--bkvl-radius-tag);
}

/* 2. Kartenhülle */

.bkvl-card {
  position: relative;
  display: grid;
  /* Drei Spalten nur ab 800 px Listenbreite (siehe Abschnitt 7). Die Randspalten
     sind knapp bemessen, damit die Merkmalszeile möglichst wenige Chip-Reihen
     braucht: jede zusätzliche Reihe treibt über grid-auto-rows die Höhe ALLER
     Karten mit. Bei voller Breite (970 px) passen alle vier Chips in eine Reihe. */
  grid-template-columns: minmax(0, 166px) minmax(0, 1fr) minmax(0, 188px);
  gap: var(--bkvl-gutter);
  align-items: stretch;
  margin: 0;
  padding: 20px 22px;
  background: var(--bkvl-surface);
  border: 1px solid var(--bkvl-line);
  border-radius: var(--bkvl-radius);
  box-shadow: 0 1px 2px rgba(29, 31, 28, .045);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.bkvl-card:hover {
  border-color: #c2c6bd;
  box-shadow: 0 2px 7px rgba(29, 31, 28, .07);
}

/* Variante A: die ersten drei Karten bekommen eine Akzentkante.
   Bewusst ohne Nummer, ohne Rang-, Platzierungs- oder Provisionshinweis.
   .bkvl-top3 setzt das Listen-Template nur bei mehr als drei Karten. Bei drei
   oder weniger wäre jede Karte hervorgehoben - dann ist A von B nicht mehr
   unterscheidbar und der A/B-Test misst nichts. */
/* Die Kante ist ein echter border-left, kein Pseudo-Element. Ein Rahmen folgt
   der border-radius von selbst, deshalb rundet die Kante an beiden Ecken exakt
   mit der Karte mit. Vorbild ist der Orientierungs-Kasten des Theme
   (.bk-orientierung: border-left 4px solid, border-radius), damit beide
   Akzentkanten auf der Seite gleich aussehen.
   padding-left faengt die drei zusaetzlichen Rahmen-Pixel wieder auf
   (1px + 22px = 4px + 19px), sonst waeren die Top-3-Karten innen schmaler als
   die uebrigen und der Zeilenumbruch koennte abweichen. */
.bkvl-variant-a.bkvl-top3 .bkvl-card:nth-child(-n+3) {
  border-color: var(--bkvl-primary-edge);
  border-left: 4px solid var(--bkvl-primary);
  padding-left: 19px;
  box-shadow: 0 1px 2px rgba(23, 132, 53, .07),
              0 8px 20px -14px rgba(23, 132, 53, .38);
}


.bkvl-variant-a.bkvl-top3 .bkvl-card:nth-child(-n+3):hover {
  border-color: #96d3a8;
}

/* 3. Zonen + Spaltenstriche */

/* Alle drei Zonen setzen von oben. Der Höhenausgleich der Liste sammelt sich
   damit als ein zusammenhängender Rest unter dem letzten Eintrag jeder Spalte,
   nie als Loch mitten im Text. Das ist die Setzweise eines gedruckten
   Prüfbogens: Einträge stehen an der Oberkante der Zeile, unten bleibt Papier.
   Der frühere Bodenanker (.bkvl-meta { margin-top: auto }) hing an einer
   Meta-Zeile, die es nicht auf jedem Datensatz gibt; hier hängt nichts mehr an
   der Datenlage. Nebeneffekt: die Oberkante des CTA liegt auf der Preisachse. */
.bkvl-zone {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.bkvl-decision,
.bkvl-action {
  padding-left: var(--bkvl-gutter);
  border-left: 1px solid var(--bkvl-line-soft);
}

/* 4. Zone 1 - Identität (Logo, Sterne) */

/* align-items bleibt bewusst auf stretch. Mit flex-start bekäme .bkvl-logo
   eine inhaltsabhängige Breite, gegen die das max-width:100% des Logos nicht
   auflösen kann: Chromium rechnet die Kette dann auf 0x0 herunter und das
   Logo verschwindet. Die Zone braucht eine definite Breite. */
.bkvl-identity { gap: 11px; }

/* Feste Logo-Bandhöhe. Die Logos sind 216x200 ohne Crop und damit beliebig
   proportioniert; ohne Band säßen die Sterne auf jeder Karte woanders.
   Die Breite ist definit (100 % einer Grid-Spalte), damit das max-width:100%
   des Bildes auflösen kann. Greift auch für den Titel-Fallback ohne Logo. */
.bkvl-logo {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bkvl-ink-strong);
}

/* Bewusst kein mix-blend-mode: die Theme-Regel dazu ist auf `table img`
   gescoped und trifft dieses Div-Grid nicht. Nachgebaut würde sie jedes Logo
   mit nicht-weißem Hintergrund verfälschen. */
.bkvl-logo img {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: 100%;
  max-height: 54px;
  object-fit: contain;
}

/* Sterne bewusst klein: die Stichproben schwanken zwischen 1 und 126
   Berichten, die Bewertung ist Beleg im zweiten Rang, kein Hauptargument. */
.bkvl-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.bkvl-rating .rating-inner {
  display: block;
  margin: 0;
  font-size: 4.6px;   /* Legacy rechnet 20em x 4em -> 92 x 18px */
  vertical-align: baseline;
}

.bkvl-rating .review-rating { display: block; margin: 0; }

.bkvl-rating-count {
  font-size: 12px;
  line-height: 1.4;
  color: var(--bkvl-ink-mute);
  font-variant-numeric: tabular-nums;
}

.bkvl-rating:hover .bkvl-rating-count { color: var(--bkvl-ink-strong); }

.bkvl-edit { font-size: 11.5px; line-height: 1.4; }
.bkvl-edit a { color: var(--bkvl-ink-mute); text-decoration: underline; }

/* 5. Zone 2 - Entscheidung (Preis, Prüfsiegel, USP, Merkmale) */

/* min-height hält die Zeile darunter (Prüfsiegel) auf einer Achse, auch wenn
   statt des geprüften Preises der kleinere Legacy-Wert steht. */
.bkvl-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .34em;
  min-height: 38px;
  line-height: 1.1;
}

.bkvl-price-prefix {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bkvl-ink-mute);
}

.bkvl-price-value {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--bkvl-ink-strong);
  font-variant-numeric: tabular-nums;
}

.bkvl-price-period {
  font-size: 13px;
  font-weight: 500;
  color: var(--bkvl-ink-mute);
}

/* Fallback ohne geprüften SoT-Preis: ruhiger gesetzt als der belegte Preis. */
.bkvl-price-legacy {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--bkvl-ink-strong);
}

/* Das Prüfsiegel ist der stille Vertrauensanker unter dem Preis.
   Rechteckige Marke statt Werbe-Pille, Tabellenziffern lassen die Daten
   über alle Karten hinweg auf einer Achse stehen. */
.bkvl-badge-verified {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .5em;
  margin-top: 9px;
  padding: 3px 9px 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .005em;
  color: var(--bkvl-primary-deep);
  background: var(--bkvl-primary-wash);
  border: 1px solid var(--bkvl-primary-hair);
  border-radius: var(--bkvl-radius-tag);
  font-variant-numeric: tabular-nums;
}

.bkvl-badge-verified::before {
  content: "";
  flex: none;
  width: .4em;
  height: .72em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg) translate(0, -.08em);
}

/* break-word ist in der schmalen Spalte Pflicht: lange deutsche Komposita
   sind sonst breiter als die Zone und laufen heraus. */
.bkvl-usp {
  margin: 10px 0 0;
  max-width: 48ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bkvl-ink);
  overflow-wrap: break-word;
}

/* Chips statt Aufzählungspunkten: gleiche Höhe pro Zeile, sauberer Umbruch. */
.bkvl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.bkvl-chips li,
.bkvl-legacy-merkmale li {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  margin: 0;
  padding: 4px 8px;
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--bkvl-ink);
  background: var(--bkvl-surface-soft);
  border: 1px solid var(--bkvl-line-soft);
  border-radius: var(--bkvl-radius-tag);
  overflow-wrap: break-word;
}

/* Haken nur an geprüften Merkmalen aus der Fakten-Quelle. Die Legacy-Liste
   bekommt bewusst keinen, damit die Karte nicht mehr Sicherheit vorgibt,
   als hinterlegt ist. */
.bkvl-chips li { padding-left: 6px; }

.bkvl-chips li::before {
  content: "";
  flex: none;
  width: .34em;
  height: .6em;
  border: solid var(--bkvl-primary-ink);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg) translate(0, -.06em);
}

.bkvl-legacy-merkmale {
  margin: 11px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bkvl-ink);
}

.bkvl-legacy-merkmale ul,
.bkvl-legacy-merkmale ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bkvl-legacy-merkmale p { margin: 0 0 .4em; }
.bkvl-legacy-merkmale p:last-child { margin-bottom: 0; }

/* Die Vertragszeile schließt den Eintrag ab, statt an der Kartenunterkante zu
   kleben. Der Summenstrich darüber macht sichtbar, wo der Eintrag endet: der
   Leerraum darunter liest sich dann als Rand, nicht als fehlender Inhalt. */
.bkvl-meta {
  margin: 12px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--bkvl-line-soft);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bkvl-ink-mute);
  font-variant-numeric: tabular-nums;
}

/* 6. Zone 3 - Aktion */

.bkvl-action {
  gap: 8px;
}

.bkvl-btn-primary,
.bkvl-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  width: 100%;
  border-radius: 6px;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Der Primär-CTA trägt im Markup zusätzlich die Theme-Klasse .btn. Die Farben
   hier sind deshalb bewusst identisch zu default-color.css gesetzt:
   .btn:not(.scratchfield) { color:#fff !important; background-color:#2bb24c !important }
   Effektiv gewinnt das Theme, weil es mit !important feuert; diese
   Deklarationen halten die Datei trotzdem ehrlich, damit der Button auch ohne
   .btn richtig aussieht.
   Bewusste Entscheidung des Auftraggebers gegen --bkvl-primary-ink (#178435,
   4.79:1): das hellere Markengrün ist gewünscht, auch zum Preis des
   schwächeren Kontrasts (#fff auf #2bb24c = 2.77:1, im Hover 3.66:1). Die
   Variable bleibt bestehen, sie trägt weiter Fokusring und Merkmals-Haken. */
.bkvl-btn-primary {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  background: var(--bkvl-primary);
  border: 1px solid var(--bkvl-primary);
}

.bkvl-btn-primary::after {
  content: "";
  flex: none;
  width: .4em;
  height: .4em;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.bkvl-card:hover .bkvl-btn-primary::after { transform: rotate(45deg) translate(2px, -2px); }

.bkvl-btn-primary:hover,
.bkvl-btn-primary:focus-visible {
  color: #fff;
  background: var(--bkvl-primary-hover);
  border-color: var(--bkvl-primary-hover);
}

/* Kollisions-Klammer für die zusätzliche .btn-Klasse.
   header.php verlinkt style.css, typo.css und default-color.css erst NACH
   wp_head(). Das Theme-CSS steht damit im Quelltext hinter diesem Stylesheet
   und gewinnt jeden Spezifitäts-Gleichstand. Betroffen wären:
     .item .btn              -> position:absolute;right:0;bottom:0   (style.css)
     article .btn            -> display:inline-block;padding:.4em .6em (typo.css)
     .btn                    -> line-height:1.8em                    (typo.css)
     .btn:not(.scratchfield) -> border-radius:4px            (default-color.css)
   "article .btn" trifft immer, denn die Karte selbst IST ein <article>.
   Drei Klassen (0,3,0) sind das Minimum, das die stärkste dieser Regeln
   (0,2,0) auch bei ungünstiger Ladereihenfolge schlägt, deshalb kein
   !important. Zurückgeholt wird nur, was die Karte trägt; Farbe, Hover und
   Dark-Mode bleiben bewusst beim Theme. */
.bkvl-list .bkvl-card .bkvl-btn-primary {
  position: static;
  display: inline-flex;
  padding: 12px 16px;
  line-height: 1.25;
  border-radius: 6px;
}

/* .btn:not(.scratchfield):after setzt color:#444. Der Pfeil zeichnet seine
   Kante aus currentColor und wäre sonst dunkelgrau auf Grün. */
.bkvl-list .bkvl-card .bkvl-btn-primary::after {
  color: inherit;
}

.bkvl-btn-secondary {
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bkvl-ink);
  background: transparent;
  border: 1px solid var(--bkvl-line);
}

.bkvl-btn-secondary:hover,
.bkvl-btn-secondary:focus-visible {
  color: var(--bkvl-ink-strong);
  background: #fafbf9;
  border-color: var(--bkvl-ink-mute);
}

/* 7. Container-Breakpoints (Breite der LISTE, nicht des Fensters)

   Live gemessene Inhaltsspalte der KSV-Beiträge: 612 px bei 1200er Viewport,
   720 px bei 1512er. Die 970 px stehen nur in freier Breite zur Verfügung.

   Drei Spalten brauchen rund 800 px: bei 800 bleiben nach 44 Innenabstand,
   166 Identität, 188 Aktion und 2x20 Rinne noch 362 px für die
   Entscheidungszone - genug für das Prüf-Badge (196 px) und zwei Chips je
   Reihe. Bei 612 px waren es 151 px, das Badge brach im eigenen Kästchen um
   und die vier Chips ergaben vier Reihen. Deshalb ab hier zweispaltig:
   die Aktion rutscht als Fußzeile unter die Entscheidungszone, die damit auf
   384 px Textbreite kommt. Die Lesefolge Preis -> Badge -> Chips -> Aktion
   bleibt erhalten, nur eine Stufe tiefer statt eine Spalte weiter rechts. */
@container bkvl (max-width: 800px) {
  .bkvl-card {
    --bkvl-gutter: 18px;
    grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
    /* Der Höhenausgleich soll in die Inhaltszeile laufen, nicht in die
       Buttonleiste, sonst werden die Buttons mitgestreckt. */
    grid-template-rows: 1fr auto;
  }

  .bkvl-logo { min-height: 48px; }
  .bkvl-logo img { max-height: 48px; }

  /* Buttonleiste über die volle Kartenbreite, rechtsbündig wie ein Fußbereich.
     256 + 10 + 184 = 450 px bleiben auch bei 612 px Liste (568 px Karte)
     einzeilig; volle Breite wären über 400 px Buttonfläche je Knopf. */
  .bkvl-action {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--bkvl-line-soft);
  }

  .bkvl-btn-primary { flex: 0 1 256px; }
  .bkvl-btn-secondary { flex: 0 1 184px; }
}

/* Gestapelt: eine Spalte, beide Buttons volle Breite. Greift auf dem Handy und
   überall dort, wo der Shortcode in einem sehr engen Kasten steht. */
@container bkvl (max-width: 600px) {
  .bkvl-card {
    grid-template-columns: minmax(0, 1fr);
    /* Zurück auf Inhaltshöhen. Ohne das sammelt sich die Zwangshöhe der Liste
       in der 1fr-Zeile, also in der Identitätszone, und reißt ein Loch
       zwischen Logo und Preis. align-content legt den Rest stattdessen unter
       die Karte, wo er als Rand liest. */
    grid-template-rows: auto;
    align-content: start;
    gap: 0;
    padding: 16px;
  }

  /* Grid statt Flex-Row: die 1fr-Spalte ist definit, damit das max-width:100%
     des Logos auflöst (siehe Kommentar bei .bkvl-identity). */
  .bkvl-identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 14px;
  }

  .bkvl-rating { align-items: flex-end; justify-self: end; }
  .bkvl-edit { grid-column: 1 / -1; }

  .bkvl-decision {
    margin-top: 15px;
    padding-left: 0;
    padding-top: 15px;
    border-left: 0;
    border-top: 1px solid var(--bkvl-line-soft);
  }

  .bkvl-action {
    flex-direction: column;
    margin-top: 15px;
    padding-top: 15px;
  }

  .bkvl-price-value { font-size: 28px; }
  .bkvl-usp { font-size: 14px; }
  .bkvl-btn-primary,
  .bkvl-btn-secondary { flex: none; width: 100%; }
}

/* Die Liste selbst lässt sich NICHT per @container ansprechen: eine
   Container-Query stylt immer nur Nachfahren, nie den Container. Für diese
   drei Eigenschaften bleibt deshalb @media - zulässig, weil ein schmales
   Fenster zwangsläufig eine schmale Liste bedeutet (nur die Umkehrung gilt
   nicht, und die fängt das align-content oben ab). */
@media (max-width: 600px) {
  .bkvl-list {
    grid-auto-rows: auto;   /* gestapelt wäre Zwangshöhe nur Leerraum */
    gap: 12px;
    margin: 1.75em auto;
  }
}

@container bkvl (max-width: 380px) {
  .bkvl-card { padding: 14px; }
  .bkvl-logo img { max-height: 42px; }
  .bkvl-price-value { font-size: 26px; }
}

/* 8. Bewegung, Druck */

@media (prefers-reduced-motion: reduce) {
  .bkvl-card,
  .bkvl-btn-primary,
  .bkvl-btn-primary::after,
  .bkvl-btn-secondary { transition: none; }
  .bkvl-card:hover .bkvl-btn-primary::after { transform: rotate(45deg); }
}

@media print {
  .bkvl-list { grid-auto-rows: auto; max-width: none; }
  .bkvl-card { box-shadow: none; break-inside: avoid; }
  .bkvl-action { display: none; }
}