/* ==================================================
   STARTSEITE – EINSTIEG
   Mobile First
================================================== */

.entry-page {
  min-height: 100vh;
  background: #fff;
}

.entry-hero {
  padding: 72px 20px 56px;
}

.entry-shell {
  width: min(100%, 1280px);
  margin: 0 auto;
}


/* ==================================================
   HEAD
================================================== */

.entry-head {
  max-width: 760px;
  margin-bottom: 38px;
}

.entry-eyebrow {
  margin: 0 0 14px;

  color: #ff453a;

  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry-head h1 {
  margin: 0;

  color: #111;

  font-size: clamp(2.5rem, 8vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.entry-lead {
  margin: 20px 0 0;

  color: #6e6e73;

  font-size: 1.08rem;
  line-height: 1.5;
}


/* ==================================================
   CARDS – MOBIL UNTEREINANDER
================================================== */

.entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}


/* ==================================================
   CARD
================================================== */

.entry-card {
  position: relative;

  min-height: 520px;

  overflow: hidden;

  border-radius: 32px;

  color: #fff;
  text-decoration: none;

  background: #1d1d1f;
}

.entry-card__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}

.entry-card__shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.02) 25%,
      rgba(0,0,0,0.18) 55%,
      rgba(0,0,0,0.78) 100%
    );
}

.entry-card__content {
  position: absolute;
  inset: 0;

  z-index: 2;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;

  padding: 30px;
}

.entry-card__eyebrow {
  margin: 0 0 8px;

  color: rgba(255,255,255,0.8);

  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.entry-card h2 {
  margin: 0;

  font-size: clamp(2.2rem, 7vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.entry-card__content p:not(.entry-card__eyebrow) {
  max-width: 520px;
  margin: 16px 0 0;

  color: rgba(255,255,255,0.88);

  font-size: 1rem;
  line-height: 1.45;
}


/* ==================================================
   PFEIL
================================================== */

.entry-card__arrow {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;

  border-radius: 50%;

  background: #fff;
  color: #111;

  font-size: 1.6rem;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


/* ==================================================
   DESKTOP – NEBENEINANDER
================================================== */

@media (min-width: 800px) {

  .entry-hero {
    padding: 92px 32px 72px;
  }

  .entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .entry-card {
    min-height: 610px;
  }

  .entry-card__content {
    padding: 40px;
  }

}


/* ==================================================
   HOVER – NUR GERÄTE MIT ECHTEM HOVER
================================================== */

@media (hover: hover) {

  .entry-card:hover .entry-card__image {
    transform: scale(1.025);
  }

  .entry-card:hover .entry-card__arrow {
    transform: translateX(4px);
  }

}


/* ==================================================
   DARK MODE
================================================== */

@media (prefers-color-scheme: dark) {

  .entry-page {
    background: #111214;
  }

  .entry-head h1 {
    color: #f5f5f7;
  }

  .entry-lead {
    color: #a1a1a6;
  }

}