/* Farben */
:root {
  --primary-color: #788e7a;
}

/* In deine css/style.css */
html { scroll-behavior: smooth; }

/* Navbar */
.navbar {
  background: transparent;
}

.navbar .navbar-toggler {
    position: absolute;
    top: 276px;
    right: 105px;
    z-index: 1051;
    border: 0;
    outline: none !important;
    background: #788e7a;
    padding: 1.5rem 1.65rem;
    border-radius: .5rem;}

.navbar .navbar-toggler .navbar-toggler-icon{
  background-image:none;
  width: 22px; height: 2px; background:#fff; position:relative; display:block;
}
.navbar .navbar-toggler .navbar-toggler-icon::before,
.navbar .navbar-toggler .navbar-toggler-icon::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff;
}
.navbar .navbar-toggler .navbar-toggler-icon::before{ top:-6px; }
.navbar .navbar-toggler .navbar-toggler-icon::after{ top:6px; }

/* Drawer Menu */

/* Drawer Menu – IMMER fixed, slide-in via transform */
#mobileMenu{
  position: fixed; top:0; left:0; height:100vh; width: 290px;
  background: var(--primary-color); color:#fff; z-index: 1050;
  padding: 84px 20px 24px; box-shadow: 8px 0 32px rgba(0,0,0,.25);
  transform: translateX(-110%);           /* Start: off-screen links */
  transition: transform .3s ease;
}

/* Wenn geöffnet (Bootstrap fügt .show hinzu) */
#mobileMenu.show{
  transform: translateX(0);
}

/* Während der Bootstrap-Animation (verhindert „Runterfahren“) */
#mobileMenu.collapsing{
  position: fixed; top:0; left:0; height:100vh !important; width:290px;
  padding: 84px 20px 24px;                /* Padding beibehalten */
  background: var(--primary-color); z-index:1050;
  box-shadow: 8px 0 32px rgba(0,0,0,.25);
  transform: translateX(-110%);           /* bleibt off-screen bis .show greift */
  transition: transform .3s ease;         /* wir animieren nur die X-Bewegung */
}

#mobileMenu a{ color:#fff; font-weight:600; display:block; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.15); }
#mobileMenu .close-drawer{
  position:absolute; top:16px; right:16px; color:#fff; font-size:1.6rem; line-height:1; opacity:.9; text-decoration:none;
}

/* Button im Drawer-Menü */
#mobileMenu .btn {
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  text-transform: uppercase;
}

