/* ## DATEI css/seite-anfrage.css | Kleine Ergaenzung nur fuer anfrage/index.html. Wird NACH
   style.css geladen und benutzt ausschliesslich dessen Tokens: keine neue Farbe, keine neue
   Schrift. Kopf ohne Menue, zwei gleichrangige Spalten, Formular im Rahmen, Fuss als Mono-Zeile.
   ## KARTE HEADER - FORMULAR - GHL-FORMULAR - KONTAKT - FOOTER - RESPONSIVE
   ## FINDEN grep -n "## " css/seite-anfrage.css | Sektionsnamen identisch mit anfrage/index.html
   ## ZWILLING anfrage/index.html (Klassen), js/anfrage.js (setzt .is-geladen und [hidden])
   ## ACHTUNG Nichts hier animiert. Formulare bewegen sich nicht. */

/* ## HEADER | Logo links, Zurueck rechts. Der Pfeil zeigt nach links und wandert beim Zeigen
   auch dorthin. | HTML anfrage/index.html ## HEADER */
.anfrage-kopf .header__inner { justify-content: space-between; }
.header__zurueck { min-height: 48px; font-size: var(--step--1); }
.header__zurueck:hover .pfeil { transform: translateX(-4px); }

/* ## FORMULAR | Zwei Spalten 7/5, oben buendig. Der Seitenkopf bringt den Abstand schon mit,
   deshalb kein Abstand nach oben. | HTML anfrage/index.html ## FORMULAR */
.anfrage__sektion { padding-top: 0; }
.anfrage__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.anfrage__form { min-width: 0; }
.anfrage__takt { display: block; color: var(--grey); margin: 0 0 12px; }
.anfrage__datenschutz { margin-top: 16px; font-size: var(--step--1); max-width: none; }

/* ## GHL-FORMULAR | Der Rahmen kommt aus style.css (.rahmen). Der Platzhalter hat Innenabstand
   und Mindesthoehe, damit die Flaeche vor dem Laden nicht zusammenfaellt. Sobald das iframe
   geladen ist (.is-geladen), schrumpft der Innenabstand auf einen schmalen Rand.
   | JS js/anfrage.js ## GHL-FORMULAR */
.anfrage__platz { min-height: 320px; padding: clamp(20px, 3vw, 32px); }
.anfrage__platz.is-geladen { min-height: 0; padding: clamp(6px, 1.2vw, 12px); }
.anfrage__platz iframe { display: block; width: 100%; }
.anfrage__hinweis { color: var(--ink-soft); max-width: none; }
.anfrage__hinweis[hidden] { display: none; }
.anfrage__hinweis a { color: var(--ink); font-weight: 500; }
.anfrage__hinweis a:hover { color: var(--akzent-tief); }
.anfrage__nachladen { font-family: inherit; cursor: pointer; margin: 8px 8px 8px 0; }

/* ## KONTAKT | Nummer gross in Mono, Mail eine Stufe kleiner, Zeilen mit Linien wie die
   Kontaktzeilen auf der Startseite. | HTML anfrage/index.html ## KONTAKT */
.anfrage__kontakt .ueberzeile { margin-bottom: 8px; }
.anfrage__zeile { padding: 20px 0; border-top: 1px solid var(--line); }
.anfrage__zeile .mono { display: block; color: var(--grey); margin-bottom: 6px; }
.anfrage__zeile p { margin-top: 10px; color: var(--ink-soft); max-width: 34ch; }
.anfrage__nummer {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--step-3); letter-spacing: -0.02em; line-height: 1;
  color: var(--ink); text-decoration: none;
}
.anfrage__nummer:hover { color: var(--akzent-tief); }
.anfrage__mail {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: var(--step-1); font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.anfrage__mail:hover { color: var(--akzent-tief); }
.anfrage__zweitweg { padding-top: 24px; border-top: 1px solid var(--line); }
.anfrage__zweitweg .leise { margin-top: 12px; font-size: var(--step--1); max-width: 40ch; }

/* ## FOOTER | Nur die Mono-Zeile. Die Linie oben liefert schon .fuss, deshalb hier keine zweite.
   Impressum und Datenschutz sind die einzigen Rechtslinks der Seite: 48px hoch wie jeder Link im
   Kopf. Die Zeile haengt an der Grundlinie, damit Adresse und Links buendig stehen.
   | HTML anfrage/index.html ## FOOTER */
.anfrage-fuss { padding-top: 24px; }
.anfrage-fuss .fuss__zeile { margin-top: 0; padding-top: 0; border-top: 0; align-items: baseline; }
.anfrage-fuss .fuss__zeile a { min-height: 48px; }

/* ## RESPONSIVE | Ab 900px eine Spalte, Kontakt unter dem Formular. Bei 320px steht die Nummer
   in einer Zeile. */
@media (max-width: 900px) {
  .anfrage__raster { grid-template-columns: 1fr; }
  .anfrage__kontakt { padding-top: 8px; }
}
@media (max-width: 400px) {
  .anfrage__platz { padding: 16px; }
  .anfrage__nummer { font-size: var(--step-2); }
}