/*
 * Terminbuchung.
 *
 * Die Farben kommen aus den Designtokens des Themes. Die Fallbacks dahinter
 * sorgen dafür, dass das Fenster auch dann brauchbar aussieht, wenn das
 * Plugin einmal unter einem anderen Theme läuft.
 *
 * Mobil zuerst: Die Zielgruppe liest oft am Handy, deshalb steht der Kalender
 * über der Uhrzeitliste und wird erst ab 820px zweispaltig.
 */

.tl-booking {
  --tl-ink: var(--ink, #0d0d0d);
  --tl-paper: var(--paper, #f5f0e8);
  --tl-cream: var(--cream, #ede8dc);
  --tl-accent: var(--accent, #e84c1e);
  --tl-accent2: var(--accent2, #2d4a3e);
  --tl-muted: var(--muted, #8a8070);
  --tl-white: var(--white, #fdfaf5);
  --tl-line: rgba(0, 0, 0, 0.14);

  max-width: 62rem;
  margin: 0 auto;
  color: var(--tl-ink);
  font-family: inherit;
}

.tl-booking *,
.tl-booking *::before,
.tl-booking *::after { box-sizing: border-box; }

.tl-booking [hidden] { display: none !important; }

/* ── Kopf ── */
.tl-booking-head { margin-bottom: 2rem; }
.tl-booking-head h2 { margin: 0 0 0.6rem; line-height: 1.15; }
.tl-booking-head p { margin: 0; color: var(--tl-muted); max-width: 44rem; }

.tl-noscript {
  padding: 1rem 1.2rem;
  background: var(--tl-cream);
  border-left: 3px solid var(--tl-accent);
}

/* ── Schritte ── */
.tl-steplabel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tl-muted);
  margin-bottom: 1rem;
}

.tl-back {
  background: none;
  border: 1px solid var(--tl-line);
  border-radius: 100px;
  padding: 0.25rem 0.8rem;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--tl-ink);
  cursor: pointer;
}
.tl-back:hover { background: var(--tl-ink); color: var(--tl-white); border-color: var(--tl-ink); }

/* ── Terminart ── */
.tl-types { display: grid; gap: 0.9rem; }
@media (min-width: 720px) { .tl-types { grid-template-columns: 1fr 1fr; } }

.tl-type {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1.2rem 1.3rem;
  background: var(--tl-white);
  border: 1px solid var(--tl-line);
  border-radius: 4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s;
}
.tl-type:hover { border-color: var(--tl-accent); transform: translateY(-2px); }
.tl-type.is-active { border-color: var(--tl-accent); box-shadow: inset 0 0 0 1px var(--tl-accent); }
.tl-type-label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.tl-type-note { display: block; font-size: 0.88rem; color: var(--tl-muted); line-height: 1.5; }

/* ── Kalender und Uhrzeiten ── */
.tl-when { display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .tl-when { grid-template-columns: 1.15fr 1fr; align-items: start; } }

.tl-cal {
  background: var(--tl-white);
  border: 1px solid var(--tl-line);
  border-radius: 4px;
  padding: 1rem;
}

.tl-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.tl-cal-head strong { font-size: 1.02rem; }

.tl-nav {
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--tl-line);
  border-radius: 100px;
  font-size: 1.2rem; line-height: 1;
  color: var(--tl-ink);
  cursor: pointer;
}
.tl-nav:hover:not(:disabled) { background: var(--tl-ink); color: var(--tl-white); border-color: var(--tl-ink); }
.tl-nav:disabled { opacity: 0.3; cursor: default; }

.tl-cal-dow,
.tl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.tl-cal-dow {
  margin-bottom: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-muted);
  text-align: center;
}

.tl-day {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--tl-muted);
  cursor: default;
}
.tl-day.is-free {
  color: var(--tl-ink);
  background: var(--tl-cream);
  border-color: var(--tl-line);
  cursor: pointer;
  font-weight: 600;
}
.tl-day.is-free:hover { border-color: var(--tl-accent); }
.tl-day.is-selected { background: var(--tl-accent); border-color: var(--tl-accent); color: #fff; }
.tl-day.is-today { box-shadow: inset 0 -2px 0 var(--tl-accent2); }
.tl-day.is-empty { visibility: hidden; }

.tl-tz { margin: 0.9rem 0 0; font-size: 0.76rem; color: var(--tl-muted); }

.tl-slots-head { font-weight: 600; margin-bottom: 0.8rem; min-height: 1.6rem; }

.tl-slots-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: 0.55rem;
  max-height: 22rem;
  overflow-y: auto;
}

.tl-slot {
  padding: 0.65rem 0.4rem;
  background: var(--tl-white);
  border: 1px solid var(--tl-line);
  border-radius: 3px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--tl-ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tl-slot:hover { border-color: var(--tl-accent); background: var(--tl-cream); }
.tl-slot.is-selected { background: var(--tl-accent); border-color: var(--tl-accent); color: #fff; }

.tl-note { color: var(--tl-muted); font-size: 0.9rem; margin: 0; }

/* ── Formular ── */
.tl-chosen {
  padding: 0.85rem 1.1rem;
  background: var(--tl-accent2);
  color: var(--tl-white);
  border-radius: 3px;
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
}

.tl-form { display: grid; gap: 1.05rem; }
@media (min-width: 720px) {
  .tl-form { grid-template-columns: 1fr 1fr; }
  /*
   * Über die Klasse und nicht über nth-child. Sobald ein Feld dazukommt oder
   * die Reihenfolge sich ändert, zeigt eine Positionsregel auf das falsche
   * Feld, und zwar lautlos.
   */
  .tl-form > .tl-wide,
  .tl-form > .tl-consent,
  .tl-form > .tl-error,
  .tl-form > .tl-submit { grid-column: 1 / -1; }
}

/*
 * align-content: start ist hier keine Feinheit, sondern notwendig.
 * Zwei Felder nebeneinander werden auf dieselbe Höhe gestreckt. Hat das linke
 * einen Hinweis unter dem Eingabefeld und das rechte nicht, verteilt das
 * rechte die überschüssige Höhe auf seine Zeilen: Beschriftung und Eingabefeld
 * werden höher, und das Eingabefeld rutscht gegenüber dem linken nach unten.
 */
.tl-field { display: grid; gap: 0.35rem; align-content: start; }
.tl-field label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.tl-opt { font-weight: 400; color: var(--tl-muted); }

.tl-field input,
.tl-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--tl-white);
  border: 1px solid var(--tl-line);
  border-radius: 3px;
  font: inherit;
  font-size: 0.98rem;
  color: var(--tl-ink);
}
.tl-field input:focus,
.tl-field textarea:focus { outline: 2px solid var(--tl-accent); outline-offset: 1px; border-color: var(--tl-accent); }
.tl-field textarea { resize: vertical; }
.tl-field.has-error input,
.tl-field.has-error textarea { border-color: #c0341a; }

.tl-hint { font-size: 0.78rem; color: var(--tl-muted); }

.tl-consent label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; line-height: 1.5; cursor: pointer; }
.tl-consent input { margin-top: 0.25rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--tl-accent); }
.tl-consent a { color: var(--tl-ink); }

