/* ============================================================================
   QR-Order Hero "Phone-Menu + Live-Activity" — Welle 2026-05 v2
   ----------------------------------------------------------------------------
   Above-the-Fold Critical-CSS. Lädt VOR qr-order-page.css.
   ----------------------------------------------------------------------------
   Layout (Mobile-First):
     - .qr-hero               section wrapper, padding + bg
     - .qr-hero-container     2-col grid (Desktop), stack (Mobile)
     - .qr-hero-text          left col (eyebrow, h1, sub, ctas)
     - .qr-hero-stage         right col (phone + activity-stack)
     - .qr-phone              Phone-Mockup mit miraMENU-Interface
     - .qr-activity           Live-Order-Stream Stack (rechts neben Phone)
   ============================================================================ */

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

/* ─── Signal-Network BG (Welle 2026-05-26 v22) ─────────────────────────────
   Canvas2D Partikel-Netzwerk + periodische Scan-Wave.
   Kein CDN, kein Three.js. Logic in qr-network-bg.js.
   CSS macht: Aurora-Basis-Gradient (always-on, kein JS) + Canvas-Positioning.
*/

/* Aurora-Basis — 2 animierte Farbblobs, CSS-only, GPU-accelerated */
.qr-hero {
  background: #FAFBFD;
}
body.is-dark-bg .qr-hero {
  background: #0A1B33;
}

/* Decorative BG Aurora (ersetzt die statischen Radial-Gradients vom alten .qr-hero-bg-mesh) */
.qr-hero-bg-mesh {
  position: absolute;
  inset: -30%;
  /* 3 Blobs — kräftigere Opazität für sichtbaren Aurora-Effekt */
  background:
    radial-gradient(ellipse 65% 55% at 78% 38%, rgba(20, 152, 213, 0.22), transparent 68%),
    radial-gradient(ellipse 55% 65% at 22% 68%, rgba(62, 182, 240, 0.14), transparent 62%),
    radial-gradient(ellipse 45% 45% at 58% 18%, rgba(6, 199, 85,  0.09),  transparent 58%);
  filter: blur(45px);
  animation: qr-aurora-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}
body.is-dark-bg .qr-hero-bg-mesh {
  background:
    radial-gradient(ellipse 65% 55% at 78% 38%, rgba(62, 182, 240, 0.32), transparent 68%),
    radial-gradient(ellipse 55% 65% at 22% 68%, rgba(20, 152, 213, 0.22), transparent 62%),
    radial-gradient(ellipse 45% 45% at 58% 18%, rgba(6, 199, 85,  0.14),  transparent 58%);
}
@keyframes qr-aurora-drift {
  0%   { transform: translate(0,     0)     scale(1.00); }
  25%  { transform: translate(-5%,   4%)    scale(1.06); }
  50%  { transform: translate(4%,   -3%)    scale(0.96); }
  75%  { transform: translate(-3%,  -5%)    scale(1.04); }
  100% { transform: translate(3%,    3%)    scale(1.02); }
}

/* Canvas — Full-Section, z-index:2 (über Mesh, unter Container z-index:3) */
.qr-hero-sphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* ─── Film Grain — Premium Texture Overlay (CSS-only, Zero-JS) ──────────────
   Analoge Körnung über allem. Linear, Framer, Vercel, Arc — alle nutzen dies.
   SVG feTurbulence als Data-URL, steps()-Animation = filmischer Sprung-Charakter.
   7% Opacity: kaum sichtbar, aber macht den Unterschied zwischen "digital" und
   "cinematic". pointer-events: none, overflow: hidden auf .qr-hero sorgt für sauberen Clip.
*/
.qr-hero::after {
  content: '';
  position: absolute;
  inset: -8px; /* leichter Überhang damit die px-Verschiebungen keine Lücken zeigen */
  z-index: 10;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: qr-grain 8s steps(10) infinite;
  will-change: transform;
}
@keyframes qr-grain {
  /* Nur winzige px-Verschiebungen — Textur springt, Element selbst bleibt unsichtbar */
  0%   { transform: translate(0px,  0px)  }
  10%  { transform: translate(-2px, -3px) }
  20%  { transform: translate(-4px,  1px) }
  30%  { transform: translate( 2px, -4px) }
  40%  { transform: translate(-1px,  3px) }
  50%  { transform: translate(-3px,  2px) }
  60%  { transform: translate( 3px,  0px) }
  70%  { transform: translate( 0px,  3px) }
  80%  { transform: translate( 1px,  4px) }
  90%  { transform: translate(-2px,  2px) }
  100% { transform: translate( 1px,  1px) }
}

