/* vibara — Utility- und kleine semantische Klassen.
 * Ersetzen Inline-style-Attribute, damit die CSP ohne 'unsafe-inline' für
 * style-src auskommt. */

/* Farben */
.u-accent   { color: var(--accent); }
.u-ink-40   { color: var(--ink-40); }
.u-ink-70   { color: var(--ink-70); }

/* Ausrichtung / Abstände */
.u-center   { text-align: center; }
.u-mi-auto  { margin-inline: auto; }
.u-mt-3     { margin-top: var(--space-3); }
.u-mt-4     { margin-top: var(--space-4); }
.u-mt-6     { margin-top: var(--space-6); }
.u-mt-8     { margin-top: var(--space-8); }

/* Zitat-/Lead-Zeilen (Ableitungs-Sätze auf Landing/Preview/Done/Beispiel) */
.quote-line {
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  margin: 0;
}
.quote-line--spaced { margin: 0 0 var(--space-6); }

/* Fehler-Seiten (404/500) */
.error-page { text-align: center; }
.error-page__code { font-size: var(--type-display); margin-top: var(--space-16); }
.error-page__lead { margin: var(--space-6) auto 0; }
.error-page__back { margin-top: var(--space-8); }

/* Leer-/Status-Bereiche (Done pending/failed) */
.state-block { text-align: center; padding: var(--space-16) 0; }

/* E-Mail-Vorschau (Done-Screen) */
.email-preview__meta-label { color: var(--ink-40); }
.email-preview__logo { text-align: center; margin-bottom: var(--space-6); }
.email-preview__salutation { font-style: italic; font-size: 22px; margin: 0; }
.email-preview__body { font-size: 16px; line-height: 1.65; margin: var(--space-3) 0 var(--space-4); }
.email-preview__quote { font-style: italic; font-size: 17px; margin: var(--space-3) 0 0; }
.email-preview__cta { text-align: center; pointer-events: none; }

/* Preis-/Produktzeilen (Preview/Checkout) */
.price-name  { font-style: italic; font-size: 22px; }
.price-name--md { font-style: italic; font-size: 20px; }
.price-name--sm { font-style: italic; font-size: 16px; }
.price-value { font-family: var(--font-serif); font-size: 38px; letter-spacing: -0.01em; }
.price-value--sm { font-family: var(--font-serif); font-size: 22px; }
.price-value--checkout { font-family: var(--font-serif); font-size: 24px; }

/* Mollie-Mock (Dev) */
.mock-page { padding: var(--space-16) 0; max-width: 600px; }
.mock-card { padding: var(--space-12); }
.mock-title { font-family: var(--font-serif); font-weight: 400; font-size: var(--type-h2); margin: var(--space-4) 0; }
.mock-dl { margin: var(--space-6) 0; }
.mock-dl dd { font-family: var(--font-mono); margin: 0; }
.mock-dl .mock-return { font-size: 12px; word-break: break-all; }
.mock-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Formular-Flash */
.form-flash-error {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  color: var(--ink);
}

/* Beispiel-Seite */
.example-card { margin-top: var(--space-8); padding: var(--space-8); }

/* Sonstige */
.derived-row--full { grid-template-columns: 1fr; }