/* Honigtopf: für Menschen unsichtbar, für Skripte ein normales Feld. */
.tl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tl-error {
  margin: 0;
  padding: 0.75rem 1rem;
  background: #fbe6e0;
  border-left: 3px solid #c0341a;
  color: #7d2211;
  font-size: 0.92rem;
}

.tl-submit {
  display: inline-block;
  padding: 0.95rem 1.8rem;
  background: var(--tl-accent);
  border: 1px solid var(--tl-accent);
  border-radius: 100px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  justify-self: start;
  transition: background 0.18s;
}
.tl-submit:hover:not(:disabled) { background: var(--tl-ink); border-color: var(--tl-ink); }
.tl-submit:disabled { opacity: 0.55; cursor: default; }

/* ── Abschluss ── */
.tl-done { text-align: center; padding: 2.5rem 1rem; }
.tl-check {
  width: 3.4rem; height: 3.4rem;
  margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  border-radius: 100px;
  background: var(--tl-accent2);
  color: var(--tl-white);
  font-size: 1.6rem;
}
.tl-done h3 { margin: 0 0 0.7rem; }
.tl-done p { margin: 0 auto; max-width: 34rem; color: var(--tl-muted); }
.tl-done-meta { margin-top: 1rem !important; font-size: 0.85rem; }

.tl-empty { color: var(--muted, #8a8070); }

/* ── Absageseite ── */
.tl-cancel-section { padding: 5rem 5vw; }
.tl-cancel { max-width: 38rem; margin: 0 auto; }
.tl-cancel h1 { margin: 0 0 1rem; }
.tl-cancel p { margin: 0 0 1.4rem; }
.tl-cancel .tl-inline { margin-bottom: 1rem; }
.tl-back-home a { color: var(--muted, #8a8070); }

/* ── Bewegung nur, wenn gewünscht ── */
@media (prefers-reduced-motion: reduce) {
  .tl-booking * { transition: none !important; }
  .tl-type:hover { transform: none; }
}

/* ── MITTIGE AUSRICHTUNG ──
   Kopf, Schrittzeilen und Bestätigungsband stehen mittig, passend zur
   übrigen Website.

   Das Formular bleibt bewusst linksbündig. Zentrierte Beschriftungen über
   linksbündigen Eingabefeldern lesen sich schlecht, und das Auge verliert
   beim Ausfüllen die Kante, an der die nächste Zeile beginnt. */

.tl-booking-head { text-align: center; }
.tl-booking-head p { margin-left: auto; margin-right: auto; }

.tl-steplabel { justify-content: center; }

.tl-chosen { text-align: center; }

.tl-slots-head { text-align: center; }

/* Die Terminarten-Karten behalten ihren linksbündigen Text, aber die Gruppe
   steht mittig, wenn nur eine oder zwei Karten da sind. */
.tl-types { justify-content: center; }

/* Der Absendeknopf stand am linken Rand des Formulars. */
.tl-submit { justify-self: center; }

/* ── EIGENE KLASSEN, EIGENE REGELN ──
   Die Schritte heißen bewusst .tl-stufe und nicht .tl-step. Das Theme hat
   eine eigene Regel `.tl-step { display: grid; grid-template-columns: 56px 1fr }`
   für die Ablaufschritte auf der Startseite. Auf der Terminseite laden beide
   Stylesheets, und diese Regel hat den Schritt hier in zwei Spalten zerlegt:
   Die Zeile „Schritt 2: Wann passt es Ihnen?" landete hinter dem Kalender.

   Beide Klassen bekommen hier eine eigene Regel, damit sie dem Plugin gehören
   und eine fremde Regel sie nicht mehr unbemerkt übernehmen kann. */

.tl-booking .tl-stufe { display: block; }
.tl-booking .tl-slots { min-width: 0; }