/*
 * PTO Theme: Components.
 * Einzige Datei, in der Artikelbaustein-Styles stehen dürfen — siehe
 * PTO-BRIEFING.md Abschnitt 4 und PTO-BRIEFING-DESIGNSPRACHE.md
 * Abschnitt 6. Vollständig: Artikelhülle, alle Artikelbausteine,
 * Startseiten-/Archivkomponenten. Die Styleguide-Seite
 * (page-styleguide.php) zeigt jede Klasse hier einmal mit Beispiel.
 *
 * Regeln, die für jede Komponente unten gelten und deshalb nicht pro
 * Block wiederholt werden:
 * - Nur Werte aus tokens.css, keine eigenen Farben/Größen/Schriften.
 * - Abstände ausschließlich aus der Skala 4/8/12/16/24/32/48/64/96px.
 * - Mobil zuerst: Basisregeln sind die mobile Ansicht, Media Queries
 *   schalten ausschließlich über min-width auf breiter.
 * - Jede Komponente setzt nur eine untere Randmarge (margin-bottom),
 *   nie zusätzlich eine obere — sonst addieren sich Abstände
 *   zwischen zwei Komponenten oder heben sich unvorhersehbar auf.
 * - Sichtbare Fokuszustände und reduzierte Bewegung kommen bereits
 *   global aus base.css (a/button/summary/[tabindex]:focus-visible
 *   und die pauschale prefers-reduced-motion-Regel). Hier nur dann
 *   erneut angefasst, wenn eine Komponente eine eigene Transition
 *   einführt, die base.css nicht ohnehin schon abdeckt.
 */

/* ==========================================================
 * Artikelhülle (single.php) — kommt aus dem Theme, nicht aus
 * dem Beitragsinhalt. Siehe PTO-BRIEFING-REDAKTION.md Abschnitt 1.
 * ========================================================== */

/* ---------- Lesefortschritt ---------- */

.pt-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.pt-progress.is-visible {
  opacity: 1;
}

.pt-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--pt-orange);
}

/* ---------- Artikelkopf ---------- */

.pt-article-head {
  padding-top: 24px;
}

.pt-kicker {
  font-family: var(--pt-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pt-blue);
  margin: 0 0 12px;
}

.pt-flag {
  display: inline-block;
  font-family: var(--pt-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pt-ink);
  background: var(--pt-panel);
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius-pill);
  padding: 4px 12px;
  margin: 0 0 12px;
}

.pt-article-title {
  margin: 0 0 16px;
}

/* ---------- Byline ---------- */

.pt-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--pt-ink-mute);
  border-top: 1px solid var(--pt-rule);
  border-bottom: 1px solid var(--pt-rule);
  padding: 12px 0;
  margin: 0 0 24px;
}

.pt-byline__author {
  color: var(--pt-ink);
  font-weight: 600;
}

.pt-byline > span:not(:last-child)::after {
  content: '\00b7';
  margin-left: 12px;
  color: var(--pt-rule);
}

/* ---------- Beitragsbild ---------- */

.pt-article-media {
  margin: 0 auto 32px;
}

.pt-article-media img {
  border-radius: var(--pt-radius);
}

/* ---------- Inhaltsverzeichnis ---------- */

.pt-toc {
  background: var(--pt-panel);
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  padding: 16px;
  margin: 0 auto 32px;
}

.pt-toc__title {
  font-family: var(--pt-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pt-ink-mute);
  margin: 0 0 8px;
}

.pt-toc ol {
  margin: 0;
  padding-left: 24px;
}

.pt-toc li {
  margin: 4px 0;
}

/* ---------- Artikelinhalt ---------- */

.pt-article-content {
  margin: 0 auto 32px;
}

.pt-article-content h2 {
  margin: 48px 0 16px;
  scroll-margin-top: 16px;
}

.pt-article-content p {
  margin: 0 0 20px;
}

/* ---------- Autorenkasten ---------- */

.pt-author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--pt-panel);
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  padding: 16px;
  margin: 0 auto 32px;
}

