/* Terminvergabe-Filter (Shortcodes [terminfilter] und [terminkalender])
   Design: grau/schwarz, aktiv gold #a08d69 auf weiss, border-radius .5rem */

.tvf {
  --tvf-gold:       #a08d69;
  --tvf-grau:       #ececec;
  --tvf-grau-hover: #e0e0e0;
  --tvf-text:       #000;
  --tvf-radius:     .5rem;

  /* Naeherungswert fuer die Hoehe des Buchungs-Widgets, bis es seine
     tatsaechliche Hoehe meldet (gemessene Werte liegen je nach Kalender und
     Breite zwischen rund 800 und 1280 px). Gilt nur bis zur ersten echten
     Hoehenmeldung, danach greift .is-vermessen weiter unten. */
  --tvf-start-hoehe: 880px;
}

@media (max-width: 767px) {
  .tvf { --tvf-start-hoehe: 980px; }
}

.tvf__step { margin-bottom: 1.5rem; }

.tvf__label {
  margin: 0 0 .6rem;
  font-weight: 600;
  line-height: 1.4;
}

.tvf__options {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.tvf__btn {
  flex: 1 1 auto;
  min-width: 12rem;
  padding: .85rem 1.4rem;
  background: var(--tvf-grau);
  color: var(--tvf-text);
  border: none;
  border-radius: var(--tvf-radius);
  font: inherit;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tvf__btn:hover { background: var(--tvf-grau-hover); }

.tvf__btn:focus-visible {
  outline: 2px solid var(--tvf-gold);
  outline-offset: 2px;
}

.tvf__btn.is-active,
.tvf__btn.is-active:hover {
  background: var(--tvf-gold);
  color: #fff;
}

.tvf__widget { margin-top: .5rem; }

/* Hinweis im [terminkalender], solange noch nichts ausgewaehlt ist. */
.tvf__platzhalter {
  margin: 0;
  padding: 1.25rem;
  background: var(--tvf-grau);
  border-radius: var(--tvf-radius);
  color: #555;
  text-align: center;
}

/* LeadConnector-Einbettung zurechtruecken:
   form_embed.js haengt den Iframe in eigene Wrapper (.ep-iFrameContainer >
   .ep-wrapper), setzt ihn per Inline-Style auf position:absolute und gibt ihm
   eine feste Hoehe. Dadurch faellt er aus dem Textfluss, die Wrapper fallen auf
   Hoehe 0 zusammen und der Kalender legt sich ueber die folgenden Seitenbereiche.
   Die Regeln holen ihn zurueck in den normalen Fluss, ohne die vom Skript
   gesetzte Hoehe anzutasten (die wird weiter dynamisch aktualisiert). */
.tvf__widget .ep-iFrameContainer,
.tvf__widget .ep-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
}

/* Kopfzeile mit Schliessen-Kreuz gehoert zur Overlay-Variante und wuerde das
   inline eingebettete Widget wegklickbar machen. */
.tvf__widget .ep-header {
  display: none !important;
}

.tvf__widget iframe {
  position: relative !important; /* schlaegt das Inline-position:absolute */
  display: block;
  width: 100%;
  border: none;
  overflow: hidden;
  border-radius: var(--tvf-radius);
  /* Naeherungswert, solange das Widget seine echte Hoehe noch nicht gemeldet hat. */
  min-height: var(--tvf-start-hoehe);
  transition: height .35s ease, min-height .35s ease;
}

/* Sobald die echte Hoehe am Iframe steht (siehe terminvergabe-filter.js), faellt
   der Naeherungswert weg — sonst koennte der Iframe nicht darunter schrumpfen
   und laengere Ansichten wuerden weiter abgeschnitten. */
.tvf__widget iframe.is-vermessen {
  min-height: 0;
}

.tvf__noscript ul { margin: 0; padding-left: 1.2em; }

@media (max-width: 480px) {
  .tvf__btn { flex: 1 1 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tvf__btn,
  .tvf__widget iframe { transition: none; }
}