/* lorzen.de – Bühne und Bewegung (Theatre.js, js/theatre-scene.js) */
.opener{width:100%}.opener .container{position:relative}
.hero-copy{position:relative;z-index:2;will-change:transform}
.masthead h1 .h1-line{display:block;transform-origin:0 100%}
.hero-video{transform-origin:50% 60%}

/* Bühne rechts im Hero */
.hero-stage{position:absolute;z-index:1;right:0;top:50%;translate:0 -50%;width:min(420px,34vw);aspect-ratio:400/420;pointer-events:none;--px:0;--py:0}
.hero-stage-scroll,.hero-stage-inner{position:absolute;inset:0}
.hero-stage-inner{transform-origin:50% 50%}
.hero-glow{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,137,168,.42),rgba(20,137,168,.12) 55%,transparent 72%);filter:blur(6px)}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-spokes line{stroke:rgba(255,255,255,.38);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.hero-migration-draw{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.hero-migration{fill:none;stroke:#8fe3f5;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:4 8}
.hero-dot{fill:#fff;opacity:0;filter:drop-shadow(0 0 6px #8fe3f5) drop-shadow(0 0 14px rgba(143,227,245,.8))}

.hero-hub{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,29,44,.72);border:1px solid rgba(255,255,255,.3);box-shadow:0 0 0 8px rgba(255,255,255,.06),0 20px 50px rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.hero-hub img{width:46px;height:46px;display:block}
.hub-ring{position:absolute;inset:-1px;border-radius:50%;border:2px solid rgba(143,227,245,.9);opacity:0}

.chip-pos{position:absolute;translate:-50% -50%}
.chip-pos-dev{left:29.5%;top:14.8%}
.chip-pos-bagisto{left:76.25%;top:28.6%}
.chip-pos-shopify{left:71.25%;top:82.1%}
.chip-pos-plenty{left:20%;top:48.8%}
.chip-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:150px;padding:12px 16px 12px 34px;border-radius:14px;position:relative;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.32);box-shadow:0 18px 40px rgba(0,0,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translate3d(calc(var(--px) * var(--depth,16px)),calc(var(--py) * var(--depth,16px)),0);transition:transform .6s cubic-bezier(.22,1,.36,1);white-space:nowrap}
.chip-card strong{font-size:17px;line-height:1.2;letter-spacing:.01em}
.chip-card small{font-size:12px;line-height:1.3;opacity:.82;letter-spacing:.02em}
.chip-dot{position:absolute;left:14px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--chip,#8fe3f5);box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 14px var(--chip,#8fe3f5)}
.chip-pos-bagisto .chip-card{--chip:#5bc8e6;--depth:-22px}
.chip-pos-shopify .chip-card{--chip:#95bf47;--depth:18px}
.chip-pos-plenty .chip-card{--chip:#f2a541;--depth:26px}
.chip-pos-dev .chip-card{--chip:#ffffff;--depth:-30px;background:linear-gradient(135deg,rgba(20,137,168,.85),rgba(23,71,91,.78));border-color:rgba(143,227,245,.75);box-shadow:0 0 0 4px rgba(143,227,245,.14),0 22px 48px rgba(0,0,0,.34)}
.chip-pos-dev .chip-card strong{font-size:19px}
.chip-pos-dev .chip-card small{opacity:.92}
.hero-spokes .spoke-dev{stroke:rgba(143,227,245,.75);stroke-width:2}
.hero-dot-dev{fill:#8fe3f5}
.hero-tag{position:absolute;left:30%;top:90%;translate:-50% -50%;padding:4px 10px;border-radius:20px;background:rgba(10,29,44,.7);border:1px solid rgba(143,227,245,.45);color:#cdf4fc;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

@media(min-width:992px){.hero-copy{padding-right:calc(min(420px,34vw) + 24px)}}
@media(max-width:991px){
  .hero-stage{position:relative;right:auto;top:auto;translate:none;width:min(340px,92%);margin:44px auto 0}
  .chip-card{min-width:0;padding:9px 12px 9px 28px}
  .chip-card strong{font-size:14px}
  .chip-card small{font-size:10.5px}
  .chip-dot{left:11px;top:14px;width:8px;height:8px}
  .chip-pos-dev .chip-card strong{font-size:15px}
  .hero-hub{width:72px;height:72px;margin:-36px 0 0 -36px}
  .hero-hub img{width:36px;height:36px}
  .masthead{height:auto;padding-bottom:40px}
  .hero-tag{left:28%;top:99%}
}

/* Startzustand vor dem Intro (nur mit JS, wird bei Fehlern wieder entfernt) */
.motion .hero-note,.motion .masthead .h1-line,.motion .hero-lead,.motion .masthead .control,.motion .hero-stage-inner{opacity:0}
.is-motion{transition:none!important;will-change:transform,opacity}
.is-motion img{transition:none!important}
.visual-card:after{transform:scale(var(--orb,1));transform-origin:50% 50%}

@media(prefers-reduced-motion:reduce){.chip-card{transition:none;transform:none}}

/* Eigenentwicklungen */
.focus-wide{margin:0 0 24px!important;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"label label label" "title text more";align-items:center;gap:6px 28px;margin-top:24px;padding:26px 32px;border-radius:14px;background:radial-gradient(circle at 12% 0,rgba(143,227,245,.22),transparent 40%),linear-gradient(120deg,#0f2433,#17475b);color:#dbeef3;box-shadow:0 14px 40px rgba(15,36,51,.18);transition:transform .2s ease,box-shadow .2s ease}
.focus-wide:hover,.focus-wide:focus{transform:translateY(-3px);box-shadow:0 20px 50px rgba(15,36,51,.26);text-decoration:none;color:#dbeef3}
.focus-wide .focus-label{grid-area:label;color:#8fe3f5}
.focus-wide strong{grid-area:title;color:#fff;font-size:24px;line-height:1.25}
.focus-wide .focus-text{grid-area:text;font-size:16px;line-height:1.6}
.focus-wide .focus-more{grid-area:more;color:#8fe3f5;white-space:nowrap}
.visual-dev{background:radial-gradient(circle at top left,rgba(23,71,91,.22),transparent 38%),linear-gradient(135deg,#fff 0%,#e8f3f6 100%)}
.badge-dev{background:#e3eef2;color:#17475b}
@media(max-width:991px){.focus-wide{grid-template-columns:1fr;grid-template-areas:"label" "title" "text" "more";padding:24px}}
.section-dev{background:linear-gradient(180deg,#edf5f8 0%,#fff 100%)}

/* Mittlere Breiten (Tablet quer, kleine Laptops): Überschrift kleiner, Hero wächst mit */
@media(min-width:992px) and (max-width:1279px){
  .masthead{height:auto;min-height:680px;padding:118px 0 56px}
  .opener{padding-top:0}
  .masthead h1{font-size:46px}
  .hero-lead{font-size:21px}
}
@media(min-width:992px) and (max-height:820px){
  .masthead{height:auto;min-height:0;padding:120px 0 64px}
  .opener{padding-top:0}
}