/* =========================================================================
   /termin/ - seiteneigene Regeln

   Diese Seite hat genau eine Aufgabe: einen Termin auszuloesen. Sie ist
   damit die einzige Unterseite, deren Seitenkopf kein Kopf ist, sondern
   der Abschluss selbst - Begruendung links, Kalender rechts, beides in
   derselben Bildhoehe.

   Kein neues Token. Jede Farbe, jeder Radius, jeder Grad und jede Schrift
   kommt aus site.css. Was hier steht, ist ausschliesslich das Raster fuer
   diese eine Anordnung.

   Phase 2A - Uebernahme in das Theme
   ----------------------------------
   Diese Regeln standen im statischen Master als <style>-Block im Kopf von
   termin/index.html. Sie liegen jetzt als eigene Datei im Theme und werden
   ausschliesslich auf /termin/ geladen (siehe scriptomat_page_styles() in
   inc/assets.php). Die Regeln selbst sind unveraendert.

   Entfallen sind die beiden leeren Abschnitte des Masters zur Wortmarke und
   zum Fuss: beides steht in WordPress zentral in header.php und footer.php,
   und beide Abschnitte trugen im Master bereits keine Regeln mehr.
   ========================================================================= */

/* --- 1. Der Buchungsbereich ----------------------------------------------
   Zwei Spalten auf derselben Oberkante. Links schmaler als rechts: der
   Kalender ist das Bedienstueck, nicht die Beistellung. Die Flaeche ist
   dieselbe leise Markenflaeche wie der Hero der Startseite, damit die
   weisse Kalenderplatte als eigenstaendiger Koerper darauf liegt. */
.booking {
  background: var(--herofield);
  border-bottom: 1px solid var(--line);
  padding-block: 60px 84px;
}
.booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.97fr) minmax(0, 1.03fr);
  gap: 64px;
  align-items: start;
}
.booking__pitch { max-width: 620px; }
/* Die H1 steht in der zweispaltigen Fassung in einer halben Satzbreite,
   nicht ueber die ganze. Sie traegt deshalb den Grad, den der Regelsatz
   fuer Koepfe mit knapper Breite bereits kennt - denselben wie
   .pagehead--utility. Kein neuer Grad, nur der passende aus der Leiter.
   Einspaltig faellt sie auf den regulaeren Unterseitengrad zurueck. */
.booking .pagehead__title {
  margin-top: 14px;
  font-size: 42px;
  letter-spacing: -0.028em;
}
.booking .pagehead__lede { margin-top: 22px; max-width: 30em; }

/* --- 3. Was der Termin ergibt --------------------------------------------
   Drei Ergebnisse, kein Ablauf. Die Marke ist dieselbe Randmarkierung wie
   in .points, hier als Haken statt als Balken: die Zeilen sind Zusagen
   ueber das Ergebnis, keine Aufzaehlung von Bestandteilen. */
.booking__gains {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.booking__gains li {
  position: relative;
  padding-left: 32px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}
.booking__gains li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 10px;
  border-left: 2.5px solid var(--brand-text);
  border-bottom: 2.5px solid var(--brand-text);
  transform: rotate(-45deg);
}

/* Die Bedingungen des Termins, in derselben Form wie die Zusicherungszeile
   des Masters: ein Grad kleiner als der Fliesstext, der Trenner in der
   Markenfarbe. */
.booking__terms {
  margin: 26px 0 0;
  font-size: 17px;
  color: var(--ink-quiet);
}
.booking__terms span { margin-inline: 9px; color: var(--brand-text); }

/* --- 4. Der Gastgeber ----------------------------------------------------
   Wer im Kalender steht, steht auch auf der Seite. Das Portrait ist klein
   und rund - es identifiziert eine Person am Videotermin, es wirbt nicht.
   Es ist der einzige Rundradius des Inhaltsbereichs und bleibt es. */
.booking__host {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-cool);
}
.booking__host img {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}
.booking__host .person { max-width: none; margin-top: 0; padding-top: 0; border-top: 0; }
.booking__host .person__name { margin-top: 4px; font-size: 21px; }

/* --- 5. Die Kalenderplatte -----------------------------------------------
   Weisse Flaeche, eine Haarlinie, derselbe Radius wie ueberall, kein
   Schatten. Die Hoehe ist reserviert, damit beim Laden des Widgets nichts
   springt; der Bildlauf bleibt innerhalb der Platte. */
.booking__calendar {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 780px;
}
.booking__calendar .calendly-inline-widget {
  min-width: 320px;
  height: 780px;
}
/* Ersatzdarstellung, falls das externe Widget nicht laedt - etwa hinter
   einem Netz ohne Zugang zu calendly.com oder solange die Einwilligung
   fuer den Dienst fehlt. Sie steht an derselben Stelle, in derselben
   Bauhoehe, und traegt denselben Buchungsweg als direkten Aufruf. Sie ist
   bis dahin ausgeblendet und wird nur eingeblendet, wenn nach kurzer Frist
   kein Kalenderrahmen steht. */
.booking__standin[hidden] { display: none; }
.booking__standin {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 48px;
  text-align: left;
}
.booking__standin h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.booking__standin p {
  margin: 0;
  max-width: 34em;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}
.booking__standin .cta { margin-top: 6px; align-self: start; }
.booking__standin .booking__ways {
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  color: var(--ink-quiet);
}
.booking__standin .booking__ways a { color: var(--brand-text); text-decoration: none; }
.booking__standin .booking__ways span { margin-inline: 9px; }

/* Ohne JavaScript laedt kein Kalender. Dann steht dort kein leeres Feld,
   sondern der Weg, der auch ohne ihn funktioniert. */
.booking__fallback {
  margin: 0;
  padding: 40px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-body);
}
.booking__fallback a { color: var(--brand-text); border-bottom: 1px solid var(--brand); text-decoration: none; }

/* --- 2. Schmale Fenster --------------------------------------------------
   Eine seiteneigene Stufe kommt zu den drei Stufen des Regelsatzes hinzu:
   1260 px. Sie stammt nicht aus einer Grade-Leiter, sondern aus dem
   Bedienstueck - der Kalender braucht rund 560 px, um seinen Monat in
   Spalten zu setzen. Darunter tragen zwei Spalten nicht mehr, und der
   Kopf faellt auf den regulaeren Unterseitengrad zurueck.

   Ab 1260 px abwaerts wird der Kalender schmaler und dadurch hoeher: die
   reservierte Bauhoehe waechst mit, statt den Monat abzuschneiden. */
@media (max-width: 1260px) {
  .booking__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .booking__pitch { max-width: 68ch; }
  .booking .pagehead__title { font-size: var(--h-pagesub); }
  .booking__calendar { min-height: 840px; }
  .booking__calendar .calendly-inline-widget { height: 840px; }
}
@media (max-width: 1180px) {
  .booking { padding-block: 48px 64px; }
  .booking__gains li { font-size: 18px; }
  
}
@media (max-width: 860px) {
  .booking__standin { padding: 36px 28px; }
}
@media (max-width: 560px) {
  
  .booking { padding-block: 34px 44px; }
  .booking .pagehead__title { font-size: 34px; }
  .booking__gains li { font-size: 17px; padding-left: 28px; }
  .booking__host { gap: 14px; }
  .booking__host img { width: 56px; height: 56px; }
  .booking__calendar { min-height: 900px; }
  .booking__calendar .calendly-inline-widget { height: 900px; }
  .booking__standin { padding: 28px 20px; justify-content: flex-start; }
  .booking__standin h3 { font-size: 23px; }
  .booking__fallback { padding: 28px 20px; }
  
  
  
  
}