/*
  Shared component layer for repeated Apart Alpinea page patterns.
  Page-specific variants should extend these tokens instead of duplicating inline rules.
*/

:root {
  --aa-container-page: var(--container);
  --aa-radius-panel: 20px;
  --aa-hero-panel-width-mobile: 350px;
  --aa-hero-panel-padding-mobile: 14px 14px 13px;
  --aa-hero-panel-border: 1px solid rgba(255, 252, 247, 0.38);
  --aa-hero-panel-bg: rgba(255, 253, 248, 0.18);
  --aa-hero-panel-shadow: 0 12px 30px rgba(28, 42, 52, 0.08);
  --aa-hero-eyebrow-mobile: 12.48px;
  --aa-hero-title-mobile: 43.2px;
  --aa-breakpoint-mobile: 760px;
}

.aa-container {
  width: var(--aa-container-page);
  margin-inline: auto;
}

.aa-section {
  padding-block: clamp(72px, 8vw, 132px);
}

.aa-grid {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
}

.aa-card {
  border-radius: var(--aa-radius-panel);
  box-shadow: var(--shadow-card);
}

@media (max-width: 760px) {
  .legal-page .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/assets/images/hero-startseite.webp") center center / cover no-repeat !important;
  }

  .legal-page .hero::before {
    background: transparent !important;
  }

  .legal-page .hero-media::before {
    background-image: url("/assets/images/hero-startseite.webp") !important;
  }

  .legal-page .hero-media::after {
    background-image: url("/assets/images/apart-alpinea-winter-hero.jpg") !important;
  }

  .legal-page .hero .hero-content.hero-copy {
    width: min(calc(100% - 36px), var(--aa-hero-panel-width-mobile)) !important;
    max-width: var(--aa-hero-panel-width-mobile) !important;
    margin: 0 auto !important;
    padding: var(--aa-hero-panel-padding-mobile) !important;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    border: var(--aa-hero-panel-border);
    border-radius: var(--aa-radius-panel);
    background: var(--aa-hero-panel-bg) !important;
    box-shadow: var(--aa-hero-panel-shadow);
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
  }

  .legal-page .hero .hero-content.hero-copy .eyebrow {
    font-size: var(--aa-hero-eyebrow-mobile) !important;
  }

  .legal-page .hero .hero-content.hero-copy h1 {
    font-size: var(--aa-hero-title-mobile) !important;
  }
}

/* Legal Desktop-Hero ab 640px */
@media (min-width: 640px) and (max-width: 959px) {
  body.legal-page .hero .hero-content.hero-copy {
    position: absolute !important;
    left: 70px !important;
    right: auto !important;
    top: 340px !important;
    z-index: 2;
    justify-self: auto;
    width: min(620px, calc(100% - 140px)) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
    color: #fffaf1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.legal-page .hero .hero-content.hero-copy h1 {
    font-size: clamp(4.6rem, 9vw, 6.8rem) !important;
    line-height: 0.9 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
  }

  body.legal-page .hero .hero-content.hero-copy > p {
    max-width: 620px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  body.legal-page .hero .hero-content.hero-copy .eyebrow {
    justify-content: flex-start;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}


/* Apart Alpinea contact link hover states */
.contact-item a,
.booking-info-list a,
.contact-line,
.legal-section a,
.mobile-contact-row,
.alpine-footer a.alpine-footer-contact-row {
  transition: color 0.18s ease, transform 0.18s ease, text-decoration-color 0.18s ease;
}

.contact-item a:hover,
.booking-info-list a:hover,
.contact-line:hover,
.legal-section a:hover,
.mobile-contact-row:hover,
.alpine-footer a.alpine-footer-contact-row:hover {
  color: var(--footer-green-dark, var(--green-900, #2e5366));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.contact-line:hover,
.mobile-contact-row:hover,
.alpine-footer a.alpine-footer-contact-row:hover {
  transform: translateX(2px);
}

.contact-line:hover svg,
.mobile-contact-row:hover svg,
.alpine-footer a.alpine-footer-contact-row:hover svg {
  color: var(--footer-green-dark, var(--green-900, #2e5366));
}

.contact-item:has(a:hover) svg {
  stroke: var(--green-900, #2e5366);
}

/* AA logo mountain silhouette removal */
.brand-mark,
.alpine-footer-logo > svg {
  display: none !important;
}