/* PREQ Rechtsseiten im neuen Auftritt (Impressum, Datenschutz, AGB, Widerruf, Nutzungsbedingungen, Haftungsausschluss, Barrierefreiheit,
 * Produktsicherheit — de/en) und Rahmen des Kuendigungswegs.
 *
 * Wird NACH preq-neu.css (Seitenrand .pn-wrap, Farbwerte, --pn-blau-rgb) und preq-neu-ueber.css (Hero .pn-uhero*, Sektion .pn-usec) geladen
 * (homepage/preq-neu-legal-kopf.php). Eigene Klassen: pn-lg-*.
 *
 * Der Inhalt kommt als HTML aus der Datenbank (nur p, h2-h5, strong, em, br, a, ul, li — keine Klassen, keine Inline-Stile): gestaltet wird er
 * ueber Elementselektoren UNTER .pn-lg-text. Der Wortlaut bleibt unberuehrt, diese Datei aendert nur die Optik.
 *
 * ⚠ Das Design-System setzt h1-h4 als `hN:not(.cms-heading)` (Spezifitaet 0,1,1) mit `font-size: var(--hN-size) !important` und `margin: 0`: eine
 *   Regel braucht Vorfahr + Element UND ein eigenes `!important` an der Schriftgroesse, sonst verliert sie Groesse und Abstand
 *   (gotcha_designsystem_h2_h3_not_cms_heading_schlaegt_einzelklassen). Am lebenden Stand gemessen, nicht angenommen.
 */

/* ---------- Hero: wie der Kopf der Kontaktseite, nur ohne Fliesstext und etwas niedriger ---------- */
.pn-lg-hero .pn-uhero-inner { min-height: 250px; }
.pn-lg-hero .pn-uhero-text { max-width: 900px; }
.pn-lg-hero h1 { margin-bottom: 0; font-size: clamp(1.9rem, 5vw + .5rem, 3rem) !important; }

/* ---------- Lesespalte ---------- */
.pn-lg-sec { padding-top: clamp(40px, 5vw, 64px); }
.pn-lg-text {
    max-width: 820px; color: rgba(255, 255, 255, .84); font-size: 1rem; line-height: 1.75;
    overflow-wrap: anywhere;   /* lange Adressen/E-Mail-Adressen sprengen die Spalte nicht */
}
.pn-lg-text > :first-child { margin-top: 0; }

.pn-lg-text h2 {
    margin: 56px 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff; font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important;
}
.pn-lg-text h3 { margin: 36px 0 12px; color: #fff; font-weight: 600; line-height: 1.3; font-size: 1.2rem !important; }
.pn-lg-text h4 { margin: 28px 0 8px; color: rgba(255, 255, 255, .95); font-weight: 600; line-height: 1.35; font-size: 1.05rem !important; }
.pn-lg-text h5 { margin: 24px 0 8px; color: rgba(255, 255, 255, .9); font-weight: 600; line-height: 1.4; font-size: .95rem; letter-spacing: .02em; }
.pn-lg-text h2:first-child, .pn-lg-text h3:first-child, .pn-lg-text h4:first-child, .pn-lg-text h5:first-child { margin-top: 0; }

.pn-lg-text p { margin: 0 0 16px; }
.pn-lg-text ul, .pn-lg-text ol { margin: 0 0 18px; padding-left: 1.4em; }
.pn-lg-text li { margin: 0 0 8px; }
.pn-lg-text li::marker { color: #22D3EE; }
.pn-lg-text strong { color: #fff; font-weight: 600; }
.pn-lg-text em { font-style: italic; }
.pn-lg-text hr { margin: 32px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); }

/* Links cyan, beim Ueberfahren weiss (das Design-System faerbt `a:hover` sonst dunkelblau — dieselbe Falle wie auf "Fuer Partner") */
.pn-lg-text a { color: #22D3EE; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease; }
.pn-lg-text a:hover { color: #fff; }
.pn-lg-text a:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; border-radius: 2px; }

@media (max-width: 768px) {
    .pn-lg-hero .pn-uhero-inner { min-height: 0; }
    .pn-lg-text { font-size: .98rem; }
    .pn-lg-text h2 { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pn-lg-text a { transition: none; } }