@media (prefers-reduced-motion: reduce) {
  .qr-hero-bg-mesh { animation: none; }
  .qr-hero::after  { animation: none; }
}

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

/* ─── LEFT: Text Block ───────────────────────────────────────────────────── */
.qr-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.qr-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;
}
.qr-hero-back:hover { color: #1498D5; }
body.is-dark-bg .qr-hero-back { color: rgba(240, 244, 250, 0.55); }
body.is-dark-bg .qr-hero-back:hover { color: #3EB6F0; }

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

.qr-hero-h1 {
  /* QR-Headlines sind länger ("Guests scan, order, pay") als BS — daher
     kleinere Max-Größe + text-wrap:balance für saubere natürliche Brüche
     statt forciertem nowrap (das den Container sprengt). */
  font-size: clamp(2rem, 6vw, 2.7rem);
  line-height: 1.1;
  font-weight: 800;
  color: #0A1B33;
  letter-spacing: -0.03em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  text-wrap: balance;
}
html[lang="th"] .qr-hero-h1 { line-height: 1.18; }
body.is-dark-bg .qr-hero-h1 { color: #F0F4FA; }

.qr-hero-h1-line {
  display: block;
}
.qr-hero-h1-line-2 { color: #1498D5; }
body.is-dark-bg .qr-hero-h1-line-2 { color: #3EB6F0; }

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

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

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

/* ─── RIGHT: Stage (Phone + Activity-Stack) ──────────────────────────────── */
.qr-hero-stage {
  position: relative;
  width: 100%;
  display: grid;
  /* Welle 2026-05-26: Phone-Spalte 220 → 180px reduziert für Konsistenz mit
     BS-Hero-Höhe (~670px statt 820px). Total ~150px kleinerer Hero. */
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  justify-content: center;
}

/* ─── Phone-Mockup mit Premium-Schatten + Floor-Reflection (Welle v14) ──── */
.qr-phone {
  position: relative;
  width: 100%;
  max-width: 180px;
  justify-self: center;
}
/* Floor-Reflection unter Phone (Apple-Style): Pseudo-Element rendert eine
   weiche Glow-Ellipse die wie eine Reflection auf einem "Display-Stand" wirkt */
.qr-phone::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  width: 130%;
  height: 30px;
  background: radial-gradient(ellipse at center,
    rgba(20, 152, 213, 0.25) 0%,
    rgba(20, 152, 213, 0.10) 35%,
    transparent 70%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}
body.is-dark-bg .qr-phone::after {
  background: radial-gradient(ellipse at center,
    rgba(62, 182, 240, 0.40) 0%,
    rgba(62, 182, 240, 0.15) 35%,
    transparent 70%);
}
.qr-phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 18.5;
  background: #0A1B33;
  border-radius: 30px;
  padding: 7px;
  /* Premium-Schatten: 3 layers für depth — close, mid, far */
  box-shadow:
    0 8px 16px -4px rgba(10, 27, 51, 0.20),
    0 24px 48px -12px rgba(10, 27, 51, 0.30),
    0 48px 96px -20px rgba(10, 27, 51, 0.35),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
body.is-dark-bg .qr-phone-frame {
  background: #000000;
  box-shadow:
    0 8px 16px -4px rgba(0, 0, 0, 0.50),
    0 24px 48px -12px rgba(0, 0, 0, 0.60),
    0 48px 96px -20px rgba(20, 152, 213, 0.25),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.10);
}
.qr-phone-notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 16px;
  background: #0A1B33;
  border-radius: 0 0 10px 10px;
  z-index: 5;
}
body.is-dark-bg .qr-phone-notch {
  background: #000000;
}
.qr-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ─── 3-Layer-Stack: Scan / Menu / Success ────────────────────────────────
   GSAP toggled opacity + transform pro Layer. Alle absolute-stacked. */
.qr-phone-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.qr-phone.is-scanning .qr-phone-layer--scan    { opacity: 1; }
.qr-phone.is-menu     .qr-phone-layer--menu    { opacity: 1; }
.qr-phone.is-success  .qr-phone-layer--success { opacity: 1; }

/* ─── Scanner-View (Phase 1: Customer scant QR am Tisch) ────────────────── */
.qr-phone-layer--scan {
  background: linear-gradient(180deg, #0A1B33 0%, #050a14 100%);
  align-items: center;
  justify-content: flex-start;
  padding: 1.6rem 1rem 1.2rem;
  color: #fff;
}
.qr-phone-scan-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}
.qr-phone-scan-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #ffffff;
}
.qr-phone-scan-sub {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  max-width: 22ch;
}
.qr-phone-scan-viewport {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.8rem;
}
.qr-phone-scan-frame {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  padding: 14px;
}
/* Scan-Frame-Corners (Camera-View-Ecken) */
.qr-phone-scan-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #3FB496;
  border-style: solid;
  border-width: 0;
}
.qr-phone-scan-corner--tl { top: -2px;    left: -2px;    border-top-width:    3px; border-left-width:  3px; border-top-left-radius: 6px; }
.qr-phone-scan-corner--tr { top: -2px;    right: -2px;   border-top-width:    3px; border-right-width: 3px; border-top-right-radius: 6px; }
.qr-phone-scan-corner--bl { bottom: -2px; left: -2px;    border-bottom-width: 3px; border-left-width:  3px; border-bottom-left-radius: 6px; }
.qr-phone-scan-corner--br { bottom: -2px; right: -2px;   border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 6px; }
.qr-phone-scan-code {
  width: 100%;
  height: 100%;
}
/* Scan-Line: läuft von oben nach unten beim Scanning */
.qr-phone-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #3FB496 50%, transparent 100%);
  box-shadow: 0 0 12px 2px rgba(63, 180, 150, 0.6);
  pointer-events: none;
}
.qr-phone.is-scanning .qr-phone-scan-line {
  animation: qr-scan-sweep 1.4s ease-in-out infinite;
}
@keyframes qr-scan-sweep {
  0%   { top: 0;           opacity: 0.3; }
  50%  { top: calc(100% - 3px); opacity: 1; }
  100% { top: 0;           opacity: 0.3; }
}

