/* ============================================================
   Stammdaten order form — page-specific styles
   ============================================================ */

/* ---------- form ---------- */
.form-groups {
  display: flex;
  flex-direction: column;
}
.field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 28px;       /* bisheriger Abstand INNERHALB einer Gruppe */
}
/* dezente Trennlinie + Abstand zwischen den Gruppen */
.field-group + .field-group {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--border-divider);
}

/* eine als <fieldset> gerenderte Gruppe: Standard-Chrome entfernen
   (min-width:0 verhindert, dass das Fieldset das Grid-Layout sprengt) */
fieldset.field-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }

/* drei-Spalten-Variante: ein Feld nimmt 1/3 (Standard) oder 2/3 (span 2) */
.field-group.thirds { grid-template-columns: repeat(3, 1fr); }
.field.two-thirds { grid-column: span 2; }

/* Variante: Labels links (150px), Inputs rechts.
   Zwei Spalten: gestapelte Felder + 20%-Spalte für die Legende. */
.field-group.labels-left {
  grid-template-columns: minmax(0, 1fr) 20%;
  column-gap: 18px;
  row-gap: 10px;
}
.field-group.labels-left .field {
  grid-column: 1;
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  column-gap: 22px;
  row-gap: 0;
}
/* feste Label-Spalte hält die Inputs gruppenübergreifend ausgerichtet und gibt
   längeren Labels ("Prüfidentifikator *") Platz, damit das * nie umbricht */
.field-group.labels-left .field label { margin: 0 0 0 3px; white-space: nowrap; }

/* Prozessangaben (Prüfidentifikator / Ausführungsdatum): label-links mit
   schmalem Input — das Feld nutzt die volle Gruppenbreite (hier gibt es keine
   Legende in der 20%-Spalte), der Input wird gedeckelt, und die Fehlermeldung
   in der freien 3. Spalte bekommt den gesamten restlichen Platz. */
.field-group.narrow-input .field {
  grid-column: 1 / -1;
  grid-template-columns: 150px minmax(140px, 13rem) 1fr;
}
/* Ein normales Block-Element (kein <legend>) wird zuverlässig in allen Browsern
   als Grid-Item platziert. Safari behandelt <legend> als Sonderelement und pinnt
   es oben an, egal ob float gesetzt ist — deshalb hier ein <div class="group-note">.
   Die Grid-Platzierung setzt es in die rechte 20%-Spalte über die drei
   Identifikationsfelder. Linke Haarlinie + zentrierter Text = Randnotiz. */
.field-group.labels-left .group-note {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 100%;
  display: grid;
  align-content: center;
  padding: 0 0 0 14px;
  margin: 0;
  border-left: 1px solid var(--border-divider);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}

.field label {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  margin-left: 3px;
  color: var(--text);
}
.req { color: var(--inexogy-green); }
.field label .req { margin-left: 3px; }

.field input,
.field textarea {
  background: var(--field);
  border: 1px solid var(--border-field);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--inexogy-green);
  box-shadow: 0 0 0 3px rgba(133, 190, 0, .18);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }

/* date input: match the active theme */
.field input[type="date"] { color-scheme: var(--scheme); }

.actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 34px;
}
.btn-submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--inexogy-green);
  color: #15171A;
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 34px;
  border-radius: 8px;
  transition: background .2s ease, transform .05s ease;
}
.btn-submit:hover {
  background: linear-gradient(126deg, var(--inexogy-green) 20%, var(--inexogy-darkgreen) 100%);
  color: #fff;
}
.btn-submit:active { transform: translateY(1px); }
.btn-submit[disabled] { cursor: default; }

.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, .25);
  border-top-color: #15171A;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
.btn-submit.is-loading .btn-label { visibility: hidden; }
.btn-submit.is-loading .btn-spinner {
  display: block;
  position: absolute;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Field validation errors
   ============================================================ */
/* Field-level error: red 2px border */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--required);
  border-width: 2px;
}
.field input[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  border-color: var(--required);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .18);
}

/* Inline-Fehlermeldung mit Icon unter einem Feld */
.field-error-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0 3px;
  color: var(--required);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.field-error-msg svg { width: 14px; height: 14px; flex: none; }

/* in der labels-left-Gruppe: Meldung sauber unter dem Input platzieren */
.field-group.labels-left .field .field-error-msg {
  grid-column: 2;
  margin-top: 4px;
}
/* in der narrow-input-Gruppe: Meldung rechts neben den Input (freie 3. Spalte) */
.field-group.labels-left.narrow-input .field .field-error-msg {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  align-items: flex-start;
  margin: 0 0 0 16px;
}
.field-group.labels-left.narrow-input .field .field-error-msg svg { margin-top: 2px; }

/* Identifikationsgruppe verletzt die "mindestens eine ID"-Regel — Randnotiz rot */
.field-group.labels-left.has-error .group-note {
  color: var(--required);
  border-left-color: var(--required);
}

/* schlichte Fehlerzeile (von der Messdaten-Seite weiterhin genutzt) */
.field-error {
  margin: 6px 0 0 3px;
  color: var(--required);
  font-size: 14px;
  font-weight: 600;
}

/* highlighted "at least one meter id" hint when the meter group is invalid
   (von der Messdaten-Seite weiterhin genutzt) */
.meter-hint--alert {
  color: var(--required);
  font-weight: 600;
  border-left: 3px solid var(--required);
  padding-left: 10px;
}

/* ============================================================
   Einwilligungs-Checkbox
   ============================================================ */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
}
.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  background: var(--field);
  border: 1px solid var(--border-field);
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.consent input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform .12s ease;
  box-shadow: inset 1em 1em var(--inexogy-green);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
.consent input[type="checkbox"]:checked { border-color: var(--inexogy-green); }
.consent input[type="checkbox"]:checked::before { transform: scale(1); }
.consent input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--inexogy-green);
  box-shadow: 0 0 0 3px rgba(133, 190, 0, .18);
}
.consent label {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 640px) {
  .page-head h1 { font-size: 28px; }
  .field-group,
  .field-group.thirds { grid-template-columns: 1fr; }
  .field.two-thirds { grid-column: 1 / -1; }

  /* Label über Input stapeln */
  .field-group.labels-left { grid-template-columns: 1fr; }
  .field-group.labels-left .field,
  .field-group.narrow-input .field {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 6px;
  }
  /* Fehlermeldungen wieder unter dem Feld stapeln */
  .field-group.labels-left .field .field-error-msg,
  .field-group.labels-left.narrow-input .field .field-error-msg {
    grid-column: 1;
    grid-row: auto;
    margin: 6px 0 0 3px;
  }
  /* Randnotiz kehrt unter die Felder zurück, volle Breite, mit Trennlinie oben */
  .field-group.labels-left .group-note {
    grid-column: 1;
    grid-row: auto;
    border-left: 0;
    border-top: 1px solid var(--border-divider);
    padding: 14px 0 0;
    margin-top: 4px;
  }
}