/* =============================================================================
   base.css — Element-Defaults aus den Design-Tokens.
   Lädt NACH assets/css/tokens.css (liefert die Custom Properties).
   Nur Element-/Basis-Styles; Komponenten kommen in Schritt 3.
   ============================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body), Georgia, serif;          /* Lora */
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  background-color: var(--color-bg-default);
}

/* --- Überschriften: Montserrat --------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display), system-ui, sans-serif; /* Montserrat */
  color: var(--color-text-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-h1); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-heading-large); }
h2 { font-size: var(--fs-h2); font-weight: var(--font-weight-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--font-weight-semibold); }

/* === TEST Fraunces (Branch experiment/fraunces-display) ============================
   H1/H2 als High-Contrast-Display-Serif (type-as-hero). font-optical-sizing:auto →
   größere Headline = höhere opsz = mehr Kontrast; Gewicht 600 wirkt geerdet, nicht
   verspielt. H3–H6, Phase-Labels, Buttons, Nav bleiben Montserrat (--font-display).
   Reversibel: dieser Block + --font-headline-Token + theme.json-Family entfernen. */
h1, h2 {
  font-family: var(--font-headline), Georgia, serif;
  font-optical-sizing: auto;
  font-weight: var(--font-weight-semibold);
}
h1 { line-height: 1.08; letter-spacing: -0.015em; }
h2 { line-height: 1.15; letter-spacing: -0.01em; }
/* === /TEST Fraunces =============================================================== */

p { margin: 0 0 1.25em; }

/* --- Links: Petrol, unterstrichen ----------------------------------------- */
a {
  color: var(--color-link-inline);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:hover,
a:focus { color: var(--color-link-inline-hover); }

/* --- Fokus: AA-sichtbar ---------------------------------------------------- */
:focus-visible {
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

img, svg, video { max-width: 100%; height: auto; }

/* --- Layout-Container ------------------------------------------------------ */
.lcc-container {
  max-width: var(--content-max-width-max);
  margin-inline: auto;
  padding-inline: var(--space-inline-x);
}

.lcc-main { display: block; }

/* --- Button / CTA (Default-Pattern aus den Tokens) ------------------------- */
.lcc-button,
.wp-block-button__link {
  display: inline-block;
  background-color: var(--button-bg);
  color: var(--button-text-color);
  font-family: var(--button-font), system-ui, sans-serif;
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  min-height: var(--button-min-height);
  padding: var(--button-padding);
  border: 0;
  border-radius: var(--button-radius);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.lcc-button:hover,
.wp-block-button__link:hover { background-color: var(--button-hover); }
.lcc-button:active,
.wp-block-button__link:active { background-color: var(--button-active); }
.lcc-button[disabled],
.lcc-button[aria-disabled="true"] { opacity: var(--button-disabled-opacity); cursor: not-allowed; }

/* --- Mobile: kleinere Headline-Größen + Container-Padding ------------------ */
@media (max-width: 768px) {
  h1 { font-size: var(--fs-h1-mobile); }
  h2 { font-size: var(--fs-h2-mobile); }
  h3 { font-size: var(--fs-h3-mobile); }
  .lcc-container { padding-inline: var(--space-inline-x-mobile); }
}