/* ============================================================
   elbabe · Base — Reset, Typografie, Layout-Primitives, Utilities
   Mobile-first. Alle Werte kommen aus css/tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* ---- Headings ---- */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; font-weight: var(--fw-semi); color: var(--amber); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
p  { color: var(--text-light); }
p strong, .text strong { color: var(--amber); font-weight: var(--fw-bold); }

a { color: var(--amber); }

/* Sichtbarer Fokus-Ring für Tastatur-Navigation (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--amber-mid); outline-offset: 2px; border-radius: var(--radius-2xs); }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: var(--section-y) 0; position: relative; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(1.8rem, 5vw, 2.8rem); }
.section-head p { margin-top: 0.7rem; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-04); font-weight: var(--fw-black); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--amber); padding: 0.32rem 0.9rem; border-radius: var(--radius-pill);
  background: rgba(var(--c-yellow-rgb), 0.20); margin-bottom: 0.9rem;
}
.eyebrow.is-orange { background: rgba(var(--c-orange-rgb), 0.14); }
.eyebrow.is-steel  { background: rgba(var(--c-steel-rgb), 0.14); }

/* ---- Buttons (Touch ≥ 44px) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 46px; padding: 0.7rem 1.6rem;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-12);
  text-decoration: none; border: none; border-radius: var(--radius-pill); cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.btn-primary { background: linear-gradient(135deg, var(--orange), var(--yellow-deep)); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.btn-outline { background: transparent; border: 2px solid var(--amber-mid); color: var(--amber); }
.btn-outline:hover { background: rgba(var(--c-yellow-rgb), 0.18); transform: translateY(-2px); }
.btn-ghost { background: rgba(var(--c-white-rgb), 0.6); color: var(--amber); }
.btn-ghost:hover { background: #fff; transform: translateY(-2px); }

/* ---- Link-Pfeil ---- */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: var(--fw-bold); font-size: var(--fs-08); color: var(--amber);
  text-decoration: none; background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 0;
}
.link-arrow::after { content: '→'; transition: transform var(--t-fast); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---- Accordion (weiterlesen) ---- */
.accordion { border-top: 1px solid rgba(var(--c-amber-rgb), 0.14); }
.accordion > summary {
  list-style: none; cursor: pointer; padding: 0.95rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: var(--fw-bold); color: var(--amber); font-size: var(--fs-13);
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after { content: '+'; font-size: 1.3rem; color: var(--amber-mid); transition: transform 0.25s ease; }
.accordion[open] > summary::after { transform: rotate(45deg); }
.accordion .accordion-body { padding: 0 0 1.1rem; }
.accordion .accordion-body > * + * { margin-top: 0.8rem; }
.accordion--wide { max-width: 620px; margin: var(--space-5) auto 0; text-align: left; }

/* ---- Utilities ---- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.no-scroll { overflow: hidden; }

/* Inhalts-Abstände (ersetzen frühere inline styles) */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); }

/* Text-Betonungen (ersetzen frühere inline styles) */
.strong-amber { font-weight: var(--fw-bold); color: var(--amber); }
.strong-steel { font-weight: var(--fw-bold); color: var(--steel); }
.text-muted   { color: var(--text-light); }
.text-sm      { font-size: var(--fs-08); }
.text-small   { font-size: var(--fs-small); }
.lead-sm      { font-size: var(--fs-10); color: var(--text-light); }
.is-hidden    { display: none; }

/* Abschnitts-Feinabstände (ersetzen frühere inline styles) */
.pt-sm { padding-top: 0.5rem; }
.pt-md { padding-top: 1rem; }

/* ---- Unterseiten (Archiv, Impressum, Datenschutz) ---- */
.subhero { padding: clamp(2.4rem, 7vw, 4rem) 0 clamp(1.2rem, 4vw, 2rem); text-align: center; }
.subhero .eyebrow { margin-bottom: 0.7rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: var(--fw-bold); font-size: var(--fs-08); text-decoration: none; color: var(--amber); margin-bottom: 0.5rem; }
.back-link::before { content: '←'; }
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: var(--fs-prose-h2); margin: 1.8rem 0 0.6rem; }
.prose h3 { margin: 1.4rem 0 0.4rem; }
.prose p, .prose li { color: var(--text-light); }
.prose p + p { margin-top: 0.8rem; }
.prose ul { margin: 0.6rem 0 0.6rem 1.2rem; }
.note { background: rgba(var(--c-yellow-rgb), 0.12); border: 1px solid rgba(var(--c-yellow-rgb), 0.3); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-size: var(--fs-10); color: var(--text-light); }

/* ---- Reveal-on-scroll (deaktiviert bei reduced-motion) ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}