/* tool-base.css — Geteilte Basis-Styles für alle HR-Tools
 * Wird nach landing-v4.css und vor tool-spezifischem <style> geladen.
 * Inline-Regeln in den Tools überschreiben gezielt — Defaults stehen hier.
 *
 * Stand: 2026-05-11
 */

/* === Layout === */
.tool-page { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.tool-hero { text-align: center; margin-bottom: 2rem; }
.tool-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 0.75rem; }
.tool-hero p { color: var(--ink-2, #6b6560); font-size: 1.0625rem; max-width: 580px; margin: 0 auto; }
.tool-hero .tool-meta-line { font-size: 0.8125rem; color: var(--ink-3, #8a857d); margin-top: 0.75rem; }
.badge-stand { display: inline-block; padding: 0.125rem 0.5rem; background: var(--gold, #B8860B); color: #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; }

/* === Cards === */
.tool-card { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e1da); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }

/* === Form Grid + Mobile === */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .field { min-width: 0; }
.form-grid select, .form-grid input { max-width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* === Field === */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field label { font-weight: 600; font-size: 0.875rem; color: var(--ink, #2a2823); }
.field input, .field select { padding: 0.625rem 0.75rem; border: 1px solid var(--border, #e5e1da); border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; transition: border-color 0.15s; }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold, #B8860B); box-shadow: 0 0 0 3px rgba(184,134,11,0.15); }
.field .hint { font-size: 0.75rem; color: var(--ink-3, #8a857d); }

/* === Inline Validation === */
.field-error { color: #b91c1c; font-size: 0.8125rem; margin-top: 0.25rem; display: none; }
.field-error.show { display: block; }
.field.has-error input, .field.has-error select { border-color: #dc2626 !important; box-shadow: 0 0 0 1px rgba(220,38,38,0.15) !important; }

/* === Accessibility === */
/* Scope auf .tool-page um Header/Footer (landing-v4) nicht zu beeinflussen */
.tool-page :focus-visible { outline: 2px solid var(--gold, #B8860B); outline-offset: 2px; border-radius: 4px; }
.tool-page button:focus:not(:focus-visible),
.tool-page a:focus:not(:focus-visible) { outline: none; }

/* === Utility === */
.hidden { display: none; }