/* ==========================================================
   forms.css — passend zu theme.css
   ========================================================== */

/* -------------------------
   Form Group
-------------------------- */
.field{
  display: grid;
  gap: 6px;
}

.field__hint{
  font-size: 0.85rem;
  opacity: 0.65;
}

.field__error{
  font-size: 0.85rem;
  color: #b42318;
}

/* -------------------------
   Labels
-------------------------- */
label{
  font-weight: 600;
  color: var(--ink-82);
  letter-spacing: .01em;
}

/* -------------------------
   Inputs / Select / Textarea
-------------------------- */
input,
select,
textarea{
  width: 100%;
  padding: 12px 14px;

  font: inherit;
  color: var(--ink);

  background: var(--surface-input);
  backdrop-filter: blur(6px);

  border: 1px solid var(--line);
  border-radius: var(--r-sm);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;

  outline: none;
}

/* -------------------------
   Hover
-------------------------- */
input:hover,
select:hover,
textarea:hover{
  border-color: var(--accent-25);
}

/* -------------------------
   Focus (wie Button-Akzent)
-------------------------- */
input:focus,
select:focus,
textarea:focus{
  border-color: var(--accent-45);
  box-shadow: 0 0 0 4px var(--accent-12);
  background: var(--surface-input-focus);
}

/* -------------------------
   Readonly
-------------------------- */
input[readonly]{
  background: var(--ink-04);
  cursor: default;
}

/* -------------------------
   Disabled
-------------------------- */
input:disabled,
select:disabled,
textarea:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* -------------------------
   Error State
-------------------------- */
.input--error{
  border-color: #b42318 !important;
  box-shadow: 0 0 0 4px rgba(180,35,24,.12) !important;
}

/* -------------------------
   Success State
-------------------------- */
.input--success{
  border-color: #157347;
  box-shadow: 0 0 0 4px rgba(21,115,71,.12);
}

/* -------------------------
   Input mit Inline-Addon (€, %, etc.)
-------------------------- */
.input-group{
  display: flex;
  align-items: stretch;
}

.input-group > input{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group__addon{
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--ink-04);
  border: 1px solid var(--line);
  border-left: 0;
  border-top-right-radius: var(--r-sm);
  border-bottom-right-radius: var(--r-sm);
  font-size: .9rem;
  opacity: .75;
}