/*
 * gfp-kontakt.css
 * Kontakt-/Anfrageformular (Shortcode [gfp_kontaktformular], s.
 * inc/shortcode-kontakt.php).
 *
 * Eigenständig gescoped unter .gfp-kontakt statt .gfp-programm — gleicher Grund
 * wie bei gfp-team.css / gfp-news.css / gfp-termine.css: gfp-kurse.css lädt nur
 * auf den Kursseiten, dieses Formular sitzt auf einer Lay-Seite.
 *
 * ─── Optik: angelehnt an Lays Newsletter-Formular (User-Vorlage 17.9.2026) ───
 * Dessen Formensprache, übernommen für alle Felder:
 *   · weißes Feld mit KRÄFTIGEM schwarzen Rahmen (2px), nicht grau-dünn
 *   · weich abgerundet und mit leichtem Schlagschatten darunter
 *   · Beschriftungen im BODY-Format (normale Textschrift, nicht Lays
 *     „Label"-Format in Versalien) — im Newsletter steht „E-Mail*" in genau
 *     dieser Schrift
 *   · Häkchen als RUNDER Kreis mit schwarzem Ring, nicht als Browser-Kästchen
 *   · Pflicht-Sternchen schwarz am Wort, kein rotes Extrazeichen
 * Abweichung mit Absicht: Die Beschriftung steht ÜBER dem Feld, nicht daneben.
 * Im Newsletter gibt es genau ein Feld; bei sieben Feldern nebeneinander
 * stehende Labels erzwingen eine schmale Eingabespalte und brechen mobil ohnehin
 * um.
 *
 * Typografie folgt Lays Textformaten (inc/shortcode-kontakt.php ruft
 * gfp_kurse_bind_textformate('.gfp-kontakt', 'gfp-kontakt') auf):
 *   Titel → H2   alles im Formular (Intro, Beschriftungen, Eingaben) → Body
 *   Hinweise + Datenschutzzeile → Small
 * „Body für die Schriftgrößen" ist User-Vorgabe vom 17.9.2026; BodyLg ist
 * deshalb nirgends mehr im Spiel.
 * Jede Variable hat einen eigenen Rückfall, damit das Formular auch ohne Lay
 * (oder mit fehlendem Format) vernünftig aussieht.
 *
 * Der Absende-Button trägt eine von Lays globalen Button-Klassen direkt am
 * Element (Vorgabe über das Shortcode-Attribut button="laybutton1|2|3"). Hier
 * steht deshalb NUR, was ein <button> gegenüber Lays <a> zusätzlich braucht —
 * keine eigene Button-Optik: Ändert der Kunde in Lay Options → Buttons etwas,
 * zieht dieser Button mit.
 */

.gfp-kontakt,
.gfp-kontakt *,
.gfp-kontakt *::before,
.gfp-kontakt *::after { box-sizing: border-box; }

.gfp-kontakt {
  --gfp-kontakt-black:    #111111;
  --gfp-kontakt-rand:     2px;
  --gfp-kontakt-radius:   .4em;
  --gfp-kontakt-schatten: 0 2px 8px rgba(0, 0, 0, .12);
  --gfp-kontakt-fokus:    #0073BC;   /* Fachbereichsblau, s. gfp_farbe_hex() */
  --gfp-kontakt-fehler:   #B3261E;
  --gfp-kontakt-max-width: 46em;     /* ein Formular ist eine Lesespalte, keine Fläche */

  /* Das ganze Formular steht auf Lays Format „Body" — Schrift UND Maße.
     Alle Abstände, Polster und Feldhöhen darunter sind in `em` angegeben und
     damit ein Vielfaches DIESER Größe, nicht der Wurzelschriftgröße. Stellt der
     Kunde Body in Lay um, wächst oder schrumpft das Formular als Ganzes mit,
     statt dass Schrift und Kästen auseinanderlaufen. (Vorher standen die Maße in
     `rem` — das Ergebnis war dem User am 17.9.2026 „bisschen zu groß".) */
  font-family: var(--font-body, sans-serif);
  font-size: var(--fs-body, 1rem);
  line-height: var(--lh-body, 1.55);

  max-width: var(--gfp-kontakt-max-width);
  /* !important, weil Lay Elementen in seinen Gridder-Zellen eigene Margins
     zuweist — ohne das stünde das Formular links statt mittig im Platz, den die
     Zeile ihm gibt (User-Vorgabe 17.9.2026). */
  margin-inline: auto !important;
  padding: 0;

  /* Abstand zu Lays fixiertem Kopfbereich beim Anker-Sprung auf #gfp-kontakt.
     Greift bei jedem nativen Sprung sofort; die genaue Kopfhöhe misst danach
     assets/js/gfp-kontakt.js nach (dort steht auch, warum es das JS braucht).
     Ohne diese Zeile steht die Überschrift beim Sprung unter der Menüleiste. */
  scroll-margin-top: 7rem;
  color: var(--gfp-kontakt-black);
  /* Silbentrennung wie auf den Kursseiten; lang="de" steht am Wrapper selbst
     (Fallstrick 10 — nicht auf die globale Spracheinstellung verlassen). */
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  text-wrap: pretty;
}