.pt-author-box__image {
  border-radius: var(--pt-radius-pill);
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex: none;
}

.pt-author-box__name {
  font-weight: 600;
  margin: 0 0 4px;
}

.pt-author-box__bio {
  color: var(--pt-ink-soft);
  font-size: 14px;
  margin: 0;
}

/* ---------- Offenlegung (Artikelende) ---------- */

.pt-disclosure {
  font-size: 13px;
  color: var(--pt-ink-mute);
  background: var(--pt-panel);
  border-radius: var(--pt-radius);
  padding: 16px;
  margin: 0 auto 32px;
}

.pt-disclosure p {
  margin: 0;
}

/* ---------- Weitere Vergleiche ---------- */

.pt-related {
  margin: 0 auto 48px;
}

/* ---------- Sticky-CTA ---------- */

.pt-sticky-cta {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--pt-paper);
  border-top: 1px solid var(--pt-rule);
  padding: 12px 16px;
  transform: translateY(100%);
  transition: transform 0.15s ease;
}

.pt-sticky-cta.is-visible {
  transform: translateY(0);
}

.pt-sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--pt-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--pt-cta-ink);
  background: var(--pt-orange);
  border-radius: var(--pt-radius);
  padding: 12px;
  text-decoration: none;
}

.pt-sticky-cta__price {
  font-weight: 400;
  opacity: 0.85;
}

@media (min-width: 768px) {
  /* Sticky-CTA ist laut Auftrag "für Mobil" — ab Tablet/Desktop bleibt sie aus. */
  .pt-sticky-cta {
    display: none;
  }
}

/* ==========================================================
 * Artikelbausteine — im Beitragsinhalt per Block-Pattern
 * einsetzbar (inc/patterns.php, kommt in einer späteren Etappe).
 * Jeder Baustein bekommt hier schon einmal margin-bottom: 32px,
 * die im Beitrag übliche "Komponente zu Fließtext"-Distanz aus
 * PTO-BRIEFING-DESIGNSPRACHE.md Abschnitt 4.
 * ========================================================== */

/* ---------- Vorspann ---------- */

.pt-lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--pt-ink-soft);
  margin: 0 0 32px;
}

@media (min-width: 768px) {
  .pt-lead {
    font-size: 21px;
  }
}

/* ---------- Bild mit Unterschrift ---------- */

.pt-figure {
  margin: 0 0 32px;
}

.pt-figure img {
  border-radius: var(--pt-radius);
  border: 1px solid var(--pt-rule);
}

.pt-figure figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--pt-ink-mute);
  margin-top: 8px;
}

@media (min-width: 768px) {
  .pt-figure figcaption {
    font-size: 14px;
  }
}

/* ---------- Platzierungskarte ---------- */

.pt-rank {
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
  margin: 0 0 32px;
}

.pt-rank__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--pt-panel);
  border-bottom: 1px solid var(--pt-rule);
  padding: 12px 16px;
}

.pt-rank__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--pt-radius);
  background: var(--pt-ink);
  color: var(--pt-paper);
  line-height: 1;
}

.pt-rank__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.pt-rank__num {
  font-size: 20px;
  font-weight: 800;
}

.pt-rank__title {
  flex: 1;
  min-width: 0;
}

.pt-rank__brand {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pt-ink-mute);
}

.pt-rank__name {
  font-family: var(--pt-serif);
  font-weight: 600;
  font-size: 18px;
}

.pt-rank__ribbon {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pt-paper);
  background: var(--pt-good);
  border-radius: var(--pt-radius-pill);
  padding: 4px 12px;
}

.pt-rank__body {
  padding: 16px;
}

.pt-rank__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--pt-ink-mute);
  margin: 0 0 12px;
}

.pt-rank__verdict {
  margin: 0 0 16px;
}

.pt-rank__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pt-radius);
  margin: 0 0 16px;
}

/*
 * Kein goldener Rahmen für den Testsieger: --pt-gold ist laut
 * tokens.css ausdrücklich nur für .pt-offer reserviert. Das Ribbon
 * oben übernimmt die Kennzeichnung.
 */

