/* ============================================================
   Datei:        assets/css/startseite/hero.css
   Seite:        Startseite (index.html)
   Zweck:        Hero-Bereich: Titel, Untertitel und Buttons
   Abhängig von: assets/css/shared/variablen.css, assets/css/shared/button.css
   Genutzt von:  index.html
   ============================================================ */

/* --- 1. Layout --- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 9vw, 7rem) var(--abstand-5);
}

.hero__innen {
  display: grid;
  gap: var(--abstand-4);
}

/* --- 2. Typografie --- */
.hero__rolle {
  color: var(--akzent-1);
  font-family: var(--schrift-mono);
  font-size: var(--schrift-klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__titel {
  max-width: 16ch;
  font-size: clamp(2.4rem, 1.3rem + 5vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--farbe-text);
  background: linear-gradient(120deg, var(--farbe-text) 35%, var(--akzent-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__untertitel {
  max-width: 55ch;
  color: var(--farbe-text-gedaempft);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
}