/* ==========================================================================
   Formulare — Projektbogen, Bewertung, Upload
   Nutzt die Farbtokens des jeweiligen Kontexts (Hauptmarke oder Sparte).
   ========================================================================== */

/* --- Formular ------------------------------------------------------------ */
.formwrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.formwrap__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--head-h) + 2rem); align-self: start; }
.formwrap__main { grid-column: 6 / span 7; }
@media (max-width: 1100px) {
  .formwrap__aside, .formwrap__main { grid-column: 1 / -1; position: static; }
  .formwrap__main { margin-top: 2.5rem; }
}

/* Das Formular als eigener Block. Eine umlaufende Linie und ein kräftiger
   Kopfbalken heben es aus der Seite heraus — sonst geht es zwischen den
   übrigen Haarlinien der Seite unter. */
.fform {
  display: grid; gap: clamp(2rem, 3.5vw, 3rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--fg);
  padding: clamp(1.5rem, 3vw, 2.6rem);
}
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1.35rem; }
.fieldset__head {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding-bottom: 0.9rem; margin-bottom: 0.3rem;
  border-bottom: 2px solid color-mix(in srgb, var(--fg) 30%, transparent);
}
.fieldset__head .idx { color: var(--accent); }
.fieldset__head h2, .fieldset__head h3 {
  font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.012em;
}
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.fgrid--3 { grid-template-columns: repeat(3, 1fr); }
.f-col-2 { grid-column: 1 / -1; }
.fgrid--3 .field--wide { grid-column: span 2; }
@media (max-width: 700px) { .fgrid--3 .field--wide { grid-column: 1 / -1; } }
@media (max-width: 700px) { .fgrid, .fgrid--3 { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.5rem; position: relative; }
.field > label {
  font-family: 'Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted);
}
.field .req { color: var(--accent); }
/* Eingabefelder als vertiefte Flächen.
   Eine reine Unterstreichung ist auf einer ohnehin ruhigen Fläche kaum als
   Eingabefeld zu erkennen — man sieht ein Formular, aber nicht, wo man
   hinklicken soll. Deshalb bekommt jedes Feld eine eigene, leicht dunklere
   Fläche mit umlaufender Haarlinie und eine kräftige Grundlinie. Das bleibt
   im System (rechte Winkel, keine Rundungen, keine Schatten) und ist auf
   einen Blick als Eingabe lesbar. */
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field select, .field textarea {
  width: 100%;
  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
  border: 1px solid var(--line);
  border-bottom: 2px solid color-mix(in srgb, var(--fg) 32%, transparent);
  padding: 0.85rem 0.95rem; font-size: 0.975rem; color: var(--fg);
  border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color 0.28s var(--ease), background 0.28s var(--ease),
              box-shadow 0.28s var(--ease);
}
/* Auf dunklen Flächen (Sparte, Kontaktband) wird aufgehellt statt vertieft. */
.on-dark .field input[type="text"], .on-dark .field input[type="email"],
.on-dark .field input[type="tel"], .on-dark .field input[type="number"],
.on-dark .field select, .on-dark .field textarea {
  background: color-mix(in srgb, var(--kalk) 8%, transparent);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235C6B62' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center; padding-right: 2.4rem;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: color-mix(in srgb, var(--fg) 26%, transparent);
  border-bottom-color: color-mix(in srgb, var(--fg) 45%, transparent);
}
/* Fokus: Fläche hellt auf, Grundlinie wird zum Akzent. Der Ring liegt als
   box-shadow außen an, damit die Feldhöhe beim Fokussieren nicht springt. */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--bg);
  border-color: color-mix(in srgb, var(--fg) 45%, transparent);
  border-bottom-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 62%, transparent); }
.field__hint { font-size: 0.75rem; color: var(--muted); }
.field__error { font-size: 0.75rem; color: #A3341F; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border-color: #A3341F; border-bottom-color: #A3341F;
  background: color-mix(in srgb, #A3341F 7%, var(--bg));
}
.field.has-error .field__error { display: block; }

/* Datei-Upload */
.dropzone {
  border: 1px dashed color-mix(in srgb, var(--fg) 30%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease); cursor: pointer;
}
.on-dark .dropzone { background: color-mix(in srgb, var(--kalk) 8%, transparent); }
.dropzone:hover, .dropzone.is-drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone__files { display: grid; gap: 0.35rem; width: 100%; margin-top: 0.4rem; }
.dropzone__files li { font-size: 0.8125rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 0.35rem; }

/* Checkbox */
.checkfield { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 0.9rem; align-items: start; }
.checkfield input {
  position: absolute; left: 0; top: 0; width: 20px; height: 24px;
  opacity: 0; margin: 0; cursor: pointer; z-index: 2;
}
.checkfield .box {
  width: 18px; height: 18px; border: 1px solid var(--ink); margin-top: 0.18em;
  position: relative; pointer-events: none;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.checkfield .box::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid var(--kalk); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0);
  transition: transform 0.28s var(--ease);
}
.checkfield input:checked + .box { background: var(--accent); border-color: var(--accent); }
.checkfield input:checked + .box::after { transform: rotate(45deg) scale(1); }
.checkfield input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 3px; }
.checkfield label { font-size: 0.8125rem; color: var(--muted); line-height: 1.55; }
.checkfield a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.formfoot { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; padding-top: 0.5rem; }
.formstatus { font-size: 0.8125rem; }
.formstatus[data-state="ok"] { color: #1E6B4C; }
.formstatus[data-state="err"] { color: #A3341F; }

/* Honeypot */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Erfolgsmeldung */
.form-success {
  border: 1px solid var(--accent); padding: clamp(1.6rem, 3vw, 2.4rem);
  display: none; gap: 0.9rem;
}
.form-success.is-visible { display: grid; }