/* ============================================================================
   Booking-System Hero "Living Calendar" — Welle 2026-05
   ----------------------------------------------------------------------------
   Above-the-Fold Critical-CSS. Lädt VOR booking-system-page.css.
   ----------------------------------------------------------------------------
   Layout:
     - .bs-hero               section wrapper, padding + bg
     - .bs-hero-bg            decoration (mesh + grid pattern, aria-hidden)
     - .bs-hero-container     2-col grid (Desktop), stack (Mobile)
     - .bs-hero-text          left col (eyebrow, h1, sub, ctas)
     - .bs-hero-stage         right col (calendar + notifications + counter)
     - .bs-calendar           SVG container with 7×4 slot grid
     - .bs-slot               individual slot, .is-booked transition state
     - .bs-notif              HTML notification card, absolute-positioned
     - .bs-counter            counter element with tabular-nums

   GSAP-Animation läuft via bs-hero-animation.js, dieses CSS definiert nur
   initial/final visual states + transitions.
   ============================================================================ */

/* ─── Hero Section Wrapper ───────────────────────────────────────────────── */
.bs-hero {
  position: relative;
  padding: 5.5rem 0 3rem;
  background: #FAFBFD;
  overflow: hidden;
}
body.is-dark-bg .bs-hero {
  background: #0A1B33;
}

/* Decorative BG (subtle mesh + grid pattern) */
.bs-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* ─── Aurora UI Background (Welle 2026-05-26) ────────────────────────────
   4 große blurred Color-Orbs (Brand-Cyan + LINE-Green-Akzent) driften langsam
   für atmosphärisches "Nordlicht"-Glow. CSS-only, kein WebGL, mobile-perf.
   Light + Dark Mode via overrides unten. */
.bs-hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bs-hero-aurora-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* Orb 1: Top-Left — primary Brand-Cyan, größtes Orb */
.bs-hero-aurora-orb--1 {
  top: -15%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(20, 152, 213, 0.55) 0%, transparent 70%);
  filter: blur(80px);
  animation: bs-aurora-drift-1 22s ease-in-out infinite alternate;
}

/* Orb 2: Top-Right — lighter Cyan, complementary motion */
.bs-hero-aurora-orb--2 {
  top: -20%;
  right: -10%;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle, rgba(62, 182, 240, 0.48) 0%, transparent 70%);
  filter: blur(85px);
  animation: bs-aurora-drift-2 26s ease-in-out infinite alternate;
}

/* Orb 3: Bottom-Center-Left — deeper Cyan */
.bs-hero-aurora-orb--3 {
  bottom: -25%;
  left: 25%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(20, 152, 213, 0.40) 0%, transparent 70%);
  filter: blur(90px);
  animation: bs-aurora-drift-3 19s ease-in-out infinite alternate;
}

/* Orb 4: Bottom-Right — LINE-Green-Akzent (subtle, ein Hauch für brand-recall) */
.bs-hero-aurora-orb--4 {
  bottom: -10%;
  right: 5%;
  width: 35%;
  height: 35%;
  background: radial-gradient(circle, rgba(6, 199, 85, 0.28) 0%, transparent 70%);
  filter: blur(80px);
  animation: bs-aurora-drift-4 24s ease-in-out infinite alternate;
}

/* Drift-Keyframes: jeder Orb hat eigene Choreografie damit's organisch wirkt */
@keyframes bs-aurora-drift-1 {
  0%   { transform: translate(0, 0)        scale(1);    }
  100% { transform: translate(15%, 12%)    scale(1.15); }
}
@keyframes bs-aurora-drift-2 {
  0%   { transform: translate(0, 0)        scale(1.05); }
  100% { transform: translate(-12%, 18%)   scale(0.95); }
}
@keyframes bs-aurora-drift-3 {
  0%   { transform: translate(0, 0)        scale(0.95); }
  100% { transform: translate(10%, -15%)   scale(1.1);  }
}
@keyframes bs-aurora-drift-4 {
  0%   { transform: translate(0, 0)        scale(1);    }
  100% { transform: translate(-8%, -10%)   scale(1.08); }
}

/* Dark-Mode: stärker glühend, mehr Sättigung */
body.is-dark-bg .bs-hero-aurora-orb--1 {
  background: radial-gradient(circle, rgba(62, 182, 240, 0.55) 0%, transparent 70%);
}
body.is-dark-bg .bs-hero-aurora-orb--2 {
  background: radial-gradient(circle, rgba(20, 152, 213, 0.45) 0%, transparent 70%);
}
body.is-dark-bg .bs-hero-aurora-orb--3 {
  background: radial-gradient(circle, rgba(62, 182, 240, 0.40) 0%, transparent 70%);
}
body.is-dark-bg .bs-hero-aurora-orb--4 {
  background: radial-gradient(circle, rgba(74, 222, 128, 0.30) 0%, transparent 70%);
}

