/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative;
  padding-top: 100px; padding-bottom: 60px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  position: relative; z-index: 1;
}
.hero-text .eyebrow { margin-bottom: 12px }
.hero-text h1 { font-size: clamp(1.9rem, 4.5vw, 3rem) }
.hero-text h1 span { color: var(--green-light) }
.hero-text p {
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  color: var(--text-dim);
  max-width: 440px;
  margin-bottom: 36px;
  line-height: 1.7;
}
.hero-img {
  position: relative;
  display: flex; justify-content: center;
}
.hero-fan {
  position: relative; width: 100%; max-width: 600px; z-index: 1;
}
.hero-fan picture {
  display: block;
  animation: fan-fade 14s infinite;
}
.hero-fan picture img { width: 100%; height: auto }
.hero-fan > :first-child { position: relative }
.hero-fan > :last-child {
  position: absolute; top: 0; left: 0; width: 100%;
  animation-delay: -7s;
}
@keyframes fan-fade {
  0%, 35.7%  { opacity: 1 }
  50%, 85.7% { opacity: 0 }
  100%       { opacity: 1 }
}
.hero-img::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 110%; height: 110%; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,175,80,0.28) 0%, rgba(76,175,80,0.08) 50%, transparent 75%);
  filter: blur(30px);
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center }
  .hero-text p { margin-left: auto; margin-right: auto }
  .hero-img { order: -1 }
  .hero-fan { max-width: 280px }
}

/* ===== STATS ===== */
.stats {
  border-top: 1px solid var(--text-faint);
  border-bottom: 1px solid var(--text-faint);
  padding: clamp(40px, 6vh, 72px) 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center }
.stat-num {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700; color: var(--green-light);
  line-height: 1; margin-bottom: 6px;
}
.stat-lbl { font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.05em; text-transform: uppercase }
@media (max-width: 540px) { .stats-grid { grid-template-columns: 1fr; gap: 32px } }

/* ===== ERFAHRUNG ===== */
.erfahrung-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.erfahrung-text p { color: var(--text-dim); font-size: 1rem; margin-bottom: 16px }
.erfahrung-text p:last-of-type { margin-bottom: 28px }
.erfahrung-img { display: flex; justify-content: center; position: relative }
.erfahrung-img img {
  width: 100%; max-width: 340px; height: auto;
  position: relative; z-index: 1;
}
.erfahrung-img::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 110%; height: 110%; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,175,80,0.28) 0%, rgba(76,175,80,0.08) 50%, transparent 75%);
  filter: blur(30px);
}
@media (max-width: 720px) {
  .erfahrung-grid { grid-template-columns: 1fr }
  .erfahrung-img { order: -1; margin-bottom: 20px }
  .erfahrung-img img { max-width: 240px }
}

