/* ===========================
   HomeHarbor – Horizon Rail
   Scope: #hh-inline-horizon
   =========================== */

#hh-inline-horizon{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --ink:#0f172a; --muted:#475569; --card:#fff; --surface:#f8fafc; --border:#e2e8f0;
  --ring:rgba(59,130,246,.45); --hover:rgba(224,242,254,.55);
  --shadow:0 6px 14px rgba(2,6,23,.08);
  --grad-a:#2563eb; --grad-b:#38bdf8;
  --ease:cubic-bezier(.22,.8,.24,1); --dur:360ms; color:var(--ink);
}
#hh-inline-horizon .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

#hh-inline-horizon .hh-horizon{ padding:60px 20px; }
#hh-inline-horizon .hh-horizon-inner{max-width:1220px;margin:0 auto;text-align:center}
#hh-inline-horizon #horizon-title{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
#hh-inline-horizon .lead{font-size:clamp(16px,2.2vw,18px);color:var(--muted);line-height:1.55;max-width:760px;margin:0 auto 8px;font-weight:600}
#hh-inline-horizon .micro-proof{font-size:14px;color:#64748b;margin:0 auto 18px}
#hh-inline-horizon .hx-note{margin:14px auto 0;max-width:900px;font-size:clamp(12px,1.7vw,14px);color:var(--muted)}

/* Wrapper mit runden Ecken */
#hh-inline-horizon .horizon-rail{
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background:transparent;
}

/* Rail */
#hh-inline-horizon .horizon-grid{
  display:flex; gap:14px; align-items:stretch;
  overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-snap-stop:always;
  padding:48px 7vw 12px;   /* Headroom fürs Ribbon */
  margin-top:-4px; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain;
  scrollbar-width:none; position:relative; background:transparent;
}
@media (max-width:640px){ #hh-inline-horizon .horizon-grid{ padding-top:52px; } }
#hh-inline-horizon .horizon-grid::-webkit-scrollbar{display:none}

#hh-inline-horizon .swipe{display:none;margin:8px 0 0;color:var(--muted);font-size:14px;opacity:.95}
@media (max-width:820px){ #hh-inline-horizon .swipe{display:block} }

/* Edge Fades */
#hh-inline-horizon .horizon-grid::before,
#hh-inline-horizon .horizon-grid::after{
  content:""; position:sticky; top:0; width:7vw; height:100%;
  pointer-events:none; z-index:1;
  background:linear-gradient(90deg,#fff,transparent);
}
#hh-inline-horizon .horizon-grid::after{ right:0; transform:scaleX(-1) }
#hh-inline-horizon .horizon-grid::before{ left:0 }

/* Cards */
#hh-inline-horizon .horizon-box{
  flex:0 0 320px; max-width:500px; scroll-snap-align:center;
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:22px 18px 18px; box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  min-height:408px; will-change:transform, box-shadow; isolation:isolate;
  --mx:50%; --my:50%; z-index:3; overflow:visible; /* Ribbon nicht abschneiden */
}
#hh-inline-horizon .horizon-box > *{ position:relative; z-index:2; }
@media (max-width:640px){ #hh-inline-horizon .horizon-box{ flex-basis:70vw; } }

/* Glow in der Kachel */
#hh-inline-horizon .horizon-box::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  border-radius:inherit;
  background:
    radial-gradient(180px 180px at var(--mx) var(--my), rgba(125,211,252,.28), transparent 60%),
    radial-gradient(300px 300px at var(--mx) var(--my), rgba(56,189,248,.18), transparent 70%);
  transition:opacity .32s var(--ease);
}
#hh-inline-horizon .horizon-box.is-active{
  transform:translateY(-2px);
  border-color:#93c5fd;
  background:#fff;
  box-shadow:0 12px 26px rgba(2,6,23,.12);
}
#hh-inline-horizon .horizon-box.is-active::before{ opacity:1 }
@media (hover:hover) and (pointer:fine){
  #hh-inline-horizon .horizon-box:hover{
    transform:translateY(-2px);
    border-color:rgba(56,189,248,.25);
    background:#fff;
    box-shadow:0 12px 26px rgba(2,6,23,.12);
  }
  #hh-inline-horizon .horizon-box:hover::before{ opacity:1 }
}
#hh-inline-horizon .horizon-box.is-touching{ transform:translateY(-2px); border-color:#93c5fd }

#hh-inline-horizon .horizon-title{font-size:18px;font-weight:800;margin:8px 0 6px}
#hh-inline-horizon .horizon-sub{margin:0 0 12px;color:#475569;font-size:14px;line-height:1.55;max-width:28ch}
#hh-inline-horizon .hx-list{list-style:disc; padding-left:18px; margin:10px 0 0; font-size:14px; line-height:1.6; max-width:28ch; text-align:left; align-self:stretch}
#hh-inline-horizon .hx-list li{margin:6px 0}