/* ---------- Score-Anzeige ---------- */

.pt-gauge {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--pt-blue-soft);
  border-radius: var(--pt-radius);
  padding: 16px;
  margin: 0 0 32px;
}

.pt-gauge__total {
  text-align: center;
}

.pt-gauge__num {
  display: block;
  font-family: var(--pt-serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  color: var(--pt-blue);
}

.pt-gauge__label {
  display: block;
  font-size: 13px;
  color: var(--pt-ink-mute);
  margin-top: 4px;
}

.pt-gauge__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin: 0;
  padding: 0;
}

.pt-gauge__item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.pt-gauge__item-label {
  color: var(--pt-ink-soft);
}

.pt-gauge__item-val {
  font-weight: 700;
  color: var(--pt-ink);
}

@media (min-width: 768px) {
  .pt-gauge {
    flex-direction: row;
    align-items: center;
  }

  .pt-gauge__total {
    flex: none;
  }
}

/* ---------- Tageskarte ---------- */

.pt-day {
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  padding: 16px;
  margin: 0 0 32px;
}

/*
 * Modifier für die Siegerkarte: Goldrahmen statt der normalen
 * Randfarbe, sonst identisch zu .pt-day. Gold ist hier zusätzlich
 * zum Angebotsrahmen erlaubt, siehe die Ausnahme in
 * PTO-BRIEFING-DESIGNSPRACHE.md Abschnitt 2 — die Tageskarte des
 * Testsiegers ist derselbe Fall wie das Angebot: eine einzelne,
 * bewusst herausgehobene Stelle, keine allgemeine Auszeichnung.
 */
.pt-day--winner {
  border: 2px solid var(--pt-gold);
}

.pt-day__tag {
  display: inline-block;
  font-family: var(--pt-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pt-blue);
  background: var(--pt-blue-soft);
  border-radius: var(--pt-radius-pill);
  padding: 4px 12px;
  margin: 0 0 12px;
}

.pt-day__title {
  margin: 0 0 12px;
}

.pt-day__media {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--pt-radius);
  margin: 0 0 16px;
}

.pt-day__verdict {
  background: var(--pt-blue-soft);
  border-radius: var(--pt-radius);
  padding: 16px;
  margin-top: 16px;
}

.pt-day__verdict,
.pt-day__verdict p {
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Testsieger-Badge ---------- */

/*
 * .pt-media-badge legt ein Bild in einen position:relative-Rahmen,
 * damit .pt-badge-winner darauf sitzen kann. Um jedes Bild legen,
 * das ein Badge tragen soll — Tageskarte, Vergleichsbild, egal wo.
 * Das Bild selbst behält seine eigenen Regeln (z. B. .pt-day__media
 * mit margin-bottom), .pt-media-badge fügt nur den Rahmen hinzu.
 */
.pt-media-badge {
  position: relative;
  display: block;
}

/*
 * Overlay oben links, eigenständige Siegel-Grafik (PNG mit Score
 * eingebrannt, je Gesamtnote eine eigene Datei — siehe
 * ENTSCHEIDUNGEN.md "Testsieger-Badges als Grafik"). Feste Breite statt
 * Prozentwert, weil das Siegel Fließtext enthält, der ab einer
 * Mindestgröße erst lesbar wird; auf schmalen Karten greift die
 * max-width-Bremse. Schlagschatten sorgt für Kontrast, egal ob
 * darunter ein heller oder dunkler Bildbereich liegt. Kein Orange im
 * Rahmen um die Grafik, das bleibt dem CTA vorbehalten — die Grafik
 * selbst bringt ihre eigene Farbgebung mit (Blau/Gold/Schwarz).
 */
.pt-badge-winner {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 120px;
  max-width: 33%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* ---------- Datenkasten ---------- */

.pt-facts {
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  margin: 0 0 32px;
  overflow: hidden;
}

.pt-facts__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
}

.pt-facts__row:not(:last-child) {
  border-bottom: 1px solid var(--pt-rule);
}

.pt-facts__row dt {
  color: var(--pt-ink-soft);
}

.pt-facts__row dd {
  margin: 0;
  font-weight: 700;
  color: var(--pt-ink);
  text-align: right;
}

/* ---------- Balkendiagramm ---------- */

.pt-bars {
  margin: 0 0 32px;
}

.pt-bars__row:not(:last-child) {
  margin-bottom: 16px;
}

.pt-bars__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.pt-bars__value {
  color: var(--pt-ink-mute);
  font-weight: 700;
  white-space: nowrap;
}

.pt-bars__track {
  background: var(--pt-panel);
  border-radius: var(--pt-radius-pill);
  height: 12px;
  overflow: hidden;
}

/*
 * Breite kommt aus der CSS-Variable --pt-bar-value, gesetzt per
 * style="--pt-bar-value: 37%" direkt am Element. Das ist die einzige
 * erlaubte Verwendung von style= in einem Beitrag: ein inhaltlicher
 * Messwert, keine Gestaltung. Siehe die Ausnahme in
 * PTO-BRIEFING-DESIGNSPRACHE.md Abschnitt 6.
 */
.pt-bars__fill {
  display: block;
  width: var(--pt-bar-value, 0%);
  height: 100%;
  background: var(--pt-blue);
  border-radius: var(--pt-radius-pill);
}

/* ---------- Verbrauchsvergleich ---------- */

.pt-usage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 32px;
}