/* ─── Success-View (Phase 3: Order placed checkmark) ──────────────────── */
.qr-phone-layer--success {
  background: linear-gradient(180deg, #06C755 0%, #058B47 100%);
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: #fff;
}
.qr-phone-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  animation: qr-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.qr-phone.is-success .qr-phone-success-icon {
  animation: qr-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes qr-success-pop {
  0%   { transform: scale(0);   opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.qr-phone-success-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.qr-phone-success-sub {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

/* Phone Header */
.qr-phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0.7rem 0.5rem;
  border-bottom: 1px solid rgba(10, 27, 51, 0.08);
  flex-shrink: 0;
}
.qr-phone-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.qr-phone-restaurant {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0A1B33;
  letter-spacing: -0.01em;
}
.qr-phone-table {
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(10, 27, 51, 0.50);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.qr-phone-cart {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1498D5;
  border-radius: 7px;
  color: #ffffff;
}
.qr-phone-cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #ff4444;
  color: #ffffff;
  font-size: 0.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone Menu Items */
.qr-phone-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem 0.5rem;
  overflow: hidden;
}
.qr-phone-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem;
  background: rgba(10, 27, 51, 0.03);
  border-radius: 9px;
}
.qr-phone-item-photo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5e6d3, #d4a574);
}
.qr-phone-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qr-phone-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.qr-phone-item-name {
  font-size: 0.62rem;
  font-weight: 700;
  color: #0A1B33;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qr-phone-item-price {
  font-size: 0.58rem;
  font-weight: 700;
  color: #1498D5;
  font-variant-numeric: tabular-nums;
}
.qr-phone-item-add {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1498D5;
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: default;
  flex-shrink: 0;
}

/* Phone CTA Footer */
.qr-phone-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.4rem 0.5rem 0.6rem;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(160deg, #1498D5, #0F7BB2);
  color: #ffffff;
  border-radius: 9px;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}
.qr-phone-cta-total {
  font-variant-numeric: tabular-nums;
}

/* ─── Activity-Stack (Live-Orders Stream) ───────────────────────────────── */
.qr-activity {
  position: relative;
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  justify-self: start;
}

/* Header */
.qr-activity-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(10, 27, 51, 0.55);
}
body.is-dark-bg .qr-activity-header {
  color: rgba(240, 244, 250, 0.55);
}
.qr-activity-dot {
  width: 8px;
  height: 8px;
  background: #06C755;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.5);
  animation: qr-activity-dot-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes qr-activity-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(6, 199, 85, 0); }
}
.qr-activity-label {
  flex: 1;
}
.qr-activity-live {
  font-size: 0.62rem;
  font-weight: 800;
  color: #06C755;
  padding: 0.15rem 0.45rem;
  background: rgba(6, 199, 85, 0.12);
  border-radius: 999px;
}