#hh-inline-horizon .hx-footer{margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:10px; min-height:60px; width:100%}
#hh-inline-horizon .hx-cta{display:inline-block; padding:12px 16px; border-radius:12px; font-weight:700; text-decoration:none; line-height:1; font-size:14px; color:#fff;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); box-shadow:0 8px 20px rgba(56,189,248,.28); transition:transform .2s ease, box-shadow .2s ease}
#hh-inline-horizon .hx-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(56,189,248,.35)}
#hh-inline-horizon .hx-cta.outline{color:#0f172a;background:#fff;border:1px solid rgba(59,130,246,.35);box-shadow:none}
#hh-inline-horizon .hx-cta.small{padding:8px 12px;font-size:13px;border-radius:10px;margin-top:8px}

/* Benefit & Popover */
#hh-inline-horizon .benefit-inline{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 6px;padding:6px 10px;border-radius:999px;background:#f1f5f9;color:#0f172a;font-weight:700;font-size:12.5px;border:1px solid #e2e8f0}
#hh-inline-horizon .benefit-inline .dot{width:6px;height:6px;border-radius:999px;background:#22c55e;display:inline-block}

/* Glühbirnen-Button (Glow) */
#hh-inline-horizon .benefit-bulb{
  margin-left:6px; inline-size:1.6rem; block-size:1.6rem; border-radius:999px;
  border:1px solid rgba(250,204,21,.45);
  background:#fffbea; color:#f59e0b; font-size:1rem; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; transition:transform .2s ease;
  box-shadow:0 0 0 0 rgba(245,158,11,.35), 0 0 10px rgba(245,158,11,.35);
  animation: bulbPulse 2.2s ease-out infinite;
  will-change: box-shadow, transform;
}
#hh-inline-horizon .benefit-bulb.small{ inline-size:1.4rem; block-size:1.4rem; font-size:.95rem }
#hh-inline-horizon .benefit-bulb:hover{ transform:translateY(-1px) }
#hh-inline-horizon .benefit-bulb:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(250,204,21,.4), 0 0 12px rgba(245,158,11,.45) }
#hh-inline-horizon .benefit-bulb::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  border:2px solid rgba(245,158,11,.35); opacity:0; pointer-events:none;
  animation: bulbHalo 2.2s ease-out infinite;
}
@keyframes bulbPulse{
  0%   { box-shadow:0 0 0 0 rgba(245,158,11,.45), 0 0 10px rgba(245,158,11,.35); }
  60%  { box-shadow:0 0 0 10px rgba(245,158,11,0), 0 0 16px rgba(245,158,11,.45); }
  100% { box-shadow:0 0 0 0 rgba(245,158,11,0), 0 0 10px rgba(245,158,11,.35); }
}
@keyframes bulbHalo{
  0%   { opacity:.65; transform:scale(0.9); }
  60%  { opacity:0;   transform:scale(1.15); }
  100% { opacity:0;   transform:scale(1.15); }
}

#hh-inline-horizon .benefit-popover{
  position:absolute;left:12px;right:12px;bottom:74px;background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:12px;box-shadow:0 12px 30px rgba(2,6,23,.15);text-align:left;font-size:13px;z-index:20
}

/* Ribbon */
#hh-inline-horizon .ribbon-slanted{
  position:absolute; top:20px; right:-10px; width:132px; padding:6px 0;
  transform:rotate(45deg); transform-origin:50% 50%;
  text-align:center; background:linear-gradient(90deg,#3b82f6,#22d3ee);
  color:#fff; font-weight:800; letter-spacing:.2px; border-radius:12px;
  box-shadow:0 10px 24px rgba(2,6,23,.22), inset 0 0 0 1px rgba(255,255,255,.28);
  z-index:50; pointer-events:none;
}
#hh-inline-horizon .ribbon-small span{font-size:.75rem}

/* Dots */
#hh-inline-horizon .hx-dots{display:flex;justify-content:center;gap:8px;margin:10px 0 0}
#hh-inline-horizon .hx-dots button{width:8px;height:8px;border-radius:999px;border:0;background:#cbd5e1;opacity:.8;transform:scale(1);transition:transform .2s ease, opacity .2s ease, background .2s ease}
#hh-inline-horizon .hx-dots button[aria-current="true"]{background:#2563eb;opacity:1;transform:scale(1.15)}
#hh-inline-horizon .hx-dots button:focus-visible{outline:3px solid var(--ring)}

/* Builder Overrides */
#hh-inline-horizon .elementor-widget-container,
#hh-inline-horizon .elementor,
#hh-inline-horizon .elementor-section,
#hh-inline-horizon .elementor-container,
#hh-inline-horizon .elementor-widget-wrap{overflow:visible !important}
#hh-inline-horizon .horizon-grid, #hh-inline-horizon .horizon-box{pointer-events:auto !important}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #hh-inline-horizon *{transition:none !important;animation:none !important}
  #hh-inline-horizon .horizon-grid{scroll-behavior:auto}
}