.hero {
  padding-top: 24px;
  padding-bottom: 48px;
  position: relative;
}
.photo {
  position: relative;
  width: calc(100% - 56px);
  height: 560px;
  border-radius: 0 40px 40px 0;
  overflow: hidden;
}
.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.55) contrast(1.05);
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 32%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.42) 100%);
}
/* Überschrift und Panel liegen jetzt in derselben Spalte (statt zwei
   unabhängig positionierten Blöcken) — dadurch teilen sie eine
   Kante, können sich nicht mehr überlappen und die Überschrift rückt
   näher an das Panel statt oben isoliert zu stehen. */
.hero-copy-wrap {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero-copy {
  box-sizing: border-box;
  max-width: calc(56px + 46%);
  padding: 0 40px 0 56px;
}
h1 {
  color: #fff;
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
/* остров: панель прижата к левому и нижнему краю фото — скруглён
   только тот угол, что не касается ни одного края (верхний правый).
   Ширина и левый паддинг совпадают с .hero-copy, поэтому текст
   заголовка и текст панели стоят на одной вертикальной линии. */
.panel {
  box-sizing: border-box;
  width: calc(56px + 46%);
  background: var(--accent);
  color: #fff;
  padding: 28px 40px 28px 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-radius: 0 40px 0 0;
}
.panel p {
  font-size: var(--fs-lead);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center;
  max-width: 100%;
  padding: 13px 22px; border-radius: 999px;
  font: 600 15px/1.3 Manrope, sans-serif;
  text-decoration: none; border: 0;
  white-space: normal; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-light { background: #fff; color: var(--accent); }
.btn-dark { background: #111; color: #fff; width: 100%; justify-content: center; padding: 14px 20px; }

@media (max-width: 860px) {
  .hero { padding-bottom: 24px; }
  .photo { width: 100%; height: 460px; border-radius: 0 28px 28px 0; }
  /* Wie am Desktop: Überschrift + Panel als eine Einheit (Flex-Spalte)
     über dem Foto, unten ausgerichtet – dadurch stehen sie mit
     minimalem Abstand direkt übereinander statt weit auseinander. */
  .hero-copy-wrap {
    position: absolute;
    z-index: 2;
    left: 0; right: 0; bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hero-copy { max-width: 100%; padding: 0 20px; }
  .panel {
    width: auto;
    margin: 0 20px;
    padding: 22px 20px;
    border-radius: 20px;
  }
  .panel p { font-size: 15px; }
}