/* ============================================================
   TERMINBUCHUNG  —  erscheint nach dem Absenden der Anfrage
   ============================================================
   Optik an die Kontaktkarte angelehnt (Werte ausgelesen):
     Karte    #fafaf5, Radius 6px, Rand #d3d6cf
     Blau     #244df7
     Schrift  "Space", Arial
     Label    11px, letter-spacing 1.54px (wie .core-eyebrow)
   ============================================================ */

.booking {
  --bk-ink: #101218;
  --bk-mute: #59636b;
  --bk-dim: #647078;
  --bk-line: #d3d6cf;
  --bk-line-2: #e2e1d8;
  --bk-blue: #244df7;
  --bk-blue-soft: #e8ecff;
  --bk-blue-ink: #91aaff;
  --bk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  margin-top: 4px;
  animation: bk-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes bk-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.bk-head { margin-bottom: 22px; }

.bk-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: #8d9bb5;
  font-weight: 600;
}
.bk-eyebrow .bk-ok { color: #1c8a4a; }

.bk-title {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--bk-ink);
}

.bk-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bk-mute);
}

/* ---------- Monatskopf ---------- */
.bk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 14px;
  border-top: 1px solid var(--bk-line-2);
  margin-top: 20px;
}

.bk-month {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bk-ink);
}
.bk-month span { color: var(--bk-dim); font-weight: 500; margin-left: 5px; }

.bk-nav { display: flex; gap: 6px; }

.bk-arrow {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--bk-line);
  border-radius: 4px;
  background: #fff;
  color: var(--bk-ink);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.bk-arrow:hover:not(:disabled) { border-color: var(--bk-blue); color: var(--bk-blue); }
.bk-arrow:disabled { opacity: .35; cursor: default; }

/* ---------- Wochentage ---------- */
.bk-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
  /* Raster schmaler als die Karte halten: sonst werden die Zellen breiter
     als hoch und der Kalender wirkt aufgeblasen. */
  max-width: 420px;
}
.bk-week span {
  text-align: center;
  font-family: var(--bk-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bk-dim);
  padding: 4px 0;
}

/* ---------- Tage ---------- */
.bk-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-width: 420px;
}