/* ─── Kopf ──────────────────────────────────────────────────────────────── */

.gfp-kontakt__title {
  font-family: var(--font-h2, var(--font-headline, 'League Gothic', 'Arial Narrow', sans-serif));
  font-size: var(--fs-h2, clamp(1.5rem, 3vw, 2.5rem));
  line-height: var(--lh-h2, 1.05);
  letter-spacing: var(--ls-h2, .01em);
  font-weight: var(--fw-h2, 400);
  text-transform: var(--tt-h2, uppercase);
  font-style: var(--fsty-h2, normal);
  font-variation-settings: var(--fvs-h2, normal);
  hyphens: manual;               /* Versalien in League Gothic nie automatisch trennen */
  margin: 0 0 .5em;
}

.gfp-kontakt__intro {
  /* Body, nicht BodyLg (User-Vorgabe 17.9.2026: „nutze body für die
     schriftgrößen") — der Einleitungssatz ist Fließtext, keine Auszeichnung. */
  margin: 0 0 1.6em;
}

/* ─── Fehlerkasten ──────────────────────────────────────────────────────── */
/* Gleiche Formensprache wie die Felder — voller Rahmen statt nur linker Balken,
   damit er nicht wie ein Fremdkörper im Formular sitzt. */

.gfp-kontakt__fehler {
  border: var(--gfp-kontakt-rand) solid var(--gfp-kontakt-fehler);
  border-radius: var(--gfp-kontakt-radius);
  background: #fff;
  box-shadow: var(--gfp-kontakt-schatten);
  padding: .9em 1.1em;
  margin: 0 0 1.6em;
}

.gfp-kontakt__fehler-titel { margin: 0 0 .4em; font-weight: 700; }
.gfp-kontakt__fehler ul    { margin: 0; padding-left: 1.2em; }
.gfp-kontakt__fehler li    { margin: .25em 0; }

/* ─── Dankeschön ────────────────────────────────────────────────────────── */

.gfp-kontakt__dank {
  border: var(--gfp-kontakt-rand) solid var(--gfp-kontakt-black);
  border-radius: var(--gfp-kontakt-radius);
  background: #fff;
  box-shadow: var(--gfp-kontakt-schatten);
  padding: 1.4em 1.6em;
}

.gfp-kontakt__dank-text { margin: 0; }

/* ─── Raster ────────────────────────────────────────────────────────────── */
/* Zwei Spalten ab Tablet (Name/Firma, E-Mail/Telefon nebeneinander), darunter
   eine. Feste zwei Spalten statt auto-fill: die Paarungen sind inhaltlich
   gewollt, nicht das Ergebnis einer Breitenrechnung. */

.gfp-kontakt__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1em;
}

.gfp-kontakt__feld--voll { grid-column: 1 / -1; }

/* ─── Felder ────────────────────────────────────────────────────────────── */

.gfp-kontakt__feld {
  display: flex;
  flex-direction: column;
  gap: .3em;
  margin: 0;
}

/* Beschriftung im Body-Format wie im Newsletter-Vorbild — NICHT Lays
   „Label"-Format (Versalien, gesperrt): sieben Felder in Versalien machen das
   Formular laut, und die Vorlage macht es anders. */
.gfp-kontakt__feld > label {
  font-size: inherit;      /* = Lays Body, s. Wrapper */
  line-height: 1.3;
  font-weight: 400;
}

/* Sternchen schwarz und direkt am Wort („E-Mail*"), wie im Newsletter — ein
   rotes Sonderzeichen wäre ein Signal, das es vor dem Absenden nicht braucht. */
.gfp-kontakt__pflicht { color: inherit; }

