/* Produktzentrale Theme: Components – Bausteine für Start, Archive, Artikel. */

/* ---- Buttons / CTA (Rot = Aktion) ---- */
.pz-cta, .pz-content .pz-cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--pz-display); font-weight: 700; font-size: 1rem;
  background: var(--pz-red); color: #fff; border: 0; border-radius: var(--pz-radius);
  padding: 0.85rem 1.6rem; cursor: pointer; transition: background 0.16s ease;
}
.pz-cta:hover { background: var(--pz-red-strong); color: #fff; text-decoration: none; }
.pz-cta--ghost { background: transparent; color: var(--pz-ink); border: 2px solid var(--pz-line-strong); }
.pz-cta--ghost:hover { background: var(--pz-ink); color: #fff; }

/* ---- Section-Titel ---- */
.pz-section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; border-bottom: 1px solid var(--pz-line); padding-bottom: 0.5rem; margin-bottom: 1.5rem; }

/* ---- Chip (Kategorie) ---- */
.pz-chip { display: inline-block; font-family: var(--pz-display); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pz-red); }
a.pz-chip:hover { color: var(--pz-red-strong); text-decoration: none; }

/* ---- Hero (Startseite) ---- */
.pz-hero { padding: 3.5rem 0 1rem; }
.pz-hero__kicker { font-family: var(--pz-display); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pz-ink-mute); margin: 0 0 0.75rem; }
.pz-hero__claim { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; margin: 0 0 0.75rem; max-width: 18ch; }
.pz-hero__dek { font-size: 1.2rem; color: var(--pz-ink-soft); max-width: 52ch; }
.pz-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; padding: 0; margin: 1.5rem 0 0; }
.pz-badges li { font-weight: 600; position: relative; padding-left: 1.6rem; }
.pz-badges li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.1em; height: 1.1em;
  background: var(--pz-good);
  -webkit-mask: no-repeat center / 0.8em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
          mask: no-repeat center / 0.8em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---- Feature (empfohlener Test) ---- */
.pz-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border: 2px solid var(--pz-ink); text-decoration: none; color: inherit; }
.pz-feature:hover { text-decoration: none; }
.pz-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.pz-feature__body { padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pz-feature__title { font-size: 1.7rem; margin: 0; }
.pz-feature__dek { color: var(--pz-ink-soft); }
.pz-feature__dek p { margin: 0; }
.pz-feature .pz-cta { align-self: flex-start; margin-top: 0.5rem; }
@media (max-width: 720px) { .pz-feature { grid-template-columns: 1fr; } }

/* ---- Karten ---- */
.pz-card { display: flex; flex-direction: column; border: 1px solid var(--pz-line); background: var(--pz-paper); text-decoration: none; color: inherit; transition: border-color 0.16s ease; }
.pz-card:hover { border-color: var(--pz-ink); text-decoration: none; }
.pz-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--pz-line); }
.pz-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pz-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pz-card__title { font-size: 1.15rem; margin: 0; }
.pz-card__link { font-family: var(--pz-display); font-weight: 700; font-size: 0.9rem; color: var(--pz-red); margin-top: auto; }

.pz-empty { color: var(--pz-ink-soft); padding: 2rem 0; }

