/* Statischer Ersatz für Ninja Tables (footable/semantic-ui):
   celled + striped, dunkler Header wie auf der Live-Site konfiguriert. */
.ninja-table-wrap {
  margin: 0 0 1.5em;
  overflow-x: auto;
}
.ninja-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid rgba(34, 36, 38, 0.15);
}
.ninja-table th,
.ninja-table td {
  padding: 0.78571429em;
  border: 1px solid rgba(34, 36, 38, 0.1);
  vertical-align: middle;
}
.ninja-table thead th {
  background: rgba(25, 51, 63, 1);
  color: #fff;
  font-weight: 700;
  text-transform: none;
  border-color: rgba(255, 255, 255, 0.1);
}
.ninja-table tbody tr:nth-child(2n) {
  background-color: rgba(0, 0, 50, 0.02);
}
.ninja-table td img {
  max-width: 160px;
  height: auto;
}
.ninja-table td p {
  margin: 0 0 0.5em;
}
.ninja-table td p:last-child {
  margin-bottom: 0;
}

/* Gestapelte Darstellung auf schmalen Screens (wie footable "stackable") */
@media (max-width: 767px) {
  .ninja-table thead {
    display: none;
  }
  .ninja-table,
  .ninja-table tbody,
  .ninja-table tr,
  .ninja-table td {
    display: block;
    width: 100%;
  }
  .ninja-table tr {
    border-bottom: 2px solid rgba(34, 36, 38, 0.15);
  }
  .ninja-table td {
    border: none;
    border-bottom: 1px solid rgba(34, 36, 38, 0.08);
    text-align: center;
  }
}

/* ==========================================================================
   .kl-compare — Vergleichstabellen der redaktionell neu gefassten Seiten
   (migration/content/*.html). Gegenüber den migrierten Ninja-Tables:
   Fließtext linksbündig statt zentriert, Screenshot/Logo und Name in einer
   Spalte, echte Buttons statt <form>-Attrappen. Marken-Tokens wie
   comments.css/blog-post.css (palette1 #ffb424, palette3 #19333f).
   ========================================================================== */
/* Marken-Tokens für alle Bausteine der Neufassungen (Tabelle, Porträt, Notiz),
   damit ein Farbwechsel an einer Stelle passiert und nicht an dreien. */
.kl-compare,
.kl-profile,
.entry-content-html > p.kl-tablenote {
  --kl-ink: #19333f;
  --kl-accent: #ffb424;
  --kl-text: #333f4d;
  --kl-muted: #6b7785;
  --kl-rule: #e3e9f0;
  --kl-pro: #1c7a4d;
  --kl-con: #a4552a;
}
.kl-compare {
  border: 1px solid var(--kl-rule);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kl-text);
  /* Ohne feste Verteilung reißt die Beschreibungsspalte den Rest zusammen. */
  table-layout: fixed;
}
.kl-compare th,
.kl-compare td {
  border: none;
  border-bottom: 1px solid var(--kl-rule);
  padding: 20px 18px;
  /* Der eigentliche Wunsch: Texte stehen seitlich, nicht mittig. */
  text-align: left;
  vertical-align: top;
}
.kl-compare thead th {
  background: var(--kl-ink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 18px;
}
.kl-compare tbody tr:last-child td { border-bottom: none; }
.kl-compare tbody tr:nth-child(2n) { background: #fbfcfd; }
.kl-compare tbody tr:hover { background: #f6f9fc; }

/* Spaltenbreiten: Marke | Kurzprofil | Preis | Aktionen */
.kl-compare col,
.kl-compare th:nth-child(1) { width: 22%; }
.kl-compare th:nth-child(2) { width: 42%; }
.kl-compare th:nth-child(3) { width: 18%; }
.kl-compare th:nth-child(4) { width: 18%; }

/* --- Spalte 1: Screenshot/Logo + Name ------------------------------------ */
.kl-compare .nt-brand img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(25, 51, 63, 0.12);
}
/* Favicon-artige Logos (neue Zeilen ohne Screenshot) nicht hochskalieren. */
.kl-compare .nt-brand img.nt-logo {
  width: auto;
  max-width: 100%;
  max-height: 56px;
  margin: 6px 0 2px;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.kl-compare .nt-brand h3 {
  margin: 12px 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kl-ink);
}
/* Zeilen ganz ohne Bild (LMS-Tabelle auf der Unternehmensseite): Der Name steht
   dann als Erstes in der Zelle und soll mit den übrigen Spalten oben abschließen. */
.kl-compare .nt-brand h3:first-child { margin-top: 0; }
.kl-compare .nt-tag {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kl-muted);
  text-transform: uppercase;
}

/* --- Spalte 2: Kurzprofil mit Pro-/Contra-Listen ------------------------- */
.kl-compare .nt-desc p { margin: 0 0 0.9em; }
.kl-compare .nt-pros,
.kl-compare .nt-cons {
  margin: 0 0 0.7em;
  padding: 0;
  list-style: none;
  font-size: 0.94rem;
}
.kl-compare .nt-cons:last-child,
.kl-compare .nt-pros:last-child { margin-bottom: 0; }
.kl-compare .nt-pros li,
.kl-compare .nt-cons li {
  position: relative;
  margin: 0 0 0.35em;
  padding-left: 1.6em;
}
.kl-compare .nt-pros li::before,
.kl-compare .nt-cons li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.kl-compare .nt-pros li::before { content: "✔"; color: var(--kl-pro); }
.kl-compare .nt-cons li::before { content: "–"; color: var(--kl-con); font-size: 1.2em; line-height: 1.15; }

/* --- Spalte 3: Preis ----------------------------------------------------- */
.kl-compare .nt-price strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kl-ink);
}
.kl-compare .nt-price-note {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--kl-muted);
}

