/* =====================================================================
   Dili Appartement - Startseite
   Alle Abstaende, Rasterdefinitionen und Schriftgroessen entsprechen
   den ausgelesenen Werten der bestehenden Kadence-Zeilen.
   Breakpoints wie im Original: 1024px und 767px.
   ===================================================================== */

/* ------------------------------------------------------------------ *
   Wiederkehrende Bausteine
 * ------------------------------------------------------------------ */

/* Grosse, blasse Uebertitel ("DILI APPARTEMENT", "JETZT BUCHEN").
   Auf weissem Grund bleibt der Originalton, auf den gruenlichen
   Abschnitten wird er eine Spur dunkler, sonst verschwindet er ganz. */
.apartment .kicker,
.sportwelt .kicker,
.booking .kicker,
.family .kicker,
.tabs-section .kicker { color: #e0e8e2; }

.kicker {
  margin: 0 0 -60px;
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: var(--palette-8);
}
@media all and (max-width: 767px) {
  .kicker { margin: 0 0 -40px; font-size: 55px; }
}

/* Grosse Abschnittsueberschrift */
.display {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 90px;
  line-height: 75px;
  color: var(--palette-3);
}
@media all and (max-width: 767px) {
  .display { font-size: 60px; line-height: 50px; }
}

.section-intro {
  max-width: 750px;
  margin-inline: auto;
}
.section-intro .display { padding-bottom: 20px; text-align: center; }
.section-intro p { padding-bottom: 20px; text-align: center; }

@media all and (max-width: 1024px) {
  .section-intro { max-width: 600px; }
}
@media all and (max-width: 767px) {
  .section-intro { max-width: none; }
}

/* Bilder der Bloecke haben im Original 5px Eckenradius */
.rounded-img,
.rounded-img img { border-radius: 5px; }

/* ------------------------------------------------------------------ *
   1. Hero
 * ------------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  background: #575757;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.86;
  background-image: url("../images/Dili_Appartement_Wide_Hero2.webp");
  background-size: cover;
  background-position: 46% 48%;
  background-attachment: scroll;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
}

/* Die Hero-Zeile laeuft in der Vorlage ueber die volle Breite, nicht im
   1290er Container. Deshalb steht der Text nah am linken Rand. */
.hero__inner {
  max-width: none;
  margin-inline: 0;
  padding-top: 215px;
  padding-bottom: 246px;
  padding-inline: var(--content-edge-padding);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-left: 6.5rem;
  text-align: left;
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 90px;
  line-height: 80px;
  color: #ffffff;
}

.hero__text {
  max-width: 60ch;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
}

@media all and (max-width: 1024px) {
  .hero__inner { padding-top: 150px; padding-bottom: 90px; }
  .hero__content { padding-left: 2.5rem; }
  .hero__title { font-size: 60px; line-height: 56px; }
}

@media all and (max-width: 767px) {
  .hero {
    background-image: url("../images/Dili_Appartement_Mobile_2.webp");
    background-size: cover;
    background-position: 35% 63%;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
  .hero__overlay { opacity: 0; }
  .hero__inner {
    max-width: 852px;
    margin-inline: auto;
    padding-top: 140px;
    padding-bottom: 72px;
    padding-inline: 0;
  }
  .hero__content { padding-left: 0; padding-inline: 20px; gap: 20px; }
  .hero__title { font-size: 46px; line-height: 44px; }
  .hero__text { font-size: 17px; }
  .hero__actions { gap: 12px; width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ *
   2. Einleitung und die zwei Saisonkarten
 * ------------------------------------------------------------------ */
.intro {
  padding-top: 80px;
  padding-bottom: 80px;
}

.season-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4rem;
  padding-top: 20px;
  padding-bottom: 20px;
}

.season-card__title { margin: 16px 0 12px; }
.season-card__text { margin-bottom: 20px; }

@media all and (max-width: 1024px) {
  .intro { padding: 60px 150px; }
  .season-cards { padding-inline: 0; }
  .season-card { text-align: center; }
  .season-card .btn { margin-inline: auto; }
}

@media all and (max-width: 767px) {
  .intro {
    max-width: none;
    padding: 56px 0;
  }

  .season-cards { row-gap: 44px; }
  .season-card { text-align: left; }
  .season-card .btn { margin-inline: 0; }
  .season-cards { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}

/* ------------------------------------------------------------------ *
   3. Appartement-Vorstellung
 * ------------------------------------------------------------------ */
.apartment {
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--palette-8);
}

.apartment__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-edge-padding);
}

.thumb-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  margin-top: 20px;
}

.apartment__text { padding-left: 80px; }
.apartment__text .display { margin-bottom: 24px; }
.apartment__text p { margin-bottom: 1.2em; }

@media all and (max-width: 1024px) {
  .apartment { padding-top: 80px; }
  .apartment__grid { grid-template-columns: minmax(0, 1fr); padding-inline: 150px; }
  .apartment__text { padding: 40px 20px 0; text-align: center; }
  .apartment__text .display { text-align: center; }
}