/* ---- Pagination ---- */
.pagination, .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 2.5rem 0; }
.pagination .page-numbers { display: inline-flex; min-width: 2.6em; height: 2.6em; align-items: center; justify-content: center; padding: 0 0.6em; border: 1px solid var(--pz-line); font-family: var(--pz-display); font-weight: 600; color: var(--pz-ink); }
.pagination .page-numbers.current { background: var(--pz-ink); color: #fff; border-color: var(--pz-ink); }
.pagination a.page-numbers:hover { border-color: var(--pz-red); color: var(--pz-red); text-decoration: none; }

/* ---- Artikel ---- */
.pz-article__head { padding-top: 2.5rem; }
.pz-article__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.pz-article__meta { color: var(--pz-ink-mute); font-family: var(--pz-display); font-size: 0.9rem; }
.pz-article__hero { margin: 1.5rem auto 2rem; }
.pz-article__hero img { width: 100%; border: 1px solid var(--pz-line); }
.pz-content { font-size: 1.075rem; }
.pz-content h2 { font-size: 1.7rem; margin-top: 2em; }
.pz-content h3 { font-size: 1.3rem; margin-top: 1.6em; }
.pz-content img { border: 1px solid var(--pz-line); margin: 1.5rem 0; }
.pz-related { margin-top: 3.5rem; }

/* ---- Redaktions-Bausteine (pz-- Klassen im Beitrag) ---- */

/* Vergleichstabelle */
.pz-vergleich { overflow-x: auto; border-top: 2px solid var(--pz-ink); border-bottom: 2px solid var(--pz-ink); margin: 2rem 0; }
.pz-vergleich table { min-width: 640px; }
.pz-vergleich th, .pz-vergleich td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--pz-line); }
.pz-vergleich thead th { background: var(--pz-navy); color: #fff; font-family: var(--pz-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; }
.pz-vergleich tbody tr.is-first { background: var(--pz-red-tint); }
.pz-note { font-family: var(--pz-display); font-weight: 900; font-variant-numeric: tabular-nums; }

/* Testsieger-Media-Badge */
.pz-media-badge { position: relative; display: inline-block; }
.pz-media-badge .pz-badge-winner { position: absolute; top: 0.75rem; right: 0.75rem; width: 92px; height: auto; }

/* Pro / Contra */
.pz-pro-contra { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border: 1px solid var(--pz-line); padding: 1.5rem; margin: 2rem 0; }
@media (max-width: 560px) { .pz-pro-contra { grid-template-columns: 1fr; } }
.pz-pro-contra h4 { font-family: var(--pz-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.75rem; }
.pz-pro-contra .pz-pro h4 { color: var(--pz-good); }
.pz-pro-contra .pz-contra h4 { color: var(--pz-bad); }
.pz-pro-contra ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pz-pro-contra li { padding-left: 1.6rem; position: relative; }
.pz-pro li::before { content: "✓"; position: absolute; left: 0; color: var(--pz-good); font-weight: 700; }
.pz-contra li::before { content: "✕"; position: absolute; left: 0; color: var(--pz-bad); font-weight: 700; }

/* Hinweiskasten */
.pz-hinweis { border: 1px solid var(--pz-line); border-left: 4px solid var(--pz-navy); background: var(--pz-panel); padding: 1.25rem 1.5rem; margin: 2rem 0; }
.pz-hinweis__title { font-family: var(--pz-display); font-weight: 800; margin: 0 0 0.4rem; }

/* Score-Anzeige */
.pz-score { display: inline-flex; align-items: center; gap: 0.75rem; }
.pz-score__value { width: 62px; height: 62px; display: grid; place-items: center; color: #fff; font-family: var(--pz-display); font-weight: 900; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pz-score__label { font-family: var(--pz-display); font-weight: 700; }
.pz-score__label small { display: block; color: var(--pz-ink-soft); font-weight: 600; }

/* Teilnoten-Balken */
.pz-bars { display: flex; flex-direction: column; gap: 0.75rem; margin: 2rem 0; }
.pz-bar { display: grid; grid-template-columns: 170px 1fr 46px; align-items: center; gap: 1rem; }
.pz-bar__label { color: var(--pz-ink-soft); font-size: 0.95rem; }
.pz-bar__track { height: 10px; background: var(--pz-panel); border: 1px solid var(--pz-line); }
.pz-bar__fill { display: block; height: 100%; }
.pz-bar__val { font-family: var(--pz-display); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pz-bar { grid-template-columns: 110px 1fr 42px; } }

/* Datenkasten */
.pz-datenkasten { border: 1px solid var(--pz-line); margin: 2rem 0; }
.pz-datenkasten dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.pz-datenkasten dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--pz-line); }
.pz-datenkasten dt { color: var(--pz-ink-soft); }
.pz-datenkasten dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pz-datenkasten dl { grid-template-columns: 1fr; } }

/* Angebotsblock */
.pz-angebot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; border: 2px solid var(--pz-gold); background: #FFFDF5; padding: 1.5rem; margin: 2rem 0; }
.pz-angebot__price { font-family: var(--pz-display); font-weight: 900; font-size: 1.8rem; }
.pz-angebot__meta { color: var(--pz-ink-soft); font-size: 0.9rem; }
.pz-angebot .pz-cta { margin-left: auto; }
@media (max-width: 480px) { .pz-angebot .pz-cta { margin-left: 0; width: 100%; justify-content: center; } }

/* Fazit */
.pz-fazit { border: 1px solid var(--pz-line); border-left: 5px solid var(--pz-red); padding: 1.5rem; margin: 2rem 0; }
.pz-fazit__title { font-family: var(--pz-display); font-weight: 800; margin: 0 0 0.5rem; }

