/* Hero-Feinschliff: kompaktere CTA-Karte und Markenrahmen */
.hero {
  position: relative;
  overflow: visible;
  background-image:
    linear-gradient(#37b4c8, #37b4c8),
    linear-gradient(#37b4c8, #37b4c8),
    linear-gradient(#37b4c8, #37b4c8),
    linear-gradient(#37b4c8, #37b4c8),
    linear-gradient(90deg, rgba(4,30,38,.08), rgba(4,30,38,.08)),
    url("../img/hero1-cropped.jpg");
  background-size:
    220px 28px,
    28px 220px,
    220px 28px,
    28px 220px,
    cover,
    cover;
  background-position:
    top right,
    top right,
    bottom left,
    bottom left,
    center,
    center;
  background-repeat: no-repeat;
}

.hero::before,
.hero::after {
  display: none;
}

.hero::before {
  top: 0;
  right: 0;
  border-top-width: 28px;
  border-right-width: 28px;
}

.hero::after {
  bottom: 0;
  left: 0;
  border-bottom-width: 28px;
  border-left-width: 28px;
}

.hero-inner {
  position: relative;
  z-index: 2;
  transform: translate(-90px, 105px);
}

.hero-card {
  width: min(500px, 100%);
  margin-right: 70px;
  transform: none;
  padding: clamp(26px, 4vw, 42px);
}

.hero-card .button-row {
  flex-wrap: nowrap;
  gap: 18px;
}

.hero-card .btn,
.hero-card .text-link {
  white-space: nowrap;
}

.hero-card h1 {
  font-size: clamp(2.35rem, 4.6vw, 3.75rem);
}

#vision {
  border-top: 0;
}

.nav-wrap nav a:hover,
.nav-wrap nav a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media (max-width: 800px) {
  .hero {
    background-image:
      linear-gradient(#37b4c8, #37b4c8),
      linear-gradient(#37b4c8, #37b4c8),
      linear-gradient(#37b4c8, #37b4c8),
      linear-gradient(#37b4c8, #37b4c8),
      linear-gradient(90deg, rgba(4,30,38,.08), rgba(4,30,38,.08)),
      url("../img/hero1-cropped.jpg");
    background-size:
      125px 16px,
      16px 125px,
      125px 16px,
      16px 125px,
      cover,
      cover;
    background-position:
      top right,
      top right,
      bottom left,
      bottom left,
      center,
      35% center;
    background-repeat: no-repeat;
  }
  .hero-card {
    width: min(400px, 92%);
    margin-right: auto;
    transform: none;
  }
  .hero-inner { transform: translate(0, 55px); }
  .hero-card .button-row { flex-wrap: wrap; }
  .hero::before,
  .hero::after { display: none; }
}

@media (max-width: 520px) {
  .hero {
    background-image:
      linear-gradient(90deg, rgba(4,30,38,.08), rgba(4,30,38,.08)),
      url("../img/hero1-cropped.jpg");
    background-size: cover, cover;
    background-position: center, 35% center;
  }
  .hero-inner { transform: translate(0, 35px); }
  .hero-card { width: 100%; transform: none; }
  .hero::before,
  .hero::after { display: none; }
}