/* --- Spalte 4: Buttons --------------------------------------------------- */
.kl-compare .nt-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kl-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.kl-btn-primary {
  background: var(--kl-accent);
  border-color: var(--kl-accent);
  color: var(--kl-ink);
}
.kl-btn-primary:hover {
  background: #f0a406;
  border-color: #f0a406;
  color: var(--kl-ink);
}
.kl-btn-ghost {
  background: #fff;
  border-color: var(--kl-ink);
  color: var(--kl-ink);
}
.kl-btn-ghost:hover {
  background: var(--kl-ink);
  color: #fff;
}
/* Die Beitrags-Typografie unterstreicht Links in Tabellen — bei Buttons nicht. */
.entry-content-html > .ninja-table-wrap .kl-btn,
.entry-content-html > .ninja-table-wrap .kl-btn:hover {
  text-decoration: none;
}
.entry-content-html > .ninja-table-wrap .nt-brand a { text-decoration: none; }

/* Hinweiszeile zum Stand, klein direkt unter der Tabelle: Sie gehört zu den
   Preisen darüber und stand vorher als gelber Kasten ganz oben in der Seite,
   wo sie den Einstieg blockierte, ohne dass eine Zahl daneben stand. */
.entry-content-html > p.kl-tablenote {
  margin: -0.8em 0 1.8em;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--kl-muted);
}

/* Dieselbe Angabe, aber klein und dezent am Seitenende statt oben im Blick. */
.entry-content-html > p.kl-updated-footer {
  margin: 2.5em 0 1.5em;
  padding-top: 1em;
  border-top: 1px solid #e3e9f0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8a95a1;
}

/* --- Gestapelt auf schmalen Screens -------------------------------------- */
@media (max-width: 767px) {
  .kl-compare,
  .kl-compare tbody,
  .kl-compare tr,
  .kl-compare td {
    display: block;
    width: 100%;
  }
  .kl-compare { table-layout: auto; }
  .kl-compare thead { display: none; }
  .kl-compare tbody tr {
    border-bottom: 8px solid #eef2f6;
    padding: 4px 0 8px;
  }
  .kl-compare tbody tr:last-child { border-bottom: none; }
  .kl-compare td {
    border-bottom: none;
    padding: 10px 16px;
    /* Überschreibt die zentrierte Stapel-Ansicht der migrierten Tabellen. */
    text-align: left;
  }
  /* Spaltenname vor den Wert setzen, damit die Zeile ohne Kopf lesbar bleibt. */
  .kl-compare td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kl-muted);
  }
  .kl-compare .nt-brand::before { display: none; }
  .kl-compare .nt-brand img { max-width: 320px; }
  .kl-compare .nt-actions { flex-direction: row; flex-wrap: wrap; }
  .kl-compare .nt-actions .kl-btn { flex: 1 1 140px; }
}