/* ===== TECHNIK ===== */
.technik {
  background: var(--bg-raised);
  border-top: 1px solid var(--text-faint);
  border-bottom: 1px solid var(--text-faint);
}
.technik-intro { color: var(--text-dim); font-size: 1rem; max-width: 600px; margin-bottom: clamp(36px, 5vh, 56px) }
.compare-grid { display: flex; flex-direction: column; gap: 16px }
.compare-item {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--text-faint); border-radius: 8px; overflow: hidden;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.compare-item:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 8px 30px rgba(76,175,80,0.12);
}
.compare-risk, .compare-solution { padding: clamp(20px, 3vw, 32px) }
.compare-risk { background: rgba(255,255,255,0.03) }
.compare-solution {
  background: rgba(76,175,80,0.06);
  transition: background-color 0.3s;
}
.compare-item:hover .compare-solution { background: rgba(76,175,80,0.1) }
.compare-label {
  display: inline-block; font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px; margin-bottom: 8px;
  background: rgba(255,255,255,0.08); color: var(--text-dim);
}
.compare-label--green { background: rgba(76,175,80,0.15); color: var(--green-light) }
.compare-item h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px }
.compare-risk h3 { color: var(--text) }
.compare-solution h3 { color: var(--green-light) }
.compare-heading { display: flex; align-items: center; gap: 10px }
.compare-heading svg {
  width: 24px; height: 24px; flex-shrink: 0;
  color: var(--green); transition: transform 0.3s;
}
.compare-item:hover .compare-heading svg { transform: scale(1.1) }
.compare-item p { font-size: 0.9rem; color: var(--text-dim); margin: 0 }
@media (max-width: 640px) { .compare-item { grid-template-columns: 1fr } }
/* ===== TECHNIK FEATURES (Android-native, Komplettpaket) ===== */
.android-logo {
  display: inline-block; vertical-align: baseline;
  width: 0.85em; height: 0.85em; color: var(--green);
  position: relative; top: 0.05em;
}
.android-version {
  font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-dim);
  margin-bottom: 8px;
}
.android-version span {
  font-style: italic; color: var(--text-dim);
  font-size: 0.85em; opacity: 0.7;
}
.section-intro { color: var(--text-dim); font-size: 1rem; max-width: 600px; margin-bottom: clamp(36px, 5vh, 56px) }
.technik-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.tf-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: clamp(20px, 3vw, 28px);
  background: var(--bg-card); border: 1px solid var(--text-faint);
  border-radius: 8px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.tf-item:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 8px 24px rgba(76,175,80,0.12);
}
.tf-icon { width: 32px; height: 32px; flex-shrink: 0; color: var(--green) }
.tf-icon svg { width: 100%; height: 100% }
.tf-item h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; color: var(--green-light) }
.tf-item p { font-size: 0.9rem; color: var(--text-dim); margin: 0 }
@media (max-width: 720px) { .technik-features { grid-template-columns: 1fr } }

/* ===== FEATURES ===== */
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(36px, 5vh, 56px);
}
.feat {
  background: var(--bg-card);
  border: 1px solid var(--text-faint);
  border-top: 2px solid var(--green-dim);
  border-radius: 8px;
  padding: clamp(28px, 3vw, 36px);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.feat:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  border-top-color: var(--green);
  box-shadow: 0 8px 24px rgba(76,175,80,0.12);
}
.feat-icon {
  width: 40px; height: 40px;
  margin-bottom: 16px;
  color: var(--green);
}
.feat-icon svg { width: 100%; height: 100% }
.feat h3 {
  font-size: 1rem; font-weight: 600; margin-bottom: 10px;
  color: var(--green-light);
}
.feat p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6 }
@media (max-width: 800px) { .features-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 500px) { .features-grid { grid-template-columns: 1fr } }

/* ===== BEDIENUNG ===== */
.bedienung-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 100px); align-items: start;
}
.bedienung-text blockquote {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 600; font-style: italic;
  color: var(--text); line-height: 1.4;
  border-left: 3px solid var(--green);
  padding-left: 20px; margin-bottom: 24px;
}
.enterprise-icon {
  display: inline-block; vertical-align: middle;
  width: 0.8em; height: 1.68em; color: var(--green);
  margin-right: 0.15em;
  opacity: 0;
}
.bedienung-text p { color: var(--text-dim); font-size: 1rem; margin-bottom: 24px }
.service-list { list-style: none }
.service-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--text-faint);
  font-size: 1rem; font-weight: 500;
  display: flex; align-items: center; gap: 12px;
  transition: color 0.3s, padding-left 0.3s;
}
.service-list li:first-child { border-top: 1px solid var(--text-faint) }
.service-list li::before {
  content: '❯'; color: var(--green); flex-shrink: 0;
  font-size: 0.7em; line-height: 1; font-weight: 700;
}
.service-list li:hover { color: var(--green-light); padding-left: 6px }
@media (max-width: 720px) {
  .bedienung-grid { grid-template-columns: 1fr }
  .enterprise-icon { opacity: 1 }
}

/* ===== CONTACT TEASER ===== */
.contact { background: var(--bg-raised); border-top: 1px solid var(--text-faint) }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px) }
.contact-item { margin-bottom: 32px }
.contact-lbl {
  font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px;
}
.contact-val { font-size: 0.95rem }
.contact-val a { color: var(--text); border-bottom: 1px solid var(--text-faint) }
.contact-val a:hover { color: var(--green-light); border-color: var(--green) }
@media (max-width: 540px) { .contact-grid { grid-template-columns: 1fr } }

