/* =========================================================
   Home / Front Page
   ========================================================= */

/* ---------- Hero Video ---------- */
.hero{
	position: relative;
	width: 100%;
	overflow:hidden;
}
.hero--video{
	height: 100vh; /* full browser height */
}
.hero__media{
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	object-fit: cover;
}
.hero__overlay{
	position:absolute;
	inset:0;
	background: rgba(0,0,0,.15); /* subtle dark overlay */
}
.hero__content{
	position: relative;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.home-hero-overlay{
	width: min(1100px, 92%);
	height: auto; /* requested placeholder height */
	/*border: 2px dashed rgba(255,255,255,.55);*/
	background: rgba(0,0,0,0);
}

/* ---------- Gallery placeholder section ---------- */
.placeholder--gallery{
	min-height: 320px;
}

/* ---------- Apartments grid ---------- */
.cards--apartments{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Split section (40/60) ---------- */
.split{
	display:grid;
	grid-template-columns: 2fr 3fr;
	gap: 28px;
	align-items:start;
}
.split__text p{ line-height:1.7; }

/* ---------- News grid ---------- */
.cards--news{
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Featured post section ---------- */
.featured{
	display:grid;
	grid-template-columns: 45% 55%;
	gap: 28px;
	align-items:start;
}
.featured__media img{
	width:100%;
	height:auto;
}

/* =========================================================
   Responsive — Home
   ========================================================= */

/* ---------- <= 1024px ---------- */
@media (max-width: 1024px){
	.cards--apartments{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cards--news{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.split{ grid-template-columns: 1fr; }
	.featured{ grid-template-columns: 1fr; }
}

/* ---------- <= 768px ---------- */
@media (max-width: 768px){
	.hero--video{ height: 80vh; } /* slightly smaller on phones; adjust anytime */
	.cards--apartments{ grid-template-columns: 1fr; }
	.cards--news{ grid-template-columns: 1fr; }
}


/* =========================================================
   Home Split Section (40/60) — equal height + button bottom
   ========================================================= */
.split{
  align-items: stretch; /* wichtig: beide Spalten gleich hoch */
}

.split__left{
  display:flex;
  flex-direction: column;
}

.split__text{
  /* nimmt den Platz ein */
}

.split__cta{
  margin-top: auto; /* Button immer unten */
  padding-top: 18px; /* TODO */
	padding-bottom: 20px;
}

/* =========================================================
   Right gallery slider
   ========================================================= */
.fa-gallery{
  width: 100%;
}

.fa-gallery__viewport{
  width: 100%;
  height: 520px; /* TODO: hier definierst du die "Section-Höhe" */
  overflow: hidden;
  position: relative;
}

.fa-gallery__track{
  height: 100%;
  display:flex;
  transform: translateX(0);
  transition: transform 600ms ease; /* Slide Animation */
}

.fa-gallery__slide{
  min-width: 100%;
  height: 100%;
}

.fa-gallery__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
	border-radius: 10px;
}

/* Dots: 6px Punkt, klickbarer Bereich 50px, Abstand 70px center-to-center
   -> Button 50px + gap 20px = 70px */
.fa-gallery__dots{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px; /* TODO */
  gap: 20px; /* ergibt 70px center spacing */
}

.fa-gallery__dot{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.fa-gallery__dot::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #636363; /* grau */
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.fa-gallery__dot.is-active{
  border: 1px solid #636363; /* 1px Border-Ring */
}

/* ---------- Responsive (Split + Gallery) ---------- */
@media (max-width: 1024px){
  .fa-gallery__viewport{
    height: 420px; /* TODO */
  }
}

@media (max-width: 768px){
  .fa-gallery__viewport{
    height: 320px; /* TODO */
  }
}

/* =========================================================
   Section Header (Titel links, Button rechts)
   ========================================================= */
.section-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 20px;
  margin-bottom: 22px; /* TODO */
}

.section-header__titles .section-title{
  margin: 0;
}

/* =========================================================
   Overview Gallery (6 Bilder) – Desktop Layout 3 Spalten
   ========================================================= */
.overview-gallery{
  --overview-gallery-height: 640px; /* TODO: frei anpassen */
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  height: var(--overview-gallery-height);
	margin-bottom: 50px;
}

.overview-gallery__col{
  height: 100%;
  display:grid;
  gap: 20px;
}

/* 3/2 – links und rechts */
.overview-gallery__col--a,
.overview-gallery__col--c{
  grid-template-rows: 3fr 2fr;
}

/* 2/3 – Mitte */
.overview-gallery__col--b{
  grid-template-rows: 2fr 3fr;
}

.overview-gallery__item{
  width:100%;
  height:100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  display:block;
}

.overview-gallery__item img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* wichtig: kein Verzerren, nur Cropping */
  display:block;
}

/* =========================================================
   Lightbox
   ========================================================= */
.fa-lightbox{
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.fa-lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.70);
}

.fa-lightbox__dialog{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

.fa-lightbox__img{
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  border-radius: 10px;
}

.fa-lightbox__close{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.9);
  cursor:pointer;
  font-size: 28px;
  line-height: 44px;
}

.fa-lightbox__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.9);
  cursor:pointer;
  font-size: 34px;
  line-height: 52px;
}