/* ==========================================================================
   .kl-profile — Anbieter-Porträts der Unternehmensseite
   Vorher stand unter jeder Überschrift ein 560px breites Video und darunter
   zwei dichte Absätze, in denen jede Zahl fett ausgezeichnet war: eine Wand
   aus Halbfettem, aus der nichts heraussticht. Jetzt liegen Video oder
   Screenshot und die harten Zahlen nebeneinander, die Zahlen als Stichpunkte
   mit Icon, darunter kurzer Fließtext und ein Fazit.
   Die Icons sind Masken statt <img>: die Farbe kommt damit aus demselben
   Token wie die Vergleichstabelle und es gibt keine zusätzliche Anfrage.
   ========================================================================== */
.kl-profile {
  margin: 0 0 2.6em;
  color: var(--kl-text);
}
.kl-profile > p {
  margin: 0 0 1em;
}
/* Kurzcharakteristik unter der Überschrift — dieselbe Beschriftung wie in der
   Markenspalte der Vergleichstabelle, damit Tabelle und Porträt zusammenpassen. */
.kl-profile > p.kl-profile-tag {
  margin: -0.5em 0 1.1em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kl-muted);
}
.kl-profile-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 1.3em;
}
.kl-profile-media iframe,
.kl-profile-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(25, 51, 63, 0.12);
}
/* Die migrierten Videos tragen feste 560x315 als Attribut; das Seitenverhältnis
   hier hält sie in jeder Spaltenbreite im Bild. */
.kl-profile-media iframe {
  aspect-ratio: 16 / 9;
}
/* Ohne Marketing-Consent steht statt des Videos der Platzhalter aus
   cookie-banner.css. Dessen Außenabstand stammt aus dem Fließtext und würde
   ihn hier gegen die Stichpunkte daneben verschieben. */
.kl-profile .kl-profile-media .kl-embed-consent {
  margin: 0;
  max-width: none;
  border-radius: 10px;
}

/* --- Zahlen als Stichpunkte ---------------------------------------------- */
.kl-profile .kl-facts {
  margin: 0;
  padding: 16px 18px;
  list-style: none;
  background: #f8fafc;
  border: 1px solid var(--kl-rule);
  border-radius: 12px;
  font-size: 0.93rem;
  line-height: 1.5;
}
.kl-profile .kl-facts li.kl-fact {
  display: flex;
  gap: 10px;
  margin: 0 0 0.7em;
  padding: 0;
}
.kl-profile .kl-facts li.kl-fact:last-child {
  margin-bottom: 0;
}
.kl-fact::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background-color: var(--kl-ink);
  -webkit-mask: var(--kl-icon) center / contain no-repeat;
  mask: var(--kl-icon) center / contain no-repeat;
}
.kl-fact-body {
  display: block;
}
.kl-fact strong {
  display: block;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kl-muted);
}
/* Der Haken jedes Anbieters trägt die Warnfarbe der Contra-Listen, die
   Förderung die Ja-Farbe der Pro-Listen — dieselbe Bedeutung, dieselbe Farbe. */
.kl-fact--warn::before { background-color: var(--kl-con); }
.kl-fact--warn strong { color: var(--kl-con); }
.kl-fact--funding::before { background-color: var(--kl-pro); }
.kl-fact--funding strong { color: var(--kl-pro); }

/* Icons im Feather-Stil (24x24, nur Konturen) — die Maske nimmt nur die Form,
   die Strichfarbe im SVG ist deshalb beliebig. */