@media (min-width: 600px) {
  .pt-usage {
    grid-template-columns: 1fr 1fr;
  }
}

.pt-usage__col {
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  padding: 16px;
}

/*
 * Hervorhebungs-Modifier fürs sparsamere Produkt, dieselbe Idee wie
 * bei .pt-table__winner: Blau statt Orange, weil das hier ein
 * Datenvergleich ist, keine Handlung.
 */
.pt-usage__col--winner {
  border-color: var(--pt-blue);
  background: var(--pt-blue-soft);
}

.pt-usage__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pt-ink-mute);
  margin: 0 0 12px;
}

.pt-usage__drops {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
}

.pt-usage__drop {
  width: 18px;
  height: 22px;
}

.pt-usage__drop--on {
  fill: var(--pt-blue);
}

.pt-usage__drop--off {
  fill: var(--pt-rule);
}

.pt-usage__line {
  font-size: 14px;
  line-height: 1.5;
  color: var(--pt-ink-soft);
  margin: 0 0 10px;
}

.pt-usage__big {
  font-family: var(--pt-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  color: var(--pt-ink);
  margin: 0 0 2px;
}

.pt-usage__small {
  font-size: 13px;
  color: var(--pt-ink-mute);
  margin: 0;
}

/* ---------- Skalenliste ---------- */

.pt-scale {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
}

.pt-scale__row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--pt-rule);
}

.pt-scale__row:last-child {
  border-bottom: 0;
}

.pt-scale__num {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--pt-paper);
  background: var(--pt-ink-mute);
}

.pt-scale__row:first-child .pt-scale__num {
  background: var(--pt-good);
}

.pt-scale__row:last-child .pt-scale__num {
  background: var(--pt-bad);
}

.pt-scale__txt {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
}

@media (min-width: 600px) {
  .pt-scale__row {
    flex-direction: row;
  }

  .pt-scale__num {
    flex: 0 0 118px;
  }
}

/* ---------- Passt / Passt nicht ---------- */

.pt-fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 32px;
}

@media (min-width: 600px) {
  .pt-fit {
    grid-template-columns: 1fr 1fr;
  }
}

.pt-fit__col {
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  padding: 16px;
}

.pt-fit__col--yes {
  border-color: var(--pt-good);
}

.pt-fit__col--no {
  border-color: var(--pt-bad);
}

.pt-fit__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.pt-fit__col--yes .pt-fit__label {
  color: var(--pt-good);
}

.pt-fit__col--no .pt-fit__label {
  color: var(--pt-bad);
}

.pt-fit__line {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 4px;
}

.pt-fit__line:last-child {
  margin-bottom: 0;
}

/* ---------- Vorteile und Nachteile ---------- */

.pt-proscons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 32px;
}