/* Produktkarte (Bild + Kauf-Link) */
.pz-produkt { display: grid; grid-template-columns: 160px 1fr; gap: 1.25rem; align-items: center; border: 1px solid var(--pz-line); padding: 1.25rem; margin: 1.25rem 0; }
.pz-produkt__img { aspect-ratio: 1 / 1; border: 1px solid var(--pz-line); background: var(--pz-band); display: grid; place-items: center; text-align: center; color: var(--pz-ink-mute); font-family: var(--pz-display); font-size: 0.78rem; line-height: 1.3; padding: 0.5rem; }
.pz-produkt__img img { width: 100%; height: 100%; object-fit: contain; }
.pz-produkt__body h3 { margin: 0.15rem 0 0.35rem; }
.pz-produkt__meta { color: var(--pz-ink-soft); font-size: 0.98rem; margin: 0.25rem 0 0; }
.pz-produkt__buy { display: flex; align-items: center; gap: 1rem; margin-top: 0.85rem; flex-wrap: wrap; }
.pz-produkt__price { font-family: var(--pz-display); font-weight: 700; color: var(--pz-ink-soft); }
@media (max-width: 520px) { .pz-produkt { grid-template-columns: 1fr; } }
.pz-produkt { position: relative; }
.pz-produkt__img { position: relative; }
.pz-produkt__img img.pz-produkt__seal { position: absolute; top: 6px; left: 6px; width: 54px; height: auto; z-index: 1; }