.kl-fact--library { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
.kl-fact--focus { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.kl-fact--lang { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.kl-fact--tech { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.kl-fact--price { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); }
.kl-fact--shield { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 11.5 11 13.5 15 9.5'/%3E%3C/svg%3E"); }
.kl-fact--owner { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); }
.kl-fact--cert { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/%3E%3C/svg%3E"); }
.kl-fact--users { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.kl-fact--format { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E"); }
.kl-fact--access { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='3.6' r='1.9'/%3E%3Cpath d='M4.5 8.2h15'/%3E%3Cpath d='M12 7.4v6.6'/%3E%3Cpath d='M12 14l-3.5 7'/%3E%3Cpath d='M12 14l3.5 7'/%3E%3C/svg%3E"); }
.kl-fact--funding { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.3a8 8 0 1 0 0 11.4'/%3E%3Cline x1='3' y1='10.3' x2='13' y2='10.3'/%3E%3Cline x1='3' y1='13.7' x2='13' y2='13.7'/%3E%3C/svg%3E"); }
.kl-fact--warn { --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }

/* --- Persönliches Fazit -------------------------------------------------- */
.kl-profile > p.kl-profile-verdict {
  margin: 1.2em 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--kl-accent);
  border-radius: 0 8px 8px 0;
  background: #fff8e9;
  font-size: 0.95rem;
  line-height: 1.6;
}
.kl-profile-verdict strong {
  color: var(--kl-ink);
}

/* --- Gestapelt auf schmalen Screens -------------------------------------- */
@media (max-width: 860px) {
  .kl-profile-top {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .kl-profile .kl-facts {
    padding: 14px 16px;
  }
}

/* ==========================================================================
   .kl-pricing — Tarifvergleich in den Plattform-Reviews
   Die migrierten Preistabellen bestanden aus zwei Zellen mit Inline-Breiten in
   Prozent mit vier Nachkommastellen, in denen Monats- und Jahrespreis als ein
   fetter Fließtext standen ("Kosten pro Monat: … / Jahr …"). Damit ließ sich
   weder ein Tarif mit einem anderen vergleichen noch der Jahrespreis auf den
   Monat umrechnen. Hier steht pro Tarif eine Zeile, pro Abrechnungsart eine
   Spalte, und die Zahl trägt ihre Einheit als eigene Zeile unter sich.
   ========================================================================== */
.kl-pricing {
  --kl-ink: #19333f;
  --kl-accent: #ffb424;
  --kl-text: #333f4d;
  --kl-muted: #6b7785;
  --kl-rule: #e3e9f0;
  --kl-pro: #1c7a4d;
  border: 1px solid var(--kl-rule);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kl-text);
}
.kl-pricing th,
.kl-pricing td {
  border: none;
  border-bottom: 1px solid var(--kl-rule);
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
}
.kl-pricing thead th {
  background: var(--kl-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 18px;
}
.kl-pricing tbody tr:last-child td { border-bottom: none; }
/* Kein Zebra: die hervorgehobene Zeile soll die einzige farbige Fläche sein. */
.kl-pricing tbody tr.is-featured { background: #fff8e9; }
/* Tarif | monatlich | jährlich | Leistungen */
.kl-pricing th:nth-child(1) { width: 26%; }
.kl-pricing th:nth-child(2) { width: 18%; }
.kl-pricing th:nth-child(3) { width: 22%; }
.kl-pricing th:nth-child(4) { width: 34%; }

/* Tarifspalte: Name, darunter die Einordnung in einem Satzfragment. */
.kl-pricing .kl-plan {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--kl-ink);
}
.kl-pricing .kl-plan-note {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--kl-muted);
}
/* Der Preis steht groß, die Bezugsgröße klein darunter — sonst liest sich
   "29,98 € pro Monat bei monatlicher Zahlung" als ein einziger Block. */
.kl-pricing .kl-amount {
  display: block;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--kl-ink);
  white-space: nowrap;
}
.kl-pricing .kl-amount-note {
  display: block;
  margin-top: 3px;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--kl-muted);
}
.kl-pricing .kl-save {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--kl-pro);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.kl-pricing .kl-plan-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--kl-accent);
  color: var(--kl-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

@media (max-width: 767px) {
  .kl-pricing,
  .kl-pricing tbody,
  .kl-pricing tr,
  .kl-pricing td {
    display: block;
    width: 100%;
  }
  .kl-pricing thead { display: none; }
  .kl-pricing tbody tr {
    border-bottom: 8px solid #eef2f6;
    padding: 6px 0 10px;
  }
  .kl-pricing tbody tr:last-child { border-bottom: none; }
  .kl-pricing td {
    border-bottom: none;
    padding: 8px 16px;
  }
  .kl-pricing td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kl-muted);
  }
  .kl-pricing td.kl-plan-cell::before { display: none; }
}

/* ==========================================================================
   .kl-verdict — Pro und Contra im Erfahrungsteil
   Vorher: zwei 42px-PNGs (ein grünes Plus, ein rotes Minus) als <img> in einem
   Flex-Wrapper, danach lose Absätze. Die Grafiken waren unscharf skaliert, ihr
   alt-Text beschrieb die Form statt der Bedeutung, und zwischen Überschrift und
   den zugehörigen Absätzen bestand kein sichtbarer Zusammenhang. Jetzt zwei
   Karten nebeneinander, das Zeichen als Maske aus einem Inline-SVG in derselben
   Farbe wie die Pro-/Contra-Listen der Vergleichstabellen.
   ========================================================================== */
.kl-verdict {
  --kl-ink: #19333f;
  --kl-text: #333f4d;
  --kl-rule: #e3e9f0;
  --kl-pro: #1c7a4d;
  --kl-con: #a4552a;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 1.6em 0 2em;
  color: var(--kl-text);
}
.kl-verdict-card {
  padding: 18px 20px;
  border: 1px solid var(--kl-rule);
  border-top: 3px solid var(--kl-side, var(--kl-ink));
  border-radius: 12px;
  background: #fbfcfd;
}
.kl-verdict-card.is-pro { --kl-side: var(--kl-pro); }
.kl-verdict-card.is-con { --kl-side: var(--kl-con); }
.kl-verdict-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0.8em;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kl-side);
}
/* Zeichen als Maske: die Farbe kommt aus demselben Token wie der Kartenrand,
   und es entsteht keine zweite Anfrage für ein 42px-Bild. */
.kl-verdict-card h3::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background-color: var(--kl-side);
  -webkit-mask: var(--kl-icon) center / contain no-repeat;
  mask: var(--kl-icon) center / contain no-repeat;
}
.kl-verdict-card.is-pro h3 {
  --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
}
.kl-verdict-card.is-con h3 {
  --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
}
.kl-verdict-card p {
  margin: 0 0 0.9em;
  font-size: 0.96rem;
  line-height: 1.65;
}
.kl-verdict-card p:last-child { margin-bottom: 0; }
/* Etliche Plattform-Beiträge führen ihre Plus- und Minuspunkte als Stichpunkte,
   nicht als Absätze. Die Punkte kommen aus derselben Farbe wie der Kartenrand,
   damit die Karte nicht plötzlich die gelben Punkte des Fließtextes trägt. */
