/* ============================================================
   Buchungs-Widget — NUR Layout. Komponenten (Buttons, Chips,
   Karten, Stepper …) kommen aus dem Design-Stack des Child-Themes
   (assets/css/ah-design.css). Tokens: --ah-*.
   ============================================================ */

.ah-widget { max-width: 760px; margin-inline: auto; }
.ah-widget-loading { min-height: 200px; }

/* Schritt-Anzeige */
.ah-widget-steps {
  display: flex; gap: 4px; flex-wrap: wrap;
  list-style: none; margin: 0 0 var(--ah-s5); padding: 0;
  font-size: 13.5px; font-weight: 700; color: var(--ah-gray-mid);
}
.ah-widget-steps li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--ah-r-pill);
  background: var(--ah-gray-light);
}
.ah-widget-steps li.is-current { background: var(--ah-green); color: #fff; }
.ah-widget-steps li.is-done { background: var(--ah-green-light); color: var(--ah-green-dark); cursor: pointer; }
.ah-widget-stepnum {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, .6); font-size: 12px; color: inherit;
}
.ah-widget-steps li.is-current .ah-widget-stepnum { background: rgba(255, 255, 255, .25); }

/* Navigation unten */
.ah-widget-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--ah-s3); margin-top: var(--ah-s5);
}

/* Besucherart-Karten: Grid */
.ah-radiocards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--ah-s3);
}

/* Preisbox (Schritt 2+4) — auf Mobile sticky am unteren Rand */
.ah-widget-pricecard { margin-top: var(--ah-s4); }
.ah-widget-priceline {
  display: flex; justify-content: space-between; gap: var(--ah-s3);
  padding: 6px 0; font-size: 15.5px;
}
.ah-widget-pricetotal {
  border-top: 2px solid var(--ah-gray-light);
  margin-top: 6px; padding-top: 12px; font-size: 18px; font-weight: 800;
}
@media (max-width: 640px) {
  .ah-widget-price {
    position: sticky; bottom: 8px; z-index: 30;
  }
  .ah-widget-pricecard { box-shadow: var(--ah-shadow); }
}

/* Schritt 3: Monatskalender (Raster-Optik kommt aus calendar-widget.css,
   .ahk-*) + Zeitfenster-Box des gewählten Tages darunter */
.ah-widget-cal { margin-bottom: var(--ah-s3); }
.ah-widget-dayslots-box { margin-bottom: var(--ah-s2); }

/* Zeitfenster des gewählten Tages (eine Zeile pro Tag) */
.ah-widget-day {
  display: flex; align-items: center; gap: var(--ah-s4);
  padding: var(--ah-s3) var(--ah-s4);
  background: var(--ah-brown-light);
  border: 1px solid var(--ah-gray-light);
  border-radius: var(--ah-r);
  margin-bottom: var(--ah-s2);
}
.ah-widget-daydate { flex: 0 0 92px; display: flex; flex-direction: column; }
.ah-widget-daydate b { font-size: 16px; }
.ah-widget-daydate small { color: var(--ah-gray-mid); font-size: 12.5px; }
.ah-widget-daymain { flex: 1; min-width: 0; }
/* Sichtbare Aufforderung über den Chips (Marie: sonst scrollt niemand
   weiter, weil die Zeile wie eine reine Anzeige wirkt) */
.ah-widget-slotcta {
  margin: 0 0 8px;
  font-family: var(--ah-font-head, inherit);
  font-weight: 800; font-size: 15px; color: var(--ah-green-dark);
}
.ah-widget-dayslots { display: flex; flex-wrap: wrap; gap: var(--ah-s2); }
/* Zeitfenster-Chip: „ZF 1" als Kicker über der vollen Uhrzeit */
.ah-widget-dayslots .ah-slot-time { display: flex; flex-direction: column; line-height: 1.15; }
.ah-widget-dayslots .ah-slot-time small {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ah-gray-mid);
}
.ah-slot.is-selected { outline: none; box-shadow: 0 0 0 3px var(--ah-green-dark); }
.ah-slot-free.is-selected .ah-slot-time small { color: inherit; }

@media (max-width: 560px) {
  .ah-widget-day { flex-direction: column; align-items: flex-start; gap: var(--ah-s2); }
  .ah-widget-daydate { flex-basis: auto; flex-direction: row; gap: 8px; align-items: baseline; }
  .ah-widget-daymain { width: 100%; }
  .ah-widget-dayslots .ah-slot { width: 100%; justify-content: flex-start; }
}

/* Lade-Skeleton */
.ah-widget-skeleton {
  height: 64px; border-radius: var(--ah-r);
  margin-bottom: var(--ah-s2);
  background: linear-gradient(90deg, var(--ah-gray-light) 25%, var(--ah-brown-light) 50%, var(--ah-gray-light) 75%);
  background-size: 200% 100%;
  animation: ah-shimmer 1.2s infinite;
}
@keyframes ah-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ah-widget-skeleton { animation: none; }
}

/* Terminliste (Home): Tageszeilen als Links (Karten-Hover, bewusst
   NICHT das Button-Motion-System — es ist eine volle Zeile) */
.ah-dayrow-link { text-decoration: none; color: inherit; transition: transform .08s, box-shadow .12s; }
/* Bewegung nur auf echten Zeigegeräten + ohne Reduced-Motion — auf Touch
   bliebe der Zustand sonst nach dem Tap kleben */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ah-dayrow-link:hover { box-shadow: var(--ah-shadow); transform: translateY(-1px); }
}
/* Farb-Feedback der CTA-Pille auch bei Reduced-Motion (nur Touch ausnehmen) */
@media (hover: hover) {
  .ah-dayrow-link:hover .ah-dayrow-cta { background: var(--ah-pink); color: #fff; border-color: var(--ah-pink); }
}
.ah-dayrow-cat {
  flex: 0 0 130px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ah-gray-mid);
}
/* „Buchen →" als Outline-Pill, Touch-Target ≥ 44px (Fix-Sheet 7a) */
.ah-dayrow-cta {
  margin-left: auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 9px 18px;
  border: 2px solid var(--ah-pink); border-radius: var(--ah-r-pill);
  color: var(--ah-pink-dark); font-weight: 800; font-size: 14px;
}
.ah-dayrow-closed { opacity: .55; }
.ah-daylist .ah-slot { cursor: default; }
@media (max-width: 560px) {
  .ah-dayrow-cat { flex-basis: auto; }
  .ah-dayrow-cta { margin-left: 0; }
}

/* Zusammenfassung */
.ah-widget-sumrow {
  display: flex; justify-content: space-between; gap: var(--ah-s4);
  padding: 9px 0; border-bottom: 1px solid var(--ah-gray-light);
  font-size: 15.5px;
}
.ah-widget-sumrow:last-child { border-bottom: 0; }
.ah-widget-sumrow span { color: var(--ah-gray-mid); }