/* Grid-Pattern weg (Welle 2026-05-26) — Calendar ist schon viereckig, doppelt = Lärm */
.bs-hero-bg-mesh,
.bs-hero-bg-grid {
  display: none;
}

/* Reduced-Motion: keine drift, statische Orbs (Aurora-Look bleibt aber ohne Animation) */
@media (prefers-reduced-motion: reduce) {
  .bs-hero-aurora-orb {
    animation: none;
  }
}

/* Mobile (<640px): kleinere blur-radius spart GPU-Compositing, weniger Orbs */
@media (max-width: 639px) {
  .bs-hero-aurora-orb {
    filter: blur(60px);
  }
  /* Orb 4 (LINE-Green) auf Mobile weg — weniger Layer = besseres Scrolling */
  .bs-hero-aurora-orb--4 {
    display: none;
  }
}

/* Living-Calendar-Background (war Welle 2026-05-25) — ENTFERNT 2026-05-26.
   Doppelte viereckige Patterns (Living-Slot-Grid + echter Calendar im Stage)
   wirken laut + visueller Lärm. Nur subtle mesh-Gradient + Calendar bleiben. */
.bs-hero-bg-living {
  display: none;
}

/* Pulse-Wave: ENTFERNT 2026-05-26 (parent .bs-hero-bg-living ist display:none).
   Keine Animation mehr → spart CPU + GPU compositing. */
.bs-hero-bg-living-pulse {
  display: none;
}

/* Reduced-motion: Wave aus, statisches Slot-Pattern bleibt */
@media (prefers-reduced-motion: reduce) {
  .bs-hero-bg-living-pulse { animation: none; opacity: 0; }
}