@media (min-width: 600px) {
  .pt-proscons {
    grid-template-columns: 1fr 1fr;
  }
}

.pt-proscons__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.pt-proscons__col--pro .pt-proscons__title {
  color: var(--pt-good);
}

.pt-proscons__col--con .pt-proscons__title {
  color: var(--pt-bad);
}

.pt-proscons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
}

.pt-proscons__list li {
  display: flex;
  gap: 8px;
}

.pt-proscons__list li:not(:last-child) {
  margin-bottom: 8px;
}

.pt-proscons__list li::before {
  content: '';
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-top: 8px;
  background: currentColor;
}

/* ---------- Einwandkarten ---------- */

.pt-faq {
  margin: 0 0 32px;
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
}

/*
 * Modifier .pt-faq--open: alle Karten starten aufgeklappt. Setzt
 * selbst kein CSS — das open-Attribut auf jedem .pt-faq__item
 * erledigt die Anzeige nativ, auch die Pfeil-Rotation kommt bereits
 * über [open] weiter unten. Die Klasse ist nur die Markierung dafür,
 * dass hier bewusst offen begonnen wird, plus der Ort für diesen
 * Kommentar. Zu- und Aufklappen bleibt in jedem Fall möglich.
 *
 * Wann welche Variante: siehe PTO-BRIEFING-REDAKTION.md — im
 * Erfahrungsbericht ist die Einwandbehandlung Teil der laufenden
 * Argumentation und startet offen (.pt-faq--open), im Vergleich ist
 * sie Nachschlagewerk und startet eingeklappt (.pt-faq ohne
 * Modifier).
 */

.pt-faq__item {
  border-bottom: 1px solid var(--pt-rule);
}

.pt-faq__item:last-child {
  border-bottom: 0;
}

.pt-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.pt-faq__q::-webkit-details-marker {
  display: none;
}

.pt-faq__q::after {
  content: '+';
  flex: none;
  font-weight: 400;
  color: var(--pt-ink-mute);
  transition: transform 0.12s ease;
}

.pt-faq__item[open] .pt-faq__q::after {
  transform: rotate(45deg);
}

.pt-faq__a {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pt-ink-soft);
}

.pt-faq__a p {
  margin: 0;
}

/* ---------- Sprungleiste ---------- */

.pt-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
}

.pt-jump__strong,
.pt-jump__quiet {
  display: inline-flex;
  align-items: center;
  font-family: var(--pt-sans);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--pt-radius);
  padding: 12px 16px;
  text-decoration: none;
  transition: background 0.12s ease;
}

.pt-jump__strong {
  color: var(--pt-cta-ink);
  background: var(--pt-orange);
}

.pt-jump__strong:hover {
  background: var(--pt-orange-dark);
}

.pt-jump__quiet {
  color: var(--pt-blue);
  background: var(--pt-paper);
  border: 1px solid var(--pt-blue);
}

.pt-jump__quiet:hover {
  background: var(--pt-blue-soft);
}

/*
 * Optionaler Hinweistext direkt unter der Sprungleiste, z. B. um
 * kurz zu erklären, warum sich der Sprung lohnt. Gehört eng zur
 * Leiste, deshalb rückt .pt-jump enger zusammen, wenn ein Hinweis
 * folgt — kein negativer Randabstand, sondern :has() steuert die
 * Lücke zwischen den beiden.
 */
.pt-jump:has(+ .pt-jump__hint) {
  margin-bottom: 8px;
}

.pt-jump__hint {
  font-size: 12px;
  color: var(--pt-ink-mute);
  margin: 0 0 32px;
}

/* ---------- Hauptbutton ---------- */

/*
 * Orange ist hier bewusst erlaubt: der CTA ist die Handlung selbst.
 * Dunkler Text auf Orange statt Weiß ist eine Kontrastentscheidung
 * (siehe PTO-BRIEFING-DESIGNSPRACHE.md Abschnitt 2) und bleibt so.
 */
