/* ==========================================================================
   MELLINOR Lernplattform – Startseite
   Nur das, was es ausschließlich auf der Startseite gibt: Hero-Anordnung.
   Alles andere stammt aus layout.css und components.css.
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  overflow: hidden;
}

/* Ruhiger Farbschimmer statt Glow-Effekten */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 22rem at 88% -10%, var(--glow-sakura), transparent 70%),
    radial-gradient(34rem 20rem at 0% 110%, var(--glow-cyan), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.hero__content {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.hero__title {
  font-size: var(--text-3xl);
  font-weight: 600;
}

.hero__title span {
  display: block;
}

.hero__title .is-accent {
  color: var(--color-sakura);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Weiterlernen-Panel ------------------------------------------------------ */

.resume {
  gap: var(--space-4);
  padding: var(--space-6);
}

.resume__title {
  font-size: var(--text-xl);
  padding-right: var(--space-6);
}

.resume__area {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.resume .btn {
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 640px) {
  .hero__actions,
  .hero__actions .btn {
    width: 100%;
  }
}

.resume__body {
  justify-items: start;
}

.resume__body .progress {
  justify-self: stretch;
}