@charset "utf-8";

   :root{
      --nav-py-base: 1rem;
      --nav-py: var(--nav-py-base);
      --nav-bg: transparent;
      --nav-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.08);
      --footer-bg: #0b0e13;

    }  

    body{ padding-top: 0; }
a {color: var(--bs-nav-link-color);}
    .navbar{
      background-color: var(--nav-bg);
      padding-top: var(--nav-py);
      padding-bottom: var(--nav-py);
      transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease;
      will-change: background-color, padding;
      z-index: 9030;
        padding: 10px 0px !important;
    }

    .navbar.navbar--top{
      --nav-bg: transparent;
      box-shadow: none;
    }

    .navbar.navbar--scrolled{
      --nav-bg: rgba(255,255,255,.97);
      --nav-py: calc(var(--nav-py-base) * 0.9);
      box-shadow: var(--nav-shadow);
      backdrop-filter: blur(10px);
    }


   .brand-logo{
      width: 200px;
      height: auto;
      display: block;
      transition: width .25s ease;
    }
    .navbar.navbar--scrolled .brand-logo{
      width: 100px;
    }


.hero{
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      display: grid;
      place-items: center;
      color: #fff;
    }

.hero-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;     
    object-position: center;
    z-index: 0;
  }
    .hero-bg{
      position: absolute;
      inset: 0;
      z-index: 0;
      transform: translate3d(0,0,0) scale(1.08);
      will-change: transform;
      background:
        linear-gradient(120deg, rgba(0,0,0,.65), rgba(0,0,0,.25)),
        url("nix.jpg")
        center/cover no-repeat;
    }

    .hero-content{
      position: relative;
      z-index: 1;
      padding-top: clamp(5rem, 10vh, 8rem); /* Abstand zur overlay Navbar */
      padding-bottom: 5rem;
    }


 @media (prefers-reduced-motion: reduce){
    .hero-video{ display: none; }
    .hero{ background: #111; }
  }

#hero.hero {
  position: relative;            /* Referenz für ::before */
  overflow: hidden;              /* Overlay sauber im Header halten */
}

#hero.hero::before {
  content: "";
  position: absolute;
  inset: 0;                      /* top:0 right:0 bottom:0 left:0 */
  background: rgba(0, 0, 0, 0.30); /* halbtransparent schwarz */
  z-index: 1;                    /* liegt über dem Video */
  pointer-events: none;          /* Buttons bleiben klickbar */
}

/* Video bleibt unter dem Overlay */
#hero.hero .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Content liegt über dem Overlay */
#hero.hero .hero-content {
  position: relative;
  z-index: 2;
}