.kl-verdict-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kl-verdict-card ul li {
  position: relative;
  margin: 0 0 0.7em;
  padding-left: 20px;
  font-size: 0.96rem;
  line-height: 1.6;
}
.kl-verdict-card ul li:last-child { margin-bottom: 0; }
.kl-verdict-card ul li::before {
  content: "";
  position: absolute;
  top: 0.63em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kl-side, var(--kl-ink));
}
/* Im Beitrag ist die Karte kein direktes Kind von .entry-content-html, die
   Listenregeln von blog-post.css greifen also nicht — die verschachtelte Liste
   in .kl-verdict bekäme sonst gar keinen Einzug. Für den Fall, dass eine
   Fassung die Liste doch als direktes Kind stehen lässt, hier der Konter. */
.entry-content-html .kl-verdict > .kl-verdict-card > ul { padding-left: 0; }

@media (max-width: 767px) {
  .kl-verdict {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==========================================================================
   .kl-appratings — App-Bewertungen aus App Store und Google Play
   Jeder Plattform-Beitrag endet mit meiner eigenen Einschätzung. Was fehlte,
   war der Gegenpol: was Zehntausende andere Nutzer von der App halten. Der
   Block steht deshalb in jedem Beitrag an derselben Stelle und im selben
   Aufbau — zwei Karten, links Apple, rechts Google, darunter das Abrufdatum.
   Bewusst flächig statt mit Verlauf, wie .kl-verdict und .kl-pricing daneben.
   ========================================================================== */
.kl-appratings {
  --kl-ink: #19333f;
  --kl-text: #333f4d;
  --kl-muted: #6b7785;
  --kl-rule: #e3e9f0;
  --kl-star: #ffb424;
  --kl-star-off: #dfe6ee;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 1.6em 0 0.8em;
  color: var(--kl-text);
}
.kl-apprating {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--kl-rule);
  border-radius: 12px;
  background: #fbfcfd;
}
/* Ladensymbol als Maske, damit es die Tintenfarbe des Beitrags trägt und keine
   zweite Anfrage auslöst — dieselbe Technik wie bei .kl-fact. */
.kl-apprating::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background-color: var(--kl-ink);
  -webkit-mask: var(--kl-icon) center / contain no-repeat;
  mask: var(--kl-icon) center / contain no-repeat;
}
.kl-apprating.is-apple {
  --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.36 12.6c-.02-2.2 1.8-3.26 1.88-3.31-1.02-1.5-2.62-1.7-3.19-1.73-1.36-.14-2.65.8-3.34.8-.69 0-1.75-.78-2.87-.76-1.48.02-2.84.86-3.6 2.18-1.53 2.66-.39 6.6 1.1 8.76.73 1.06 1.6 2.25 2.74 2.2 1.1-.04 1.51-.71 2.84-.71 1.32 0 1.7.71 2.86.69 1.18-.02 1.93-1.08 2.65-2.14.84-1.23 1.18-2.42 1.2-2.48-.03-.01-2.29-.88-2.31-3.5zM14.2 5.94c.6-.74 1.01-1.75.9-2.77-.87.04-1.93.59-2.56 1.32-.56.65-1.06 1.69-.93 2.68.97.08 1.97-.5 2.59-1.23z'/%3E%3C/svg%3E");
}
.kl-apprating.is-google {
  --kl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.6v18.8c0 .6.7 1 1.2.6l12.4-9.4c.4-.3.4-.9 0-1.2L5.2 2c-.5-.4-1.2 0-1.2.6z'/%3E%3Cpath d='M4.4 2.2l10.1 9.8-10.1 9.8'/%3E%3C/svg%3E");
}
.kl-apprating-body {
  min-width: 0;
}
.kl-apprating-store {
  display: block;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kl-muted);
}
.kl-apprating-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 1px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--kl-ink);
}
.kl-apprating-score small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--kl-muted);
}
/* Sternreihe ohne Icon-Schrift: eine graue Grundreihe, darüber dieselbe Reihe
   in Akzentfarbe, auf --kl-fill Prozent beschnitten. */
