/* ==========================================================================
   anfrage.css – Dialog "Zugang anfordern" (Kontaktformular)
   Aufbau: 1 Hintergrund + Karte · 2 Felder · 3 Knöpfe · 4 Mobil
   Farben/Schrift kommen aus basis.css (Variablen), Optik wie das Login-Feld im Bild.
   ========================================================================== */

/* 1. Dunkler Hintergrund über der ganzen Seite und die Karte in der Mitte */
/* Zweck: Dunkler Vollbild-Hintergrund des Dialogs.
     Verwendet von: <div class="modal" id="anfrage-dialog" hidden> in Startseite/Index.cshtml; anfrage.js blendet per hidden ein/aus.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;   /* über Bild und Fußzeile */
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(6, 16, 28, .72); overflow-y: auto;
}
/* Zweck: Die Dialog-Karte in der Mitte.
     Verwendet von: <div class="modal__box">; anfrage.js setzt den Fokus hinein.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.modal__box {
  position: relative; width: min(100%, 460px); max-height: 100%; overflow-y: auto; padding: 28px 26px 22px; color: #eaf3ef;
  background: radial-gradient(circle at 50% 20%, #0b1f31, #050e18); border: 2px solid var(--gold);
  border-radius: 18px; box-shadow: 0 0 40px rgba(244, 185, 66, .35);
}
/* Zweck: Überschrift des Dialogs.
     Verwendet von: <h2 class="modal__titel">.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.modal__titel { margin: 0 0 6px; text-align: center; font-size: 22px; font-weight: 700; color: #fff; }
/* Zweck: Einleitungstext.
     Verwendet von: <p class="modal__text">.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.modal__text { margin: 0 0 18px; text-align: center; color: #b9c9c2; font-size: 14px; line-height: 1.45; }
/* Zweck: Kleiner Hinweis (Antwort per E-Mail).
     Verwendet von: <p class="modal__hinweis">.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.modal__hinweis { margin: 10px 0 0; text-align: center; color: #8fa39b; font-size: 12px; }
/* Zweck: Schließen-Kreuz.
     Verwendet von: Schließen-Knopf im Dialog; anfrage.js schließt den Dialog.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.modal__zu {                                           /* Schließen-Kreuz oben rechts */
  position: absolute; top: 8px; right: 12px; border: 0; background: none; color: #b9c9c2; font-size: 28px; line-height: 1; cursor: pointer;
}
/* Zweck: Hover-Zustand.
     Verwendet von: wie .modal__zu.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.modal__zu:hover { color: #fff; }

/* 2. Felder */
/* Zweck: Abstand je Formularfeld.
     Verwendet von: <div class="feld"> je Feld im Dialog.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld { margin-bottom: 12px; }
/* Zweck: Beschriftung der Felder.
     Verwendet von: label in .feld.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #dbe7e1; }
/* Zweck: Eingabefelder und Textbereich (16 px gegen iOS-Zoom).
     Verwendet von: Felder af-name, af-firma, af-email, af-telefon, af-nachricht.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
/* Zweck: Textbereich der Nachricht.
     Verwendet von: #af-nachricht.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1.3px solid rgba(244, 185, 66, .55);
  background: #081827; color: #eaf3ef; font: 400 16px var(--schrift);          /* 16 px: iOS zoomt nicht automatisch */
}
.feld textarea { resize: vertical; min-height: 76px; }
/* Zweck: Sichtbarer Fokus.
     Verwendet von: wie .feld.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld input:focus, .feld textarea:focus { outline: 0; border-color: var(--hellblau-1); box-shadow: 0 0 0 3px rgba(111, 203, 255, .35); }
/* Zweck: Fehlermarkierung; anfrage.js setzt aria-invalid="true".
     Verwendet von: Felder bei ungültiger Eingabe.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: #ff8f7d; }
/* Zweck: Fehlertext unter dem Feld bzw. allgemeiner Formularfehler.
     Verwendet von: Fehlerabsätze je Feld und im Formular; anfrage.js füllt sie.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
/* Zweck: Zentrierter allgemeiner Formularfehler.
     Verwendet von: allgemeiner Fehlerabsatz im Dialog; anfrage.js.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld__fehler, .formular-fehler { margin: 4px 0 0; min-height: 0; color: #ffb4a8; font-size: 13px; font-weight: 600; }
.formular-fehler { text-align: center; margin: 8px 0; }
/* Zweck: Markierung Pflichtfeld (*).
     Verwendet von: <span class="pflicht"> in den Beschriftungen.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.pflicht { color: var(--gold); }
/* Zweck: Markierung "(optional)".
     Verwendet von: <span class="optional"> in den Beschriftungen.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.optional { font-weight: 400; color: #8fa39b; }
/* Zweck: Zeile für die Zustimmungs-Checkbox.
     Verwendet von: #af-zustimmung in Startseite/Index.cshtml.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld--haken { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; }
/* Zweck: Checkbox-Größe und Farbe.
     Verwendet von: wie .feld--haken.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld--haken input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--hellblau-2); }
/* Zweck: Text der Zustimmung.
     Verwendet von: wie .feld--haken.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld--haken label { margin: 0; font-weight: 400; font-size: 13px; line-height: 1.4; color: #b9c9c2; }
/* Zweck: Link zur Datenschutzerklärung.
     Verwendet von: wie .feld--haken.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld--haken label a { color: var(--hellblau-1); }
/* Zweck: Fehlertext über die volle Breite.
     Verwendet von: wie .feld--haken.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.feld--haken .feld__fehler { grid-column: 1 / -1; }
/* Zweck: Köderfeld gegen Spam-Roboter: unsichtbar für Menschen (außerhalb des Bildschirms).
     Verwendet von: Feld #af-website; AnfrageDienst.EinreichenAsync verwirft Anfragen, bei denen es gefüllt ist.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* unsichtbar, aber für Roboter vorhanden */

