/* app.css — App & Software Development (seiten­spezifisch)
   Gemeinsame Bausteine (bg-marquee, Basis-Reset, isometric-grid-Basis)
   in shared.css. app spiegelt die Szene horizontal (scaleX(-1)). */

html, body { overscroll-behavior: none; }
body {
  width: 100vw; height: 100vh;
  background-color: #000000;
  overflow: hidden;
  perspective: 1200px;
  display: flex; justify-content: center; align-items: center;
}

/* isometric-grid: gespiegelt + halbe Deckkraft */
.isometric-grid {
  transform: rotateX(60deg) rotateZ(-45deg) scaleX(-1);
  opacity: 0.5;
}

/* Marquee hier gegenläufig (30deg statt -30deg) */
.bg-marquee { rotate: 30deg; }

/* Überschrift rechts */
.hero-text {
  position: absolute;
  top: 12%; right: 6%;
  left: auto;
  z-index: 10;
  max-width: 44vw;
  pointer-events: none;
  transform: translateZ(100px);
  text-align: right;
}
.hero-text h1 {
  margin: 0 0 18px;
  font-size: clamp(2.3rem, 5.6vw, 5.2rem);
  line-height: .98; letter-spacing: -.025em; font-weight: 900;
  background: linear-gradient(90deg, #00ffff, #ff00ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-text p {
  margin: 0;
  font-size: clamp(.75rem, 1.05vw, 1rem);
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(190, 230, 255, .58); font-weight: 600;
  margin-right: -.28em;
}

/* ---------- Verkaufsargumente (links, max. 3 gleichzeitig) ---------- */
.pitch-stack {
  position: absolute;
  padding-left: 50px;
  top: 64%; left: 6%;
  z-index: 10;
  pointer-events: none;
  transform: translateZ(100px);
  width: 30vw;
  min-width: 260px;
  max-width: 400px;
  height: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.pitch-item {
  position: relative;
  padding-left: 16px;
  flex: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
}
.pitch-item.show { opacity: 1; transform: translateY(0); }
.pitch-item.fade { opacity: 0; transform: translateY(-8px); }
.pitch-item::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #00ffff, #ff00ff);
  box-shadow: 0 0 10px rgba(0, 200, 255, .55);
}
.pitch-tag {
  display: block;
  margin-bottom: 5px;
  font-size: clamp(.58rem, .72vw, .7rem);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00ffff, #ff00ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pitch-line {
  display: block;
  font-size: clamp(.82rem, 1.1vw, 1.02rem);
  line-height: 1.34;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(220, 240, 255, .9);
  text-shadow: 0 0 22px rgba(0, 180, 255, .22);
}

@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .15 } }

/* 3D-Szene per CSS horizontal gespiegelt */
#robot-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 5;
  transform: scaleX(-1);
  transform-origin: center center;
}

/* ---------- Mobile: Headline oben, Pitch unten, Animation 30% kleiner ---------- */
@media (max-width: 900px) {
  .hero-text { top: 3%; right: 6%; left: auto; max-width: 88vw; transform: translateZ(0); }
  .hero-text h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .pitch-stack {
    position: fixed; top: auto; bottom: 18px;
    left: 5%; right: 5%; width: auto; max-width: none;
    height: 188px; padding-left: 22px; padding-top: 10px; gap: 8px;
    transform: translateZ(0);
  }
  .pitch-line { font-size: .88rem; }
  /* Animation auf Mobile vollflächig (Spiegelung bleibt) */
  #robot-canvas { transform: scaleX(-1); }
}