.kl-apprating-stars {
  position: relative;
  display: inline-block;
  color: var(--kl-star-off);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}
.kl-apprating-stars::before {
  content: "★★★★★";
}
/* Die beschnittene Reihe braucht ihr eigenes nowrap: Sie ist nur --kl-fill
   Prozent breit, und ohne das bräche die Sternfolge dort um, statt am rechten
   Rand abgeschnitten zu werden. */
.kl-apprating-stars > i {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: var(--kl-fill, 0%);
  color: var(--kl-star);
  font-style: normal;
  white-space: nowrap;
}
.kl-apprating-stars > i::before {
  content: "★★★★★";
}
.kl-apprating-count {
  display: block;
  margin-top: 5px;
  font-size: 0.85rem;
  color: var(--kl-muted);
}
/* Der Quellen- und Standhinweis darunter ist derselbe .kl-tablenote wie unter
   den Preistabellen; dessen negativer oberer Abstand zieht ihn an die Karten
   heran, deshalb endet der Block hier mit nur 0.8em Luft. */

@media (max-width: 767px) {
  .kl-appratings {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================================
   .kl-facts als eigenständiger Block (bisher nur innerhalb von .kl-profile)
   Damit lässt sich dieselbe Stichpunktliste mit Icon auch in einem Beitrag
   verwenden, der kein Anbieter-Porträt ist.
   ========================================================================== */
.kl-facts.kl-facts-standalone {
  --kl-ink: #19333f;
  --kl-muted: #6b7785;
  --kl-rule: #e3e9f0;
  --kl-pro: #1c7a4d;
  --kl-con: #a4552a;
  margin: 1.6em 0 2em;
  padding: 18px 20px;
  list-style: none;
  background: #f8fafc;
  border: 1px solid var(--kl-rule);
  border-radius: 12px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #333f4d;
}
.kl-facts.kl-facts-standalone li.kl-fact {
  display: flex;
  gap: 12px;
  margin: 0 0 0.9em;
  padding: 0;
}
.kl-facts.kl-facts-standalone li.kl-fact:last-child { margin-bottom: 0; }
/* blog-post.css setzt für Listen im Beitragstext einen eigenen Aufzählungspunkt
   (.entry-content-html > ul > li::before: absolut positionierter 7px-Kreis in
   der Akzentfarbe). Dieser Selektor ist spezifischer als .kl-fact::before und
   überschriebe sonst Größe, Position und Farbe des Icons — die Stichpunkte
   säßen dann als Punkte hinter dem Text. Deshalb hier die volle Rücksetzung,
   nicht nur content. */
.entry-content-html > ul.kl-facts-standalone { padding-left: 0; }
.entry-content-html > ul.kl-facts-standalone > li { padding-left: 0; margin-bottom: 0.9em; }
.entry-content-html > ul.kl-facts-standalone > li.kl-fact::before {
  content: "";
  position: static;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 0;
  background: var(--kl-ink);
  -webkit-mask: var(--kl-icon) center / contain no-repeat;
  mask: var(--kl-icon) center / contain no-repeat;
}