.fa-lightbox__nav--prev{ left: 18px; }
.fa-lightbox__nav--next{ right: 18px; }

.fa-lightbox__counter{
  position:absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  font-size: 14px;
}

/* =========================================================
   Responsive – Gallery
   ========================================================= */

/* <=1024px: einfache Grid-Ansicht statt 3-Spalten Speziallayout */
@media (max-width: 1024px){
  .overview-gallery{
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .overview-gallery__col{ display: contents; }
  .overview-gallery__item{
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* <=768px: 1 Spalte */
@media (max-width: 768px){
  .section-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .overview-gallery{
    grid-template-columns: 1fr;
  }
  .overview-gallery__item{
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   Apartments Section Cards (Frontpage)
   ========================================================= */

.cards--apartments{
  /* grid bleibt wie gehabt */
  gap: 20px; /* TODO */
}

/* Gesamte Karte klickbar */
.apartment-card{
  border: 0;
  background: transparent;
}

.apartment-card__link{
  display:block;
}

/* Bild: quadratisch, oben bündig, 10px Radius */
.apartment-card__image{
  border-radius: 8px;
  overflow:hidden;
}

.apartment-card__link{
  position: relative; /* schafft Stacking-Context */
}

.apartment-card__image{
  position: relative;
  z-index: 1;
}

.apartment-card__panel{
  position: relative;
  z-index: 2; /* Panel über dem Bild */
}

.apartment-card__image img{
  width: 100%;
  aspect-ratio: 1 / 1;      /* quadratisch */
  object-fit: cover;        /* kein Verzerren */
  display:block;
}

/* Textbox: hellgrau, schmaler (links/rechts je 40px weniger), 10px Radius,
   überlappt Bild um 40px */
.apartment-card__panel{
  background: #efefef;         /* hellgrau (TODO) */
  border-radius: 7px;
  padding: 30px;
  width: calc(100% - 80px);    /* links/rechts je 40px weniger */
  margin: -50px auto 0;        /* 40px overlap */
	margin-bottom: 20px;
}

/* Top row: Titel links, Icons rechts */
.apartment-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
}

.apartment-card__title{
  margin: 0;
  line-height: 1.1;
  /* Schrift (Mencken) kommt global über h2-Regel */
	font-size: 24px;
}

.apartment-card__icons{
  display:flex;
  align-items:center;
  gap: 6px;
  flex: 0 0 auto;
}

.apartment-card__icon{
  width: 14px;   /* TODO */
  height: 18px;
	padding-top: 5px;
  display:block;
	opacity: 0.7;
}

.apartment-card__icon-more{
  font-size: 14px;
  font-weight: 700;
}

/* Preiszeile */
.apartment-card__price{
  margin-top: 12px;
  display:flex;
  align-items:baseline;
  gap: 10px;
}

.apartment-card__price strong{
  font-size: 16px; /* TODO */
  font-weight: 800;
	color: #707070;
}

.apartment-card__price span{
  font-size: 12px; /* TODO */
  font-weight: 400;
	color: #707070;
}

/* Faktenzeile mit senkrechtem Trenner */
.apartment-card__facts{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 5px;
  flex-wrap: wrap;
	color: #707070;
	font-size: 12px;
}

.apartment-card__divider{
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,.35);
}

/* =========================================================
   Responsive — Apartments
   ========================================================= */

@media (max-width: 1024px){
  .apartment-card__panel{
    width: calc(100% - 50px); /* TODO */
    margin-top: -30px;        /* TODO */
  }
}

@media (max-width: 768px){
  .apartment-card__panel{
    width: calc(100% - 30px); /* TODO */
    margin-top: -24px;        /* TODO */
  }
  .apartment-card__price strong{ font-size: 18px; }
}

/* =========================================================
   Frontpage Links Accordion
   ========================================================= */
.section--links .section-title{
  margin-bottom: 16px;
}

.links-accordion{
  border-top: 1px solid rgba(0,0,0,.12);
}

.links-acc-item{
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.links-acc-head{
  width:100%;
  background: transparent;
  border:0;
  padding: 18px 0;
	padding-left: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

.links-acc-title{
  font-size: 16px;
  font-weight: 600;
	color: #454545;
}

.links-acc-arrow{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: center / 16px 16px no-repeat url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/chevron-down.svg");
  transition: transform 200ms ease;
}

.links-acc-item.is-open .links-acc-arrow{
  transform: rotate(180deg);
}

.links-acc-body{
  padding: 0 0 18px 30px;
}
.links-acc-body a{
  color: #454545;
	text-decoration: underline;
}


@media (max-width: 768px){
  .home-hero-overlay{ display: none; }
}