/* assets/css/hero.css — Hero-Sektion: dunkles Geraete-Gehaeuse (wie
   Studio/Hub), Instrumenten-Panel rechts. Nutzt nur Tokens+base.css-
   Bausteine (.btn, .eyebrow). */

.hero { position: relative; background: #0f0e11; color: #f2efe9; padding: 88px 0 96px; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 100% at 30% 0%, rgba(245,165,36,.16), transparent 70%);
  pointer-events: none;
}
.hero::after {
  /* Filmperforation-Randmotiv - dezent, nur am linken Rand */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 26px;
  background-image: radial-gradient(circle, rgba(242,239,233,.18) 2.5px, transparent 2.6px);
  background-size: 26px 26px; background-position: 13px 13px;
  opacity: .5;
}
/* Zweiter, gedaempfter Gegenglow unten rechts - gibt der dunklen Flaeche
   mehr Tiefe, ohne vom Text abzulenken (deutlich schwaecher als der
   Haupt-Glow oben links). Atmet sehr langsam, wie ein Standby-Signal. */
.hero-glow-2 {
  position: absolute; right: -15%; bottom: -30%; width: 55%; height: 80%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(245,165,36,.09), transparent 72%);
  pointer-events: none; animation: hero-glow-breathe 7s ease-in-out infinite;
}
@keyframes hero-glow-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* Choreografierter Einstieg beim Laden - jedes Stueck kommt kurz nach
   dem vorherigen, statt dass alles gleichzeitig aufploppt. */
.hero h1 .h1-line { display: inline-block; }
.hero-kicker, .hero h1 .h1-line, .hero .lede, .hero-ctas, .panel { opacity: 0; animation: hero-rise .7s cubic-bezier(.16,1,.3,1) forwards; }
.hero-kicker { animation-delay: .05s; }
.hero h1 .h1-line:nth-child(1) { animation-delay: .15s; }
.hero h1 .h1-line:nth-child(2) { animation-delay: .25s; }
.hero h1 .h1-line:nth-child(3) { animation-delay: .35s; }
.hero .lede { animation-delay: .48s; }
.hero-ctas { animation-delay: .58s; }
.panel { animation-delay: .5s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .85fr; gap: 56px; align-items: start; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: #d8d4cb; background: rgba(242,239,233,.06); border: 1px solid rgba(242,239,233,.14);
  padding: 7px 14px 7px 11px; border-radius: 999px; margin-bottom: 26px;
}
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); flex: none; animation: hero-pulse 1.8s ease-in-out infinite; }
@keyframes hero-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.015em; font-weight: 800; margin-bottom: 22px; }
.hero h1 .accent { color: var(--accent); }
.hero p.lede { font-size: 17px; line-height: 1.6; color: #c7c3ba; max-width: 54ch; margin-bottom: 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-ghost { border-color: rgba(242,239,233,.24); color: #f2efe9; }
.hero .btn-ghost:hover { border-color: var(--accent); }

/* Instrumenten-Panel */
.panel { background: rgba(22, 21, 25, .72); border: 1px solid rgba(242, 239, 233, .12); border-radius: var(--r-lg); padding: 6px; backdrop-filter: blur(6px); }
.panel-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 14px; border-radius: 10px; transition: background .2s ease; }
.panel-row:hover { background: rgba(245, 165, 36, .06); }
.panel-row + .panel-row { border-top: 1px solid rgba(242,239,233,.08); }
.panel-row .stat { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent); flex: none; width: 30px; padding-top: 2px; }
.panel-row .body b { display: block; font-size: 14px; margin-bottom: 3px; }
.panel-row .body span { display: block; font-size: 13px; line-height: 1.5; color: #a8a49b; }
.panel-row .tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); padding: 2px 7px; border-radius: 5px; margin-bottom: 7px;
}
.panel-foot { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; color: #6f6b63; text-align: center; padding: 12px 0 6px; text-transform: uppercase; }