/* ============================================================================
   Auszeit Design-System v2 — SSOT für die Design-Sprache (Klassen & Regeln)
   ----------------------------------------------------------------------------
   Stand 2026-06-03. Verbindliche Referenz: agent/design-system.md.
   Rohtokens leben in global.css (:root, --color-* / --radius-* / --shadow-*) —
   diese Datei DUPLIZIERT sie NICHT, sondern baut die Design-Sprache (CTAs,
   Kontrast-Kontexte, Utilities) auf var(--color-*) darauf auf.
   Lade-Reihenfolge: nach concierge.css (gewinnt gegen Bestand, OHNE !important-Wall).
   Forward-only: wirkt auf neue, über head_assets.html generierte Seiten.
   ============================================================================ */

/* ── Ein paar Komfort-Aliasse auf die kanonischen Tokens (kein neuer Wert) ── */
:root {
  --az-section-pad: 100px;
  --az-section-pad-mobile: 60px;
  --az-content-max: 1200px;
}

/* ── CTAs — kanonische Klassen (design-system.md §6) ─────────────────────────
   Kontrast-Regel ist unverhandelbar:
   - dunkler BG  → Primär = Gold-Fill, Text dunkel · Sekundär = Gold-Outline
   - heller BG   → Primär = Dunkel-Fill, Text weiß · Sekundär = Dunkel-Outline
   Gold NIE als Text auf Gold und NIE als Fließtext auf Ivory.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  padding: .875rem 1.75rem;
  border-radius: var(--radius-sm);            /* 4px — Buttons */
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }

/* Default-Kontext = dunkler BG (Seitenstandard #0B0F14) */
.btn--primary {
  background: var(--color-gold);
  color: var(--color-dark-bg);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { background: var(--color-gold-light); color: var(--color-dark-bg); }

.btn--secondary {
  background: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.btn--secondary:hover { background: var(--color-gold); color: var(--color-dark-bg); }

/* Gold-Fill-Variante (z.B. Gradient-Block): Text MUSS dunkel sein */
.btn--gold-filled {
  background: var(--color-gold-gradient);
  color: var(--color-dark-bg);
  border-color: transparent;
}
.cta-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-sm);
}

/* ── Kontrast-Kontexte — Klassen statt Inline-Hex ────────────────────────────
   .section-light auf hellem BG dreht die CTAs automatisch auf den hellen Satz.
   So bleibt der Kontrast korrekt, ohne pro Seite Inline-Overrides.
   ------------------------------------------------------------------------- */
.section-light { background: var(--color-ivory); color: var(--color-charcoal); }
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--color-charcoal); }

.section-light .btn--primary {
  background: var(--color-charcoal);
  color: var(--color-white);
  box-shadow: 0 4px 24px rgba(26, 26, 26, .18);
}
.section-light .btn--primary:hover { background: var(--color-dark-bg); color: var(--color-white); }

.section-light .btn--secondary,
.section-light .cta-outline {
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  background: transparent;
}
.section-light .btn--secondary:hover { background: var(--color-charcoal); color: var(--color-white); }

.section-dark { background: var(--color-dark-bg); color: var(--color-text); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--color-white); }

/* ── Gold-Divider (design-system.md §5) ─────────────────────────────────── */
.gold-divider {
  width: 60px; height: 3px;
  margin: 1.25rem auto;
  background: var(--color-gold);
  border-radius: var(--radius-full);
}

/* ── Karten ─────────────────────────────────────────────────────────────── */
.ds-card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);            /* 12px — Karten */
  box-shadow: var(--shadow-sm);
}

/* ── Pills / Badges ─────────────────────────────────────────────────────── */
.ds-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: .35rem .85rem;
}