/* Stack-Container */
.qr-activity-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Stack hat fixe Höhe, Cards die "rausfallen" werden hidden */
  max-height: 380px;
  overflow: hidden;
  /* Mask: bottom fadeOut damit Cards die rausscrollen sanft verschwinden */
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

/* Activity-Card (generisch) */
.qr-activity-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.7rem 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(10, 27, 51, 0.08);
  border-radius: 11px;
  box-shadow:
    0 2px 8px rgba(10, 27, 51, 0.05),
    0 6px 16px -4px rgba(10, 27, 51, 0.08);
  flex-shrink: 0;
  will-change: transform, opacity;
}
body.is-dark-bg .qr-activity-card {
  background: #1d2c46;
  border-color: rgba(240, 244, 250, 0.10);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.30),
    0 6px 16px -4px rgba(0, 0, 0, 0.40);
}

/* Counter-Card (sticky top, gradient-Style für Differenzierung) */
.qr-activity-card--counter {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  background: linear-gradient(160deg, #1498D5, #0F7BB2);
  color: #ffffff;
  border-color: transparent;
  padding: 0.85rem 1rem;
}
body.is-dark-bg .qr-activity-card--counter {
  border-color: transparent;
}
.qr-activity-counter-value {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: #ffffff;
  line-height: 1;
}
.qr-activity-counter-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Order-Card (rotieren via GSAP) */
.qr-activity-card--order .qr-activity-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.65rem;
}
.qr-activity-card-table {
  font-weight: 700;
  color: #0A1B33;
  letter-spacing: -0.005em;
}
body.is-dark-bg .qr-activity-card-table {
  color: #F0F4FA;
}
.qr-activity-card-time {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(10, 27, 51, 0.50);
  font-variant-numeric: tabular-nums;
}
body.is-dark-bg .qr-activity-card-time {
  color: rgba(240, 244, 250, 0.50);
}
.qr-activity-card-items {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(10, 27, 51, 0.75);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-dark-bg .qr-activity-card-items {
  color: rgba(240, 244, 250, 0.75);
}
.qr-activity-card-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1498D5;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
body.is-dark-bg .qr-activity-card-price {
  color: #3EB6F0;
}

/* ─── Mobile (≤880px): Stack vertikal — Phone + Activity untereinander ──── */
@media (max-width: 879px) {
  .qr-hero-stage {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .qr-activity {
    max-width: 100%;
    justify-self: center;
  }
  .qr-activity-stack {
    max-height: 320px;
  }
}

/* ─── Desktop Layout (≥1024px) ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .qr-hero {
    padding: 7rem 0 6rem;
  }
  .qr-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 3.5rem;
    align-items: center;
  }
  .qr-hero-text { gap: 1.4rem; }
  .qr-hero-h1 { font-size: clamp(2.8rem, 4.6vw, 4.2rem); }
  .qr-hero-sub { font-size: 1.05rem; }
  .qr-hero-stage {
    /* Welle 2026-05-26: Phone-Column 240→185 für Konsistenz mit BS-Hero-Höhe */
    grid-template-columns: minmax(0, 185px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  .qr-phone { max-width: 185px; }
  .qr-activity { max-width: 320px; }
  .qr-activity-stack { max-height: 380px; }
  .qr-phone-restaurant { font-size: 0.78rem; }
  .qr-phone-table { font-size: 0.6rem; }
  .qr-phone-item-name { font-size: 0.68rem; }
  .qr-phone-item-price { font-size: 0.62rem; }
  .qr-activity-counter-value { font-size: 1.6rem; }
}

/* ─── Reduced-Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qr-activity-dot { animation: none; }
}