/* ==========================================================================
   Terminseiten — seitenlokale Feinheiten
   Zwei Teile: die Sprungmarken `#termin` (Formularbaustein) und `#kontakt`
   (Kontaktkacheln), dazu seit dem 28.09.2026 der Baustein „Termin: Kalender“
   (`.k-termin__*`). Keine neue Farbe, kein neues Token, keine Animation —
   nur Maße, die das Design-System offenlässt.
   ========================================================================== */

/* Der Formularkasten lief über die volle Containerbreite; Eingabefelder wurden
   dadurch rund 500 px breit und lasen sich wie eine Verwaltungsmaske.
   760 px ergeben Felder von rund 350 px — die Breite, bei der ein Eingabefeld
   wie ein Eingabefeld aussieht. */
#termin .k-formblock { max-width: 760px; }

/* Ein Freitextfeld für „nächste Woche vormittags" braucht Platz und gehört
   nicht neben eine Telefonnummer. */
#termin .kyb-grp:has(> .kyb-input[name="wunschtermin"]) { grid-column: 1 / -1; }

/* Haarlinie trennt das Ausfüllen von der Zustimmung. */
#termin .kyb-grp:has(.kyb-consent) {
  border-top: 1px solid var(--kyb-line);
  padding-top: var(--s3);
  margin-top: var(--s1);
}

/* Der Satz „Deine Angaben gehen direkt an kyberio …" ist das stärkste
   Vertrauensargument der Seite. Er gehört neben den Absende-Button, nicht
   zentriert darunter wie eine Fußnote. */
#termin .kyb-note { text-align: left; color: var(--kyb-text-2); }

/* Ein einzelner Kontaktkasten würde über die volle Rasterbreite laufen und
   wie ein Fehler wirken. Einen zweiten zu erfinden verbietet sich. */
#kontakt .k-boxes { grid-template-columns: minmax(0, 520px); }

/* Auf dem Telefon sollen die beiden Kopf-Schaltflächen nicht unterschiedlich
   breit nebeneinander flattern. */
@media (max-width: 560px) {
  .k-hero .k-btnrow { display: grid; }
  .k-hero .k-btnrow .kyb-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Baustein „Termin: Kalender“ (termin_einbettung)
   Der Rahmen wächst nicht von allein mit — deshalb feste Höhen. Unter 560 px
   Breite eine Pixelhöhe statt `vh`: Mobile Browserleisten ein- und ausblenden
   lässt `vh` während des Scrollens springen.
   -------------------------------------------------------------------------- */

.k-termin__text { margin-bottom: var(--s4); }

.k-termin__box {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--kyb-linie, rgba(255,255,255,.14));
  border-radius: var(--r4, 16px);
  background: var(--kyb-flaeche, rgba(255,255,255,.03));
}

.k-termin__box--kompakt { --k-termin-h: 560px; }
.k-termin__box--standard { --k-termin-h: 720px; }
.k-termin__box--gross   { --k-termin-h: 900px; }

.k-termin__rahmen {
  display: block;
  width: 100%;
  height: var(--k-termin-h, 720px);
  border: 0;
}

/* Fassade vor dem Klick — Maße nach dem Vorbild des Podcast-Players. */
.k-termin__vorschau {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 320px;
  padding: var(--s5) var(--s4);
  text-align: center;
}

.k-termin__symbol { color: var(--kyb-neon, #0fff9b); line-height: 0; }

.k-termin__hinweis {
  max-width: 46ch;
  margin: 0;
  color: var(--kyb-text-leise, rgba(255,255,255,.66));
  font-size: .92rem;
}

.k-termin__ziel { display: block; }
.k-termin__ziel .k-termin__rahmen { height: var(--k-termin-h, 720px); }

.k-termin__ausweich {
  margin-top: var(--s3);
  font-size: .9rem;
  color: var(--kyb-text-leise, rgba(255,255,255,.66));
}

.k-termin__ersatz { margin-top: var(--s4); }

@media (max-width: 560px) {
  .k-termin__box--kompakt,
  .k-termin__box--standard,
  .k-termin__box--gross { --k-termin-h: 680px; }
  .k-termin__vorschau { min-height: 260px; padding: var(--s4) var(--s3); }
}