/* ============================================================================
   booking.css - Erstberatung + Terminbestaetigung
   ========================================================================== */

body.ll-booking-body {
  --booking-accent: var(--c-accent, #b6e873);
  --booking-accent-hi: var(--c-accent-hi, #c8f08a);
  --booking-accent-ink: var(--c-accent-ink, #0c1206);
  --booking-selected-bg: #050507;
  --booking-surface-accent: var(--c-accent-light, #e4ee63);
  --booking-surface-accent-rgb: var(--c-accent-light-rgb, 228, 238, 99);
  --booking-surface-accent-soft: rgba(var(--booking-surface-accent-rgb), 0.24);
  --booking-surface-accent-softer: rgba(var(--booking-surface-accent-rgb), 0.16);
  --booking-card-shadow: 0 34px 120px rgba(0, 0, 0, 0.45);
  min-height: 100vh;
  margin: 0;
  color: #fff;
  overflow-x: hidden;
  background: #000 !important;
  background-color: #000 !important;
}

body.ll-booking-body .ll-site-header--booking {
  top: 42px;
}

body.ll-booking-body .ll-site-header--booking .ll-site-logo {
  color: #fff;
}

body.ll-booking-body .ll-site-header--booking .ll-site-logo__mark {
  font-size: 31px;
}

.ll-booking-main {
  overflow: hidden;
  background: #000;
}

.booking-hero {
  display: grid;
  align-items: start;
  padding: 105px var(--pad) 30px;
  background: #000;
}

.booking-hero__inner {
  width: min(1170px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 462px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  animation: booking-rise-in 3.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Desktop: beide Karten synchron in der Höhe (booking-sync.js setzt die Höhe) -> smooth. */
@media (min-width: 921px) {
  .booking-hero__inner .booking-copy,
  .booking-hero__inner .booking-panel {
    transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.booking-hero--verified .booking-hero__inner {
  width: min(560px, 100%);
  grid-template-columns: 1fr;
  justify-content: center;
}

.booking-hero--verified .booking-copy {
  min-height: auto;
}

body.ll-verified-body .ll-site-header--booking .ll-site-logo {
  color: #fff;
}

.verified-hero {
  position: relative;
  overflow: hidden;
  min-height: auto;
  display: grid;
  place-items: center;
  padding: 102px var(--pad) 10px;
  box-sizing: border-box;
  color: #fff;
  background: #000;
  text-align: center;
}

.verified-hero::before {
  content: none;
}

.verified-hero__inner {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  display: grid;
  justify-items: center;
}

.verified-hero .cta-contact-check circle {
  fill: #222;
}

.verified-hero h1 {
  margin: 0px 0 10px;
  color: #fff;
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0.5px;
}

.verified-hero__text {
  max-width: 460px;
  margin: 3px auto;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.5px;
}

.verified-hero__when {
  background: #cccccc;
  padding: 18px 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 12px auto 6px;
  color: #3e3e3e;
  font-family: var(--sans);
  text-align: left;
}

.verified-hero__when-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.verified-hero__when-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #7a7a7a;
}

.verified-hero__when-time {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: #3e3e3e;
}

.verified-hero__cal {
  flex: 0 0 auto;
  font-size: 40px;
  line-height: 1;
  color: #9b9b9b;
  opacity: .8;
}

.booking-copy {
  position: relative;
  z-index: 3;
  min-height: 755px;
  margin-top: 0;
  padding: 60px 42px 54px;
  box-sizing: border-box;
  border-radius: 42px;
  color: #111113;
  background: #fff;
  box-shadow: var(--booking-card-shadow);
  text-align: center;
}

.booking-copy__top {
  display: grid;
  justify-items: center;
}

.booking-host-photo {
  width: 150px;
  height: 150px;
  margin: 0 auto 22px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
}

.booking-duration {
  margin: 0;
  color: #07070a;
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
}

.booking-copy h1 {
  margin: 2px 0 0;
  color: #050507;
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
  text-align: center;
}

.booking-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: -1px;
  margin: 5px 0 20px;
  color: rgba(17, 17, 19, 0.39);
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -1px;
}

.booking-host::before {
  content: "";
  width: 31px;
  height: 31px;
  background: #999;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Termin-Typ-Icon vor "Mit Jan Froboese" — Variante je Kalender (Auto-Detect):
   Default = Telefon (Potenzial-Check). --video = Kamera (Strategieberatung/Kick-off). */
.booking-host--video::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ───────── Terminportal Leerzustand (kein identifizierbarer Termin) ─────────
   Öffnet jemand /terminportal/ ohne gültigen Link (kein cid / kein Termin),
   zeigen wir statt der Default-Inhalte einen neutralen Platzhalter: links grauer
   Kreis + Striche, rechts leer mit einem kurzen Hinweis in der Mitte. */
.tp-skeleton { display: none; }
.tp-empty-note { display: none; }
.tp-skel-load { display: none; }
.tp-cal-skeleton { display: none; }

/* Links: echte Copy aus, Skeleton an (Avatar-Kreis + Hinweistext; beim Laden Striche) */
.ll-terminportal-body[data-tp-empty] .booking-copy__top,
.ll-terminportal-body[data-tp-empty] .booking-copy__text { display: none; }

.ll-terminportal-body[data-tp-empty] .tp-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 12px 4px;
}
.tp-skel-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #e7e7eb;
  margin-bottom: 8px;
}
.tp-skel-bar,
.tp-skel-line {
  display: block;
  border-radius: 999px;
  background: #e7e7eb;
}
.tp-skel-bar { height: 15px; }
.tp-skel-bar--lg { width: 68%; height: 22px; }
.tp-skel-line { height: 11px; width: 92%; margin-top: 4px; background: #eeeef1; }
.tp-skel-line--short { width: 68%; }
/* Hinweistext unter dem Avatar — nur echter Leerzustand ("1") */
.ll-terminportal-body[data-tp-empty="1"] .tp-empty-note {
  display: block;
  max-width: 300px;
  margin: 2px auto 0;
  text-align: center;
  color: rgba(17, 17, 19, 0.5);
  font-size: 16px;
  line-height: 1.55;
}
/* Neutrale Striche links: in allen Leerzuständen aus (schlägt .tp-skel-bar), NUR beim Laden ("load") an. */
.ll-terminportal-body[data-tp-empty] .tp-skel-load { display: none; }
.ll-terminportal-body[data-tp-empty="load"] .tp-skel-load { display: block; }

/* Rechts: echte Inhalte aus, Kalender-Skeleton an (graue Flächen, wie noch nicht geladen) */
.ll-terminportal-body[data-tp-empty] .terminportal-appointment-area,
.ll-terminportal-body[data-tp-empty] .terminportal-form { display: none; }
.ll-terminportal-body[data-tp-empty] .terminportal-content { display: block; min-height: 300px; }
.ll-terminportal-body[data-tp-empty] .tp-cal-skeleton { display: block; }

.tp-cal-skeleton { width: 100%; padding: 4px 2px; }
.tp-cal-skeleton__head { display: block; height: 22px; width: 58%; border-radius: 999px; background: #e7e7eb; }
.tp-cal-skeleton__head--sub { height: 13px; width: 40%; margin-top: 12px; background: #eeeef1; }
.tp-cal-skeleton__grid {
  margin-top: 24px;
  padding: 20px 18px;
  border-radius: 18px;
  background: #f4f4f6;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px 9px;
}
.tp-cal-skeleton__grid span {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #e4e4e9;
}
.tp-cal-skeleton__slots {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tp-cal-skeleton__slots span {
  height: 42px;
  border-radius: 999px;
  background: #eeeef1;
}

/* Mobile: .booking-copy ist hier display:contents (kein Kasten). Im Leerzustand braucht
   das linke Skeleton daher eine EIGENE weiße Karte; das Panel/Kalender-Skeleton wird eine
   eigene Karte darunter (das -30px-Overlap aus dem Normalzustand zurücksetzen). */
@media (max-width: 920px) {
  .ll-terminportal-body[data-tp-empty] .tp-skeleton {
    width: min(calc(100% - 40px), 520px);
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    border-radius: 42px;
    padding: 44px 26px 40px;
    box-shadow: 0 -40px 90px rgba(0, 0, 0, 0.12);
  }
  .ll-terminportal-body[data-tp-empty] .terminportal-panel {
    margin-top: 16px;
    border-radius: 42px;
  }
}

.booking-copy__text {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 362px;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  padding-left: 10px;
}

.booking-copy__text p,
.booking-copy__lead {
  margin: 0;
  color: #222;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.42;
  letter-spacing: 0;
}

.booking-copy__text strong {
  font-weight: 500;
}

.booking-panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 695px;
  margin-top: 30px;
  margin-left: -80px;
  padding: 47px 58px 38px 75px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  color: #111113;
  background: #fff;
  box-shadow: var(--booking-card-shadow);
}

.booking-panel__head {
  max-width: 530px;
  margin: 0 auto;
  padding: 0 0 27px;
  border: 0;
  text-align: center;
}

.booking-panel__head h2 {
  margin: 0;
  color: #111113;
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
}

.booking-step {
  max-width: 530px;
  margin: auto;
  padding: 0;
  border: 0;
}

.booking-step--form {
  display: none;
}

.booking-panel[data-booking-current-step="form"] .booking-panel__head,
.booking-panel[data-booking-current-step="form"] .booking-step--calendar {
  display: none;
}

/* Im Formular-Schritt darf das nach oben aufklappende Telefon-Laender-Dropdown
   aus der Karte ragen (sonst kappt es das overflow:hidden der Karte). */
.booking-panel[data-booking-current-step="form"] {
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Status/Alert im Formular-Schritt: mittig OBEN ueber dem Formular (wie CTA-Quiz) */
.booking-panel[data-booking-current-step="form"] .booking-step--form {
  order: 2;
  width: 100%;
  margin-inline: auto;   /* horizontal zentriert (max-width greift weiter) */
  margin-block: 0;       /* kein auto -> kein vertikaler Versatz im Flex */
}
.booking-panel[data-booking-current-step="form"] .booking-status {
  order: 1;
}

.booking-panel[data-booking-current-step="form"] .booking-step--form {
  display: block;
  animation: booking-step-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.booking-step__label {
  display: none;
}

.booking-refresh {
  border: 0;
  padding: 0;
  color: var(--booking-accent-ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.booking-slots {
  min-height: 0;
}

.booking-calendar-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

.booking-calendar-main {
  --booking-day-column-gap: clamp(4px, 1.75vw, 23px);
  --booking-day-row-gap: clamp(2px, 0.46vw, 6px);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 30px;
  border-radius: 20px;
  background: #eee;
}

.booking-calendar-head {
  width: min(100%, 352px);
  display: grid;
  grid-template-columns: 41px 1fr 41px;
  align-items: center;
  gap: 7px;
  margin: 0 auto 22px;
}

.booking-month-title {
  margin: 0;
  color: #151520;
  font-family: var(--sans);
  font-size: clamp(22px, 2.25vw, 29px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.booking-month-arrow {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--booking-accent-ink);
  background: transparent;
  font-family: var(--sans);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.booking-month-arrow:last-child {
  background: var(--booking-surface-accent-soft);
}

/* Monat ohne Verfügbarkeit in dieser Richtung -> Pfeil inaktiv (Navigation an
   die echte Slot-Range gebunden). */
.booking-month-arrow[disabled] {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

.booking-weekdays,
.booking-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-content: center;
  column-gap: var(--booking-day-column-gap);
  row-gap: var(--booking-day-row-gap);
}

.booking-weekdays {
  margin-bottom: 15px;
}

.booking-weekdays span {
  color: #101014;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.booking-month-grid {
  column-gap: var(--booking-day-column-gap);
  row-gap: var(--booking-day-row-gap);
}

.booking-day-cell,
.booking-day-spacer {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 0;
  justify-self: center;
}

.booking-day-cell {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #b8b8bd;
  background: #0000000a;
  font-family: var(--sans);
  font-size: clamp(18px, 1.45vw, 20px);
  font-weight: 500;
  line-height: 1;
  cursor: default;
  transition: background 0.1s, color 0.1s, box-shadow 0.1s;
}

.booking-day-cell.has-slots {
  color: var(--booking-accent-ink);
  background: var(--booking-surface-accent);
  font-weight: 600;
  cursor: pointer;
}

.booking-day-cell.has-slots:hover {
  color: var(--booking-surface-accent);
  background: #444;
}

.booking-day-cell.is-selected {
  color: var(--booking-surface-accent);
  background: var(--booking-selected-bg);
  box-shadow: none;
}

.booking-day-cell.is-selected:hover {
  color: var(--booking-surface-accent);
  background: var(--booking-selected-bg);
}

.booking-day-cell.is-today:not(.is-selected) {
  color: black;
  box-shadow: inset 0 0 0 1px rgb(60 60 60 / 58%);
}

.booking-day-cell[disabled] {
  opacity: 1;
}

/* Lade-Ueberbrueckung: Solange die verfuegbaren Tage laden, laeuft eine weiche,
   endlose Diagonal-Welle ueber das leere Gitter — oben-links nach unten-rechts,
   Reihe fuer Reihe. Die Kreise blenden sanft auf und ab (Opacity + minimale
   Skalierung), langsam & elegant, nie hektisch. Der Delay pro Zelle = (Reihe+Spalte)
   wird inline gesetzt (booking.js -> waveDelay). Sobald die Tage da sind, ersetzt
   renderSlots das Skeleton und die echten Tage cascaden diagonal herein (is-revealing).*/
@keyframes booking-cell-wave {
  0%, 100% { opacity: 0.12; transform: scale(0.80); }
  45%      { opacity: 0.62; transform: scale(1); }
}
@keyframes booking-cell-in {
  from { opacity: 0; transform: scale(0.80); }
  to   { opacity: 1; transform: none; }
}
.booking-day-cell.is-skeleton {
  pointer-events: none;
  color: transparent;
  background: var(--booking-skeleton-bg, rgba(122, 122, 130, 0.30));
  animation: booking-cell-wave 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  will-change: opacity, transform;
}
.booking-day-cell.is-revealing,
.booking-day-spacer.is-revealing {
  animation: booking-cell-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .booking-day-cell.is-skeleton { animation: none; opacity: 0.4; }
  .booking-day-cell.is-revealing,
  .booking-day-spacer.is-revealing { animation: none; }
}

.booking-time-column {
  --booking-time-confirm-width: 115px;
  --booking-time-gap: 4px;
  width: 100%;
  padding: 0 39px;
}

.booking-time-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-time-slot {
  width: 100%;
  min-height: 40px;
  display: flex;
  gap: var(--booking-time-gap);
  align-items: center;
  overflow: hidden;
}

.booking-time-column.is-entering .booking-time-slot {
  animation: booking-times-enter 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.booking-time-column.is-entering .booking-time-slot:nth-child(2) {
  animation-delay: 0.045s;
}

.booking-time-column.is-entering .booking-time-slot:nth-child(3) {
  animation-delay: 0.09s;
}

.booking-time-column.is-entering .booking-time-slot:nth-child(4) {
  animation-delay: 0.135s;
}

.booking-time-column.is-entering .booking-time-slot:nth-child(n + 5) {
  animation-delay: 0.18s;
}

.booking-time-value,
.booking-time-confirm {
  height: 40px;
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.booking-time-value {
  width: 100%;
  color: var(--booking-accent-ink);
  background: var(--booking-surface-accent);
  transition: flex-basis 0.3s, width 0.3s, background 0.16s ease, color 0.16s ease;
}

.booking-time-slot.is-active .booking-time-value {
  width: calc(100% - var(--booking-time-confirm-width) - var(--booking-time-gap));
  color: var(--booking-surface-accent);
  background: var(--booking-selected-bg);
  animation: booking-time-shrink 0.3s ease both;
}

.booking-time-confirm {
  width: var(--booking-time-confirm-width);
  flex: 0 0 var(--booking-time-confirm-width);
  color: var(--booking-accent-ink);
  background: var(--booking-surface-accent);
  animation: booking-slot-confirm-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.16s ease;
}

.booking-loading,
.booking-empty {
  min-height: 420px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  color: #8c8c94;
  font-family: var(--sans);
  font-size: 14px;
  text-align: center;
}

.booking-form {
  position: relative;
  display: grid;
  gap: 0;
  min-height: auto;
}

/* Back-Pfeil + "Kontaktdetails" in EINER Zeile */
.booking-form-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
}

.booking-back {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  border-radius: 50%;
  color: #4d4d55;                 /* neutraler Pfeil, keine Akzentfarbe */
  background: #f0f0f2;            /* ganz helles Grau */
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.booking-back:hover {
  color: var(--booking-surface-accent);   /* Pfeil in Akzentfarbe */
  background: #000;                        /* Hintergrund schwarz */
}

.booking-back::before {
  content: "\2039";
  margin-top: -2px;
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

/* Gebuchter Termin klein IM Button, direkt unter "Kostenlos reservieren" */
.booking-submit-label {
  line-height: 1.04;
}
.booking-submit-when {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.5px;
  white-space: nowrap;
  opacity: 0.4;
}
.booking-submit-when:empty {
  display: none;
}

.booking-form-title {
  margin: 0;
  color: #111113;
  font-family: var(--sans);
  font-size: 39px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1px;
}

.booking-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.booking-field {
  display: grid;
  gap: 8px;
}

.booking-field--wide {
  margin-top: 6px;
}

.booking-field span {
  color: #33333a;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.booking-field input,
.booking-field select,
.booking-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dedee5;
  border-radius: 4px;
  color: #111113;
  background: #fff;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.booking-field input,
.booking-field select {
  min-height: 38px;
  padding: 0 11px;
}

.booking-field textarea {
  min-height: 130px;
  padding: 11px;
  line-height: 1.35;
  resize: vertical;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
  border-color: rgba(var(--booking-surface-accent-rgb), 0.82);
  box-shadow: 0 0 0 3px rgba(var(--booking-surface-accent-rgb), 0.16);
}

/* ----------------------------------------------------------------------------
   Globales Formular-Bauteil (.ll-field aus styles.css) auf die WEISSE Booking-
   Karte themen: graue Felder statt halbtransparent-weiss (das passt nur auf die
   helle Quiz-Orb). Markup/Floating-Label/Telefon-Fahne bleiben identisch.
   -------------------------------------------------------------------------- */
.booking-panel .ll-field {
  --ll-field-bg: #f0f0f2;          /* Ruhe: dezentes Grau, auf Weiss sichtbar */
  --ll-field-bg-filled: #ebebee;   /* ausgefuellt + verlassen: minimal dunkler */
  --ll-field-bg-hover: #fff;       /* Hover/Fokus: voll weiss */
  --ll-field-border: #e3e3e9;      /* feiner Rand statt schwerem Schatten */
  --ll-field-border-focus: #d2d2da;
  --ll-field-shadow: 0 1px 2px rgba(16, 17, 19, 0.05);
}

/* Felder fuellen ihre Grid-Zelle (Vor-/Nachname nebeneinander, Email/Telefon) */
.booking-panel .booking-form__row .ll-field {
  display: block;
  min-width: 0;
}

/* Beschreibungs-Textarea in einer grauen Box (Headline + Textfeld zusammen) */
.booking-notes-field {
  margin-top: 0px;
  margin-bottom: 10px;
  padding: 20px;
  border-radius: 20px;
  background: #f1f1f1;
}

/* Beschreibung als statische Headline UEBER dem Textfeld (kein Platzhalter) */
.booking-notes-headline {
  margin: 0 0 8px;
  color: #222;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.1;
}

.booking-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.booking-privacy {
  max-width: 610px;
  margin: 0px 0 0;
  color: #6e6e6e;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.1;
}

.booking-submit {
  justify-self: center;
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  min-height: 72px;
  padding: 10px 70px;     /* horizontales Padding reserviert die Spinner-Zone -> Text bleibt drin */
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
  color: var(--booking-accent-ink);
  background: var(--booking-surface-accent);
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.booking-submit:not(:disabled):hover {
  background: var(--booking-accent-ink);   /* invertiert: schwarz */
  color: var(--booking-surface-accent);    /* Schrift in Accent */
}

.booking-time-value:hover,
.booking-time-confirm:hover {
  color: var(--booking-surface-accent);
  background: #444;
}

.booking-submit:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -16px rgba(var(--booking-surface-accent-rgb), 0.62);
}

.booking-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.booking-status {
  min-height: 22px;
  margin: 20px 0 0;
  color: #333;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
}

/* Leere Status-Zeile (z. B. im Formular-Schritt nach der Auswahl) nimmt keinen Platz weg */
.booking-status:empty {
  display: none;
}

.booking-status:not(:empty)::before {
  content: "";
  width: 8px;
  height: 8px;
  display: inline-block;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--booking-surface-accent);
}

.booking-status.is-error {
  color: #b82418;
}

.booking-status.is-error::before {
  background: #b82418;
}

.booking-status.is-success {
  color: #31460e;
}

.booking-status.is-success::before {
  background: var(--booking-surface-accent);
}

.booking-panel[data-booking-current-step="form"] .booking-status {
  margin: 0 0 18px;
  text-align: center;
}

.booking-trust,
.booking-explain,
.booking-confirm {
  padding: clamp(76px, 9vw, 118px) var(--pad);
}

.booking-trust {
  background: #000;
}

.booking-trust__inner,
.booking-explain__inner,
.booking-confirm__inner {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.booking-trust .ll-proof-logos__label {
  color: rgba(255, 255, 255, 0.48);
}

.booking-trust .ll-proof-logos__item {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.booking-trust .ll-proof-logos__item img {
  filter: brightness(0) invert(1);
}

.booking-trust .ll-proof-logos__item img[src*="logo-3"] {
  filter: none;
}

/* Globale Landingpage-Elemente unter dem Kalender — Look 1:1 aus styles.css (.hero-*).
   Hier nur die Band-Platzierung (Hintergrund + Abstand), KEINE Optik-Overrides. */
.ll-booking-main > .hero-proof,
.ll-booking-main > .hero-logos {
  background: #000;
}

.ll-booking-main > .hero-proof {
  margin: 0;
  padding: clamp(76px, 9vw, 118px) var(--pad) 0;
}

.ll-booking-main > .hero-logos {
  padding: 40px var(--pad) clamp(76px, 9vw, 118px);
}

.booking-potenzial-cta {
  padding: clamp(18px, 4vw, 52px) var(--pad) clamp(78px, 9vw, 126px);
  color: #fff;
  background: #000;
}

/* ───────── Termin verwalten: Absagen / Verschieben (Manage-Panel) ─────────
   KEIN min-height-Override mehr -> Manage-Panels erben die 695px wie /erstberatung/,
   damit alle rechten Fenster gleich hoch sind. */

.booking-manage {
  max-width: 530px;
  margin: 0 auto;
}

.booking-manage__appt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding: 18px 28px;
  border-radius: 12px;
  background: #f1f1f3;
}

.booking-manage__cal {
  flex: 0 0 auto;
  font-size: 34px;
  line-height: 1;
  opacity: 0.8;
}

.booking-manage__appt-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.booking-manage__appt-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #7a7a7a;
}

.booking-manage__appt-time {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #1c1c1f;
}

/* Auswahl-Liste bei mehreren offenen Terminen */
.booking-manage__picker-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.booking-manage__pick {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 22px;
  text-align: left;
  border: 1px solid #e0e0e4;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.booking-manage__pick:hover {
  border-color: #1c1c1f;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5);
}
.booking-manage__pick-cal { flex: 0 0 auto; font-size: 26px; line-height: 1; opacity: 0.8; }
.booking-manage__pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.booking-manage__pick-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: #7a7a7a;
}
.booking-manage__pick-when { font-size: 19px; font-weight: 600; color: #1c1c1f; }

/* Verschieben: aktueller (zu verschiebender) Termin, durchgestrichen im Panel-Kopf */
.booking-reschedule-current {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  margin-top: 10px;
}
.booking-reschedule-current__label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9a9a9a;
}
.booking-reschedule-current__when {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: #9a9a9a;
  text-decoration: line-through;
  text-decoration-color: #b82418;
}
.booking-reschedule-pick-head { margin-bottom: 8px; }

/* Absage-Button: bewusst zurueckhaltend (destruktiv) statt Accent */
.booking-submit--danger {
  background: #e7e7ea;
  color: #b82418;
}
.booking-submit--danger:not(:disabled):hover {
  background: #b82418;
  color: #fff;
}

.booking-manage__done {
  padding: 16px 0 6px;
  text-align: center;
}
.booking-manage__check {
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
}
.booking-manage__check circle {
  fill: #eee;
}
.booking-manage__done-title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 500;
  color: #111113;
}
.booking-manage__done-sub {
  margin: 2px auto;
  max-width: 420px;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.3;
  color: #555;
}
.booking-manage__done-old {
  text-decoration: line-through;
  text-decoration-color: #b82418;
  color: #9a9a9a;
  font-size: 19px;
  font-weight: 600;
}
.booking-manage__rebook {
  margin-top: 22px;
  text-decoration: none;
}

/* ───────── Konstante Panel-Hoehe (Desktop): rechtes Fenster ueberall gleich hoch ─────────
   Erstberatung/Verschieben (Kalender-Schritt) werden auf die bewaehrten 695px
   FIXIERT; viele Uhrzeiten lassen das Panel nicht mehr wachsen, sondern scrollen
   intern in der Uhrzeiten-Liste. Absagen/Verschieben erben 695 via min-height.
   Der Formular-Schritt bleibt frei wachsend (kein Clipping). */
@media (min-width: 921px) {
  .booking-panel[data-booking-current-step="calendar"] {
    height: 695px;
    display: flex;
    flex-direction: column;
  }
  .booking-panel[data-booking-current-step="calendar"] .booking-step--calendar {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 530px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  .booking-panel[data-booking-current-step="calendar"] .booking-slots {
    flex: 1 1 auto;
    min-height: 0;
  }
  .booking-panel[data-booking-current-step="calendar"] .booking-calendar-shell {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
  }
  .booking-panel[data-booking-current-step="calendar"] .booking-time-column {
    min-height: 0;
    overflow: hidden;
  }
  .booking-panel[data-booking-current-step="calendar"] .booking-time-slots {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
    padding-right: 4px;
  }
}

/* ───────── Confirmed-Seite (/confirmed/): seiten-spezifisches Spacing ─────────
   Diese Klassen sind global (auch /erstberatung/ + /verified/). Daher hier nur
   per [data-booking-confirmation] gescoped und desktop-only (>920px), damit
   Mobile und die anderen Seiten unberuehrt bleiben. Werte von Jan. */
@media (min-width: 921px) {
  .ll-booking-main[data-booking-confirmation] .verified-hero {
    padding: 102px var(--pad) 60px;
  }
  .ll-booking-main[data-booking-confirmation] > .hero-proof {
    padding: clamp(76px, 9vw, 118px) var(--pad) 80px;
  }
  [data-booking-confirmation] .ll-brand-slogan {
    padding: 56px 5vw 150px;
  }
  [data-booking-confirmation] .ll-trust-numbers {
    padding: 0 5vw 204px;
  }
}

.booking-potenzial-cta__head {
  width: min(820px, 100%);
  margin: 0 auto 38px;
  text-align: center;
}

.booking-potenzial-cta__head h2 {
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(42px, 5.9vw, 78px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
}

.booking-potenzial-cta__head p:not(.ll-section-eyebrow) {
  width: min(650px, 100%);
  margin: 20px auto 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: 0;
}

.booking-potenzial-cta__inner {
  width: 100%;
  margin: 0 auto;
}

.booking-potenzial-cta__inner > .booking-hero--potenzial-check {
  padding: 0;
  background: transparent;
}

.booking-potenzial-cta__inner > .booking-hero--potenzial-check .booking-hero__inner {
  width: min(1170px, 100%);
}

.booking-explain {
  background: #050507;
  color: #fff;
}

.booking-explain__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}

.booking-explain .ll-eyebrow {
  margin: 0 0 18px;
  color: var(--booking-accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-explain h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(36px, 5.2vw, 70px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
}

.booking-explain p,
.booking-explain li {
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0;
}

.booking-explain p {
  margin: 20px 0 0;
}

.booking-explain ul {
  display: grid;
  gap: 12px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.booking-explain li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-confirm {
  min-height: 72vh;
  display: grid;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.08), transparent 34vw),
    linear-gradient(180deg, #050505 0%, #000 42%, #050507 100%);
}

.booking-confirm__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}

.booking-confirm h1 {
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(48px, 7.8vw, 104px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0;
}

.booking-confirm h1 span {
  display: block;
  color: var(--c-accent);
}

.booking-confirm p {
  max-width: 610px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.4;
}

.booking-confirm-card {
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.booking-confirm-card dl {
  display: grid;
  gap: 16px;
  margin: 0;
}

.booking-confirm-card dt {
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-confirm-card dd {
  margin: 4px 0 0;
  color: #fff;
  font-family: var(--sans);
  font-size: 17px;
}

.booking-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.booking-confirm-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
}

.booking-confirm-actions a:first-child {
  color: var(--c-accent-ink);
  background: var(--c-accent);
  font-weight: 800;
}

@keyframes booking-rise-in {
  from {
    opacity: 0;
    transform: translateY(54px);
  }
  34% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes booking-step-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes booking-time-shrink {
  from {
    width: 100%;
  }
  to {
    width: calc(100% - var(--booking-time-confirm-width) - var(--booking-time-gap));
  }
}

@keyframes booking-time-shrink-mobile {
  from {
    width: 100%;
  }
  to {
    width: calc(100% - var(--booking-time-confirm-width) - var(--booking-time-gap));
  }
}

@keyframes booking-times-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  62% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes booking-slot-confirm-in {
  from {
    opacity: 0;
    transform: translateX(42px);
  }
  58% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-hero__inner,
  .booking-calendar-main,
  .booking-panel[data-booking-current-step="form"] .booking-step--form,
  .booking-time-column.is-entering .booking-time-slot,
  .booking-time-slot.is-active .booking-time-value,
  .booking-time-confirm {
    animation: none !important;
  }

  .booking-day-cell,
  .booking-time-value,
  .booking-time-confirm,
  .booking-submit,
  .booking-field input,
  .booking-field select,
  .booking-field textarea {
    transition: none !important;
  }
}

@media (max-width: 1180px) {
  .booking-hero__inner {
    grid-template-columns: 400px minmax(0, 1fr);
  }

  .booking-copy {
    border-radius: 38px;
  }

  .booking-panel {
    margin-left: -15px;
    padding-right: 44px;
    padding-left: 60px;
  }

  .booking-calendar-shell {
    grid-template-columns: 1fr;
  }

  .booking-time-value {
    width: 100%;
  }
}

@media (min-width: 921px) and (max-width: 1080px) {
  .booking-panel {
    min-height: 695px;
    padding-right: 40px;
    padding-left: 40px;
  }

  .booking-calendar-shell {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .booking-calendar-main {
    width: 100%;
    margin: 0 auto;
  }

  .booking-calendar-head {
    width: min(100%, 340px);
  }

  .booking-weekdays,
  .booking-month-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .booking-day-cell,
  .booking-day-spacer {
    width: 100%;
    height: auto;
  }

  .booking-day-cell {
    font-size: 19px;
  }

  .booking-time-column {
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
  }

  .booking-time-slots {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .booking-time-slot {
    min-height: 35px;
  }

  .booking-time-value {
    width: 100%;
    height: 35px;
    font-weight: 500;
  }

  .booking-time-slot.is-active {
    grid-column: 1 / -1;
  }

  .booking-time-slot.is-active .booking-time-value {
    animation-name: booking-time-shrink-mobile;
  }

  .booking-time-confirm {
    height: 35px;
    font-weight: 500;
  }
}

@media (max-width: 980px) and (min-width: 921px) {
  .booking-hero__inner {
    grid-template-columns: 395px minmax(0, 1fr);
  }

  .booking-panel {
    margin-left: -34px;
    padding-left: 48px;
  }
}

@media (max-width: 920px) {
  body.ll-booking-body .ll-site-header--booking {
    top: 25px;
    left: 0;
    right: 0;
  }

  body.ll-booking-body .ll-site-header--booking .ll-site-logo__mark {
    font-size: 38px;
  }

  .verified-hero {
    min-height: auto;
    padding: 96px var(--mobile-gutter) 10px;
  }

  .verified-hero h1 {
    font-size: 40px;
    line-height: 1;
  }

  .verified-hero__text {
    font-size: 21px;
    line-height: 1.25;
  }

  .booking-hero {
    min-height: auto;
    display: block;
    padding: 120px 0 0;
  }

  .booking-hero__inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .booking-hero--verified .booking-hero__inner {
    width: 100%;
  }

  .booking-copy {
    display: contents;
  }

  .booking-copy__top,
  .booking-copy__text,
  .booking-panel {
    width: min(calc(100% - 40px), 520px);
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
  }

  .booking-copy__top {
    order: 1;
    position: relative;
    display: block;   /* nicht grid (vom Desktop geerbt) -> sonst falsche width:100% der absoluten Kinder */
    min-height: 332px;
    padding: 0 20px 28px;
    border-radius: 52px 52px 0 0;
    color: #111113;
    background: #fff;
    box-shadow: 0 -40px 90px rgba(0, 0, 0, 0.12);
  }

  .booking-host-photo {
    position: absolute;
    top: -20px;
    left: 50%;
    width: 130px;
    height: 130px;
    margin: 0;
    transform: translateX(-50%);
  }

  .booking-duration {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    font-size: 39px;
    line-height: 0.86;
  }

  .booking-copy h1 {
    position: absolute;
    top: 153px;
    left: 0;
    width: 100%;
    /* globale Mobile-h1-Regel (max-inline-size + margin-right:auto) ueberschreiben,
       sonst wird die Headline schmal gekappt und nach links geschoben */
    max-inline-size: none;
    margin: 0;
    /* skaliert mit der Viewportbreite -> "Potenzial-Check" passt auch auf
       schmale Phones in die Karte und bleibt mittig (kein Ueberlauf nach links) */
    font-size: clamp(26px, 8.4vw, 38px);
    line-height: 0.88;
  }

  .booking-host {
    position: absolute;
    top: 229px;
    left: 50%;
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .booking-panel {
    order: 2;
    min-height: 0;
    margin-top: -30px;
    padding: 30px 30px 0px;
    /* Beschreibung (booking-copy__text) schliesst unten an -> nur oben runden */
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.12);
  }

  .booking-panel__head {
    display: none;
  }

  .booking-slots {
    min-height: 0;
  }

  .booking-calendar-shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .booking-calendar-main {
    --booking-day-column-gap: clamp(4px, 1.75vw, 23px);
    --booking-day-row-gap: clamp(2px, 0.46vw, 6px);
    width: 100%;
    margin: 0 auto;
    padding: clamp(20px, 5vw, 30px);
  }

  .booking-calendar-head {
    width: min(100%, 292px);
    margin-bottom: 24px;
    grid-template-columns: 42px 1fr 42px;
  }

  .booking-month-title {
    font-size: 22px;
  }

  .booking-month-arrow {
    width: 42px;
    height: 42px;
    font-size: 28px;
  }

  .booking-weekdays {
    margin-bottom: 14px;
  }

  .booking-weekdays span {
    font-size: 14px;
  }

  .booking-month-grid {
    column-gap: var(--booking-day-column-gap);
    row-gap: var(--booking-day-row-gap);
  }

  .booking-weekdays,
  .booking-month-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding: 0;
    box-sizing: border-box;
  }

  .booking-day-cell,
  .booking-day-spacer {
    width: 100%;
    height: auto;
    justify-self: center;
  }

  .booking-day-cell {
    font-size: clamp(17px, 4.45vw, 19px);
    font-weight: 500;
  }

  .booking-time-column {
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
  }

  .booking-time-slots {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .booking-time-slot {
    min-height: clamp(33px, 9vw, 35px);
  }

  .booking-time-column.is-mobile-hidden {
    display: none;
  }

  .booking-time-value {
    width: 100%;
    height: clamp(33px, 9vw, 35px);
    font-weight: 500;
  }

  .booking-time-slot.is-active .booking-time-value {
    animation-name: booking-time-shrink-mobile;
  }

  .booking-time-confirm {
    height: clamp(33px, 9vw, 35px);
    font-weight: 500;
  }

  .booking-copy__text {
    order: 3;
    display: grid;
    gap: 14px;
    max-width: none;
    /* schliesst optisch nahtlos an die weisse Panel-Karte darueber an (ein Block) */
    margin-top: 0;
    padding: 8px clamp(22px, 7vw, 38px) 38px;
    border-radius: 0 0 52px 52px;   /* unten so gross wie oben bei .booking-copy__top */
    color: #111113;
    background: #fff;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.14);
    text-align: left;
  }

  .booking-copy__text p {
    color: #222;
    font-size: 18px;
  }

  .booking-copy__text strong {
    color: #111113;
  }

  .booking-form {
    min-height: auto;
  }

  .booking-back {
    margin-bottom: 0;
  }

  .booking-form-head {
    margin-bottom: 16px;
  }

  .booking-form-title {
    margin-bottom: 0;
    font-size: 32px;
  }

  .booking-form__row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }

  .booking-privacy {
    font-size: 12px;
  }

  .booking-submit {
    width: 100%;
    min-height: 58px;
    margin-top: 15px;
    margin-bottom: 20px;   /* 20px Abstand zum Text darunter */
    /* Seiten-Padding skaliert: bis 40px auf breiteren Screens, kleiner auf schmalen */
    padding: 10px clamp(14px, 6vw, 40px);
    /* CTA so gross wie moeglich; 5vw statt 6vw, sonst bricht "Kostenlos reservieren" auf Phones um */
    font-size: clamp(14px, 5vw, 25px);
  }
  .booking-submit__slot { flex: 0 0 26px; }   /* reserviert rechts die Spinner-Zone (Text bleibt clear) */
  .booking-submit.is-loading::after {
    right: 10px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
  }

  .booking-status {
    margin: 9px 0 10px;
    color: #999999;
    font-size: 15px;
  }

  .booking-panel[data-booking-current-step="form"] .booking-status {
    text-align: center;
  }

  .booking-potenzial-cta {
    padding: 28px var(--mobile-gutter) 82px;
  }

  .booking-potenzial-cta__head {
    margin-bottom: 28px;
  }

  .booking-potenzial-cta__head h2 {
    font-size: clamp(38px, 10.8vw, 56px);
    line-height: 1;
  }

  .booking-potenzial-cta__head p:not(.ll-section-eyebrow) {
    font-size: 17px;
  }

  .booking-potenzial-cta__inner {
    width: 100%;
  }

  .booking-potenzial-cta__inner > .booking-hero--potenzial-check {
    padding: 0;
  }

  .booking-potenzial-cta__inner > .booking-hero--potenzial-check .booking-panel {
    margin-top: -30px;
  }

  .booking-explain__inner,
  .booking-confirm__inner {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 621px) and (max-width: 920px) {
  .booking-time-slots {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .booking-time-slot.is-active {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .booking-hero {
    padding-right: 0;
    padding-left: 0;
  }

  .booking-copy__top,
  .booking-copy__text,
  .booking-panel {
    width: calc(100% - clamp(24px, 6vw, 40px));
  }

  .booking-copy__top {
    min-height: 332px;
    border-radius: 52px 52px 0 0;
  }

  .booking-panel {
    border-radius: 16px 16px 0 0;
  }

  .booking-trust,
  .booking-explain,
  .booking-confirm {
    padding: 76px var(--mobile-gutter);
  }

  .booking-explain h2 {
    font-size: 41px;
    line-height: 0.98;
  }

  .booking-explain p,
  .booking-explain li {
    font-size: 16px;
  }

  .booking-confirm h1 {
    font-size: 46px;
    line-height: 0.96;
  }
}

@media (max-width: 390px) {
  .booking-duration {
    font-size: 39px;
  }

  .booking-copy__top {
    padding-right: 22px;
    padding-left: 22px;
  }

  .booking-panel {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* ----------------------------------------------------------------------------
   Globale Trust-Bloecke (von der Landingpage) auf der Buchungsseite: die
   .testimonials-Section bringt riesige Section-Paddings (140px/300px) mit, die
   hier einen leeren Bereich erzeugen -> nur im Booking-Kontext kompakter.
   -------------------------------------------------------------------------- */
.ll-booking-body .testimonials {
  padding-top: 24px;
  padding-bottom: 40px;
}

/* Hinweis: Der Floating-Scroll-Button (.ll-scrolltop) liegt jetzt global in
   styles.css (wiederverwendbar), nicht mehr hier. */

/* ----------------------------------------------------------------------------
   Reservieren-Button: Text mittig; das symmetrische Padding reserviert rechts die
   Spinner-Zone -> der zentrierte Text bleibt IMMER im Padding, kollidiert also nie
   mit dem Spinner (rechts absolut, 10px vom Rand). Die Slots sind nur ein
   Balance-Spacer fuer schmale Screens (Mobile).
   -------------------------------------------------------------------------- */
.booking-submit__slot {
  flex: 0 0 0;
}
.booking-submit__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  text-align: center;
}
.booking-submit.is-loading { pointer-events: none; opacity: 1; }
.booking-submit.is-loading::after {
  content: "";
  position: absolute;
  right: 30px;             /* 30px vom rechten Button-Rand (Desktop) */
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2.5px solid rgba(12, 18, 6, 0.25);
  border-top-color: var(--booking-accent-ink);
  border-radius: 50%;
  animation: booking-spin 0.7s linear infinite;
}
@keyframes booking-spin { to { transform: rotate(360deg); } }

/* Ganz schmale Screens: CTA + Spinner verkleinern statt Umbruch (Button bleibt width:100%) */
@media (max-width: 380px) {
  .booking-submit {
    padding: 10px 12px;
    font-size: clamp(13px, 4.6vw, 19px);
  }
  .booking-submit__slot { flex: 0 0 24px; }
  .booking-submit.is-loading::after {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    right: 9px;
  }
}

/* ----------------------------------------------------------------------------
   Terminportal (/terminportal/) - erster statischer Potenzial-Check-Prototyp.
   Nutzt bewusst Booking-Layout, Typo, Felder und CTA weiter.
   -------------------------------------------------------------------------- */
[data-terminportal] .booking-hero {
  /* Karte 20px tiefer, damit die zentrierte "Terminportal"-Zeile beim
     Zusammenschieben nicht hinter der linken Karte verschwindet. */
  padding-top: 132px;
  padding-bottom: clamp(52px, 7vw, 92px);
}

.terminportal-panel {
  overflow: visible;
}

/* Desktop: die linke booking-copy spiegelt die Panel-Hoehe (per JS gesetzt) und
   ueberragt das Panel oben+unten um 20px. Hoehenwechsel smooth auf beiden Karten;
   waehrend der Hoehen-Transition clippt das Panel (Klasse .tp-animating), damit der
   wachsende Inhalt nicht kurz aus der weissen Karte ragt. */
@media (min-width: 921px) {
  .ll-terminportal-body .booking-copy,
  .ll-terminportal-body .booking-panel {
    min-height: 0;   /* die feste 695px-Mindesthoehe abstellen -> JS steuert die Hoehe */
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ll-terminportal-body .booking-panel.tp-animating {
    overflow: hidden;
  }
}

.terminportal-content {
  width: min(530px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.terminportal-mobile-title {
  display: none;
}

.terminportal-block {
  padding: 18px;
  border-radius: 20px;
  background: #f1f1f1;
}

.terminportal-appointment-area {
  display: grid;
  gap: 9px;
  padding: 0;
}

.terminportal-block--prep {
  padding: 10px;
}

.terminportal-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.terminportal-eyebrow {
  margin: 0;
  color: #7b7b82;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terminportal-select {
  max-width: 245px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #414146;
  background: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terminportal-appointment {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 15px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Body fuellt die Badge-Hoehe: Datum oben, Aktionen unten -> gleiche
   Unterlinie wie das Datum-Badge (Grafik unter der "22"). */
.terminportal-appointment__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.terminportal-appointment__body .terminportal-actions {
  margin-top: 0;
  gap: 6px 16px;
}

/* Während Verschieben/Absagen: Datum-Badge (Tag+Monat-Grafik) gedimmt auf .3,
   Body wieder normal gestapelt (statt space-between fuer die Badge-Unterlinie). */
.terminportal-appointment-area[data-tp-flow]:not([data-tp-flow="invite"]) .terminportal-date-badge {
  opacity: 0.3;
}

/* Schritt 1 (Kalender): durchgestrichenes bisheriges Datum BLEIBT oben stehen,
   darunter "Neuen Termin buchen" (grosse Headline) + kleine graue Unterzeile (16px). */
.terminportal-appointment__rehead,
.terminportal-appointment__newwhen {
  display: none;
}

.terminportal-appointment-area[data-tp-flow="reschedule"] .terminportal-appointment__rehead {
  display: block;
  margin-top: 2px;
}

.terminportal-rehead__title {
  margin: 0;
  color: #111113;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.3px;
}

/* Selektor mit p+Klasse (0,2,1), damit die kleine Unterzeile die 25px-body-p-Regel schlaegt */
.terminportal-appointment__body p.terminportal-rehead__sub {
  margin: 4px 0 0;
  color: #77777f;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Schritt 2 (Slot gewaehlt): KEIN "Neuen Termin buchen", KEIN durchgestrichenes
   Datum. Badge zeigt den NEUEN Termin (volle Opacity), daneben das neue Datum. */
.terminportal-appointment-area[data-tp-flow="reschedule"][data-tp-step="form"] .terminportal-appointment__when,
.terminportal-appointment-area[data-tp-flow="reschedule"][data-tp-step="form"] .terminportal-appointment__rehead {
  display: none;
}

.terminportal-appointment-area[data-tp-flow="reschedule"][data-tp-step="form"] .terminportal-appointment__newwhen {
  display: block;
}

.terminportal-appointment-area[data-tp-flow="reschedule"][data-tp-step="form"] .terminportal-date-badge {
  opacity: 1;
}

.terminportal-appointment__newwhen {
  margin: 0;
  color: #111113;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.35px;
}

/* Das normale Seiten-Formular ("Kontaktdaten" + "Daten speichern") nur auf der
   Startansicht; sobald ein Flow offen ist, weg (der Flow liefert eigenen Inhalt). */
.terminportal-appointment-area[data-tp-flow] ~ .terminportal-form {
  display: none;
}

/* Kalender/Flow schoen einblenden, wenn "Termin verschieben/absagen" geklickt wird:
   sanftes Aufsteigen + Fade (gleiche Easing wie booking-rise-in der Buchungsseite). */
@keyframes terminportal-flow-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.terminportal-flow:not([hidden]) {
  animation: terminportal-flow-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .terminportal-flow:not([hidden]) { animation: none; }
}

.terminportal-date-badge {
  flex: 0 0 70px;
  width: 70px;
  height: 74px;
  display: grid;
  grid-template-rows: 29px 1fr;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d3d3d8;
  background: #e8e8eb;
  color: #333338;
  text-align: center;
  transition: opacity 0.2s ease;
}

.terminportal-date-badge span {
  display: grid;
  place-items: center;
  color: #55555c;
  background: #d8d8dd;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.terminportal-date-badge strong {
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.terminportal-section-title {
  margin: 0;
  color: #111113;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.2px;
}

.terminportal-appointment__body p {
  margin: 0 0 3px;
  color: #111113;
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.35px;
}

.terminportal-appointment__body span {
  color: #77777f;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.terminportal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 10px;
}

.terminportal-actions[hidden] {
  display: none;
}

.terminportal-action {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #77777e;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.16s ease;
}

.terminportal-action:hover {
  color: #111113;
  background: transparent;
}

/* Kleine graue Pill-Buttons (Pill-Look zum Anklicken, duennere Schrift) */
.terminportal-action--pill {
  padding: 6px 14px;
  border: 1px solid #e0e0e4;
  border-radius: 999px;
  color: #55555c;
  background: #f1f1f1;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.terminportal-action--pill:hover {
  color: #111113;
  background: #e8e8eb;
  border-color: #d0d0d6;
}

.terminportal-action--danger {
  color: #9f5a55;
}

.terminportal-action--danger:hover {
  color: #b82418;
  background: transparent;
}

.terminportal-action--pill.terminportal-action--danger {
  color: #9f5a55;
  border-color: #ecdada;
  background: #f7efee;
}

.terminportal-action--pill.terminportal-action--danger:hover {
  color: #b82418;
  border-color: #e3c4c0;
  background: #f3e4e2;
}

.terminportal-form {
  gap: 12px;
}

.terminportal-section-title {
  margin: 0 0 12px;
}

.terminportal-notes-field {
  margin: 0;
  padding: 0;
  background: transparent;
}

.terminportal-notes-headline {
  margin: 0 0 7px;
  padding-left: 2px;
  color: #55555c;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.terminportal-notes-field .ll-field textarea {
  min-height: 92px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.terminportal-smallprint {
  margin: 9px 0 0;
  color: #6f6f76;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.terminportal-submit {
  justify-self: end;
  min-height: 50px;
  padding: 6px 38px;
  font-size: 19px;
  margin-top: 0;
}

.ll-terminportal-body .ll-brand-slogan {
  padding-top: clamp(56px, 7vw, 92px);
}

/* Termin-Auswahl-Pill (ueber dem Avatar) im Eyebrow-Stil + Popup-Menue.
   Desktop: sitzt mittig AUF der Oberkante der weissen Karte (Kante = vertikale
   Mitte der Pill) -> aus dem Fluss raus, dadurch mehr Platz im Feld darunter. */
.terminportal-termpick {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 6;
  display: inline-flex;
}

.terminportal-termpick__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 15px;
  border-radius: 999px;
  border: 1px solid #e0e0e4;
  background: #f1f1f1;
  color: #55555c;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.terminportal-termpick__btn:hover {
  background: #e8e8eb;
  border-color: #d0d0d6;
  color: #111113;
}

.terminportal-termpick__chevron {
  opacity: 0.8;
  transition: transform 0.18s ease;
}

.terminportal-termpick.is-open .terminportal-termpick__chevron {
  transform: rotate(180deg);
}

.terminportal-termpick__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  min-width: 264px;
  max-width: 320px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 54px -14px rgba(0, 0, 0, 0.55);
}

.terminportal-termpick__pop[hidden] {
  display: none;
}

.terminportal-termpick__item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.14s ease;
}

.terminportal-termpick__item:hover,
.terminportal-termpick__item.is-selected {
  background: #f1f1f1;
}

.terminportal-termpick__item-date {
  color: #111113;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.terminportal-termpick__item-meta {
  color: #77777f;
  font-size: 12px;
  font-weight: 500;
}

/* Single-Modus (genau ein Termin): kein Ausklappen, kein Chevron */
.terminportal-termpick[data-mode="single"] .terminportal-termpick__chevron {
  display: none;
}

.terminportal-termpick[data-mode="single"] .terminportal-termpick__btn {
  cursor: default;
  padding-right: 15px;
}

/* ---- Termin verschieben / absagen: Inline-Flows ---- */
.terminportal-appointment__when.is-struck {
  text-decoration: line-through;
  text-decoration-color: #b0b0b6;
  color: #9a9aa0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.terminportal-flow {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid #ededee;
  display: grid;
  gap: 10px;
}

.terminportal-flow[hidden] {
  display: none;
}

.terminportal-flow__title {
  margin: 0;
  color: #111113;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.terminportal-flow__sub {
  margin: -4px 0 2px;
  color: #6f6f76;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* Absage-Bestätigung: schlichte Headline + "Neuen Termin buchen"-Button */
.terminportal-flow__done { font-size: 21px; margin-top: 4px; }
.terminportal-flow__rebook {
  display: inline-flex;
  margin-top: 20px;
  text-decoration: none;
}

.terminportal-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.terminportal-pick--time {
  margin-top: -2px;
}

.terminportal-pick__chip {
  padding: 8px 13px;
  border: 1px solid #e0e0e4;
  border-radius: 999px;
  color: #3f3f45;
  background: #f6f6f7;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.terminportal-pick__chip:hover {
  border-color: #cfcfd5;
  background: #efeff1;
}

.terminportal-pick__chip.is-picked {
  color: #111113;
  border-color: #111113;
  background: #fff;
  font-weight: 600;
}

.terminportal-reasons {
  display: grid;
  gap: 6px;
}

.terminportal-reason {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e3e3e6;
  border-radius: 12px;
  color: #3f3f45;
  background: #f6f6f7;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.terminportal-reason:hover {
  border-color: #cfcfd5;
  background: #efeff1;
}

.terminportal-reason.is-picked {
  color: #111113;
  border-color: #111113;
  background: #fff;
  font-weight: 600;
}

.terminportal-reason-note {
  margin: 2px 0 0;
}

/* Freitext nur bei "Sonstiges": [hidden] muss das display der .ll-field-Basis schlagen. */
.terminportal-reason-note[hidden] {
  display: none !important;
}

.terminportal-reason-note textarea {
  min-height: 64px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.terminportal-flow__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-top: 2px;
}

.terminportal-flow__ghost {
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #6f6f76;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.16s ease;
}

.terminportal-flow__ghost:hover {
  color: #111113;
}

/* "Termin absagen" bewusst dezent (Ghost, roter Ton), damit "Doch lieber
   verschieben" als prominenter Button links auffaelliger ist. */
.terminportal-flow__ghost--danger {
  color: #9f5a55;
}

.terminportal-flow__ghost--danger:hover {
  color: #b82418;
}

.terminportal-flow__ghost--danger:disabled {
  color: #c9b4b1;
  cursor: default;
}

/* Absage-Aktionen: prominenter Verschieben-Button links, dezentes Absagen rechts */
.terminportal-flow__actions--cancel {
  justify-content: flex-start;
  gap: 6px 16px;
}

.terminportal-flow__confirm {
  min-height: 46px;
  padding: 8px 26px;
  font-size: 16px;
}

/* Echter Erstberatung-Kalender inline im Verschieben-Flow: alle .booking-panel-
   Kalenderregeln greifen, aber die Karten-Optik (Karte/Padding/Schatten/Hoehe)
   wird neutralisiert, damit er sich in die Terminportal-Karte einfuegt. */
.terminportal-reschedule-cal.booking-panel {
  position: static;
  order: 0;            /* mobile .booking-panel{order:2} neutralisieren (sonst rutscht der Kalender ans Ende) */
  min-height: 0;
  height: auto !important;   /* die reservierte 695px-Desktop-Panelhoehe abstellen -> nur Inhaltshoehe */
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.terminportal-reschedule-cal .booking-step__label {
  margin-top: 2px;
}

/* Im Terminportal soll die Zeit-Zeile direkt unter dem Kalender sitzen (Status
   schliesst dicht an, wie Erstberatung) — kein reservierter 1fr-Leerraum.
   !important, weil eine spezifischere Buchungs-Regel sonst align-items/rows setzt. */
/* Der Kalender-Step waechst (flex:1) sonst auf die reservierte Panel-Hoehe der
   Buchungsseite -> Leerraum unter den Zeiten. Im Terminportal: nur Inhaltshoehe. */
.terminportal-reschedule-cal .booking-step--calendar,
.terminportal-reschedule-cal .booking-slots,
.terminportal-reschedule-cal .booking-calendar-shell {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

.terminportal-reschedule-cal .booking-calendar-shell {
  grid-template-rows: auto auto !important;
  align-items: start !important;
  align-content: start !important;
  gap: 20px !important;
}

.terminportal-reschedule-cal .booking-time-column {
  align-self: start !important;
}

@media (max-width: 1080px) and (min-width: 921px) {
  .terminportal-actions {
    gap: 7px 10px;
  }

  .terminportal-action {
    font-size: 12px;
  }
}

@media (max-width: 920px) {
  .terminportal-panel .booking-panel__head {
    display: block;
    padding-bottom: 18px;
  }

  .terminportal-mobile-title {
    display: none;
  }

  /* Mobil ist ueber dem Avatar kein Platz (Logo + "Terminportal"-Zeile + der
     ueberstehende Avatar). Die Termin-Auswahl-Pill sitzt darum unten in der
     Hero-Karte, direkt vor den Termindetails; Popup klappt nach oben auf. */
  .terminportal-termpick {
    position: absolute;
    top: auto;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 6;
  }

  .terminportal-termpick__pop {
    top: auto;
    bottom: calc(100% + 8px);
  }

  .terminportal-actions {
    gap: 7px 10px;
  }

  .terminportal-action {
    font-size: 12px;
  }

  .terminportal-block__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .terminportal-select {
    max-width: 100%;
  }

  .terminportal-appointment {
    align-items: flex-start;
  }

  .terminportal-section-title {
    font-size: 20px;
  }

  .terminportal-submit {
    margin-bottom: 0;
  }
}

@media (max-width: 420px) {
  .terminportal-block {
    padding: 15px;
    border-radius: 18px;
  }

  .terminportal-date-badge {
    flex-basis: 65px;
    width: 65px;
    height: 74px;
  }

  .terminportal-date-badge strong {
    font-size: 32px;
  }
}

/* --- Personen einladen (Terminportal Invite-Flow) --- */
.terminportal-guests {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0 12px;
}
.terminportal-guest {
  position: relative;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #f6f6f6;
}
.terminportal-guest .booking-form__row {
  margin: 0 0 10px;
}
.terminportal-guest .booking-form__row:last-of-type {
  margin-bottom: 0;
}
.terminportal-guest__remove {
  margin-top: 12px;
  padding: 2px 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  color: #b0392f;
  text-decoration: underline;
  cursor: pointer;
}
.terminportal-guest-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  padding: 11px 16px;
  background: none;
  border: 1px dashed rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.terminportal-guest-add:hover {
  border-color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.02);
}
.terminportal-flow__status {
  margin: 10px 0 0;
  min-height: 1em;
  font-size: 13px;
}
.terminportal-flow__status.is-error {
  color: #e0483d;
}
.terminportal-flow__actions--invite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.terminportal-flow__actions--invite .terminportal-flow__confirm {
  margin-left: auto;
}