/* Kontaktformular — eigene Datei, damit style.css bei paralleler Arbeit
   an der Website unberührt bleibt. Ergänzt .form-field aus style.css. */

.kontakt-form { margin-top: 40px; }

.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.kontakt-grid .breit { grid-column: 1 / -1; }

/* Auswahlliste im Stil der Eingabefelder — select erbt sie nicht von selbst. */
.form-field select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: none;
  background: rgba(255,255,255,0.10);
  color: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.form-field select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Das aufgeklappte Menü erbt die dunkle Fläche nicht — sonst weiß auf weiß. */
.form-field select option { background: var(--ink); color: #fff; }

/* Projektauswahl */
.projekt-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 4px;
}
.projekt-optionen label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  margin: 0;
}
.projekt-optionen input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  cursor: pointer;
}
.projekt-optionen input[type="radio"]::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: scale(0);
  background: var(--accent);
  transition: transform 0.15s ease;
}
.projekt-optionen input[type="radio"]:checked { border-color: var(--accent); }
.projekt-optionen input[type="radio"]:checked::before { transform: scale(1); }
.projekt-optionen input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Datenschutz-Haken */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 8px 0 4px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid rgba(255,255,255,0.5);
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  cursor: pointer;
}
.form-consent input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  background: var(--accent);
  transition: transform 0.15s ease;
}
.form-consent input[type="checkbox"]:checked { border-color: var(--accent); }
.form-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.form-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-consent a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Honigtopf — für Menschen unsichtbar, aber nicht display:none:
   manche Bots überspringen ausgeblendete Felder gezielt. */