@media all and (max-width: 767px) {
  .apartment { padding-top: 40px; padding-bottom: 40px; }
  .apartment__grid { max-width: none; padding-inline: 20px; gap: 28px; }
  .apartment__text { padding: 0; text-align: left; }
  .apartment__text .display { text-align: left; }
  /* Drei kleine Bilder nebeneinander statt drei grosse untereinander:
     kuerzere Seite, gleiche Bildaussage. */
  .thumb-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; margin-top: 8px; }
}

/* ------------------------------------------------------------------ *
   4. Parallax-Banner
 * ------------------------------------------------------------------ */
/* background-attachment: fixed laesst den Browser bei jedem Scrollschritt
   neu zeichnen und ruckelt. Stattdessen liegt das Bild in einer eigenen
   Ebene und wird per transform verschoben: das laeuft auf der GPU. */
.parallax {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--palette-5);
}

.parallax__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  bottom: -12%;
  z-index: -2;
  background-image: url("../images/Dili_Appartement_Paralax.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
}

.parallax__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background: linear-gradient(230deg, var(--palette-3) 0%, var(--palette-3) 100%);
  mix-blend-mode: normal;
}

.parallax__grid {
  display: grid;
  grid-template-columns:
    minmax(0, calc(60% - (var(--kb-row-gutter-md) / 2)))
    minmax(0, calc(40% - (var(--kb-row-gutter-md) / 2)));
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-edge-padding);
}

.parallax .display {
  padding-bottom: 5px;
  text-align: left;
  color: #ffffff;
}
.parallax p {
  padding-right: 175px;
  padding-bottom: 10px;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .parallax__bg { transform: none !important; }
}

@media all and (max-width: 1024px) {
  .parallax__grid { grid-template-columns: minmax(0, 1fr); }
  .parallax__text { padding-inline: 150px; }
  .parallax .display { font-size: 40px; line-height: 48px; text-align: center; }
  .parallax p { padding-inline: 0; text-align: center; }
  .parallax .btn { margin-inline: auto; display: flex; }
}

@media all and (max-width: 767px) {
  .parallax {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .parallax__grid { max-width: none; padding-inline: 20px; }
  .parallax__text { padding-inline: 0; }
  .parallax .display { padding-inline: 20px; font-size: 60px; line-height: 50px; }
  .parallax p { padding-inline: var(--kb-spacing-xxs); }
}

/* ------------------------------------------------------------------ *
   5. Salzburger Sportwelt Card
 * ------------------------------------------------------------------ */
.sportwelt {
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--palette-8);
}

.sportwelt__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-edge-padding);
}

.sportwelt__text { padding-left: 0; }
.sportwelt__text .display { margin-bottom: 24px; }
.sportwelt__list {
  margin: 0 0 28px;
  padding-left: 1.2em;
}
.sportwelt__list li { margin-bottom: 6px; }

@media all and (max-width: 1024px) {
  .sportwelt { padding-top: 80px; }
  .sportwelt__grid { grid-template-columns: minmax(0, 1fr); padding-inline: 150px; }
  .sportwelt__text { padding: 40px 20px 0; text-align: center; }
  .sportwelt__text .display { text-align: center; }
  .sportwelt__list { text-align: left; display: inline-block; }
}

@media all and (max-width: 767px) {
  .sportwelt { padding-top: 40px; padding-bottom: 40px; }
  .sportwelt__grid { max-width: none; padding-inline: 20px; gap: 28px; }
  .sportwelt__text { padding: 0; text-align: left; }
  .sportwelt__text .display { text-align: left; }
  .sportwelt__list { display: block; }
}

/* ------------------------------------------------------------------ *
   6. Galerie (Fluid-Carousel)
 * ------------------------------------------------------------------ */
.gallery {
  padding-top: var(--kb-spacing-sm);
  padding-bottom: var(--kb-spacing-sm);
  overflow: visible;
}

.gallery__track {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.gallery__item {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.gallery__item a { display: block; }

.gallery__item img {
  height: 400px;
  width: auto;
  max-width: none;
  border-radius: 1px;
  object-fit: cover;
}

@media all and (max-width: 767px) {
  .gallery__item img { height: 300px; }
}

/* ------------------------------------------------------------------ *
   7. Anfrageformular
 * ------------------------------------------------------------------ */
.booking {
  margin-top: -100px;
  padding-top: 100px;
  padding-bottom: 80px;
  background: var(--palette-8);
}

.booking__inner {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-edge-padding);
}

.booking .kicker { margin-top: -30px; margin-bottom: -50px; }

.booking__form { padding-top: 25px; }

@media all and (max-width: 1024px) {
  .booking__inner { padding-inline: 150px; }
}

@media all and (max-width: 767px) {
  .booking {
    padding-top: 80px;
    padding-bottom: 40px;
  }
  .booking__inner { max-width: none; padding-inline: 20px; }
  .booking .kicker { margin-top: 0; margin-bottom: -40px; }
}