.pt-cta {
  display: inline-block;
  font-family: var(--pt-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--pt-cta-ink);
  background: var(--pt-orange);
  border-radius: var(--pt-radius);
  padding: 12px 24px;
  text-decoration: none;
  text-align: center;
  transition: background 0.12s ease, transform 0.05s ease;
}

.pt-cta:hover {
  background: var(--pt-orange-dark);
  color: var(--pt-cta-ink);
}

.pt-cta:active {
  transform: translateY(1px);
}

.pt-cta--block {
  display: block;
  width: 100%;
}

/* ---------- Kurzkennzeichnung am CTA ---------- */

.pt-cta-note {
  font-size: 13px;
  color: var(--pt-ink-mute);
  margin: 8px 0 0;
}

/* ---------- Leiser Textlink ---------- */

.pt-cta-link {
  color: var(--pt-blue);
  font-weight: 600;
  text-decoration: none;
}

.pt-cta-link:hover {
  text-decoration: underline;
}

/* ---------- Angebotsblock ---------- */

.pt-offer {
  border: 2px solid var(--pt-gold);
  border-radius: var(--pt-radius);
  padding: 16px;
  margin: 0 0 32px;
}

.pt-offer__title {
  margin: 0 0 12px;
}

.pt-offer__text {
  margin: 0 0 16px;
}

@media (min-width: 768px) {
  .pt-offer {
    padding: 24px;
  }
}

/* ---------- Zitat ---------- */

.pt-quote {
  border-left: 3px solid var(--pt-blue);
  padding: 4px 0 4px 24px;
  margin: 0 0 32px;
}

.pt-quote p {
  font-family: var(--pt-serif);
  font-size: 21px;
  line-height: 1.4;
  color: var(--pt-ink);
  margin: 0;
}

@media (min-width: 768px) {
  .pt-quote p {
    font-size: 24px;
  }
}

/* ---------- Hinweiskasten ---------- */

.pt-note {
  background: var(--pt-panel);
  border-radius: var(--pt-radius);
  padding: 16px;
  margin: 0 0 32px;
}

.pt-note h3 {
  margin: 0 0 8px;
}

.pt-note p {
  margin: 0 0 12px;
}

.pt-note p:last-child {
  margin-bottom: 0;
}

/* ---------- Kennzahl ---------- */

.pt-bignum {
  text-align: center;
  background: var(--pt-panel);
  border-radius: var(--pt-radius);
  padding: 24px;
  margin: 0 0 32px;
}

.pt-bignum__num {
  display: block;
  font-family: var(--pt-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  color: var(--pt-ink);
}

.pt-bignum__label {
  display: block;
  font-size: 14px;
  color: var(--pt-ink-mute);
  margin-top: 8px;
}

.pt-bignum__source {
  display: block;
  font-size: 12px;
  color: var(--pt-ink-mute);
  margin-top: 4px;
}

@media (min-width: 768px) {
  .pt-bignum__num {
    font-size: 56px;
  }
}

/* ---------- Vergleichstabelle ---------- */

.pt-table-wrap {
  margin: 0 0 32px;
}

.pt-table__hint {
  font-size: 12px;
  color: var(--pt-ink-mute);
  margin: 0 0 8px;
}

.pt-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
}

.pt-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.pt-table th,
.pt-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pt-rule);
  white-space: nowrap;
  text-align: left;
}

.pt-table tr:last-child th,
.pt-table tr:last-child td {
  border-bottom: 0;
}

.pt-table thead th {
  background: var(--pt-panel);
  font-weight: 700;
}

.pt-table tbody th {
  font-weight: 600;
}

/*
 * Erste Spalte bleibt beim horizontalen Scrollen stehen. Eigener
 * Hintergrund nötig, sonst scheinen die anderen Spalten beim
 * Scrollen darunter durch.
 */
.pt-table th:first-child,
.pt-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--pt-paper);
}

.pt-table thead th:first-child {
  background: var(--pt-panel);
  z-index: 1;
}

/*
 * Testsieger-Spalte hervorheben: Modifier-Klasse auf jeder Zelle
 * dieser Spalte, nicht per style. Blau statt Orange, weil eine
 * Tabellenspalte keine Handlung ist.
 */
