/* =========================================================
   VERIFY CSS SYSTEM
   Datei: /assets/css/sections/hero.css

   INHALT
   01) Hero-Grundbereich
   02) Hero-Grid / Layout
   03) Hero-Copy
   04) Eyebrow / Live Pills
   05) Hero-Aktionen
   06) Signal-Liste
   07) Responsive (Hero only)

   HINWEIS
   Diese Datei enthält nur die textliche / strukturelle Hero-Sektion.
   Das visuelle Orbit-/Badge-System liegt separat.
   ========================================================= */


/* =========================================================
   01) HERO-GRUNDBEREICH
   Oberer Hauptbereich der Startseite
   ========================================================= */

.verify-hero{
  padding-top:clamp(10px, 3vw, 24px);
}

.hero-panel{
  padding:clamp(22px, 4vw, 42px);
  min-height:min(82vh, 860px);
}


/* =========================================================
   02) HERO-GRID / LAYOUT
   Zweispaltiger Aufbau für Copy + Visual
   ========================================================= */

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(340px, .92fr);
  gap:clamp(28px, 4vw, 52px);
  align-items:center;
  min-height:min(72vh, 760px);
}


/* =========================================================
   03) HERO-COPY
   Textblock, Titel, Introtext
   ========================================================= */

.hero-copy{
  max-width:780px;
}

.hero-title{
  max-width:12ch;
  margin-bottom:18px;
  text-wrap:balance;
}

.hero-text{
  max-width:62ch;
  font-size:clamp(1.02rem, 1.35vw, 1.16rem);
  color:var(--muted);
  margin-bottom:28px;
}


/* =========================================================
   04) EYEBROW / LIVE PILLS
   Kleine Status- und Eyebrow-Elemente über dem Titel
   ========================================================= */

.eyebrow-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}

.eyebrow-pill,
.live-pill{
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  font-size:.76rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:
    0 0 0 0 rgba(118,255,183,.55),
    0 0 18px rgba(118,255,183,.8);
  animation:verifyPulse 2s infinite;
}


/* =========================================================
   05) HERO-AKTIONEN
   CTA-Zeile unter dem Introtext
   ========================================================= */

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:26px;
}


/* =========================================================
   06) SIGNAL-LISTE
   Kleine Trust-/Feature-Chips unter den Buttons
   ========================================================= */

.signal-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0;
  margin:0;
  list-style:none;
}

.signal-list li{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(126,243,255,.18);
  background:rgba(126,243,255,.08);
  color:#dffbff;
  font-size:.92rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}


/* =========================================================
   07) RESPONSIVE (HERO ONLY)
   Nur Hero-spezifische Breakpoints
   ========================================================= */

@media (max-width: 1160px){
  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-copy{
    max-width:none;
  }

  .hero-title{
    max-width:14ch;
  }
}

@media (max-width: 760px){
  .hero-panel{
    padding:18px;
  }

  .hero-grid{
    gap:20px;
    min-height:auto;
  }

  .hero-title{
    max-width:none;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .btn{
    width:100%;
  }

  .signal-list{
    gap:10px;
  }

  .signal-list li{
    width:100%;
    justify-content:flex-start;
  }
}