.bk-day {
  position: relative;
  /* Feste Hoehe statt Quadrat: bei einem breiten Container wurden die Zellen
     riesig und die leere erste Woche wirkte wie ein Loch im Kalender. */
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--bk-ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.bk-day.is-empty { visibility: hidden; }

/* frei */
.bk-day.is-open { background: var(--bk-blue-soft); color: #16307f; font-weight: 600; }
/* Kein Punkt mehr unter der Zahl: die helle Fläche zeigt die Verfügbarkeit
   bereits, der Punkt war doppelt gemoppelt. */
.bk-day.is-open:hover { border-color: var(--bk-blue); transform: translateY(-1px); }

/* ausgebucht / Wochenende / Vergangenheit */
.bk-day.is-off { color: #b7bcc4; cursor: default; }
.bk-day.is-off:hover { background: transparent; }

/* gewählt */
.bk-day.is-pick {
  background: var(--bk-blue);
  border-color: var(--bk-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(36, 77, 247, .55);
}

/* heute — nur hervorheben, wenn der Tag auch buchbar ist.
   Auf gesperrten Tagen sah der Rahmen aus, als könnte man ihn anklicken. */
.bk-day.is-today.is-open { border-color: #a9b7d6; }
.bk-day.is-today.is-pick { border-color: var(--bk-blue); }

/* Fokus: Der Titel bekommt beim Einblenden programmatisch den Fokus, damit
   Screenreader den Wechsel mitbekommen. Der Standard-Rahmen sieht dabei aber
   wie ein Eingabefeld aus — deshalb nur bei Tastaturbedienung zeigen. */
/* Die Überschrift bekommt beim Einblenden programmatisch den Fokus, damit
   Screenreader den Wechsel ansagen. Sie ist kein Bedienelement — ein Rahmen
   sähe aus wie ein Eingabefeld. Deshalb in beiden Zuständen ohne Outline. */
.bk-title:focus,
.bk-title:focus-visible { outline: none; }

.bk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--bk-dim);
}
.bk-legend i {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: middle;
}
.bk-legend .lg-open { background: var(--bk-blue-soft); border: 1px solid #c3cdfa; }
.bk-legend .lg-off { background: #eeede8; }
.bk-legend .lg-pick { background: var(--bk-blue); }

/* ---------- Zeiten ---------- */
.bk-times {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bk-line-2);
  animation: bk-in .35s cubic-bezier(.16, 1, .3, 1) both;
}

.bk-times-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.bk-times-title { font-size: 12.5px; font-weight: 700; color: var(--bk-ink); }
.bk-times-date {
  font-family: var(--bk-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--bk-dim);
  text-transform: uppercase;
}

.bk-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-width: 420px;   /* gleiche Breite wie das Kalender-Raster */
}

.bk-slot {
  padding: 10px 4px;
  border: 1px solid var(--bk-line);
  border-radius: 4px;
  background: #fff;
  color: var(--bk-ink);
  font-family: var(--bk-mono);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.bk-slot:hover { border-color: var(--bk-blue); color: var(--bk-blue); }
.bk-slot.is-pick {
  background: var(--bk-blue);
  border-color: var(--bk-blue);
  color: #fff;
  font-weight: 700;
}
.bk-slot.is-gone {
  border-style: dashed;
  color: #c2c6cd;
  cursor: default;
  background: #fbfbf7;
}
.bk-slot.is-gone:hover { border-color: var(--bk-line); color: #c2c6cd; }

/* ---------- Fuss ---------- */
.bk-foot { margin-top: 20px; }

.bk-summary {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bk-ink);
}
.bk-summary b { color: var(--bk-blue); font-weight: 700; }

.bk-confirm {
  width: 100%;
  height: 47px;
  border: 0;
  border-radius: 4px;
  background: var(--bk-blue);
  color: #fff;
  font-family: "Space", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.bk-confirm:hover:not(:disabled) { transform: translateY(-1px); background: #1c40d8; }
.bk-confirm:disabled {
  background: #e3e4dc;
  color: #8b9199;
  cursor: default;
}

.bk-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--bk-dim);
}

/* ---------- Bestätigung: blau gefüllter Kreis, weisser Haken ---------- */
.bk-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 24px 28px;
  border: 1px solid #d3dcf6;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7f9ff, #eef2fe);
  animation: bk-card-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes bk-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.bk-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  animation: bk-badge-pop .52s cubic-bezier(.34, 1.56, .64, 1) both;
}
.bk-check svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Kreis: blau gefüllt, keine Kontur */
.bk-check-ring { fill: #244df7; stroke: none; }

/* Haken: weiss, wird gezeichnet */
.bk-check-tick {
  stroke: #fff;
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: bk-draw-tick .34s cubic-bezier(.4, 0, .2, 1) .4s forwards;
}

@keyframes bk-badge-pop {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bk-draw-tick { to { stroke-dashoffset: 0; } }

/* kurzer Impuls-Ring hinter dem blauen Kreis */
.bk-check::after {
  content: "";
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid #244df7;
  opacity: 0;
  animation: bk-pulse .9s ease-out .55s forwards;
}
@keyframes bk-pulse {
  0%   { opacity: .4; transform: scale(.9); }
  100% { opacity: 0;  transform: scale(1.55); }
}

.bk-done-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #101218;
  animation: bk-rise .45s cubic-bezier(.16, 1, .3, 1) .5s both;
}
.bk-fertig-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 700;
  color: #244df7;
  animation: bk-rise .45s cubic-bezier(.16, 1, .3, 1) .6s both;
}
.bk-done-meta {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #5c6474;
  animation: bk-rise .45s cubic-bezier(.16, 1, .3, 1) .7s both;
}

@keyframes bk-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.bk-again {
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: #244df7;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  animation: bk-rise .45s cubic-bezier(.16, 1, .3, 1) .8s both;
}
.bk-again:hover { color: #1c3fd0; }

@media (prefers-reduced-motion: reduce) {
  .bk-done, .bk-check, .bk-check-tick,
  .bk-done-title, .bk-fertig-text, .bk-done-meta, .bk-again, .bk-check::after {
    animation: none !important;
  }
  .bk-check-tick { stroke-dashoffset: 0; }
  .bk-check::after { display: none; }
}

/* ---------- schmal ---------- */
@media (max-width: 560px) {
  .bk-title { font-size: 18px; }
  .bk-day { font-size: 12px; height: 40px; }
  .bk-slots { grid-template-columns: repeat(3, 1fr); }
  .bk-legend { gap: 10px; font-size: 10.5px; }
  .bk-week span { font-size: 8.5px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .booking, .bk-times, .bk-done { animation: none; }
  .bk-day.is-open:hover, .bk-confirm:hover:not(:disabled) { transform: none; }
}

/* ============================================================
   WICHTIG: das hidden-Attribut gewinnt nicht gegen ein CSS-display.
   Das Anfrageformular hat display:grid — mit hidden blieb es sichtbar
   und die Terminwahl erschien DARAUNTER statt an seiner Stelle.
   ============================================================ */
.core-contact > [hidden],
.booking [hidden] { display: none !important; }

/* ============================================================
   SCHRITT-LEISTE  (01 Angaben — 02 Termin)
   ============================================================ */
.steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 22px;
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #8d97a3;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.step span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .8;
}

.step:disabled { cursor: default; opacity: .55; }

.step.is-on {
  color: #101218;
  background: #fff;
  border-color: #d3d6cf;
  cursor: default;
}
.step.is-on span { color: #244df7; opacity: 1; }

.step-line {
  flex: 1;
  height: 1px;
  min-width: 18px;
  background: #d3d6cf;
}

/* Zeitzonen-Hinweis unter den Zeiten */
.bk-tz {
  margin: 10px 0 0;
  max-width: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #86909d;
}