/* ==========================================================================
   termin.css — nur für termin.html
   Die Seite trägt bewusst nichts außer Kopfzeile und Kalender. Farben,
   Typografie und das Hintergrundraster kommen aus tokens.css und base.css.
   ========================================================================== */

.termin-seite {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */

.termin-kopf {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--container-pad);
  border-bottom: 1px solid var(--border);
}

.termin-zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.termin-zurueck:hover { color: var(--accent); }
.termin-zurueck svg   { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   Kalender
   ========================================================================== */

.termin-main {
  flex: 1;
  display: flex;
  padding: var(--space-5) var(--container-pad) var(--space-6);
}

/* flex:1 statt einer ausgerechneten Höhe: das Elternelement (.termin-main)
   ist selbst ein Flex-Container, darüber bekommt der Kalender automatisch
   die volle verbleibende Höhe unter der Kopfzeile — unabhängig davon, wie
   hoch die Kopfzeile tatsächlich ist. Calendly setzt im iframe height="100%";
   eine Prozenthöhe braucht dafür eine definite Höhe des Elternelements, die
   ihr erst diese Flex-Kette liefert. Ohne sie bliebe das iframe auf seiner
   Standardhöhe von 150 px stehen und der Kalender wäre abgeschnitten. */
.calendly-inline-widget {
  flex: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  min-height: 640px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* height="100%" am iframe ist als HTML-Attribut ungültig und wird ignoriert.
   Die Höhe muss deshalb aus dem Stylesheet kommen. */
.calendly-inline-widget iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Rückfallebene ohne JavaScript
   ========================================================================== */

.termin-fallback {
  max-width: 46ch;
  margin: var(--space-9) auto;
  padding: var(--space-6);
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
}

.termin-fallback h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.termin-fallback p  { margin-bottom: var(--space-5); font-size: var(--fs-sm); }

@media (max-width: 768px) {
  .termin-kopf { padding-block: var(--space-3); }
  .termin-zurueck span { display: none; }
}