/* ============================================================
   forms.css – Ergänzende Formular-Styles
   Bock Maschinenbau GmbH
   Nutzt Design-Tokens aus variables.css.
   Ergänzt die allgemeinen form-* Klassen aus main.css.
   ============================================================ */

/* ── Loading-State ───────────────────────────────────────── */
form.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* ── Zeichenzähler (von forms.js eingeblendet) ───────────── */
.form-char-counter {
  display: block;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  transition: color var(--transition-fast);
  user-select: none;
}
.form-char-counter--warn  { color: var(--color-warning-dark); }
.form-char-counter--limit { color: var(--color-error-strong); font-weight: var(--font-weight-semibold); }

/* ── CV / Lebenslauf Datei-Upload ────────────────────────── */
.form-file-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-file-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--field-border);
  border-radius: var(--field-radius);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-family: var(--font-base);
  cursor: pointer;
  width: 100%;
  box-shadow: var(--field-shadow);
  transition:
    border-color var(--glow-speed) var(--glow-ease),
    background var(--glow-speed) var(--glow-ease),
    box-shadow var(--glow-speed) var(--glow-ease),
    color var(--glow-speed) var(--glow-ease),
    transform var(--glow-speed) var(--glow-ease);
}
.form-file-trigger:hover {
  border-color: var(--field-hover-border);
  background: var(--field-hover-bg);
  box-shadow: var(--upload-hover-shadow);
  color: var(--color-accent-text);
  transform: translate3d(0, -1px, 0);
}
.form-file-trigger:focus-visible {
  border-color: var(--field-hover-border);
  background: var(--field-hover-bg);
  box-shadow: var(--upload-hover-shadow);
  color: var(--color-accent-text);
  transform: translate3d(0, -1px, 0);
  outline: none;
}
.form-file-trigger input[type="file"] {
  display: none;
}

.form-file-selected {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-height: 1.4em;
}
.form-file-hint {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* ── Bewerbungsformular-Wrap ─────────────────────────────── */
.application-form-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-clip: padding-box;
  background:
    radial-gradient(80% 70% at 100% 0%, rgb(var(--c-wash) / 0.88), transparent 52%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--card-shadow);
}
.application-form-wrap > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .application-form-wrap {
    padding: var(--space-6) var(--space-5);
  }
}

/* Info variant: the closed-role card holds only a single CTA (no form). Centre
   it and tighten the frame so the button reads as a deliberate call-to-action
   instead of drifting in a cavernous 720px form shell. */
.application-form-wrap--info {
  display: flex;
  justify-content: center;
  max-width: 560px;
  padding: var(--space-8);
  text-align: center;
}

.application-form-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.application-form-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

/* Pflichtfeld-Legende (Kontaktformular): erklärt die *-Kennzeichnung. */
.form-required-legend {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* ── Kontextuelle Ausfüllhilfe je Anfrageart (Führung statt Pflichtfelder) ──
   Markup: templates/partials/contact_page.html.jinja (data-subject-hints).
   Sichtbarkeit steuert forms.js; hier nur Erscheinungsbild. Alle Farben aus
   Tokens → Light/Dark automatisch korrekt. */
/* hidden MUSS gewinnen: gleiche Spezifität wie .subject-hint:not(--panel){display:flex}
   → höher spezifizieren (.subject-hints ...), sonst überschreibt display:flex das none
   und alle Blöcke wären gleichzeitig sichtbar (auch im Initialzustand). */
.subject-hints .subject-hint[hidden] { display: none; }

/* Persistenter Hilfetext unter einem Eingabefeld (z. B. das optionale Bewerbungsnummer-
   Feld). Bewusst NICHT als Placeholder — der verschwindet bei Fokus; dieser Text bleibt
   sichtbar und ist per aria-describedby am Input verankert. Tokens → Light/Dark. */
.form-input-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  line-height: var(--leading-relaxed);
}

/* Leichter Hinweis-Kasten (angebot / technisch / allgemein) */
.subject-hint:not(.subject-hint--panel) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--color-accent-bg);
  border: 1px solid var(--color-accent-bg-hover);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.subject-hint-line,
.subject-hint-intro,
.subject-hint-tail {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Einklappbare Checkliste (<details>) */
.subject-hint-help { font-size: var(--text-sm); }
.subject-hint-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
}
.subject-hint-summary::-webkit-details-marker { display: none; }
.subject-hint-summary::before {
  content: "\203A"; /* › */
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--transition-fast);
}
.subject-hint-help[open] > .subject-hint-summary::before { transform: rotate(90deg); }
.subject-hint-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.subject-hint-list {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.subject-hint-list li { line-height: var(--leading-relaxed); }
.subject-hint-reassure {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-light);
  font-style: italic;
}

/* „Vorlage einfügen"-Chip */
.subject-hint-template {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}
.subject-hint-template:hover,
.subject-hint-template:focus-visible {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  outline: none;
}

/* Bewerbungs-Führungs-Card (Dual-Path: neue Bewerbung → Formular, Rückfrage → Sende-Feld) */
.subject-hint--panel { margin: 0 0 var(--space-5); }
.subject-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.subject-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.subject-panel-body {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.subject-panel-cta { margin-top: var(--space-1); }

/* open_positions_badge trägt sein Skin seit dem Surface-Agnostic-Umbau selbst
   (carousel.css: Tint OF THE INK + flippende Ink-Tokens ⇒ light, dark und dunkles
   Band aus EINER Regel). Der frühere Re-Skin hier war die Kopie genau dieser Logik
   für EINE Platzierung — und genau diese Kopie hat verdeckt, dass die dritte
   Platzierung (Startseite) ungeskinnt weiss-auf-weiss lief. Bleibt nur, was echt
   platzierungs-spezifisch ist: links-bündig zum übrigen Panel-Inhalt statt zentriert. */
.subject-panel .open-badge { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .subject-hint-summary::before,
  .subject-hint-template { transition: none; }
}