/* ============================================================================
   Kontakt — App-Layer über 1ki-theme.css
   ----------------------------------------------------------------------------
   Nur, was der Theme nicht abdeckt: die Einbettung von Terminplaner und
   Formular. Farben, Schrift, Abstände, Kopf- und Fußleiste kommen aus dem
   Design-System, hier steht kein einziger roher Farbwert.
   ========================================================================= */

.kontakt-seite { padding-top: var(--space-5); }
.kontakt-seite h2 { margin-top: 0; }

/* Eingebettete Fremdinhalte (HubSpot-Terminplaner, HubSpot-Formular).
   Beide kommen in einem iframe und bringen ihr eigenes, helles Design mit.
   Statt zu versuchen, das umzufärben -- was bei jedem HubSpot-Update wieder
   bricht --, bekommen sie eine ruhige Karte in unserer Formensprache als
   Rahmen. Der Übergang ist dadurch gewollt statt zufällig. */
.einbettung,
.formular-halter {
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-height: 520px;
}

/* Das Formular bekommt mehr Luft als der Terminplaner (Christian-Befund
   2026-08-06: "passt auch nicht genau in den Frame, ist an den Rändern
   abgeschnitten"). HubSpot rendert die Eingabefelder bis dicht an den
   iframe-Rand; mit nur einem schmalen Karten-Innenabstand stoßen Feldrahmen
   und Fokus-Ring optisch an die Kartenkante und wirken beschnitten. Der
   Fokus-Ring braucht den Platz auch tatsächlich, sonst wird er abgeschnitten.
   Der Terminplaner hat eigene Innenabstände und bleibt deshalb schmaler
   gerahmt. */
.formular-halter {
  padding: var(--space-4) var(--space-4) var(--space-3);
  min-height: 0;                 /* Höhe kommt jetzt aus kontakt.js, nicht aus einer Schätzung */
}

/* Untergrenze für kurze Zustände. Nach dem Absenden ersetzt HubSpot das
   Formular durch eine zweizeilige Danke-Meldung; die exakt gemessene Höhe
   ergibt dann einen rund 60 Pixel hohen Streifen, in dem der Text an beiden
   Kanten klebt — genau das war auf Christians Screenshot als „angeschnitten"
   zu sehen. Mit einer Untergrenze bleibt auch der kurze Zustand eine Karte
   mit Luft statt eines Bandes. Für das volle Formular greift sie nicht, das
   ist ohnehin ein Vielfaches höher. */
.formular-halter iframe { min-height: 108px; }
@media (max-width: 560px) {
  .formular-halter { padding: var(--space-3) var(--space-2); }
}
.einbettung iframe,
.formular-halter iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: #fff;   /* der Planer selbst ist hell, sonst blitzt der dunkle Grund durch */
}

/* Solange der Planer lädt, steht die Karte nicht leer da. */
.einbettung:empty::after {
  content: "Terminkalender wird geladen …";
  display: grid;
  place-items: center;
  min-height: 494px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.kontakt-seite .note ul { margin: var(--space-2) 0 0; }
.kontakt-seite .meta { margin-top: var(--space-4); }

/* Schmale Geräte: der Planer braucht die volle Breite, der Karten-Innenrand
   frisst dort sonst zu viel. */
@media (max-width: 560px) {
  .einbettung,
  .formular-halter { padding: var(--space-2); border-radius: var(--radius); }
}

/* Im Hochkontrast-Modus bleibt der eingebettete Inhalt unverändert -- er
   gehört uns nicht. Umgestellt wird nur der Rahmen darum. */
html[data-a11y="strikt"] .einbettung,
html[data-a11y="strikt"] .formular-halter {
  background: #FFFFFF;
  border: 2px solid var(--line-strong);
  box-shadow: none;
}

@media print {
  .einbettung, .formular-halter { display: none; }
}