/* ============================================================
   CERTAILEX — Cookie-/Consent-Banner
   Separate Datei (Fundament css/certailex.css unangetastet).
   Reuses foundation components: .btn / .btn-secondary / .btn-tertiary /
   .btn-sm / .btn-block, .checkbox/.box/.cb-text, .eyebrow, .chip/.chip-surface,
   .icon, --shadow-ambient. The banner/settings SHELL is new (no existing
   component is a consent surface) — built DS-conform: 0px radius, no 1px lines,
   tonal surface shift + warm floating shadow for separation.
   ============================================================ */

/* ─── Banner shell (NEW — no existing consent component) ───── */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;                 /* above nav (100) + scan-bar (200) */
  display: none;
  background: var(--color-surface-lowest);   /* white floating card on page */
  box-shadow: 0 -14px 40px var(--shadow-ambient);  /* warm float, no hairline */
  color: var(--text-primary);
}
.consent.is-open { display: block; }

.consent-inner {
  max-width: var(--content-max, 1320px);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 6vw, 96px);
}

/* Eyebrow margin trimmed for the compact bar */
.consent .eyebrow { margin-bottom: 14px; }

.consent-headline {
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: 12px;
}
.consent-text {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-editorial);
  max-width: var(--measure, 72ch);
}
.consent-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bar view: text block, then right-aligned action cluster (clean institutional stack) */
.consent-bar {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
/* Accept + reject sit at EQUAL weight (no dark pattern). Settings = tertiary link. */
.consent-actions .btn { white-space: nowrap; }

/* ─── Settings panel (granular) ────────────────────────────── */
.consent-panel { display: none; }
.consent.show-settings .consent-bar { display: none; }
.consent.show-settings .consent-panel { display: block; }

.consent-panel .consent-headline { margin-bottom: 18px; }

.consent-cats {
  display: grid;
  gap: 12px;
  margin: 22px 0 26px;
}
/* Category block — tonal surface shift, no border */
.consent-cat {
  background: var(--color-surface-container);
  padding: 22px clamp(20px, 2.4vw, 28px);
}
.consent-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.consent-cat-title {
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.consent-cat-desc {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-editorial);
  max-width: var(--measure, 72ch);
}
/* The opt-in checkbox row reuses canonical .checkbox/.box/.cb-text verbatim. */
.consent-cat .checkbox { margin-top: 2px; }

.consent-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ─── Gated booking slot (Kontakt #bookingSlot) ────────────── */
/* The activation gate reuses the existing .booking-slot visual; only the
   extra activate row + fine print are new. */
.bs-gate, .bs-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.bs-gate[hidden], .bs-live[hidden] { display: none; }
.bs-activate { margin-top: 4px; }
.bs-fine {
  font-size: var(--text-label);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  max-width: 40ch;
}
a.bs-fine { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ─── Collision: hide mobile scan-bar while consent is open ── */
body.consent-active .scan-bar { display: none; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .consent-bar {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .consent-actions { justify-content: flex-start; }
  .consent-actions .btn { flex: 1 1 auto; }
  .consent-cat-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .consent.is-open .consent-inner {
    animation: consent-rise 320ms ease both;
  }
  @keyframes consent-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}