.gfp-kontakt input[type="text"],
.gfp-kontakt input[type="email"],
.gfp-kontakt input[type="tel"],
.gfp-kontakt select,
.gfp-kontakt textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--gfp-kontakt-black);
  width: 100%;
  padding: .5em .7em;
  border: var(--gfp-kontakt-rand) solid var(--gfp-kontakt-black);
  border-radius: var(--gfp-kontakt-radius);
  background: #fff;
  box-shadow: var(--gfp-kontakt-schatten);
  min-height: 2.5em;
  -webkit-appearance: none;
  appearance: none;
}

.gfp-kontakt textarea {
  resize: vertical;
  min-height: 7em;
}

/* Die beiden Auswahlfelder stehen eine Stufe kleiner als die Eingabefelder —
   auf Lays Format „Small" statt „Body".
   Das ist KEINE reine Geschmacksentscheidung: Die aufgeklappte Liste erbt die
   Schriftgröße des Feldes, und sie war zu wuchtig (User-Vorgabe 17.9.2026, in
   zwei Schritten: erst Feld zurück auf Body, dann bewusst wieder kleiner,
   nachdem klar war, dass die Liste anders nicht schrumpft — s. die Regel für
   option/optgroup weiter unten). Inhaltlich passt es ohnehin: Es ist
   vorgegebener Text, den niemand tippt, und die Kurstitel sind lang.
   Die Feldhöhe schrumpft automatisch mit, weil sie in `em` steht.

   Eigener Pfeil am <select>: appearance:none nimmt den des Browsers weg. Als
   inline-SVG in der URL, damit keine zweite Datei geladen wird. */
.gfp-kontakt select {
  font-size: var(--fs-small, .9em);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8em center;
  background-size: .65em;
  padding-right: 2.2em;
}

/* Hier stand kurz eine eigene Regel für option/optgroup, um NUR die aufgeklappte
   Liste zu verkleinern und das Feld auf Body zu lassen. Sie ist wieder raus, aus
   zwei Gründen:
     1. Safari und Chrome unter macOS, iOS und Android ignorieren sie ohnehin —
        dort zeichnet das Betriebssystem die Liste, nicht die Seite.
     2. Seit das Feld selbst auf „Small" steht, erben die Einträge diese Größe
        bereits. Die Regel hätte denselben Wert ein zweites Mal gesetzt.
   Merke für später: An die Liste eines <select> kommt CSS praktisch nicht heran.
   Wer sie kleiner will, verkleinert das FELD — oder baut das Auswahlfeld selbst,
   mit allem, was daran hängt (Tastaturbedienung, Screenreader, und am Handy ein
   Rückschritt gegenüber der nativen Auswahl). Bewusst nicht gebaut. */

.gfp-kontakt input::placeholder,
.gfp-kontakt textarea::placeholder { color: rgba(0, 0, 0, .45); }

.gfp-kontakt input:focus-visible,
.gfp-kontakt select:focus-visible,
.gfp-kontakt textarea:focus-visible {
  outline: 2px solid var(--gfp-kontakt-fokus);
  outline-offset: 2px;
}

/* ─── Datenschutz-Häkchen ───────────────────────────────────────────────── */
/* Runder Ring statt Browser-Kästchen, wie im Newsletter-Formular. Gebaut aus
   einer echten Checkbox mit appearance:none — ein <input type="checkbox">
   bleibt es damit für Tastatur, Screenreader und die required-Prüfung des
   Browsers. */

.gfp-kontakt__datenschutz > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7em;
  align-items: start;
  font-family: var(--font-small, var(--font-body, sans-serif));
  font-size: var(--fs-small, .9em);
  line-height: var(--lh-small, 1.45);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.gfp-kontakt__datenschutz input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15em;
  height: 1.15em;
  margin: .1em 0 0;
  border: var(--gfp-kontakt-rand) solid var(--gfp-kontakt-black);
  border-radius: 50%;
  background: #fff;
  flex: none;
  cursor: pointer;
  display: grid;
  place-content: center;
}

/* Gefüllter Punkt statt Häkchen — zum runden Ring gehört ein runder Kern. */
.gfp-kontakt__datenschutz input[type="checkbox"]::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--gfp-kontakt-black);
  transform: scale(0);
  transition: transform .12s ease-in-out;
}

.gfp-kontakt__datenschutz input[type="checkbox"]:checked::before { transform: scale(1); }

.gfp-kontakt__datenschutz input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gfp-kontakt-fokus);
  outline-offset: 2px;
}

/* Lays „Link Styles" färben mit Force Mouseover Styles JEDEN <a> per !important
   um (Fallstrick 15). -webkit-text-fill-color bestimmt die Füllfarbe beim
   Zeichnen und schlägt color — Lay setzt sie nirgends. Beides gesetzt, damit die
   Kaskade auch ohne diese Eigenschaft stimmt. */