/* Shop-Angebote pro Produkt (Preisvergleich) */
.pz-offers { display: flex; flex-direction: column; border-top: 1px solid var(--pz-line); margin-top: 0.85rem; }
.pz-offer { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--pz-line); color: inherit; }
.pz-offer:hover { color: inherit; text-decoration: none; }
.pz-offer__logo { height: 20px; width: auto; object-fit: contain; }
.pz-offer__price { font-family: var(--pz-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.pz-offer__go { font-family: var(--pz-display); font-weight: 700; font-size: 0.82rem; color: #fff; background: var(--pz-red); padding: 0.45rem 0.9rem; white-space: nowrap; }
.pz-offer:hover .pz-offer__go { background: var(--pz-red-strong); }
@media (max-width: 420px) { .pz-offer { grid-template-columns: 70px 1fr auto; gap: 0.6rem; } .pz-offer__go { padding: 0.4rem 0.6rem; } }

/* "Artikel hilfreich?"-Leiste */
.pz-helpful { display: flex; align-items: center; gap: 1.25rem; border: 1px solid var(--pz-line); padding: 1rem 1.25rem; margin: 2.5rem 0 1.5rem; flex-wrap: wrap; }
.pz-helpful__q { font-family: var(--pz-display); font-weight: 700; }
.pz-helpful button { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--pz-line); background: var(--pz-paper); padding: 0.5rem 0.9rem; cursor: pointer; font-family: var(--pz-display); font-weight: 600; color: var(--pz-ink); }
.pz-helpful button:hover { border-color: var(--pz-ink); }
.pz-helpful button.up:hover { color: var(--pz-good); border-color: var(--pz-good); }
.pz-helpful button.down:hover { color: var(--pz-bad); border-color: var(--pz-bad); }
.pz-helpful button[disabled] { opacity: 0.55; cursor: default; }
.pz-helpful__thanks { color: var(--pz-good); font-weight: 600; }

/* Verwandte Suchen */
.pz-tags { margin: 1.5rem 0 2.5rem; }
.pz-tags h3 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.pz-tags__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pz-tag { border: 1px solid var(--pz-line); padding: 0.4rem 0.9rem; font-size: 0.9rem; color: var(--pz-ink); }
.pz-tag:hover { border-color: var(--pz-red); color: var(--pz-red); text-decoration: none; }

/* Testalarm-Box */
.pz-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; background: var(--pz-band); border: 1px solid var(--pz-line); padding: 1.25rem 1.5rem; margin: 2.5rem 0; }
.pz-alert__ic { width: 46px; height: 46px; display: grid; place-items: center; background: var(--pz-navy); color: #fff; border-radius: 50%; flex: none; }
.pz-alert__t b { font-family: var(--pz-display); }
.pz-alert__t small { color: var(--pz-ink-2); }
@media (max-width: 620px) { .pz-alert { grid-template-columns: 1fr; } }

/* Modal */
.pz-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.pz-modal[hidden] { display: none; }
.pz-modal__bg { position: absolute; inset: 0; background: rgba(26,26,46,0.55); }
.pz-modal__box { position: relative; background: var(--pz-paper); border: 2px solid var(--pz-ink); max-width: 460px; width: 100%; padding: 2rem; }
.pz-modal__box h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.pz-modal__close { position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--pz-ink-2); }

/* Formulare */
.pz-form { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.pz-form input[type="email"] { flex: 1; min-width: 180px; border: 1px solid var(--pz-line-strong); padding: 0.75rem; font-size: 1rem; background: #fff; color: var(--pz-ink); }
.pz-form button { font-family: var(--pz-display); font-weight: 700; background: var(--pz-red); color: #fff; border: 0; padding: 0.75rem 1.25rem; cursor: pointer; }
.pz-form button:hover { background: var(--pz-red-strong); }
.pz-form__done { color: var(--pz-good); font-weight: 600; margin: 0; }
.pz-consent { font-size: 0.8rem; color: var(--pz-ink-3); margin-top: 0.75rem; }

/* Footer-Newsletter */
.pz-foot-news { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 1.5rem; padding-top: 1.5rem; }
.pz-foot-news p { color: #C7C6D2; max-width: 52ch; }

/* Inhaltsverzeichnis (Ratgeber & lange Tests) */
.pz-toc { border: 1px solid var(--pz-line); background: var(--pz-panel); padding: 1.1rem 1.4rem; margin: 0 0 2rem; }
.pz-toc__title { font-family: var(--pz-display); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pz-ink-3); margin: 0 0 0.6rem; }
.pz-toc ol { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.pz-toc a { color: var(--pz-ink); }
.pz-toc a:hover { color: var(--pz-red); }

/* Autoren-Box */
.pz-author { display: flex; gap: 1rem; align-items: center; border: 1px solid var(--pz-line); padding: 1.25rem; margin: 2.5rem 0 1rem; }
.pz-author img { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.pz-author__name { font-family: var(--pz-display); font-weight: 800; }
.pz-author__bio { color: var(--pz-ink-2); font-size: 0.95rem; }

/* FAQ-Akkordeon (natives details/summary) */
.pz-faq { border-top: 1px solid var(--pz-line); margin: 1.5rem 0 2.5rem; }
.pz-faq details { border-bottom: 1px solid var(--pz-line); }
.pz-faq summary { cursor: pointer; font-family: var(--pz-display); font-weight: 700; padding: 1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pz-faq summary::-webkit-details-marker { display: none; }
.pz-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--pz-red); flex: none; }
.pz-faq details[open] summary::after { content: "\2013"; }
.pz-faq details > *:not(summary) { padding-bottom: 1rem; margin-top: -0.25rem; color: var(--pz-ink-2); }

/* Diagramm-Rahmen (nutzt .pz-bars innen) */
.pz-chart { border: 1px solid var(--pz-line); padding: 1.25rem 1.5rem; margin: 2rem 0; }
.pz-chart__title { font-family: var(--pz-display); font-weight: 800; margin-bottom: 0.2rem; }
.pz-chart__cap { color: var(--pz-ink-3); font-size: 0.85rem; margin-bottom: 1rem; }
.pz-chart .pz-bars { margin: 0; }
.pz-chart .pz-bar { grid-template-columns: 140px 1fr 74px; }
.pz-chart .pz-bar__val { white-space: nowrap; }
@media (max-width: 560px) { .pz-chart .pz-bar { grid-template-columns: 96px 1fr 64px; } .pz-chart .pz-bar__val { font-size: 0.85rem; } }

/* Ressort-Reiter */
.pz-ressort-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--pz-ink); margin: 0 0 2rem; flex-wrap: wrap; overflow-x: auto; }
.pz-rtab { font-family: var(--pz-display); font-weight: 700; padding: 0.8rem 1.2rem; color: var(--pz-ink-2); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pz-rtab:hover { color: var(--pz-red); text-decoration: none; }
.pz-rtab.is-active { color: var(--pz-ink); border-bottom-color: var(--pz-red); }
.pz-view-lead { color: var(--pz-ink-2); margin: -0.5rem 0 1.5rem; }

/* Bestenliste */
.pz-bestenliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pz-line); }
.pz-bestenliste > li a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--pz-line); color: inherit; }
.pz-bestenliste > li a:hover { color: inherit; text-decoration: none; }
.pz-best__rank { font-family: var(--pz-display); font-weight: 900; font-size: 1.6rem; color: var(--pz-red); min-width: 1.6em; text-align: center; }
.pz-best__title { font-family: var(--pz-display); font-weight: 700; font-size: 1.15rem; }
.pz-bestenliste > li a:hover .pz-best__title { color: var(--pz-red); }
.pz-best__go { font-family: var(--pz-display); font-weight: 700; color: var(--pz-red); white-space: nowrap; }

/* Testsieger-Liste */
.pz-testsieger-list { display: flex; flex-direction: column; border-top: 1px solid var(--pz-line); }
.pz-tsrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--pz-line); color: inherit; }
.pz-tsrow:hover { text-decoration: none; }
.pz-tsrow__badge img { width: 44px; height: 44px; display: block; }
.pz-tsrow__t { display: flex; flex-direction: column; font-family: var(--pz-display); font-weight: 700; font-size: 1.1rem; }
.pz-tsrow__t small { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pz-red); }
.pz-tsrow:hover .pz-tsrow__t { color: var(--pz-red); }