/* PERMAfit – gemeinsame Basis-Styles (einmal für alle Seiten).
 * Akzentfarbe je Seite:  :root { --pf-accent: var(--pf-orange); --pf-accent-tint: var(--pf-orange-tint); }
 * (Standard: Violett). Nutzt u. a. das Mobilmenü (SiteHeader) und die Formular-Bausteine.
 */
:root { --pf-accent: var(--pf-violet); --pf-accent-tint: var(--pf-violet-tint); }

/* ---------- Einblend-Animation (Logik: pf-site.js) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Formular: Eingabefeld ---------- */
.field-input { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-strong); background: var(--surface-card); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 0.85rem 1.25rem; width: 100%; outline: none; box-sizing: border-box; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.field-input:hover { border-color: var(--pf-accent); }
.field-input:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 4px var(--pf-accent-tint); }
.field-input--err, .field-input[aria-invalid="true"] { border-color: var(--pf-red); box-shadow: 0 0 0 4px rgba(255,77,77,0.16); }
textarea.field-input { border-radius: var(--radius-lg); resize: vertical; min-height: 120px; line-height: 1.6; }

/* ---------- Formular: Checkbox & Radio-Button ---------- */
.pf-check, .pf-radio { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--border-subtle); background: #fff; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.pf-check { border-radius: 7px; }
.pf-radio { border-radius: 50%; }
.pf-check:checked { background: var(--pf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--pf-accent); }
.pf-radio:checked { background: radial-gradient(circle, #fff 0 3.5px, var(--pf-accent) 4px); border-color: var(--pf-accent); }
.pf-check:focus-visible, .pf-radio:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--pf-accent-tint); }
.pf-check--err, .pf-check[aria-invalid="true"]:not(:checked) { border-color: var(--pf-red); }

/* ---------- Formular: Absende-Button ---------- */
.pf-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; align-self: flex-start; height: 56px; box-sizing: border-box; padding: 0 2rem; border: none; border-radius: var(--radius-pill); background: var(--pf-accent); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px color-mix(in srgb, var(--pf-accent) 28%, transparent); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.pf-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--pf-accent) 86%, #000); transform: translateY(-1px); }
.pf-submit:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }
.pf-submit:disabled { opacity: 0.62; cursor: not-allowed; box-shadow: none; }
@media (max-width: 860px) { .pf-submit { width: 100%; align-self: stretch; } }