/* ============================================
   VIDEO HERO — Vollbild Video-Hintergrund
   ============================================ */

.video-hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--black);
}

.video-hero-section video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.video-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: var(--overlay-op, 0);
  z-index: 2;
  pointer-events: none;
}

.video-hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0.08) 100%
  );
  z-index: 1;
}

.video-hero-name {
  position: absolute;
  bottom: clamp(40px, 6vh, 80px);
  left: 32px;
  z-index: 2;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0; /* JS setzt korrekte Größe via fitName() bevor Animation startet */
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.01em;
  white-space: nowrap;
  animation: videoHeroNameIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  animation-play-state: paused;
}

@keyframes videoHeroNameIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}


@media (max-width: 600px) {
  .video-hero-name {
    bottom: 36px;
  }

}

/* ============================================
   HERO — Startseite
   ============================================ */

.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - var(--nav-height));
  overflow: hidden;
}

/* Linke Spalte: Text */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--white);
  padding: clamp(28px, 5vh, 60px) clamp(64px, 10vw, 128px) clamp(32px, 6vh, 80px) clamp(32px, 5.5vw, 72px);
  position: relative;
  overflow: hidden;
}

/* Rechte Spalte: Bild */
.hero-image {
  background: var(--hero-bg-right);
  position: relative;
  overflow: hidden;
}

.hero-image img {
  object-position: top center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenBurns 9s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-text-group {
  display: block;
  margin: 0 0 36px;
}

.hero-headline {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.1;
  margin-bottom: 36px;
  padding-bottom: 0.15em;
}


.hero-quote {
  font-family: var(--font-primary);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--gray-text);
  line-height: 1.4;
  margin-bottom: 36px;
  text-align: left;
  position: relative;
  z-index: 0;
  padding-left: 1em;
  padding-top: 1.2em;
}

.hero-quote::before {
  content: '\201C';
  position: absolute;
  left: -0.05em;
  top: -0.1em;
  font-size: 13em;
  font-style: normal;
  line-height: 0.75;
  z-index: -1;
  opacity: 0.55;
}

.hero-quote-bold { font-weight: 700; }
.hero-quote-light { font-weight: 400; }

.hero-content a[class*="btn"] {
  background: var(--white);
  color: var(--black);
  font-weight: 100;
  padding: 10px 28px;
  border: 2px solid transparent;
  border-image: var(--brand-gradient-linear) 1;
  transition: opacity 0.2s ease-in-out;
}

.hero-content a[class*="btn"]:hover {
  opacity: 0.75;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: clamp(16px, 3vh, 36px);
  left: clamp(32px, 5.5vw, 72px);
}

.hero-image ~ .hero-content .hero-scroll-indicator {
  left: auto;
  right: clamp(32px, 5.5vw, 72px);
}

.scroll-arrow {
  font-size: 20px;
  color: var(--black);
  opacity: 0.6;
}

.hero-body {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--gray-text);
  line-height: var(--text-sm-line);
  margin-bottom: 32px;
}

/* Variante: Navy-Hintergrund links */
.hero-content--navy {
  background: var(--navy);
}

.hero-content--navy .hero-headline,
.hero-content--navy .hero-quote {
  color: var(--white);
}

@media (max-width: 900px) {
  .hero-section {
    grid-template-columns: 1fr;
    height: auto;
  }

  .hero-content {
    padding: 60px 40px;
    order: 2;
  }

  .hero-scroll-indicator { left: 40px; }

  .hero-image {
    order: 1;
    min-height: 300px;
  }

  /* Querformat-Bilder: links/rechts je 20% abschneiden, höher anzeigen */
  .hero-image--landscape {
    position: relative;
    min-height: 420px;
  }

  .hero-image--landscape img {
    animation: none;
    position: absolute;
    width: 142.86%; /* 100% / 0.7 — zeigt nur die mittleren 70% der Bildbreite */
    max-width: none;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    object-fit: cover;
    object-position: top center;
  }
}

@media (max-width: 900px) {
  .hero-scroll-indicator { display: none; }
}

@media (max-width: 600px) {
  .hero-content { padding: 48px 24px 64px; }
  .page-hero-full { padding: 20px 0 0; }
}

/* ============================================
   PAGE HERO — Vollbild mit Bild-Hintergrund
   ============================================ */

.page-hero-full {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: 120px 0 0;
  overflow: hidden;
}

.page-hero-full .page-hero-bg,
.promo-dark .promo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-full .page-hero-bg {
  object-position: top center;
}

.page-hero-full::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 63%, rgba(255,255,255,0) 73%, rgba(255,255,255,0.95) 81%, var(--white) 100%);
}

.page-hero-content,
.promo-dark-content {
  position: relative;
  z-index: 2;
}

.page-hero-content {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.page-hero-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 72px);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .page-hero-full { padding: 88px 0 0; min-height: 50vh; }
  .page-hero-content { padding: 0 24px; }
}

/* ============================================
   PROMO DARK — Vollbild Bild + Overlay
   ============================================ */

.promo-dark {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  overflow: hidden;
}

.promo-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.promo-dark-content {
  max-width: 680px;
  margin: 0 auto;
}

.promo-dark-label {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: 16px;
}

.promo-dark-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 52px);
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 24px;
}

.promo-dark-text {
  margin-bottom: 32px;
}

/* Full-height BG variant (Über mich Section 3) */
.promo-dark--fullbg {
  justify-content: center;
  text-align: left;
  min-height: calc(100vh - var(--nav-height));
}

.promo-content-wrap {
  width: 100%;
  max-width: var(--grid-max-width);
  padding: 0 40px;
}

.promo-dark--fullbg .promo-dark-content {
  max-width: 560px;
}

@media (max-width: 900px) {
  /* Default promo-dark: image stays as bg, just shrink padding */
  .promo-dark { padding: 48px 24px; }

  /* fullbg variant: image becomes block above text */
  .promo-dark--fullbg {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    min-height: auto;
  }

  .promo-dark--fullbg .promo-bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 60vw;
    max-height: 420px;
    object-fit: cover;
    object-position: center;
  }

  .promo-dark--fullbg::after {
    display: none;
  }

  .promo-content-wrap {
    background: var(--black);
    padding: 40px 24px;
    max-width: 100%;
  }

  .promo-dark--fullbg .promo-dark-content {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .promo-dark { padding: 48px 24px; }
}