.gfp-kontakt__datenschutz a,
.gfp-kontakt__datenschutz a:hover,
.gfp-kontakt__datenschutz a:focus {
  color: var(--gfp-kontakt-black);
  -webkit-text-fill-color: var(--gfp-kontakt-black);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* ─── Hinweis + Button ──────────────────────────────────────────────────── */

.gfp-kontakt__hinweis {
  font-family: var(--font-small, var(--font-body, sans-serif));
  font-size: var(--fs-small, .85em);
  line-height: var(--lh-small, 1.45);
  color: rgba(0, 0, 0, .55);
  margin: .9em 0 0;
}

.gfp-kontakt__btn {
  /* Optik kommt VOLLSTÄNDIG aus Lays Button-Klasse am Element. Hier steht nur,
     was ein <button> gegenüber Lays <a> zusätzlich braucht.
     KEIN eigener Schatten: Der war kurz drin (Anlehnung an die
     Newsletter-Anmeldung) und ist auf Ansage wieder raus — „der vorherige Button
     war besser" (User, 17.9.2026). Lays Button bleibt unangetastet.
     inline-FLEX + zentriert, damit Lays Pfeil-Icon (.laybuttonN::after) mittig
     neben der Beschriftung sitzt: Lay schaltet seine Icon-Buttons selbst darauf
     um, aber nur für a/div/span — ein <button> ist in seiner Regel nicht
     enthalten. Ohne Icon ändert das nichts. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.4em;
  cursor: pointer;
}

/* ─── Mobil ─────────────────────────────────────────────────────────────── */
/* Eine Spalte, engere Abstände — und ein Boden von 16px für die Eingaben:
   Darunter zoomt iOS beim Antippen in das Feld hinein und verschiebt das ganze
   Layout. Lays Body-Format kann kleiner sein, deshalb `max()` statt eines festen
   Werts — größer als 16px bleibt größer. */

@media (max-width: 700px) {
  .gfp-kontakt__grid { grid-template-columns: minmax(0, 1fr); gap: .9em; }

  /* Ohne <select>: Ein Auswahlfeld öffnet unter iOS einen eigenen Dialog und
     löst den Zoom gar nicht aus — der 16-px-Boden gilt für Felder, in die man
     tippt. Stünde das select hier mit drin, wäre die Verkleinerung am Handy
     wieder aufgehoben. */
  .gfp-kontakt input[type="text"],
  .gfp-kontakt input[type="email"],
  .gfp-kontakt input[type="tel"],
  .gfp-kontakt textarea { font-size: max(16px, 1em); }

  .gfp-kontakt textarea { min-height: 6em; }

  /* Das Auswahlfeld steht eine Schriftstufe kleiner — am Handy bekommt es
     trotzdem Fingerhöhe zurück (2,9em der kleineren Schrift ≈ 43px). */
  .gfp-kontakt select { min-height: 2.9em; }

  /* Das Häkchen ist am Handy das kleinste Ziel der Seite. Die Zeile ist zwar als
     Ganzes anklickbar (das <label> umschließt beides), der Ring selbst bekommt
     trotzdem Fingergröße. */
  .gfp-kontakt__datenschutz input[type="checkbox"] { width: 1.4em; height: 1.4em; }
  .gfp-kontakt__datenschutz input[type="checkbox"]::before { width: .6em; height: .6em; }
}

@media (max-width: 480px) {
  /* Über die volle Breite: ein kleiner Knopf unten links wird am Handy
     übersehen, und die Fläche ist hier die einzige Trefferhilfe. */
  /* flex statt block: sonst würde die Zentrierung des Inhalts (Beschriftung +
     Lays Pfeil-Icon) im vollbreiten Button nicht greifen — text-align bewegt
     ein Flex-Element nicht. */
  .gfp-kontakt__btn { display: flex; width: 100%; text-align: center; }
}

/* ─── Honeypot ──────────────────────────────────────────────────────────── */
/* Bewusst NICHT display:none — Bots erkennen das und lassen das Feld dann aus.
   Stattdessen aus dem sichtbaren Bereich geschoben; für Screenreader ist es per
   aria-hidden + tabindex="-1" im Markup ausgenommen.
   Dieselbe Verschiebung steht zusätzlich als inline-style im Markup: Fehlt diese
   Datei einmal (nicht hochgeladen, 404), stünde sonst „Dieses Feld bitte leer
   lassen" mitten im Formular — genau das ist am 17.9.2026 passiert. */

.gfp-kontakt__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}