.pt-table__winner {
  background: var(--pt-blue-soft);
}

.pt-table thead th.pt-table__winner {
  background: var(--pt-blue-soft);
}

/*
 * Ist der Testsieger die erste Spalte (Zeilenbeschriftung), schlägt
 * sonst der Sticky-Hintergrund oben die Hervorhebung, weil er
 * spezifischer ist. Eigene Regel mit passender Spezifität.
 */
.pt-table th:first-child.pt-table__winner,
.pt-table td:first-child.pt-table__winner {
  background: var(--pt-blue-soft);
}

/* ==========================================================
 * Startseite und Archive
 * ========================================================== */

/* ---------- Hero ---------- */

.pt-hero {
  padding: 48px 0 32px;
  text-align: center;
}

.pt-hero__kicker {
  font-family: var(--pt-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pt-blue);
  margin: 0 0 12px;
}

.pt-hero__claim {
  margin: 0 0 16px;
}

.pt-hero__dek {
  font-size: 19px;
  line-height: 1.5;
  color: var(--pt-ink-soft);
  max-width: var(--pt-read);
  margin: 0 auto 24px;
}

@media (min-width: 768px) {
  .pt-hero {
    padding: 64px 0 48px;
  }

  .pt-hero__dek {
    font-size: 21px;
  }
}

/* ---------- Badgezeile ---------- */

.pt-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-ink-soft);
}

.pt-badges li {
  padding: 8px 12px;
  background: var(--pt-panel);
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius-pill);
}

/* ---------- Kategorie-Chip ---------- */

.pt-chip {
  display: inline-block;
  font-family: var(--pt-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pt-blue);
  background: var(--pt-blue-soft);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 8px;
}

/* ---------- Abschnittstitel ---------- */

.pt-section-title {
  margin: 48px 0 24px;
}

/* ---------- Empfohlener Vergleich (große Karte) ---------- */

.pt-feature {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.pt-feature:hover {
  text-decoration: none;
}

.pt-feature__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.pt-feature__body {
  display: block;
  padding: 24px;
}

.pt-feature__title {
  margin: 0 0 8px;
}

.pt-feature__dek {
  display: block;
  color: var(--pt-ink-soft);
  margin: 0 0 16px;
}

.pt-feature:hover .pt-cta {
  background: var(--pt-orange-dark);
}

@media (min-width: 768px) {
  .pt-feature {
    flex-direction: row;
  }

  .pt-feature__media {
    flex: 0 0 44%;
  }

  .pt-feature__media img {
    height: 100%;
  }

  .pt-feature__body {
    padding: 32px;
  }
}

/* ---------- Kartenraster ---------- */

.pt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .pt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pt-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.pt-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.pt-card:hover {
  text-decoration: none;
  border-color: var(--pt-blue);
}

.pt-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pt-card__body {
  display: block;
  padding: 16px;
}

.pt-card__title {
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 8px;
}

/*
 * Still statt orange: acht Karten mit orangenem Handlungstext wären
 * acht laute Elemente gleichzeitig, siehe Kommentar bei .pt-cta.
 */
.pt-card__link {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pt-blue);
}

/* ---------- Archiv-Kopf ---------- */

.pt-archive-head {
  padding-top: 32px;
}

.pt-archive-dek {
  color: var(--pt-ink-soft);
  max-width: var(--pt-read);
}

/*
 * Paginierung: the_posts_pagination() liefert festen WordPress-
 * Markup (.navigation.pagination, .page-numbers). Bewusste Ausnahme
 * von der pt--Namenskonvention, weil ein Nachbau nur für den
 * Klassennamen keinen Wert hätte.
 */
.navigation.pagination {
  margin: 48px 0;
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--pt-rule);
  border-radius: var(--pt-radius);
  color: var(--pt-ink);
  text-decoration: none;
  font-size: 14px;
}

.navigation.pagination .page-numbers.current {
  background: var(--pt-blue);
  border-color: var(--pt-blue);
  color: var(--pt-paper);
}

.navigation.pagination .page-numbers.dots {
  border-color: transparent;
}