/* ─── Hero Container (Mobile-First) ──────────────────────────────────────── */
.bs-hero-container {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ─── LEFT: Text Block ───────────────────────────────────────────────────── */
.bs-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.bs-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(10, 27, 51, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
  align-self: flex-start;
  margin-bottom: 0.25rem;
}
.bs-hero-back:hover { color: #1498D5; }
body.is-dark-bg .bs-hero-back { color: rgba(240, 244, 250, 0.55); }
body.is-dark-bg .bs-hero-back:hover { color: #3EB6F0; }

.bs-hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #1498D5;
}

.bs-hero-h1 {
  font-size: clamp(2.2rem, 7.5vw, 3.2rem);
  line-height: 1.05;
  font-weight: 800;
  color: #0A1B33;
  letter-spacing: -0.035em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
html[lang="th"] .bs-hero-h1 { line-height: 1.1; }
body.is-dark-bg .bs-hero-h1 { color: #F0F4FA; }

/* H1 lines as flex items for stagger animation.
   Line 1 ("They book.") ist kurz → nowrap sicher.
   Line 2 ("We handle the rest.") darf wrappen wenn Text-Column zu schmal
   → verhindert Overflow in die Calendar-Column (Bug 2026-05-26). */
.bs-hero-h1-line {
  display: block;
  opacity: 1;
}
.bs-hero-h1-line-1 { white-space: nowrap; }
.bs-hero-h1-line-2 { /* darf wrappen — keine nowrap */ }
.bs-hero-h1-line-2 {
  color: #1498D5;
}
body.is-dark-bg .bs-hero-h1-line-2 { color: #3EB6F0; }

.bs-hero-tag {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0A1B33;
  letter-spacing: -0.005em;
  margin: 0.4rem 0 0;
}
body.is-dark-bg .bs-hero-tag { color: #F0F4FA; }

.bs-hero-sub {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4b5563;
  max-width: 48ch;
  margin: 0;
}
body.is-dark-bg .bs-hero-sub { color: rgba(240, 244, 250, 0.72); }

.bs-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* ─── RIGHT: Stage (Calendar + Notifications + Counter) ──────────────────── */
.bs-hero-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 560 / 360;
}

/* ─── Calendar SVG ───────────────────────────────────────────────────────── */
.bs-calendar {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 16px 40px rgba(10, 27, 51, 0.10));
}
.bs-calendar-bg {
  fill: #ffffff;
  stroke: rgba(10, 27, 51, 0.10);
  stroke-width: 1;
}
body.is-dark-bg .bs-calendar-bg {
  fill: #15233a;
  stroke: rgba(240, 244, 250, 0.10);
}
.bs-day-label {
  fill: rgba(10, 27, 51, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Inter', system-ui, sans-serif;
}
body.is-dark-bg .bs-day-label {
  fill: rgba(240, 244, 250, 0.55);
}
.bs-calendar-divider {
  stroke: rgba(10, 27, 51, 0.08);
  stroke-width: 1;
}
body.is-dark-bg .bs-calendar-divider {
  stroke: rgba(240, 244, 250, 0.08);
}

/* Slots */
.bs-slot {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bs-slot-bg {
  fill: rgba(10, 27, 51, 0.04);
  stroke: rgba(10, 27, 51, 0.06);
  stroke-width: 1;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
body.is-dark-bg .bs-slot-bg {
  fill: rgba(240, 244, 250, 0.04);
  stroke: rgba(240, 244, 250, 0.06);
}
.bs-slot-time {
  fill: rgba(10, 27, 51, 0.45);
  font-size: 10.5px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  transition: fill 0.4s ease, opacity 0.4s ease;
}
body.is-dark-bg .bs-slot-time {
  fill: rgba(240, 244, 250, 0.45);
}
.bs-slot-check {
  pointer-events: none;
}
.bs-slot-check-ring {
  fill: #06C755;
}
.bs-slot-check path {
  stroke: #ffffff;
}

/* .is-booked state — set by GSAP class-trigger (kein Reveal, nur State-Change) */
.bs-slot.is-booked .bs-slot-bg {
  fill: rgba(6, 199, 85, 0.12);
  stroke: rgba(6, 199, 85, 0.45);
}
.bs-slot.is-booked .bs-slot-time {
  opacity: 0;
}
/* WICHTIG: parent .bs-slot-check hat SVG-attribute transform='translate(28, 33)'.
   CSS-Transform würde das überschreiben → Check würde oben-links rendern.
   Daher animation NUR auf children (.bs-slot-check-ring + path), die haben
   eigene transform-origin: center und werden um ihr eigenes Zentrum skaliert. */
.bs-slot.is-booked .bs-slot-check {
  opacity: 1 !important;
}
.bs-slot.is-booked .bs-slot-check-ring,
.bs-slot.is-booked .bs-slot-check path {
  animation: bs-slot-check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transform-origin: center;
  transform-box: fill-box;
}
.bs-slot.is-booked .bs-slot-check path {
  animation-delay: 0.06s; /* Check-Mark erscheint kurz NACH dem Ring */
}
/* Pop-in von Mitte aus — snap-Effect (cubic-bezier mit Overshoot) */
@keyframes bs-slot-check-pop {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── System-Status-Stack (oben am Calendar): Brand + Customer-Tap zusammen ──
   Macht klar: "miraBOOK LIVE — Customer bucht auf der Website".
   Beide Elemente als horizontal Stack (Desktop) oder vertical (Mobile). */
.bs-system-status {
  position: absolute;
  top: -2.4rem;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

/* Live-Pulse keyframe (verwendet von .bs-system-live-dot im Customer-Tap-Element) */
@keyframes bs-system-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* ─── Customer-Tap-Indicator (im Status-Stack oben — zeigt WO Bookings herkommen) ──
   Pulse-Welle bei jedem neuen Booking. Macht klar: Customer auf der Website
   ist die SOURCE, nicht LINE/FB (das sind OUTPUTS = Notifications).
   Inline LIVE-Badge rechts daneben zeigt System-Status. */
.bs-customer-tap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.45rem 0.35rem 0.4rem;
  background: rgba(20, 152, 213, 0.08);
  border: 1px solid rgba(20, 152, 213, 0.22);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #0E7BB0;
}
.bs-system-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  margin-left: 0.2rem;
  background: rgba(6, 199, 85, 0.14);
  color: #058B47;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.is-dark-bg .bs-system-live-badge {
  background: rgba(74, 222, 128, 0.18);
  color: #4ADE80;
}
.bs-system-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: bs-system-live-pulse 2s ease-out infinite;
}
body.is-dark-bg .bs-customer-tap {
  background: rgba(62, 182, 240, 0.12);
  border-color: rgba(62, 182, 240, 0.28);
  color: #7DD3FC;
}
.bs-customer-tap-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #1498D5;
  color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
}
body.is-dark-bg .bs-customer-tap-icon { background: #3EB6F0; color: #0A1B33; }
.bs-customer-tap-pulse {
  position: absolute;
  left: 0.4rem;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20, 152, 213, 0.5);
  transform: translateY(-50%) scale(1);
  opacity: 0;
  pointer-events: none;
}
.bs-customer-tap.is-pulsing .bs-customer-tap-pulse {
  animation: bs-tap-pulse 1s ease-out;
}
@keyframes bs-tap-pulse {
  0%   { transform: translateY(-50%) scale(1);   opacity: 0.7; }
  100% { transform: translateY(-50%) scale(3.2); opacity: 0; }
}

/* ─── Notification Cards — fliegen RAUS aus dem System (statt rein) ─────────
   Neuer Mental-Model: Booking-System (Calendar) ist die Quelle, Channels (LINE/FB)
   sind das OUTPUT. Notif startet IM Slot, fliegt nach rechts AUS DEM SYSTEM raus
   → vermittelt "Owner wird benachrichtigt", nicht "Buchung kommt rein". */
.bs-notif {
  position: absolute;
  top: 12%;
  right: 4%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem 0.5rem 0.55rem;
  background: #ffffff;
  border: 1px solid rgba(10, 27, 51, 0.08);
  border-radius: 12px;
  box-shadow:
    0 6px 16px rgba(10, 27, 51, 0.12),
    0 14px 40px -4px rgba(10, 27, 51, 0.18);
  white-space: nowrap;
  min-width: 205px;
  z-index: 50;
  /* Initial state — hidden. GSAP setzt start-position = Calendar-Slot, animiert dann RAUS rechts. */
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
}
body.is-dark-bg .bs-notif {
  background: #1d2c46;
  border-color: rgba(240, 244, 250, 0.10);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.30),
    0 12px 32px -4px rgba(0, 0, 0, 0.40);
}
.bs-notif-channel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  flex-shrink: 0;
}
.bs-notif-channel--line      { background: #06C755; }
.bs-notif-channel--messenger { background: linear-gradient(135deg, #00B2FF 0%, #006AFF 100%); }
.bs-notif-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.bs-notif-meta {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: rgba(10, 27, 51, 0.55);
}
body.is-dark-bg .bs-notif-meta {
  color: rgba(240, 244, 250, 0.55);
}
.bs-notif-channel-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bs-notif-dot {
  opacity: 0.5;
}
.bs-notif-name {
  font-weight: 600;
  color: rgba(10, 27, 51, 0.85);
}
body.is-dark-bg .bs-notif-name {
  color: rgba(240, 244, 250, 0.85);
}
.bs-notif-time {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0A1B33;
  font-variant-numeric: tabular-nums;
}
body.is-dark-bg .bs-notif-time {
  color: #F0F4FA;
}

/* Mobile: kompaktere Notif (kleineres Min-Width), Preview-Position bleibt oben-rechts */
@media (max-width: 767px) {
  .bs-notif {
    min-width: 175px;
    padding: 0.4rem 0.7rem 0.4rem 0.45rem;
  }
}

/* ─── Counter ────────────────────────────────────────────────────────────── */
.bs-counter {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(160deg, #1498D5, #0F7BB2);
  color: #fff;
  border-radius: 999px;
  box-shadow:
    0 8px 24px -4px rgba(20, 152, 213, 0.35),
    0 16px 40px -8px rgba(10, 27, 51, 0.20);
  z-index: 6;
}
.bs-counter-value {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.bs-counter-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

/* ─── Desktop Layout (≥1024px) ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .bs-hero {
    padding: 7rem 0 5.5rem;
  }
  .bs-hero-container {
    display: grid;
    /* 1.05fr / 0.95fr: Text-Column kriegt mehr Platz damit "We handle the rest."
       auf 1 Zeile passt (Bug 2026-05-26: war 0.92/1.08 → 72px Overflow). */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
    align-items: center;
  }
  .bs-hero-text {
    gap: 1.4rem;
  }
  .bs-hero-h1 {
    font-size: clamp(2.8rem, 4.6vw, 4.2rem);
  }
  .bs-hero-sub {
    font-size: 1.05rem;
  }
  .bs-hero-stage {
    max-width: none;
    margin: 0;
  }
}

/* ─── Reduced-Motion: alle Animations skip, sofort Final-State ─── */
@media (prefers-reduced-motion: reduce) {
  .bs-notif {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .bs-slot.is-booked .bs-slot-check-ring,
  .bs-slot.is-booked .bs-slot-check path {
    animation: none !important;
  }
}