/* WordPress generates --wp--preset--* and --wp--custom--* from theme.json.
   Only opt-in theme classes and native blocks are styled here. */
.lotti-shell { padding: var(--wp--preset--spacing--40); }
.lotti-standard { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.lotti-standard > * + *, .lotti-prose > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.lotti-prose { --wp--style--block-gap: var(--wp--preset--spacing--40); }
.lotti-content { margin-block: 0; padding: 0; width: 100%; max-width: none; }
.lotti-heading, .wp-block-heading, .wp-block-post-title { overflow-wrap: anywhere; }
.wp-block-heading:where(h1), .wp-block-post-title:where(h1) { font-size: var(--wp--preset--font-size--h-1); }
.wp-block-heading:where(h2), .wp-block-post-title:where(h2) { font-size: var(--wp--preset--font-size--h-2); }
.wp-block-heading:where(h3) { font-size: var(--wp--preset--font-size--h-3); }
.wp-block-heading:where(h4) { font-size: var(--wp--preset--font-size--h-4); }
.wp-block-heading:where(h5) { font-size: var(--wp--preset--font-size--h-5); }
.wp-block-heading:where(h6) { font-size: var(--wp--preset--font-size--h-6); }
.wp-block-button__link:focus-visible, .lotti-shell a:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 4px; }

/*
 * Lotti Base – Brand foundation v1 (extracted from traininganmeldung.zip)
 * Loaded by the theme on all WordPress pages.
 * Tokens and named classes only. Do NOT copy original broad `header`, `footer`,
 * `body`, `ul` or global `[id]` selectors from the source landing page.
 */
:root, .editor-styles-wrapper {
  /* Semantic heading roles; scoped containers may opt into the secondary role. */
  --lotti-heading-color-primary: var(--wp--preset--color--heading-primary);
  --lotti-heading-color-secondary: var(--wp--preset--color--heading-secondary);
  --lotti-heading-color: var(--lotti-heading-color-primary);

  /* Source palette */
  --lotti-navy: var(--wp--preset--color--navy);
  --lotti-navy-light: var(--wp--preset--color--navy-soft);
  --lotti-text-muted: var(--wp--preset--color--text-muted);
  --lotti-coral: var(--wp--preset--color--coral);
  --lotti-coral-deep: var(--wp--preset--color--coral-deep);
  --lotti-cta-original: var(--wp--preset--color--cta-original); /* source; ~4.22:1 on white */
  --lotti-cta: var(--wp--preset--color--cta); /* accessible adaptation; ~5.37:1 on white */
  --lotti-cta-hover: var(--wp--preset--color--cta-hover);
  --lotti-background: var(--wp--preset--color--background);
  --lotti-surface: var(--wp--preset--color--surface);
  --lotti-surface-tint: var(--wp--preset--color--tint);
  --lotti-highlight-bg: var(--wp--preset--color--peach);
  --lotti-border: var(--wp--preset--color--border);

  /* Font family placeholders; local fonts loaded separately. */
  --lotti-font-body: var(--wp--preset--font-family--body);
  --lotti-font-heading: var(--wp--preset--font-family--heading);
  --lotti-font-handwriting: var(--wp--preset--font-family--handwriting);

  /* Source-based typography */
  --lotti-text-size: var(--wp--preset--font-size--body);
  --lotti-text-line-height: var(--wp--custom--line-height--body);
  --lotti-heading-weight: var(--wp--custom--heading--weight);
  --lotti-heading-leading: var(--wp--custom--line-height--heading);
  --lotti-heading-tracking: var(--wp--custom--heading--tracking);
  --lotti-h1-size: var(--wp--preset--font-size--h-1);
  --lotti-h2-size: var(--wp--preset--font-size--h-2);
  --lotti-h3-size: var(--wp--preset--font-size--h-3);

  --lotti-h4-size: var(--wp--preset--font-size--h-4);
  --lotti-h5-size: var(--wp--preset--font-size--h-5);
  --lotti-h6-size: var(--wp--preset--font-size--h-6);

  /* Reusable layout and shape values */
  --lotti-content-wide: var(--wp--style--global--wide-size);
  --lotti-content-readable: var(--wp--style--global--content-size); /* NEW standard, not a value from source */
  --lotti-page-gutter: var(--wp--custom--layout--gutter);
  --lotti-radius-field: var(--wp--custom--radius--field);
  --lotti-radius-card: var(--wp--custom--radius--card);
  --lotti-radius-panel: var(--wp--custom--radius--panel);
  --lotti-radius-pill: var(--wp--custom--radius--button);
  --lotti-section-space: var(--wp--custom--layout--section-space);
}

/* Named primitives for reusable AI / Gutenberg output */
.lotti-container {
  width: min(var(--lotti-content-wide), calc(100% - (2 * var(--lotti-page-gutter))));
  margin-inline: auto;
}
.lotti-section { padding-block: var(--lotti-section-space); }
.lotti-surface { background: var(--lotti-surface); }
.lotti-surface--warm { background: var(--lotti-surface-tint); }
.lotti-muted { color: var(--lotti-text-muted); }
.lotti-accent { color: var(--lotti-coral); }
.lotti-handwritten { font-family: var(--lotti-font-handwriting); font-weight: 600; }
.lotti-card {
  background: var(--lotti-surface);
  border: 1px solid var(--lotti-border);
  border-radius: var(--lotti-radius-card);
}
.lotti-eyebrow {
  font-family: var(--lotti-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--lotti-navy);
}
/* A specific class for custom HTML; Gutenberg button styling belongs in theme.json. */
.lotti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 50px;
  padding: var(--wp--custom--button--padding-y) var(--wp--custom--button--padding-x);
  border: 0;
  border-radius: var(--lotti-radius-pill);
  background: var(--lotti-cta);
  color: var(--lotti-surface);
  text-decoration: none;
  text-align: center;
  font-family: var(--lotti-font-body);
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.lotti-btn:hover, .lotti-btn:focus-visible { background: var(--lotti-cta-hover); color: var(--lotti-surface); }
.lotti-btn:focus-visible { outline: 3px solid var(--lotti-navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lotti-btn { transition: none; } }

/* Container roles inherit through nested blocks; explicit text colors stay valid. */
.lotti-headings-primary { --lotti-heading-color: var(--lotti-heading-color-primary); }
.lotti-headings-secondary { --lotti-heading-color: var(--lotti-heading-color-secondary); }
/* Individual heading roles, including headings in Custom HTML blocks. */
.lotti-heading-primary { --lotti-heading-color: var(--lotti-heading-color-primary); }
.lotti-heading-secondary { --lotti-heading-color: var(--lotti-heading-color-secondary); }
.lotti-heading-primary, .lotti-heading-secondary { color: var(--lotti-heading-color); }