/* ═══════════════════════════════════════════════════════════
   Unique Lounge — Kosmetik für Männer
   Ergänzendes Stylesheet, ausschließlich von
   herren-kosmetik-hamburg-eppendorf.html geladen.
   stil.css bleibt unverändert.
   Alle Werte stammen aus dem bestehenden Design-System.
   ═══════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

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

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

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

.hk-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; }