.hp-feld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Meldungen */
.feld-fehler {
  display: block;
  font-size: 0.78rem;
  color: #ffb4a2;
  margin-top: 5px;
}
.form-field.hat-fehler input,
.form-field.hat-fehler textarea,
.form-field.hat-fehler select { outline: 2px solid #ffb4a2; outline-offset: 2px; }
/* Der Datenschutz-Haken sitzt nicht in .form-field, sondern ist selbst das
   Label — sonst bliebe genau das Pflichtfeld ohne sichtbare Fehlermarke. */
.form-consent.hat-fehler { color: #ffb4a2; }
.form-consent.hat-fehler input[type="checkbox"] { border-color: #ffb4a2; }
.form-consent.hat-fehler a { color: #ffb4a2; }

.form-status {
  margin-top: 14px;
  padding: 12px 16px;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.25);
}
.form-status[hidden] { display: none; }
.form-status.ist-fehler { border-color: #ffb4a2; color: #ffb4a2; }

.form-erfolg {
  border: 1px solid var(--accent);
  padding: 40px;
  text-align: left;
  margin-top: 40px;
}
.form-erfolg h3 { color: #fff; font-weight: 300; font-size: 1.6rem; margin: 0 0 10px; }
.form-erfolg p { color: rgba(255,255,255,0.75); margin: 0; }

.pflicht-hinweis {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  margin: 4px 0 18px;
}

@media (max-width: 860px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: 0; }
  .projekt-optionen { gap: 10px 20px; }
}
@media (max-width: 640px) {
  /* verhindert das Hineinzoomen von iOS beim Antippen */
  .form-field select { font-size: 16px; }
  .form-erfolg { padding: 28px 20px; }
}

/* ── Kompakter Kasten auf den übrigen Seiten ─────────────────────────────────
   Sitzt in der schmalen Spalte des .cta-grid neben dem Text. Deshalb gestapelt
   statt zweispaltig — nur Vor- und Nachname teilen sich eine Zeile, weil beide
   kurz sind. Erbt Beschriftungen und Eingabefelder von .form-field aus
   style.css, ergänzt wird hier nur, was dort fehlt. */
.kontakt-kompakt .namen-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.kontakt-kompakt .form-consent { font-size: 0.84rem; margin: 12px 0 14px; }
.kontakt-kompakt .btn { width: 100%; }

/* Ankauf: Datei anhängen. Das echte <input type="file"> ist ausgeblendet und
   wird über sein Label bedient — der Systemknopf lässt sich nicht gestalten
   und bricht auf dunklem Grund den Seitenstil. */
.datei-feld { margin: 4px 0 16px; }
.datei-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px dashed rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.9);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.datei-knopf:hover { border-color: var(--accent); background: rgba(255,255,255,0.06); }
.datei-feld input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
/* Tastaturbedienung: ohne diese Regel ist beim Durchtabben nicht zu sehen,
   dass der Anhang-Knopf gerade dran ist. */
.datei-feld input[type="file"]:focus-visible + .datei-knopf { outline: 2px solid var(--accent); outline-offset: 3px; }
.datei-namen { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-top: 9px; }
.datei-hinweis { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 8px 0 0; }

@media (max-width: 560px) {
  .kontakt-kompakt .namen-paar { grid-template-columns: 1fr; gap: 0; }
}

/* Text neben dem Formular oben ansetzen. style.css zentriert beide Spalten
   des .cta-grid senkrecht (align-items:center) — das passte, solange rechts
   die dreifeldrige Attrappe stand. Das echte Formular ist deutlich höher,
   dadurch schwebte die Überschrift auf halber Höhe. */
.cta-grid:has(.kontakt-kompakt) { align-items: start; }

/* Der Absendeknopf war auf dem dunklen Band unsichtbar: .btn-primary setzt
   `background: var(--ink)` — und genau dieses Ink ist die Fläche der
   .cta-band. Sichtbar blieb nur die Beschriftung. Fiel bei der Attrappe
   nicht auf, weil der Knopf ohnehin nichts tat; jetzt verschickt er etwas
   und muss als Knopf erkennbar sein. */
.cta-band .kontakt-kompakt .btn-primary,
.cta-band .kontakt-form .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cta-band .kontakt-kompakt .btn-primary:hover,
.cta-band .kontakt-form .btn-primary:hover {
  background: #71571b;
  border-color: #71571b;
  color: #fff;
}
.cta-band .kontakt-kompakt .btn-primary:disabled,
.cta-band .kontakt-form .btn-primary:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ── Formularband auf hellem Grund (Kontaktseite) ────────────────────────────
   Vorher saß das Formular auf .cta-band — schwarz, direkt über der ebenfalls
   schwarzen Fußzeile. Beide Flächen liefen ineinander, das Formular wirkte
   wie ein Teil des Fußes. Jetzt steht es auf dem hellen Seitenhintergrund und
   ist dadurch klar als eigener Abschnitt zu erkennen.

   style.css bringt für .on-light bereits Beschriftungen und Eingabefelder mit;
   hier folgt alles, was dort fehlt und in kontakt.css bisher für Dunkel
   gestaltet war. */
/* Der Farbton kommt aus .bg-soft in style.css (--paper-soft) und wird hier
   NICHT gesetzt: sonst stünden zwei Quellen für dieselbe Fläche, und ein
   späterer Griff an die Palette würde nur eine davon erwischen. Hier bleibt
   allein der Abstand — bewusst großzügiger als bei .section, damit das
   Formular Luft zur Fußzeile behält. */
.kontakt-band {
  padding: 96px 0 104px;
}

.on-light .form-field select {
  background-color: var(--paper-soft);
  color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111110' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.on-light .form-field select option { background: #fff; color: var(--ink); }

.on-light .projekt-optionen label { color: var(--ink); }
.on-light .projekt-optionen input[type="radio"] { border-color: var(--line); }
.on-light .projekt-optionen input[type="radio"]:checked { border-color: var(--accent); }

.on-light .form-consent { color: var(--ink); }
.on-light .form-consent input[type="checkbox"] { border-color: var(--line); }
.on-light .form-consent input[type="checkbox"]:checked { border-color: var(--accent); }
.on-light .form-consent a { color: var(--ink); }

.on-light .pflicht-hinweis { color: var(--muted); }

/* Fehlerrot auf Hell: das helle Lachsrot der dunklen Fassung hat auf Papier
   nur rund 1,8:1 Kontrast und wäre praktisch unlesbar. */
.on-light .feld-fehler { color: #a4342a; }
.on-light .form-field.hat-fehler input,
.on-light .form-field.hat-fehler textarea,
.on-light .form-field.hat-fehler select { outline-color: #a4342a; }
.on-light .form-consent.hat-fehler { color: #a4342a; }
.on-light .form-consent.hat-fehler input[type="checkbox"] { border-color: #a4342a; }
.on-light .form-consent.hat-fehler a { color: #a4342a; }

.on-light .form-status { border-color: var(--line); color: var(--ink); }
.on-light .form-status.ist-fehler { border-color: #a4342a; color: #a4342a; }

.on-light .form-erfolg { background: #fff; }
.on-light .form-erfolg h3 { color: var(--ink); }
.on-light .form-erfolg p { color: var(--muted); }

.on-light .datei-knopf { border-color: var(--line); color: var(--ink); }
.on-light .datei-knopf:hover { border-color: var(--accent); background: var(--paper-soft); }
.on-light .datei-namen { color: var(--ink); }
.on-light .datei-hinweis { color: var(--muted); }
.on-light .form-note { color: var(--muted); }
.on-light .form-note a { color: var(--ink) !important; }

@media (max-width: 640px) {
  .kontakt-band { padding: 64px 0 72px; }
}

/* ── Kopf des Formularblocks: Überschrift links, Fließtext rechts ────────── */
.kontakt-kopf {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 8px;
}
.kontakt-kopf-text p { margin: 0 0 14px; }
.kontakt-kopf-text p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .kontakt-kopf { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Eingabefelder auf hellem Grund sichtbar machen ──────────────────────────
   style.css gibt .on-light-Feldern `background: var(--paper-soft)` OHNE Rahmen.
   Steht der Abschnitt selbst auf --paper-soft (Klasse .bg-soft), sind Feld und
   Fläche exakt dieselbe Farbe — die Felder waren am 02.08. kurzzeitig komplett
   unsichtbar. Derselbe Fehlertyp wie beim Absendeknopf, der auf dem dunklen
   Band Ink auf Ink war.
   Ein Rahmen macht die Felder unabhängig vom Hintergrund erkennbar. Damit ist
   das Formular auch dann noch lesbar, wenn jemand später die Fläche umfärbt. */
.on-light .form-field input,
.on-light .form-field textarea,
.on-light .form-field select {
  border: 1px solid var(--line);
  background: #ffffff;
}
.on-light .form-field input:focus,
.on-light .form-field textarea:focus,
.on-light .form-field select:focus {
  border-color: var(--accent);
  background: #ffffff;
}

/* Mehrfachauswahl „Kaufen / Mieten" — wie die Projektauswahl, aber eckig:
   runde Knöpfe stehen für „genau eines", eckige für „beliebig viele". Diesen
   Unterschied erwarten Nutzer, deshalb hier bewusst nicht dieselbe Form. */
.wahl-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 4px;
}
.wahl-optionen label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  margin: 0;
}
.wahl-optionen input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.5);
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  cursor: pointer;
}
.wahl-optionen input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  background: var(--accent);
  transition: transform 0.15s ease;
}
.wahl-optionen input[type="checkbox"]:checked { border-color: var(--accent); }
.wahl-optionen input[type="checkbox"]:checked::before { transform: scale(1); }
.wahl-optionen input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.on-light .wahl-optionen label { color: var(--ink); }
.on-light .wahl-optionen input[type="checkbox"] { border-color: var(--line); background: #fff; }
.on-light .wahl-optionen input[type="checkbox"]:checked { border-color: var(--accent); }

/* ── Newsletter-Anmeldung in der Fußzeile ────────────────────────────────────
   Double-Opt-in: der Haken ist die Einwilligung, die Bestätigung folgt per
   Mail. Der Kasten sitzt in einer schmalen Fußzeilenspalte auf schwarzem
   Grund — daher kleine Schrift und gestapelte Anordnung. */
.nl-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.nl-consent input[type="checkbox"] {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  border: 1px solid rgba(255,255,255,0.45);
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  cursor: pointer;
}
.nl-consent input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  background: var(--accent);
  transition: transform 0.15s ease;
}
.nl-consent input[type="checkbox"]:checked { border-color: var(--accent); }
.nl-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.nl-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nl-consent a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }

.nl-status {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
}
.nl-status[hidden] { display: none; }
.nl-status.ist-fehler { color: #ffb4a2; }

/* Erfolgsmeldung ersetzt das Formular. Bewusst „bitte Postfach prüfen" statt
   „angemeldet": bis zum Klick im Bestätigungslink ist niemand angemeldet. */
.nl-danke {
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin: 0;
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

/* Der Einwilligungstext sitzt in einer schmalen Fußzeilenspalte. Knapper
   Zeilenabstand, damit der Haken die Spalte nicht in die Höhe treibt —
   inhaltlich bleibt die Einwilligung vollständig (worin, Widerruf, Datenschutz). */
.nl-consent { margin-top: 12px; line-height: 1.45; }