/* Carousel */
.carousel-logo {
  position: absolute; right: 20px; top: 20px; z-index: 1020;
  background: rgba(255,255,255,.9);
  border-radius: 14px; padding: 5px 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.carousel-logo img { height: 200px; width: auto; display:block; }
.hero-carousel, .hero-carousel .carousel-item { height: 85vh; min-height: 520px; }
.hero-carousel .carousel-item > img{
  object-fit: cover; width:100%; height:100%;
  filter: brightness(.82);
}
.hero-caption{
  position:absolute; left: 50%; transform: translateX(-50%);
  bottom: 10vh; text-align:center; color:#fff; z-index: 1010;
  text-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.hero-caption h1{ font-weight:700; letter-spacing:.02em; }
.hero-caption p{ font-size:1.1rem; opacity:.95; }

/* Carousel Controls */
.carousel-control-prev, 
.carousel-control-next {
  width: 300px;
  height: 3000px;
  top: 50%;
  transform: translateY(-50%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-size: 50% 50%;
  background-color: #fff;              /* weißer Hintergrund */
  border-radius: 50%;                  /* rund */
  padding: 30px;                       /* etwas Abstand innen */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Pfeile in Primärfarbe #788e7a */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23788e7a' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0L6.66 1.41 3.58 4.5 6.66 7.59 5.25 9l-5-4.5 5-4.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23788e7a' viewBox='0 0 8 8'%3E%3Cpath d='M2.5 0L1.09 1.41 4.17 4.5 1.09 7.59 2.5 9l5-5-5-5z'/%3E%3C/svg%3E");
}




/* Buttons */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-primary:hover {
  background-color: #5f7261;
  border-color: #5f7261;
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Sections */
section { padding: 72px 0; }


/* ===== Projekt Section ===== */
.project-section{
  background: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%);
  border-top: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.project-title{
  position: relative;
  padding-bottom: .6rem;
}
.project-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:72px; height:4px;
  background: var(--primary-color);
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(120,142,122,.35);
}

/* Chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  padding:.4rem .6rem;
  border-radius: 999px;
  font-weight:600; font-size:.9rem;
}

/* Specs Bar */
.specs{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap:10px;
}
.spec{
  background:#fff;
  border-left:4px solid var(--primary-color);
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.spec strong{ display:block; font-size:1.05rem; }
.spec span{ color:#6b746d; font-size:.9rem; }

/* Feature Grid */
.feature-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
}
.feature-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius:14px;
  padding:16px 16px 18px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
}
.feature-card h5{ margin:.25rem 0 .35rem; }
.feature-card p{ margin:0; color:#6b746d; }
.feature-icon{
  width:42px;height:42px; border-radius:10px;
  background:#e7efe9; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-bottom:.4rem;
}

/* ===== Galerie ===== */
.gallery-grid .thumb{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #f2f4f2;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.gallery-grid .thumb::after{
  content:"";
  display:block;
  padding-bottom: 66.666%; /* 3:2 Ratio */
}
.gallery-grid .thumb img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .35s ease, filter .35s ease;
  filter: brightness(.96);
}
.gallery-grid .thumb:hover img{
  transform: scale(1.03);
  filter: brightness(.9);
}
.gallery-item{
  display:block; border-radius:12px; outline: none;
}

/* ===== Lightbox Modal ===== */
.lightbox-content{
  background: #000; border: none; border-radius: 12px; overflow: hidden;
  position: relative;
}
.lightbox-close{
  position:absolute; right:10px; top:8px; z-index: 5;
  color:#fff; opacity:.9; text-shadow:none; font-size:2rem;
}
.lightbox-stage{
  position: relative; background:#000;
  display:flex; align-items:center; justify-content:center;
  min-height: 60vh;
}
#lightboxImage{
  max-width: 100%; max-height: 75vh; width: auto; height: auto; display:block;
}
.lightbox-prev, .lightbox-next{
  position:absolute; top:50%; transform: translateY(-50%);
  background:#fff; color: var(--primary-color);
  width:44px; height:44px; border-radius:50%;
  border:none; outline:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  cursor:pointer; opacity:.95;
}
.lightbox-prev:hover, .lightbox-next:hover{ opacity:1; }
.lightbox-prev{ left:12px; }
.lightbox-next{ right:12px; }

.lightbox-caption{
  background: #0c0c0c; color:#dfe7e1;
  border-top: 1px solid rgba(255,255,255,.08);
}

.status {display:inline-block;padding:.25rem .6rem;border-radius:999px;font-weight:600;font-size:.85rem;}
.status.verfügbar{background:#e7f2ea;color:#2f6b3a;border:1px solid #b9d7c1; margin-top:10px;}
.status.reserviert{background:#fff5e5;color:#8a5d05;border:1px solid #f0d29b; margin-top:10px;}
.status.verkauft{background:#f4e7e7;color:#7a1f1f;border:1px solid #e0bcbc; margin-top:10px;}


/* Carousel – volle Spaltenbreite + Ratio */
.pds-carousel{
  position: relative;
  display: block;
  width: 100%;            /* -> füllt die col-lg-6 komplett */
  max-width: none;        /* falls irgendwo global eine max-width greift */
  overflow: hidden;
  border-radius: 14px;
}

.pds-carousel__viewport{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 – Desktop */
}

.pds-slide{
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .6s ease; margin: 0;
}
.pds-slide.is-active{ opacity: 1; }

.pds-slide img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Navigation / Dots wie gehabt */
.pds-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:0; width:40px; height:40px; border-radius:999px; display:grid; place-items:center; cursor:pointer; }
.pds-prev{ left:10px; } .pds-next{ right:10px; }
.pds-dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:8px; }
.pds-dots button{ width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.6); }
.pds-dots button[aria-selected="true"]{ background:#fff; }

/* Responsive Ratio – etwas höher am Handy */
@media (max-width: 575.98px){
  .pds-carousel__viewport{ padding-bottom: 66.66%; } /* 3:2 */
}

.image-row {
  width: 100%;
  overflow: hidden;
}

.image-row img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Füllt den Container, ohne Verzerrung */
}

.image-row .col-md-6 {
  padding: 0;                /* Entfernt Zwischenraum zwischen Bildern */
  height: 420px;             /* Höhe der Zeile – anpassbar */
}


/* ===== Open House Banner (rot & größer) ===== */
.openhouse-banner{
  background: #c62828;              /* kräftiges Rot */
  color:#fff;
  padding: 24px 12px;                /* größerer Innenabstand */
  font-size: 1.2rem;                 /* Grundgröße hoch */
  line-height: 1.7;
  position: relative;
  z-index:1100;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  letter-spacing:.2px;
  margin-bottom:-1%;
}

.openhouse-banner strong{
  display:inline-block;
  font-size: 1.45rem;                /* Headline deutlich größer */
  font-weight: 800;
}

.openhouse-banner a{
  color:#fff;
  font-weight:700;
  text-decoration: underline;
}
.openhouse-banner a:hover{
  color:#ffecec;
}

/* Mobile Feintuning */
@media (max-width: 575.98px){
  .openhouse-banner{
    font-size:1.05rem;
    padding:18px 10px;
  }
  .openhouse-banner strong{
    font-size:1.25rem;
  }
}



@media (max-width: 767.98px) {
  .image-row .col-md-6 {
    height: 240px;           /* Kleinere Höhe am Handy */
  }
}

/* ===== Footer ===== */
.site-footer{
  background: #788e7a;               /* dunkler Ton */
  color: #e7ece9;
  padding-top: 48px;
}

.site-footer h5{
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.85rem;
  letter-spacing: .02em;
}
.site-footer a{
  color: #cfe0d1;
  text-decoration: none;
}
.site-footer a:hover{
  color: #fff;
  text-decoration: none;
}
.site-footer .list-unstyled li{
  margin-bottom: .5rem;
}
.site-footer address{
  color: #e7ece9;
  line-height: 1.5;
}
.site-footer .btn.btn-primary{
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Footer Bottom */
.site-footer .footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 12px;
  padding: 16px 0 22px;
  color: #cdd6d1;
}
.site-footer .footer-bottom a{
  color: var(--primary-color);
}
.site-footer .footer-bottom a:hover{
  color: #ffffff;
}

.footer-link {color:#FFFFFF !important;}

.content-link {color:#212529;}
.content-link:hover {color:#212529;
                    text-decoration: none;}



                

/* kleine Optimierungen für sehr kleine Screens */
@media (max-width: 575.98px){
  .site-footer .footer-bottom{
    text-align: center;
  }
}

/* Responsive */
@media (max-width: 991.98px){
  .specs{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px){
  .feature-grid{ grid-template-columns: 1fr; }
  .specs{ grid-template-columns: 1fr; }
}



@media (max-width: 768px) and (orientation:portrait) {

.carousel-logo {
    position: absolute;
    right: 28%;
    top: 20px;
    z-index: 1020;
    background: rgba(255, 255, 255, .9);
    border-radius: 14px;
    padding: 5px 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.carousel-logo img {
    height: 150px;
    width: auto;
    display: block;
}

.navbar .navbar-toggler {
    position: absolute;
    top: 230px;
    right: 38%;
    z-index: 1051;
    border: 0;
    outline: none !important;
    background: #788e7a;
    padding: 1.5rem 1.65rem;
    border-radius: .5rem;
}

.carousel-control-prev {
    width: 300px;
    height: 3000px;
    top: 55%;
    transform: translateY(-50%);
    margin-left: -20%;

}

.carousel-control-next {
    width: 300px;
    height: 3000px;
    top: 55%;
    transform: translateY(-50%);
    margin-right: -20%;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    margin-bottom:15px;
}

.galerie {
    flex: 0 0 58% !important;
    max-width: 50% !important;
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 80%;
    max-width: 80%;
}


 }