/* ═══════════════════════════════════════════════════════════════════════════
   Component: Form v2 — Floating labels, animated validation, inset focus
   ═══════════════════════════════════════════════════════════════════════════ */

.c-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── Floating Label Group ───────────────────────────────────────────── */

.c-form__group {
  position: relative;
  display: flex;
  flex-direction: column;
}

.c-form__label {
  position: absolute;
  top: 0.65em;
  left: 0.85em;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out),
              color var(--motion-duration-fast) var(--motion-ease-out),
              font-size var(--motion-duration-fast) var(--motion-ease-out);
}

/* Float label on focus or when input has content */
.c-form__input:focus ~ .c-form__label,
.c-form__input:not(:placeholder-shown) ~ .c-form__label {
  transform: translateY(-1.5em) scale(0.8);
  color: var(--color-orange-500);
}

.c-form__label--required::after {
  content: ' *';
  color: var(--color-orange-500);
}

/* ── Input ──────────────────────────────────────────────────────────── */

.c-form__input {
  width: 100%;
  padding: 0.65em 0.85em;
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background-color: var(--color-surface-light);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-out),
              box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}

.c-form__input::placeholder {
  color: transparent;
  transition: color var(--motion-duration-fast);
}

/* Platzhalter-Regeln.
   WICHTIG — Spezifitaet: `.c-form__input:focus::placeholder` (0-2-1) und
   `.c-form__input:not(:placeholder-shown)::placeholder` (0-2-1) sind GLEICH
   spezifisch, es entscheidet die Quellreihenfolge. Deshalb steht die
   Ausblend-Regel ZUERST und deckt genau den gefuellten Fall ab.
   Gemessen am 28.09.2026: in der umgekehrten Reihenfolge blieb der Platzhalter
   auch im leeren Feld unsichtbar. */
.c-form__input:not(:placeholder-shown)::placeholder {
  color: transparent;
}

/* Sichtbar nur im leeren, fokussierten Feld — und wegen der Quellreihenfolge
   zuverlaessig: getippt -> aus, Feld leer gelassen -> wieder da.
   (Diese Regel war beim Umbau am 28.09.2026 versehentlich verloren gegangen;
   ohne sie blieb der Platzhalter in JEDEM Zustand unsichtbar.) */
.c-form__input:focus::placeholder {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.c-form__input:focus {
  border-color: var(--color-orange-500);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-orange-500);
}

.c-form__input--error {
  border-color: var(--color-state-error);
}

.c-form__input--error:focus {
  box-shadow: inset 0 0 0 1px var(--color-state-error);
}

.c-form__input--error ~ .c-form__label {
  color: var(--color-state-error);
}

textarea.c-form__input {
  min-height: 120px;
  resize: vertical;
}

/* ── Checkbox ───────────────────────────────────────────────────────── */

.c-form__checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.c-form__checkbox-group input[type="checkbox"] {
  /* 1.1em war rund 13px — auf dem Handy kaum zu treffen. 24px ist die
     Mindestgroesse nach WCAG 2.5.8. Die Beschriftung bleibt mitklickbar. */
  width: 24px;
  height: 24px;
  margin-top: 0.1em;
  accent-color: var(--color-orange-500);
  flex-shrink: 0;
}

.c-form__checkbox-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ── Error & Success Messages ───────────────────────────────────────── */

.c-form__error {
  font-size: var(--font-size-xs);
  color: var(--color-state-error);
  margin-top: var(--space-2xs);
  animation: essig-fade-up 0.2s var(--motion-ease-out) both;
}

.c-form__success {
  /* Die Meldung sitzt UNTER dem Formular und haelt sichtbar 32px Abstand zum
     Absende-Button.
     Gemessen am 28.09.2026 auf /kontakt/?essig_status=success, im Ruhezustand
     nach dem Einblenden:
       Button-Unterkante -> Formular-Unterkante = -16px
       Formular-Unterkante -> Meldung           = margin-top
     Der Absende-Button ist das letzte Flex-Item des Formulars; die Zeilenbox
     darunter bleibt als Leerraum stehen, deshalb liegt seine Unterkante 16px
     unter der Formular-Unterkante. Fuer 32px SICHTBAREN Abstand sind also
     32px + 16px = 48px noetig: --space-xl (32px) + --space-md (16px).
     (Nicht --space-lg — das ist in dieser Skala 24px, nicht 32px.)
     ACHTUNG beim Nachmessen: .essig-animate verschiebt den Button waehrend der
     Einblendung zusaetzlich um 16px nach unten. Wer zu frueh misst, sieht 8px
     statt 32px und "korrigiert" einen Fehler, den es nicht gibt. */
  margin-top: calc(var(--space-xl) + var(--space-md)); /* 48px -> 32px sichtbar */
  padding: var(--space-md) var(--space-lg);
  background-color: hsl(155 55% 36% / 0.08);
  border: 1px solid hsl(155 55% 36% / 0.25);
  border-radius: var(--radius-sm);
  color: var(--color-state-success);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  animation: essig-fade-up 0.3s var(--motion-ease-out) both;
}