/*
 * ===== ENTERPRISE FLY-ANIMATION =====
 *
 * Star Trek Enterprise SVG flies across the stats section and "lands" at the
 * .enterprise-icon in the Bedienung blockquote. Scroll-triggered from JS.
 *
 * Flight path (computed dynamically in main.js):
 *   M startX startY         → right edge, stats center height
 *   L turnX startY          → horizontal flight across stats (right → grid left edge)
 *   C (turnX-300) startY    → cp1: extends past turn for smooth tangent (no corner)
 *     endX endY+250         → cp2: pulls curve well below landing (approach from below)
 *     endX endY             → endpoint: static .enterprise-icon center
 *
 * The path tangent at the endpoint is straight up (cp2 directly below endpoint),
 * so offset-rotate: auto 90deg yields 0° rotation at landing = upright SVG,
 * matching the static .enterprise-icon orientation.
 *
 * Landing sequence:
 *   1. Flying Enterprise decelerates along the last 10% of path (keyframes 68→100%)
 *   2. Width shrinks 72px→24px and opacity fades to 0 (cross-fade)
 *   3. At animationend: JS hides flying Enterprise (display:none)
 *   4. JS adds .landed class → static .enterprise-icon appears with glow + scale
 *
 * Mobile (<720px): fly animation disabled, static icon always visible.
 */

/* --- Flying Enterprise element (absolutely positioned, follows offset-path) --- */
.enterprise-fly {
  position: absolute;
  top: 0; left: 0;
  color: var(--green);
  width: 24px;                  /* base size, overridden by keyframes during flight */
  height: 50px;                 /* explicit height (SVG viewBox 200×420 → ratio 2.1) */
  pointer-events: none;
  z-index: 50;
  opacity: 0;                   /* invisible until .flying class triggers animation */
  offset-distance: 0%;
  offset-rotate: auto 90deg;
  offset-anchor: 50% 50%;    /* center follows the path */
  will-change: offset-distance, width, height;
  font-size: 0;                 /* eliminate inline SVG baseline gap */
  line-height: 0;               /* belt-and-suspenders for baseline gap */
}
.enterprise-fly svg { display: block; width: 100%; height: auto }

/* --- Flight animation: 4.5s total, linear base timing --- */
.enterprise-fly.flying {
  animation: enterprise-flight 4.5s linear forwards;
}
/*
 * Keyframes: width AND height animated explicitly (SVG viewBox 200×420 → ratio 2.1)
 * to ensure predictable dimensions at every point. offset-anchor: 50% 50% needs
 * stable element size to place the center correctly on the path.
 */
@keyframes enterprise-flight {
  /* Launch: full size, visible */
  0%   { offset-distance: 0%;   width: 72px; height: 151px; opacity: 1 }
  /* End of fast cruise phase: 90% of path covered in 68% of time */
  68%  { offset-distance: 90%;  width: 72px; height: 151px; opacity: 1 }
  /* Deceleration: gradually slowing, shrinking, fully visible */
  85%  { offset-distance: 97%;  width: 40px; height: 84px;  opacity: 1 }
  /* Almost landed: very close to endpoint, begin fade-out for cross-fade */
  95%  { offset-distance: 99.5%; width: 26px; height: 55px; opacity: 0.6 }
  /* Landed: fully faded out, static .enterprise-icon takes over */
  100% { offset-distance: 100%; width: 24px; height: 50px; opacity: 0 }
}

/* --- Static Enterprise icon in blockquote (hidden until landing) --- */
.enterprise-icon.landed {
  opacity: 1;
  animation: icon-land 1.2s ease-out;
}
/* Landing glow: icon fades in, scales down from 1.5x with green glow */
@keyframes icon-land {
  0%   { opacity: 0; filter: drop-shadow(0 0 14px var(--green)); transform: scale(1.5) }
  30%  { opacity: 1 }
  100% { filter: none; transform: scale(1) }
}

/* Mobile: no fly animation, static icon always visible */
@media (max-width: 720px) { .enterprise-fly { display: none } }