/* ═══════════════════════════════════════════════════════════════
   COGSWELL HERO LIBRARY — Apple / Framer style
   Wiederverwendbare Hero-Komponenten für Service-Seiten.
   Jede Seite bekommt einen einzigartigen visuellen Center-Effect.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Base hero shell ─────────────────────────────────────── */
.hx {
  position:relative; background:#000; color:#fff;
  padding:110px 24px 80px;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:48px; overflow:hidden; isolation:isolate;
}
.hx::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,170,221,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(94,247,127,0.10) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
/* page-specific tint hooks */
.hx-tint-blue::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,170,221,0.25) 0%, transparent 65%),
    radial-gradient(ellipse 50% 30% at 30% 100%, rgba(0,150,255,0.12) 0%, transparent 70%);
}
.hx-tint-green::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(94,247,127,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,200,150,0.10) 0%, transparent 70%);
}
.hx-tint-purple::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168,85,247,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(220,80,255,0.10) 0%, transparent 70%);
}
.hx-tint-amber::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(251,191,36,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(255,140,80,0.10) 0%, transparent 70%);
}
.hx-tint-pink::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(244,114,182,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(168,85,247,0.10) 0%, transparent 70%);
}

/* subtle dot grid overlay */
.hx-grid {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.35;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 80%);
}