section{ padding: 2rem 0; }
#features h2 {font-size: 3rem;}
#hero h1 {color:#fff !important;}
.content-panel h2 {font-size: 3rem; font-weight: 900; color:#fff !important;}
.content-panel h3 {color:#fff !important;}
.footer-lower {padding: 0.5rem 0;}
.footer-top {padding: 1rem 0; background: #3d3d3d !important; color: #fff;}
.nologo {padding-top:7.5rem;}
/* Vollflächiger Bereich */
.tcm-center-content {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
    margin: 5rem 0px;
}

.tcm-center-content .tcm-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 75vw;
  background-image: var(--tcm-bg-image, url("../../../../../images/familie_01.avif"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: 0;
  transform: translateY(0);
  transition: transform 0.2s ease;
}

/* Textblock im Vordergrund */
.tcm-center-content .tcm-textblock {
  position: relative;
  z-index: 1;

  background: #000;
  color: #fff;

  width: 30vw;
  margin-left: 25vw;

  /* Oben/Unten 3rem Abstand */
  margin-top: 3rem;
  margin-bottom: 3rem;

  /* wächst automatisch mit Inhalt/Schrift */
  height: auto;
    transform: translateX(-12.5vw);
}


@media (max-width: 575.98px) {
  .tcm-center-content .tcm-bg {
    width: 100vw; 
  }

  .tcm-center-content .tcm-textblock {
    width: auto;
    margin: 0 10vw;            
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }
}



.footer-minimal{
  background: #0f1115;
  color: rgba(255,255,255,.82);
}

.footer-minimal .footer-heading{
  color: rgba(255,255,255,.92);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
}

.footer-minimal .footer-text{
  color: rgba(255,255,255,.70);
  line-height: 1.55;
  font-size: .98rem;
}

.footer-minimal .footer-muted{
  color: rgba(255,255,255,.55);
}

.footer-minimal .footer-link{
  color: rgba(255,255,255,.74);
  text-decoration: none;
  display: inline-block;
}

.footer-minimal .footer-link:hover,
.footer-minimal .footer-link:focus{
  color: rgba(255,255,255,.95);
  text-decoration: none;
}

.footer-minimal .footer-accent{
  color: rgba(215,195,154,.95);
}

.footer-minimal .footer-divider{
  border-color: rgba(255,255,255,.10);
  opacity: 1;
}

.footer-minimal .footer-list li{
  padding: .25rem 0;
}

/* Logo */
.footer-minimal .footer-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-minimal .footer-logo img{
  max-height: 150px;     /* edle, zurückhaltende Größe */
  width: auto;
  display: block;
}
.tcmtop {margin-top:6rem;}

.propertypricevalue {
	background: #666 none repeat scroll 0 0;

}
.contenth1 h1 {font-weight: 100 !important; margin: 3rem 0px}
    
.lead {  font-size: 1rem;  font-weight: 300;}

.osp-random-cols-3 {
	grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

 .text-justify {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }

.eigen2 .item-content {margin-top:3rem !important;}
.pagination__wrapper {margin-top:2rem;}

.active > .page-link, .page-link.active {
	z-index: 3;
	color: var(--bs-pagination-active-color);
	background-color:  rgba(215,195,154,.95);
	border-color:  rgba(215,195,154,.95);
}

.page-link {

	color: rgba(215,195,154,.95);

}
.alert-info {
	--bs-alert-color: #ffffff;
	--bs-alert-bg: #ccc;
	--bs-alert-border-color: rgba(215,195,154,.95);
	--bs-alert-link-color: var(--bs-info-text-emphasis);
}


.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: rgba(215,195,154,.95);
	--bs-btn-border-color: rgba(215,195,154,.95);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #333333;
	--bs-btn-hover-border-color: #333333;
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0a58ca;
	--bs-btn-active-border-color: #0a53be;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #0d6efd;
	--bs-btn-disabled-border-color: #0d6efd;
}

.theme4 .theme4propertyheader .features{
  display: flex;
  align-items: flex-end;     /* <— alle LI-Inhalte unten ausrichten */
  gap: 12px;                /* optional Abstand zwischen Items */
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme4 .theme4propertyheader .features > li{
  display: flex;            /* Inhalt im LI steuerbar machen */
  align-items: flex-end;    /* Inhalt unten */
  margin: 0;                /* falls LI margins haben */
  padding: 0;
}

.theme4 .theme4propertyheader .theme4headerlabel{
  margin: 0;
  padding: 0;
    font-size: 19px;          /* dein Wert */
}
.theme4 .theme4propertyheader .pricetext {
 margin-bottom: -3px !important ;
}

.theme4 .theme4propertyheader ul.features li {
	float: left;
	padding: 0px 10px 0px 10px;
	text-align: center;
	color: #999;
}

.features li {
    border-radius: 0px !important;
}

.summary .address {font-size: 1.4rem;}
.description h3 {line-height: 24px;}

@media (max-width: 821px) {
.no-card { 
    padding-left: 1rem;  
    background: rgba(255, 255, 255, 0.7);  
    backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
    
}
    
    .no-card a {color:#000 !important;}
}

.dj-simple-contact-form.style-4 .dj-simple-contact-form.button {
	background: none repeat scroll 0 0 rgba(215,195,154,.95);
}

.dj-simple-contact-form.style-4 .dj-simple-contact-form.button:hover,
.dj-simple-contact-form.style-4 .dj-simple-contact-form.button:focus{
	background:#0f1115;
}
.chronocredits, a .chronocredits {display:none !important;}
h1.pageTitle {

    line-height: 3rem;
    
}

@media (max-width: 821px) {
  .theme4 .pricetext {font-size: 14px !important;}
    .theme4 .theme4headerlabel {font-size: 12px !important;}
    .theme4 .theme4propertyheader {
   
    margin-left: 0rem !important;
}
}