/* ═══════════════════════════════════════════════════════════
   Unique Lounge — Pigmentflecken & Pigmentverschiebungen
   Ergänzendes Stylesheet, ausschließlich von
   pigmentflecken-hamburg-eppendorf.html geladen.
   stil.css bleibt unverändert.
   Alle Werte stammen aus dem bestehenden Design-System.
   ═══════════════════════════════════════════════════════════ */

/* ───── Abschnittsabstände ───────────────────────────────── */

.pf-auftakt   { padding-top: clamp(3.5rem, 7vw, 6rem); }
.pf-anschluss { padding-top: 0; }

/* ───── Textspalten ──────────────────────────────────────── */

.pf-kopf   { max-width: 52ch; }
.pf-spalte { max-width: 62ch; }

.pf-lead {
  margin-top: 1.8rem;
  color: var(--tinte);
}

.pf-nach-titel { margin-top: 1.2rem; }
.pf-preis      { margin-top: 1.4rem; }

/* ───── Überschrift im Einordnungsblock ──────────────────── */

.pf-titel-klein { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* ───── Tastengruppen ────────────────────────────────────── */

.pf-tasten       { margin-top: 2rem; }
.pf-tasten-eng   { margin-top: 1.4rem; }
.pf-tasten-mitte { justify-content: center; }

/* ───── Verweis in der Braue ─────────────────────────────── */

.pf-braue-verweis {
  text-decoration: none;
  color: inherit;
}

/* ───── Einwilligungsbanner ──────────────────────────────── */
/* Ersetzt das bisherige Inline-Attribut style="display:none".
   Das Skript blendet das Banner weiterhin über
   element.style.display ein und aus; ein Inline-Wert hat
   Vorrang vor dieser Regel, das Verhalten bleibt identisch. */

#cookie-banner { display: none; }