/* ─── Text block ──────────────────────────────────────────── */
.hx-text {
  position:relative; z-index:3;
  text-align:center; max-width:920px; width:100%;
  display:flex; flex-direction:column; gap:20px; align-items:center;
}
.hx-kicker {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:100px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  font-size:12px; color:rgba(255,255,255,0.75); letter-spacing:0.02em;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:hxFadeUp 0.8s ease-out both;
}
.hx-kicker-dot { width:6px; height:6px; border-radius:50%; box-shadow:0 0 12px currentColor; }
.hx-kicker-dot.blue { background:#00aadd; color:#00aadd; }
.hx-kicker-dot.green { background:#5ef77f; color:#5ef77f; }
.hx-kicker-dot.purple { background:#a855f7; color:#a855f7; }
.hx-kicker-dot.amber { background:#fbbf24; color:#fbbf24; }
.hx-kicker-dot.pink { background:#f472b6; color:#f472b6; }

.hx-h1 {
  font-family:'Inter',sans-serif;
  font-size:clamp(48px, 8vw, 116px);
  font-weight:600;
  line-height:0.98;
  letter-spacing:-0.045em;
  margin:0; color:#fff;
  animation:hxFadeUp 1s ease-out 0.1s both;
}
.hx-h1 .muted { color:rgba(255,255,255,0.42); display:block; font-weight:400; }
.hx-h1 .grad-blue {
  background:linear-gradient(135deg, #2dd4ff 0%, #0099cc 35%, #0a3a66 70%, #061a33 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:hxGrad 6s ease-in-out infinite;
  display:inline-block;
}
.hx-h1 .grad-purple {
  background:linear-gradient(135deg, #a855f7 0%, #f472b6 50%, #a855f7 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:hxGrad 6s ease-in-out infinite;
  display:inline-block;
}
.hx-h1 .grad-amber {
  background:linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #fbbf24 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:hxGrad 6s ease-in-out infinite;
  display:inline-block;
}
.hx-h1 .grad-cyan {
  background:linear-gradient(135deg, #06b6d4 0%, #ffffff 50%, #06b6d4 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:hxGrad 6s ease-in-out infinite;
  display:inline-block;
}
.hx-h1 .grad-pink {
  background:linear-gradient(135deg, #f472b6 0%, #fbbf24 50%, #f472b6 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:hxGrad 6s ease-in-out infinite;
  display:inline-block;
}

@keyframes hxGrad {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}

.hx-sub {
  font-size:clamp(15px, 1.4vw, 19px);
  color:rgba(255,255,255,0.6);
  max-width:580px; line-height:1.55;
  margin:0; letter-spacing:-0.01em;
  animation:hxFadeUp 1s ease-out 0.2s both;
}
.hx-buttons {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  animation:hxFadeUp 1s ease-out 0.3s both; margin-top:4px;
}
.hx-btn {
  padding:14px 26px; border-radius:100px;
  font-size:14px; font-weight:500; letter-spacing:-0.01em;
  text-decoration:none; transition:all 0.25s ease;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; cursor:pointer;
}
.hx-btn-primary { background:#fff; color:#000; box-shadow:0 8px 32px rgba(255,255,255,0.15); }
.hx-btn-primary:hover { background:rgba(255,255,255,0.92); transform:translateY(-2px); box-shadow:0 12px 40px rgba(255,255,255,0.28); }
.hx-btn-ghost {
  background:rgba(255,255,255,0.08); color:#fff;
  border-color:rgba(255,255,255,0.18); backdrop-filter:blur(10px);
}
.hx-btn-ghost:hover { background:rgba(255,255,255,0.16); transform:translateY(-2px); }

/* trust strip */
.hx-trust {
  position:relative; z-index:2;
  font-size:11px; color:rgba(255,255,255,0.4); letter-spacing:0.1em; text-transform:uppercase;
  animation:hxFadeUp 1s ease-out 1.3s both;
}

/* ─── Stage (where each unique visual lives) ──────────────── */
.hx-stage {
  position:relative; z-index:2;
  width:min(900px, 92vw);
  display:flex; align-items:center; justify-content:center;
  animation:hxFadeUp 1.2s ease-out 0.4s both;
}

@keyframes hxFadeUp {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   STAGE VARIANTS — eine pro Service-Seite
   ════════════════════════════════════════════════════════════ */

/* ── Variant A: VIDEO TILE (it-service) ────────────────────── */
.hx-vtile {
  position:relative;
  width:min(720px, 90vw); aspect-ratio:16/10;
  border-radius:24px; overflow:hidden;
  background:#0a0a0a;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 40px 100px rgba(0,170,221,0.18),
    0 20px 60px rgba(0,0,0,0.6);
}
.hx-vtile video, .hx-vtile img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.hx-vtile-shine {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
}

/* floating pill labels around stage */
.hx-orbit {
  position:absolute; z-index:3;
  background:rgba(10,10,10,0.85); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1); border-radius:14px;
  padding:10px 14px; display:flex; align-items:center; gap:10px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
}
.hx-orbit-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.hx-orbit-icon.blue { background:rgba(0,170,221,0.15); border:1px solid rgba(0,170,221,0.3); }
.hx-orbit-icon.green { background:rgba(94,247,127,0.12); border:1px solid rgba(94,247,127,0.3); }
.hx-orbit-icon.purple { background:rgba(168,85,247,0.15); border:1px solid rgba(168,85,247,0.3); }
.hx-orbit-icon.amber { background:rgba(251,191,36,0.15); border:1px solid rgba(251,191,36,0.3); }
.hx-orbit-icon.pink { background:rgba(244,114,182,0.15); border:1px solid rgba(244,114,182,0.3); }
.hx-orbit-text { font-size:12px; color:#fff; line-height:1.3; white-space:nowrap; font-weight:500; }
.hx-orbit-text small { display:block; font-size:10px; color:rgba(255,255,255,0.55); margin-top:2px; font-weight:400; }
.hx-o-tl { top:8%; left:-4%; animation:hxFloatA 6s ease-in-out 2s infinite; }
.hx-o-tr { top:18%; right:-4%; animation:hxFloatB 7s ease-in-out 2.5s infinite; }
.hx-o-bl { bottom:18%; left:-2%; animation:hxFloatA 8s ease-in-out 3s infinite; }
.hx-o-br { bottom:8%; right:-3%; animation:hxFloatB 7.5s ease-in-out 2.8s infinite; }
@keyframes hxFloatA { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes hxFloatB { 0%,100%{transform:translateY(0);} 50%{transform:translateY(12px);} }

/* ── Variant B: ROADMAP CARDS (ki-beratung) ────────────────── */
.hx-roadmap {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
  width:min(960px, 95vw); perspective:1400px;
}
.hx-rm-card {
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.1);
  border-radius:18px;
  padding:22px 18px;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.4s, border-color 0.3s;
  animation:hxRMRise 0.9s ease-out both;
}
.hx-rm-card:nth-child(1) { animation-delay:0.45s; }
.hx-rm-card:nth-child(2) { animation-delay:0.55s; }
.hx-rm-card:nth-child(3) { animation-delay:0.65s; }
.hx-rm-card:nth-child(4) { animation-delay:0.75s; }
.hx-rm-card:hover {
  transform:translateY(-8px) rotateX(2deg);
  border-color:rgba(0,170,221,0.4);
  background:linear-gradient(180deg, rgba(0,170,221,0.08), rgba(255,255,255,0.02));
}
.hx-rm-num {
  font-size:11px; color:#00aadd; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.hx-rm-num::before {
  content:''; width:24px; height:1px; background:#00aadd;
}
.hx-rm-icon {
  width:48px; height:48px; border-radius:12px;
  background:rgba(0,170,221,0.12); border:1px solid rgba(0,170,221,0.25);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  margin-bottom:14px;
}
.hx-rm-title {
  font-size:16px; color:#fff; font-weight:600; letter-spacing:-0.02em; margin:0 0 6px;
}
.hx-rm-desc {
  font-size:13px; color:rgba(255,255,255,0.55); line-height:1.5; margin:0;
}
.hx-rm-meta {
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:11px; color:rgba(255,255,255,0.45); letter-spacing:0.04em;
}
@keyframes hxRMRise {
  from { opacity:0; transform:translateY(40px) rotateX(8deg); }
  to { opacity:1; transform:translateY(0) rotateX(0); }
}

/* ── Variant C: CALL UI (voice-agenten) ────────────────────── */
.hx-callui {
  width:min(540px, 92vw);
  background:linear-gradient(180deg, rgba(20,20,28,0.9), rgba(10,10,14,0.95));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:28px;
  padding:32px 28px;
  box-shadow:0 30px 100px rgba(94,247,127,0.18), 0 0 0 1px rgba(255,255,255,0.04);
}
.hx-call-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.hx-call-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; color:#5ef77f; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
}
.hx-call-tag::before { content:''; width:8px; height:8px; border-radius:50%; background:#5ef77f; box-shadow:0 0 0 4px rgba(94,247,127,0.2); animation:hxPulse 1.6s infinite; }
.hx-call-time { font-size:13px; color:rgba(255,255,255,0.7); font-variant-numeric:tabular-nums; }
@keyframes hxPulse {
  0%,100% { box-shadow:0 0 0 4px rgba(94,247,127,0.2); }
  50% { box-shadow:0 0 0 12px rgba(94,247,127,0); }
}
.hx-call-name { font-size:22px; font-weight:600; color:#fff; letter-spacing:-0.02em; margin-bottom:4px; }
.hx-call-num { font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:24px; }
.hx-wave {
  display:flex; align-items:center; justify-content:center; gap:5px; height:80px;
  margin-bottom:24px;
}
.hx-wave span {
  width:5px; background:linear-gradient(180deg, #5ef77f, #00aadd); border-radius:6px;
  animation:hxWave 1.2s ease-in-out infinite;
}
.hx-wave span:nth-child(1){ animation-delay:0.0s; height:30%; }
.hx-wave span:nth-child(2){ animation-delay:0.1s; height:60%; }
.hx-wave span:nth-child(3){ animation-delay:0.2s; height:80%; }
.hx-wave span:nth-child(4){ animation-delay:0.3s; height:45%; }
.hx-wave span:nth-child(5){ animation-delay:0.4s; height:90%; }
.hx-wave span:nth-child(6){ animation-delay:0.5s; height:65%; }
.hx-wave span:nth-child(7){ animation-delay:0.6s; height:50%; }
.hx-wave span:nth-child(8){ animation-delay:0.7s; height:75%; }
.hx-wave span:nth-child(9){ animation-delay:0.8s; height:40%; }
.hx-wave span:nth-child(10){ animation-delay:0.9s; height:85%; }
.hx-wave span:nth-child(11){ animation-delay:1.0s; height:55%; }
.hx-wave span:nth-child(12){ animation-delay:1.1s; height:70%; }
@keyframes hxWave {
  0%,100% { transform:scaleY(0.3); }
  50% { transform:scaleY(1); }
}
.hx-transcript {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:14px 16px; margin-bottom:18px;
  font-size:13px; color:rgba(255,255,255,0.85); line-height:1.55;
}
.hx-transcript-tag { font-size:10px; color:#5ef77f; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; font-weight:600; }
.hx-call-actions { display:flex; gap:10px; }
.hx-call-act {
  flex:1; padding:12px; border-radius:14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  color:#fff; font-size:12px; text-align:center; font-weight:500;
}
.hx-call-act.danger { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.4); color:#fca5a5; cursor:pointer; transition:all .15s; }
.hx-call-act.danger:hover { background:rgba(239,68,68,0.25); border-color:rgba(239,68,68,0.6); }

/* ── Interactive Call Game ──────────────────────────────────── */
.hx-call-pick[hidden],
.hx-call-active[hidden] { display: none !important; }
.hx-call-pick { display:flex; flex-direction:column; gap:14px; padding:4px 0 8px; }
.hx-call-pick-label {
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(165,180,252,0.85); font-weight:600;
}
.hx-call-pick-label::before { content:"✦ "; color:#5ef77f; }
.hx-call-pick-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hx-pick {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  text-align:left;
  cursor:pointer;
  transition:all .2s;
  font-family:inherit;
  color:#fff;
}
.hx-pick:hover {
  background:rgba(94,247,127,0.07);
  border-color:rgba(94,247,127,0.35);
  transform:translateY(-1px);
}
.hx-pick-ico { font-size:24px; line-height:1; flex-shrink:0; }
.hx-pick-text { display:flex; flex-direction:column; gap:2px; }
.hx-pick-text b { font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.hx-pick-text span { font-size:11.5px; color:rgba(255,255,255,0.55); }

/* Wave: pause when call idle */
.hx-callui[data-game="idle"] .hx-wave span { animation-play-state:paused; opacity:0.2; }
.hx-callui[data-game="ended"] .hx-wave span { animation-play-state:paused; opacity:0.15; }

/* Transcripts container */
.hx-transcripts {
  display:flex; flex-direction:column; gap:10px;
  margin:14px 0 16px;
  max-height:240px; overflow-y:auto;
  padding-right:4px;
}
.hx-transcripts::-webkit-scrollbar { width:4px; }
.hx-transcripts::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }

.hx-transcripts .hx-transcript { margin-bottom:0; animation:hxBubbleIn .35s cubic-bezier(.2,.8,.2,1) both; }
.hx-transcripts .hx-transcript.ai {
  background:rgba(94,247,127,0.07); border-color:rgba(94,247,127,0.22);
}
.hx-transcripts .hx-transcript.ai .hx-transcript-tag { color:#5ef77f; }
.hx-transcripts .hx-transcript.user .hx-transcript-tag { color:#a5b4fc; }

.hx-typing {
  display:inline-flex; gap:4px; padding:6px 10px;
  background:rgba(94,247,127,0.06); border:1px solid rgba(94,247,127,0.18);
  border-radius:12px; margin-top:4px;
  align-self:flex-start;
}
.hx-typing span {
  width:5px; height:5px; border-radius:50%;
  background:#5ef77f; opacity:0.7;
  animation:hxTypingDot 1.2s ease-in-out infinite;
}
.hx-typing span:nth-child(2) { animation-delay:.15s; }
.hx-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes hxTypingDot {
  0%,60%,100% { transform:translateY(0); opacity:0.4; }
  30% { transform:translateY(-3px); opacity:1; }
}
@keyframes hxBubbleIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Choice chips */
.hx-choices {
  display:flex; flex-wrap:wrap; gap:8px;
  margin:6px 0 16px;
  animation:hxBubbleIn .3s ease both;
}
.hx-choice {
  padding:8px 14px;
  background:rgba(165,180,252,0.08);
  border:1px solid rgba(165,180,252,0.25);
  border-radius:999px;
  color:#fff;
  font-family:inherit;
  font-size:12.5px;
  cursor:pointer;
  transition:all .15s;
}
.hx-choice:hover {
  background:rgba(165,180,252,0.16);
  border-color:rgba(165,180,252,0.5);
  transform:translateY(-1px);
}
.hx-choice .hx-choice-pre {
  display:inline-block;
  margin-right:6px; color:#a5b4fc; font-size:10px;
  letter-spacing:0.06em; text-transform:uppercase;
}
.hx-call-ended-note {
  text-align:center; padding:18px 14px;
  background:rgba(94,247,127,0.05);
  border:1px solid rgba(94,247,127,0.2);
  border-radius:14px;
  color:rgba(255,255,255,0.8); font-size:13px; line-height:1.5;
}
.hx-call-ended-note b { color:#5ef77f; }
.hx-call-ended-note .hx-restart {
  display:inline-block; margin-top:10px;
  padding:7px 16px; border-radius:999px;
  background:linear-gradient(135deg, #5ef77f, #06b6d4);
  color:#001020; font-weight:600; font-size:12px;
  cursor:pointer; border:none; font-family:inherit;
}

@media (max-width:520px) {
  .hx-call-pick-grid { grid-template-columns:1fr; }
}

/* ── Variant D: WORKFLOW GRAPH (automation) ────────────────── */
.hx-flow {
  width:min(820px, 92vw);
  background:linear-gradient(180deg, rgba(20,20,28,0.7), rgba(10,10,14,0.85));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:36px 28px;
  position:relative; backdrop-filter:blur(10px);
  box-shadow:0 30px 100px rgba(168,85,247,0.18);
}
.hx-flow-grid {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; align-items:center;
}
.hx-fnode {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:14px 10px; text-align:center;
  font-size:12px; color:#fff; position:relative;
  transition:all 0.3s;
}
.hx-fnode:hover { border-color:rgba(168,85,247,0.5); transform:translateY(-3px); background:rgba(168,85,247,0.08); }
.hx-fnode-ico { font-size:24px; margin-bottom:6px; display:block; }
.hx-fnode-lbl { font-size:11px; color:rgba(255,255,255,0.7); }
.hx-farrow {
  display:flex; align-items:center; justify-content:center; color:#a855f7;
  font-size:18px; opacity:0.7;
}
.hx-flow-pulse {
  position:absolute; inset:0; pointer-events:none;
  border-radius:24px;
  background:radial-gradient(circle at 50% 50%, rgba(168,85,247,0.1) 0%, transparent 60%);
  animation:hxFlowPulse 4s ease-in-out infinite;
}
@keyframes hxFlowPulse { 0%,100%{opacity:0.5;} 50%{opacity:1;} }
.hx-flow-stat {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px;
}
.hx-flow-stat > div {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:12px; padding:14px; text-align:center;
}
.hx-flow-stat .num { font-size:24px; font-weight:600; color:#fff; letter-spacing:-0.02em; line-height:1; }
.hx-flow-stat .lbl { font-size:10px; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.08em; margin-top:6px; }

/* ── Variant E: CALENDAR STACK (terminbuchung) ─────────────── */
.hx-calstack {
  width:min(620px, 90vw); position:relative;
  perspective:1600px;
  height:480px; display:flex; align-items:center; justify-content:center;
}
.hx-cal {
  position:absolute; width:380px;
  background:linear-gradient(180deg, rgba(20,20,28,0.95), rgba(10,10,14,0.98));
  border:1px solid rgba(255,255,255,0.1); border-radius:22px;
  padding:22px; backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,170,221,0.15);
  transform-style:preserve-3d;
}
.hx-cal-1 { transform:translate(-110px, -30px) rotate(-6deg); z-index:1; opacity:0.6; }
.hx-cal-2 { transform:translate(0, 0) rotate(0deg); z-index:3; }
.hx-cal-3 { transform:translate(110px, 30px) rotate(6deg); z-index:2; opacity:0.85; }
.hx-cal-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.hx-cal-mo { font-size:14px; color:#fff; font-weight:600; }
.hx-cal-wk { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-size:10px; color:rgba(255,255,255,0.4); margin-bottom:8px; text-align:center; }
.hx-cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.hx-cal-d {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:rgba(255,255,255,0.6); border-radius:8px;
  background:rgba(255,255,255,0.02);
}
.hx-cal-d.dim { color:rgba(255,255,255,0.2); }
.hx-cal-d.today { background:rgba(0,170,221,0.2); color:#00aadd; border:1px solid rgba(0,170,221,0.5); font-weight:600; }
.hx-cal-d.booked { background:rgba(94,247,127,0.18); color:#5ef77f; }
.hx-cal-slots { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; gap:6px; }
.hx-cal-slot {
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:8px 12px; font-size:12px; color:#fff;
}
.hx-cal-slot.taken { opacity:0.5; }
.hx-cal-slot.taken::after { content:'Vergeben'; font-size:10px; color:rgba(255,255,255,0.5); }
.hx-cal-slot.free::after { content:'Frei'; font-size:10px; color:#5ef77f; font-weight:600; }

/* ── Variant F: 3D BROWSERS TILT (webdesign) ───────────────── */
.hx-browsers {
  width:min(900px, 92vw); height:520px;
  position:relative;
  perspective:1800px;
}
.hx-bro {
  position:absolute;
  background:linear-gradient(180deg, rgba(20,20,28,0.95), rgba(10,10,14,0.98));
  border:1px solid rgba(255,255,255,0.1); border-radius:18px;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,170,221,0.2);
  transform-style:preserve-3d;
  transition:transform 0.5s;
}
.hx-bro-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); }
.hx-bro-dot { width:10px; height:10px; border-radius:50%; }
.hx-bro-dot.r { background:#ff5f56; }
.hx-bro-dot.y { background:#ffbd2e; }
.hx-bro-dot.g { background:#27c93f; }
.hx-bro-url { flex:1; background:rgba(0,0,0,0.4); border-radius:5px; padding:4px 10px; font-size:11px; color:rgba(255,255,255,0.5); margin-left:8px; }
.hx-bro-body { padding:18px; }

.hx-bro-1 {
  width:560px; height:380px;
  top:0; left:50%; transform:translateX(-50%) rotateX(8deg) rotateY(-2deg);
  z-index:3;
}
.hx-bro-2 {
  width:280px; height:200px;
  top:140px; left:0; transform:rotateX(8deg) rotateY(-15deg) rotateZ(-3deg);
  z-index:2; opacity:0.9;
}
.hx-bro-3 {
  width:300px; height:220px;
  top:200px; right:0; transform:rotateX(8deg) rotateY(15deg) rotateZ(3deg);
  z-index:2; opacity:0.85;
}

/* ── Variant G: CHAT BUBBLES (chatbot) ─────────────────────── */
.hx-chat {
  width:min(540px, 92vw);
  background:linear-gradient(180deg, rgba(20,20,28,0.85), rgba(10,10,14,0.92));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1); border-radius:28px;
  padding:24px;
  box-shadow:0 30px 100px rgba(168,85,247,0.18);
}
.hx-chat-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,0.06); }
.hx-chat-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, #a855f7, #f472b6); display:flex; align-items:center; justify-content:center; font-size:20px; }
.hx-chat-name { font-size:14px; color:#fff; font-weight:600; }
.hx-chat-status { font-size:11px; color:#5ef77f; display:flex; align-items:center; gap:6px; margin-top:2px; }
.hx-chat-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#5ef77f; }
.hx-chat-msgs { display:flex; flex-direction:column; gap:10px; }
.hx-msg {
  max-width:85%; padding:10px 14px; border-radius:16px;
  font-size:13px; line-height:1.5; animation:hxMsgIn 0.6s ease-out both;
}
.hx-msg.user {
  align-self:flex-end; background:linear-gradient(135deg, #a855f7, #c084fc); color:#fff;
  border-bottom-right-radius:4px;
}
.hx-msg.bot {
  align-self:flex-start; background:rgba(255,255,255,0.06); color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  border-bottom-left-radius:4px;
}
.hx-msg.bot .typing { display:inline-flex; gap:3px; }
.hx-msg.bot .typing span { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.5); animation:hxType 1.2s infinite; }
.hx-msg.bot .typing span:nth-child(2){animation-delay:0.2s;}
.hx-msg.bot .typing span:nth-child(3){animation-delay:0.4s;}
@keyframes hxType { 0%,60%,100%{opacity:0.3;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }
.hx-msg:nth-child(1){animation-delay:0.6s;}
.hx-msg:nth-child(2){animation-delay:1.2s;}
.hx-msg:nth-child(3){animation-delay:1.8s;}
.hx-msg:nth-child(4){animation-delay:2.4s;}
@keyframes hxMsgIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.hx-chat-input {
  margin-top:18px; padding:10px 14px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,0.4);
}
.hx-chat-send { margin-left:auto; width:28px; height:28px; border-radius:8px; background:#a855f7; display:flex; align-items:center; justify-content:center; color:#fff; }

/* ── Variant H: PHONE-MOCK (cogswell-ai) ──────────────────── */
.hx-phone {
  width:300px; aspect-ratio:9/19;
  background:#000; border:8px solid #1a1a1a; border-radius:42px;
  position:relative; overflow:hidden;
  box-shadow:0 40px 100px rgba(0,170,221,0.3), inset 0 0 0 1px rgba(255,255,255,0.05);
  animation:hxPhoneFloat 6s ease-in-out infinite;
}
@keyframes hxPhoneFloat { 0%,100%{transform:translateY(0) rotateY(0);} 50%{transform:translateY(-12px) rotateY(3deg);} }
.hx-phone-screen { width:100%; height:100%; background:linear-gradient(180deg, #0a0a14, #000); padding:30px 18px 18px; }

/* ─────────────────────────────────────────────────────────── */
@media(max-width:900px) {
  .hx-roadmap { grid-template-columns:repeat(2, 1fr); }
  .hx-flow-grid { grid-template-columns:repeat(3, 1fr); }
  .hx-flow-grid .hx-farrow { display:none; }
  .hx-bro-2, .hx-bro-3 { display:none; }
  .hx-bro-1 { width:90%; transform:translateX(-50%); }
  .hx-orbit { display:none; }
}
@media(max-width:600px) {
  .hx { padding:90px 16px 50px; gap:32px; }
  .hx-roadmap { grid-template-columns:1fr; }
  .hx-flow-grid { grid-template-columns:1fr 1fr; }
  .hx-calstack { height:420px; }
  .hx-cal { width:300px; padding:18px; }
  .hx-browsers { height:340px; }
  .hx-bro-1 { width:100%; height:280px; }
}