/*
 * PreQ — Seite "Digitaler Produktpass" (/de/dpp, /en/dpp), Layout wie "Fuer Partner".
 * Wird NACH preq-neu.css, preq-neu-ueber.css und preq-neu-partner.css geladen und nutzt deren Bausteine: Hero (.pn-uhero*),
 * Abschnitte (.pn-usec, .pn-uband, .pn-uh2), Kacheln, Hinweiskasten und Fragen (.pn-pt-*), Buttons (.pn-btn).
 * Eigene Klassen: pn-dpp-* (Hinweis, Standbild, Film, Fliesstext, Tabellen, Abschluss). Farben: Cyan #22D3EE, Flaechen #111114 / #1D1D21, kein Glow.
 */

/* ---------- Hero: Hinweis (fett) und Standbild des Films ---------- */
.pn-dpp-aussage { margin: 32px 0 0; max-width: 760px; padding: 2px 0 2px 18px; border-left: 3px solid #22D3EE; color: #fff;
    font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
.pn-dpp-aussage--hero { margin: 0 0 28px; max-width: 520px; font-size: 1rem; }

.pn-dpp-teaser { position: relative; display: block; width: min(560px, 100%); justify-self: center; overflow: hidden; border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14); background: #111114; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.pn-dpp-teaser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Abspielknopf unten links: in der Mitte laege er auf der Frage des Standbilds ("Was steckt eigentlich in deiner Jacke?") */
.pn-dpp-teaser-play { position: absolute; inset: 0; display: grid; place-items: end start; padding: 20px; }
.pn-dpp-teaser-play span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #22D3EE; color: #0f172a;
    box-shadow: 0 4px 16px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease; }
.pn-dpp-teaser:hover .pn-dpp-teaser-play span { transform: scale(1.06); box-shadow: 0 6px 22px rgba(34,211,238,.35); }

/* Das Design-System setzt h2 per !important auf 2,5 rem; auf dem Telefon liefe "Rechtsgrundlagen" ueber den Rand. Auf dem Desktop bleibt es bei 2,5 rem. */
.pn-usec .pn-uh2 { font-size: clamp(1.5rem, 5.4vw + .5rem, 2.5rem) !important; overflow-wrap: break-word; }

/* ---------- Fliesstext und Hinweiszeilen ---------- */
.pn-dpp-text { margin: 16px 0 0; max-width: 760px; color: rgba(255,255,255,.78); font-size: 1.0625rem; line-height: 1.6; }
.pn-dpp-text strong { color: #fff; font-weight: 600; }
.pn-dpp-note { margin: 24px 0 0; max-width: 760px; color: rgba(255,255,255,.62); font-size: .95rem; line-height: 1.55; }

/* ---------- Erklaerfilm und Sprechertext ---------- */
.pn-dpp-film { margin: 40px 0 0; max-width: 1100px; }
.pn-dpp-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12); background: #111114; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.pn-dpp-film video:focus-visible { outline: 2px solid #22D3EE; outline-offset: 4px; }
.pn-dpp-film figcaption { margin-top: 12px; color: rgba(255,255,255,.6); font-size: .85rem; line-height: 1.5; }
/* der Sprechertext ist ein einzelner aufklappbarer Eintrag im Stil der Fragen: Absaetze mit Abstand */
.pn-dpp-sprech .pn-pt-answer p + p { margin-top: 14px; }

/* ---------- Schritte: nummerierte Liste ohne Aufzaehlungszeichen ---------- */
.pn-dpp-schritte { padding: 0; list-style: none; }

/* ---------- Tabellen: Spalten am Desktop, unter 760 px Karten mit Beschriftung je Zelle ---------- */
.pn-dpp-tabelle { width: 100%; max-width: 1100px; margin: 32px 0 0; border-collapse: collapse; font-size: .95rem; line-height: 1.5; text-align: left; }
.pn-dpp-tabelle th, .pn-dpp-tabelle td { padding: 16px 24px 16px 0; vertical-align: top; text-align: left; background: none; border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12); }
.pn-dpp-tabelle thead th { padding-top: 0; padding-bottom: 12px; border-bottom-color: rgba(255,255,255,.28); color: rgba(255,255,255,.6);
    font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pn-dpp-tabelle tbody th { width: 22%; color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; }
.pn-dpp-tabelle td { color: rgba(255,255,255,.78); }
.pn-dpp-tabelle--quelle tbody th { width: 46%; }
.pn-dpp-tabelle a { color: #22D3EE; text-decoration: none; }
.pn-dpp-tabelle a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } /* weiss: sonst gewinnt das Design-System mit "article a:hover" */
.pn-dpp-tabelle a:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; }

/* ---------- Abschluss: Anfrage ---------- */
.pn-dpp-cta { max-width: 900px; padding: clamp(28px, 4vw, 48px); border-radius: 20px; border: 1px solid rgba(34,211,238,.35);
    background: linear-gradient(160deg, rgba(34,211,238,.10), rgba(255,255,255,.02) 60%); box-shadow: 0 0 36px rgba(34,211,238,.10); }
.pn-dpp-cta .pn-pt-intro strong { color: #fff; font-weight: 600; }
.pn-dpp-cta .pn-btn { margin-top: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .pn-dpp-tabelle, .pn-dpp-tabelle tbody, .pn-dpp-tabelle tr, .pn-dpp-tabelle th, .pn-dpp-tabelle td { display: block; width: auto; }
    .pn-dpp-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .pn-dpp-tabelle tr { margin-top: 12px; padding: 18px 20px; border-radius: 14px; background: var(--pn-card-bg, #1D1D21); border: 1px solid rgba(255,255,255,.1); }
    .pn-dpp-tabelle th, .pn-dpp-tabelle td { padding: 0; border: 0; }
    .pn-dpp-tabelle tbody th, .pn-dpp-tabelle--quelle tbody th { width: auto; margin-bottom: 4px; font-size: 1.05rem; }
    .pn-dpp-tabelle td { margin-top: 10px; }
    .pn-dpp-tabelle td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: rgba(255,255,255,.55);
        font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
}
@media (max-width: 640px) {
    .pn-dpp-film { margin-top: 28px; }
    .pn-dpp-film video { border-radius: 12px; }
    .pn-dpp-teaser { border-radius: 12px; }
    .pn-dpp-teaser-play { padding: 14px; }
    .pn-dpp-teaser-play span { width: 48px; height: 48px; }
    .pn-dpp-cta .pn-btn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .pn-dpp-teaser-play span { transition: none; }
}