/* Entwurf: kurze Einführung zwischen Hero und Kreis. */
.entree-section {
  background: #fff;
  scroll-margin-top: 20px;
}

.entree-inner {
  display: grid;
  /* Die gesetzten Titelzeilen bestimmen die Mindestbreite der linken Spalte. */
  grid-template-columns: minmax(max-content, 1.08fr) minmax(0, 1fr);
  align-items: start;
  gap: 80px;
  padding-block: 80px 84px;
}

.entree-heading .section-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: #53594d;
}

.entree-heading .section-eyebrow::before {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e4ff1a;
  box-shadow: 0 0 0 1px #becd3c inset;
}

.entree-heading h2 {
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: initial;
}

.entree-copy {
  padding-top: 43px;
  max-width: 580px;
}

.entree-copy p {
  margin: 0 0 20px;
  color: #53594d;
  font-size: var(--type-body);
  line-height: 1.65;
}

.entree-copy .entree-lead {
  color: #17181a;
  font-size: var(--type-lead);
  line-height: 1.5;
}

.entree-copy p a {
  color: #17181a;
  text-decoration: underline;
  text-decoration-color: #bfc5b7;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.entree-copy p a:hover {
  text-decoration-color: #17181a;
}

.entree-about {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 4px;
  font-size: var(--type-body);
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .entree-inner { gap: 40px; }
  /* Bei 800 px an die mobile Schrift anschließen, bis 900 px stetig auf 38 px. */
  .entree-heading h2 { font-size: clamp(38px, calc(74px - 4vw), 42px); }
}

@media (max-width: 800px) {
  .entree-inner {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 56px 60px;
  }
  .entree-heading h2 { font-size: clamp(30px, 5.4vw, 42px); }
  .entree-heading h2 br { display: none; }
  .entree-copy { padding-top: 0; max-width: 620px; }
  .entree-heading .section-eyebrow { margin-bottom: 18px; }
}

@media (max-width: 380px) {
  .entree-about { gap: 10px; font-size: 16px; }
}