/* 3. Knöpfe */
/* Zweck: Zeile für Knöpfe (rechtsbündig).
     Verwendet von: Knopfzeilen im Dialog.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopfreihe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
/* Zweck: Zentrierte Knopfzeile (Danke-Ansicht).
     Verwendet von: #anfrage-danke.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopfreihe--mitte { justify-content: center; }
/* Zweck: Grundform der Knöpfe im Dialog.
     Verwendet von: Knöpfe im Dialog (Abbrechen, Senden, Schließen).
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopf { padding: 11px 20px; border: 0; border-radius: 8px; cursor: pointer; font: 600 15px var(--schrift); }
/* Zweck: Zurückhaltender Knopf (Abbrechen/Schließen).
     Verwendet von: Schließen-Knöpfe im Dialog.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopf--hell { background: transparent; color: #b9c9c2; border: 1.3px solid rgba(185, 201, 194, .5); }
/* Zweck: Hover-Zustand.
     Verwendet von: wie .knopf--hell.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopf--hell:hover { color: #fff; border-color: #fff; }
/* Zweck: Hauptknopf (Senden).
     Verwendet von: Senden-Knopf des Formulars; anfrage.js setzt disabled beim Senden.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopf--blau { background: linear-gradient(180deg, var(--hellblau-1), var(--hellblau-2)); color: #06223a; }
/* Zweck: Hover-Zustand.
     Verwendet von: wie .knopf--blau.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopf--blau:hover { filter: brightness(1.07); }
/* Zweck: Tastaturfokus.
     Verwendet von: alle .knopf.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Zweck: Zustand während des Sendens.
     Verwendet von: anfrage.js setzt disabled.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
.knopf[disabled] { cursor: progress; filter: saturate(.6) brightness(.95); }

/* 4. Mobil: Dialog füllt die Breite, Knöpfe untereinander */
/* Zweck: Mobil: Dialog füllt die Breite, Knöpfe untereinander.
     Verwendet von: Dialog-Elemente bei Bildschirmbreite bis 520 px.
     Registrierung: Wird von Views/Startseite/Index.cshtml per <link> in der Sektion Kopf eingebunden (nach landing.css). */
@media (max-width: 520px) {
  .modal { padding: 8px; align-items: flex-start; }
  .modal__box { padding: 24px 18px 18px; }
  .knopfreihe { flex-direction: column-reverse; }
  .knopf { width: 100%; }
}