/* ============================================
   HERO – Full-width image + overlay
   Vertikal zentriert, subtiler Schatten-Backdrop
   ============================================ */

.ap-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;           /* ← Vertikal zentriert */
  overflow: hidden;
}


/* ============================================
   BACKGROUND IMAGE + GRADIENT
   ============================================ */
.ap-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ap-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position wird per Inline-Style pro Seite gesetzt */
}

.ap-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, 0.05) 0%,
    rgba(20, 20, 20, 0.10) 55%,
    rgba(20, 20, 20, 0.15) 100%
  );
}


/* ============================================
   BREADCRUMB
   ============================================ */
.ap-hero__breadcrumb {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  padding: var(--ap-space-6) 0;
  font-size: var(--ap-text-xs);
}

.ap-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.ap-hero__breadcrumb a:hover,
.ap-hero__breadcrumb a:focus { color: var(--ap-white); }

.ap-hero__breadcrumb span[aria-hidden] {
  margin: 0 var(--ap-space-2);
  color: rgba(255, 255, 255, 0.3);
}

.ap-hero__breadcrumb .current {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--ap-weight-semibold);
}


/* ============================================
   CONTENT – zentriert
   ============================================ */
.ap-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--ap-space-20) 0;
}


/* ============================================
   TEXT WRAP – subtiler Shadow-Backdrop
   Großer, weicher Schatten hinter dem Textblock
   für bessere Lesbarkeit auf schwierigen Bildern
   ============================================ */
.ap-hero__text-wrap {
  max-width: 700px;
  padding: var(--ap-space-10) var(--ap-space-12);
  border-radius: var(--ap-radius-md);
  background: radial-gradient(
    ellipse at 10% 80%,
    rgba(255, 255, 255, 0.55) 10%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 80%
  );
}


/* ============================================
   TEXT ELEMENTS – Defaults (überschreibbar per Inline-Style)
   ============================================ */
.ap-hero__kicker {
  color: var(--ap-red-dark);
  margin-bottom: var(--ap-space-5);
  opacity: 0.9;
}

.ap-hero__title {
  font-family: var(--ap-font-display) !important;
  color: var(--ap-white);
  max-width: 680px;
  margin-bottom: 0;
}

.ap-hero__lead {
  color: #9b7345;
  max-width: 600px;
  margin-top: var(--ap-space-6);
  margin-bottom: 0;
  font-size: var(--ap-text-base);
  line-height: var(--ap-lh-relaxed);
}


/* ============================================
   HOMEPAGE HERO – größer
   ============================================ */
.ap-hero--home {
  min-height: 420px;
}

.ap-hero--home .ap-hero__cta {
  margin-top: var(--ap-space-10);
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
  .ap-hero__text-wrap {
    padding: var(--ap-space-6) var(--ap-space-4);
  }
}

@media (min-width: 640px) {
  .ap-hero { min-height: 360px; }
  .ap-hero--home { min-height: 460px; }
}

@media (min-width: 960px) {
  .ap-hero { min-height: 420px; }
  .ap-hero--home { min-height: 520px; }
}

@media (min-width: 1200px) {
  .ap-hero { min-height: 440px; }
  .ap-hero--home { min-height: 560px; }
}